:root{
  --ink:#0A1524;
  --navy:#12243F;
  --navy-2:#1B3355;
  --gold:#C8A44B;
  --gold-lt:#E7CE86;
  /* --paper / --paper-2 are no longer page backgrounds: the whole site is dark.
     They survive as the light foreground on the ink bands (logo, hero copy) and
     as the plate colour behind the dark brand artwork in the "Our brands" grid. */
  --paper:#FAF8F3;
  --paper-2:#F0ECE3;
  /* Content surfaces. Kept a shade above --ink so the sticky header, the page
     banner and the reserve band still read as separate bands against them. */
  --surface:#0E1B2E;
  --surface-2:#14263F;
  --surface-3:#1B3252;
  --text:#DDE4EF;
  --muted:#93A2B8;
  --line:rgba(231,206,134,.16);
  --line-dk:rgba(231,206,134,.18);
  --serif:"Newsreader",Georgia,serif;
  --sans:"Inter Tight",-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--surface);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0}
/* Named for the light content bands it used to sit on. Those bands are dark
   now, so it is simply the quieter eyebrow — muted gold instead of full gold. */
.eyebrow--dark{color:var(--gold-lt);opacity:.72}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:15px;font-weight:600;
  padding:15px 26px;border-radius:2px;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .15s ease,background .15s ease,color .15s ease}
.btn:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px}
.btn-gold{background:var(--gold);color:#000}
.btn-gold:hover{background:var(--gold-lt);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-dk);color:var(--gold-lt)}
.btn-ghost:hover{background:rgba(231,206,134,.08)}
.btn-outline{border-color:var(--line-dk);color:var(--gold-lt)}
.btn-outline:hover{background:var(--gold);border-color:var(--gold);color:#000}
.btn .arrow{transition:transform .15s ease}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- logo ---------- */
.logo{font-family:var(--serif);font-weight:300;color:var(--paper);text-decoration:none;line-height:1;
  letter-spacing:-.02em;font-size:40px;display:inline-block}
.logo span{color:var(--gold)}
.logo--foot{font-size:34px}
@media(max-width:520px){.logo{font-size:31px}.logo--foot{font-size:28px}}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:var(--ink);border-bottom:1px solid var(--line-dk)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:86px;gap:20px}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-size:14px;color:rgba(250,248,243,.72);text-decoration:none}
.nav a:hover{color:var(--gold-lt)}
.nav .btn{padding:12px 20px;font-size:14px}
@media(max-width:880px){.nav a.navlink{display:none}}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:var(--paper);position:relative;overflow:hidden;padding:88px 0 0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;padding-bottom:80px}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(38px,5vw,64px);line-height:1.05;letter-spacing:-.02em;margin:20px 0 0}
.hero h1 em{font-style:italic;color:var(--gold-lt)}
.hero p.lede{color:rgba(250,248,243,.68);font-size:18px;max-width:52ch;margin:22px 0 34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{font-family:var(--mono);font-size:12px;color:rgba(250,248,243,.45);margin-top:26px;letter-spacing:.02em;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero-note b{color:var(--gold-lt);font-weight:500}
.hero-note span+span{padding-left:18px;border-left:1px solid var(--line-dk)}

/* ---------- signature: case file card ---------- */
.casefile{background:linear-gradient(180deg,var(--navy) 0%,#0E1D33 100%);border:1px solid var(--line-dk);
  border-radius:3px;padding:26px;box-shadow:0 40px 80px -30px rgba(0,0,0,.75)}
.cf-top{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px dashed var(--line-dk);padding-bottom:16px}
.cf-id{font-family:var(--mono);font-size:12px;color:var(--gold-lt);letter-spacing:.08em}
.cf-sub{font-family:var(--mono);font-size:11px;color:rgba(250,248,243,.4);margin-top:5px;letter-spacing:.05em}
.cf-stamp{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--gold);border:1px solid var(--gold);
  padding:6px 9px;border-radius:2px;transform:rotate(-3deg);opacity:.9}
.cf-steps{list-style:none;margin:20px 0 0;padding:0}
.cf-steps li{display:flex;align-items:center;gap:13px;padding:11px 0;font-size:14px;color:rgba(250,248,243,.55);
  border-bottom:1px solid rgba(255,255,255,.05)}
.cf-steps li:last-child{border-bottom:0}
.cf-steps .tick{width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:1px solid var(--line-dk);
  display:grid;place-items:center;font-size:11px;font-family:var(--mono);color:rgba(250,248,243,.35)}
.cf-steps li.done{color:var(--paper)}
.cf-steps li.done .tick{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.cf-steps li.now{color:var(--gold-lt)}
.cf-steps li.now .tick{border-color:var(--gold-lt);color:var(--gold-lt)}
.cf-steps .meta{margin-left:auto;font-family:var(--mono);font-size:11px;opacity:.55}
.cf-foot{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line-dk);display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:11px;color:rgba(250,248,243,.4)}
.cf-foot b{color:var(--gold-lt);font-weight:500}
.pulse{color:#4ADE80;animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:44px;padding-bottom:60px}.hero{padding-top:56px}}

/* ---------- flag rail ---------- */
.rail{background:var(--navy);border-top:1px solid var(--line-dk);padding:26px 0}
.rail-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.rail-head .eyebrow{color:rgba(231,206,134,.8)}
.rail-head span.hint{font-family:var(--mono);font-size:11px;color:rgba(250,248,243,.35)}
.rail-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.rail-scroll::-webkit-scrollbar{height:4px}
.rail-scroll::-webkit-scrollbar-thumb{background:var(--line-dk);border-radius:4px}
.chip{flex:0 0 auto;display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);border-radius:2px;padding:10px 15px 10px 11px;text-decoration:none;
  transition:border-color .15s ease,background .15s ease,transform .15s ease}
.chip:hover,.chip:focus-visible{border-color:var(--gold);background:rgba(200,164,75,.08);transform:translateY(-2px);outline:none}
.chip img{width:34px;height:25px;object-fit:cover;border-radius:1px;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.chip .cn{font-size:14px;color:var(--paper);white-space:nowrap;line-height:1.25}
.chip .ct{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:rgba(231,206,134,.7);text-transform:uppercase;white-space:nowrap}
.chip .cfrom{font-family:var(--mono);font-size:11px;color:rgba(250,248,243,.4);margin-left:8px;white-space:nowrap}

/* ---------- sections ---------- */
.section{padding:96px 0}
.section--alt{background:var(--surface-2)}
.sec-head{max-width:660px;margin-bottom:56px}
.sec-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.4vw,44px);line-height:1.12;letter-spacing:-.015em;margin:14px 0 0;color:var(--paper)}
.sec-head p{color:var(--muted);margin:16px 0 0;max-width:58ch}

/* ---------- 12-step wizard ---------- */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
  list-style:none;margin:0;padding:0}
.step{background:var(--surface-2);padding:26px 20px 24px;transition:background .18s ease}
.step:hover{background:var(--surface-3)}
.step .sn{font-family:var(--mono);font-size:26px;font-weight:400;color:var(--gold);line-height:1;display:block;letter-spacing:-.02em}
.step h4{font-size:15px;font-weight:600;margin:18px 0 6px;color:var(--paper);letter-spacing:-.01em}
.step p{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.step.pay{background:linear-gradient(150deg,rgba(200,164,75,.20),rgba(200,164,75,.05))}
.step.pay:hover{background:linear-gradient(150deg,rgba(200,164,75,.30),rgba(200,164,75,.10))}
.step.pay h4{color:var(--gold-lt)}
.step.pay p{color:rgba(250,248,243,.62)}
.steps-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:36px}
.steps-foot p{margin:0;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.03em}
@media(max-width:1000px){.steps{grid-template-columns:repeat(4,1fr)}}
@media(max-width:720px){.steps{grid-template-columns:repeat(2,1fr)}.section{padding:68px 0}}

/* ---------- feature cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:var(--surface);padding:34px 30px;transition:background .18s ease}
.card:hover{background:var(--surface-2)}
.card .num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--gold)}
.card h3{font-family:var(--sans);font-size:18px;font-weight:600;margin:16px 0 8px;color:var(--paper)}
.card p{margin:0;font-size:15px;color:var(--muted);line-height:1.65}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.cards{grid-template-columns:1fr}}

/* ---------- logo bands ---------- */
.marks{padding:66px 0}
.marks--auth{background:var(--ink);border-top:1px solid var(--line-dk)}
.marks--brand{background:var(--surface-2)}
.marks-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.marks-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(25px,2.7vw,34px);line-height:1.12;
  letter-spacing:-.015em;margin:12px 0 0}
.marks-head .note{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.marks--auth .marks-head h2{color:var(--paper)}
.marks--auth .marks-head .note{color:rgba(250,248,243,.38)}
.marks--brand .marks-head h2{color:var(--paper)}
.marks--brand .marks-head .note{color:var(--muted)}

.marks-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;border:1px solid transparent}
.mark{display:grid;place-items:center;padding:26px 18px;min-height:128px;text-decoration:none}
.mark img{width:auto;max-width:100%;max-height:52px;object-fit:contain;
  transition:opacity .2s ease,filter .2s ease,transform .2s ease}
.mark img.tall{max-height:74px}
.mark img.wide{max-height:40px}
.mark:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

.marks--auth .marks-grid{background:var(--line-dk);border-color:var(--line-dk)}
.marks--auth .mark{background:var(--ink)}
.marks--auth .mark img{opacity:.55}
.marks--auth .mark:hover img,.marks--auth .mark:focus-visible img{opacity:1}

.marks--brand .marks-grid{background:var(--line);border-color:var(--line)}
.marks--brand .mark{background:var(--paper-2);transition:background .18s ease}  /* light plate: the brand artwork is dark ink */
.marks--brand .mark:hover{background:#fff}
.marks--brand .mark img{filter:grayscale(1);opacity:.62}
.marks--brand .mark:hover img,.marks--brand .mark:focus-visible img{filter:none;opacity:1;transform:translateY(-1px)}

@media(max-width:900px){.marks-grid{grid-template-columns:repeat(2,1fr)}.marks{padding:52px 0}
  .mark{min-height:104px;padding:20px 14px}}
@media (prefers-reduced-motion:reduce){.mark img{transition:none!important;transform:none!important}}

/* ---------- reserve ---------- */
.reserve{background:var(--ink);color:var(--paper);padding:74px 0}
.reserve-in{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.reserve h2{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.2vw,40px);margin:12px 0 10px;line-height:1.15}
.reserve h2 b{color:var(--gold-lt);font-weight:400}
.reserve p{color:rgba(250,248,243,.6);margin:0;max-width:50ch;font-size:16px}

/* ---------- faq ---------- */
.faq-list{border-top:1px solid var(--line);max-width:860px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:24px 4px;font-family:var(--serif);font-weight:400;font-size:clamp(19px,2.1vw,23px);line-height:1.3;color:var(--paper)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.faq-item summary:hover{color:var(--gold-lt)}
.faq-item .sign{flex:0 0 auto;width:22px;height:22px;margin-top:6px;position:relative;transition:transform .2s ease}
.faq-item .sign::before,.faq-item .sign::after{content:'';position:absolute;background:var(--gold);border-radius:2px}
.faq-item .sign::before{top:10px;left:2px;right:2px;height:2px}
.faq-item .sign::after{left:10px;top:2px;bottom:2px;width:2px;transition:opacity .2s ease}
.faq-item[open] .sign::after{opacity:0}
.faq-item[open] .sign{transform:rotate(180deg)}
.faq-item .faq-a{margin:0;padding:0 40px 26px 4px;color:var(--muted);font-size:16px;line-height:1.7;max-width:66ch}
@media (prefers-reduced-motion:reduce){.faq-item .sign{transition:none}}

/* ---------- contact (black & gold) ---------- */
.contact{background:var(--ink);color:var(--paper);position:relative;border-top:1px solid var(--line-dk);border-bottom:1px solid var(--line-dk)}
.contact::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.contact .sec-head h2{color:var(--paper)}
.contact .sec-head p{color:rgba(250,248,243,.6)}
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:1px;background:var(--line-dk);
  border:1px solid var(--line-dk);border-radius:3px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.contact-cell{background:linear-gradient(180deg,var(--navy) 0%,#0E1D33 100%);padding:38px 34px}
.contact-cell .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 18px}
.contact-cell address{font-style:normal;font-size:16px;line-height:1.85;color:rgba(250,248,243,.7)}
.contact-cell address b{display:inline-block;margin-bottom:4px;font-family:var(--serif);font-weight:400;font-size:22px;color:var(--gold-lt)}
.contact-methods{display:flex;flex-direction:column;gap:14px;margin:0}
.contact-line{display:flex;align-items:center;gap:15px;text-decoration:none;padding:13px 15px;border:1px solid var(--line-dk);
  border-radius:2px;background:rgba(255,255,255,.02);transition:border-color .15s ease,background .15s ease,transform .15s ease}
a.contact-line:hover,a.contact-line:focus-visible{border-color:var(--gold);background:rgba(200,164,75,.08);transform:translateY(-1px);outline:none}
.contact-line .ic{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border:1px solid var(--gold);
  border-radius:2px;color:var(--gold-lt);font-size:18px;background:rgba(200,164,75,.06)}
.contact-line .ct{display:flex;flex-direction:column;line-height:1.4}
.contact-line .ct small{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(231,206,134,.7)}
.contact-line .ct b{font-weight:500;color:var(--paper);font-size:16px}
@media(max-width:720px){.contact-grid{grid-template-columns:1fr}.contact-cell{padding:30px 24px}}

/* ---------- footer ---------- */
.site-foot{background:var(--navy);color:rgba(250,248,243,.55);padding:52px 0 34px;font-size:14px}
.foot-in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.site-foot a{color:rgba(250,248,243,.72);text-decoration:none;margin-left:22px}
.site-foot a.logo{margin-left:0}
.site-foot a:hover{color:var(--gold-lt)}
.foot-legal{font-family:var(--mono);font-size:11px;letter-spacing:.03em;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--line-dk);color:rgba(250,248,243,.35);max-width:76ch;line-height:1.7}
/* Google Play badge. The official artwork ships with its own transparent margin,
   so it is sized a little taller than the visible badge and needs no extra gap. */
.foot-badge{display:inline-block;margin-left:22px;line-height:0}
.foot-badge img{display:block;height:58px;width:auto}
@media(max-width:720px){.foot-badge{margin-left:0}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.pulse{animation:none}}

/* ---------- google play badge (footer) ---------- */
/* The official artwork carries its own transparent margin, so it is sized a
   little taller than the visible badge and needs no extra gap. */
.foot-badge{display:inline-block;margin-left:22px;line-height:0}
.foot-badge img{display:block;height:58px;width:auto}
@media(max-width:720px){.foot-badge{margin-left:0}}

/* ---------- sub-page banner ---------- */
/* The marketing content is split across /programs.php, /how-it-works.php,
   /platform.php, /licensing.php, /faq.php and /contact.php. Each of those opens
   with this compact ink band instead of the full homepage hero. */
.pagehead{background:var(--ink);color:var(--paper);padding:64px 0 58px}
.pagehead h1{font-family:var(--serif);font-weight:300;font-size:clamp(32px,4.2vw,50px);line-height:1.08;
  letter-spacing:-.02em;margin:16px 0 0}
.pagehead h1 em{font-style:italic;color:var(--gold-lt)}
.pagehead p{color:rgba(250,248,243,.68);font-size:17px;max-width:62ch;margin:18px 0 0}
.pagehead .head-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:30px}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(250,248,243,.42);margin:0 0 4px}
.crumb a{color:rgba(250,248,243,.42);text-decoration:none}
.crumb a:hover{color:var(--gold-lt)}

/* ---------- programme grid (programs.php) ---------- */
/* The homepage keeps the horizontal rail; the dedicated page lays the same
   seventeen programmes out as a readable grid. */
.prog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:38px}
.prog-card{display:flex;align-items:center;gap:14px;padding:18px 20px;text-decoration:none;color:inherit;
  background:var(--surface-2);border:1px solid var(--line);border-radius:2px;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.prog-card:hover{border-color:var(--gold);background:var(--surface-3);transform:translateY(-1px)}
.prog-card img{width:40px;height:30px;flex:0 0 40px;object-fit:cover;border:1px solid var(--line)}
.prog-card .pn{font-weight:600;font-size:16px;line-height:1.25}
.prog-card .pt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.prog-card .pf{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--gold-lt);white-space:nowrap}
@media(max-width:520px){.prog-card .pf{margin-left:0;flex-basis:100%}}

/* ---------- section hub (about.php) ---------- */
/* Cards on the overview page that send the reader to the split-out sections. */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:40px}
.hub-card{display:flex;flex-direction:column;padding:28px 26px 24px;text-decoration:none;color:inherit;
  background:var(--surface-2);border:1px solid var(--line);border-radius:2px;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.hub-card:hover{border-color:var(--gold);background:var(--surface-3);transform:translateY(-2px)}
.hub-card .eyebrow{margin-bottom:12px}
.hub-card h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;margin:0 0 10px;color:var(--paper)}
.hub-card p{margin:0;color:var(--muted);font-size:15.5px}
.hub-card .go{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt)}
.hub-card:hover .go{color:var(--gold)}