/* =====================================================================
   AQAR — Aesthetic Quality Assurance Register — public site
   Brand: Royal Plum #6F3978 · Slate #55616A · Sage #B7C8B5 · Mist #C8CDD1
   Type:  Cinzel (hero display) · Poppins (everything else)
   Colours are driven by CSS variables so /theme.css can retune the whole
   palette from the admin portal; these defaults are the AQAR brand.
   ===================================================================== */

:root{
  --ink:#55616a; --slate:#55616a; --mist:#8a939c;
  --azure:#6f3978; --azure-700:#582e60; --azure-100:#f0e8f2;
  --navy:#6f3978; --navy-2:#8a5192; --navy-mid:#7c4585;
  --on-dark:#fff; --on-dark-soft:rgba(255,255,255,.74);
  --gold:#b7c8b5; --gold-soft:#eef3ed;
  --paper:#ffffff; --card:#ffffff;
  --line:#c8cdd1; --line-soft:#e9ecee;
  --sage:#b7c8b5; --sage-soft:#eef3ed; --sand:#f5f6f7;
  --pass:#3f7d54; --pass-soft:#e8f0e8;
  --warn:#9a6a1f; --warn-soft:#f6eede;
  --fail:#b23a3a; --fail-soft:#f6e7e7;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
  --sh-1:0 1px 2px rgba(85,97,106,.06);
  --sh-2:0 2px 6px rgba(85,97,106,.06), 0 10px 30px rgba(85,97,106,.08);
  --sh-3:0 10px 24px rgba(85,97,106,.10), 0 30px 60px rgba(85,97,106,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:5px}
img{max-width:100%; display:block}
a{color:var(--azure-700)}

.wrap{max-width:1240px; margin:0 auto; padding:0 clamp(18px,4vw,48px)}
.narrow{max-width:820px; margin:0 auto}

/* ---------------- Type ---------------- */
h1,h2,h3,h4{letter-spacing:-.022em; line-height:1.18; margin:0}
.display{font-family:"Cinzel",Georgia,serif; font-weight:400; letter-spacing:.002em; line-height:1.06}
h1.display{font-size:clamp(38px,6vw,68px)}
h2.display{font-size:clamp(30px,4.2vw,46px)}
.eyebrow{
  font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--azure); margin:0 0 14px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--gold); flex:none}
.eyebrow.centre{justify-content:center}
.lede{font-size:clamp(18px,2vw,21px); color:var(--slate); line-height:1.6}
.muted{color:var(--slate)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ---------------- Header ---------------- */
.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;
}
.topbar.stuck{border-bottom-color:var(--line); box-shadow:0 4px 20px rgba(11,22,34,.06)}
.topbar-in{display:flex; align-items:center; gap:26px; height:74px}
.logo{display:flex; align-items:baseline; gap:9px; text-decoration:none; color:var(--ink); flex:none}
.logo b{font-family:"Cinzel",Georgia,serif; font-weight:400; font-size:25px; letter-spacing:.005em}
.logo span{
  font-size:9.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mist); padding:3px 7px; border:1px solid var(--line); border-radius:999px;
}
.nav{display:flex; gap:4px; margin-left:auto; align-items:center}
.nav a{
  position:relative; text-decoration:none; color:var(--slate); font-size:15px; font-weight:650;
  padding:9px 14px; border-radius:var(--r-sm); transition:color .2s, background .2s;
}
.nav a:hover{color:var(--ink); background:var(--line-soft)}
/* `.nav a` is more specific than `.btn-primary`, so without these the call to
   action inherited the muted nav colour and read as grey text on blue. */
.nav a.btn-primary,.nav a.btn-primary:hover{color:#fff; background:var(--azure)}
.nav a.btn-primary:hover{background:var(--azure-700)}
.nav a.btn-ghost,.nav a.btn-ghost:hover{color:var(--azure-700)}
.nav a.btn-ghost:hover{background:var(--azure-100)}
.nav a[aria-current="page"]{color:var(--azure-700)}
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px;
  background:var(--azure); border-radius:2px;
}
.nav-cta{margin-left:10px}

.burger{
  display:none; margin-left:auto; width:42px; height:42px; border:1px solid var(--line);
  background:#fff; border-radius:var(--r-sm); cursor:pointer; padding:0; place-items:center;
}
.burger span{display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; position:relative; transition:transform .28s var(--ease), opacity .2s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .28s var(--ease)}
.burger span::before{top:-6px} .burger span::after{top:6px}
.burger[aria-expanded="true"] span{transform:rotate(45deg)}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(-90deg)}
.burger[aria-expanded="true"] span::after{opacity:0}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; cursor:pointer;
  font:inherit; font-size:15.5px; font-weight:700; border-radius:999px; padding:12px 26px;
  border:1px solid transparent; white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s, box-shadow .2s, transform .12s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn svg{flex:none; transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--azure); color:#fff; box-shadow:0 3px 12px rgba(22,104,196,.3)}
.btn-primary:hover{background:var(--azure-700); box-shadow:0 6px 20px rgba(22,104,196,.38)}
.btn-ghost{background:#fff; color:var(--azure-700); border-color:#bed4ea}
.btn-ghost:hover{background:var(--azure-100); border-color:var(--azure)}
.btn-light{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.3)}
.btn-light:hover{background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.6)}
.btn-sm{font-size:14px; padding:9px 18px}

/* ---------------- Hero ---------------- */
.hero{
  position:relative; overflow:hidden; color:var(--on-dark); background-color:var(--navy);
  background-image:
    radial-gradient(1200px 600px at 78% -10%, rgba(72,158,232,.42), transparent 66%),
    radial-gradient(800px 500px at 8% 100%, rgba(201,162,39,.16), transparent 62%),
    linear-gradient(158deg, var(--navy) 0%, var(--navy-mid) 46%, var(--navy-2) 100%);
  padding:clamp(64px,9vw,116px) 0 clamp(56px,8vw,96px);
}
/* A register is a ruled ledger — the ruling is the ornament. */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 80% 100% at 50% 0%,#000 18%,transparent 76%);
          mask-image:radial-gradient(ellipse 80% 100% at 50% 0%,#000 18%,transparent 76%);
}
.hero .eyebrow{color:var(--gold)}
.hero .eyebrow::before{background:var(--gold)}
.hero-grid{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center}
.hero p.lede{color:rgba(255,255,255,.76); max-width:56ch}
.hero-actions{display:flex; gap:13px; flex-wrap:wrap; margin-top:32px}
.hero-compact{padding:clamp(52px,7vw,86px) 0 clamp(44px,6vw,64px)}
.hero-compact .hero-grid{grid-template-columns:1fr; text-align:left}

/* Floating stat card over the hero image */
.hero-figure{position:relative}
.hero-badge{
  position:absolute; bottom:-22px; left:-22px; background:#fff; color:var(--ink);
  border-radius:var(--r-md); padding:16px 20px; box-shadow:var(--sh-3);
  display:flex; align-items:center; gap:14px; animation:float 6s ease-in-out infinite;
}
.hero-badge .n{font-size:29px; font-weight:800; letter-spacing:-.03em; color:var(--azure-700); line-height:1}
.hero-badge .k{font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--mist)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------------- Sections ---------------- */
.section{padding:clamp(40px,5vw,72px) 0}
.section-tight{padding:clamp(40px,5vw,64px) 0}
.section-head{max-width:720px; margin-bottom:clamp(32px,4vw,52px)}
.section-head.centre{margin-left:auto; margin-right:auto; text-align:center}
.section-head p{margin:16px 0 0}
.tinted{background:linear-gradient(var(--card),var(--paper))}
.inverted{
  background-color:var(--navy); color:var(--on-dark);
  background-image:radial-gradient(900px 420px at 50% 0%, rgba(72,158,232,.3), transparent 68%);
}
.inverted .lede,.inverted .muted{color:rgba(255,255,255,.72)}

/* ---------------- Cards ---------------- */
.grid{display:grid; gap:22px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px 26px 28px; box-shadow:var(--sh-1); overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--azure),var(--gold));
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.card:hover{transform:translateY(-5px); box-shadow:var(--sh-2); border-color:#c6d8ea}
.card:hover::after{transform:scaleX(1)}
.card h3{font-size:20px; margin:0 0 9px}
.card p{margin:0; color:var(--slate); font-size:15.5px}
.card-link{text-decoration:none; color:inherit; display:block}

.icon-badge{
  width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  background:var(--azure-100); color:var(--azure-700); margin-bottom:16px;
  transition:transform .4s var(--ease), background .3s;
}
.card:hover .icon-badge{transform:rotate(-7deg) scale(1.08)}
.icon-badge.gold{background:var(--gold-soft); color:#8a6d13}
.icon-badge.green{background:var(--pass-soft); color:var(--pass)}
.icon-badge.red{background:var(--fail-soft); color:var(--fail)}

.card-more{
  display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  font-size:14.5px; font-weight:700; color:var(--azure-700);
}
.card-more svg{transition:transform .25s var(--ease)}
.card:hover .card-more svg{transform:translateX(4px)}

/* ---------------- Image placeholders ----------------
   Every image on the site is one of these. The admin portal swaps the
   inner content for an <img> when a URL is supplied, so the layout is
   identical whether or not artwork exists yet. */
.ph{
  position:relative; overflow:hidden; border-radius:var(--r-md);
  background:
    linear-gradient(135deg, #eaf0f7 0%, #dbe6f2 50%, #e6eef7 100%);
  border:1px solid var(--line);
  display:grid; place-items:center; min-height:180px;
  aspect-ratio:var(--ph-ratio, 4/3);
}
.ph::before{
  content:""; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 12px, transparent 12px 24px);
  opacity:.5;
}
/* A slow sheen, so a page of placeholders still feels alive. */
.ph::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:sheen 4.5s ease-in-out infinite;
}
@keyframes sheen{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.ph-in{position:relative; text-align:center; color:var(--mist); padding:20px}
.ph-in svg{opacity:.55; margin:0 auto 8px}
.ph-in b{display:block; font-size:13.5px; font-weight:700; color:var(--slate)}
.ph-in span{font-size:12.5px}
.ph img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.ph.has-image::before,.ph.has-image::after{display:none}
.ph.tall{--ph-ratio:3/4}
.ph.wide{--ph-ratio:16/9}
.ph.square{--ph-ratio:1/1}
.ph.hero-img{--ph-ratio:5/4; border-color:rgba(255,255,255,.22);
  background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  box-shadow:var(--sh-3);}
.ph.hero-img .ph-in b,.ph.hero-img .ph-in span{color:rgba(255,255,255,.8)}
.ph.hero-img .ph-in svg{color:rgba(255,255,255,.75)}

/* ---------------- Stats ---------------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.stat{text-align:center; padding:26px 16px; border-radius:var(--r-md); background:var(--card);
  border:1px solid var(--line); box-shadow:var(--sh-1)}
.inverted .stat{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16)}
.stat .n{font-size:clamp(30px,4vw,40px); font-weight:800; letter-spacing:-.035em; color:var(--azure-700); line-height:1}
.inverted .stat .n{color:#fff}
.stat .k{margin-top:8px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mist)}
.inverted .stat .k{color:rgba(255,255,255,.6)}

/* ---------------- Steps ---------------- */
.steps{counter-reset:step; display:grid; gap:18px}
.step{
  display:grid; grid-template-columns:56px 1fr; gap:20px; align-items:start;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px 24px; box-shadow:var(--sh-1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.step:hover{transform:translateX(5px); box-shadow:var(--sh-2)}
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:"IBM Plex Mono",monospace; font-size:16px; font-weight:500;
  color:var(--azure); background:var(--azure-100); border-radius:12px;
  width:56px; height:56px; display:grid; place-items:center;
}
.step h3{font-size:18.5px; margin:0 0 6px}
.step p{margin:0; color:var(--slate); font-size:15.5px}

/* ---------------- Tabs ---------------- */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px}
.tab-btn{
  font:inherit; font-size:15px; font-weight:700; cursor:pointer;
  background:#fff; border:1px solid var(--line); color:var(--slate);
  border-radius:999px; padding:10px 20px;
  transition:background .2s, color .2s, border-color .2s, transform .12s;
}
.tab-btn:hover{border-color:var(--azure); color:var(--azure-700)}
.tab-btn[aria-selected="true"]{background:var(--azure); border-color:var(--azure); color:#fff;
  box-shadow:0 3px 12px rgba(22,104,196,.28)}
.tab-panel{display:none; animation:fadeUp .45s var(--ease)}
.tab-panel.active{display:block}
@keyframes fadeUp{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

/* ---------------- Accordion ---------------- */
.acc{border:1px solid var(--line); border-radius:var(--r-md); background:#fff; overflow:hidden; box-shadow:var(--sh-1)}
.acc + .acc{margin-top:12px}
.acc-btn{
  display:block; width:100%; text-align:left; font:inherit; font-size:17px; font-weight:700; cursor:pointer;
  background:none; border:none; padding:20px 56px 20px 24px; position:relative; color:var(--ink);
  transition:background .2s;
}
.acc-btn:hover{background:var(--line-soft)}
.acc-btn::after{
  content:""; position:absolute; right:24px; top:50%; width:11px; height:11px;
  border-right:2.2px solid var(--azure); border-bottom:2.2px solid var(--azure);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease);
}
.acc.open .acc-btn::after{transform:translateY(-30%) rotate(225deg)}
.acc-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .34s var(--ease)}
.acc.open .acc-body{grid-template-rows:1fr}
.acc-body>div{overflow:hidden}
.acc-body p{margin:0 24px 22px; color:var(--slate); font-size:16px}

/* ---------------- Callouts ---------------- */
.callout{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  border-radius:var(--r-md); padding:20px 24px; border:1px solid; margin:26px 0;
}
.callout h4{font-size:16.5px; margin:0 0 5px}
.callout p{margin:0; font-size:15.5px}
.callout-info{background:var(--azure-100); border-color:#c7dcf1; color:#123f6d}
.callout-warn{background:var(--warn-soft); border-color:#f0dda6; color:#6b5310}
.callout-good{background:var(--pass-soft); border-color:#bfe3d3; color:#0c5b40}
.callout svg{flex:none; margin-top:2px}

/* ---------------- Checklist ---------------- */
.checks{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.checks li{
  display:grid; grid-template-columns:26px 1fr; gap:14px; align-items:start;
  font-size:16px; color:var(--slate);
}
.checks li b{color:var(--ink)}
.tick{
  width:26px; height:26px; border-radius:50%; background:var(--pass-soft); color:var(--pass);
  display:grid; place-items:center; font-size:13px; font-weight:800; flex:none;
}
.tick.cross{background:var(--fail-soft); color:var(--fail)}

/* ---------------- CTA band ---------------- */
.cta{
  position:relative; overflow:hidden; border-radius:var(--r-xl); color:var(--on-dark);
  background-color:var(--navy);
  background-image:
    radial-gradient(700px 320px at 84% 0%, rgba(72,158,232,.4), transparent 66%),
    linear-gradient(150deg,var(--navy),var(--navy-2));
  padding:clamp(38px,5vw,60px); display:grid; grid-template-columns:1fr auto;
  gap:30px; align-items:center;
}
.cta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 120% at 20% 0%,#000 10%,transparent 72%);
          mask-image:radial-gradient(ellipse 70% 120% at 20% 0%,#000 10%,transparent 72%);
}
.cta h2{position:relative; margin:0 0 10px}
.cta p{position:relative; margin:0; color:rgba(255,255,255,.76); max-width:52ch}
.cta-actions{position:relative; display:flex; gap:12px; flex-wrap:wrap}

/* ---------------- Footer ---------------- */
.foot{background:var(--navy); color:var(--on-dark-soft); padding:clamp(48px,6vw,72px) 0 30px; font-size:15px}
.foot-grid{display:grid; grid-template-columns:1.6fr repeat(2,1fr); gap:36px}
.foot h4{color:var(--on-dark); font-size:12px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; margin:0 0 16px}
.foot ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.foot a{color:rgba(255,255,255,.66); text-decoration:none; transition:color .2s}
.foot a:hover{color:#fff}
.foot-brand b{font-family:"Cinzel",Georgia,serif; font-weight:400; font-size:26px; color:#fff; display:block; margin-bottom:10px}
.foot-brand p{margin:0; max-width:40ch; font-size:15px}
.foot-base{
  margin-top:44px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:14px;
}
.foot-base .sp{flex:1}

/* The admin pill: quiet, but always reachable from any page. */
.admin-pill{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.82); border-radius:999px; padding:8px 18px;
  font-size:13.5px; font-weight:700; letter-spacing:.01em;
  transition:background .25s, border-color .25s, color .25s, transform .18s var(--ease);
}
.admin-pill:hover{background:var(--gold); border-color:var(--gold); color:#20180a; transform:translateY(-2px)}
.admin-pill .dot{width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none; transition:background .25s}
.admin-pill:hover .dot{background:#20180a}

/* ---------------- Scroll reveal ---------------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal-d1{transition-delay:.08s} .reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s} .reveal-d4{transition-delay:.32s}

/* Reading progress bar, fixed to the top of the viewport */
.progress{position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--azure),var(--gold)); z-index:90; transition:width .1s linear}

/* Editable regions get a quiet outline only while the admin preview asks for it */
body.edit-preview [data-edit]{outline:1.5px dashed rgba(22,104,196,.5); outline-offset:3px; border-radius:3px}

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

/* ---------------- Responsive ---------------- */
@media (max-width:1040px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:38px}
  .hero-figure{order:-1}
  .grid-3{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
  .nav{
    position:fixed; inset:74px 0 auto; flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; border-bottom:1px solid var(--line); padding:14px 18px 22px;
    box-shadow:var(--sh-2); transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .25s, transform .25s var(--ease); margin-left:0;
  }
  .nav.open{opacity:1; transform:none; pointer-events:auto}
  .nav a{padding:13px 14px; font-size:16.5px}
  .nav a[aria-current="page"]::after{display:none}
  .nav-cta{margin:10px 0 0; justify-content:center}
  .burger{display:grid}
}
@media (max-width:620px){
  .grid-2,.grid-4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr; gap:30px}
  .hero-badge{left:12px; bottom:-16px; padding:13px 16px}
}

/* =====================================================================
   AQAR landing page — sections, contact form, brand logo
   ===================================================================== */

/* Header height as a variable so anchor targets can offset by exactly it. */
:root{ --header-h:74px; }

/* Anchor scrolling: a click on an in-page link lands the section top flush
   under the sticky header — no half-viewport gap, no overlap. */
/* Anchored sections fill the viewport below the sticky header, with their
   content vertically centred. Landing the section top flush under the header
   then means it occupies the whole screen — no neighbouring section's colour
   band can peek in at the top or bottom. Sections whose content is genuinely
   taller than the viewport simply grow past it and scroll, which is correct.
   Scoped to tablet and up, where the in-page nav lives; phones flow naturally. */
section[id]{ scroll-margin-top:var(--header-h); }
@media (min-width:768px){
  section[id]{
    min-height:calc(100dvh - var(--header-h));
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  section[id] > .wrap{ width:100%; }
}

/* Brand logo mark (transparent PNG) in header and footer. */
.logo-mark{ width:34px; height:34px; border-radius:50%; flex:none; display:block; box-sizing:border-box; }
.logo{ align-items:center; gap:11px; }
.logo b{ font-size:23px; color:var(--ink); }
.logo span{ align-self:center; }

/* ---- Hero: seal signature ---- */
.hero-grid{ align-items:center; gap:clamp(32px,5vw,72px); }
.hero-copy .hero-tagline{
  margin:26px 0 0; font-size:13px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.72);
}
.hero-seal{ display:flex; justify-content:center; }
.seal-panel{
  background:#fff; border-radius:24px; padding:clamp(26px,3vw,40px);
  box-shadow:0 24px 60px rgba(40,15,45,.28); text-align:center;
  max-width:360px; width:100%;
}
.seal-mark{ width:min(240px,60vw); height:auto; display:block; margin:0 auto; }
.seal-caption{
  margin:20px 0 0; font-size:14px; color:var(--slate); font-weight:500;
  border-top:1px solid var(--line); padding-top:16px;
}

/* ---- Alignment row (three quiet statements under the intro) ---- */
.align-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.align-item{
  padding:24px 24px 24px 26px; background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--azure); border-radius:var(--r-md);
}
.align-body{ color:var(--slate); font-size:15.5px; line-height:1.6; }

/* ---- Tinted band (sage-tinted section) ---- */
.tint-band{ background:linear-gradient(180deg,var(--sage-soft),#fff); }

.section#platform{ padding-top:clamp(32px,4vw,56px); padding-bottom:clamp(32px,4vw,56px); }
/* ---- Platform: two-column split so the 6-card section fits the viewport ---- */
.platform-split{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:clamp(24px,3vw,44px); align-items:start; }
.platform-intro .section-head{ margin-bottom:20px; }
.platform-intro .why-note{ margin:0; }
.platform-cards .platform-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#platform .card{ padding:15px 16px; }
#platform .card .tick{ margin-bottom:8px; }
#platform .card h3{ margin:5px 0 5px; font-size:16px; }
#platform .card p{ font-size:13.5px; line-height:1.45; }
@media (max-width:900px){ .platform-split{ grid-template-columns:1fr; } }
@media (max-width:560px){ .platform-cards .platform-grid{ grid-template-columns:1fr; } }
/* ---- Platform grid label pills ---- */
.platform-grid .tick{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:auto; height:auto; padding:5px 12px; border-radius:999px;
  background:var(--azure-100); color:var(--azure-700);
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:14px;
}
.card-quiet{ background:var(--sage-soft); border-style:dashed; }
.why-note{ margin:0 0 24px; padding:14px 18px; }

/* ---- CTA band ---- */
.cta-band{
  background:var(--navy); color:var(--on-dark);
  padding:clamp(52px,7vw,88px) 0;
  background-image:linear-gradient(150deg,var(--navy),var(--navy-2));
}
.cta-in{ max-width:720px; margin:0 auto; text-align:center; }
.cta-band .eyebrow{ color:rgba(255,255,255,.82); justify-content:center; }
.cta-band .eyebrow::before{ background:rgba(255,255,255,.55); }
.cta-band h2{ color:var(--on-dark); margin:0 0 16px; }
.cta-band p{ color:rgba(255,255,255,.82); font-size:18px; margin:0 auto 30px; max-width:56ch; }

.section#faq{ padding-top:clamp(32px,4vw,56px); padding-bottom:clamp(32px,4vw,56px); }
#faq .section-head{ margin-bottom:22px; }
/* ---- Contact ---- */
.contact-intro .display{ font-size:clamp(30px,3.4vw,44px); margin:6px 0 16px; }
.contact-intro .lede{ margin-bottom:20px; }
/* contact section is tall — trim its padding a touch */
.section#contact{ padding-top:clamp(28px,3.2vw,48px); padding-bottom:clamp(28px,3.2vw,48px); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,60px); align-items:start; }
.contact-facts{ list-style:none; padding:0; margin:28px 0 0; display:grid; gap:14px; }
.contact-facts li{ display:flex; gap:16px; align-items:baseline; }
.cf-label{
  flex:none; width:84px; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mist);
}
.contact-facts a{ color:var(--azure-700); text-decoration:none; font-weight:600; }
.contact-facts a:hover{ text-decoration:underline; }

.contact-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,30px); box-shadow:var(--sh-2);
}
.contact-form .cf-fields{ display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; }
.cf-field--wide{ grid-column:1 / -1; }
@media (max-width:560px){ .contact-form .cf-fields{ grid-template-columns:1fr; } }
.cf-field{ display:grid; gap:7px; }
.cf-field label{ font-size:14px; font-weight:600; color:var(--ink); }
.cf-field .req{ color:var(--azure); margin-left:2px; }
.cf-field input, .cf-field select, .cf-field textarea{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  padding:11px 13px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; transition:border-color .15s, box-shadow .15s;
}
.cf-field textarea{ min-height:96px; resize:vertical; }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus{
  outline:none; border-color:var(--azure); box-shadow:0 0 0 3px var(--azure-100);
}
.cf-field.invalid input, .cf-field.invalid select, .cf-field.invalid textarea{ border-color:var(--fail); }
.cf-err{ font-size:13px; color:var(--fail); }
.cf-choice{ display:flex; flex-wrap:wrap; gap:10px 20px; }
.cf-choice label{ display:flex; align-items:center; gap:8px; font-weight:500; cursor:pointer; }
.cf-choice input{ width:auto; }
.cf-consent{ display:flex; gap:11px; align-items:flex-start; }
.cf-consent input{ width:auto; margin-top:3px; flex:none; }
.cf-consent label{ font-weight:400; color:var(--slate); font-size:14px; line-height:1.5; }
.cf-loading{ color:var(--mist); font-size:15px; padding:8px 0; }
.cf-alert{
  margin-top:16px; padding:12px 14px; border-radius:var(--r-sm);
  background:var(--fail-soft); color:var(--fail); font-size:14px; font-weight:500;
}
.btn-block{ width:100%; justify-content:center; margin-top:20px; }
.cf-done{ text-align:center; padding:30px 10px; }
.cf-done-mark{
  width:64px; height:64px; border-radius:50%; margin:0 auto 18px;
  display:grid; place-items:center; background:var(--pass-soft); color:var(--pass);
}
.cf-done p{ font-size:17px; color:var(--ink); font-weight:500; max-width:36ch; margin:0 auto; }

/* ---- Footer additions ---- */
.logo-foot b{ color:var(--on-dark); }
.logo-foot .logo-mark{ background:#fff; padding:4px; box-shadow:0 2px 8px rgba(40,15,45,.28); }
.policies{
  margin-top:36px; padding-top:28px; border-top:1px solid rgba(255,255,255,.14);
  display:grid; gap:8px;
}
.policies .acc-item{ background:transparent; border-color:rgba(255,255,255,.14); }
.policies .acc-btn{ color:var(--on-dark); font-size:14px; }
.policies .acc-body p{ color:var(--on-dark-soft); font-size:13.5px; }

@media (max-width:820px){
  .align-row{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .hero-seal{ order:-1; }
  .seal-panel{ max-width:300px; }
}