/* Brand & packaging — page-specific sections (kit styles in service-page.css). */

/* Opening: the label, unwrapped. White by design, like the kit hero; the frame stays put while the
   jar turns and its flat label runs through it (brand.js sets the geometry). */
/* The white band after the pin keeps the hand-off to the glow in empty space. */
.sv-hero.sv-brand-open{padding:0 0 70px;text-align:center}
.sv-brand-track{position:relative;height:280vh}
.sv-brand-frame{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.sv-brand-intro{position:absolute;left:0;right:0;top:0;padding:126px var(--sv-gutter) 0;z-index:3;pointer-events:none}
.sv-brand-intro>*{pointer-events:auto}
.sv-brand-stage{position:absolute;left:50%;top:0;width:var(--v,560px);height:var(--v,560px);margin-left:calc(var(--v,560px)/-2);transform-origin:50% 0;will-change:transform;z-index:1}
.sv-brand-jar{position:absolute;inset:0;z-index:2}
.sv-brand-jar video{display:block;width:100%;height:100%;mix-blend-mode:multiply}
.sv-brand-strip{--hole:calc(var(--v,560px)*.372);--feather:calc(var(--v,560px)*.075);position:absolute;left:50%;top:calc(var(--v,560px)*.645 - var(--h,200px)/2);width:var(--ws,100vw);height:var(--h,200px);margin-left:calc(var(--ws,100vw)/-2);z-index:1;
 border-block:1px solid rgba(13,13,13,.08);
 -webkit-mask-image:linear-gradient(90deg,#000 calc(50% - var(--hole) - var(--feather)),transparent calc(50% - var(--hole)),transparent calc(50% + var(--hole)),#000 calc(50% + var(--hole) + var(--feather)));
 mask-image:linear-gradient(90deg,#000 calc(50% - var(--hole) - var(--feather)),transparent calc(50% - var(--hole)),transparent calc(50% + var(--hole)),#000 calc(50% + var(--hole) + var(--feather)))}
.sv-brand-run{position:absolute;left:0;top:0;height:100%;display:flex;will-change:transform}
.sv-brand-run img{display:block;flex:none;width:var(--l,1260px);max-width:none;height:100%}
.sv-brand-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding:0 var(--sv-gutter) 34px;text-align:left}
.sv-brand-foot p{font:17px/1.55 var(--display);color:#4a4a4a;max-width:440px}
.sv-brand-foot .sv-actions{justify-content:flex-end;flex:none}
.sv-brand-case{position:absolute;left:var(--sv-gutter);top:92px;z-index:3;margin:0;font:13px/1.35 var(--sans);color:#787878;text-align:left;opacity:0}
.sv-brand-case span{display:block;color:#0d0d0d}
.sv-brand-turns{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0;padding:0 var(--sv-gutter) 30px;list-style:none;text-align:left;opacity:0;pointer-events:none}
.sv-brand-turns li{border-top:1px solid #dedede;padding-top:16px;opacity:.28;transition:opacity .5s var(--ease),border-color .5s var(--ease)}
.sv-brand-turns li.is-on{opacity:1;border-top-color:#0d0d0d}
.sv-brand-turns span{font:12px/1 var(--sans);color:#787878}
.sv-brand-turns h2{font-size:clamp(22px,1.9vw,28px);line-height:1.1;margin:12px 0 8px;color:#0d0d0d}
.sv-brand-turns p{font:14px/1.45 var(--display);color:#4a4a4a;max-width:300px}
/* Phones: the label lies flat under the jar; a short mark shows the part facing you. */
.is-below .sv-brand-strip{top:calc(var(--v,300px)*1.018);-webkit-mask-image:none;mask-image:none;opacity:0}
.is-below .sv-brand-strip:before{content:"";position:absolute;left:50%;top:-15px;width:1px;height:10px;background:#0d0d0d}
.is-static .is-below .sv-brand-stage{margin-bottom:calc(var(--v,300px)*.56)}
/* On arrival the label unrolls out of the jar and the copy settles. */
.motion .sv-brand-strip{animation:sv-brand-unroll 1.8s var(--m-ease,var(--ease)) .25s both}
.motion .sv-brand-foot{animation:sv-brand-rise 1.1s var(--m-ease,var(--ease)) .55s both}
@keyframes sv-brand-unroll{from{clip-path:inset(-24px 50% -24px 50%)}to{clip-path:inset(-24px 0 -24px 0)}}
@keyframes sv-brand-rise{from{opacity:0;translate:0 24px}}
/* Reduced motion: no pinning, no turning; the label sits through the jar, the four notes below. */
.sv-brand-track.is-static{height:auto}
.is-static .sv-brand-frame{position:relative;height:auto;overflow:hidden;padding-bottom:40px}
.is-static :is(.sv-brand-intro,.sv-brand-foot,.sv-brand-turns,.sv-brand-case){position:relative;opacity:1!important;transform:none!important;animation:none}
.is-static .sv-brand-stage{position:relative;left:auto;margin:30px auto 10px;transform:none!important}
.is-static .sv-brand-strip{animation:none}
.is-static .sv-brand-foot{margin-top:20px}
.is-static .sv-brand-case{top:auto;left:auto;margin:50px 0 20px;padding:0 var(--sv-gutter)}
.is-static .sv-brand-turns li{opacity:1}

/* The system: four parts, laid out like pages of a guide. */
.sv-brand-system{padding:40px var(--sv-pad) 150px}
.sv-brand-system-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;align-items:end;margin-bottom:80px}
.sv-brand-system-head .sv-label{grid-column:1/-1}
:is(.sv-brand-system-head,.sv-brand-apps-head) h2{grid-column:1/8;font-size:clamp(40px,4.6vw,70px);line-height:1;margin-top:18px}
:is(.sv-brand-system-head,.sv-brand-apps-head) p:last-child{grid-column:9/13;font:16px/1.6 var(--display);color:var(--sv-soft)}
/* The applications open centred, like a gallery wall. */
.sv-brand-apps-head{text-align:center;max-width:820px;margin:0 auto 110px}
.sv-brand-apps-head h2{margin:18px 0 24px}
.sv-brand-apps-head p:last-child{max-width:540px;margin:0 auto}
.sv-brand-part{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;padding:30px 0 90px;border-top:1px solid var(--sv-line)}
.sv-brand-part:last-child{padding-bottom:0}
.sv-brand-part-name{grid-column:1/4}
.sv-brand-part-name span{font:13px/1 var(--sans);color:var(--sv-muted)}
.sv-brand-part-name h3{font-size:clamp(28px,2.6vw,40px);line-height:1.05;margin:14px 0 12px}
.sv-brand-part-name p{font:15px/1.5 var(--display);color:var(--sv-soft);max-width:250px}
.sv-brand-part>:last-child{grid-column:4/13;margin:0;padding-top:8px}
.sv-brand-wordmark img{display:block;width:100%;height:auto;filter:brightness(0) invert(var(--sv-invert))}
.sv-brand-bar{display:flex;height:clamp(120px,13vw,190px);border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--sv-line)}
.sv-brand-bar i{display:block}
.sv-brand-bar .sv-brand-white{flex:74;background:#fff}
.sv-brand-bar .sv-brand-yellow{flex:20;background:#f0e614}
/* The label's black is nearly the dark surface: its stretch and its dot get a light 1 px edge so the measured palette reads whole.
   "Other" (the 2% the three colours leave, so the bar adds up to 100%) is hatched: it isn't a colour of the palette. */
.sv-brand-bar .sv-brand-black{flex:4;background:#12120e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.sv-brand-bar .sv-brand-other{flex:2;background:repeating-linear-gradient(135deg,var(--sv-line) 0 2px,transparent 2px 5px)}
.sv-brand-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:22px 0 0}
.sv-brand-chips div{position:relative;display:grid;align-content:start;gap:5px;padding-left:22px}
.sv-brand-chips div:before{content:"";position:absolute;left:0;top:3px;width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px var(--sv-line)}
.sv-brand-chips .sv-brand-white:before{background:#fff}.sv-brand-chips .sv-brand-yellow:before{background:#f0e614}.sv-brand-chips .sv-brand-black:before{background:#12120e;box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.sv-brand-chips .sv-brand-other:before{background:repeating-linear-gradient(135deg,var(--sv-line) 0 2px,transparent 2px 4px)}
.sv-brand-chips dt{font:15px/1.25 var(--sans)}
.sv-brand-chips dd{margin:0;font:13px/1.4 var(--sans);color:var(--sv-muted)}
.sv-brand-hex{font-family:Fragment,monospace!important;font-size:12px!important;letter-spacing:.02em}
.sv-brand-voices{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:20px;align-items:end}
.sv-brand-voices figure{margin:0}
.sv-brand-voices figure:first-child{grid-column:1/6}
.sv-brand-voices figure:last-child{grid-column:6/10}
.sv-brand-voices img,.sv-brand-habits img{display:block;width:100%;height:auto;border-radius:10px}
.sv-brand-voices figcaption{font:13px/1.4 var(--sans);color:var(--sv-fg);margin-top:12px}
.sv-brand-voices figcaption span{color:var(--sv-muted);margin-left:8px}
.sv-brand-habits{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:20px;align-items:end}
.sv-brand-habits figure{margin:0}
.sv-brand-habit--tags{grid-column:1/6;grid-row:1}
.sv-brand-habit--cta{grid-column:1/6;grid-row:2}
.sv-brand-habit--rules{grid-column:6/10;grid-row:1/3}

/* Applications: where the brand went, roughly in the order a customer meets it. */
.sv-brand-apps{padding:150px var(--sv-pad) 120px}
.sv-brand-apps-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;row-gap:120px;align-items:start}
.sv-brand-app{margin:0}
.sv-brand-app-media{border-radius:10px;overflow:hidden;background:color-mix(in srgb,currentColor 7%,transparent)}
.sv-brand-app-media :is(img,video){display:block;width:100%;height:auto}
.sv-brand-app--header video{aspect-ratio:1;object-fit:cover}
.sv-brand-app figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px}
.sv-brand-dot{display:inline-flex;align-items:center;gap:10px;font:15px/1 var(--sans)}
.sv-brand-dot i{width:7px;height:7px;border-radius:50%;background:currentColor}
.sv-brand-app .tags{color:var(--sv-soft)}
.sv-brand-app--banner{grid-column:1/6;--depth:30}
.sv-brand-app--ads{grid-column:7/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:120px;--depth:90}
.sv-brand-app--web{grid-column:1/9;--depth:40}
.sv-brand-app--header{grid-column:9/13;margin-top:200px;--depth:110}
.sv-brand-app--mail{grid-column:4/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;--depth:60}
.sv-brand-app--mail figcaption{grid-column:1/-1}
.sv-brand-app--pack{grid-column:1/13;--depth:20}
.sv-brand-app--leash{grid-column:1/8;--depth:40}
.sv-brand-app--bag{grid-column:8/13;margin-top:180px;--depth:110}
.sv-brand-apps-link{margin-top:90px;text-align:center}
@supports (animation-timeline:view()){
 .motion .sv-brand-app{animation:sv-brand-depth linear both;animation-timeline:view();animation-range:cover}
 @keyframes sv-brand-depth{from{translate:0 calc(var(--depth,40)*1px)}to{translate:0 calc(var(--depth,40)*-1px)}}
}

/* Light act: deliverables, how to start, questions, then a short and honest list of what
   will complete the page. Generous bottom padding keeps the switch to the dark act in empty space. */
.sv-brand .sv-start{padding-bottom:90px}
.sv-brand .sv-faq{padding-bottom:90px}
.sv-brand .sv-brand-needed{padding:0 var(--sv-pad) 140px}
.sv-brand-needed>h2{font-size:clamp(24px,2vw,30px);line-height:1.1;margin-bottom:18px}
.sv-brand-needed .sv-needed-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sv-brand-needed .sv-needed-slot{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:16px;align-items:start;padding:16px;border:1px dashed color-mix(in srgb,currentColor 30%,transparent);border-radius:10px}
.sv-brand-needed .sv-needed-frame{display:contents}
/* A small empty label, hatched, stands for the picture that is still missing. */
.sv-brand-needed .sv-needed-frame:before{content:"";grid-column:1;grid-row:1/3;width:34px;aspect-ratio:1;border-radius:4px;border:1px solid color-mix(in srgb,currentColor 16%,transparent);background:linear-gradient(color-mix(in srgb,currentColor 13%,transparent),color-mix(in srgb,currentColor 13%,transparent)) center/100% 32% no-repeat,repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,currentColor 8%,transparent) 5px 6px)}
.sv-brand-needed .sv-needed-frame span{grid-column:2;grid-row:1;padding:0;text-align:left;font-size:11px;line-height:1.35;color:var(--sv-fg)}
.sv-brand-needed .sv-needed-slot figcaption{grid-column:2;grid-row:2;margin-top:6px}

@media(max-width:1100px){
 .sv-brand-turns p{font-size:13px}
 .sv-brand-needed .sv-needed-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .sv-hero.sv-brand-open{padding-bottom:44px}
 .sv-brand-track{height:260vh;height:260svh}
 .sv-brand-intro{padding-top:104px}
 .sv-brand-foot{flex-direction:column;align-items:flex-start;gap:18px;padding-bottom:26px}
 .sv-brand-foot p{font-size:15px}
 .sv-brand-foot .sv-actions{justify-content:flex-start}
 .sv-brand-case{top:74px}
 .sv-brand-turns{grid-template-columns:1fr;padding-bottom:26px}
 .sv-brand-turns li{grid-area:1/1;opacity:0;transition:opacity .45s var(--ease)}
 .sv-brand-turns li.is-on{opacity:1}
 .sv-brand-turns h2{font-size:26px}
 .is-static .sv-brand-turns{display:grid;gap:22px}
 .is-static .sv-brand-turns li{grid-area:auto}
 .sv-brand-system-head{display:block;margin-bottom:50px}
 .sv-brand-apps-head{margin-bottom:60px}
 :is(.sv-brand-system-head,.sv-brand-apps-head) h2{font-size:40px}
 :is(.sv-brand-system-head,.sv-brand-apps-head) p:last-child{margin-top:20px}
 .sv-brand-system{padding-bottom:110px}
 .sv-brand-part{display:block;padding:26px 0 64px}
 .sv-brand-part-name{margin-bottom:26px}
 .sv-brand-part-name p{max-width:none}
 .sv-brand-chips{grid-template-columns:1fr;gap:14px}
 .sv-brand-voices{display:flex;flex-direction:column;gap:30px}
 .sv-brand-habits{display:flex;flex-direction:column;gap:12px}
 .sv-brand-habit--rules{order:-1;width:78%;margin-bottom:12px}
 .sv-brand-apps{padding-top:100px;padding-bottom:110px}
 .sv-brand-apps-grid{display:flex;flex-direction:column;gap:60px}
 .sv-brand-apps-grid>.sv-brand-app{--depth:14}
 .sv-brand-app--ads,.sv-brand-app--mail{gap:8px}
 .sv-brand-app--ads{margin-top:-30px}
 .sv-brand-app--header{width:80%;align-self:flex-end;margin-top:-30px}
 .sv-brand-app--bag{width:84%;align-self:flex-end;margin-top:-20px}
 .sv-brand-apps-link{margin-top:60px}
 .sv-brand .sv-start{padding-bottom:20px}
 .sv-brand .sv-faq{padding-bottom:70px}
 .sv-brand .sv-brand-needed{padding:0 var(--sv-gutter) 100px}
 /* Phones: the list becomes one swipeable row, so it stays short. */
 .sv-brand-needed .sv-needed-grid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--sv-gutter)*-1);padding:0 var(--sv-gutter);scroll-padding:0 var(--sv-gutter)}
 .sv-brand-needed .sv-needed-slot{flex:0 0 78%;scroll-snap-align:start}
 /* Slots off to the side of the row never cross the reveal line; show them as they are. */
 .motion .sv-brand-needed .sv-needed-slot{opacity:1;translate:none}
}
@media(prefers-reduced-motion:reduce){
 .sv-brand-strip,.sv-brand-foot{animation:none}
}