/* ============================================================================
   Teryli — Marketing site
   Matched to the product: navy + warm cream, Cormorant Garamond display,
   Inter UI, restrained sage/olive accent. Real screens do the visual work.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Inter:wght@400;450;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Brand palette — sampled from the product + canon */
  --navy:        #0F2538;
  --navy-deep:   #0A1B2A;
  --navy-soft:   #16314A;
  --cream:       #F7F3EC;   /* warm cream — editorial backgrounds */
  --cream-deep:  #EFE9DD;   /* deeper cream for alternating bands / insets */
  --paper:       #FBF9F5;   /* soft near-white */
  --white:       #FFFFFF;

  --sage:        #6F775A;   /* restrained olive/sage — primary accent */
  --sage-deep:   #565E45;
  --sage-soft:   #E7E9DD;   /* sage tint for small fills */
  --leaf:        #67B156;   /* canon leaf green — tiny status accents only */
  --gold:        #B8893A;   /* warm gold — at-risk echoes, rare */

  /* Ink */
  --ink:         #0F2538;
  --ink-muted:   #586470;
  --ink-subtle:  #8B939C;
  --on-navy:     #F2EFE7;
  --on-navy-mut: #9FB0BE;

  /* Lines */
  --hair:        rgba(15, 37, 56, 0.11);
  --hair-strong: rgba(15, 37, 56, 0.17);
  --hair-navy:   rgba(242, 239, 231, 0.14);

  /* Type */
  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Realistic soft shadow for framed screens on cream */
  --shadow-frame:
     0 1px 1px rgba(15, 37, 56, 0.04),
     0 8px 18px -8px rgba(15, 37, 56, 0.12),
     0 34px 60px -28px rgba(15, 37, 56, 0.30);
  --shadow-card:
     0 1px 2px rgba(15, 37, 56, 0.05),
     0 14px 34px -22px rgba(15, 37, 56, 0.20);

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}

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

::selection { background: var(--sage-soft); color: var(--navy); }

a { color: inherit; text-decoration: none; }

:where(a, button, input):focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ----------------------------------------------------------------- layout */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(72px, 10vw, 132px); position: relative; }
.section--cream { background: var(--cream); }
.section--paper { background: var(--paper); }
.section--navy  { background: var(--navy); color: var(--on-navy); }

.rule { height: 1px; background: var(--hair); border: 0; margin: 0; }

/* ----------------------------------------------------------------- type */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sage-deep);
  margin: 0;
}
.section--navy .eyebrow { color: var(--sage-soft); }
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.6;
}
.eyebrow.no-rule::before { display: none; }

.display {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.07;
  color: var(--navy);
  margin: 0;
  font-size: clamp(42px, 5vw, 68px);
}
.display em { font-style: italic; font-weight: 500; color: var(--sage-deep); }
.section--navy .display { color: var(--on-navy); }
.section--navy .display em { color: var(--sage-soft); }

.h-section {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.06;
  color: var(--navy);
  margin: 0;
  font-size: clamp(34px, 4.4vw, 56px);
}
.h-section em { font-style: italic; color: var(--sage-deep); }
.section--navy .h-section { color: var(--on-navy); }
.section--navy .h-section em { color: var(--sage-soft); }

.lede {
  font-family: var(--sans);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.62;
  color: var(--ink-muted);
  margin: 0;
}
.section--navy .lede { color: var(--on-navy-mut); }

.kicker-num {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 500;
  line-height: 1;
  color: var(--sage);
  font-feature-settings: "lnum" 1;
}

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  padding: 13px 22px; border-radius: 11px;
  border: 1px solid transparent;
  cursor: pointer; transition: transform var(--ease) 120ms, background 160ms, border-color 160ms, color 160ms;
  white-space: nowrap;
}
.btn .arrow { transition: transform 220ms var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--navy); color: var(--cream); }
.btn--primary:hover { background: var(--navy-soft); }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--hair-strong); }
.btn--ghost:hover { background: rgba(15,37,56,0.04); border-color: var(--navy); }

.section--navy .btn--primary { background: var(--cream); color: var(--navy); }
.section--navy .btn--primary:hover { background: var(--white); }
.section--navy .btn--ghost { color: var(--on-navy); border-color: var(--hair-navy); }
.section--navy .btn--ghost:hover { background: rgba(242,239,231,0.06); border-color: var(--on-navy-mut); }

.textlink {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  color: var(--sage-deep);
}
.textlink .arrow { transition: transform 220ms var(--ease); }
.textlink:hover .arrow { transform: translateX(3px); }

/* ----------------------------------------------------------------- browser frame */
.frame {
  background: var(--white);
  border: 1px solid var(--hair-strong);
  border-radius: 15px;
  box-shadow: var(--shadow-frame);
  overflow: hidden;
  width: 100%;
}
.frame__bar {
  display: flex; align-items: center; gap: 14px;
  height: 40px; padding: 0 16px;
  background: linear-gradient(180deg, #FCFBF8, #F4F1EA);
  border-bottom: 1px solid var(--hair);
}
.frame__dots { display: flex; gap: 7px; }
.frame__dots i { width: 10px; height: 10px; border-radius: 50%; background: #D9D5CC; display: block; }
.frame__url {
  flex: 1; max-width: 340px; margin: 0 auto;
  display: flex; align-items: center; gap: 7px; justify-content: center;
  height: 23px; padding: 0 14px;
  background: var(--cream); border: 1px solid var(--hair);
  border-radius: 999px;
  font-family: var(--sans); font-size: 12px; color: var(--ink-subtle);
  letter-spacing: 0.01em;
}
.frame__url svg { flex: none; }
.frame__img { display: block; width: 100%; height: auto; }
.frame__spacer { width: 44px; flex: none; }

/* ----------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--m-navbg, rgba(247, 243, 236, 0.82));
  backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms, background 200ms;
}
.nav.scrolled { border-bottom-color: var(--m-hair, var(--hair)); }
.nav__inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.nav__brand { display: flex; align-items: center; position: relative; }
.nav__logo { height: 26px; width: auto; display: block; }
.nav__logo--light { position: absolute; inset: 0; opacity: var(--m-logo, 1); }
.nav__logo--dark { opacity: calc(1 - var(--m-logo, 1)); }
.nav__links { display: flex; gap: 28px; margin-left: 12px; }
.nav__links a {
  font-family: var(--sans); font-size: 15px; font-weight: 450; color: var(--m-mut, var(--ink-muted));
  transition: color 160ms;
}
.nav__links a:hover { color: var(--m-fg, var(--navy)); }
.nav__spacer { flex: 1; }
.nav__cta {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--m-btn-fg, var(--cream)); background: var(--m-btn-bg, var(--navy));
  padding: 10px 18px; border-radius: 10px;
  transition: background 160ms;
}
.nav__cta:hover { background: var(--navy-soft); }

/* ----------------------------------------------------------------- hero */
.hero-wrap { position: relative; margin-top: -72px; }
.js .hero-wrap { height: 178vh; }
.hero { background: var(--m-bg, var(--cream)); padding-top: clamp(40px, 5vw, 72px); padding-bottom: 0; overflow: hidden; }
.js .hero { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding-block: 92px 28px; }
.js .hero .wrap { width: 100%; }
.js .hero__copy { padding-bottom: 0; }
.hero .eyebrow { color: var(--m-eye, var(--sage-deep)); }
.hero .display { color: var(--m-fg, var(--navy)); }
.hero .display em { color: var(--m-em, var(--sage-deep)); }
.hero__sub { color: var(--m-mut, var(--ink-muted)) !important; }
.hero .btn--primary { background: var(--m-btn-bg, var(--navy)); color: var(--m-btn-fg, var(--cream)); }
.hero .btn--ghost { color: var(--m-fg, var(--navy)); border-color: var(--m-hair, var(--hair-strong)); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
.hero__copy { padding-bottom: clamp(64px, 8vw, 110px); max-width: 600px; }
.hero__copy .display { margin-top: 26px; font-size: clamp(40px, 4.7vw, 62px); }
.hero__sub { margin-top: 34px; max-width: 46ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero__meta {
  margin-top: 22px; font-size: 14px; color: var(--m-mut, var(--ink-subtle));
  display: flex; align-items: center; gap: 9px;
}
.hero__meta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); }

.hero__stage { position: relative; align-self: stretch; display: flex; align-items: center; }
.hero__stage .frame {
  margin-right: calc(-1 * var(--gutter));
}

/* ----------------------------------------------------------------- capability rows */
.cap__head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.cap__head .h-section { margin-top: 20px; }
.cap__head .lede { margin-top: 22px; max-width: 60ch; }

.cap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
  margin-top: clamp(96px, 12vw, 148px);
}
.cap:first-of-type { margin-top: clamp(56px, 7vw, 84px); }
.cap--flip .cap__text { order: 2; }
.cap--flip .cap__media { order: 1; }

.cap__text { max-width: 480px; }
.cap__tag { display: flex; align-items: baseline; gap: 16px; }
.cap__tag .kicker-num { line-height: 0.85; }
.cap__title { margin-top: 18px; font-size: clamp(30px, 3.2vw, 44px); }
.cap__blurb { margin-top: 22px; }
.cap__blurb2 { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--ink-subtle); max-width: 46ch; }

.cap__points { margin-top: 30px; border-top: 1px solid var(--hair); }
.cap__points .pt {
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  padding: 16px 2px; border-bottom: 1px solid var(--hair);
  align-items: start;
}
.cap__points .pt-mark {
  margin-top: 3px; width: 18px; height: 18px; flex: none;
  display: grid; place-items: center;
  color: var(--sage-deep);
}
.cap__points .pt-t { font-size: 15px; font-weight: 550; color: var(--navy); }
.cap__points .pt-d { font-size: 14px; color: var(--ink-muted); margin-top: 1px; line-height: 1.5; }

.cap__media { position: relative; }
.cap__caption {
  margin-top: 16px; font-size: 13px; color: var(--ink-subtle);
  display: flex; align-items: center; gap: 9px;
}
.cap__caption svg { flex: none; color: var(--sage); }

/* ----------------------------------------------------------------- footer (slim, phase 1) */
.foot { background: var(--navy); color: var(--on-navy); padding-block: clamp(48px, 6vw, 72px); }
.foot__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot__brand img { height: 26px; }
.foot__note { color: var(--on-navy-mut); font-size: 14px; }

/* ----------------------------------------------------------------- motion */
.reveal { transition: opacity 760ms var(--ease), transform 760ms var(--ease); }
.js .reveal:not(.is-in) { opacity: 0; transform: translateY(20px); }

/* soft focus-in for headlines — a nod to "clarity through every transition" */
.reveal.fx-blur { transition: opacity 1000ms var(--ease), transform 1000ms var(--ease), filter 1000ms var(--ease); }
.js .reveal.fx-blur:not(.is-in) { opacity: 0; transform: translateY(22px); filter: blur(7px); }

/* framed screens develop into place — settle up + screenshot reveals top-down like a plate */
.fx-frame { transition: opacity 1000ms var(--ease), transform 1100ms var(--ease); will-change: transform; }
.js .fx-frame[data-develop] { opacity: 0; transform: translateY(30px) scale(0.986); }
.js .fx-frame[data-develop] .frame__img { clip-path: inset(0 0 100% 0); transform: scale(1.035); transform-origin: top center; transition: clip-path 1250ms var(--ease) 100ms, transform 1450ms var(--ease) 100ms; }
.fx-frame.developed { opacity: 1; transform: none; }
.js .fx-frame[data-develop].developed { opacity: 1; transform: none; }
.js .fx-frame[data-develop].developed .frame__img { clip-path: inset(0 0 0 0); transform: scale(1); }

/* typewriter carets */
.tw-caret { display: inline-block; width: 3px; height: 0.74em; background: var(--sage); margin-left: 4px; transform: translateY(0.06em); animation: tw-blink 1.05s steps(1) infinite; }
.tw-cb { display: inline-block; width: 7px; height: 12px; background: var(--sage); margin-left: 4px; vertical-align: -1px; animation: tw-blink 1s steps(1) infinite; }
.tw-caret.done, .tw-cb.done { animation: tw-fade 0.5s var(--ease) forwards; }
@keyframes tw-blink { 0%,50%{opacity:1;} 51%,100%{opacity:0;} }
@keyframes tw-fade { to { opacity: 0; } }
/* reserve height so the page doesn't jump while a heading types */
.js [data-type-head] { min-height: 1.1em; }
.js .hero .display[data-type-head] { min-height: 3.1em; }

/* held hero copy — revealed in sequence after the headline composes */
.js .hold { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.hold.in { opacity: 1; transform: none; }

/* redaction → clarity: masked bars wipe away word by word */
.redact .rw { position: relative; display: inline-block; }
.redact .rw > span { opacity: 0; transition: opacity 0.35s var(--ease); }
.redact .rw::after { content: ""; position: absolute; inset: 0.1em -0.05em 0.16em; background: var(--navy); border-radius: 3px; transform-origin: right; transition: transform 0.55s var(--ease); }
.redact .rw.lit > span { opacity: 1; }
.redact .rw.lit::after { transform: scaleX(0); }

.reveal[data-delay="1"] { transition-delay: 110ms; }
.reveal[data-delay="2"] { transition-delay: 210ms; }
.reveal[data-delay="3"] { transition-delay: 310ms; }

/* detail points within a capability stagger in after the row */
.cap .pt { transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
.js .cap.reveal:not(.is-in) .pt { opacity: 0; transform: translateY(12px); }
.cap.is-in .pt:nth-child(1) { transition-delay: 240ms; }
.cap.is-in .pt:nth-child(2) { transition-delay: 340ms; }
.cap.is-in .pt:nth-child(3) { transition-delay: 440ms; }

/* whisper-quiet scroll parallax on framed media */
[data-parallax] { transform: translate3d(0, var(--py, 0), 0); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .js .hero-wrap { height: auto; }
  .js .hero { position: static; min-height: 0; display: block; padding-block: clamp(88px, 12vw, 96px) 0; }
  .js .hero__copy { padding-bottom: clamp(56px, 8vw, 90px); }
  .js .reveal:not(.is-in),
  .js .cap.reveal:not(.is-in) .pt,
  .js .hold { opacity: 1; transform: none; filter: none; }
  .js .fx-frame[data-develop] { opacity: 1; transform: none; }
  .js .fx-frame[data-develop] .frame__img { clip-path: none; transform: none; }
  .tw-caret, .tw-cb { display: none; }
  .redact .rw > span { opacity: 1; }
  .redact .rw::after { display: none; }
  .reveal, .fx-frame, .cap .pt, .hold { transition: none; }
  [data-parallax] { transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ----------------------------------------------------------------- problem */
.problem-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.problem-quote { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.16; color: var(--navy); font-weight: 500; letter-spacing: -0.01em; margin: 22px 0 0; }
.problem-quote em { font-style: italic; color: var(--sage-deep); }
.problem-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.problem-list li { display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 22px 2px; border-bottom: 1px solid var(--hair); }
.problem-list .n { font-family: var(--serif); font-size: 26px; color: var(--sage); font-weight: 500; line-height: 1; }
.problem-list .t { font-size: 17px; font-weight: 550; color: var(--navy); }
.problem-list .d { font-size: 15px; color: var(--ink-muted); margin-top: 5px; line-height: 1.55; max-width: 54ch; }

/* ----------------------------------------------------------------- stat strip + pills */
.statstrip { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; margin-top: 30px; }
.statstrip .stat { background: var(--paper); padding: 22px 20px; }
.statstrip .v { font-family: var(--serif); font-size: 42px; font-weight: 500; color: var(--navy); line-height: 1; letter-spacing: -0.01em; }
.statstrip .v .u { font-size: 20px; color: var(--ink-muted); }
.statstrip .l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-muted); margin-top: 10px; }
.statstrip .bar { height: 3px; background: var(--hair); border-radius: 2px; margin-top: 13px; overflow: hidden; }
.statstrip .bar i { display: block; height: 100%; width: 0; background: var(--sage); transition: width 1100ms var(--ease); border-radius: 2px; }

.pill { font-family: var(--sans); font-size: 12.5px; font-weight: 500; padding: 5px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { color: var(--sage-deep); background: var(--sage-soft); }
.pill.warn { color: var(--gold); background: #FBF1DE; }
.pill.risk { color: #C8453A; background: #FBE9E7; }
.js .pill.settle { opacity: 0; transform: translateY(6px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.pill.settle.show { opacity: 1; transform: none; }

/* small inline detail rows reused under capabilities */
.cap__stats { --cols: 3; }

/* ----------------------------------------------------------------- is / isn't */
.isnot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 36px); margin-top: clamp(40px, 5vw, 56px); }
.isnot-col { border: 1px solid var(--hair); border-radius: 16px; padding: 32px; background: var(--paper); }
.isnot-col.is { border-color: rgba(111,119,90,0.42); background: rgba(231,233,221,0.34); }
.isnot-col h4 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-deep); margin: 0 0 20px; }
.isnot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.isnot-col li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--navy); line-height: 1.5; }
.isnot-col .mk { flex: none; margin-top: 3px; }
.isnot-col.not .mk { color: var(--ink-subtle); }
.isnot-col.is .mk { color: var(--sage-deep); }

/* ----------------------------------------------------------------- different (navy) */
.different-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.different-quote { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.18; color: var(--on-navy); font-weight: 500; letter-spacing: -0.01em; margin: 22px 0 0; }
.different-quote em { font-style: italic; color: var(--sage-soft); }
.signature { margin-top: 34px; color: var(--on-navy-mut); font-size: 14px; line-height: 1.5; }
.signature strong { display: block; color: var(--on-navy); font-weight: 600; }
.dp { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--hair-navy); }
.dp:last-child { border-bottom: 0; }
.dp .label { font-family: var(--mono); font-size: 12px; color: var(--sage-soft); line-height: 1.6; }
.dp h4 { font-size: 17px; color: var(--on-navy); margin: 0 0 6px; font-weight: 600; }
.dp p { font-size: 15px; color: var(--on-navy-mut); margin: 0; line-height: 1.55; }

/* ----------------------------------------------------------------- CTA -------- */
.cta-card { background: var(--navy); border-radius: 24px; padding: clamp(40px, 5vw, 64px); color: var(--on-navy); display: grid; grid-template-columns: 1fr 0.82fr; gap: clamp(36px, 5vw, 64px); align-items: center; }
.cta-card .eyebrow { color: var(--sage-soft); }
.cta-h { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 4vw, 52px); color: var(--on-navy); margin: 18px 0 0; letter-spacing: -0.01em; line-height: 1.05; }
.cta-sub { color: var(--on-navy-mut); margin-top: 22px; font-size: 17px; line-height: 1.6; max-width: 46ch; }
.cta-name { margin-top: 28px; color: var(--on-navy-mut); font-size: 14px; line-height: 1.5; }
.cta-name strong { display: block; color: var(--on-navy); font-weight: 600; }
.contact-list { display: flex; flex-direction: column; gap: 12px; }
.contact { display: flex; align-items: center; gap: 16px; padding: 17px 20px; border: 1px solid var(--hair-navy); border-radius: 14px; transition: background 0.2s, border-color 0.2s; }
.contact:hover { background: var(--navy-soft); border-color: var(--on-navy-mut); }
.contact-ic { width: 40px; height: 40px; border-radius: 10px; background: rgba(231,233,221,0.1); display: grid; place-items: center; color: var(--sage-soft); flex: none; }
.contact-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--on-navy-mut); }
.contact-val { color: var(--on-navy); font-weight: 500; font-size: 15px; margin-top: 2px; }
.contact .go { margin-left: auto; color: var(--sage-soft); font-size: 14px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ----------------------------------------------------------------- footer ----- */
.foot__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--hair-navy); }
.foot__brand img { height: 26px; }
.foot__brand p { color: var(--on-navy-mut); font-size: 14px; margin: 14px 0 0; max-width: 32ch; line-height: 1.5; }
.foot__col h5 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sage-soft); margin: 0 0 14px; }
.foot__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot__col a { color: var(--on-navy-mut); font-size: 14px; }
.foot__col a:hover { color: var(--on-navy); }
.foot__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 26px; color: var(--on-navy-mut); font-size: 13px; flex-wrap: wrap; gap: 14px; }
.foot__bottom .links { display: flex; gap: 20px; }
.foot__bottom a { color: var(--on-navy-mut); }
.foot__bottom a:hover { color: var(--on-navy); }

/* ----------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; gap: 8px; }
  .hero__copy { padding-bottom: 8px; max-width: 620px; }
  .hero__stage .frame { margin-right: calc(-1 * var(--gutter)); transform: none; }
  .hero { padding-bottom: clamp(56px, 8vw, 80px); }
  .cap { grid-template-columns: 1fr; gap: 36px; }
  .cap--flip .cap__text { order: 1; }
  .cap--flip .cap__media { order: 2; }
  .cap__text { max-width: 620px; }
  .problem-grid, .different-grid, .cta-card { grid-template-columns: 1fr; }
  .isnot-grid { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 680px) {
  .nav__links { display: none; }
  .hero__stage .frame { margin-right: 0; }
  .frame__url { display: none; }
}