/* =========================================================================
   LAWNOVA ACADEMY — Shared Design System
   University-grade evolution of the Lawnova product DNA.
   Ink + parchment grounds · champagne gold + olive green · Cormorant + Hanken
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Spectral:ital,wght@0,500;0,600;1,500&family=Newsreader:ital,opsz,wght@0,6..72,500;0,6..72,600;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* --- ink / parchment --- */
  --ink:        #15140E;   /* warm near-black ground */
  --ink-2:      #1E1C14;   /* raised dark panel */
  --ink-3:      #2A2719;   /* hairline on dark */
  --parch:      #F4EEE1;   /* parchment content */
  --parch-2:    #FBF7EE;   /* lighter card */
  --parch-3:    #EBE3D2;   /* parchment hairline / inset */

  /* --- accents (shared chroma, varied hue) --- */
  --gold:       #C6A45C;   /* champagne gold — primary */
  --gold-soft:  #E0C590;
  --gold-deep:  #9C7E3F;
  --green:      #54671F;   /* olive — brand secondary */
  --green-2:    #6B8029;
  --green-deep: #3A4717;

  /* --- text --- */
  --on-ink:     #ECE5D5;   /* cream text on dark */
  --on-ink-mut: #A79E89;   /* muted cream */
  --on-ink-dim: #6E6855;
  --on-parch:   #221F16;   /* ink text on light */
  --on-parch-mut:#615B49;
  --on-parch-dim:#8A8270;

  /* --- type --- */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Hanken Grotesk', system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 4px;
  --radius-lg: 10px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--on-ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--gold);color:var(--ink)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);width:100%}
.section{padding-block:clamp(72px,9vw,128px)}
.section--tight{padding-block:clamp(48px,6vw,80px)}

/* light / dark surfaces */
.surface-ink{background:var(--ink);color:var(--on-ink)}
.surface-ink2{background:var(--ink-2);color:var(--on-ink)}
.surface-parch{background:var(--parch);color:var(--on-parch)}
.surface-parch2{background:var(--parch-2);color:var(--on-parch)}

/* ---------- typography ---------- */
.display{
  font-family:var(--serif);
  font-weight:600;
  line-height:.98;
  letter-spacing:-.01em;
  font-size:clamp(2.8rem,7vw,5.6rem);
}
.h1{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.01em;font-size:clamp(2.4rem,5vw,4rem)}
.h2{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.005em;font-size:clamp(2rem,4vw,3.1rem)}
.h3{font-family:var(--serif);font-weight:600;line-height:1.1;font-size:clamp(1.5rem,2.4vw,2rem)}
.serif-it{font-style:italic;font-weight:500}
.gold-text{color:var(--gold)}
.green-text{color:var(--green-2)}

.eyebrow{
  font-family:var(--sans);
  font-weight:700;
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{
  content:"";width:26px;height:1px;background:var(--gold);opacity:.6;
}
.eyebrow.no-rule::before{display:none}

.lede{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.6;color:var(--on-parch-mut);max-width:60ch}
.lede.on-dark{color:var(--on-ink-mut)}
.kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-parch-dim)}
.kicker.on-dark{color:var(--on-ink-dim)}

/* ---------- crest / logo mark ---------- */
.mark{
  width:42px;height:42px;flex:none;
  background:url(lawnova-icon.png) no-repeat center/contain;
}
.mark.lg{width:54px;height:54px}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand .name{font-family:var(--serif);font-weight:600;font-size:1.32rem;letter-spacing:.02em;line-height:1}
.brand .name b{font-weight:600}
.brand .sub{display:block;font-family:var(--sans);font-weight:600;font-size:.56rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-top:3px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(18,17,11,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--ink-3)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:72px}
.nav-links{display:flex;align-items:center;gap:30px;margin-left:18px}
.nav-links a{font-size:.92rem;font-weight:500;color:var(--on-ink-mut);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--on-ink)}
.nav-spacer{flex:1}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-burger{display:none;width:42px;height:42px;border:1px solid var(--ink-3);border-radius:6px;align-items:center;justify-content:center}
.nav-burger span{display:block;width:18px;height:1.5px;background:var(--on-ink);position:relative}
.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--on-ink)}
.nav-burger span::before{top:-6px}.nav-burger span::after{top:6px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--sans);font-weight:600;font-size:.95rem;
  padding:.85em 1.5em;border-radius:var(--radius);transition:all .22s var(--ease);white-space:nowrap;line-height:1}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-gold{background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#241B07;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 22px -10px rgba(198,164,92,.6)}
.btn-gold:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-outline{border:1px solid var(--gold);color:var(--gold);background:transparent}
.btn-outline:hover{background:rgba(198,164,92,.1)}
.btn-ink{background:var(--ink);color:var(--on-ink)}
.btn-ink:hover{background:#26241a}
.btn-ghost-light{border:1px solid var(--parch-3);color:var(--on-parch)}
.btn-ghost-light:hover{background:var(--parch-3)}
.btn-lg{padding:1.05em 1.9em;font-size:1rem}
.btn-sm{padding:.6em 1.1em;font-size:.85rem}
.btn-block{width:100%;justify-content:center}

/* ---------- pills / badges ---------- */
.pill{display:inline-flex;align-items:center;gap:.5em;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  padding:.5em .9em;border-radius:100px;border:1px solid var(--ink-3);color:var(--on-ink-mut);background:rgba(255,255,255,.02)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--green-2)}
.pill-gold{border-color:rgba(198,164,92,.4);color:var(--gold)}
.pill-on-light{border-color:var(--parch-3);color:var(--on-parch-mut);background:#fff}
.level-tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);white-space:nowrap}

/* ---------- image placeholders (tasteful duotone treatment) ---------- */
.ph{position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 2px,transparent 2px 9px),
    linear-gradient(150deg,#2c2a1c,#1a1810 60%,#211d12);
  isolation:isolate}
.ph::after{content:attr(data-label);position:absolute;left:14px;bottom:12px;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(224,197,140,.55);z-index:2}
.ph.green{background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 2px,transparent 2px 9px),
    linear-gradient(150deg,#3d4a1c,#222a10 65%,#2c3614)}
.ph.gold{background:
    repeating-linear-gradient(135deg,rgba(0,0,0,.05) 0 2px,transparent 2px 9px),
    linear-gradient(150deg,#caa869,#9c7e3f 70%,#b89455)}
.ph.gold::after{color:rgba(30,20,5,.5)}
.ph .ph-seal{position:absolute;inset:0;display:grid;place-items:center;z-index:1;opacity:.5}

/* ---------- generic cards ---------- */
.card{background:var(--parch-2);border:1px solid var(--parch-3);border-radius:var(--radius-lg);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.card-ink{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--radius-lg)}
.lift:hover{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(0,0,0,.45)}

/* hairline divider */
.rule{height:1px;background:var(--parch-3);border:0}
.rule-dark{height:1px;background:var(--ink-3);border:0}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:var(--on-ink);border-top:1px solid var(--ink-3)}
.footer a{color:var(--on-ink-mut);transition:color .2s}
.footer a:hover{color:var(--on-ink)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:40px}
.foot-col h5{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;font-weight:700}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:11px;font-size:.92rem}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding-top:28px;margin-top:48px;border-top:1px solid var(--ink-3);font-size:.84rem;color:var(--on-ink-dim)}
.disclaimer{font-size:.8rem;color:var(--on-ink-dim);line-height:1.6;max-width:62ch}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- mobile nav drawer ---------- */
.drawer{position:fixed;inset:0;z-index:90;background:rgba(10,9,5,.6);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s}
.drawer.open{opacity:1;pointer-events:auto}
.drawer-panel{position:absolute;right:0;top:0;bottom:0;width:min(86vw,340px);background:var(--ink-2);border-left:1px solid var(--ink-3);
  padding:26px;display:flex;flex-direction:column;gap:6px;transform:translateX(100%);transition:transform .32s var(--ease)}
.drawer.open .drawer-panel{transform:none}
.drawer-panel a{padding:14px 4px;font-size:1.1rem;border-bottom:1px solid var(--ink-3);color:var(--on-ink)}
.drawer-close{align-self:flex-end;font-size:1.6rem;line-height:1;color:var(--on-ink-mut);margin-bottom:8px}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .nav-links{display:none}
  .nav-cta .btn:not(.nav-apply){display:none}
  .nav-burger{display:flex}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot-col.brandcol{grid-column:1/-1}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav .wrap{gap:14px}
}

/* utility */
.flex{display:flex}.items-center{align-items:center}.gap-sm{gap:10px}.gap{gap:18px}.gap-lg{gap:32px}
.mt-s{margin-top:14px}.mt{margin-top:24px}.mt-l{margin-top:40px}.mt-xl{margin-top:64px}
.mb-s{margin-bottom:14px}.mb{margin-bottom:24px}.mb-l{margin-bottom:48px}
.center{text-align:center}.muted{color:var(--on-parch-mut)}.muted-d{color:var(--on-ink-mut)}
.maxw-prose{max-width:64ch}.mx-auto{margin-inline:auto}
.wrap-narrow{max-width:860px;margin-inline:auto;padding-inline:var(--gutter)}