/* Service pages — shared kit (see kit.js). Built on the homepage tokens: Bureau serif
   headlines, Planar/Display copy, outlined tags, split CTAs, #0d0d0d and the original PH glow.
   Page-specific styles live in <service-id>.css. Classes are prefixed sv-. */

/* Tone: typed custom properties interpolate, so the whole surface (and everything that uses
   these colours) fades between dark and light as sections cross the viewport midpoint. */
@property --sv-bg{syntax:'<color>';inherits:true;initial-value:#0d0d0d}
@property --sv-fg{syntax:'<color>';inherits:true;initial-value:#fff}
@property --sv-soft{syntax:'<color>';inherits:true;initial-value:#cfcfcf}
@property --sv-muted{syntax:'<color>';inherits:true;initial-value:#9b9b9b}
@property --sv-line{syntax:'<color>';inherits:true;initial-value:rgba(255,255,255,.16)}
@property --sv-invert{syntax:'<number>';inherits:true;initial-value:1}
.sv{--sv-gutter:20px;--sv-max:1400px;--sv-pad:max(var(--sv-gutter),calc((100% - var(--sv-max))/2));
 --sv-bg:#0d0d0d;--sv-fg:#fff;--sv-soft:#cfcfcf;--sv-muted:#9b9b9b;--sv-line:rgba(255,255,255,.16);--sv-invert:1;
 background:var(--sv-bg);color:var(--sv-fg);overflow-x:clip;
 --sv-tone:.53s cubic-bezier(.25,.1,.25,1);
 transition:--sv-bg var(--sv-tone),--sv-fg var(--sv-tone),--sv-soft var(--sv-tone),--sv-muted var(--sv-tone),--sv-line var(--sv-tone),--sv-invert var(--sv-tone)}
.sv[data-tone="light"]{--sv-bg:#fff;--sv-fg:#0d0d0d;--sv-soft:#4a4a4a;--sv-muted:#767676;--sv-line:#dedede;--sv-invert:0}
@media(prefers-reduced-motion:reduce){.sv{transition-duration:.15s}}

.sv h1,.sv h2,.sv h3{font-family:var(--serif);font-weight:400;letter-spacing:-.03em}
.sv-kicker,.sv-label{font:13px/1.3 var(--sans);color:var(--sv-muted);letter-spacing:.01em}
.sv-kicker span,.sv-label span{opacity:.6;margin:0 .35em}
.sv-link{display:inline-flex;gap:6px;align-items:center;font:14px/1 var(--sans);color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.sv-actions{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap}
.sv .tags{display:flex;flex-wrap:wrap;gap:4px}
.sv .tag{color:inherit}
/* Two-piece CTA in the current tone. */
.sv .split-cta span,.sv .split-cta i{background:var(--sv-fg);color:var(--sv-bg)}
.sv-hero .split-cta span,.sv-hero .split-cta i{background:var(--ink);color:#fff}
.sv-pill{position:relative;overflow:hidden;font:13px/1 var(--sans);color:inherit;background:transparent;border:1px solid color-mix(in srgb,currentColor 40%,transparent);border-radius:6px;padding:9px 14px;cursor:pointer;transition:border-color .3s}
.sv-pill:hover{border-color:currentColor}
.sv-pill[aria-pressed="true"]{background:var(--sv-fg);color:var(--sv-bg);border-color:var(--sv-fg)}
.sv-pill i{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--sv-bg);transform:scaleX(0);transform-origin:left}
.sv-pill.is-timing i{animation:sv-timer var(--sv-timer,5s) linear forwards}
@keyframes sv-timer{to{transform:scaleX(1)}}
.sv [data-switch-item]{transition:opacity .9s var(--ease),scale 1.6s var(--ease)}
.sv [data-switch-item]:not(.is-active){opacity:0;pointer-events:none}

/* Hero: the homepage's white opening, with the work at its centre. */
.sv-hero{position:relative;z-index:1;padding:150px var(--sv-gutter) 40px;text-align:center;background:#fff;color:var(--ink)}
.sv-hero .sv-kicker{color:var(--muted)}
.sv-hero h1{font-size:clamp(46px,6.4vw,96px);line-height:1;margin:22px auto 0}
.sv-stage{width:min(1180px,100%);margin:clamp(-10px,-1vw,0px) auto 0;aspect-ratio:16/8;overflow:hidden}
.sv-stage>:is(video,img){width:100%;height:100%;object-fit:cover;display:block}
.sv-stage.is-blend{-webkit-mask-image:radial-gradient(ellipse 46% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 46% 50% at 50% 50%,#000 62%,transparent 100%)}
.sv-stage.is-blend>:is(video,img){mix-blend-mode:multiply}
.sv-stage.is-framed{border-radius:16px;margin-top:40px}
.sv-hero-foot{max-width:600px;margin:0 auto}
.sv-hero-foot p{font:17px/1.55 var(--display);color:#4a4a4a;margin:0 auto 30px}
.sv-glow{position:relative;z-index:1}

/* Full-bleed hero */
.sv-hero-full{position:relative;min-height:100svh;display:grid;align-items:end;color:#fff;overflow:hidden}
.sv-hero-full-media{position:absolute;inset:0}
.sv-hero-full-media :is(video,img){width:100%;height:100%;object-fit:cover;display:block}
.sv-hero-full-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,13,.35) 0%,rgba(13,13,13,0) 30%,rgba(13,13,13,.15) 55%,rgba(13,13,13,.86) 100%)}
.sv-hero-full-copy{position:relative;padding:0 var(--sv-pad) 70px;text-align:center}
.sv-hero-full-copy .sv-kicker{color:rgba(255,255,255,.75)}
.sv-hero-full h1{font-size:clamp(46px,6.4vw,96px);line-height:1;margin:20px auto 22px}
.sv-hero-full-text{font:17px/1.55 var(--display);color:rgba(255,255,255,.82);max-width:560px;margin:0 auto 30px}
.sv-hero-full .split-cta span,.sv-hero-full .split-cta i{background:#fff;color:var(--ink)}

/* Thesis */
.sv-thesis{padding:40px var(--sv-gutter) 150px}
.sv-thesis>*{max-width:1180px;margin-left:auto;margin-right:auto}
.sv-statement{font-size:clamp(30px,3.7vw,54px);line-height:1.16;margin-top:26px;margin-bottom:90px;padding-right:min(5vw,60px)}
.sv-logos{display:flex;flex-wrap:wrap;align-items:center;gap:22px 54px}
.sv-logos img{height:calc(24px*var(--logo-scale,1));width:auto;max-width:170px;object-fit:contain;filter:brightness(0) invert(var(--sv-invert));opacity:.62;transition:opacity .3s}
.sv-logos a:hover img{opacity:1}

/* Work field: large pieces at different scales, each linked to its case. */
.sv-work{padding:40px var(--sv-pad) 190px}
.sv-work>h2{text-align:center;font-size:clamp(38px,4.6vw,70px);line-height:1.02;margin:0 auto 110px}
.sv-work-field{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;row-gap:110px;align-items:start}
.sv-piece{display:block;color:inherit}
.sv-piece-name{display:flex;align-items:center;gap:10px;font:15px/1 var(--sans);margin-bottom:14px}
.sv-piece-name i{width:7px;height:7px;border-radius:50%;background:currentColor}
.sv-piece-media{border-radius:10px;overflow:hidden}
.sv-piece-media :is(img,video){display:block;width:100%;height:auto;transition:scale 1.2s var(--ease)}
.sv-piece:hover .sv-piece-media :is(img,video){scale:1.04}
.sv-piece .tags{margin-top:14px;color:var(--sv-soft)}
.w-a{grid-column:1/8;--depth:30}
.w-b{grid-column:9/13;margin-top:200px;--depth:110}
.w-c{grid-column:3/10;--depth:55}
.w-d{grid-column:1/5;margin-top:40px;--depth:120}
.w-e{grid-column:6/13;margin-top:180px;--depth:70}
.w-f{grid-column:2/9;--depth:35}
@supports (animation-timeline:view()){
 .motion .sv-piece{animation:sv-depth linear both;animation-timeline:view();animation-range:cover}
 @keyframes sv-depth{from{translate:0 calc(var(--depth,40)*1px)}to{translate:0 calc(var(--depth,40)*-1px)}}
}

/* Deliverables */
.sv-menu{position:relative;padding:160px var(--sv-pad) 150px}
.sv-menu-head{display:grid;gap:18px;margin-bottom:70px}
.sv-menu-head h2{font-size:clamp(38px,4.4vw,68px);line-height:1.02;max-width:820px}
.sv-menu-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--sv-line)}
.sv-menu-list li{display:grid;grid-template-columns:64px minmax(0,1.1fr) minmax(0,1fr) minmax(0,.8fr);gap:20px;align-items:baseline;padding:30px 0;border-top:1px solid var(--sv-line);transition:opacity .4s var(--ease)}
.sv-menu-list:hover li:not(:hover){opacity:.32}
.sv-menu-index{font:13px/1 var(--sans);color:var(--sv-muted)}
.sv-menu-list h3{font-size:clamp(26px,2.6vw,40px);line-height:1.05}
.sv-menu-list p{font:15px/1.5 var(--display);color:var(--sv-soft);max-width:360px}
.sv-menu-list .tags{justify-content:flex-end}
.sv-menu-thumb{display:none}
.sv-menu-preview{position:absolute;left:0;top:0;width:280px;aspect-ratio:4/5;margin:-175px 0 0 36px;border-radius:12px;overflow:hidden;pointer-events:none;opacity:0;scale:.9;transition:opacity .35s var(--ease),scale .5s var(--ease);z-index:2;background:#eee}
.sv-menu-preview.is-on{opacity:1;scale:1}
.sv-menu-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.sv-menu-preview img.is-active{opacity:1}

/* Client voice */
.sv-voice{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;align-items:center;padding:60px var(--sv-pad) 150px}
.sv-voice-media{grid-column:1/7;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:color-mix(in srgb,currentColor 8%,transparent)}
.sv-voice-media :is(video,img){width:100%;height:100%;object-fit:cover;display:block}
.sv-voice blockquote{grid-column:8/13;margin:0}
.sv-voice-solo blockquote{grid-column:2/12;text-align:center}
.sv-aside-copy{grid-column:8/13;margin:0}
.sv-faq-items p a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.sv-aside-copy>p{margin:0;font:400 clamp(26px,2.6vw,40px)/1.2 var(--serif);letter-spacing:-.02em}
.sv-aside-copy footer{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:28px;font:15px/1.5 var(--display)}
.sv-voice blockquote p{font:400 clamp(26px,2.6vw,40px)/1.2 var(--serif);letter-spacing:-.02em}
.sv-voice-solo blockquote p{font-size:clamp(32px,3.6vw,56px)}
.sv-voice footer{display:flex;gap:22px;align-items:center;margin-top:28px;font:14px/1 var(--sans)}
.sv-voice-solo footer{justify-content:center}

/* Start */
.sv-start{text-align:center;padding:40px var(--sv-gutter) 170px}
.sv-start h2{font-size:clamp(30px,3.2vw,46px);line-height:1.1;margin:0 auto 30px;border-top:1px solid var(--sv-line);padding-top:110px;max-width:1180px}
.sv-start-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:760px;margin:0 auto}
.sv-start-list .tag{font-size:14px;line-height:1;padding:8px 12px;border-radius:6px}
.sv-start p{font:15px/1.55 var(--display);color:var(--sv-muted);max-width:460px;margin:28px auto 0}

/* Material still needed: designed, honest placeholders. */
.sv-needed{padding:60px var(--sv-pad) 120px}
.sv-needed>h2{font-size:clamp(30px,3.2vw,46px);line-height:1.1;margin-bottom:40px;max-width:760px}
.sv-needed-intro{font:15px/1.55 var(--display);color:var(--sv-soft);max-width:520px;margin:-20px 0 40px}
.sv-needed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.sv-needed-slot{margin:0}
.sv-needed-frame{aspect-ratio:4/5;border-radius:12px;border:1px dashed color-mix(in srgb,currentColor 35%,transparent);display:grid;place-items:center;background:repeating-linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,currentColor 4%,transparent) 14px 15px)}
.sv-needed-frame span{font:12px/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--sv-muted);text-align:center;padding:0 16px}
.sv-needed-slot figcaption{font:13px/1.45 var(--sans);color:var(--sv-muted);margin-top:12px}

/* FAQ, open by default */
.sv-faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;padding:120px var(--sv-pad) 120px}
.sv-faq>h2{grid-column:1/5;font-size:clamp(30px,3.2vw,46px);line-height:1.1}
.sv-faq-items{grid-column:6/13;border-top:1px solid var(--sv-line)}
.sv-faq details{border-bottom:1px solid var(--sv-line);padding:22px 0}
.sv-faq summary{list-style:none;cursor:pointer;font:400 22px/1.3 var(--serif);letter-spacing:-.015em}
.sv-faq summary::-webkit-details-marker{display:none}
.sv-faq p{font:15px/1.6 var(--display);color:var(--sv-soft);margin-top:12px;padding-left:22px;position:relative}
/* Questions right after "what to send" continue the same block. */
.sv-start+.sv-faq{padding-top:30px}
.sv-faq p:before{content:"↳";position:absolute;left:0;color:var(--sv-muted)}

/* Brand Studio veil over a sticky film */
.sv-backdrop-wrap{position:relative}
.sv-backdrop{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 calc(100% - 180px),transparent);mask-image:linear-gradient(#000 calc(100% - 180px),transparent)}
.sv-backdrop :is(video,img){width:100%;height:100%;object-fit:cover;display:block}
.sv-veil{position:absolute;inset:0;background:rgba(13,13,13,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .7s cubic-bezier(.25,.1,.25,1)}
.sv-backdrop-wrap.is-veiled .sv-veil{opacity:1}
.sv-backdrop-wrap>:not(.sv-backdrop){position:relative;z-index:1}
/* The sticky backdrop reaches one viewport past its wrapper; the next section stays above it. */
.sv-backdrop-wrap+[data-tone]{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.sv-veil{transition:none}}

/* Related services */
.sv-related{padding:150px var(--sv-pad) 120px}
.sv-related>h2{font-size:clamp(34px,3.8vw,58px);line-height:1.04;margin-bottom:56px;max-width:760px}
.sv-related-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 20px}
.sv-related-list a{display:grid;grid-template-columns:1fr auto;gap:10px;color:inherit}
.sv-related-media{position:relative;grid-column:1/3;display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:color-mix(in srgb,currentColor 8%,transparent)}
.sv-related-media img{width:100%;height:100%;object-fit:cover;display:block;transition:scale 1.1s var(--ease)}
.sv-related-list a:hover img{scale:1.05}
/* "Before this" / "Next step" sits on the picture, so every card keeps the same rows (name and arrow on one line). */
.sv-related-step{position:absolute;top:12px;left:12px;font:12px/1 var(--sans);letter-spacing:.02em;padding:6px 9px;border-radius:5px;color:#fff;background:rgba(13,13,13,.5);border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sv-related-name{font:400 24px/1.1 var(--serif);letter-spacing:-.02em;margin-top:8px}
.sv-related-note{grid-column:1;font:14px/1.4 var(--display);color:var(--sv-muted)}
.sv-related-list i{grid-column:2;grid-row:2;font-style:normal;align-self:end;transition:rotate .5s var(--ease)}
.sv-related-list a:hover i{rotate:45deg}

/* Close, with the animated PH gradient (kit close() + closeFilms()). The film carries its own #0d0d0d ground, the same as
   the dark surface, so it composites normally (no screen blend); the radial mask still fades its edges. The square box is
   reserved from the start, so the poster → film swap never shifts the layout. */
.sv-close{position:relative;overflow:hidden;text-align:center;padding:220px var(--sv-gutter) 230px;isolation:isolate;
 /* The 860 px glow is taller than the section on desktop: fade its top and bottom into the surface instead of a hard
    clip. The 90 px fade stays inside the padding (≥140 px), so the title, text and link are untouched. */
 -webkit-mask-image:linear-gradient(transparent,#000 min(90px,18%),#000 calc(100% - min(90px,18%)),transparent);
 mask-image:linear-gradient(transparent,#000 min(90px,18%),#000 calc(100% - min(90px,18%)),transparent)}
.sv-close-glow{position:absolute;z-index:-1;left:50%;top:50%;width:min(860px,118vw);aspect-ratio:1;translate:-50% -50%;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.sv-close-film{display:block;width:100%;height:100%;object-fit:contain;background:#0d0d0d}
.sv-close h2{font-size:clamp(44px,5.6vw,88px);line-height:1;margin:0 auto 44px}
/* Each page closes with its own call to action; the footer keeps its cards and links. */
main:has(.sv)~.site-footer .footer-intro{display:none}

@media(max-width:1100px){
 .sv-menu-list li{grid-template-columns:48px minmax(0,1fr) minmax(0,1fr)}
 .sv-menu-list .tags{grid-column:2/4;justify-content:flex-start}
 .sv-related-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .sv-hero{padding-top:118px}
 .sv-hero h1,.sv-hero-full h1{font-size:44px}
 .sv-stage{aspect-ratio:1;margin-top:8px}
 .sv-hero-foot p,.sv-hero-full-text{font-size:15px}
 .sv-hero-full-copy{padding-bottom:44px}
 .sv-thesis{padding-bottom:100px}
 .sv-statement{font-size:28px;margin-bottom:56px}
 .sv-logos{gap:20px 32px}.sv-logos img{height:calc(20px*var(--logo-scale,1))}
 .sv-work{padding-bottom:120px}
 .sv-work>h2{font-size:38px;margin-bottom:60px}
 .sv-work-field{display:flex;flex-direction:column;gap:64px}
 .sv-piece{width:100%}
 .w-b,.w-d{width:78%;align-self:flex-end;margin-top:0}
 .w-e{margin-top:0}
 .sv-menu{padding-top:110px;padding-bottom:100px}
 .sv-menu-head{margin-bottom:40px}
 .sv-menu-list li{grid-template-columns:32px minmax(0,1fr) 72px;gap:12px 14px;padding:22px 0}
 .sv-menu-list h3{font-size:26px}
 .sv-menu-list p,.sv-menu-list .tags{grid-column:2/3}
 .sv-menu-thumb{display:block;grid-column:3;grid-row:1/4;align-self:start}
 .sv-menu-thumb img{display:block;width:72px;height:90px;object-fit:cover;border-radius:8px}
 .sv-menu-list:hover li:not(:hover){opacity:1}
 .sv-menu-preview{display:none}
 .sv-voice{display:block;padding-bottom:100px}
 .sv-voice blockquote{margin-top:36px}
 .sv-voice blockquote p,.sv-voice-solo blockquote p{font-size:26px}
 .sv-start h2{padding-top:70px;font-size:30px}
 .sv-start{padding-bottom:110px}
 .sv-related{padding-top:100px}
 .sv-related-list{grid-template-columns:1fr;gap:34px}
 .sv-faq{display:block;padding:90px var(--sv-gutter)}
 .sv-faq>h2{margin-bottom:28px}
 .sv-close{padding:140px var(--sv-gutter) 150px}
 .sv-close h2{font-size:44px}
}
/* Client logos are sized optically: equal ink-box area, corrected for ink density and file padding
   (measured from assets/brands; re-measure when a logo file is added or replaced). */
.sv-logos img[src$="/bird-and-bird.svg"]{--logo-scale:0.83}
.sv-logos img[src$="/erha.png"]{--logo-scale:1.208}
.sv-logos img[src$="/flick.png"]{--logo-scale:1.326}
.sv-logos img[src$="/keychron.svg"]{--logo-scale:0.861}
.sv-logos img[src$="/land-rover.svg"]{--logo-scale:1.208}
.sv-logos img[src$="/liquid-aroma.png"]{--logo-scale:1.208}
.sv-logos img[src$="/miggy.png"]{--logo-scale:0.802}
.sv-logos img[src$="/nailboo.svg"]{--logo-scale:0.838}
.sv-logos img[src$="/ontario-airport.png"]{--logo-scale:1.293}
.sv-logos img[src$="/pomelo.svg"]{--logo-scale:1.219}
.sv-logos img[src$="/rabbit.svg"]{--logo-scale:1.194}
.sv-logos img[src$="/signal.svg"]{--logo-scale:1.219}
.sv-logos img[src$="/steelcase.svg"]{--logo-scale:0.766}
/* The close is the heading of the form below it: one ask per page. The form section has no heading of its own and is
   labelled by the close title (app.js: contactSection({labelledby:'sv-close-title'})). */
.sv-close-text{font:17px/1.55 var(--display);color:#cfcfcf;max-width:520px;margin:-22px auto 34px;text-align:center}
/* In-page anchors land below the fixed header. */
.sv [id]{scroll-margin-top:96px}
/* Hero titles say what the service is, so some run long: balance their lines (each side of a <br>) on narrow screens. */
.sv-hero h1,.sv-hero-full h1{text-wrap:balance}