/* ============================================================
   ELYSIAN — Site stylesheet
   Web translation of the ELYSIAN proposal design system.

   The system, in three rules:
   1. Line weight is hierarchy. A 2px black rule opens a section;
      a 1px hairline separates items within it. Nothing else
      carries emphasis.
   2. Numbers are the image. Prices, hours, and durations are set
      huge in weight 200 with tight tracking. They anchor pages
      that would otherwise be text only.
   3. Black fill is spent deliberately. One dark section per page,
      reserved for the moment that carries the decision.

   Palette is unchanged from the print template. Type is Inter —
   free, open-source, genuine thin weights, drawn for screens.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');

:root {
  --black:    #000000;
  --ink:      #111111;
  --graphite: #4A4A4A;
  --gray:     #767676;
  --rule:     #C9C9C7;
  --hair:     #E7E7E4;
  --mist:     #F3F3F1;
  --stone:    #DEDEDC;
  --paper:    #FFFFFF;

  --sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Fluid display sizes; fixed body sizes. */
  --t-hero:    clamp(40px, 8vw, 88px);
  --t-figure:  clamp(56px, 11vw, 116px);
  --t-fig-sm:  clamp(40px, 6vw, 64px);
  --t-section: clamp(28px, 3.6vw, 40px);
  --t-lede:    clamp(18px, 1.9vw, 22px);
  --t-body:    16.5px;
  --t-spec:    14px;
  --t-label:   11.5px;

  --wrap: 1160px;
  --gutter: clamp(22px, 5vw, 64px);
  --pad-y: clamp(64px, 9vw, 128px);

  --rule-major: 2px solid var(--black);
  --rule-minor: 1px solid var(--hair);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--black); color: #fff; }

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

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

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

.section { padding-top: var(--pad-y); padding-bottom: var(--pad-y); }
.section + .section > .wrap { border-top: var(--rule-major); padding-top: var(--pad-y); }
/* section top rule sits inside the wrap so it aligns to the text column edges,
   not the full viewport — matches the print measure */
.section > .wrap { position: relative; }

.section--flush { padding-top: clamp(40px, 6vw, 72px); }

.section--dark { background: var(--black); color: #fff; }
.section--dark + .section > .wrap,
.section--dark > .wrap { border-top-color: #2E2E2E; }
.section--dark .eyebrow { color: #8C8C8C; }
.section--dark .h-section { color: #fff; }
.section--dark .copy { color: #B0B0B0; }
.section--dark .lede { color: #D8D8D8; }

/* ---------- TYPE ---------- */
.eyebrow {
  font-size: var(--t-label);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 500;
}

.h-hero {
  font-size: var(--t-hero);
  font-weight: 200;
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 14ch;
}

.h-section {
  font-size: var(--t-section);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -0.022em;
  margin-top: 14px;
}

.h-block {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.3;
}

.lede {
  font-size: var(--t-lede);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -0.006em;
  color: var(--graphite);
  max-width: 36ch;
}

.copy {
  font-size: var(--t-body);
  line-height: 1.72;
  color: var(--graphite);
  max-width: 60ch;
}
.copy + .copy { margin-top: 14px; }
.copy strong { font-weight: 600; color: var(--ink); }

.section--dark .copy strong { color: #fff; }

/* spacing helpers */
.mt-s { margin-top: 14px; } .mt-m { margin-top: 26px; }
.mt-l { margin-top: 44px; } .mt-xl { margin-top: 64px; }

/* ---------- SITE HEADER ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: var(--rule-minor);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px; padding-bottom: 18px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-glyph {
  width: 26px; height: 26px; background: var(--black); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
.brand-name { font-size: 13px; letter-spacing: 0.42em; font-weight: 700; }
.nav { display: flex; gap: clamp(16px, 2.4vw, 34px); align-items: center; }
.nav a {
  font-size: var(--t-label); letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 500; color: var(--gray); transition: color 140ms ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { font-weight: 600; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-block;
  border: 1.5px solid var(--black);
  background: transparent; color: var(--ink);
  font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 16px 32px;
  transition: background 160ms ease, color 160ms ease;
}
.btn:hover { background: var(--black); color: #fff; }
.section--dark .btn { border-color: #fff; color: #fff; }
.section--dark .btn:hover { background: #fff; color: #000; }

/* ---------- SPEC LIST ---------- */
.spec { list-style: none; margin-top: 16px; }
.spec li {
  position: relative;
  padding: 9px 0 9px 18px;
  border-bottom: var(--rule-minor);
  font-size: var(--t-spec);
  line-height: 1.5;
  color: var(--graphite);
}
.spec li::before {
  content: ""; position: absolute; left: 0; top: 17px;
  width: 6px; height: 1px; background: var(--gray);
}
.spec li:last-child { border-bottom: 0; }
.section--dark .spec li { border-bottom-color: #292929; color: #B4B4B4; }

/* ---------- GRID / CELLS ---------- */
.grid { display: grid; gap: 0; margin-top: 44px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.cell {
  border-top: var(--rule-major);
  padding: 22px 26px 30px 0;
}
.cell .idx {
  font-size: var(--t-label); letter-spacing: 0.2em; color: var(--gray);
}
.cell .h-block { margin-top: 10px; }
/* vertical hairline between columns */
.grid--3 .cell:not(:nth-child(3n+1)),
.grid--2 .cell:not(:nth-child(2n+1)),
.grid--4 .cell:not(:nth-child(4n+1)) {
  border-left: var(--rule-minor);
  padding-left: 26px;
}

/* ---------- TWO-COLUMN INTRO ---------- */
.split {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
.split--argument { grid-template-columns: 1fr 1fr; margin-top: 44px; }

/* ---------- STAT ROW (big figures) ---------- */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.stat { border-top: var(--rule-major); padding: 24px 24px 0 0; }
.stat:not(:first-child) { border-left: var(--rule-minor); padding-left: 26px; }
.stat .fig {
  font-size: var(--t-figure); font-weight: 200;
  letter-spacing: -0.05em; line-height: 0.9;
}
.stat .fig-sm {
  font-size: var(--t-fig-sm); font-weight: 200;
  letter-spacing: -0.045em; line-height: 0.9;
}
.stat .lbl {
  font-size: var(--t-label); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gray); margin-top: 18px; line-height: 1.6;
}

/* ---------- FIGURE LOCKUP (pricing hero) ---------- */
.lockup { display: flex; align-items: flex-start; gap: 12px; }
.lockup .amt {
  font-size: var(--t-figure); font-weight: 200;
  letter-spacing: -0.05em; line-height: 0.82;
}
.lockup .per {
  font-size: var(--t-label); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gray); font-weight: 500; padding-top: 14px;
}

/* ---------- PRICING CARDS ---------- */
.cards { display: grid; grid-template-columns: 1.08fr 1fr 1fr; gap: 16px; margin-top: 44px; }
.card {
  border: 1px solid var(--rule); padding: 30px 28px;
  display: flex; flex-direction: column;
}
.card--rec { background: var(--black); color: #fff; border-color: var(--black); }
.card .flag {
  font-size: var(--t-label); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gray); padding-bottom: 16px; border-bottom: var(--rule-minor);
}
.card--rec .flag { color: #fff; border-bottom-color: #3A3A3A; font-weight: 600; }
.card h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.015em; margin-top: 20px; line-height: 1.25; }
.card .amt { font-size: clamp(36px, 5vw, 44px); font-weight: 200; letter-spacing: -0.04em; margin-top: 18px; line-height: 1; }
.card .amt-sub { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray); margin-top: 12px; }
.card--rec .amt-sub { color: #9A9A9A; }
.card .card-list { list-style: none; margin-top: 22px; padding-top: 16px; border-top: var(--rule-minor); }
.card--rec .card-list { border-top-color: #3A3A3A; }
.card .card-list li { font-size: var(--t-spec); line-height: 1.5; color: var(--graphite); padding: 8px 0; border-bottom: var(--rule-minor); }
.card--rec .card-list li { color: #B4B4B4; border-bottom-color: #292929; }
.card .card-list li:last-child { border-bottom: 0; }
.card .tail { margin-top: auto; padding-top: 20px; font-size: 12.5px; line-height: 1.55; color: var(--gray); }
.card--rec .tail { color: #9A9A9A; }

/* ---------- SERVICES TABLE ---------- */
.svc-table { width: 100%; border-collapse: collapse; margin-top: 44px; }
.svc-table thead th {
  font-size: var(--t-label); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gray); font-weight: 500; text-align: left;
  padding-bottom: 14px; border-bottom: var(--rule-major);
}
.svc-table thead th.r { text-align: right; }
.svc-table tbody td {
  padding: 16px 0; border-bottom: var(--rule-minor);
  font-size: 15.5px; color: var(--ink); vertical-align: top;
}
.svc-table tbody td.desc { font-size: 13px; color: var(--gray); padding: 16px 28px; }
.svc-table tbody td.r { text-align: right; font-weight: 500; white-space: nowrap; }
.svc-table tbody tr:last-child td { border-bottom: 1px solid var(--black); }

/* ---------- SLA / PHASES BANDS ---------- */
.band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 44px; }
.band > div { border-top: var(--rule-major); padding: 24px 24px 0 0; }
.band > div:not(:first-child) { border-left: var(--rule-minor); padding-left: 26px; }
.band .tier { font-size: var(--t-label); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gray); }
.band .time { font-size: clamp(20px, 2.6vw, 26px); font-weight: 300; letter-spacing: -0.025em; margin-top: 14px; line-height: 1.15; }
.band .mo { font-size: var(--t-label); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gray); }
.band .ph { font-size: clamp(20px, 2.6vw, 26px); font-weight: 400; letter-spacing: -0.02em; margin-top: 12px; }
.band .desc { font-size: 13.5px; line-height: 1.6; color: var(--graphite); margin-top: 14px; }

/* ---------- TECHNICAL PLATES (SVG illustrations) ---------- */
.plate-img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--hair);
}
.section--dark .plate-img { border-color: #2E2E2E; }
.cell .plate-img { border: 0; margin-top: 16px; }

/* ---------- PLATE (image placeholder, refined) ---------- */
.plate {
  background:
    repeating-linear-gradient(-45deg, transparent 0 11px, rgba(0,0,0,0.02) 11px 12px),
    var(--stone);
  background-size: cover; background-position: center;
  position: relative; overflow: hidden;
}
.plate[data-label]::after {
  content: attr(data-label);
  position: absolute; left: 12px; bottom: 11px;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: #8E8E8C;
}
.plate-cap { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray); margin-top: 10px; }

/* ---------- CTA STRIP ---------- */
.cta .h-section { max-width: 18ch; }
.cta .btn { margin-top: 28px; }

/* ---------- ECOSYSTEM ROW ---------- */
.eco { display: flex; flex-wrap: wrap; margin-top: 44px; border-top: 1px solid #2E2E2E; padding-top: 22px; }
.eco span {
  font-size: var(--t-label); letter-spacing: 0.22em; text-transform: uppercase; color: #EDEDED;
  padding-right: 18px; margin-right: 18px; border-right: 1px solid #333;
}
.eco span:last-child { border-right: 0; }

/* ---------- CONTACT FORM ---------- */
.form { margin-top: 44px; max-width: 620px; }
.field { margin-bottom: 22px; }
.field label {
  display: block; font-size: var(--t-label); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gray); font-weight: 500; margin-bottom: 9px;
}
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 15.5px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--rule);
  padding: 11px 2px; transition: border-color 140ms ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--black);
}
.field textarea { resize: vertical; min-height: 120px; }
.form .btn { margin-top: 6px; cursor: pointer; }
.form-note { font-size: 12.5px; color: var(--gray); margin-top: 22px; letter-spacing: 0.02em; }

/* ---------- SITE FOOTER ---------- */
.site-footer { background: var(--black); color: #fff; padding: clamp(56px, 8vw, 88px) 0 40px; }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-glyph { background: #fff; color: #000; }
.foot-tag { font-size: 13px; color: #8A8A8A; margin-top: 20px; line-height: 1.7; max-width: 30ch; }
.foot-col h4 { font-size: var(--t-label); letter-spacing: 0.24em; text-transform: uppercase; color: #8A8A8A; font-weight: 500; margin-bottom: 16px; }
.foot-col a, .foot-col p { display: block; font-size: 14px; color: #D8D8D8; padding: 5px 0; }
.foot-col a:hover { color: #fff; }
.foot-base {
  border-top: 1px solid #2E2E2E; margin-top: 56px; padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.foot-base span { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #6A6A6A; }

/* ---------- ACCESSIBILITY ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--black); outline-offset: 3px;
}
.section--dark a:focus-visible, .site-footer a:focus-visible { outline-color: #fff; }
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: #000; color: #fff; padding: 12px 18px; z-index: 100;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

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

/* ============================================================
   RESPONSIVE
   The failure mode: a 3-col grid of hairline spec lists
   collapsing into undifferentiated grey. Keep the black rules,
   drop to one column — the rules are the brand.
   ============================================================ */
@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr; }
  .split, .split--argument { grid-template-columns: 1fr; }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .grid--2 { grid-template-columns: 1fr; }
  .grid--3 .cell, .grid--2 .cell, .grid--4 .cell {
    border-left: 0 !important; padding-left: 0 !important;
  }
  .stat-row { grid-template-columns: 1fr; }
  .stat:not(:first-child) { border-left: 0; padding-left: 0; }
  /* stacked stats need breathing room before the next rule,
     otherwise the label sits tight against the black line below */
  .stat { padding: 24px 0 30px; }
  .band { grid-template-columns: 1fr; }
  .band > div:not(:first-child) { border-left: 0; padding-left: 0; }
  .band > div { padding: 24px 0 4px; }
  .svc-table td.desc, .svc-table th:nth-child(2) { display: none; }
  .site-footer .wrap { grid-template-columns: 1fr; gap: 32px; }

  /* Ecosystem row: the vertical dividers only make sense on one
     line. Wrapped to several ragged lines on mobile they float
     mid-air, so switch to a clean stacked list with hairlines. */
  .eco { flex-direction: column; gap: 0; }
  .eco span {
    width: 100%;
    padding: 12px 0;
    margin-right: 0;
    border-right: 0;
    border-bottom: 1px solid #2E2E2E;
  }
  .eco span:last-child { border-bottom: 0; }

  /* Nav wraps below the wordmark on small screens */
  .site-header .wrap { flex-wrap: wrap; gap: 12px; }
  .nav { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 14px 20px; }
}