/* ==========================================================================
   Fernwood Tree Service LLC — Swiss edition
   One grotesk (Helvetica Neue / Archivo), a 12-column grid drawn with hairlines,
   square corners, dark full-bleed photography, muted forest neutrals.
   ========================================================================== */

:root {
  --bone: #efeee8;
  --bone-2: #e5e4dc;
  --stone: #b9baaf;
  --stone-2: #d2d2c8;
  --fern: #2f4a3a;
  --fern-2: #3d5c49;
  --char: #262b26;
  --char-2: #313730;
  --ink: #1e221e;
  --ink-2: #545a52;
  --ink-3: #7b8078;
  --line: rgba(30, 34, 30, 0.22);
  --line-2: rgba(30, 34, 30, 0.11);
  --on-dark: #efeee8;
  --on-dark-2: #aeb2a8;
  --line-dark: rgba(239, 238, 232, 0.18);
  --signal: #e4572e;

  --f: "Helvetica Neue", Archivo, Helvetica, Arial, sans-serif;
  --f-cond: Archivo, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.22, 0.8, 0.2, 1);
  --wrap: 1440px;
  --pad: clamp(1.1rem, 4vw, 3.6rem);
  --sec: clamp(4.5rem, 9vw, 8rem);
  --hdr: 5.2rem;

  --z-hdr: 40;
  --z-menu: 45;
  --z-float: 30;
  --z-dialog: 60;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--hdr); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--f);
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: -0.004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.8rem 1rem; background: var(--char); color: var(--on-dark); text-decoration: none; }
.skip:focus { top: 1rem; }
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* ---------- type ---------- */

.display {
  margin: 0;
  font-weight: 500;
  font-size: clamp(2.5rem, 5.2vw, 4.9rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.display--md { font-size: clamp(2.2rem, 4.2vw, 3.8rem); }
.title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(2rem, 3.7vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.title--sm { font-size: clamp(1.6rem, 2.6vw, 2.35rem); letter-spacing: -0.03em; }
.h3 { margin: 0; font-weight: 500; font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.15; letter-spacing: -0.025em; }

.eyebrow, .label {
  display: inline-block;
  margin: 0 0 1.4rem;
  font-family: var(--f-cond);
  font-stretch: 75%;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow::before { content: "[ "; }
.eyebrow::after { content: " ]"; }
.num {
  font-family: var(--f-cond);
  font-stretch: 75%;
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

.lede { margin: 1.3rem 0 0; max-width: 46ch; font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.5; color: var(--ink-2); }
.prose p { max-width: 60ch; margin: 0 0 0.9rem; color: var(--ink-2); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 500; }

/* ---------- buttons: label block + separate arrow cell ---------- */

.btn {
  --b-bg: var(--stone);
  --b-fg: var(--ink);
  display: inline-flex;
  gap: 2px;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: none;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  touch-action: manipulation;
}
.btn__label {
  display: flex;
  align-items: flex-end;
  min-height: 3.1rem;
  min-width: 10.5rem;
  padding: 0.6rem 1.9rem 0.55rem 0.8rem;
  background: var(--b-bg);
  color: var(--b-fg);
  transition: background-color 0.35s var(--ease);
}
.btn__ic {
  display: grid;
  place-items: center;
  width: 2.3rem;
  flex: none;
  background: var(--b-bg);
  color: var(--b-fg);
  transition: background-color 0.35s var(--ease);
}
.btn__ic svg { width: 0.95rem; height: 0.95rem; transition: transform 0.45s var(--ease); }
.btn:hover .btn__ic svg { transform: translate(2px, -2px); }
.btn:active { transform: translateY(1px); }
.btn:hover .btn__label, .btn:hover .btn__ic { background: color-mix(in srgb, var(--b-bg) 88%, #000); }
.btn--fern { --b-bg: var(--fern); --b-fg: var(--on-dark); }
.btn--fern:hover .btn__label, .btn--fern:hover .btn__ic { background: var(--fern-2); }
.btn--light { --b-bg: var(--bone); --b-fg: var(--ink); }
.btn--line { --b-bg: transparent; --b-fg: var(--on-dark); }
.btn--line .btn__label, .btn--line .btn__ic { box-shadow: inset 0 0 0 1px var(--line-dark); }
.btn--line:hover .btn__label, .btn--line:hover .btn__ic { background: rgba(239, 238, 232, 0.08); }
.btn--ghost { --b-bg: transparent; --b-fg: var(--ink); }
.btn--ghost .btn__label, .btn--ghost .btn__ic { box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover .btn__label, .btn--ghost:hover .btn__ic { background: rgba(30, 34, 30, 0.05); }
.btn--wide { display: flex; }
.btn--wide .btn__label { flex: 1; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.2rem;
  transition: border-color 0.3s var(--ease);
}
.link-arrow svg { width: 0.9rem; height: 0.9rem; transition: transform 0.4s var(--ease); }
.link-arrow:hover { border-color: var(--ink); }
.link-arrow:hover svg { transform: translateX(3px); }

/* legacy containers flattened: square, no shadow */
.bezel { padding: 0; }
.bezel__core { position: relative; overflow: hidden; background: var(--bone); }
.media { position: relative; overflow: hidden; background: var(--stone-2); }
.media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- header ---------- */

.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-hdr);
  height: var(--hdr);
  color: var(--on-dark);
  transition: background-color 0.45s var(--ease), color 0.3s var(--ease);
}
.hdr.is-solid { background: rgba(38, 43, 38, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hdr.is-menu { background: transparent; color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; color: inherit; text-decoration: none; }
.brand__mark { width: 2.1rem; height: auto; }
.brand__word { font-weight: 450; font-size: 1.75rem; letter-spacing: -0.05em; line-height: 1; }
.hdr__actions { display: flex; align-items: stretch; gap: 0.9rem; }
.hdr__phone { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 0.4rem; color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.hdr__phone svg { width: 1rem; height: 1rem; }
.hdr .btn__label { min-height: 3.1rem; min-width: 9.5rem; }
.burger {
  position: relative;
  width: 3.4rem;
  height: 3.2rem;
  border: 0;
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.burger span { position: absolute; left: 50%; top: 50%; width: 1.35rem; height: 1.5px; margin-left: -0.675rem; background: currentColor; transition: transform 0.45s var(--ease), opacity 0.3s var(--ease); }
.burger span:nth-child(1) { transform: translateY(-5px); }
.burger span:nth-child(3) { transform: translateY(5px); }
.burger[aria-expanded="true"] { background: var(--char); color: var(--on-dark); box-shadow: none; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

/* full-screen menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(var(--hdr) + 2rem) var(--pad) 2rem;
  background: var(--bone);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
  overflow-y: auto;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity 0.45s var(--ease), visibility 0s; }
.menu__list { list-style: none; margin: 0; padding: 0; display: grid; align-content: center; justify-items: center; gap: 0.2rem; }
.menu__list a {
  display: block;
  font-weight: 500;
  font-size: clamp(2.2rem, 6.2vw, 4.4rem);
  line-height: 1.12;
  letter-spacing: -0.045em;
  text-decoration: none;
  color: var(--stone);
  transition: color 0.3s var(--ease);
}
.menu__list a:hover, .menu__list a[aria-current="page"] { color: var(--ink); }
.menu__list li { opacity: 0; transform: translateY(1.4rem); transition: opacity 0.45s var(--ease), transform 0.6s var(--ease); }
.menu.is-open .menu__list li { opacity: 1; transform: none; }
.menu.is-open .menu__list li:nth-child(1) { transition-delay: 0.05s; }
.menu.is-open .menu__list li:nth-child(2) { transition-delay: 0.09s; }
.menu.is-open .menu__list li:nth-child(3) { transition-delay: 0.13s; }
.menu.is-open .menu__list li:nth-child(4) { transition-delay: 0.17s; }
.menu.is-open .menu__list li:nth-child(5) { transition-delay: 0.21s; }
.menu.is-open .menu__list li:nth-child(6) { transition-delay: 0.25s; }
.menu.is-open .menu__list li:nth-child(7) { transition-delay: 0.29s; }
.menu.is-open .menu__list li:nth-child(8) { transition-delay: 0.33s; }
.menu.is-open .menu__list li:nth-child(9) { transition-delay: 0.37s; }
.menu__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2rem; padding-top: 2rem; font-size: 0.95rem; color: var(--ink-2); }
.menu__foot a { color: var(--ink); }

/* floating estimate button */
.float-cta {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  background: var(--fern);
  color: var(--on-dark);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45);
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.float-cta svg { width: 1rem; height: 1rem; }
.float-cta:hover { background: var(--fern-2); }
.float-cta.is-away { transform: translateY(160%); visibility: hidden; transition: transform 0.3s var(--ease), visibility 0s linear 0.3s; }

/* ---------- reveal ---------- */

.js .reveal { opacity: 0; transform: translateY(1.6rem); transition: opacity 0.9s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- sections ---------- */

.section { padding-block: var(--sec); }
.section--tight { padding-block: calc(var(--sec) * 0.6); }
.section--alt { background: var(--bone-2); }
.section--stone { background: var(--stone); }
.section--deep, .section--char { background: var(--char); color: var(--on-dark); }
.section--deep .title, .section--deep .h3, .section--deep .display { color: var(--on-dark); }
.section--deep .eyebrow, .section--deep .label { color: var(--on-dark-2); }
.section--deep .lede, .section--deep .prose p { color: var(--on-dark-2); }
.rule-top { border-top: 1px solid var(--line); }

.sec-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.2rem var(--pad);
  align-items: end;
  margin-bottom: clamp(2.4rem, 5vw, 4.2rem);
}
.sec-head > :first-child { grid-column: 1 / span 7; }
.sec-head > :nth-child(2) { grid-column: 9 / -1; }
.sec-head .lede { margin-top: 0; }

/* the hairline column guides that sit over dark photography */
.guides { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.guides .wrap {
  height: 100%;
  background:
    linear-gradient(var(--line-dark), var(--line-dark)) left top / 1px 100% no-repeat,
    linear-gradient(var(--line-dark), var(--line-dark)) 33.333% top / 1px 100% no-repeat,
    linear-gradient(var(--line-dark), var(--line-dark)) 66.666% top / 1px 100% no-repeat,
    linear-gradient(var(--line-dark), var(--line-dark)) right top / 1px 100% no-repeat;
  background-origin: content-box;
  background-clip: content-box;
}

/* ---------- home hero ---------- */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  color: var(--on-dark);
  background: var(--char);
  isolation: isolate;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 24, 20, 0.62) 0%, rgba(20, 24, 20, 0.38) 40%, rgba(20, 24, 20, 0.72) 100%); }
.hero__in {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1fr auto auto;
  padding-top: calc(var(--hdr) + 2rem);
  padding-bottom: clamp(1.5rem, 4vh, 2.6rem);
}
.hero__title { grid-column: 1 / span 2; grid-row: 2; align-self: end; }
.hero .display { color: var(--on-dark); font-size: clamp(2.6rem, 5vw, 4.7rem); max-width: none; }
.hero__lede { grid-column: 3; grid-row: 2; align-self: end; padding-left: 1.2rem; margin: 0 0 0.6rem; font-size: 0.98rem; line-height: 1.5; color: rgba(239, 238, 232, 0.86); max-width: 34ch; }
.hero__foot { grid-column: 1 / -1; grid-row: 3; display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-top: clamp(2.5rem, 8vh, 6rem); }
.hero__meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1.6rem; font-size: 0.85rem; color: var(--on-dark-2); }
.hero__meta a { color: var(--on-dark); text-decoration: none; }

/* slide card, bottom right of the hero */
.slide-card {
  display: grid;
  grid-template-columns: 9rem 1fr 2.8rem;
  width: min(22.5rem, 100%);
  background: var(--stone);
  color: var(--ink);
}
.slide-card__img { margin: 0.9rem; margin-right: 0; aspect-ratio: 16 / 10.5; overflow: hidden; background: var(--stone-2); }
.slide-card__img img { width: 100%; height: 100%; object-fit: cover; }
.slide-card__txt { display: flex; flex-direction: column; justify-content: space-between; padding: 0.9rem 0.9rem 0.9rem 0.9rem; text-decoration: none; color: inherit; }
.slide-card__txt b { font-weight: 500; font-size: 1.45rem; letter-spacing: -0.03em; line-height: 1.05; }
.slide-card__txt span { font-size: 0.82rem; color: var(--ink-2); }
.slide-card__nav { display: grid; grid-template-rows: 1fr 1fr; border-left: 1px solid var(--line); }
.slide-card__nav button { border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.slide-card__nav button + button { border-top: 1px solid var(--line); }
.slide-card__nav button:hover { background: rgba(30, 34, 30, 0.07); }
.slide-card__nav svg { width: 0.9rem; height: 0.9rem; }
.slide-card.is-swap .slide-card__img img, .slide-card.is-swap .slide-card__txt { opacity: 0; }
.slide-card__img img, .slide-card__txt { transition: opacity 0.3s var(--ease); }

/* ---------- split: image column + ruled panel ---------- */

.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.split__media { grid-column: 1 / span 4; min-height: 26rem; position: relative; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__body { grid-column: 5 / -1; display: grid; grid-template-rows: 1fr auto; border-left: 1px solid var(--line); }
.split__top { padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 3vw, 2.4rem) clamp(3rem, 8vw, 8rem); }
.split__row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.split__row > * { padding: clamp(1.6rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2.4rem); }
.split__row > * + * { border-left: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: flex-end; }
.split__row p { margin: 0; max-width: 52ch; color: var(--ink-2); font-size: 0.95rem; }

/* ---------- featured work carousel ---------- */

.work { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); background: var(--stone); border-bottom: 1px solid var(--line); }
.work__side { grid-column: 1 / span 4; display: grid; grid-template-rows: 1fr auto auto; border-right: 1px solid var(--line); }
.work__head { padding: clamp(2.5rem, 5vw, 4rem) var(--pad) 2rem; }
.work__head p { margin: 1.4rem 0 0; font-size: 0.95rem; color: var(--ink-2); }
.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 6.4rem;
  padding: 0 var(--pad);
  border: 0;
  border-top: 1px solid rgba(30, 34, 30, 0.14);
  background: #8f8a6f;
  color: var(--on-dark);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}
.pager svg { width: 1.3rem; height: 1.3rem; transition: transform 0.4s var(--ease); }
.pager:hover { background: #7f7a60; }
.pager--next:hover svg { transform: translateX(4px); }
.pager--prev:hover svg { transform: translateX(-4px); }
.pager[disabled] { background: #a7a28a; cursor: default; color: rgba(239, 238, 232, 0.6); }
.work__track {
  grid-column: 5 / -1;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.work__track::-webkit-scrollbar { display: none; }
.work-item {
  flex: 0 0 min(24rem, 42%);
  scroll-snap-align: start;
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.6rem) clamp(2rem, 4vw, 3rem);
  text-decoration: none;
  color: var(--ink);
}
.work-item .num { display: block; }
.work-item b { display: block; margin: 1.2rem 0 1.6rem; font-weight: 400; font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-2); }
.work-item .media { aspect-ratio: 1 / 1; }
.work-item img { transition: transform 1.2s var(--ease), filter 0.6s var(--ease); filter: saturate(0.9); }
.work-item:hover img { transform: scale(1.03); filter: none; }

/* ---------- services columns ---------- */

.cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.col { padding: clamp(3rem, 7vw, 6rem) clamp(1.2rem, 2.2vw, 2rem) clamp(2.5rem, 5vw, 4rem); text-decoration: none; color: inherit; }
.col + .col { border-left: 1px solid var(--line); }
.col:nth-child(2) { padding-top: clamp(5rem, 11vw, 10rem); }
.col:nth-child(3) { padding-top: clamp(7rem, 15vw, 14rem); }
.col:nth-child(4) { padding-top: clamp(9rem, 19vw, 18rem); }
.col .num { display: block; margin-bottom: 1rem; }
.col .h3 { font-size: clamp(1.6rem, 2.4vw, 2.3rem); letter-spacing: -0.035em; }
.col .media { aspect-ratio: 16 / 7; margin: 2.2rem 0 1.6rem; }
.col img { transition: transform 1.2s var(--ease); }
.col:hover img { transform: scale(1.04); }
.col p { margin: 0 0 1.4rem; font-size: 1.05rem; line-height: 1.45; color: var(--ink-2); }
.col ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.col li { padding: 0.55rem 0; border-bottom: 1px solid var(--line-2); font-size: 0.92rem; color: var(--ink-2); }

/* ---------- storm band ---------- */

.storm { background: var(--char); color: var(--on-dark); }
.storm__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--pad); align-items: stretch; }
.storm__copy { grid-column: 1 / span 6; }
.storm__media { grid-column: 8 / -1; }
.storm__media .media { height: 100%; min-height: 22rem; }
.storm .title { color: var(--on-dark); }
.steps-safe { list-style: none; margin: 2.4rem 0 0; padding: 0; counter-reset: s; border-top: 1px solid var(--line-dark); }
.steps-safe li { counter-increment: s; display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line-dark); color: var(--on-dark-2); font-size: 0.97rem; }
.steps-safe li::before { content: "0" counter(s); font-family: var(--f-cond); font-stretch: 75%; font-size: 0.85rem; color: var(--on-dark-2); padding-top: 0.2rem; }
.steps-safe strong { display: block; margin-bottom: 0.15rem; font-weight: 500; font-size: 1.1rem; color: var(--on-dark); letter-spacing: -0.015em; }
.phone-big { display: inline-block; margin-top: 2.2rem; font-weight: 500; font-size: clamp(2.3rem, 4.8vw, 4rem); letter-spacing: -0.045em; line-height: 1; color: var(--on-dark); text-decoration: none; font-variant-numeric: tabular-nums; }
.phone-big small { display: block; margin-bottom: 0.6rem; font-family: var(--f-cond); font-stretch: 75%; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; color: var(--signal); }
.phone-big:hover { color: #fff; }

/* ---------- the ring (line drawing) ---------- */

.ring-sec__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--pad); align-items: center; }
.ring-wrap { grid-column: 1 / span 7; }
.ring-panel { grid-column: 8 / -1; }
.ring { width: 100%; max-width: 40rem; margin-inline: auto; aspect-ratio: 1; touch-action: manipulation; }
.ring svg { width: 100%; height: 100%; overflow: visible; }
.ring .wedge { fill: transparent; cursor: pointer; transition: fill 0.35s var(--ease); outline: none; }
.ring .wedge:hover { fill: rgba(47, 74, 58, 0.07); }
.ring .wedge.is-active { fill: rgba(47, 74, 58, 0.14); }
.ring .wedge:focus-visible { fill: rgba(228, 87, 46, 0.14); }
.ring .m-label { font-family: var(--f-cond); font-stretch: 75%; font-size: 17px; letter-spacing: 0.06em; fill: var(--ink-3); pointer-events: none; text-transform: uppercase; }
.ring .m-label.is-active { fill: var(--ink); font-weight: 600; }
.ring .m-label.is-now { fill: var(--signal); }
.ring__legend { display: flex; justify-content: center; gap: 1.6rem; margin-top: 1.2rem; font-size: 0.8rem; color: var(--ink-2); }
.ring__legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.ring__legend i { width: 0.7rem; height: 0.7rem; display: inline-block; }

.month-card .bezel__core { padding: clamp(1.6rem, 3vw, 2.4rem); background: transparent; border: 1px solid var(--line); }
.month-card__nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.month-card__season { font-family: var(--f-cond); font-stretch: 75%; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.month-card__arrows { display: flex; gap: 2px; }
.icon-btn { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 0; background: var(--stone); color: var(--ink); cursor: pointer; transition: background-color 0.3s var(--ease); }
.icon-btn:hover { background: var(--stone-2); }
.icon-btn svg { width: 1rem; height: 1rem; }
.month-card__name { margin: 0; font-weight: 500; font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -0.045em; line-height: 1; }
.month-card__now { display: inline-block; margin-left: 0.6rem; padding: 0.15rem 0.45rem; background: var(--signal); color: #fff; font-family: var(--f-cond); font-stretch: 75%; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; }
.month-card__head { margin: 0.9rem 0 1.4rem; font-size: 1.15rem; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); }
.checklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.checklist li { display: grid; grid-template-columns: 1.3rem 1fr; gap: 0.6rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line-2); color: var(--ink-2); font-size: 0.95rem; line-height: 1.4; }
.checklist li::before { content: ""; width: 0.55rem; height: 0.55rem; margin-top: 0.4rem; background: var(--fern); }
.field-note { margin: 1.5rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid var(--signal); font-size: 0.93rem; color: var(--ink-2); }
.field-note b { display: block; margin-bottom: 0.2rem; font-family: var(--f-cond); font-stretch: 75%; font-weight: 500; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.month-card__links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 1.6rem; }
.month-swap { transition: opacity 0.3s var(--ease); }
.month-swap.is-swapping { opacity: 0; }

/* ---------- process carousel ---------- */

.proc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); background: var(--stone); border-bottom: 1px solid var(--line); }
.proc__side { grid-column: 1 / span 4; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: clamp(2.5rem, 5vw, 4rem) var(--pad); border-right: 1px solid var(--line); }
.proc__side p { margin: 0; font-size: 0.92rem; color: var(--ink-2); }
.proc__main { grid-column: 5 / -1; display: grid; grid-template-rows: 1fr auto; min-width: 0; }
.proc__track { display: flex; gap: clamp(1rem, 2.4vw, 2.4rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: clamp(2.5rem, 5vw, 4.4rem) 1.3rem; }
.proc__track::-webkit-scrollbar { display: none; }
.proc-card { flex: 0 0 min(18rem, 76%); scroll-snap-align: start; display: flex; flex-direction: column; min-height: 22rem; padding: 1.3rem 1.3rem 1.8rem; border: 1px solid rgba(30, 34, 30, 0.35); }
.proc-card svg { width: 2.6rem; height: 2.6rem; margin: auto 0 1.4rem; color: var(--ink-2); }
.proc-card h3 { margin: 0 0 0.6rem; font-weight: 500; font-size: 1.45rem; line-height: 1.15; letter-spacing: -0.03em; }
.proc-card p { margin: 0; font-size: 0.92rem; color: var(--ink-2); }
.proc__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0 1.3rem 1.6rem; }
.proc__count { font-family: var(--f-cond); font-stretch: 75%; font-size: 0.85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- ruled process (inner pages) ---------- */

.process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; counter-reset: p; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.process li { counter-increment: p; padding: 1.8rem 1.3rem 2.6rem; }
.process li + li { border-left: 1px solid var(--line); }
.process__num { display: block; margin-bottom: 3.2rem; }
.process__num svg { display: none; }
.process__num::after { content: "0" counter(p); font-family: var(--f-cond); font-stretch: 75%; font-size: 0.85rem; color: var(--ink-3); }
.process h3 { margin-bottom: 0.6rem; }
.process p { margin: 0; font-size: 0.95rem; color: var(--ink-2); }

.hero .eyebrow, .page-hero .eyebrow { color: var(--on-dark-2); }

/* ---------- before / after ---------- */

.ba { position: relative; }
.ba .bezel__core { aspect-ratio: 16 / 9; background: var(--stone-2); }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 1px; background: var(--on-dark); pointer-events: none; }
.ba__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 3rem;
  transform: translate(-50%, -50%);
  background: var(--bone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e221e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/48% no-repeat;
}
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.ba__range:focus-visible + .ba__handle::after { outline: 2px solid var(--signal); outline-offset: 3px; }
.ba__tag { position: absolute; top: 1rem; padding: 0.3rem 0.6rem; background: rgba(30, 34, 30, 0.7); color: var(--on-dark); font-family: var(--f-cond); font-stretch: 75%; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; pointer-events: none; }
.ba__tag--l { left: 1rem; }
.ba__tag--r { right: 1rem; }

/* ---------- estimate document ---------- */

.wo-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--pad); align-items: center; }
.wo-grid > .wo { grid-column: 1 / span 6; }
.wo-grid > .wo-copy { grid-column: 8 / -1; }
.wo { position: relative; padding: clamp(1.5rem, 3vw, 2.4rem); background: #f7f6f1; border: 1px solid var(--line); }
.wo__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--ink); }
.wo__brand { display: flex; align-items: center; gap: 0.55rem; color: var(--ink); }
.wo__brand svg { width: 1.9rem; height: auto; color: var(--fern); }
.wo__brand b { font-weight: 450; font-size: 1.4rem; letter-spacing: -0.05em; }
.wo__no { text-align: right; font-family: var(--f-cond); font-stretch: 75%; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.wo__no b { display: block; font-size: 1rem; color: var(--ink); font-weight: 500; }
.wo__rows { margin: 0; }
.wo__row { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line-2); }
.wo__row dt { font-family: var(--f-cond); font-stretch: 75%; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); padding-top: 0.15rem; }
.wo__row dd { margin: 0; font-size: 0.95rem; color: var(--ink); }
.wo__sign { display: flex; gap: 1.5rem; margin-top: 2rem; font-family: var(--f-cond); font-stretch: 75%; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.wo__sign span { flex: 1; padding-top: 0.5rem; border-top: 1px solid var(--ink-2); }
.wo__stamp { position: absolute; right: clamp(1.5rem, 3vw, 2.4rem); bottom: 4.4rem; padding: 0.3rem 0.55rem; border: 1px solid var(--signal); color: var(--signal); font-family: var(--f-cond); font-stretch: 75%; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.3rem 0; cursor: pointer; list-style: none; font-weight: 500; font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
  background: var(--stone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e221e' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/44% no-repeat;
  transition: transform 0.45s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 3.8rem 1.4rem 0; color: var(--ink-2); max-width: 70ch; }
.faq details > div p { margin: 0 0 0.7rem; }
.faq details > div p:last-child { margin: 0; }
.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--pad); }
.faq-grid > :first-child { grid-column: 1 / span 4; }
.faq-grid > :last-child { grid-column: 6 / -1; }

/* ---------- CTA list ---------- */

.cta-list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); background: var(--stone); }
.cta-list__media { grid-column: 1 / span 5; padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(2rem, 5vw, 4.5rem) var(--pad); }
.cta-list__media .media { height: 100%; min-height: 24rem; }
.cta-list__body { grid-column: 7 / -1; display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.cta-list__body .h3 { max-width: 26ch; padding: 0 var(--pad) 2.4rem 1.4rem; font-size: clamp(1.4rem, 2.2vw, 2rem); color: var(--ink); }
.cta-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cta-rows a { display: grid; grid-template-columns: 4.5rem 1fr 2.3rem; align-items: center; gap: 1rem; min-height: 6.4rem; padding: 0 var(--pad) 0 1.4rem; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: background-color 0.3s var(--ease); }
.cta-rows a:hover { background: rgba(239, 238, 232, 0.25); }
.cta-rows b { font-weight: 500; font-size: clamp(1.35rem, 2.2vw, 1.85rem); letter-spacing: -0.03em; }
.cta-rows small { display: block; font-size: 0.85rem; color: var(--ink-2); font-weight: 400; letter-spacing: 0; margin-top: 0.15rem; }
.cta-rows i { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; background: #8f8a6f; color: var(--on-dark); }
.cta-rows i svg { width: 0.95rem; height: 0.95rem; transition: transform 0.4s var(--ease); }
.cta-rows a:hover i svg { transform: translateX(3px); }

/* ---------- footer ---------- */

.footer { background: var(--char); color: var(--on-dark); }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem var(--pad); padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.footer__nav { grid-column: 1 / span 4; }
.footer__nav ol { list-style: none; margin: 0; padding: 0; }
.footer__nav a { display: grid; grid-template-columns: 4.5rem 1fr; align-items: baseline; padding: 0.35rem 0; text-decoration: none; color: var(--on-dark); font-size: clamp(1.4rem, 2vw, 1.8rem); letter-spacing: -0.03em; transition: color 0.3s var(--ease); }
.footer__nav a:hover { color: #fff; }
.footer__nav a .num { color: var(--on-dark-2); }
.footer__brand { grid-column: 6 / -1; }
.footer__lockup { display: grid; gap: 1.4rem; color: var(--on-dark); }
.footer__lockup svg { width: clamp(6rem, 16vw, 12rem); height: auto; }
.footer__lockup b { display: block; font-weight: 450; font-size: clamp(3.4rem, 11.4vw, 10.5rem); letter-spacing: -0.065em; line-height: 0.82; }
.footer__lockup small { display: block; margin-top: 0.8rem; font-family: var(--f-cond); font-stretch: 75%; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-2); }
.footer__info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3rem; font-size: 0.9rem; }
.footer__info h2 { margin: 0 0 0.6rem; font-family: var(--f-cond); font-stretch: 75%; font-weight: 500; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-dark); }
.footer__info h2::before { content: "["; }
.footer__info h2::after { content: "]"; }
.footer__info a { color: var(--on-dark-2); text-decoration: none; }
.footer__info a:hover { color: var(--on-dark); text-decoration: underline; }
.footer__info p { margin: 0; color: var(--on-dark-2); }
.footer__cta { margin-top: 3.2rem; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.6rem; border-top: 1px solid var(--line-dark); font-size: 0.85rem; color: var(--on-dark-2); }

/* ---------- inner page hero ---------- */

.page-hero {
  position: relative;
  min-height: min(78vh, 46rem);
  display: flex;
  background: var(--char);
  color: var(--on-dark);
  isolation: isolate;
  overflow: hidden;
}
.page-hero--short { min-height: 0; }
.page-hero__bg { position: absolute; inset: 0; z-index: -2; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 24, 20, 0.66), rgba(20, 24, 20, 0.45) 45%, rgba(20, 24, 20, 0.78)); }
.page-hero__in { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; padding-top: calc(var(--hdr) + 1.6rem); padding-bottom: clamp(2rem, 5vh, 3.2rem); }
.page-hero--short .page-hero__in { padding-bottom: clamp(3rem, 7vw, 5rem); }
.page-hero .crumbs { grid-column: 1 / -1; }
.page-hero__copy { grid-column: 1 / span 2; grid-row: 3; align-self: end; padding-top: 4rem; }
.page-hero .display { color: var(--on-dark); max-width: 16ch; }
.page-hero__side { grid-column: 3; grid-row: 3; align-self: end; padding-left: 1.2rem; }
.page-hero__side .lede { margin: 0; color: rgba(239, 238, 232, 0.86); font-size: 0.98rem; }
.page-hero .btn-row { margin-top: 1.6rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; font-family: var(--f-cond); font-stretch: 75%; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-dark-2); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.6; }
.crumbs a { color: var(--on-dark); text-decoration: none; }

.jump { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); background: var(--bone); }
.jump li { flex: 1 1 auto; }
.jump li + li { border-left: 1px solid var(--line); }
.jump a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; font-size: 0.92rem; text-decoration: none; color: var(--ink); transition: background-color 0.3s var(--ease); }
.jump a::after { content: "\2193"; color: var(--ink-3); }
.jump a:hover { background: var(--bone-2); }

/* ---------- ruled service rows ---------- */

.zig { display: grid; }
.zig__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-bottom: 1px solid var(--line); scroll-margin-top: var(--hdr); }
.zig__row:first-child { border-top: 1px solid var(--line); }
.zig__media { grid-column: 1 / span 5; position: relative; min-height: 28rem; }
.zig__media .bezel, .zig__media .bezel__core { height: 100%; }
.zig__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zig__copy { grid-column: 6 / -1; padding: clamp(2.4rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.6rem); border-left: 1px solid var(--line); }
.zig__row:nth-child(even) .zig__media { grid-column: 8 / -1; order: 2; }
.zig__row:nth-child(even) .zig__copy { grid-column: 1 / span 7; order: 1; border-left: 0; border-right: 1px solid var(--line); }
.zig__copy .title--sm { margin-bottom: 1.2rem; max-width: 20ch; }
.includes { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.6rem; border-top: 1px solid var(--line-2); }
.includes li { padding: 0.65rem 0; border-bottom: 1px solid var(--line-2); font-size: 0.93rem; color: var(--ink); }
.note { margin-top: 1.4rem; font-size: 0.9rem; color: var(--ink-3); max-width: 60ch; }

/* ---------- tools ---------- */

.tool .bezel__core { padding: clamp(1.4rem, 3vw, 2.6rem); background: var(--bone); border: 1px solid var(--line); }
.tool__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.chips legend { width: 100%; margin-bottom: 0.9rem; padding: 0; font-family: var(--f-cond); font-stretch: 75%; font-weight: 500; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.85rem;
  border: 0;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.93rem;
  line-height: 1.2;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.chip:hover { background: var(--bone-2); }
.chip[aria-pressed="true"], .chip:has(input:checked) { background: var(--fern); color: var(--on-dark); box-shadow: none; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }
.chip__tick { width: 0.7rem; height: 0.7rem; flex: none; box-shadow: inset 0 0 0 1px currentColor; }
.chip[aria-pressed="true"] .chip__tick, .chip:has(input:checked) .chip__tick { background: var(--signal); box-shadow: none; }
.tool fieldset + fieldset { margin-top: 1.8rem; }

.verdict { display: grid; align-content: start; gap: 0.9rem; padding: 1.6rem; background: var(--stone-2); }
.verdict__level { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--f-cond); font-stretch: 75%; font-weight: 500; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }
.verdict__level i { width: 0.7rem; height: 0.7rem; background: var(--ink-3); }
.verdict[data-level="calm"] .verdict__level i { background: var(--fern); }
.verdict[data-level="soon"] .verdict__level i { background: #c9951c; }
.verdict[data-level="now"] .verdict__level i { background: var(--signal); }
.verdict[data-level="danger"] { background: #2b1610; color: #f7e6de; }
.verdict[data-level="danger"] .verdict__level i { background: var(--signal); }
.verdict[data-level="danger"] .verdict__text { color: #efcfc2; }
.verdict[data-level="danger"] .btn { --b-bg: var(--bone); }
.verdict__title { margin: 0; font-weight: 500; font-size: 1.9rem; letter-spacing: -0.035em; line-height: 1.05; }
.verdict__text { margin: 0; color: var(--ink-2); }

.factors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.factor { padding: 2rem 1.3rem 2.4rem; }
.factor + .factor { border-left: 1px solid var(--line); }
.factor svg { width: 2.2rem; height: 2.2rem; margin-bottom: 3.5rem; color: var(--ink-2); }
.factor h3 { margin-bottom: 0.6rem; font-size: 1.3rem; }
.factor p { margin: 0; font-size: 0.93rem; color: var(--ink-2); }

.compare { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.compare__col { padding: clamp(1.5rem, 3vw, 2.4rem); }
.compare__col + .compare__col { border-left: 1px solid var(--line); }
.compare__col--no { background: rgba(228, 87, 46, 0.07); }
.compare__col h3 { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.2rem; }
.compare__col h3 svg { width: 1.4rem; height: 1.4rem; }
.compare__col ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.compare__col li { padding: 0.65rem 0; border-bottom: 1px solid var(--line-2); font-size: 0.95rem; color: var(--ink-2); }

/* herbarium labels, Swiss: ruled index cards */
.plant-filter { margin-bottom: 2rem; }
.herbarium { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.label-card { padding: 1.4rem 1.3rem 1.5rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bone); transition: background-color 0.3s var(--ease); }
.label-card:hover { background: #f5f4ef; }
.label-card__hd { display: flex; justify-content: space-between; font-family: var(--f-cond); font-stretch: 75%; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.label-card h3 { margin: 2.2rem 0 0.15rem; font-weight: 500; font-size: 1.4rem; letter-spacing: -0.03em; line-height: 1.1; }
.label-card .latin { margin: 0 0 1.1rem; font-style: italic; color: var(--ink-2); font-size: 0.93rem; }
.label-card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.9rem; margin: 0 0 1rem; padding: 0.7rem 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); font-size: 0.88rem; }
.label-card dt { font-family: var(--f-cond); font-stretch: 75%; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); padding-top: 0.1rem; }
.label-card dd { margin: 0; }
.label-card p { margin: 0; font-size: 0.9rem; color: var(--ink-2); line-height: 1.45; }
.tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 1rem; }
.tag { padding: 0.12rem 0.45rem; font-family: var(--f-cond); font-stretch: 75%; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.tag--native { background: var(--fern); color: var(--on-dark); box-shadow: none; }
.herbarium__empty { grid-column: 1 / -1; margin: 0; padding: 2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-2); }

.table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.table th, .table td { padding: 1rem 1rem 1rem 0; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-family: var(--f-cond); font-stretch: 75%; font-weight: 500; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.table td:first-child { font-weight: 500; }
.table .num { font-size: 1.05rem; color: var(--ink); }

.builder__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.builder__summary { position: sticky; top: calc(var(--hdr) + 1rem); }
.builder__summary .bezel__core { background: var(--stone); padding: 1.6rem; }
.summary-list { list-style: none; margin: 0.8rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.summary-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: 0.93rem; color: var(--ink-2); }
.summary-list li b { color: var(--ink); font-weight: 500; text-align: right; }
.summary-empty { margin: 0.8rem 0 0; color: var(--ink-2); font-size: 0.95rem; }

.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pack + .pack { border-left: 1px solid var(--line); }
.pack .bezel__core { background: transparent; }
.pack__img { aspect-ratio: 16 / 9; margin: 1.3rem 1.3rem 0; }
.pack__img img { width: 100%; height: 100%; object-fit: cover; }
.pack__body { padding: 1.4rem 1.3rem 2rem; display: flex; flex-direction: column; gap: 0.8rem; }
.pack__when { font-family: var(--f-cond); font-stretch: 75%; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--signal); }
.pack__body ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.pack__body li { padding: 0.55rem 0; border-bottom: 1px solid var(--line-2); font-size: 0.92rem; color: var(--ink-2); }

/* ---------- projects ---------- */

.filter-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 2rem; }
.masonry { columns: 3 20rem; column-gap: 1.2rem; }
.shot { break-inside: avoid; margin: 0 0 1.6rem; }
.shot button { display: block; width: 100%; padding: 0; border: 0; background: var(--stone-2); cursor: zoom-in; overflow: hidden; }
.shot img { width: 100%; transition: transform 1.2s var(--ease); }
.shot:hover img { transform: scale(1.03); }
.shot figcaption { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; padding: 0.8rem 0 0; border-bottom: 1px solid var(--line); padding-bottom: 0.9rem; font-size: 0.9rem; color: var(--ink-2); }
.shot figcaption b { font-weight: 500; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--ink); }
.shot figcaption span { font-family: var(--f-cond); font-stretch: 75%; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; padding-top: 0.2rem; }
.shot.is-hidden { display: none; }
.lightbox { width: min(92vw, 1400px); max-height: 92vh; padding: 0; border: 0; background: var(--char); color: var(--on-dark); overflow: hidden; }
.lightbox::backdrop { background: rgba(14, 17, 14, 0.86); }
.lightbox img { width: 100%; max-height: 80vh; object-fit: contain; background: #111411; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.8rem 0.8rem 0.8rem 1.2rem; }
.lightbox__bar p { margin: 0; font-size: 0.95rem; }

/* ---------- almanac ---------- */

.months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.month { padding: 1.8rem 1.5rem 2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); scroll-margin-top: var(--hdr); }
.month.is-now { background: var(--char); color: var(--on-dark); }
.month.is-now .month__name, .month.is-now .month__head { color: var(--on-dark); }
.month.is-now .checklist li { color: var(--on-dark-2); border-color: var(--line-dark); }
.month.is-now .checklist { border-color: var(--line-dark); }
.month.is-now .checklist li::before { background: var(--signal); }
.month.is-now .field-note { color: var(--on-dark-2); }
.month.is-now .field-note b { color: var(--on-dark); }
.month__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.month__name { margin: 0; font-weight: 500; font-size: 2rem; letter-spacing: -0.045em; line-height: 1; }
.month__season { font-family: var(--f-cond); font-stretch: 75%; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.month.is-now .month__season { color: var(--signal); }
.month__head { margin: 1rem 0 1.1rem; font-size: 1.05rem; line-height: 1.35; letter-spacing: -0.015em; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); }
.fact { padding: 2rem 1.3rem 0 0; }
.fact + .fact { padding-left: 1.3rem; border-left: 1px solid var(--line-dark); }
.fact b { display: block; font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.045em; line-height: 1; color: var(--on-dark); }
.fact span { display: block; margin-top: 0.8rem; font-size: 0.92rem; color: var(--on-dark-2); }

/* ---------- about ---------- */

.statement { margin: 0; max-width: 24ch; font-weight: 500; font-size: clamp(1.9rem, 3.8vw, 3.3rem); line-height: 1.1; letter-spacing: -0.04em; text-wrap: balance; }
.statement em { font-style: normal; color: var(--ink-3); }
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.value { padding: 2rem 1.3rem 2.6rem; }
.value + .value { border-left: 1px solid var(--line); }
.value .num { display: block; margin-bottom: 3rem; }
.value h3 { margin-bottom: 0.7rem; }
.value p { margin: 0; font-size: 0.95rem; color: var(--ink-2); }
.gear { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.gear > div { padding: 1.4rem 1.3rem 1.6rem 0; border-bottom: 1px solid var(--line); }
.gear > div:not(:nth-child(3n + 1)) { padding-left: 1.3rem; border-left: 1px solid var(--line); }
.gear b { display: block; margin-bottom: 0.3rem; font-weight: 500; font-size: 1.15rem; letter-spacing: -0.02em; }
.gear span { font-size: 0.93rem; color: var(--ink-2); }

/* ---------- estimate form ---------- */

.estimate-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--pad); align-items: start; }
.estimate-grid > :first-child { grid-column: 1 / span 8; }
.estimate-grid > :last-child { grid-column: 9 / -1; display: grid; gap: 1px; position: sticky; top: calc(var(--hdr) + 1rem); }
.form-shell .bezel__core { padding: clamp(1.4rem, 3.5vw, 3rem); background: var(--bone); border: 1px solid var(--line); }
.progress { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0 0 2.4rem; padding: 0; counter-reset: st; }
.progress li { counter-increment: st; padding-top: 0.7rem; border-top: 2px solid var(--line); font-family: var(--f-cond); font-stretch: 75%; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); transition: border-color 0.35s var(--ease), color 0.35s var(--ease); }
.progress li::before { content: "0" counter(st) "  "; }
.progress li.is-done { border-color: var(--fern); color: var(--fern); }
.progress li.is-current { border-color: var(--ink); color: var(--ink); }
.step { border: 0; margin: 0; padding: 0; min-width: 0; }
.step > legend { padding: 0; margin-bottom: 0.5rem; font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.035em; line-height: 1.05; }
.step__hint { margin: 0 0 1.8rem; color: var(--ink-2); }
.field { display: grid; gap: 0.45rem; margin-bottom: 1.3rem; }
.field label, .field .label { margin: 0; font-family: var(--f-cond); font-stretch: 75%; font-weight: 500; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.field label .req, .field .label .req { color: var(--signal); }
.field label.chip { font-family: var(--f); font-stretch: 100%; font-weight: 400; font-size: 0.93rem; letter-spacing: 0; text-transform: none; color: var(--ink); }
.field label.chip:has(input:checked) { color: var(--on-dark); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.75rem 0.9rem;
  border: 0;
  border-radius: 0;
  background: #f7f6f1;
  box-shadow: inset 0 0 0 1px var(--line);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  transition: box-shadow 0.25s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.field .help { margin: 0; font-size: 0.88rem; color: var(--ink-3); }
.field .err { margin: 0; font-size: 0.9rem; color: #b33a14; }
.field.has-err input, .field.has-err select, .field.has-err textarea { box-shadow: inset 0 0 0 2px #c2461b; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.step-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.review { margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.review div { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line-2); }
.review dt { font-family: var(--f-cond); font-stretch: 75%; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.review dd { margin: 0; white-space: pre-line; }
.send-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1.8rem; }
.status { margin-top: 1rem; min-height: 1.4em; font-size: 0.95rem; color: var(--fern); }
.aside-card .bezel__core { padding: 1.6rem; background: var(--stone); }
.aside-card h2 { margin-bottom: 0.7rem; }
.aside-card p { margin: 0.2rem 0 1rem; font-size: 0.93rem; color: var(--ink-2); }
.aside-card--dark .bezel__core { background: var(--char); color: var(--on-dark); }
.aside-card--dark p { color: var(--on-dark-2); margin-bottom: 0; }
.aside-phone { font-weight: 500; font-size: 2rem; letter-spacing: -0.04em; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }

/* ---------- 404 ---------- */

.lost { min-height: 100dvh; display: grid; place-items: center; padding: 8rem var(--pad) 4rem; background: var(--char); color: var(--on-dark); text-align: center; }
.lost svg { width: min(14rem, 50vw); margin: 0 auto 2.4rem; color: var(--on-dark-2); }
.lost .display { color: var(--on-dark); }
.lost .lede { margin-inline: auto; color: var(--on-dark-2); }
.lost .btn-row { justify-content: center; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .hdr__phone { display: none; }
  .process { grid-template-columns: 1fr 1fr; }
  .process li:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .process li:nth-child(4) { border-top: 1px solid var(--line); }
  .cols { grid-template-columns: 1fr 1fr; }
  .col:nth-child(n) { padding-top: clamp(3rem, 7vw, 5rem); }
  .col:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .col:nth-child(4) { border-top: 1px solid var(--line); }
  .factors { grid-template-columns: 1fr 1fr; }
  .factor:nth-child(n) { border-left: 0; border-top: 1px solid var(--line); }
  .factor:nth-child(even) { border-left: 1px solid var(--line); }
  .factor:nth-child(1), .factor:nth-child(2) { border-top: 0; }
  .values { grid-template-columns: 1fr 1fr; }
  .value:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .value:nth-child(4) { border-top: 1px solid var(--line); }
  .months { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(3) { border-left: 0; padding-left: 0; }
  .send-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --hdr: 4.6rem; }
  .hero__in, .page-hero__in { grid-template-columns: 1fr; }
  .hero__title, .hero__lede, .page-hero__copy, .page-hero__side { grid-column: 1; }
  .hero__lede { grid-row: 3; padding-left: 0; margin-top: 1.4rem; }
  .hero__foot { grid-row: 4; flex-direction: column; align-items: stretch; margin-top: 2rem; }
  .slide-card { width: 100%; }
  .page-hero__side { grid-row: 4; padding-left: 0; margin-top: 1.2rem; }
  .guides .wrap { background:
    linear-gradient(var(--line-dark), var(--line-dark)) left top / 1px 100% no-repeat,
    linear-gradient(var(--line-dark), var(--line-dark)) 50% top / 1px 100% no-repeat,
    linear-gradient(var(--line-dark), var(--line-dark)) right top / 1px 100% no-repeat;
    background-origin: content-box; background-clip: content-box; }

  .split, .work, .proc, .cta-list, .storm__grid, .ring-sec__grid, .wo-grid, .sec-head, .faq-grid, .footer__grid, .estimate-grid, .zig__row { grid-template-columns: 1fr; }
  .split__media, .split__body, .work__side, .work__track, .proc__side, .proc__main,
  .cta-list__media, .cta-list__body, .storm__copy, .storm__media, .ring-wrap, .ring-panel,
  .wo-grid > .wo, .wo-grid > .wo-copy, .sec-head > :first-child, .sec-head > :nth-child(2),
  .faq-grid > :first-child, .faq-grid > :last-child, .footer__nav, .footer__brand,
  .estimate-grid > :first-child, .estimate-grid > :last-child,
  .zig__media, .zig__copy, .zig__row:nth-child(even) .zig__media, .zig__row:nth-child(even) .zig__copy {
    grid-column: 1;
  }
  .split__media { min-height: 20rem; }
  .split__body { border-left: 0; }
  .split__row { grid-template-columns: 1fr; }
  .split__row > * + * { border-left: 0; border-top: 1px solid var(--line); justify-content: flex-start; }
  .work__side { border-right: 0; border-bottom: 1px solid var(--line); grid-template-rows: auto; }
  .work__side .pager { min-height: 4.6rem; }
  .work-item { flex-basis: 78%; }
  .proc__side { border-right: 0; border-bottom: 1px solid var(--line); }
  .cta-list__media { padding: 2rem var(--pad) 0; }
  .cta-list__media .media { min-height: 18rem; }
  .cta-list__body .h3 { padding-left: var(--pad); }
  .cta-rows { border-left: 0; }
  .cta-rows a { grid-template-columns: 3rem 1fr 2.3rem; padding-left: var(--pad); }
  .storm__media .media { min-height: 18rem; }
  .zig__row:nth-child(even) .zig__media { order: 0; }
  .zig__row:nth-child(even) .zig__copy { order: 1; border-right: 0; }
  .zig__media { min-height: 18rem; }
  .zig__copy { border-left: 0; border-top: 1px solid var(--line); padding-inline: var(--pad); }
  .tool__grid, .builder__grid, .compare { grid-template-columns: 1fr; }
  .compare__col + .compare__col { border-left: 0; border-top: 1px solid var(--line); }
  .builder__summary, .estimate-grid > :last-child { position: static; }
  .packs { grid-template-columns: 1fr; }
  .pack + .pack { border-left: 0; border-top: 1px solid var(--line); }
  .footer__info { grid-template-columns: 1fr; }
  .jump li { flex-basis: 50%; }
  .jump li:nth-child(odd) { border-left: 0; }
  .jump li { border-bottom: 1px solid var(--line); }
}

@media (max-width: 640px) {
  .brand__word { font-size: 1.5rem; }
  .hdr .btn { display: none; }
  .cols { grid-template-columns: 1fr; }
  .col:nth-child(n) { border-left: 0; border-top: 1px solid var(--line); }
  .col:first-child { border-top: 0; }
  .factors, .values, .months, .facts, .gear { grid-template-columns: 1fr; }
  .factor:nth-child(n), .value:nth-child(n) { border-left: 0; border-top: 1px solid var(--line); }
  .factor:first-child, .value:first-child { border-top: 0; }
  .fact:nth-child(n) { border-left: 0; padding-left: 0; }
  .gear > div:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .includes { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .review div, .wo__row { grid-template-columns: 1fr; gap: 0.2rem; }
  .progress li { font-size: 0; }
  .progress li::before { font-size: 0.8rem; }
  .progress li.is-current { font-size: 0.75rem; }
  .step-actions { flex-wrap: wrap; }
  .btn-row .btn { width: 100%; }
  .btn-row .btn .btn__label { flex: 1; }
  .slide-card { grid-template-columns: 7rem 1fr 2.6rem; }
  .float-cta { right: 0.8rem; bottom: 0.8rem; }
  .ring .m-label { font-size: 21px; }
}