/* Groundcare Landscape, LLC — Madison, Mississippi
   Design system. One palette, one type pair, one spacing rhythm.

   PALETTE. The brief's three measured hexes are the ground of the site:
     #484830 olive   #303018 moss   #181818 ink
   No logo exists (their site still shows the template's name), so the two brights come off
   their own photographs: the crew's safety-green shirts (lime) and fresh pine straw (straw).
   Change the five tokens below and the whole site follows. */

@font-face { font-family: "Calistoga"; src: url("/fonts/calistoga.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("/fonts/librefranklin.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  /* brand */
  --olive: #484830;
  --moss: #303018;
  --ink: #181818;
  --lime: #a8e63a;
  --straw: #c9682a;
  /* derived */
  --moss-deep: #1f200f;
  --olive-soft: #6b6b4c;
  --lime-hi: #c4f56a;
  --lime-lo: #8ccb1f;
  --leaf: #3d5a0c;            /* lime's dark twin: accent text on paper */
  --straw-hi: #f0a868;        /* straw on dark grounds */
  --straw-lo: #a34f1a;        /* straw text on paper */
  --paper: #f4f1e3;
  --paper-2: #e9e5d0;
  --card: #fbf9ef;
  --fg: #181818;
  --fg-soft: #4c4c38;
  --on-dark: #f4f1e3;
  --on-dark-soft: #cfcdb6;
  --line: rgba(24, 24, 24, .16);
  --line-dark: rgba(244, 241, 227, .2);
  /* type */
  --display: "Calistoga", "Cooper Black", Georgia, serif;
  --body: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
  /* space */
  --gut: clamp(18px, 5vw, 40px);
  --max: 1240px;
  --edge: max(var(--gut), calc((var(--vw, 100vw) - var(--max)) / 2));
  --sec: clamp(64px, 11vw, 132px);
  --hdr-h: 68px;
  --r: 18px;
  --r-s: 10px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 1px 0 rgba(24, 24, 24, .06), 0 18px 40px -22px rgba(24, 24, 24, .45);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); scroll-padding-bottom: 84px; -webkit-tap-highlight-color: rgba(168, 230, 58, .28); }
a, button, summary, label, input, select, textarea { touch-action: manipulation; }
body { margin: 0; background: var(--paper); color: var(--fg); font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
figure, blockquote { margin: 0; }
h1, h2, h3, h4, p, dl, dd { margin: 0; }
:where(ul, ol)[role="list"] { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:where(a, button, span, p, li, summary) > svg:where(:not([width])) { width: 1.15em; height: 1.15em; flex: none; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
.t-paper :focus-visible, .t-card :focus-visible, .t-lime :focus-visible { outline-color: var(--ink); }
::selection { background: var(--lime); color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 200; background: var(--lime); color: var(--ink); padding: 12px 16px; border-radius: 999px; font-weight: 700; transition: top .2s var(--ease); }
.skip:focus { top: 12px; }
.tel { white-space: nowrap; font-variant-numeric: lining-nums; }
.nb { white-space: nowrap; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2 * var(--gut) - env(safe-area-inset-left) - env(safe-area-inset-right), var(--max)); margin-inline: auto; }
.sec { position: relative; padding-block: var(--sec); }
.sec-tight { padding-block: clamp(44px, 7vw, 84px); }
.t-paper { background: var(--paper); color: var(--fg); }
.t-card { background: var(--paper-2); color: var(--fg); }
.t-moss { background: var(--moss); color: var(--on-dark); }
.t-ink { background: var(--ink); color: var(--on-dark); }
.t-olive { background: var(--olive); color: var(--on-dark); }
.t-lime { background: var(--lime); color: var(--ink); }

/* the bed line: every tone change is cut on a curve, the way a bed edge is cut into turf */
.bedline { position: absolute; left: 0; right: 0; bottom: 100%; width: 100%; height: clamp(26px, 5.2vw, 76px); margin-bottom: -1px; pointer-events: none; }
.bedline path { fill: currentColor; }
.t-paper > .bedline { color: var(--paper); }
.t-card > .bedline { color: var(--paper-2); }
.t-moss > .bedline { color: var(--moss); }
.t-ink > .bedline { color: var(--ink); }
.t-lime > .bedline { color: var(--lime); }
.bedline.flip { transform: scaleX(-1); }

/* ---------- type ---------- */
h1, h2, h3, .display { font-family: var(--display); font-weight: 400; font-synthesis: none; letter-spacing: -.012em; text-wrap: balance; }
h2, .h2 { font-size: clamp(2.05rem, 7.6vw, 3.9rem); line-height: 1.02; }
h3, .h3 { font-size: clamp(1.3rem, 4.4vw, 1.62rem); line-height: 1.12; letter-spacing: -.005em; }
.hl { color: var(--leaf); }
.t-moss .hl, .t-ink .hl, .t-olive .hl, .hero .hl, .phero .hl, .moment .hl { color: var(--lime); }
.t-lime .hl { color: var(--moss); }
.kicker { display: inline-flex; align-items: center; gap: .6em; font-family: var(--body); font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--straw-lo); margin-bottom: 16px; }
.kicker::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: currentColor; }
.t-moss .kicker, .t-ink .kicker, .t-olive .kicker, .k-light { color: var(--lime); }
.t-lime .kicker { color: var(--moss); }
.lede { font-size: clamp(1.08rem, 3.5vw, 1.28rem); line-height: 1.5; color: var(--fg-soft); max-width: 58ch; }
.t-moss .lede, .t-ink .lede, .t-olive .lede { color: var(--on-dark-soft); }
.t-lime .lede { color: var(--moss); }
/* .para: prose is cut into phone-sized blocks; from 900px the blocks rejoin into one paragraph */
.para { display: grid; gap: 11px; }
.para + .para { margin-top: 16px; }
.para > p { font-size: 1.04rem; line-height: 1.58; color: var(--fg-soft); }
.t-moss .para > p, .t-ink .para > p, .t-olive .para > p { color: var(--on-dark-soft); }
.para a { color: var(--leaf); font-weight: 700; }
.t-moss .para a, .t-ink .para a { color: var(--lime); }
.strip a { transition: color .2s var(--ease); }
.strip a:hover { color: var(--moss); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: clamp(30px, 5vw, 56px); }
.sec-head .lede { margin-top: 2px; }
.slash { color: var(--straw); font-weight: 700; font-style: normal; padding-inline: .15em; }
.t-moss .slash, .t-ink .slash { color: var(--lime); }

/* ---------- buttons ---------- */
.btn { --bg: var(--lime); --fg-b: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 54px; padding: 14px 24px; border-radius: 999px; background: var(--bg); color: var(--fg-b); font-weight: 700; font-size: 1.02rem; line-height: 1.1; letter-spacing: -.005em; border: 2px solid transparent; transition: transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.btn:hover { transform: translateY(-2px); background: var(--lime-hi); box-shadow: 0 14px 26px -14px rgba(24, 24, 24, .7); }
.btn:active { transform: translateY(0); }
.btn-ghost { --bg: transparent; --fg-b: var(--on-dark); border-color: rgba(244, 241, 227, .62); }
.btn-ghost:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.btn-ink { --bg: var(--ink); --fg-b: var(--on-dark); }
.btn-ink:hover { background: var(--moss); }
.btn-line { --bg: transparent; --fg-b: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--on-dark); }
.btn-sm { min-height: 46px; padding: 10px 18px; font-size: .95rem; }
.link { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; color: var(--leaf); border-bottom: 2px solid currentColor; padding-bottom: 2px; transition: color .25s var(--ease); }
.link svg { transition: transform .25s var(--ease); }
.link:hover svg { transform: translateX(4px); }
.t-moss .link, .t-ink .link, .t-olive .link { color: var(--lime); }
.t-lime .link { color: var(--ink); }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 90; height: calc(var(--hdr-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); color: var(--on-dark); transition: transform .35s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease); }
.hdr::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(24, 24, 20, .62), rgba(24, 24, 20, 0)); pointer-events: none; transition: opacity .3s var(--ease); }
.hdr.raised, .hdr.solid { background: var(--moss); box-shadow: 0 1px 0 var(--line-dark); }
.hdr.raised::before, .hdr.solid::before { opacity: 0; }
.hdr.tuck { transform: translateY(-105%); }
.hdr-in { position: relative; height: var(--hdr-h); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.brand { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1; min-height: 44px; flex: none; }
.brand-w { font-family: var(--display); font-size: 1.62rem; letter-spacing: -.015em; line-height: .95; }
.brand-w b { font-weight: 400; color: var(--lime); }
.brand-s { font-size: .56rem; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; margin-top: 5px; color: var(--on-dark-soft); padding-left: 2px; }
.nav { display: none; }
.hdr-act { display: flex; align-items: center; gap: 10px; flex: none; }
.hdr-call { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 46px; height: 46px; padding: 0 14px; border-radius: 999px; background: var(--lime); color: var(--ink); font-weight: 700; font-size: .95rem; transition: background-color .25s var(--ease); }
.hdr-call:hover { background: var(--lime-hi); }
.hdr-call .tel { display: none; }
#burger { width: 46px; height: 46px; border-radius: 999px; border: 2px solid rgba(244, 241, 227, .5); display: grid; place-items: center; }
#burger i { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
#burger[aria-expanded="true"] i { box-shadow: none; transform: rotate(45deg); position: relative; }
#burger[aria-expanded="true"] i::after { content: ""; position: absolute; inset: 0; background: currentColor; border-radius: 2px; transform: rotate(90deg); }
.drawer { position: fixed; inset: 0; z-index: 80; background: var(--moss); color: var(--on-dark); padding: calc(var(--hdr-h) + env(safe-area-inset-top) + 18px) var(--gut) calc(32px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s; }
.drawer.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.drawer .dr-h { font-family: var(--body); font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--lime); margin: 22px 0 6px; }
.drawer ul a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-family: var(--display); font-size: 1.36rem; border-bottom: 1px solid var(--line-dark); }
.drawer .dr-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; }
.drawer .dr-two a { font-family: var(--body); font-weight: 600; font-size: 1rem; }
.drawer .btn { width: 100%; margin-top: 22px; }
body.locked { overflow: hidden; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: max(680px, 100svh); display: grid; align-items: center; color: var(--on-dark); background: var(--moss-deep); overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media img { animation: kb 28s ease-in-out infinite alternate; transform-origin: 60% 60%; }
.hero-vid { opacity: 0; transition: opacity .9s ease; }
.hero-vid.on { opacity: 1; }
.hero-scrim { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(110% 70% at 50% 46%, rgba(24, 24, 14, .66) 0%, rgba(24, 24, 14, .5) 50%, rgba(24, 24, 14, .16) 100%),
  linear-gradient(180deg, rgba(24, 24, 14, .7) 0%, rgba(24, 24, 14, .12) 24%, rgba(24, 24, 14, .16) 66%, rgba(31, 32, 15, .92) 100%); }
.hero-in { position: relative; text-align: center; padding-top: calc(var(--hdr-h) + env(safe-area-inset-top) + 26px); padding-bottom: clamp(64px, 12vw, 110px); max-width: 900px; }
.lockup { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; margin-bottom: 20px; }
.lockup-w { font-family: var(--display); font-size: clamp(2.5rem, 11vw, 4.3rem); letter-spacing: -.02em; line-height: .92; }
.lockup-w b { font-weight: 400; color: var(--lime); }
.lockup-rule { width: 100%; height: 5px; border-radius: 5px; margin-top: 10px; background: linear-gradient(90deg, var(--lime) 0 62%, var(--straw) 62% 100%); }
.lockup-s { font-size: clamp(.62rem, 2.4vw, .8rem); font-weight: 700; letter-spacing: .42em; text-transform: uppercase; margin-top: 10px; padding-left: .42em; }
.pill { display: inline-flex; align-items: center; gap: .55em; border: 1.5px solid rgba(244, 241, 227, .55); border-radius: 999px; padding: 8px 15px; font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 20px; background: rgba(24, 24, 14, .35); }
.pill svg { color: var(--lime); }
.hero h1 { font-size: clamp(2.7rem, 11.8vw, 6rem); line-height: .96; letter-spacing: -.02em; }
.hero h1 .h1-k { display: block; font-family: var(--body); font-size: clamp(.8rem, 3vw, 1rem); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; margin-bottom: 14px; color: var(--on-dark); text-wrap: balance; }
.hero h1 .hl { display: inline-block; }
.hero-sub { font-size: clamp(1.06rem, 3.6vw, 1.3rem); line-height: 1.45; max-width: 34ch; margin: 20px auto 0; color: #ecead9; text-wrap: balance; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 30px; font-size: .86rem; font-weight: 600; color: #e6e4d0; }
.trust li { display: inline-flex; align-items: center; gap: .5em; }
.trust svg { color: var(--lime); }
.motion-btn { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: rgba(24, 24, 14, .62); color: var(--on-dark); border: 1.5px solid rgba(244, 241, 227, .45); transition: background-color .2s var(--ease); }
.motion-btn:hover { background: rgba(24, 24, 14, .9); }
.motion-btn svg { width: 14px; height: 14px; }
.motion-btn .i-play { display: none; }
.motion-off .motion-btn .i-play { display: block; }
.motion-off .motion-btn .i-pause { display: none; }
.motion-off .hero-media img, .motion-off .kb img { animation-play-state: paused; }
@keyframes kb { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.13) translate3d(-1.6%, -1.2%, 0); } }

/* ---------- lime strip ---------- */
.strip { position: relative; padding-block: clamp(26px, 5vw, 44px); }
.strip ul { display: flex; flex-wrap: wrap; gap: 4px 0; font-family: var(--display); font-size: clamp(1.4rem, 5.4vw, 2.4rem); line-height: 1.16; letter-spacing: -.01em; }
.strip li { display: inline-flex; align-items: center; white-space: nowrap; }
.strip li:not(:last-child)::after { content: "//"; color: var(--moss); opacity: .5; padding-inline: .42em; font-family: var(--body); font-weight: 700; font-size: .72em; }

/* ---------- photo frames ---------- */
.ph { display: block; position: relative; overflow: hidden; background: var(--olive); border-radius: var(--r); }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-tag { position: absolute; left: 10px; top: 10px; z-index: 2; background: var(--lime); color: var(--ink); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; }
.ph-tag.tag-straw { background: var(--straw); color: #fff; }
.cap { margin-top: 10px; font-size: .86rem; line-height: 1.4; color: var(--fg-soft); }
.t-moss .cap, .t-ink .cap { color: var(--on-dark-soft); }

/* ---------- intro (who) ---------- */
.intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 6vw, 72px); align-items: center; }
.intro-txt p + p { margin-top: 14px; }
.intro-txt .said { font-family: var(--display); font-size: clamp(1.4rem, 5.2vw, 2.1rem); line-height: 1.14; letter-spacing: -.01em; margin: 18px 0 16px; text-wrap: balance; }
.intro-txt .said-by { font-size: .86rem; font-weight: 600; color: var(--fg-soft); margin-bottom: 18px; }
.intro-pics { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px; align-items: end; }
.intro-pics .ph-own { aspect-ratio: 316 / 480; max-width: 316px; }
.intro-pics .ph-crew { aspect-ratio: 4 / 3.3; }
.intro-pics figure:nth-child(2) { padding-bottom: clamp(18px, 6vw, 46px); }
.facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin-top: 26px; border-top: 2px solid var(--ink); }
.facts > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts > div:nth-child(odd) { padding-right: 14px; }
.facts > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
.facts dt { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--straw-lo); }
.facts dd { font-family: var(--display); font-size: 1.14rem; line-height: 1.15; margin-top: 4px; }
.t-moss .facts, .t-ink .facts { border-top-color: var(--lime); }
.t-moss .facts > div, .t-ink .facts > div { border-color: var(--line-dark); }
.t-moss .facts dt, .t-ink .facts dt { color: var(--lime); }

/* ---------- services ---------- */
.svc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 12px; }
.svc-grid > li { display: grid; }
.svc-grid > li:nth-child(1), .svc-grid > li:nth-child(8) { grid-column: span 2; }
.svc-card { display: grid; grid-template-rows: auto 1fr; align-content: start; height: 100%; }
.svc-card .ph { aspect-ratio: 1 / 1.08; }
.svc-grid > li:nth-child(1) .ph, .svc-grid > li:nth-child(8) .ph { aspect-ratio: 16 / 10.5; }
.svc-card .ph img { transition: transform .7s var(--ease); }
.svc-card:hover .ph img { transform: scale(1.05); }
.svc-num { position: absolute; left: 12px; bottom: 6px; z-index: 2; font-family: var(--display); font-size: clamp(2.6rem, 9vw, 3.6rem); line-height: 1; color: var(--lime); text-shadow: 0 2px 18px rgba(24, 24, 14, .7); }
.svc-card .ph::after { content: ""; position: absolute; inset: 45% 0 0 0; background: linear-gradient(180deg, rgba(24, 24, 14, 0), rgba(24, 24, 14, .62)); pointer-events: none; }
.svc-txt { padding-top: 12px; }
.svc-txt h3 { display: inline; background-image: linear-gradient(var(--lime), var(--lime)); background-repeat: no-repeat; background-size: 0% 3px; background-position: 0 100%; transition: background-size .35s var(--ease); padding-bottom: 2px; }
.svc-card:hover .svc-txt h3 { background-size: 100% 3px; }
.svc-txt p { margin-top: 7px; font-size: .95rem; line-height: 1.42; color: var(--on-dark-soft); }
.t-paper .svc-txt p, .t-card .svc-txt p { color: var(--fg-soft); }
.t-paper .svc-txt h3, .t-card .svc-txt h3 { background-image: linear-gradient(var(--straw), var(--straw)); }

/* ---------- the yard year (signature) ---------- */
.year { --m: -1; }
.yr-board { position: relative; border-radius: var(--r); background: var(--moss-deep); border: 1px solid var(--line-dark); padding: clamp(14px, 3.4vw, 34px); overflow: hidden; }
.yr-months, .yr-track { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.yr-months { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-soft); text-align: center; padding-bottom: 10px; border-bottom: 1px solid var(--line-dark); }
.yr-months span { padding-block: 4px; border-radius: 6px; }
.yr-months .long { display: none; }
.yr-months span.is-now { background: var(--lime); color: var(--ink); }
.yr-row { padding-top: 14px; }
.yr-row a { display: inline-flex; align-items: center; gap: .5em; font-family: var(--display); font-size: 1.12rem; line-height: 1.1; margin-bottom: 8px; }
.yr-row a svg { color: var(--lime); transition: transform .25s var(--ease); }
.yr-row a:hover svg { transform: translateX(4px); }
.yr-track { position: relative; height: 16px; border-radius: 999px; background: repeating-linear-gradient(90deg, rgba(244, 241, 227, .07) 0 calc(100% / 12 - 1px), rgba(244, 241, 227, 0) calc(100% / 12 - 1px) calc(100% / 12)); background-size: calc(100% / 12) 100%; background-repeat: repeat-x; }
.yr-bar { height: 16px; border-radius: 999px; background: var(--lime); transform-origin: 0 50%; }
.yr-bar.b-soft { background: var(--olive-soft); }
.yr-bar.b-straw { background: var(--straw); }
.rv .yr-bar { transform: scaleX(0); transition: transform .9s var(--ease); }
.rv.is-in .yr-bar { transform: none; }
.yr-now { position: absolute; top: 0; bottom: 0; left: clamp(14px, 3.4vw, 34px); right: clamp(14px, 3.4vw, 34px); pointer-events: none; display: none; }
.yr-now i { position: absolute; top: 44px; bottom: 14px; left: calc((var(--m) + .5) * 100% / 12); width: 2px; margin-left: -1px; background: linear-gradient(var(--lime), rgba(168, 230, 58, .12)); }
.year.has-now .yr-now { display: block; }
.yr-key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; font-size: .84rem; color: var(--on-dark-soft); }
.yr-key li { display: inline-flex; align-items: center; gap: .55em; }
.yr-key i { width: 22px; height: 10px; border-radius: 999px; background: var(--lime); }
.yr-key .k-soft { background: var(--olive-soft); }
.yr-key .k-straw { background: var(--straw); }
.yr-today { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 20px; border-radius: var(--r); background: var(--lime); color: var(--ink); }
.yr-today strong { font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: 1.1; }
.yr-today span { font-size: .98rem; line-height: 1.45; }
.yr-src { margin-top: 14px; font-size: .78rem; color: var(--on-dark-soft); }
.yr-src a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- photo moment ---------- */
.moment { position: relative; min-height: clamp(460px, 86vw, 720px); display: grid; align-items: end; color: var(--on-dark); background: var(--moss-deep); overflow: hidden; isolation: isolate; }
.moment .kb { position: absolute; inset: 0; z-index: -2; }
.moment .kb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kb 30s ease-in-out infinite alternate; }
.moment::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(24, 24, 14, .1) 0%, rgba(24, 24, 14, .34) 30%, rgba(24, 24, 14, .82) 52%, rgba(24, 24, 14, .95) 100%); }
.moment-in { padding-block: clamp(44px, 9vw, 96px); }
.moment h2 { font-size: clamp(2.5rem, 10.6vw, 5.6rem); line-height: .96; max-width: 14ch; width: fit-content; }
.moment p { margin-top: 16px; font-size: clamp(1.04rem, 3.4vw, 1.24rem); line-height: 1.45; max-width: 40ch; color: #eeecdc; }
.moment .kicker { color: var(--lime); }

/* ---------- our work ---------- */
.work-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.work-grid .ph { aspect-ratio: 4 / 3; }
.work-grid figcaption { margin-top: 12px; }
.work-grid figcaption b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.2rem; line-height: 1.15; }
.work-grid figcaption span { display: block; margin-top: 4px; font-size: .94rem; line-height: 1.42; color: var(--fg-soft); }

/* ---------- process ---------- */
.flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; counter-reset: flow; border-top: 2px solid var(--ink); }
.flow > li { counter-increment: flow; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 4px 14px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: start; }
.flow > li::before { content: "0" counter(flow); font-family: var(--display); font-size: 2.3rem; line-height: .9; color: var(--straw); grid-row: span 2; }
.flow h3 { grid-column: 2; }
.flow p { grid-column: 2; font-size: .98rem; line-height: 1.45; color: var(--fg-soft); }
.t-moss .flow, .t-ink .flow { border-top-color: var(--lime); }
.t-moss .flow > li, .t-ink .flow > li { border-color: var(--line-dark); }
.t-moss .flow > li::before, .t-ink .flow > li::before { color: var(--lime); }
.t-moss .flow p, .t-ink .flow p { color: var(--on-dark-soft); }
.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 6vw, 72px); align-items: start; }
.duo .ph { aspect-ratio: 4 / 3.4; }
.duo .ph.tall { aspect-ratio: 4 / 4.6; }

/* ---------- towns ---------- */
.town-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 2px solid var(--lime); }
.town-card { display: grid; grid-template-columns: 96px minmax(0, 1fr) 24px; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-dark); min-height: 96px; }
.town-card .ph { aspect-ratio: 1; border-radius: var(--r-s); }
.town-card .ph img { transition: transform .7s var(--ease); }
.town-card:hover .ph img { transform: scale(1.07); }
.town-txt b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.46rem; line-height: 1.05; }
.town-txt span { display: block; margin-top: 5px; font-size: .88rem; line-height: 1.35; color: var(--on-dark-soft); }
.town-card > svg { width: 22px; height: 22px; color: var(--lime); transition: transform .25s var(--ease); }
.town-card:hover > svg { transform: translateX(5px); }
.t-paper .town-list, .t-card .town-list { border-top-color: var(--ink); }
.t-paper .town-card, .t-card .town-card { border-color: var(--line); }
.t-paper .town-txt span, .t-card .town-txt span { color: var(--fg-soft); }
.t-paper .town-card > svg, .t-card .town-card > svg { color: var(--straw-lo); }
.area-note { margin-top: 22px; font-size: .95rem; line-height: 1.5; color: var(--on-dark-soft); max-width: 60ch; }
.t-paper .area-note, .t-card .area-note { color: var(--fg-soft); }

/* ---------- FAQ ---------- */
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 14px; align-items: center; padding: 20px 0; font-family: var(--display); font-size: clamp(1.16rem, 4.2vw, 1.42rem); line-height: 1.15; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { width: 32px; height: 32px; border-radius: 999px; background: var(--ink); position: relative; transition: background-color .25s var(--ease), transform .3s var(--ease); }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 9px; right: 9px; top: 15px; height: 2px; border-radius: 2px; background: var(--lime); }
.faq summary i::after { transform: rotate(90deg); transition: transform .3s var(--ease); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq summary:hover i { background: var(--leaf); }
.faq .ans { padding: 0 46px 22px 0; }
.faq .ans p { font-size: 1rem; line-height: 1.55; color: var(--fg-soft); max-width: 62ch; }
.faq .ans p + p { margin-top: 10px; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(2.3rem, 9.6vw, 5rem); line-height: .98; max-width: 16ch; margin-inline: auto; }
.cta-band .lede { margin: 16px auto 0; max-width: 40ch; }
.cta-band .cta-row { margin-top: 26px; }
.cta-band .btn { --bg: var(--ink); --fg-b: var(--on-dark); }
.cta-band .btn:hover { background: var(--moss); }
.cta-band .btn-line { --bg: transparent; --fg-b: var(--ink); }
.cta-band .btn-line:hover { background: var(--ink); color: var(--on-dark); }

/* ---------- contact / form ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 6vw, 64px); align-items: start; }
.contact-side .big-tel { display: inline-block; font-family: var(--display); font-size: clamp(2.2rem, 10vw, 3.4rem); line-height: 1; margin: 6px 0 4px; color: var(--lime); }
.t-paper .contact-side .big-tel, .t-card .contact-side .big-tel { color: var(--leaf); }
.contact-side .lede { margin-top: 12px; }
.hours { margin-top: 24px; border-top: 2px solid var(--lime); }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line-dark); font-size: .98rem; }
.hours dt { font-weight: 600; }
.hours dd { color: var(--on-dark-soft); font-variant-numeric: lining-nums tabular-nums; }
.hours .is-today dt, .hours .is-today dd { color: var(--lime); font-weight: 700; }
.t-paper .hours, .t-card .hours { border-top-color: var(--ink); }
.t-paper .hours div, .t-card .hours div { border-color: var(--line); }
.t-paper .hours dd, .t-card .hours dd { color: var(--fg-soft); }
.t-paper .hours .is-today dt, .t-paper .hours .is-today dd, .t-card .hours .is-today dt, .t-card .hours .is-today dd { color: var(--leaf); }
.form-card { background: var(--card); color: var(--fg); border-radius: var(--r); padding: clamp(20px, 5vw, 38px); box-shadow: var(--shadow); }
.form-card h3 { font-size: clamp(1.6rem, 5.6vw, 2.1rem); line-height: 1.05; color: var(--fg); }
.form-card > p { margin-top: 8px; font-size: .98rem; color: var(--fg-soft); }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 20px; }
.fld { display: grid; gap: 6px; }
.fld label { font-size: .82rem; font-weight: 700; letter-spacing: .04em; }
.fld label span { font-weight: 500; color: var(--fg-soft); }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 52px; padding: 13px 14px; border-radius: var(--r-s); border: 1.5px solid rgba(24, 24, 24, .32); background-color: #fff; color: var(--fg); font-size: 1rem; line-height: 1.3; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.fld textarea { min-height: 112px; resize: vertical; }
.fld select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(168, 230, 58, .6); }
.fld input::placeholder, .fld textarea::placeholder { color: #7a7a66; }
.hp-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-card .btn { width: 100%; margin-top: 18px; --bg: var(--ink); --fg-b: var(--on-dark); }
.form-card .btn:hover { background: var(--leaf); }
.form-card .btn[disabled] { opacity: .6; transform: none; cursor: progress; }
.form-fine { margin-top: 12px; font-size: .8rem; line-height: 1.45; color: var(--fg-soft); }
.form-msg { margin-top: 14px; font-size: .98rem; line-height: 1.45; }
.form-msg:empty { display: none; }
.form-msg.ok { padding: 14px 16px; border-radius: var(--r-s); background: var(--lime); color: var(--ink); font-weight: 600; }
.form-msg p { font-weight: 700; margin-bottom: 8px; }
.form-msg a { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 8px; border-radius: 999px; border: 2px solid var(--ink); font-weight: 700; padding: 8px 14px; text-align: center; }
.form-msg a:first-of-type { background: var(--lime); border-color: var(--lime); }
.map { position: relative; border-radius: var(--r); overflow: hidden; background: var(--olive); aspect-ratio: 4 / 3.4; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- footer ---------- */
.ftr { position: relative; background: var(--ink); color: var(--on-dark); padding-top: clamp(56px, 9vw, 96px); padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.ftr-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.ftr .brand-w { font-size: 2.3rem; }
.ftr .brand-s { font-size: .64rem; margin-top: 8px; }
.ftr-nap { margin-top: 18px; font-size: 1rem; line-height: 1.6; font-style: normal; color: var(--on-dark-soft); }
.ftr-nap strong { color: var(--on-dark); }
.ftr-nap a { color: var(--lime); font-weight: 700; }
.ftr h2 { font-family: var(--body); font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--lime); margin-bottom: 12px; }
.ftr-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 20px; }
.ftr-cols a { display: inline-flex; align-items: center; min-height: 36px; font-size: .97rem; color: var(--on-dark-soft); transition: color .2s var(--ease); }
.ftr-cols a:hover { color: var(--lime); }
.ftr-hours { font-size: .95rem; line-height: 1.7; color: var(--on-dark-soft); }
.ftr-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-dark); display: grid; gap: 8px; font-size: .8rem; line-height: 1.5; color: #b4b29c; }
.ftr-base a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- phone action bar ---------- */
.actbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 10px max(12px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right)); background: rgba(31, 32, 15, .94); border-top: 1px solid var(--line-dark); transform: translateY(110%); transition: transform .35s var(--ease); }
.actbar.show { transform: none; }
.actbar .btn { min-height: 50px; padding: 10px 12px; font-size: .98rem; }

/* ---------- inner page hero ---------- */
.phero { position: relative; min-height: clamp(430px, 96vw, 600px); display: flex; flex-direction: column; justify-content: flex-end; color: var(--on-dark); background: var(--moss-deep); overflow: hidden; isolation: isolate; }
.phero .kb { position: absolute; inset: 0; z-index: -2; }
.phero .kb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kb 30s ease-in-out infinite alternate; }
.phero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(24, 24, 14, .9) 0%, rgba(24, 24, 14, .76) 30%, rgba(24, 24, 14, .76) 58%, rgba(31, 32, 15, .96) 100%); }
.phero-in { padding-top: calc(var(--hdr-h) + env(safe-area-inset-top) + 34px); padding-bottom: clamp(40px, 8vw, 76px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; width: fit-content; font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: #e8e6d4; margin-bottom: 18px; }
.crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--lime); }
.phero h1 { font-size: clamp(2.5rem, 10.6vw, 5rem); line-height: .98; letter-spacing: -.018em; max-width: 15ch; width: fit-content; }
.phero .hero-sub { margin: 16px 0 0; max-width: 44ch; text-align: left; }
.phero .cta-row { justify-content: flex-start; margin-top: 24px; }
.credit { margin-top: 18px; font-size: .7rem; line-height: 1.4; color: #dddbc8; width: fit-content; }
.credit a { text-decoration: underline; text-underline-offset: 2px; }
.phero-plain { min-height: 0; }
.phero-plain::after { display: none; }

/* ---------- prose blocks on inner pages ---------- */
.prose { display: grid; gap: 14px; max-width: 64ch; }
.prose p { font-size: 1.04rem; line-height: 1.62; color: var(--fg-soft); }
.t-moss .prose p, .t-ink .prose p { color: var(--on-dark-soft); }
.prose p strong { color: var(--fg); }
.t-moss .prose p strong, .t-ink .prose p strong { color: var(--on-dark); }
.prose a:not(.btn) { color: var(--leaf); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.t-moss .prose a:not(.btn), .t-ink .prose a:not(.btn) { color: var(--lime); }
.prose h2 { margin-bottom: 6px; }
.prose h3 { margin-top: 10px; }
.incl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 2px solid var(--lime); }
.incl > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line-dark); align-items: start; }
.incl > li > svg { width: 24px; height: 24px; color: var(--lime); margin-top: 2px; }
.incl b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.18rem; line-height: 1.15; }
.incl span { display: block; margin-top: 4px; font-size: .96rem; line-height: 1.45; color: var(--on-dark-soft); }
.t-paper .incl, .t-card .incl { border-top-color: var(--ink); }
.t-paper .incl > li, .t-card .incl > li { border-color: var(--line); }
.t-paper .incl > li > svg, .t-card .incl > li > svg { color: var(--leaf); }
.t-paper .incl span, .t-card .incl span { color: var(--fg-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips a { display: inline-flex; align-items: center; gap: .4em; min-height: 46px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--ink); font-weight: 700; font-size: .95rem; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.chips a:hover { background: var(--ink); color: var(--on-dark); }
.t-moss .chips a, .t-ink .chips a { border-color: rgba(244, 241, 227, .55); }
.t-moss .chips a:hover, .t-ink .chips a:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.t-lime .chips a:hover { background: var(--ink); color: var(--lime); }
.mini-year { margin-top: 26px; padding: 18px; border-radius: var(--r); background: var(--moss-deep); color: var(--on-dark); border: 1px solid var(--line-dark); }
.mini-year h3 { font-size: 1.18rem; margin-bottom: 12px; }
.mini-year p { margin-top: 12px; font-size: .92rem; line-height: 1.45; color: var(--on-dark-soft); }
.note-card { padding: clamp(20px, 5vw, 34px); border-radius: var(--r); background: var(--lime); color: var(--ink); }
.note-card h3 { font-size: clamp(1.4rem, 5vw, 1.8rem); }
.note-card p { margin-top: 10px; font-size: 1rem; line-height: 1.5; }
.note-card .btn { margin-top: 18px; --bg: var(--ink); --fg-b: var(--on-dark); }
.note-card .btn:hover { background: var(--moss); }
.own-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: center; }
.own-card .ph { aspect-ratio: 316 / 420; border-radius: var(--r-s); }
.own-card p { font-size: .98rem; line-height: 1.5; }
.hub-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.hub-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.hub-item .ph { aspect-ratio: 16 / 10; }
.hub-item .num { font-family: var(--display); font-size: 1.05rem; color: var(--straw-lo); }
.hub-item h2 { font-size: clamp(1.7rem, 6.2vw, 2.3rem); margin-top: 2px; }
.hub-item p { margin-top: 8px; font-size: 1rem; line-height: 1.55; color: var(--fg-soft); }
.hub-item .link { margin-top: 12px; }
.e404 { min-height: 80svh; display: grid; align-items: center; text-align: center; padding-top: calc(var(--hdr-h) + 40px); }
.e404 h1 { font-size: clamp(2.6rem, 11vw, 5.2rem); line-height: .98; }
.e404 .cta-row { margin-top: 26px; }

/* ---------- reveals ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.is-in, .no-io .rv { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; }

/* ---------- 600 ---------- */
@media (min-width: 600px) {
  .hdr-call .tel { display: inline; }
  .hdr-call { padding: 0 18px; }
  .svc-grid { gap: 30px 18px; }
  .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .yr-months .short { display: none; }
  .yr-months .long { display: inline; }
  .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .form-grid .full { grid-column: 1 / -1; }
  .ftr-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .town-card { grid-template-columns: 120px minmax(0, 1fr) 24px; }
  .hub-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px 26px; }
  .own-card { grid-template-columns: 132px minmax(0, 1fr); }
}

/* ---------- 900 ---------- */
@media (min-width: 900px) {
  :root { --hdr-h: 80px; }
  .para { display: block; max-width: 62ch; }
  .para > p { display: inline; }
  .para > p + p::before { content: " "; }
  .sec-head.two { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: end; }
  .intro { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .intro.swap > :first-child { order: 2; }
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .duo.wide-l { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .duo.swap > :first-child { order: 2; }
  .duo.stick > :last-child { position: sticky; top: calc(var(--hdr-h) + 24px); }
  .svc-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 44px 22px; }
  .svc-grid > li { grid-column: span 3; }
  .svc-grid > li:nth-child(1), .svc-grid > li:nth-child(6), .svc-grid > li:nth-child(7), .svc-grid > li:nth-child(8) { grid-column: span 6; }
  .svc-card .ph, .svc-grid > li:nth-child(1) .ph, .svc-grid > li:nth-child(8) .ph { aspect-ratio: auto; height: clamp(300px, 27vw, 380px); }
  .flow.flow-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; border-top: 0; }
  .flow.flow-row > li { grid-template-columns: minmax(0, 1fr); border-bottom: 0; border-top: 2px solid var(--ink); padding: 20px 0 0; gap: 8px; }
  .t-moss .flow.flow-row > li, .t-ink .flow.flow-row > li { border-top-color: var(--lime); }
  .flow.flow-row > li::before { grid-row: auto; font-size: 3rem; }
  .flow.flow-row h3, .flow.flow-row p { grid-column: 1; }
  .town-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; border-top: 0; }
  .town-list > li { border-top: 2px solid var(--lime); }
  .t-paper .town-list > li, .t-card .town-list > li { border-top-color: var(--ink); }
  .town-card { border-bottom: 0; padding: 16px 0 26px; grid-template-columns: 148px minmax(0, 1fr) 24px; }
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .ftr-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 60px; }
  .ftr { padding-bottom: 44px; }
  .actbar { display: none; }
  .phero { min-height: clamp(520px, 46vw, 640px); }
  .phero::after { background: linear-gradient(90deg, rgba(24, 24, 14, .9) 0%, rgba(24, 24, 14, .8) 46%, rgba(24, 24, 14, .34) 100%), linear-gradient(180deg, rgba(24, 24, 14, .6) 0%, rgba(24, 24, 14, 0) 30%, rgba(31, 32, 15, .5) 100%); }
  .hub-item .ph { aspect-ratio: 16 / 9.4; }
  .faq-duo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
  .faq-duo .sec-head { position: sticky; top: calc(var(--hdr-h) + 24px); margin-bottom: 0; }
  .yr-row { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: center; gap: 18px; padding-top: 16px; }
  .yr-row a { margin-bottom: 0; }
  .yr-months { margin-left: 248px; }
  .yr-now { left: calc(clamp(14px, 3.4vw, 34px) + 248px); }
  .yr-track, .yr-bar { height: 20px; }
  .yr-today { grid-template-columns: minmax(0, .5fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: 22px 28px; }
  .work-grid { gap: 26px; }
  .work-grid figure:nth-child(2) { margin-top: 46px; }
}

/* ---------- 1100: desktop nav ---------- */
@media (min-width: 1100px) {
  #burger { display: none; }
  .drawer { display: none; }
  .nav { display: flex; align-items: center; gap: 4px; }
  .nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-weight: 600; font-size: .98rem; }
  .nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; border-radius: 3px; background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease); }
  .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
  .hdr-call { height: 48px; padding: 0 22px; }
  .town-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 36px; }
  .town-card { grid-template-columns: 112px minmax(0, 1fr) 22px; }
  .hub-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub-list.hub-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-vid { display: none; }
  .hero-media img, .moment .kb img, .phero .kb img { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  .rv .yr-bar { transform: none; transition: none; }
  .btn, .svc-card .ph img, .town-card .ph img { transition: none; }
  .motion-btn { display: none; }
}
@media print {
  .hdr, .actbar, .drawer, .motion-btn, .hero-media video { display: none !important; }
  .rv { opacity: 1; transform: none; }
}