/* ==========================================================================
   Bashirali Currimjee — Official Website
   Design System : "Indian Ocean Petrol & Copper Ember"
   Author        : Creaa Think Designs
   ========================================================================== */

/* ---------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------- */
:root{
  /* Core palette — deep marine petrol + copper ember + sand ivory */
  --ink:          #05161B;
  --deep:         #0A2831;
  --petrol:       #103F4C;
  --sea:          #1B6B7A;
  --lagoon:       #2E93A3;
  --mist:         #A8CBD0;
  --haze:         #DDEAEB;

  --copper:       #9E4E24;
  --ember:        #D97B44;
  --ember-soft:   #F0BE96;
  --brass:        #C69A5A;

  --sand:         #F5EFE4;
  --sand-2:       #EDE4D5;
  --paper:        #FFFDF9;
  --line:         #DDD2C0;

  --text:         #21343A;
  --text-soft:    #52676D;
  --text-onDark:  #EDF3F3;
  --text-onDark-soft:#B4CBCF;

  /* Typography */
  --f-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-eyebrow: clamp(.66rem, .58rem + .22vw, .78rem);
  --fs-small:   clamp(.83rem, .79rem + .18vw, .92rem);
  --fs-body:    clamp(1rem, .955rem + .2vw, 1.09rem);
  --fs-lead:    clamp(1.08rem, 1rem + .42vw, 1.32rem);
  --fs-h4:      clamp(1.12rem, 1.04rem + .38vw, 1.35rem);
  --fs-h3:      clamp(1.35rem, 1.18rem + .76vw, 1.95rem);
  --fs-h2:      clamp(1.75rem, 1.4rem + 1.6vw, 3rem);
  --fs-h1:      clamp(2.15rem, 1.5rem + 3.1vw, 4.5rem);
  --fs-mega:    clamp(2.6rem, 1.6rem + 4.6vw, 6rem);

  /* Space */
  --sp-1:  .375rem;
  --sp-2:  .75rem;
  --sp-3:  1.15rem;
  --sp-4:  1.75rem;
  --sp-5:  2.5rem;
  --sp-6:  3.5rem;
  --sp-7:  5rem;
  --sp-8:  7rem;
  --section-y: clamp(3.75rem, 2.2rem + 6.2vw, 8rem);

  --shell:   1280px;
  --shell-n: 1080px;
  --gutter:  clamp(1.15rem, .6rem + 2.4vw, 3.25rem);

  --r-xs: 4px;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 42px;

  --sh-1: 0 2px 10px rgba(5,22,27,.06);
  --sh-2: 0 14px 40px -18px rgba(5,22,27,.28);
  --sh-3: 0 34px 80px -32px rgba(5,22,27,.42);

  --ease: cubic-bezier(.22,.68,.32,1);
}

/* ---------------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.78;
  color:var(--text);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5,figure,p,blockquote{margin:0;}
strong,b{font-weight:650;}
::selection{background:var(--ember);color:#fff;}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--deep);
}
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);line-height:1.2;}
h4{font-size:var(--fs-h4);line-height:1.3;}

/* Access gate — internal pages stay hidden until verified */
html:not(.bac-authed) body:not(.gate-body){visibility:hidden;}

/* ---------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   --------------------------------------------------------------- */
.shell{width:min(100% - (var(--gutter) * 2), var(--shell));margin-inline:auto;}
.shell-n{width:min(100% - (var(--gutter) * 2), var(--shell-n));margin-inline:auto;}
.section{padding-block:var(--section-y);position:relative;}
.section--tight{padding-block:clamp(2.75rem,1.8rem + 4vw,5rem);}
.stack > * + *{margin-top:var(--sp-3);}
.stack-lg > * + *{margin-top:var(--sp-5);}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-body);
  font-size:var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--copper);
}
.eyebrow::before{
  content:"";width:34px;height:2px;background:var(--copper);flex:none;
}
.eyebrow--light{color:var(--ember-soft);}
.eyebrow--light::before{background:var(--ember-soft);}
.eyebrow--center{justify-content:center;}

.lead{font-size:var(--fs-lead);line-height:1.62;color:var(--text-soft);}
.muted{color:var(--text-soft);}
.on-dark{color:var(--text-onDark);}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff;}
.on-dark .muted,.on-dark .lead{color:var(--text-onDark-soft);}

.rule{height:1px;background:var(--line);border:0;margin:0;}
.rule--dark{background:rgba(255,255,255,.16);}

/* Section title block */
.sec-head{max-width:60ch;}
.sec-head .eyebrow{margin-bottom:var(--sp-2);}
.sec-head h2 + p{margin-top:var(--sp-3);}
.sec-head--center{margin-inline:auto;text-align:center;}
.sec-head--center .eyebrow{justify-content:center;}

/* ---------------------------------------------------------------
   4. BUTTONS
   --------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.7rem;
  font-size:var(--fs-small);font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  border-radius:100px;
  transition:all .35s var(--ease);
  border:1.5px solid transparent;
  line-height:1.2;text-align:center;
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .35s var(--ease);}
.btn:hover svg{transform:translateX(4px);}
.btn--primary{background:var(--copper);color:#fff;border-color:var(--copper);box-shadow:0 12px 28px -14px rgba(158,78,36,.9);}
.btn--primary:hover{background:var(--deep);border-color:var(--deep);color:#fff;}
.btn--ghost{border-color:rgba(16,63,76,.35);color:var(--deep);}
.btn--ghost:hover{background:var(--deep);border-color:var(--deep);color:#fff;}
.btn--light{border-color:rgba(255,255,255,.45);color:#fff;}
.btn--light:hover{background:#fff;color:var(--deep);border-color:#fff;}
.btn--solid-light{background:#fff;color:var(--deep);border-color:#fff;}
.btn--solid-light:hover{background:var(--ember);border-color:var(--ember);color:#fff;}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);}

.txtlink{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:var(--fs-small);font-weight:650;letter-spacing:.1em;text-transform:uppercase;
  color:var(--copper);border-bottom:1.5px solid rgba(158,78,36,.4);padding-bottom:.3rem;
  transition:.3s var(--ease);
}
.txtlink:hover{color:var(--deep);border-color:var(--deep);gap:.9rem;}
.txtlink--light{color:var(--ember-soft);border-color:rgba(240,190,150,.4);}
.txtlink--light:hover{color:#fff;border-color:#fff;}

/* ---------------------------------------------------------------
   5. IMAGE FRAMES — every photo shown COMPLETE (no cropping)
   --------------------------------------------------------------- */
.frame{
  position:relative;
  background:linear-gradient(160deg,var(--haze),var(--sand-2));
  border-radius:var(--r-md);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-2);
}
.frame img{
  width:100%;height:100%;
  object-fit:contain;      /* full image always visible */
  object-position:center;
}
.frame--dark{background:linear-gradient(160deg,#0d323d,#05161b);box-shadow:var(--sh-3);}
.frame--sand{background:linear-gradient(150deg,var(--sand),var(--sand-2));}
.frame--pad{padding:clamp(.6rem,.3rem + 1vw,1.25rem);}
.frame--soft{border-radius:var(--r-lg);}
.frame--sq{border-radius:var(--r-xs);}
.frame--r-4x3{aspect-ratio:4/3;}
.frame--r-3x2{aspect-ratio:3/2;}
.frame--r-5x3{aspect-ratio:5/3;}
.frame--r-16x9{aspect-ratio:16/9;}
.frame--r-19x10{aspect-ratio:19/10;}
.frame--r-1x1{aspect-ratio:1/1;}
.frame--r-4x5{aspect-ratio:4/5;}
.frame--r-5x6{aspect-ratio:5/6;}
.frame--auto{aspect-ratio:auto;}
.frame--auto img{height:auto;}

.figure-note{
  margin-top:.85rem;
  font-size:var(--fs-small);
  color:var(--text-soft);
  line-height:1.55;
  border-left:2px solid var(--ember);
  padding-left:.85rem;
}
.on-dark .figure-note{color:var(--text-onDark-soft);border-color:var(--ember);}

/* Decorative accent behind a frame */
.frame-wrap{position:relative;}
.frame-wrap::before{
  content:"";position:absolute;inset:auto -18px -18px auto;
  width:58%;height:58%;
  border:1.5px solid var(--brass);border-radius:var(--r-md);
  z-index:-1;
}
.frame-wrap--tl::before{inset:-18px auto auto -18px;}

/* ---------------------------------------------------------------
   6. HEADER / NAVIGATION
   --------------------------------------------------------------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:900;
  background:rgba(5,22,27,.14);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.site-header.is-solid,
body.nav-solid .site-header{
  background:rgba(5,22,27,.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 34px -22px rgba(0,0,0,.85);
  border-bottom-color:rgba(255,255,255,.09);
}
.nav-bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  min-height:76px;
}
.brand{display:flex;align-items:center;gap:.85rem;flex:none;padding-block:.6rem;}
.brand__mark{
  width:44px;height:44px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--ember),var(--copper));
  color:#fff;font-family:var(--f-display);font-size:1.02rem;font-weight:600;letter-spacing:.02em;
  box-shadow:0 8px 18px -10px rgba(158,78,36,.95);
}
.brand__text{display:flex;flex-direction:column;line-height:1.12;}
.brand__name{
  font-family:var(--f-display);font-size:1.06rem;font-weight:600;color:#fff;letter-spacing:.005em;
  white-space:nowrap;
}
.brand__sub{
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ember-soft);font-weight:600;margin-top:.22rem;white-space:nowrap;
}

.nav-menu{display:flex;align-items:center;gap:clamp(.4rem,-.4rem + 1.4vw,1.35rem);}
.nav-menu a{
  position:relative;display:block;padding:.55rem .2rem;
  font-size:.795rem;font-weight:550;letter-spacing:.055em;text-transform:uppercase;
  color:rgba(255,255,255,.86);white-space:nowrap;transition:color .3s var(--ease);
}
.nav-menu a::after{
  content:"";position:absolute;left:0;bottom:.15rem;width:0;height:1.5px;
  background:var(--ember);transition:width .35s var(--ease);
}
.nav-menu a:hover{color:#fff;}
.nav-menu a:hover::after,
.nav-menu a.is-current::after{width:100%;}
.nav-menu a.is-current{color:#fff;}

.nav-cta{flex:none;}
.nav-mobile-cta{display:none;}
.nav-cta .btn{padding:.72rem 1.25rem;font-size:.72rem;}

.nav-toggle{
  display:none;width:46px;height:46px;flex:none;
  border:1px solid rgba(255,255,255,.32);border-radius:50%;
  align-items:center;justify-content:center;
}
.nav-toggle span{position:relative;display:block;width:19px;height:1.6px;background:#fff;transition:.3s var(--ease);}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:19px;height:1.6px;background:#fff;transition:.3s var(--ease);
}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}
body.menu-open .nav-toggle span{background:transparent;}
body.menu-open .nav-toggle span::before{top:0;transform:rotate(45deg);}
body.menu-open .nav-toggle span::after{top:0;transform:rotate(-45deg);}

/* ---------------------------------------------------------------
   7. HERO SYSTEM
   --------------------------------------------------------------- */
.hero{
  position:relative;
  background:
    radial-gradient(120% 90% at 12% 8%, #14515f 0%, transparent 58%),
    radial-gradient(90% 80% at 92% 92%, #16323b 0%, transparent 60%),
    linear-gradient(155deg,#082430 0%,#05161b 55%,#0b2d38 100%);
  color:var(--text-onDark);
  overflow:hidden;
  padding-top:calc(76px + clamp(2.5rem,1rem + 5vw,5.5rem));
  padding-bottom:clamp(3rem,1.5rem + 5vw,6rem);
  isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(80% 70% at 50% 40%,#000 0%,transparent 100%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000 0%,transparent 100%);
}
.hero::after{
  content:"";position:absolute;z-index:-1;
  width:min(52vw,640px);aspect-ratio:1;border-radius:50%;
  right:-14%;top:-18%;
  background:radial-gradient(circle,rgba(217,123,68,.28),transparent 66%);
  filter:blur(10px);
}

/* Home hero — asymmetric split */
.hero-home__grid{
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center;
}
.hero-home__title{
  font-size:var(--fs-mega);color:#fff;letter-spacing:-.028em;line-height:1.02;
}
.hero-home__title em{
  display:block;font-style:normal;color:var(--ember-soft);
  font-size:.44em;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--f-body);font-weight:600;margin-top:1.1rem;
}
.hero-home__lead{max-width:56ch;margin-top:var(--sp-4);color:var(--text-onDark-soft);font-size:var(--fs-lead);}
.hero-home__cta{margin-top:var(--sp-5);}
.hero-home__media{position:relative;}
.hero-home__media .frame{background:linear-gradient(165deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);}
.hero-badge{
  position:absolute;left:-22px;bottom:26px;
  background:var(--paper);color:var(--deep);
  padding:1rem 1.35rem;border-radius:var(--r-sm);
  box-shadow:var(--sh-3);max-width:230px;
  border-left:4px solid var(--ember);
}
.hero-badge strong{display:block;font-family:var(--f-display);font-size:1.55rem;line-height:1;color:var(--copper);white-space:nowrap;}
.hero-badge strong span{display:inline;font-size:inherit;color:inherit;margin:0;letter-spacing:0;text-transform:none;font-weight:inherit;}
.hero-badge > span{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);margin-top:.4rem;font-weight:600;}

/* Hero stat strip */
.hero-stats{
  margin-top:clamp(2.5rem,1.5rem + 3vw,4.25rem);
  padding-top:var(--sp-4);
  border-top:1px solid rgba(255,255,255,.15);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);
}
.hero-stats div strong{
  display:block;font-family:var(--f-display);font-size:clamp(1.6rem,1.1rem + 1.5vw,2.4rem);
  color:#fff;line-height:1;
}
.hero-stats div span{
  display:block;margin-top:.55rem;font-size:.73rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-onDark-soft);font-weight:600;line-height:1.5;
}

/* Interior page hero */
.hero-page{padding-bottom:clamp(2.5rem,1.2rem + 4vw,5rem);}
.hero-page__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:end;}
.hero-page__title{color:#fff;letter-spacing:-.025em;}
.hero-page__lead{margin-top:var(--sp-3);max-width:58ch;color:var(--text-onDark-soft);font-size:var(--fs-lead);}
.hero-page__media .frame{background:linear-gradient(165deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-onDark-soft);margin-bottom:var(--sp-3);}
.crumbs a{color:var(--ember-soft);}
.crumbs a:hover{color:#fff;}
.crumbs span[aria-hidden]{opacity:.5;}

/* ---------------------------------------------------------------
   8. SURFACES
   --------------------------------------------------------------- */
.bg-sand{background:var(--sand);}
.bg-sand-2{background:linear-gradient(180deg,var(--sand) 0%,var(--paper) 100%);}
.bg-paper{background:var(--paper);}
.bg-deep{background:linear-gradient(160deg,#0a2831 0%,#05161b 60%,#0e3a46 100%);color:var(--text-onDark);}
.bg-petrol{background:var(--petrol);color:var(--text-onDark);}
.bg-ink{background:var(--ink);color:var(--text-onDark);}
.bg-deep h1,.bg-deep h2,.bg-deep h3,.bg-deep h4,
.bg-petrol h1,.bg-petrol h2,.bg-petrol h3,.bg-petrol h4,
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4{color:#fff;}
.bg-deep p,.bg-petrol p,.bg-ink p{color:var(--text-onDark-soft);}
.bg-deep .muted,.bg-petrol .muted,.bg-ink .muted{color:var(--text-onDark-soft);}

/* ---------------------------------------------------------------
   9. CARD & GRID COMPONENTS
   --------------------------------------------------------------- */
.grid{display:grid;gap:clamp(1.15rem,.6rem + 1.6vw,2.15rem);}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
.g-2-1{grid-template-columns:2fr 1fr;}
.g-1-2{grid-template-columns:1fr 2fr;}
.g-split{grid-template-columns:1fr 1fr;align-items:center;}
.g-55-45{grid-template-columns:1.22fr 1fr;align-items:center;}
.g-45-55{grid-template-columns:1fr 1.22fr;align-items:center;}

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:clamp(1.35rem,.9rem + 1.4vw,2.15rem);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
  height:100%;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:var(--brass);}
.card h3,.card h4{color:var(--deep);}
.card p{margin-top:.75rem;color:var(--text-soft);}
.card__num{
  font-family:var(--f-display);font-size:.95rem;font-weight:600;letter-spacing:.16em;
  color:var(--copper);display:block;margin-bottom:.9rem;
}
.card__icon{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--sand),var(--sand-2));
  border:1px solid var(--line);margin-bottom:1.1rem;color:var(--copper);
}
.card__icon svg{width:24px;height:24px;}
.card--dark{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.14);}
.card--dark h3,.card--dark h4{color:#fff;}
.card--dark p{color:var(--text-onDark-soft);}
.card--dark:hover{background:rgba(255,255,255,.075);border-color:var(--ember);}
.card--dark .card__num{color:var(--ember-soft);}
.card--dark .card__icon{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:var(--ember-soft);}
.card--accent{background:linear-gradient(155deg,var(--copper),#7d3c1a);border-color:transparent;color:#fff;}
.card--accent h3,.card--accent h4{color:#fff;}
.card--accent p{color:rgba(255,255,255,.92);}
.card--accent .card__num{color:rgba(255,255,255,.75);}
.card--flat{box-shadow:none;}
.card--flat:hover{transform:none;box-shadow:var(--sh-1);}

/* Feature list */
.ticks{display:grid;gap:.85rem;}
.ticks li{position:relative;padding-left:2rem;color:var(--text-soft);line-height:1.7;}
.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;width:11px;height:11px;
  border:2px solid var(--copper);border-radius:50%;
}
.ticks--light li{color:var(--text-onDark-soft);}
.ticks--light li::before{border-color:var(--ember);}
.ticks strong{color:var(--deep);font-weight:650;}
.ticks--light strong{color:#fff;}

/* Numbered feature rows */
.rows{display:grid;gap:0;border-top:1px solid var(--line);}
.rows > li{
  display:grid;grid-template-columns:auto 1fr 1.5fr;gap:clamp(1rem,.5rem + 2vw,3rem);
  padding-block:clamp(1.4rem,1rem + 1.4vw,2.35rem);
  border-bottom:1px solid var(--line);align-items:start;
}
.rows__n{font-family:var(--f-display);font-size:1.05rem;color:var(--copper);font-weight:600;letter-spacing:.08em;padding-top:.2rem;}
.rows h3{margin-bottom:.4rem;}
.rows p{color:var(--text-soft);}
.rows--light{border-color:rgba(255,255,255,.16);}
.rows--light > li{border-color:rgba(255,255,255,.16);}
.rows--light p{color:var(--text-onDark-soft);}
.rows--light .rows__n{color:var(--ember-soft);}

/* Stat blocks */
.stats{display:grid;gap:clamp(1rem,.5rem + 1.6vw,2rem);}
.stat{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(1.25rem,.9rem + 1.2vw,1.9rem);
}
.stat strong{
  display:block;font-family:var(--f-display);font-size:clamp(1.85rem,1.3rem + 2vw,2.85rem);
  color:var(--copper);line-height:1;letter-spacing:-.02em;
}
.stat span{display:block;margin-top:.65rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);font-weight:600;line-height:1.55;}
.stat p{margin-top:.75rem;font-size:var(--fs-small);color:var(--text-soft);line-height:1.65;}
.stat--dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);}
.stat--dark strong{color:#fff;}
.stat--dark span,.stat--dark p{color:var(--text-onDark-soft);}

/* Pull quote */
.pullquote{
  position:relative;
  padding:clamp(1.75rem,1.2rem + 2.4vw,3.25rem);
  background:linear-gradient(150deg,var(--sand),var(--sand-2));
  border-radius:var(--r-lg);
  border-left:5px solid var(--copper);
}
.pullquote blockquote{
  font-family:var(--f-display);font-size:clamp(1.2rem,1rem + 1.05vw,1.85rem);
  line-height:1.42;color:var(--deep);font-weight:500;letter-spacing:-.012em;
}
.pullquote cite{
  display:block;margin-top:1.25rem;font-style:normal;
  font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--copper);font-weight:650;
}
.pullquote--dark{background:rgba(255,255,255,.05);border-left-color:var(--ember);}
.pullquote--dark blockquote{color:#fff;}
.pullquote--dark cite{color:var(--ember-soft);}

/* Timeline */
.timeline{position:relative;display:grid;gap:0;}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--copper),var(--brass),transparent);}
.timeline > li{position:relative;padding-left:3.15rem;padding-bottom:clamp(1.6rem,1.1rem + 1.6vw,2.6rem);}
.timeline > li:last-child{padding-bottom:0;}
.timeline > li::before{
  content:"";position:absolute;left:0;top:.42em;width:20px;height:20px;border-radius:50%;
  background:var(--paper);border:2.5px solid var(--copper);
}
.timeline__yr{
  display:inline-block;font-family:var(--f-display);font-size:1.12rem;font-weight:600;
  color:var(--copper);letter-spacing:.04em;margin-bottom:.35rem;
}
.timeline h3{font-size:var(--fs-h4);margin-bottom:.45rem;}
.timeline p{color:var(--text-soft);}
.timeline--light::before{background:linear-gradient(180deg,var(--ember),var(--brass),transparent);}
.timeline--light > li::before{background:var(--ink);border-color:var(--ember);}
.timeline--light .timeline__yr{color:var(--ember-soft);}
.timeline--light p{color:var(--text-onDark-soft);}

/* Accordion */
.acc{border-top:1px solid var(--line);}
.acc__item{border-bottom:1px solid var(--line);}
.acc__btn{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.35rem 0;text-align:left;
  font-family:var(--f-display);font-size:var(--fs-h4);font-weight:600;color:var(--deep);line-height:1.35;
}
.acc__btn i{
  flex:none;width:30px;height:30px;border:1.5px solid var(--brass);border-radius:50%;position:relative;margin-top:.15rem;
  transition:.35s var(--ease);
}
.acc__btn i::before,.acc__btn i::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--copper);transition:.35s var(--ease);
}
.acc__btn i::before{width:11px;height:1.6px;transform:translate(-50%,-50%);}
.acc__btn i::after{width:1.6px;height:11px;transform:translate(-50%,-50%);}
.acc__item.is-open .acc__btn i{background:var(--copper);border-color:var(--copper);transform:rotate(180deg);}
.acc__item.is-open .acc__btn i::before,.acc__item.is-open .acc__btn i::after{background:#fff;}
.acc__item.is-open .acc__btn i::after{opacity:0;}
.acc__panel{max-height:0;overflow:hidden;transition:max-height .5s var(--ease);}
.acc__panel > div{padding-bottom:1.5rem;color:var(--text-soft);}
.acc__panel > div > * + *{margin-top:.9rem;}

/* Gallery */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,.5rem + 1.6vw,1.9rem);}
.gal__item{display:flex;flex-direction:column;gap:.9rem;}
/* three-up gallery rows share one mat height so captions align */
.gal .gal__item .frame{aspect-ratio:4/3;}

.gal__cap{font-size:var(--fs-small);color:var(--text-soft);line-height:1.6;}
.gal__cap strong{display:block;color:var(--deep);font-weight:650;font-size:.95rem;margin-bottom:.2rem;}

/* Contact */
.info-list{display:grid;gap:1.15rem;}
.info-item{display:flex;gap:1.05rem;align-items:flex-start;}
.info-item__ic{
  width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--copper),#7d3c1a);color:#fff;
}
.info-item__ic svg{width:20px;height:20px;}
.info-item__tx span{display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-soft);font-weight:650;margin-bottom:.25rem;}
.info-item__tx a,.info-item__tx p{font-size:1.02rem;color:var(--deep);font-weight:600;line-height:1.5;word-break:break-word;}
.info-item__tx a:hover{color:var(--copper);}
.on-dark .info-item__tx span{color:var(--text-onDark-soft);}
.on-dark .info-item__tx a,.on-dark .info-item__tx p{color:#fff;}
.on-dark .info-item__tx a:hover{color:var(--ember-soft);}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem;}
.field{display:flex;flex-direction:column;gap:.5rem;}
.field--full{grid-column:1 / -1;}
.field label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:650;color:var(--text-soft);}
.field input,.field textarea,.field select{
  width:100%;padding:.92rem 1.05rem;font-family:var(--f-body);font-size:.98rem;color:var(--text);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
  transition:.3s var(--ease);
}
.field textarea{min-height:140px;resize:vertical;}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(158,78,36,.16);
}
.form-note{font-size:var(--fs-small);color:var(--text-soft);}
.form-msg{
  display:none;margin-top:1rem;padding:.95rem 1.15rem;border-radius:var(--r-sm);
  background:rgba(27,107,122,.1);border:1px solid rgba(27,107,122,.3);color:var(--petrol);
  font-size:var(--fs-small);font-weight:600;
}
.form-msg.is-on{display:block;}

/* CTA band */
.cta-band{
  position:relative;overflow:hidden;
  background:linear-gradient(140deg,#0d3946 0%,#05161b 55%,#12525f 100%);
  color:var(--text-onDark);
  border-radius:var(--r-xl);
  padding:clamp(2.25rem,1.4rem + 3.4vw,4.5rem);
}
.cta-band::after{
  content:"";position:absolute;right:-8%;top:-40%;width:44%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(217,123,68,.3),transparent 65%);
}
.cta-band__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.35fr auto;gap:var(--sp-4);align-items:center;}
.cta-band h2{color:#fff;}
.cta-band p{margin-top:.9rem;color:var(--text-onDark-soft);max-width:52ch;}

/* Marquee-free ribbon */
.ribbon{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.1rem;
}
.ribbon li{
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:650;
  color:var(--petrol);background:var(--paper);border:1px solid var(--line);
  padding:.5rem 1rem;border-radius:100px;
}
.ribbon--light li{color:var(--text-onDark);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);}

/* Split feature (image + text) */
.split{display:grid;gap:clamp(1.75rem,1rem + 3vw,4rem);align-items:center;}
.split--55{grid-template-columns:1.1fr 1fr;}
.split--45{grid-template-columns:1fr 1.1fr;}

/* Mosaic */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.85rem,.4rem + 1.4vw,1.6rem);}
.mosaic__a{grid-column:span 4;}
.mosaic__b{grid-column:span 2;}
.mosaic__c{grid-column:span 2;}
.mosaic__d{grid-column:span 4;}

/* ---------------------------------------------------------------
   10. FOOTER
   --------------------------------------------------------------- */
.site-footer{background:var(--ink);color:var(--text-onDark);position:relative;overflow:hidden;}
.site-footer::before{
  content:"";position:absolute;left:-10%;top:-30%;width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(27,107,122,.28),transparent 66%);
}
.footer-top{position:relative;z-index:1;padding-block:clamp(3rem,2rem + 4vw,5.5rem);}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.35fr;gap:clamp(1.75rem,1rem + 3vw,3.5rem);}
.footer-brand .brand__name{font-size:1.22rem;}
.footer-about{margin-top:1.15rem;color:var(--text-onDark-soft);font-size:var(--fs-small);line-height:1.8;max-width:42ch;}
.footer-h{
  font-family:var(--f-body);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ember-soft);font-weight:700;margin-bottom:1.25rem;
}
.footer-links{display:grid;gap:.7rem;}
.footer-links a{font-size:var(--fs-small);color:var(--text-onDark-soft);transition:.3s var(--ease);display:inline-block;}
.footer-links a:hover{color:#fff;transform:translateX(4px);}
.footer-contact{display:grid;gap:1rem;}
.footer-contact li{display:flex;gap:.8rem;align-items:flex-start;font-size:var(--fs-small);color:var(--text-onDark-soft);line-height:1.65;}
.footer-contact svg{width:17px;height:17px;flex:none;margin-top:.28rem;color:var(--ember);}
.footer-contact a:hover{color:#fff;}
.footer-contact strong{display:block;color:#fff;font-weight:650;font-size:.95rem;}

.socials{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem;}
.socials a{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:#fff;transition:.35s var(--ease);
}
.socials a svg{width:17px;height:17px;fill:currentColor;}
.socials a:hover{transform:translateY(-4px);border-color:transparent;}
.socials a.s-fb:hover{background:#1877F2;}
.socials a.s-ig:hover{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF);}
.socials a.s-li:hover{background:#0A66C2;}
.socials a.s-yt:hover{background:#FF0000;}
.socials a.s-x:hover{background:#000;}

.footer-bottom{
  position:relative;z-index:1;
  border-top:1px solid rgba(255,255,255,.12);
  padding-block:1.5rem;
  display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;align-items:center;justify-content:space-between;
}
.footer-bottom p{font-size:.82rem;color:var(--text-onDark-soft);margin:0;}
.footer-bottom a{color:var(--ember-soft);font-weight:600;}
.footer-bottom a:hover{color:#fff;text-decoration:underline;}

/* Back to top */
.to-top{
  position:fixed;right:20px;bottom:20px;z-index:800;
  width:48px;height:48px;border-radius:50%;
  background:var(--copper);color:#fff;display:grid;place-items:center;
  box-shadow:var(--sh-2);opacity:0;visibility:hidden;transform:translateY(12px);
  transition:.4s var(--ease);
}
.to-top svg{width:18px;height:18px;}
.to-top.is-on{opacity:1;visibility:visible;transform:none;}
.to-top:hover{background:var(--deep);}

/* ---------------------------------------------------------------
   11. REVEAL ANIMATION
   --------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.rv.is-in{opacity:1;transform:none;}
.rv-d1{transition-delay:.1s;} .rv-d2{transition-delay:.2s;}
.rv-d3{transition-delay:.3s;} .rv-d4{transition-delay:.4s;}

/* ---------------------------------------------------------------
   12. PASSCODE GATE (index.html)
   --------------------------------------------------------------- */
.gate{
  min-height:100vh;min-height:100dvh;
  display:grid;place-items:center;
  padding:clamp(1.25rem,.8rem + 2vw,3rem);
  background:
    radial-gradient(110% 85% at 15% 10%, #16505e 0%, transparent 55%),
    radial-gradient(95% 85% at 88% 90%, #7a3d20 0%, transparent 58%),
    linear-gradient(160deg,#082530 0%,#05161b 60%,#0a2f3a 100%);
  position:relative;overflow:hidden;
}
.gate::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);
}
.gate__card{
  position:relative;z-index:1;
  width:min(100%,470px);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-radius:var(--r-lg);
  padding:clamp(1.85rem,1.3rem + 2.4vw,3.15rem);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85);
  text-align:center;
}
.gate__seal{
  width:74px;height:74px;margin:0 auto 1.5rem;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--ember),var(--copper));
  box-shadow:0 16px 34px -16px rgba(217,123,68,.85);
}
.gate__seal svg{width:30px;height:30px;color:#fff;}
.gate__title{
  font-family:var(--f-display);font-size:clamp(1.5rem,1.2rem + 1.3vw,2.1rem);
  color:#fff;font-weight:600;letter-spacing:-.015em;line-height:1.2;
}
.gate__sub{margin-top:.85rem;color:#B4CBCF;font-size:.95rem;line-height:1.7;}
.gate__form{margin-top:2rem;text-align:left;}
.gate__label{
  display:block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:#F0BE96;font-weight:700;margin-bottom:.65rem;
}
.gate__inputwrap{position:relative;}
.gate__input{
  width:100%;padding:1.05rem 3.4rem 1.05rem 1.15rem;
  font-family:var(--f-body);font-size:1.05rem;letter-spacing:.16em;
  color:#fff;background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.22);border-radius:12px;
  transition:.3s var(--ease);
}
.gate__input::placeholder{color:rgba(255,255,255,.34);letter-spacing:.3em;}
.gate__input:focus{outline:none;border-color:var(--ember);background:rgba(0,0,0,.4);box-shadow:0 0 0 3px rgba(217,123,68,.22);}
.gate__eye{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  color:rgba(255,255,255,.6);transition:.3s var(--ease);
}
.gate__eye:hover{color:#fff;background:rgba(255,255,255,.1);}
.gate__eye svg{width:19px;height:19px;}
.gate__btn{
  width:100%;margin-top:1.15rem;padding:1.05rem 1.5rem;
  background:linear-gradient(135deg,var(--ember),var(--copper));
  color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  border-radius:12px;transition:.35s var(--ease);
  box-shadow:0 16px 34px -18px rgba(217,123,68,.95);
}
.gate__btn:hover{filter:brightness(1.08);transform:translateY(-2px);}
.gate__btn:active{transform:translateY(0);}
.gate__error{
  margin-top:1rem;padding:.8rem 1rem;border-radius:10px;
  background:rgba(214,69,69,.16);border:1px solid rgba(233,110,110,.45);
  color:#FFC9C9;font-size:.85rem;font-weight:600;text-align:center;
  display:none;
}
.gate__error.is-on{display:block;animation:shake .4s var(--ease);}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-7px);}
  75%{transform:translateX(7px);}
}
.gate__hint{margin-top:1.6rem;font-size:.76rem;color:rgba(180,203,207,.75);text-align:center;line-height:1.7;}

/* ---------------------------------------------------------------
   13. RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width:1180px){
  .nav-menu{gap:.7rem;}
  .nav-menu a{font-size:.735rem;}
  .brand__name{font-size:.98rem;}
}

@media (max-width:1250px){
  .nav-cta{display:none;}
}

@media (max-width:1080px){
  :root{--shell:100%;}
  .nav-toggle{display:flex;}
  .nav-cta{display:none;}
  .nav-menu{
    position:fixed;inset:76px 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(5,22,27,.985);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    padding:1rem var(--gutter) 2rem;
    max-height:calc(100dvh - 76px);overflow-y:auto;
    transform:translateY(-14px);opacity:0;visibility:hidden;pointer-events:none;
    transition:.35s var(--ease);
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  body.menu-open .nav-menu{transform:none;opacity:1;visibility:visible;pointer-events:auto;}
  body.menu-open .site-header{background:rgba(5,22,27,.985);}
  .nav-menu a{padding:.95rem 0;font-size:.86rem;border-bottom:1px solid rgba(255,255,255,.09);}
  .nav-menu a::after{display:none;}
  .nav-menu a.is-current{color:var(--ember-soft);}
  .nav-menu li:last-child a{border-bottom:0;}
  .nav-menu .nav-mobile-cta{display:block;margin-top:1.1rem;}
  .nav-menu .nav-mobile-cta .btn{width:100%;}

  .hero-home__grid,.hero-page__grid{grid-template-columns:1fr;}
  .hero-home__media,.hero-page__media{max-width:520px;width:100%;margin-inline:auto;}
  .hero-page__grid{align-items:start;}
  .hero-badge{left:auto;right:-10px;bottom:-16px;}

  .g-4{grid-template-columns:repeat(2,1fr);}
  .g-2-1,.g-1-2{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .cta-band__inner{grid-template-columns:1fr;}
}

@media (max-width:900px){
  .g-3{grid-template-columns:repeat(2,1fr);}
  .gal{grid-template-columns:repeat(2,1fr);}
  .split--55,.split--45,.g-split,.g-55-45,.g-45-55{grid-template-columns:1fr;}
  .rows > li{grid-template-columns:auto 1fr;}
  .rows > li > p{grid-column:2;}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:var(--sp-3);}
  .mosaic__a,.mosaic__b,.mosaic__c,.mosaic__d{grid-column:span 3;}
  .form-grid{grid-template-columns:1fr;}
}

@media (max-width:680px){
  html{scroll-padding-top:84px;}
  .nav-bar{min-height:68px;}
  .nav-menu{inset:68px 0 auto 0;max-height:calc(100dvh - 68px);}
  .brand__mark{width:38px;height:38px;font-size:.88rem;}
  .brand__name{font-size:.9rem;}
  .brand__sub{font-size:.53rem;letter-spacing:.2em;}
  .hero{padding-top:calc(68px + 2.5rem);}

  .g-2,.g-3,.g-4{grid-template-columns:1fr;}
  .gal{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .mosaic{grid-template-columns:1fr;}
  .mosaic__a,.mosaic__b,.mosaic__c,.mosaic__d{grid-column:span 1;}
  .rows > li{grid-template-columns:1fr;gap:.5rem;}
  .rows > li > p{grid-column:1;}
  .rows__n{font-size:.92rem;}
  .btn{width:100%;}
  .btn-row{flex-direction:column;align-items:stretch;}
  .cta-band__inner .btn-row{width:100%;}
  .hero-badge{position:static;margin-top:1.15rem;max-width:none;box-shadow:var(--sh-2);}
  .frame-wrap::before{display:none;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .timeline > li{padding-left:2.5rem;}
  .pullquote{border-left-width:4px;}
  .to-top{right:14px;bottom:14px;width:44px;height:44px;}
}

@media (max-width:400px){
  .hero-stats{grid-template-columns:1fr;}
  .brand__sub{display:none;}
  .gate__input{letter-spacing:.1em;font-size:.98rem;}
}

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

@media print{
  .site-header,.to-top,.cta-band,.nav-toggle{display:none!important;}
  body{color:#000;background:#fff;}
}

/* ---------------------------------------------------------------
   14. EXTENDED COMPONENTS
   --------------------------------------------------------------- */
.dl{display:grid;}
.dl > div{
  display:grid;grid-template-columns:170px 1fr;gap:.5rem 1.25rem;
  padding:.9rem 0;border-bottom:1px dashed var(--line);
}
.dl > div:last-child{border-bottom:0;}
.dl dt{font-size:.71rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);font-weight:700;padding-top:.3rem;}
.dl dd{margin:0;color:var(--deep);font-weight:600;line-height:1.6;}
.dl--light > div{border-color:rgba(255,255,255,.16);}
.dl--light dt{color:var(--text-onDark-soft);}
.dl--light dd{color:#fff;}

.note-card{
  background:linear-gradient(155deg,var(--petrol),#0a2831);
  color:var(--text-onDark);border-radius:var(--r-md);
  padding:clamp(1.35rem,1rem + 1.3vw,2.1rem);
  border-left:5px solid var(--ember);
}
.note-card h4{color:#fff;margin-bottom:.65rem;}
.note-card p{color:var(--text-onDark-soft);}
.note-card + .note-card{margin-top:1.25rem;}

.note-card--sand{
  background:linear-gradient(155deg,var(--sand),var(--sand-2));
  color:var(--text);border-left-color:var(--copper);
}
.note-card--sand h4{color:var(--deep);}
.note-card--sand p{color:var(--text-soft);}

.cols-2{columns:2;column-gap:clamp(1.5rem,1rem + 2vw,3.25rem);}
.cols-2 > p{break-inside:avoid;margin-bottom:1.1rem;}

.tagline{
  font-family:var(--f-display);
  font-size:clamp(1.15rem,1rem + .8vw,1.6rem);
  line-height:1.45;color:var(--deep);font-weight:500;
}
.on-dark .tagline,.bg-deep .tagline,.bg-ink .tagline{color:#fff;}

.figure-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,.5rem + 1.5vw,1.75rem);}


.panel{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,1rem + 2vw,2.75rem);
}
.panel--dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15);}

.kv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.15rem;}
.kv{border-left:3px solid var(--brass);padding-left:1.05rem;}
.kv strong{display:block;font-family:var(--f-display);font-size:1.35rem;color:var(--copper);line-height:1.2;}
.kv span{display:block;font-size:.8rem;color:var(--text-soft);margin-top:.25rem;line-height:1.55;}
.kv--light strong{color:var(--ember-soft);}
.kv--light span{color:var(--text-onDark-soft);}

.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;}
.step-grid > div{padding:clamp(1.35rem,1rem + 1.2vw,2rem);border-right:1px solid var(--line);background:var(--paper);}
.step-grid > div:last-child{border-right:0;}
.step-grid h4{margin-bottom:.6rem;}
.step-grid p{color:var(--text-soft);font-size:var(--fs-small);}

.hl{background:linear-gradient(180deg,transparent 62%,rgba(217,123,68,.28) 62%);}

@media (max-width:900px){
  .cols-2{columns:1;}
  .kv-grid{grid-template-columns:1fr;}
  .step-grid{grid-template-columns:1fr;}
  .step-grid > div{border-right:0;border-bottom:1px solid var(--line);}
  .step-grid > div:last-child{border-bottom:0;}
  .figure-strip{grid-template-columns:1fr;}
}
@media (max-width:680px){
  .dl > div{grid-template-columns:1fr;}
  .dl dt{padding-top:0;}
}

/* ---------------------------------------------------------------
   15. FLOW RHYTHM — spacing between consecutive prose elements
   --------------------------------------------------------------- */
p + p,
p + ul, p + ol,
ul + p, ol + p,
blockquote + p,
p + .btn-row, p + .pullquote, p + .note-card,
ul + .btn-row, ol + .btn-row{margin-top:1.05rem;}

p + h3, p + h4, ul + h3, ul + h4{margin-top:1.85rem;}
h3 + p, h4 + p{margin-top:.7rem;}

/* components that already declare their own rhythm keep it */
.cols-2 > p + p{margin-top:0;}
.card p + p,
.stat p + p,
.note-card p + p,
.gal__cap p + p{margin-top:.85rem;}
.rows p + p,
.acc__panel p + p{margin-top:.9rem;}
.footer-bottom p + p{margin-top:0;}
.form-note + .form-msg{margin-top:1rem;}

/* ---------------------------------------------------------------
   16. STICKY ASIDE — keeps a short sidebar with a long main column
   --------------------------------------------------------------- */
.sticky-col{position:sticky;top:104px;align-self:start;}
@media (max-width:900px){.sticky-col{position:static;top:auto;}}