/* 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("fonts.css");

:root {
  --bg: #08090c; --bg2: #0e1015; --ink: #f2f4f8; --soft: #99a2b1; --faint: #646c7a;
  --line: #1c2029; --accent: #4fc3d2; --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: 400; }
h1, h2, h3 { font-family: var(--disp); font-weight: 400; letter-spacing: -.03em; }

/* The one accent, used as a flat colour — not a background-clip gradient, which
   is the single most recognisable "AI made this" tell. */
h2 { font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.08; }
h2 span { 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 {
  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: 300; font-size: 2.1rem;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--accent); }
.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(--accent); }

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

/* ── Buttons: 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(79,195,210,.12); }
.btn--go { border-color: transparent; color: var(--onaccent); font-weight: 600;
  background: var(--accent); }
.btn--go:hover { filter: brightness(1.08); background: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Nav ── */
/* The bar floats 33px down the viewport, which is the reference's look and is
   kept. What was wrong is that nothing occupied those 33px: the element began
   at y=33, so once the page scrolled you could watch copy slide past ABOVE the
   nav through a transparent strip.
   Anchoring at y=0 with the offset as padding leaves the bar's contents exactly
   where they were and extends its backdrop up to the top of the screen, so the
   blur in .scrolled now covers the strip instead of starting below it. */
.nav { position: fixed; top: 0; left: var(--rail); right: 0; z-index: 150;
  padding-top: 33px;
  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; }
/* The stock light-painting reads violet out of the box, which is the exact hue
   this register drops. Rotated onto the teal accent and slightly desaturated so
   it sits in the same palette as everything else. Tune the angle if the photo
   is ever replaced. */
.hero__bg { position: absolute; inset: 0; background: #08090c center/cover no-repeat; opacity: .85;
  filter: hue-rotate(-55deg) saturate(.8); }
.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: 300; font-size: clamp(3.2rem, 12vw, 9rem); line-height: .92;
  letter-spacing: -.055em; margin: .22em 0 .2em; color: var(--ink); }
/* base.css caps every p at 68ch, which at this font size is 555px inside a
   694px hero column. text-align:center centres the TEXT within the box, not
   the box within its parent, so the line sat 69px left of the headline. .lede
   escapes this by having auto inline margins; .under is caught by the shared
   ".over, .under { margin: 0 }" rule, so it gets them back explicitly. */
.hero .under { color: var(--accent); margin-inline: auto; }
.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(79,195,210,.45); background: rgba(79,195,210,.07); }
/* The step numbers are read as part of the heading they sit in, not as a
   corner label, so they carry more size than the other utility text. */
.row__n { font-size: .76rem; color: var(--accent); 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: 400; 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: var(--accent); }

/* ── 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(--accent); }


/* ── 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(--accent); }
.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); }

@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: var(--accent);
  box-shadow: 0 8px 28px rgba(79,195,210,.28);
  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(4,7,14,.6); }

.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(--accent); box-shadow: 0 0 0 3px rgba(79,195,210,.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(79,195,210,.16);
  border: 1px solid rgba(79,195,210,.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(79,195,210,.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: var(--accent); }
.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(--accent); 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(--accent); }

/* ── Currency switcher ─────────────────────────────────────────────
   A custom listbox rather than a native <select>, because the options carry
   flags. Deliberately quiet: it is a display preference, not a call to action,
   so it must not compete with the gradient button beside it. */
.flag { width: 20px; height: 14px; flex: none; border-radius: 2px; display: block; }

.cur { position: relative; }
.cur__btn { display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 9px 7px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--glass); color: var(--soft); font-family: var(--text);
  font-size: .8rem; font-weight: 500; line-height: 1;
  transition: border-color .25s var(--ease), color .25s var(--ease); }
.cur__btn:hover, .cur.is-open .cur__btn { color: var(--ink); border-color: var(--accent); }
.cur__code { letter-spacing: .04em; }
.cur__chev { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.cur.is-open .cur__chev { transform: rotate(180deg); }
.cur__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cur__list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 200px; margin: 0; padding: 5px; list-style: none;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(4,7,14,.55); }
.cur__list[hidden] { display: none; }
.cur__list li { display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 8px 10px; border-radius: 8px; color: var(--soft); font-size: .84rem;
  transition: background .2s var(--ease), color .2s var(--ease); }
.cur__list li b { font-weight: 600; color: var(--ink); letter-spacing: .04em; }
.cur__list li span { color: var(--faint); font-size: .78rem; margin-left: auto; }
.cur__list li:hover, .cur__list li.is-active { background: var(--glass); color: var(--ink); }
.cur__list li.is-active { outline: 1px solid var(--accent); outline-offset: -1px; }
.cur__list li[aria-selected="true"] b { color: var(--accent); }
.cur__list li:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.cur.is-loading { opacity: .6; pointer-events: none; }
.cur[data-error]::after { content: attr(data-error); position: absolute; top: calc(100% + 8px);
  right: 0; white-space: nowrap; font-size: .68rem; color: #e0a75f;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; }

@media (max-width: 1100px) { .cur { margin-left: auto; } }
@media (max-width: 420px) {
  .cur__btn { padding: 6px 7px; gap: 5px; }
  .cur__code { display: none; }   /* flag + chevron only; the list still names each */
  .cur__list { min-width: 178px; }
}
@media (prefers-reduced-motion: reduce) { .cur__chev, .cur__btn, .cur__list li { transition: none; } }

/* Service rows that have their own page read as links without becoming buttons. */
.row h3 a { color: inherit; text-decoration: none; }
.row h3 a:hover { color: var(--accent); }
.row p a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.row p a:hover { text-decoration: underline; }
.head .lede a { color: var(--accent); text-decoration: none; }
.head .lede a:hover { text-decoration: underline; }

/* Hero particle field.
   The canvas is inserted as the hero's first child, so .hero__bg is a LATER
   sibling — with both at the same stacking level the photo and its scrim
   painted straight over the particles. Every layer here is given an explicit
   z-index rather than relying on source order. */
.heroParticles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__bg { z-index: 1; }
/* The photograph sits over the field, so it has to let it through: the image
   drops to a low opacity and its radial scrim is removed, otherwise the scrim
   alone would bury the particles the same way the whole layer used to. */
/* The photograph sits over the field. It has to be sheer enough to read the
   dots through, and its radial scrim has to come right down — at full strength
   the scrim alone erases the particles even when the image does not. */
.hero:has(.heroParticles) .hero__bg { opacity: .32; }
.hero:has(.heroParticles) .hero__bg::after { opacity: .22; }
.hero__in { position: relative; z-index: 2; }
.hero .cue { z-index: 2; }

/* With the field visible through the type, the headline carries its own light
   rather than relying on a cleared background. */
.hero:has(.heroParticles) h1 {
  filter: drop-shadow(0 0 22px rgba(79,195,210,.30)) drop-shadow(0 0 60px rgba(8,9,12,.85));
}
.hero:has(.heroParticles) .lede,
.hero:has(.heroParticles) .under { text-shadow: 0 0 14px rgba(8,9,12,.9); }

/* ── Eyebrow with wires ────────────────────────────────────────────
   Two rules run out from the badge to the edges of the headline, and nothing
   encloses the text. The wires are flex children of the eyebrow itself, and the
   eyebrow spans the fit-content title block, so they reach the headline's edges
   at any font size. No viewBox, no tuned offsets, nothing to drift out of
   register.

   The floor width guards the middle widths. Above about 940px the headline is
   wider than the floor and the wires track it exactly, as designed. Below that
   the headline shrinks with the viewport while the badge — fixed at label size
   — does not, so the wires would thin to stubs and then overflow. The floor
   holds the block open until the 760px rule drops the wires entirely. It also
   means a much shorter headline still gets a frame rather than collapsing. */
.hero__title { position: relative; width: fit-content; min-width: min(540px, 100%);
  margin-inline: auto; --crown: 46px; }
.hero__title h1 { margin-top: 0; }

.hero .over {
  position: absolute; left: 50%; top: calc(0.06em - var(--crown));
  translate: -50% -50%; width: 100%; margin: 0; z-index: 1;
  display: flex; align-items: center; gap: 18px; white-space: nowrap;
}
.hero .over i {
  position: relative; flex: 1 1 auto; height: 2px;
  background: linear-gradient(90deg, rgba(79,195,210,0), rgba(180,214,240,.85));
  box-shadow: 0 0 10px rgba(79,195,210,.55), 0 0 22px rgba(79,195,210,.35);
}
.hero .over i:last-child {
  background: linear-gradient(90deg, rgba(180,214,240,.85), rgba(79,195,210,0));
}
/* A short upright at each outer end, so the wires read as deliberate rather
   than as rules that ran out of room. */
.hero .over i::after {
  content: ""; position: absolute; top: -7px; width: 2px; height: 16px;
  background: rgba(180,214,240,.85);
  box-shadow: 0 0 10px rgba(79,195,210,.55);
}
.hero .over i:first-child::after { left: 0; }
.hero .over i:last-child::after { right: 0; }

.hero .over span {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 36px;
  padding: 0 22px; border: 1px solid rgba(180,214,240,.5); border-radius: 2px;
  background: var(--bg);
  box-shadow: 0 0 18px rgba(79,195,210,.20), inset 0 0 18px rgba(79,195,210,.06);
}

/* ══ Mobile ════════════════════════════════════════════════════════
   These must live at the end of this file. base.css is @imported at the top,
   so its own max-width:940px block comes FIRST in the cascade, and media
   queries add no specificity, so any unconditional rule here beat it. That is
   why the nav never collapsed and the links ran off the screen. */

@media (max-width: 940px) {
  /* Nav collapses to the burger the markup and site.js already support. */
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: block; order: 3; }
  .nav__mobile { display: none; }
  .nav__mobile:not([hidden]) { display: flex; }

  .nav__in { gap: 12px; padding-left: 16px; padding-right: 16px; height: 60px; }
  .brand { font-size: .98rem; white-space: nowrap; }
  .brand .mark { width: 24px; height: 24px; }

  /* Switcher stays — a price you cannot read in your own currency is worse
     than a crowded bar — but it gives up the code and shows the flag only. */
  .cur { margin-left: auto; order: 2; }
  .cur__code { display: none; }

  .rail { display: none; }
  .shell { margin-left: 0; }
  .nav { left: 0; }
}

@media (max-width: 760px) {
  /* Hero: the frame and the eyebrow's absolute placement both assume desktop
     width. On a phone the badge returns to normal flow above the headline. */
  .hero { padding: 104px 20px 72px; min-height: 92svh; }
  .hero h1 { font-size: clamp(2.6rem, 17vw, 4.4rem); letter-spacing: -.045em; }
  .hero .lede { font-size: .95rem; }
  .hero__title { width: 100%; }
  /* Too little width either side of the badge for the wires to mean anything. */
  .hero .over { position: static; translate: none; width: auto; margin-bottom: 1em;
                justify-content: center; }
  .hero .over i { display: none; }

  .band { grid-template-columns: 1fr; }
  .row { padding: 16px 18px; }
  .sec { padding: 52px 20px; }
  .wm { font-size: clamp(3.4rem, 22vw, 6rem); }

  .contact__grid { grid-template-columns: 1fr; }
  .foot__in { grid-template-columns: 1fr; gap: 26px; }
  .foot__bar { flex-direction: column; gap: 8px; }
}

@media (max-width: 480px) {
  .plan__fig { font-size: 1.3rem; }
  .chatOpen span { display: none; }        /* icon-only launcher */
  .chatOpen { padding: 13px; }
}

/* Nothing should ever scroll sideways. The nav overflow made it, and a phone
   showing a horizontal scrollbar reads as broken however good the rest is. */
html, body { overflow-x: hidden; max-width: 100%; }

/* ── Group headings inside "What we build" ─────────────────────────
   The list was doing two jobs with one ordering: ranking by value, and
   signalling how much commitment each option asks for. That is why its lede
   needed an "with one exception" clause, which is always a sign the structure
   is wrong rather than the copy.

   Two labelled groups instead. The readiness review can then lead its own group
   without implying it gates every engagement, which would contradict the
   readiness page itself: connecting two clean systems does not need one.

   Set as a rule with the label sitting on it, so a group reads as a divider
   rather than as another card in the list. */
.grp { position: relative; margin: 34px 0 14px; padding-top: 18px;
  border-top: 1px solid var(--line); max-width: 64ch; }
.grp:first-of-type { margin-top: 0; }
.grp__t { font-family: var(--text); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em; color: var(--accent);
  margin: 0 0 6px; }
.grp__d { color: var(--faint); font-size: .9rem; margin: 0; max-width: 52ch; }