/* =============================================================
   Woodney Contracting — "Field Ledger"
   Original heritage-editorial system. Arborist + fencing, Waikato.
   Fraunces + Hanken Grotesk · kraft paper · pine + timber ·
   growth-ring + wax-seal motifs.
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  --paper:   #f3eee2;   /* warm kraft page */
  --paper-2: #eae1cf;   /* deeper panel */
  --paper-3: #e2d7c0;
  --ink:     #191d14;   /* near-black green */
  --ink-2:   #262b1f;
  --pine:    #275639;   /* deep green — accent on light */
  --pine-dk: #1c4029;
  --moss:    #3d7a52;   /* links / hover */
  --tan:     #cdad7e;   /* timber accent on dark */
  --tan-dk:  #bd9760;
  --bark:    #6d4a2c;   /* brown */
  --line:    #d7cbb2;   /* hairline on paper */
  --line-2:  #c8ba9c;
  --white:   #fff;

  --text:    #23281d;
  --muted:   #5c6551;
  --on-dark: #efeadb;
  --on-dark-muted: #b7ae96;

  --accent:    var(--pine);   /* context-switched: pine on light, tan on dark */
  --accent-dk: var(--pine-dk);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1720px;
  --gutter: clamp(1.15rem, 4.5vw, 4rem);
  --sect: clamp(3.5rem, 8vw, 7rem);
  --ring-focus: 0 0 0 3px rgba(39,86,57,.35);
}

*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms!important;transition-duration:.001ms!important} }

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  font-size: 1.04rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* faint paper grain */
  background-image: radial-gradient(rgba(120,100,60,.05) 1px, transparent 1px);
  background-size: 4px 4px;
}
img,svg { display:block; max-width:100%; height:auto; }
a { color: var(--pine); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--pine-dk); }
strong { font-weight: 700; }

/* ---------- Type ---------- */
h1,h2,h3,h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.011em;
  color: var(--ink);
  font-optical-sizing: auto;
  text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 6.6vw, 5rem); font-weight: 500; }
h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 500; }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.serif-it { font-family: var(--serif); font-style: italic; font-weight: 400; }
p { text-wrap: pretty; }
.lead { font-size: clamp(1.1rem, 1.9vw, 1.3rem); line-height: 1.55; color: var(--muted); }
.on-dark .lead, .lead--dark,
.section--ink .lead, .section--pine .lead { color: var(--on-dark-muted); }

/* index label + kicker (editorial eyebrow) */
.idx { font-family: var(--sans); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); letter-spacing: .02em; }
.kicker {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--sans); font-weight: 600; text-transform: uppercase;
  letter-spacing: .24em; font-size: .74rem; color: var(--accent);
}
.kicker::before { content:""; width: 30px; height: 1px; background: var(--accent); }
.kicker--center { justify-content: center; }

/* ---------- Layout ---------- */
.wrap { width:100%; max-width: var(--wrap); margin-inline:auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sect); }
.section--paper2 { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--on-dark); }
.section--pine { background: var(--pine); color: var(--on-dark); }
.section--ink h1,.section--ink h2,.section--ink h3,
.section--pine h1,.section--pine h2,.section--pine h3 { color: #fff; }
.rule { height:1px; background: var(--line); border:0; }
.center { text-align:center; }

/* context accent switch: dark backgrounds use timber tan */
.section--ink, .section--pine, .topbar, .foot, .idxrow--dark, .callout { --accent: var(--tan); --accent-dk: var(--tan-dk); }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--pine); --fg: #fff;
  display:inline-flex; align-items:center; gap:.6rem;
  font-family: var(--sans); font-weight: 600; font-size: .97rem; letter-spacing: .01em;
  padding: .92rem 1.5rem; background: var(--bg); color: var(--fg);
  border: 1px solid var(--bg); cursor:pointer; text-decoration:none;
  border-radius: 2px; transition: transform .16s ease, filter .2s ease, background .2s;
  position: relative;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); color: var(--fg); }
.btn:focus-visible { outline:none; box-shadow: var(--ring-focus); }
.btn svg { width: 1.05em; height: 1.05em; }
.btn--lg { padding: 1.08rem 1.9rem; font-size: 1.05rem; }
.btn--line { --bg: transparent; --fg: var(--ink); border-color: var(--line-2); }
.btn--line:hover { --bg: var(--ink); --fg: #fff; filter:none; }
.btn--tan  { --bg: var(--tan); --fg: var(--ink); border-color: var(--tan); }
.btn--onink { --bg: transparent; --fg: #fff; border-color: rgba(255,255,255,.4); }
.btn--onink:hover { --bg: #fff; --fg: var(--ink); filter:none; }
.btn-row { display:flex; flex-wrap:wrap; gap:.8rem; }
.center .btn-row { justify-content:center; }

/* ---------- Growth-ring + seal motifs ---------- */
.rings { position:absolute; inset:auto; pointer-events:none; color: var(--tan); opacity:.55; }
.seal {
  --sz: 118px;
  width: var(--sz); height: var(--sz); border-radius: 50%;
  display:grid; place-items:center; text-align:center;
  background: var(--ink); color: var(--tan);
  border: 2px solid var(--tan);
  box-shadow: 0 0 0 5px var(--ink), 0 0 0 6px rgba(205,173,126,.5);
  font-family: var(--sans); text-transform: uppercase;
}
.seal b { display:block; font-family: var(--serif); font-style: italic; font-weight:500; font-size: 1.55rem; color:#fff; letter-spacing:0; line-height:1; text-transform:none; }
.seal span { display:block; font-size:.56rem; letter-spacing:.2em; margin-top:.28rem; color: var(--tan); }
.seal small { display:block; font-size:.5rem; letter-spacing:.28em; margin-top:.28rem; color: var(--on-dark-muted); }

/* framed figure */
.frame { position: relative; }
.frame img { border: 1px solid var(--line-2); box-shadow: 14px 14px 0 -2px var(--paper-3), 14px 14px 0 -1px var(--line-2); }
.section--ink .frame img, .section--pine .frame img { box-shadow: 14px 14px 0 -2px rgba(0,0,0,.25); border-color: rgba(255,255,255,.15); }
.frame--tick::before { /* corner ring ornament */
  content:""; position:absolute; top:-26px; left:-26px; width:64px; height:64px;
  border: 1px solid var(--tan); border-radius:50%;
  background: radial-gradient(circle, transparent 40%, transparent 41%);
  box-shadow: inset 0 0 0 6px transparent, 0 0 0 6px transparent;
}

/* ---------- Topbar ---------- */
.topbar { background: var(--ink); color: var(--on-dark-muted); font-size: .82rem; }
.topbar .wrap { display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height: 40px; padding-block:.4rem; }
.topbar a { color: var(--on-dark-muted); text-decoration:none; }
.topbar a:hover { color: var(--tan); }
.topbar .tb-left { display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; }
.topbar .tb-right { display:flex; gap:1rem; align-items:center; }
.topbar strong { color: var(--tan); font-weight:600; letter-spacing:.02em; }

/* ---------- Masthead ---------- */
.masthead { position: sticky; top:0; z-index:60; background: var(--paper); border-bottom: 1px solid var(--line); transition: box-shadow .2s, padding .2s; }
.masthead.pinned { box-shadow: 0 10px 30px -22px rgba(25,29,20,.6); }
.masthead .wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height: 82px; }
.brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand img { height: 52px; width: auto; }
.brand-tx { line-height:1; }
.brand-tx b { display:block; font-family: var(--serif); font-weight:600; font-size: 1.32rem; color: var(--ink); letter-spacing:-.01em; }
.brand-tx span { display:block; font-size:.64rem; letter-spacing:.34em; text-transform:uppercase; color: var(--pine); font-weight:600; margin-top:2px; }

.nav { display:flex; align-items:center; gap:.15rem; }
.nav > a, .nav > .has > a { font-family: var(--sans); font-weight:500; font-size:.95rem; color: var(--ink); text-decoration:none; padding:.5rem .7rem; border-radius:2px; transition: color .15s; }
.nav > a:hover, .nav > .has > a:hover { color: var(--pine); }
.has { position: relative; }
.has > a::after { content:"+"; margin-left:.35em; color: var(--pine); font-weight:600; }
.menu { position:absolute; top: calc(100% + 8px); left:0; min-width: 262px; background: var(--paper); border:1px solid var(--line-2); padding:.5rem; opacity:0; visibility:hidden; transform: translateY(6px); transition: .16s; box-shadow: 0 24px 50px -26px rgba(25,29,20,.55); }
.has:hover .menu, .has:focus-within .menu { opacity:1; visibility:visible; transform: translateY(0); }
.menu a { display:flex; gap:.6rem; align-items:baseline; padding:.55rem .7rem; color: var(--text); text-decoration:none; font-size:.94rem; }
.menu a .idx { font-size:.72rem; min-width:1.4em; }
.menu a:hover { color: var(--pine); background: var(--paper-2); }
.menu-head { font-family: var(--sans); text-transform:uppercase; letter-spacing:.1em; font-size:1rem; font-weight:700; color: var(--pine); padding:.8rem .7rem .4rem; background:none; border:0; width:100%; text-align:left; cursor:default; }
.menu-head::after { content:none; }

.mast-cta { display:flex; align-items:center; gap:1rem; }
.mast-phone { font-family: var(--serif); font-weight:600; font-size:1.12rem; color: var(--ink); text-decoration:none; white-space:nowrap; }
.mast-phone:hover { color: var(--pine); }
.burger { display:none; width:46px; height:46px; padding:0; background:none; border:1px solid var(--line-2); border-radius:2px; cursor:pointer; align-items:center; justify-content:center; }
.burger span, .burger span::before, .burger span::after { display:block; width:22px; height:2px; background: var(--ink); border-radius:2px; position:relative; transition:transform .2s ease, background .2s ease; }
.burger span::before,.burger span::after { content:""; position:absolute; left:0; }
.burger span::before{top:-6px} .burger span::after{top:6px}
.burger[aria-expanded="true"] span { background:transparent; }
.burger[aria-expanded="true"] span::before { top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after { top:0; transform:rotate(-45deg); }

/* ---------- Hero (editorial split) ---------- */
.hero { position: relative; padding-block: clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6rem); overflow:clip; }
.hero .wrap { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.hero__est { font-family: var(--sans); text-transform:uppercase; letter-spacing:.28em; font-size:.72rem; color: var(--muted); }
.hero h1 { margin:.9rem 0 0; }
.hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--pine); }
.hero__lead { margin-top: 1.3rem; max-width: 34rem; }
.hero .btn-row { margin-top: 1.8rem; }
.hero__meta { margin-top: 2rem; display:flex; gap: 1.6rem; flex-wrap:wrap; border-top:1px solid var(--line); padding-top: 1.3rem; }
.hero__meta div { }
.hero__meta dt { font-family: var(--sans); text-transform:uppercase; letter-spacing:.16em; font-size:.66rem; color: var(--muted); }
.hero__meta dd { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); margin-top:.1rem; }
.hero__fig { position: relative; }
.hero__fig img { width:100%; aspect-ratio: 4/5; object-fit: cover; border:1px solid var(--line-2); }
.hero__fig .seal { position:absolute; right: -22px; bottom: -22px; }
.hero__rings { position:absolute; top:-40px; right:-30px; width:150px; opacity:.5; z-index:-1; }

/* ---------- Trades marquee (static ledger strip) ---------- */
.trades { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: var(--paper-2); }
.trades .wrap { display:flex; flex-wrap:wrap; gap:.7rem 2.4rem; padding-block:1.05rem; align-items:center; justify-content:center; }
.trades a { font-family: var(--serif); font-style: italic; font-size:1.05rem; color: var(--ink); text-decoration:none; transition: color .15s; }
.trades a:hover { color: var(--pine); }
@media (max-width:620px){ .trades .wrap { gap:.6rem 1.6rem; } }

/* ---------- Section head ---------- */
.shead { max-width: 62ch; }
.shead.center { margin-inline:auto; }
.shead h2 { margin-top:.7rem; }
.shead p { margin-top: .8rem; }

/* ---------- Services index ---------- */
.svc-index { border-top:1px solid var(--line-2); margin-top: 2.4rem; }
.svc-group-label { display:flex; align-items:center; gap:1rem; padding:1.4rem 0 .4rem; font-family: var(--sans); text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; color: var(--muted); }
.svc-row {
  display:grid; grid-template-columns: 3.2rem 1fr auto; gap: 1.4rem; align-items:center;
  padding: 1.35rem .4rem; border-bottom:1px solid var(--line); text-decoration:none; color: var(--ink);
  transition: background .18s, padding .18s;
}
.svc-row:hover { background: var(--paper-2); padding-left: 1rem; color: var(--ink); }
.svc-row__num { font-family: var(--sans); font-weight:700; font-variant-numeric: tabular-nums; color: var(--tan-dk); font-size:.95rem; }
.svc-row__main { display:flex; flex-direction:column; gap:.2rem; }
.svc-row__name { font-family: var(--serif); font-size: clamp(1.4rem,2.6vw,1.9rem); font-weight:500; line-height:1.05; }
.svc-row:hover .svc-row__name { color: var(--pine); }
.svc-row__desc { color: var(--muted); font-size:.95rem; }
.svc-row__end { display:flex; align-items:center; gap:1.2rem; }
.svc-row__thumb { width: 76px; height: 76px; border-radius:50%; object-fit:cover; border:1px solid var(--line-2); filter: saturate(.92); }
.svc-row__arrow { width: 30px; height:30px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line-2); color: var(--pine); transition: transform .18s, background .18s, color .18s; }
.svc-row:hover .svc-row__arrow { background: var(--pine); color:#fff; border-color: var(--pine); transform: translateX(4px); }
.svc-row__arrow svg { width:15px; height:15px; }

/* ---------- Service overlay cards ---------- */
.cards { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.4rem); margin-top:1.5rem; }
.svc { position:relative; display:flex; flex-direction:column; min-height: 300px; overflow:hidden; text-decoration:none; color:#fff; background: var(--ink); border:1px solid var(--line-2); }
.svc img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition: transform .55s ease; filter: saturate(.95); }
.svc:hover img { transform: scale(1.05); }
.svc::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(20,24,15,.04) 24%, rgba(20,24,15,.5) 60%, rgba(20,24,15,.93) 100%); }
.svc__b { position:relative; z-index:2; margin-top:auto; padding:1.4rem; }
.svc__tag { font-family: var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.2em; font-size:.66rem; color: var(--tan); }
.svc h3 { color:#fff; font-family: var(--serif); font-weight:500; font-size:1.55rem; line-height:1.05; margin:.35rem 0 .1rem; }
.svc__go { display:inline-flex; align-items:center; gap:.45rem; font-size:.87rem; color: var(--on-dark-muted); margin-top:.55rem; }
.svc:hover .svc__go { color:#fff; }
.svc__go svg { width:1em; transition: transform .2s; }
.svc:hover .svc__go svg { transform: translateX(4px); }
.svc--cta { background: var(--pine); border-color: var(--pine-dk); transition: filter .2s ease, transform .2s ease; }
.svc--cta::after { display:none; }
.svc--cta:hover { filter: brightness(1.08); transform: translateY(-3px); }
.svc--cta .svc__tag { color: var(--tan); }
.svc--cta h3 { color:#fff; }
.svc--cta .svc__go { color: rgba(255,255,255,.82); }
.svc--cta:hover .svc__go { color:#fff; }
.svc--cta .rings { position:absolute; z-index:1; top:-46px; right:-34px; width:158px; color: var(--tan); opacity:.4; }

.cards--4 { grid-template-columns: repeat(4,1fr); }
.cards--4 .svc { min-height: 240px; }
.cards--4 .svc h3 { font-size: 1.3rem; }

/* ---------- Reviews ---------- */
.rating-line { display:flex; align-items:center; gap:1rem 1.4rem; flex-wrap:wrap; margin-top:1.1rem; }
.rating-line .score { font-family: var(--serif); font-size: 2.3rem; line-height:1; color: var(--ink); }
.stars { color: var(--tan-dk); letter-spacing:.12em; font-size:1.05rem; }
.rating-line .from { color: var(--muted); font-size:.95rem; }
.rating-line .from a { color: var(--pine); text-decoration:none; font-weight:600; }
.rating-line .from a:hover { text-decoration:underline; }
.reviews { display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(1rem,2vw,1.5rem); margin-top:2.2rem; }
.review { background: var(--paper); border:1px solid var(--line-2); padding: 1.7rem; display:flex; flex-direction:column; }
.review .stars { margin-bottom:.8rem; }
.review p { font-family: var(--serif); font-weight:400; font-size:1.12rem; line-height:1.5; color: var(--text); }
.review .who { margin-top: auto; padding-top:1.1rem; }
.review .who b { display:block; font-family: var(--sans); font-weight:600; font-size:.92rem; letter-spacing:.04em; color: var(--pine); }
.review .who span { font-size:.8rem; color: var(--muted); }
@media (max-width:720px){ .reviews { grid-template-columns:1fr; } }

/* ---------- Pillars (why) ---------- */
.pillars { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,3vw,3rem); margin-top:2.6rem; }
.pillar { position:relative; padding-top: 1.4rem; border-top: 2px solid var(--ink); }
.pillar .idx { font-size:.9rem; }
.pillar h3 { margin:.6rem 0 .5rem; }
.pillar p { color: var(--muted); font-size:.99rem; }
.section--ink .pillar, .section--pine .pillar { border-top-color: var(--tan); }
.section--ink .pillar p, .section--pine .pillar p { color: var(--on-dark-muted); }

/* ---------- Feature split ---------- */
.feature { display:grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.feature--rev .feature__fig { order:2; }
.feature__fig img { width:100%; aspect-ratio: 5/4; object-fit: cover; }
.checks { list-style:none; padding:0; margin-top:1.3rem; display:grid; gap:.85rem; }
.checks li { display:grid; grid-template-columns: auto 1fr; gap:.8rem; align-items:start; padding-bottom:.85rem; border-bottom:1px solid var(--line); }
.checks li:last-child { border-bottom:0; }
.checks li::before { content:"—"; color: var(--accent); font-family: var(--serif); font-weight:700; line-height:1.4; }

/* ---------- Flow (process) ---------- */
.flow { display:grid; gap: 0; margin-top:1.5rem; counter-reset: fl; }
.flow__step { display:grid; grid-template-columns: 4.5rem 1fr; gap:1.3rem; padding: 1.5rem 0; border-top:1px solid var(--line-2); }
.section--ink .flow__step, .section--pine .flow__step { border-top-color: rgba(255,255,255,.16); }
.flow__step:last-child { border-bottom:1px solid var(--line-2); }
.section--ink .flow__step:last-child, .section--pine .flow__step:last-child { border-bottom-color: rgba(255,255,255,.16); }
.flow__n { counter-increment: fl; font-family: var(--serif); font-style:italic; font-size: 2.2rem; color: var(--accent); line-height:1; }
.flow__n::before { content: "0" counter(fl); }
.flow__step h3 { margin-bottom:.3rem; }
.flow__step p { color: var(--muted); font-size:.98rem; }
.section--ink .flow__step p, .section--pine .flow__step p { color: var(--on-dark-muted); }

/* ---------- Area (editorial town list) ---------- */
.area-list { margin-top:1.6rem; font-family: var(--serif); font-size: clamp(1.3rem,3vw,2rem); line-height:1.5; color: var(--ink); font-weight:400; }
.section--ink .area-list, .section--pine .area-list { color:#fff; }
.area-list b { font-weight:400; }
.area-list .sep { color: var(--accent); font-style: italic; padding: 0 .35em; }

/* ---------- Q&A ---------- */
.qa { margin-top: 2rem; border-top:1px solid var(--line-2); }
.qa details { border-bottom:1px solid var(--line); }
.qa summary { list-style:none; cursor:pointer; display:grid; grid-template-columns: 2.6rem 1fr auto; gap:1rem; align-items:center; padding:1.25rem .2rem; font-family: var(--serif); font-size: clamp(1.15rem,2vw,1.4rem); font-weight:500; color: var(--ink); }
.qa summary::-webkit-details-marker{display:none}
.qa summary .idx { font-family: var(--sans); font-size:.8rem; }
.qa summary .pm { width:26px; height:26px; position:relative; }
.qa summary .pm::before,.qa summary .pm::after { content:""; position:absolute; background: var(--pine); left:50%; top:50%; transform: translate(-50%,-50%); }
.qa summary .pm::before { width:15px; height:2px; }
.qa summary .pm::after { width:2px; height:15px; transition: transform .2s; }
.qa details[open] summary .pm::after { transform: translate(-50%,-50%) scaleY(0); }
.qa details[open] summary { color: var(--pine); }
.qa__a { padding: 0 .2rem 1.3rem 5.2rem; color: var(--muted); max-width: 70ch; }
.qa__a p + p { margin-top:.7rem; }
@media (max-width:600px){ .qa__a { padding-left: .2rem; } }

/* ---------- Callout (CTA) ---------- */
.callout { position:relative; background: var(--ink); color:#fff; padding: clamp(2.4rem,6vw,4rem); overflow:hidden; text-align:center; }
.callout h2 { color:#fff; }
.callout .lead { color: var(--on-dark-muted); max-width: 52ch; margin: .9rem auto 1.7rem; }
.callout .rings { top:-60px; left:-40px; width: 220px; opacity:.28; }
.callout .rings.two { top:auto; left:auto; bottom:-70px; right:-50px; width: 240px; }

/* ---------- Breadcrumb ---------- */
.crumbs { font-size:.82rem; color: var(--muted); }
.crumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; padding:0; }
.crumbs li::after { content:"/"; margin-left:.45rem; color: var(--line-2); }
.crumbs li:last-child::after { content:""; }
.crumbs a { color: var(--muted); text-decoration:none; }
.crumbs a:hover { color: var(--pine); }
.crumbs [aria-current]{ color: var(--pine); font-weight:600; }

/* ---------- Contact ---------- */
.cinfo { list-style:none; padding:0; display:grid; gap:1.3rem; }
.cinfo li { border-top:1px solid var(--line); padding-top:1rem; }
.cinfo .k { font-family: var(--sans); text-transform:uppercase; letter-spacing:.16em; font-size:.68rem; color: var(--muted); }
.cinfo .v { font-family: var(--serif); font-size:1.4rem; color: var(--ink); }
.cinfo a { text-decoration:none; }

/* ---------- Blog ---------- */
.postmeta { font-family:var(--sans); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:var(--tan-dk); margin-top:1.1rem; }
.post-list { border-top:1px solid var(--line-2); margin-top:2.4rem; }
.post-item { display:block; padding:1.9rem 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); transition:padding .18s, background .18s; }
.post-item:hover { color:var(--ink); padding-left:1rem; background:var(--paper-2); }
.post-item .d { font-family:var(--sans); text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; color:var(--tan-dk); }
.post-item h3 { font-size:clamp(1.5rem,3vw,2.1rem); margin:.4rem 0; }
.post-item:hover h3 { color:var(--pine); }
.post-item p { color:var(--muted); max-width:72ch; }
.post-item .more { font-family:var(--sans); font-weight:600; font-size:.9rem; color:var(--pine); margin-top:.6rem; display:inline-block; }
.post-body { margin-top:2.6rem; margin-inline:auto; }
.post-body p:first-of-type { font-size:1.18rem; color:var(--ink); }

/* ---------- Prose ---------- */
.prose { max-width: 44rem; }
.prose h2 { margin:2.2rem 0 .8rem; }
.prose h3 { margin:1.6rem 0 .5rem; }
.prose p,.prose ul,.prose ol { margin-bottom:1.1rem; }
.prose ul,.prose ol { padding-left:1.3rem; }
.prose blockquote { border-left:3px solid var(--tan); padding-left:1.2rem; font-family: var(--serif); font-style:italic; font-size:1.2rem; color: var(--pine); margin:1.5rem 0; }

/* ---------- Footer ---------- */
.foot { background: var(--ink); color: var(--on-dark-muted); padding-block: clamp(3rem,6vw,4.5rem) 1.8rem; }
.foot__top { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap:2rem; }
.foot__word { font-family: var(--serif); font-size: 2rem; color:#fff; line-height:1; }
.foot__word span { display:block; font-size:.64rem; font-family: var(--sans); letter-spacing:.34em; text-transform:uppercase; color: var(--tan); margin-top:.4rem; }
.foot p { max-width: 32ch; margin-top:1rem; font-size:.94rem; }
.foot h4 { color:#fff; font-family: var(--sans); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; margin-bottom:1rem; }
.foot ul { list-style:none; padding:0; display:grid; gap:.55rem; }
.foot a { color: var(--on-dark-muted); text-decoration:none; font-size:.93rem; }
.foot a:hover { color:#fff; }
.social { display:flex; gap:.6rem; margin-top:1.2rem; }
.social a { width:40px; height:40px; border:1px solid rgba(255,255,255,.16); display:grid; place-items:center; border-radius:50%; }
.social a:hover { background: var(--tan); border-color: var(--tan); color: var(--ink); }
.social svg { width:19px; height:19px; }
.foot__base { border-top:1px solid rgba(255,255,255,.12); margin-top:2.5rem; padding-top:1.4rem; display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; font-size:.83rem; }
.foot__base a { color: var(--tan); }

.skip { position:absolute; left:-999px; top:0; background: var(--pine); color:#fff; padding:.6rem 1rem; z-index:100; }
.skip:focus { left:.5rem; top:.5rem; }

/* =============================================================
   ARBORIST PAGES — "Canopy": dark, vertical, growth-ring motifs
   ============================================================= */
.phero-arb { background: var(--ink); color: var(--on-dark); position:relative; overflow:clip; --accent: var(--tan); --accent-dk: var(--tan-dk); }
.phero-arb .wrap { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; padding-block: clamp(2.4rem,6vw,4.5rem); }
.phero-arb .crumbs, .phero-arb .crumbs a { color: var(--on-dark-muted); }
.phero-arb .crumbs li::after { color: rgba(255,255,255,.25); }
.phero-arb .crumbs a:hover, .phero-arb .crumbs [aria-current] { color: var(--tan); }
.phero-arb h1 { color:#fff; margin:.9rem 0 0; }
.phero-arb h1 em { color: var(--tan); font-style: italic; font-weight:400; }
.phero-arb .lead { color: var(--on-dark-muted); margin-top:1.1rem; max-width:38rem; }
.phero-arb .btn-row { margin-top:1.7rem; }
.phero-arb__meta { margin-top:1.9rem; display:flex; gap:1.6rem; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.16); padding-top:1.2rem; }
.phero-arb__meta dt { font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em; font-size:.64rem; color:var(--on-dark-muted); }
.phero-arb__meta dd { font-family:var(--serif); font-size:1.4rem; color:#fff; margin-top:.1rem; }
.phero-arb__fig { position:relative; }
.phero-arb__fig img { width:100%; aspect-ratio:4/5; object-fit:cover; border:1px solid rgba(255,255,255,.15); }
.phero-arb__fig .rings { position:absolute; top:-42px; left:-42px; width:150px; color:var(--tan); opacity:.4; }
.phero-arb__fig .seal { position:absolute; right:-22px; bottom:-22px; }

/* answer-first lede band */
.lede { font-family: var(--serif); font-weight:400; font-size: clamp(1.3rem,2.4vw,1.7rem); line-height:1.45; color: var(--ink); }
.lede b { color: var(--pine); font-weight:600; }

/* vertical ring-node timeline (arborist process) */
.timeline { position:relative; margin-top:2.2rem; padding-left:2.6rem; }
.timeline::before { content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:var(--line-2); }
.section--ink .timeline::before, .section--pine .timeline::before { background:rgba(255,255,255,.2); }
.tl { position:relative; padding-bottom:1.9rem; }
.tl:last-child { padding-bottom:0; }
.tl::before { content:""; position:absolute; left:-2.6rem; top:1px; width:24px; height:24px; border-radius:50%; border:2px solid var(--accent); background:var(--paper); box-shadow: inset 0 0 0 3px var(--paper); }
.section--paper2 .tl::before { background:var(--paper-2); box-shadow: inset 0 0 0 3px var(--paper-2); }
.section--ink .tl::before, .section--pine .tl::before { background:var(--ink); box-shadow: inset 0 0 0 3px var(--ink); }
.tl h3 { margin-bottom:.25rem; }
.tl p { color:var(--muted); }
.section--ink .tl p, .section--pine .tl p { color:var(--on-dark-muted); }

/* "why remove / signs" bordered list */
.notes { display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--line-2); margin-top:1.8rem; }
.notes > div { padding:1.4rem 0; border-bottom:1px solid var(--line); padding-right:2rem; }
.notes > div:nth-child(odd){ border-right:1px solid var(--line); padding-right:2rem; padding-left:0; }
.notes > div:nth-child(even){ padding-left:2rem; }
.notes h3 { font-size:1.2rem; margin-bottom:.3rem; }
.notes p { color:var(--muted); font-size:.96rem; }

/* =============================================================
   FENCING PAGES — "Blueprint": light, horizontal, rail-lines
   ============================================================= */
.phero-fence { background: var(--paper-2); position:relative; border-bottom:1px solid var(--line); }
.phero-fence .wrap { padding-block: clamp(2.4rem,6vw,4.5rem); }
.phero-fence__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.phero-fence h1 { margin:.7rem 0 0; }
.phero-fence h1 em { color:var(--pine); font-style:italic; font-weight:400; }
.phero-fence .lead { margin-top:1.1rem; max-width:36rem; }
.phero-fence__fig { position:relative; }
.phero-fence__fig img { width:100%; aspect-ratio:5/4; object-fit:cover; border:1px solid var(--line-2); }
.phero-fence__stamp { position:absolute; left:-14px; top:20px; background:var(--pine); color:#fff; font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; padding:.5rem .9rem; }

/* horizontal rail divider (fence rails) */
.rails { display:grid; gap:6px; margin:1.5rem 0; max-width:200px; }
.rails span { height:3px; background:var(--line-2); }
.rails span:nth-child(2){ background:var(--tan-dk); }
.phero-fence .rails { max-width:160px; }

/* spec grid (fence styles / materials) */
.spec { display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--line-2); margin-top:2rem; background:var(--paper); }
.spec > div { padding:1.4rem 1.5rem; border-bottom:1px solid var(--line); }
.spec > div:nth-child(odd){ border-right:1px solid var(--line); }
.spec > div:nth-last-child(-n+2){ border-bottom:0; }
.spec dt, .spec .st { display:flex; align-items:center; gap:.6rem; font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color:var(--pine); }
.spec dt .n, .spec .st .n { font-variant-numeric:tabular-nums; color:var(--tan-dk); }
.spec h3 { font-size:1.35rem; margin:.5rem 0 .3rem; }
.spec p { color:var(--muted); font-size:.95rem; }

/* blueprint stat strip (horizontal) */
.bstrip { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line-2); margin-top:2.2rem; background:var(--paper); }
.bstrip > div { padding:1.5rem 1.3rem; border-right:1px solid var(--line); }
.bstrip > div:last-child { border-right:0; }
.bstrip .num { font-family:var(--serif); font-size:2rem; color:var(--pine); line-height:1; }
.bstrip .lbl { font-size:.82rem; color:var(--muted); margin-top:.4rem; }

/* =============================================================
   UTILITY PAGES — gallery, contact, careers
   ============================================================= */
.gal { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.6rem,1.4vw,1rem); margin-top:2.2rem; }
.gal a { display:block; overflow:hidden; border:1px solid var(--line-2); background:var(--ink); }
.gal img { width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .5s ease; filter:saturate(.95); }
.gal a:hover img { transform:scale(1.05); }

.contact-cols { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.cform { display:grid; gap:1.1rem; }
.cform .row2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.cform label { font-family:var(--sans); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); display:block; margin-bottom:.35rem; }
.cform input, .cform textarea { width:100%; padding:.85rem 1rem; border:1px solid var(--line-2); background:var(--paper); font-family:var(--sans); font-size:1rem; color:var(--text); border-radius:2px; }
.section--paper2 .cform input, .section--paper2 .cform textarea { background:#fff; }
.cform input:focus, .cform textarea:focus { outline:none; border-color:var(--pine); box-shadow:var(--ring-focus); }
.cform textarea { min-height:140px; resize:vertical; }

.cmap { width:100%; height:420px; display:block; border:1px solid var(--line-2); border-radius:2px; }
@media (max-width:820px){ .cmap { height:340px; } }
.airtable-embed { width:100%; height:1300px; display:block; }
@media (max-width:820px){ .airtable-embed { height:1400px; } }
@media (max-width:400px){ .airtable-embed { height:1460px; } }

.careers-list { display:grid; gap:1rem; margin-top:2rem; }
.role { border:1px solid var(--line-2); background:var(--paper); padding:1.5rem; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.role h3 { font-size:1.4rem; }
.role p { color:var(--muted); font-size:.95rem; margin-top:.2rem; }

/* ---------- Sticky hero copy (desktop) ---------- */
@media (min-width: 941px) {
  .hero .wrap > .hero__lead-col,
  .phero-arb .wrap > div:first-child,
  .phero-fence__grid > div:first-child {
    position: sticky;
    top: 98px;
    align-self: start;
  }
  /* taller hero images so the pinned copy has clear room to travel on every screen */
  .hero__fig img { height: clamp(740px, 86vh, 900px); aspect-ratio: auto; }
  .phero-arb__fig img { height: clamp(760px, 88vh, 960px); aspect-ratio: auto; }
  .phero-fence__fig img { height: clamp(680px, 82vh, 880px); aspect-ratio: auto; }
}

/* =============================================================
   FIREWOOD ORDER — calculator + sold-out
   ============================================================= */
.fw-order { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3rem); align-items:start; margin-top:2.4rem; }
.fw-product .fw-mixtag { display:inline-block; font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:var(--tan-dk); }
.fw-product h3 { font-size:clamp(1.7rem,3.2vw,2.3rem); margin:.4rem 0 .7rem; }
.fw-product > p { color:var(--muted); }
.fw-terms { list-style:none; padding:0; margin-top:1.5rem; display:grid; gap:0; }
.fw-terms li { display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:baseline; border-top:1px solid var(--line); padding:.85rem 0; }
.fw-terms li:last-child { border-bottom:1px solid var(--line); }
.fw-terms b { font-family:var(--serif); font-size:1.25rem; color:var(--pine); white-space:nowrap; }
.fw-terms span { color:var(--muted); font-size:.97rem; }

.fw-calc { background:#fff; border:1px solid var(--line-2); border-radius:2px; padding:clamp(1.5rem,3vw,2.1rem); position:sticky; top:98px; }
.fw-calc .lbl { font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--muted); }
.fw-cubes { display:flex; align-items:baseline; gap:.6rem; margin:.35rem 0 1.1rem; }
.fw-cubes b { font-family:var(--serif); font-size:3.2rem; line-height:1; color:var(--pine); }
.fw-cubes span { color:var(--muted); }
.fw-range { width:100%; -webkit-appearance:none; appearance:none; height:6px; background:var(--line-2); border-radius:999px; outline:none; margin:.2rem 0; }
.fw-range::-webkit-slider-thumb { -webkit-appearance:none; width:28px; height:28px; border-radius:50%; background:var(--pine); cursor:pointer; border:4px solid #fff; box-shadow:0 0 0 1px var(--line-2); }
.fw-range::-moz-range-thumb { width:28px; height:28px; border-radius:50%; background:var(--pine); cursor:pointer; border:4px solid #fff; box-shadow:0 0 0 1px var(--line-2); }
.fw-range:focus-visible::-webkit-slider-thumb { box-shadow:var(--ring-focus); }
.fw-scale { display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted); margin-top:.2rem; }

.fw-seg { display:grid; grid-template-columns:1fr 1fr; gap:.35rem; margin:1.3rem 0 .2rem; border:1px solid var(--line-2); border-radius:2px; padding:.3rem; }
.fw-seg label { position:relative; cursor:pointer; }
.fw-seg input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.fw-seg span { display:block; text-align:center; padding:.6rem; font-size:.94rem; font-weight:500; border-radius:2px; color:var(--muted); transition:background .15s,color .15s; }
.fw-seg input:checked + span { background:var(--pine); color:#fff; }
.fw-seg input:focus-visible + span { box-shadow:var(--ring-focus); }

.fw-total { border-top:1px solid var(--line); margin-top:1.3rem; padding-top:1.2rem; }
.fw-row { display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.96rem; margin-bottom:.5rem; }
.fw-row.grand { font-family:var(--serif); font-size:1.7rem; color:var(--ink); margin:.3rem 0 0; align-items:baseline; }
.fw-note { font-size:.82rem; color:var(--muted); margin-top:.9rem; }
#fw-order-btn { width:100%; justify-content:center; margin-top:1.1rem; }

.soldout { text-align:center; border:1px solid var(--line-2); background:var(--paper); padding:clamp(2.2rem,6vw,4rem); border-radius:2px; max-width:640px; margin:2.4rem auto 0; }
.soldout .badge { background:var(--bark); color:#fff; margin-bottom:1rem; }
.soldout h3 { font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:.6rem; }
.soldout p { color:var(--muted); max-width:48ch; margin:0 auto 1.4rem; }

@media (max-width:820px){
  .fw-order { grid-template-columns:1fr; }
  .fw-calc { position:static; }
}

/* "Firewood you can count on" points beside the embedded order form */
.fw-count { display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
.fw-count > div:first-child { position:sticky; top:98px; }
.fw-count .notes { grid-template-columns:1fr; }
.fw-count .notes > div, .fw-count .notes > div:nth-child(odd), .fw-count .notes > div:nth-child(even) { border-right:0; padding-left:0; padding-right:0; }
.fw-embed { width:100%; height:1000px; display:block; }
@media (max-width:900px){ .fw-count { grid-template-columns:1fr; } .fw-count > div:first-child { position:static; } .fw-embed { height:1080px; } }
@media (max-width:520px){ .fw-embed { height:1440px; } }

/* ---------- Responsive ---------- */
@media (max-width: 940px){
  .hero .wrap { grid-template-columns: 1fr; }
  .hero__fig { order:-1; max-width: 460px; }
  .hero__fig img { aspect-ratio: 16/11; }
  .feature, .feature--rev .feature__fig { grid-template-columns:1fr; }
  .feature--rev .feature__fig { order:0; }
  .feature__fig img { aspect-ratio:16/10; }
  .phero-arb .wrap, .phero-fence__grid { grid-template-columns:1fr; }
  .phero-arb__fig, .phero-fence__fig { order:-1; max-width:460px; }
  .phero-arb__fig img, .phero-fence__fig img { aspect-ratio:16/11; }
  /* keep the seal inside the viewport so overflow:clip doesn't cut its right edge */
  .hero__fig .seal, .phero-arb__fig .seal { right: 8px; bottom: -14px; }
  .notes, .spec { grid-template-columns:1fr; }
  .notes > div, .notes > div:nth-child(odd), .notes > div:nth-child(even){ border-right:0; padding-left:0; padding-right:0; }
  .spec > div, .spec > div:nth-child(odd){ border-right:0; }
  .spec > div:nth-last-child(2){ border-bottom:1px solid var(--line); }
  .bstrip { grid-template-columns:repeat(2,1fr); }
  .bstrip > div:nth-child(2n){ border-right:0; }
  .bstrip > div:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .gal { grid-template-columns:repeat(2,1fr); }
  .contact-cols { grid-template-columns:1fr; }
  .cform .row2 { grid-template-columns:1fr; }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .foot__word-col { grid-column:1/-1; }
}
@media (max-width: 820px){
  .nav, .mast-phone, .mast-cta .btn { display:none; }
  .burger { display:inline-flex; }
  .pillars { grid-template-columns:1fr; }
  .topbar .hide-sm { display:none; }
  .topbar .tb-right { gap:.9rem; }
  .nav.open { display:flex; position:fixed; inset: 122px 0 0; flex-direction:column; align-items:stretch; background: var(--paper); padding:1rem var(--gutter) 2rem; gap:.1rem; overflow-y:auto; z-index:70; border-top:1px solid var(--line); }
  .nav.open > a, .nav.open .has > a { font-size:1.2rem; font-family: var(--serif); padding:.85rem .3rem; border-bottom:1px solid var(--line); }
  .nav.open .has { position:static; }
  .nav.open .menu { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; background:transparent; padding:.2rem 0 .6rem 1rem; min-width:0; }
  .nav.open .has > a::after { display:none; }
  /* collapsible service groups on mobile */
  .nav.open .menu-head { cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.72rem; padding:.85rem .3rem; color:var(--muted); border-bottom:1px solid var(--line); }
  .nav.open .menu-head::after { content:"+"; font-family:var(--sans); font-size:1.4rem; font-weight:400; line-height:1; color:var(--pine); }
  .nav.open .mgroup.open .menu-head::after { content:"\2212"; }
  .nav.open .mgroup__links { display:none; padding-left:.6rem; }
  .nav.open .mgroup.open .mgroup__links { display:block; }
  .svc-row { grid-template-columns: 2.2rem 1fr auto; gap:1rem; }
  .svc-row__thumb { display:none; }
  .cards, .cards--4 { grid-template-columns: 1fr; }
}
@media (min-width:521px) and (max-width:820px){
  .cards, .cards--4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:520px){
  .foot__top { grid-template-columns:1fr; }
  .btn-row .btn { width:100%; justify-content:center; }
  .hero__meta { gap:1.1rem; }
  .seal { --sz: 96px; }
}