:root {
  /* === Premium nursery palette ===
     Warm limestone paper · deep-evergreen brand · clay action colour.
     The brand colour (--canopy) is what makes the product feel like a garden
     business. The action colour (--accent, clay) is what makes CTAs cut through.
     They're deliberately different so the eye knows what to do. */
  --bg:           #F7F4EE;     /* warm limestone */
  --bg-2:         #EFE7DA;
  --panel:        #FFFFFF;     /* card surfaces */
  --panel-2:      #FFFFFF;
  --surface-soft: #F1EADF;
  --ink:          #16201B;     /* near-black with green undertone */
  --ink-2:        #2C352F;
  --muted:        #5B6B61;     /* secondary text, slight green warmth */
  --dim:          #9AA79C;     /* tertiary / placeholder */
  --accent:       #D9683C;     /* clay, the one action colour */
  --accent-dark:  #B9542E;
  --accent-soft:  #FBEDE5;
  --accent-pale:  #FDF5F0;
  --accent-2:     #5B6B61;
  --accent-glow:  rgba(217,104,60,0.18);
  --canopy:       #1B3A2F;     /* deep evergreen, brand colour */
  --canopy-dark:  #122922;
  --canopy-soft:  #E5EBE7;
  --forest:       #0E1A15;     /* immersive dark for forest bands */
  --sage:         #6E8B7B;     /* foliage tint for accents on dark */
  --highlight:    #b8895a;     /* warm brass, kept for legacy refs */
  --highlight-soft:#f3e8d8;
  --border:       #E6DFD2;     /* warm limestone divider */
  --border-strong:#D3C9B6;
  --success:      #2E7D52;     /* the green of a "yes", distinct from brand */
  --success-soft: #E5EFE9;
  --success-dark: #1F5839;
  --warn:         #B9542E;
  --danger:       #9b2a1a;

  /* === Type scale (modular, premium) === */
  --font-display: 'Fraunces','Source Serif Pro','Georgia',serif;
  --font-body:    'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fs-hero:      clamp(44px, 7vw, 76px);
  --fs-h1:        clamp(34px, 5vw, 52px);
  --fs-h2:        clamp(26px, 3.5vw, 36px);
  --fs-h3:        20px;
  --fs-lead:      clamp(17px, 1.8vw, 21px);
  --fs-body:      15.5px;
  --fs-small:     13px;
  --fs-eyebrow:   11px;

  /* === Spacing scale === */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  72px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* === Depth / motion === */
  --shadow-sm: 0 1px 2px rgba(26,31,28,0.04), 0 1px 1px rgba(26,31,28,0.03);
  --shadow:    0 2px 6px rgba(26,31,28,0.05), 0 8px 24px rgba(26,31,28,0.06);
  --shadow-lg: 0 12px 30px rgba(26,31,28,0.10), 0 30px 60px rgba(26,31,28,0.08);
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --ease:      cubic-bezier(0.2, 0.7, 0.1, 1);
}

*{box-sizing:border-box;margin:0;padding:0}
img,video,canvas{max-width:100%}
html,body{height:100%}
body{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.6;
  font-feature-settings: 'ss01', 'cv01', 'cv11';   /* Inter stylistic alternates */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img{max-width:100%;display:block}

a{color:var(--accent);text-decoration:none;transition:color 0.18s var(--ease), opacity 0.18s var(--ease)}
a:hover{color:var(--accent-dark);opacity:1}

/* ---------- Premium type scale (apply via .h-display / .h-section / .h-eyebrow) ---------- */
.h-display{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--ink);
  font-feature-settings: 'ss01', 'liga', 'kern';
}
.h-section{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.h-eyebrow{
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-dark);
}
.lede{
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
}

/* ---------- Premium button system (.btn-v2, opt-in to not break legacy) ---------- */
.btn-v2{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 14px 22px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.16s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn-v2:hover{transform: translateY(-1px); opacity: 1}
.btn-v2:active{transform: translateY(0)}
.btn-v2-primary{
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-v2-primary:hover{
  background: var(--accent-dark);
  color: #fff;
  box-shadow: var(--shadow);
}
.btn-v2-ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn-v2-ghost:hover{
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.btn-v2-lg{padding: 17px 30px; font-size: 16px}

.shell{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.env-badge{
  margin-left:6px;
  font-size:10px;
  letter-spacing:0.18em;text-transform:uppercase;font-weight:700;
  color:#b45309;background:#fef3c7;
  border:1px solid #fcd34d;
  padding:3px 8px;border-radius:6px;
}
nav.nav::before{display:none}

.brand-mark{
  width:34px;height:34px;border-radius:8px;
  background:var(--canopy);
  display:grid;place-items:center;
}
.brand-mark svg{width:18px;height:18px;stroke:#ffffff !important}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font-weight:700;font-size:16px;color:var(--canopy);letter-spacing:-0.01em}
.brand-tag{
  font-size:11px;color:var(--muted);letter-spacing:0.02em;margin-top:3px;font-weight:400;
}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:var(--ink-2);font-size:14px;font-weight:500;letter-spacing:-0.005em}
.nav-links a:hover{color:var(--accent);opacity:1}
.nav-links a.active{color:var(--accent)}
.nav-cta{
  padding:9px 18px;background:var(--accent);
  color:#ffffff !important;border-radius:10px;font-weight:600;font-size:14px;
  transition:background 0.15s;
}
.nav-cta:hover{background:var(--accent-dark);opacity:1}
.nav-toggle{display:none;background:transparent;border:0;color:var(--ink);cursor:pointer}

/* Nav dropdown menus (More / Account) */
.nav-menu{position:relative;display:inline-flex}
.nav-menu-btn{
  background:transparent;border:0;cursor:pointer;font-family:inherit;
  color:var(--ink-2);font-size:14px;font-weight:500;letter-spacing:-0.005em;
  display:inline-flex;align-items:center;gap:5px;padding:0;
}
.nav-menu-btn:hover,.nav-menu.open .nav-menu-btn,.nav-menu-btn.active{color:var(--accent)}
.nav-menu-btn svg{transition:transform 0.15s}
.nav-menu.open .nav-menu-btn svg{transform:rotate(180deg)}
.nav-menu-pop{
  display:none;position:absolute;top:calc(100% + 10px);right:0;min-width:184px;
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:6px;
  box-shadow:0 14px 40px rgba(10,25,41,0.14);z-index:60;flex-direction:column;
}
.nav-menu.open .nav-menu-pop{display:flex}
.nav-menu-pop a{padding:9px 12px;border-radius:8px;font-size:14px;color:var(--ink-2)}
.nav-menu-pop a:hover{background:var(--surface-soft);color:var(--accent)}

@media (max-width:760px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;padding:14px 24px;
    background:#ffffff;border-bottom:1px solid var(--border);
    box-shadow:0 8px 24px rgba(10,25,41,0.06);}
  .nav-links.open{display:flex}
  .nav-links > a{padding:12px 0;border-bottom:1px solid var(--border)}
  .nav-toggle{display:block}
  /* Dropdowns flatten to inline indented lists on mobile */
  .nav-menu{display:block;width:100%}
  .nav-menu-btn{width:100%;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
  .nav-menu-pop{position:static;display:none;box-shadow:none;border:0;border-radius:0;padding:4px 0 10px 14px;min-width:0}
  .nav-menu.open .nav-menu-pop{display:flex}
  .nav-menu-pop a{padding:9px 0}
}

/* ---------- Footer ---------- */
footer{
  margin-top:96px;border-top:1px solid var(--border);
  background:var(--bg-2);
  padding:48px 0 32px;
}
.foot-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;
}
@media (max-width:760px){
  /* About spans the top (its long blurb no longer leaves a lopsided gap beside a
     short link column); the three link columns sit in an even row below. */
  .foot-grid{grid-template-columns:repeat(3,1fr);gap:26px 16px}
  .foot-about{grid-column:1 / -1}
}
@media (max-width:380px){.foot-grid{gap:22px 12px}}
.foot-col h4{
  font-size:11px;
  color:var(--muted);letter-spacing:0.08em;text-transform:uppercase;
  margin-bottom:14px;font-weight:600;
}
.foot-col a{display:block;color:var(--ink-2);font-size:14px;margin-bottom:8px;font-weight:400}
.foot-col a:hover{color:var(--accent);opacity:1}
.foot-about p{color:var(--muted);font-size:14px;max-width:340px;margin-top:14px;line-height:1.65}
.foot-bottom{
  margin-top:36px;padding-top:24px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;
  color:var(--muted);
}
@media (max-width:600px){.foot-bottom{flex-direction:column;gap:10px}}

/* ---------- Buttons ---------- */
button, .btn{
  background:var(--ink);
  color:#ffffff;border:0;border-radius:8px;
  padding:11px 18px;font-family:inherit;font-weight:500;font-size:14px;
  cursor:pointer;transition:background 0.15s, transform 0.05s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;letter-spacing:-0.005em;
}
button:hover, .btn:hover{background:var(--accent-dark);opacity:1}
button:active, .btn:active{transform:translateY(1px)}
button:disabled{opacity:0.5;cursor:not-allowed}
button.ghost, .btn.ghost{
  background:#ffffff;color:var(--ink);
  border:1px solid var(--border-strong);
}
button.ghost:hover, .btn.ghost:hover{
  background:var(--surface-soft);border-color:var(--ink);
}
.btn-lg{padding:14px 22px;font-size:15px}

/* Accent / primary action variant */
.btn-accent{
  background:var(--accent);color:#ffffff;
}
.btn-accent:hover{background:var(--accent-dark)}

/* ---------- Cards ("panel") ---------- */
.panel{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:14px;padding:24px;
  position:relative;
  box-shadow:0 1px 2px rgba(10,25,41,0.04), 0 4px 12px rgba(10,25,41,0.03);
  transition:border-color 0.15s, box-shadow 0.15s;
}
.panel:hover{border-color:var(--border-strong)}

/* Subtle section label (replaces .panel-label with the green dot) */
.panel-label{
  font-size:11px;
  color:var(--muted);letter-spacing:0.06em;text-transform:uppercase;
  margin-bottom:16px;font-weight:600;
}

/* ---------- Form fields ---------- */
textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select{
  width:100%;background:#ffffff;color:var(--ink);
  border:1px solid var(--border-strong);border-radius:8px;
  padding:11px 13px;font:inherit;font-size:14px;resize:vertical;
  outline:none;transition:border-color 0.15s, box-shadow 0.15s;
  font-family:inherit;
}
textarea{min-height:96px}
textarea:focus,input:focus,select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}
textarea::placeholder,input::placeholder{color:var(--dim)}

.field-label{
  font-size:12px;
  color:var(--ink-2);letter-spacing:-0.005em;
  margin:14px 0 6px;display:block;font-weight:500;
}

/* ---------- Typography helpers ---------- */
.eyebrow{
  display:inline-block;
  font-size:11px;font-weight:600;
  color:var(--accent);letter-spacing:0.08em;text-transform:uppercase;
  padding:4px 10px;border:1px solid var(--border);background:var(--accent-soft);
  border-radius:6px;margin-bottom:14px;
}
.h-gradient{
  color:var(--ink);
}

.section{padding:80px 0}
.section-tight{padding:48px 0}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);
  border:1px solid var(--ink);border-radius:10px;
  padding:13px 18px;color:#ffffff;font-size:14px;
  box-shadow:0 12px 32px rgba(10,25,41,0.18);
  opacity:0;transition:all 0.22s;z-index:200;pointer-events:none;font-weight:500;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast.err{background:var(--danger);border-color:var(--danger)}

/* ---------- Helpers ---------- */
hr{border:0;border-top:1px solid var(--border);margin:32px 0}
code{font-family:'JetBrains Mono','SF Mono',monospace;font-size:0.9em;
  background:var(--surface-soft);padding:2px 6px;border-radius:4px;color:var(--ink-2)}

/* Small note text */
.note{color:var(--muted);font-size:13px}
.tiny{color:var(--dim);font-size:12px}

/* ===================== Published theme, white · silver · black ===================== */
/* Applied on every build EXCEPT the private sandbox (which sets PROJECT_BUILD).        */
body.theme-published{
  --bg:#ffffff;
  --bg-2:#f7f8f9;
  --panel:#ffffff;
  --panel-2:#ffffff;
  --surface-soft:#eef1f3;     /* light silver */
  --ink:#0c0e11;              /* near-black primary text */
  --ink-2:#2a2e34;            /* charcoal */
  --muted:#6b717a;            /* silver-grey */
  --dim:#a6acb4;              /* light silver */
  --accent:#1f9d57;           /* emerald pop, the highlight colour */
  --accent-dark:#157a43;
  --accent-soft:#eef7f1;
  --accent-2:#6b717a;
  --accent-glow:rgba(31,157,87,0.16);
  --border:#e3e6ea;           /* silver hairline */
  --border-strong:#c2c8cf;    /* silver */
}
/* Drop the sandbox "dev" chrome on the published build */
.theme-published nav.nav::before{display:none}
/* Sleek black brand mark on white */
.theme-published .brand-mark{background:linear-gradient(135deg,#2c2f34,#0c0e11)}
/* Metallic silver brand name (dark stops keep it readable on white) */
.theme-published .brand-name{
  background:linear-gradient(135deg,#2b2f36 0%,#9aa1aa 45%,#c8ced5 55%,#3a3f47 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* Headline pop: black → emerald, so key headings stand out and stay on-brand */
.theme-published .h-gradient{
  background:linear-gradient(120deg,var(--ink) 0%,var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}