@charset "UTF-8";
/* ==========================================================================
   Sattva Centralis — Responsive Stylesheet (mobile-first)
   Breakpoints: 320 / 375 / 425 / 576 / 768 / 992 / 1200 / 1400
   Base rules in style.css are authored for the smallest screens first;
   each block below progressively enhances the layout upward.
   ========================================================================== */

/* ==========================================================================
   BASE — 320px and up (smallest supported screen)
   ========================================================================== */
:root{
  --gutter:16px;
  --header-h:64px;
}

/* Mobile navigation drawer is the default below 992px */
.nav{position:fixed;top:var(--header-h);left:0;right:0;z-index:119;margin-left:0;
  max-height:calc(100vh - var(--header-h));overflow-y:auto;
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 18px 40px rgba(25,26,22,.14);
  transform:translateY(-14px);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .32s var(--ease),opacity .28s var(--ease),visibility .28s}
.nav.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
.nav__list{flex-direction:column;align-items:stretch;gap:0;padding:var(--s-2) 0 var(--s-4)}
.nav__list li{border-bottom:1px solid var(--line)}
.nav__list li:last-child{border-bottom:0}
/* Layout on the bare class only — a compound selector here (0,3,0) would
   outrank the desktop .nav__link rule (0,1,0) and stop the >=992px nav
   from ever shrinking back to a single line. Colour is set separately. */
.nav__link{padding:15px var(--gutter);font-size:.9375rem;color:var(--ink-2)}
.site-header.is-solid .nav__link,
body.has-solid-header .nav__link{color:var(--ink-2)}
.nav__link::after{display:none}
.nav__link[aria-current="page"],
.site-header.is-solid .nav__link[aria-current="page"]{color:var(--gold-deep);font-weight:600}
.nav__cta-mobile{padding:var(--s-4) var(--gutter) 0}
.nav-toggle{display:inline-flex}
.header-cta{display:none}

/* Mobile sticky conversion bar + clearance so nothing hides behind it */
.sticky-cta{display:block}
.float-cta{display:none}
body{padding-bottom:60px}
.cookie-bar{bottom:72px;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.cookie-bar .btn{width:100%}

/* Single-column stacking for every grid */
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
.split{grid-template-columns:1fr;gap:var(--s-6)}
.split--reverse .split__media{order:0}
.gallery-grid{grid-template-columns:1fr;gap:var(--s-3)}
.field-row{grid-template-columns:1fr;gap:0}
.footer-grid{grid-template-columns:1fr;gap:var(--s-6)}
.legal .toc ol{columns:1}
.fact-cols{grid-template-columns:1fr;gap:var(--s-5)}

/* Rhythm
   Section padding is half the space you see BETWEEN two sections — adjacent
   sections each contribute their own padding, so 48px here reads as 96px of
   dead space on screen. Kept deliberately smaller than the gap between a
   section heading and its own content is large, so related things stay
   visually grouped and unrelated ones stay separated. */
.section{padding-block:40px}
.section--tight{padding-block:var(--s-6)}
.cta-band{padding-block:var(--s-7)}
.site-footer{padding-block:var(--s-7) 0}
.section-head{margin-bottom:var(--s-6)}
.form-panel{padding:var(--s-5)}
.modal__head{padding:var(--s-5) var(--s-5) 0}
.modal__body{padding:var(--s-4) var(--s-5) var(--s-5)}
.strip{padding:var(--s-4)}
.cta-inline{padding:var(--s-5);margin-top:var(--s-6)}

/* Hero */
.hero{min-height:600px}
.hero__inner{padding-block:calc(var(--header-h) + var(--s-6)) var(--s-7)}
.hero h1{max-width:100%}
.hero__sub{max-width:100%}
.hero__facts{border-bottom:0}
.hero__fact{flex:1 0 42%;padding:11px 14px 11px 0;margin-right:14px}
.hero__fact:nth-child(2n){border-right:0;margin-right:0;padding-right:0}
.hero__fact b{font-size:1.125rem}
.hero .btn-row .btn{flex:1 1 100%}

/* Page hero */
.page-hero{padding-block:calc(var(--header-h) + var(--s-6)) var(--s-6)}

/* Tables scroll rather than break the viewport */
.fact-table th,.fact-table td{padding:12px 14px;font-size:.875rem}
.fact-table th{width:46%}

/* Lightbox controls out of the way on small screens */
.lightbox__prev{left:4px}
.lightbox__next{right:4px}
.lightbox__btn{width:42px;height:42px}

/* ==========================================================================
   375px and up — comfortable small phones
   ========================================================================== */
@media (min-width:375px){
  :root{--gutter:18px}
  .hero .btn-row .btn{flex:1 1 auto}
  .sticky-cta a{font-size:.75rem}
}

/* ==========================================================================
   425px and up — large phones
   ========================================================================== */
@media (min-width:425px){
  :root{--gutter:20px}
  .hero__fact b{font-size:1.25rem}
  .cookie-bar{flex-direction:row;align-items:center}
  .cookie-bar .btn{width:auto}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   576px and up — landscape phones / small tablets
   ========================================================================== */
@media (min-width:576px){
  :root{--gutter:24px;--header-h:70px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .field-row{grid-template-columns:1fr 1fr;gap:var(--s-4)}
  .section{padding-block:48px}
  .hero{min-height:660px}
  .hero__fact{flex:0 0 auto;padding:14px 22px 14px 0;margin-right:22px}
  .hero__fact:nth-child(2n){border-right:1px solid rgba(255,255,255,.18);margin-right:22px;padding-right:22px}
  .hero__fact:last-child{border-right:0;margin-right:0;padding-right:0}
  .hero__facts{border-bottom:1px solid rgba(255,255,255,.18)}
  .form-panel{padding:var(--s-6)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .legal .toc ol{columns:2}
  .fact-cols{grid-template-columns:repeat(2,1fr)}
  .fact-table th,.fact-table td{padding:15px 20px;font-size:.9375rem}
}

/* ==========================================================================
   768px and up — tablets
   ========================================================================== */
@media (min-width:768px){
  :root{--gutter:28px}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .fact-cols{grid-template-columns:repeat(3,1fr)}
  .gallery-grid{grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
  .section{padding-block:56px}
  .section-head{margin-bottom:40px}
  .hero{min-height:720px}
  .hero__fact b{font-size:1.375rem}
  .page-hero{padding-block:calc(var(--header-h) + var(--s-7)) var(--s-7)}
  .cta-inline{padding:var(--s-6);flex-wrap:nowrap}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:var(--s-7)}
  .modal__dialog{max-width:480px}
}

/* ==========================================================================
   992px and up — desktop: full navigation, no mobile sticky bar
   ========================================================================== */
@media (min-width:992px){
  :root{--gutter:32px;--header-h:76px}

  /* Restore the inline desktop navigation */
  .nav{position:static;max-height:none;overflow:visible;margin-left:auto;background:none;
    border-top:0;box-shadow:none;transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav__list{flex-direction:row;align-items:center;gap:2px;padding:0}
  .nav__list li{border-bottom:0}
  /* 10 nav items must fit beside the logo and CTA without wrapping */
  .nav__link{padding:9px 8px;font-size:.8125rem;letter-spacing:0;color:rgba(255,255,255,.9);white-space:nowrap}
  .nav__link::after{left:8px;right:8px}
  .logo__name{font-size:.9375rem;letter-spacing:.06em}
  .logo__mark{width:34px;height:34px;font-size:.875rem}
  .header-cta{margin-left:var(--s-2)}
  .nav__link::after{display:block}
  .site-header.is-solid .nav__link,
  body.has-solid-header .nav__link{color:var(--ink-2)}
  .site-header.is-solid .nav__link[aria-current="page"],
  body.has-solid-header .nav__link[aria-current="page"]{color:var(--ink);font-weight:500}
  .nav__link[aria-current="page"]{color:#fff}
  .nav__cta-mobile{display:none}
  .nav-toggle{display:none}
  .header-cta{display:inline-flex}
  .nav-backdrop{display:none}

  /* Desktop uses the floating CTA rail instead of the bottom bar */
  .sticky-cta{display:none}
  .float-cta{display:flex}
  body{padding-bottom:0}
  .cookie-bar{bottom:var(--s-4);right:110px;left:var(--s-4);margin-inline:0}

  .section{padding-block:56px}          /* 112px between sections */
  .section-head{margin-bottom:var(--s-7)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .split{grid-template-columns:1.05fr .95fr;gap:var(--s-7)}
  .split--reverse .split__media{order:2}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr 1.3fr}
  .hero{min-height:clamp(640px,88vh,820px)}
}

/* ==========================================================================
   1200px and up — large desktop
   ========================================================================== */
@media (min-width:1200px){
  :root{--gutter:36px}
  .split{gap:var(--s-8)}
  .section{padding-block:60px}          /* 120px between sections */
  .nav__link{padding:9px 11px;font-size:.875rem}
  .nav__link::after{left:11px;right:11px}
  .logo__name{font-size:1rem;letter-spacing:.07em}
  .logo__mark{width:36px;height:36px}
  .hero{min-height:clamp(680px,90vh,860px)}
}

/* ==========================================================================
   1400px and up — wide screens
   ========================================================================== */
@media (min-width:1400px){
  :root{--container:1320px;--gutter:40px}
  .nav__link{padding:9px 12px;font-size:.875rem;letter-spacing:.01em}
  .nav__link::after{left:12px;right:12px}
  .logo__name{font-size:1.0625rem;letter-spacing:.08em}
  .logo__mark{width:38px;height:38px}
  .header-cta{margin-left:var(--s-4)}
  .section{padding-block:64px}          /* 128px between sections */
  .cta-band{padding-block:var(--s-9)}
  h1{font-size:3.75rem}
  .hero__sub{font-size:1.625rem}
}

/* ==========================================================================
   Short landscape screens — keep the hero usable
   ========================================================================== */
@media (max-height:560px) and (orientation:landscape){
  .hero{min-height:auto}
  .hero__inner{padding-block:calc(var(--header-h) + var(--s-5)) var(--s-6)}
  .hero__facts{display:none}
  .nav{max-height:calc(100vh - var(--header-h))}
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print{
  .site-header,.nav,.sticky-cta,.float-cta,.cookie-bar,.modal,.lightbox,
  .hero__dots,.btn,.cta-band,.cta-inline,.skip-link{display:none !important}
  body{padding-bottom:0;background:#fff;color:#000;font-size:12pt}
  .section{padding-block:16pt}
  .hero__scrim,.page-hero__bg{display:none}
  .page-hero,.hero{background:#fff;padding-block:0}
  .page-hero h1,.hero h1,.page-hero p{color:#000;text-shadow:none}
  .site-footer{background:#fff;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .faq__a{height:auto !important}
}