/* Auroliva — Public CSS (hand-written, mobile-first) */

/* ================ Reset ================ */
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul[role=list],ol[role=list]{list-style:none;padding:0;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-height:100svh;text-rendering:optimizeSpeed}
img,picture,video,svg{max-width:100%;display:block}
input,button,textarea,select{font:inherit;color:inherit}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ================ Design tokens ================ */
:root{
  /* Olive palette */
  --olive-900:#1a2b12;
  --olive-800:#2d4a1e;
  --olive-700:#3d5f2a;
  --olive-600:#4d7535;
  --olive-500:#5a7a3b;
  --olive-300:#9cb079;
  --olive-100:#e4e9d8;

  /* Warm ivory */
  --ivory-50:#fbf8f0;
  --ivory-100:#f7f2e4;
  --ivory-200:#f0ead6;
  --ivory-300:#e5dcc0;

  /* Terracotta accent */
  --terra-600:#b36a3e;
  --terra-500:#c47d51;
  --terra-300:#e3ae85;

  /* Neutral */
  --ink-900:#1a1a1a;
  --ink-700:#3a3a3a;
  --ink-500:#6a6a68;
  --ink-300:#a8a8a5;
  --line:#e3ddc9;

  /* Gold (for highlight) */
  --gold-500:#c9b87a;
  --gold-700:#a69558;

  /* Type */
  --serif: Georgia, 'Playfair Display', 'Times New Roman', serif;
  --sans:  system-ui, -apple-system, 'Segoe UI', Roboto, 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Scale (fluid, clamp) */
  --step--1: clamp(.85rem, .82rem + .15vw, .95rem);
  --step-0:  clamp(1rem, .95rem + .25vw, 1.125rem);
  --step-1:  clamp(1.15rem, 1.05rem + .45vw, 1.375rem);
  --step-2:  clamp(1.35rem, 1.15rem + .9vw, 1.75rem);
  --step-3:  clamp(1.6rem, 1.25rem + 1.6vw, 2.25rem);
  --step-4:  clamp(1.9rem, 1.3rem + 2.7vw, 3rem);
  --step-5:  clamp(2.3rem, 1.4rem + 4.5vw, 4rem);
  --step-6:  clamp(2.8rem, 1.5rem + 6vw, 5rem);

  /* Layout */
  --container: 1180px;
  --gutter: clamp(1.2rem, 2vw, 2rem);
  --radius: 6px;
  --radius-lg: 14px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(26,43,18,.06), 0 2px 6px rgba(26,43,18,.04);
  --shadow-md: 0 4px 12px rgba(26,43,18,.08), 0 12px 32px rgba(26,43,18,.06);
  --shadow-lg: 0 8px 24px rgba(26,43,18,.12), 0 24px 60px rgba(26,43,18,.08);

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

/* ================ Base ================ */
body{
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--ivory-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;color:var(--olive-900);letter-spacing:-.01em}
h1{font-size:var(--step-5)}
h2{font-size:var(--step-4)}
h3{font-size:var(--step-2)}
h4{font-size:var(--step-1)}
p{max-width:68ch}
a{color:var(--olive-700);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .15s var(--ease-out)}
a:hover{color:var(--olive-900)}
strong{font-weight:600}
small{font-size:var(--step--1);color:var(--ink-500)}
hr{border:none;border-top:1px solid var(--line);margin:3rem 0}
::selection{background:var(--olive-200,#c8d3a8);color:var(--olive-900)}

/* ================ Layout primitives ================ */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container-narrow{max-width:820px;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(3rem, 4vw + 2rem, 6rem)}
.section--ivory{background:var(--ivory-100)}
.section--olive{background:var(--olive-900);color:var(--ivory-100)}
.section--olive h1,.section--olive h2,.section--olive h3{color:var(--ivory-50)}
.section--olive a{color:var(--gold-500)}
.grid{display:grid;gap:var(--gutter)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}
@media (min-width:640px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr}.grid-4{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.grid-3{grid-template-columns:1fr 1fr 1fr}.grid-4{grid-template-columns:1fr 1fr 1fr 1fr}}
.text-center{text-align:center}
.stack > * + *{margin-top:var(--flow,1rem)}
.stack-lg > * + *{margin-top:2rem}

/* ================ Buttons ================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.85rem 1.5rem;
  border:1px solid transparent;border-radius:var(--radius);
  font-weight:600;font-size:var(--step-0);
  text-decoration:none;cursor:pointer;
  transition: transform .15s var(--ease-out), background-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
  white-space:nowrap;
}
.btn-primary{background:var(--olive-800);color:var(--ivory-50);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--olive-900);color:var(--ivory-50);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-outline{background:transparent;color:var(--olive-900);border-color:var(--olive-800)}
.btn-outline:hover{background:var(--olive-800);color:var(--ivory-50)}
.btn-ghost{background:transparent;color:var(--ivory-100);border-color:var(--ivory-100)}
.btn-ghost:hover{background:var(--ivory-50);color:var(--olive-900)}
.btn-lg{padding:1.05rem 2rem;font-size:var(--step-1)}
.btn-block{display:flex;width:100%}
.btn svg{width:1.1em;height:1.1em}

/* ================ Announcement bar ================ */
.announcement{background:var(--olive-700);color:var(--gold-500);text-align:center;padding:.5rem 1rem;font-size:var(--step--1);letter-spacing:.06em;text-transform:uppercase;font-weight:500;border-bottom:1px solid rgba(201,184,122,.2)}

/* ================ Header / Nav ================ */
/* Dark header — showcases the gold logo on a rich olive background (premium brand look) */
.site-header{position:sticky;top:0;z-index:40;background:var(--olive-900);border-bottom:1px solid rgba(201,184,122,.18)}
.nav{display:flex;align-items:center;justify-content:space-between;padding-block:.75rem;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ivory-50)}
.brand img{height:64px;width:auto;display:block}
@media (min-width:720px){.brand img{height:72px}}
.nav-links{display:none;gap:2rem;align-items:center}
.nav-links a{color:var(--ivory-200);text-decoration:none;font-weight:500;font-size:var(--step--1);letter-spacing:.02em;padding:.35rem 0;position:relative;transition:color .15s var(--ease-out)}
.nav-links a:hover{color:var(--ivory-50)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--gold-500);transition:width .2s var(--ease-out)}
.nav-links a:hover::after,.nav-links a[aria-current=page]::after{width:100%}
.nav-links a[aria-current=page]{color:var(--gold-500)}
.nav-cta{display:none}
/* Primary CTA in dark header — terracotta for attention */
.nav-cta.btn-primary{background:var(--terra-600);color:var(--ivory-50);border-color:var(--terra-600)}
.nav-cta.btn-primary:hover{background:var(--terra-500);color:var(--ivory-50)}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:var(--radius);cursor:pointer}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ivory-50);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--ivory-50)}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.mobile-menu{display:none;background:var(--olive-900);border-top:1px solid rgba(255,255,255,.1);padding:1rem var(--gutter) 1.5rem}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:.75rem 0;color:var(--ivory-100);text-decoration:none;font-weight:500;border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-menu a:last-of-type{border-bottom:none}
.mobile-menu a:hover{color:var(--gold-500)}
.mobile-menu .btn{margin-top:1rem}
@media (min-width:960px){
  .nav-links{display:flex}
  .nav-cta{display:inline-flex}
  .nav-toggle{display:none}
  .mobile-menu{display:none!important}
}

/* ================ Hero ================ */
.hero{position:relative;min-height:calc(100svh - 60px);display:flex;align-items:center;color:var(--ivory-50);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(26,43,18,.30) 0%, rgba(26,43,18,.55) 55%, rgba(26,43,18,.82) 100%),
  image-set( url("/assets/img/hero/olive-grove-1.webp?v=2") type("image/webp"), url("/assets/img/hero/olive-grove-1.jpg?v=2") type("image/jpeg") );
  background-size:cover;background-position:center;z-index:-1}
@supports not (background-image: image-set(url("x") type("image/webp"))) {
  .hero::before{background:
    linear-gradient(180deg, rgba(26,43,18,.30) 0%, rgba(26,43,18,.55) 55%, rgba(26,43,18,.82) 100%),
    url("/assets/img/hero/olive-grove-1.jpg?v=2");
    background-size:cover;background-position:center}
}
.hero-inner{padding-block:4rem 5rem;max-width:780px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--step--1);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-500);margin-bottom:1.25rem;font-weight:600}
.hero-eyebrow::before{content:"";display:inline-block;width:28px;height:1px;background:var(--gold-500)}
.hero h1{color:var(--ivory-50);font-size:var(--step-6);line-height:1.05;margin-bottom:1rem}
.hero-sub{font-size:var(--step-1);max-width:56ch;opacity:.92;margin-bottom:2rem}
.hero-badges{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:2rem;font-size:var(--step--1);opacity:.9}
.hero-badges span{display:inline-flex;align-items:center;gap:.35rem}

/* ================ Feature / benefit cards ================ */
.card{background:var(--ivory-50);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.5rem,2vw,2rem);box-shadow:var(--shadow-sm);transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.card .icon{width:48px;height:48px;margin-bottom:1rem;color:var(--olive-700)}
.card .icon-emblem{width:76px;height:76px;margin-bottom:1rem;display:block;filter:drop-shadow(0 2px 6px rgba(26,43,18,.12));transition:transform .25s var(--ease-out)}
.card:hover .icon-emblem{transform:scale(1.06) rotate(-2deg)}
.card h3{font-size:var(--step-1);margin-bottom:.5rem}
.card p{color:var(--ink-700);font-size:var(--step-0)}

/* ================ Compare table ================ */
.compare{background:var(--ivory-100);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.compare-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;border-top:1px solid var(--line)}
.compare-row:first-child{border-top:none;background:var(--olive-900);color:var(--ivory-100)}
.compare-row:first-child .compare-cell{font-weight:600;font-family:var(--serif);font-size:var(--step-1)}
.compare-cell{padding:1rem 1.25rem;display:flex;align-items:center}
.compare-cell:nth-child(3){background:var(--olive-100);color:var(--olive-900);font-weight:600}
.compare-row:first-child .compare-cell:nth-child(3){background:var(--olive-800)}
@media (max-width:640px){
  .compare-row{grid-template-columns:1fr;padding:1rem}
  .compare-cell{padding:.35rem 0}
  .compare-cell:first-child{font-weight:600;color:var(--ink-500);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.05em}
}

/* ================ Story split ================ */
.split{display:grid;grid-template-columns:1fr;gap:var(--gutter);align-items:center}
@media (min-width:860px){.split{grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,5rem)}}
.split img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);width:100%;height:auto}
.split--reverse{direction:rtl}
.split--reverse > *{direction:ltr}

/* ================ Product ================ */
.product{display:grid;grid-template-columns:1fr;gap:clamp(2rem,3vw,4rem);align-items:start}
@media (min-width:860px){.product{grid-template-columns:1fr 1fr}}
.product-gallery{position:sticky;top:90px;border-radius:var(--radius-lg);overflow:hidden;background:var(--ivory-100)}
.product-gallery img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.product-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.pill{display:inline-block;padding:.3rem .75rem;background:var(--olive-100);color:var(--olive-900);border-radius:999px;font-size:var(--step--1);font-weight:500}
.product h1{margin-bottom:.5rem}
.price{font-family:var(--serif);font-size:var(--step-4);color:var(--olive-900);font-weight:600;margin:1.25rem 0}
.price small{font-size:var(--step-0);color:var(--ink-500);margin-left:.5rem;font-weight:400}

/* ================ Form ================ */
.form-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media (min-width:640px){.form-grid.two-col{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-weight:500;font-size:var(--step--1);color:var(--ink-700)}
.field label .req{color:var(--terra-600)}
.field input,.field textarea,.field select{
  width:100%;padding:.75rem .9rem;
  background:var(--ivory-50);
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:var(--step-0);color:var(--ink-900);
  transition:border-color .15s var(--ease-out),box-shadow .15s var(--ease-out);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--olive-600);box-shadow:0 0 0 3px rgba(90,122,59,.15)
}
.field textarea{resize:vertical;min-height:100px}
.field .help{color:var(--ink-500);font-size:var(--step--1)}
.field .error{color:var(--terra-600);font-size:var(--step--1)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{padding:1rem 1.25rem;border-radius:var(--radius);margin-bottom:1.5rem;border:1px solid}
.alert-error{background:#fbecec;border-color:#e8c4c4;color:#7a1f1f}
.alert-success{background:#eef6ea;border-color:#c6dfb6;color:#2d5a2d}
.alert-info{background:#f0ead6;border-color:var(--gold-500);color:var(--olive-900)}
ul.errors{margin:.5rem 0 0 1.25rem;padding:0}
ul.errors li{color:inherit}

/* ================ Order summary card ================ */
.order-summary{background:var(--ivory-100);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.5rem}
.order-summary .row{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px dashed var(--line)}
.order-summary .row:last-of-type{border-bottom:none}
.order-summary .total{font-weight:700;font-size:var(--step-1);color:var(--olive-900);padding-top:.75rem;margin-top:.5rem;border-top:2px solid var(--olive-800)!important}

/* ================ FAQ ================ */
.faq details{background:var(--ivory-50);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.2rem 1.5rem;margin-bottom:.75rem}
.faq summary{cursor:pointer;font-weight:600;font-size:var(--step-1);font-family:var(--serif);color:var(--olive-900);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;font-size:1.4em;font-weight:300;transition:transform .2s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{margin-bottom:.75rem}

/* ================ Footer ================ */
.site-footer{background:var(--olive-900);color:var(--ivory-300);padding:3rem 0 2rem;margin-top:4rem}
.site-footer a{color:var(--ivory-300)}
.site-footer a:hover{color:var(--ivory-50)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:720px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
.footer-brand img{height:74px;width:auto;margin-bottom:.75rem;display:block}
.footer-brand p{color:var(--ivory-300);max-width:38ch;font-size:var(--step--1)}
.footer-col h4{color:var(--ivory-50);font-size:var(--step-0);margin-bottom:1rem;font-family:var(--sans);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:.5rem}
.footer-col a{text-decoration:none;font-size:var(--step--1)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2.5rem;padding-top:1.25rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:var(--step--1);color:var(--ivory-300)}

/* ================ Utilities ================ */
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mt-6{margin-top:3rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.eyebrow{display:inline-block;font-size:var(--step--1);letter-spacing:.22em;text-transform:uppercase;color:var(--olive-700);font-weight:600;margin-bottom:.75rem}
.section--olive .eyebrow{color:var(--gold-500)}
.muted{color:var(--ink-500)}
.text-lg{font-size:var(--step-1)}
.lead{font-size:var(--step-1);color:var(--ink-700);max-width:62ch}
.divider{height:1px;background:var(--line);margin-block:2rem}
.hidden{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ================ Skip link ================ */
.skip{position:absolute;left:1rem;top:-3rem;background:var(--olive-900);color:var(--ivory-50);padding:.6rem 1rem;border-radius:var(--radius);z-index:100;transition:top .2s}
.skip:focus{top:.75rem}

/* ================ Print ================ */
@media print {
  .site-header,.site-footer,.announcement,.nav-toggle{display:none}
  body{background:#fff}
}