/* ============================================================
   elowynn — colors & type
   The palette: Forest, Walnut, Brass.
   The typeface: one family, three roles.
   ============================================================ */

/* ---- Type stack --------------------------------------------
   Per brand direction: Arial (system font, no webfont import).
   Heritage brand, paper-typewriter feel — system Arial reads
   appropriately quiet on every machine and ships zero kb.
   ----------------------------------------------------------- */

:root {
  /* --- Brand palette (verbatim from brand guide) --- */
  --forest-floor: #1F2418;   /* PRIMARY — backgrounds, type on light */
  --walnut:       #3A2E1F;   /* DEPTH   — secondary surfaces */
  --moss:         #4A5240;   /* STRUCTURE — borders, dividers */
  --sage:         #A8B89A;   /* SOFT — backgrounds, light type */
  --brass:        #C9B575;   /* ACCENT — hairlines, rules, accents only */
  --linen:        #FAF7F2;   /* CANVAS — light backgrounds, paper */

  /* --- Extended scale (derived for UI density) --- */
  --linen-2:      #F2EDE4;   /* warmer paper, card backs */
  --linen-3:      #E8E0D2;   /* dividers on linen */
  --sage-2:       #C4D0B8;   /* lighter sage tint */
  --moss-2:       #2E3528;   /* darker moss, near-black */
  --brass-2:      #B59E5C;   /* deeper brass, hover */

  /* --- Semantic foreground / background tokens --- */
  --bg:           var(--linen);
  --bg-raised:    #FFFFFF;
  --bg-sunken:    var(--linen-2);
  --bg-inverse:   var(--forest-floor);

  --fg:           var(--forest-floor);
  --fg-muted:     var(--moss);
  --fg-subtle:    #6B7261;       /* moss desaturated for captions */
  --fg-inverse:   var(--linen);
  --fg-on-accent: var(--forest-floor);

  --border:       var(--linen-3);
  --border-strong:var(--moss);
  --hairline:     var(--brass);  /* used sparingly — accent rules only */

  --accent:       var(--brass);
  --accent-deep:  var(--brass-2);

  /* --- Type families --- */
  --font-sans:    Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-display: var(--font-sans);          /* one typeface, three roles */
  --font-serif:   Georgia, "Times New Roman", Times, serif; /* body reading copy */
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Type scale (px, anchored to brand spec) --- */
  --t-display:    64px;     /* "Made to grow."           — 800 */
  --t-h1:         48px;
  --t-h2:         32px;
  --t-h3:         24px;     /* HEADLINE                  — 700 */
  --t-h4:         18px;
  --t-body:       16px;     /* BODY                      — 400 */
  --t-body-lg:    18px;
  --t-caption:    12px;
  --t-label:      11px;     /* LABEL · TRACKED           — 700 */

  /* --- Weights (one family, three roles) --- */
  --w-regular:    400;
  --w-medium:     500;
  --w-semibold:   600;
  --w-bold:       700;
  --w-heavy:      800;

  /* --- Letter-spacing — tight tracking is a brand signature --- */
  --ls-display:   -0.025em;  /* tight */
  --ls-headline:  -0.015em;
  --ls-body:      -0.005em;
  --ls-label:     0.18em;    /* the only place we go wide */
  --ls-caps:      0.08em;

  /* --- Line-height --- */
  --lh-display:   0.95;
  --lh-heading:   1.15;
  --lh-body:      1.55;
  --lh-tight:     1.25;

  /* --- Spacing (4px grid) --- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* --- Radii — small, restrained. Heritage brand. --- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-pill: 999px;

  /* --- Borders --- */
  --bw-hair: 1px;
  --bw-rule: 1.5px;
  --bw-strong: 2px;

  /* --- Shadows — minimal, paper-like. Avoid synthetic glow. --- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(31, 36, 24, 0.04), 0 1px 2px rgba(31, 36, 24, 0.06);
  --shadow-2: 0 2px 4px rgba(31, 36, 24, 0.05), 0 8px 16px rgba(31, 36, 24, 0.06);
  --shadow-3: 0 4px 12px rgba(31, 36, 24, 0.08), 0 16px 32px rgba(31, 36, 24, 0.08);

  /* --- Motion — slow, considered. --- */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);  /* gentle ease-out */
  --ease-subtle: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    180ms;
  --dur-base:    280ms;
  --dur-slow:    520ms;
}

/* ============================================================
   SEMANTIC TYPE — the three roles
   ============================================================ */

.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: var(--w-heavy);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--fg);
}

.t-h1 {
  font-family: var(--font-sans);
  font-size: var(--t-h1);
  font-weight: var(--w-heavy);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-heading);
  color: var(--fg);
}

.t-h2 {
  font-family: var(--font-sans);
  font-size: var(--t-h2);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-headline);
  line-height: var(--lh-heading);
  color: var(--fg);
}

.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-headline);
  line-height: var(--lh-tight);
  color: var(--fg);
}

.t-h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-tight);
  color: var(--fg);
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--fg);
}

.t-body-lg {
  font-family: var(--font-sans);
  font-size: var(--t-body-lg);
  font-weight: var(--w-regular);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--fg);
}

.t-caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-tight);
  color: var(--fg-muted);
}

.t-label {
  font-family: var(--font-sans);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-label);
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg);
}

/* ============================================================
   BASE — light canvas by default
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }

/* The brass hairline — a brand signature.
   Use SPARINGLY. One per page is a luxury; two is loud. */
.brass-rule {
  height: 1px;
  background: var(--brass);
  border: 0;
  width: 64px;
  margin: 0;
}

/* ============================================================
   ROMAN NUMERAL DATELINE
   "ESTABLISHED · MMXXVI" is a recurring motif.
   ============================================================ */

.dateline {
  font-family: var(--font-sans);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* data-grid collapse — used by new component sections */
@media (max-width: 880px) {
  [data-grid="2"], [data-grid="3"] { grid-template-columns: 1fr !important; }
}

.nav-hamburger { display: none; }

@media (max-width: 960px) {
  .nav-bar {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .hero-section,
  .services-section,
  .team-section,
  .fieldnotes-section,
  .contact-section {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .hero-inner, .team-inner {
    max-width: 100%;
    width: 100%;
  }
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .service-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .team-layout {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .contact-section {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .fieldnotes-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 20px 0 !important;
  }
}

/* Hamburger nav — kicks in at 768px */
@media (max-width: 768px) {
  .nav-hamburger {
    display: flex !important;
  }
  .nav-right {
    display: none !important;
  }
  .nav-right.nav-open {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px !important;
    width: 100%;
    margin-left: 0 !important;
    padding: 20px 0 24px;
    border-top: 1px solid var(--linen-3);
  }
  .nav-right.nav-open > a {
    margin-left: 0 !important;
  }
}

/* Mobile layout fixes for homepage sections */
@media (max-width: 880px) {
  /* StuckSection: zero out right-column indent */
  .stuck-cell-right {
    padding-left: 0 !important;
    border-right: none !important;
  }

  /* ServicesTiles header: bring intro text out of implicit hidden column */
  .services-intro {
    grid-column: 1 / -1 !important;
  }

  /* ServicesTiles section header: tighten bottom margin */
  .services-head {
    margin-bottom: 40px !important;
  }

  /* ServicesTiles group spacing: reduce on mobile */
  .services-groups {
    gap: 56px !important;
  }

  /* Group intro text: stack below h3 instead of floating right */
  .group-intro-text {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }

  /* ServiceCard: remove forced min-height so cards fit their content */
  .svc-card {
    min-height: 0 !important;
  }
}

/* Mobile layout fixes for services page */
@media (max-width: 880px) {
  /* AnchorNav: reduce side padding and enable horizontal scroll */
  .anchor-nav {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .anchor-nav-list {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 24px !important;
  }
  .anchor-nav-list::-webkit-scrollbar { display: none; }
  .anchor-nav-list a { white-space: nowrap; }

  /* WhatMakesDifferent: remove left-border indent; no top hairline on mobile */
  .diff-col-bordered {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 48px !important;
  }

  /* ServicesOverview group intro copy: stack below heading instead of beside it */
  .group-copy-text {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    margin-top: 8px !important;
  }
}

@media (max-width: 640px) {
  .nav-bar {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .hero-section,
  .services-section,
  .team-section,
  .fieldnotes-section,
  .contact-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .hero-headline {
    font-size: clamp(32px, 9vw, 52px) !important;
    line-height: 1.08 !important;
  }
  .hero-lede {
    font-size: 16px !important;
    margin-top: 24px !important;
    margin-bottom: 40px !important;
  }
  .contact-form {
    padding-top: 0 !important;
  }
  .team-card {
    padding: 24px !important;
  }
  .services-inner {
    max-width: 100% !important;
  }
  /* ServiceDetail: tighter button padding on small screens */
  .svc-detail-head {
    padding: 20px 20px !important;
  }
}