/* ==========================================================================
   MINERVA TRADING HUB — Editorial / Institutional Theme
   Dark Navy · Warm Gold · Cormorant + Inter
   ========================================================================== */

:root{
  --navy-900:#070b16;
  --navy-800:#0b1124;
  --navy-700:#0f1a32;
  --navy-600:#152442;
  --navy-500:#1e3056;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.18);

  --ivory:#f3ede0;
  --paper:#f5f1e8;
  --paper-2:#ece5d4;
  --ink:#0a0f1f;
  --muted:#6b7488;
  --muted-dark:rgba(243,237,224,.65);

  --gold:#c9a961;
  --gold-soft:#d9bc7b;
  --gold-deep:#9d7e3d;
  --copper:#b87a3d;

  --shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 60px -30px rgba(0,0,0,.6);
  --shadow-2: 0 30px 80px -40px rgba(0,0,0,.8);

  --serif:'Cormorant Garamond', 'Times New Roman', serif;
  --sans :'Inter','Helvetica Neue',Arial,sans-serif;

  --radius-lg:18px;
  --radius:12px;
  --radius-sm:8px;

  --container:1240px;
  --section-py:clamp(72px,10vw,160px);

  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }

/* film grain overlay */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/></svg>");
}

/* ==================== TYPOGRAPHY ==================== */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.012em;
  margin:0 0 .4em;
}
h1{ font-size:clamp(2.6rem,5.4vw,5.2rem) }
h2{ font-size:clamp(2rem,3.6vw,3.3rem) }
h3{ font-size:clamp(1.3rem,1.7vw,1.6rem); font-weight:600 }
p{ margin:0 0 1em; color:#33405b }

.eyebrow{
  font-family:var(--sans);
  font-size:.75rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-deep);
  font-weight:600;
  display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before{
  content:""; width:32px; height:1px; background:var(--gold);
}
.section-kicker{
  font-family:var(--sans);
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:600; margin-bottom:14px;
}
.shell, .section-shell, .footer-shell, .header-shell{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(20px, 4vw, 40px);
}

/* ==================== HEADER ==================== */
/* NOTE: do NOT use backdrop-filter at base — it creates a containing block
   that breaks position:fixed on the mobile nav drawer. */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:80;
  padding:18px 0;
  transition:background .35s var(--ease), padding .35s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled{
  padding:10px 0;
  background:rgba(7,11,22,.85);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 var(--line);
}
/* On mobile the menu drawer is opaque — kill backdrop-filter so the drawer's
   position:fixed is relative to the viewport, not the header. */
@media (max-width:1080px){
  .site-header.is-scrolled{
    background:var(--navy-900);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}
.site-header[data-page-light]{
  /* dark nav by default for light pages */
}
.header-shell{
  display:flex; align-items:center; gap:24px;
}
.brand{
  display:inline-flex; align-items:center; gap:12px;
  color:var(--ivory); flex:0 0 auto;
  transition:transform .35s var(--ease);
}
.brand:hover{ transform:translateY(-1px) }

.brand-logo{
  display:block;
  height:54px;            /* expanded header */
  width:auto;
  transition:height .3s var(--ease), filter .3s var(--ease);
}
.site-header.is-scrolled .brand-logo{ height:42px; }

@media (max-width:780px){
  .brand-logo{ height:42px }
  .site-header.is-scrolled .brand-logo{ height:36px }
}

/* Every inner page has a dark navy .page-hero, so nav text stays light by
   default at the top of the page just like the homepage. The .is-scrolled
   state already styles the nav for both light and dark backgrounds. */
.nav{
  display:flex; align-items:center; gap:6px; margin-left:auto; margin-right:18px;
}
.nav a{
  position:relative;
  color:var(--ivory);
  font-size:.88rem; letter-spacing:.04em;
  padding:10px 14px; border-radius:999px;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav a:hover{ color:var(--gold-soft); background:rgba(255,255,255,.04) }
.nav a.is-active{ color:var(--gold) }
.nav a.is-active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px;
  height:1px; background:var(--gold);
}

/* CTA buttons */
.cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px;
  background:var(--gold);
  color:var(--navy-900);
  font-family:var(--sans); font-size:.85rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  border-radius:999px;
  border:1px solid var(--gold);
  cursor:pointer;
  position:relative; overflow:hidden;
  transition:transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow:0 12px 30px -12px rgba(201,169,97,.55);
}
.cta:hover{
  background:var(--ivory); color:var(--navy-900);
  transform:translateY(-2px);
  box-shadow:0 20px 40px -16px rgba(201,169,97,.6);
}
.cta svg{ transition:transform .3s var(--ease) }
.cta:hover svg{ transform:translateX(4px) }
.header-cta{ padding:11px 22px; font-size:.78rem }

.ghost-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 24px;
  font-family:var(--sans); font-size:.8rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ivory);
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.ghost-cta:hover{ border-color:var(--gold); color:var(--gold) }

.text-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-deep);
  padding:8px 0;
  border-bottom:1px solid currentColor;
  transition:color .3s var(--ease), letter-spacing .3s var(--ease);
}
.text-link::after{ content:"→"; transition:transform .3s var(--ease) }
.text-link:hover{ color:var(--copper) }
.text-link:hover::after{ transform:translateX(5px) }

.nav-toggle{
  display:none;
  width:42px; height:42px; border:0; background:transparent;
  cursor:pointer; padding:8px; border-radius:50%;
  transition:background .25s var(--ease);
}
.nav-toggle:hover{ background:rgba(255,255,255,.08) }
.nav-toggle span{
  display:block; height:2px; width:22px;
  background:var(--ivory); margin:0 auto 5px;
  transition:all .3s var(--ease);
  border-radius:2px;
}
.nav-toggle span:last-child{ margin-bottom:0 }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav-toggle.is-open span:nth-child(2){ opacity:0 }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

@media (max-width:1080px){
  .header-cta{ display:none }
  .nav-toggle{ display:block; margin-left:auto; position:relative; z-index:90 }

  .nav{
    position:fixed;
    top:72px;                                /* clear the header */
    left:0; right:0; bottom:0;
    width:100%;
    z-index:75;                              /* below header (80) so X stays tappable */
    flex-direction:column; align-items:stretch;
    background:var(--navy-900);
    padding:30px 28px 40px;
    margin:0; gap:0;
    transform:translateX(100%);
    transition:transform .42s var(--ease), visibility 0s linear .42s;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    visibility:hidden;
  }
  .nav.is-open{
    transform:translateX(0);
    visibility:visible;
    transition:transform .42s var(--ease), visibility 0s linear 0s;
    box-shadow:-30px 0 60px -10px rgba(0,0,0,.5);
  }
  .site-header.is-scrolled .nav{
    top:60px;                                /* shrink offset when scrolled header is smaller */
  }

  .nav a{
    color:var(--ivory)!important;
    width:100%; padding:20px 4px;
    border-bottom:1px solid rgba(255,255,255,.08);
    font-size:1.5rem; font-family:var(--serif); font-weight:500;
    letter-spacing:.01em; text-transform:none; border-radius:0;
    background:transparent !important;
  }
  .nav a:first-child{ border-top:1px solid rgba(255,255,255,.08) }
  .nav a:hover{ color:var(--gold-soft)!important }
  .nav a.is-active{ color:var(--gold)!important }
  .nav a.is-active::after{ display:none }
}

/* ==================== HERO SLIDER (HOME) ==================== */
.hero{
  position:relative; min-height:min(100vh, 880px);
  background:var(--navy-900); color:var(--ivory);
  overflow:hidden;
  display:flex; align-items:center;
  padding:200px 0 160px;       /* more breathing room top + bottom */
}
@media (max-width:1080px){
  .hero{ padding:170px 0 140px; min-height:auto }
}
.hero-stage{
  position:absolute; inset:0; z-index:0;
}
.hero-slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity 1.2s var(--ease), visibility 1.2s var(--ease);
}
.hero-slide.is-active{ opacity:1; visibility:visible }
.hero-slide-image{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.05);
  transition:transform 8s linear;
  filter:saturate(.85);
}
.hero-slide.is-active .hero-slide-image{ transform:scale(1.18) }
.hero-stage::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,11,22,.45) 0%, rgba(7,11,22,.7) 60%, rgba(7,11,22,.95) 100%),
    radial-gradient(80% 60% at 30% 30%, rgba(201,169,97,.18), transparent 60%);
  z-index:1; pointer-events:none;
}
.hero-content{
  position:relative; z-index:2; width:100%;
}
.hero-grid{
  display:grid; grid-template-columns: 1.4fr .9fr; gap:80px;
  align-items:end;
}
.hero-copy{ max-width:680px }
.hero-copy .eyebrow{ color:var(--gold) }
.hero-copy .eyebrow::before{ background:var(--gold) }
.hero-copy h1{
  color:var(--ivory);
  font-weight:500;
  line-height:.98;
  margin-top:18px; margin-bottom:24px;
}
.hero-copy h1 em{
  font-style:italic; color:var(--gold-soft);
  font-weight:400;
}
.hero-copy p{
  color:rgba(243,237,224,.78);
  font-size:1.08rem; max-width:560px;
}
.hero-actions{
  display:flex; gap:16px; flex-wrap:wrap; margin-top:34px;
}

.hero-meta{
  display:flex; flex-direction:column; gap:18px;
  border-left:1px solid var(--line-strong);
  padding-left:32px;
}
.hero-meta-label{
  font-size:.7rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin-bottom:8px;
}
.hero-meta-row{
  display:flex; gap:16px; padding:14px 0;
  border-bottom:1px solid var(--line);
}
.hero-meta-row:last-child{ border-bottom:0 }
.hero-meta-index{
  font-family:var(--serif); font-size:1.6rem; color:var(--gold);
  line-height:1; font-weight:500;
}
.hero-meta-text{ color:rgba(243,237,224,.85); font-size:.95rem; line-height:1.5 }

/* slider controls — more prominent */
.hero-controls{
  position:absolute; left:0; right:0; bottom:40px;
  z-index:3;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  width:100%; max-width:var(--container); margin:0 auto;
  padding:0 clamp(20px,4vw,40px);
}
.hero-dots{
  display:flex; gap:18px; align-items:center;
  padding:10px 18px;
  background:rgba(7,11,22,.4);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
}
.hero-dot{
  background:transparent; border:0; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  color:rgba(243,237,224,.55);
  font-size:.78rem; letter-spacing:.2em; font-weight:600;
  font-family:var(--sans); padding:4px 0;
  transition:color .3s var(--ease);
}
.hero-dot::before{
  content:""; width:28px; height:2px; background:rgba(255,255,255,.25);
  border-radius:2px;
  transition:width .4s var(--ease), background .4s var(--ease);
}
.hero-dot:hover{ color:var(--ivory) }
.hero-dot.is-active{ color:var(--gold) }
.hero-dot.is-active::before{ width:54px; background:var(--gold) }

.hero-arrows{
  display:flex; gap:12px;
  padding:8px;
  background:rgba(7,11,22,.4);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
}
.hero-arrow{
  width:54px; height:54px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.22);
  color:var(--ivory); cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease),
             border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.hero-arrow svg{ width:18px; height:18px; transition:transform .3s var(--ease) }
.hero-arrow:hover{
  background:var(--gold); color:var(--navy-900); border-color:var(--gold);
  transform:translateY(-2px);
  box-shadow:0 12px 30px -10px rgba(201,169,97,.6);
}
.hero-arrow:hover svg{ transform:scale(1.15) }

.hero-progress{
  position:absolute; top:0; left:0; right:0; height:3px;
  background:rgba(255,255,255,.06); z-index:3;
}
.hero-progress-bar{
  height:100%; width:0; background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  transition:width 80ms linear;
  box-shadow:0 0 12px rgba(201,169,97,.6);
}

@media (max-width:680px){
  .hero-controls{ flex-direction:column; gap:14px; bottom:24px }
  .hero-arrow{ width:46px; height:46px }
}

@media (max-width:920px){
  .hero{ padding:120px 0 80px; min-height:90vh }
  .hero-grid{ grid-template-columns:1fr; gap:40px }
  .hero-meta{ border-left:0; padding-left:0; border-top:1px solid var(--line-strong); padding-top:24px }
}

/* ==================== PAGE HERO (sub pages) ==================== */
.page-hero{
  position:relative;
  background:var(--navy-900);
  color:var(--ivory);
  min-height:100vh;             /* fallback for older Edge */
  min-height:100dvh;             /* dynamic viewport on modern Chrome/Edge */
  padding:140px 0 90px;         /* clear the fixed header + bottom breathing */
  overflow:hidden;
  isolation:isolate;            /* contain z-index stack */
  display:flex;
  align-items:center;           /* vertically center the .shell content */
}
@media (max-width:780px){
  .page-hero{
    min-height:88vh;
    min-height:88dvh;
    padding:120px 0 70px;
  }
}

/* Optional CMS-uploaded background image — sits behind the gradients */
.page-hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  z-index:0;
  filter:saturate(.9) contrast(1.05);
  transform:scale(1.04);
  animation:heroZoom 22s ease-in-out infinite alternate;
}
@keyframes heroZoom{
  from{ transform:scale(1.04) }
  to  { transform:scale(1.14) }
}

.page-hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(60% 80% at 80% 30%, rgba(201,169,97,.15), transparent 60%),
    radial-gradient(50% 60% at 10% 70%, rgba(184,122,61,.12), transparent 60%),
    linear-gradient(180deg, var(--navy-800), var(--navy-900));
}
/* When a real image is present, dim the gradient overlay so it shows through */
.page-hero.has-bg::before{
  background:
    radial-gradient(60% 80% at 80% 30%, rgba(201,169,97,.18), transparent 60%),
    radial-gradient(50% 60% at 10% 70%, rgba(184,122,61,.15), transparent 60%),
    linear-gradient(180deg, rgba(11,17,36,.55) 0%, rgba(7,11,22,.85) 65%, rgba(7,11,22,.95) 100%);
}

.page-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  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:60px 60px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events:none;
}
.page-hero .shell{ position:relative; z-index:2; max-width:980px }
.page-hero .eyebrow{ color:var(--gold) }
.page-hero .eyebrow::before{ background:var(--gold) }
.page-hero h1{
  color:var(--ivory); margin-top:18px;
  font-weight:500;
  max-width:22ch;          /* fits long headings (e.g. Industries) in 2–3 lines */
}
.page-intro{
  color:rgba(243,237,224,.82);
  font-size:1.15rem; max-width:62ch;
  margin-top:18px;
  text-shadow:0 1px 30px rgba(0,0,0,.35);   /* readable over imagery */
}
.page-hero h1{ text-shadow:0 1px 40px rgba(0,0,0,.4) }

@media (prefers-reduced-motion:reduce){
  .page-hero-bg{ animation:none }
}

/* ==================== SECTIONS ==================== */
section{ position:relative }
.section{ padding:var(--section-py) 0 }

.section + .section{
  padding-top:0;                       /* avoid double padding */
}
.section + .section .section-header{
  position:relative;
  padding-top:60px;
  border-top:1px solid #e5dcc6;        /* hairline rule between consecutive sections */
}
.section + .section .section-header::before{
  content:""; position:absolute; left:0; top:-1px;
  width:80px; height:1px; background:var(--gold);
}

.section-header{
  display:grid; grid-template-columns:1fr 1fr; gap:60px;
  align-items:end; margin-bottom:72px;
}
.section-title{ max-width:18ch; color:var(--ink) }
.section-copy{
  color:#48536b; font-size:1.05rem; max-width:54ch;
}
@media (max-width:780px){
  .section-header{ grid-template-columns:1fr; gap:20px; margin-bottom:48px }
  .section + .section .section-header{ padding-top:48px }
}

/* highlight intro band on home */
.highlight-band{
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  padding:120px 0;
  text-align:center; position:relative;
}
.highlight-band::before{
  content:""; position:absolute; left:50%; top:0;
  width:1px; height:60px; background:var(--gold);
  transform:translateX(-50%);
}
.highlight-band h2{
  max-width:22ch; margin:0 auto 24px;
  font-style:italic; font-weight:400;
}
.highlight-band p{
  max-width:60ch; margin:0 auto;
  font-size:1.1rem; color:#3d4862;
}

/* ==================== SOLUTIONS BANDS ==================== */
.bands{
  display:grid; gap:24px;
}
.band{
  display:grid;
  grid-template-columns:140px 1fr 200px;
  gap:48px; align-items:center;
  padding:42px 36px;
  background:#fff;
  border:1px solid #ece4d3;
  border-radius:var(--radius-lg);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  position:relative; overflow:hidden;
}
.band::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--gold);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s var(--ease);
}
.band:hover{
  transform:translateY(-4px);
  border-color:transparent;
  box-shadow:0 30px 70px -30px rgba(20,30,55,.25);
}
.band:hover::before{ transform:scaleY(1) }
.band-index{
  font-family:var(--serif);
  font-size:4rem; font-weight:400;
  color:var(--gold); line-height:1;
}
.band-title{
  font-family:var(--serif); font-weight:600;
  margin:0 0 10px;
}
.band p{ margin:0; color:#48536b }
.band a.text-link{ justify-self:end }

@media (max-width:780px){
  .band{ grid-template-columns:1fr; gap:18px; padding:30px 24px }
  .band a.text-link{ justify-self:flex-start }
}

/* ==================== DARK SECTION ==================== */
.dark-section{
  background:var(--navy-900);
  color:var(--ivory);
  padding:var(--section-py) 0;
  position:relative; overflow:hidden;
}
.dark-section::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(40% 60% at 90% 10%, rgba(201,169,97,.14), transparent 60%),
    radial-gradient(50% 60% at 10% 90%, rgba(184,122,61,.10), transparent 60%);
  pointer-events:none;
}
.dark-section .section-shell{ position:relative; z-index:1 }
.dark-section .section-title{ color:var(--ivory) }
.dark-section .section-copy{ color:rgba(243,237,224,.7) }
.dark-section .section-kicker{ color:var(--gold) }

.process-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.process-card{
  padding:38px 30px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  position:relative;
  transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.process-card:hover{
  transform:translateY(-6px);
  border-color:rgba(201,169,97,.35);
  background:linear-gradient(180deg, rgba(201,169,97,.07), rgba(201,169,97,0));
}
.process-step{
  display:inline-block;
  font-size:.7rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); padding:6px 14px;
  border:1px solid var(--gold); border-radius:999px;
  margin-bottom:24px;
}
.process-card h3{ color:var(--ivory); margin-bottom:12px }
.process-card p{ color:rgba(243,237,224,.7); margin:0 }

@media (max-width:780px){ .process-grid{ grid-template-columns:1fr } }

/* metrics grid */
.metric-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.metric-card{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:34px 30px;
  position:relative; overflow:hidden;
  transition:border-color .4s var(--ease);
}
.metric-card::before{
  content:""; position:absolute; left:0; top:0; height:1px; width:0;
  background:var(--gold); transition:width .6s var(--ease);
}
.metric-card:hover{ border-color:rgba(201,169,97,.4) }
.metric-card:hover::before{ width:100% }
.metric-label{
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px;
}
.metric-value{
  font-family:var(--serif); font-size:2.6rem;
  color:var(--ivory); margin-bottom:14px; font-weight:500;
}
.metric-card p{ color:rgba(243,237,224,.7); margin:0 }
@media (max-width:780px){ .metric-grid{ grid-template-columns:1fr } }

/* dark cards (principles grid) */
.card-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
}
.dark-card{
  padding:32px 28px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:flex; flex-direction:column; gap:10px;
  position:relative; overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.dark-card::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(201,169,97,.08), transparent 50%);
  opacity:0; transition:opacity .4s var(--ease);
}
.dark-card:hover{ transform:translateY(-3px); border-color:rgba(201,169,97,.35) }
.dark-card:hover::before{ opacity:1 }
.dark-card h3{ color:var(--ivory); margin:0; position:relative }
.dark-card p{ color:rgba(243,237,224,.7); margin:0; position:relative }
@media (max-width:680px){ .card-grid{ grid-template-columns:1fr } }

/* ==================== SPLIT SECTION ==================== */
.split-section{ padding:var(--section-py) 0 }
.split-grid{
  display:grid; grid-template-columns:1.1fr 1fr; gap:80px; align-items:start;
}
.copy-stack{ display:flex; flex-direction:column; gap:36px }
.copy-block{
  position:relative; padding-left:24px;
}
.copy-block::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px;
  width:2px; background:linear-gradient(180deg, var(--gold), transparent);
}
.copy-block h3{ font-family:var(--serif); margin-bottom:10px; color:var(--ink) }
.copy-block p{ color:#48536b; margin:0 }

.bullet-list{
  display:flex; flex-direction:column; gap:14px;
}
.bullet-list > div{
  position:relative; padding-left:34px;
  font-size:1rem; color:#33405b;
}
.bullet-list > div::before{
  content:""; position:absolute; left:0; top:.6em;
  width:18px; height:1px; background:var(--gold);
}
.bullet-list > div::after{
  content:""; position:absolute; left:18px; top:calc(.6em - 3px);
  width:7px; height:7px; border-radius:50%; background:var(--gold);
}

.image-panel{
  position:sticky; top:120px;
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-2);
  align-self:start;
}
.image-panel img{
  width:100%; height:auto; aspect-ratio: 5/4; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
@media (max-width:980px){
  .image-panel{ position:static }
}
.image-panel:hover img{ transform:scale(1.04) }
.image-panel .caption{
  position:absolute; left:24px; right:24px; bottom:24px;
  padding:14px 18px;
  background:rgba(7,11,22,.78); backdrop-filter:blur(10px);
  color:var(--ivory); font-size:.88rem; line-height:1.5;
  border:1px solid rgba(255,255,255,.1); border-radius:var(--radius);
  margin:0;
}

.info-panel{
  background:linear-gradient(180deg, var(--navy-800), var(--navy-900));
  color:var(--ivory);
  border-radius:var(--radius-lg);
  padding:42px 36px;
  border:1px solid var(--line);
  position:relative; overflow:hidden;
}
.info-panel::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(60% 80% at 90% 10%, rgba(201,169,97,.18), transparent 60%);
}
.info-panel h3{ color:var(--gold-soft); position:relative; margin-bottom:14px }
.info-panel p{ color:rgba(243,237,224,.78); position:relative; margin-bottom:14px }
.info-panel p:last-child{ margin-bottom:0 }

@media (max-width:980px){
  .split-grid{ grid-template-columns:1fr; gap:48px }
}

/* ==================== CTA SECTION ==================== */
.cta-section{
  padding:120px 0;
  background:var(--paper);
}
.cta-band{
  background:linear-gradient(135deg, var(--navy-700) 0%, var(--navy-900) 100%);
  color:var(--ivory);
  border-radius:var(--radius-lg);
  padding:72px 64px;
  display:grid; grid-template-columns:1.6fr auto; gap:48px; align-items:center;
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-2);
}
.cta-band::before{
  content:""; position:absolute; right:-100px; top:-100px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,169,97,.25), transparent 70%);
}
.cta-band h2{ color:var(--ivory); margin:0 0 12px; max-width:22ch; position:relative }
.cta-band p{ color:rgba(243,237,224,.75); max-width:50ch; margin:0; position:relative }
.cta-band .cta{ position:relative }
@media (max-width:880px){
  .cta-band{ grid-template-columns:1fr; padding:48px 32px; text-align:left }
}

/* ==================== CONTACT ==================== */
.contact-grid{
  display:grid; grid-template-columns:1.4fr 1fr; gap:40px;
}
.form-panel{
  background:#fff;
  padding:48px;
  border-radius:var(--radius-lg);
  border:1px solid #ece4d3;
  box-shadow:0 30px 70px -40px rgba(20,30,55,.2);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px }
.field label{
  font-family:var(--sans); font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:600;
}
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:1rem;
  padding:14px 16px;
  background:var(--paper);
  border:1px solid #d6cdb8;
  border-radius:var(--radius);
  color:var(--ink);
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:0;
  border-color:var(--gold);
  background:#fff;
  box-shadow:0 0 0 4px rgba(201,169,97,.15);
}
.field textarea{ min-height:140px; resize:vertical; font-family:inherit }
.field-error{
  display:none; color:#b44a2c; font-size:.85rem;
}
.field.has-error .field-error{ display:block }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:#b44a2c }
.bot-field{ position:absolute!important; left:-9999px!important; top:auto!important;
  width:1px!important; height:1px!important; overflow:hidden!important;
  opacity:0!important; pointer-events:none!important; }
.bot-field input{ width:1px;height:1px }

.helper{ font-size:.85rem; color:#6b7488; margin:0 0 22px }

/* ===== Smart "I'm not a robot" widget =================================== */
.human-check{
  margin:8px 0 22px;
  border:1px solid #d6cdb8;
  border-radius:12px;
  background:linear-gradient(180deg, #faf6ec, #f3ede0);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.human-check.has-error{ border-color:#b44a2c; background:rgba(180,74,44,.05) }
.human-check.is-verifying{ border-color:var(--gold) }
.human-check.is-verified{
  border-color:var(--gold);
  background:linear-gradient(180deg, rgba(201,169,97,.1), rgba(201,169,97,.04));
}

.human-check-box{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px;
  cursor:pointer;
  user-select:none;
}
.human-check-box input[type="checkbox"]{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.hc-mark{
  width:30px; height:30px; flex:0 0 30px;
  display:grid; place-items:center;
  border-radius:8px;
  background:#fff;
  border:2px solid #c9bfa3;
  position:relative;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.hc-mark .hc-check{
  color:var(--navy-900);
  opacity:0; transform:scale(.5);
  transition:opacity .25s var(--ease) .15s, transform .35s var(--ease) .15s;
}
.hc-mark .hc-spinner{
  position:absolute; inset:-2px;
  border:2px solid transparent;
  border-top-color:var(--gold);
  border-right-color:var(--gold);
  border-radius:9px;
  opacity:0;
  animation:hc-spin .9s linear infinite;
}
@keyframes hc-spin{ to { transform:rotate(360deg) } }

.human-check.is-verifying .hc-mark .hc-spinner{ opacity:1 }
.human-check.is-verifying .hc-mark{ background:#fffbe8 }
.human-check.is-verified  .hc-mark{
  background:var(--gold); border-color:var(--gold);
}
.human-check.is-verified .hc-mark .hc-check{ opacity:1; transform:scale(1) }

.hc-text{ flex:1; line-height:1.35 }
.hc-text strong{
  display:block; font-size:.95rem; color:var(--ink); font-weight:600;
}
.hc-text small{ font-size:.78rem; color:#6b7488 }

.hc-shield{
  display:grid; place-items:center;
  width:36px; height:36px; flex:0 0 36px;
  color:var(--gold-deep);
  opacity:.7;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.human-check.is-verified .hc-shield{ opacity:1; transform:rotate(-6deg) scale(1.05) }
.human-check-box:hover .hc-mark{ border-color:var(--gold) }

@media (max-width:680px){
  .hc-shield{ display:none }
}

.form-success{
  padding:18px 22px; background:rgba(201,169,97,.12); border:1px solid var(--gold);
  border-radius:var(--radius); color:var(--gold-deep); margin-bottom:24px;
}
.form-error{
  padding:18px 22px; background:rgba(180,74,44,.08); border:1px solid #b44a2c;
  border-radius:var(--radius); color:#8a3a23; margin-bottom:24px;
}
@media (max-width:880px){
  .contact-grid{ grid-template-columns:1fr }
  .form-row{ grid-template-columns:1fr }
  .form-panel{ padding:32px 24px }
}

/* ==================== FOOTER ==================== */
.site-footer{
  background:var(--navy-900);
  color:rgba(243,237,224,.7);
  padding:80px 0 28px;
  border-top:1px solid var(--line);
}
.footer-shell{
  display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:50px;
}
.footer-brand{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--ivory); margin-bottom:22px;
}
.footer-logo{
  display:block; height:64px; width:auto;
  transition:opacity .3s var(--ease);
}
.footer-brand:hover .footer-logo{ opacity:.85 }
.footer-about{
  color:rgba(243,237,224,.72);
  font-size:.95rem;
  max-width:42ch;
  line-height:1.7;
  margin:0;
}

.footer-col h4{
  font-family:var(--sans);
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px;
}
.footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px }
.footer-col a{ color:rgba(243,237,224,.7); transition:color .25s var(--ease) }
.footer-col a:hover{ color:var(--gold) }
.footer-contact li{ font-size:.95rem }

.footer-social{ display:flex; gap:10px; margin-top:18px }
.footer-social a{
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  color:rgba(243,237,224,.7);
  transition:all .3s var(--ease);
}
.footer-social a:hover{ background:var(--gold); color:var(--navy-900); border-color:var(--gold) }

.footer-bottom{
  max-width:var(--container); margin:60px auto 0;
  padding:24px clamp(20px,4vw,40px) 0;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between;
  font-size:.82rem; color:rgba(243,237,224,.5);
}
@media (max-width:980px){
  .footer-shell{ grid-template-columns:1fr 1fr; gap:40px }
}
@media (max-width:600px){
  .footer-shell{ grid-template-columns:1fr }
  .footer-bottom{ flex-direction:column; gap:8px }
}

/* ==================== REVEAL ANIMATION ==================== */
/* Fail-safe: content is fully visible by default — only when JS is on and the
   <html class="js"> hook is set do we apply the off-screen starting state.
   This protects SEO crawlers, screenshot tools, and the no-JS fallback. */
.reveal{ opacity:1; transform:none; }

html.js .reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  will-change:opacity, transform;
}
html.js .reveal.is-in{ opacity:1; transform:none }

.reveal-delay-1{ transition-delay:.08s }
.reveal-delay-2{ transition-delay:.16s }
.reveal-delay-3{ transition-delay:.24s }
.reveal-delay-4{ transition-delay:.32s }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
  }
  html.js .reveal{ opacity:1!important; transform:none!important }
}

/* ==================== UTILITY ==================== */
.center-text{ text-align:center }
.mt-0{ margin-top:0 } .mb-0{ margin-bottom:0 }
.thank-you-block{
  text-align:center; max-width:640px; margin:0 auto;
  padding:120px 24px;
}
.thank-you-block h1{ margin-bottom:18px }
.thank-you-block p{ font-size:1.1rem; color:#48536b; margin-bottom:32px }