/* base.css: design tokens + global chrome. Loaded on every page.
   The system is fluid by construction: every size is a clamp() against the
   viewport, so nothing steps between breakpoints. Colour is a small closed
   set (deep teal, amber, one ink) exposed as tokens and nothing else. */

:root{
  /* ---- surface ---- */
  --bg:#EDF2F0;             /* pale mineral: the page */
  --bg-2:#F5F8F7;           /* raised band */
  --surface:#FFFFFF;        /* cards */
  --surface-alt:#F0F5F4;

  /* ---- ink ---- */
  --ink:#0B1F1F;
  --ink-soft:#3B5250;
  --faint:#6C8280;

  /* ---- brand ---- */
  --primary:#0C6E72;        /* deep teal: body-safe accent text */
  --primary-2:#14A8A0;      /* bright teal: fills, focus, motion */
  --primary-deep:#062F31;   /* inverted panels */
  --primary-soft:rgba(20,168,160,.13);
  --accent:#FFB03A;         /* amber: fills and pills only */
  --accent-ink:#A85B18;     /* amber darkened until it passes on --bg */
  --accent-soft:rgba(255,176,58,.18);

  /* ---- status ---- */
  --ok:#2FA36B;
  --bad:#D1495B;
  --bad-soft:rgba(209,73,91,.13);
  --warn:#C77A0A;

  /* ---- lines ---- */
  --line:#D7E1DE;
  --line-2:#C3D2CF;

  /* ---- legacy aliases: the older stylesheets still reference these.
         Keeping them pointed at the new tokens means one palette, not two. */
  --paper:var(--bg);
  --paper-2:var(--bg-2);
  --paper-3:var(--surface);
  --blue:var(--primary);
  --blue-2:var(--primary-2);
  --blue-soft:var(--primary-soft);
  --red:var(--accent-ink);
  --red-soft:var(--accent-soft);
  --amber:var(--accent-ink);
  --grid:transparent;

  /* ---- type ---- */
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,monospace;
  --t-h1:clamp(2.75rem,1.9rem + 3.7vw,5.4rem);
  --t-h2:clamp(2rem,1.45rem + 2.4vw,3.6rem);
  --t-h3:clamp(1.2rem,1.06rem + .6vw,1.6rem);
  --t-lede:clamp(1.05rem,.98rem + .35vw,1.3rem);
  --t-body:clamp(1rem,.97rem + .13vw,1.06rem);
  --t-sm:clamp(.86rem,.84rem + .1vw,.93rem);
  --t-xs:clamp(.74rem,.72rem + .08vw,.8rem);
  --track-tight:-.035em;

  /* ---- shape ---- */
  --r-pill:999px;
  --r-lg:30px;
  --r-card:22px;
  --r-sm:14px;
  --r-xs:10px;

  /* ---- depth ---- */
  --sh-sm:0 1px 2px rgba(11,31,31,.04),0 3px 10px rgba(11,31,31,.045);
  --sh-md:0 2px 5px rgba(11,31,31,.045),0 14px 34px rgba(11,31,31,.07);
  --sh-lg:0 4px 10px rgba(11,31,31,.05),0 28px 64px rgba(11,31,31,.09);

  /* ---- rhythm + motion ---- */
  --pad-sec:clamp(3.5rem,2.2rem + 5.4vw,7rem);
  --gap:clamp(.9rem,.6rem + .9vw,1.4rem);
  --gutter:clamp(1.15rem,.6rem + 2vw,2.4rem);
  --maxw:1240px;
  /* full-width bands still need the page gutter, or their rounded corners sit
     flush against the screen edge on a phone */
  --bandw:min(var(--maxw),calc(100% - var(--gutter) * 2));
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.55s;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:var(--t-body);line-height:1.55;
  letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* ambient wash: a single soft light source, fixed so it drifts under scroll */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 620px at 78% -8%,var(--primary-soft),transparent 62%),
    radial-gradient(700px 520px at 6% 4%,var(--accent-soft),transparent 58%);
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1}

/* ---- type ---- */
h1,h2,h3{margin:0;font-weight:700;letter-spacing:var(--track-tight);line-height:.98}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.12}
.disp{font-weight:700;letter-spacing:var(--track-tight)}
.r{color:var(--primary)}

/* eyebrow: was a mono stamp, now a soft pill that sits above a heading */
.kick{display:inline-flex;align-items:center;gap:.5em;font-size:var(--t-xs);
      font-weight:600;letter-spacing:.02em;color:var(--primary);
      background:var(--primary-soft);border-radius:var(--r-pill);
      padding:.45em 1em}
.kick::before{content:"";width:.42em;height:.42em;border-radius:50%;background:var(--primary-2)}

/* mono survives only where the content really is a machine readout */
.mono{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.04em;color:var(--faint)}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2.5px solid var(--primary-2);outline-offset:3px;border-radius:var(--r-xs)}

/* ---- buttons: pill, soft, lift on hover ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
     font-family:inherit;font-weight:600;font-size:var(--t-sm);letter-spacing:-.01em;
     padding:.85em 1.6em;border:1.5px solid transparent;border-radius:var(--r-pill);
     cursor:pointer;background:transparent;color:var(--ink);
     transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .2s ease,color .2s ease,border-color .2s ease;
     will-change:transform}
.btn-fill{background:var(--ink);color:#fff;box-shadow:var(--sh-sm)}
.btn-fill:hover{background:var(--primary);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-ghost{border-color:var(--line-2);background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm)}
.btn-ghost:hover{border-color:var(--primary-2);color:var(--primary);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-accent{background:var(--accent);color:var(--ink);box-shadow:var(--sh-sm)}
.btn-accent:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:clamp(1.5rem,1rem + 1.5vw,2.2rem)}

/* ---- masthead: floating pill nav ---- */
header.mast{position:sticky;top:0;z-index:50;padding:clamp(.6rem,.4rem + .6vw,1rem) 0;
            transition:background .35s var(--ease),box-shadow .35s var(--ease)}
header.mast.stuck{background:rgba(237,242,240,.82);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.mast-top{display:none} /* the Ref. No. strip belongs to the old print language */
.mast-main{display:flex;align-items:center;justify-content:space-between;gap:1rem;
           min-height:clamp(3.2rem,2.8rem + 1.4vw,4rem)}
.brand{font-weight:700;font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem);letter-spacing:-.04em;
       display:inline-flex;align-items:center;gap:.5em;color:var(--ink)}
.brand-mark{width:1.5em;height:1.5em;flex:0 0 auto;color:var(--primary-2)}
.nav{display:flex;align-items:center;gap:.35rem}
.nav a{font-size:var(--t-sm);font-weight:500;color:var(--ink-soft);padding:.6em 1em;
       white-space:nowrap;border-radius:var(--r-pill);transition:color .2s ease,background .2s ease}
.nav a:hover{color:var(--ink);background:rgba(255,255,255,.7)}
.nav a.active{color:var(--primary);background:var(--primary-soft);font-weight:600}
.nav-btn{flex:none;padding:.75em 1.4em}

/* Phone masthead: the wordmark and the booking button share the top row, and
   the links drop to their own row underneath. That row scrolls sideways rather
   than wrapping, so the header height never changes as pages are added. */
@media(max-width:900px){
  .mast-main{flex-wrap:wrap;row-gap:.5rem;align-items:center}
  .brand{order:1}
  .nav-btn{order:2;margin-left:auto}
  /* No negative margins here: a sticky header wider than the viewport is a
     reliable source of stray horizontal scroll. The row scrolls inside the
     wrap's content box instead. */
  .nav{order:3;flex-basis:100%;min-width:0;gap:.25rem;padding-bottom:.15rem;
       overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
}

/* Finger-sized hit areas wherever there is no mouse. */
@media(pointer:coarse){
  .btn,.nav a{min-height:44px}
  .nav a{display:inline-flex;align-items:center}
}

/* ---- sections ---- */
.section{padding:var(--pad-sec) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.6rem;
          flex-wrap:wrap;margin-bottom:clamp(1.6rem,1rem + 1.8vw,2.6rem)}
.sec-head h2{font-size:var(--t-h2);max-width:20ch}
.sec-head .idx{font-size:var(--t-sm);color:var(--faint);font-weight:500}

/* ---- interior page hero ---- */
.page-hero{padding:clamp(2.6rem,1.8rem + 3vw,4.6rem) 0 clamp(.5rem,.3rem + .8vw,1.4rem)}
.page-hero h1{font-size:var(--t-h1);margin-top:clamp(1rem,.7rem + 1vw,1.5rem);max-width:16ch}
.page-hero .lede{font-size:var(--t-lede);color:var(--ink-soft);max-width:58ch;
                 margin:clamp(1rem,.7rem + 1vw,1.5rem) 0 0;line-height:1.45}

/* ---- shared spec rows (security + demo aside) ---- */
.spec-row{display:flex;gap:.9rem;align-items:flex-start;background:var(--surface);
          border:1px solid var(--line);border-radius:var(--r-sm);padding:1rem 1.1rem;
          box-shadow:var(--sh-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.spec-row:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.spec-row .sx{font-size:var(--t-xs);font-weight:700;color:var(--primary);background:var(--primary-soft);
              border-radius:var(--r-pill);padding:.3em .7em;flex:none;margin-top:.15em}
.spec-row .st{font-size:var(--t-sm)}
.spec-row .st b{font-weight:600}
.spec-row .st span{display:block;color:var(--ink-soft);margin-top:.35em}
.spec-row .st a{color:var(--primary);font-weight:600}

/* ---- note strip ---- */
.note-strip{font-size:var(--t-sm);color:var(--ink-soft);background:var(--accent-soft);
            border-radius:var(--r-sm);padding:1rem 1.2rem;margin-top:1.4rem;line-height:1.55}

/* ---- final CTA band ---- */
.final{padding:clamp(4rem,2.5rem + 6vw,8rem) 0;text-align:center}
.final h2{font-size:clamp(2.4rem,1.5rem + 4.2vw,5rem);max-width:17ch;margin:0 auto}
.final p{font-size:var(--t-lede);color:var(--ink-soft);margin:1.2rem auto 0;max-width:52ch;line-height:1.45}
.final .hero-cta{justify-content:center}

/* ---- footer ---- */
footer{background:var(--primary-deep);color:#DCE9E8;
       border-radius:var(--r-lg) var(--r-lg) 0 0;margin-top:clamp(2rem,1rem + 3vw,4rem);
       padding:clamp(2.4rem,1.6rem + 2.6vw,3.6rem) 0 clamp(1.4rem,1rem + 1.2vw,2rem);position:relative;z-index:1}
.foot{display:flex;justify-content:space-between;gap:2.2rem;flex-wrap:wrap}
footer .brand{color:#fff}
footer .brand-mark{color:var(--primary-2)}
.foot .tag{font-size:var(--t-sm);color:#9FBAB8;max-width:36ch;margin-top:.8rem;line-height:1.6}
.foot-cols{display:flex;gap:clamp(2rem,1rem + 3vw,4rem);flex-wrap:wrap}
.foot-cols .col{display:flex;flex-direction:column;gap:.6rem}
.foot-cols .h{font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-2);margin-bottom:.2rem}
.foot-cols a{font-size:var(--t-sm);color:#BFD4D2;transition:color .2s ease}
.foot-cols a:hover{color:#fff}
.foot-rule{margin-top:2.2rem;border-top:1px solid rgba(255,255,255,.12);padding-top:1.1rem;
           display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;
           font-size:var(--t-xs);color:#7E9A98}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(26px);
        transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---- 404 ---- */
.nf{padding:clamp(5rem,3rem + 8vw,9rem) 0;text-align:center}
.nf .code{font-size:var(--t-sm);font-weight:600;color:var(--primary)}
.nf h1{font-size:clamp(3rem,2rem + 5vw,6rem);margin-top:1rem}
.nf p{font-size:var(--t-lede);color:var(--ink-soft);margin:1rem auto 2rem}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}