/* Fonts: Manrope and Inter (SIL Open Font Licence, see assets/fonts/*-OFL.txt), served from this
   site rather than Google Fonts so no visitor data goes to Google for typefaces. Variable files. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/inter-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:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/inter-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:"Manrope";font-style:normal;font-weight:600 800;font-display:swap;src:url(../fonts/manrope-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:"Manrope";font-style:normal;font-weight:600 800;font-display:swap;src:url(../fonts/manrope-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}

/* ─────────────────────────────────────────────────────────────
   Tarsyer — site stylesheet
   Tokens: warm off-white ground, ink text, Tarsyer red as the
   single accent. Red is used for action and live state only.
   ───────────────────────────────────────────────────────────── */
:root{
  --bg:#FAFAF8; --surface:#FFFFFF; --ink:#141414; --ink-2:#3A3A3A;
  --muted:#6B6B68; --faint:#6F6E69; --border:#E6E4DF; --border-2:#D9D6CF;
  --red:#E8392B; --red-dark:#C62B1F; --red-soft:#FDECEA; --red-line:rgba(232,57,43,.35);
  --green:#1DA462; --green-soft:#E6F6EC; --amber:#F5A623; --amber-soft:#FFF4DF;
  --night:#101114; --night-2:#191A1F; --night-border:#2A2B31; --night-text:#EDEDEA; --night-muted:#9A9AA3;
  --max:1180px; --gut:32px; --radius:20px; --radius-sm:12px;
  --display:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow:0 18px 50px rgba(20,20,20,.10);
  --shadow-sm:0 6px 18px rgba(20,20,20,.06);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
::selection{background:var(--red-soft)}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.1}
p{margin:0}
.h1{font-size:clamp(38px,5.6vw,66px);line-height:1.04;letter-spacing:-.04em}
.h2{font-size:clamp(30px,4vw,48px);line-height:1.1}
.h3{font-size:clamp(22px,2.4vw,28px);line-height:1.2}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--muted);line-height:1.55;max-width:600px}
.muted{color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red-dark)}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--red);border-radius:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.section{padding:88px 0}
.section.tight{padding:56px 0}
.section.dark{background:var(--night);color:var(--night-text)}
.section.dark .lede,.section.dark .muted{color:var(--night-muted)}
.section.dark .eyebrow{color:#FF6A5C}
.section.dark .eyebrow::before{background:#FF6A5C}
.head{max-width:760px;margin-bottom:44px}
.head .h2{margin:14px 0 14px}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head.center .lede{margin-left:auto;margin-right:auto}
.head.center .eyebrow::before{display:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-weight:800;font-size:15px;line-height:1;padding:16px 26px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 8px 22px rgba(232,57,43,.28)}
.btn-red:hover{background:var(--red-dark)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-2)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:#f2f2f0}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-outline-light:hover{border-color:#fff}
.btn-sm{padding:11px 18px;font-size:14px}
.btn .arr{transition:transform .15s ease}
.btn:hover .arr{transform:translateX(3px)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.textlink{font-family:var(--display);font-weight:800;font-size:15px;display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.textlink:hover{color:var(--red)}
.textlink .arr{transition:transform .15s ease}
.textlink:hover .arr{transform:translateX(3px)}

/* Header */
.header{position:sticky;top:0;z-index:100;background:rgba(250,250,248,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav{max-width:var(--max);margin:0 auto;padding:0 var(--gut);height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.04em;color:var(--ink)}
.logo img{width:36px;height:auto}
.logo span em{font-style:normal;color:var(--red)}
.nav-links{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.nav-links>li{position:relative}
.nav-links a,.nav-links button{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:999px;font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--ink-2);background:none;border:0;cursor:pointer;transition:background .15s ease,color .15s ease}
.nav-links a:hover,.nav-links button:hover,.nav-links a.here{background:#EFEEEA;color:var(--ink)}
.nav-links .car{width:10px;height:10px;transition:transform .2s ease}
.has-menu.open .car{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 10px);left:0;min-width:300px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:8px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .18s ease;z-index:20}
.has-menu.open .menu{opacity:1;visibility:visible;transform:none}
.menu a{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;font-weight:600;color:var(--ink)}
.menu a:hover{background:#F3F2EE}
.menu .mi{width:34px;height:34px;border-radius:10px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;flex:0 0 34px}
.menu .mi svg{width:18px;height:18px}
.menu b{display:block;font-size:14px}
.menu span{display:block;font-size:12.5px;color:var(--muted);font-weight:400;line-height:1.35}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;background:none;border:1px solid var(--border-2);border-radius:10px;padding:8px 10px;cursor:pointer}
.nav-toggle svg{width:20px;height:20px;display:block}
.mobile-nav{display:none;border-top:1px solid var(--border);background:var(--surface)}
.mobile-nav.open{display:block}
.mobile-nav .in{max-width:var(--max);margin:0 auto;padding:10px var(--gut) 22px}
.mobile-nav a{display:block;padding:12px 0;border-bottom:1px solid var(--border);font-family:var(--display);font-weight:700;font-size:16px}
.mobile-nav .sub a{padding-left:16px;font-weight:600;font-size:15px;color:var(--ink-2)}
.mobile-nav .btn{margin-top:16px;width:100%}

/* Hero */
.hero{padding:72px 0 40px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 80% 20%,rgba(232,57,43,.08),transparent 70%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;position:relative}
.hero .h1{margin:20px 0 20px}
.hero .h1 em{font-style:normal;color:var(--red)}
.hero .lede{margin-bottom:30px}
.hero-trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;padding-top:26px;border-top:1px solid var(--border)}
.hero-trust div{font-size:13.5px;color:var(--muted)}
.hero-trust b{display:block;font-family:var(--display);font-size:22px;letter-spacing:-.03em;color:var(--ink);line-height:1.1}

/* Hero visual: layered screenshots */
.hero-visual{position:relative;min-height:520px}
.hv-main{position:absolute;right:0;top:36px;width:86%;z-index:1;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);background:#111}
.hv-main img{width:100%}
.hv-phone{position:absolute;left:0;bottom:0;width:33%;max-width:200px;z-index:2;border-radius:26px;overflow:hidden;box-shadow:0 24px 60px rgba(20,20,20,.22);border:6px solid #111;background:#111;transform:rotate(-3deg)}
.hv-phone img{width:100%}
.hv-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px 14px;box-shadow:var(--shadow-sm);font-size:13px;font-weight:600}
.hv-chip .dot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.hv-chip.live{top:0;right:4%;animation:float 6s ease-in-out infinite}
.hv-chip.alert{right:-2%;bottom:16%;animation:float 7s ease-in-out infinite reverse}
.hv-chip.alert .dot{background:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
.hv-chip small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Client strip */
.clients{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg);padding:30px 0}
.clients .lbl{display:block;margin-bottom:16px;text-align:center;font-size:13px;color:var(--muted)}
.logo-ticker{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-track{display:flex;gap:14px;width:max-content;animation:logoslide 60s linear infinite}
.logo-ticker:hover .logo-track{animation-play-state:paused}
@keyframes logoslide{to{transform:translateX(-50%)}}
.logo-track span{display:grid;place-items:center;flex:0 0 auto;height:66px;width:158px;
  border:1px solid var(--border);border-radius:14px;background:var(--surface)}
/* Each logo carries its own tuned height as --h, so one rule scales them all per breakpoint. */
.logo-track img{height:var(--h);max-width:112px;width:auto;filter:grayscale(1);opacity:.68;
  transition:filter .25s ease,opacity .25s ease}
.logo-track span:hover img{filter:none;opacity:1}
/* No animation means the later logos would be unreachable, so allow a manual swipe. */
@media(prefers-reduced-motion:reduce){
  .logo-track{animation:none}
  .logo-ticker{overflow-x:auto;scrollbar-width:none}
  .logo-ticker::-webkit-scrollbar{display:none}
}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px}
.stat b{display:block;font-family:var(--display);font-size:clamp(34px,4vw,46px);letter-spacing:-.04em;line-height:1;color:var(--ink)}
.stat b em{font-style:normal;color:var(--red)}
.stat span{display:block;margin-top:8px;font-size:14px;color:var(--muted)}

/* Feature cards (image-led) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--border-2)}
.card .pic{aspect-ratio:16/10;background:#EFEEEA;overflow:hidden;border-bottom:1px solid var(--border);position:relative}
.card .pic img{width:100%;height:100%;object-fit:cover;object-position:top}
.card .pic.contain img{object-fit:contain;padding:16px;background:#F3F2EE}
.card .body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-size:20px}
.card p{color:var(--muted);font-size:15px}
.card .textlink{margin-top:auto;padding-top:8px}
.card .tag{position:absolute;top:12px;left:12px;background:rgba(20,20,20,.8);color:#fff;font-family:var(--display);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;backdrop-filter:blur(6px)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.step .pic{aspect-ratio:16/9.3;overflow:hidden;border-bottom:1px solid var(--border);background:#111}
.step .pic img{width:100%;height:100%;object-fit:cover;object-position:top}
.step .body{padding:20px 22px 24px}
.step .num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font-family:var(--display);font-weight:800;font-size:14px;margin-bottom:12px}
.step h3{font-size:19px;margin-bottom:6px}
.step p{color:var(--muted);font-size:14.5px}
.step-note{margin-top:22px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:15px;color:var(--muted)}
.step-note b{color:var(--ink)}

/* Pipeline diagram (SVG) */
.diagram{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;overflow:hidden}
.diagram svg{width:100%;height:auto;display:block}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.two-col.wide-media{grid-template-columns:.9fr 1.1fr}
.ticks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.ticks li b{display:block;font-family:var(--display);font-size:16px}
.ticks li span{color:var(--muted);font-size:14.5px}
.tick{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;margin-top:1px}
.tick svg{width:14px;height:14px}
.tick.x{background:var(--red-soft);color:var(--red)}
.dark .ticks li span{color:var(--night-muted)}

/* Industry tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tile{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3.1;background:#111;color:#fff;display:flex;align-items:flex-end;isolation:isolate;transition:transform .2s ease,box-shadow .2s ease}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s ease}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.78) 100%)}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tile:hover img{transform:scale(1.04)}
.tile .in{padding:22px}
.tile h3{font-size:24px;color:#fff;margin-bottom:6px}
.tile p{font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.45}
.tile .know{margin-top:12px;display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:800;font-size:13px;color:#fff;background:rgba(255,255,255,.14);padding:7px 12px;border-radius:999px;backdrop-filter:blur(6px)}
.tile.span2{grid-column:span 2;aspect-ratio:auto;min-height:300px}
.tile.solid{background:linear-gradient(160deg,#1B1C22,#2C2E38)}
.tile.solid::after{display:none}
.tile.solid .in{padding:26px}
.tile .icon{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.12);display:grid;place-items:center;margin-bottom:auto}
.tile .icon svg{width:22px;height:22px}
.tile.solid .in{display:flex;flex-direction:column;height:100%;min-height:100%}

/* Compare */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cmp{border-radius:var(--radius);padding:28px;border:1px solid var(--border);background:var(--surface)}
.cmp.win{border-color:var(--red-line);background:linear-gradient(180deg,#fff,#FFF7F6)}
.cmp h3{font-size:19px;margin-bottom:4px}
.cmp .sub{font-size:13.5px;color:var(--muted)}
.cmp ul{list-style:none;margin:18px 0 0;padding:0}
.cmp li{display:flex;gap:10px;padding:11px 0;border-top:1px solid var(--border);font-size:14.5px;color:var(--ink-2)}
.cmp li:first-child{border-top:0}

/* Trust pipeline */
.pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.pipe div{padding:24px 22px;position:relative}
.pipe div+div{border-left:1px solid var(--border)}
.pipe div+div::before{content:"";position:absolute;left:-7px;top:50%;width:12px;height:12px;background:var(--surface);border-right:1px solid var(--border);border-top:1px solid var(--border);transform:translateY(-50%) rotate(45deg)}
.pipe .k{font-family:var(--display);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red-dark)}
.pipe h3{font-family:var(--display);font-size:17px;margin:8px 0 6px}
.pipe p{font-size:13.5px;color:var(--muted)}

/* Media shots */
.shot{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm)}
.shot img{width:100%}
.shot.dark{border-color:var(--night-border);background:#111}
.shot-cap{margin-top:12px;font-size:13.5px;color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.gallery.three{grid-template-columns:repeat(3,1fr)}
.gallery figure{margin:0}
.gallery .shot{aspect-ratio:16/10}
.gallery .shot img{height:100%;object-fit:cover;object-position:top}
.gallery figcaption{margin-top:10px;font-size:13.5px;color:var(--muted)}
.gallery figcaption b{color:var(--ink);font-family:var(--display)}
.dark .gallery figcaption{color:var(--night-muted)}
.dark .gallery figcaption b{color:#fff}
.dark .shot{border-color:var(--night-border)}

/* Checks grid (industry pages) */
.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.checkgroup{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.checkgroup h3{font-size:17px;display:flex;align-items:center;gap:10px;margin-bottom:12px}
.checkgroup h3 .ic{width:32px;height:32px;border-radius:9px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;flex:0 0 32px}
.checkgroup h3 .ic svg{width:17px;height:17px}
.checkgroup ul{list-style:none;margin:0;padding:0}
.checkgroup li{padding:9px 0;border-top:1px solid var(--border);font-size:14.5px;display:flex;gap:10px;align-items:flex-start}
.checkgroup li::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--red);margin-top:9px}

/* Timeline */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tl{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px}
.tl .day{font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red-dark)}
.tl h3{font-size:22px;margin:10px 0 6px}
.tl p{color:var(--muted);font-size:14.5px}
.dark .tl{background:var(--night-2);border-color:var(--night-border)}
.dark .tl h3{color:#fff}

/* FAQ */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--border)}
.qa{border-bottom:1px solid var(--border)}
.qa button{width:100%;background:none;border:0;padding:20px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;text-align:left;cursor:pointer;font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink)}
.qa .plus{flex:0 0 28px;width:28px;height:28px;border-radius:50%;border:1px solid var(--border-2);display:grid;place-items:center;transition:transform .25s ease,background .25s ease,color .25s ease}
.qa .plus svg{width:12px;height:12px}
.qa.on .plus{transform:rotate(45deg);background:var(--red);border-color:var(--red);color:#fff}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .3s ease}
.qa .ans p{padding:0 0 20px;color:var(--muted);font-size:15px;max-width:720px}

/* CTA band */
.cta-band{background:var(--night);color:#fff;border-radius:28px;padding:56px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(232,57,43,.45),transparent 65%)}
.cta-band h2{color:#fff;font-size:clamp(28px,3.6vw,42px);margin-bottom:12px}
.cta-band p{color:var(--night-muted);font-size:16px;max-width:520px}
.cta-band .cta-row{position:relative;justify-content:flex-end}
.cta-band .ttl{font-size:13px;color:var(--night-muted);margin-top:14px;text-align:right}
.cta-band .ttl a{color:#fff;font-weight:600}

/* Footer */
.footer{border-top:1px solid var(--border);background:var(--surface);padding:56px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:32px}
.foot h2{font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:5px 0}
.foot a{font-size:14.5px;color:var(--ink-2)}
.foot a:hover{color:var(--red)}
.foot .about{font-size:14px;color:var(--muted);max-width:340px;margin-top:14px}
.foot .addr{font-size:13px;color:var(--muted);line-height:1.5;margin-top:6px}
.foot-bottom{margin-top:40px;padding-top:20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--faint)}

/* Page hero (inner pages) */
.page-hero{padding:64px 0 40px;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 85% 10%,rgba(232,57,43,.08),transparent 70%);pointer-events:none}
.page-hero .h1{margin:18px 0 18px;font-size:clamp(34px,4.8vw,58px)}
.page-hero .h1 em{font-style:normal;color:var(--red)}
.page-hero .lede{margin-bottom:26px}
.page-hero .grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative}
.page-hero .shot{transform:rotate(1deg)}
.crumb{font-size:13px;color:var(--faint);margin-bottom:6px}
.crumb a:hover{color:var(--ink)}

/* Numbers band */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 22px}
.kpi b{display:block;font-family:var(--display);font-size:30px;letter-spacing:-.04em;line-height:1;color:var(--red)}
.kpi span{display:block;margin-top:6px;font-size:13.5px;color:var(--muted)}

/* Spec table */
.spec{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.spec th,.spec td{padding:13px 18px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.spec th{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);background:#F7F6F2}
.spec tr:last-child td{border-bottom:0}
.spec td:first-child{font-weight:600}
.spec td:nth-child(2){font-family:var(--display);font-weight:800}
.spec td:nth-child(3){color:var(--muted)}
.table-wrap{overflow-x:auto}

/* Forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--border-2);border-radius:12px;padding:13px 14px;font-family:var(--body);font-size:15px;background:var(--surface);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.field textarea{min-height:120px;resize:vertical}
.form-note{font-size:13px;color:var(--muted);margin-top:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status:empty{display:none}
.form-status.good{color:var(--green);font-weight:600}
.contact-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:14px}
.contact-card h3{font-size:18px}
.contact-card .row{display:flex;gap:12px;align-items:flex-start;font-size:14.5px}
.contact-card .row .ic{width:34px;height:34px;border-radius:10px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;flex:0 0 34px}
.contact-card .row .ic svg{width:17px;height:17px}
.contact-card .row b{display:block;font-family:var(--display)}
.contact-card .row span{color:var(--muted);font-size:13.5px;line-height:1.5}
.wa{background:#25D366;color:#fff}
.wa:hover{background:#1DB859}

/* Reveal on scroll */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.hv-chip{animation:none}}

/* Responsive */
@media(max-width:1000px){
  .hero-grid,.two-col,.two-col.wide-media,.page-hero .grid{grid-template-columns:1fr;gap:36px}
  .hero-visual{min-height:0;margin-top:10px}
  .hv-main{position:relative;width:100%;top:0}
  .hv-phone{position:absolute;bottom:-20px;left:-4px;width:30%}
  .hv-chip{display:none}
  .hero-visual{padding-bottom:24px}
  .cards,.cards.four,.steps,.tiles,.checks,.timeline{grid-template-columns:repeat(2,1fr)}
  .tile.span2{grid-column:span 2}
  .stats,.kpis,.pipe{grid-template-columns:repeat(2,1fr)}
  .pipe div:nth-child(3){border-left:0}
  .pipe div:nth-child(-n+2){border-bottom:1px solid var(--border)}
  .pipe div+div::before{display:none}
  .gallery.three{grid-template-columns:repeat(2,1fr)}
  .cta-band{grid-template-columns:1fr;padding:40px}
  .cta-band .cta-row{justify-content:flex-start}.cta-band .ttl{text-align:left}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
  .nav-links,.nav-cta .btn{display:none}
  .nav-toggle{display:block}
}
@media(max-width:640px){
  :root{--gut:20px}
  /* Smaller tiles so more than two fit, and the strip runs edge to edge
     instead of being clipped by the wrap padding. */
  .clients .wrap{padding:0}
  .clients .lbl{padding:0 var(--gut)}
  .logo-ticker{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .logo-track{gap:10px;animation-duration:42s}
  .logo-track span{width:118px;height:56px;border-radius:12px}
  .logo-track img{height:calc(var(--h) * .78);max-width:82px}
  .section{padding:64px 0}
  .hero{padding:48px 0 28px}
  .cards,.cards.two,.cards.four,.steps,.tiles,.checks,.timeline,.compare,.gallery,.gallery.three,.form-grid{grid-template-columns:1fr}
  .tile.span2{grid-column:auto;min-height:0;aspect-ratio:4/3.1}
  .stats,.kpis,.pipe{grid-template-columns:1fr}
  .pipe div+div{border-left:0;border-top:1px solid var(--border)}
  .hv-phone{width:40%}
  .hero-trust{gap:16px}
  .foot-grid{grid-template-columns:1fr}
  .cta-band{padding:32px 24px;border-radius:20px}
  .btn{padding:15px 22px}
  .cta-row .btn{width:100%}
}

/* ═══ Answer block (extractable definition for search and answer engines) ═══ */
.answer{border:1px solid var(--border);border-left:3px solid var(--red);border-radius:0 var(--radius) var(--radius) 0;
  background:var(--surface);padding:26px 30px;max-width:820px}
.answer .q{font-family:var(--display);font-size:17px;font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
.answer p{color:var(--muted);font-size:16px;line-height:1.6;margin:0}

/* ═══ Google Maps embed ═══ */
.mapwrap{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#EFEEEA;aspect-ratio:16/10;margin:2px 0 4px}
.mapwrap iframe{width:100%;height:100%;border:0;display:block}
.maplink{font-size:14px;margin-bottom:6px}

/* ═══ Industry cross-links ═══ */
.crossnav{font-size:15px;color:var(--muted);max-width:760px;line-height:1.6}
.crossnav a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--border-2)}
.crossnav a:hover{color:var(--red);border-color:var(--red)}

/* Three-column comparison: the last column is ours, so it carries the emphasis. */
.spec.cmp-table td:nth-child(2){font-family:var(--body);font-weight:400;color:var(--muted)}
.spec.cmp-table td:nth-child(3){font-family:var(--display);font-weight:800;color:var(--ink)}
.spec.cmp-table th:nth-child(3){color:var(--red-dark)}

/* ═══ Customer stories ═══ */
.clients-more{text-align:center;margin-top:18px}
.story{padding:64px 0;border-top:1px solid var(--border)}
.story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.story-grid.flip > figure{order:-1}
.story .h2{margin:12px 0 20px}
.story-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 8px;padding:16px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.story-facts b{display:block;font-family:var(--display);font-size:24px;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.story-facts span{display:block;margin-top:4px;font-size:12.5px;color:var(--muted);line-height:1.35}
.story h3{font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--red-dark);margin:22px 0 6px}
.story p{color:var(--ink-2);font-size:15.5px;max-width:560px}
.story figure .shot{position:sticky;top:96px}
.story figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chips span{font-size:12.5px;padding:6px 11px;border-radius:999px;border:1px solid var(--border-2);
  background:var(--surface);color:var(--ink-2)}
@media(max-width:1000px){
  .story-grid{grid-template-columns:1fr;gap:28px}
  .story-grid.flip > figure{order:0}
  .story figure .shot{position:static}
}
@media(max-width:640px){
  .story{padding:48px 0}
  .story-facts b{font-size:20px}
}

/* Steel story: a drawn diagram instead of a screenshot, and a divider before in-progress work */
.story figure .diagram{position:sticky;top:96px;padding:22px}
.story figure .diagram svg{width:100%;height:auto;display:block}
.rollout{padding:72px 0 8px;border-top:1px solid var(--border);background:var(--bg)}
.rollout + .story{border-top:0}
@media(max-width:1000px){ .story figure .diagram{position:static} }
@media(max-width:640px){ .story figure .diagram{padding:12px} }

/* ═══ Awards ═══ */
.awards-line{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
  font-size:13px;color:var(--muted)}
.awards-line li{display:inline-flex;align-items:center;gap:7px}
.awards-line b{font-family:var(--display);font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--red-dark)}
.award-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:900px}
.award{display:flex;flex-direction:column;gap:6px;padding:24px 26px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);transition:border-color .2s ease,transform .2s ease}
.award:hover{border-color:var(--border-2);transform:translateY(-2px)}
.award-year{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.06em;color:var(--red-dark)}
.award h3{font-size:20px;letter-spacing:-.02em}
.award p{color:var(--muted);font-size:14.5px;line-height:1.55}
.award-src{margin-top:auto;padding-top:8px;font-size:12.5px;color:var(--faint)}
@media(max-width:640px){ .award-grid{grid-template-columns:1fr} }

/* ═══ Privacy: consent notice, click-to-load map, footer links, notice page ═══ */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:760px;margin:0 auto;
  background:var(--surface);border:1px solid var(--border-2);border-radius:16px;box-shadow:var(--shadow);
  padding:18px 20px;display:flex;gap:18px;align-items:center}
.consent[hidden]{display:none}
.consent p{font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.consent p b{font-family:var(--display);color:var(--ink)}
.consent a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.consent .consent-now{font-size:12.5px;color:var(--muted);margin-top:4px}
.consent .consent-now:empty{display:none}
.consent-actions{display:flex;gap:8px;flex:0 0 auto}
@media(max-width:640px){
  .consent{flex-direction:column;align-items:stretch;left:10px;right:10px;bottom:10px}
  .consent-actions .btn{flex:1}
}
.map-defer{display:grid;place-items:center}
.map-ph{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:16px}
.map-ph .ic{width:38px;height:38px;border-radius:10px;background:var(--red-soft);color:var(--red);display:grid;place-items:center}
.map-ph .ic svg{width:18px;height:18px}
.map-ph p{font-size:12.5px;color:var(--muted);max-width:240px}
.foot-legal{display:inline-flex;gap:18px;flex-wrap:wrap}
.foot-legal a,.foot-legal button{font-size:12.5px;color:var(--muted)}
.foot-legal button,.linklike{background:none;border:0;padding:0;cursor:pointer;font:inherit}
.foot-legal a:hover,.foot-legal button:hover{color:var(--red)}
.form-note a.u,.legal a,.linklike{color:var(--ink);text-decoration:underline;text-decoration-color:var(--border-2);text-underline-offset:3px}
.form-note a.u:hover,.legal a:hover,.linklike:hover{text-decoration-color:var(--red)}
.legal{max-width:780px}
.legal h2{font-size:24px;letter-spacing:-.02em;margin:44px 0 12px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--ink-2);font-size:16px;line-height:1.65}
.legal p + p{margin-top:12px}
.legal ul{margin:10px 0 0;padding-left:20px}
.legal li{margin:6px 0}
.legal-date{font-size:13px;color:var(--faint);margin-top:18px}
.ptable{width:100%;border-collapse:separate;border-spacing:0;margin:14px 0 16px;font-size:14.5px;background:var(--surface);
  border:1px solid var(--border);border-radius:14px;overflow:hidden}
.ptable th{text-align:left;font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);background:#F7F6F2;padding:12px 16px}
.ptable td{padding:14px 16px;vertical-align:top;border-top:1px solid var(--border);color:var(--ink-2);line-height:1.55}
.ptable td b{color:var(--ink)}
.ptable td:first-child{min-width:210px}

/* WebP images arrive wrapped in <picture>; display:contents keeps every existing img rule and layout as it was. */
picture{display:contents}
/* How it works: the building blocks under the hero */
.chips.blocks{margin-top:22px}
.blocks-note{font-size:14.5px;color:var(--muted);margin:14px 0 26px;max-width:560px}
/* Nav labels stay on one line; below 1100px the six links no longer fit beside the logo and CTA,
   so the menu button takes over (it used to switch only at 640px, and labels wrapped in between). */
.nav-links a,.nav-links button{white-space:nowrap}
@media(max-width:1100px){.nav-links,.nav-cta .btn{display:none}.nav-toggle{display:block}}

/* ═══ Blog ═══ */
.post-h1{font-size:clamp(34px,4.6vw,54px)}
.post-meta{font-size:13.5px;color:var(--muted);margin-top:18px}
.post{max-width:720px}
.post > p,.post li{font-size:17px;line-height:1.7;color:var(--ink-2)}
.post > p + p{margin-top:14px}
.post h2{font-size:clamp(22px,2.4vw,27px);letter-spacing:-.02em;margin:48px 0 14px}
.post ul,.post ol{margin:14px 0 0;padding-left:22px}
.post li{margin:8px 0}
.post figure{margin:34px 0}
.post .fig{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;overflow-x:auto}
.post .fig svg{width:100%;min-width:520px;height:auto;display:block}
.post figure img{border-radius:var(--radius);border:1px solid var(--border)}
.post figcaption{margin-top:10px;font-size:13.5px;color:var(--muted)}
.post .answer{margin:0 0 28px}
.post-list{display:grid;gap:14px;max-width:820px}
.post-row{display:block;padding:24px 26px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  transition:border-color .2s ease,transform .2s ease}
.post-row:hover{border-color:var(--border-2);transform:translateY(-2px)}
.post-row .k{font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red-dark)}
.post-row h2{font-size:clamp(20px,2.2vw,24px);letter-spacing:-.02em;margin:8px 0}
.post-row p{color:var(--muted);font-size:15.5px;line-height:1.55}
.post-row .meta{display:block;font-size:13px;color:var(--muted);margin-top:10px}
.post figure.narrow img{max-width:340px;margin:0 auto}
.post figure.narrow figcaption{text-align:center}
/* Customer stories: when the story stacks to one column, keep the screenshot at a readable size
   instead of stretching it across the whole page. */
@media(max-width:1000px){.story figure{max-width:640px}}
/* More room between customer stories */
.story{padding:96px 0}
@media(max-width:640px){.story{padding:64px 0}}