/* ═══════════════════════════════════════════════════════════════════════════
   BusinessLens — optical instrument
   Palette derives from a lens barrel: ground glass, anodized graphite,
   engraved amber numerals, and the cyan sheen of coated glass.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* surfaces */
  --ground:      #EDEEEA;   /* ground glass — the page */
  --chalk:       #F6F7F4;   /* raised panel */
  --white:       #FFFFFF;
  --soft:        #E3E5DF;   /* recessed band */

  /* instrument */
  --graphite:    #15171A;   /* anodized barrel */
  --graphite-2:  #1E2126;
  --slate:       #2C3138;

  /* type */
  --ink:         #14161A;
  --ink-2:       #3B4046;
  --muted:       #6C7278;
  --muted-dark:  #9AA0A6;   /* on graphite */
  --line:        #D3D6CF;
  --line-dark:   #333940;

  /* engraved amber — numerals, indices, the one warm accent */
  --amber:       #BE8034;
  --amber-ink:   #8A5A20;   /* small text on light surfaces */
  --amber-lite:  #D9A05B;   /* on graphite */

  /* coated glass — optics only, never text */
  --coat:        #3F7B84;

  --shell:       1240px;
  --gut:         clamp(20px, 5vw, 56px);

  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 14px;

  --ease: cubic-bezier(.22,.61,.36,1);

  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Newsreader', Georgia, 'Times New Roman', serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-body);
  font-optical-sizing:auto;
  font-size:clamp(16px,.55vw + 14.5px,18px);
  line-height:1.62;
  font-weight:380;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ max-width:100%; display:block }
p{ margin:0 0 1.05em }
p:last-child{ margin-bottom:0 }
a{ color:inherit }

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.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{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--graphite); color:var(--ground);
  padding:12px 18px; font-family:var(--f-mono); font-size:13px;
}
.skip:focus{ left:12px; top:12px }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--coat);
  outline-offset:3px;
  border-radius:2px;
}

/* ── type roles ───────────────────────────────────────────────────────────── */

h1,h2,h3{
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 112;
  letter-spacing:-.022em;
  line-height:1.03;
  margin:0 0 .5em;
  text-wrap:balance;
}

h1{ font-size:clamp(2.5rem,4.6vw,4.05rem); line-height:.99; letter-spacing:-.034em }
h2{ font-size:clamp(1.95rem,3.5vw,3.05rem) }
h3{ font-size:clamp(1.15rem,1.5vw,1.4rem); font-variation-settings:'wdth' 104; letter-spacing:-.012em }

.tag{
  font-family:var(--f-mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--amber-ink);
  margin:0 0 1.15rem;
  display:flex;
  align-items:center;
  gap:.7em;
}
.tag::before{
  content:'';
  width:26px; height:1px;
  background:var(--amber);
  flex:none;
}
.tag--light{ color:var(--amber-lite) }
.tag--light::before{ background:var(--amber-lite) }

/* ── buttons ──────────────────────────────────────────────────────────────── */

.btn{
  --btn-bg:transparent;
  --btn-fg:var(--ink);
  --btn-bd:currentColor;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 104;
  font-size:.875rem;
  letter-spacing:.005em;
  line-height:1;
  padding:1.02em 1.5em;
  border:1px solid var(--btn-bd);
  border-radius:var(--r-sm);
  background:var(--btn-bg);
  color:var(--btn-fg);
  text-decoration:none;
  cursor:pointer;
  transition:background .28s var(--ease), color .28s var(--ease),
             border-color .28s var(--ease), transform .28s var(--ease);
}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }

.btn--solid{ --btn-bg:var(--graphite); --btn-fg:var(--ground); --btn-bd:var(--graphite) }
.btn--solid:hover{ --btn-bg:#000; --btn-bd:#000 }

.btn--ghost{ --btn-bd:var(--line); --btn-fg:var(--ink) }
.btn--ghost:hover{ --btn-bd:var(--graphite) }

.btn--amber{ --btn-bg:var(--amber); --btn-fg:#14100A; --btn-bd:var(--amber) }
.btn--amber:hover{ --btn-bg:var(--amber-lite); --btn-bd:var(--amber-lite) }

.btn--sm{ padding:.72em 1.1em; font-size:.8125rem }
.btn--block{ width:100%; margin-top:.4rem }

/* ── topbar ───────────────────────────────────────────────────────────────── */

.topbar{
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.topbar.is-stuck{
  border-bottom-color:var(--line);
  background:color-mix(in srgb, var(--ground) 95%, transparent);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:74px;
}

.brand{
  display:inline-flex; align-items:center; gap:.62rem;
  text-decoration:none; color:var(--ink);
}
.brand__mark{ width:26px; height:26px; flex:none; color:var(--amber) }
.brand__word{
  font-family:var(--f-display);
  font-weight:700;
  font-variation-settings:'wdth' 96;
  font-size:1.02rem;
  letter-spacing:-.012em;
}
.brand__word em{ font-style:normal; font-weight:400; color:var(--muted) }

.topnav{ display:flex; align-items:center; gap:clamp(14px,2vw,30px) }
.topnav a{
  font-family:var(--f-display);
  font-size:.875rem;
  font-weight:500;
  text-decoration:none;
  color:var(--ink-2);
  transition:color .2s var(--ease);
}
.topnav a:hover{ color:var(--ink) }
.topnav .btn:hover{ color:var(--ink) }

.menu-toggle{
  display:none;
  width:42px; height:42px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:transparent;
  cursor:pointer;
  align-items:center; justify-content:center;
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after{
  content:''; display:block;
  width:16px; height:1.5px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.menu-toggle__bars{ position:relative }
.menu-toggle__bars::before{ position:absolute; top:-5px }
.menu-toggle__bars::after{ position:absolute; top:5px }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars{ background:transparent }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before{ transform:translateY(5px) rotate(45deg) }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after{ transform:translateY(-5px) rotate(-45deg) }

.mobilenav[hidden]{ display:none }
.mobilenav{
  border-top:1px solid var(--line);
  padding:8px var(--gut) 22px;
  display:grid;
  gap:2px;
}
.mobilenav a{
  font-family:var(--f-display);
  font-weight:500;
  font-size:1rem;
  text-decoration:none;
  padding:.72rem 0;
  border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

/* ── hero ─────────────────────────────────────────────────────────────────── */

.hero{ padding:clamp(48px,7vw,86px) 0 clamp(56px,7vw,96px) }
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:clamp(34px,4.4vw,64px);
  align-items:center;
}
.hero__copy{ max-width:none }

.hero__title{ margin-bottom:.55em }
.hero__title .pull{
  display:block;
  filter:blur(9px);
  opacity:0;
  transform:translateY(10px);
  transition:filter 1.05s var(--ease), opacity 1.05s var(--ease), transform 1.05s var(--ease);
}
.hero__title .pull--2{ transition-delay:.16s; color:var(--muted) }
.is-focused .hero__title .pull{ filter:blur(0); opacity:1; transform:none }
.is-focused .hero__title .pull--2{ color:var(--ink) }

.hero__lead{
  font-size:clamp(1.06rem,1.15vw + .78rem,1.32rem);
  line-height:1.55;
  color:var(--ink-2);
  max-width:47ch;
  margin-bottom:1.9rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:10px }

.hero__specs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 18px;
  margin:2.6rem 0 0;
  padding-top:1.4rem;
  border-top:1px solid var(--line);
}
.hero__specs dt{
  font-family:var(--f-mono);
  font-size:.625rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.4rem;
}
.hero__specs dd{
  margin:0;
  font-family:var(--f-display);
  font-weight:500;
  font-size:.92rem;
  line-height:1.3;
}

/* ── the iris ─────────────────────────────────────────────────────────────── */

.hero__optic{ display:grid; justify-items:center; gap:1.1rem; padding-inline:clamp(8px,4vw,58px) }

.iris{
  width:min(100%,400px);
  height:auto;
  overflow:visible;
}
.iris__well{ fill:#0D0F12 }
.iris__glass{ opacity:0; transition:opacity 1.4s var(--ease) .25s }
.iris__glow{
  opacity:0;
  transform:scale(.72);
  transform-origin:center;
  transition:opacity 1.2s var(--ease) .5s, transform 1.2s var(--ease) .5s;
}
.is-focused .iris__glass{ opacity:1 }
.is-focused .iris__glow{ opacity:.5; transform:scale(1) }

.blade circle{
  fill:url(#blade);
  stroke:#3A4047;
  stroke-width:.75;
}
.blade{
  transform:translateY(0);
  transition:transform 1.5s var(--ease) .1s;
}
.is-focused .blade{ transform:translateY(-86px) }

.iris__barrel{
  fill:none;
  stroke:var(--graphite);
  stroke-width:2.5;
}
.iris__ring{
  fill:none;
  stroke:var(--line);
  stroke-width:1;
}
.iris__ticks path{
  stroke:var(--amber);
  stroke-width:1.6;
  stroke-linecap:round;
  opacity:0;
  transition:opacity .9s var(--ease) .85s;
}
.is-focused .iris__ticks path{ opacity:.95 }

.iris__labels text{
  font-family:var(--f-mono);
  font-size:8.6px;
  letter-spacing:.16em;
  fill:var(--muted);
  opacity:0;
  transition:opacity .9s var(--ease) 1s;
}
.is-focused .iris__labels text{ opacity:1 }

.optic__caption{
  text-align:center;
  max-width:34ch;
  font-family:var(--f-mono);
  font-size:.6875rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}

/* ── manifesto ────────────────────────────────────────────────────────────── */

.manifesto{
  background:var(--graphite);
  color:var(--ground);
  padding:clamp(46px,6vw,78px) 0;
}
.manifesto__inner{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);
  align-items:end;
}
.manifesto blockquote{ margin:0 }
.manifesto blockquote p{
  font-family:var(--f-display);
  font-weight:500;
  font-variation-settings:'wdth' 108;
  font-size:clamp(1.7rem,3.2vw,2.75rem);
  line-height:1.08;
  letter-spacing:-.028em;
  margin:0;
}
.manifesto blockquote span{ display:block }
.manifesto blockquote span:last-child{ color:var(--amber-lite) }
.manifesto__note{
  color:var(--muted-dark);
  font-size:.98rem;
  line-height:1.6;
  margin:0;
  padding-left:clamp(16px,2vw,26px);
  border-left:1px solid var(--line-dark);
}

/* ── generic band ─────────────────────────────────────────────────────────── */

.band{
  padding:clamp(60px,8vw,116px) 0;
  scroll-margin-top:80px;
}
.band--soft{ background:var(--soft) }
.band--dark{
  background:var(--graphite);
  color:var(--ground);
}
.band--dark h2,
.band--dark h3{ color:var(--chalk) }

.band__head{ max-width:60ch; margin-bottom:clamp(34px,4vw,58px) }
.band__intro{
  font-size:clamp(1rem,.5vw + .88rem,1.14rem);
  color:var(--ink-2);
  line-height:1.6;
  max-width:56ch;
}
.band--dark .band__intro{ color:var(--muted-dark) }

/* ── lenses (the interactive instrument) ──────────────────────────────────── */

.lenses{
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(26px,3.4vw,58px);
  align-items:start;
}

.lenses__scale{
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
}
.lens-tab{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:'idx name' 'idx ro';
  column-gap:.9rem;
  align-items:baseline;
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  padding:1.05rem .2rem 1.05rem 0;
  cursor:pointer;
  color:var(--muted);
  position:relative;
  transition:color .3s var(--ease), padding-left .35s var(--ease);
}
.lens-tab::before{
  content:'';
  position:absolute; left:0; top:-1px; bottom:-1px;
  width:2px;
  background:var(--amber);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .4s var(--ease);
}
.lens-tab:hover{ color:var(--ink-2) }
.lens-tab.is-active{ color:var(--ink); padding-left:14px }
.lens-tab.is-active::before{ transform:scaleY(1) }

.lens-tab__idx{
  grid-area:idx;
  font-family:var(--f-mono);
  font-size:.6875rem;
  letter-spacing:.08em;
  color:var(--muted);
  transition:color .3s var(--ease);
}
.lens-tab.is-active .lens-tab__idx{ color:var(--amber-ink) }
.lens-tab__name{
  grid-area:name;
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 106;
  font-size:1.08rem;
  letter-spacing:-.012em;
  color:currentColor;
}
.lens-tab__ro{
  grid-area:ro;
  font-family:var(--f-mono);
  font-size:.625rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
}

.lenses__stage{
  background:var(--chalk);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(24px,3vw,44px);
  min-height:330px;
  position:relative;
  overflow:hidden;
}
.lenses__stage::after{
  /* the depth-of-field edge: a soft optical vignette */
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 60px -30px rgba(20,22,26,.22);
}

.lens-panel{
  animation:focusIn .55s var(--ease) both;
}
.lens-panel[hidden]{ display:none }
.lens-panel h3{ margin-bottom:.6em }
.lens-panel > p{ color:var(--ink-2); max-width:56ch }

@keyframes focusIn{
  from{ opacity:0; filter:blur(6px); transform:translateY(6px) }
  to{ opacity:1; filter:blur(0); transform:none }
}

.findings{
  list-style:none;
  margin:1.5rem 0;
  padding:0;
  border-top:1px solid var(--line);
}
.findings li{
  position:relative;
  padding:.72rem 0 .72rem 1.65rem;
  border-bottom:1px solid var(--line);
  font-size:.97rem;
  color:var(--ink-2);
}
.findings li::before{
  content:'';
  position:absolute; left:.15rem; top:1.32em;
  width:6px; height:6px;
  border:1px solid var(--amber);
  border-radius:50%;
}

.lens-panel__q{
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 104;
  font-size:1rem;
  color:var(--ink);
  margin:0;
}

/* ── process ──────────────────────────────────────────────────────────────── */

.steps{
  --step-pad:clamp(18px,2vw,30px);
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0;
  border-top:1px solid var(--line-dark);
}
.step{
  display:flex;
  flex-direction:column;
  padding:clamp(22px,2.4vw,32px) var(--step-pad) clamp(26px,3vw,38px);
  border-right:1px solid var(--line-dark);
  position:relative;
}
/* the first column in each row sits flush with the shell edge */
.step:first-child{ padding-left:0 }
.step:last-child{ border-right:0; padding-right:0 }
.step::before{
  content:'';
  position:absolute; left:var(--step-pad); top:-1px;
  width:34px; height:2px;
  background:var(--amber);
}
.step:first-child::before{ left:0 }
.step__idx{
  font-family:var(--f-mono);
  font-size:.6875rem;
  letter-spacing:.16em;
  color:var(--amber-lite);
  margin:0 0 1.6rem;
}
.step h3{ margin-bottom:.55em }
/* two lines reserved so every column's body copy starts on the same line */
@media (min-width:681px){
  .step h3{ min-height:2.06em }
}
.step p{ color:var(--muted-dark); font-size:.96rem; line-height:1.58 }
.step__out{
  margin-top:auto;
  padding-top:1.1rem;
  border-top:1px solid var(--line-dark);
  font-family:var(--f-mono);
  font-size:.6875rem;
  line-height:1.5;
  /* two lines reserved so the rule lands at the same height in every column */
  min-height:calc(1.1rem + 1px + 3em);
  letter-spacing:.06em;
  color:var(--chalk);
  text-transform:none;
}

/* ── deliverables spec sheet ──────────────────────────────────────────────── */

.deliver{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(30px,4vw,72px);
  align-items:start;
}
.deliver__head{ position:sticky; top:104px }
.deliver__head .btn{ margin-top:1.6rem }

.specsheet{ margin:0; border-top:1px solid var(--line) }
.spec{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(12px,2vw,28px);
  padding:1.25rem 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.spec dt{
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 104;
  font-size:1.02rem;
  letter-spacing:-.012em;
}
.spec dd{
  margin:0;
  color:var(--ink-2);
  font-size:.97rem;
  line-height:1.55;
}

/* ── offer ────────────────────────────────────────────────────────────────── */

.offer{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(30px,4vw,72px);
  align-items:start;
}
.includes{
  list-style:none;
  margin:1.8rem 0 1.6rem;
  padding:0;
  border-top:1px solid var(--line-dark);
}
.includes li{
  padding:.78rem 0 .78rem 1.7rem;
  border-bottom:1px solid var(--line-dark);
  position:relative;
  font-size:.98rem;
  color:var(--chalk);
}
.includes li::before{
  content:'';
  position:absolute; left:.1rem; top:1.42em;
  width:9px; height:1px;
  background:var(--amber-lite);
}
.offer__fit{
  color:var(--muted-dark);
  font-size:.94rem;
  max-width:52ch;
}

.pricecard{
  background:var(--graphite-2);
  border:1px solid var(--line-dark);
  border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,34px);
  position:sticky; top:104px;
}
.pricecard__label{
  font-family:var(--f-mono);
  font-size:.625rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--muted-dark);
  margin:0 0 1rem;
}
.pricecard__value{
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 100;
  font-size:clamp(2.6rem,4vw,3.5rem);
  line-height:1;
  letter-spacing:-.04em;
  color:var(--chalk);
  margin:0 0 .5rem;
}
.pricecard__value span{
  font-size:.34em;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--amber-lite);
  vertical-align:.52em;
  margin-left:.25em;
}
.pricecard__sub{
  font-family:var(--f-mono);
  font-size:.6875rem;
  letter-spacing:.06em;
  color:var(--muted-dark);
  margin:0 0 1.8rem;
}
.pricecard .btn{ width:100% }
.pricecard__note{
  margin:1rem 0 0;
  font-size:.82rem;
  color:var(--muted-dark);
  text-align:center;
}

/* ── about ────────────────────────────────────────────────────────────────── */

.about{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(30px,4vw,68px);
  align-items:start;
}

.portrait{ margin:0 }
.portrait__frame{
  position:relative;
  aspect-ratio:5/6;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--graphite);
  border:1px solid var(--line);
}
.portrait__frame img{ width:100%; height:100%; object-fit:cover }

/* Empty state that reads as intentional: a lens aperture with the monogram. */
.portrait__mono{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 42% 34%, rgba(127,167,172,.30), transparent 55%),
    radial-gradient(circle at 62% 70%, rgba(190,128,52,.22), transparent 58%),
    var(--graphite);
}
.portrait__mono::before{
  content:'';
  position:absolute;
  width:56%; aspect-ratio:1;
  border:1px solid rgba(214,216,210,.28);
  border-radius:50%;
}
.portrait__mono::after{
  content:'';
  position:absolute;
  width:76%; aspect-ratio:1;
  border:1px dashed rgba(214,216,210,.16);
  border-radius:50%;
}
.portrait__mono span{
  position:relative;
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 108;
  font-size:clamp(2rem,4vw,2.7rem);
  letter-spacing:-.03em;
  color:var(--chalk);
}

.portrait figcaption{ padding-top:1.1rem }
.portrait__name{
  display:block;
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 106;
  font-size:1.16rem;
  letter-spacing:-.015em;
}
.portrait__role{
  display:block;
  font-family:var(--f-mono);
  font-size:.6875rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.3rem;
}

.idcard{ margin:1.8rem 0 0; border-top:1px solid var(--line) }
.idcard > div{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:12px;
  padding:.72rem 0;
  border-bottom:1px solid var(--line);
}
.idcard dt{
  font-family:var(--f-mono);
  font-size:.625rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  padding-top:.18em;
}
.idcard dd{ margin:0; font-size:.9rem; line-height:1.45 }

.about__lead{
  font-size:clamp(1.08rem,.7vw + .88rem,1.28rem);
  line-height:1.55;
  color:var(--ink);
}
.about__body p{ color:var(--ink-2); max-width:60ch }
.about__body > p:first-child{ color:var(--ink) }

.about__quote{
  margin:2.1rem 0;
  padding:1.5rem 0 1.5rem 1.6rem;
  border-left:2px solid var(--amber);
}
.about__quote p{
  font-family:var(--f-display);
  font-weight:500;
  font-variation-settings:'wdth' 106;
  font-size:clamp(1.15rem,1.5vw,1.45rem);
  line-height:1.28;
  letter-spacing:-.018em;
  color:var(--ink);
  margin:0;
  max-width:44ch;
}

.capabilities{
  margin:2.2rem 0 0;
  border-top:1px solid var(--line);
}
.capability{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(12px,2vw,28px);
  padding:1.35rem 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.capability dt{ display:grid; gap:.28rem }
.capability__cat{
  font-family:var(--f-mono);
  font-size:.625rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--amber-ink);
}
.capability__what{
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 104;
  font-size:1.02rem;
  letter-spacing:-.014em;
  color:var(--ink);
  line-height:1.2;
}
.capability dd{
  margin:0;
  color:var(--ink-2);
  font-size:.96rem;
  line-height:1.55;
}

/* ── privacy ──────────────────────────────────────────────────────────────── */

.privacy{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(16px,2vw,24px);
}
.privacy__box{
  background:var(--chalk);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,30px);
}
.privacy__box h3{ margin-bottom:.7em }
.privacy__box p{ color:var(--ink-2); font-size:.96rem; line-height:1.58 }

/* ── faq ──────────────────────────────────────────────────────────────────── */

.faq{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(28px,4vw,68px);
  align-items:start;
}
.faq__head{ position:sticky; top:104px }
.faq__list{ border-top:1px solid var(--line) }

.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:1.15rem 2.4rem 1.15rem 0;
  position:relative;
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 104;
  font-size:1.02rem;
  letter-spacing:-.012em;
  transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--amber-ink) }
.faq summary::after{
  content:'';
  position:absolute; right:.3rem; top:1.62em;
  width:11px; height:11px;
  border-right:1.5px solid var(--amber);
  border-bottom:1.5px solid var(--amber);
  transform:translateY(-4px) rotate(45deg);
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(0) rotate(-135deg) }
.faq details > div{ padding:0 2.4rem 1.4rem 0 }
.faq details p{ color:var(--ink-2); font-size:.97rem; max-width:62ch; margin:0 }

/* ── contact ──────────────────────────────────────────────────────────────── */

.contact{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(32px,4vw,72px);
  align-items:start;
}

.channels{
  list-style:none;
  margin:2.2rem 0 0;
  padding:0;
  border-top:1px solid var(--line-dark);
}
.channels li{
  display:grid;
  grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:14px;
  padding:.85rem 0;
  border-bottom:1px solid var(--line-dark);
  align-items:baseline;
}
.channels__k{
  font-family:var(--f-mono);
  font-size:.625rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted-dark);
}
.channels a{
  font-family:var(--f-display);
  font-weight:500;
  font-size:1rem;
  color:var(--chalk);
  text-decoration:none;
  border-bottom:1px solid var(--line-dark);
  padding-bottom:2px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.channels a:hover{ color:var(--amber-lite); border-bottom-color:var(--amber-lite) }

.cform{
  background:var(--graphite-2);
  border:1px solid var(--line-dark);
  border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,34px);
}
.cform__title{
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:'wdth' 106;
  font-size:1.18rem;
  letter-spacing:-.015em;
  color:var(--chalk);
  margin:0 0 1.5rem;
}

.field{ margin-bottom:1rem }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.field label{
  display:block;
  font-family:var(--f-mono);
  font-size:.625rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted-dark);
  margin-bottom:.45rem;
}
.field .opt{ text-transform:none; letter-spacing:.04em; opacity:.7 }

.field input,
.field select,
.field textarea{
  width:100%;
  font-family:var(--f-body);
  font-size:1rem;
  color:var(--chalk);
  background:rgba(0,0,0,.24);
  border:1px solid var(--line-dark);
  border-radius:var(--r-sm);
  padding:.78rem .85rem;
  transition:border-color .22s var(--ease), background .22s var(--ease);
}
.field textarea{ resize:vertical; min-height:104px; line-height:1.5 }
.field input::placeholder,
.field textarea::placeholder{ color:#5F666D }
.field input:hover,
.field select:hover,
.field textarea:hover{ border-color:#454C54 }
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--coat);
  background:rgba(0,0,0,.36);
}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted-dark) 50%),
                   linear-gradient(135deg,var(--muted-dark) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:2.4rem;
}
.field select option{ background:var(--graphite-2); color:var(--chalk) }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea{ border-color:#C4614A }
.field__err{
  display:block;
  font-family:var(--f-mono);
  font-size:.6875rem;
  letter-spacing:.04em;
  text-transform:none;
  color:#E08C74;
  margin-top:.4rem;
}

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.cform__status{
  margin:.9rem 0 0;
  font-size:.9rem;
  line-height:1.5;
  min-height:1.2em;
  color:var(--muted-dark);
}
.cform__status.is-ok{ color:#8FC0A0 }
.cform__status.is-err{ color:#E08C74 }
.cform__status a{ color:var(--amber-lite) }

.cform__legal{
  margin:1rem 0 0;
  font-size:.8rem;
  color:var(--muted-dark);
}

/* ── footer ───────────────────────────────────────────────────────────────── */

.foot{
  background:var(--graphite);
  color:var(--muted-dark);
  padding:clamp(38px,4vw,58px) 0 clamp(30px,3vw,42px);
  border-top:1px solid var(--line-dark);
}
.foot__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:clamp(22px,3vw,48px);
  align-items:start;
}
.foot__brand .brand__word{ color:var(--chalk); font-size:1.05rem }
.foot__brand .brand__word em{ color:var(--muted-dark) }
.foot__brand p{
  margin:.55rem 0 0;
  font-size:.9rem;
  max-width:32ch;
}
.foot__nav{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.5rem;
  justify-content:flex-end;
}
.foot__nav a{
  font-family:var(--f-display);
  font-size:.85rem;
  font-weight:500;
  text-decoration:none;
  color:var(--muted-dark);
  transition:color .2s var(--ease);
}
.foot__nav a:hover{ color:var(--chalk) }
.foot__legal{
  grid-column:1/-1;
  margin:clamp(20px,3vw,34px) 0 0;
  padding-top:1.2rem;
  border-top:1px solid var(--line-dark);
  font-family:var(--f-mono);
  font-size:.6875rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* ── reveal ───────────────────────────────────────────────────────────────── */

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none }

/* ── responsive ───────────────────────────────────────────────────────────── */

@media (max-width:1080px){
  .lenses{ grid-template-columns:minmax(0,250px) minmax(0,1fr) }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .step:nth-child(2n+1){ padding-left:0 }
  .step:nth-child(2n+1)::before{ left:0 }
  .step:nth-child(2n){ border-right:0; padding-right:0; padding-left:var(--step-pad) }
  .step:nth-child(2n)::before{ left:var(--step-pad) }
  .step:nth-child(n+3){ border-top:1px solid var(--line-dark); margin-top:-1px }
}

@media (max-width:960px){
  .topnav{ display:none }
  .menu-toggle{ display:inline-flex }
  .hero__grid{ grid-template-columns:1fr; gap:clamp(30px,6vw,48px) }
  .hero__copy{ max-width:none }
  .iris{ width:min(76%,340px) }
  .manifesto__inner{ grid-template-columns:1fr; align-items:start }
  .manifesto__note{ padding-left:0; border-left:0; padding-top:1.1rem; border-top:1px solid var(--line-dark) }
  .deliver,
  .offer,
  .about,
  .faq,
  .contact{ grid-template-columns:1fr }
  .deliver__head,
  .faq__head,
  .pricecard{ position:static }
  .portrait__frame{ aspect-ratio:16/10 }
  .foot__inner{ grid-template-columns:1fr }
  .foot__nav{ justify-content:flex-start }
}

@media (max-width:680px){
  .lenses{ grid-template-columns:1fr }
  .lenses__scale{
    display:flex;
    overflow-x:auto;
    gap:0;
    border-top:0;
    border-bottom:1px solid var(--line);
    scrollbar-width:none;
    margin-bottom:20px;
  }
  .lenses__scale::-webkit-scrollbar{ display:none }
  .lens-tab{
    flex:0 0 auto;
    grid-template-areas:'idx name' 'idx ro';
    border-bottom:0;
    padding:.9rem 1.15rem .9rem 0;
  }
  .lens-tab::before{ top:auto; bottom:-1px; left:0; right:1.15rem; width:auto; height:2px; transform:scaleX(0); transform-origin:left }
  .lens-tab.is-active{ padding-left:0 }
  .lens-tab.is-active::before{ transform:scaleX(1) }
  .steps{ grid-template-columns:1fr }
  .step,
  .step:nth-child(2n),
  .step:nth-child(2n+1){ border-right:0; padding-inline:0 }
  .step::before,
  .step:nth-child(2n)::before,
  .step:nth-child(2n+1)::before{ left:0 }
  .step:nth-child(n+2){ border-top:1px solid var(--line-dark); margin-top:-1px }
  .spec,
  .capability,
  .channels li,
  .idcard > div{ grid-template-columns:1fr; gap:6px }
  .hero__specs{ grid-template-columns:1fr; gap:0 }
  .hero__specs > div{ display:flex; justify-content:space-between; gap:16px; padding:.55rem 0; border-bottom:1px solid var(--line) }
  .hero__specs dt{ margin-bottom:0 }
  .field-row{ grid-template-columns:1fr }
  .btn{ width:100%; }
  .hero__actions .btn{ width:100% }
  .foot__nav{ gap:.35rem 1.15rem }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero__title .pull{ filter:none; opacity:1; transform:none }
  .blade{ transform:translateY(-86px) }
  .iris__glass,.iris__glow,.iris__ticks path,.iris__labels text{ opacity:1 }
  .iris__glow{ transform:scale(1) }
  .reveal{ opacity:1; transform:none }
}

@media print{
  .topbar,.mobilenav,.hero__optic,.cform,.menu-toggle{ display:none }
  body{ background:#fff; color:#000 }
  .band--dark,.manifesto,.foot{ background:#fff; color:#000 }
}

@media (min-width:961px){
  .mobilenav{ display:none }
}