/* =========================================================
   Zentory — shared stylesheet
   tokens · base · header · buttons · heroes · sections
   · products · services · about · contact · cta · footer
   · motion · responsive
   ========================================================= */

/* ---------- Tokens ----------
   Brand: deep navy + brushed silver (from the Zentory logo).
   Light sections use the tokens below; any element with .theme-dark
   (header, heroes, CTA, footer) swaps them for the navy set, and
   .theme-light swaps back (e.g. the white ledger card on the navy hero). */
:root{
  --navy-900: #050A1E;
  --navy-800: #0A1230;
  --navy-glow: #22326A;
  --silver: #C9CED6;
  --silver-grad: linear-gradient(135deg, #EEF0F4 0%, #C2C8D2 38%, #F7F8FA 62%, #B7BEC9 100%);
  --ink-on-dark: #B4BCCB;
  --line-dark: rgba(255,255,255,.16);
  --error: #9A3A2A;

  --radius: 3px;
  --radius-lg: 6px;
  --wrap: 1180px;
  --gutter: 32px;
  --header-h: 76px;
  --section-y: 96px;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Light theme (default) */
:root, .theme-light{
  --bg: #F5F6F8;
  --bg-alt: #ECEEF2;
  --panel: #FFFFFF;
  --ink: #0E1630;
  --ink-soft: #48526B;
  --ink-faint: #5F6980;
  --accent: #7D8BA8;        /* steel: decoration + large type only */
  --accent-deep: #2F4470;   /* steel-blue small text */
  --line: #DADFE7;
  --line-soft: #E7EAF0;
  --grid-line: rgba(14,22,48,.05);
}
.theme-light{ color:var(--ink); }

/* Navy theme — header, heroes, CTA band, footer */
.theme-dark{
  --bg: var(--navy-900);
  --bg-alt: var(--navy-800);
  --panel: rgba(255,255,255,.04);
  --ink: #F4F6FA;
  --ink-soft: var(--ink-on-dark);
  --ink-faint: #8D97AB;
  --accent: #9AA4B6;
  --accent-deep: var(--silver);
  --line: rgba(255,255,255,.13);
  --line-soft: rgba(255,255,255,.07);
  --grid-line: rgba(255,255,255,.045);
  color:var(--ink);
  background:
    radial-gradient(ellipse 55% 70% at 16% 22%, rgba(34,50,106,.62), transparent 70%),
    radial-gradient(ellipse 45% 55% at 92% 100%, rgba(34,50,106,.32), transparent 70%),
    var(--navy-900);
}

/* Brushed-silver text, echoing the logo's metal Z */
.silver-text{
  background:var(--silver-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- Base ---------- */
*, *::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(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1, h2, h3, h4, .serif{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--ink);
}
p{ margin:0; }
ul, ol{ margin:0; padding:0; list-style:none; }
dl, dd{ margin:0; }
a{ color:inherit; text-decoration:none; }
img, svg{ display:block; max-width:100%; }
[id]{ scroll-margin-top:calc(var(--header-h) + 24px); }
::selection{ background:#2F4470; color:#fff; }

a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent-deep);
  outline-offset:3px;
}

.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:100;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:var(--radius);
  font-size:14px;
}
.skip-link:focus{ top:12px; }

/* Ledger-paper grid, used as a quiet backdrop */
.grid-motif{ position:relative; isolation:isolate; overflow:hidden; }
.grid-motif::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(110deg, transparent 35%, #000 80%);
          mask-image:linear-gradient(110deg, transparent 35%, #000 80%);
}
/* Large, faint silver Z from the logo behind navy heroes */
.z-watermark::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  right:-4%; top:50%;
  width:min(46vw, 560px); aspect-ratio:322 / 360;
  transform:translateY(-50%);
  background:url("../assets/z-mark.png") center / contain no-repeat;
  opacity:.07;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(5,10,30,.97);
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .3s ease;
}
.site-header.is-scrolled{ box-shadow:0 12px 32px -20px rgba(3,6,20,.7); }
/* Desktop: brand | links (centred) | CTA — nav-menu dissolves into the grid */
.nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center; gap:24px;
  height:var(--header-h);
}
.brand{ justify-self:start; display:block; }
.brand img{ height:42px; width:auto; }
.nav-menu{ display:contents; }
.nav-links{ display:flex; gap:36px; }
.nav-cta{ justify-self:end; }
.nav-links a{
  position:relative; display:block;
  font-size:14.5px; color:var(--ink-soft);
  padding-block:6px;
  transition:color .15s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--ink); }
/* Silver underline draws in from the left on hover; stays for the current page */
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.menu-toggle{
  display:none;
  width:44px; height:44px; margin-right:-10px;
  background:none; border:none; cursor:pointer;
  padding:11px;
}
.menu-toggle span{
  display:block; width:22px; height:1.5px; background:var(--ink);
  transition:transform .2s ease, opacity .2s ease;
}
.menu-toggle span + span{ margin-top:6px; }
.nav-open .menu-toggle span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-open .menu-toggle span:nth-child(2){ opacity:0; }
.nav-open .menu-toggle span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ---------- Buttons & links ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 22px;
  border-radius:var(--radius);
  border:1px solid transparent;
  font-family:var(--sans); font-size:14.5px; font-weight:500; line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .2s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn .arrow{ transition:transform .15s ease; }
.btn:hover .arrow{ transform:translateX(3px); }
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ background:var(--accent-deep); }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--ink); }
/* Brushed-silver button: the main call to action on navy */
.btn-silver,
.theme-dark .btn-primary{
  background:var(--silver-grad);
  background-size:160% 100%; background-position:0% 50%;
  color:var(--navy-900);
  border-color:rgba(255,255,255,.35);
  box-shadow:0 8px 24px -12px rgba(201,206,214,.45);
  transition:background-position .5s ease, border-color .15s ease, transform .2s ease, box-shadow .3s ease;
}
.btn-silver:hover,
.theme-dark .btn-primary:hover{
  background:var(--silver-grad);
  background-size:160% 100%; background-position:100% 50%;
  box-shadow:0 12px 28px -12px rgba(201,206,214,.6);
}
.btn-ghost-light{ background:transparent; border-color:var(--line-dark); color:#fff; }
.btn-ghost-light:hover{ border-color:#fff; }
.btn[disabled]{ opacity:.6; cursor:progress; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14.5px; font-weight:500; color:var(--ink);
  padding-bottom:3px;
  border-bottom:1px solid var(--line);
  transition:color .15s ease, border-color .15s ease;
}
.link-arrow .arrow{ transition:transform .15s ease; }
.link-arrow:hover{ color:var(--accent-deep); border-color:var(--accent); }
.link-arrow:hover .arrow{ transform:translateX(3px); }

/* ---------- Shared type bits ---------- */
.kicker{
  font-size:14px; font-weight:500;
  color:var(--accent-deep);
  margin-bottom:22px;
}

.eyebrow{
  display:flex; gap:10px; align-items:center;
  font-size:13px; color:var(--ink-faint);
  margin-bottom:12px;
  font-variant-numeric:tabular-nums;
}
.eyebrow .num{ color:var(--accent-deep); font-weight:500; }

.status{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:500; color:var(--accent-deep);
}
.status::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--accent); flex:none;
}
.status.is-live::before{ animation:pulse 2.4s ease-out infinite; }
.status.is-dev::before{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--accent); }

.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{
  font-size:12.5px; color:var(--ink-soft);
  background:var(--panel);
  border:1px solid var(--line);
  padding:5px 11px; border-radius:20px;
}

/* ---------- Home hero ---------- */
.hero{
  padding-block:96px 88px;
  border-bottom:1px solid var(--line);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:center;
}
.hero h1{
  font-size:clamp(34px, 4.4vw, 54px);
  max-width:15ch;
}
.hero-sub{
  margin-top:24px;
  font-size:18px; line-height:1.65;
  color:var(--ink-soft);
  max-width:46ch;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }

/* Ledger card (hero + sample records) */
.ledger{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px;
  box-shadow:0 1px 0 rgba(14,22,48,.03), 0 28px 56px -36px rgba(14,22,48,.28);
}
/* On navy: a lifted white card, lit like the logo artwork */
.theme-dark .ledger{
  border-color:rgba(255,255,255,.5);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06), 0 0 120px -40px rgba(80,105,190,.45);
}
.ledger-head{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.ledger-title{ font-family:var(--serif); font-size:16px; }
.ledger-tag{
  font-size:12px; color:var(--ink-faint);
  border:1px solid var(--line); border-radius:20px;
  padding:2px 10px;
}
.ledger-cols{
  display:flex; justify-content:space-between;
  padding-block:10px 4px;
  font-size:12px; color:var(--ink-faint);
}
.ledger-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px; align-items:center;
  padding-block:13px;
  border-bottom:1px solid var(--line-soft);
}
.ledger-row:last-child{ border-bottom:none; }
.swatch{ width:8px; height:8px; border-radius:50%; background:var(--accent); }
.swatch.s-reserved{ background:var(--ink); }
.swatch.s-transit{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--accent); }
.swatch.s-progress{ background:linear-gradient(90deg, var(--accent) 50%, var(--line) 50%); }
.item-name{ display:block; font-size:14px; line-height:1.35; color:var(--ink); }
.item-meta{ display:block; font-size:12.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.item-qty{
  text-align:right; font-size:14px; line-height:1.35;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.item-qty .item-meta{ margin-top:1px; }
.ledger-foot{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin-top:14px; padding-top:16px;
  border-top:3px double var(--line);
  font-size:13.5px; color:var(--ink-soft);
}
.ledger-foot .n{
  font-family:var(--serif); font-size:20px; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.record-list > div{
  display:flex; justify-content:space-between; gap:16px;
  padding-block:12px;
  border-bottom:1px solid var(--line-soft);
  font-size:14px;
}
.record-list > div:last-child{ border-bottom:none; }
.record-list dt{ color:var(--ink-faint); }
.record-list dd{ color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }

/* At-a-glance strip */
.glance-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
}
.glance-item{
  padding:28px 24px;
  border-left:1px solid var(--line);
}
.glance-item:first-child{ border-left:none; padding-left:0; }
.glance-item .k{ display:block; font-size:13px; color:var(--ink-faint); margin-bottom:4px; }
.glance-item .v{ display:block; font-family:var(--serif); font-size:18px; color:var(--ink); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  padding-block:88px 72px;
  border-bottom:1px solid var(--line);
}
.page-hero-grid{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:64px;
  align-items:end;
}
.page-hero h1{
  font-size:clamp(34px, 4.6vw, 56px);
  max-width:17ch;
}
.page-hero .lead{
  margin-top:22px;
  font-size:18px; line-height:1.65;
  color:var(--ink-soft);
  max-width:54ch;
}

.toc{ border-top:1px solid var(--ink); }
.toc-title{
  display:block;
  font-size:13px; color:var(--ink-faint);
  padding-block:12px;
  border-bottom:1px solid var(--line);
}
.toc a{
  display:grid;
  grid-template-columns:34px 1fr auto;
  gap:8px; align-items:baseline;
  padding-block:13px;
  border-bottom:1px solid var(--line);
  font-size:15px; color:var(--ink);
  transition:color .15s ease;
}
.toc .num{ font-size:13px; color:var(--accent-deep); font-variant-numeric:tabular-nums; }
.toc .go{ color:var(--ink-faint); transition:transform .15s ease; }
.toc a:hover{ color:var(--accent-deep); }
.toc a:hover .go{ transform:translateY(2px); }

/* ---------- Sections ---------- */
.section{ padding-block:var(--section-y); }
.section-alt{
  background:var(--bg-alt);
  border-block:1px solid var(--line);
}
.section-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px; align-items:end;
  margin-bottom:56px;
  padding-bottom:28px;
  border-bottom:1px solid var(--line);
}
.section-head h2{ font-size:clamp(28px, 3.2vw, 40px); max-width:18ch; }
.section-head .desc{ color:var(--ink-soft); max-width:44ch; }
.section-foot{ margin-top:40px; display:flex; justify-content:flex-end; }

/* Hairline cell grid — services, features, principles.
   Each cell draws its own border (overlapping by 1px) so cells can
   animate in one by one without the grid lines showing through. */
.cells{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  padding:1px 0 0 1px;
}
.cells-3{ grid-template-columns:repeat(3, 1fr); }
.cell{
  background:var(--panel);
  border:1px solid var(--line);
  margin:-1px 0 0 -1px;
  padding:36px;
  transition:background-color .25s ease;
}
.cells .cell:hover{ background:#fff; }
.cell-label{
  display:block;
  font-size:13px; font-weight:500; color:var(--accent-deep);
  margin-bottom:16px;
}
.cell h3{ font-size:19px; margin-bottom:12px; }
.cell p{ color:var(--ink-soft); font-size:15px; }
.section-alt .cell{ background:var(--bg); }

/* ---------- Products ---------- */
.product-cards{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
}
.product-card{
  display:flex; flex-direction:column; gap:18px;
  background:var(--panel);
  border:1px solid var(--line);
  border-top:2px solid var(--accent);
  border-radius:var(--radius-lg);
  padding:36px;
  transition:border-color .25s ease, box-shadow .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.product-card.is-dev{ border-top-color:var(--ink); }
.product-card:hover{ transform:translateY(-4px); box-shadow:0 28px 48px -32px rgba(14,22,48,.38); }
.product-card-top{ display:flex; justify-content:space-between; align-items:center; }
.product-card-top .idx{ font-size:13px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.product-card h3{ font-size:clamp(22px, 2.2vw, 26px); }
.product-card p{ color:var(--ink-soft); font-size:15.5px; }
.product-card .link-arrow{ margin-top:auto; align-self:flex-start; }

.product-intro{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:64px; align-items:start;
  margin-bottom:64px;
}
.product-intro h2{ font-size:clamp(30px, 3.6vw, 44px); margin-bottom:22px; }
.product-intro .copy p{ color:var(--ink-soft); font-size:16.5px; max-width:54ch; }
.product-intro .copy p + p{ margin-top:16px; }
.product-intro .hero-actions{ margin-top:32px; }

.note{
  display:grid;
  grid-template-columns:1fr auto;
  gap:32px; align-items:center;
  margin-top:40px;
  padding:28px 32px;
  border:1px dashed var(--accent);
  border-radius:var(--radius-lg);
}
.note p{ color:var(--ink-soft); max-width:62ch; }
.note strong{ color:var(--ink); font-weight:500; }
.note .link-arrow{ justify-self:start; }

/* Core connection diagram */
.flow-node{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:16px 18px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.flow-k{ font-family:var(--serif); font-size:17px; white-space:nowrap; }
.flow-v{ font-size:13px; color:var(--ink-faint); text-align:right; }
.flow-core{ background:var(--ink); border-color:var(--ink); }
.flow-core .flow-k{ color:#fff; }
.flow-core .flow-v{ color:var(--ink-on-dark); }
.flow-link{
  display:flex; align-items:center; gap:10px;
  height:48px;
  margin-left:26px; padding-left:14px;
  border-left:1px dashed var(--accent);
  font-size:12.5px; color:var(--accent-deep);
}
.flow-wrap{ padding-top:18px; }

/* Comparison table */
.compare{ width:100%; border-collapse:collapse; font-size:15px; }
.compare th, .compare td{
  text-align:left; vertical-align:top;
  padding:18px 20px 18px 0;
  border-bottom:1px solid var(--line);
}
.compare thead th{
  font-family:var(--serif); font-size:20px; font-weight:500;
  border-bottom:1px solid var(--ink);
  padding-bottom:16px;
}
.compare thead .status{ display:flex; margin-top:6px; font-family:var(--sans); }
.compare tbody th{ width:22%; font-weight:500; font-size:14px; color:var(--ink-faint); }
.compare td{ width:39%; color:var(--ink); }
.compare .muted{ color:var(--ink-faint); }

/* ---------- Services ---------- */
.service-list{ border-top:1px solid var(--line); }
.service-row{
  display:grid;
  grid-template-columns:170px 1.1fr .9fr;
  gap:48px;
  padding-block:48px;
  border-bottom:1px solid var(--line);
}
.service-mark .n{
  display:block;
  font-family:var(--serif); font-size:36px; line-height:1;
  color:var(--accent);
  margin-bottom:10px;
}
.service-mark .lbl{ font-size:13px; font-weight:500; color:var(--accent-deep); }
.service-body h2{ font-size:clamp(23px, 2.4vw, 30px); margin-bottom:14px; }
.service-body p{ color:var(--ink-soft); max-width:50ch; }
.checklist-title{ display:block; font-size:13px; color:var(--ink-faint); margin-bottom:6px; }
.checklist li{
  position:relative;
  padding:10px 0 10px 26px;
  border-bottom:1px solid var(--line-soft);
  font-size:15px;
}
.checklist li:last-child{ border-bottom:none; }
.checklist li::before{
  content:""; position:absolute; left:2px; top:17px;
  width:10px; height:5px;
  border-left:1.5px solid var(--accent-deep);
  border-bottom:1.5px solid var(--accent-deep);
  transform:rotate(-45deg);
}

/* Numbered steps — process & timeline */
.steps{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
}
.steps-3{ grid-template-columns:repeat(3, 1fr); }
.step{
  padding:0 28px 0 24px;
  border-left:1px solid var(--line);
}
.step:first-child{ border-left:none; padding-left:0; }
.step .n{
  display:block;
  font-family:var(--serif); font-size:34px; line-height:1;
  color:var(--accent);
  margin-bottom:20px;
}
.step .status{ display:flex; width:fit-content; margin-bottom:14px; }
.step h3{ font-size:17.5px; margin-bottom:10px; }
.step p{ font-size:14.5px; color:var(--ink-soft); }

/* ---------- About ---------- */
.story-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:72px;
}
.story-grid blockquote{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(23px, 2.6vw, 30px);
  font-weight:500; line-height:1.38;
  color:var(--ink);
}
.story-grid blockquote::before{
  content:"“";
  display:block;
  font-size:72px; line-height:.6;
  color:var(--accent);
  margin-bottom:10px;
}
.story-grid cite{
  display:block; margin-top:22px;
  font-style:normal; font-size:14px; color:var(--ink-soft);
}
.story-copy p{ color:var(--ink-soft); font-size:16.5px; max-width:56ch; }
.story-copy p + p{ margin-top:18px; }
.story-copy .link-arrow{ margin-top:28px; }

.facts{ margin-top:40px; border-top:1px solid var(--ink); }
.facts > div{
  display:flex; justify-content:space-between; gap:24px;
  padding-block:15px;
  border-bottom:1px solid var(--line);
  font-size:14.5px;
}
.facts dt{ color:var(--ink-faint); flex:none; }
.facts dd{ color:var(--ink); text-align:right; }

/* ---------- Contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1.4fr .6fr;
  gap:48px; align-items:start;
}
.form-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:40px;
}
.form-card > h2{ font-size:24px; margin-bottom:8px; }
.form-card > .form-intro{ color:var(--ink-soft); font-size:15px; margin-bottom:28px; }
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.field-full{ grid-column:1 / -1; }
.field label{ font-size:13.5px; font-weight:500; color:var(--ink); }
.field .opt{ font-weight:400; color:var(--ink-faint); }
.field input, .field select, .field textarea{
  width:100%;
  font-family:var(--sans); font-size:16px; line-height:1.4;
  color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 14px;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.field select{
  -webkit-appearance:none; appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23636B7A' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:#CFCAC0; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  background-color:#fff;
  border-color:var(--accent-deep);
  box-shadow:0 0 0 3px rgba(47,68,112,.16);
}
.field input:user-invalid, .field textarea:user-invalid{ border-color:var(--error); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-foot{
  display:flex; justify-content:space-between; align-items:center; gap:16px 24px;
  flex-wrap:wrap;
  margin-top:28px; padding-top:24px;
  border-top:1px solid var(--line-soft);
}
.form-note{ font-size:13px; color:var(--ink-faint); max-width:38ch; }
.form-status{
  margin-top:20px;
  padding:13px 16px;
  border-radius:var(--radius);
  font-size:14.5px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
}
.form-status.is-ok{ border-color:var(--accent); }
.form-status.is-error{ border-color:var(--error); color:var(--error); background:#F8ECE8; }

.contact-aside{ display:flex; flex-direction:column; gap:20px; }
.aside-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px;
}
.aside-card h2{ font-size:19px; margin-bottom:10px; }
.aside-card.is-dark{ background:var(--navy-900); border-color:var(--navy-900); color:#fff; }
.aside-card.is-dark h2{ color:#fff; }
.aside-card.is-dark .contact-line{ border-color:var(--line-dark); }
.aside-card.is-dark .contact-line .k{ color:var(--ink-on-dark); }
.contact-line{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding-block:12px;
  border-bottom:1px solid var(--line-soft);
  font-size:14.5px;
}
.contact-line:last-child{ border-bottom:none; padding-bottom:0; }
.contact-line .k{ color:var(--ink-faint); }
.contact-line a{ border-bottom:1px solid var(--line-dark); transition:border-color .15s ease; }
.contact-line a:hover{ border-color:var(--silver); }
.next-steps li{
  display:grid;
  grid-template-columns:30px 1fr;
  gap:10px;
  padding-block:11px;
  border-bottom:1px solid var(--line-soft);
  font-size:14.5px; color:var(--ink-soft);
}
.next-steps li:last-child{ border-bottom:none; padding-bottom:0; }
.next-steps .n{ font-family:var(--serif); color:var(--accent-deep); font-variant-numeric:tabular-nums; }
.aside-tip{ font-size:14px; color:var(--ink-soft); padding-inline:4px; }
.aside-tip strong{ color:var(--ink); font-weight:500; }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:40px; align-items:center;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  padding:64px;
  box-shadow:0 40px 80px -50px rgba(5,10,30,.6);
}
.cta-band::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(100deg, transparent 40%, #000 90%);
          mask-image:linear-gradient(100deg, transparent 40%, #000 90%);
}
.cta-band h2{ color:#fff; font-size:clamp(26px, 3vw, 38px); max-width:18ch; }
.cta-band p{ color:var(--ink-on-dark); margin-top:16px; max-width:42ch; }
.cta-actions{ display:flex; justify-content:flex-end; flex-wrap:wrap; gap:12px; }

/* ---------- Footer ---------- */
.site-footer{ padding-block:72px 40px; }
.footer-brand .brand img{ height:46px; }
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid var(--line);
}
.footer-brand .brand{ display:inline-block; margin-bottom:14px; }
.footer-brand p{ color:var(--ink-soft); font-size:14.5px; max-width:32ch; }
.footer-title{
  font-family:var(--sans); font-size:13px; font-weight:500;
  letter-spacing:0; color:var(--ink-faint);
  margin-bottom:16px;
}
.footer-col li{ margin-bottom:11px; font-size:14.5px; color:var(--ink-soft); }
.footer-col a{ transition:color .15s ease; }
.footer-col a:hover{ color:var(--ink); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-top:24px;
  font-size:13.5px; color:var(--ink-faint);
}

/* ---------- Motion ---------- */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --slide:56px;   /* side-slide distance */
  --lift:36px;    /* slide-up distance */
}
@keyframes enter-up{ from{ opacity:0; transform:translate3d(0, var(--lift), 0); } }
@keyframes enter-right{ from{ opacity:0; transform:translate3d(var(--slide), 0, 0); } }
@keyframes enter-left{ from{ opacity:0; transform:translate3d(calc(var(--slide) * -1), 0, 0); } }
@keyframes fade-in{ from{ opacity:0; } }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(125,139,168,.55); }
  70%, 100%{ box-shadow:0 0 0 7px rgba(125,139,168,0); }
}

/* Side-slides must never cause sideways scrolling on phones */
main{ overflow-x:hidden; overflow-x:clip; }

/* Page entrance: hero content slides up line by line, the card slides in from the right */
.hero .kicker, .hero h1, .hero-sub, .hero-actions,
.page-hero .kicker, .page-hero h1, .page-hero .lead{
  animation:enter-up .9s var(--ease-out) both;
}
.hero .kicker, .page-hero .kicker{ animation-delay:.05s; }
.hero h1, .page-hero h1{ animation-delay:.14s; }
.hero-sub, .page-hero .lead{ animation-delay:.26s; }
.hero-actions{ animation-delay:.38s; }

.hero .ledger{ animation:enter-right 1s .3s var(--ease-out) both; }
.hero .ledger-row{ animation:enter-up .7s var(--ease-out) both; --lift:10px; }
.hero .ledger-row:nth-child(1){ animation-delay:.6s; }
.hero .ledger-row:nth-child(2){ animation-delay:.7s; }
.hero .ledger-row:nth-child(3){ animation-delay:.8s; }
.hero .ledger-row:nth-child(4){ animation-delay:.9s; }
.hero .ledger-foot{ animation:fade-in .6s 1.05s both; }

.glance-item{ animation:enter-up .8s var(--ease-out) both; --lift:20px; }
.glance-item:nth-child(1){ animation-delay:.5s; }
.glance-item:nth-child(2){ animation-delay:.58s; }
.glance-item:nth-child(3){ animation-delay:.66s; }
.glance-item:nth-child(4){ animation-delay:.74s; }

.page-hero .toc{ animation:enter-right 1s .3s var(--ease-out) both; }
.page-hero .toc a{ animation:enter-right .8s var(--ease-out) both; --slide:24px; }
.page-hero .toc a:nth-of-type(1){ animation-delay:.45s; }
.page-hero .toc a:nth-of-type(2){ animation-delay:.52s; }
.page-hero .toc a:nth-of-type(3){ animation-delay:.59s; }
.page-hero .toc a:nth-of-type(4){ animation-delay:.66s; }
.page-hero .toc a:nth-of-type(5){ animation-delay:.73s; }

/* Contact: the form and its fields slide in one after another on load */
.form-card{ animation:enter-up 1s .3s var(--ease-out) both; }
.form-card .field{ animation:enter-up .8s var(--ease-out) both; --lift:18px; }
.form-card .field:nth-child(1){ animation-delay:.45s; }
.form-card .field:nth-child(2){ animation-delay:.51s; }
.form-card .field:nth-child(3){ animation-delay:.57s; }
.form-card .field:nth-child(4){ animation-delay:.63s; }
.form-card .field:nth-child(5){ animation-delay:.69s; }
.form-card .field:nth-child(6){ animation-delay:.75s; }
.form-card .field:nth-child(7){ animation-delay:.81s; }
.contact-aside > *{ animation:enter-right .9s var(--ease-out) both; }
.contact-aside > :nth-child(1){ animation-delay:.5s; }
.contact-aside > :nth-child(2){ animation-delay:.62s; }
.contact-aside > :nth-child(3){ animation-delay:.74s; }

/* Scroll reveal. main.js hides only elements that start below the fold,
   then swaps .is-hidden for .is-revealing as each one scrolls into view.
   Elements revealed together are staggered via --d. */
.reveal.is-hidden{ opacity:0; transform:translate3d(0, var(--lift), 0); }
.reveal-left.is-hidden{ transform:translate3d(calc(var(--slide) * -1), 0, 0); }
.reveal-right.is-hidden{ transform:translate3d(var(--slide), 0, 0); }
.reveal-zoom.is-hidden{ transform:translate3d(0, 24px, 0) scale(.95); }
.reveal.is-revealing{
  transition:opacity .9s ease, transform 1.1s var(--ease-out);
  transition-delay:var(--d, 0s);
}

/* Page exit: a quick fade before navigating to another page */
html.is-leaving main,
html.is-leaving .site-footer{
  opacity:0;
  transform:translate3d(0, -14px, 0);
  transition:opacity .24s ease, transform .24s ease;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- Responsive ---------- */

/* Small laptops */
@media (max-width:1080px){
  .hero-grid, .product-intro{ gap:48px; }
  .service-row{ grid-template-columns:120px 1fr; gap:24px 40px; }
  .service-row .checklist-wrap{ grid-column:2; }
  .steps{ grid-template-columns:repeat(2, 1fr); row-gap:40px; }
  .steps .step:nth-child(odd){ border-left:none; padding-left:0; }
  .steps-3{ grid-template-columns:repeat(3, 1fr); }
  .steps-3 .step:nth-child(odd){ border-left:1px solid var(--line); padding-left:24px; }
  .steps-3 .step:first-child{ border-left:none; padding-left:0; }
  .cells-3{ grid-template-columns:repeat(2, 1fr); }
  .cells-3 .cell:last-child:nth-child(odd){ grid-column:1 / -1; }
}

/* Tablets */
@media (max-width:900px){
  :root{ --section-y:76px; }
  .hero{ padding-block:64px; }
  .hero-grid, .page-hero-grid, .product-intro, .story-grid, .contact-grid{
    grid-template-columns:1fr;
  }
  .hero-grid{ gap:48px; }
  .page-hero{ padding-block:64px 56px; }
  .page-hero-grid{ gap:40px; }
  .product-intro{ gap:40px; margin-bottom:48px; }
  .story-grid{ gap:40px; }
  .section-head{ grid-template-columns:1fr; gap:14px; margin-bottom:40px; }
  .glance-grid{ grid-template-columns:repeat(2, 1fr); }
  .glance-item:nth-child(odd){ border-left:none; padding-left:0; }
  .glance-item:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .steps-3{ grid-template-columns:1fr; row-gap:0; }
  .steps-3 .step,
  .steps-3 .step:nth-child(odd){
    border-left:none; padding:28px 0;
    border-top:1px solid var(--line);
  }
  .steps-3 .step:first-child{ border-top:none; padding-top:0; }
  .steps-3 .step .n{ margin-bottom:14px; }
  .cta-band{ grid-template-columns:1fr; padding:48px 40px; }
  .cta-actions{ justify-content:flex-start; }
  .footer-grid{ grid-template-columns:repeat(3, 1fr); row-gap:36px; }
  .footer-brand{ grid-column:1 / -1; }
  .note{ grid-template-columns:1fr; gap:20px; }
}

/* Mobile nav */
@media (max-width:760px){
  .menu-toggle{ display:block; }
  .nav{ display:flex; justify-content:space-between; }
  .nav-menu{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:20px;
    padding:4px var(--gutter) 24px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    box-shadow:0 30px 40px -24px rgba(3,6,20,.7);
  }
  .nav-open .nav-menu{ display:flex; animation:fade-in .2s ease both; }
  .nav-links{ flex-direction:column; gap:0; }
  .nav-links a{
    padding-block:15px;
    font-size:17px; color:var(--ink);
    border-bottom:1px solid var(--line-soft);
  }
  .nav-links a[aria-current="page"]{ color:var(--accent-deep); }
  .nav-links a::after{ display:none; }
  .nav-cta{ width:100%; padding-block:14px; }

  .product-cards{ grid-template-columns:1fr; }
}

/* Phones */
@media (max-width:640px){
  :root{ --gutter:20px; --section-y:64px; --header-h:68px; --slide:28px; --lift:28px; }
  .brand img{ height:36px; }
  body{ font-size:15.5px; }
  .hero{ padding-block:48px 56px; }
  .hero-sub, .page-hero .lead{ font-size:17px; }
  .hero-actions .btn{ flex:1 1 auto; }
  .ledger{ padding:20px; }
  .page-hero{ padding-block:48px; }
  .cells, .cells-3{ grid-template-columns:1fr; }
  .cell{ padding:28px 24px; }
  .product-card{ padding:28px 24px; }
  .service-row{ grid-template-columns:1fr; gap:18px; padding-block:40px; }
  .service-row .checklist-wrap{ grid-column:auto; }
  .service-mark{ display:flex; align-items:baseline; gap:14px; }
  .service-mark .n{ font-size:30px; margin-bottom:0; }
  .steps{ grid-template-columns:1fr; row-gap:0; }
  .steps .step,
  .steps .step:nth-child(odd){
    border-left:none; padding:28px 0;
    border-top:1px solid var(--line);
  }
  .steps .step:first-child{ border-top:none; padding-top:0; }
  .step .n{ margin-bottom:14px; }
  .cta-band{ padding:40px 24px; }
  .cta-actions .btn{ flex:1 1 auto; }
  .form-card{ padding:28px 20px; }
  .form-grid{ grid-template-columns:1fr; }
  .form-foot .btn{ width:100%; }
  .note{ padding:24px 20px; }
  .facts > div{ flex-direction:column; gap:2px; }
  .facts dd{ text-align:left; }
  .footer-grid{ grid-template-columns:1fr 1fr; }

  /* Comparison table becomes stacked cards */
  .compare thead{ display:none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td{ display:block; width:auto; }
  .compare tr{ padding-block:18px; border-bottom:1px solid var(--line); }
  .compare tbody tr:first-child{ border-top:1px solid var(--ink); }
  .compare th, .compare td{ border:none; padding:0; }
  .compare tbody th{ width:auto; margin-bottom:8px; color:var(--ink); font-size:15px; }
  .compare td .link-arrow{ justify-self:start; }
  .compare td{
    display:grid; grid-template-columns:108px 1fr; gap:12px;
    padding-block:4px; font-size:14.5px;
  }
  .compare td::before{ content:attr(data-label); color:var(--ink-faint); font-size:13px; padding-top:1px; }
}

@media (max-width:400px){
  .glance-item .v{ font-size:16px; }
  .glance-item{ padding:22px 14px; }
  .footer-grid{ column-gap:20px; }
  .record-list > div{ font-size:13.5px; }
}