/* ME-BUILD: 20261008-0800 | scope: stronychicago.com design system "Midnight Office" (impeccable comp-3, canon at Apple/Rolex finish) */
@font-face{font-family:"Martel Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/martel-sans-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martel Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/martel-sans-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Martel Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/martel-sans-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martel Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/martel-sans-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Martel Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/martel-sans-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martel Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/martel-sans-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Martel Sans";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/martel-sans-800-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martel Sans";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/martel-sans-800-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ===== QUICK SETTINGS (hero: global, every page) - edit, then: python build/quick.py css  (live in ~1 min, no rebuild) =====
   --hero-tone      colour of the mask as R,G,B (warm: 26,15,6; neutral navy: 7,12,23)
   --hero-mask-*    strength 0 (none) to 1 (black) at the left edge, middle, right edge, top and bottom */
:root{
  --hero-tone:26,15,6;
  --hero-mask-left:.7;--hero-mask-mid:.42;--hero-mask-right:.12;
  --hero-mask-top:.3;--hero-mask-bottom:.4;
  --nav-frost:.5;--nav-blur:14px;  /* top menu: frosted glass, opacity of the ink tint (0.5 = 50%) and blur strength */
  --hform-w:clamp(360px,33vw,540px);  /* width of the contact form column in every hero */
  --hero-lift:clamp(40px,6svh,72px);  /* raises the centred text block on every hero: bigger = higher */
}

:root{
  --ink:#070c17;--night:#0a1120;--navy:#0c1729;--navy-2:#111e35;--navy-3:#1a2a47;
  --ivory:#f6f5f2;--mist:#c5ccd8;--mist-2:#98a3b6;
  --gold:#dcad5a;--gold-hi:#f5d082;--gold-lo:#b98a3e;
  --gold-fill:linear-gradient(180deg,#f7d98f 0%,#e7bd6a 48%,#d2a24f 100%);
  --hair:rgba(220,173,90,.32);--edge:rgba(255,255,255,.08);
  --gutter:clamp(16px,4.3vw,84px);--wrap:1440px;
  --nav-h:clamp(52px,4.6vw,66px);  /* top menu height; the logo width follows it */
  --f:"Martel Sans",system-ui,sans-serif;
  --radius:10px;--pill:999px;
  --shadow:0 24px 48px -28px rgba(0,0,0,.85);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:dark;scrollbar-color:var(--navy-3) var(--night)}
body{margin:0;background:var(--night);color:var(--ivory);font:400 1.0625rem/1.75 var(--f);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-hi);text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:rgba(245,208,130,.45)}
a:hover{color:var(--ivory);text-decoration-color:var(--gold)}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold);color:var(--ink)}
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--ink);padding:.6rem 1rem;z-index:100;border-radius:var(--radius)}
.skip:focus{left:16px}
.ico{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico--fill{fill:currentColor;stroke:none}

/* ---------- header (masthead) ---------- */
.topbar{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);background:rgba(7,12,23,var(--nav-frost));-webkit-backdrop-filter:blur(var(--nav-blur)) saturate(140%);backdrop-filter:blur(var(--nav-blur)) saturate(140%);box-shadow:0 1px 0 rgba(255,255,255,.07);transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.topbar.is-solid{box-shadow:0 1px 0 var(--hair),0 18px 40px -30px #000}
.topbar.is-open{background:var(--ink);box-shadow:0 1px 0 var(--hair),0 18px 40px -30px #000}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.topbar{background:rgba(7,12,23,.88)}}
.nav{height:100%;display:flex;align-items:center;gap:clamp(1rem,2vw,2.5rem);padding-right:clamp(16px,4.1vw,72px)}
.brand{display:block;width:calc(var(--nav-h)*4.4);flex:none;align-self:stretch}
.brand img{width:100%;height:100%;object-fit:contain;object-position:left center}
.menu-wrap{margin-inline:auto}  /* links centred in the free space between the logo and the call button */
.menu{display:flex;align-items:center;gap:clamp(1.2rem,3.15vw,3rem);list-style:none;margin:0;padding:0}
.phone.desk{margin-left:0}
.menu>li{position:relative}
.menu a{display:block;padding:.4rem 0;color:var(--ivory);text-decoration:none;font:400 clamp(.92rem,1.06vw,1.05rem)/1.2 var(--f);white-space:nowrap}
.menu a:hover,.menu a[aria-current=page]{color:var(--gold-hi)}
.menu .sub{position:absolute;top:calc(100% + 14px);left:-18px;min-width:300px;background:var(--ink);border:1px solid var(--hair);border-radius:var(--radius);padding:.6rem;list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(6px);transition:.25s var(--ease);box-shadow:var(--shadow)}
.menu li:hover>.sub,.menu li:focus-within>.sub{opacity:1;visibility:visible;transform:none}
.menu .sub a{font-size:1rem;padding:.55rem .7rem;border-radius:6px}
.menu .sub a:hover{background:var(--navy-2)}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border-radius:var(--pill);text-decoration:none;font:600 1.05rem/1 var(--f);white-space:nowrap;transition:transform .2s var(--ease),box-shadow .3s var(--ease),background .3s}
/* base geometry at zero specificity: every context (hero, nav phone, call box, close band) still sets its own size */
:where(.pill){height:48px;padding:0 1.5rem}
:where(.actions){display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.pill .ico{width:20px;height:20px}
.chips{gap:.6rem;margin:0 0 2.4rem}
.chips .pill{height:40px;padding:0 1.15rem;font:500 .98rem/1 var(--f);border-width:1px;border-color:var(--hair)}
.chips a.pill:hover{border-color:var(--gold)}
.chips .pill[aria-current]{background:var(--gold-fill);color:var(--ink);border-color:transparent}
.visit{margin:1.8rem 0 0}
.pill--gold{background:var(--gold-fill);color:var(--ink);box-shadow:0 12px 26px -14px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.45)}
.pill--gold:hover{color:var(--ink);transform:translateY(-1px);box-shadow:0 18px 32px -14px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.55)}
.pill--gold:active{transform:translateY(1px)}
.pill--line{background:rgba(9,20,38,.88);color:var(--gold-hi);border:1.5px solid var(--gold)}
.pill--line:hover{background:rgba(220,173,90,.12);color:var(--gold-hi)}
.phone{height:clamp(28px,2vw,32px);padding:3px clamp(.7rem,.9vw,.9rem) 0;font-size:clamp(.78rem,.85vw,.88rem);margin-top:0;gap:.4rem}
.phone .ico{width:14px;height:14px;translate:0 -2.1px}
.burger{display:none;background:none;border:0;width:44px;height:44px;padding:10px;cursor:pointer;margin-left:auto}
.burger span{display:block;height:2px;background:var(--gold-hi);margin:6px 0;transition:.25s}
.is-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.is-open .burger span:nth-child(2){opacity:0}
.is-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.phone.mob{display:none}
@media (max-width:1100px){
  .burger{display:block}
  .brand{margin-right:0}
  .menu-wrap{position:fixed;inset:var(--nav-h) 0 0;background:var(--ink);padding:1.5rem var(--gutter) 3rem;overflow:auto;display:none;border-top:1px solid var(--hair)}
  .is-open .menu-wrap{display:block}
  .menu{flex-direction:column;align-items:stretch;gap:0}
  .menu a{font-size:1.15rem;padding:.9rem 0;border-bottom:1px solid var(--edge)}
  .menu .sub{position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;box-shadow:none;padding:0 0 .5rem 1rem;min-width:0}
  .menu .sub a{border:0;padding:.55rem 0;font-size:1rem;color:var(--mist)}
  .phone.desk{display:none}
  .phone.mob{display:inline-flex;margin-top:1.5rem;width:100%}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;color:var(--ivory);isolation:isolate;overflow:hidden;background:var(--ink)}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(7,12,23,.3) 0%,rgba(7,12,23,0) 16%),
  linear-gradient(90deg,rgba(7,12,23,.34) 0%,rgba(7,12,23,.18) 30%,rgba(7,12,23,0) 56%)}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--hform-w);column-gap:clamp(1rem,2.4vw,3.5rem);min-height:100vh;min-height:100svh;padding:0 clamp(16px,3.3vw,60px) 0 clamp(16px,4.7vw,90px)}
.hero__copy{padding-top:18.2svh;max-width:min(62vw,980px)}
.hero h1,.hero .lead,.hero .crumbs{text-shadow:0 1px 2px rgba(7,12,23,.55),0 2px 22px rgba(7,12,23,.7)}
.hero h1{font:700 clamp(1.9rem,3.18vw,3.3rem)/1.22 var(--f);letter-spacing:-.008em;margin:0}
.hero .lead{font:400 clamp(1.05rem,1.62vw,1.6rem)/1.4 var(--f);color:#eceef2;margin:2.05rem 0 0;max-width:none}
.hero .actions{display:flex;flex-wrap:wrap;gap:clamp(.75rem,1.05vw,1rem);margin-top:clamp(1.3rem,1.9vw,1.9rem)}
.hero .actions .pill{height:clamp(50px,3.9vw,60px);padding:0 clamp(1.3rem,2.1vw,2.1rem);font-size:clamp(1.05rem,1.35vw,1.3rem)}
.crumbs{font-size:.92rem;color:var(--mist);margin-bottom:1.1rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:.4rem;color:var(--gold)}
.crumbs a{color:var(--mist);text-decoration:none}
.crumbs a:hover{color:var(--gold-hi)}
.live{padding-top:12.4svh;display:grid;gap:clamp(10px,1vw,15px);align-content:start}
/* one hero image and one mask on every page (Arek 2026-10-08): left darker under the copy, right lighter; tune in QUICK SETTINGS */
.hero--home::before,.hero--page::before{background:
  linear-gradient(90deg,rgba(var(--hero-tone),var(--hero-mask-left)) 0%,rgba(var(--hero-tone),var(--hero-mask-mid)) 38%,rgba(var(--hero-tone),calc(var(--hero-mask-mid) * .5)) 70%,rgba(var(--hero-tone),var(--hero-mask-right)) 100%),
  linear-gradient(180deg,rgba(var(--hero-tone),var(--hero-mask-top)) 0%,rgba(var(--hero-tone),0) 20%,rgba(var(--hero-tone),0) 72%,rgba(var(--hero-tone),var(--hero-mask-bottom)) 100%)}
/* homepage (Arek 2026-10-08): copy block and live modules centred vertically in the space under the nav */
/* GLOBAL for every hero on desktop, tablet and phone: copy block and side modules centred between the menu and the bottom edge; --hero-lift raises them (QUICK SETTINGS) */
.hero .hero__in{padding-top:var(--nav-h);align-items:center}.hero .hero__copy,.hero .live{padding-top:0;padding-bottom:var(--hero-lift)}
.mod{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:clamp(.8rem,1.1vw,1.1rem);padding:clamp(10px,.977vw,15px);background:rgba(10,18,34,.86);border:1px solid rgba(255,255,255,.11);border-radius:var(--radius);text-decoration:none;color:var(--ivory);box-shadow:var(--shadow);transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s}
.mod:hover{border-color:var(--hair);transform:translateX(-3px);background:rgba(13,23,42,.94);color:var(--ivory)}
.mod img{width:clamp(70px,6vw,92px);aspect-ratio:92/80;object-fit:cover;border-radius:6px}
.mod b{display:block;font:400 clamp(.92rem,1.08vw,1.06rem)/1.15 var(--f);color:var(--gold-hi);letter-spacing:-.005em}
.mod span{display:block;font:400 clamp(.88rem,.98vw,.98rem)/1.42 var(--f);color:#e8ebf0;margin-top:.45rem;letter-spacing:-.01em}
.mod .ico{color:var(--gold-hi);width:22px;height:22px;align-self:center;transition:transform .3s var(--ease)}
.mod__t{margin-top:-3px}
.live .mod:nth-child(1){min-height:clamp(96px,7.23vw,111px)}.live .mod:nth-child(2){min-height:clamp(100px,7.68vw,118px)}.live .mod:nth-child(3){min-height:clamp(98px,7.49vw,115px)}
.mod:hover .ico{transform:translateX(3px)}
.mod--text{grid-template-columns:1fr}
.mod--text:hover{transform:none;border-color:rgba(255,255,255,.11);background:rgba(10,18,34,.86)}
.hero--page .live .mod{min-height:0}
.down{position:absolute;left:50%;bottom:clamp(20px,3.3svh,34px);translate:-50% 0;width:clamp(44px,3.4vw,52px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;border:2px solid var(--gold);color:var(--gold-hi);background:rgba(7,12,23,.6);transition:background .3s,color .3s}
.down:hover{background:var(--gold);color:var(--ink)}
.down .ico{width:22px;height:22px}
@media (prefers-reduced-motion:no-preference){
  .down{animation:nudge 2.6s var(--ease) infinite}
  @keyframes nudge{0%,70%,100%{transform:translateY(0)}35%{transform:translateY(7px)}}
}
.live--below{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;padding:1.6rem var(--gutter) 0;background:var(--night)}
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;padding:0 var(--gutter)}
  .hero__copy{padding-top:calc(var(--nav-h) + 9svh);max-width:none}
  .hero .live,.hero .hform{display:none}
  .hero__bg img{object-position:58% 50%}
  .hero::before{background:linear-gradient(180deg,rgba(7,12,23,.82) 0%,rgba(7,12,23,.55) 48%,rgba(7,12,23,.2) 100%)}
  .live--below{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;padding:2rem var(--gutter) 0;background:var(--night)}
}
/* interior hero: same world, shorter copy */
.hero--page .hero__copy{max-width:min(64vw,980px)}
.hero--page h1{font-size:clamp(1.9rem,3.2vw,3.25rem)}
.hero--page .lead{max-width:46ch}
@media (max-width:900px){.hero--page .hero__copy{max-width:none}}

/* ---------- sections ---------- */
.section{padding:clamp(4rem,9vw,8.5rem) 0}
.section--deep{background:var(--ink)}
.section--navy{background:var(--navy)}
.h2{font:700 clamp(1.6rem,2.5vw,2.5rem)/1.2 var(--f);letter-spacing:-.01em;margin:0 0 1.1rem;text-wrap:balance}
.intro{max-width:62ch;color:var(--mist);font-size:1.1rem;margin:0 0 2.6rem}
.more-link{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--gold-hi);text-decoration:none}
.more-link .ico{transition:transform .3s var(--ease)}
a:hover .more-link .ico,.more-link:hover .ico{transform:translateX(3px)}

.section-head{margin-bottom:2.4rem}
.section-head p{color:var(--mist);margin:0;max-width:62ch}
.video-list a{grid-template-columns:150px 1fr}
.video-list .date{font-size:.92rem;line-height:1.5}

/* services bento: 6 cells, exact count, varied grounds */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(220px,auto);gap:clamp(12px,1.2vw,18px)}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;padding:clamp(1.3rem,2vw,2rem);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ivory);background:var(--navy-2);border:1px solid var(--edge);isolation:isolate;transition:border-color .35s var(--ease)}
.tile:hover{border-color:var(--hair);color:var(--ivory)}
.tile h3{font:700 clamp(1.25rem,1.7vw,1.6rem)/1.2 var(--f);margin:0}
.tile p{margin:0;color:var(--mist);font-size:1rem;line-height:1.6;max-width:46ch}
.tile .more-link{margin-top:.4rem}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .9s var(--ease)}
.tile:hover img{transform:scale(1.04)}
.tile.has-img::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,12,23,.18) 0%,rgba(7,12,23,.8) 52%,rgba(7,12,23,.97) 100%)}
.tile--xl{grid-column:span 2;grid-row:span 2;min-height:clamp(420px,40vw,560px)}
.tile--xl h3{font-size:clamp(1.6rem,2.4vw,2.3rem)}
/* the XL tile carries its device shot as a top plate (one subject, large and crisp), copy below it */
.tile--xl img{height:72%;bottom:auto;object-position:60% 40%;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.tile--xl.has-img::before{background:linear-gradient(180deg,transparent 45%,rgba(7,12,23,.85) 70%,rgba(7,12,23,.97) 100%)}
.tile--wide{grid-column:span 2}
.tile--gold{background:linear-gradient(160deg,#16233d,#0c1729 60%);border-color:var(--hair)}
@media (max-width:980px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.tile--xl{grid-column:span 2;grid-row:auto}}
@media (max-width:560px){.bento{grid-template-columns:1fr}.tile--xl,.tile--wide{grid-column:auto}}
/* phones: the xl tile shows its laptop as a real top plate instead of a darkened backdrop under a long paragraph */
@media (max-width:560px){.tile--xl{min-height:0;padding-top:calc((100vw - 2*var(--gutter))*.56)}.tile--xl img{height:auto;bottom:auto;aspect-ratio:900/560;object-position:50% 30%;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}.tile--xl.has-img::before{display:none}}

/* since 1995: the proof as a ruled scale, not a stat block */
.since{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.since .h2{font-size:clamp(1.6rem,2.5vw,2.5rem)}
.since p{color:var(--mist);margin:0 0 1rem;max-width:56ch}
.scale{position:relative;padding:2.6rem 0 0;margin-top:2rem}
.scale ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--gold);position:relative}
.scale li{padding:1.1rem 1rem 0 0;position:relative;color:var(--mist);font-size:.98rem;line-height:1.55}
.scale li::before{content:"";position:absolute;top:-7px;left:0;width:13px;height:13px;border-radius:50%;background:var(--night);border:2px solid var(--gold)}
.scale li:last-child::before{background:var(--gold)}
.scale strong{display:block;font:700 1.35rem/1.2 var(--f);color:var(--gold-hi);margin-bottom:.25rem}
.since figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--edge);box-shadow:var(--shadow)}
@media (max-width:900px){.since{grid-template-columns:1fr}.scale ol{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--gold);padding-left:1.4rem}.scale li{padding:0 0 1.4rem}.scale li::before{left:-1.4rem;top:.35rem;translate:-7px 0}}

/* prose = migrated WordPress content */
.prose{max-width:72ch;color:var(--mist)}
.prose h2,.prose h3,.prose h4,.prose h5{font-family:var(--f);color:var(--ivory);line-height:1.25;margin:2.4rem 0 .8rem;letter-spacing:-.005em}
.prose h2{font-size:clamp(1.5rem,2.4vw,2.05rem);font-weight:700}
.prose h3{font-size:1.35rem;font-weight:700}
.prose h4,.prose h5{font-size:1.12rem;font-weight:700}
.prose p,.prose ul,.prose ol{margin:0 0 1.15rem}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li{margin:.35rem 0}
.prose li::marker{color:var(--gold)}
.prose ul.tags{display:flex;flex-wrap:wrap;gap:.45rem .5rem;list-style:none;padding:0;margin:2.2rem 0 1.2rem}
.prose ul.tags li{margin:0}
.prose ul.tags a{display:inline-block;padding:.32rem .75rem;border:1px solid var(--edge);border-radius:var(--pill);font-size:.86rem;line-height:1.3;color:var(--mist);text-decoration:none;transition:border-color .25s,color .25s}
.prose ul.tags a:hover{border-color:var(--hair);color:var(--gold-hi)}
.prose strong,.prose b{color:var(--ivory)}
.prose img{border-radius:10px;margin:1.6rem 0;border:1px solid var(--edge)}
.prose figure{margin:1.6rem 0}
.prose table{width:100%;border-collapse:collapse;margin:1.6rem 0}
.prose td,.prose th{padding:.4rem;vertical-align:top}
.prose iframe{width:100%;aspect-ratio:16/9;border:1px solid var(--edge);border-radius:14px;background:var(--navy)}
.prose .caps{text-transform:lowercase;letter-spacing:0}
.prose .caps::first-letter{text-transform:uppercase}
.post-meta{color:var(--mist-2);font-size:.92rem;margin:-.4rem 0 1.4rem}
.prose .news-list{padding:0;list-style:none}
.prose .news-list li{margin:0}
.prose .news-list img{margin:0;border:0}
/* /nasze-serwisy/: one row per service, hairline between rows */
.svc{display:grid;grid-template-columns:clamp(200px,24vw,300px) 1fr;gap:clamp(1.2rem,2.5vw,2rem);align-items:center;padding:1.6rem 0;border-top:1px solid var(--edge)}
.svc:first-child{border-top:0;padding-top:0}
.svc__img img{margin:0;width:100%;aspect-ratio:2/1;object-fit:cover}
.svc h3{margin:0 0 .5rem}
.svc h3 a{color:var(--ivory);text-decoration:none}
.svc h3 a:hover{color:var(--gold-hi)}
.svc p{margin:0 0 .7rem}
@media (max-width:640px){.svc{grid-template-columns:1fr}}
.prose blockquote{margin:1.6rem 0;padding:1rem 1.25rem;border:1px solid var(--hair);border-radius:10px;background:var(--navy)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(2rem,5vw,5rem);align-items:start}
@media (max-width:980px){.layout{grid-template-columns:1fr}.aside .box--call{display:none}}
.aside{position:sticky;top:calc(var(--nav-h) + 1.5rem);display:grid;gap:1rem}
.box{background:var(--navy);border:1px solid var(--edge);border-radius:14px;padding:1.5rem}
.box h2,.box h3{font:700 1.2rem/1.3 var(--f);margin:0 0 .6rem}
.box p{margin:0 0 .9rem;font-size:1rem;color:var(--mist)}
.box ul{list-style:none;padding:0;margin:0;font-size:1rem}
.box li{padding:.45rem 0;border-top:1px solid var(--edge)}
.box li:first-child{border-top:0}
.box a{text-decoration:none}
.box--call{background:linear-gradient(170deg,#152340,#0b1426);border-color:var(--hair)}
.box--call .pill{width:100%;height:52px;margin-bottom:.8rem}

/* portfolio rail (portal: horizontal, snap) */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,22vw,300px);gap:clamp(12px,1.2vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:0 var(--gutter) 1.2rem;scrollbar-width:thin;scrollbar-color:var(--navy-3) transparent}
.rail a{scroll-snap-align:start;text-decoration:none;color:var(--ivory);display:grid;gap:.7rem;align-content:start}
.rail img{aspect-ratio:1;object-fit:cover;border-radius:14px;border:1px solid var(--edge);transition:border-color .3s,transform .6s var(--ease)}
.rail a:hover img{border-color:var(--hair);transform:translateY(-3px)}
.rail b{font:600 1.05rem/1.3 var(--f)}
.rail small{display:block;color:var(--mist-2);font-size:.9rem}
.rail-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:2rem}

/* blog: editorial list with one lead article */
.news{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem)}
.news-lead{text-decoration:none;color:var(--ivory);display:grid;gap:1rem;align-content:start}
.news-lead img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid var(--edge)}
.news-lead h3{font:700 clamp(1.4rem,2.2vw,2rem)/1.25 var(--f);margin:0}
.news-lead p{margin:0;color:var(--mist)}
.news-lead .date{margin-top:-.5rem}
.news-list{list-style:none;margin:0;padding:0;display:grid;align-content:start}
.news-list a{display:grid;grid-template-columns:96px 1fr auto;gap:1rem;align-items:center;padding:12px;margin-bottom:10px;text-decoration:none;color:var(--ivory);background:rgba(10,18,34,.86);border:1px solid rgba(255,255,255,.11);border-radius:var(--radius);transition:border-color .3s var(--ease),background .3s}
.news-list a:hover{border-color:var(--hair);background:rgba(13,23,42,.94)}
.news-list .ico,.net .ico{color:var(--gold-hi);width:22px;height:22px;transition:transform .3s var(--ease)}
.news-list a:hover .ico,.net a:hover .ico{transform:translateX(3px)}
.news-list li:last-child a{margin-bottom:0}
.news-list img{width:96px;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.news-list b{font:600 1.08rem/1.35 var(--f);display:block}
.date{display:block;color:var(--mist-2);font-size:.88rem;margin-top:.2rem}
.news-list a:hover b,.news-lead:hover h3{color:var(--gold-hi)}
@media (max-width:900px){.news{grid-template-columns:1fr}}

/* cards (blog index, categories, related) */
.grid{display:grid;gap:clamp(14px,1.4vw,20px);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.card{display:flex;flex-direction:column;background:var(--navy);border:1px solid var(--edge);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ivory);transition:border-color .3s,transform .4s var(--ease)}
.card:hover{border-color:var(--hair);transform:translateY(-3px);color:var(--ivory)}
.card img{aspect-ratio:16/9;object-fit:cover;width:100%}
.card--square img{aspect-ratio:1/1}
.card__body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card h3{font:700 1.15rem/1.3 var(--f);margin:0}
.card p{margin:0;font-size:.98rem;color:var(--mist)}
.card .more{margin-top:auto;font-weight:600;font-size:.95rem;color:var(--gold-hi)}
.meta{font-size:.88rem;color:var(--mist-2)}

/* clients + network */
.clients{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(1.5rem,3.5vw,3.5rem);align-items:center;justify-items:center}
.clients img{width:auto;max-width:100%;max-height:clamp(40px,4.2vw,62px);object-fit:contain;opacity:.72;transition:opacity .3s var(--ease)}
.clients img:hover{opacity:1}
@media (max-width:900px){.clients{grid-template-columns:repeat(3,1fr)}}
.net{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.net a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;padding:1.3rem 1.4rem;border:1px solid rgba(255,255,255,.11);border-radius:var(--radius);text-decoration:none;color:#e8ebf0;background:rgba(10,18,34,.86)}
.net a:hover{border-color:var(--hair)}
.net b{display:block;font:600 1.12rem/1.3 var(--f);color:var(--gold-hi);margin-bottom:.25rem}
@media (max-width:760px){.net{grid-template-columns:1fr}}

/* closing call */
.close{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--hair);padding:clamp(2.2rem,5vw,4.5rem);background:var(--navy);isolation:isolate}
.close__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:80% 38%;z-index:-2}
.close::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--navy) 30%,rgba(12,23,41,.82) 55%,rgba(12,23,41,.35))}
.close .h2{max-width:22ch}
.close p{color:var(--mist);max-width:56ch;margin:0 0 1.8rem}
.close .actions{display:flex;flex-wrap:wrap;gap:.9rem}
.close .pill{height:58px;padding:0 1.9rem;font-size:1.15rem}
@media (max-width:560px){.close__bg{height:380px;object-position:80% 20%}.close::before{background:linear-gradient(180deg,rgba(12,23,41,.5) 0,rgba(12,23,41,.9) 42%,var(--navy) 70%)}}

/* footer */
.foot{background:var(--ink);color:var(--mist);padding:4.5rem 0 2rem;font-size:1rem;border-top:1px solid var(--hair)}
.foot a{color:var(--ivory);text-decoration:none}
.foot a:hover{color:var(--gold-hi)}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:2.5rem}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.foot-grid{grid-template-columns:1fr}}
.foot h2{font:600 1rem/1.3 var(--f);color:var(--gold-hi);margin:0 0 1rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:.5rem 0}
.foot .brand-foot{width:280px;margin:-.9rem 0 .6rem -42px}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;border-top:1px solid var(--edge);margin-top:3rem;padding-top:1.5rem;font-size:.9rem;color:var(--mist-2)}

@media (max-width:560px){
  .hero--home .hero__bg{top:auto;height:max(300px,calc((91svh - 420px) * 1.84));-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);mask-image:linear-gradient(180deg,transparent,#000 22%)}
  .hero--home .hero__bg img{object-position:48% 50%}
}

/* motion: one authored moment, on EVERY hero (page switch = the photo settles from a light zoom, lights come up, copy rises) (the office lights come on, then the live modules check in), then quiet, scroll-driven reveals.
   CSS only, compositor-friendly (opacity/transform), no library; the H1 never fades so it never delays LCP. */
@media (prefers-reduced-motion:no-preference){
  .hero .hero__bg{overflow:hidden}
  .hero .hero__bg img{animation:settle 1.8s var(--ease) backwards}
  .hero .hero__bg::after{content:"";position:absolute;inset:0;background:#03060c;opacity:0;pointer-events:none;animation:lights 1.5s var(--ease) backwards}
  .hero h1{animation:rise 1s var(--ease) backwards}
  .hero .lead{animation:rise-in .9s .18s var(--ease) backwards}
  .hero .hero__copy .actions{animation:rise-in .9s .32s var(--ease) backwards}
  .hero .live .mod{animation:check-in .8s var(--ease) backwards}
  .hero .live .mod:nth-child(1){animation-delay:.55s}
  .hero .live .mod:nth-child(2){animation-delay:.7s}
  .hero .live .mod:nth-child(3){animation-delay:.85s}
  .hero--page .live .mod{animation:check-in .7s var(--ease) backwards}
  .hero--page .live .mod:nth-child(1){animation-delay:.2s}
  .hero--page .live .mod:nth-child(2){animation-delay:.32s}
  .hero--page .live .mod:nth-child(3){animation-delay:.44s}
  .hero .down{animation:rise-in .7s 1.1s var(--ease) backwards,nudge 2.6s 1.9s var(--ease) infinite}
  @keyframes settle{from{transform:scale(1.05)}}
  @keyframes lights{from{opacity:.62}to{opacity:0}}
  @keyframes rise{from{transform:translateY(16px)}}
  @keyframes rise-in{from{opacity:0;transform:translateY(16px)}}
  @keyframes check-in{from{opacity:0;transform:translateX(22px)}}

  @supports (animation-timeline:view()){
    .rail a{
      animation:enter linear backwards;animation-timeline:view();animation-range:entry 0% entry 55%}
    @keyframes enter{from{opacity:0;transform:translateY(28px)}}
    /* the 31-year scale draws itself as it scrolls into view */
    .scale ol{border-color:transparent}
    .scale ol::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:1px;background:var(--gold);transform-origin:left;
      animation:draw-x linear backwards;animation-timeline:view();animation-range:entry 20% cover 45%}
    .scale li{animation:enter linear backwards;animation-timeline:view();animation-range:entry 10% entry 70%}
    @keyframes draw-x{from{transform:scaleX(0)}}
    @keyframes draw-y{from{transform:scaleY(0)}}
    @media (max-width:900px){
      .scale ol::before{top:0;left:-1px;width:1px;height:100%;transform-origin:top;animation-name:draw-y}
    }
  }
}

/* ===== hero contact form (every page): right column on desktop, under the hero on phones ===== */
.hform{align-self:center;margin-bottom:var(--hero-lift);padding:clamp(1rem,1.4vw,1.35rem);border-radius:14px;border:1px solid rgba(255,255,255,.14);
  background:rgba(10,18,34,.72);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(245,208,130,.4),0 34px 60px -30px #000}
.hform__t{font:700 clamp(.95rem,1.15vw,1.12rem)/1.22 var(--f);color:var(--ivory);margin:0 0 .25rem;letter-spacing:-.005em}
.hform__s{margin:0 0 .75rem;color:var(--mist);font-size:.76rem;line-height:1.35}
.hf{display:block;margin:0 0 .6rem}
.hf span{display:block;margin:0 0 .22rem;color:var(--mist);font-size:.72rem;line-height:1.2}
.hf input,.hf select{display:block;width:100%;height:38px;padding:0 .75rem;border-radius:var(--radius);border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:var(--ivory);font:400 .86rem/1 var(--f);appearance:none;-webkit-appearance:none}
.hf select{background-image:linear-gradient(45deg,transparent 50%,var(--gold-hi) 50%),linear-gradient(135deg,var(--gold-hi) 50%,transparent 50%);background-position:calc(100% - 17px) 16px,calc(100% - 12px) 16px;background-size:5px 5px;background-repeat:no-repeat;padding-right:2rem}
.hf select option{background:var(--ink);color:var(--ivory)}
.hf input::placeholder{color:var(--mist-2)}
.hf input:focus,.hf select:focus{outline:2px solid rgba(220,173,90,.45);outline-offset:1px;border-color:var(--gold)}
.hf input.is-bad{border-color:#e0846a}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.hform__b{width:100%;height:44px;margin-top:.3rem;font-size:.95rem}
.hform__b .ico{width:17px;height:17px}
.hform__b.is-busy{opacity:.7;cursor:progress}
.hform__msg{min-height:1.1em;margin:.55rem 0 0;font-size:.78rem;line-height:1.4;color:#f1b3a0}
.hform__n{margin:.3rem 0 0;color:var(--mist-2);font-size:.64rem;line-height:1.4}
.hform__n a{color:var(--mist)}
.hform__ok h2{font:700 1.1rem/1.25 var(--f);margin:0 0 .5rem;color:var(--gold-hi)}
.hform__ok p{margin:0;color:var(--mist);font-size:.85rem;line-height:1.5}
.hform--below{display:none;margin:0;padding:1.6rem var(--gutter) 0;background:var(--night);border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hform--below .hform__f{max-width:520px;margin-inline:auto;padding:1.2rem;border-radius:14px;border:1px solid var(--hair);background:var(--navy)}
@media (max-width:900px){.hform--below{display:block}}

/* smart form (one question at a time) */
.hform__f.is-smart .hform__static,.hform__f.is-smart .hform__msg{display:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sq__p{height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;margin:0 0 .45rem}
.sq__p i{display:block;height:100%;background:var(--gold-fill);transition:width .35s var(--ease)}
.sq__c{margin:0 0 .6rem;color:var(--mist-2);font-size:.68rem;line-height:1.2}
.sq__welcome{margin:0 0 .6rem;padding:.45rem .6rem;border-radius:8px;background:rgba(220,173,90,.1);border:1px solid var(--hair);color:var(--mist);font-size:.7rem;line-height:1.35}
.sq__link{background:none;border:0;padding:0;color:var(--gold-hi);font:inherit;text-decoration:underline;cursor:pointer}
.sq__q{font:700 clamp(.8rem,.98vw,.95rem)/1.22 var(--f);color:var(--ivory);margin:0 0 .6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sq__h{margin:-.2rem 0 .6rem;color:var(--mist);font-size:.7rem;line-height:1.35}
.sq__chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;margin:0 0 .25rem}
.sq__chip{min-height:36px;padding:.35rem .7rem;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:var(--ivory);font:500 .78rem/1.2 var(--f);text-align:left;cursor:pointer;transition:border-color .2s,background .2s,transform .15s}
.sq__chip:hover{border-color:var(--gold);background:rgba(220,173,90,.12)}
.sq__chip:active{transform:scale(.98)}
.sq__chip.is-on{background:var(--gold-fill);color:var(--ink);border-color:transparent;font-weight:700}
.sq textarea{display:block;width:100%;padding:.4rem .65rem;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:var(--ivory);font:400 .8rem/1.35 var(--f);resize:none}
.sq .hf{margin:0 0 .6rem}
.sq .hf input{height:38px;font-size:.8rem;border-radius:8px}
.sq .hf span{font-size:.68rem;margin:0 0 .15rem}
.sq textarea:focus,.sq__chip:focus-visible{outline:2px solid rgba(220,173,90,.45);outline-offset:1px;border-color:var(--gold)}
.sq__err{min-height:.9em;margin:.2rem 0 0;color:#f1b3a0;font-size:.72rem;line-height:1.3}
.sq__nav{display:flex;gap:.5rem;align-items:center;margin-top:.6rem}
.sq__back{background:none;border:1px solid rgba(255,255,255,.2);border-radius:var(--pill);color:var(--mist);padding:0 .8rem;height:34px;font:500 .78rem var(--f);cursor:pointer}
.sq__back:hover{border-color:var(--gold);color:var(--gold-hi)}
.sq__next{flex:1;height:36px;font-size:.86rem}
.sq__next .ico{width:16px;height:16px}
.sq__next.is-busy{opacity:.7;cursor:progress}

.sq__ql{margin:.6rem 0 0;text-align:center;font-size:.72rem;line-height:1.2}
.sq__quick{display:grid;gap:.3rem;margin:0 0 .35rem}
.sq__quick .pill{width:100%;height:34px;font-size:.82rem}
.sq__quick .pill .ico{width:15px;height:15px}
.sq__or{margin:.05rem 0 .3rem;color:var(--mist-2);font-size:.7rem;text-align:center}
.sq__call{width:100%;flex:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* webdesign.onl | supplement to the stronychicago.com "Midnight Office" design system (site-base.css is copied verbatim).
   Only components that system does not have: FAQ accordion, video facade, area chips, facts row, steps, ZIP table, tick list.
   Same tokens (ink, night, navy, gold, hair, edge, mist), same radii, same hairline rule, no new colours, no eyebrows. */

/* long titles in the hero (restored WordPress posts keep their exact H1): step the display size down so the copy always fits one screen */
.hero h1.is-long{font-size:clamp(1.55rem,2.5vw,2.6rem);line-height:1.2}
.hero h1.is-xlong{font-size:clamp(1.4rem,2.1vw,2.2rem);line-height:1.22}

/* facts row */
.wd-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1vw,15px);margin:0}
.wd-facts>div{background:var(--navy);border:1px solid var(--edge);border-radius:14px;padding:1.1rem 1.3rem}
.wd-facts dt{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mist-2);margin:0 0 .3rem}
.wd-facts dd{margin:0;color:var(--ivory);font-weight:600}
.wd-facts a{color:var(--gold-hi)}
@media (max-width:900px){.wd-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.wd-facts{grid-template-columns:1fr}}

/* grids of boxes */
.wd-grid{display:grid;gap:clamp(12px,1.2vw,18px);grid-template-columns:repeat(2,minmax(0,1fr))}
.wd-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.wd-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.wd-grid,.wd-grid--3{grid-template-columns:1fr}}
.wd-box{background:var(--navy);border:1px solid var(--edge);border-radius:14px;padding:1.4rem 1.5rem 1.6rem}
.wd-box h3{margin:0 0 .45rem;font:700 1.15rem/1.25 var(--f);color:var(--ivory)}
.wd-box p{margin:0 0 .9rem;color:var(--mist);font-size:.98rem;line-height:1.6}
.wd-box p:last-child{margin-bottom:0}

/* area chips */
.wd-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;list-style:none}
.wd-chips li{padding:.28rem .8rem;border:1px solid var(--edge);border-radius:var(--pill);font-size:.9rem;line-height:1.35;color:var(--ivory);background:rgba(255,255,255,.03)}
.wd-chips li.hq{border-color:var(--gold);color:var(--gold-hi)}

/* steps (ruled like the since-1995 scale) */
.wd-steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.2vw,18px)}
.wd-steps li{counter-increment:s;background:var(--navy);border:1px solid var(--edge);border-radius:14px;padding:1.4rem 1.4rem 1.5rem}
.wd-steps li::before{content:counter(s);display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold-hi);font:700 1rem/1 var(--f);margin-bottom:.9rem}
.wd-steps h3{margin:0 0 .35rem;font:700 1.15rem/1.25 var(--f)}
.wd-steps p{margin:0;color:var(--mist);font-size:.97rem;line-height:1.6}
@media (max-width:980px){.wd-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.wd-steps{grid-template-columns:1fr}}

/* tick list */
.wd-tick{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.wd-tick li{position:relative;padding-left:1.9rem;color:var(--mist);line-height:1.55}
.wd-tick li::before{content:"";position:absolute;left:0;top:.42em;width:1rem;height:1rem;border-radius:50%;border:1.5px solid var(--gold);background:radial-gradient(circle,var(--gold) 0 38%,transparent 42%)}

/* ZIP table */
.wd-table{width:100%;border-collapse:collapse;font-size:.97rem}
.wd-table th,.wd-table td{padding:.55rem .2rem;border-bottom:1px solid var(--edge);text-align:left;color:var(--mist);font-weight:400}
.wd-table th{width:5.5rem;color:var(--gold-hi);font-weight:600}

/* FAQ accordion (one open at a time, see extra.js) */
.wd-faqs{display:grid;gap:10px;max-width:62rem}
.wd-faq{border:1px solid var(--edge);border-radius:14px;background:var(--navy);overflow:hidden}
.wd-faq summary{cursor:pointer;list-style:none;padding:1.1rem 3.2rem 1.1rem 1.4rem;font:700 1.05rem/1.4 var(--f);color:var(--ivory);position:relative}
.wd-faq summary::-webkit-details-marker{display:none}
.wd-faq summary::after{content:"+";position:absolute;right:1.3rem;top:50%;translate:0 -50%;font-size:1.5rem;color:var(--gold-hi);font-weight:400}
.wd-faq[open] summary::after{content:"\2212"}
.wd-faq[open]{border-color:var(--hair)}
.wd-faq summary:hover{color:var(--gold-hi)}
.wd-faq .ans{padding:0 1.4rem 1.3rem;color:var(--mist)}
.wd-faq .ans p:last-child{margin-bottom:0}

/* click-to-load video */
.wd-video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--edge);background:#000;margin:1.6rem 0}
.wd-video button,.wd-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;margin:0}
.wd-video button{padding:0;background:#000;cursor:pointer;color:var(--ivory);font:inherit}
.wd-video button img{width:100%;height:100%;object-fit:cover;opacity:.92}
.wd-video .play{position:absolute;inset:0;display:grid;place-items:center}
.wd-video .play i{width:76px;height:76px;border-radius:50%;background:var(--gold-fill);display:grid;place-items:center;box-shadow:0 12px 26px -14px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .25s var(--ease)}
.wd-video button:hover .play i{transform:scale(1.07)}
.wd-video .play .ico{width:30px;height:30px;color:var(--ink);margin-left:4px}
.wd-video .cap{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.2rem .9rem;text-align:left;background:linear-gradient(0deg,rgba(7,12,23,.88),transparent);font-weight:600}

/* text sections */
.wd-lead{font:400 clamp(1.05rem,1.4vw,1.35rem)/1.5 var(--f);color:var(--mist);max-width:62ch}
.wd-meta{color:var(--mist-2);font-size:.92rem;margin:.2rem 0 1.4rem}
.wd-note{border:1px solid var(--hair);border-radius:14px;background:linear-gradient(160deg,var(--navy-2),var(--navy));padding:1.2rem 1.4rem;margin:2rem 0}
.wd-note p{margin:0}
.wd-more{margin-top:2.4rem}
.wd-more .h3{font:700 1.35rem/1.25 var(--f);margin:0 0 1rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.4rem 0}
.prose .btn-row a.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 1.6rem;border-radius:var(--pill);background:var(--gold-fill);color:var(--ink);font-weight:600;text-decoration:none}

/* personalized hero form: the visitor's first name greets them at the right of the form title */
.hform__t{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem}
.hform__who{margin-left:auto;flex:0 1 auto;min-width:0;max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.12rem .7rem;border:1px solid var(--hair);border-radius:var(--pill);background:rgba(220,173,90,.1);color:var(--gold-hi);font:600 .78rem/1.4 var(--f);letter-spacing:0}
@media (prefers-reduced-motion:no-preference){.hform__who{animation:who-in .45s var(--ease) backwards}@keyframes who-in{from{opacity:0;translate:8px 0}}}

/* gentle "finish your request" reminder (see tools/nudge.js): a bar that appears after the hero is scrolled away, dismissible */
.wd-nudge{position:fixed;left:50%;bottom:clamp(10px,2svh,22px);translate:-50% 140%;z-index:45;width:min(100% - 24px,880px);display:flex;align-items:center;gap:.9rem;padding:.7rem .8rem .7rem 1.1rem;border-radius:16px;border:1px solid var(--hair);background:rgba(10,17,32,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 48px -26px rgba(0,0,0,.9);opacity:0;pointer-events:none;transition:translate .45s var(--ease),opacity .3s var(--ease)}
.wd-nudge.is-on{translate:-50% 0;opacity:1;pointer-events:auto}
.wd-nudge__t{margin:0;flex:1;min-width:0;color:var(--mist);font-size:.92rem;line-height:1.45}
.wd-nudge__t b{color:var(--ivory)}
.wd-nudge .sq__link{font-size:.85rem}
.wd-nudge__b{flex:none;height:42px;padding:0 1.2rem;font-size:.95rem}
.wd-nudge__x{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--edge);background:transparent;color:var(--mist);font-size:1.3rem;line-height:1;cursor:pointer}
.wd-nudge__x:hover{color:var(--ivory);border-color:var(--hair)}
.wd-nudge__box-b{width:100%;margin:.2rem 0 .6rem}
@media (max-width:640px){.wd-nudge{flex-wrap:wrap;gap:.55rem;padding:.7rem .8rem}.wd-nudge__b{order:3;width:calc(100% - 44px)}.wd-nudge__x{order:2}.wd-nudge__t{flex:1 0 calc(100% - 44px)}}
@media (prefers-reduced-motion:reduce){.wd-nudge{transition:none}}