/* April Australia: phone and portrait-tablet layout.
   The desktop theme sizes everything in vw for a landscape screen. Here every screen is re-set for a
   tall screen: readable type, tap targets, tap instead of hover. Scroll-by-screen and the theme's
   transitions are kept.  --m scales type down on tablets held upright. */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:root { --m: 1; }
@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) { :root { --m: .72; --ccols: 4; --card: 64vw; --ratio: 16 / 10; } }

/* work tiles follow the width chosen in pre.js on every screen size */
.our-work-thumbs .col-thumb { width: var(--tile, 46vw); }

@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {

  /* ---------- shared chrome ---------- */
  header .col { padding: 2.4vh 0; max-width: 88%; flex: 0 0 88%; margin-left: 6%; }
  .logo-group, .logo-group .logo { height: 5.6vh; width: 5.6vh; min-height: 38px; min-width: 38px; }
  .logo-group .logo img { max-height: 5.6vh; min-height: 38px; }
  .recruit-icon { font-size: calc(3.4vw * var(--m)); }
  .recruit-icon span { font-size: calc(4.2vw * var(--m)); line-height: calc(7.6vw * var(--m)); width: calc(36vw * var(--m)); }
  .recruit-icon:after { width: calc(25vw * var(--m)); line-height: calc(7.6vw * var(--m)); padding: 0 calc(2.6vw * var(--m)); }
  .menu-group { top: 150%; }
  .menu-icon { width: calc(9vw * var(--m)); padding: 6px 0; }
  .menu-icon .menu-line { height: calc(.7vw * var(--m)); min-height: 2px; margin-bottom: calc(2.4vw * var(--m)); }
  .menu-icon .menu-txt { display: none; }
  .timeline { right: 5.5%; }
  .timeline ul li { margin-bottom: 2.4vh; }
  .timeline ul li a { font-size: calc(2.6vw * var(--m)); line-height: 1.2; }
  .timeline ul li a:before { width: calc(2.3vw * var(--m)); height: calc(2.3vw * var(--m)); border-width: calc(.4vw * var(--m)); }
  .timeline.gh ul li a:before { border-width: calc(.4vw * var(--m)); }
  .contact-group { bottom: 2.2vh; }
  .contact-group.btm-contact { right: 6%; font-size: calc(3.1vw * var(--m)); line-height: 1.4; }
  .contact-group.btm-social { left: 6%; }
  .contact-group.btm-social { font-size: calc(2.5vw * var(--m)); line-height: 1.75; }
  .contact-group.btm-social .au-copy-l { display: none; }
  .contact-group.btm-social a.au-priv { margin-left: 2vw; padding-left: 2vw; }

  /* ---------- 1. home ---------- */
  .contact-col .contact-col-title h1 { font-size: calc(23vw * var(--m)); line-height: 1; margin-bottom: calc(6vw * var(--m)); }
  .contact-col .contact-col-title h5 { font-size: calc(5vw * var(--m)); letter-spacing: calc(1.2vw * var(--m)); top: calc(-3.4vw * var(--m)); }
  .contact-col .contact-col-title h6 { font-size: calc(4.4vw * var(--m)); }
  .leaf-video { padding-bottom: 0; height: 100%; overflow: hidden; }
  #myVideo { left: 0; top: 0; right: auto; bottom: auto; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; }
  /* the colour burst between Home and About: keep it centred on a narrow screen */
  .top-sign .lg_bg { left: 50%; right: auto; width: 172.4vh; max-width: none; margin: 0 0 0 -86.2vh; }
  #press_group { bottom: 9vh; }
  /* "Touch & Hold" sits clear above the VI / EN switch from the first frame: the screen is 100vh tall but a phone shows
     only 100svh while its toolbar is up, so the gap is added (user, 19 Oct) */
  @supports (height: 100svh) { #press_group { bottom: calc(100vh - 100svh + max(9svh, 76px)); } }
  #press_group .press_group_i { font-size: calc(2.5vw * var(--m)); padding: 2vw 4vw; }
  #notice_popup { --w: min(calc(84vw * var(--m) + 4vw), 62vh); top: 46%; border-radius: 28px / 18px; box-shadow: 0 0 30px 6px #000; }
  #notice_popup .np-content, #notice_popup.en-popup .np-content { height: calc(22vw * var(--m)); padding: 0 6vw; }
  #notice_popup .np-content.hide { height: 0; }
  #notice_popup .np-content p, #notice_popup.en-popup .np-content p { font-size: calc(3.6vw * var(--m)); line-height: 1.4; }
  #notice_popup .np-read-more { border-radius: 28px / 18px; }
  #notice_popup.au-pop2, #notice_popup.au-popcap { --w: min(calc(84vw * var(--m) + 4vw), 54vh); }
  #notice_popup.au-pop2 .np-inner, #notice_popup.au-popcap .np-inner { border-radius: 28px / 18px; }
  #notice_popup .au-np-cap { font-size: calc(var(--w) * .038); }
  #notice_popup .au-np-nav { width: calc(10vw * var(--m)); height: calc(10vw * var(--m)); margin-top: calc(-5vw * var(--m)); }
  #notice_popup .au-np-prev { left: -3vw; }
  #notice_popup .au-np-next { right: -3vw; }
  #notice_popup .au-np-nav i { width: 2.4vw; height: 2.4vw; border-width: 0 0 .6vw .6vw; margin-left: 1vw; }
  #notice_popup .au-np-next i { margin: 0 1vw 0 0; }
  #notice_popup .np-read-more a { height: calc(11vw * var(--m)); line-height: calc(11vw * var(--m)); font-size: calc(3.6vw * var(--m)); }
  #notice_popup .close-np-btn { right: 4vw; top: 3vw; padding: 2vw; }
  #notice_popup .close-np-btn img { width: calc(5vw * var(--m)); }

  /* ---------- 2. about ---------- */
  .ms-text .ms-text-group .bhst { font-size: calc(5.7vw * var(--m)); line-height: 1.04; width: calc(40vw * var(--m)); text-align: center; }
  .ms-text .ms-text-group .bhst .sub-bhst { font-size: calc(2.4vw * var(--m)); bottom: 108%; }
  .ms-text .ms-text-group .bhst .au-bh-after { font-size: calc(2.4vw * var(--m)); top: 106%; }
  /* the floating shapes are sized for a wide screen: bring them down to phone proportions */
  .about-icon.ac1-icon { height: 5.4vh; top: 30vh; left: 30vw; }
  .about-icon.ac2-icon { height: 22vh; bottom: 16vh; right: -8vw; }
  .about-icon.at1-icon { height: 11vh; top: 13vh; left: 8vw; }
  .about-icon.at2-icon { height: 4.6vh; top: 21vh; right: 40vw; }
  .about-icon.at3-icon { height: 7.4vh; top: 24vh; right: 14vw; }
  .about-icon.at4-icon { height: 5.4vh; bottom: 11vh; left: 34vw; }
  .about-icon.at5-icon { height: 12vh; bottom: -3vh; right: 30vw; }
  .about-icon.bc1-icon { height: 7vh; top: 2vh; left: 6vw; }
  .about-icon.bc2-icon { height: 30vh; bottom: 8vh; left: -6vw; }
  .about-icon.bt1-icon { height: 12vh; top: 26vh; left: 36vw; }
  .about-icon.bt2-icon { height: 22vh; bottom: 44vh; right: -4vw; }
  .gpol-group .history-icon.hc1-icon { height: 6vh; }
  .gpol-group .history-icon.hc2-icon { height: 3.6vh; }
  .gpol-group .history-icon.hc3-icon { height: 12vh; }
  .gpol-group .history-icon.ht1-icon { height: 14vh; top: 70vh; }
  .gpol-group .history-icon.ht2-icon { height: 5vh; top: 11vh; }
  .gpol-group .history-icon.ht3-icon { height: 12vh; }
  .gpol-group .history-icon.ht4-icon { height: 7vh; right: 4%; }
  .gpol-group .history-icon.ht5-icon { height: 14vh; right: 4%; }
  .bottom-sign .bs-inner { max-width: 88%; flex: 0 0 88%; margin-left: 6%; }
  .bottom-sign .bs-inner .bs-text p { font-size: calc(8.6vw * var(--m)); line-height: 1.12; }

  /* ---------- 3. clients ---------- */
  .clients-inner .row { margin: 0; }
  .clients-inner .row .col { max-width: 80%; flex: 0 0 80%; margin-left: 6%; padding: 0; }
  .client-list { padding: 13vh 0 8vh; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .client-title, .client-title.en-ct { position: static; transform: none; font-size: calc(7.4vw * var(--m)); line-height: 1.08; text-align: left; margin: 0 0 2vh; }
  .client-list .client-list-inner { flex: 1 1 0; min-height: 0; height: auto; margin-top: 0; padding-bottom: 0; border-left: 0; display: grid; grid-template-columns: repeat(var(--ccols, 3), 1fr); grid-auto-rows: 1fr; gap: 0 4vw; align-items: center; justify-items: center; }
  .current-client, .old-client { display: contents; }
  .current-client .client-item, .old-client .client-item { width: 100%; height: 100%; min-height: 0; float: none; display: flex; align-items: center; justify-content: center; }
  .current-client .client-item a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
  .current-client .client-item img, .old-client .client-item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

  /* ---------- 4. since 2006 ---------- */
  .service-text .service-text-inner h5 { font-size: calc(6.4vw * var(--m)); line-height: 1.18; margin: 0; }
  .service-text .service-text-inner p.lp { font-size: calc(4.6vw * var(--m)); line-height: 1.3; }
  .service-text .service-text-inner .b_line { margin: calc(6vw * var(--m)) 0; }
  .service-text .service-text-inner .b_line span { width: calc(3vw * var(--m)); height: calc(.7vw * var(--m)); }
  .con-scroll { bottom: 8vh; }
  .con-text { font-size: calc(2.8vw * var(--m)); }

  /* ---------- 5. services: three stacked bands, tap to open ---------- */
  #section_services .row { flex-direction: column; flex-wrap: nowrap; margin: 0; }
  #section_services .pol-col { flex: 1 1 0; max-width: 100%; width: 100%; height: auto; border-right: 0; border-bottom: 1px solid #ddd; padding: 0 30% 0 7%; cursor: pointer; overflow: hidden; background-image: none !important; }
  #section_services .pol-col:first-child { padding-top: 7vh; }
  #section_services .pol-col:last-child { border-bottom: 0; padding-bottom: 5vh; }
  #section_services .pol-col .mask { display: none !important; }
  #section_services .pol3d { width: auto; height: 62%; max-width: 36%; object-fit: contain; left: auto; right: 9%; top: 19%; margin: 0; opacity: 1 !important; }
  #section_services .pol-col:first-child .pol3d { top: 30%; height: 54%; }
  #section_services .pol3d-title { width: 100%; transform: none !important; color: #000 !important; z-index: 2 !important; }
  #section_services .pol3d-title .pol3d-number { font-size: calc(7vw * var(--m)); line-height: 1; text-align: left; color: #77d2d7; opacity: 1 !important; visibility: visible !important; margin-bottom: 1vh; }
  #section_services .pol3d-title .pol3d-text { text-align: left; }
  #section_services .pol3d-title .pol3d-text .rb { display: none; }
  #section_services .pol3d-title .pol3d-text span { font-size: calc(5.8vw * var(--m)); line-height: 1.18; margin: 0; }
  #section_services .pol3d-title .pol3d-content { display: none; }
  #section_services .pol3d-title:after { content: "Discover more"; display: inline-block; margin-top: 1.4vh; font-family: "Nexa", "Arial", Helvetica, sans-serif; font-size: calc(3.2vw * var(--m)); color: #000; border-bottom: .3vh solid #77d2d7; }
  #section_services .pol-col { transition: background-color .35s; }
  #section_services .pol-col.au-on { background: #001923 url(../theme/images/pol3d-bg.jpg) center / cover !important; }
  #section_services .pol-col.au-on .pol3d-title, #section_services .pol-col.au-on .pol3d-title:after { color: #fff !important; }
  #section_services .pol3d { transition: transform .5s; }
  #section_services .pol-col.au-on .pol3d { transform: scale(1.18) !important; }
  .pol-popup { width: 88%; left: 6%; top: 50%; transform: translateY(-50%); max-height: 84%; overflow-y: auto; padding: calc(13vw * var(--m)) calc(7vw * var(--m)) calc(8vw * var(--m)); border-radius: 28px / 18px; box-shadow: 0 0 0 100vmax rgba(0, 25, 35, .55), 0 0 40px rgba(0, 0, 0, .3); text-align: left; }
  .pol-popup h5 { font-size: calc(5vw * var(--m)); margin-bottom: 3vw; }
  .pol-popup p { font-size: calc(4vw * var(--m)); line-height: 1.45; margin-bottom: 2.2vw; font-family: "Nexa", "Arial", Helvetica, sans-serif; }
  .pol-popup p.au-pop-desc { display: block; font-family: "NexaBook", "Arial", Helvetica, sans-serif; margin-bottom: 5vw; color: #333; }
  .pol-popup .close-pol-btn { right: 3vw; top: 3vw; padding: 2.5vw; }
  .pol-popup .close-pol-btn img { width: calc(5vw * var(--m)); }
  #au-showreel a { font-size: calc(4vw * var(--m)); color: #0f8e95; font-family: "NexaHeavy", "Nexa", "Arial", Helvetica, sans-serif; }

  /* ---------- 6. values: three stacked tiles ---------- */
  .character-title { font-size: calc(12vw * var(--m)); margin-top: 10.5vh; line-height: 1; }
  .values-group, .values-group-bg { bottom: 9vh; transform: none !important; }
  .values-group > .row, .values-group-bg > .row { margin: 0; }
  .values-group > .row > .col-8, .values-group-bg > .row > .col-8 { max-width: 70%; flex: 0 0 70%; margin-left: 15%; padding: 0; }
  .value-row, .vlg-row { flex-direction: column; margin: 0; transform: none !important; }
  .value-row > .col-4, .vlg-row > div { max-width: 100%; flex: 0 0 auto; width: 100%; padding: 0; margin-bottom: 5vh; }
  .value-row > .col-4:last-child, .vlg-row > div:last-child { margin-bottom: 0; }
  .value-col .value-col-i, .values-group-bg .value-ani-i { height: 16.5vh; }
  .value-col .value-col-i img { height: 23vh; }
  .value-col .value-col-i h5 { font-size: calc(8.4vw * var(--m)); }
  .read-more-vl { display: none; }
  .value-outer aside.vl-line-v { top: 9vh; bottom: 6vh; left: 6%; }
  .value-outer aside.vl-line-h { bottom: 6vh; }
  .big-values-slider .value-item { -webkit-overflow-scrolling: touch; }
  .big-values-slider .value-item .top-value { height: auto; }
  .big-values-slider .value-item .top-value .head-vl { height: 62vh; }
  .big-values-slider .value-item .top-value .head-vl img { height: 52vh; max-width: 90%; object-fit: contain; }
  .big-values-slider .value-item .top-value .content-vl { height: auto; min-height: 0; padding: 0 8% 11vw; display: block; }
  .big-values-slider .value-item .top-value .content-vl p,
  .big-values-slider .value-item .top-value.bv-bra .content-vl p,
  .big-values-slider .value-item .top-value.bv-ori .content-vl.en-vl p,
  .big-values-slider .value-item .top-value.bv-int .content-vl.en-vl p { font-size: calc(5.2vw * var(--m)); line-height: 1.42; text-align: center; }
  .big-values-slider .value-item .top-value .content-vl .people-ntt { width: calc(30vw * var(--m)); bottom: 6vw; }
  .big-values-slider .value-item .top-value .footer-vl { height: 8.5vh; min-height: 56px; padding: 0 6%; }
  .go-btn { font-size: calc(4.4vw * var(--m)); }
  .go-btn:hover span { visibility: visible; opacity: 1; }
  .go-btn:hover:after { visibility: hidden; }
  .back-btn { font-size: calc(3.2vw * var(--m)); }
  /* the Go back bar stays in view while the value text scrolls */
  .big-values-slider .value-item .top-value .footer-vl { position: -webkit-sticky; position: sticky; bottom: 0; z-index: 6; background: #fff; box-shadow: 0 -6px 18px rgba(0, 25, 35, .08); }

  /* ---------- 7. work: one large project at a time, swipe sideways ---------- */
  .our-work { display: block; height: 100%; }
  .our-work-thumbs { position: absolute; left: 0; right: 0; top: 25%; margin: 0; overflow: visible; }
  .our-work-inners { width: auto !important; transform: none !important; }
  .our-work-thumbs #our-work-drag { display: flex; direction: ltr; gap: 4vw; padding: 0 6%; scroll-padding-left: 6vw; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; touch-action: pan-x; scrollbar-width: none; transform: none !important; height: auto; }
  .our-work-thumbs #our-work-drag::-webkit-scrollbar { display: none; }
  .our-work-thumbs #our-work-drag:after { content: ""; flex: 0 0 8vw; }
  .our-work-thumbs .col-thumb { flex: 0 0 var(--card, 78vw); width: var(--card, 78vw); float: none; padding: 0; margin: 0; scroll-snap-align: start; opacity: 1 !important; }
  .our-work-thumbs .t-thumb { aspect-ratio: var(--ratio, 1 / 1); }
  .our-work-thumbs .t-title { margin-top: 2.2vh; }
  .our-work-thumbs .t-title h5 { font-size: calc(3.1vw * var(--m)); letter-spacing: .08em; min-height: 0; margin: 0 0 .6vh; }
  .our-work-thumbs .t-title h3, .our-work-thumbs .t-title h3 a { font-size: calc(6vw * var(--m)); line-height: 1.16; }
  #au-count { position: absolute; left: 6%; right: 14%; bottom: 15%; z-index: 3; display: flex; align-items: center; gap: 4vw; font-family: "Demi", "Nexa", Arial, sans-serif; font-size: calc(3.6vw * var(--m)); color: #000; }
  #au-count b { font-weight: normal; color: #49c3c9; }
  #au-count i { flex: 1; height: 2px; background: #ddd; position: relative; }
  #au-count i:after { content: ""; position: absolute; left: 0; top: -1px; height: 4px; width: var(--p, 10%); background: #77d2d7; transition: width .3s; }
  .our-work.au-reel-on #au-count { display: none; }
  #dragbar { display: none !important; }
  .t-thumb.has-video a.au-play i { width: calc(15vw * var(--m)); height: calc(15vw * var(--m)); border-width: calc(.8vw * var(--m)); }
  .t-thumb.has-video a.au-play i:after { border-width: calc(2.6vw * var(--m)) 0 calc(2.6vw * var(--m)) calc(4.4vw * var(--m)); }
  #au-cats { top: 17%; left: 6%; right: 0; padding-right: 14%; font-size: calc(3.3vw * var(--m)); white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 1vh; }
  #au-cats::-webkit-scrollbar { display: none; }
  #au-cats a { display: inline-block; margin-right: 5vw; padding: 1vh 0 .6vh; }
  #au-reel { width: 88vw; top: 46%; }
  #au-reel a i { width: calc(18vw * var(--m)); height: calc(18vw * var(--m)); margin: calc(-9vw * var(--m)) 0 0 calc(-9vw * var(--m)); border-width: calc(.9vw * var(--m)); }
  #au-reel a i:after { border-width: calc(3.2vw * var(--m)) 0 calc(3.2vw * var(--m)) calc(5.4vw * var(--m)); }
  .btt { display: none; }
  .our-work-credentials { left: 6%; right: auto; bottom: 8.5%; font-family: "Nexa", "Arial", Helvetica, sans-serif; font-size: calc(3.2vw * var(--m)); }
  #au-lightbox .au-lb-inner { width: 94vw; }
  #au-lightbox .au-lb-cap { font-size: calc(3.6vw * var(--m)); margin-top: 2vh; }
  #au-lightbox .au-lb-cap a { font-size: calc(3.2vw * var(--m)); }
  #au-lightbox .au-lb-close { font-size: calc(12vw * var(--m)); right: 4vw; top: 1.5vh; padding: 0 2vw; }

  /* ---------- 8. good to know ---------- */
  .faq-au { align-items: flex-start; padding-top: 12.5vh; }
  .faq-au .faq-inner { display: block; max-width: 84%; flex: 0 0 84%; margin-left: 6%; }
  .faq-au .faq-l, .faq-au .faq-r { width: 100%; padding-right: 0; }
  .faq-au h2 { font-size: calc(8.6vw * var(--m)); padding-bottom: 1.2vh; }
  .faq-au h2 br { display: none; }
  .faq-au .faq-l p { font-size: calc(3.3vw * var(--m)); margin: 1.4vh 0 1.6vh; }
  .faq-au .faq-r { max-height: 66vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .faq-au .faq-q { font-size: calc(4.2vw * var(--m)); line-height: 1.3; padding: 1.25vh 0; font-family: "Gotham", "Arial", Helvetica, sans-serif; }
  .faq-au .faq-item.open .faq-a { max-height: 70vh; }
  .faq-au .faq-a p { font-size: calc(3.7vw * var(--m)); line-height: 1.5; padding: 0 0 1.6vh; max-width: none; }

  /* ---------- menu ---------- */
  .menu-board { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 11vh 0 5vh; display: block; }
  .menu-board > .col { max-width: 86%; flex: 0 0 86%; margin-left: 7%; padding: 0; }
  .menu-board .close-menu { right: 6%; top: 2.6vh; padding: 2vw; }
  .menu-board .close-menu img { width: calc(7vw * var(--m)); }
  .menu-board .menu-lc, .menu-board .menu-rc { width: 100%; float: none; }
  .menu-board .menu-lc ul { padding: 0; margin: 0 0 2vh; }
  .menu-board .menu-lc ul li a { font-size: calc(7.2vw * var(--m)); line-height: 1.4; padding: 0 2vw 0 0; margin-bottom: .3vh; }
  .menu-board .menu-rc { padding-top: 2vh; }
  .menu-board .menu-rc .menu-detail { margin-bottom: 2.2vh; }
  .menu-board .menu-rc .menu-detail h5 { font-size: calc(3.6vw * var(--m)); }
  .menu-board .menu-rc .menu-detail p, .menu-board .menu-rc .menu-detail a.id { font-size: calc(3.5vw * var(--m)); line-height: 1.45; }
  .menu-board .menu-rc .menu-detail-l h5 { font-size: calc(3.6vw * var(--m)); }
  .menu-board .menu-rc .menu-detail-l a { font-size: calc(6vw * var(--m)); }

  /* ---------- contact board ---------- */
  .recruit-board { overflow: hidden; }
  .recruit-head { height: 12vh; padding: 0 6%; }
  .recruit-head .close-recruit { font-size: calc(3.6vw * var(--m)); }
  .recruit-head .close-recruit i { width: calc(8vw * var(--m)); height: calc(8vw * var(--m)); font-size: calc(7vw * var(--m)); border-width: calc(.4vw * var(--m)); margin-right: 2vw; }
  .recruit-content { height: calc(100% - 12vh - 13vh); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .recruit-content .row { margin: 0; }
  .recruit-content .row > .col { max-width: 88%; flex: 0 0 88%; margin-left: 6%; }
  .recruit-content h2.re-title, .recruit-content h2.re-title.en-re-title { font-size: calc(8vw * var(--m)); line-height: 1.08; padding-bottom: 1.6vh; margin-bottom: 3vh; }
  .recruit-content .re-lc, .recruit-content .re-rc { width: 100%; float: none; padding: 0; }
  .recruit-content .re-lc .re-group { margin-bottom: 2.6vh; }
  .recruit-content .re-lc .re-group h5 { font-size: calc(3.8vw * var(--m)); }
  .recruit-content .re-lc .re-group ul li, .recruit-content .re-lc .re-group ul li a { font-size: calc(3.9vw * var(--m)); line-height: 1.45; }
  .recruit-content .re-rc p { font-size: calc(3.9vw * var(--m)); line-height: 1.5; }
  .recruit-footer { height: 13vh; padding: 0 6%; }
  .recruit-footer a.ab-pp { font-size: calc(5vw * var(--m)); }
  .recruit-sign { display: none; }

  /* ---------- case pages ---------- */
  body.single header { background: #fff; }
  .nav-group .nav-go-back { font-size: calc(3.6vw * var(--m)); }
  .nav-group .nav-go-back img { width: calc(6vw * var(--m)); margin-right: 2vw; }
  #page-content .page-content-head { max-width: 88%; flex: 0 0 88%; margin: 13vh 0 6vh 6%; padding: 0; }
  #page-content .page-content-head > .row { margin: 0; }
  #page-content .page-content-head .col-8, #page-content .page-content-head .col-4 { max-width: 100%; flex: 0 0 100%; padding: 0; }
  .page-title { font-size: calc(8.4vw * var(--m)); line-height: 1.1; }
  .page-title:after { width: 16vw; }
  .page-content p { font-size: calc(4.1vw * var(--m)); line-height: 1.55; }
  .page-content h4 { font-size: calc(4.4vw * var(--m)); }
  .page-infomation { height: auto; padding-top: 4vh; border-top: 1px solid #ddd; margin-top: 4vh; }
  .page-infomation ul { padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 3vh 10vw; }
  .page-infomation ul li h5 { font-size: calc(3.4vw * var(--m)); }
  .page-infomation ul li p { font-size: calc(3.8vw * var(--m)); margin: 0; }
  .au-case-cta { margin: 5vh 0 8vh; }
  .au-case-cta a { font-size: calc(3.8vw * var(--m)); padding: 2.6vw 7vw; }
}

/* phones held sideways: too short for the stacked layouts, ask for upright */
@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  body:after { content: "Please rotate your phone upright"; position: fixed; inset: 0; z-index: 9999999; background: #001923; color: #77d2d7; display: flex; align-items: center; justify-content: center; font-family: "Nexa", "Arial", Helvetica, sans-serif; font-size: 18px; }
}

/* Vietnamese pages: longer words */
@media (max-width: 767px) {
  html[lang^="vi"] #section_services .pol3d-title:after { content: "Khám phá thêm"; }
  html[lang^="vi"] .character-title { font-size: calc(9vw * var(--m)); }
  html[lang^="vi"] .bottom-sign .bs-inner .bs-text p { font-size: calc(6.6vw * var(--m)); }
  html[lang^="vi"] .service-text-group h5 { font-size: calc(5.4vw * var(--m)); }
}

/* work tiles on phones: long project names stop at two lines so they never run into the counter */
@media (max-width: 767px) {
  .our-work-thumbs .t-title h3, .our-work-thumbs .t-title h3 a { font-size: calc(5.4vw * var(--m)); }
  .our-work-thumbs .t-title h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* phones: project tiles keep the wide 16:9 format so pictures are never cut across */
@media (max-width: 767px) { .our-work-thumbs .t-thumb { aspect-ratio: 16 / 9; } }
@media (max-width: 767px) { #au-count { bottom: 24%; } }

/* phones and portrait tablets: one whole project per screen, clear of the side dots - the next tile never peeks in cut off at the edge */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  .our-work-thumbs #our-work-drag { gap: 4vw; }
  .our-work-thumbs .col-thumb { flex-basis: 82vw; width: 82vw; }
  .our-work-thumbs #our-work-drag:after { flex-basis: 0; }
}

/* phones: "see the work" link at the end of the service pop-ups, styled like the showreel link */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  .pol-popup .au-pop-work a { font-size: calc(4vw * var(--m)); color: #0f8e95; }
  #au-back { left: 6%; top: 12%; bottom: auto; font-size: calc(3.4vw * var(--m)); }
  .our-work.au-reel-on #au-back { bottom: auto; }
}

/* april.com.vn on phones: /facebook /youtube readable; on the last screen only copyright + privacy (no room for both) */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  .contact-group.btm-social.au-social a[data-content] { font-size: calc(3.2vw * var(--m)); line-height: 1.5; margin-right: 3vw; }
  body.au-last .contact-group.btm-social.au-social a[data-content] { display: none; }
  body.au-last .contact-group.btm-social.au-social .au-copy { margin-left: 0; }
}
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  .pol-popup .au-pop-desc .au-svc-lead { font-size: calc(4.6vw * var(--m)); line-height: 1.25; margin-bottom: 2vw; }
}

/* phones and portrait tablets, 2-row Work screen (april.com.vn): two projects stacked per screen, swipe sideways */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  .au-rows2 .our-work-thumbs #our-work-drag { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-template-rows: auto auto; grid-auto-columns: var(--card2, 76vw); column-gap: var(--gap2, calc(100vw - var(--card2, 76vw))); row-gap: 5vw; }
  .au-rows2 .our-work-thumbs #our-work-drag:after { display: none; }
  .au-rows2 .our-work-thumbs .col-thumb { width: var(--card2, 76vw); flex: none; }
  .au-rows2 .our-work-thumbs .t-title { margin-top: 1.2vh; }
  .au-rows2 .our-work-thumbs .t-title h5 { font-size: calc(2.8vw * var(--m)); margin-bottom: .3vh; }
  .au-rows2 .our-work-thumbs .t-title h3, .au-rows2 .our-work-thumbs .t-title h3 a { font-size: calc(4.6vw * var(--m)); }
}
/* portrait tablets: 2 columns x 2 rows = 4 whole projects per screen */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
  :root { --card2: 38vw; --gap2: 9vw; } /* 6 + 38 + 9 + 38 + 9 = 100: the third column starts just off screen */
  .au-rows2 .our-work-thumbs #our-work-drag { row-gap: 3.5vw; }
  .au-rows2 .our-work-thumbs .t-title h5 { font-size: 1.6vw; }
  .au-rows2 .our-work-thumbs .t-title h3, .au-rows2 .our-work-thumbs .t-title h3 a { font-size: 2.5vw; }
}
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  body:not(.fp-viewing-1) .ms-text .ms-text-group .bhst .au-bh-after { font-size: calc(3.3vw * var(--m)); top: 112%; }
}

@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  /* "contact" button: a small tag, not a wide bar */
  .recruit-icon span { width: calc(19vw * var(--m)); }
  .recruit-icon:after { width: calc(19vw * var(--m)); box-sizing: border-box; padding: 0 calc(2.4vw * var(--m)); text-align: center; }
  /* logo a little in from the edge, in line with the content */
  .logo-group { position: relative; left: 3.6vw; }
  /* round shape on the "More possibilities" screen: away from the logo */
  .about-icon.bc1-icon { left: 70vw !important; top: 21vh !important; }
  /* services: "Discover more" lines up with the service name */
  #section_services .pol3d-title { text-align: left; }
}
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) { #notice_popup .close-np-btn { padding: 1.6vw; box-shadow: 0 0 2vw rgba(0, 0, 0, .3); } }
/* award pop-ups on phones: wider card, larger type */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  #notice_popup.au-plaque { --w: min(92vw, 76vh); }
  #notice_popup.au-plaque .np-inner { border-radius: 24px / 16px; }
  #notice_popup.au-plaque .au-np-cap { top: 62.5%; bottom: 2.5%; left: 5%; right: 28%; }
  #notice_popup .au-pl-award { font-size: calc(var(--w) * .021); letter-spacing: .16em; }
  #notice_popup .au-pl-title { font-size: calc(var(--w) * .056); }
  #notice_popup .au-pl-project { font-size: calc(var(--w) * .029); line-height: 1.3; }
  #notice_popup .au-pl-credit { font-size: calc(var(--w) * .021); margin-top: .6em; padding-top: .5em; line-height: 1.4; }
}
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  /* phones: the plaque continues below the picture so every line stays readable */
  #notice_popup.au-plaque .np-inner { padding-bottom: calc(var(--w) * .13); }
  /* arrows sit on the picture, clear of the text */
  #notice_popup.au-plaque .au-np-nav { top: calc(var(--w) * .3); }
  #notice_popup.au-plaque .au-np-cap { top: calc(var(--w) * .887 * .615); bottom: calc(var(--w) * .035); justify-content: flex-start; }
  #notice_popup .au-pl-proud { font-size: calc(var(--w) * .029); }
  #notice_popup .au-pl-title { font-size: calc(var(--w) * .062); }
  #notice_popup .au-pl-award { font-size: calc(var(--w) * .022); margin-bottom: .9em; }
  #notice_popup .au-pl-project { font-size: calc(var(--w) * .031); }
  #notice_popup .au-pl-credit { font-size: calc(var(--w) * .025); }
}

/* award plaque v3 on phones: caption in the flow under the photo, no fixed empty band below */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  #notice_popup.au-plaque .np-inner { padding-bottom: 0; }
  #notice_popup.au-plaque .au-np-cap { top: auto; bottom: auto; left: auto; right: auto; padding: 0 27% calc(var(--w) * .06) 5%; }
  #notice_popup .au-np-cap .au-pl-credit .au-pl-seg { display: block; }
  #notice_popup .au-np-cap .au-pl-credit .au-pl-seg + .au-pl-seg:before { content: none; }
}
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  #notice_popup .au-pl-proud { font-size: calc(var(--w) * .033); line-height: 1.35; }
  #notice_popup .au-pl-award { font-size: calc(var(--w) * .025); }
  #notice_popup .au-pl-project { font-size: calc(var(--w) * .036); }
  #notice_popup .au-pl-credit { font-size: calc(var(--w) * .029); }
  #notice_popup.au-plaque .au-np-cap { padding-right: 25%; }
}
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  #notice_popup .au-pl-project { font-size: calc(var(--w) * .033); text-wrap: balance; }
  #notice_popup .au-pl-proud b.au-pl-client { white-space: nowrap; }
}

/* ---------- Oct 18 (UX pass), phones and portrait tablets ---------- */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  /* project names on one line (the script makes the type smaller to fit); only a name too long even at the smallest size uses two balanced lines */
  .our-work-thumbs .t-title h3 { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .our-work-thumbs .t-title h3, .our-work-thumbs .t-title h3 a { white-space: nowrap; }
  .our-work-thumbs .t-title h3.au-2l, .our-work-thumbs .t-title h3.au-2l a { white-space: normal; text-wrap: balance; }
  .au-rows2 .our-work-thumbs .t-title h3, .au-rows2 .our-work-thumbs .t-title h3 a { font-size: calc(4vw * var(--m)); line-height: 1.25; }
  .au-rows2 .our-work-thumbs .t-title h5 { font-size: calc(2.6vw * var(--m)); }
  /* 2 rows: the next column peeks in at the right edge, so visitors see there is more to swipe */
  .au-rows2 .our-work-thumbs #our-work-drag { column-gap: 4vw; row-gap: 4vw; }
  /* smaller play button */
  .t-thumb.has-video a.au-play i { --pb: clamp(34px, 11vw, 50px); width: var(--pb); height: var(--pb); border-width: 2px; }
  .au-rows2 .t-thumb.has-video a.au-play i { --pb: clamp(30px, 9vw, 44px); }
  .t-thumb.has-video a.au-play i:after { border-width: calc(var(--pb) * .17) 0 calc(var(--pb) * .17) calc(var(--pb) * .28); }
  /* end of a project page */
  .au-case-cta { flex-direction: column; align-items: flex-start; gap: 5vw; padding-top: 4vw; }
  .au-next { gap: 4vw; }
  .au-next small { font-size: calc(2.8vw * var(--m)); margin-bottom: 1.2vw; }
  .au-next > div > span { font-size: calc(4.4vw * var(--m)); }
  .au-next > i { font-size: calc(6vw * var(--m)); }
}
@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
  .au-rows2 .our-work-thumbs .t-title h3, .au-rows2 .our-work-thumbs .t-title h3 a { font-size: 2.3vw; }
}
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) { .au-next > div > span { white-space: normal; } }
/* service pop-ups on phones: centred, like the services screen on desktop */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  .pol-popup, .pol-popup h5, .pol-popup p, .pol-popup p.au-pop-desc { text-align: center; }
  .pol-popup h5 { padding: 0 6vw; }
}

/* clients on phones: a little more of the width (still clear of the dots on the right), tighter columns;
   au.js enlarges each logo to its cell. multiply keeps an enlarged logo's white margin from covering its neighbour. */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  html.au-m .clients-inner .row .col { max-width: 84%; flex: 0 0 84%; }
  html.au-m .client-list .client-list-inner { column-gap: 2.6vw; }
  html.au-m .current-client .client-item img, html.au-m .old-client .client-item img { transform-origin: 50% 50%; }
}

/* Work on phones: a finger on a picture starts a swipe, not the picture's drag or the link preview */
html.au-m .our-work-thumbs .t-thumb, html.au-m .our-work-thumbs .t-thumb a, html.au-m .our-work-thumbs .t-thumb img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }

/* clients on phones, in pages of three columns (au.js builds the pages and sets the number of rows) */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  html.au-m .client-list .client-list-inner.au-lpg { display: block; overflow: hidden; touch-action: pan-y; }
  html.au-m .client-list-inner .au-ltrack { display: flex; width: 100%; height: 100%; will-change: transform; backface-visibility: hidden; }
  html.au-m .client-list .client-list-inner.au-lpg::-webkit-scrollbar { display: none; }
  html.au-m .client-list-inner .au-lp { flex: 0 0 100%; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 4vw; align-items: center; justify-items: center; }
  html.au-m .client-list-inner .au-lp .client-item { width: 100%; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
  html.au-m .client-list-inner .au-lp .client-item a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
  html.au-m .client-list-inner .au-lp .client-item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transform-origin: 50% 50%; }
  html.au-m .au-ldots { display: flex; justify-content: center; gap: 8px; padding-top: 1.6vh; height: 3vh; }
  html.au-m .au-ldots i { width: 6px; height: 6px; border-radius: 50%; background: #c9d3d6; transition: background .3s, width .3s; }
  html.au-m .au-ldots i.on { background: #87cfd6; width: 18px; border-radius: 3px; }
}

/* values on phones: the open quote ends at the bottom of the screen the phone actually shows (svh), so the white
   Go back bar is never left under the browser's own toolbar */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  html.au-m .big-values-slider .value-item { height: 100vh; height: 100svh; }
  html.au-m .big-values-slider .value-item .top-value .footer-vl { height: auto; min-height: 60px; padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* values on phones: au.js flies the animal from its tile into the opened value; the theme's own growing picture is not used */
html.au-m .bbg-ani-img { visibility: hidden !important; }
.au-vfly { position: fixed; z-index: 100000; transform-origin: 0 0; pointer-events: none; will-change: transform; object-fit: contain; }

/* "We are your..." / "More possibilities." on phones (iOS Safari stuttered, user 19 Oct): the heading is laid out at
   twice its size and shown at half scale (pre.js AU_BH1/AU_BH4), each moving block sits on its own GPU layer, and only
   transforms and opacity change while it moves - nothing is re-laid out or re-drawn mid-move */
html.au-m .ms-text { will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
html.au-m .ms-text .ms-text-group .bhst { font-size: calc(11.4vw * var(--m)); width: calc(80vw * var(--m)); transform: scale(.5); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
html.au-m .ms-text .ms-text-group .bhst .sub-bhst { font-size: calc(4.8vw * var(--m)); }
html.au-m .ms-text .ms-text-group .bhst .au-bh-after, html.au-m body:not(.fp-viewing-1) .ms-text .ms-text-group .bhst .au-bh-after { font-size: calc(6.6vw * var(--m)); top: 109%; transform-origin: 50% 0; transition: transform .8s ease; will-change: transform; }
html.au-m body.fp-viewing-1 .ms-text .ms-text-group .bhst .au-bh-after { transform: scale(.727); }
html.au-m .bottom-sign .bs-inner .bs-text p { margin-bottom: 1rem; will-change: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
html.au-m .bottom-sign .bs-inner .bs-text { position: relative; top: -4vh; } /* a little higher (user, 19 Oct) */