/* main.css — StartInsight v5 design system (Revision 12 official identity).
   Precision grid, decisive type hierarchy, restrained motion. The palette is the
   official StartInsight identity: primary teal #1f748f, deep teal #165265, mid
   teal-blue #2896b9 (large text and graphics only), pale icy cyan #e0f2f7 and
   light-cyan #b7e1ed accents — no navy anywhere.
   No CSS imports, no remote resources, no background-image references. */

:root{
  /* Official StartInsight identity (Revision 12; contrast-verified 2026-09-13) */
  --brand:#1f748f;          /* primary — 5.31:1 on white */
  --brand-deep:#165265;     /* 8.65:1 on white; dark bands + footer */
  --brand-bright:#2896b9;   /* 3.41:1 on white — LARGE text (>=24px) and graphics only */
  --tint:#e0f2f7;           /* pale band ground */
  --tint-strong:#b7e1ed;    /* light-cyan hairline/chip accents */

  --bg:#ffffff;
  --surface:#ffffff;
  --band:var(--tint);
  --dark:var(--brand-deep);
  --dark-soft:#1d5f74;      /* raised elements on dark — 7.14:1 with white */

  --ink:#0d2830;            /* headings — 15.4:1 on white */
  --body:#33505c;           /* body — 8.6:1 on white / 7.46:1 on tint */
  --muted:#546b77;          /* meta — 5.61:1 on white / 4.86:1 on --tint (AA both) */
  --on-dark:#ffffff;        /* 8.65:1 on --dark */
  --on-dark-muted:#b7e1ed;  /* 6.18:1 on --dark */

  --line:#d7e8ef;           /* decorative hairline */
  --line-strong:#b3d7e2;    /* decorative emphasis */
  --field-border:#568c9f;   /* form controls — 3.72:1 on white / 3.23:1 on tint */

  --shadow-sm:0 1px 2px rgba(13,40,48,.06);
  --shadow-md:0 14px 34px -20px rgba(13,40,48,.28), 0 2px 6px rgba(13,40,48,.05);

  --font-display:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --container:1120px;
  --measure:68ch;
  --radius:14px;            /* cards, panels */
  --radius-lg:18px;         /* media stages */
  --radius-sm:10px;         /* inputs, small cards */
  --radius-button:10px;
  --hero-inset:clamp(10px, 1.7vw, 16px);  /* hero layered-frame rail */
  --section-padding:clamp(56px, 7vw, 104px);
  --gap:clamp(16px, 2.5vw, 24px);
}

*,
*::before,
*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.62;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.1;
  margin:0 0 0.55em;
  text-wrap:balance;
}

h1{
  font-weight:700;
  font-size:clamp(2.35rem, 3.6vw + .9rem, 3.75rem);
  line-height:1.04;
  letter-spacing:-0.03em;
}
h2{
  font-weight:650;
  font-size:clamp(1.7rem, 1.8vw + .8rem, 2.45rem);
  letter-spacing:-0.025em;
}
h3{
  font-weight:600;
  font-size:clamp(1.13rem, .8vw + .75rem, 1.34rem);
  letter-spacing:-0.015em;
}

p{margin:0 0 1em;max-width:var(--measure)}
p:last-child{margin-bottom:0}

a{color:var(--brand);text-decoration:none}
a:hover,a:focus-visible{color:var(--brand-deep);text-decoration:underline}

:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

::selection{background:var(--tint-strong);color:var(--ink)}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(20px, 5vw, 40px);
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--surface);
  color:var(--brand-deep);
  padding:10px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  z-index:60;
}
.skip-link:focus{left:12px;top:12px}

/* Off-screen utility — carries the honeypot field for server-side abuse
   control. Never visible, never keyboard-focusable. */
.visually-hidden{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Header — sticky, solid white, one hairline. The CTA joins the nav row on
   wide viewports only; the mobile menu keeps priority. */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}

.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(16px, 2.4vw, 32px);
  flex-wrap:wrap;
  padding-block:12px;
}

.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand img{display:block;height:30px;width:auto}
.brand:hover,.brand:focus-visible{text-decoration:none}

/* The header CTA is the only .btn--sm on the site: hidden under 960px. */
.site-header .btn--sm{display:none}

.nav__toggle{
  display:none;
  font:inherit;
  font-size:0.95rem;
  font-weight:600;
  color:var(--ink);
  background:transparent;
  border:1.5px solid var(--field-border);
  border-radius:var(--radius-sm);
  padding:10px 16px;
  min-height:44px;
  cursor:pointer;
}
.nav__toggle:hover,.nav__toggle:focus-visible{border-color:var(--brand);color:var(--brand-deep)}

.nav__list{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:clamp(14px, 2.2vw, 26px);
  margin:0;
  padding:0;
}

.nav__list a{
  color:var(--body);
  font-size:15px;
  font-weight:550;
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
.nav__list a:hover,.nav__list a:focus-visible{color:var(--brand-deep)}

/* Buttons */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  padding:0 22px;
  border:1.5px solid transparent;
  border-radius:var(--radius-button);
  font:inherit;
  font-size:15.5px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s, box-shadow .18s, transform .18s;
}
.btn:hover,.btn:focus-visible{text-decoration:none}

.btn--primary{background:var(--brand);color:#ffffff}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--brand-deep);color:#ffffff}
.btn--primary:active{transform:translateY(1px)}

.btn--secondary{background:transparent;color:var(--brand-deep);border-color:var(--brand)}
.btn--secondary:hover,.btn--secondary:focus-visible{background:var(--tint);color:var(--brand-deep)}

.btn--sm{height:38px;padding:0 16px;font-size:14.5px}

/* Sections — quiet rhythm, no hairline on every band. */

.section{padding-block:var(--section-padding)}
.section--band{background:var(--band)}
.section--dark{
  background:var(--dark);
  color:var(--on-dark);
}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--on-dark)}
.section--dark p,.section--dark .lead,.section--dark .prose p{color:var(--on-dark-muted)}
.section--dark a{color:var(--on-dark-muted)}
.section--dark a:hover,.section--dark a:focus-visible{color:#ffffff}

.section__head{margin-bottom:clamp(28px, 4vw, 48px)}
.section__head h2{margin-bottom:.4em}
.section__head p{color:var(--body)}

.eyebrow{
  font-size:12px;
  font-weight:650;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--brand);
  margin-bottom:1.2em;
  font-variant-numeric:tabular-nums;
}

.lead{
  font-size:clamp(1.06rem, .5vw + .9rem, 1.2rem);
  line-height:1.6;
  color:var(--body);
  max-width:62ch;
}

.note,.hint,.version{color:var(--muted);font-size:0.8125rem}
.note{font-size:14px;margin-top:20px}

.caption{
  font-size:0.8125rem;
  line-height:1.5;
  color:var(--muted);
  max-width:52ch;
  font-variant-numeric:tabular-nums;
}

/* Hero — copy beside the concrete workflow photograph. The two hero
   photographs are the only above-the-fold images and load eagerly. */

.section--hero{
  isolation:isolate;
  overflow:hidden;
}

.hero__inner{
  position:relative;
  z-index:2;
  display:grid;
  gap:clamp(32px, 4vw, 64px);
  align-items:center;
}

.hero__copy{max-width:none}
.hero__copy h1{max-width:22ch;margin-bottom:.42em}

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:26px 0 22px;
  max-width:none;
}

.hero__art{
  display:grid;
  gap:clamp(18px, 2.2vw, 26px);
  align-content:start;
}

.hero__figure{margin:0}

.hero__stage{
  position:relative;
  aspect-ratio:3/2;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  background:var(--tint);
}
.hero__layer{
  position:absolute;
  top:-34px;
  left:0;
  right:0;
  width:100%;
  height:calc(100% + 68px);
  object-fit:cover;
  object-position:50% 50%;
  pointer-events:none;
  user-select:none;
}
/* The front layer is an inset frame: the field behind it shows as a restrained
   rail around the photograph while the layer still moves inside the stage. The
   specified inset box (top/bottom/left/right offsets with `width:auto;height:auto`)
   is expressed through width/height calc() because Chrome sizes an absolutely
   positioned replaced element from its intrinsic width when `width:auto`,
   ignoring `right`/`bottom` — measured: right rail -15px, bottom -18.3px short. */
.hero__layer--front{
  top:calc(-34px + var(--hero-inset));
  left:var(--hero-inset);
  width:calc(100% - 2 * var(--hero-inset));
  height:calc(100% + 68px - 2 * var(--hero-inset));
  border-radius:calc(var(--radius-lg) - 6px);
  box-shadow:0 16px 34px -22px rgba(13,40,48,.38);
}

.trust{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
}
.trust li{
  background:var(--tint);
  border:1px solid var(--tint-strong);
  border-radius:999px;
  padding:7px 12px;
  font-size:13px;
  line-height:1.35;
  color:var(--body);
}

/* Use cases — structured rows, never a uniform repeat. */

.usecases{display:grid;gap:clamp(44px, 5vw, 76px)}

.usecase{
  display:grid;
  gap:clamp(24px, 3.5vw, 56px);
  align-items:start;
}

.usecase__figure{margin:0}

.usecase__stage{
  position:relative;
  aspect-ratio:3/2;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  background:var(--tint);
}
.usecase__stage img{
  position:absolute;
  top:-30px;
  left:0;
  right:0;
  width:100%;
  height:calc(100% + 60px);
  object-fit:cover;
  pointer-events:none;
  user-select:none;
}

.usecase__body h3{margin-bottom:.8em}

.parts{
  display:grid;
  grid-template-columns:132px 1fr;
  column-gap:22px;
  margin:0;
}
.parts dt{
  margin:0;
  padding:12px 0;
  border-top:1px solid var(--line);
  font-size:12.5px;
  font-weight:650;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.parts dd{
  margin:0;
  padding:12px 0;
  border-top:1px solid var(--line);
  color:var(--body);
  font-size:15.5px;
}

/* Story — three labelled document states and the written excerpt. */

.story__lead{color:var(--body);margin-bottom:clamp(24px, 3.2vw, 40px)}

.story__states{
  display:grid;
  gap:24px;
  margin-bottom:clamp(32px, 4.5vw, 56px);
}

.story__state{
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}

.story__figure{margin:0;display:flex;flex-direction:column;flex:1}

.story__stage{
  position:relative;
  aspect-ratio:3/2;
  overflow:hidden;
  background:var(--tint);
}
.story__stage img{
  position:absolute;
  top:-20px;
  left:0;
  right:0;
  width:100%;
  height:calc(100% + 40px);
  object-fit:cover;
  object-position:50% 46%;
  pointer-events:none;
  user-select:none;
}

.story__tag{
  font-size:12px;
  font-weight:650;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--brand);
  padding:18px 22px 0;
  font-variant-numeric:tabular-nums;
}

.story__body{padding:10px 22px 24px;flex:1}
.story__body h3{margin-bottom:.5em}
.story__body p{color:var(--body);font-size:15.5px}

.excerpt{
  max-width:780px;
  margin:44px auto 0;
  background:#ffffff;
  border:1px solid var(--line);
  border-left:4px solid var(--brand);
  border-radius:var(--radius-sm);
  padding:clamp(20px, 3vw, 30px);
  box-shadow:var(--shadow-sm);
}
.excerpt h3{
  font-size:12.5px;
  font-weight:650;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1.3em;
}
.excerpt__body{
  font-size:15.5px;
  line-height:1.62;
  color:var(--body);
  max-width:var(--measure);
  margin-bottom:1.3em;
  font-variant-numeric:tabular-nums;
}
.excerpt__note{color:var(--muted);font-size:13px}

/* Services — three aligned cards, no stagger. */

.cards{
  display:grid;
  gap:24px;
  grid-template-columns:1fr;
  align-items:stretch;
  margin-bottom:clamp(28px, 4vw, 44px);
}

.card{
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
/* The reveal enhancement leaves `.reveal.is-visible` on every revealed card, and
   `.js .reveal.is-visible{transform:none}` (0-3-0) outranks `.card:hover` (0-2-0).
   This equally-specific hover rule restores the lift once a card is revealed. */
.js .card.reveal.is-visible:hover{transform:translateY(-2px)}

.card__figure{
  margin:0;
  aspect-ratio:3/2;
  overflow:hidden;
  background:var(--tint);
}
.card__figure img{width:100%;height:100%;object-fit:cover}

.card__body{
  display:flex;
  flex-direction:column;
  gap:.5em;
  padding:24px;
  flex:1;
}
.card__numeral{
  font-family:var(--font-display);
  color:var(--brand);
  font-weight:650;
  font-size:.85rem;
  letter-spacing:0.12em;
  margin:0;
  font-variant-numeric:tabular-nums;
}
.card__body h3{margin-top:.35em;margin-bottom:0}
.card__body p{color:var(--body);font-size:15.5px;margin-bottom:0}

/* Approach — the step ledger beside the four-station photograph.
   The art stage is deliberately wide (2.4:1): at a 16:9 stage the mandated
   ±30px vertical overscan bleed forces object-fit:cover to crop ~106px
   (18.6%) of the 1672x941 photograph's width, clipping the outer stations.
   At 2.4:1 the cover is width-constrained, so all four stations stay in frame
   while the parallax still pans inside its bleed. */

.approach{display:grid;gap:48px;align-items:start}
.approach__art{order:1}
.approach__content{order:2}

.figure{
  position:relative;
  margin:0;
  aspect-ratio:2.4/1;
  overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:var(--tint);
}
.figure img{
  position:absolute;
  top:-30px;
  left:0;
  right:0;
  width:100%;
  height:calc(100% + 60px);
  object-fit:cover;
  object-position:50% 50%;
  pointer-events:none;
  user-select:none;
}

.steps{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:step;
}
.step{
  position:relative;
  border-top:1px solid var(--line);
  padding:18px 0 18px 56px;
}
.step::before{
  counter-increment:step;
  content:"0" counter(step);
  position:absolute;
  left:0;
  top:20px;
  width:44px;
  color:var(--brand);
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  line-height:1.3;
  font-variant-numeric:tabular-nums;
}
.step h3{font-size:1.06rem;margin-bottom:.25em}
.step p{color:var(--body);font-size:15.5px;margin-bottom:0}

/* Principles — the deep-teal ledger band, full width, no empty column. */

.principles__grid{display:block}

.principles{
  list-style:none;
  padding:0;
  margin:32px 0 0;
  display:grid;
  gap:0 40px;
}
.principles li{
  position:relative;
  border-top:1px solid rgba(255,255,255,.22);
  padding:16px 0 16px 20px;
  color:var(--on-dark);
  font-size:16px;
}
.principles li::before{
  content:"";
  position:absolute;
  left:0;
  top:1.35em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--tint-strong);
}

/* FAQ — two columns, native disclosure, no JavaScript required. */

.faq{
  display:grid;
  gap:14px 24px;
  align-items:start;
}
.faq__item{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#ffffff;
  overflow:hidden;
  transition:border-color .18s ease, background-color .18s ease;
}
.faq__item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  min-height:44px;
  cursor:pointer;
  list-style:none;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary h3{
  display:inline;
  font-size:15.5px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.01em;
  margin:0;
}
.faq__item summary::after{
  content:"+";
  font-size:1.3rem;
  line-height:1;
  color:var(--brand);
  flex:none;
  font-variant-numeric:tabular-nums;
}
.faq__item[open]{border-color:var(--line-strong);background:var(--tint)}
.faq__item[open] summary::after{content:"−"}
.faq__item p{
  color:var(--body);
  padding:0 18px 16px;
  font-size:15.5px;
  max-width:var(--measure);
}

/* About — copy beside the restrained brand lockup panel. */

.about{display:grid;gap:48px;align-items:start}

.about__panel{
  display:grid;
  justify-items:center;
  align-content:center;
  gap:22px;
  background:var(--tint);
  border:1px solid var(--tint-strong);
  border-radius:var(--radius-lg);
  padding:clamp(36px, 5vw, 64px);
  min-height:clamp(220px, 26vw, 320px);
}
.about__panel img{height:auto;width:100%;max-width:320px}
.about__rule{display:block;width:56px;height:2px;background:var(--brand)}

/* Contact — intro beside the form panel. */

.contact{display:grid;gap:48px;align-items:start}

.notice{
  background:var(--tint);
  border:1px solid var(--tint-strong);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  color:var(--body);
  font-size:13.5px;
  max-width:var(--measure);
  margin-block:clamp(24px, 3vw, 34px);
}

.form{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(22px, 3vw, 34px);
  box-shadow:var(--shadow-sm);
}

.field{margin-bottom:20px}
.field label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px}
.field--consent{display:flex;align-items:flex-start;gap:10px}
.field--consent label{margin-bottom:0;max-width:60ch}
.field--consent input{margin-top:4px;width:18px;height:18px;accent-color:var(--brand)}

input[type="text"],
input[type="email"],
textarea{
  width:100%;
  font:inherit;
  color:var(--ink);
  background:#ffffff;
  border:1.5px solid var(--field-border);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
textarea{resize:vertical;min-height:140px}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus{
  outline:2px solid var(--brand);
  outline-offset:1px;
  border-color:var(--brand);
}

.field .hint{margin:8px 0 0}
.hint{font-size:13px;color:var(--muted)}

[aria-invalid="true"]{border-color:var(--brand-deep)}

#form-status{
  margin:16px 0 0;
  font-size:14px;
  color:var(--brand-deep);
  max-width:var(--measure);
}
#form-status:empty{margin:0}

/* Prose pages (privacy notice, not found). */

.doc{display:grid;gap:48px;align-items:start}

.prose{max-width:var(--measure)}
.prose h2{
  font-size:clamp(1.25rem, 1.6vw + .6rem, 1.6rem);
  margin-top:clamp(30px, 4vw, 44px);
  margin-bottom:.4em;
}
.prose h1{max-width:22ch}
.prose .version{margin-bottom:clamp(20px, 3vw, 32px)}
.prose p{color:var(--body)}

.doc__panel{
  position:relative;
  min-height:clamp(220px, 26vw, 320px);
  border-radius:var(--radius-lg);
  border:1px solid var(--tint-strong);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  background:var(--tint);
}
.doc__panel span{position:absolute;display:block;pointer-events:none}
.doc__panel span:nth-child(1){
  left:12%;
  right:12%;
  bottom:14%;
  height:52%;
  border-radius:12px;
  background:#ffffff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.doc__panel span:nth-child(2){
  left:20%;
  top:16%;
  width:30%;
  height:58%;
  border-radius:10px;
  background:#ffffff;
  border:1px solid var(--line-strong);
}
.doc__panel span:nth-child(3){
  right:16%;
  top:26%;
  width:30%;
  height:44%;
  border-radius:10px;
  background:#ffffff;
  border:1px solid var(--line);
}

.notfound{display:grid;gap:48px;align-items:center}
.notfound__art{
  position:relative;
  min-height:clamp(200px, 24vw, 300px);
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.22);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  background:var(--dark-soft);
}
.notfound__art span{position:absolute;display:block;pointer-events:none}
.notfound__art span:nth-child(1){
  left:14%;
  bottom:0;
  width:9%;
  height:64%;
  background:linear-gradient(180deg, var(--brand-bright), rgba(40,150,185,.14));
}
.notfound__art span:nth-child(2){
  left:28%;
  bottom:0;
  width:6%;
  height:46%;
  background:linear-gradient(180deg, var(--brand), rgba(31,116,143,.14));
}
.notfound__art span:nth-child(3){
  left:40%;
  bottom:0;
  width:32%;
  height:28%;
  background:linear-gradient(200deg, var(--brand-bright), var(--brand));
  border-top-left-radius:100px;
}
.notfound__art span:nth-child(4){
  right:10%;
  top:16%;
  width:32%;
  height:34%;
  border-radius:50%;
  border:1px solid rgba(183,225,237,.5);
  box-shadow:0 0 0 20px rgba(183,225,237,.08);
}

/* Not-found page — full-height shell. The dark band and the footer are one
   continuous deep-teal close; on a short page the shell stretches so the footer
   sits at the bottom of the viewport instead of leaving a white strip below it. */

.notfound-page{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.notfound-page main{flex:1;display:flex;flex-direction:column}
.notfound-page main > .section{flex:1}

/* Footer — deep teal close on every page. */

.site-footer{
  background:var(--dark);
  color:var(--on-dark);
  padding-block:44px;
  font-size:14px;
}
.site-footer__top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 24px;
  padding-bottom:20px;
}
.site-footer__mark{height:26px;width:auto}
.site-footer__top p{margin:0;color:var(--on-dark)}
.site-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 24px;
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:20px;
}
.site-footer__bottom p{margin:0;color:var(--on-dark-muted)}
.site-footer a{color:var(--on-dark-muted)}
.site-footer a:hover,.site-footer a:focus-visible{color:#ffffff}

/* Reveal enhancement — hidden state only when the `js` class is present, so
   the pages stay fully visible without JavaScript. */

.js .reveal{opacity:0;transform:translate3d(0,18px,0);transition:opacity .6s ease,transform .6s ease}
.js .reveal.is-visible{opacity:1;transform:none}

/* Mobile navigation (progressive enhancement) and static narrow-viewport
   parallax. The stories stack; no transforms apply below the desktop
   breakpoint. */

@media (max-width: 899px){
  .js .nav__toggle{display:inline-block}
  .js .nav__list{display:none}
  .js .nav__list.is-open{display:block;width:100%;padding-top:8px}
  .js .nav__list li{padding-block:4px}
  .js .nav{width:100%}
  .hero__art{order:-1}
  .hero__stage{max-height:52vh}
  [data-parallax]{transform:none !important}
}

/* Below 640px the use-case label/description pair stacks: the label row sits
   above its description and the hairline keeps the row rhythm. */

@media (max-width: 639.98px){
  .parts{grid-template-columns:minmax(0, 1fr)}
  .parts dt{padding:12px 0 4px}
  .parts dd{border-top:none;padding:0 0 12px}
}

@media (min-width: 640px){
  .cards{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

@media (min-width: 900px){
  .hero__inner{grid-template-columns:minmax(0, 1.02fr) minmax(0, .98fr);gap:clamp(32px,4vw,64px);align-items:center}
  .usecase{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);align-items:start}
  .usecase__art{order:1}
  .usecase__body{order:2}
  .usecase:nth-child(even) .usecase__art{order:2}
  .usecase:nth-child(even) .usecase__body{order:1}
  .story__states{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .approach{grid-template-columns:minmax(0, 6fr) minmax(0, 5fr);align-items:start}
  .approach__art{order:1}
  .approach__content{order:2}
  .principles{grid-template-columns:repeat(2, minmax(0, 1fr));grid-auto-flow:column;grid-template-rows:repeat(3, auto)}
  .about{grid-template-columns:minmax(0, 6fr) minmax(0, 5fr)}
  .contact{grid-template-columns:minmax(0, 5fr) minmax(0, 7fr)}
  .doc{grid-template-columns:minmax(0, 7fr) minmax(0, 4fr)}
  .notfound{grid-template-columns:minmax(0, 6fr) minmax(0, 5fr)}
}

@media (min-width: 960px){
  .cards{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .nav{margin-inline-start:auto}
  .site-header .btn--sm{display:inline-flex}
}

@media (min-width: 980px){
  .faq{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

/* Parallax layers rest in this CSS position; motion.js applies transforms
   only while motion is allowed. */

[data-parallax]{will-change:auto}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{opacity:1;transform:none;transition:none}
  [data-parallax]{transform:none !important}
  .card:hover,.js .card.reveal.is-visible:hover{box-shadow:var(--shadow-sm);transform:none}
}