/* "What OutDo Stands For" — page styles (prefix sf2-), from the approved V2.1 design with the full-width factory hero (Hero B).
   Loaded after css/site.css; V8 tokens, type and buttons only.
   Motion is opt-in: hidden start states sit under html.sf2-m (set by an inline head script, removed again if js/stands-for.js
   never starts), so all content shows without JavaScript. Only opacity and transform animate. */

/* ---------- spacing scale (desktop 1440 → phone 390) ---------- */
.sf2{--sf2-out:cubic-bezier(.16,1,.3,1);--sf2-ease:cubic-bezier(.22,.61,.24,1);
  --s-sec:clamp(48px,5.2vw,76px);     /* major section padding: 75 → 48 */
  --s-head:clamp(22px,2.4vw,36px);    /* heading → content: 35 → 22 */
  --s-block:clamp(28px,3vw,44px);     /* between blocks inside a section: 43 → 28 */
  --s-row:clamp(18px,1.5vw,22px);     /* purpose statement padding: 22 → 18 */
  --s-panel:clamp(16px,1.7vw,24px);   /* core-value panel gap: 24 → 16 */
  --s-pad:clamp(22px,3vw,44px);       /* panel inner padding: 43 → 22 */
  --sf2-wipe-1:#fff;--sf2-wipe-2:var(--sand);--sf2-wipe-4:#fff}

/* shared pieces */
.sf2-cline{display:block;width:52px;height:2px;background:var(--coral);transform-origin:0 50%}
.sf2-head{max-width:780px}
.sf2-head h2{font-size:clamp(2.1rem,1.3rem + 2.3vw,3.3rem);margin-top:12px}
.sf2-purpose h2 em,.sf2-values h2 em{color:var(--coral-2)}   /* deeper V8 coral: AA for large text on cream (V8 coral is 2.9:1) */
.sf2 main [id]{scroll-margin-top:132px}                        /* fixed header (72) + sticky section navigator (52) */
.sf2-media{position:relative;overflow:hidden}
.sf2-par{position:absolute;inset:-6% 0;will-change:transform}
.sf2-par img,.sf2-media img{width:100%;height:100%;object-fit:cover}

/* reading progress: a 3px line at the very top, desktop only */
.sf2-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;display:none}
.sf2-progress span{display:block;height:100%;background:var(--grad);transform-origin:0 50%;transform:scaleX(0)}
@media (min-width:1025px){.sf2-m .sf2-progress{display:block}}

/* ================= hero: shared ================= */
.sf2-hero{min-height:0;flex-direction:column;align-items:stretch;padding:clamp(112px,13vh,128px) 0 0}
.sf2-hero h1{font-size:clamp(2.7rem,.9rem + 4.3vw,5.2rem);line-height:.97;letter-spacing:-.045em;margin:22px 0 22px}
.sf2-hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.sf2-hero h1 .ln>span{display:block}
.sf2-hero .sub{max-width:31em;font-size:clamp(1.02rem,.94rem + .32vw,1.18rem);line-height:1.65}
.sf2-hero .btns{margin-top:30px}
.sf2-hcap{display:flex;align-items:center;gap:10px;margin:0;white-space:nowrap;font:700 11.5px/1 var(--font);letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.sf2-hcap::before{content:"";width:24px;height:1px;background:var(--coral-lt)}
/* crop marks: precision detail drawn at photo corners */
.sf2-crop{position:absolute;width:18px;height:18px;border:0 solid var(--coral-lt);pointer-events:none}
.sf2-crop.tl{top:-9px;left:-9px;border-width:1px 0 0 1px}.sf2-crop.tr{top:-9px;right:-9px;border-width:1px 1px 0 0}
.sf2-crop.bl{bottom:-9px;left:-9px;border-width:0 0 1px 1px}.sf2-crop.br{bottom:-9px;right:-9px;border-width:0 1px 1px 0}
/* the four values as an index band along the bottom of the hero (value names from the original page) */
.sf2-hvals{margin-top:clamp(40px,4.6vw,60px);border-top:1px solid rgba(255,255,255,.14)}
.sf2-hvals ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sf2-hvals li+li{border-left:1px solid rgba(255,255,255,.1)}
.sf2-hvals a{position:relative;display:flex;align-items:center;gap:14px;min-height:clamp(72px,6.4vw,88px);padding:0 clamp(14px,1.6vw,24px);color:#fff;font:700 clamp(.95rem,.85rem + .3vw,1.08rem)/1.25 var(--font)}
.sf2-hvals li:first-child a{padding-left:0}
.sf2-hvals .n{font:800 12px/1 var(--font);letter-spacing:.1em;color:var(--coral-lt)}
.sf2-hvals .go{margin-left:auto;opacity:.45;transition:transform .35s var(--sf2-out),opacity .35s}
.sf2-hvals a::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--sf2-out)}
.sf2-hvals a:hover::after,.sf2-hvals a:focus-visible::after{transform:none}
.sf2-hvals a:hover .go,.sf2-hvals a:focus-visible .go{transform:translateY(3px);opacity:1}
.sf2-hvals a:focus-visible{outline-offset:-3px}


/* ================= hero: full-width factory floor (approved V2.1 Hero B) ================= */
.sf2-hb{min-height:min(max(660px,100svh),880px);padding:0;justify-content:flex-end}
.sf2-hbg{position:absolute;inset:0;z-index:-1;margin:0;overflow:hidden;background:var(--navy-3)}
.sf2-hbg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.sf2-hbg::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(18,29,52,.95) 0%,rgba(18,29,52,.86) 30%,rgba(18,29,52,.42) 58%,rgba(18,29,52,.18) 100%),
  linear-gradient(180deg,rgba(18,29,52,.72) 0%,rgba(18,29,52,0) 22%),
  linear-gradient(0deg,rgba(18,29,52,.97) 0%,rgba(18,29,52,.55) 24%,rgba(18,29,52,0) 46%),
  radial-gradient(55% 70% at 0% 100%,rgba(237,110,99,.3),transparent 62%)}
.sf2-hb>.wrap{padding-top:clamp(150px,24vh,230px)}
.sf2-hb .sf2-hcopy{max-width:660px}
.sf2-hbframe{position:absolute;top:17%;right:calc(var(--gut) + 1vw);width:min(31vw,440px);aspect-ratio:3/2;pointer-events:none}
.sf2-hb .sf2-hcap{position:absolute;right:var(--gut);bottom:calc(clamp(72px,6.4vw,88px) + 22px)}   /* on the darkest part of the photo, above the value index */

/* hero entrance (CSS only, ~1.4 s, nothing waits for it) */
@keyframes sf2-rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes sf2-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes sf2-fade{from{opacity:0}to{opacity:1}}
@keyframes sf2-settleb{from{transform:scale(1.07)}to{transform:none}}
.sf2-m .sf2-hero .pill{animation:sf2-up .6s var(--sf2-out) .05s both}
.sf2-m .sf2-hero h1 .ln>span{animation:sf2-rise .9s var(--sf2-out) .14s both}
.sf2-m .sf2-hero h1 em.ln>span{animation-delay:.28s}
.sf2-m .sf2-hero .sub{animation:sf2-up .8s var(--sf2-out) .44s both}
.sf2-m .sf2-hero .btns .btn{animation:sf2-up .6s var(--sf2-out) .6s both}
.sf2-m .sf2-hero .btns .btn+.btn{animation-delay:.7s}
.sf2-m .sf2-hvals li{animation:sf2-up .6s var(--sf2-out) .78s both}
.sf2-m .sf2-hvals li:nth-child(2){animation-delay:.86s}.sf2-m .sf2-hvals li:nth-child(3){animation-delay:.94s}.sf2-m .sf2-hvals li:nth-child(4){animation-delay:1.02s}
.sf2-m .sf2-crop,.sf2-m .sf2-hcap{animation:sf2-fade .9s var(--sf2-ease) .8s both}
/* the floor settles into place behind the overlay */
.sf2-m .sf2-hbg{animation:sf2-fade .9s var(--sf2-ease) both}
.sf2-m .sf2-hbg img{animation:sf2-settleb 1.8s var(--sf2-out) both}

/* ================= introduction (second sentence) ================= */
.sf2-prelude{padding:var(--s-sec) 0 var(--s-block);background:var(--cream)}
.sf2-prelude .sf2-cline{margin-bottom:22px}
.sf2-prelude p{max-width:22em;font:800 clamp(1.6rem,1rem + 2.2vw,2.9rem)/1.15 var(--font);letter-spacing:-.035em;color:var(--navy)}
.sf2-prelude em,.sf2-pclose em{font-style:normal;color:var(--coral-2)}
.sf2-nb{white-space:nowrap}   /* keeps "OutDo expectations," together with its comma */

/* section navigator: V8 .cap-nav; sticky on desktop, a plain index on phones and tablets */
@media (max-width:900px){.sf2-nav{position:relative;top:auto}}

/* ================= 01 · purpose ================= */
.sf2-purpose{padding:var(--s-sec) 0 calc(var(--s-sec) * .75)}   /* same cream as Values: a hairline marks the join instead of double padding */
.sf2-intro{margin-top:16px;font:600 clamp(1.12rem,1rem + .45vw,1.35rem)/1.4 var(--font);color:var(--slate)}
.sf2-pgrid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(36px,5vw,80px);align-items:stretch;margin-top:var(--s-head)}
.sf2-prows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.sf2-prow{position:relative;display:grid;grid-template-columns:clamp(64px,7vw,104px) minmax(0,1fr);gap:clamp(14px,2vw,26px);align-items:start;padding:var(--s-row) 0}
.sf2-prow::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%}
.sf2-pn{font:800 clamp(2.5rem,1.6rem + 2.3vw,3.9rem)/.86 var(--font);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(35,55,93,.4);transition:color .5s,-webkit-text-stroke-color .5s}
.sf2-prow.is-past .sf2-pn{-webkit-text-stroke-color:var(--coral)}
.sf2-prow.is-active .sf2-pn{color:var(--coral);-webkit-text-stroke-color:var(--coral)}
.sf2-ptext .sf2-cline{margin:6px 0 12px}
.sf2-ptext p{font:500 clamp(1.08rem,1rem + .45vw,1.38rem)/1.52 var(--font);color:var(--ink);max-width:29em}
.sf2-ptext strong{font-weight:800;color:var(--navy)}
/* the photo column is exactly as tall as the statements: the frame sticks only while there is room, never leaving a gap */
.sf2-pmedia{position:relative}
.sf2-pframe{position:sticky;top:150px;height:min(100%,calc(100svh - 190px));min-height:360px;border-radius:4px;background:var(--navy-2);box-shadow:var(--shadow-lg)}
.sf2-pimg{position:absolute;inset:0;margin:0}
html:not(.sf2-m) .sf2-pimg~.sf2-pimg{display:none}
.sf2-m .sf2-pimg{opacity:0;transform:scale(1.04);transition:opacity .9s var(--sf2-ease),transform 1.4s var(--sf2-out)}
.sf2-m .sf2-pimg.on{opacity:1;transform:none}
.sf2-pticks{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;display:flex;gap:6px}
.sf2-pticks span{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.4);transition:background .4s}
.sf2-pticks span.on{background:var(--coral-lt)}
html:not(.sf2-m) .sf2-pticks{display:none}
.sf2-pclose{position:relative;margin:var(--s-block) 0 0;padding-top:clamp(22px,2.4vw,32px);max-width:1040px}
.sf2-pclose::before{content:"";position:absolute;left:0;top:0;width:96px;height:3px;background:var(--grad);transform-origin:0 50%}
.sf2-pclose p{font:800 clamp(1.5rem,1rem + 2vw,2.7rem)/1.18 var(--font);letter-spacing:-.03em;color:var(--navy)}

/* ================= 02 · core values: four distinct panels ================= */
.sf2-values{background:var(--cream);padding:calc(var(--s-sec) * .75) 0 var(--s-sec);border-top:1px solid var(--line)}
.sf2-vlayout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:clamp(28px,3.4vw,52px);align-items:start;margin-top:var(--s-head)}
.sf2-vrail{position:sticky;top:156px}
.sf2-vrail ol{position:relative;list-style:none;margin:0;padding:0 0 0 20px;display:grid;gap:2px}
.sf2-vrail ol::before,.sf2-vrail ol::after{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--line)}
.sf2-vrail ol::after{background:var(--coral);transform-origin:50% 0;transform:scaleY(var(--p,0));transition:transform .6s var(--sf2-out)}
.sf2-vrail a{display:flex;gap:12px;align-items:baseline;padding:10px 0;font:700 14.5px/1.3 var(--font);color:var(--slate);transition:color .3s}
.sf2-vrail a span{font:800 12px/1 var(--font);letter-spacing:.06em;color:var(--slate);transition:color .3s}
.sf2-vrail a:hover,.sf2-vrail a[aria-current="true"]{color:var(--navy)}
.sf2-vrail a[aria-current="true"] span{color:var(--coral-2)}
.sf2-vlist{display:grid;gap:var(--s-panel)}

.sf2-val{position:relative;border-radius:6px;overflow:hidden;transition:transform .5s var(--sf2-out),box-shadow .5s var(--sf2-out)}
.sf2-vbody{position:relative;padding:var(--s-pad)}
/* number and name share one line: the large outlined numeral stays the signature without its own row */
.sf2-vhead{display:flex;align-items:flex-end;gap:clamp(14px,1.6vw,22px)}
.sf2-vnum{flex:none;font:800 clamp(3.4rem,2.3rem + 3vw,5.4rem)/.78 var(--font);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--coral)}
.sf2-val h3{font-size:clamp(1.6rem,1.15rem + 1.25vw,2.3rem);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.sf2-val .sf2-cline{margin:18px 0 0}
.sf2-vlead{margin-top:14px;font:700 clamp(1.08rem,1rem + .35vw,1.28rem)/1.45 var(--font);color:var(--navy)}
.sf2-vpts{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.sf2-vpts li{position:relative;padding-left:28px;color:var(--slate);line-height:1.62}
.sf2-vpts li::before{content:"";position:absolute;left:0;top:.8em;width:16px;height:2px;background:var(--coral-2)}
.sf2-vclose{position:relative;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font:600 1.04rem/1.58 var(--font);color:var(--ink)}
.sf2-vclose::before{content:"";position:absolute;left:0;top:-2px;width:56px;height:3px;background:var(--coral)}
.sf2-vimg{margin:0;min-height:300px;background:var(--navy-2)}
.sf2-vimg img{transition:transform 1.4s var(--sf2-out)}

/* 01 white, photo right */
.sf2-val.v1{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);background:#fff;border:1px solid var(--line)}
/* 02 warm sand, photo left */
.sf2-val.v2{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);background:var(--sand)}
.sf2-val.v2 .sf2-vimg{order:-1}
.sf2-val.v2 .sf2-vclose{border-top-color:var(--sand-2)}
/* 03 navy, typographic, precision linework */
.sf2-val.v3{background:linear-gradient(150deg,var(--navy-3) 0%,var(--navy) 100%);color:#fff}
.sf2-val.v3 .sf2-vbody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px)}
.sf2-val.v3 .sf2-vnum{-webkit-text-stroke-color:var(--coral-lt)}
.sf2-val.v3 h3,.sf2-val.v3 .sf2-vlead{color:#fff}
.sf2-val.v3 .sf2-vpts li{color:rgba(255,255,255,.84)}
.sf2-val.v3 .sf2-vpts li::before{background:var(--coral-lt)}
.sf2-val.v3 .sf2-vclose{color:#fff;border-top-color:rgba(255,255,255,.16)}
.sf2-val.v3 .sf2-vclose::before{background:var(--coral-lt)}
.sf2-v3lines{position:absolute;right:-60px;bottom:-60px;width:min(42%,340px);height:auto;color:rgba(246,168,159,.16);pointer-events:none}
/* 04 wide photo with the copy panel overlapping it */
.sf2-val.v4{background:#fff;border:1px solid var(--line)}
.sf2-val.v4 .sf2-vimg{min-height:0;aspect-ratio:3/1}
.sf2-val.v4 .sf2-vbody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);margin:-72px clamp(16px,2.6vw,40px) 0;background:#fff;border-radius:6px}
.sf2-vrest .sf2-vpts{margin-top:2px}
/* two-column panels (03, 04): number + name run across the full panel, then lead (left) beside points and closing (right) */
.sf2-val.v3 .sf2-vbody,.sf2-val.v4 .sf2-vbody{grid-template-rows:auto auto 1fr;row-gap:0}
.sf2-vtop{display:contents}
.sf2-vtop .sf2-vhead{grid-column:1/-1}
.sf2-vtop .sf2-cline{grid-column:1;grid-row:2}
.sf2-vtop .sf2-vlead{grid-column:1;grid-row:3;align-self:start}
.sf2-vrest{grid-column:2;grid-row:2/span 2;padding-top:18px}

@media (hover:hover){
  .sf2-val:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
  .sf2-val:hover .sf2-vimg img,.sf2-m .sf2-val:hover .sf2-media.in img{transform:scale(1.045)}
}

/* ================= 03 · vision ================= */
.sf2-vision{position:relative;overflow:hidden;isolation:isolate;padding:var(--s-sec) 0}
.sf2-vlines{position:absolute;right:-12%;top:-8%;z-index:-1;width:min(74vw,980px);height:auto;pointer-events:none}
.sf2-vision h2{color:#fff}
.sf2-vision h2 em,.sf2-vstate em{font-style:normal;color:var(--coral-lt)}
.sf2-future{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:8px 15px;border:1px solid rgba(246,168,159,.45);border-radius:999px;
  background:rgba(237,110,99,.12);font:700 12px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--coral-lt)}
.sf2-future::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral-lt)}
.sf2-vstate{margin:var(--s-head) 0 0;max-width:1100px}
.sf2-vstate p{font:800 clamp(1.7rem,.95rem + 2.8vw,3.4rem)/1.13 var(--font);letter-spacing:-.035em;color:#fff}
.sf2-vaims{list-style:none;margin:var(--s-block) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.sf2-vaims li{position:relative;padding:24px clamp(20px,2.6vw,40px) 0}
.sf2-vaims li:first-child{padding-left:0}
.sf2-vaims li+li{border-left:1px solid rgba(255,255,255,.14)}
.sf2-vaims li::before{content:"";position:absolute;top:0;left:0;width:40px;height:2px;background:var(--coral-lt)}
.sf2-vaims li+li::before{left:clamp(20px,2.6vw,40px)}
.sf2-vaims .n{display:block;margin-bottom:12px;font:800 13px/1 var(--font);letter-spacing:.1em;color:var(--coral-lt)}
.sf2-vaims p{font-size:1.04rem;line-height:1.65;color:rgba(255,255,255,.86)}
.sf2-vclosing{margin-top:var(--s-block);padding-top:22px;border-top:1px solid rgba(255,255,255,.14);max-width:46em;font:600 clamp(1.08rem,1rem + .45vw,1.35rem)/1.5 var(--font);color:#fff}

/* ================= closing CTA: Phase 4.4 gradient colours ================= */
.sf2-cta{position:relative;overflow:hidden;isolation:isolate;color:#fff;border-top:1px solid rgba(255,255,255,.1);padding:var(--s-sec) 0;
  background:linear-gradient(90deg,#1d2c4c 0%,#213458 25%,#27385e 50%,#343b5f 55%,#403f5f 60%,#584661 70%,#6f4d61 80%,#865363 90%,#985864 100%)}
.sf2-cta::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:96px 96px;-webkit-mask-image:linear-gradient(270deg,#000 0%,transparent 55%);mask-image:linear-gradient(270deg,#000 0%,transparent 55%)}
.sf2-cta-in{max-width:780px}
.sf2-cta h2{margin:20px 0 14px;color:#fff;font-size:clamp(2.1rem,1.2rem + 2.7vw,3.6rem)}
.sf2-cta h2 em{color:var(--coral-lt)}
.sf2-cta .lead{max-width:34em;color:rgba(255,255,255,.86);font-size:clamp(1.05rem,1rem + .3vw,1.22rem)}
.sf2-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}
.sf2-acts .btn{font-weight:700;min-height:52px}
.sf2-acts .btn-glass{border-color:rgba(255,255,255,.7)}
.btn.sf2-link{position:relative;padding:0 6px;margin-left:8px;color:#fff;background:none;border:0;border-radius:0}
.btn.sf2-link::after{content:"";position:absolute;left:6px;right:6px;bottom:12px;height:1px;background:rgba(255,255,255,.55);transform-origin:0 50%;transition:transform .35s var(--sf2-out),background .35s}
.btn.sf2-link:hover::after{background:var(--coral-lt)}
.sf2 .btn:focus-visible{outline:3px solid var(--coral-lt);outline-offset:3px}
.sf2 .btn-go:active,.sf2 .btn-glass:active{transform:translateY(1px) scale(.98)}

/* ================= scroll reveal (only while html.sf2-m) ================= */
.sf2-m [data-r]{opacity:0;transform:translateY(20px);transition:opacity .75s var(--sf2-out),transform .85s var(--sf2-out);transition-delay:calc(var(--d,0) * 80ms)}
.sf2-m [data-r].in{opacity:1;transform:none}
.sf2-m .sf2-cline[data-r]{opacity:1;transform:scaleX(0);transition:transform 1s var(--sf2-out) calc(var(--d,0) * 80ms)}
.sf2-m .sf2-cline[data-r].in{transform:none}
.sf2-m .sf2-prow::before{transform:scaleX(0);transition:transform 1.1s var(--sf2-out)}
.sf2-m .sf2-prow .sf2-pn{opacity:0;transform:translateY(24px);transition:opacity .75s var(--sf2-out) .08s,transform .85s var(--sf2-out) .08s,color .5s,-webkit-text-stroke-color .5s}
.sf2-m .sf2-prow .sf2-cline{transform:scaleX(0);transition:transform 1s var(--sf2-out) .2s}
.sf2-m .sf2-prow p{opacity:0;transform:translateY(14px);transition:opacity .75s var(--sf2-out) .24s,transform .85s var(--sf2-out) .24s}
.sf2-m .sf2-prow.in::before,.sf2-m .sf2-prow.in .sf2-cline{transform:none}
.sf2-m .sf2-prow.in .sf2-pn,.sf2-m .sf2-prow.in p{opacity:1;transform:none}
.sf2-m .sf2-pclose::before{transform:scaleX(0);transition:transform 1.1s var(--sf2-out)}
.sf2-m .sf2-pclose.in::before{transform:none}
.sf2-media::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:var(--wipe,var(--cream));transform-origin:100% 50%;transform:scaleX(0)}
.sf2-m .sf2-media::after{transform:scaleX(1);transition:transform 1.05s var(--sf2-out) .08s}
.sf2-m .sf2-media.in::after{transform:scaleX(0)}
.sf2-m .sf2-vimg img{transform:scale(1.08)}
.sf2-m .sf2-vimg.in img{transform:none}
.sf2-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.sf2-w>span{display:inline-block}
.sf2-m [data-words] .sf2-w>span{transform:translateY(108%);transition:transform .8s var(--sf2-out);transition-delay:calc(var(--i,0) * 20ms)}
.sf2-m [data-words].in .sf2-w>span{transform:none}

/* ================= responsive ================= */
@media (max-width:1100px){
  .sf2-vlayout{grid-template-columns:minmax(0,1fr)}
  .sf2-vrail{display:none}
}
@media (max-width:1024px){
  .sf2-vaims{grid-template-columns:minmax(0,1fr)}
  .sf2-vaims li,.sf2-vaims li:first-child{padding:20px 0 16px}
  .sf2-vaims li+li{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .sf2-vaims li+li::before{left:0;top:-1px}
  .sf2-val.v3 .sf2-vbody,.sf2-val.v4 .sf2-vbody{grid-template-columns:minmax(0,1fr);gap:0}
  .sf2-vtop .sf2-vhead,.sf2-vtop .sf2-cline,.sf2-vtop .sf2-vlead,.sf2-vrest{grid-column:1;grid-row:auto}
  .sf2-vrest{padding-top:0}
  .sf2-vrest .sf2-vpts{margin-top:16px}
  .sf2-hbframe{display:none}
  .sf2-hb .sf2-hcap{display:none}
}
@media (max-width:900px){
  .sf2 main [id]{scroll-margin-top:74px}
  .sf2-hero{padding-top:100px}
  .sf2-hcopy{max-width:640px}
  .sf2-hvals ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf2-hvals li:nth-child(3){border-left:0}
  .sf2-hvals li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
  .sf2-hvals li:nth-child(3) a{padding-left:0}
  .sf2-hvals a{min-height:60px;padding:0 12px}
  .sf2-hb{min-height:0;--hb-h:clamp(190px,min(74vw,100svh - 530px),440px)}   /* photo height: width-based, capped by screen height so both buttons clear the call bar */
  .sf2-hbg{bottom:auto;height:var(--hb-h)}
  .sf2-hbg::after{background:linear-gradient(180deg,rgba(18,29,52,.7) 0%,rgba(18,29,52,.12) 26%,rgba(18,29,52,.1) 50%,rgba(18,29,52,.85) 82%,var(--navy-3) 100%)}
  .sf2-hb>.wrap{padding-top:calc(var(--hb-h) - 96px)}
  .sf2-pgrid{grid-template-columns:minmax(0,1fr);gap:8px}
  .sf2-pmedia{order:-1;aspect-ratio:16/9;margin-bottom:8px}
  .sf2-pframe{position:absolute;inset:0;height:auto;min-height:0}
  .sf2-pimg~.sf2-pimg,.sf2-pticks{display:none}
  .sf2-m .sf2-pimg:first-child{opacity:1;transform:none}
  .sf2-val.v1,.sf2-val.v2{grid-template-columns:minmax(0,1fr)}
  .sf2-val.v1 .sf2-vimg{order:-1}
  .sf2-vimg{min-height:0;aspect-ratio:16/9}
  .sf2-val.v4 .sf2-vimg{aspect-ratio:16/9}
  .sf2-val.v4 .sf2-vbody{margin:-40px 12px 0}
  .sf2-v3lines{width:56%;right:-40px;bottom:-40px}
}
@media (max-width:768px){
  .sf2 main [id]{scroll-margin-top:12px}   /* V8 adds scroll-padding-top for its header at this width */
}
@media (max-width:600px){
  .sf2-hero{padding-top:88px}
  .sf2-hero h1{font-size:clamp(2.4rem,11vw,3rem);margin:16px 0 14px}
  .sf2-hero .btns{margin-top:24px}
  .sf2-hvals{margin-top:32px}
  .sf2-hvals a{font-size:.95rem;gap:10px;padding:0 10px}
  .sf2-hvals .go{display:none}
  .sf2-vstate p{font-size:1.6rem}
  .sf2-crop{width:12px;height:12px}
  .sf2-hb>.wrap{padding-top:calc(var(--hb-h) - 84px)}
  .sf2-prow{grid-template-columns:48px minmax(0,1fr);gap:12px}
  .sf2-pn{font-size:2.2rem}
  .sf2-ptext .sf2-cline{margin:4px 0 12px}
  .sf2-val.v4 .sf2-vbody{margin:-32px 10px 0}
  .sf2-vnum{font-size:2.7rem}
  .sf2-val h3{font-size:1.45rem}
  .sf2-vimg,.sf2-val.v4 .sf2-vimg{aspect-ratio:2/1}
  .sf2-cta{background:linear-gradient(172deg,#1d2c4c 0%,#213458 30%,#27385e 52%,#343b5f 60%,#403f5f 66%,#584661 76%,#6f4d61 85%,#865363 94%,#985864 100%)}
  .sf2-acts .btn{width:100%}
  .btn.sf2-link{width:auto;margin:4px auto 0}
}

/* narrow phones (320–360 px): a slightly shorter photo and tighter hero rhythm keep both hero buttons above the V8 call bar */
@media (max-width:360px){
  .sf2-hb{--hb-h:clamp(160px,min(74vw,100svh - 560px),440px)}
  .sf2-hero h1{margin:12px 0 10px}
  .sf2-hero .btns{margin-top:18px;gap:10px}
  .sf2-hero .btns .btn{min-height:48px}
}
/* very short narrow screens (e.g. 320 × 568): the decorative "About OutDo" eyebrow gives its space to the buttons */
@media (max-width:360px) and (max-height:600px){
  .sf2-hb .pill{display:none}
  .sf2-hb h1{margin-top:0}
  .sf2-hb{--hb-h:150px}                              /* photo 160 → 150: keeps ≥16 px between the second button and the call bar */
  .sf2-hb .btns{margin-top:14px;gap:8px}
}

/* reduced motion: everything at rest (V8 already removes transitions and animations) */
@media (prefers-reduced-motion:reduce){
  .sf2-m [data-r],.sf2-m .sf2-prow .sf2-pn,.sf2-m .sf2-prow p,.sf2-m .sf2-pimg.on{opacity:1!important;transform:none!important}
  .sf2-m .sf2-cline,.sf2-m .sf2-prow::before,.sf2-m .sf2-pclose::before,.sf2-m [data-words] .sf2-w>span,.sf2-m .sf2-vimg img,.sf2-par{transform:none!important}
  .sf2-m .sf2-media::after{transform:scaleX(0)!important}
  .sf2-val:hover{transform:none!important}
}