/* Template scaffolding — page layout and web-scale sizing only; every color,
   font, radius and shadow comes from ../../styles.css. The voice is the
   deck's, re-derived for a scrolling page: an editorial book — Cormorant
   display over Lora text, hairline rules carrying the structure, gold
   applied as stroke and small marks (the filled gold moments are counted:
   one numeral), justified body in columns with real hyphenation, the
   photograph matted like a tipped-in plate.

   THE RHYTHM: a 28px leading unit (17px Lora body at ~1.65 — Lora's big
   x-height reads a size larger than its px), 14px half-step; line-heights
   and block margins in unit multiples, heads cap-trimmed, ?baselines/B to
   review. The deck's seat-pinning relaxes to per-block discipline on a
   fluid page. The system's own interface components keep their styles.css
   leading.

   THE LANDING LAWS (shared by all six systems' landing templates):
   #1 display headers break per sentence (.line spans); #2 the landing
   advertises an invented product played straight — classical's is
   Quarto & Sons, an antiquarian bookbindery, written with a bench's
   patience; #3 spacing is cluster-scoped (display leading ratio-governed
   ≈1.08 for the serif's extenders — the display-block lattice exemption —
   tight single-unit gaps inside a cluster, the air between sections);
   #4 no hero eyebrow — the nav brand names the product.

   Measured Cormorant/Lora values carry verbatim from the deck template:
   optical left alignment -0.042em where caps lead a display line (the
   normal cut — this system sets no bold display), quote hang -0.340em,
   attribution hang -1.104em. Numbers set tabular wherever they stand as
   figures (the system's own rule; Lora's tnum also widens word-spaces,
   so running prose keeps its text figures). */
:root {
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;

  /* — Evergarden brand override: sampled from the identity sheet & flyer —
     cream ground, forest-green ink/accent, sage · peach · rose as the
     three signature tints (the flyer's swatch strip). Overrides the
     system's gold-mono palette; structure/spacing/type stay Classical. */
  --color-bg: #fff5e3;
  --color-surface: #f7ecd6;
  --color-text: #1c3322;
  --color-accent: #3d6b3f;
  --color-accent-2: #3d6b3f;
  --color-divider: color-mix(in srgb, #1c3322 18%, transparent);

  --color-neutral-100: #fdf8ef;
  --color-neutral-200: #f3ecdd;
  --color-neutral-300: #e4d9c2;
  --color-neutral-400: #c9bb9c;
  --color-neutral-500: #a79877;
  --color-neutral-600: #8a7c5d;
  --color-neutral-700: #6b5f47;
  --color-neutral-800: #4a4132;
  --color-neutral-900: #2e281d;

  --color-accent-100: #eaf1e8;
  --color-accent-200: #cfe0cb;
  --color-accent-300: #98c494;
  --color-accent-400: #7aab73;
  --color-accent-500: #4c8347;
  --color-accent-600: #3d6b3f;
  --color-accent-700: #2c4f2e;
  --color-accent-800: #203f28;
  --color-accent-900: #142819;

  --color-accent-2-100: #eaf1e8;
  --color-accent-2-200: #cfe0cb;
  --color-accent-2-300: #98c494;
  --color-accent-2-400: #7aab73;
  --color-accent-2-500: #4c8347;
  --color-accent-2-600: #3d6b3f;
  --color-accent-2-700: #2c4f2e;
  --color-accent-2-800: #203f28;
  --color-accent-2-900: #142819;

  --sage: #98c494;
  --peach: #fc997e;
  --rose: #e5769e;
  --peach-deep: #b1502f;
  --rose-deep: #a13d64;
  --sage-deep: #2f5a34;
  --color-cta: var(--peach);
  --color-cta-hover: #f3835f;
  --color-cta-active: #e17148;
  --color-cta-ink: #23301d;
}

/* the brand's own buttons are a solid fill, not the system's stroke-only
   voice — carried here as the one deliberate brand departure. Primary
   actions take the flyer's peach highlight so the CTA reads at a glance.
   Both real CTAs (hero "See our services", footer "Call…") share one
   large, centered, shadowed treatment — no more per-instance padding. */
.btn-primary {
  background: var(--color-cta); border-color: var(--color-cta); color: var(--color-cta-ink);
  font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.01em;
  font-size: 21px; text-transform: none; justify-content: center;
  padding: 20px calc(var(--space-3) * 1.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn-primary:hover { background: var(--color-cta-hover); border-color: var(--color-cta-hover); }
.btn-primary:active { background: var(--color-cta-active); border-color: var(--color-cta-active); }
.nav a.btn-primary, .nav a.btn-primary:hover, .nav a.btn-primary:active { color: var(--color-cta-ink); }
.btn-ghost { color: var(--color-accent-800); }
.hero .btn-ghost, .close-band .btn-ghost { color: var(--color-bg); border-color: color-mix(in srgb, var(--color-bg) 55%, transparent); }
.hero .btn-ghost:hover, .close-band .btn-ghost:hover { background: color-mix(in srgb, var(--color-bg) 14%, transparent); }

.brand-bar { height: 6px; display: flex; }
.brand-bar span { flex: 1; }

.nav-mark { display: inline-flex; align-items: center; margin-right: auto; }
.nav-mark img { height: 48px; width: auto; display: block; }

.skip-link { position: absolute; left: 8px; top: -48px; z-index: 100;
  background: var(--color-bg); color: var(--color-text); padding: 10px 16px;
  border-radius: var(--radius-md); font-size: 14px; text-decoration: none;
  transition: top 0.15s ease; }
.skip-link:focus { top: 8px; }
a:hover { color: var(--color-accent-800); text-decoration-thickness: 2px; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
/* the component demo pads the masthead with its own spacing; on the page the
   masthead's contents take the page gutter and sit on the wrap's text axis
   (padding-only — full-width paint such as a masthead rule is untouched) */
.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); display: flex; align-items: center; flex-wrap: wrap; }
.nav a { white-space: nowrap; padding: 20px; font-size: 19px; }
.nav a.btn { font-size: 18px; }
.row .btn, a.btn { white-space: nowrap; }
.nav a[aria-current='location'] { color: var(--color-accent-800); } /* in-page anchor, not
   a page link — 'location' is the truthful value; carry the component's active ink */
.nav-toggle { display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; margin-left: auto;
  background: none; border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  color: var(--color-text); cursor: pointer; }
.nav-toggle:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.nav-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.nav-mobile-menu { display: none; flex-direction: column; padding: 0 var(--edge) var(--half); }
.nav-mobile-menu a { padding: 14px 0; border-top: 1px solid var(--color-divider); }
.nav-mobile-menu a:first-child { border-top: none; }

@media (max-width: 480px) {
  .nav a:not(.nav-mark a) { display: none; } /* phone width: the nav
     keeps brand + the toggle; links move into .nav-mobile-menu below */
  .nav-mark img { height: 36px; }
  .nav-toggle { display: inline-flex; }
  .nav-mobile-menu[data-open] { display: flex; }
}
@media (max-width: 360px) {
  .nav { padding-inline: var(--edge); }
}

/* — hairline seams (the system's structure: 1px rules in the divider token,
   solid and full-width — this system's rules do not fade) — */
.rule { height: 1px; border: 0; margin: 0; background: var(--color-divider); }

/* — kicker (small caps voice; one class, two color variants). The rose
   tint is the default for the cream/light sections; `.on-dark` lightens it
   for the two brand-green bands (hero, footer) — same type, same spacing,
   only the ink changes for contrast. */
.kicker {
  display: block; font-size: 18px; line-height: var(--half);
  letter-spacing: 0.14em; text-transform: uppercase;
  font-family: var(--font-heading); font-weight: 700;
  color: #A13D64;
  font-feature-settings: "tnum" 1;
  margin: 0 0 var(--half);
}
.kicker.on-dark { color: #DA88A8; }

/* — hero band: full-bleed brand green, content pinned to the page grid.
   The photo is a real <image-slot> (not a pseudo-element) so it stays
   selectable/replaceable from the edit menu like any other photo; the
   grade/blur live on the slot itself, the dark tint on a sibling overlay. */
.hero-band { background: var(--color-accent-800); position: relative; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg image-slot { width: 100%; height: 100%; display: block; filter: saturate(1.6) contrast(0.82) brightness(1.15) blur(2.5px); }
.hero-overlay { position: absolute; inset: 0; z-index: 0; background: rgba(20, 40, 25, 0.6); pointer-events: none; }
.hero-band h1, .hero-band .sub, .hero-band .kicker, .hero-band .hero-note {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.65);
}
.hero-note {
  display: block; font-family: Arial, Helvetica, sans-serif;
  font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #D7C57D;
  margin: 36px 0;
}

/* — hero — */
.hero { padding-block: calc(3.5 * var(--leading)); position: relative; z-index: 1; }
.hero .display { color: var(--color-bg); }
.hero .sub { color: color-mix(in srgb, var(--color-bg) 84%, transparent); }
.display {
  font-family: var(--font-heading); font-weight: 400; /* the normal cut — this
     system retires bold from display sizes */
  font-size: clamp(46px, 6.6vw, 92px);
  line-height: clamp(49.5px, 7.13vw, 99.5px); /* law #3: ratio-governed ≈1.08 —
     the serif's extenders; the display-block lattice exemption */
  letter-spacing: -0.01em; margin: 0;
  margin-left: -0.042em; /* optical left alignment — the deck's measured value for the 400 */
  text-box: trim-both cap alphabetic;
}
.display .line { display: block; } /* law #1 */
.hero .sub { font-size: 17px; line-height: var(--leading); max-width: 72ch;
  margin: calc(1.75 * var(--leading) - 1cap) 0 0; /* a quarter-step more than the
     sibling systems' 1.5 — Cormorant's 400-weight descenders reach ~0.28em
     below the display's trimmed baseline (vs ~0.2em for the sans systems),
     so the shared value left the extenders ~5px off the sub's caps;
     re-derived per face, as the deck's junction values are */
  text-box: trim-both cap alphabetic; }
.hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }

/* — the bench's columns (the deck's column grammar: JUSTIFIED Lora with
   real hyphenation, parted by vertical hairlines at the gutter centers,
   each side of a drawn column rule keeping a full unit of air) — */
.features { padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.features-intro { font-size: 15.5px; line-height: var(--leading); max-width: 68ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--half)) 0 0; text-box: trim-both cap alphabetic; }
.addons-band { padding: calc(1.25 * var(--leading)) 0; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.addons-band p { font-size: 15.5px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.addons-band strong { color: var(--color-text); font-weight: 600; }
.cols { position: relative; display: flex; flex-wrap: wrap; justify-content: center;
  --col-gap: calc(1.5 * var(--leading));
  gap: calc(1.5 * var(--leading)) var(--col-gap);
  margin-top: calc(var(--leading) - var(--half)); }
.col-group { flex: 0 1 calc((100% - 2 * var(--col-gap)) / 3); min-width: 280px; }

.col { position: relative; padding: calc(1.25 * var(--leading)) var(--half) var(--half); border-radius: var(--radius-md); background: var(--color-surface); border-top: 4px solid var(--swatch, var(--color-accent-600)); }
.col-group { display: flex; flex-direction: column; }
.col-photo { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden; }
.col-photo image-slot { width: 100%; height: 100%; display: block; }
.col-group .col { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.col-group:nth-child(1) .col { --swatch: var(--sage); }
.col-group:nth-child(2) .col { --swatch: var(--peach); }
.col-group:nth-child(3) .col { --swatch: var(--rose); }
.col-group:nth-child(4) .col { --swatch: var(--sage); }
.col-group:nth-child(5) .col { --swatch: var(--peach); }
.col-title { display: flex; align-items: center; gap: calc(var(--half) * 0.7); margin: 0 0 calc(var(--half) * 0.85); }
.col-icon { display: block; width: 40px; height: 40px; flex: none; color: var(--swatch-ink, var(--swatch)); }
.col-icon svg { width: 100%; height: 100%; overflow: visible; }
.col-group:nth-child(1) .col { --swatch-ink: var(--sage-deep); }
.col-group:nth-child(2) .col { --swatch-ink: var(--peach-deep); }
.col-group:nth-child(3) .col { --swatch-ink: var(--rose-deep); }
.col-group:nth-child(4) .col { --swatch-ink: var(--sage-deep); }
.col-group:nth-child(5) .col { --swatch-ink: var(--peach-deep); }
.col h3 { font-family: var(--font-heading); font-weight: 600;
  font-size: 32px; line-height: calc(1.15 * var(--leading)); letter-spacing: -0.005em;
  margin: 0; text-box: trim-both cap alphabetic; }
.col p { font-size: 15.5px; line-height: var(--leading); margin: calc(var(--leading) - 1cap) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  text-align: justify; hyphens: auto; hyphenate-limit-chars: 6 3 3;
  text-box: trim-both cap alphabetic; }

/* — imagery split (the plate: matted, archival, a photograph ON the page —
   the wrapper carries the grade and the mat; the portrait plate box pins
   the bundled asset's 1093×1600 ratio so swaps cover-crop into it) — */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center;
  padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading)); }
.split-title { font-family: var(--font-heading); font-weight: 600;
  font-size: 46px; line-height: calc(1.3 * var(--leading)); letter-spacing: -0.008em;
  margin: 0; text-box: trim-both cap alphabetic; }
.note + .split-title { margin-top: var(--leading); }
.note + .kicker { margin-top: calc(1.5 * var(--leading)); }
.split-copy .note { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 48ch;
  text-align: justify; hyphens: auto; hyphenate-limit-chars: 6 3 3;
  text-box: trim-both cap alphabetic; }
.split-figure { margin: 0; width: min(420px, 100%); justify-self: end; } /* explicit
   width: the slot sizes from the figure, so the figure cannot size from the
   slot — max-width alone collapses the pair to the mat's border */
.split-figure image-slot { width: 100%; aspect-ratio: 1093 / 1600; }
.split.mirror { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split.mirror .split-figure { order: -1; justify-self: start; width: min(360px, 100%); }
.split-figure img { width: 100%; display: block; }

/* — close (paper stays paper; a hairline parts the close from the page,
   and the buttons keep the system's outlined voice — gold as stroke) — */
.close-band { background: var(--color-accent-100); }
.close-band .btn-ghost { color: var(--color-bg); border-color: color-mix(in srgb, var(--color-bg) 55%, transparent); }
.close-band .btn-ghost:hover { background: color-mix(in srgb, var(--color-bg) 14%, transparent); }
.close { padding: calc(2.5 * var(--leading)) 0 calc(2 * var(--leading)); }
.close h3 { font-family: var(--font-heading); font-weight: 600;
  font-size: 36px; line-height: calc(1.2 * var(--leading)); margin: 0; text-box: trim-both cap alphabetic; }
.close .sub { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: var(--measure); text-box: trim-both cap alphabetic; }
.copyright { padding: calc(2 * var(--leading)) 0; font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.footer-link { color: #FEF6E3; text-decoration: underline; }
.footer-link:hover { color: #D7C57D; }

.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--half) var(--leading);
  padding: var(--half) var(--edge);
  background: var(--color-bg); border-top: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md); }
.cookie-bar p { margin: 0; font-size: 14px; line-height: var(--leading);
  max-width: 68ch; color: color-mix(in srgb, var(--color-text) 88%, transparent); }
.cookie-bar-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cookie-bar .btn { min-height: 44px; }

.legal-wrap { max-width: 72ch; margin: 0 auto; padding: calc(2.5 * var(--leading)) var(--edge) calc(3 * var(--leading)); }
.legal-wrap h1 { font-family: var(--font-heading); font-weight: 600; font-size: clamp(34px, 4.4vw, 48px); margin: 0 0 8px; text-box: trim-both cap alphabetic; }
.legal-wrap .updated { font-size: 14px; color: color-mix(in srgb, var(--color-text) 70%, transparent); margin: 0 0 var(--leading); }
.legal-wrap h2 { font-family: var(--font-heading); font-weight: 600; font-size: 24px; margin: var(--leading) 0 var(--half); text-box: trim-both cap alphabetic; }
.legal-wrap p { font-size: 15.5px; line-height: var(--leading); margin: 0 0 var(--half);
  color: color-mix(in srgb, var(--color-text) 88%, transparent); text-align: justify; hyphens: auto; }

/* — responsive collapse — */
@media (max-width: 1108px) {
  /* three justified columns fall under ~30ch here (the wider column gutters
     carrying the drawn rules eat the measure sooner than broadsheet's) and
     the word spaces open into rivers — the deck's own column rule warns that
     below ~30ch the justification gaps — so stack them while the measure
     still reads */
  .cols { flex-direction: column; }
  .col-group { flex-basis: auto; width: 100%; max-width: 62ch; } /* a single stacked column would otherwise run the
     full wrap (~90ch) — hold the justified measure in the readable range */
}

@media (max-width: 720px) {
  .hero { padding-top: calc(2.5 * var(--leading)); }
  .split, .split.mirror { grid-template-columns: 1fr; }
  .split-figure, .split.mirror .split-figure { order: -1; justify-self: stretch; width: 100%; max-width: 420px; margin-inline: auto; }
}

/* Review aid: the 28px rhythm drawn as hairlines — debug chrome, toggled by
   ?baselines or the B key, never part of the look. */
body[data-baselines] { position: relative; }
body[data-baselines]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--color-accent) 35%, transparent) 0 1px,
      transparent 1px var(--leading)),
    repeating-linear-gradient(to bottom,
      transparent 0 var(--half),
      color-mix(in srgb, var(--color-accent) 16%, transparent) var(--half) calc(var(--half) + 1px),
      transparent calc(var(--half) + 1px) var(--leading));
}