/* Phone version: no boat, no river through the content. Calm blocks with soft transitions,
   in the spirit of the reference, in Avantial's night/taiga palette and gold. */
.phone-marquee{display:none}
@media(max-width:760px){
 :root{--card:#ffffff0b;--card-line:#ffffff17;--stripe:var(--river-gold,#cfad52)}
 html[data-theme=light]{--card:#ffffff10;--card-line:#ffffff24}

 /* The river and boat stay in the hero's lake only. */
 .river-world{clip-path:inset(0 0 calc(100% - max(800px,100svh)) 0)}
 .journey-boat{display:none!important}

 /* Legible small type in the hero */
 .hero .hero-eyebrow{font-size:11px;letter-spacing:1.2px}
 .hero .music-player .player-label{font-size:9px;letter-spacing:1px}
 .hero .music-player .track-name{font-size:13px}
 .hero .music-player .player-progress{font-size:10px}

 /* Shared block language */
 .river-section:not(.contact-river){padding:96px 0}
 .river-section .eyebrow{font-size:11px;letter-spacing:1.8px}

 /* About: a centred statement, as the reference opens its story */
 .studio-river{padding-top:110px!important;text-align:center}
 .studio-copy{display:flex;flex-direction:column;align-items:center}
 .studio-copy .eyebrow{justify-content:center}
 .studio-copy h2{font-size:clamp(36px,10.5vw,44px)!important}
 .studio-copy .section-copy{max-width:310px}
 .studio-copy .studio-signature{display:block;margin-top:18px;color:var(--river-gold);font-size:14px}

 /* Marquee band between the statement and the services */
 .phone-marquee{display:block;overflow:hidden;padding:26px 0;border-block:1px solid var(--card-line);position:relative;z-index:6;background:var(--river-bg)}
 .phone-marquee-track{display:flex;width:max-content;animation:phone-marquee 22s linear infinite}
 .phone-marquee span{font:italic 400 30px/1 var(--serif);white-space:pre;color:var(--river-ink);opacity:.9}
 @keyframes phone-marquee{to{transform:translateX(-50%)}}

 /* Services: stacked cards with striped number badges, linked by a dotted route */
 .service-list{position:relative;display:grid;gap:30px;margin-top:34px}
 .service-list::before{content:'';position:absolute;left:44px;top:30px;bottom:30px;border-left:1.5px dashed color-mix(in srgb,var(--stripe) 55%,transparent);z-index:0}
 .service-row{position:relative;z-index:1;display:block!important;padding:22px 20px!important;margin:0!important;border:1px solid var(--card-line)!important;border-radius:24px;background:linear-gradient(180deg,color-mix(in srgb,var(--river-bg) 92%,#fff),var(--river-bg))}
 .service-row .river-number,#process .journey-step .river-number{display:grid!important;place-items:center;width:48px;height:48px;margin:0 0 16px!important;border-radius:50%;font:600 12px/1 var(--sans)!important;letter-spacing:.5px;color:var(--river-gold)!important;
  background:radial-gradient(circle,var(--river-bg) 0 14px,transparent 15px),repeating-linear-gradient(-45deg,var(--stripe) 0 3px,transparent 3px 7px)}
 .service-row h3{font-size:26px!important;margin:0 0 10px!important}
 .service-row p{font-size:15px!important;color:var(--river-muted)}
 .service-row .service-scope{display:flex!important;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:18px 0 0}
 .service-row .service-scope li{padding:6px 12px;border-radius:999px;border:1px solid var(--card-line);font-size:12px;color:var(--river-ink)}
 .service-row .service-scope li::before{display:none}
 .services-river .river-link{margin-top:26px}

 /* Work: the case as a large rounded picture with its details in a card */
 .work-showcase .project-visual{border-radius:24px!important;border:1px solid var(--card-line)}
 .work-caption{margin-top:22px}
 .case-summary{margin-top:20px;padding:6px 20px;border:1px solid var(--card-line);border-radius:24px;background:var(--card)}
 .case-summary>div:first-child{border-top:0!important}
 .case-summary span{color:var(--river-gold);font-size:11px;letter-spacing:1.6px}

 /* Pricing: price cards */
 #pricing.pricing-river .pricing-list{display:grid;gap:12px;margin-top:8px}
 #pricing.pricing-river .pricing-item{margin:0;padding:24px 20px!important;border:1px solid var(--card-line)!important;border-radius:24px;background:var(--card)}
 #pricing.pricing-river .pricing-item::after{display:none}
 #pricing.pricing-river .pricing-item:last-child{background:radial-gradient(120% 120% at 100% 0%,color-mix(in srgb,var(--stripe) 22%,transparent),transparent 60%),var(--card);border-color:color-mix(in srgb,var(--stripe) 45%,transparent)!important}
 #pricing.pricing-river .pricing-footer{padding-top:24px}

 /* Process: a coloured panel with wavy edges, like the reference's process band */
 .process-river{--wave-top:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C60 2 110 2 170 16s120 22 160 8 50-22 70-20V40Z'/%3E%3C/svg%3E");
  --wave-bottom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0V18c50 18 100 20 160 6S280 0 330 12s50 16 70 8V0Z'/%3E%3C/svg%3E");
  margin:0;padding:120px 0!important;background:linear-gradient(180deg,var(--phone-band-1),var(--phone-band-2));
  -webkit-mask:var(--wave-top) top/100% 40px no-repeat,linear-gradient(#000,#000) center/100% calc(100% - 78px) no-repeat,var(--wave-bottom) bottom/100% 40px no-repeat;
  mask:var(--wave-top) top/100% 40px no-repeat,linear-gradient(#000,#000) center/100% calc(100% - 78px) no-repeat,var(--wave-bottom) bottom/100% 40px no-repeat}
 html[data-theme=dark] .process-river{--phone-band-1:#1a2f55;--phone-band-2:#2a3f6e}
 html[data-theme=light] .process-river{--phone-band-1:#355e4b;--phone-band-2:#467560}
 #process .journey-heading{text-align:center;margin-bottom:44px!important}
 #process .journey-heading .eyebrow{justify-content:center}
 #process .journey-steps{position:relative;display:flex!important;flex-direction:column;gap:30px!important}
 #process .journey-steps::before{content:'';position:absolute;left:23px;top:24px;bottom:40px;border-left:1.5px dashed #ffffff40}
 #process .journey-step{position:relative;display:grid!important;grid-template-columns:48px 1fr;column-gap:16px;padding:0!important;border:0!important;background:none!important}
 #process .journey-step::after{display:none!important}
 #process .journey-step>*:not(.river-number){grid-column:2}
 #process .journey-step .river-number{grid-row:1/span 3;margin:0!important;background:radial-gradient(circle,var(--phone-band-1) 0 14px,transparent 15px),repeating-linear-gradient(-45deg,var(--stripe) 0 3px,transparent 3px 7px)}
 #process .journey-step h3{font-size:24px!important;margin:8px 0 6px!important}
 #process .journey-step p{color:#e6e9f2cc}
 #process .step-outcome{display:block;margin-top:12px;padding-top:10px;border-top:1px solid #ffffff1f}
 #process .step-outcome span{font:600 10.5px/1.5 var(--sans);letter-spacing:1.4px;color:var(--river-gold)}
 #process .step-outcome p{font-size:14px!important;margin:2px 0 0}

 /* Contact: centred heading, pill links, rounded fields; the still harbour closes the page */
 .contact-copy{text-align:center}
 .contact-copy .eyebrow{justify-content:center}
 .contact-socials{display:flex;flex-direction:column;align-items:center;gap:10px}
 .contact-socials .river-link{margin:0!important;padding:12px 20px;border:1px solid var(--card-line);border-radius:999px;font-size:14px}
 .river-form.brief-form :is(input,textarea){border:1px solid var(--card-line)!important;border-radius:16px!important;background:var(--card)!important;padding:14px 16px!important}
 .river-form.brief-form label>span{font:600 11px/1.5 var(--sans)!important;letter-spacing:1.4px;text-transform:uppercase;color:var(--river-gold)!important}
 .river-form .primary-button{border-radius:999px!important}
 /* The still harbour at the end: the cabin and pier in view, the river running off to the right. */
 .contact-river .dock-stage{inset:auto auto -20px -36px!important;width:680px!important;height:425px!important;transform:none!important}
 .contact-river .dock-stage>img{object-fit:cover!important}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.phone-marquee-track{animation:none}}

/* ---------------- Theme-aware player and motion (phones) ---------------- */
@media(max-width:760px){
 /* The player is glass: it takes its tint from the theme and lets the sky show through. */
 html[data-theme] .hero .music-player.music-player,html[data-theme] .hero .music-player.music-player:hover{
  background:color-mix(in srgb,var(--river-bg) 38%,transparent);border:1px solid #ffffff26;
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 #ffffff1f,0 16px 40px #0000003d;--player-ink:var(--river-ink);--player-muted:var(--river-muted)}
 html[data-theme=light] .hero .music-player.music-player{background:color-mix(in srgb,var(--river-bg) 30%,transparent);border-color:#ffffff33}
 .hero .music-player .play-button{transition:transform .3s,box-shadow .3s}
 .hero .music-player.is-playing .play-button{box-shadow:0 0 0 6px color-mix(in srgb,var(--river-gold) 22%,transparent);animation:m-pulse 2.4s ease-in-out infinite}
 @keyframes m-pulse{50%{box-shadow:0 0 0 11px color-mix(in srgb,var(--river-gold) 6%,transparent)}}

 /* My own arrivals replace the desktop reveal on phones. */
 .has-motion [data-reveal]{opacity:1!important;transform:none!important;animation:none!important}
 .m-in{opacity:0;transform:translate3d(0,26px,0) scale(.985);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
 .m-in.is-seen{opacity:1;transform:none}
 .m-group.m-in,.m-group:not(.m-in){opacity:1;transform:none}
 /* Headings rise out of a mask */
 .river-section h2.m-in{opacity:1;transform:none;clip-path:inset(0 0 100% 0);translate:0 22px;transition:clip-path 1s cubic-bezier(.2,.8,.2,1),translate 1s cubic-bezier(.2,.8,.2,1)}
 .river-section h2.m-in.is-seen{clip-path:inset(0 0 -12% 0);translate:0 0}
 .river-section .eyebrow.m-in{transform:translate3d(-14px,0,0)}
 .river-section .eyebrow.m-in.is-seen{transform:none}

 /* Striped badges turn into place as their card arrives */
 .service-row .river-number,#process .journey-step .river-number{transform:rotate(-120deg) scale(.6);transition:transform 1.1s cubic-bezier(.2,.9,.25,1.2);transition-delay:calc(var(--i,0) * 90ms + 180ms)}
 .is-seen .river-number,.service-row.is-seen .river-number,.journey-step.is-seen .river-number{transform:none}

 /* Dotted routes draw down through the services and the process */
 .service-list::before,#process .journey-steps::before{transform:scaleY(0);transform-origin:top;transition:transform 1.8s cubic-bezier(.4,0,.2,1) .2s}
 .service-list.is-seen::before,#process .journey-steps.is-seen::before{transform:none}

 /* Case picture settles from a slight zoom */
 .work-showcase .project-visual{overflow:hidden}
 .work-showcase .project-visual>img{transform:scale(1.12)!important;transition:transform 1.6s cubic-bezier(.2,.8,.2,1)!important}
 .work-showcase .project-visual.is-seen>img{transform:none!important}

 /* A slow sheen crosses the individual-quote card */
 #pricing.pricing-river .pricing-item:last-child{overflow:hidden}
 #pricing.pricing-river .pricing-item:last-child::before{content:'';position:absolute;inset:-40% auto -40% -60%;width:45%;background:linear-gradient(100deg,transparent,#ffffff1c,transparent);transform:skewX(-14deg);animation:m-sheen 6.5s ease-in-out infinite;pointer-events:none}
 @keyframes m-sheen{0%,55%{left:-60%}100%{left:130%}}

 /* The process band's wavy edges drift slowly */
 .process-river{--wave-top:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V20C50 0 150 0 200 20S350 40 400 20V40Z'/%3E%3C/svg%3E");
  --wave-bottom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0V20C50 40 150 40 200 20S350 0 400 20V0Z'/%3E%3C/svg%3E");
  -webkit-mask:var(--wave-top) 0 0/600px 40px repeat-x,linear-gradient(#000,#000) center/100% calc(100% - 76px) no-repeat,var(--wave-bottom) 0 100%/600px 40px repeat-x;
  mask:var(--wave-top) 0 0/600px 40px repeat-x,linear-gradient(#000,#000) center/100% calc(100% - 76px) no-repeat,var(--wave-bottom) 0 100%/600px 40px repeat-x;
  animation:m-waves 16s linear infinite}
 @keyframes m-waves{to{-webkit-mask-position:-600px 0,center,600px 100%;mask-position:-600px 0,center,600px 100%}}

 /* Fields and the button answer touch */
 .river-form.brief-form :is(input,textarea){transition:border-color .3s,box-shadow .3s,background .3s}
 .river-form.brief-form :is(input,textarea):focus{border-color:var(--river-gold)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--river-gold) 18%,transparent)!important}
 .river-form .primary-button,.pricing-cta,.contact-socials .river-link{transition:transform .25s,box-shadow .3s}
 .river-form .primary-button:active,.pricing-cta:active,.contact-socials .river-link:active{transform:scale(.97)}

 /* Reading progress */
 .m-progress{position:fixed;z-index:60;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--river-gold) 40%,transparent),var(--river-gold));transform:scaleX(0);transform-origin:left;pointer-events:none}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
 .m-in,.river-section h2.m-in{opacity:1!important;transform:none!important;clip-path:none!important;translate:none!important}
 .process-river,#pricing.pricing-river .pricing-item:last-child::before{animation:none!important}
}

/* ---------------- Curtain transitions, as on the reference (phones) ---------------- */
@media(max-width:760px){
 /* Every block after the hero is opaque, so the next one can slide over the last. */
 .story>.river-section,.phone-marquee{background-color:var(--river-bg)}
 #about{z-index:7!important;padding-top:110px!important}
 .phone-marquee{z-index:7}
 #services{z-index:7!important}
 #work{z-index:8!important}
 #pricing{z-index:9!important}
 #process{z-index:10!important}
 #contact{z-index:11!important}

 /* The studio block rises over the hero with a ridge of hills for its top edge. */
 #about::before{content:'';position:absolute;left:0;right:0;top:1px;height:56px;transform:translateY(-99%);background:var(--river-bg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70V44C30 30 55 22 85 30s50 22 80 10 45-34 80-30 50 26 85 22 50-20 70-14V70Z'/%3E%3C/svg%3E") 0 100%/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70V44C30 30 55 22 85 30s50 22 80 10 45-34 80-30 50 26 85 22 50-20 70-14V70Z'/%3E%3C/svg%3E") 0 100%/100% 100% no-repeat}
 .m-dim{position:absolute;inset:0;z-index:5;background:#02060c;opacity:0;pointer-events:none;will-change:opacity}

 /* Pinned blocks: they hold still while the next one slides over them. */
 .is-pinned{position:sticky!important;top:var(--pin-top,0px)}
 .is-pinned>.river-shell{transform-origin:50% 100%;will-change:transform,opacity}

 /* Curtains: the covering block has a rounded, lit top edge. */
 #work,#pricing{border-radius:34px 34px 0 0;box-shadow:0 -1px 0 #ffffff1c,0 -24px 50px #00000059}
 #work::before,#pricing::before{content:'';position:absolute;left:50%;top:12px;width:42px;height:4px;margin-left:-21px;border-radius:2px;background:#ffffff26}
 #contact{margin-top:-46px;border-radius:34px 34px 0 0;box-shadow:0 -24px 50px #00000059}

 /* The statement lights up word by word as it is read. */
 .m-word{opacity:var(--lit,.5);transition:opacity .2s linear}
}

/* ---------------- Varied transitions and Avantial's own textures (phones) ---------------- */
@media(max-width:760px){
 /* Numbers become moon phases, waxing from 01 to 04 */
 .service-row .river-number,#process .journey-step .river-number{display:flex!important;align-items:center;gap:10px;width:auto;height:auto;background:none!important;border-radius:0;transform:none;font:600 12px/1 var(--sans)!important;letter-spacing:1px;margin:0 0 16px!important}
 .service-row .river-number::before,#process .journey-step .river-number::before{content:'';flex:0 0 34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at var(--shade,50%) 50%,var(--moon-night,var(--river-bg)) 0 15px,transparent 15.5px),radial-gradient(circle at 35% 35%,#fff3c4,var(--river-gold) 70%);
  box-shadow:0 0 18px color-mix(in srgb,var(--river-gold) 35%,transparent);transform:rotate(-30deg) scale(.6);opacity:0;transition:transform 1.1s cubic-bezier(.2,.9,.25,1.2),opacity .8s;transition-delay:calc(var(--i,0)*90ms + 150ms)}
 .is-seen .river-number::before,.service-row.is-seen .river-number::before,.journey-step.is-seen .river-number::before{transform:none;opacity:1}
 :is(.service-row,.journey-step):nth-child(1) .river-number{--shade:22%}
 :is(.service-row,.journey-step):nth-child(2) .river-number{--shade:4%}
 :is(.service-row,.journey-step):nth-child(3) .river-number{--shade:-16%}
 :is(.service-row,.journey-step):nth-child(4) .river-number{--shade:-80%}
 #process .journey-step .river-number{--moon-night:var(--phone-band-1);grid-row:auto;margin:0 0 4px!important}
 #process .journey-step{grid-template-columns:1fr!important;padding-left:26px!important}

 /* Connectors: a hairline of gold with a lantern light travelling down it */
 .service-list::before,#process .journey-steps::before{border-left:0!important;width:1px;background:linear-gradient(transparent,color-mix(in srgb,var(--river-gold) 70%,transparent) 12%,color-mix(in srgb,var(--river-gold) 70%,transparent) 88%,transparent)}
 .service-list::before{left:36px}
 #process .journey-steps::before{left:9px}
 .service-list::after,#process .journey-steps::after{content:'';position:absolute;z-index:2;width:7px;height:7px;margin-left:-3px;border-radius:50%;background:#fff1c2;box-shadow:0 0 10px 3px color-mix(in srgb,var(--river-gold) 70%,transparent);top:4%;opacity:0;pointer-events:none}
 .service-list::after{left:36px}
 #process .journey-steps::after{left:9px}
 @keyframes m-lantern{0%{top:4%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:96%;opacity:0}}

 /* Cards catch a little moonlight on their top edge */
 .service-row,#pricing.pricing-river .pricing-item,.case-summary{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--river-gold) 30%,transparent)}
 .service-row{background:radial-gradient(120% 60% at 0% 0%,color-mix(in srgb,var(--river-gold) 9%,transparent),transparent 60%),linear-gradient(180deg,color-mix(in srgb,var(--river-bg) 92%,#fff),var(--river-bg))}

 /* Process: a ridge of firs for its top edge, rippling water for its bottom */
 .process-river{--wave-top:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V44l10-14 6 8 10-26 9 22 7-10 10 18 8-12 12-24 10 26 7-9 9 15 11-20 9 14 7-8 10 21 9-15 12-28 11 30 8-11 9 13 10-17 9 12 8-6 11 22 9-15 11 19 7-9 8 12V60Z'/%3E%3C/svg%3E")!important;
  -webkit-mask:var(--wave-top) 0 0/300px 60px repeat-x,linear-gradient(#000,#000) center/100% calc(100% - 96px) no-repeat,var(--wave-bottom) 0 100%/600px 40px repeat-x!important;
  mask:var(--wave-top) 0 0/300px 60px repeat-x,linear-gradient(#000,#000) center/100% calc(100% - 96px) no-repeat,var(--wave-bottom) 0 100%/600px 40px repeat-x!important;
  padding-top:130px!important;animation:m-ripple 12s linear infinite!important}
 @keyframes m-ripple{to{-webkit-mask-position:0 0,center,600px 100%;mask-position:0 0,center,600px 100%}}

 /* Work keeps the sliding curtain; pricing arrives through clouds instead */
 #work::before{display:none}
 #work{box-shadow:0 -1px 0 color-mix(in srgb,var(--river-gold) 40%,transparent),0 -24px 50px #00000059}
 #pricing{border-radius:0;box-shadow:none;margin-top:-100svh;z-index:9!important}
 #pricing::before{display:none}

 /* Cloud gate: clouds rise over the case, then part to show the prices */
 .cloud-gate{display:block;position:relative;z-index:10;height:200svh;pointer-events:none}
 .cloud-gate-inner{position:sticky;top:0;height:100svh;overflow:hidden}
 html[data-theme=dark] .cloud-gate{--cloud:#c9d3e6;--cloud-edge:#8996b833}
 html[data-theme=light] .cloud-gate{--cloud:#eef3ec;--cloud-edge:#c9d8cc44}
 .puff{position:absolute;width:var(--s);height:calc(var(--s) * .62);left:var(--x);top:var(--y);border-radius:50%;
  background:radial-gradient(closest-side,var(--cloud) 0,color-mix(in srgb,var(--cloud) 75%,transparent) 45%,var(--cloud-edge) 75%,transparent 100%);
  transform:translate3d(calc(var(--d) * var(--part,0) * 75vw),calc((1 - var(--rise,0)) * 110vh + var(--d) * var(--part,0) * -8vh),0) scale(calc(.85 + var(--rise,0) * .25));
  opacity:calc(var(--rise,0) * (1 - var(--part,0) * .9));will-change:transform,opacity}
 .p1{--x:-30%;--y:8%;--s:95vw;--d:-1}.p2{--x:40%;--y:2%;--s:90vw;--d:1}.p3{--x:-20%;--y:30%;--s:110vw;--d:-1}
 .p4{--x:30%;--y:26%;--s:100vw;--d:1}.p5{--x:-35%;--y:55%;--s:105vw;--d:-1}.p6{--x:35%;--y:52%;--s:95vw;--d:1}
 .p7{--x:-10%;--y:72%;--s:90vw;--d:-1}.p8{--x:25%;--y:76%;--s:100vw;--d:1}.p9{--x:5%;--y:15%;--s:80vw;--d:-1}
 .p10{--x:10%;--y:42%;--s:85vw;--d:1}.p11{--x:-5%;--y:62%;--s:80vw;--d:-1}.p12{--x:20%;--y:88%;--s:90vw;--d:1}
 .gate-fog{position:absolute;inset:0;background:var(--cloud);opacity:calc(var(--rise,0) * (1 - var(--part,0) * 1.6) * .55)}
 .gate-moon{position:absolute;left:50%;top:38%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:radial-gradient(circle,#fff6d6 0,#e7c46a 38%,transparent 70%);opacity:calc(var(--part,0) * (1 - var(--part,0)) * 3)}

 /* Contact: revealed by a widening circle of moonlight */
 #contact{margin-top:0;border-radius:0;box-shadow:none;}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
 .cloud-gate{display:none}#pricing{margin-top:0}#contact{clip-path:none}
 .service-list::after,#process .journey-steps::after{display:none}
}
@media(max-width:760px){#process .journey-step>*{grid-column:1!important}}

/* The desktop cloud bank, also on phones (between the case and the prices). */
.cloud-gate{display:none!important}
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
 .cloud-transition{display:block;position:fixed;inset:0 0 auto;height:100lvh;z-index:32;overflow:hidden;pointer-events:none;contain:layout paint}
 .cloud-transition>.clouds{position:absolute;inset:-18% -9%;width:118%;height:136%;pointer-events:none}
 .cloud-transition[data-density=dense]>.clouds{inset:-28% -12%;width:124%;height:156%}
 .cloud-transition .cloud-bank{will-change:transform,opacity}
 .cloud-transition .cloud-left path{mask-image:linear-gradient(to right,#000 55%,transparent 100%)}
 .cloud-transition .cloud-right path{mask-image:linear-gradient(to right,transparent,#000 30%)}
 .cloud-transition .dense-only{display:none}
 .cloud-transition[data-density=dense] .dense-only{display:inline}
 .cloud-transition[data-density=dense] [data-cloud=near] stop:first-child{stop-opacity:.5}
 .cloud-transition[data-density=dense] [data-cloud=near] stop:nth-child(2){stop-opacity:1}
 .cloud-transition[data-density=dense] [data-cloud=near] stop:nth-child(3){stop-opacity:.96}
 .cloud-transition[data-density=dense] [data-cloud=dense] stop:nth-child(4){stop-opacity:.92}
 .cloud-transition[data-density=dense] [data-cloud=dense] stop:last-child{stop-opacity:.86}
 .cloud-transition[data-theme=light] [data-cloud=near] stop:first-child,.cloud-transition[data-theme=light] [data-cloud=dense] stop:first-child{stop-color:#f8f6ed}
 .cloud-transition[data-theme=light] [data-cloud=near] stop:nth-child(2),.cloud-transition[data-theme=light] [data-cloud=dense] stop:nth-child(2){stop-color:#e7ece3}
 .cloud-transition[data-theme=light] [data-cloud=near] stop:nth-child(3),.cloud-transition[data-theme=light] [data-cloud=dense] stop:nth-child(3){stop-color:#c4d1c8}
 .cloud-transition[data-theme=light] [data-cloud=near] stop:last-child,.cloud-transition[data-theme=light] [data-cloud=dense] stop:nth-child(4),.cloud-transition[data-theme=light] [data-cloud=dense] stop:last-child{stop-color:#afc4b9}
 .cloud-transition[data-theme=light] [data-cloud=far] stop:first-child{stop-color:#f6f4e9}
 .cloud-transition[data-theme=light] [data-cloud=far] stop:nth-child(2){stop-color:#d4ded1}
 .cloud-transition[data-theme=light] [data-cloud=far] stop:last-child{stop-color:#aec1b4}

 #pricing{margin-top:0!important}
}

/* The case opens as on desktop: full-screen panels you swipe sideways, with the progress strip. */
@media(max-width:760px){
 #project-dialog{overflow:hidden!important}
 #project-dialog .case-header{position:absolute!important;top:0;left:0;right:0;z-index:6}
 #project-dialog .case-track{display:flex!important;height:100%!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory}
 #project-dialog .case-panel{flex:0 0 100%!important;width:100%!important;height:100%!important;overflow-y:auto;overscroll-behavior-y:contain;padding:86px 22px 96px!important;border-bottom:0!important;scroll-snap-align:start;scroll-snap-stop:always;scrollbar-width:none}
 #project-dialog .case-panel::-webkit-scrollbar{display:none}
 #project-dialog .case-showcase{display:none!important}
 #project-dialog .case-pagination{display:flex!important;bottom:calc(env(safe-area-inset-bottom) + 18px)}
 #project-dialog h2{font-size:46px}
 #project-dialog .case-cover img{max-height:42svh;width:100%;object-fit:cover;border-radius:16px}
}
@media(max-width:760px){#process .journey-step.is-seen .river-number::before{transform:none;opacity:1}}

/* Opening (phones and desktop): the wordmark appears, a gold horizon draws, and the night splits open. */
.m-intro{display:none}
@media(prefers-reduced-motion:no-preference){
 html:not(.no-intro) .m-intro{display:block;position:fixed;inset:0;z-index:200;pointer-events:none;animation:m-intro-gone 0s linear 1.9s forwards}
 .m-intro-half{position:absolute;left:0;right:0;height:50.5%;background:radial-gradient(120% 90% at 50% 100%,#13254a,#060c18 70%)}
 html[data-theme=light] .m-intro-half{background:radial-gradient(120% 90% at 50% 100%,#355a4a,#14261f 70%)}
 .m-intro-top{top:0;animation:m-intro-up .9s cubic-bezier(.7,0,.2,1) .95s forwards}
 .m-intro-bottom{bottom:0;transform-origin:bottom;background:radial-gradient(120% 90% at 50% 0%,#13254a,#060c18 70%);animation:m-intro-down .9s cubic-bezier(.7,0,.2,1) .95s forwards}
 html[data-theme=light] .m-intro-bottom{background:radial-gradient(120% 90% at 50% 0%,#355a4a,#14261f 70%)}
 .m-intro-mark{position:absolute;left:0;right:0;top:50%;transform:translateY(-100%);padding-bottom:22px;text-align:center;color:#f5efdc;animation:m-intro-fade .4s ease .8s forwards}
 .m-intro-mark b{display:block;font:600 26px/1 var(--serif);letter-spacing:.32em;padding-left:.32em}
 .m-intro-mark em{display:inline-block;font-style:normal;opacity:0;transform:translateY(14px);filter:blur(6px);animation:m-intro-letter .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.15s + var(--n) * 70ms)}
 .m-intro-mark span{display:block;margin-top:10px;font:500 9px/1 var(--sans);letter-spacing:.7em;padding-left:.7em;color:#cfad52;opacity:0;animation:m-intro-in .45s ease .5s forwards}
 .m-intro-line{position:absolute;left:50%;top:50%;width:84vw;height:1px;margin:-.5px 0 0 -42vw;background:linear-gradient(90deg,transparent,#f3d98f,transparent);box-shadow:0 0 14px 1px #e7c46a99;transform:scaleX(0);animation:m-intro-draw .6s cubic-bezier(.6,0,.2,1) .3s forwards,m-intro-fade .35s ease 1s forwards}
 @keyframes m-intro-letter{to{opacity:1;transform:none;filter:none}}
 @keyframes m-intro-in{to{opacity:1}}
 @keyframes m-intro-draw{to{transform:scaleX(1)}}
 @keyframes m-intro-fade{to{opacity:0}}
 @keyframes m-intro-up{to{transform:translateY(-102%)}}
 @keyframes m-intro-down{to{transform:translateY(102%)}}
 @keyframes m-intro-gone{to{visibility:hidden}}
}
/* On phones the hero also settles in as the night opens; desktop keeps its own title choreography. */
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
 html:not(.no-intro) .hero{animation:m-hero-settle 1.4s cubic-bezier(.2,.8,.2,1) .95s both}
 @keyframes m-hero-settle{from{transform:scale(1.08);filter:brightness(.6)}}
}


/* Intro wordmark: the Avantial logo in gold, wiped in from the left. */
@media(prefers-reduced-motion:no-preference){
 .m-intro-logo{display:block;width:min(72vw,300px);height:auto;margin:0 auto;clip-path:inset(0 100% 0 0);animation:m-logo-wipe .7s cubic-bezier(.6,0,.2,1) .05s forwards;filter:drop-shadow(0 0 18px #e7c46a40)}
 @keyframes m-logo-wipe{to{clip-path:inset(0 0 0 0)}}
}
@media(min-width:761px) and (prefers-reduced-motion:no-preference){.m-intro-logo{width:min(40vw,420px)}.m-intro-mark span{font-size:11px}.m-intro-line{width:60vw;margin-left:-30vw}}

/* Scrolling off the hero: a dive into the night. Layers come closer at their own pace,
   stars go out, the moon sets, mist fills the valley, and a gold horizon closes the scene. */
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
 .river-world{visibility:hidden}
 .hero{position:sticky!important;top:0;z-index:1;margin-bottom:42svh}
 html .hero .hero-content,.hero .moon-position,.hero .living-landscape,.hero canvas,.hero .nature-sky{will-change:transform,opacity}
 .hero .living-landscape{transform-origin:50% 100%}
 /* Mist rises until the screen is the colour of the next block, so there is no hard edge. */
 .m-mist{position:absolute;z-index:4;left:-10%;right:-10%;bottom:0;height:110%;pointer-events:none;will-change:transform;
  background:linear-gradient(transparent 0,var(--m-mist) 30%,color-mix(in srgb,var(--river-bg) 70%,var(--m-mist)) 62%,var(--river-bg) 82%);
  transform:translate3d(0,100%,0)}
 html[data-theme=dark] .hero{--m-mist:#6f80a540}
 html[data-theme=light] .hero{--m-mist:#c9d8c855}
 .m-horizon{position:absolute;z-index:5;left:6%;right:6%;top:46%;height:1px;background:linear-gradient(90deg,transparent,#f3d98f,transparent);box-shadow:0 0 16px 1px #e7c46a99;transform:scaleX(0);opacity:0}
 /* Once covered, the sticky hero stops painting and its loops pause. */
 /* The sticky hero does not need the desktop's eased scroll parallax: it lagged behind fast swipes. */
 .hero .sky-wash{transform:none!important}
 .hero .moon-position{transform:none!important}
 #about{z-index:7!important}
 #about::before{display:block!important}
}

/* Work: a swipeable row of case cards that grows with the portfolio. */
@media(max-width:760px){
 .m-cases{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:30px -24px 0;padding:0 24px 4px;scrollbar-width:none;overscroll-behavior-x:contain}
 .m-cases::-webkit-scrollbar{display:none}
 .m-cases>.work-showcase{flex:0 0 100%;margin:0!important;scroll-snap-align:center}
 .m-cases.is-many>.work-showcase{flex-basis:86%}
 .m-cases-meter{display:flex;align-items:center;justify-content:space-between;margin-top:18px;font:600 12px/1 var(--sans);letter-spacing:1px;color:var(--river-muted);font-variant-numeric:tabular-nums}
 .m-cases-dots{display:flex;gap:8px}
 .m-cases-dots i{width:6px;height:6px;border-radius:3px;background:var(--card-line);transition:width .3s,background .3s}
 .m-cases-dots i.is-on{width:22px;background:var(--river-gold)}
}

/* Case paging as in the reference: swipe, a hint on the first screen and short dashes below.
   The screens and image crops are the desktop ones. */
@media(max-width:760px){
 #project-dialog .case-navigation{display:none!important}
 #project-dialog .case-pagination{display:flex!important;left:50%;right:auto;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 14px);gap:4px;padding:6px 10px;border-radius:20px;background:color-mix(in srgb,var(--case-bg) 72%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
 #project-dialog .case-pagination button{width:16px;height:14px;transition:width .35s cubic-bezier(.2,.7,.2,1)}
 #project-dialog .case-pagination button:after{top:6px}
 #project-dialog .case-pagination button:after{background:color-mix(in srgb,var(--case-ink) 35%,transparent)}
 #project-dialog .case-pagination button[aria-current=step]{width:30px}
 #project-dialog .case-pagination button[aria-current=step]:after{background:var(--case-gold)}
 #project-dialog .case-pagination button[hidden]{display:none}

 #project-dialog .case-intro{display:flex!important;flex-direction:column;padding-top:78px!important}
 #project-dialog .case-cover{order:-1;flex:none;width:auto;height:auto;aspect-ratio:4/3;margin:0 0 28px;padding:0;overflow:hidden;border:1px solid var(--case-rule);border-radius:14px;background:transparent}
 #project-dialog .case-cover picture{display:block;width:100%;height:100%}
 #project-dialog .case-cover img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:60% center;border:0;border-radius:0;mask-image:none}
 #project-dialog .case-intro-copy{padding:0!important}
 #project-dialog .case-intro .case-cta{margin-top:6px}
 #project-dialog .case-scroll-hint{position:sticky;bottom:-42px;display:flex;width:max-content;margin:26px auto 0;padding:11px 18px;gap:10px;border:1px solid var(--case-rule);border-radius:30px;background:color-mix(in srgb,var(--case-bg) 72%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--case-ink);font-size:10px;letter-spacing:1.6px}
 #project-dialog .case-scroll-hint>span:last-child{font-size:14px;color:var(--case-gold);animation:m-nudge 1.6s ease-in-out infinite}

 #project-dialog .case-statement .case-catalogue-screen{display:block!important;position:relative;width:100%;height:auto;aspect-ratio:1270/965;margin:26px 0 0;overflow:hidden;border:1px solid var(--case-rule);border-radius:12px}
 #project-dialog .case-catalogue-screen img{position:absolute;left:0;top:-421.5544%;width:100%;height:853.4715%;max-width:none;max-height:none;object-fit:fill;border:0;border-radius:0}

 #project-dialog .case-client-booking{display:flex!important;flex-direction:column;gap:26px}
 #project-dialog .case-client-booking>figure{margin:0;align-self:stretch;width:100%}
 #project-dialog .case-client-booking-frame{position:relative;width:min(100%,calc((100svh - 300px)*646/1016));margin:0 auto;aspect-ratio:646/1016;overflow:hidden;border:1px solid var(--case-rule);border-radius:14px;background:#12110b}
 #project-dialog .case-client-booking img{position:absolute;left:-2.78638%;top:-1.1811%;width:105.26316%;height:102.36221%;max-width:none;max-height:none;object-fit:fill;border:0;border-radius:0}
}
@keyframes m-nudge{50%{transform:translateX(5px)}}
@media(max-width:760px) and (prefers-reduced-motion:reduce){#project-dialog .case-scroll-hint>span:last-child{animation:none}}

/* Every case screen fits the phone without inner scrolling; pictures give way first.
   A vertical swipe or wheel step turns one page, as in the reference. */
@media(max-width:760px){
 #project-dialog .case-panel:not(.case-showcase){overflow:hidden!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:stretch!important;gap:0!important;padding:66px 20px 54px!important;text-align:left}
 #project-dialog .case-panel>*{flex:none;min-width:0;margin-left:0;margin-right:0}
 #project-dialog .case-panel .eyebrow{margin-bottom:10px}
 #project-dialog .case-panel h3{font-size:clamp(26px,8.4vw,34px);letter-spacing:-1px;margin-bottom:12px}
 #project-dialog .case-panel p:not(.eyebrow,.case-table-label){font-size:14px;line-height:1.5}

 #project-dialog .case-intro{position:relative;justify-content:flex-start!important}
 #project-dialog .case-cover{flex:1 1 0!important;min-height:130px;aspect-ratio:auto!important;margin:0 0 18px!important}
 #project-dialog .case-intro h2{font-size:clamp(32px,10vw,40px);margin-bottom:8px}
 #project-dialog .case-intro .case-subtitle{font-size:19px;line-height:1.2;margin-bottom:10px}
 #project-dialog .case-intro-copy>p:not(.eyebrow){font-size:13.5px;margin-bottom:14px}
 #project-dialog .case-facts{gap:10px 16px;margin:0 0 16px}
 #project-dialog .case-facts dt{margin-bottom:3px}
 #project-dialog .case-facts dd{font-size:13px;line-height:1.35}
 #project-dialog .case-intro .case-cta{margin:0}
 #project-dialog .case-scroll-hint{position:absolute!important;right:0;bottom:0!important;width:auto;height:48px;margin:0!important;padding:0 16px;justify-content:center}
 #project-dialog .case-scroll-hint>span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 #project-dialog .case-scroll-hint>span:last-child{font-size:18px}

 #project-dialog .case-brief{justify-content:center!important}
 #project-dialog .case-section-number{display:flex;align-items:baseline;gap:12px;transform:none;margin-bottom:14px}
 #project-dialog .case-section-number b{font-size:40px;margin:0}
 #project-dialog .case-brief-copy{flex:none}
 #project-dialog .case-change-list>div{grid-template-columns:1fr 20px 1fr;gap:10px;padding:11px 0;font-size:13px}

 #project-dialog .case-statement h3 br{display:none}
 #project-dialog .case-statement h3 em:before{content:' '}
 #project-dialog .case-statement .case-catalogue-screen{flex:0 1 auto;min-height:0}

 #project-dialog .case-client-booking>figure{flex:1 1 0!important;min-height:0;display:flex;justify-content:center}
 #project-dialog .case-client-booking-frame{width:auto;height:100%;max-width:100%}
 #project-dialog .case-client-booking .case-feature-copy{flex:none}

 #project-dialog .case-booking-visual{flex:1 1 0!important;min-height:0;height:auto!important;margin:0 0 18px!important;display:flex!important;justify-content:center}
 #project-dialog .case-booking-screen{height:100%!important;width:auto!important;display:flex;justify-content:center}
 #project-dialog .case-booking-screen img{height:100%!important;width:auto!important;max-width:100%;object-fit:contain!important}
 #project-dialog .case-booking-visual.is-week .case-booking-screen,#project-dialog .case-booking-visual.is-week img{width:100%!important;height:100%!important}
 #project-dialog .case-booking-screen figcaption,#project-dialog .case-booking .case-feature-copy ul{display:none}
 #project-dialog .case-booking .case-feature-copy{flex:none}
 #project-dialog .case-booking h3 br{display:none}
 #project-dialog .calendar-view-switch{margin-top:12px}

 #project-dialog .case-result-grid{grid-template-columns:1fr;gap:14px;margin:18px 0 22px}

 /* The work preview uses the desktop crop: a wide strip from the top-left of the site. */
 .work-showcase .project-visual{aspect-ratio:1.95!important;height:auto!important}
 .work-showcase .project-visual>img{width:100%;height:100%;object-fit:cover!important;object-position:left top!important;transform:none!important}
}

/* The hero landscape spans exactly the phone width, so the shore trees stay on screen. */
@media(max-width:760px){.hero .living-landscape{left:0!important;width:100%!important}}

/* The hero headline changes its ending like on desktop: "We build websites and apps for / people". */
@media(max-width:760px){
 .hero h1>:not(.mobile-headline){display:inline!important}
 .hero h1>br{display:block!important}
 .hero h1>.mobile-headline{display:none!important}
 .hero h1{font-size:clamp(34px,12vw,50px)!important}
 .hero h1>.phrase-top{min-width:0;white-space:nowrap}
 .hero .rotating-words{display:block!important;width:100%;height:auto;min-height:1.1em;margin:0 0 30px;font-family:var(--serif);font-weight:600;font-size:clamp(34px,12vw,50px);line-height:1.05;letter-spacing:-.04em;white-space:nowrap}
 .hero .hero-row{display:flex!important;flex-direction:column;align-items:flex-start;margin-top:0!important}
 .hero .hero-row>.rotating-words{order:-1}
}

/* Case paging glides: snapping waits while a page turns, and each page's content drifts and fades with it. */
@media(max-width:760px){
 #project-dialog .case-track.is-moving{scroll-snap-type:none!important}
 #project-dialog .case-panel>*{translate:calc(var(--off,0) * 56px) 0;opacity:calc(1 - var(--away,0) * .75);will-change:translate,opacity}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){#project-dialog .case-panel>*{translate:none;opacity:1}}

/* Room between every case picture and its text; short screens drop the secondary lines. */
@media(max-width:760px){
 #project-dialog .case-client-booking>figure{margin-bottom:22px!important}
 #project-dialog .case-booking-visual{margin-bottom:22px!important}
 #project-dialog .case-cover{margin-bottom:22px!important}
 #project-dialog .case-statement .case-catalogue-screen{margin-top:22px!important}
}
@media(max-width:760px) and (max-height:660px){
 #project-dialog .case-panel:not(.case-showcase){padding-top:62px!important;padding-bottom:48px!important}
 #project-dialog .case-intro-copy>p:not(.eyebrow),#project-dialog .case-brief-copy>p:not(.case-table-label){display:none}
 #project-dialog .case-cover{min-height:96px}
 #project-dialog .case-intro h2{font-size:30px}
 #project-dialog .case-facts{margin-bottom:12px}
 #project-dialog .case-section-number{margin-bottom:6px}
 #project-dialog .case-change-list>div{padding:7px 0}
 #project-dialog .case-panel h3{font-size:26px}
}

/* Finish: the closing question set large, so the last screen holds its own. */
@media(max-width:760px){
 #project-dialog .case-finish>div{margin:0}
 #project-dialog .case-finish .eyebrow{text-align:left;margin-bottom:18px}
 #project-dialog .case-finish h3{font-size:clamp(44px,13.5vw,64px);line-height:1.02;letter-spacing:-1.6px;margin-bottom:18px}
 #project-dialog .case-finish p:not(.eyebrow){font-size:17px!important;line-height:1.5!important;color:var(--case-muted);max-width:30ch;margin:0 0 clamp(26px,5svh,44px)}
 #project-dialog .case-finish .case-cta{margin:0}
}
@media(max-width:760px) and (max-height:660px){#project-dialog .case-finish h3{font-size:40px}}

/* The hero player as on desktop: no glass card, a large grooved record, and back / play / forward under the track. */
@media(max-width:760px){
 html[data-theme] .hero .music-player.music-player,html[data-theme] .hero .music-player.music-player:hover{width:100%;max-width:340px;height:auto;padding:0;gap:18px;background:transparent;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
 .hero .music-player .vinyl{width:78px;height:78px;border:2px solid #ece6d3;box-shadow:0 2px 7px #0005}
 .hero .music-player .player-body{padding-right:0}
 .hero .music-player .player-progress{margin-top:4px}
 .hero .music-player .player-buttons{position:static!important;display:flex;justify-content:flex-start;align-items:center;gap:14px;margin-top:6px!important}
 .hero .music-player .player-buttons :is(.previous-track,.next-track){display:grid!important;place-items:center;width:36px;height:36px}
 .hero .music-player .player-buttons .play-button{width:38px;height:38px}
}

/* No cursor reactions on the phone layout: hero letters stay still under the pointer. */
@media(max-width:760px){
 .hero-content .hero-letter:hover>.hero-glyph,.hero-content :is(.phrase-top,.phrase-bottom) .hero-letter:hover>.hero-glyph{color:inherit;transform:none}
}

/* Work preview: no light outline around the picture, and the open button in gold as on desktop. */
@media(max-width:760px){
 .work-showcase .project-visual{border:0!important;box-shadow:none!important;outline:0}
 .work-showcase .project-visual::before,.work-showcase .project-visual::after{display:none}
 .work-showcase .work-open{background:#cfad52!important;color:#10202d!important;border-color:transparent!important}
}

/* The desktop scroll-driven lift and zoom of the work card is off on phones: inside the swipe row it read as the site scrolling. */
@media(max-width:760px){
 .has-motion .m-cases .work-showcase[data-reveal],.m-cases .work-showcase{opacity:1!important;transform:none!important;will-change:auto}
 .m-cases{overflow-y:hidden}
}

/* Result screen fills the phone: larger numbers and text, more air between the three points. */
@media(max-width:760px){
 #project-dialog .case-result h3{margin-bottom:8px}
 #project-dialog .case-result-grid{gap:clamp(16px,3.2svh,30px)!important;margin:clamp(20px,4svh,40px) 0 clamp(24px,4.5svh,44px)!important}
 #project-dialog .case-result-grid>div{display:grid;grid-template-columns:62px 1fr;column-gap:12px;align-items:start;padding-top:clamp(14px,2.4svh,22px);border-top:1px solid var(--case-rule)}
 #project-dialog .case-result-grid b{grid-row:span 2;font-size:clamp(34px,10vw,46px);line-height:.9}
 #project-dialog .case-result-grid h4{margin:2px 0 6px;font-size:17px}
 #project-dialog .case-result-grid p{margin:0;font-size:14px!important;line-height:1.45!important;color:var(--case-muted)}
}
@media(max-width:760px) and (max-height:660px){
 #project-dialog .case-result-grid b{font-size:30px}
 #project-dialog .case-result-grid h4{font-size:15px;margin-bottom:3px}
 #project-dialog .case-result-grid p{font-size:13px!important}
}

/* Services to work: a tide. A running wave with a gold crest rises over the services,
   which sink beneath it and darken as they go under. Wave and crest move with one shared transform. */
@media(max-width:760px){
 #work{border-radius:0!important;box-shadow:none!important;background-color:color-mix(in srgb,var(--river-bg) 84%,#020a12)!important}
 #work::before,#work::after{content:'';display:block;position:absolute;z-index:3;left:-240px;right:0;top:-29px;width:auto;height:30px;margin:0;border-radius:0;pointer-events:none;animation:m-tide 7s linear infinite}
 #work::before{background:inherit;background-image:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='30'%3E%3Cpath d='M0 18Q30 4 60 18T120 18T180 18T240 18V30H0Z'/%3E%3C/svg%3E") 0 0/240px 30px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='30'%3E%3Cpath d='M0 18Q30 4 60 18T120 18T180 18T240 18V30H0Z'/%3E%3C/svg%3E") 0 0/240px 30px repeat-x}
 #work::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='30'%3E%3Cpath d='M0 18Q30 4 60 18T120 18T180 18T240 18' fill='none' stroke='%23e2c46d' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/240px 30px repeat-x}
 @keyframes m-tide{to{transform:translateX(240px)}}
 #services .m-sink{position:absolute;inset:0;pointer-events:none;opacity:0;will-change:opacity;background:linear-gradient(to top,color-mix(in srgb,var(--river-bg) 92%,#06121f) 10%,color-mix(in srgb,var(--river-bg) 55%,transparent) 70%,transparent)}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){#work::before,#work::after{animation:none}}

/* No foreground stones on phones: their shore lives in the river layer, which phones do not show. */
@media(max-width:760px){.hero .cove-landscape>g[fill="#152b3c"],.hero .cove-landscape>g[stroke="#405164"]{display:none}}

/* No boat on phones: it is hidden here, the page script keeps its own motion code. */
@media(max-width:760px){.journey-boat{display:none!important}}

/* Where the browser supports scroll-driven animation, the dive and the curtains run with the scroll itself
   (no frame of lag behind the finger); otherwise mobile.js drives the same values. */
@supports (animation-timeline: scroll()){
 @media(max-width:760px) and (prefers-reduced-motion:no-preference){
  html{timeline-scope:--m-next-services,--m-next-pricing}
  #work{view-timeline:--m-next-services block}
  #process{view-timeline:--m-next-pricing block}
  .hero .hero-content{animation:m-dive-copy linear both;animation-timeline:scroll(root);animation-range:0 60vh}
  .hero .hero-content>*{animation:m-dive-fade linear both;animation-timeline:scroll(root);animation-range:0 60vh}
  .hero .moon-position{animation:m-dive-moon linear both;animation-timeline:scroll(root);animation-range:0 60vh}
  .hero .living-landscape{animation:m-dive-land linear both;animation-timeline:scroll(root);animation-range:0 60vh}
  .hero canvas,.hero .nature-sky{animation:m-dive-sky linear both;animation-timeline:scroll(root);animation-range:0 60vh}
  .m-mist,.m-horizon{transform:none}
  .m-mist{animation:m-dive-mist linear both;animation-timeline:scroll(root);animation-range:0 60vh}
  .m-horizon{animation:m-dive-horizon linear both;animation-timeline:scroll(root);animation-range:0 60vh}
  .m-dim{animation:m-dive-dim linear both;animation-timeline:scroll(root);animation-range:calc(max(800px,100svh) + 42svh - 100vh) calc(max(800px,100svh) + 42svh)}
  #services.is-pinned>.river-shell{animation:m-sink-shell linear both;animation-timeline:--m-next-services;animation-range:entry 0% entry 100%}
  #services .m-sink{animation:m-sink-veil linear both;animation-timeline:--m-next-services;animation-range:entry 0% entry 100%}
  #pricing.is-pinned>.river-shell{animation:m-cover-shell linear both;animation-timeline:--m-next-pricing;animation-range:entry 0% entry 100%}
  .hero{animation:m-hero-away linear both;animation-timeline:scroll(root);animation-range:var(--m-away,100000px) calc(var(--m-away,100000px) + 1px)}
  html:not(.no-intro) .hero{animation:m-hero-settle 1.4s cubic-bezier(.2,.8,.2,1) .95s both,m-hero-away linear both;animation-timeline:auto,scroll(root);animation-range:normal,var(--m-away,100000px) calc(var(--m-away,100000px) + 1px)}
  html body .hero{animation-play-state:running!important}
  /* Scroll-linked animations must never be paused with the hero's loops: a paused one resumes out of step with the scroll and jumps. */
  html body .hero :is(.hero-content,.hero-content>*,.moon-position,.living-landscape,canvas,.nature-sky,.m-mist,.m-horizon,.m-dim){animation-play-state:running!important}
 }
}
@keyframes m-dive-copy{0%{translate:0 0;scale:1;animation-timing-function:ease-in-out}100%{translate:0 -170px;scale:.92}}
@keyframes m-dive-fade{0%{opacity:1}62%,100%{opacity:0}}
@keyframes m-dive-moon{0%{translate:0 0;scale:1;opacity:.7;animation-timing-function:ease-in-out}100%{translate:-30px 260px;scale:1.3;opacity:0}}
@keyframes m-dive-land{0%{translate:0 0;scale:1;animation-timing-function:ease-in-out}100%{translate:0 -60px;scale:1.3}}
@keyframes m-dive-sky{0%{opacity:1}90%,100%{opacity:0}}
@keyframes m-dive-mist{0%{translate:0 100%;animation-timing-function:ease-in-out}100%{translate:0 0}}
@keyframes m-dive-horizon{0%,55%{scale:0 1;opacity:0}88%{opacity:1}97%,100%{scale:1 1;opacity:1}}
@keyframes m-hero-away{from{opacity:1}to{opacity:0}}
@keyframes m-dive-dim{from{opacity:0}to{opacity:.6}}
@keyframes m-sink-shell{from{translate:0 0;scale:1;opacity:1}to{translate:0 40px;scale:.94;opacity:.35}}
@keyframes m-sink-veil{from{opacity:0}90%,to{opacity:1}}
@keyframes m-cover-shell{from{scale:1;opacity:1}to{scale:.93;opacity:.35}}

/* The marquee band keeps its background while its words fade in, so nothing behind it shows through. */
@media(max-width:760px){.phone-marquee-track.m-in{transform:none}}

/* Phone clouds: the shared animated SVG stays laid out but unpainted; its still copy moves as one composited layer. */
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
 .cloud-transition.is-source{visibility:hidden}
 .cloud-transition.m-cloud{will-change:opacity}
 .cloud-transition.m-cloud>.clouds{will-change:transform}
 .cloud-transition.m-cloud .cloud-bank{will-change:auto}
}

/* Phone performance and touch: off-screen loops pause (scroll-linked animations keep running so they never jump),
   the detailed landscape stays still so it is never repainted for a ripple, and small controls reach a finger-sized target. */
@media(max-width:760px){
 :is(.m-off,.m-covered),:is(.m-off,.m-covered) *,:is(.m-off,.m-covered)::before,:is(.m-off,.m-covered)::after{animation-play-state:paused!important}
 html body :is(.m-off,.m-covered) :is(.river-shell,.m-sink){animation-play-state:running!important}
 .hero .living-landscape *{animation:none!important}
 html body .scene-controls button{width:38px;height:38px;min-width:38px}
 .hero .music-player .player-buttons :is(.previous-track,.next-track){width:40px!important;height:40px!important}
 .hero .music-player .player-buttons .play-button{width:44px!important;height:44px!important}
 .service-detail-link,.river-link,.footer-logo{display:inline-flex;align-items:center;min-height:44px}
}



/* Footer: logo and copyright on one line, centred on each other. */
@media(max-width:760px){
 html body .site-footer{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:16px;text-align:left}
 html body .site-footer>span{width:auto;margin:0;text-align:right;line-height:1.2}
}

/* No fog on phones: neither over the harbour nor rising over the hero. */
@media(max-width:760px){html[data-theme] .harbor-view:before,.hero .m-mist{display:none!important}}

/* No harbour picture under the form on phones; the contact block ends right after the form. */
@media(max-width:760px){
 html body .contact-river>.harbor-view{display:none!important}
 html body .contact-river,html body .contact-river>.contact-layout{min-height:0!important}
 html body .contact-river>.contact-layout{padding-bottom:72px!important}
}

/* Open menu on phones: the page underneath recedes almost fully, so the menu items read cleanly. */
@media(max-width:760px){
 html.header-menu-open .landscape-menu-veil{background:color-mix(in srgb,var(--river-bg,#081321) 94%,transparent)!important}
}

/* No blue browser chrome anywhere: no tap flash, no default focus ring after a tap and no blue autofill fill.
   Keyboard focus keeps a gold ring; the site's own focus styles take precedence over this zero-specificity default. */
*,*::before,*::after{-webkit-tap-highlight-color:transparent}
:where(*):focus:not(:focus-visible){outline:none}
:where(*):focus-visible{outline:2px solid #d9b85c;outline-offset:3px}
:where(input,textarea,select):-webkit-autofill{-webkit-text-fill-color:currentColor;transition:background-color 600000s 0s,color 600000s 0s}