/* ============ tokens ============ */
:root{
  --canvas:#E8ECF1;
  --panel:#F4F6F9;
  --blue:#2D5874;
  --blue-deep:#003756;
  --accent:#E02424;
  --accent-hover:#C61F1F;
  --accent-muted:rgba(224,36,36,.3);
  --on-accent:#FFFFFF;
  --brand-red:#FF3131;
  --tape:#E8D9A8;
  --tape-under:#F1E6C4;
  --focus:#F3F6F9;
  --text-secondary:#44586A;
  --text-primary:#12283A;
  --on-blue:#F3F6F9;
  --on-blue-muted:#C9D6E0;
  --border-strong:#677C8E;
  --error:#9B2C2C;
  --shadow-card:0 1px 2px rgba(18,40,58,.06),0 8px 24px rgba(18,40,58,.08);

  --f-display:"Archivo","Arial Black","Helvetica Neue",Arial,sans-serif;
  --f-body:"Figtree","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --nav-h:84px;
  --gut:max(16px,6vw);
  --tape-shadow:drop-shadow(0 2px 6px rgba(18,40,58,.22));
  --tshadow-ink:0 1px 2px rgba(232,236,241,.95),0 3px 12px rgba(232,236,241,.8),0 10px 44px rgba(232,236,241,.8);
  --tshadow-light:0 1px 2px rgba(0,55,86,.9),0 3px 12px rgba(0,55,86,.7),0 10px 44px rgba(0,55,86,.7);
  --crepe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='28'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85 .07' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .16 0 0 0 0 .23 .55 0 0 0 -.17'/%3E%3C/filter%3E%3Crect width='180' height='28' filter='url(%23f)'/%3E%3C/svg%3E");
  --stipple:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .16 0 0 0 0 .23 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  --paint-edge-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='12' preserveAspectRatio='none'%3E%3Cpath d='M0 0H220V6.5C212 8.5 205 5.5 197 6.8C188 8.2 183 9.6 174 8.1C166 6.8 160 5.2 151 6.4C143 7.5 138 9.9 129 8.8C121 7.8 116 5.9 108 6.6C99 7.4 94 9.2 86 8.4C77 7.5 73 5.4 64 6.1C56 6.8 51 9.4 42 8.7C34 8 29 6 21 6.3C13 6.6 7 7.6 0 6.5Z'/%3E%3C/svg%3E");
  --paint-edge-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='157' height='12' preserveAspectRatio='none'%3E%3Cpath d='M0 0H157V5.4C150 6.9 146 8.8 138 7.9C131 7.1 127 4.8 119 5.6C111 6.4 108 9 100 8.2C92 7.4 88 5.2 80 5.9C72 6.6 68 8.6 60 7.8C53 7.1 48 4.9 41 5.5C33 6.2 29 8.9 21 8C14 7.2 8 4.6 0 5.4Z'/%3E%3C/svg%3E");
}

/* ============ base ============ */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font-family:var(--f-body);font-weight:400;font-size:1.125rem;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;animation:pageIn .7s var(--ease-out) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 3px var(--text-primary)}
main:focus{outline:none;box-shadow:none}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.wrap{width:min(1280px,100% - 2*var(--gut));margin-inline:auto}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ============ type ============ */
.h-hero{font-family:var(--f-display);font-weight:800;font-stretch:112%;letter-spacing:-.01em;line-height:1;font-size:clamp(2.75rem,min(6.2vw,10.4vh),5.5rem);max-width:16ch;margin:0}
.h2{font-family:var(--f-display);font-weight:800;font-stretch:112%;letter-spacing:-.01em;line-height:1.06;font-size:clamp(2rem,3.6vw,3.25rem);max-width:16ch;margin:0 0 1.75rem;text-wrap:balance}
.h3{font-family:var(--f-display);font-weight:700;font-stretch:112%;letter-spacing:-.01em;line-height:1.15;font-size:clamp(1.25rem,1.7vw,1.5rem);margin:0 0 .5rem}
.label{display:flex;align-items:center;gap:.7em;font-family:var(--f-mono);font-weight:500;font-size:.8125rem;line-height:1.4;letter-spacing:.04em;color:var(--text-secondary);margin:0 0 1.25rem}
.label::before{content:"";flex:none;width:10px;height:10px;border-radius:1.5px;background:var(--blue)}
.on-blue .label{color:var(--on-blue-muted)}
.on-blue .label::before{background:var(--on-blue)}
.body{max-width:62ch;color:var(--text-secondary)}
.body .blk{display:block}
.body .blk+.blk{margin-top:1.1em}
.body .blk:first-child{color:var(--text-primary)}

/* ============ buttons ============ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.8em 1.55em;border:0;border-radius:5px;font-family:var(--f-body);font-weight:600;font-size:1.0625rem;line-height:1.2;text-decoration:none;text-shadow:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .35s var(--ease-out),background-color .35s var(--ease-out),box-shadow .35s var(--ease-out),opacity .35s var(--ease-out)}
.btn--accent{background:var(--accent);color:var(--on-accent);box-shadow:0 1px 0 rgba(18,40,58,.28),0 8px 20px rgba(18,40,58,.24)}
.btn--accent::before{content:"";position:absolute;inset:-5px;border-radius:9px;box-shadow:0 0 0 1px var(--accent-muted),0 0 30px 4px var(--accent-muted);opacity:0;pointer-events:none;transition:opacity .45s var(--ease-out)}
.btn--accent:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn--accent:hover::before{opacity:1}
.btn--accent:active{transform:translateY(0)}
.btn--ghost{min-height:44px;padding:.5em 1.1em;font-size:.9375rem;background:transparent;color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--border-strong)}
.btn--ghost:hover{background:rgba(45,88,116,.1);transform:translateY(-1px)}
.btn--ghost[aria-disabled="true"]{opacity:.45;cursor:default;transform:none;background:transparent}
.btn--full{width:100%}

/* ============ the environment layer ============ */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--canvas)}
.env-sheen{position:absolute;inset:-10% -60%;background:linear-gradient(104deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.2) 54%,rgba(255,255,255,0) 68%);animation:sheen 70s linear -22s infinite alternate}
@keyframes sheen{from{transform:translate3d(-24%,0,0)}to{transform:translate3d(24%,0,0)}}
.env-grain{position:absolute;inset:0;background-image:var(--stipple);background-size:240px 240px;opacity:.03}

/* ============ painter's tape ============ */
.tape-body{display:block;background-color:var(--tape);background-image:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 26%,rgba(18,40,58,0) 70%,rgba(18,40,58,.09) 100%),var(--crepe);background-size:100% 100%,180px 100%;clip-path:polygon(3px 0,calc(100% - 2px) 0,calc(100% - 5px) 9%,calc(100% - 1px) 19%,calc(100% - 4px) 30%,calc(100% - 2px) 41%,calc(100% - 6px) 53%,calc(100% - 2px) 64%,calc(100% - 4px) 76%,100% 87%,calc(100% - 3px) 100%,2px 100%,5px 90%,1px 79%,4px 68%,0 57%,3px 45%,1px 34%,5px 22%,2px 11%)}
.tape-body--under{background-color:var(--tape-under);background-image:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 38%,rgba(18,40,58,0) 66%,rgba(18,40,58,.1) 100%),var(--crepe)}
.tape{position:absolute;display:block;height:var(--tape-h,28px);filter:var(--tape-shadow);pointer-events:none}
.tape-lay{position:absolute;inset:-8px 0;display:block;overflow:hidden}
.tape-lay>.tape-body{position:absolute;inset:8px 0}
.taped{position:relative;display:inline-block;padding-bottom:.4em}
.tape--word{left:-.06em;right:-.1em;bottom:.03em;--tape-h:clamp(14px,.3em,28px)}

/* the peel: a stuck strip, a lifted tail, and the tail's shadow */
.peel{position:absolute;height:28px;--x:0px;--l:0px;--q:0;--ang:-13deg;--tilt:-24deg;pointer-events:none}
.peel-stuck{position:absolute;inset:0;filter:var(--tape-shadow)}
.peel-clip{position:absolute;left:0;top:-12px;bottom:-12px;width:100%;overflow:hidden;transform:translate3d(var(--x),0,0)}
.peel-clip>.tape-body{position:absolute;left:0;top:12px;width:100%;height:28px;transform:translate3d(calc(var(--x)*-1),0,0)}
.peel-clip::after{content:"";position:absolute;left:0;top:12px;width:9px;height:28px;background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,0));opacity:min(1,calc(var(--q)*40))}
.peel-shadow{position:absolute;left:0;top:0;width:var(--tailw,40%);height:100%;transform-origin:0 50%;transform:translate3d(var(--x),5px,0) rotate(calc(var(--ang)*.35));opacity:calc(.34*min(1,var(--q)*40));filter:blur(6px)}
.peel-shadow-in{position:absolute;inset:0;overflow:hidden}
.peel-shadow-in>i{position:absolute;inset:0;background:var(--text-primary);transform:translate3d(calc(var(--l) - 100%),0,0)}
.peel-tail{position:absolute;left:0;top:0;width:var(--tailw,40%);height:100%;transform-origin:0 50%;transform:translate3d(var(--x),0,0) rotate(var(--ang));opacity:min(1,calc(var(--q)*40))}
.peel-tail-3d{position:absolute;inset:0;transform-origin:0 50%;transform:perspective(900px) rotateY(var(--tilt))}
.peel-tail-in{position:absolute;left:0;top:-12px;bottom:-12px;width:100%;overflow:hidden}
.peel-tail-in>.tape-body{position:absolute;left:0;top:12px;width:100%;height:28px;transform:translate3d(calc(var(--l) - 100%),0,0)}
.peel-tail-in::after{content:"";position:absolute;left:0;top:12px;width:16px;height:28px;background:linear-gradient(90deg,rgba(18,40,58,.34),rgba(18,40,58,0))}
.peel.done .peel-tail,.peel.done .peel-shadow{transition:transform .9s var(--ease-out),opacity .6s var(--ease-out)}
.peel.done .peel-tail{transform:translate3d(calc(var(--x) + 110px),-86px,0) rotate(-27deg);opacity:0}
.peel.done .peel-shadow{transform:translate3d(calc(var(--x) + 70px),34px,0) rotate(-6deg);opacity:0}
.peel.gone{visibility:hidden}
.peel--edge{left:-3vw;width:106vw;top:0;z-index:6;--ang:-8deg;--tilt:-18deg}

/* ============ nav ============ */
.skip{position:fixed;left:12px;top:12px;z-index:200;padding:.7em 1.1em;border-radius:5px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:1rem;text-decoration:none;transform:translateY(-160%);transition:transform .3s var(--ease-out)}
.skip:focus{transform:none}
.nav{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);background:var(--blue-deep);color:var(--on-blue);box-shadow:0 1px 0 rgba(18,40,58,.5),0 10px 30px rgba(18,40,58,.16)}
.nav-in{height:100%;display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);padding-inline:var(--gut)}
.logo{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--on-blue);flex:none;border-radius:4px}
.logo img{height:62px;width:auto;flex:none}
.logo-word{font-family:var(--f-display);font-weight:800;font-stretch:112%;letter-spacing:-.01em;font-size:1.1875rem;line-height:1;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:clamp(14px,1.7vw,26px);margin-left:auto}
.nav-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;font-weight:600;text-decoration:none;color:var(--on-blue);white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;border-radius:1px;background:var(--on-blue);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease-out)}
.nav-links a:hover::after,.nav-links a[aria-current="true"]::after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);flex:none}
.nav-phone{display:inline-flex;align-items:center;min-height:44px;font-family:var(--f-mono);font-weight:500;font-size:.875rem;letter-spacing:.04em;text-decoration:none;color:var(--on-blue);white-space:nowrap;border-bottom:0;transition:opacity .3s var(--ease-out)}
.nav-phone:hover{opacity:.78}
.nav .btn{min-height:46px;padding:.6em 1.15em;font-size:1rem}
.menu-btn{display:none;align-items:center;gap:.6rem;min-height:44px;padding:0 .2rem 0 .6rem;border:0;border-radius:5px;background:transparent;color:var(--on-blue);font-weight:600;font-size:1rem;cursor:pointer}
.menu-ico{position:relative;width:22px;height:16px;flex:none}
.menu-ico i{position:absolute;left:0;right:0;height:2px;border-radius:1px;background:currentColor;transition:transform .4s var(--ease-io),opacity .3s var(--ease-out)}
.menu-ico i:nth-child(1){top:0}
.menu-ico i:nth-child(2){top:7px}
.menu-ico i:nth-child(3){top:14px}
.nav.open .menu-ico i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .menu-ico i:nth-child(2){opacity:0}
.nav.open .menu-ico i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1179px){
  .menu-btn{display:inline-flex;order:3}
  .nav-actions{margin-left:auto}
  .nav-links{position:absolute;left:0;right:0;top:100%;margin:0;padding:10px var(--gut) 22px;flex-direction:column;align-items:stretch;gap:0;background:var(--blue-deep);box-shadow:0 18px 30px rgba(18,40,58,.28);visibility:hidden;opacity:0;transform:translateY(-10px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),visibility 0s linear .35s}
  .nav.open .nav-links{visibility:visible;opacity:1;transform:none;transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),visibility 0s}
  .nav-links li+li{border-top:1px solid rgba(243,246,249,.14)}
  .nav-links a{display:flex;min-height:52px;font-size:1.0625rem}
  .nav-links a::after{display:none}
}
@media (max-width:720px){
  :root{--nav-h:104px}
  .logo img{height:44px}
  .nav-in{display:grid;grid-template-columns:1fr auto;grid-template-rows:56px 48px;gap:0;align-items:center}
  .logo{grid-column:1;grid-row:1}
  .menu-btn{grid-column:2;grid-row:1;order:0}
  .nav-actions{grid-column:1 / -1;grid-row:2;margin:0;justify-content:space-between;gap:10px;border-top:1px solid rgba(243,246,249,.14);height:100%}
  .nav .btn{min-height:44px;padding:.5em .9em;font-size:.9375rem}
  .nav-phone{font-size:.8125rem}
}
@media (max-width:340px){
  .logo img{height:44px}
  .nav .btn{font-size:.875rem;padding:.5em .7em}
}

/* ============ hero: the scrub ============ */
/* 160vh on every screen (owner's call, 2026-10-23): one short pinned scroll, about 60% of a screen */
.hero-scrub{display:none;position:relative;height:160vh;padding-top:var(--nav-h);background:var(--blue)}
.hero-static{display:block}
html.js .hero-scrub{display:block}
html.js .hero-static{display:none}
.stage{--bar:0px;position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow:hidden;isolation:isolate;background:#949EA7;--band-left:max(6%,calc((100% - 1280px)/2))}
.stage-media{position:absolute;inset:0;z-index:0}
.still{position:absolute;inset:0;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;opacity:0}
.still--a{opacity:1}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;transform:translateZ(0);will-change:transform;transition:opacity .7s var(--ease-out)}
.stage.video-ready video{opacity:1}
.stage.video-failed video{opacity:0;visibility:hidden}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(0,55,86,0) 35%,rgba(0,55,86,.34) 100%)}

.band{position:absolute;z-index:2;left:var(--band-left);opacity:0;pointer-events:none;--k:1}
.band.is-on{pointer-events:auto}
.band--1{bottom:calc(6% + var(--bar));opacity:1}
@supports (height:100svh){.stage{--bar:calc(100vh - 100svh)}}
.band--2{top:17%}
.band--3{top:15%;max-width:56%}
.band--3 .h-hero{text-wrap:balance}
.band-box{position:relative;isolation:isolate}
.band-box::before{content:"";position:absolute;inset:-80% -50%;z-index:-1;pointer-events:none;opacity:calc(.25 + .75*var(--k,1))}
.band--ink{color:var(--text-primary);text-shadow:var(--tshadow-ink)}
.band--ink .band-box::before{background:radial-gradient(ellipse 74% 62% at 50% 50%,rgba(232,236,241,.78) 0%,rgba(232,236,241,.5) 46%,rgba(232,236,241,0) 76%)}
.band--light{color:var(--on-blue);text-shadow:var(--tshadow-light)}
.band--light .band-box::before{background:radial-gradient(ellipse 74% 62% at 50% 50%,rgba(0,55,86,.62) 0%,rgba(0,55,86,.42) 46%,rgba(0,55,86,0) 76%)}
.band .btn{text-shadow:none}
.chip{display:inline-flex;align-items:center;gap:.65em;margin:0 0 1rem;padding:.45em .85em;border-radius:6px;font-family:var(--f-mono);font-weight:500;font-size:.8125rem;line-height:1.35;letter-spacing:.04em}
.chip::before{content:"";flex:none;width:9px;height:9px;border-radius:1.5px;background:var(--blue)}
.band--ink .chip{background:rgba(244,246,249,.72);border:1px solid rgba(68,88,106,.3);text-shadow:none;color:var(--text-primary)}
.support{margin:.7em 0 0;font-weight:600;font-size:clamp(1.125rem,1.55vw,1.375rem);line-height:1.35;max-width:40ch}
.band .w{display:inline-block;white-space:nowrap}
.band .c,.band .wi{display:inline-block;will-change:transform,opacity}

/* band 1: grid snap-align. Letters slide into line in reading order. */
.band--1 .c{--kc:clamp(0,(var(--k,1) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translate3d(calc((1 - var(--kc))*var(--jx,0px)),0,0)}
.band--1 .chip,.band--1 .support{--ks:clamp(0,(var(--k,1) - .55)*3,1);opacity:var(--ks);transform:translate3d(0,calc((1 - var(--ks))*10px),0)}
/* band 2: roll-down. Each word swings down flat, as if laid by the roller. */
.band--2 .w{perspective:640px}
.band--2 .wi{--kc:clamp(0,(var(--k,1) - var(--th,0))*3,1);opacity:var(--kc);transform-origin:50% 0;transform:translate3d(0,calc((1 - var(--kc))*-.62em),0) rotateX(calc((1 - var(--kc))*82deg))}
/* band 3: word by word rise, then the tape, the subline, the button. */
.kicker{margin:0 0 .45em;font-family:var(--f-display);font-weight:700;font-stretch:112%;letter-spacing:-.01em;font-size:clamp(1.25rem,2.1vw,1.875rem);line-height:1.15;color:var(--on-blue)}
.band--3 .kicker{--kk:clamp(0,var(--k,1)*3.2,1);opacity:var(--kk);transform:translate3d(0,calc((1 - var(--kk))*-10px),0)}
.band--3 .wi{--kc:clamp(0,(var(--k,1) - var(--th,0))*3,1);opacity:var(--kc);transform:translate3d(0,calc((1 - var(--kc))*.42em),0)}
.band--3 .tape{--kt:clamp(0,(var(--k,1) - .46)*3.2,1)}
.band--3 .tape-lay{transform:translate3d(calc((1 - var(--kt))*-101%),0,0)}
.band--3 .tape-lay>.tape-body{transform:translate3d(calc((1 - var(--kt))*101%),0,0)}
.band--3 .subline{--ks:clamp(0,(var(--k,1) - .62)*4,1);opacity:var(--ks);transform:translate3d(0,calc((1 - var(--ks))*12px),0)}
.band--3 .band-cta{--kb:clamp(0,(var(--k,1) - .76)*5,1);opacity:var(--kb);transform:translate3d(0,calc((1 - var(--kb))*14px),0);margin-top:1.75rem}
.subline{margin:.5em 0 0;font-family:var(--f-mono);font-weight:500;font-size:.9375rem;line-height:1.5;letter-spacing:.04em;color:var(--on-blue)}

.loader{position:absolute;z-index:3;right:clamp(16px,2.4vw,32px);top:clamp(16px,2.4vw,32px);width:44px;height:44px;color:var(--on-blue);transition:opacity .6s var(--ease-out)}
.ring{width:44px;height:44px;transform:rotate(-90deg)}
.ring circle{transition:stroke-dashoffset .25s linear}
.ring .ring-track{opacity:.28}
.stage.video-ready .loader,.stage.video-failed .loader{opacity:0}
.cue{position:absolute;z-index:3;left:50%;bottom:calc(3% + var(--bar));width:44px;height:44px;margin-left:-22px;border-radius:50%;display:grid;place-items:center;color:var(--text-primary);background:rgba(244,246,249,.72);border:1px solid rgba(68,88,106,.3);pointer-events:none}
.cue svg{width:18px;height:18px;animation:bob 2.6s var(--ease-io) -1.1s infinite}
@keyframes bob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
@media (max-height:560px){.cue,.loader{display:none}}

/* ============ hero: the static picture ============ */
.hero-static{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;padding:calc(var(--nav-h) + clamp(26px,6vh,72px)) 0 calc(max(28vh,19.7vw) + 5vh);padding-bottom:calc(max(28svh,19.7vw) + 5svh);color:var(--on-blue);background-color:var(--blue)}
.hs-wall,.hs-roller,.hs-scrim{position:absolute;left:0;right:0;z-index:-1}
.hs-wall{top:0;bottom:0;background:var(--blue) url("hero-ending.jpg") 50% 50%/cover no-repeat}
.hs-roller{bottom:0;height:80vh;height:80svh;background:url("hero-still.jpg") 50% 100%/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%);mask-image:linear-gradient(180deg,transparent 0,#000 34%)}
.hs-scrim{top:0;bottom:0;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(0,55,86,0) 35%,rgba(0,55,86,.34) 100%),linear-gradient(180deg,rgba(0,55,86,.56) 0%,rgba(0,55,86,.44) 46%,rgba(0,55,86,0) 74%)}
.hs-copy{text-shadow:var(--tshadow-light)}
.hero-static .h-hero{font-size:clamp(2rem,9vw,5.5rem);max-width:none}
.hs-copy .label{color:var(--on-blue-muted);margin-bottom:1rem}
.hs-copy .label::before{background:var(--on-blue)}
.hs-sub{margin:.55em 0 0;font-weight:600;font-size:clamp(1.25rem,2vw,1.625rem);line-height:1.3}
.hs-services{margin:.4em 0 0;font-size:1rem;line-height:1.5;color:var(--on-blue-muted);max-width:38ch}
.hs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.5rem;margin-top:1.5rem}
.hs-call{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:1.0625rem;color:var(--on-blue);text-underline-offset:.22em;text-decoration-thickness:1.5px}
.hs-facts{margin:1rem 0 0;font-family:var(--f-mono);font-weight:500;font-size:.8125rem;line-height:1.5;letter-spacing:.04em;color:var(--on-blue)}
.hs-copy>*{animation:rise .9s var(--ease-out) both;animation-delay:calc(var(--i,0)*110ms + 150ms)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-static .tape-lay{animation:lay 1s var(--ease-io) 1s both}
.hero-static .tape-lay>.tape-body{animation:layIn 1s var(--ease-io) 1s both}
@keyframes lay{from{transform:translateX(-101%)}to{transform:none}}
@keyframes layIn{from{transform:translateX(101%)}to{transform:none}}

/* ============ the estimate form at the top ============ */
.hero-form{position:absolute;z-index:4;right:var(--band-left);top:50%;transform:translateY(-50%);width:min(430px,35vw);max-height:calc(100% - 24px);overflow-y:auto;border-radius:8px;scrollbar-width:thin;box-shadow:0 2px 4px rgba(18,40,58,.18),0 24px 60px rgba(18,40,58,.34)}
.hero-form .form-card.form-card--top{box-shadow:none}
/* the card scrolls inside itself only when error lines make it taller than a short laptop screen */
.form-card.form-card--top{padding:20px 22px 18px;background:var(--blue-deep);box-shadow:0 2px 4px rgba(18,40,58,.18),0 24px 60px rgba(18,40,58,.34)}
.form-title{font-family:var(--f-display);font-weight:800;font-stretch:112%;letter-spacing:-.01em;font-size:1.375rem;line-height:1.1;margin:0 0 14px;color:var(--on-blue)}
.form-card--top .field{margin-bottom:10px}
.form-card--top .field label,.form-card--top .field legend{font-size:.875rem;margin-bottom:4px}
.form-card--top .field input[type="text"],.form-card--top .field input[type="tel"],.form-card--top .field input[type="email"],.form-card--top .field textarea{min-height:42px;padding:.45em .7em;font-size:1rem}
.form-card--top .field textarea{min-height:52px;height:52px}
.form-card--top .pair{gap:0 12px}
.form-card--top .pair .field{margin-bottom:10px}
.form-card--top .checks{gap:6px}
.form-card--top .check span{min-height:40px;gap:.45em;padding:.25em .7em .25em .5em;font-size:.875rem}
.form-card--top .check span::before{width:17px;height:17px}
.form-card--top .err,.form-card--top .pair .err{margin-top:5px;padding:.3em .6em;font-size:.875rem}
.form-card--top .form-send{margin-top:14px}
.form-card--top .form-send .btn{min-height:48px}
.form-card--top .form-status{margin-top:10px;font-size:.9375rem}
.form-card--top .form-call{margin-top:8px;font-size:.9375rem}
.form-card--top .form-call a{min-height:32px}
.form-card--top .form-small{display:none}
.form-card--top .form-done{padding:12px 0;font-size:1.25rem}
.stage{--form-w:min(430px,35vw)}
.band{max-width:calc(100% - 2*var(--band-left) - var(--form-w) - 40px)}
.band--3{max-width:min(56%,calc(100% - 2*var(--band-left) - var(--form-w) - 40px))}
@media (max-width:1099px){.stage{--form-w:min(360px,37vw)}.hero-form{width:var(--form-w)}}
/* short screens: the card tightens up so it still fits beside the video */
@media (max-height:760px){
  .form-card.form-card--top{padding:14px 18px 14px}
  .form-title{font-size:1.1875rem;margin-bottom:8px}
  .form-card--top .field,.form-card--top .pair .field{margin-bottom:7px}
  .form-card--top .field label,.form-card--top .field legend{margin-bottom:3px}
  .form-card--top .field input[type="text"],.form-card--top .field input[type="tel"],.form-card--top .field input[type="email"]{min-height:40px}
  .form-card--top .field textarea{min-height:40px;height:40px}
  .form-card--top .form-send{margin-top:10px}
  .form-card--top .form-send .btn{min-height:44px}
  .form-card--top .form-call{display:none}
}
@media (max-width:899px),(max-height:559px){
  .hero-form{display:none}
  .stage{--form-w:0px}
  .band{max-width:calc(100% - 2*var(--band-left))}
  .band--3{max-width:min(60%,calc(100% - 2*var(--band-left)))}
}
.top-form-static{display:block;position:relative;z-index:1;padding:clamp(28px,7vw,48px) 0 clamp(8px,3vw,24px)}
.top-form-static .form-card{max-width:560px;margin-inline:auto}
html.js .top-form-static{display:none}
@media (max-width:899px),(max-height:559px){html.js .top-form-static{display:block}}

/* the one static gate: a phone held sideways. The same string sits in the script. */
@media (min-aspect-ratio: 1/1) and (pointer: coarse) and (max-height: 560px){
  html.js .hero-scrub{display:none}
  html.js .hero-static{display:block}
  html.js .top-form-static{display:block}
}

/* ============ sections ============ */
.sec{position:relative;padding-block:clamp(5rem,10vw,9.5rem);scroll-margin-top:var(--nav-h)}
.est-form{scroll-margin-top:calc(var(--nav-h) + 14px)}
html.js .rv .rv-i{opacity:0;transform:translate3d(0,22px,0);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i,0)*95ms)}
html.js .rv.in .rv-i{opacity:1;transform:none}
html.js .rv.done .rv-i{transition-delay:0s}

/* A: why prep comes first */
.why{z-index:1}
.why-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.why-text{grid-column:1 / span 5}
.why-panel{grid-column:7 / span 6}
html.js .why-panel.rv .rv-i{transform:translate3d(36px,0,0) scale(.985)}
html.js .why-panel.rv.in .rv-i{transform:none}
.board{position:relative;border-radius:5px;background:var(--panel);box-shadow:var(--shadow-card);cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.board.holding{cursor:grabbing}
.board.peeled{cursor:default}
.board-coat{position:relative;height:clamp(190px,24vw,310px);border-radius:5px 5px 0 0;background:var(--blue);overflow:hidden}
.board-coat::before{content:"";position:absolute;inset:0;background-image:var(--stipple);background-size:240px 240px;opacity:.07;mix-blend-mode:multiply}
.board-coat::after{content:"";position:absolute;inset:-20% -40%;background:linear-gradient(100deg,rgba(243,246,249,0) 38%,rgba(243,246,249,.1) 50%,rgba(243,246,249,0) 62%);transform:translate3d(-30%,0,0)}
.why.live .board-coat::after{animation:coatSheen 11s var(--ease-io) -3s infinite alternate}
@keyframes coatSheen{from{transform:translate3d(-30%,0,0)}to{transform:translate3d(30%,0,0)}}
.board-slot{position:relative;height:28px}
.board-line{position:absolute;left:0;right:0;top:-1px;height:2px;overflow:hidden;pointer-events:none}
.board-line::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(90deg,rgba(243,246,249,0),rgba(243,246,249,.95),rgba(243,246,249,0));opacity:0;transform:translate3d(-100%,0,0)}
.board.peeled .board-line::after{animation:glint 9s var(--ease-io) .35s infinite}
@keyframes glint{0%{transform:translate3d(-100%,0,0);opacity:0}2%{opacity:1}12%{opacity:1}14%{transform:translate3d(334%,0,0);opacity:0}100%{transform:translate3d(334%,0,0);opacity:0}}
.peel--board{left:-14px;right:-14px;top:0;z-index:3}
.tape-paint{position:absolute;left:14px;right:14px;top:0;height:11px;background:var(--blue);-webkit-mask-image:var(--paint-edge-a),var(--paint-edge-b);mask-image:var(--paint-edge-a),var(--paint-edge-b);-webkit-mask-size:220px 100%,157px 100%;mask-size:220px 100%,157px 100%;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x}
.board-pulse{position:absolute;left:26px;top:-16px;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,rgba(232,217,168,.5) 0%,rgba(232,217,168,.2) 40%,rgba(232,217,168,0) 68%);opacity:0;pointer-events:none;z-index:2;transition:opacity .5s var(--ease-out)}
.why.live .board:not(.peeled):not(.holding) .board-pulse{animation:pulse 4.6s var(--ease-io) -1.2s infinite}
@keyframes pulse{0%,100%{opacity:0;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}
.board-info{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px 20px;padding:clamp(18px,2.2vw,28px) clamp(18px,2.4vw,32px) clamp(22px,2.6vw,32px)}
.chips{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px}
.chipstep{display:inline-flex;align-items:center;gap:.55em;min-height:40px;padding:.3em 1em .3em .4em;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--border-strong);color:var(--text-primary);font-weight:600;font-size:1rem;line-height:1;position:relative;isolation:isolate;overflow:hidden;transition:color .5s var(--ease-out);transition-delay:calc(var(--i,0)*170ms + 350ms)}
.chipstep::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--blue);opacity:0;transform:scale(.6);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--i,0)*170ms + 350ms)}
.chipstep .n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--border-strong);font-family:var(--f-mono);font-weight:500;font-size:.8125rem;transition:box-shadow .5s var(--ease-out);transition-delay:calc(var(--i,0)*170ms + 350ms)}
.board.peeled .chipstep{color:var(--on-blue)}
.board.peeled .chipstep::before{opacity:1;transform:none}
.board.peeled .chipstep .n{box-shadow:inset 0 0 0 1.5px rgba(243,246,249,.6)}
.board.settled .chipstep,.board.settled .chipstep::before,.board.settled .chipstep .n{transition-delay:0s}
.board-msg{display:grid;min-width:0}
.board-msg>*{grid-area:1 / 1;align-self:center}
.board-prompt{font-weight:600;font-size:1.0625rem;line-height:1.35;color:var(--text-primary);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.board-result{font-family:var(--f-display);font-weight:700;font-stretch:112%;letter-spacing:-.01em;font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.2;color:var(--text-primary);opacity:0;transform:translate3d(0,10px,0);transition:opacity .6s var(--ease-out) .95s,transform .6s var(--ease-out) .95s}
.board.peeled .board-prompt{opacity:0;transform:translate3d(0,-8px,0)}
.board.peeled .board-result{opacity:1;transform:none}
#peelBtn{transition:opacity .45s var(--ease-out),transform .35s var(--ease-out),background-color .35s var(--ease-out)}
html:not(.js) .board .peel,html:not(.js) .board-prompt,html:not(.js) #peelBtn,html:not(.js) .board-pulse{display:none}
html:not(.js) .board-result{opacity:1;transform:none}
html:not(.js) .chipstep{color:var(--on-blue)}
html:not(.js) .chipstep::before{opacity:1;transform:none}

/* B: services */
.svc-grid{display:grid;grid-template-columns:1.22fr 1fr 1fr 1fr;gap:clamp(18px,2.2vw,30px);align-items:start}
.svc-grid--two{grid-template-columns:1fr 1.1fr 1.1fr;gap:clamp(22px,3vw,44px)}
.svc-head .h2{font-size:clamp(2rem,2.85vw,2.75rem)}
.card{position:relative;display:flex;flex-direction:column;height:100%;border-radius:6px;background:var(--panel);box-shadow:var(--shadow-card);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.card:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(18,40,58,.06),0 16px 36px rgba(18,40,58,.12)}
html.js .card.rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),box-shadow .5s var(--ease-out);transition-delay:calc(var(--i,0)*130ms)}
html.js .card.rv.in{opacity:1;transform:none}
html.js .card.rv.done{transition-delay:0s;transition-duration:.5s}
html.js .card.rv.done:hover{transform:translateY(-4px)}
.card-img{position:relative;aspect-ratio:4 / 3;border-radius:6px 6px 0 0;overflow:hidden;background:var(--blue)}
.card-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.4s var(--ease-out)}
.card:hover .card-img img{transform:scale(1.07)}
.card-img::after{content:"";position:absolute;inset:-10% -60%;background:linear-gradient(102deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.16) 50%,rgba(255,255,255,0) 60%);transform:translate3d(-45%,0,0);pointer-events:none}
.services.live .card-img::after{animation:imgSheen 9s var(--ease-io) infinite;animation-delay:calc(var(--i,0)*-2.4s - 1s)}
@keyframes imgSheen{0%{transform:translate3d(-45%,0,0)}55%,100%{transform:translate3d(45%,0,0)}}
.swatch{position:absolute;left:clamp(16px,1.6vw,24px);top:0;transform:translateY(-62%);width:74px;padding:5px 5px 7px;border-radius:4px;background:var(--panel);box-shadow:0 1px 2px rgba(18,40,58,.1),0 8px 18px rgba(18,40,58,.16)}
.swatch-block{display:block;height:38px;border-radius:2px}
.swatch-block--1{background:var(--canvas);box-shadow:inset 0 0 0 1px var(--border-strong)}
.swatch-block--2{background:var(--blue)}
.swatch-block--3{background:var(--text-secondary)}
.swatch-code{display:block;margin-top:6px;font-family:var(--f-mono);font-weight:500;font-size:.8125rem;line-height:1;letter-spacing:.04em;color:var(--text-primary);text-align:center}
.card-body{position:relative;padding:clamp(40px,3.4vw,50px) clamp(16px,1.6vw,24px) clamp(22px,2vw,30px)}
.card-body p{font-size:1.0625rem;line-height:1.55;color:var(--text-secondary);max-width:40ch}
/* a title that wraps to two lines does not push its link below the others: every link sits at the card's foot */
.services .card-body{flex:1;display:flex;flex-direction:column;align-items:flex-start}
.services .card-body .card-link{margin-top:auto;padding-top:.6rem}
.card-link{display:inline-flex;align-items:center;gap:.45em;min-height:44px;margin-top:.6rem;font-weight:600;font-size:1.0625rem;color:var(--blue);text-underline-offset:.22em;text-decoration-thickness:1.5px}
.card-link::after{content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);transition:transform .35s var(--ease-out)}
.card-link:hover::after{transform:translateX(3px) rotate(45deg)}
.why-photo{border-radius:6px;overflow:hidden;background:var(--blue);box-shadow:var(--shadow-card)}
.why-photo img{width:100%;height:auto}
.chips--plain{margin-top:18px}

/* C: our promise */
.promise{color:var(--on-blue);background:var(--blue)}
.promise-bg{position:absolute;inset:0;overflow:hidden;background:linear-gradient(rgba(0,55,86,.55),rgba(0,55,86,.55)),var(--blue) url("hero-ending.jpg") 50% 50%/cover no-repeat}
.promise-glow{position:absolute;inset:-30% -30%;background:radial-gradient(ellipse 36% 46% at 50% 50%,rgba(243,246,249,.1) 0%,rgba(243,246,249,0) 70%);transform:translate3d(-22%,-6%,0)}
.promise.live .promise-glow{animation:drift 26s var(--ease-io) -7s infinite alternate}
@keyframes drift{from{transform:translate3d(-22%,-6%,0)}to{transform:translate3d(22%,8%,0)}}
.wet::before{content:"";position:absolute;left:0;right:0;top:-3px;height:6px;border-radius:3px;background:linear-gradient(180deg,#41708F 0%,#2F5B78 55%,#224A64 100%);box-shadow:0 1px 2px rgba(18,40,58,.3);z-index:2}
.wet::after{content:"";position:absolute;left:8px;right:8px;top:-1.5px;height:1px;border-radius:1px;background:rgba(243,246,249,.18);z-index:3}
.promise>.wrap{position:relative}
.promise-head{text-align:center}
.promise-head .label{justify-content:center}
.promise-head .h2{margin-inline:auto;margin-bottom:1rem}
.lede{font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.5;color:var(--on-blue-muted);max-width:44ch;margin-inline:auto}
.promise-list{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,3.6vw,52px) clamp(36px,7vw,110px);max-width:1010px;margin:clamp(3rem,6vw,5rem) auto clamp(3rem,6vw,5rem)}
.promise-item{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:20px;align-items:start}
.tick{grid-row:1 / span 2;width:44px;height:44px;color:var(--on-blue);position:relative}
.tick circle,.tick path{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.tick circle{opacity:.4}
html.js .tick path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--ease-io);transition-delay:calc(var(--i,0)*120ms + 350ms)}
html.js .rv.in .tick path{stroke-dashoffset:0}
.promise-item .h3{color:var(--on-blue);margin-top:.35rem}
.promise-item p{grid-column:2;color:var(--on-blue-muted);font-size:1.0625rem;line-height:1.55;max-width:42ch}
.promise-close{display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center}
.closing{font-family:var(--f-display);font-weight:700;font-stretch:112%;letter-spacing:-.01em;font-size:clamp(1.25rem,1.9vw,1.625rem);line-height:1.25;max-width:32ch}

/* D: how it works */
.how-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.how-head{grid-column:1 / span 4;position:sticky;top:calc(var(--nav-h) + 56px)}
.how-steps{grid-column:6 / span 7;position:relative}
.steps{position:relative}
.steps-track,.steps-line{position:absolute;left:22px;top:24px;bottom:0;width:2px;margin-left:-1px;border-radius:1px}
.steps-track{background:rgba(103,124,142,.32)}
.steps-line{background:var(--blue);transform-origin:50% 0;transform:scaleY(var(--tl,0))}
.steps-head{position:absolute;left:22px;top:24px;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:radial-gradient(circle,rgba(45,88,116,.5) 0%,rgba(45,88,116,0) 70%);transform:translate3d(0,var(--tly,0px),0);opacity:0}
.how.live .steps-head{animation:headPulse 4.2s var(--ease-io) -1s infinite}
@keyframes headPulse{0%,100%{opacity:0}50%{opacity:1}}
.step{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(18px,3vw,44px);align-items:start;padding:0 0 clamp(44px,5.4vw,76px) clamp(64px,6vw,86px)}
.step-num{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--border-strong);font-family:var(--f-mono);font-weight:500;font-size:.9375rem;color:var(--text-primary);isolation:isolate;overflow:hidden;transition:color .5s var(--ease-out)}
.step-num::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--blue);opacity:0;transform:scale(.4);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.step.on .step-num{color:var(--on-blue)}
.step.on .step-num::before{opacity:1;transform:none}
.step .h3{margin-top:.45rem}
.step p{color:var(--text-secondary);max-width:46ch}
.step-ico{width:clamp(52px,5vw,68px);height:clamp(52px,5vw,68px);padding:clamp(12px,1.1vw,16px);border-radius:50%;background:var(--panel);box-shadow:var(--shadow-card);color:var(--blue);overflow:visible}
.step-ico *{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
html.js .step-ico *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease-io) .15s}
html.js .step.on .step-ico *{stroke-dashoffset:0}
html.js .step .step-copy,html.js .step .step-ico{opacity:0;transform:translate3d(26px,0,0);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
html.js .step.on .step-copy,html.js .step.on .step-ico{opacity:1;transform:none}
html.js .step .step-ico{transition:opacity .8s var(--ease-out) .1s,transform .8s var(--ease-out) .1s}
.how-close{position:relative;margin-left:clamp(64px,6vw,86px);padding:clamp(24px,2.6vw,36px) clamp(22px,2.8vw,40px);border-radius:6px;background:var(--blue);color:var(--on-blue);box-shadow:var(--shadow-card);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2rem}
.how-close .closing{max-width:20ch}
.steps-end{position:absolute;left:22px;bottom:-1px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--blue);transform:scale(var(--tle,0));transition:transform .5s var(--ease-out)}

/* E: questions */
.faq-wrap{width:min(720px,100% - 2*var(--gut));margin-inline:auto}
.faq-head{text-align:center;margin-bottom:clamp(2rem,4vw,3.25rem)}
.faq-head .label{justify-content:center}
.faq-head .h2{margin-inline:auto;margin-bottom:0}
.q{border-radius:6px;background:var(--panel);box-shadow:var(--shadow-card);transition:box-shadow .45s var(--ease-out)}
.q+.q{margin-top:14px}
.q.open{box-shadow:0 1px 2px rgba(18,40,58,.06),0 14px 34px rgba(18,40,58,.12)}
.q-btn{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:68px;padding:18px clamp(18px,3vw,28px);border:0;border-radius:6px;background:transparent;text-align:left;font-family:var(--f-display);font-weight:700;font-stretch:112%;letter-spacing:-.01em;font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.25;color:var(--text-primary);cursor:pointer}
.pm{position:relative;flex:none;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--border-strong);transition:background-color .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:1px;background:var(--text-primary);transition:transform .5s var(--ease-io),background-color .4s var(--ease-out)}
.pm::after{transform:rotate(90deg)}
.q.open .pm{background:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue)}
.q.open .pm::before,.q.open .pm::after{background:var(--on-blue)}
.q.open .pm::after{transform:rotate(0deg)}
.q-btn:hover .pm{box-shadow:inset 0 0 0 1.5px var(--text-primary)}
.pm-glow{position:absolute;inset:-7px;border-radius:50%;background:radial-gradient(circle,rgba(45,88,116,.26) 30%,rgba(45,88,116,0) 70%);opacity:0;pointer-events:none}
.questions.live .q:not(.open) .pm-glow{animation:headPulse 5.4s var(--ease-io) infinite;animation-delay:calc(var(--i,0)*-.7s)}
html.js .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-io)}
html.js .a-in{min-height:0;overflow:hidden;visibility:hidden;opacity:0;transform:translate3d(0,-6px,0);transition:opacity .35s var(--ease-out),transform .45s var(--ease-out),visibility 0s linear .5s}
html.js .q.open .a{grid-template-rows:1fr}
html.js .q.open .a-in{visibility:visible;opacity:1;transform:none;transition:opacity .5s var(--ease-out) .1s,transform .5s var(--ease-out) .1s,visibility 0s}
.a-in p{padding:0 clamp(18px,3vw,28px) 24px;color:var(--text-secondary);max-width:62ch}
.faq-close{margin-top:clamp(2rem,4vw,3rem);text-align:center;color:var(--text-secondary)}
.faq-close a,.a-in a{color:var(--text-primary);font-weight:600;text-underline-offset:.2em;text-decoration-thickness:1.5px}

/* F: the estimate form */
.est-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.est-text{grid-column:1 / span 5;position:sticky;top:calc(var(--nav-h) + 56px)}
.est-card-col{grid-column:7 / span 6}
.form-card{position:relative;padding:clamp(28px,3.4vw,48px) clamp(20px,3.2vw,44px) clamp(26px,3vw,40px);border-radius:8px;background:var(--blue);color:var(--on-blue);box-shadow:0 2px 4px rgba(18,40,58,.1),0 22px 50px rgba(18,40,58,.2);isolation:isolate}
.form-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:8px;background-image:var(--stipple);background-size:240px 240px;opacity:.06;mix-blend-mode:multiply}
.tape--corner{right:-44px;top:26px;width:190px;transform:rotate(34deg);transform-origin:50% 50%;z-index:2}
html.js .rv .tape--corner .tape-lay{transform:translateX(-101%)}
html.js .rv .tape--corner .tape-lay>.tape-body{transform:translateX(101%)}
html.js .rv.in .tape--corner .tape-lay,html.js .rv.in .tape--corner .tape-lay>.tape-body{transform:none;transition:transform .95s var(--ease-io) .55s}
.field{position:relative;margin:0 0 20px;padding:0;border:0;min-width:0}
.field label,.field legend{display:block;margin:0 0 8px;padding:0;font-weight:600;font-size:1rem;line-height:1.3;color:var(--on-blue)}
.field input[type="text"],.field input[type="tel"],.field input[type="email"],.field textarea{display:block;width:100%;min-height:52px;padding:.7em .9em;border:0;border-radius:5px;background:var(--panel);color:var(--text-primary);font-size:1.0625rem;line-height:1.4;box-shadow:inset 0 0 0 1.5px var(--border-strong);transition:box-shadow .3s var(--ease-out),background-color .3s var(--ease-out);-webkit-appearance:none;appearance:none}
.field textarea{min-height:104px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--text-secondary);opacity:1}
.field input:hover,.field textarea:hover{box-shadow:inset 0 0 0 1.5px var(--text-primary)}
.field [aria-invalid="true"],.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--error)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.pair .field{margin-bottom:10px}
.pair .hint,.pair .err{grid-column:1 / -1}
.hint{margin:0 0 20px;font-size:.9375rem;line-height:1.45;color:var(--on-blue-muted)}
.err{display:inline-block;margin:8px 0 0;padding:.4em .8em;border-radius:5px;background:var(--panel);color:var(--error);font-weight:600;font-size:.9375rem;line-height:1.4;animation:errIn .4s var(--ease-out) both}
.pair .err{justify-self:start;margin:8px 0 0}
.err[hidden]{display:none}
@keyframes errIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.checks{display:flex;flex-wrap:wrap;gap:10px}
.checks legend{float:left;width:100%}
.check{position:relative;display:inline-flex;cursor:pointer;-webkit-tap-highlight-color:transparent}
.check input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.check span{display:inline-flex;align-items:center;gap:.6em;min-height:48px;padding:.4em 1.1em .4em .85em;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--on-blue-muted);font-weight:600;font-size:1rem;line-height:1.2;color:var(--on-blue);transition:background-color .35s var(--ease-out),color .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.check span::before{content:"";flex:none;width:20px;height:20px;border-radius:4px;box-shadow:inset 0 0 0 1.5px currentColor;background:transparent center/14px 14px no-repeat;transition:background-color .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.check:hover span{box-shadow:inset 0 0 0 1.5px var(--on-blue)}
.check input:checked+span{background:var(--panel);color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--panel)}
.check input:checked+span::before{background-color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.6 2.6L11 4.4' fill='none' stroke='%23F3F6F9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.check input:focus-visible+span{outline:3px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 3px var(--text-primary)}
.checks .err{flex-basis:100%;width:auto;align-self:flex-start;margin-top:2px}
.checks .err-row{flex-basis:100%;display:flex}
.form-send{position:relative;margin-top:26px}
.form-send-glow{position:absolute;inset:-10px;border-radius:14px;background:radial-gradient(ellipse 60% 90% at 50% 50%,var(--accent-muted),rgba(224,36,36,0) 72%);opacity:0;pointer-events:none}
.estimate.live .form-send-glow{animation:sendGlow 5.6s var(--ease-io) -2s infinite}
@keyframes sendGlow{0%,100%{opacity:0}50%{opacity:.85}}
.form-send .btn{z-index:1}
.form-send .btn[aria-disabled="true"]{opacity:.7;cursor:progress;transform:none}
.form-status{margin:14px 0 0;font-weight:600;font-size:1rem;line-height:1.45;color:var(--on-blue)}
.form-status:empty{display:none}
.form-status.is-error{display:inline-block;padding:.45em .85em;border-radius:5px;background:var(--panel);color:var(--error)}
.form-status a{color:inherit}
.form-call{margin:18px 0 0;font-weight:600;font-size:1.0625rem;color:var(--on-blue)}
.form-call a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-blue);text-underline-offset:.22em;text-decoration-thickness:1.5px}
.form-small{margin:2px 0 0;font-size:.9375rem;line-height:1.45;color:var(--on-blue-muted)}
.form-done{font-family:var(--f-display);font-weight:700;font-stretch:112%;letter-spacing:-.01em;font-size:clamp(1.25rem,1.9vw,1.625rem);line-height:1.3;color:var(--on-blue);max-width:26ch;padding:clamp(20px,4vw,48px) 0;animation:rise .8s var(--ease-out) both}
.form-done[hidden]{display:none}
.form-done a{color:inherit;text-underline-offset:.2em}
.form-card.sent .form-fields{display:none}

/* footer */
.footer{position:relative;background:var(--blue-deep);color:var(--on-blue);padding:clamp(3.5rem,6vw,5.5rem) 0 clamp(2rem,3vw,2.75rem)}
.footer.wet::before{background:linear-gradient(180deg,#2E5673 0%,#1F4159 55%,#16344A 100%)}
.footer.live.wet::after{animation:beadShine 12s var(--ease-io) -4s infinite alternate}
@keyframes beadShine{from{opacity:.4}to{opacity:1}}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2.5rem clamp(2rem,6vw,6rem);align-items:start}
.footer .logo img{height:112px}
.footer-lines{margin-top:1.25rem;display:grid;gap:.6rem}
.footer-lines p{color:var(--on-blue-muted);font-size:1.0625rem;line-height:1.55;max-width:46ch}
.footer-lines .facts{font-family:var(--f-mono);font-weight:500;font-size:.8125rem;letter-spacing:.04em;color:var(--on-blue)}
.footer-contact{display:grid;gap:.35rem;justify-items:start}
.footer-contact a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--f-display);font-weight:700;font-stretch:112%;font-size:clamp(1.125rem,1.7vw,1.5rem);letter-spacing:-.01em;color:var(--on-blue);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/0 2px no-repeat;transition:background-size .45s var(--ease-out);overflow-wrap:anywhere}
.footer-contact a:hover{background-size:100% 2px}
.form-noscript{margin:12px 0 0;font-weight:600;font-size:.9375rem;line-height:1.45;color:var(--on-blue)}
.form-noscript a{color:var(--on-blue)}
.footer-addr{margin-top:.6rem;font-style:normal;font-size:1rem;line-height:1.55;color:var(--on-blue-muted)}
.nf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.6rem;margin:1.6rem 0 1.2rem!important}
.nf-home{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.copy{grid-column:1 / -1;margin-top:clamp(1rem,3vw,2.5rem);padding-top:1.5rem;border-top:1px solid rgba(243,246,249,.14);font-family:var(--f-mono);font-weight:500;font-size:.8125rem;letter-spacing:.04em;color:var(--on-blue-muted)}

/* ============ smaller screens ============ */
@media (max-width:1099px){
  .svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .svc-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-head{grid-column:1 / -1}
  .svc-head .h2{font-size:clamp(2rem,3.6vw,3.25rem);margin-bottom:1.25rem}
}
@media (max-width:959px){
  .why-grid,.how-grid,.est-grid{display:block}
  .why-panel{margin-top:clamp(2.5rem,7vw,4rem)}
  .how-head,.est-text{position:static}
  .how-steps{margin-top:1rem}
  .est-card-col{margin-top:clamp(2rem,6vw,3rem)}
}
@media (max-width:720px){
  body{font-size:1.125rem}
  .svc-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .svc-head{margin-bottom:-12px}
  .promise-list{grid-template-columns:minmax(0,1fr)}
  .peel--board{left:-8px;right:-8px}
  .tape-paint{left:8px;right:8px}
  .board-info{grid-template-columns:minmax(0,1fr)}
  .step{grid-template-columns:minmax(0,1fr);padding-left:62px}
  .step-ico{grid-row:1;margin-bottom:14px}
  .how-close{margin-left:0}
  .pair{grid-template-columns:minmax(0,1fr)}
  .pair .field{margin-bottom:16px}
  .tape--corner{right:-52px;top:18px;width:170px}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
}
@media (pointer:coarse){
  .btn{min-height:48px}
  .nav .btn{min-height:44px}
  .btn--ghost{min-height:46px}
  .form-card--top .check span{min-height:44px}
  .form-card--top .form-call a{min-height:44px}
  .faq-close a,.a-in a{display:inline-flex;align-items:center;min-height:44px}
}

/* ============ reduced motion ============
   Owner's call (2026-10-23): the roller scroll and the tape peel are
   driven by the visitor's own scroll and touch, so they keep working. Loops and transitions stop. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ============ the garage floor epoxy page ============ */
.page-epoxy .hs-wall{background-image:url("epoxy-ending.jpg")}
.page-epoxy .hs-roller{background-image:url("epoxy-still.jpg")}
.page-epoxy .promise-bg{background:linear-gradient(rgba(0,55,86,.78),rgba(0,55,86,.78)),var(--blue-deep) url("epoxy-ending.jpg") 50% 50%/cover no-repeat}
.page-epoxy .hero-scrub,.page-epoxy .hero-static{background-color:#8E9AA6}
.page-epoxy .stage{background:#9AA5B0}
.page-epoxy .scrim{background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(0,55,86,0) 35%,rgba(0,55,86,.3) 100%)}
/* flakes are a busy background, so every hero line sits on its own navy card */
.page-epoxy .band-box{padding:clamp(18px,2vw,28px) clamp(20px,2.4vw,34px);border-radius:8px;background:rgba(0,55,86,.86);box-shadow:0 18px 44px rgba(18,40,58,.3)}
.page-epoxy .band-box::before{display:none}
.page-epoxy .band{text-shadow:none}
.page-epoxy .band--1{bottom:calc(5% + var(--bar))}
.page-epoxy .hs-scrim{background:linear-gradient(180deg,rgba(0,55,86,.88) 0%,rgba(0,55,86,.8) 52%,rgba(0,55,86,0) 78%)}
.page-epoxy .cue{background:rgba(0,55,86,.86);color:var(--on-blue);border-color:rgba(243,246,249,.3)}
/* the arrow sits just right of the opening card, level with its bottom edge, so it never covers the card */
.page-epoxy .band .cue{left:calc(100% + 16px);bottom:0;margin-left:0}
.footer-links{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;margin-top:1rem}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:1rem;color:var(--on-blue);text-underline-offset:.22em;text-decoration-thickness:1.5px}
.page-epoxy .h-hero{font-size:clamp(2.4rem,min(4.6vw,8.6vh),4.25rem)}
.page-epoxy .band .chip{padding:0;margin-bottom:.8rem;background:none;border:0;color:var(--on-blue-muted)}
.page-epoxy .band .chip::before{background:var(--on-blue)}
.page-epoxy .hero-static .h-hero{font-size:clamp(2.75rem,min(6.2vw,10.4vh),5.5rem)}

/* ============ phones: tighter spacing, the form near the top ============ */
@media (max-width:720px){
  /* less empty space between sections */
  .sec{padding-block:clamp(3.25rem,13vw,4.5rem)}
  /* the still hero no longer fills the whole screen, so the estimate form starts on the first screen */
  .hero-static{min-height:0;padding-top:calc(var(--nav-h) + 28px);padding-bottom:clamp(96px,30vw,150px)}
  .hs-roller{height:clamp(150px,46vw,240px)}
  .hs-scrim{background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(0,55,86,0) 35%,rgba(0,55,86,.34) 100%),linear-gradient(180deg,rgba(0,55,86,.56) 0%,rgba(0,55,86,.44) 60%,rgba(0,55,86,0) 88%)}
  html:not(.js) .top-form-static,html.still-hero .top-form-static{padding-top:0;margin-top:-56px}
  .form-card--top .field input[type="text"],.form-card--top .field input[type="tel"],.form-card--top .field input[type="email"]{min-height:44px}
  /* the scrub hero on a phone: captions use the full width */
  .stage{--band-left:20px}
  .band,.band--3{max-width:calc(100% - 40px)}
  .band .h-hero{font-size:clamp(2.25rem,11.5vw,3.5rem)}
  /* the opening caption sits under the roller's first frame, so on a phone it stays short:
     a small chip, the headline on one line, the support line on one line */
  .band--1{bottom:calc(4% + var(--bar))}
  .band--1 .h-hero{font-size:clamp(1.625rem,8.2vw,2.5rem);max-width:none}
  .band--1 .chip{font-size:.75rem;letter-spacing:.01em;gap:.5em;margin-bottom:.55rem;padding:.3em .6em;background:rgba(244,246,249,.88)}
  .band--1 .support{font-size:1rem;margin-top:.35em}
  /* the caption runs the full width here, so the round scroll arrow would sit on top of it */
  .cue{display:none}
  .band--3 .band-cta{margin-top:1.25rem}
}
/* the epoxy captions sit on navy cards. On a phone the cards are slimmer, so the opening one
   fits under the roller's first frame even with the browser's bottom bar showing */
@media (max-width:720px){
  .page-epoxy .band--1 .band-box{padding:12px 16px}
  .page-epoxy .band--1{bottom:calc(4% + var(--bar))}
  .page-epoxy .band--1 .chip{margin-bottom:.4rem}
}
/* the narrowest phones: the bar keeps the number and the button, and both fit */
.nav-phone-word{margin-right:.6em}
@media (max-width:389px){
  .nav-phone-word{display:none}
  .nav-actions{gap:8px}
  .nav .btn{padding:.5em .75em;font-size:.875rem}
}

/* ============ the hidden field only bots fill in ============ */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ============ small print links ============ */
.form-small a{color:var(--on-blue);text-underline-offset:.2em}
.copy a{display:inline-flex;align-items:center;min-height:44px;margin-left:1.4em;color:var(--on-blue);text-underline-offset:.22em}

/* ============ the cookie notice ============ */
.cookie-note{position:fixed;left:16px;right:16px;bottom:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:90;display:flex;align-items:center;gap:12px 18px;max-width:640px;margin:0 auto;padding:12px 12px 12px 20px;border-radius:8px;background:var(--blue-deep);color:var(--on-blue);box-shadow:0 2px 4px rgba(18,40,58,.2),0 18px 44px rgba(18,40,58,.34);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.cookie-note[hidden]{display:none}
.cookie-note p{margin:0;flex:1;font-size:.9375rem;line-height:1.45}
.cookie-note a{color:var(--on-blue);text-underline-offset:.2em;white-space:nowrap}
.cookie-note .btn{flex:none;min-height:44px;padding:.5em 1.5em;font-size:1rem}
.cookie-note.leaving{opacity:0;transform:translateY(12px)}
/* wide screens: bottom left, clear of the estimate form on the right */
@media (min-width:900px){.cookie-note{right:auto;margin:0;max-width:min(560px,calc(55% - 32px))}}

/* ============ the privacy policy page ============ */
.legal{padding:calc(var(--nav-h) + clamp(2.5rem,6vw,4.5rem)) 0 clamp(4rem,8vw,7rem)}
.legal-in{width:min(760px,100% - 2*var(--gut))}
.legal .label a{color:inherit;text-underline-offset:.2em}
.legal .h2{max-width:none;margin-bottom:.6rem}
.legal-date{margin:0 0 2.5rem;font-family:var(--f-mono);font-weight:500;font-size:.8125rem;letter-spacing:.04em;color:var(--text-secondary)}
.legal-h{font-family:var(--f-display);font-weight:800;font-stretch:112%;letter-spacing:-.01em;line-height:1.15;font-size:clamp(1.25rem,2vw,1.5rem);margin:2.4rem 0 .8rem;text-wrap:balance}
.legal p,.legal li{font-size:1.0625rem;line-height:1.7}
.legal p{margin:0 0 1rem}
.legal ul{margin:0 0 1.2rem;padding-left:1.3em;list-style:disc}
.legal li{margin:.3rem 0}
.legal a{color:var(--blue-deep);text-underline-offset:.2em;overflow-wrap:anywhere}

/* ============ service pages (interior painting, exterior painting) ============ */
.svc-hero{position:relative;isolation:isolate;overflow:hidden;padding:calc(var(--nav-h) + clamp(30px,5vw,68px)) 0 clamp(52px,7vw,100px);background:var(--blue);color:var(--on-blue)}
.svc-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 80% at 18% 30%,rgba(243,246,249,.07) 0%,rgba(243,246,249,0) 60%),linear-gradient(180deg,rgba(0,55,86,0) 40%,rgba(0,55,86,.35) 100%)}
.svc-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.svc-crumbs{gap:.55em;flex-wrap:wrap}
.svc-crumbs a{color:inherit;text-underline-offset:.2em;display:inline-block;padding-block:13px;margin-block:-13px}
.svc-hero .h-hero{font-size:clamp(2.5rem,5.2vw,4.75rem);max-width:12ch;margin:0 0 1.1rem;text-wrap:balance}
.svc-intro{margin:0 0 1rem;font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.55;max-width:42ch;color:var(--on-blue)}
.svc-hero .hs-facts{margin:0 0 .4rem}
.svc-call{margin:0}
.svc-hero-form .form-card{max-width:520px;margin-left:auto}
@media (max-width:899px){
  .svc-hero-grid{grid-template-columns:minmax(0,1fr)}
  .svc-hero-form .form-card{margin:0 auto;max-width:560px}
}

.svc-prep-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.svc-prep .h2{margin-bottom:1.2rem}
.svc-photo{border-radius:8px;overflow:hidden;box-shadow:var(--shadow-card);background:var(--panel)}
.svc-photo img{display:block;width:100%;height:auto}
.svc-list{list-style:none;margin:clamp(36px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px) clamp(22px,3vw,44px)}
.svc-list li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;align-items:start}
.svc-ico{width:30px;height:30px;margin-top:2px;fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc-ico rect{fill:rgba(45,88,116,.08)}
.svc-list .h3{margin:0 0 .3rem}
.svc-list p,.svc-quote-list p{margin:0;font-size:1rem;line-height:1.55;color:var(--text-secondary)}

.svc-quote{background:var(--panel)}
.svc-quote .body{margin-bottom:0}
.svc-quote-list{list-style:none;margin:clamp(32px,4vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.svc-quote-list li{position:relative;padding:22px 22px 24px;border-radius:8px;background:#fff;box-shadow:var(--shadow-card)}
.svc-n{display:inline-grid;place-items:center;width:34px;height:34px;margin-bottom:14px;border-radius:50%;background:var(--blue-deep);color:var(--on-blue);font-family:var(--f-mono);font-weight:500;font-size:.875rem}
.svc-quote-list .h3{margin:0 0 .35rem;font-size:clamp(1.0625rem,1.3vw,1.25rem)}

.svc-cross{padding:clamp(28px,4vw,44px) 0;background:var(--canvas);border-top:1px solid rgba(68,88,106,.16);border-bottom:1px solid rgba(68,88,106,.16)}
.svc-cross-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem 1.4rem;text-align:center}
.svc-cross-q{margin:0;font-family:var(--f-display);font-weight:800;font-stretch:112%;font-size:clamp(1.25rem,2vw,1.625rem);letter-spacing:-.01em}
.svc-cross .card-link{margin-top:0;font-size:1.125rem}

@media (max-width:1099px){
  .svc-quote-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .svc-prep-grid{grid-template-columns:minmax(0,1fr)}
  .svc-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .svc-list,.svc-quote-list{grid-template-columns:minmax(0,1fr)}
}