/* April Australia: only the parts that do not exist in the original theme.
   Everything else is the original style.css, untouched. */

/* header button: same component as the original "join us" */
.recruit-icon span { white-space: nowrap; }

/* work thumbnails: whole video tile is a link */
.t-thumb.has-video a.t-thumb-l { z-index: 2; }

/* ---------- "Good to know" section (takes the place of April People) ---------- */
.faq-au { position: relative; height: 100%; display: flex; align-items: center; text-align: left; }
.faq-au > .row { width: 100%; margin: 0; }
.faq-au .faq-inner { display: flex; align-items: flex-start; padding: 0; }
.faq-au .faq-l { width: 34%; padding-right: 3vw; }
.faq-au .faq-r { width: 66%; max-height: 72vh; overflow-y: auto; scrollbar-width: none; }
.faq-au .faq-r::-webkit-scrollbar { display: none; }
.faq-au h2 { font-family: "GothamUltra", "Arial", Helvetica, sans-serif; font-size: 4vw; line-height: 1.05; text-transform: uppercase; margin: 0;
  background-image: linear-gradient(to left, #7c76e3, #ff58bc, #77d2d7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: 2vh; position: relative; display: inline-block; }
.faq-au h2:after { content: ""; position: absolute; height: .5vh; width: 13%; left: 0; bottom: 0; background-color: #77d2d7; }
.faq-au .faq-l p { font-family: "Gotham", "Arial", Helvetica, sans-serif; color: #77d2d7; font-size: 1vw; margin-top: 3vh; }
.faq-au .faq-item { border-bottom: 1px solid rgba(119, 210, 215, .25); }
.faq-au .faq-q { position: relative; display: block; overflow: hidden; cursor: pointer; font-family: "GothamThin", "Arial", Helvetica, sans-serif; color: #77d2d7 !important;
  font-size: 1.9vw; line-height: 3.4vw; padding: 0 1vw; text-decoration: none !important; z-index: 0; }
.faq-au .faq-q:after { content: ""; background: linear-gradient(to right, transparent, #7c76e3, #6651e8, #ff5ab8, #faac4f); position: absolute; top: 50%; transform: translateY(-50%); left: 0; display: block; width: 0; height: 110%; z-index: -1; }
.faq-au .faq-q:hover, .faq-au .faq-item.open .faq-q { color: #fff !important; font-family: "Gotham", "Arial", Helvetica, sans-serif; }
.faq-au .faq-q:hover:after { animation: hover-animation 1s ease-in-out; }
.faq-au .faq-a { max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.faq-au .faq-item.open .faq-a { max-height: 40vh; }
.faq-au .faq-a p { font-family: "NexaBook", "Arial", Helvetica, sans-serif; color: #fff; font-size: 1.05vw; line-height: 1.6; padding: 0 1vw 2vh; margin: 0; max-width: 46vw; }
#au-showreel { display: none; margin-top: 3vh; }
#au-showreel a { font-family: "Nexa", "Arial", Helvetica, sans-serif; color: #fff; font-size: 1.1vw; border-bottom: .3vh solid #77d2d7; text-decoration: none; }

/* ---------- contact board (the original recruitment board) ---------- */
.recruit-content .re-lc .re-group ul li, .recruit-content .re-lc .re-group ul li a { font-size: 1.2vw; line-height: 1.5vw; font-family: "NexaLight", "Arial", Helvetica, sans-serif; color: #000; }
.recruit-content .re-lc .re-group ul li a.mail { color: #49c3c9; }
.recruit-content .re-rc p { font-size: 1.3vw; line-height: 1.6vw; }
.recruit-content .re-rc p a.mail { text-decoration: none; }

/* case pages */
.page-content figure.wp-block-image { margin: 0 0 1rem; }
.page-content figure.wp-block-image img { max-width: 100%; height: auto; }
.page-content h4 { font-family: "Nexa", "Arial", Helvetica, sans-serif; margin-top: 1.5rem; }
.au-case-cta { margin: 6vh 0 10vh; }
.au-case-cta a { font-family: "Nexa", "Arial", Helvetica, sans-serif; text-transform: uppercase; color: #fff !important; background-color: #77d2d7; display: inline-block; padding: .5vw 2vw; font-size: 1vw; text-decoration: none; }
.au-case-cta a:hover { background-color: #000; }




/* ---------- services: sub-services listed in the column ---------- */
/* readability: dark backdrop behind the white text, larger type, 3D shape faded so it never sits under the words */
.pol-col.folded { background-image: linear-gradient(rgba(0, 25, 35, .86), rgba(0, 25, 35, .86)), url(../theme/images/pol3d-bg.jpg); }
.pol-col .pol3d { transition: opacity .6s; }
.pol-col.folded .pol3d { opacity: .28; }
.pol3d-title .pol3d-content { font-size: 1.12vw; line-height: 1.65; padding: 0 9%; font-family: "NexaBook", "Arial", Helvetica, sans-serif; color: rgba(255,255,255,.88); }
.pol3d-title .pol3d-content ul.au-svc { list-style: none; margin: 2.2vh 0; padding: 0; font-family: "Nexa", "Arial", Helvetica, sans-serif; font-size: 1.1vw; line-height: 1.85; letter-spacing: .02em; color: #77d2d7; }
.pol3d-title .pol3d-content .service-vm-btn { font-size: 1.2vw; }
.pol-popup p { font-size: 18px; color: #000; margin-bottom: 10px; }
.pol-popup h5 { font-size: 20px; }
#au-cats { position: absolute; top: 15vh; left: 8.2%; z-index: 3; font-family: "Nexa", "Arial", Helvetica, sans-serif; text-transform: uppercase; font-size: 1.1vw; }
#au-cats a { cursor: pointer; margin-right: 2.2vw; padding-bottom: .4vh; color: #000; border-bottom: .3vh solid transparent; }
#au-cats a.active { border-bottom-color: #77d2d7; }
#au-cats a:hover { color: #49c3c9; }
.pol3d-title .pol3d-content p { margin-bottom: 0; }

/* ---------- work: one row of large tiles, titles always visible ---------- */
.our-work-thumbs { margin-left: 7%; }
.our-work-thumbs #our-work-drag { grid-template-rows: auto; }
.our-work-thumbs .col-thumb { width: 46vw; margin-bottom: 0; padding-left: 1.2vw; }
.our-work-thumbs .t-thumb { overflow: hidden; background: #eef8f9; aspect-ratio: 16 / 9; }
.our-work-thumbs .t-thumb > a, .our-work-thumbs .t-thumb > a img { display: block; width: 100%; height: 100%; }
.our-work-thumbs .t-thumb img { width: 100%; height: 100%; object-fit: cover; max-width: none !important; }
.our-work-thumbs .t-thumb .videoWrapper { height: 100%; padding-bottom: 0; }
.our-work-thumbs .t-thumb .videoWrapper > div { height: 100%; }
.our-work-thumbs .t-title { visibility: visible; direction: ltr; margin-top: 1.4vh; }
.our-work-thumbs .t-title h5 { font-size: .9vw; color: #49c3c9; min-height: 1.1vw; }
.our-work-thumbs .t-title h3, .our-work-thumbs .t-title h3 a { font-size: 1.5vw; line-height: 1.25; white-space: normal; }

/* case pages: images at full column width */
.page-content figure.wp-block-image img { width: 100%; }

/* ---------- work: play button on video tiles + large player ---------- */
.our-work-thumbs .col-thumb { transition: opacity .4s; }
.t-thumb.has-video a.au-play { cursor: pointer; display: flex; align-items: center; justify-content: center; background: rgba(0, 25, 35, .12); transition: background .3s; }
.t-thumb.has-video a.au-play:hover { background: rgba(0, 25, 35, .35); }
.t-thumb.has-video a.au-play i { width: 5.6vw; height: 5.6vw; border-radius: 50%; border: .3vw solid #fff; position: relative; transition: transform .3s, background .3s; }
.t-thumb.has-video a.au-play i:after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 1vw 0 1vw 1.7vw; border-color: transparent transparent transparent #fff; }
.t-thumb.has-video a.au-play:hover i { transform: scale(1.12); background: #77d2d7; }
.our-work-thumbs .t-thumb img { transition: transform .8s; }
.our-work-thumbs .col-thumb:hover .t-thumb img { transform: scale(1.04); }
#au-lightbox { position: fixed; inset: 0; z-index: 999999; background: rgba(0, 25, 35, .94); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
#au-lightbox.show { opacity: 1; visibility: visible; }
#au-lightbox .au-lb-inner { width: min(84vw, 133vh); }
#au-lightbox .au-lb-frame { position: relative; padding-bottom: 56.25%; background: #000; box-shadow: 0 0 60px rgba(0, 0, 0, .6); }
#au-lightbox .au-lb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
#au-lightbox .au-lb-cap { display: flex; justify-content: space-between; align-items: center; gap: 2vw; margin-top: 1.6vh; font-family: "Nexa", "Arial", Helvetica, sans-serif; color: #fff; font-size: 1.2vw; }
#au-lightbox .au-lb-cap a { color: #77d2d7; text-transform: uppercase; font-size: 1vw; white-space: nowrap; border-bottom: .3vh solid #77d2d7; text-decoration: none; }
#au-lightbox .au-lb-close { position: absolute; right: 3vw; top: 2vh; color: #fff; font-family: "GothamThin", "Arial", Helvetica, sans-serif; font-size: 4vw; line-height: 1; cursor: pointer; }


/* buttons that used to be javascript: links */
a.recruit-icon, a.menu-icon, .client-item a, #au-cats a, #au-showreel a { cursor: pointer; }

/* ---------- work: AI showreel as one large player ---------- */
#au-reel { display: none; position: absolute; z-index: 2; left: 50%; top: 53%; transform: translate(-50%, -50%); width: min(64vw, 108vh); aspect-ratio: 16 / 9; background: #001923; box-shadow: 0 1.5vw 4vw rgba(0, 25, 35, .28); }
.our-work.au-reel-on #au-reel { display: block; }
.our-work.au-reel-on .our-work-thumbs, .our-work.au-reel-on #dragbar { display: none; }
#au-reel iframe, #au-reel a, #au-reel img { position: absolute; inset: 0; width: 100%; height: 100%; }
#au-reel img { object-fit: cover; }
#au-reel a { cursor: pointer; display: block; }
#au-reel a i { position: absolute; left: 50%; top: 50%; width: 8vw; height: 8vw; margin: -4vw 0 0 -4vw; border-radius: 50%; border: .35vw solid #fff; background: rgba(0, 25, 35, .35); transition: transform .3s, background .3s; }
#au-reel a i:after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 1.4vw 0 1.4vw 2.4vw; border-color: transparent transparent transparent #fff; }
#au-reel a:hover i { transform: scale(1.1); background: #77d2d7; }
#au-cats { font-size: 1.2vw; }


/* ---------- values: livelier screen (float, depth on mouse move, drifting colour, staggered entrance) ---------- */
@keyframes au-float { 0%, 100% { transform: translate(-50%, -50%) rotate(-1.5deg); } 50% { transform: translate(-50%, -57%) rotate(1.5deg); } }
@keyframes au-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes au-rise { from { opacity: 0; transform: translateY(9vh); } to { opacity: 1; transform: none; } }
.value-col .value-col-i img { animation: au-float 5.5s ease-in-out infinite; translate: var(--au-px, 0px) var(--au-py, 0px); transition: translate .5s ease-out, scale .45s cubic-bezier(.2, .7, .2, 1.4); }
.value-col:nth-child(2) .value-col-i img { animation-duration: 6.5s; animation-delay: -2s; }
.value-col:nth-child(3) .value-col-i img { animation-duration: 5s; animation-delay: -3.5s; }
.value-col .value-col-i:hover img { scale: 1.1; }
.value-col .value-col-i h5 { transition: letter-spacing .45s, transform .45s; }
.value-col .value-col-i:hover h5 { letter-spacing: .12em; }
.values-group-bg .value-ani-i .bg-vl { background-size: 220% 100%; animation: au-drift 7s ease-in-out infinite alternate; }
.values-group-bg .vlg-row > div:nth-child(2) .bg-vl { animation-duration: 9s; }
.values-group-bg .vlg-row > div:nth-child(3) .bg-vl { animation-duration: 11s; }
#section_values.active .value-row > .value-col, #section_values.active .vlg-row > div { animation: au-rise .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .7s; }
#section_values.active .value-row > .value-col:nth-child(2), #section_values.active .vlg-row > div:nth-child(2) { animation-delay: .85s; }
#section_values.active .value-row > .value-col:nth-child(3), #section_values.active .vlg-row > div:nth-child(3) { animation-delay: 1s; }
@media (prefers-reduced-motion: reduce) {
  .value-col .value-col-i img, .values-group-bg .value-ani-i .bg-vl, #section_values.active .value-row > .value-col, #section_values.active .vlg-row > div { animation: none; }
}

.pol-popup p.au-pop-desc { display: none; }

/* award pop-up: second slide (tall image, caption underneath) and the arrows */
/* both slides are sized from the window height as well as its width, so nothing falls off a short screen */
#notice_popup { z-index: 99999999; --w: min(50vw, 76vh); width: var(--w); left: calc(50% - var(--w) / 2); top: 50%; transform: translateY(-50%); }
#notice_popup .np-inner > img { display: block; width: 100%; }
#notice_popup.au-pop2, #notice_popup.au-popcap { --w: min(40vw, 60vh); background: #fff; }
#notice_popup.au-pop2 .np-inner, #notice_popup.au-popcap .np-inner { overflow: hidden; border-radius: 40px / 24px; }
#notice_popup.au-pop2 .np-inner > img, #notice_popup.au-popcap .np-inner > img { display: block; width: 100%; }
#notice_popup .np-read-more { display: none; }
#notice_popup .np-inner { overflow: hidden; border-radius: 40px / 24px; }
#notice_popup .close-np-btn { z-index: 3; }
#notice_popup .au-np-cap { display: none; margin: 0; padding: calc(var(--w) * .035) calc(var(--w) * .05) calc(var(--w) * .042); background: #fff; color: #000; text-align: center; font-family: "NexaBook", "Arial", Helvetica, sans-serif; font-size: calc(var(--w) * .029); line-height: 1.5; text-wrap: balance; }
#notice_popup .au-np-cap strong { font-family: "Nexa", "Arial", Helvetica, sans-serif; font-weight: normal; color: #0e8f9c; font-size: 1.12em; }
#notice_popup.au-pop2 .au-np-cap, #notice_popup.au-popcap .au-np-cap { display: block; }
#notice_popup .au-np-nav { position: absolute; top: 50%; width: 3vw; height: 3vw; margin-top: -1.5vw; border-radius: 50%; background: #fff; box-shadow: 0 .3vw 1vw rgba(0, 0, 0, .35); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .3s; }
#notice_popup .au-np-nav:hover { background: #77d2d7; }
#notice_popup .au-np-prev { left: -4.2vw; }
#notice_popup .au-np-next { right: -4.2vw; }
#notice_popup .au-np-nav i { width: .8vw; height: .8vw; border: solid #000; border-width: 0 0 .2vw .2vw; transform: rotate(45deg); margin-left: .3vw; }
#notice_popup .au-np-next i { transform: rotate(-135deg); margin: 0 .3vw 0 0; }
/* footer left: copyright and privacy link (replaces the social links) */
.contact-group.btm-social { font-family: "Nexa", "Arial", Helvetica, sans-serif; font-size: .8vw; line-height: 1.6vw; color: #000; transition: color 1s; align-items: center; }
.contact-group.btm-social.bh, .contact-group.btm-social.gh { color: #fff; }
.contact-group.btm-social a.au-priv, .contact-group.btm-social.bh a.au-priv, .contact-group.btm-social.gh a.au-priv, .contact-group.btm-social a.au-priv:hover { font-size: inherit; line-height: inherit; margin: 0 0 0 .8vw; padding-left: .8vw; border-left: 1px solid currentColor; overflow: visible; display: inline; color: inherit; }
/* shown on the last screen only */
.contact-group.btm-social { display: none; }
body.au-last .contact-group.btm-social { display: flex; }
.contact-group.btm-social .au-copy-l { margin-right: .35em; }
.au-foot { font-family: "Nexa", "Arial", Helvetica, sans-serif; font-size: 12px; color: #666; margin: 0 0 6vh; }
.au-foot a { color: #49c3c9; }

/* enquiry board: no link in the bottom bar */
.recruit-footer a.ab-pp { display: none !important; }

/* home: "Touch & Hold" as one plain line of text (no ring around the &) */
#press_group { width: auto; height: auto; }
#press_group .press_group_i { width: auto; height: auto; display: flex; align-items: center; gap: .45em; cursor: pointer; padding: 1vh 1vw; font-size: .8vw; letter-spacing: .14em; -webkit-user-select: none; user-select: none; }
#press_group .press_group_i .pnh_text, #press_group .press_group_i .pnh_text.pnh_bf, #press_group .press_group_i .pnh_text.pnh_af { position: static; transform: none; margin: 0; font-size: inherit; font-weight: normal; }
#press_group .press_group_i #pnh, #press_group .press_group_i #pnh:hover { width: auto; height: auto; border: 0; border-radius: 0; background: none; color: #fff; font-family: "Gotham", "Arial", Helvetica, sans-serif; font-weight: normal; font-size: inherit; line-height: inherit; }

/* hero: "We are" sits a little higher above APRIL */
.contact-col .contact-col-title h5 { position: relative; top: -1.3vw; }

/* "for the AI era": a small line under "brand growth partner", twin of "We are your" above it */
.ms-text .ms-text-group .bhst { position: relative; }
.ms-text .ms-text-group .bhst .au-bh-after { text-transform: none; position: absolute; top: 104%; left: 0; right: 0; font-family: "NexaBook", "Arial", Helvetica, sans-serif; font-size: .75vw; margin: 0 auto; -webkit-text-fill-color: #fff; color: #fff; white-space: nowrap; }
.our-work-thumbs .t-thumb img.au-whole { object-fit: contain; position: relative; z-index: 1; }
.our-work-thumbs .t-thumb.au-fill { position: relative; }
.our-work-thumbs .t-thumb.au-fill:before { content: ""; position: absolute; inset: -8%; background: var(--au-fill) center / cover no-repeat; filter: blur(22px) saturate(1.1); opacity: .9; z-index: 0; }

/* desktop work strip: a thicker, easier-to-grab scroll bar */
#dragbar { height: 4vh; }
#dragbar .dragbar_dot .dragbar-line { border-bottom: 3px solid #e2e2e2; }
#dragbar .dragbar_dot:before, #dragbar .dragbar_dot:after { top: calc(50% - .25vw); }
#dragbar .l-dragger { height: 1.6vh; margin: 1.2vh 0; padding: 0; background: transparent; cursor: grab; border-radius: 99px; }
#dragbar .l-dragger:active { cursor: grabbing; }
#dragbar .l-dragger .l-dragger-inner { border-radius: 99px; transition: background-color .2s; }
#dragbar .l-dragger:hover .l-dragger-inner { background-color: #49c3c9; }
#dragbar .l-dragger:before { content: ""; position: absolute; left: 0; right: 0; top: -1.6vh; bottom: -1.6vh; }

/* arriving from "Start a project": the contact board opens straight away, without the award pop-up */
html.au-enquire #notice_popup { display: none !important; }

/* services: link from each service to its Work tab (link on desktop, last line of the pop-up on phones) */
.pol3d-title .pol3d-content a.au-svc-work { display: inline-block; margin-top: 1vh; font-family: "Nexa", "Arial", Helvetica, sans-serif; font-size: 1.05vw; color: #77d2d7 !important; text-decoration: none !important; border-bottom: .25vh solid #77d2d7; padding-bottom: .3vh; cursor: pointer; transition: color .2s, border-color .2s; }
.pol3d-title .pol3d-content a.au-svc-work:after { content: "\00a0\2192"; display: inline-block; transition: transform .25s; }
.pol3d-title .pol3d-content a.au-svc-work:hover { color: #fff !important; border-bottom-color: #fff; }
.pol3d-title .pol3d-content a.au-svc-work:hover:after { transform: translateX(.4vw); }
.pol-popup .au-pop-work { margin-top: 3vh; }
.pol-popup .au-pop-work a { font-family: "NexaHeavy", "Nexa", "Arial", Helvetica, sans-serif; color: #49c3c9; font-size: 1.1vw; border-bottom: .3vh solid #77d2d7; text-decoration: none; cursor: pointer; }
.pol-popup .au-pop-work a:after { content: "\00a0\2192"; }

/* Work screen: "Back to services", only after arriving from a service link */
#au-back { display: none; position: absolute; left: 8.2%; bottom: 11.4vh; z-index: 4; font-family: "NexaHeavy", "Nexa", "Arial", Helvetica, sans-serif; font-size: 1vw; color: #49c3c9; text-decoration: none; border-bottom: .25vh solid #77d2d7; padding-bottom: .3vh; cursor: pointer; }
#au-back:hover { color: #000; }
body.au-from-svc #au-back { display: inline-block; }

/* april.com.vn: /facebook /youtube at the bottom of every screen, as on the original site; copyright + privacy join them on the last screen */
.contact-group.btm-social.au-social { display: flex; }
.contact-group.btm-social.au-social .au-copy, .contact-group.btm-social.au-social a.au-priv { display: none !important; }
body.au-last .contact-group.btm-social.au-social .au-copy, body.au-last .contact-group.btm-social.au-social a.au-priv { display: inline-block !important; }
body.au-last .contact-group.btm-social.au-social .au-copy { margin-left: 1.2vw; }

/* services: the bold opening line above each description */
.pol3d-title .pol3d-content .au-svc-lead { display: block; font-family: "Nexa", "Arial", Helvetica, sans-serif; font-weight: normal; font-size: 1.25vw; line-height: 1.3; letter-spacing: .01em; margin-bottom: 1.2vh; color: #fff; }
.pol-popup .au-pop-desc .au-svc-lead { display: block; font-family: "NexaHeavy", "Nexa", "Arial", Helvetica, sans-serif; color: #000; margin-bottom: .8vh; }

/* values: centred, lines break only between phrases (| in texts.js) */
.big-values-slider .value-item .top-value .content-vl p { text-align: center !important; text-wrap: pretty; word-spacing: normal; }
.big-values-slider .content-vl .au-ph { white-space: nowrap; }
@media (min-width: 768px) and (orientation: landscape), (min-width: 1025px) {
  /* desktop: one line per sentence part as written in texts.js (||); same size for all three values */
  .big-values-slider .value-item .top-value .content-vl { padding: 0 9%; }
  .big-values-slider .value-item .top-value .content-vl p { font-size: 2.6vw !important; line-height: 1.6; }
}

/* Work screen in 2 rows (april.com.vn): smaller tiles, smaller names */
.au-rows2 .our-work-thumbs #our-work-drag { row-gap: 2.4vh; }
.au-rows2 .our-work-thumbs .t-title { margin-top: 1vh; }
.au-rows2 .our-work-thumbs .t-title h5 { font-size: .72vw; min-height: .9vw; }
.au-rows2 .our-work-thumbs .t-title h3, .au-rows2 .our-work-thumbs .t-title h3 a { font-size: 1.05vw; line-height: 1.25; }

/* case pages: a portrait picture (poster, print ad) is shown whole within the screen height, centred */
.page-content figure.wp-block-image img { max-height: 92vh; width: auto; max-width: 100%; display: block; margin: 0 auto; }

/* story header on the next screens keeps its small line ("for the AI era" / "trong kỷ nguyên AI") under "brand growth partner" */
.ms-text .ms-text-group .bhst .au-bh-after { visibility: visible !important; opacity: 1 !important; }
/* ...and is readable once the header has shrunk to the top (screen 1 = the big centred header keeps its size) */
body:not(.fp-viewing-1) .ms-text .ms-text-group .bhst .au-bh-after { font-size: max(1.15vw, 15px); top: 110%; transition: font-size .3s; }

/* VI / EN only on the first screen */
.btm-contact .languages { transition: opacity .4s, visibility .4s; }
/* "More possibilities" screen: the round shape no longer sits under the logo */
.about-icon.bc1-icon { left: 21vw !important; top: 13vh !important; }
/* close button on a white disc, so it shows on dark pictures too */
#notice_popup .close-np-btn { background: rgba(255, 255, 255, .92); border-radius: 50%; padding: .5vw; line-height: 0; box-shadow: 0 0 .6vw rgba(0, 0, 0, .25); }

/* ---------- award pop-ups: picture + plaque (award / medal / project / credit), one system for every award ---------- */
#notice_popup.au-plaque { --w: min(48vw, 92vh); background: #f5f7f6; }
#notice_popup.au-plaque .np-inner { position: relative; overflow: hidden; border-radius: 40px / 24px; background: #f5f7f6; }
#notice_popup.au-plaque .np-inner > img { display: block; width: 100%; }
#notice_popup.au-plaque .au-np-cap { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: absolute; left: 4.8%; right: 29%; top: 62.5%; bottom: 4%; padding: 0; margin: 0; background: none; text-align: left; line-height: 1.25; }
#notice_popup .au-np-cap span { display: block; }
#notice_popup .au-pl-award { font-family: "Nexa", "Arial", Helvetica, sans-serif; text-transform: uppercase; letter-spacing: .24em; font-size: calc(var(--w) * .0165); color: #8a7350; }
#notice_popup .au-pl-title { font-family: "NexaLight", "Arial", Helvetica, sans-serif; text-transform: uppercase; letter-spacing: .05em; font-size: calc(var(--w) * .056); line-height: 1.3; padding: .12em 0 .02em; margin: .12em 0 .2em; color: #1d2a2e; } /* room above for Vietnamese accents (the metal gradient clips to the line box) */
#notice_popup .au-pl-platinum { background: linear-gradient(100deg, #4a5660 0%, #7f8b96 40%, #a7b1ba 52%, #7f8b96 64%, #4a5660 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#notice_popup .au-pl-bronze { background: linear-gradient(100deg, #7a3f1c 0%, #b06a37 40%, #d39261 52%, #b06a37 64%, #7a3f1c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#notice_popup .au-pl-project { font-family: "NexaBook", "Arial", Helvetica, sans-serif; font-size: calc(var(--w) * .025); line-height: 1.38; color: #1d2a2e; }
#notice_popup .au-pl-credit { font-family: "NexaBook", "Arial", Helvetica, sans-serif; font-size: calc(var(--w) * .0158); line-height: 1.55; color: #737b7f; margin-top: 1em; padding-top: .9em; border-top: 1px solid rgba(29, 42, 46, .14); }
#notice_popup .au-pl-proud { font-family: "NexaBook", "Arial", Helvetica, sans-serif; font-size: calc(var(--w) * .021); color: #8a7350; letter-spacing: .02em; }
#notice_popup .au-pl-title { margin: .06em 0 .1em; }
#notice_popup .au-pl-award { margin-bottom: 1.1em; }

/* award plaque v3: the caption flows under the photo, so the card is only as tall as its text */
#notice_popup.au-plaque .au-np-cap { position: relative; z-index: 2; left: auto; right: auto; top: auto; bottom: auto; justify-content: flex-start; margin-top: calc(var(--w) * (.5556 - var(--ar, .87))); padding: 0 29% calc(var(--w) * .045) 4.8%; }
#notice_popup .au-pl-proud b.au-pl-client { font-family: "Nexa", "Arial", Helvetica, sans-serif; font-weight: normal; color: #1d2a2e; }
#notice_popup .au-np-cap .au-pl-credit .au-pl-seg { display: inline; }
#notice_popup .au-np-cap .au-pl-credit .au-pl-seg + .au-pl-seg:before { content: "·"; margin: 0 .55em; }
#notice_popup .au-np-cap .au-pl-credit .au-pl-name { display: inline; white-space: nowrap; color: #4a5357; }

/* ---------- Oct 18 (UX pass) ---------- */
/* the award pop-up shows once per visit, and never when coming back from a project */
html.au-nopop #notice_popup { display: none !important; }
/* play button: smaller, still in the middle of the picture (it tells the visitor the project has a film) */
.t-thumb.has-video a.au-play i { --pb: clamp(36px, calc(var(--tile, 25vw) * .13), 64px); width: var(--pb); height: var(--pb); border-width: 2px; }
.t-thumb.has-video a.au-play i:after { border-width: calc(var(--pb) * .17) 0 calc(var(--pb) * .17) calc(var(--pb) * .28); }
/* project names: when a name needs two lines, the lines are balanced (no lone word on the second line) */
.au-ph { display: inline-block; } /* see phr() in au.js: lines break only between phrases */
/* award pop-up: phrases that belong together never break */
#notice_popup .au-nb { font-style: normal; white-space: nowrap; }
#notice_popup .au-pl-proud b.au-pl-client { white-space: nowrap; }
/* end of a project page: next project + start a project */
.au-case-cta { display: flex; align-items: center; justify-content: space-between; gap: 3vw; flex-wrap: wrap; border-top: 1px solid rgba(0, 0, 0, .12); padding-top: 3vh; }
.au-case-next { flex: 1 1 auto; min-width: 0; }
.au-next { display: inline-flex; align-items: center; gap: 1.2vw; text-decoration: none !important; color: #000 !important; }
.au-next small { display: block; font-family: "Nexa", "Arial", Helvetica, sans-serif; font-size: .8vw; letter-spacing: .14em; text-transform: uppercase; color: #49c3c9; margin-bottom: .4vw; }
.au-next > div > span { display: block; font-family: "NexaBook", "Arial", Helvetica, sans-serif; font-size: 1.35vw; line-height: 1.3; }
.au-next > div > span b { font-family: "Nexa", "Arial", Helvetica, sans-serif; font-weight: normal; }
.au-next > i { font-style: normal; font-size: 2vw; color: #49c3c9; transition: transform .3s; }
.au-next:hover > i { transform: translateX(.6vw); }
.au-case-cta a.au-next { background: none; padding: 0; text-transform: none; font-size: inherit; color: #000 !important; }
.au-case-cta a.au-next:hover { background: none; }
#notice_popup .au-np-cap .au-pl-credit .au-pl-seg { white-space: nowrap; }
.au-case-cta a.au-next { display: inline-flex; align-items: center; }
.au-next > div > span b { display: block; margin-bottom: .2em; }
#notice_popup .au-np-cap .au-pl-credit .au-pl-name { font-family: "Nexa", "Arial", Helvetica, sans-serif; color: #1d2a2e; }
#notice_popup .au-pl-project b { font-family: "Nexa", "Arial", Helvetica, sans-serif; font-weight: normal; }
/* coming back from a project page: no loading screen, the Work screen shows at once */
html.au-ret #overlay { display: none !important; }
html.au-ret header, html.au-ret header *, html.au-ret header *:after { transition: none !important; }
.au-nw { white-space: nowrap; }
/* next project: the title stays on one line on wide screens */
.au-next > div > span { white-space: nowrap; }

/* Work cards on desktop: same card height in every tab. Client name on one line, project name in a two-line area
   (au.js fitDeskTitles makes long names slightly smaller so they fit; the picture never shrinks for them). */
html:not(.au-m) .our-work-thumbs .t-title h5 { white-space: nowrap; overflow: hidden; line-height: 1.25; height: 1.25em; min-height: 0; }
html:not(.au-m) .our-work-thumbs .t-title h3 { height: calc(2 * 1.25 * 1.5vw); margin-bottom: 0; }
html:not(.au-m).au-rows2 .our-work-thumbs .t-title h3 { height: calc(2 * 1.25 * 1.05vw); }
/* room under the last title line for letters that hang below it (g, p, y, ệ): the strip clips at its edge */
html:not(.au-m) .our-work-thumbs .t-title { padding-bottom: .6vw; }

/* values, open quote on desktop: the coloured area ends a short way under the text (it was a fixed 91vh block,
   leaving a large empty band), and the white Go back bar is slimmer */
@media (min-width: 768px) and (orientation: landscape), (min-width: 1025px) {
  .big-values-slider .value-item .top-value { height: auto; }
  .big-values-slider .value-item .top-value .content-vl { height: auto; padding-bottom: 12vh; }
  .big-values-slider .value-item .top-value .footer-vl { height: 11vh; min-height: 64px; }
}

/* clients on desktop, in pages (au.js): the pages sit side by side and slide; dots under the last row */
@media (min-width: 768px) and (orientation: landscape), (min-width: 1025px) {
  .client-list .client-list-inner { overflow: hidden; }
  .client-list-inner .au-dscroll { display: flex; width: 100%; transition: transform .8s cubic-bezier(.65, 0, .35, 1); will-change: transform; backface-visibility: hidden; }
  .client-list-inner .au-dp { flex: 0 0 100%; width: 100%; }
  .client-list-inner .au-ddots { display: flex; gap: 8px; padding: 2.4vh 0 0 1.2vw; }
  .client-list-inner .au-ddots i { width: 7px; height: 7px; border-radius: 50%; background: #c9d3d6; cursor: pointer; transition: background .3s, width .3s; }
  .client-list-inner .au-ddots i.on { background: #87cfd6; width: 20px; border-radius: 4px; }
}

/* clients on desktop (user, 19 Oct): logos keep their size; the grid uses the free width (from just right of the title to
   just left of the dots) and the free height (rows spread over the area); no grey line under the last row */
@media (min-width: 768px) and (orientation: landscape), (min-width: 1025px) {
  .client-list { padding-left: 17%; width: calc(100% + 6.5vw); max-width: none; }
  .client-list .client-list-inner.au-dpaged { padding-bottom: 12vh; }
  .client-list .client-list-inner.au-dpaged { display: flex; flex-direction: column; }
  .client-list-inner.au-dpaged .au-dscroll { flex: 1 1 auto; min-height: 0; }
  .client-list-inner.au-dpaged .au-dp { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
  .client-list-inner.au-dpaged .current-client, .client-list-inner.au-dpaged .old-client { padding-bottom: 0; margin-bottom: 0; border-bottom: 0 !important; }
  .client-list-inner.au-dpaged .client-item { padding: 0 1.1vw; }
  .client-list-inner.au-dpaged .au-ddots { flex: 0 0 auto; }
}

/* language switch on project and privacy pages (vi / en, same look as on the home page) */
header .au-langs { display: flex; align-items: center; gap: 4px; margin-left: 2.2vw; font-family: "Nexa", "Arial", Helvetica, sans-serif; }
header .au-langs a { color: #77d2d7; display: inline-block; width: 25px; height: 25px; line-height: 25px; text-align: center; text-transform: uppercase; text-decoration: none; font-size: 13px; }
header .au-langs a.active { background: #77d2d7; color: #fff; border-radius: 50%; }

/* "See all our work →" and the other service links: the arrow hangs outside, so the words themselves are centred */
.pol-popup .au-pop-work a { position: relative; }
.pol-popup .au-pop-work a:after { position: absolute; left: 100%; top: 0; white-space: nowrap; }
/* while a service pop-up is open the menu button steps aside, so the pop-up's × cannot be mistaken for it */
body.au-pop-open header .menu-group { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .2s; }


/* Work screen on desktop: no back-to-top arrow above the e-mail (user, 19 Oct) */
html:not(.au-m) .our-work .btt { display: none !important; }