/* =========================================================
   METRIXBITE
   Direction: measuring instrument. The studio's whole position
   is that the price is posted, and the name is Metrix. So the
   organising device of the page is a calibrated scale, and the
   services are a tariff, not a card grid.
   ========================================================= */

/* ---------- fonts (self-hosted: no third-party request) ----------
   Archivo is variable on BOTH weight and width; the display voice is
   the same family pushed wide (font-stretch 112-120%), the body voice
   is it at normal width. IBM Plex Mono carries every number, because
   numbers are the argument this page is making.
   latin-ext is not optional here: s-comma, t-comma and a-breve live
   there, and Romanian is unreadable without them. */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{font-family:'Plex';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plexmono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Plex';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plexmono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plex';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plexmono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Plex';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plexmono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plex';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plexmono-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Plex';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plexmono-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  /* Cool pale ground, not cream. The teal is the existing brand mark and
     stays; brass is the needle - it marks positions, it is never body text. */
  --paper:#EDF1F0;
  --paper-2:#F7F9F8;
  --white:#fff;
  --ink:#0B1619;
  --ink-2:#13242A;
  --muted:#4E6165;
  --teal:#0089A5;
  --teal-deep:#04566A;
  --brass:#B8790F;      /* marks only: ticks, rules, bullets (graphic, 3:1) */
  --brass-ink:#8F5D07;  /* brass as TEXT: 4.94:1 on paper */
  --rule:#C3D0CF;

  --r:4px;
  --ease:cubic-bezier(.2,.8,.25,1);
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Plex','IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(72px,9vw,132px);
}

*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:clip, not hidden. `hidden` would make the root a scroll
   container, which is one of the ways a sticky header comes unpinned;
   `clip` just refuses to scroll sideways and leaves the sticky header
   attached to the viewport. Needed because .reveal-right parks
   .collio-visual 32px to the right of its column until it scrolls into
   view, and that pre-reveal state was pushing the document 11px wider
   than the screen. */
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--sans);font-stretch:100%;font-weight:400;
  background:var(--paper);color:var(--ink);
  line-height:1.62;-webkit-font-smoothing:antialiased;
  /* Deliberately no overflow-x here. Nothing on the page overflows sideways,
     and any non-visible overflow on the body risks making it a scroll
     container, which is one of the ways a fixed navbar comes unpinned. */
  font-variant-numeric:tabular-nums;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
ul{list-style:none}
.container{width:min(1180px,90%);margin:0 auto}
section{position:relative;padding:var(--pad) 0;scroll-margin-top:78px}
::selection{background:var(--brass);color:#fff}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- shared type ---------- */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Eyebrows are a brass tick plus mono caps - the same mark language as the
   scale, so labels read as instrument annotation rather than decoration. */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep);
}
.eyebrow::before{content:"";width:14px;height:2px;background:var(--brass);flex:none}

.sec-title{
  font-size:clamp(1.85rem,3.7vw,2.85rem);font-weight:800;font-stretch:114%;
  letter-spacing:-.025em;line-height:1.06;margin:20px 0 16px;
}
.sec-sub{color:var(--muted);font-size:1.03rem;max-width:56ch}
.sec-head{max-width:660px;margin-bottom:clamp(44px,6vw,72px)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:var(--r);
  font-weight:650;font-stretch:104%;font-size:.95rem;letter-spacing:-.005em;
  border:1px solid transparent;transition:.22s var(--ease);white-space:nowrap;
}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--ink-2)}
.btn-teal{background:#00738A;color:#fff}
.btn-teal:hover{background:var(--teal-deep)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-outline:hover{border-color:var(--ink);background:rgba(11,22,25,.04)}
.btn-white{background:var(--paper);color:var(--ink)}
.btn-white:hover{background:#fff}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.24)}
.btn-outline-light:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.btn-sm{padding:10px 17px;font-size:.87rem}
.btn-block{width:100%}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.reveal-right{transform:translateX(32px)}
/* Belt and braces for the one element that gets .reveal-right: its own
   section clips too, so nothing depends on the root rule alone. */
.collio{overflow-x:clip}
.reveal.visible{opacity:1;transform:none}

/* ---------- nav ----------------------------------------------------
   Rebuilt from scratch to survive mobile browser chrome. Four rules, and
   every one of them is load-bearing:

   1. sticky, never fixed. A fixed bar hangs off the LAYOUT viewport, whose
      top edge does not move when Chrome on Android retracts its URL bar, so
      the bar drifts above the visible area and loses its top rows. Sticky
      pins to the scrollport, which is exactly what you can see.
   2. the header box is one bar tall and never changes. The mobile menu is
      absolutely positioned out of the flow, so opening it cannot resize the
      element that is pinned to the top of the screen.
   3. the bar's height is one declaration (.nav-inner height), not a
      min-height plus whatever the tallest child happens to be. Nothing in
      here can push the box taller than the paint behind it.
   4. no transform, no filter, no will-change, no overflow on the header or
      on html/body. Each of those silently kills sticky.

   The safe-area inset is padding on the header itself, so the paper
   background paints up under a notch instead of leaving a strip. */
.nav{
  position:-webkit-sticky;position:sticky;top:0;z-index:100;
  background:var(--paper);
  padding-top:env(safe-area-inset-top,0px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
/* The rule under the bar is what signals "you have scrolled", now that the
   background is opaque in both states. */
.nav.scrolled{border-bottom-color:var(--rule)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px}

.logo{display:flex;align-items:center;gap:12px;font-weight:800;font-stretch:112%;font-size:1.4rem;letter-spacing:-.025em;min-width:0}
.logo-dot{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--teal),#12d9c0);display:flex;align-items:center;justify-content:center;flex:none}
.logo-dot img{width:26px;height:26px;object-fit:contain;display:block}
.logo-text{white-space:nowrap}
.logo b{color:var(--teal-deep);font-weight:800}

.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);transition:.2s}
.nav-links a:hover{color:var(--ink)}

/* Each bar is pinned to the exact centre of the button and offset from there,
   rather than stacked with a flex gap. The two states then share one origin,
   so the X crosses dead centre instead of wherever the gap arithmetic lands.
   44x44 is the touch-target minimum; the bars stay 22px. */
.burger{display:none;position:relative;width:44px;height:44px;padding:0;flex:none}
.burger span{
  position:absolute;left:50%;top:50%;width:22px;height:2px;
  background:var(--ink);border-radius:2px;
  transform:translate(-50%,-50%) translateY(var(--y,0));
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.burger span:nth-child(1){--y:-7px}
.burger span:nth-child(3){--y:7px}
.burger.active span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}

/* Hangs off the bar rather than sitting inside it (rule 2 above). The header
   is positioned, so top:100% is the underside of the bar wherever it is. */
.mobile-menu{
  display:none;position:absolute;top:100%;left:0;right:0;
  flex-direction:column;padding:8px 5% 24px;
  background:var(--paper);border-bottom:1px solid var(--rule);
  max-height:calc(100vh - 78px);overflow-y:auto;overscroll-behavior:contain;
}
.mobile-menu a{padding:15px 4px;font-weight:600;border-bottom:1px solid var(--rule)}
.mobile-menu .btn{margin-top:16px;width:100%}
.mobile-menu.open{display:flex}

/* ---------- hero ---------- */
.hero{padding:clamp(44px,6vw,76px) 0 clamp(56px,6vw,80px);overflow:hidden}
/* Faint graticule: measurement paper, fading out downward so it never
   competes with the scale itself. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:64px 64px;opacity:.34;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
}
.hero-inner{position:relative;z-index:2;max-width:920px}
.hero h1{
  font-size:clamp(2.5rem,6.4vw,4.6rem);font-weight:800;font-stretch:117%;
  letter-spacing:-.036em;line-height:.99;margin:22px 0 0;max-width:19ch;
}
.hero h1 .l2{display:block;color:var(--teal-deep)}
.hero-sub{color:var(--muted);font-size:clamp(1.02rem,1.5vw,1.16rem);max-width:52ch;margin-top:24px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

/* ---------- the signature: calibrated price scale ---------- */
.scale{margin-top:clamp(40px,5vw,62px);position:relative;z-index:2}
.scale-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:30px}
.scale-note{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.scale-track{position:relative;height:158px}
/* the axis */
.scale-rule{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink);transform-origin:left center}
/* graticule: minor marks, the way a ruler carries millimetres */
.scale-minor{position:absolute;left:0;right:0;top:50%;height:7px;
  background-image:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 14px);opacity:.9}

.tick{position:absolute;left:var(--x);top:0;height:100%;width:0;display:flex;align-items:center;justify-content:center}
.tick-mark{position:absolute;top:50%;width:2px;height:30px;background:var(--brass);transform:translateY(-50%);transition:height .25s var(--ease),background .25s var(--ease)}
.tick-label{position:absolute;left:50%;transform:translateX(-50%);width:136px;text-align:center;transition:transform .25s var(--ease)}
.tick[data-side="up"] .tick-label{bottom:calc(50% + 26px)}
.tick[data-side="down"] .tick-label{top:calc(50% + 26px)}
.tick[data-align="start"] .tick-label{transform:translateX(0);text-align:left}
.tick[data-align="end"] .tick-label{transform:translateX(-100%);text-align:right}
.tick-name{display:block;font-size:.85rem;font-weight:650;font-stretch:102%;line-height:1.25;letter-spacing:-.012em}
.tick-price{display:block;font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--brass-ink);margin-top:3px}
.tick:hover .tick-mark,.tick:focus-visible .tick-mark{height:44px;background:var(--ink)}
.tick:hover .tick-name{color:var(--teal-deep)}

/* Credentials sit on the axis language too: mono, tabular, understated. */
.hero-facts{display:flex;gap:clamp(24px,5vw,56px);flex-wrap:wrap;margin-top:clamp(40px,5vw,60px);padding-top:26px;border-top:1px solid var(--rule);position:relative;z-index:2}
.fact b{font-family:var(--mono);font-size:1.3rem;font-weight:600;color:var(--ink);display:block;letter-spacing:-.02em}
.fact span{font-size:.85rem;color:var(--muted)}

/* Desktop only, same 821px floor as the FAQ: on mobile the three facts sit in
   a tight left-aligned row that reads fine, and centring them there just costs
   scanning speed. */
@media(min-width:821px){
  .hero-facts{justify-content:center}
  .fact{text-align:center}
}

/* ---------- tariff (services) ---------- */
.tariff{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.t-list{border-top:1px solid var(--rule)}
/* Each row carries its own plate: a specimen image on the left, then the
   tariff line. The plate sits OUTSIDE the toggle, so every service is
   pictured whether or not the row is open, and the name/leader/price
   alignment down the column is untouched. */
.t-row{
  border-bottom:1px solid var(--rule);scroll-margin-top:96px;
  display:grid;grid-template-columns:clamp(128px,19vw,248px) minmax(0,1fr);
  gap:clamp(20px,3vw,40px);align-items:start;
}
.t-body{min-width:0}
.t-shot{margin:26px 0 0}
.t-shot img{
  display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
  border:1px solid var(--rule);border-radius:var(--r);background:#e3e9e8;
  filter:saturate(.9);transition:.3s var(--ease);
}
.t-row:hover .t-shot img{filter:saturate(1);box-shadow:0 16px 32px -22px rgba(11,22,25,.5)}
.t-h{margin:0}
.t-head{
  width:100%;display:flex;align-items:baseline;gap:16px;
  padding:26px 0 6px;text-align:left;transition:.2s var(--ease);
}
.t-name{font-size:clamp(1.25rem,2.3vw,1.72rem);font-weight:750;font-stretch:110%;letter-spacing:-.028em;line-height:1.1;flex:none;transition:color .2s}
/* the leader: a posted tariff, an index, a menu - the price is the point */
.t-lead{flex:1;min-width:20px;border-bottom:1.5px dotted var(--rule);transform:translateY(-.28em)}
.t-price{font-family:var(--mono);font-size:clamp(1.1rem,2vw,1.45rem);font-weight:600;color:var(--ink);flex:none;white-space:nowrap}
.t-price em{font-style:normal;font-size:.68rem;font-weight:400;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-right:11px;vertical-align:.12em}
.t-mark{position:relative;width:22px;height:22px;flex:none;align-self:center;border:1px solid var(--rule);border-radius:var(--r);transition:.25s var(--ease)}
.t-mark::before,.t-mark::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);transition:.25s var(--ease)}
.t-mark::before{width:9px;height:1.5px;transform:translate(-50%,-50%)}
.t-mark::after{width:1.5px;height:9px;transform:translate(-50%,-50%)}
.t-head:hover .t-name{color:var(--teal-deep)}
.t-head:hover .t-mark{border-color:var(--ink)}
.t-head[aria-expanded="true"] .t-mark{background:var(--brass);border-color:var(--brass)}
.t-head[aria-expanded="true"] .t-mark::before,.t-head[aria-expanded="true"] .t-mark::after{background:#fff}
.t-head[aria-expanded="true"] .t-mark::after{transform:translate(-50%,-50%) scaleY(0)}
.t-desc{color:var(--muted);font-size:.99rem;padding-bottom:26px;max-width:60ch}
.t-detail{padding:2px 0 30px;max-width:72ch}
.t-detail p{color:var(--muted);font-size:.97rem}
.t-detail ul{margin:16px 0 22px;display:grid;gap:9px}
.t-detail li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem}
.t-detail li::before{content:"";width:9px;height:1.5px;background:var(--brass);margin-top:.72em;flex:none}
.t-detail[hidden]{display:none}
.t-detail:not([hidden]){animation:riseIn .4s var(--ease)}
@keyframes riseIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- collio ---------- */
.collio-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,72px);align-items:center}
.collio-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.collio-visual{position:relative}
.collio-visual img{border-radius:var(--r);border:1px solid var(--rule);box-shadow:0 30px 60px -34px rgba(11,22,25,.4);aspect-ratio:1827/984;object-fit:cover;object-position:center top;width:100%;background:#e3e9e8}
.collio-cap{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:14px;display:flex;align-items:center;gap:9px}
.collio-cap::before{content:"";width:14px;height:2px;background:var(--brass)}

/* ---------- use cases ---------- */
.cases{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;transition:.25s var(--ease)}
.post:hover{border-color:#9fb2b1;transform:translateY(-3px)}
.post-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:#e3e9e8}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.post:hover .post-img img{transform:scale(1.04)}
.tag{position:absolute;top:12px;left:12px;padding:5px 10px;border-radius:var(--r);background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase}
.post-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-body h3{font-size:1.06rem;font-weight:700;font-stretch:104%;letter-spacing:-.022em;line-height:1.3}
.post-excerpt{color:var(--muted);font-size:.92rem}
.toggle-post{font-family:var(--mono);font-size:.73rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep);padding:0;width:max-content;margin-top:auto;border-bottom:1px solid var(--rule);transition:.2s}
.toggle-post:hover{border-bottom-color:var(--teal-deep)}
.post-more{color:var(--muted);font-size:.92rem}
.post-more[hidden]{display:none}
.post-more:not([hidden]){animation:riseIn .4s var(--ease)}

/* ---------- faq ---------- */
.faq-wrap{max-width:820px;border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;text-align:left;font-size:1.04rem;font-weight:650;font-stretch:104%;letter-spacing:-.014em;transition:.2s}
.faq-q:hover{color:var(--teal-deep)}
.faq-q .icon{position:relative;width:22px;height:22px;flex:none;border:1px solid var(--rule);border-radius:var(--r);transition:.25s var(--ease)}
.faq-q .icon::before,.faq-q .icon::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);transition:.25s var(--ease)}
.faq-q .icon::before{width:9px;height:1.5px;transform:translate(-50%,-50%)}
.faq-q .icon::after{width:1.5px;height:9px;transform:translate(-50%,-50%)}
.faq-item.open .icon{background:var(--brass);border-color:var(--brass)}
.faq-item.open .icon::before,.faq-item.open .icon::after{background:#fff}
.faq-item.open .icon::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-a{padding:0 0 24px;color:var(--muted);font-size:.97rem;max-width:66ch}
.faq-a[hidden]{display:none}
.faq-a:not([hidden]){animation:riseIn .4s var(--ease)}

/* The FAQ is the one section that centres. Desktop only: on narrow screens a
   centred head reads worse than a left-aligned one, and the 821px floor is the
   same breakpoint the nav collapses at. The questions themselves stay
   left-aligned; an accordion row is a label on the left and a control on the
   right, whatever the block around it does. */
@media(min-width:821px){
  .faq .sec-head{margin-left:auto;margin-right:auto;text-align:center}
  .faq .sec-sub{margin-left:auto;margin-right:auto}
  .faq .faq-wrap{margin-left:auto;margin-right:auto}
}

/* ---------- cta band ---------- */
.cta-band{background:var(--ink);color:var(--paper);overflow:hidden}
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 14px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 55%,transparent);
}
.cta-inner{position:relative}
/* Constrain the children, not the wrapper: the wrapper is also .container,
   so capping its width would re-centre the band and break the left edge
   every other section aligns to. */
.cta-inner h2{max-width:19ch}
.cta-inner h2{font-size:clamp(1.9rem,4.1vw,3rem);font-weight:800;font-stretch:115%;letter-spacing:-.03em;line-height:1.04}
.cta-inner p{color:#9DB2B5;margin-top:18px;max-width:48ch}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.cta-band .eyebrow{color:#7FCBDC}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:var(--paper);padding:var(--pad) 0 0;border-top:1px solid rgba(255,255,255,.1)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:56px}
.footer .logo b{color:#7FCBDC}
.f-brand p{color:#9DB2B5;font-size:.91rem;margin-top:16px;max-width:250px}
.f-brand .btn{margin-top:20px}
.f-col h4{font-family:var(--mono);font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.15em;color:#7A9094;margin-bottom:18px}
.f-col li{margin-bottom:10px}
.f-col a{color:#C3D2D4;font-size:.92rem;transition:.2s}
.f-col a:hover{color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:22px 0;border-top:1px solid rgba(255,255,255,.1);color:#7A9094;font-family:var(--mono);font-size:.74rem;letter-spacing:.05em}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(11,22,25,.6);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.modal.show{display:flex}
.modal-card{position:relative;background:var(--paper);border-radius:var(--r);padding:38px 34px 30px;width:min(430px,100%);box-shadow:0 40px 90px -30px rgba(0,0,0,.5);animation:riseIn .35s var(--ease)}
.modal-card h3{font-size:1.5rem;font-weight:800;font-stretch:112%;letter-spacing:-.028em;margin:14px 0 8px}
.modal-card>p{color:var(--muted);font-size:.95rem;margin-bottom:24px}
.modal-card .btn{margin-bottom:10px}
.modal-card small{display:block;color:var(--muted);font-size:.78rem;margin-top:8px}
.modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:var(--r);border:1px solid var(--rule);color:var(--muted);transition:.2s}
.modal-close:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- legal pages ---------- */
.legal{padding:70px 0 var(--pad)}
/* .legal-inner is also .container, so a max-width here would re-centre the
   column away from the left edge the nav and every section align to.
   Cap the measure on the text instead. */
.legal h1,.legal h2,.legal p,.legal li,.legal ul,.legal-date{max-width:72ch}
.legal h1{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;font-stretch:114%;letter-spacing:-.03em;line-height:1.05}
.legal-date{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 44px}
.legal h2{font-size:1.16rem;font-weight:700;font-stretch:106%;margin:36px 0 12px;letter-spacing:-.018em}
.legal p,.legal li{color:var(--muted);font-size:.97rem;margin-bottom:10px}
.legal ul{list-style:disc;padding-left:22px;margin-bottom:10px}
.legal a{color:var(--teal-deep);font-weight:600;border-bottom:1px solid var(--rule)}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .posts{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:34px}
  .collio-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
  .nav-links{display:none}
  .burger{display:flex}
  .hero h1{max-width:none}
  /* The horizontal scale stops being readable here, so it becomes a plain
     range bar: the marks and the two endpoints. Every name is in the
     tariff immediately below, so nothing is lost. */
  .scale-track{height:76px}
  .tick[data-side="up"] .tick-label,.tick[data-side="down"] .tick-label{top:calc(50% + 22px);bottom:auto}
  .tick:not(:first-of-type):not(:last-of-type) .tick-label{display:none}
  .tick-name{display:none}
  .tick-price{font-size:.8rem;color:var(--ink)}
  .t-shot{margin-top:24px}
  .t-head{gap:12px;flex-wrap:wrap}
  .t-lead{display:none}
  .t-name{flex:1 1 100%}
  .t-price{flex:1}
}
@media(max-width:560px){
  /* the plate shrinks to an index-sized square rather than becoming a full
     width band: the rows stay compact and the list still scans as a tariff. */
  .t-row{grid-template-columns:clamp(96px,30vw,124px) minmax(0,1fr);gap:16px}
  .t-shot{margin-top:24px}
  .t-shot img{aspect-ratio:4/5}
}
@media(max-width:640px){
  .posts{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-btns .btn,.cta-btns .btn{width:100%}
  .footer-bottom{justify-content:center;text-align:center}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- scale entrance: one orchestrated moment ----------
   The axis draws left to right, then each mark lands in ascending price
   order. This is the page's only sequenced animation; everything else
   just fades. Killed wholesale under prefers-reduced-motion below. */
@keyframes ruleSweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tickLand{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.scale-rule{animation:ruleSweep .85s var(--ease) both}
.scale-minor{animation:ruleSweep .85s var(--ease) .05s both;transform-origin:left center}
.tick{animation:tickLand .5s var(--ease) both;animation-delay:calc(.4s + var(--i,0) * .075s)}

@media (prefers-reduced-motion: reduce){
  .scale-rule,.scale-minor,.tick{animation:none}
}