/* ==========================================================================
   Broadleaf — shared stylesheet
   Canonical design tokens and cross-page patterns. Source of truth: brand.md.
   Page-specific rules live in each page's own <style> block.
   ========================================================================== */

/* ---------- Self-hosted fonts (variable, latin + latin-ext) ---------- */

/* EB Garamond italic — latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/eb-garamond-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* EB Garamond italic — latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/eb-garamond-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* EB Garamond roman — latin-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/eb-garamond-roman-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* EB Garamond roman — latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/eb-garamond-roman-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter roman — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-roman-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter roman — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-roman-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Canonical tokens (brand.md) ---------- */

:root{
  --forest: #1C1917;        /* dark ground, nav bar */
  --forest-deep: #100F0E;   /* gradient floor on hero/closing */
  --stone: #FFFFFF;         /* light ground */
  --stone-warm: #FAF7F3;    /* alternating warm sections */
  --moss: #7A7A7A;          /* divider leaf, muted marks */
  --brass: #A77C39;         /* kickers, rules, mobile call bar */
  --brass-bright: #C79B54;  /* hover, highlights, dark-ground kickers */
  --brass-deep: #8A6527;    /* brass for small text on light grounds — 5.3:1 vs
                               white, where --brass is only 3.7:1 and fails AA */
  --ink: #241C16;           /* headings on light */
  --ink-soft: #5A4E42;      /* body copy on light */
  --line: rgba(0,0,0,0.12);        /* hairline dividers on light */
  --line-light: rgba(255,255,255,0.22); /* hairlines on dark */

  --font-display: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', system-ui, Arial, Helvetica, sans-serif;
}

/* ---------- Base ---------- */

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .display{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; }
::selection{ background: var(--brass-bright); color: var(--forest-deep); }
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline: 2px solid var(--brass-bright);
  outline-offset: 3px;
}

/* Visually hidden but available to assistive tech */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — offscreen until it takes keyboard focus, then slides in.
   Fixed, not absolute: an absolute one scrolls away with the document and lands
   offscreen if it takes focus while the page is scrolled down. */
.skip-link{
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--forest);
  color: var(--stone);
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.04em;
  border: 1px solid var(--brass-bright);
  border-radius: 2px;
  transition: top 0.18s ease;
}
.skip-link:focus{ top: 12px; }

@media (prefers-reduced-motion: reduce){
  .skip-link{ transition: none; }
}

/* The skip target is focused programmatically, so suppress the outline that
   would otherwise ring the entire hero. */
#main:focus{ outline: none; }

/* ---------- Brand lockup (nav + footer) ---------- */

.nav .brand{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ---------- Hero subheads ---------- */

/* These were 16px — smaller than the 19.3px body copy further down the same page —
   so "A landscape is more than what surrounds a home." read like a caption rather
   than the brand line it is. `header.hero .sub` (0,2,1) edges out the pages' own
   `.hero .sub` (0,2,0) without needing !important. */
header.hero .sub,
section.hero .sub{
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: rgba(255,255,255,0.88);
  line-height: 1.5;
}

/* ---------- Accent word ---------- */

/* One word per headline, set in solid gold.
 *
 * This replaced an animated gradient sweep. Three reasons it went:
 *   - a gradient across a high-contrast serif fights the letterforms, and the
 *     fade across the glyphs read as uneven rendering rather than as metal;
 *   - a word that perpetually changes tone reads as a web effect, which is the
 *     opposite of what this brand claims about itself;
 *   - it carried real fragility — `background-clip: text` needs
 *     `color: transparent`, one wrong `background-repeat` away from an invisible
 *     word, which is exactly the bug it shipped with at one point.
 *
 * Solid also unifies the site: this is now the same treatment as `.gold` on
 * Services, so there is one accent idea instead of two. `--brass-bright` measures
 * 6.87:1 on the forest ground, and every headline using this sits on a dark hero.
 */
.shimmer{
  color: var(--brass-bright);
}

/* ---------- Phone number in the header ---------- */

/* On about / blog / the-standard the number existed only inside the mobile-only
   call bar, so a desktop visitor had no way to phone from those pages.
   `nav.nav a.nav-tel` (0,2,2) outranks the pages' `.nav .links a` (0,2,1). */
nav.nav a.nav-tel{
  color: var(--brass-bright);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
nav.nav a.nav-tel:hover{
  color: var(--stone);
  border-bottom-color: var(--brass-bright);
}

@media (max-width: 640px){
  /* redundant beside the fixed brass call bar, and it costs a nav row */
  nav.nav a.nav-tel{ display: none; }
}

/* ---------- Mobile menu toggle ---------- */

/* Hidden above the breakpoint; the full nav shows as normal there. */
.nav-toggle{ display: none; }

@media (max-width: 640px){
  .nav-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 1px solid var(--line-light);
    border-radius: 3px;
    color: var(--stone);
    cursor: pointer;
  }
  .nav-toggle .bar,
  .nav-toggle .bar::before,
  .nav-toggle .bar::after{
    display: block;
    width: 18px;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.2s ease, background-color 0.2s ease;
  }
  .nav-toggle .bar{ position: relative; }
  .nav-toggle .bar::before,
  .nav-toggle .bar::after{ content: ""; position: absolute; left: 0; }
  .nav-toggle .bar::before{ top: -6px; }
  .nav-toggle .bar::after { top: 6px; }

  .nav-toggle[aria-expanded="true"] .bar{ background: transparent; }
  .nav-toggle[aria-expanded="true"] .bar::before{ transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bar::after { transform: translateY(-6px) rotate(-45deg); }

  /* Collapsing is gated on `.js-nav`, which nav.js adds. Without JS the links
     simply stay visible — better a tall nav than an inert button. */
  .js-nav nav.nav{ justify-content: space-between; }
  .js-nav nav.nav .brand{ width: auto; }
  .js-nav #nav-links{ display: none; }
  .js-nav #nav-links.open{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0;
    padding: 4px 0 8px;
  }
}

@media (prefers-reduced-motion: reduce){
  .nav-toggle .bar,
  .nav-toggle .bar::before,
  .nav-toggle .bar::after{ transition: none; }
}

/* ---------- Tap targets ---------- */

/* Nav links measured 16px tall. WCAG 2.5.8 floors at 24px; Apple and Google both
   ask for 44px. inline-flex so min-height actually applies to an inline <a>.
   `nav.nav` (0,1,1) outranks the pages' own `.nav` (0,1,0) regardless of order. */
nav.nav a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Standalone links measured 16-23px tall and failed the same 24px floor. Links
   sitting inside body copy are exempt (WCAG 2.5.8's "inline" exception), so this
   lists the standalone ones by hand rather than blanket-targeting `a`.
   24px, not the nav's 44px: these are secondary links inside content, and 44
   would open visible gaps in the cards and info blocks.

   Two details that matter:
   - `align-items: flex-end` keeps the text where it already sits, so the
     border-bottom underline stays 3px under the words instead of dropping to
     the bottom of the taller box. The new hit area is added above the text.
   - Each selector is one step more specific than the page's own rule, because
     the pages' <style> blocks load after this file and would otherwise win. */
a.link-underline,
.back a[href],
.quote-section a[href],
.info-block a.value[href]{
  display: inline-flex;
  align-items: flex-end;
  min-height: 24px;
}
/* Same, plus a gap: this link's arrow comes from ::after, and inline-flex makes
   that a separate flex item whose leading space collapses. gap restores it. */
.card > a[href]{
  display: inline-flex;
  align-items: flex-end;
  gap: 0.3em;
  min-height: 24px;
}
/* Centred, not flex-end: these sit in a flex row with the bullet separators,
   which stay vertically centred. flex-end would leave the dots floating high. */
.footer .foot-links a{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

@media (max-width: 640px){
  /* Two problems on phones: the nav sat transparent over a busy hero photo
     (links nearly unreadable), and fixed it cost 136px of an 812px viewport —
     17% — permanently, on top of the 47px call bar. Static and solid fixes both.
     The brass call bar stays fixed, so the primary action is still always there. */
  nav.nav{
    position: static;
    background: var(--forest);
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    padding: 6px 16px;
    gap: 0 16px;
    justify-content: center;
  }
  /* that page reserves 90px of nav clearance inline; not needed once static */
  section.hero[style]{ padding-top: 18px !important; }
  nav.nav .brand{ width: 100%; justify-content: center; }
  nav.nav ul,
  nav.nav .links{ gap: 0 16px; justify-content: center; flex-wrap: wrap; }
  nav.nav .cta,
  nav.nav .links a.button{ padding-top: 6px; padding-bottom: 6px; }
}

/* ---------- Section scaffold (index / about / the-broadleaf-standard) ---------- */

.section{ padding: clamp(72px, 11vw, 130px) 20px; position: relative; }
.section-inner{ max-width: 1080px; margin: 0 auto; padding: 0 28px; }
.section-inner.narrow{ max-width: 720px; }   /* 720px reading measure */
.section-light{ background: var(--stone); }
.section-warm{ background: var(--stone-warm); }
.section h2{ font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.16; }
.section p{
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 20px;
}
.section p:last-child{ margin-bottom: 0; }

/* Kicker: uppercase letterspaced brass label above headings.
   The p.kicker/p.lede selectors keep these rules from losing the color war
   against `.section p` above (same specificity, later order wins);
   page-level context overrides like `.process .kicker` still take precedence. */
.kicker, p.kicker{
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-deep);
  font-weight: 500;
  margin-bottom: 16px;
}

/* Italic serif lede — sizes are set per page */
.lede, p.lede{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  line-height: 1.5;
}

/* ---------- Divider: hairline stem — diamond — hairline stem ---------- */

.divider{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.divider .stem{ width: 44px; height: 1px; background: var(--line); }
.divider .leaf{
  width: 7px; height: 7px;
  background: var(--moss);
  border-radius: 1px;
  transform: rotate(45deg);
  opacity: 0.7;
}

/* ---------- Reveal on scroll ---------- */

.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.3,1), transform 0.9s cubic-bezier(.2,.7,.3,1);
}
.reveal.in{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
  html{ scroll-behavior: auto; }
}

/* ---------- Footer palette ---------- */

.footer{
  /* Was a four-stop fade: forest → a muddy #6B5644 brown → #C7AD82 → sandy
   * #DCC9A3. It read as a washed-out sunset, sat oddly against every page it
   * closed, and forced dark-brown body text and a rust wordmark to stay legible
   * on the pale end.
   * Solid forest-deep instead — it bookends the dark nav, ends the page
   * deliberately, and lets the brass read properly. */
  background: var(--forest-deep);
  color: rgba(237,231,218,0.74);
  text-align: center;
  border-top: 1px solid rgba(199,155,94,0.30);
}
.footer .foot-brand{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-bright);
  font-size: 1rem;
  margin-bottom: 14px;
}
/* The full lockup replaces the wordmark text here. 280px is the smallest width at
   which "LANDSCAPE COMPANY" still reads — it is ~6% of the lockup height, so at the
   nav's 28px this line would be under 2px, which is why the nav carries the mark
   alone. The reversed (white) file is the right one on this forest-deep ground:
   the colour version contains a black bar that would vanish into it. */
/* The BROADLEAF wordmark is custom-drawn outlines, not a typeface, so there is no font
   that can reproduce it — the nav brand name has to be an image or it won't match the
   logo. Sized in `em` so it tracks each page's own .brand font-size: 0.95rem pages give
   ~17px, index's 1.25rem gives ~23px, and the mark scales alongside it.
   `img.wordmark` (0,3,1) deliberately outranks the per-page `.nav .brand img` rule
   (0,2,1) that pins the square mark to 28x28 — without the class it would be squashed. */
/* Both nav brand images are sized here in px rather than em, because the mark and the
   wordmark block have to hold a fixed relationship to each other, not to each page's
   font-size. Class selectors (0,3,1) outrank the per-page `.nav .brand img` 28x28 rule
   (0,2,1) and index's `.nav .brand .mark` 42px rule (0,3,0). */
.nav .brand img.mark{
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
/* BROADLEAF alone, no descriptor. 44px mark to 20px wordmark is a ratio of 2.2, which
   is the supplied lockup's own 2.24 — so this reads as the real logo rather than a
   re-proportioned one. The block variant (with LANDSCAPE COMPANY) was tried here and
   pulled: it rendered the descriptor at 6.7px, below reading size, while dropping the
   ratio to 1.1 and widening the nav-wrap band by 114px. The descriptor lives in the
   footer lockup instead. */
.nav .brand img.wordmark{
  height: 20px;
  width: auto;
  flex-shrink: 0;
}

.footer .foot-brand img{
  /* 340, not 280: "LANDSCAPE COMPANY" is 7.5% of the lockup height (measured, 92px of
     1226), so 280px wide put it at 6.5px — a smear rather than words. 340 gives ~8px,
     which reads. */
  width: 340px;
  max-width: 80%;
  height: auto;
  margin: 0 auto;
}
.footer .foot-links{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;          /* owns the spacing for every page; the dot spans separate */
  margin: 18px 0;
}
.footer .foot-links a{ color: rgba(237,231,218,0.86); }
.footer .foot-links a:hover{ color: var(--brass-bright); }
/* 0.75 alpha, not lower — below that the separator falls under 4.5:1 on this ground */
.footer .dot{ color: rgba(199,155,94,0.75); }

/* ---------- Fixed brass call bar on small viewports ---------- */

.mobile-call{ display: none; }

@media (max-width: 640px){
  .mobile-call{
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
  }
  /* Two halves, call and text, so the bar still reads as one brass strip. Padding
     and font size are unchanged from the single-link version, which keeps each
     half at ~47px tall — above the 44px WCAG 2.5.8 tap target. */
  .mobile-call a{
    flex: 1 1 50%;
    background: var(--brass-deep);
    color: #ffffff;
    text-align: center;
    padding: 14px;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.5px;
  }
  .mobile-call a + a{ border-left: 1px solid rgba(255,255,255,0.28); }
  body{ padding-bottom: 54px; }
}