/* case pages, built on s4.css tokens */
.cs{overflow-x:hidden}
.cs main{padding-top:clamp(92px,10vw,132px)}
.cs .dock a.lg{margin-left:4px}
/* header */
.ch{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,36px);row-gap:clamp(18px,2.4vw,32px);align-items:start;padding-bottom:clamp(26px,4vw,50px)}
.ch h1{grid-column:1/-1;font-size:clamp(42px,7.4vw,118px);letter-spacing:-.022em;line-height:.95;max-width:15ch}
.js .ch h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.js .ch h1 i{display:inline-block;font-style:normal;transform:translateY(112%) rotate(4deg);transition:transform .9s var(--ease);transition-delay:calc(var(--i)*80ms)}
.js .ch.in h1 i{transform:none}
.ch .cm{grid-column:1/5;grid-row:2;display:flex;flex-direction:column;gap:14px}
.cm dt{font-size:14px;color:var(--mu);font-weight:500}
.cm dd{font-size:17px;font-weight:600;line-height:1.3;margin-top:1px}
.ch .lead{grid-column:6/13;grid-row:2;font-size:clamp(21px,2.2vw,32px);font-weight:500;letter-spacing:-.02em;line-height:1.25;max-width:30ch;color:var(--tx);margin-top:clamp(0px,3vw,48px)}
/* hero window */
.cslot{display:block}.cwin{position:relative}.cart{max-height:calc(100vh - 150px)}
.cwin{transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--ws,1));will-change:transform;background:var(--win);border-radius:var(--r);overflow:hidden;box-shadow:0 40px 80px -36px rgba(18,55,42,.42),0 0 0 1px var(--ln);min-width:0;transition:box-shadow .6s}
.js .cwin{animation:winin 1s var(--ease) .15s both}
.cart{position:relative;aspect-ratio:var(--ar);background:var(--bgc,var(--win));overflow:hidden}
.cart img{display:block;width:100%;height:100%;object-fit:cover;}
.cart img{transform:scale(var(--iz,1));object-position:50% var(--ip,0%);will-change:transform}
.cart canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .5s}
.js .cart:not(.fade) img{opacity:var(--real,0)}.cart.fade canvas{opacity:0}
.cwin.is-max{position:fixed;inset:14px;z-index:90;display:flex;flex-direction:column;box-shadow:0 0 0 100vmax rgba(18,55,42,.55)}
.cwin.is-max .cart{flex:1;min-height:0;aspect-ratio:auto}.cwin.is-max .cart img{object-fit:contain}
.cs [data-win].is-min>:not(.bar){display:none}.cs [data-win].is-closed{display:none!important}
/* sections */
.csec{padding-block:clamp(40px,6.4vw,92px) 0}
.sh2{font-size:clamp(30px,4.2vw,64px);letter-spacing:-.022em}
.tb2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,36px);row-gap:20px;align-items:start}
.tb2 .sh2{grid-column:1/5}
.tb2 .tx2{grid-column:5/13;font-size:clamp(19px,1.8vw,26px);font-weight:500;line-height:1.38;letter-spacing:-.012em}
.tx2 p+p{margin-top:.8em}.tx2 ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.tx2 li{padding:12px 16px;border-radius:14px;background:rgba(255,253,248,.7);box-shadow:0 0 0 1px var(--ln);font-size:.82em}
/* video */
.vwrap{margin-top:24px}
.vcard{position:relative;display:block;width:100%;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px var(--ln),0 30px 60px -34px rgba(18,55,42,.5);background:var(--cr);aspect-ratio:16/9}
.vcard img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}.vcard:hover img{transform:scale(1.03)}
.vcard .vp{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--ink);color:var(--lm);display:grid;place-items:center;transition:transform .5s var(--spring)}
.vcard:hover .vp{transform:scale(1.1)}.vcard .vp svg{width:34px;height:34px;fill:currentColor}
.vwrap video{width:100%;border-radius:var(--r);display:block}
.vn{margin-top:12px;font-size:15px;color:var(--mu)}.vn a{font-weight:600;text-decoration:underline;text-underline-offset:3px}.vn svg{display:none}
/* process */
.cpr{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:start;margin-top:clamp(18px,3vw,34px)}
.cti{position:sticky;top:90px;display:flex;flex-direction:column;gap:2px}
.cti button{text-align:left;padding:9px 0;font-size:clamp(22px,2.3vw,34px);font-weight:700;letter-spacing:-.018em;line-height:1.05;color:var(--mu);transition:color .3s,transform .4s var(--spring)}
.cti button:hover{color:var(--tx)}.cti button[aria-selected=true]{color:var(--ink);transform:translateX(8px)}
.cpp{display:grid;min-width:0;align-items:start;transition:height .5s var(--ease)}
.cpn{grid-area:1/1;visibility:hidden;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .55s var(--ease),visibility 0s .45s;background:var(--c);border-radius:clamp(22px,3vw,36px);padding:clamp(20px,3vw,44px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(18px,3vw,44px);align-content:start;align-self:start;box-shadow:0 30px 50px -36px rgba(18,55,42,.5)}
.cpn.on{visibility:visible;opacity:1;transform:none;transition:opacity .45s var(--ease),transform .55s var(--ease)}
.cpn h3{font-size:clamp(34px,4.4vw,66px);letter-spacing:-.022em;margin-bottom:6px}
.cpn h4{font-size:15px;font-weight:700;margin:18px 0 6px}
.cpn p{font-size:clamp(16px,1.25vw,18px);line-height:1.5;max-width:46ch}
.cpn ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.cpn li{padding:9px 14px;border-radius:14px;background:rgba(255,253,248,.62);font-size:15px;line-height:1.35}
.cpm{min-width:0;align-self:start}
.fgr{display:flex;flex-direction:column;gap:14px}
.fg{margin:0}.fg img{display:block;width:100%;height:auto;border-radius:16px;background:rgba(255,253,248,.62);cursor:zoom-in;box-shadow:0 0 0 1px var(--ln)}
.fg figcaption,.gw figcaption{margin-top:9px;font-size:14px;color:#33463c;line-height:1.35}
/* gallery */
.gall{display:grid;gap:clamp(14px,2vw,26px);margin-top:clamp(18px,3vw,34px);grid-template-columns:minmax(0,1fr)}
.gw{background:var(--win);border-radius:var(--r);overflow:hidden;box-shadow:0 30px 60px -36px rgba(18,55,42,.45),0 0 0 1px var(--ln);padding-bottom:16px}
.gw .fg{padding:clamp(12px,2vw,26px) clamp(12px,2vw,26px) 0;display:flex;justify-content:center}
.gw .fg img{width:auto;max-width:100%;max-height:min(84vh,980px);object-fit:contain;box-shadow:none;background:none}
.gw figcaption{padding:10px clamp(16px,2vw,28px) 0;max-width:70ch}
.gw.is-min .fg,.gw.is-min figcaption{display:none}
/* outcome */
.out{margin-top:clamp(18px,3vw,34px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:center;background:var(--lm);border-radius:clamp(26px,3.6vw,48px);padding:clamp(26px,4.4vw,64px);box-shadow:0 30px 50px -36px rgba(18,55,42,.55)}
.out .num{font-size:clamp(84px,15vw,230px);font-weight:700;letter-spacing:-.03em;line-height:.85;font-variant-numeric:tabular-nums;color:var(--ink)}
.out .oc{font-size:clamp(20px,2vw,29px);font-weight:500;line-height:1.3;letter-spacing:-.015em;max-width:34ch}
.out.nonum{grid-template-columns:1fr;background:var(--bt)}.out.nonum .oc{font-size:clamp(24px,3.2vw,46px);max-width:30ch;letter-spacing:-.012em;font-weight:600}
/* next */
.nxt{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"s a" "t a";gap:6px 24px;align-items:end;margin-top:clamp(50px,8vw,110px);margin-bottom:clamp(40px,6vw,80px);padding:clamp(24px,4vw,56px);border-radius:clamp(26px,3.6vw,48px);background:var(--ink);color:#f3f0e6;transition:transform .55s var(--spring)}
.nxt:hover{transform:translateY(-6px) rotate(-.6deg)}
.nxt span{grid-area:s;font-size:16px;color:#c4c8bd}.nxt b{grid-area:t;font-size:clamp(32px,6vw,92px);letter-spacing:-.022em;line-height:.98;color:var(--lm)}
.nxt .ar{grid-area:a;align-self:center;background:var(--lm);color:var(--ink);font-style:normal;width:clamp(48px,6vw,84px);height:clamp(48px,6vw,84px);font-size:clamp(20px,2.6vw,34px)}
.nxt:hover .ar{transform:translateX(6px)}
.ct .up{padding:12px 20px;border-radius:14px;background:var(--pk);color:var(--ink);font-weight:700;font-size:15px;transition:transform .45s var(--spring)}.ct .up:hover{transform:scale(1.08) rotate(-2deg)}
.ct h2{max-width:14ch}
/* lightbox */
#lb{position:fixed;inset:0;z-index:95;display:none;place-items:center;background:rgba(18,55,42,.82);padding:18px;cursor:zoom-out}
#lb.on{display:grid}#lb img{max-width:100%;max-height:100%;border-radius:16px;background:var(--cr)}
@media (max-width:1100px){
 .cpr{grid-template-columns:1fr}.cti{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:6px;scroll-snap-type:x proximity}
 .cti button{flex:none;padding:10px 16px;font-size:18px;border-radius:14px;background:rgba(255,253,248,.6);scroll-snap-align:start}.cti button[aria-selected=true]{background:var(--ink);color:#fff;transform:none}
}
@media (max-width:860px){
 .ch .cm,.ch .lead{grid-column:1/-1;grid-row:auto}.ch .lead{margin-top:0}
 .tb2{grid-template-columns:1fr}.tb2 .sh2,.tb2 .tx2{grid-column:1}
 .cpn{grid-template-columns:1fr}
 .out{grid-template-columns:1fr}
 .cwin.is-max{inset:8px}
}
@media (prefers-reduced-motion:reduce){.js .ch h1 i{transform:none;transition:none}.js .cwin{animation:none}}
.lk{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.lk svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cm dd .lk svg{display:inline-block}
.cm dd:has(.lk){display:flex;flex-wrap:wrap;gap:4px 18px}
@media (max-width:860px){
.ch h1,.ch .lead,.cpn p,.out .oc,.out.nonum .oc,.ct h2,.gw figcaption,.ch .meta *,.ch p{max-width:none}
.ch .lead{grid-column:1/-1;margin-top:0}
}

@media (prefers-reduced-motion:reduce){.cwin{transform:none}.cart img{transform:none}}
.cwin.is-max{transform:none!important}
[data-win]>.bar{border-bottom:0;background:rgba(18,55,42,.045)}
.ch .meta>div,.cti button{border:0}
.cwin.is-min .bar{background:rgba(18,55,42,.1)}
/* header: summary first, facts as one tidy row below, nothing floating */
.ch .lead{grid-column:1/10;grid-row:2;margin-top:0;max-width:34ch}
.ch .cm{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);margin-top:clamp(6px,1.6vw,22px)}
@media (max-width:860px){.ch .lead{grid-column:1/-1;grid-row:2;max-width:none}.ch .cm{grid-column:1/-1;grid-row:3;grid-template-columns:1fr;gap:12px}}

.cwin{transform-origin:50% 30%}.cart{overflow:hidden}.cart img{transform-origin:50% 50%}.cwin.is-max .cart{max-height:none}
@media (prefers-reduced-motion:reduce){.cslot{height:auto!important}.cwin{position:relative!important}}
.ch h1{max-width:none}.ct h2{max-width:none}

/* type system, case pages: same scale as the home */
:root{--t-h2:clamp(32px,4.6vw,70px);--t-h3p:clamp(28px,3.4vw,52px);--t-lede:clamp(18px,1.55vw,22px);--t-body:clamp(16px,1.2vw,18px);--t-sm:14px}
body .sh2{font-size:var(--t-h2);line-height:1;letter-spacing:-.022em;text-wrap:balance}
body .cpn h3{font-size:var(--t-h3p);line-height:1;letter-spacing:-.022em;text-wrap:balance}
body .ch h1{text-wrap:balance}
body .ch .lead{font-size:clamp(20px,2vw,28px);line-height:1.25;text-wrap:balance}
body .cpn p,body .tx2,body .out .oc{font-size:var(--t-body);line-height:1.55;text-wrap:pretty}
body .gw figcaption,body .ch .meta *{font-size:var(--t-sm);line-height:1.45}

/* targets and focus */
body .lk{min-height:44px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.ct :focus-visible{outline-color:var(--lm)}

/* start to finish steps */
.stps{list-style:none;margin:clamp(18px,3vw,34px) 0 0;padding:0;display:grid;gap:clamp(22px,3vw,40px) clamp(14px,2vw,26px);grid-template-columns:minmax(0,1fr)}
.stp{min-width:0;display:flex;flex-direction:column}
.stp figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--cr);box-shadow:0 0 0 1px var(--ln),0 24px 48px -32px rgba(18,55,42,.45);aspect-ratio:var(--ar)}
.stp img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.stp .sn{margin:14px 0 0;font-size:15px;color:var(--mu)}
.stp h3{margin:2px 0 0;font-size:clamp(18px,1.6vw,21px);font-weight:600;line-height:1.25;color:var(--ink)}
.stp p:last-child{margin:6px 0 0;font-size:16px;line-height:1.5;color:var(--mu);max-width:34ch}
@media(min-width:620px){.stps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1020px){.stps.c4{grid-template-columns:repeat(4,minmax(0,1fr))}}

.ndn{margin-top:16px;max-width:62ch;font-size:15px;line-height:1.5;color:var(--mu)}
.cart{width:100%;max-height:none}
@media (min-width:861px){.cwin:not(.is-max){width:min(100%,calc((100vh - 170px)*1.5385));margin-inline:auto}}
body h2,body h3{max-width:none;text-wrap:pretty}
.sn{text-wrap:pretty}.sbk .sn{display:block}
.sn{text-wrap:balance}