/* ============================================================
   INCEPTION — design system
   Concept: architectural blueprint. Inception lays the foundation;
   blueprints are how foundations get specified before they're built.
   Dark navy "drafting table" sections + cool vellum paper sections,
   thin linework grid, dimension-line motifs, a single redline accent
   reserved for the thing that matters most on each screen.
   ============================================================ */

:root{
  --navy-950:#0b1826;
  --navy-900:#0f2036;
  --navy-800:#16304d;
  --line:#4c7a9e;
  --line-soft:rgba(140,178,206,0.22);
  --line-soft-strong:rgba(140,178,206,0.4);
  --paper:#e9edea;
  --paper-raised:#f4f6f3;
  --ink:#0f1c2e;
  --ink-soft:#3c4c5e;
  --white:#f3f6f4;
  --white-soft:#b9c8d4;
  --redline:#b23a2e;
  --redline-soft:rgba(178,58,46,0.14);
  /* Brighter redline for text sitting directly on the dark navy (not on
     a light card) — same accent family, tuned so it still passes
     contrast against #0b1826. */
  --redline-bright:#e05a48;

  /* Brand mark accent — the redline stays the one functional accent
     for CTAs and "look here" cues. This gradient is the secondary,
     decorative accent: hover glows, hairlines, small markers. It never
     appears on buttons/links, so it doesn't compete with the redline. */
  --brand-gradient: linear-gradient(135deg, #3B82F6 0%, #A855F7 55%, #E0499E 100%);

  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;

  --max: 1180px;
  --pad: clamp(20px, 4vw, 64px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--navy-950);
  color:var(--white-soft);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:#A855F7; color:var(--white);}
img,svg{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-0.01em;
  margin:0 0 0.5em;
  color:var(--white);
}
p{margin:0 0 1em;}
.mono{font-family:var(--mono);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad);}
.section{padding:88px 0;}
.section--tight{padding:56px 0;}
.dark{background:var(--navy-950); color:var(--white);}
.dark h1,.dark h2,.dark h3{color:var(--white);}
.dark p{color:var(--white-soft);}
/* Second, slightly-raised dark tone — used instead of the old light
   "paper" section so pages read as almost-all-dark, while sections
   still separate from one another. Cards (.cell) stay light paper
   regardless — see the note by .cell below. */
.raised{background:var(--navy-900);}

/* blueprint grid backdrop */
.grid-bg{
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 42px 42px;
}
.dark.grid-bg{
  background-image:
    linear-gradient(rgba(140,178,206,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,178,206,0.09) 1px, transparent 1px);
  background-size: 42px 42px;
}

/* registration / crosshair corner marks, used on the hero + section dividers */
.regmarks{position:relative;}
.regmarks::before,.regmarks::after{
  content:"";
  position:absolute;
  width:18px; height:18px;
  top:22px;
  border-top:1px solid var(--line-soft-strong);
  opacity:0.9;
}
.regmarks::before{left:var(--pad); border-left:1px solid var(--line-soft-strong);}
.regmarks::after{right:var(--pad); border-right:1px solid var(--line-soft-strong);}

.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--line);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
}
.dark .eyebrow{color:#8fb4cf;}
.eyebrow::before{
  content:"";
  width:7px;height:7px;
  background:var(--brand-gradient);
  transform:rotate(45deg);
  display:inline-block;
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(11,24,38,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-soft);
}
/* Thin brand-gradient hairline, echoed at the top of the footer too —
   the two "bookends" of every page carry the logo's color. */
.nav::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height:2px;
  background:var(--brand-gradient);
  opacity:0.6;
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:18px; padding-bottom:18px;}
.nav-right{display:flex; align-items:center; gap:28px;}
.langtoggle{display:flex; align-items:center; gap:6px;}
.langtoggle button{
  background:none; border:none; cursor:pointer; padding:2px 3px;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--white-soft); border-bottom:1px solid transparent;
}
.langtoggle button[aria-pressed="true"]{color:var(--white); border-color:var(--redline);}
.langtoggle span{color:var(--line-soft-strong); font-family:var(--mono); font-size:12px;}
.brand{
  font-family:var(--display);
  font-weight:700;
  font-size:19px;
  letter-spacing:0.02em;
  color:var(--white);
  text-decoration:none;
  display:flex; align-items:center; gap:10px;
}
.brand-mark{
  width:24px; height:24px;
  background:url("logo-mark.svg") no-repeat center / contain;
  flex:none;
}
.brand-tagline{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--line);
  margin:2px 0 14px;
}
.navlinks{display:flex; gap:32px; list-style:none; margin:0; padding:0;}
.navlinks a{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--white-soft);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color .15s, border-color .15s;
}
.navlinks a:hover, .navlinks a[aria-current="page"]{color:var(--white); border-color:var(--redline);}
.navtoggle{display:none; background:none; border:1px solid var(--line-soft-strong); color:var(--white); font-family:var(--mono); font-size:12px; padding:8px 10px; letter-spacing:.08em;}

@media (max-width:760px){
  .navlinks{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--navy-950);
    border-bottom:1px solid var(--line-soft);
    max-height:0; overflow:hidden;
  }
  .navlinks.open{max-height:280px;}
  .navlinks a{padding:16px var(--pad); border-bottom:1px solid var(--line-soft); width:100%;}
  .navtoggle{display:block; padding:6px 8px; font-size:11px;}
  .nav-right{gap:10px;}
  .brand{font-size:16px; gap:7px;}
  .langtoggle{gap:3px;}
  .langtoggle button{font-size:11px; padding:2px;}
  .nav .wrap{padding-left:16px; padding-right:16px;}
}

/* ---------- buttons ---------- */
.btnrow{display:flex; gap:16px; flex-wrap:wrap; align-items:center;}
.btn{
  font-family:var(--mono);
  font-size:13.5px;
  letter-spacing:0.04em;
  text-decoration:none;
  padding:13px 22px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid currentColor;
  background:transparent;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.btn--solid{background:var(--redline); border-color:var(--redline); color:var(--white);}
.btn--solid:hover{background:#8f2e24;}
.btn--ghost{color:var(--white); }
.dark .btn--ghost{color:var(--white);}
.btn--ghost:hover{background:rgba(255,255,255,0.08);}
.btn--ink{color:var(--ink); border-color:var(--ink);}
.btn--ink:hover{background:var(--ink); color:var(--white);}
/* .btn--ink is meant for a light background; when it sits directly on
   a dark section (not inside a light .cell), flip it. */
.dark .btn--ink{color:var(--white); border-color:var(--white);}
.dark .btn--ink:hover{background:var(--white); color:var(--ink);}
.btn::after{content:"→"; font-size:14px;}

/* ---------- hero ---------- */
.hero{padding:72px 0 90px;}
/* Diagram column gets clearly more room than the text column — the
   text is capped at 15ch anyway, so it doesn't need an even split. */
.hero-grid{display:grid; grid-template-columns:4.2fr 5.8fr; gap:40px; align-items:start;}
.hero h1{font-size:clamp(34px,4.6vw,54px); max-width:15ch;}
.hero .lede{font-family:var(--serif); font-size:19px; color:var(--white-soft); max-width:44ch; margin-bottom:34px; text-align:justify;}
/* Extra room below the lede, and a bit less button padding/gap so the
   two CTAs reliably stay on one row instead of wrapping now that the
   text column is narrower (diagram column got the extra space). */
.hero .btnrow{margin-top:16px; gap:12px;}
.hero .btn{padding:13px 18px;}
.hero-diagram{
  border:1px solid var(--line-soft-strong); padding:14px; background:rgba(255,255,255,0.02);
  /* <figure> has a default 40px left/right margin in the UA stylesheet —
     unreset, it silently shrank this 80px narrower than its grid column. */
  margin:0;
}
/* Without an explicit width, an SVG with only a viewBox falls back to
   the ~300px default replaced-element size instead of filling its
   column — this is what was making the diagram look tiny too. */
.hero-diagram svg{width:100%; height:auto;}
.hero-diagram figcaption{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--white-soft); margin-top:12px; display:flex; justify-content:space-between;
}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }

/* ---------- cards / grids ---------- */
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft-strong); border:1px solid var(--line-soft-strong);}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft-strong); border:1px solid var(--line-soft-strong);}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-soft-strong); border:1px solid var(--line-soft-strong);}
@media (max-width:900px){ .grid4{grid-template-columns:repeat(2,1fr);} .grid3{grid-template-columns:1fr;} .grid2{grid-template-columns:1fr;} }
@media (max-width:560px){ .grid4{grid-template-columns:1fr;} }

/* Cards stay light paper everywhere — even inside dark sections. Now
   that most of the site is dark, this is the deliberate exception:
   paper survives only as a punctual card surface, not full sections. */
.cell{
  background:var(--paper); padding:30px 26px; position:relative;
  transition:box-shadow .2s ease, transform .2s ease;
}
.cell:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(168,85,247,0.35), 0 14px 32px -12px rgba(59,130,246,0.45);
  z-index:1;
}
.cell .tag{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--redline);
  border:1px solid var(--redline); padding:3px 8px; display:inline-block; margin-bottom:16px;
}
.cell h3{font-size:19px; margin-bottom:10px; color:var(--ink);}
.cell p{font-size:15px; color:var(--ink-soft); margin-bottom:0;}

/* ---------- section headers ---------- */
.sechead{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:44px; flex-wrap:wrap;}
.sechead h2{font-size:clamp(26px,3vw,36px); max-width:20ch; margin-bottom:0;}
.sechead .desc{max-width:38ch; font-size:15.5px; color:var(--ink-soft);}
.dark .sechead .desc{color:var(--white-soft);}

/* ---------- featured case teaser ---------- */
.case-teaser{
  border:1px solid var(--line-soft-strong);
  display:grid; grid-template-columns:1fr 1fr;
}
.case-teaser .cp{padding:44px 40px;}
.case-teaser .cd{padding:44px 40px; border-left:1px solid var(--line-soft-strong); background:rgba(255,255,255,0.015);}
@media (max-width:900px){ .case-teaser{grid-template-columns:1fr;} .case-teaser .cd{border-left:none; border-top:1px solid var(--line-soft-strong);} }
.specrow{display:flex; justify-content:space-between; font-family:var(--mono); font-size:13px; padding:10px 0; border-bottom:1px solid var(--line-soft);}
.specrow span:first-child{color:var(--white-soft);}

/* ---------- footer ---------- */
footer{background:var(--navy-950); color:var(--white-soft); padding:56px 0 28px; border-top:1px solid var(--line-soft); position:relative;}
footer::before{
  content:"";
  position:absolute; top:-1px; left:0; right:0;
  height:2px;
  background:var(--brand-gradient);
  opacity:0.6;
}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:44px;}
.foot-grid h4{color:var(--white); font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px;}
.foot-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:14.5px;}
.foot-grid a{text-decoration:none; color:var(--white-soft);}
.foot-grid a:hover{color:var(--white);}
.footbar{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:#6f889c; border-top:1px solid var(--line-soft); padding-top:22px;}
.footbar-left{display:flex; gap:18px; flex-wrap:wrap;}
.footbar a{text-decoration:underline;}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr;} }

/* ---------- generic content pages ---------- */
.pagehero{padding:64px 0 48px;}
.pagehero h1{font-size:clamp(30px,4vw,46px); max-width:18ch;}
.pagehero .lede{max-width:52ch; font-size:17.5px; color:var(--ink-soft);}
.dark .pagehero .lede{color:var(--white-soft);}

.list-services{display:flex; flex-direction:column;}
.svc{
  display:grid; grid-template-columns:220px 1fr; gap:32px;
  padding:36px 0; border-top:1px solid var(--line-soft-strong);
}
.svc:last-child{border-bottom:1px solid var(--line-soft-strong);}
.svc .tag{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--redline);}
.dark .svc .tag{color:var(--redline-bright);}
.svc h3{font-size:22px; margin:6px 0 12px;}
.svc ul{margin:14px 0 0; padding-left:18px; font-size:14.5px; color:var(--ink-soft);}
.dark .svc ul{color:var(--white-soft);}
@media (max-width:700px){ .svc{grid-template-columns:1fr;} }

.principles{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-soft-strong); border:1px solid var(--line-soft-strong); margin-top:20px;}
@media (max-width:760px){ .principles{grid-template-columns:1fr;} }

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
.field{margin-bottom:22px;}
.field label{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px;}
.dark .field label{color:var(--white-soft);}
.field input, .field textarea, .field select{
  width:100%; background:var(--paper-raised); border:1px solid var(--line-soft-strong);
  padding:12px 14px; font-family:var(--serif); font-size:15.5px; color:var(--ink);
}
.field textarea{resize:vertical; min-height:120px;}
.field input:focus, .field textarea:focus, .field select:focus{outline:2px solid var(--redline); outline-offset:1px;}
.note{font-size:13px; color:var(--ink-soft); margin-top:-8px;}
.dark .note{color:var(--white-soft);}
.note a{text-decoration:underline;}

.badge-list{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;}
.badge{font-family:var(--mono); font-size:12px; border:1px solid var(--line-soft-strong); padding:5px 10px; color:var(--ink-soft); text-decoration:none; display:inline-block;}
.dark .badge{color:var(--white-soft); border-color:var(--line-soft-strong);}
/* Badges almost always sit inside a light .cell card — keep them dark
   text there even when the section around the card is dark. */
.cell .badge{color:var(--ink-soft);}

.kicker-num{font-family:var(--mono); color:var(--redline); font-size:13px;}

/* ---------- long-form content (privacy policy, etc.) ---------- */
.prose h2{font-size:21px; margin-top:2.4em;}
.prose h2:first-child{margin-top:0;}
.prose p{font-size:16px;}