/* ============ DESIGN TOKENS ============ */
:root{
  --bg:#173540;
  --bg-deep:#122B34;
  --ink:#F7FBFA;          /* bright near-white for high contrast */
  --ink-soft:#DCE9E8;     /* readable secondary text on dark */
  --orange:#FF8A3D;
  --sky:#9FE0F5;
  --line:#386170;         /* bright enough that card edges stay visible */
  --glow-o:rgba(255,138,61,.16);
  --glow-s:rgba(159,224,245,.12);
}

/* Readable baseline for low-vision visitors: 17px base, comfortably above
   the 16px browser default, but smaller than the previous 19px. */
html{font-size:106.25%}
/* Sticky footer: body is a full-height flex column and the footer takes the
   leftover space above it, so on short pages (404, policy on a tall screen)
   the footer sits at the bottom of the viewport instead of directly under
   the content. On long pages nothing changes. */
body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
body > footer{margin-top:auto}

/* ============ REUSABLE ============ */
.headline{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-0.01em}
.accent{color:var(--orange)}
.sky{color:var(--sky)}
h1{font-size:clamp(2.1rem, 5.4vw, 3.9rem);line-height:1.07}
h2{font-size:clamp(1.7rem, 4vw, 2.7rem);line-height:1.14}
a{color:var(--sky);text-underline-offset:3px}
a:hover{color:var(--orange)}

.label{color:var(--sky);font-weight:700;letter-spacing:0.16em;text-transform:uppercase;font-size:clamp(0.9rem, 1.8vw, 0.98rem)}
/* Accent variant of the section label. .label.accent (two classes) outranks
   .label on its own, so it wins regardless of source order. */
.label.accent{color:var(--orange)}

.btn{font-weight:700;font-size:1.05rem;border:none;padding:0.75rem 1.9rem;border-radius:12px}
.btn-primary{background:var(--orange);color:#231205;box-shadow:0 6px 24px var(--glow-o)}
.btn-primary:hover,.btn-primary:focus{background:#FFA163;color:#231205;box-shadow:0 8px 32px rgba(255,138,61,.3)}
.btn-primary:disabled{background:var(--orange);color:#231205;opacity:.6}
.btn-outline-secondary{border:2px solid var(--line) !important;color:var(--ink);background:transparent}
.btn-outline-secondary:hover{border-color:var(--sky) !important;color:var(--sky);background:rgba(159,224,245,.06)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}

/* ============ ARTWORK (SVG injected by assets/js/artwork.js) ============
   One large named piece per section, presented like a gallery exhibit. */
.exhibit{margin-bottom:clamp(30px,4.5vw,48px)}
.art{margin:0;text-align:center}
/* Sized to sit level with the adjacent heading block rather than tower over it */
.art-canvas{width:100%;max-width:min(100%, 17rem);margin:0 auto;aspect-ratio:1}
.art-canvas svg{width:100%;height:100%;display:block;overflow:visible}
@media (max-width:991.98px){
  .art-canvas{max-width:min(62vw, 14rem)}
}

/* Artwork motion */
.spin-slow{transform-origin:50% 50%;animation:art-spin 48s linear infinite}
.spin-rev{transform-origin:50% 50%;animation:art-spin 32s linear infinite reverse}
.drift{animation:art-drift 3.4s ease-in-out infinite;animation-delay:var(--d,0s)}
.pulse{animation:art-pulse 3.2s ease-in-out infinite;animation-delay:var(--d,0s)}
.swing{animation:art-swing 9s ease-in-out infinite}
@keyframes art-spin{to{transform:rotate(360deg)}}
@keyframes art-drift{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes art-pulse{0%,100%{opacity:.2}45%{opacity:.9}}
@keyframes art-swing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}

/* ============ NAV ============ */
.navbar{background:var(--bg) !important;border-bottom:1px solid var(--line);padding-top:.7rem;padding-bottom:.7rem}
.navbar-brand{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(.95rem,3.2vw,1.15rem)}
.navbar-brand img{width:clamp(36px,8.5vw,44px);height:clamp(36px,8.5vw,44px)}
.navbar-brand em{font-style:normal;color:var(--orange)}
.nav-link{color:var(--ink) !important;font-weight:600;font-size:1.02rem;transition:color .2s;padding-left:.9rem !important;padding-right:.9rem !important}
.nav-link:hover{color:var(--orange) !important}
.navbar-toggler{border-color:var(--ink-soft) !important;padding:.5rem .7rem}
.navbar-toggler:focus{box-shadow:0 0 0 .25rem rgba(255,138,61,.3) !important}
@media (max-width:991.98px){
  .navbar-collapse{padding-top:.5rem;padding-bottom:.5rem}
  .nav-link{padding:.6rem 0 !important}
}

/* ============ SECTIONS ============ */
.section{background:var(--bg-deep);border-top:1px solid var(--line);padding:clamp(56px, 9vw, 100px) 0;position:relative}
.section.alt{background:var(--bg)}
.section p{font-size:clamp(1rem, 1.9vw, 1.15rem);color:var(--ink-soft)}
.section p b{color:var(--ink)}
.sec-intro{max-width:62ch}
/* Inside a centred block (e.g. the CTA band) the intro must centre too —
   max-width alone leaves it hugging the left edge. */
.text-center > .sec-intro,
.text-center .sec-intro{margin-left:auto;margin-right:auto}

/* Panel: the workhorse card. No default height — equal heights apply only
   inside card-grid rows, so stacked panels can never overflow a section. */
.panel{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:clamp(20px,3.5vw,30px);position:relative;overflow:hidden;transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease}
.section.alt .panel{background:var(--bg-deep)}
.panel::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--orange),var(--sky));opacity:0;transition:opacity .25s ease}
.panel:hover{transform:translateY(-6px);border-color:var(--sky);box-shadow:0 18px 48px rgba(0,0,0,.4)}
.panel:hover::before{opacity:1}
.panel h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1.3rem,3.2vw,1.55rem)}
.panel h4{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1.15rem,2.8vw,1.3rem)}
.panel p,.panel li{font-size:1.03rem;color:var(--ink-soft)}
.panel .tag{font-family:'Space Mono',monospace;color:var(--sky);font-size:.95rem;font-weight:700}
.panel ul{color:var(--ink-soft);padding-left:1.2rem;margin-bottom:0}
.panel ul li{margin-bottom:.45rem}
.panel ul li::marker{color:var(--orange)}

/* Equal-height cards ONLY inside grid rows (never in stacked sidebars) */
.row.g-lg-4 > [class*="col"] > .panel,
.row.g-lg-4 > [class*="col"] > .fact{height:100%}

/* Fact cards */
.fact{background:var(--bg);border:1px solid var(--line);border-left:8px solid var(--orange);border-radius:14px;padding:clamp(20px,3.5vw,28px)}
.fact b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1.55rem, 3.4vw, 1.9rem);line-height:1.2;color:var(--sky)}
.fact span{color:var(--ink-soft);font-size:clamp(1rem, 1.9vw, 1.12rem)}
.fact.flip{border-left-color:var(--sky)}
.fact.flip b{color:var(--orange)}
/* Same lift-and-glow as .panel so every card on the page behaves alike */
.fact{transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease}
.fact:hover{transform:translateY(-6px);border-color:var(--sky);box-shadow:0 18px 48px rgba(0,0,0,.4)}
.fact:hover{border-left-color:var(--orange)}
.fact.flip:hover{border-left-color:var(--sky)}

/* Quote / testimonial
   Cards are flex columns so the attribution always pins to the bottom edge —
   with the equal-height rule above, all three boxes match in both directions. */
.panel-quote{display:flex;flex-direction:column}
/* Must be .panel .quote, not .quote: `.panel p` above is (0,1,1) and would
   otherwise win on specificity and force the body size back on. */
.panel .quote{font-family:'Caveat',cursive;font-weight:700;
  font-size:clamp(1.8rem, 1.5vw + 1.55rem, 1.8rem);line-height:1.28;color:var(--ink);
  flex:1 0 auto;margin-bottom:1rem}
.quote-by{color:var(--sky);font-weight:700;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;margin-top:auto}

/* CTA band + footer */
.cta-band{background:
  radial-gradient(800px 400px at 50% 0%, var(--glow-o), transparent 65%),
  linear-gradient(135deg,#1B4250,var(--bg-deep))}
footer{padding:clamp(28px, 5vw, 42px) 0;color:var(--ink-soft);font-size:.98rem;border-top:1px solid var(--line);background:var(--bg-deep)}
footer a{color:var(--ink-soft);text-decoration:none}
footer a:hover{color:var(--sky)}

/* Scroll reveal (added by JS only, so content always shows without JS) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ============ HERO + COMPARE SLIDER ============ */
.hero{padding:clamp(46px, 7vw, 92px) 0;background:
  radial-gradient(1100px 520px at 50% -12%, var(--glow-o), transparent 62%),
  radial-gradient(800px 460px at 88% 24%, var(--glow-s), transparent 62%)}
.hero .container-lg{display:flex;flex-direction:column;align-items:center}
.hero-head{text-align:center;max-width:920px;width:100%}
.status{display:inline-flex;align-items:center;gap:10px;background:var(--bg-deep);border:1px solid var(--line);border-radius:999px;padding:9px 20px;font-weight:600;font-size:clamp(.92rem, 2.5vw, 1rem);color:var(--sky);margin-bottom:28px;max-width:100%}
.status .dot{width:11px;height:11px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(255,138,61,.25);flex:none}
.status .dot{animation:pulse-dot 2s ease-in-out infinite}
@keyframes pulse-dot{50%{box-shadow:0 0 0 9px rgba(255,138,61,.10)}}
.lede{margin-top:24px;font-size:clamp(1.05rem, 2.4vw, 1.25rem);color:var(--ink-soft);max-width:46ch;margin-left:auto;margin-right:auto;padding:0 12px}
.lede b{color:var(--ink)}

.compare-shell{margin-top:clamp(38px, 7vw, 56px);width:100%;max-width:900px;margin-left:auto;margin-right:auto;padding:0 clamp(4px,2vw,20px)}
.drag-cue{text-align:center;margin-bottom:14px;font-weight:700;color:var(--orange);font-size:clamp(.98rem, 2.5vw, 1.12rem);letter-spacing:.04em}
.compare{position:relative;height:clamp(390px, 68vh, 540px);border-radius:22px;overflow:hidden;border:1px solid var(--line);user-select:none;width:100%;box-shadow:0 24px 70px rgba(0,0,0,.45), 0 0 90px var(--glow-o)}

.side{position:absolute;inset:0;display:flex;flex-direction:column;gap:clamp(10px, 2vw, 16px);padding:clamp(18px, 3.6vw, 36px);overflow:hidden}
.side .side-label{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:var(--orange);font-size:clamp(1rem, 2.4vw, 1.55rem);line-height:1.05;flex-shrink:0}
.side.decoded .side-label{text-align:right}
/* Content alignment is declared explicitly on BOTH panes. An explicit rule on
   the element always beats a value inherited from an ancestor, so no stray
   utility class on a parent can leak down into this text again. */
.side.technical .content{justify-content:flex-start;text-align:left}
.side.decoded .content{justify-content:center;text-align:center}
/*
  Responsive-text fix: font tracks viewport WIDTH (vw), never vh,
  and site.js shrink-to-fit backs up the longest scenarios on phones.
*/
.side .content{flex:1;display:flex;align-items:center;line-height:1.5;white-space:normal;overflow:hidden;font-size:clamp(.92rem, 1.1vw + .58rem, 1.2rem)}

.side.technical{background:linear-gradient(135deg,#1B4250,var(--bg-deep));padding-right:clamp(54px, 13vw, 136px)}
.side.technical .content{font-family:'Space Mono',monospace;font-weight:400;color:var(--sky)}

.side.decoded{background:linear-gradient(135deg,#1B4250,var(--bg-deep));clip-path:inset(0 0 0 var(--cut, 50%));padding-left:clamp(54px, 13vw, 136px)}
.side.decoded .content{font-family:'Caveat',cursive;font-weight:700;color:var(--ink);font-size:clamp(1.45rem, 1.7vw + .88rem, 1.9rem)}

.handle{position:absolute;top:0;bottom:0;left:var(--cut, 50%);width:4px;background:var(--orange);transform:translateX(-2px);pointer-events:none;z-index:4}
.handle .grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(50px, 7.5vw, 72px);height:clamp(50px, 7.5vw, 72px);border-radius:50%;background:var(--orange);display:grid;place-items:center;color:#231205;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.handle .grip svg{width:clamp(23px, 5.5vw, 40px);height:clamp(23px, 5.5vw, 40px)}
.compare input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;-webkit-appearance:none;appearance:none}
.compare input[type=range]:focus-visible ~ .handle .grip{outline:3px solid var(--sky);outline-offset:3px}

.side-labels{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-weight:700;font-size:clamp(.88rem, 2.2vw, 1.05rem);padding:0 clamp(6px, 3vw, 20px)}
.side-labels .l{color:var(--ink-soft)}
.side-labels .r{color:var(--sky);text-align:right}

.hero-cta{display:flex;gap:clamp(12px, 3vw, 18px);flex-wrap:wrap;justify-content:center;margin-top:clamp(36px, 7vw, 52px)}
@media (max-width:575.98px){
  .hero-cta{flex-direction:column;align-items:stretch;width:100%;max-width:26rem;margin-left:auto;margin-right:auto}
  .hero-cta .btn{width:100%}
  .compare{height:min(76vh,500px)}
}

/* ============ CONTACT FORM (for the contact page, added later) ============ */
.form-card{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:clamp(22px, 4vw, 42px)}
.form-card .form-control{background:var(--bg-deep);border:1px solid var(--line);color:var(--ink);font-size:1.08rem;padding:.7rem 1rem;border-radius:12px}
.form-card .form-control::placeholder{color:#A9C4CA}
.form-card .form-control:focus{background:var(--bg-deep);color:var(--ink);border-color:var(--orange);box-shadow:0 0 0 .25rem rgba(255,138,61,.25)}
.form-card label{font-weight:700;margin-bottom:8px;font-size:1.05rem}
#form-status{min-height:1.6rem;color:var(--sky);font-weight:600;font-size:1.05rem}

/* ============ PAGE HEADER (inner pages) ============ */
.page-hero{padding:clamp(46px, 7vw, 84px) 0;text-align:center;background:
  radial-gradient(900px 420px at 50% -10%, var(--glow-o), transparent 65%),
  radial-gradient(700px 380px at 85% 30%, var(--glow-s), transparent 65%)}
.page-hero p{color:var(--ink-soft);max-width:56ch;margin:20px auto 0;font-size:clamp(1.05rem, 2.2vw, 1.25rem)}


/* Definition-style rows used for contact details and award years */
.detail-list{list-style:none;padding:0;margin:0}
.detail-list li{padding:.55rem 0;border-bottom:1px solid var(--line);font-size:1.03rem;color:var(--ink-soft);
  display:flex;align-items:center;gap:.7rem}
.detail-list li:last-child{border-bottom:0}
.detail-list b{color:var(--ink);margin-right:.4rem}

/* ============ POLICY / LONG-FORM TEXT ============ */
.policy{max-width:70ch}
.policy h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1.35rem,3vw,1.6rem);margin-top:2.6rem;color:var(--ink)}
.policy h4{font-weight:700;font-size:1.15rem;margin-top:1.8rem;color:var(--sky)}
.policy p,.policy li{color:var(--ink-soft);font-size:1.05rem}
.policy ul{padding-left:1.2rem}
.policy li{margin-bottom:.5rem}
.policy li::marker{color:var(--orange)}

/* ============ 404 ============ */
.big-code{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(5rem,18vw,10rem);line-height:1;color:var(--orange);letter-spacing:-.02em}

/* ============ BRAND MARK (injected by artwork.js) ============ */
.brand-mark{display:inline-block;width:44px;height:44px;flex:none;line-height:0}
.brand-mark svg{width:100%;height:100%;display:block}
.brand-mark-sm{width:28px;height:28px}
@media (max-width:575.98px){.brand-mark{width:38px;height:38px}}

/* ============ CERTIFICATION WALL (about page) ============
   Badges arrive as third-party artwork on assorted backgrounds, so each one
   gets a light tile. Fixed tile height plus object-fit keeps a ragged set of
   source images on a clean grid. */
/*
  Image tiles. The images MUST be sized with width/height 100% + object-fit,
  not max-width/max-height. A grid or flex item defaults to min-height:auto,
  so the row grows to the image's natural size, the percentage maxima then
  resolve against that larger row, and the image spills out of the tile.
  Filling the box and letting object-fit:contain scale it down is
  deterministic and cannot overflow.
*/
.cert-wall{margin-top:clamp(6px,2vw,14px)}
.img-tile{background:#FFFFFF;border:1px solid var(--line);border-radius:14px;
  display:block;overflow:hidden;padding:14px}
.img-tile img{display:block;width:100%;height:100%;object-fit:contain}

.cert-tile{height:clamp(104px,15vw,132px);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.cert-tile:hover{transform:translateY(-5px);border-color:var(--orange);box-shadow:0 14px 34px rgba(0,0,0,.4)}

/* ============ AWARD + PARTNER IMAGERY (about page) ============ */
.award{text-align:center}
/* Photographs, so the tile is taller and the padding tighter */
.award-img{height:clamp(180px,28vw,220px);padding:10px;margin-bottom:18px}
.logo-img{height:clamp(92px,13vw,112px);margin-bottom:18px}

/* Bullet lists nested inside a fact card (laws page) */
.fact .detail-list li{border-bottom-color:var(--line);font-size:1rem}

/* Small inline icons in the contact detail list (injected by artwork.js) */
.mini-icon{display:inline-block;width:1.35rem;height:1.35rem;flex:none;color:var(--orange);line-height:0}
.mini-icon svg{width:100%;height:100%;display:block}

/* ============ FEATURE ROW (about page: licenses & partnerships) ============
   One partner per row, alternating sides, so each gets real estate instead of
   being squeezed into a third of the page. */
.feature-row{background:var(--bg);border:1px solid var(--line);border-radius:18px;
  padding:clamp(22px,3.5vw,38px);margin-top:clamp(18px,2.5vw,26px);
  transition:border-color .25s ease, box-shadow .25s ease}
.section.alt .feature-row{background:var(--bg-deep)}
.feature-row:hover{border-color:var(--sky);box-shadow:0 18px 48px rgba(0,0,0,.35)}
.feature-row h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1.4rem,3.4vw,1.8rem)}
.feature-row p{font-size:1.08rem;color:var(--ink-soft)}
.feature-row .tag{font-family:'Space Mono',monospace;color:var(--sky);font-size:.95rem;font-weight:700}
/* Partner logos get more room in this layout */
.logo-img-lg{height:clamp(120px,20vw,168px)}

/* ============ CONTACT PAGE ============ */
/* Left-aligned variant of the hero lede, for the two-column contact header */
.lede-left{font-size:clamp(1.05rem,2.2vw,1.25rem);color:var(--ink-soft);max-width:52ch}
.lede-left b{color:var(--ink)}

/* Details as a horizontal strip rather than a sidebar card */
.contact-strip{display:grid;gap:14px;margin-top:clamp(34px,5vw,48px);
  grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:991.98px){.contact-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479.98px){.contact-strip{grid-template-columns:1fr}}
.contact-item{display:flex;align-items:center;gap:.85rem;text-decoration:none;
  background:var(--bg-deep);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;color:var(--ink-soft);transition:border-color .2s ease, transform .2s ease}
a.contact-item:hover{border-color:var(--orange);color:var(--ink);transform:translateY(-3px)}
.ci-text{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.ci-text b{color:var(--sky);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  font-family:'Space Mono',monospace}
.contact-item .ci-text{font-size:1.02rem;word-break:break-word}

/* The form is the point of the page, so it gets the full column */
.form-shell{max-width:860px;margin:0 auto}
.form-consent{font-size:.98rem;color:var(--ink-soft)}

/* ============ PARTICLE LOGO (contact page) ============
   Square stage for the WebGL canvas. Sized a little larger than a flat
   artwork piece, since the particles fly in from beyond the mark's edges
   and need the extra room to read properly. */
.logo3d{width:100%;max-width:min(100%, 23rem);margin:0 auto;aspect-ratio:1;position:relative}
.logo3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* The static mark sits at the same scale the assembled particles settle at,
   so the cross-fade holds its size instead of jumping. */
.logo3d-static{position:absolute;inset:0;display:grid;place-items:center;
  transition:opacity .45s ease}
.logo3d-static svg{width:66%;height:66%;display:block}
.logo3d-static.is-out{opacity:0}
@media (max-width:991.98px){.logo3d{max-width:min(72vw, 19rem)}}