/* ================= Tokens ================= */
:root {
  /* Dark chrome — the near-black the momiji emerges from */
  --ground: #15120E;
  --ground-deep: #0E0C09;

  /* Light content surface — a warm parchment, alternating with a deeper
     oatmeal band so consecutive sections read as distinct, the way a
     printed page alternates paper stocks rather than ruling everything
     off with lines. Both sit at roughly the same hue angle as --ground
     (~35-40°, the same warm orange-brown family as the charcoal, ember
     and amber) rather than the paler, pinker cream this replaced — so the
     light sections read as the same warm material, just lighter. */
  --surface: #F8F3EA;
  --surface-alt: #F1E6D3;
  --ink: #3A2B31;
  --ink-dim: #6E5C64;

  /* One accent family, used everywhere — the photograph's ember and amber,
     never a second colour introduced just for the light sections. */
  --ember: #C1401C;
  --amber: #D98F2B;

  --cream: #F6F0E4;
  --cream-dim: rgba(246, 240, 228, 0.72);
  --cream-faint: rgba(246, 240, 228, 0.52);

  /* Contextual roles — re-pointed inside .content, so every component
     below adapts to the light region without a single override selector. */
  --fg: var(--cream);
  --fg-dim: var(--cream-dim);
  --accent: var(--amber);
  --btn-bg: var(--ember);
  --btn-bg-hover: #A5340F;
  --rule: rgba(246, 240, 228, 0.13);
  --btn-line: rgba(246, 240, 228, 0.28);
  --field-bg: rgba(246, 240, 228, 0.05);

  /* Type scale, 1.25 ratio. Cormorant runs small and light, so the
     display steps sit a touch larger than the ratio alone would give. */
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: clamp(1.65rem, 2.6vw, 2.2rem);
  --step-3: clamp(2.25rem, 3.8vw, 3.1rem);
  --step-4: clamp(2.75rem, 6vw, 4.5rem);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Mulish', system-ui, -apple-system, sans-serif;
  --container: 1140px;
  --gutter: 28px;
  --header-h: 74px;

  /* Maple-leaf silhouette, used as a CSS mask so it always renders in the
     current colour. Inlined as a data URI rather than a linked .svg file —
     an external mask source is unreliable when the page is opened directly
     via file://, which is how this site gets previewed. */
  --leaf-src: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-76%20-106%20153%20156%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M%20-11.57%204.68%20L%20-15.23%203.61%20L%20-17.19%203.55%20L%20-20.45%203.38%20L%20-22.28%203.97%20L%20-25.45%204.29%20L%20-27.16%205.45%20L%20-30.23%206.30%20L%20-31.80%207.93%20L%20-34.75%209.23%20L%20-36.17%2011.16%20L%20-38.99%2012.78%20L%20-40.32%2014.73%20L%20-43.06%2016.48%20L%20-44.50%2017.98%20L%20-44.50%2017.98%20L%20-42.42%2018.06%20L%20-39.24%2017.41%20L%20-36.92%2017.89%20L%20-33.77%2017.10%20L%20-31.41%2017.50%20L%20-28.39%2016.38%20L%20-26.12%2016.47%20L%20-23.33%2014.94%20L%20-21.28%2014.59%20L%20-18.78%2012.62%20L%20-17.06%2011.78%20L%20-14.83%209.39%20L%20-13.47%207.98%20L%20-11.57%204.68%20L%20-15.83%200.55%20L%20-18.30%20-5.95%20L%20-21.57%20-10.83%20L%20-23.82%20-12.84%20L%20-27.50%20-16.27%20L%20-30.24%20-17.39%20L%20-34.30%20-20.15%20L%20-37.48%20-20.47%20L%20-41.94%20-22.52%20L%20-45.42%20-22.14%20L%20-50.19%20-23.53%20L%20-53.77%20-22.67%20L%20-58.70%20-23.55%20L%20-62.21%20-22.56%20L%20-67.18%20-23.21%20L%20-70.38%20-22.87%20L%20-70.38%20-22.87%20L%20-67.99%20-20.71%20L%20-63.59%20-18.32%20L%20-61.33%20-15.46%20L%20-56.83%20-13.27%20L%20-54.43%20-10.46%20L%20-49.76%20-8.78%20L%20-47.17%20-6.43%20L%20-42.36%20-5.47%20L%20-39.59%20-3.86%20L%20-34.69%20-3.70%20L%20-31.82%20-3.00%20L%20-26.82%20-3.61%20L%20-23.82%20-3.92%20L%20-18.30%20-5.95%20L%20-19.50%20-14.70%20L%20-13.38%20-19.83%20L%20-12.85%20-27.12%20L%20-13.51%20-30.82%20L%20-14.49%20-37.00%20L%20-16.31%20-40.19%20L%20-18.18%20-46.00%20L%20-21.05%20-48.75%20L%20-23.85%20-54.16%20L%20-27.55%20-56.46%20L%20-31.16%20-61.46%20L%20-35.33%20-63.36%20L%20-39.49%20-68.00%20L%20-43.68%20-69.72%20L%20-48.05%20-74.15%20L%20-51.45%20-76.27%20L%20-51.45%20-76.27%20L%20-50.76%20-72.33%20L%20-48.28%20-66.62%20L%20-48.26%20-62.09%20L%20-45.51%20-56.50%20L%20-45.32%20-51.91%20L%20-42.03%20-46.69%20L%20-41.29%20-42.41%20L%20-37.31%20-37.78%20L%20-35.84%20-34.09%20L%20-31.15%20-30.18%20L%20-28.87%20-27.29%20L%20-23.51%20-24.07%20L%20-20.33%20-22.07%20L%20-13.38%20-19.83%20L%20-8.88%20-29.03%20L%200.00%20-26.00%20L%20-4.91%20-32.24%20L%20-6.56%20-35.98%20L%20-9.43%20-42.14%20L%20-9.73%20-46.13%20L%20-11.58%20-52.50%20L%20-10.66%20-56.72%20L%20-11.43%20-63.31%20L%20-9.49%20-67.62%20L%20-9.28%20-74.32%20L%20-6.68%20-78.57%20L%20-5.75%20-85.28%20L%20-3.01%20-89.38%20L%20-1.77%20-96.03%20L%200.00%20-100.00%20L%200.00%20-100.00%20L%201.77%20-96.03%20L%203.01%20-89.38%20L%205.75%20-85.28%20L%206.68%20-78.57%20L%209.28%20-74.32%20L%209.49%20-67.62%20L%2011.43%20-63.31%20L%2010.66%20-56.72%20L%2011.58%20-52.50%20L%209.73%20-46.13%20L%209.43%20-42.14%20L%206.56%20-35.98%20L%204.91%20-32.24%20L%200.00%20-26.00%20L%208.88%20-29.03%20L%2013.38%20-19.83%20L%2012.85%20-27.12%20L%2013.51%20-30.82%20L%2014.49%20-37.00%20L%2016.31%20-40.19%20L%2018.18%20-46.00%20L%2021.05%20-48.75%20L%2023.85%20-54.16%20L%2027.55%20-56.46%20L%2031.16%20-61.46%20L%2035.33%20-63.36%20L%2039.49%20-68.00%20L%2043.68%20-69.72%20L%2048.05%20-74.15%20L%2051.45%20-76.27%20L%2051.45%20-76.27%20L%2050.76%20-72.33%20L%2048.28%20-66.62%20L%2048.26%20-62.09%20L%2045.51%20-56.50%20L%2045.32%20-51.91%20L%2042.03%20-46.69%20L%2041.29%20-42.41%20L%2037.31%20-37.78%20L%2035.84%20-34.09%20L%2031.15%20-30.18%20L%2028.87%20-27.29%20L%2023.51%20-24.07%20L%2020.33%20-22.07%20L%2013.38%20-19.83%20L%2019.50%20-14.70%20L%2018.30%20-5.95%20L%2021.57%20-10.83%20L%2023.82%20-12.84%20L%2027.50%20-16.27%20L%2030.24%20-17.39%20L%2034.30%20-20.15%20L%2037.48%20-20.47%20L%2041.94%20-22.52%20L%2045.42%20-22.14%20L%2050.19%20-23.53%20L%2053.77%20-22.67%20L%2058.70%20-23.55%20L%2062.21%20-22.56%20L%2067.18%20-23.21%20L%2070.38%20-22.87%20L%2070.38%20-22.87%20L%2067.99%20-20.71%20L%2063.59%20-18.32%20L%2061.33%20-15.46%20L%2056.83%20-13.27%20L%2054.43%20-10.46%20L%2049.76%20-8.78%20L%2047.17%20-6.43%20L%2042.36%20-5.47%20L%2039.59%20-3.86%20L%2034.69%20-3.70%20L%2031.82%20-3.00%20L%2026.82%20-3.61%20L%2023.82%20-3.92%20L%2018.30%20-5.95%20L%2015.83%200.55%20L%2011.57%204.68%20L%2015.23%203.61%20L%2017.19%203.55%20L%2020.45%203.38%20L%2022.28%203.97%20L%2025.45%204.29%20L%2027.16%205.45%20L%2030.23%206.30%20L%2031.80%207.93%20L%2034.75%209.23%20L%2036.17%2011.16%20L%2038.99%2012.78%20L%2040.32%2014.73%20L%2043.06%2016.48%20L%2044.50%2017.98%20L%2044.50%2017.98%20L%2042.42%2018.06%20L%2039.24%2017.41%20L%2036.92%2017.89%20L%2033.77%2017.10%20L%2031.41%2017.50%20L%2028.39%2016.38%20L%2026.12%2016.47%20L%2023.33%2014.94%20L%2021.28%2014.59%20L%2018.78%2012.62%20L%2017.06%2011.78%20L%2014.83%209.39%20L%2013.47%207.98%20L%2011.57%204.68%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M%200%206%20C%201%2014%2C%202%2020%2C%200%2046%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* ================= Base ================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--fg-dim);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* Ambient warmth behind the dark chrome */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 78% 10%, rgba(217, 143, 43, 0.20), transparent 70%),
    radial-gradient(50% 40% at 90% 40%, rgba(193, 64, 28, 0.15), transparent 72%),
    radial-gradient(45% 38% at 10% 84%, rgba(92, 107, 63, 0.13), transparent 75%);
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0 0 1.15em; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--fg);
  margin: 0 0 0.5em;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); font-weight: 400; letter-spacing: 0.015em; }

/* ================= Layout ================= */
/* One shared measure. The header uses this too, so every content edge
   lines up with the navigation above it. */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* Equal top and bottom on every section. Halved from the single-sided value
   this replaced (which put all 96px on the bottom, none on top) so that two
   adjacent sections still combine to the same 96px gap between them — only
   the hero-to-content and content-to-footer edges lose a little (96 to 48),
   since there's no second section there to contribute the other half. */
.section { padding: 48px 0; }

/* ================= Light content region ================= */
/* The wrapper carries no background of its own — each direct section paints
   its own band, alternating two light tones so sections separate from each
   other without a hairline or a shift into dark chrome. Accent stays ember,
   the same colour the header, hero and footer use — one palette, not two. */
.content {
  position: relative;
  color: var(--ink-dim);

  --fg: var(--ink);
  --fg-dim: var(--ink-dim);
  --rule: rgba(58, 43, 49, 0.14);
  --btn-line: rgba(58, 43, 49, 0.28);
  --field-bg: rgba(58, 43, 49, 0.04);
}
.content > section {
  position: relative;
  background-color: var(--surface);
  background-image:
    radial-gradient(58% 42% at 84% 3%, rgba(217, 143, 43, 0.12), transparent 68%),
    radial-gradient(54% 42% at 94% 90%, rgba(92, 107, 63, 0.07), transparent 70%);
}
.content > section:nth-of-type(even) {
  background-color: var(--surface-alt);
  /* Amber + moss, same family as the odd sections above — ember (a
     saturated red-orange) used to sit here instead, which read as pink at
     low opacity over this already-warm surface rather than the intended
     warm-neutral alternation. */
  background-image:
    radial-gradient(46% 38% at 4% 40%, rgba(92, 107, 63, 0.07), transparent 72%),
    radial-gradient(54% 42% at 96% 6%, rgba(217, 143, 43, 0.08), transparent 68%);
}

/* ================= Cards ================= */
/* Flat and opaque, not glass — glass stays a signature of the dark chrome. */
.service, .contact-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 8px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--ground); }
}

/* ================= Buttons ================= */
.btn {
  display: inline-block;
  padding: 15px 36px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn--primary { background: var(--btn-bg); color: var(--cream); }
.btn--primary:hover { background: var(--btn-bg-hover); }
.btn--ghost { border-color: var(--btn-line); color: var(--fg); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
/* A solid second fill for when two actions need equal weight — the phone
   number in the CTA band, next to the primary ember button, rather than a
   lighter outline that reads as the lesser option. */
.btn--secondary { background: var(--cream); color: var(--ground); }
.btn--secondary:hover { background: var(--amber); color: var(--ground); }

.text-link {
  display: inline-block;
  margin-top: 26px;
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  padding-bottom: 3px;
  transition: border-color 0.25s ease;
}
.text-link:hover { border-bottom-color: currentColor; }

/* ================= Header ================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(21, 18, 14, 0.6);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.site-header.is-scrolled {
  background: rgba(21, 18, 14, 0.9);
  border-bottom-color: rgba(246, 240, 228, 0.13);
}
/* matches .container exactly, so the nav sits on the same 1140 measure */
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: var(--container); margin: 0 auto;
  padding: 20px var(--gutter);
  position: relative;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.5rem; letter-spacing: 0.06em; color: var(--cream);
}
/* Leaf silhouette, coloured via mask so it always matches currentColor. */
.leaf {
  display: inline-block;
  background: currentColor;
  -webkit-mask: var(--leaf-src) center / contain no-repeat;
  mask: var(--leaf-src) center / contain no-repeat;
  width: 1em; height: 1em;
  flex: none;
}

/* Header wordmark's logo — a hanko-style bordered seal around the leaf,
   with a tracked-out tagline stacked under the name. */
.logo-seal {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 2px solid var(--amber);
  color: var(--amber);
  flex: none;
}
.logo-seal .leaf { width: 22px; height: 22px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__tagline {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: rgba(246, 240, 228, 0.55);
  margin-top: 3px;
}
.site-nav ul { display: flex; gap: 34px; }
.site-nav a {
  color: rgba(246, 240, 228, 0.74);
  font-size: 0.9375rem; letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.site-nav a:hover { color: var(--cream); }
.site-nav a[aria-current="page"] { color: var(--amber); }
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px; color: var(--cream);
}
.nav-toggle span { width: 24px; height: 1.5px; background: currentColor; }

@media (max-width: 820px) {
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(21, 18, 14, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(246, 240, 228, 0.13);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height 0.3s ease, visibility 0.3s;
  }
  .site-nav.is-open { max-height: 340px; visibility: visible; }
  .site-nav ul { flex-direction: column; gap: 0; padding: 8px var(--gutter) 24px; }
  .site-nav li { padding: 13px 0; border-bottom: 1px solid rgba(246, 240, 228, 0.09); }
  .nav-toggle { display: flex; }
}

/* ================= Hero ================= */
.hero {
  position: relative;
  padding: calc(var(--header-h) + 108px) 0 116px;
  background-color: var(--ground);
  /* Two scrims over the photograph. The horizontal pass holds the words
     legible across the dark left — including its bright bokeh — then clears
     so the lit leaves keep their true colour. The vertical pass settles the
     banner into the page below. */
  background-image:
    linear-gradient(
      180deg,
      transparent 58%,
      rgba(21, 18, 14, 0.72) 87%,
      var(--ground) 100%
    ),
    linear-gradient(
      90deg,
      rgba(21, 18, 14, 0.84) 0%,
      rgba(21, 18, 14, 0.78) 44%,
      rgba(21, 18, 14, 0.44) 63%,
      rgba(21, 18, 14, 0.14) 83%,
      rgba(21, 18, 14, 0.06) 100%
    ),
    url("../assets/NS_HOMEPAGEBANNER_v2.4.jpg");
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}
.hero__inner { position: relative; }
.hero h1 { font-size: var(--step-4); max-width: 15ch; margin-bottom: 0.4em; }
.hero__lede { font-size: 1.1875rem; font-weight: 300; max-width: 40ch; margin-bottom: 2.2em; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Narrow viewports crop to almost pure leaf, so the scrim carries the whole
   legibility burden and the composition reads as texture rather than subject. */
@media (max-width: 900px) {
  .hero {
    padding: calc(var(--header-h) + 68px) 0 84px;
    background-image:
      linear-gradient(
        180deg,
        rgba(21, 18, 14, 0.86) 0%,
        rgba(21, 18, 14, 0.82) 60%,
        rgba(21, 18, 14, 0.88) 88%,
        var(--ground) 100%
      ),
      url("../assets/NS_HOMEPAGEBANNER_v2.4.jpg");
    background-position: 84% center;
  }
}

/* ================= Title band (inner pages) ================= */
.title-band { padding: calc(var(--header-h) + 80px) 0 80px; }
.title-band h1 { max-width: 22ch; }
.title-band__intro { font-size: 1.125rem; font-weight: 300; max-width: 58ch; margin-bottom: 0; }

/* ================= Imagery ================= */
/* Portrait sits alongside the reading column; both edges land on the
   container measure, so the text still starts where the nav does. */
.split {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 56px;
  align-items: start;
}
.split__media { margin: 0; }
.split__media img {
  width: 100%;
  border-radius: 14px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* holds the reading measure under 80 characters regardless of column width */
.split__body { max-width: 62ch; }
.split__body > :first-child { margin-top: 0; }
.split__body p { line-height: 1.85; }

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split__media img { aspect-ratio: 3 / 2; }
}

/* A short framing line under a heading, ahead of a plain list or similar
   lightweight content — explains what the list means rather than leaving
   it to decorate on its own. */
.section-lede {
  font-size: 1.125rem;
  font-weight: 300;
  max-width: 58ch;
}

/* ================= Process (services) ================= */
/* A genuine 3-step sequence — numbering earns its place here, unlike a
   plain menu of options. Vertical hairlines between steps on wider screens
   stand in for the photograph this section used to lean on. */
.process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 40px;
}
.process__step {
  padding-left: 28px;
  border-left: 1px solid var(--rule);
}
.process__step:first-child { border-left: none; padding-left: 0; }
.process__n {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.6em;
}
.process__step h3 { margin-bottom: 0.4em; }
.process__step p { margin: 0; color: var(--fg-dim); font-size: 0.9375rem; }

@media (max-width: 720px) {
  .process { grid-template-columns: 1fr; gap: 28px; }
  .process__step { border-left: none; padding-left: 0; padding-top: 24px; border-top: 1px solid var(--rule); }
  .process__step:first-child { border-top: none; padding-top: 0; }
}

/* ================= Offer slider (home) ================= */
/* A native scroll-snap carousel, not a JS library — matches the rest of
   this site's hand-rolled approach. The arrow buttons are a discoverable
   affordance on top of native touch/trackpad scrolling, and they're also
   what makes this keyboard-operable: the cards hold no interactive content,
   so Tab goes straight to the buttons rather than getting lost inside. */
.offer-slider { margin-top: 8px; }
.offer-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* The arrow buttons are the intended affordance — a native scrollbar on
     top of them is a second, redundant control. Hidden here, not removed:
     touch/trackpad scrolling and the buttons' scrollBy() both still work. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.offer-track::-webkit-scrollbar { display: none; }
.offer-card {
  flex: 0 0 auto;
  /* Exactly 3 cards per screenful above 820px (the track's own width minus
     two 20px gaps, split three ways); below that, one full card plus a peek
     of the next, which reads better once there's no room for three. */
  width: min(240px, 78vw);
  scroll-snap-align: start;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 28px 24px;
}
@media (min-width: 820px) {
  .offer-card { width: calc((100% - 40px) / 3); }
}
.offer-card__icon { width: 30px; height: 30px; color: var(--accent); margin-bottom: 18px; }
.offer-card h3 { font-size: var(--step-1); margin-bottom: 0.4em; }
.offer-card p { font-size: 0.9375rem; color: var(--fg-dim); margin: 0; }

.offer-nav { display: flex; gap: 10px; margin-top: 20px; }
.offer-nav__btn {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--btn-line);
  background: none;
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.offer-nav__btn:hover:not(:disabled),
.offer-nav__btn:focus-visible { border-color: var(--accent); color: var(--accent); }
.offer-nav__btn:disabled { opacity: 0.45; cursor: default; }
.offer-nav__btn::before {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}
.offer-nav__btn--prev::before { transform: translateX(2px) rotate(135deg); }
.offer-nav__btn--next::before { transform: translateX(-2px) rotate(-45deg); }

/* ================= Disclosure (click-to-reveal) ================= */
/* Used by the home page's philosophy-tenet preview. The modality list next
   to it uses the offer-slider above instead — two different mechanisms on
   purpose, so the two sections don't read as the same toggle used twice.
   A single column, not a wrapping row: open/closed items sit at different
   heights, which looks ragged side by side but reads fine stacked. */
.disclosure-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
  margin: 24px auto 0;
  text-align: left;
}
.disclosure {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0 20px;
}
.disclosure__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  color: var(--fg);
  text-align: left;
  transition: color 0.2s ease;
}
.disclosure__toggle:hover,
.disclosure__toggle:focus-visible { color: var(--accent); }
.disclosure__icon {
  position: relative;
  flex: none;
  width: 16px; height: 16px;
  color: var(--accent);
}
.disclosure__icon::before,
.disclosure__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.disclosure__icon::before { width: 14px; height: 1.5px; }
.disclosure__icon::after {
  width: 1.5px; height: 14px;
  transition: transform 0.25s ease;
}
.disclosure__toggle[aria-expanded="true"] .disclosure__icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}
.disclosure__panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  color: var(--fg-dim);
  font-size: 0.9375rem;
  line-height: 1.7;
  transition: max-height 0.3s ease, opacity 0.25s ease, padding-bottom 0.3s ease;
}
.disclosure.is-open .disclosure__panel {
  max-height: 8rem;
  opacity: 1;
  padding-bottom: 20px;
}

/* ================= Service panels ================= */
.service-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 20px;
}
.service { padding: 36px 32px; }
.service__icon { width: 32px; height: 32px; color: var(--accent); margin-bottom: 24px; }
.service h3 { margin-bottom: 0.5em; }
.service p { font-size: 0.9875rem; margin: 0; }

/* ================= Tenets (philosophy) ================= */
/* Sits flush in the container so each line starts on the 1140 measure. */
.tenet {
  display: grid; grid-template-columns: auto 1fr;
  gap: 32px; align-items: start;
  padding: 40px 0;
  border-bottom: 1px solid var(--rule);
}
.tenet:first-child { padding-top: 0; }
.tenet:last-child { padding-bottom: 0; border-bottom: none; }
.tenet__n {
  font-family: var(--font-display); font-weight: 300;
  font-size: 2.5rem; line-height: 1;
  color: var(--accent);
}
.tenet h2 { font-size: var(--step-1); font-weight: 400; margin-bottom: 0.5em; }
.tenet p { margin: 0; max-width: 66ch; }

@media (max-width: 620px) {
  .tenet { grid-template-columns: 1fr; gap: 12px; }
}

/* ================= Pull quote ================= */
.pull-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--fg);
  max-width: 26ch;
  margin: 44px 0;
  padding-left: 28px;
  border-left: 1px solid var(--accent);
}

/* ================= Wellness (home) ================= */
/* One centered column: heading, intro paragraph and closing link all
   centered, the tenet list too (as a block) — but its own text stays
   left-aligned, since centering button labels and paragraph copy reads
   oddly once you're actually reading them rather than just looking at
   the section. */
.wellness { text-align: center; }
.wellness .section-lede { margin: 20px auto 0; }

/* ================= CTA band ================= */
/* Dark chrome, not a light tinted card — the same material as the header,
   hero and footer — so the site's single most important action reads as a
   deliberate, weighted stop rather than another pastel section blending
   into the ones around it. Message and actions sit side by side rather
   than a centered stack. */
.cta-band {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 48px;
  border-radius: 8px;
  background-color: var(--ground);
  background-image: radial-gradient(60% 90% at 85% 20%, rgba(217, 143, 43, 0.18), transparent 70%);
  color: var(--cream-dim);

  --fg: var(--cream);
  --fg-dim: var(--cream-dim);
  --btn-line: rgba(246, 240, 228, 0.35);
}
.cta-band__message { flex: 1 1 320px; max-width: 46ch; }
.cta-band__message h2 { margin-bottom: 0.3em; }
.cta-band__message p { margin: 0; }
.cta-band__actions { display: flex; gap: 14px; flex-wrap: wrap; flex: none; }

/* Matches the site's existing 820px tablet breakpoint (used by .site-nav,
   .split, .wellness-grid, .contact-grid) rather than a one-off threshold —
   a narrower cutoff here left a dead zone where the row wrapped but wasn't
   yet centered: message and actions both left-aligned, stacked, neither
   the intended side-by-side nor the intended centered layout. */
@media (max-width: 820px) {
  .cta-band { flex-direction: column; text-align: center; padding: 40px 28px; }
  .cta-band__message { max-width: none; }
  .cta-band__actions { justify-content: center; }
}

/* ================= Footer — recedes ================= */
/* Two blocks (mark + brand / contact + nav) side by side, with a full-width
   fine-print row breaking onto its own line beneath a hairline. */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--ground-deep);
  border-top: 1px solid rgba(246, 240, 228, 0.13);
  padding: 60px 0 32px;
  color: var(--cream-dim);
}
/* A single large leaf, mostly invisible, bleeding off the corner — the same
   quiet-watermark treatment as the reference, sized down to this footer's
   shorter height. */
.site-footer::after {
  content: "";
  position: absolute;
  right: -2.5rem; bottom: -3.5rem;
  width: 16rem; height: 16rem;
  background: var(--cream);
  -webkit-mask: var(--leaf-src) center / contain no-repeat;
  mask: var(--leaf-src) center / contain no-repeat;
  opacity: 0.05;
  transform: rotate(-12deg);
  pointer-events: none;
}
.site-footer__inner {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 32px;
}
.footer-brand .logo-seal { width: 34px; height: 34px; margin-bottom: 16px; }
.footer-brand .logo-seal .leaf { width: 18px; height: 18px; }
.footer-brand__name {
  font-family: var(--font-display); font-size: 1.3rem;
  display: flex; align-items: baseline; gap: 10px; color: var(--cream);
  margin: 0 0 0.3em;
}
.footer-brand__kanji { font-size: 1rem; opacity: 0.55; }
.footer-brand__tagline { font-size: 0.85rem; letter-spacing: 0.14em; opacity: 0.65; }

.footer-details a { display: block; margin-bottom: 10px; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 14px; font-size: 0.9375rem; }
.footer-nav a:hover, .footer-details a:hover { color: var(--amber); }

.footer-copyright {
  width: 100%;
  color: var(--cream-faint); font-size: 0.85rem;
  margin: 8px 0 0;
  padding-top: 28px;
  border-top: 1px solid rgba(246, 240, 228, 0.09);
}

/* ================= Contact ================= */
.contact-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: start; }
.contact-card { padding: 42px; }
.contact-card h2 { font-size: var(--step-1); font-weight: 400; margin-bottom: 1em; }
.contact-card__line { display: block; color: var(--accent); margin-bottom: 14px; }
.form-field { margin-bottom: 22px; }
.form-field label { display: block; margin-bottom: 8px; font-size: 0.9375rem; color: var(--fg-dim); }
.form-field input, .form-field textarea {
  width: 100%; padding: 14px 16px;
  background: var(--field-bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  color: var(--fg);
  font-family: var(--font-body); font-size: 1rem;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.form-field input:hover, .form-field textarea:hover { border-color: var(--btn-line); }
.form-field input:focus, .form-field textarea:focus { border-color: var(--accent); }

@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-card { padding: 32px 26px; }
  .section { padding: 35px 0; }
}

/* ================= One orchestrated arrival ================= */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.hero h1 { animation: riseIn 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.hero__lede { animation: riseIn 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) 0.14s both; }
.hero__actions { animation: riseIn 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) 0.28s both; }

/* ================= Accessibility ================= */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}