/* ════════════════════════════════════════════════════════════════
   Zajuga · shared shell — promoted tokens + canonical components
   (Build #1c — uniform all subpages)

   Single source of truth for: colors, type, spacing, buttons, nav,
   footer, section primitives, cards, forms, motion. Every page in the
   site links this file. Page-specific styles live next to their page
   and use these tokens, not raw values.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* Brand greens (darkest → lightest sage) */
  --green-900:#0e1c14; --green-800:#14271b; --green-700:#1b3a26; --green-600:#234a31; --green-500:#2e6b4a;
  /* Gold accent */
  --gold:#c9a227; --gold-soft:#dcbb52;
  /* Cream backgrounds */
  --cream:#f6f2e8; --cream-2:#efe8d8;
  /* Ink (dark text on light) */
  --ink:#1c2a20; --ink-soft:#566359;
  /* Hairlines */
  --line:rgba(28,42,32,.12); --line-d:rgba(246,242,232,.14);
  /* The Eight (zone marks) */
  --c-spirit:#7e73c9; --c-mind:#5e84ae; --c-body:#b14a2c; --c-family:#b5778e;
  --c-work:#2e6b4a; --c-money:#c9a227; --c-vault:#1b2436; --c-voice:#3c8c6c; --c-coci:#14301d;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Hanken Grotesk",sans-serif; background:var(--cream); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.55; overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column}
body > main{flex:1}
h1,h2,h3,.serif{font-family:"Fraunces",serif; font-weight:560; line-height:1.04; letter-spacing:-.01em}
.eyebrow{font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px}
a{color:inherit; text-decoration:none}
section{position:relative}

/* ─── Buttons ─── */
.btn{display:inline-flex; align-items:center; gap:.55rem; font-weight:600; font-size:.95rem; padding:.95rem 1.6rem; border-radius:999px; cursor:pointer; border:1.5px solid transparent; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s; text-decoration:none; font-family:inherit}
.btn-gold{background:var(--gold); color:#241c00; box-shadow:0 10px 30px -12px rgba(201,162,39,.7)}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 16px 38px -12px rgba(201,162,39,.85); background:var(--gold-soft)}
.btn-ghost{border-color:rgba(246,242,232,.4); color:var(--cream)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-2px)}
.btn-dark{background:var(--green-700); color:var(--cream)}
.btn-dark:hover{background:var(--green-600); transform:translateY(-2px)}
.btn-light{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-light:hover{border-color:var(--green-500); color:var(--green-500); transform:translateY(-2px)}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}

/* ─── Nav ─── */
nav{position:sticky; top:0; z-index:50; background:var(--green-900); border-bottom:1px solid var(--line-d)}
nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; height:68px}
.logo{display:inline-flex; align-items:center; gap:10px; font-family:"Fraunces",serif; font-weight:600; font-size:1.5rem; letter-spacing:.34em; color:var(--gold); padding-left:.06em; flex:0 0 auto}
.logo .brand-mark{display:block; width:44px; height:44px; flex:0 0 44px; object-fit:contain}
.nav-links{display:flex; gap:22px; align-items:center; flex:1 1 auto; justify-content:center}
.nav-links a{color:rgba(246,242,232,.78); font-size:.86rem; font-weight:500; transition:color .2s; white-space:nowrap}
.nav-links a:hover{color:var(--gold)}
.nav-cta{display:flex; gap:12px; align-items:center; flex:0 0 auto}
.nav-cta .btn{padding:.6rem 1.15rem; font-size:.88rem}
/* Language switcher (2026-07 — /es/ Spanish rollout, 5 pages).
   Deliberately minimal: a plain text link, not a button, so it reads
   as a language toggle rather than a CTA competing with Start free. */
.lang-switch{color:rgba(246,242,232,.6); font-size:.82rem; font-weight:500; text-decoration:none; border:1px solid rgba(246,242,232,.25); border-radius:100px; padding:.4rem .8rem; transition:color .2s,border-color .2s; white-space:nowrap}
.lang-switch:hover{color:var(--gold); border-color:var(--gold)}
.mobile-menu .lang-switch{display:inline-block; margin:14px 0 0; text-align:center}
.menu-btn{display:none; background:none; border:0; color:var(--cream); cursor:pointer; padding:8px 10px; min-width:44px; min-height:44px; line-height:1; align-items:center; justify-content:center}
.menu-btn svg{width:26px; height:26px; display:block}
.menu-btn svg line{stroke:var(--cream); stroke-width:2.2; stroke-linecap:round; fill:none}
.menu-btn .icon-x{display:none}
.menu-btn.is-open .icon-bars{display:none}
.menu-btn.is-open .icon-x{display:block}

/* Mobile drawer (≤768px). Logo top-left, hamburger top-right.
   Start-free renders as first full-width pill inside the drawer. */
.mobile-menu{display:none; position:absolute; top:68px; left:0; right:0; background:var(--green-900); border-top:1px solid var(--line-d); padding:18px 22px 22px; max-height:calc(100vh - 68px); overflow-y:auto; box-shadow:0 22px 40px -16px rgba(0,0,0,.5)}
.mobile-menu.open{display:block}
.mobile-menu .mobile-cta{display:flex; justify-content:center; width:100%; min-height:52px; margin-bottom:8px; font-size:1rem}
.mobile-menu ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column}
.mobile-menu li{border-top:1px solid var(--line-d)}
.mobile-menu li a{display:flex; align-items:center; min-height:56px; padding:14px 6px; color:var(--cream); font-size:1.05rem; font-weight:500; letter-spacing:.01em}
.mobile-menu li a:hover, .mobile-menu li a:focus{color:var(--gold); outline:none}

@media(max-width:768px){
  /* !important — defensive against any per-page inline override.
     The mobile top bar must be: logo left, hamburger right. Nothing else. */
  .nav-links{display:none !important}
  .nav-cta{display:none !important}
  .menu-btn{display:inline-flex !important}
}
@media(max-width:960px) and (min-width:769px){
  .nav-links{gap:16px; font-size:.8rem}
  .nav-links a{font-size:.8rem}
}

/* ─── Section primitives ─── */
.sec{padding:104px 0}
.sec-tight{padding:68px 0}
.sec-head{max-width:60ch; margin-bottom:54px}
.sec-head .eyebrow{color:var(--green-500); margin-bottom:14px; display:block}
.sec-head h2{font-size:clamp(2.1rem,4.4vw,3.2rem); margin-bottom:16px; position:relative}
.sec-head p{font-size:1.12rem; color:var(--ink-soft); max-width:54ch}
/* Centered section head modifier */
.sec-head-c{text-align:center; margin-left:auto; margin-right:auto}
.sec-head-c p{margin-left:auto; margin-right:auto}
/* Dark section context — flip eyebrow + paragraph colors */
.sec-dark{background:var(--green-800); color:var(--cream)}
.sec-dark .sec-head .eyebrow{color:var(--gold)}
.sec-dark .sec-head p{color:rgba(246,242,232,.78)}
.sec-darker{background:var(--green-900); color:var(--cream)}
.sec-darker .sec-head .eyebrow{color:var(--gold)}
.sec-darker .sec-head p{color:rgba(246,242,232,.78)}
.sec-gradient{background:linear-gradient(160deg,var(--green-700),var(--green-900)); color:var(--cream)}
.sec-gradient .sec-head .eyebrow{color:var(--gold)}
.sec-gradient .sec-head p{color:rgba(246,242,232,.82)}
.sec-cream-2{background:var(--cream-2)}

/* ─── Cards ─── */
.card{background:rgba(246,242,232,.04); border:1px solid var(--line-d); border-radius:20px; padding:30px 26px; transition:transform .3s, border-color .3s, background .3s}
.card:hover{transform:translateY(-6px); border-color:rgba(201,162,39,.5); background:rgba(246,242,232,.06)}
.card h3{font-size:1.4rem; margin-bottom:10px; font-family:"Fraunces",serif; font-weight:560}
.card p{font-size:.97rem}
/* Light-bg variant */
.card-light{background:#fff; border:1px solid var(--line); color:var(--ink); box-shadow:0 8px 26px -16px rgba(28,42,32,.4)}
.card-light:hover{border-color:var(--green-500); background:#fff}
.card-light p{color:var(--ink-soft)}
.card-dark p{color:rgba(246,242,232,.78)}

/* Card grids */
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
@media(max-width:860px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr; gap:18px}}

/* ─── Forms ─── */
.form-shell{background:#fff; border:1px solid var(--line); border-radius:22px; padding:32px; box-shadow:0 20px 50px -30px rgba(28,42,32,.35); max-width:480px; margin:0 auto}
.form-shell.dark{background:rgba(246,242,232,.05); border-color:var(--line-d); box-shadow:none}
.form-shell h2{font-family:"Fraunces",serif; font-size:1.7rem; margin-bottom:6px}
.form-shell .sub{color:var(--ink-soft); font-size:.97rem; margin-bottom:22px}
.form-shell.dark .sub{color:rgba(246,242,232,.78)}
.form-field{margin-bottom:14px}
.form-field label{display:block; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--green-500); font-weight:600; margin-bottom:6px}
.form-shell.dark .form-field label{color:rgba(246,242,232,.7)}
.form-field input,.form-field select,.form-field textarea{width:100%; font-family:inherit; font-size:.97rem; padding:.78rem .9rem; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); transition:border-color .2s, box-shadow .2s; outline:none}
.form-shell.dark .form-field input,.form-shell.dark .form-field select,.form-shell.dark .form-field textarea{background:rgba(14,28,20,.5); border-color:var(--line-d); color:var(--cream)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,.18)}
.form-field textarea{resize:vertical; min-height:96px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:540px){.form-row{grid-template-columns:1fr}}
.form-shell .btn{width:100%; justify-content:center; margin-top:8px}
.form-error{margin-top:12px; padding:10px 12px; border:1px solid rgba(168,66,28,.4); background:rgba(168,66,28,.06); color:#8A341A; border-radius:8px; font-size:.9rem; display:none}
.form-error.show{display:block}
.form-success{margin-top:12px; padding:12px 14px; border:1px solid rgba(46,107,74,.4); background:rgba(46,107,74,.08); color:var(--green-500); border-radius:8px; font-size:.95rem; display:none; font-weight:600}
.form-success.show{display:block}
.form-shell.dark .form-success{color:var(--gold)}

/* Clean placeholder where a stock photo used to sit — keeps layout
   rhythm without faking imagery. Real imagery is a later pass. */
.media-placeholder{display:block; width:100%; max-width:980px; margin:48px auto; aspect-ratio:16/9; border-radius:22px; background:linear-gradient(140deg,var(--green-700),var(--green-900)); border:1px solid var(--line-d); position:relative; overflow:hidden}
.media-placeholder:before{content:""; position:absolute; inset:0; opacity:.06; background-image:radial-gradient(rgba(246,242,232,.7) 1px, transparent 1px); background-size:22px 22px}

/* ─── Stub page main — minimal centered shell for placeholder pages ─── */
main.stub{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:80px 28px; background:linear-gradient(160deg,var(--green-700),var(--green-900)); color:var(--cream); min-height:60vh}
main.stub .eyebrow{font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--gold); margin-bottom:18px}
main.stub h1{font-size:clamp(2.6rem,6vw,4.2rem); font-style:italic; color:var(--cream); margin-bottom:16px; max-width:18ch}
main.stub p.tag{font-size:1.05rem; color:rgba(246,242,232,.7); max-width:36ch}

/* ─── Hero pattern (light cream variant, reusable across non-homepage pages) ─── */
.page-hero{padding:88px 0 56px; background:linear-gradient(180deg,var(--cream),var(--cream-2)); border-bottom:1px solid var(--line)}
.page-hero .eyebrow{color:var(--green-500); display:inline-block; margin-bottom:14px}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.4rem); font-style:italic; color:var(--ink); margin-bottom:14px; max-width:18ch}
.page-hero p.lead{font-size:1.18rem; color:var(--ink-soft); max-width:46ch; margin-bottom:24px}
.page-hero.dark{background:linear-gradient(160deg,var(--green-700),var(--green-900)); color:var(--cream); border-bottom:1px solid var(--line-d)}
.page-hero.dark h1{color:var(--cream)}
.page-hero.dark p.lead{color:rgba(246,242,232,.82)}
.page-hero.dark .eyebrow{color:var(--gold)}

/* ─── Footer ─── */
footer{background:var(--green-900); color:rgba(246,242,232,.66); padding:64px 0 34px; border-top:1px solid var(--line-d)}
footer .top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px; margin-bottom:44px}
footer .logo{margin-bottom:14px; display:inline-flex; align-items:center; gap:12px}
footer .blurb{font-size:.92rem; max-width:34ch}
footer h5{color:var(--cream); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px}
footer ul{list-style:none; display:grid; gap:9px}
footer ul a{font-size:.92rem; transition:color .2s}
footer ul a:hover{color:var(--gold)}
footer .base{border-top:1px solid var(--line-d); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem}
@media(max-width:860px){footer .top{grid-template-columns:1fr 1fr; gap:30px}}

/* ─── Motion ─── */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
}