.editorial-line{display:block}
/* Mobile review: scoped to phones/tablets; desktop composition is preserved. */
@media(max-width:900px){
 html{overflow-x:clip}body{width:100%;min-width:0;overflow-x:clip}
 main,.chapter{min-width:0;max-width:100%}
 .hero-head .intro-line:first-child{padding-inline:0;width:100%}
 html body .hero-head .eyebrow{font-size:clamp(10px,3vw,14px);white-space:nowrap;letter-spacing:.015em}
 .hero-head .intro-line:nth-child(2){width:calc(100% + 24px);max-width:calc(100% + 24px);padding-inline:18px;margin-inline:-12px}
 html body .hero-head h1{width:100%;max-width:100%;padding:0}
 html body .hero-head h1>.title-quote{height:24%;top:0}
 html body .hero-head h1>.title-quote--open{right:calc(100% + 2px)}
 html body .hero-head h1>.title-quote--close{left:calc(100% + 2px)}
 html body .hero-head .section-subtitle{font-size:clamp(20px,5.6vw,27px);line-height:1.08!important}
 #the-route.chapter-bookend,#lets-talk.chapter-bookend{--chapter-lead:110svh;padding-top:var(--chapter-lead)}
 #the-route>.track-transition{top:32px;height:calc(var(--chapter-lead) - var(--section) - 32px)}
 #lets-talk>.track-transition{top:var(--section);height:calc(var(--chapter-lead) - var(--section)*2)}
 .track-transition{min-height:1px}
 html body .section-subtitle,html body .large-copy,html body h3{line-height:1.12!important}
 .editorial-line{display:block;line-height:1.12}
 .editorial-line+.editorial-line{margin-top:.38em}
 html body #title-7{font-size:clamp(28px,7.6vw,48.6px)!important}
 html body #title-7>span{white-space:normal}
 .production-lead .copy{white-space:normal!important}
 .tabs{flex-wrap:wrap;max-width:100%}
 .format-demo,.application-stage,.application-heading,.application-caption,.closing-copy{min-width:0;max-width:100%}
 .format-frame{max-width:100%!important}
 .contact-people a{max-width:100%;overflow-wrap:anywhere}
 .cost-detail{table-layout:fixed;width:100%}.cost-detail th,.cost-detail td{overflow-wrap:anywhere}
 .v01-background.v01-blur-layer{display:none}
 .v01-composition{will-change:transform;backface-visibility:hidden;transform:translateZ(0) scale(var(--v01-scale))}
 .hero-head .intro-line{filter:none}
 .review-bar{max-width:calc(100% - 24px)}
}

@media(max-width:900px){.review-bar{display:none!important}}

/* Second phone review: geometry, optical spacing and stable backgrounds. */
@media(min-width:901px){html body p.copy:not(.intro-credit):not(.section-subtitle){font-size:calc(var(--body) * .96)}}
@media(max-width:900px){
 :root{--gutter:18px}
 .hero-head{min-height:100svh;height:100svh;padding:96px 0;justify-content:center}
 .intro-line:first-child{margin-bottom:10px}.intro-line:nth-child(3){margin-top:10px}
 .hero-head .intro-line{padding-block:4px}
 .v01-stage.opening-visual{height:100dvh;min-height:100dvh;width:100%;top:0}
 .v01-composition{inset:0;transform-origin:50% 50%}
 #the-route>.track-transition{top:12px;height:calc(var(--chapter-lead) - 32px)}
 #the-route .route-arrival>.section-head,html body #title-2{text-align:left}
 #the-route .production-steps .benefit-number{display:block;margin-bottom:16px}
 #the-route .production-steps h3{margin-top:0}
 .editorial-line+.editorial-line{margin-top:.16em}
 #the-film .film-copy>.section-head>.section-subtitle{margin-top:var(--section);margin-bottom:0}
 #the-film .film-copy>.copy{margin-top:var(--section)}
 #the-film .film-visual .placeholder{aspect-ratio:3/2}
 .campaign-stage h3{margin-top:20px;margin-bottom:20px}
 .campaign-stage>.copy{margin-top:0}
 .project-presentation-link,.project-presentation-link:visited{white-space:nowrap;font-size:clamp(10px,3.05vw,14px);padding-inline:12px;max-width:100%}
 .deliverable-metrics dd{white-space:nowrap}
 #deliverables .optional-card:last-child{border-bottom:0}
 #deliverables .optional-card:last-child .deliverable-content,#deliverables .optional-card:last-child ul{border-bottom:0;padding-bottom:0}
 .cost-detail th:first-child{width:32%}.cost-detail th:nth-child(2){width:41%}.cost-detail th:last-child{width:27%}
 .cost-detail th,.cost-detail td{padding:9px 6px}
 .cost-detail thead th{font-size:10px;letter-spacing:0;white-space:nowrap;overflow-wrap:normal}
 .cost-detail th:last-child,.cost-detail td:last-child{padding-right:12px}
 .v01-overlay .intro-liqen-logo,#studio-control-title .studio-toggle-logo{height:17px}
 #lets-talk>.track-transition{top:12px;height:calc(var(--chapter-lead) - 32px)}
 #lets-talk .closing-grid{padding-top:0}
 #lets-talk .closing-grid>div:last-child{display:none!important}
 /* Keep the texture in document space; no canvas repaint follows scroll. */
 .art-atmosphere .atmosphere-water{display:none}
 .art-atmosphere{background-color:#354F83;background-image:radial-gradient(ellipse at 12% 22%,#576C97 0,transparent 57%),radial-gradient(ellipse at 90% 76%,#4C638F 0,transparent 60%);background-size:140% 1100px,130% 1400px;background-repeat:repeat;animation:mobile-water 18s ease-in-out infinite alternate}
 #the-opportunity{background:transparent}
 #deliverables{background:linear-gradient(to bottom,transparent 0,#EBE2CD 110svh,#EBE2CD 100%)}
}
@keyframes mobile-water{0%{background-position:0 0,100% 100px}50%{background-position:35% 60px,70% -35px}100%{background-position:12% -35px,30% 45px}}
@media(prefers-reduced-motion:reduce){.art-atmosphere{animation:none}}

@media(max-width:900px){#the-film>.placeholder[data-asset^="V06"]{aspect-ratio:3/2}#deliverables .deliverable-services li:last-child{border-bottom:0}}

/* Consistent phone spacing: one card inset and one editorial gap. */
@media(max-width:900px){
 html body .hero-head .eyebrow{font-size:clamp(11px,3.3vw,15px)}
 .hero-head .intro-line:first-child{margin-bottom:2px}
 .hero-head .intro-line:nth-child(3){margin-top:2px}
 .hero-head .intro-line{padding-block:2px}
 #the-route::before{display:none!important}
 #the-route{border-top:0}
 #the-route>.track-transition{top:calc(-8svh + 16px);height:calc(var(--chapter-lead) + 8svh - 36px)}
 #the-route .production-lead,#the-route .production-lead>.copy{text-align:left;justify-content:flex-start}
 #the-route .production-steps{display:flex;flex-direction:column;gap:0}
 #the-route .production-steps>.numbered-card{display:block;margin:0;padding:22px 20px;border-top:0}
 #the-route .production-steps>.numbered-card+.numbered-card{border-top:1px solid var(--line)}
 #the-route .production-steps>.numbered-card>*{margin:0}
 #the-route .production-steps>.numbered-card>.benefit-number{margin-bottom:16px}
 #the-route .production-steps>.numbered-card>h3{margin-bottom:20px}
 #the-film .film-copy>.section-head{margin-bottom:0}
 #the-film .film-copy>.section-head>.section-subtitle{margin-top:var(--space)}
 #the-film .film-copy>.copy{margin-top:var(--space)}
 #the-story-unfolds{padding-top:calc(var(--section) + 20px)}
 html body #title-7{font-size:clamp(48.6px,5.445vw,81px)!important;line-height:.94!important}
 html body #title-7>span{display:inline;white-space:normal}
 html body #title-7>span+span::before{content:' '}
 #deliverables .optional-card:last-child{padding-bottom:20px}
 #deliverables .deliverable-services li:last-child{padding-bottom:0}
 #quotation .cost-terms{margin:20px 0 0;padding:0}
 #quotation .quotation-frame{padding-bottom:20px}
 #lets-talk>.track-transition{top:var(--offer-gap);height:calc(var(--chapter-lead) - var(--offer-gap)*2)}
 .art-atmosphere{background-image:radial-gradient(ellipse at 10% 20%,#576C97 0,transparent 65%),radial-gradient(ellipse at 90% 75%,#4C638F 0,transparent 65%);background-size:145% 100%,140% 100%;background-repeat:no-repeat;animation:mobile-water-continuous 18s ease-in-out infinite alternate}
}
@keyframes mobile-water-continuous{0%{background-position:0 0,100% 0}50%{background-position:45% 0,65% 0}100%{background-position:15% 0,25% 0}}
@media(prefers-reduced-motion:reduce){.art-atmosphere{animation:none}}

@media(max-width:900px){
 .hero-head{padding-top:96px;padding-bottom:96px}
 .hero-head .intro-line:first-child{margin-bottom:24px}
 .hero-head .intro-line:nth-child(3){margin-top:16px}
 #opening,#the-route,.v01-sequence,.v01-stage.opening-visual{border:0;box-shadow:none}
 .v01-composition{border:0;box-shadow:none}
 #opening::before,#opening::after,#the-route::before,#the-route::after{display:none!important}
 #the-route>.track-transition{border:0;box-shadow:none}
 #the-film .film-copy>.section-head>.section-subtitle{margin-top:16.8px}
 #the-film .film-copy>.copy{margin-top:var(--space)}
 /* The caption belongs to the complete beige chapter, not the image crop. */
 #for-partners .format-demo{margin-bottom:0!important}
 #for-partners .application-caption{position:relative;background:#EBE2CD;z-index:1}
 #for-partners{--v08-tail:0px;padding-bottom:var(--section)}
 .cost-overview caption{padding-top:12px;padding-bottom:12px}
 #quotation .cost-intro{margin-bottom:0}
 /* One uninterrupted fade instead of two adjacent gradient layers. */
 #the-opportunity{background:transparent}
 #deliverables{background:linear-gradient(to bottom,rgba(235,226,205,0) 0,rgba(235,226,205,.04) 12svh,rgba(235,226,205,.16) 30svh,rgba(235,226,205,.34) 48svh,rgba(235,226,205,.56) 66svh,rgba(235,226,205,.77) 84svh,rgba(235,226,205,.93) 102svh,#EBE2CD 120svh,#EBE2CD 100%)}
}

@media(max-width:900px){
 .hero-head .intro-line:first-child{margin-bottom:32px}
 .hero-head .intro-line:nth-child(3){margin-top:22px}
 #opening,#the-route{background:#EBE2CD!important;outline:0;border:0;box-shadow:none}
 #the-route>.track-transition,#the-route>.track-transition .track-points{background:none;border:0;outline:0;box-shadow:none}
 #the-route>.track-transition>svg{visibility:hidden!important}
 #the-story-unfolds{padding-top:var(--space)}
 #the-film{padding-bottom:0}
 #for-partners .application-stage{height:auto;min-height:0;overflow:visible}
 #for-partners .application-caption{margin:0!important;padding:0}
 #lets-talk .closing-copy .opportunity-download{margin-top:28px;margin-bottom:28px;padding-top:0;padding-bottom:0}
}

/* Hide internal review controls at every screen size. */
.review-bar{display:none!important}

@media(min-width:901px){#lets-talk footer{border-top:0}}

/* End the blue atmosphere before the closing section, avoiding a raster seam at the page edge. */
#lets-talk{background:#EBE2CD!important;border-bottom:0;box-shadow:none}

/* Phone closing and project link: larger label and balanced vertical rhythm. */
@media(max-width:900px){
 .project-presentation-link,.project-presentation-link:visited{font-size:clamp(12px,3.6vw,15px);padding:15px 16px;line-height:1.3;min-height:48px}
 #lets-talk .contact-people{margin-top:24px}
 #lets-talk .closing-copy .opportunity-download{margin-top:28px;margin-bottom:0;padding:0}
 #lets-talk .contact-frame footer{margin-top:28px;padding-top:0}
}

/* Compositor-only phone intro: avoid rerasterising the wordmark blur each frame. */
@media(max-width:900px){
 .intro-playing .hero-head .intro-line>*{animation-name:mobile-title-arrive;animation-duration:1.5s;animation-timing-function:cubic-bezier(.22,.61,.36,1);animation-fill-mode:both;filter:none!important;will-change:opacity,transform;backface-visibility:hidden}
 .intro-playing .hero-head .intro-line:nth-child(2)>*{animation-delay:.15s}
 .intro-playing .hero-head .intro-line:nth-child(3)>*{animation-delay:.35s}
}
@keyframes mobile-title-arrive{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:reduce){.intro-playing .hero-head .intro-line>*{animation:none!important;opacity:1;transform:none;will-change:auto}}

@media(max-width:900px){#lets-talk .contact-people{gap:24px}#lets-talk .contact-people>div{gap:14px}#lets-talk .contact-people a{padding-top:4px;padding-bottom:8px}#lets-talk .closing-copy .opportunity-download{margin-top:36px}}

/* Slightly deeper phone atmosphere, retaining the same hue and organic motion. */
/* Match the desktop canvas colour sources exactly. */
@media(max-width:900px){.art-atmosphere{background-color:#354F83;background-image:radial-gradient(ellipse at 10% 20%,rgba(87,108,151,.94) 0,rgba(87,108,151,.78) 25%,rgba(87,108,151,.32) 48%,rgba(87,108,151,0) 65%),radial-gradient(ellipse at 90% 75%,rgba(87,108,151,.94) 0,rgba(87,108,151,.78) 25%,rgba(87,108,151,.32) 48%,rgba(87,108,151,0) 65%)}}

/* Closing hierarchy: compact contact pair, more air between content groups. */
@media(max-width:900px){
 #lets-talk .contact-people{margin-top:32px;gap:16px}
 #lets-talk .contact-people>div{gap:14px}
 #lets-talk .closing-copy .opportunity-download{margin-top:36px;margin-bottom:0}
 #lets-talk .contact-frame footer{margin-top:16px;padding-top:20px;row-gap:14px}
 #lets-talk .contact-frame{padding-bottom:20px}
}

@media(max-width:900px){
 #lets-talk footer .footer-links{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;width:100%;gap:8px;white-space:nowrap;font-size:clamp(9px,2.55vw,12px);letter-spacing:0}
 #lets-talk footer .footer-links a,#lets-talk footer .footer-links>span{font-size:inherit;letter-spacing:inherit;white-space:nowrap;flex-shrink:0}
}

@media(max-width:900px){
 #lets-talk footer .footer-links{font-size:var(--footer-fit-size,var(--meta));justify-content:space-between;gap:6px;letter-spacing:.015em}
}

@media(max-width:900px){#lets-talk .contact-frame footer{margin-top:24px}}

/* Keep each contact together; separate the two contact groups more clearly. */
@media(max-width:900px){
 #lets-talk .contact-people{gap:24px}
 #lets-talk .contact-people>div{gap:8px}
 #lets-talk .contact-people a{padding-top:0;padding-bottom:6px}
}

/* Static visual surfaces on every device. V01 motion lives on its outer composition;
   V08 keeps its separate, button-driven width/height transitions. */
html body .placeholder,html body .placeholder:hover,html body .placeholder:focus{background:var(--media);cursor:default;transition:none!important;animation:none!important;transform:none!important;filter:none!important;opacity:1!important}
html body .placeholder>svg,html body .placeholder:hover>svg,html body .placeholder>img,html body .placeholder:hover>img{transition:none!important;animation:none!important;transform:none!important;opacity:1!important;filter:none!important}
html body .placeholder .zoom,html body .placeholder .cross{display:none!important}

@media(max-width:900px){#the-story-unfolds{padding-top:calc(var(--space) + 10px)}}

/* Image corners shared across desktop and mobile. */
html body .placeholder[data-asset^="V06"],html body .placeholder[data-asset^="V12"]{border-radius:0!important}
html body #lets-talk .placeholder[data-asset^="V11"]{border-radius:var(--radius)!important}

/* Slightly earlier V01 entrance on desktop only. */
@media screen and (min-width:901px){body:not(.motion-off) .hero-stage{height:155svh}}

/* The first dotted transition has a continuous beige surface on all screens. */
#opening,#the-route{background:#EBE2CD;border:0;outline:0;box-shadow:none}
#the-route::before,#the-route::after{display:none!important}
#the-route>.track-transition,#the-route>.track-transition .track-points{border:0;outline:0;box-shadow:none;background:transparent}

html body .placeholder[data-asset^="V06"]>picture>.v06-image,
html body #lets-talk .placeholder[data-asset^="V11"]>.v11-image,
html body .opportunity-visual>.v12-image{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;border-radius:0}
@media(max-width:900px){html body .placeholder[data-asset^="V06"]{aspect-ratio:3/2}}

html body .campaign-stage .placeholder>.campaign-image{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}

/* Center the phone title group vertically; blur the same image bounds. */
@media(max-width:900px){
 .hero-head .intro-line{translate:0 0}
 body:not(.motion-off) .v01-background.v01-blur-layer{display:block;transform:none}
}
@media(prefers-reduced-motion:reduce){body:not(.motion-off) .v01-background.v01-blur-layer{display:none}}

/* V08 photograph is exclusive to the Film tab. Other format previews are retained. */
#format-frame>.v08-film-image{display:none}
#format-frame.film>.v08-film-image{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
#format-frame.film>svg,#format-frame.film>.asset-id,#format-frame.film>#format-name,#format-frame.film>#format-ratio{display:none!important}

#format-frame>.v08-stills-image{display:none}
#format-frame.stills>.v08-stills-image{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
#format-frame.stills>svg,#format-frame.stills>.asset-id,#format-frame.stills>#format-name,#format-frame.stills>#format-ratio{display:none!important}

@media(max-width:900px){
 .v01-overlay .v01-rider-name{display:block;white-space:nowrap}
 /* Darken the same blue palette uniformly, without shifting its hue. */
 .art-atmosphere::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.12);pointer-events:none;z-index:1}
}

/* The deliberate name line keeps exactly the surrounding overlay typography. */
html body .v01-overlay .intro-statement .section-subtitle .v01-rider-name{font-size:inherit!important;font-weight:inherit!important;font-style:inherit!important;font-stretch:inherit!important;font-variation-settings:inherit!important;line-height:inherit!important;letter-spacing:inherit!important}

#format-frame>.v08-social-image{display:none}
#format-frame.social>.v08-social-image{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
#format-frame.social>svg,#format-frame.social>.asset-id,#format-frame.social>#format-name,#format-frame.social>#format-ratio{display:none!important}

#format-frame>.v08-more-image{display:none}
#format-frame.more>.v08-more-image{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
#format-frame.more>svg,#format-frame.more>.asset-id,#format-frame.more>#format-name,#format-frame.more>#format-ratio{display:none!important}

/* Disable native image dragging, selection and long-press callouts. */
img,.placeholder,.placeholder *,.format-frame,.format-frame *{-webkit-user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.placeholder,.format-frame{cursor:default}

/* Keep the opening hidden until the entrance is ready to paint. */
@media screen and (prefers-reduced-motion:no-preference){
 html.intro-pending .hero-head .intro-line>*{opacity:0}
}
@media screen and (min-width:901px){
 .intro-playing .hero-head .intro-line>*{will-change:transform,opacity,filter}
}