/* MERIDIAN — the modern dark-tech register.

   Structure is taken from a pinned architecture-studio reference: a fixed left
   rail carrying a section counter, enormous section words behind the content,
   edge-to-edge image bands, one giant numeral filled with photography.

   The TREATMENT is deliberately not that reference's. That template dresses in
   wide-tracked tan capitals, which is the look of a 2016 portfolio theme. Here
   the same furniture is rendered in the current idiom: near-black ground, tight
   negative tracking at large display sizes, a violet-to-cyan accent taken
   straight out of the photography, hairline glass panels, and one radial bloom
   behind the hero. Wide tracking survives only on 10px utility labels, which is
   the one place it still earns its keep.

   Imagery is Burst (Shopify) stock — light-painting, a motherboard macro, deep
   teal — chosen because the other five variants all run the same warm terrain
   photography and it had stopped distinguishing them. */
@import url("base.css");
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@200;300;400;600&family=Figtree:wght@300;400;500&display=swap");

:root {
  --bg: #08090c; --bg2: #0e1015; --ink: #f2f4f8; --soft: #99a2b1; --faint: #646c7a;
  --line: #1c2029; --accent: #7c5cff; --accent2: #35d6e7; --onaccent: #07080b;
  --radius: 0;
  --disp: "Sora", system-ui, sans-serif; --text: "Figtree", system-ui, sans-serif;
  --pad: clamp(22px, 5vw, 78px);
  --rail: 84px;
  --glass: rgba(255,255,255,.035);
}

body { background: var(--bg); font-family: var(--text); font-weight: 300; }
h1, h2, h3 { font-family: var(--disp); font-weight: 300; letter-spacing: -.03em; }

/* Two-tone heading, kept from the reference — but set tight and sentence-cased
   rather than tracked-out capitals. */
h2 { font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.08; }
h2 span { background: linear-gradient(96deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent); }

/* Wide tracking survives only here, at utility size. */
.over, .under, .k, .plan__per, .foot__col h3, .row__n, .band__tag, .rail__txt, .fig__cap {
  font-family: var(--text); text-transform: uppercase; letter-spacing: .2em; }

/* ── Fixed rail ── */
.rail { position: fixed; top: 33px; left: 0; bottom: 0; width: var(--rail); z-index: 140;
  background: var(--bg2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; padding: 24px 0 20px; }
/* The mark is a gradient asset, not a currentColor glyph, so it carries its own
   brand blues rather than picking up the rail's accent. */
.rail__mark { width: 26px; height: 26px; flex: none; }
.rail__count { margin-top: 26px; text-align: center; line-height: 1; }
.rail__count b { display: block; font-family: var(--disp); font-weight: 200; font-size: 2.1rem;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, var(--accent2), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent2); }
.rail__count i { font-style: normal; font-size: .64rem; letter-spacing: .16em; color: var(--faint);
  display: block; margin-top: 5px; }
/* Vertical text lengthens as it grows, so the tracking eases off as the size
   goes up — otherwise the tagline runs into the counter on a short viewport. */
.rail__txt { margin: auto 0; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: .66rem; letter-spacing: .16em; color: var(--soft); }
.rail__links a { color: var(--soft); text-decoration: none; font-size: .66rem;
  writing-mode: vertical-rl; letter-spacing: .16em; text-transform: uppercase; }
.rail__links a:hover { color: var(--accent2); }

.shell { margin-left: var(--rail); }

/* ── Buttons: gradient pill ── */
.btn { display: inline-flex; align-items: center; gap: .6em; padding: 13px 26px; cursor: pointer;
  font-family: var(--text); font-size: .82rem; font-weight: 500; text-decoration: none;
  border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--ink);
  transition: border-color .35s var(--ease), background .35s var(--ease); }
.btn:hover { border-color: var(--accent); background: rgba(124,92,255,.12); }
.btn--go { border-color: transparent; color: var(--onaccent); font-weight: 600;
  background: linear-gradient(96deg, var(--accent), var(--accent2)); }
.btn--go:hover { filter: brightness(1.12); background: linear-gradient(96deg, var(--accent), var(--accent2)); }
.btn:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; }

/* ── Nav ── */
.nav { position: fixed; top: 33px; left: var(--rail); right: 0; z-index: 150;
  transition: background .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(8,9,12,.82); backdrop-filter: blur(12px); border-bottom-color: var(--line); }
/* The brand tucks in close to the rail's edge rather than sitting a full gutter
   off it — the rail already frames that side, so a second large inset just
   leaves the lockup floating. The right side keeps the full gutter. */
.nav__in { display: flex; align-items: center; gap: 26px; height: 68px;
  padding-left: 24px; padding-right: var(--pad); }
/* The logo sets SYNTRA light against LOGIC bold. The wordmark keeps that weight
   break — flattening it to one weight loses the only thing distinguishing it
   from any other name set in the display face. */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink);
  font-family: var(--disp); font-weight: 300; font-size: 1.06rem; letter-spacing: -.01em; }
.brand b { font-weight: 600; }
.nav__links { display: flex; gap: 24px; margin-left: auto; font-size: .95rem; }
.nav__links a { text-decoration: none; color: var(--soft); }
.nav__links a:hover { color: var(--ink); }
.nav__cta { padding: 10px 22px; font-size: .9rem; }
.nav__toggle { display: none; width: 44px; height: 44px; margin-left: auto; background: transparent;
  border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.nav__toggle span { display: block; width: 15px; height: 1px; margin: 4px auto; background: currentColor; }
.nav__mobile { display: none; flex-direction: column; padding: 6px var(--pad) 22px;
  background: rgba(8,9,12,.97); border-top: 1px solid var(--line); }
.nav__mobile a { padding: 14px 0; text-decoration: none; border-bottom: 1px solid var(--line); }

/* ── Hero ──────────────────────────────────────────────────────────
   The light-painting photograph is nearly black outside the ribbon, so it
   composites onto the ground rather than sitting in a box: no scrim needed
   across the whole frame, only a bloom under the type. */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center;
  padding: 132px var(--pad) 90px; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; background: #08090c center/cover no-repeat; opacity: .85; }
.hero__bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 55% at 50% 45%, rgba(8,9,12,.35), rgba(8,9,12,.9) 78%); }
.hero__in { position: relative; width: min(64ch, 100%); }
/* Tracking eases as the size goes up — .2em was set for 10px text, and at this
   size it opens the words far enough apart to stop reading as one phrase. */
.over, .under { font-size: .8rem; letter-spacing: .15em; margin: 0; color: var(--soft); }
.hero h1 { font-weight: 200; font-size: clamp(3.2rem, 12vw, 9rem); line-height: .92;
  letter-spacing: -.055em; margin: .22em 0 .2em;
  background: linear-gradient(96deg, #ffffff 18%, var(--accent2) 62%, var(--accent) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--ink); }
.hero .under { color: var(--accent2); }
.hero .lede { color: #cfd5e0; margin: 22px auto 32px; max-width: 52ch; }
.hero__cta { display: flex; gap: 13px; flex-wrap: wrap; justify-content: center; }
.cue { position: absolute; left: 50%; translate: -50% 0; bottom: 30px; width: 22px; height: 38px;
  stroke: var(--faint); stroke-width: 1.1; fill: none; }

/* ── Sections + outlined section word ─────────────────────────────
   The reference ghosts its section words as flat low-opacity fills. Outlining
   them instead keeps them legible as structure at this scale without adding a
   grey mass behind the prose. Decoration only — aria-hidden in the markup. */
.sec { position: relative; overflow: hidden; padding: clamp(60px, 8vw, 108px) var(--pad);
  border-top: 1px solid var(--line); }
.sec--alt { background: var(--bg2); }
.sec__in { position: relative; width: min(1180px, 100%); margin-inline: auto; }
.wm { position: absolute; left: -.04em; top: .04em; z-index: 0; pointer-events: none;
  user-select: none; font-family: var(--disp); font-weight: 600; text-transform: lowercase;
  font-size: clamp(4.5rem, 14vw, 11rem); line-height: .8; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(153,162,177,.14); white-space: nowrap; }
.head { position: relative; margin-bottom: clamp(28px, 4vw, 48px); }
.head .lede { margin-top: 14px; max-width: 48ch; color: var(--soft); }

/* Rows as hairline glass cards rather than ruled list items. */
.row { position: relative; padding: 20px 22px; border: 1px solid var(--line); background: var(--glass);
  border-radius: 14px; max-width: 64ch; margin-bottom: 10px;
  transition: border-color .35s var(--ease); }
.row:hover { border-color: #2b3140; }
.row h3 { font-size: 1.1rem; margin-bottom: 7px; letter-spacing: -.02em; }
.row p { color: var(--soft); font-size: .95rem; }
.row--lead { border-color: rgba(124,92,255,.45); background: rgba(124,92,255,.07); }
.row__n { font-size: .58rem; color: var(--accent2); margin-right: 9px; }
.step__claim { color: var(--ink); }
.muted { color: var(--faint); font-size: .9rem; }
/* A real figure has to carry the card. Set in the display face at heading scale
   with tabular figures so the three tiers' digits line up down the column, and
   the qualifier drops to its own line rather than trailing the number. */
.plan__fig { font-family: var(--disp); font-weight: 300; font-size: 1.55rem;
  letter-spacing: -.035em; line-height: 1.1; color: var(--ink);
  font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.plan__per { display: block; margin-top: 6px; font-size: .58rem; color: var(--faint); }
.plan__list { list-style: none; padding: 0; margin: 12px 0 18px; display: grid; gap: 7px; }
.plan__list li { position: relative; padding-left: 17px; font-size: .9rem; color: var(--soft); }
.plan__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent2)); }

/* ── Edge-to-edge band ── */
.band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.band__cell { position: relative; min-height: clamp(230px, 30vw, 360px);
  background: #08090c center/cover no-repeat; }
.band__cell::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,9,12,.35), rgba(8,9,12,.82));
  transition: opacity .5s var(--ease); }
.band__cell:hover::after { opacity: .55; }
.band__lab { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 24px;
  font-family: var(--disp); font-size: 1.05rem; letter-spacing: -.02em; color: var(--ink); line-height: 1.3; }
.band__tag { position: absolute; z-index: 1; left: 24px; top: 24px; font-size: .55rem; color: var(--accent2); }

/* ── Photo-filled numeral ──────────────────────────────────────────
   background-clip:text needs the -webkit- prefix outside Firefox plus a
   transparent text fill; color is set last so an unsupporting browser still
   gets a solid numeral rather than an invisible one. */
.fig { position: relative; display: grid; place-items: center; text-align: center; gap: 14px;
  padding: clamp(64px, 9vw, 124px) var(--pad); background: var(--bg2);
  border-top: 1px solid var(--line); }
.fig__n { font-family: var(--disp); font-weight: 600; font-size: clamp(6.5rem, 22vw, 16rem);
  line-height: .82; letter-spacing: -.06em;
  background: url("/assets/img/stock/numeral.webp") center/cover;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent2); }
.fig__cap { font-size: .64rem; color: var(--soft); max-width: 30ch; line-height: 2; }

/* ── FAQ ── */
.faq details { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 19px 40px 19px 0; position: relative;
  font-family: var(--disp); font-size: 1.02rem; letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 2px; top: 50%; translate: 0 -50%;
  color: var(--faint); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--soft); padding-bottom: 19px; margin: 0; max-width: 56ch; font-size: .94rem; }
.faq .faqBody { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s var(--ease); }
.faq .faqBody > div { overflow: hidden; }
.faq details.closing .faqBody { grid-template-rows: 0fr; }

/* ── Contact + footer ── */
.contact { position: relative; overflow: hidden; padding: clamp(62px, 8vw, 112px) var(--pad);
  border-top: 1px solid var(--line); }
.contact .wrap { position: relative; width: min(1180px, 100%); }
.contact h2 { margin-bottom: 16px; }
.contact__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 6vw, 72px);
  align-items: start; }
.channels { margin-top: 26px; border-top: 1px solid var(--line); }
.channel { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0;
  border-bottom: 1px solid var(--line); text-decoration: none; }
.k { font-size: .55rem; color: var(--faint); padding-top: .35em; }
a.channel .v { color: var(--accent2); }
.field input, .field select, .field textarea { background: var(--bg2); color: var(--ink);
  border-color: var(--line); border-radius: 10px; }

.foot { background: var(--bg2); border-top-color: var(--line); padding-inline: var(--pad); }
.foot .wrap { width: min(1180px, 100%); }
.foot__col a, .foot__tag { color: var(--soft); }
.foot__bar { color: var(--faint); }
.credit { color: var(--faint); font-size: .78rem; }
.credit a { color: var(--soft); }

@media (max-width: 1100px) {
  .rail { display: none; }
  .shell { margin-left: 0; }
  .nav { left: 0; }
}
@media (max-width: 760px) {
  .band { grid-template-columns: 1fr; }
  .band__cell { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .band__cell::after, .btn, .nav, .row { transition: none; }
}

/* ── Automation intake chat ────────────────────────────────────────
   Styled from Meridian's own tokens rather than ported from the live site's
   cream-and-gold: the launcher is the same gradient pill as .btn--go, bot
   bubbles are the hairline glass used by .row, and the visitor's own replies
   carry the accent so the two speakers separate without avatars.

   The panel is fixed to the viewport's bottom-right and sits above the rail's
   z-index, so it stays reachable while the rail is pinned. */
.chat { position: fixed; right: 20px; bottom: 20px; z-index: 300;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.chatPanel[hidden], .chatChips[hidden] { display: none; }

.chatOpen { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 12px 20px; border: 0; border-radius: 999px;
  font-family: var(--text); font-size: .88rem; font-weight: 600; color: var(--onaccent);
  background: linear-gradient(96deg, var(--accent), var(--accent2));
  box-shadow: 0 8px 28px rgba(124,92,255,.32);
  transition: filter .3s var(--ease), transform .3s var(--ease); }
.chatOpen:hover { filter: brightness(1.1); transform: translateY(-1px); }
.chatOpen svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linejoin: round; }
.chat--open .chatOpen svg { transform: rotate(0); opacity: .8; }

.chatPanel { width: min(374px, calc(100vw - 40px)); display: flex; flex-direction: column;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.55); }

.chatHead { display: flex; align-items: center; gap: 11px; padding: 13px 15px;
  border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); }
.chatHead div { display: flex; flex-direction: column; line-height: 1.3; }
.chatHead strong { font-family: var(--disp); font-weight: 500; font-size: .92rem;
  letter-spacing: -.02em; color: var(--ink); }
.chatHead span { font-size: .68rem; color: var(--faint); }
.chatDot { width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--accent2); box-shadow: 0 0 0 3px rgba(53,214,231,.16); }
.chatX { margin-left: auto; width: 30px; height: 30px; cursor: pointer; font-size: 19px;
  line-height: 1; color: var(--soft); background: transparent; border: 1px solid transparent;
  border-radius: 8px; }
.chatX:hover { color: var(--ink); border-color: var(--line); }

.chatLog { padding: 15px; display: flex; flex-direction: column; gap: 9px;
  height: 316px; overflow-y: auto; overscroll-behavior: contain; }
.chatMsg { max-width: 84%; padding: 9px 13px; border-radius: 13px; font-size: .88rem;
  line-height: 1.5; }
.chatMsg p { margin: 0; max-width: none; }
.chatMsg--bot { align-self: flex-start; background: var(--glass); border: 1px solid var(--line);
  color: var(--ink); border-bottom-left-radius: 4px; }
.chatMsg--you { align-self: flex-end; background: rgba(124,92,255,.16);
  border: 1px solid rgba(124,92,255,.4); color: var(--ink); border-bottom-right-radius: 4px; }

.chatTyping { display: flex; gap: 4px; align-items: center; padding: 13px; }
.chatTyping span { width: 6px; height: 6px; border-radius: 50%; background: var(--faint);
  animation: chatBlink 1.2s infinite ease-in-out; }
.chatTyping span:nth-child(2) { animation-delay: .18s; }
.chatTyping span:nth-child(3) { animation-delay: .36s; }
@keyframes chatBlink { 0%,80%,100% { opacity: .28 } 40% { opacity: 1 } }

.chatChips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 15px 12px; }
.chatChip { cursor: pointer; font-family: var(--text); font-size: .78rem; padding: 7px 13px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--ink);
  transition: border-color .25s var(--ease), background .25s var(--ease); }
.chatChip:hover { border-color: var(--accent); background: rgba(124,92,255,.14); }

.chatForm { display: flex; gap: 8px; padding: 12px 15px; border-top: 1px solid var(--line); }
.chatForm input { flex: 1; min-width: 0; padding: 10px 13px; font: inherit; font-size: .88rem;
  color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.chatForm input:focus { outline: none; border-color: var(--accent); }
.chatSendBtn { flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  cursor: pointer; border: 0; border-radius: 10px; color: var(--onaccent);
  background: linear-gradient(96deg, var(--accent), var(--accent2)); }
.chatSendBtn:disabled { opacity: .4; cursor: not-allowed; }
.chatSendBtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.chatChip:focus-visible, .chatX:focus-visible, .chatOpen:focus-visible,
.chatSendBtn:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

/* Visually hidden but still announced — the chat input's label. */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 560px) {
  .chat { right: 14px; bottom: 14px; left: 14px; align-items: stretch; }
  .chatPanel { width: 100%; }
  .chatOpen { align-self: flex-end; }
  .chatLog { height: 46vh; }
}
@media (prefers-reduced-motion: reduce) {
  .chatTyping span { animation: none; opacity: .6; }
  .chatOpen { transition: none; }
}

/* Footer legal links. Own colour so they read as navigation rather than as more
   of the footer's small print, which the credit line beside them is. */
.legal-links { display: flex; gap: 16px; }
.legal-links a { color: var(--soft); text-decoration: none; }
.legal-links a:hover { color: var(--accent2); }