/* ==============================================================
   T & H Logs — PREMIUM REDESIGN (home proof)
   "A working timber yard, presented like a heritage maker's mark."
   Material honesty + restraint. Cream ground · charcoal-brown ink ·
   slate structure · ember as glow (≤6%). Standalone stylesheet.
   ============================================================== */

/* ---------- Tokens ---------- */
:root {
  /* surfaces */
  --cream:    #F5F0E6;   /* ground */
  --oat:      #EAE1CC;   /* alternating band / card fill */
  --paper:    #FBF6ED;   /* raised cards */
  --slate:    #666D83;   /* brand greyish-blue — structure */
  --slate-d:  #3C4253;   /* deep slate — footer, duotone dark */
  --slate-dd: #2C313F;

  /* ink — warm charcoal-brown, never pure black */
  --ink:      #231F1C;
  --ink-70:   #4A433C;
  --ink-50:   #756B60;
  --ink-30:   #A89E8F;

  /* ember — accent, used sparingly + as glow */
  --ember:    #C05621;
  --ember-d:  #7A2E12;
  --ember-l:  #D9772F;

  /* lines */
  --rule:     rgba(35,31,28,0.16);
  --rule-2:   rgba(35,31,28,0.08);

  /* type */
  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans:  'Plus Jakarta Sans', system-ui, sans-serif;
  --slab:  'Zilla Slab', Georgia, serif;

  /* layout */
  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 56px);
  --r-sm: 4px;
  --r:    10px;
  --r-lg: 18px;

  /* tinted, layered shadows (carry the ink hue, not pure black) */
  --sh-1: 0 1px 2px rgba(35,31,28,0.05), 0 2px 8px rgba(35,31,28,0.05);
  --sh-2: 0 2px 6px rgba(35,31,28,0.06), 0 14px 34px rgba(35,31,28,0.09);
}

html { color-scheme: light; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  font-size: 17px; line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  /* overflow-x clip removed from body: it makes position:fixed behave like absolute on iOS
     (would open the mobile overlay menu off-screen). Bleed sources are clipped at their own
     containers (.hero overflow:hidden, the wall SVG viewBox). */
}

/* ---------- Global paper grain (barely there) ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: 0.045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--ember); color: #fff; }

/* ---------- Type system ---------- */
h1, h2, h3, h4 {
  margin: 0; font-family: var(--serif); color: var(--ink);
  font-weight: 500; text-wrap: balance;
  font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 1;
  letter-spacing: -0.018em; line-height: 1.04;
}
p { margin: 0; text-wrap: pretty; }

/* stamped label — slab, tracked caps, the "branding-iron" voice */
.stamp {
  font-family: var(--slab); font-weight: 600;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-50);
  font-feature-settings: "tnum" 1;
}
.stamp--ember { color: var(--ember-d); }
.stamp::before {
  content: ""; display: inline-block; width: 22px; height: 1.5px;
  background: var(--ember); vertical-align: middle; margin-right: 12px;
  transform: translateY(-3px);
}
.num { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }
.section { padding-block: clamp(72px, 10vw, 132px); position: relative; }
.band-oat   { background: var(--oat); }
.band-slate { background: var(--slate-d); color: #F2EFE8; }

/* growth-ring divider / watermark */
.rings { position: absolute; pointer-events: none; opacity: 0.5; }
.rings circle { fill: none; stroke: var(--ink); stroke-width: 1; }
.rings--ember circle { stroke: var(--ember); }

/* deckled hairline section edge */
.edge-rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ---------- Ember "Ready to Burn" seal ---------- */
.seal { width: 132px; height: 132px; display: block; }
.seal text { font-family: var(--slab); font-size: 9.2px; letter-spacing: 0.34em;
  fill: var(--ember-d); text-transform: uppercase; font-weight: 600; }
.seal .ring { fill: none; stroke: var(--ember); stroke-width: 1.4; }
.seal .ring--in { stroke: var(--ember-d); stroke-width: 0.8; opacity: 0.6; }
.seal .glyph { fill: none; stroke: var(--ember-d); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.seal .pct { font-family: var(--serif); font-size: 20px; fill: var(--ink); font-weight: 600; letter-spacing: -0.02em; }
.seal .pct-sub { font-family: var(--slab); font-size: 6.4px; letter-spacing: 0.24em; fill: var(--ink-50); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; font-family: var(--sans);
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  border-radius: 999px; border: 1.5px solid transparent;
  transition: transform .12s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:active { transform: scale(0.97); }
.btn--ember { background: var(--ember); color: #fff; border-color: var(--ember); }
.btn--ember:hover { background: var(--ember-d); border-color: var(--ember-d); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--line:hover { border-color: var(--ink); }
.btn--lg { padding: 17px 30px; font-size: 16px; }
.btn--block { width: 100%; justify-content: center; }
.link-arrow { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--ember-d);
  display: inline-flex; align-items: center; gap: 7px; }
.link-arrow::after { content: "→"; transition: transform .18s ease; }
a:hover > .link-arrow::after, .link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(245,240,230,0.82);
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid var(--rule-2);
}
.hdr__in { display: flex; align-items: center; gap: 30px; height: 74px; }
.brand { display: inline-flex; align-items: center; gap: 13px; }
.brand__rings { width: 30px; height: 30px; flex: none; }
.brand__rings circle { fill: none; stroke: var(--ink); stroke-width: 1.1; }
.brand__rings .c { fill: var(--ember); stroke: none; }
.brand__name { font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: 0.04em; color: var(--ink);
  font-variation-settings: "opsz" 40, "WONK" 0; }
.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav a { font-size: 14.5px; font-weight: 500; color: var(--ink-70); position: relative; padding: 4px 0; transition: color .18s ease; }
.nav a:hover { color: var(--ink); }
.nav a.is-active { color: var(--ink); }
.nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ember); }
.hdr__tel { font-family: var(--slab); font-weight: 600; font-size: 14px; color: var(--ink); letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 8px; }
.hdr__tel svg { width: 15px; height: 15px; color: var(--ember); }
.hdr__cta { background: var(--ink); color: var(--cream); padding: 10px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; transition: background .2s ease, transform .12s ease; }
.hdr__cta:hover { background: var(--ember-d); }
.hdr__cta:active { transform: scale(0.97); }
.burger { display: none; }

/* ---------- Hero (full-bleed yard photo, light text) ---------- */
.hero { position: relative; overflow: hidden; background: var(--slate-dd); color: #F4EFE6;
  padding-block: clamp(40px, 4.6vw, 60px); }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(28,31,40,0.80) 0%, rgba(28,31,40,0.60) 45%, rgba(28,31,40,0.88) 100%),
    radial-gradient(70% 80% at 86% 6%, rgba(192,86,33,0.20) 0%, transparent 55%); }
.hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
@media (min-width: 920px) { .hero__in { grid-template-columns: 1.04fr 0.96fr; gap: 60px; } }
.hero__eyebrow { margin-bottom: 26px; }
.hero__eyebrow .stamp { color: #F2CDA9; }
.hero__eyebrow .stamp::before { background: var(--ember-l); }
.hero__title {
  font-size: clamp(40px, 4.7vw, 64px); line-height: 1.0; letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1; font-weight: 400; color: #FFFFFF;
  margin-bottom: 40px;
}
.hero__title em { font-style: italic; font-weight: 400; color: var(--ember-l);
  font-variation-settings: "opsz" 144, "SOFT" 6, "WONK" 1; }
.hero__sub { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: rgba(244,239,230,0.84); max-width: 46ch; margin-bottom: 34px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero .btn--line { color: #fff; border-color: rgba(255,255,255,0.42); }
.hero .btn--line:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.hero__specs { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid rgba(255,255,255,0.22); }
.hero__spec { padding: 18px 26px 0 0; margin-right: 26px; }
.hero__spec:not(:last-child) { border-right: 1px solid rgba(255,255,255,0.22); }
.hero__spec .v { font-family: var(--serif); font-size: 23px; font-weight: 500; color: #fff; letter-spacing: -0.02em; line-height: 1.05; }
.hero__spec .l { display: block; margin-top: 8px; color: rgba(244,239,230,0.62); }
.hero__spec .l.stamp::before { background: var(--ember-l); }

/* hero visual — vivid keylined image, ring watermark, seal overlap */
.hero__fig { position: relative; }
.hero__media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45); outline: 1px solid rgba(255,255,255,0.16); outline-offset: -1px; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__seal { position: absolute; left: -34px; bottom: -26px; z-index: 3;
  background: var(--cream); border-radius: 999px; padding: 8px; box-shadow: var(--sh-2); }
.hero__ringmark { position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; z-index: 0; opacity: 0.55; }
.hero__ringmark circle { stroke: var(--ember-l); }
@media (max-width: 767px) { .hero__bg::after { background: linear-gradient(180deg, rgba(28,31,40,0.82), rgba(28,31,40,0.9)); } }

/* ---------- Real logo (replaces ring wordmark) ---------- */
.brand__logo { height: 42px; width: auto; border-radius: 6px; display: block; }
.ftr__brand .brand__logo { height: 54px; }

/* ---------- Trust / spec strip ---------- */
.proof { border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); background: var(--paper); }
.proof__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.proof__item { padding: 26px 0; display: flex; align-items: center; gap: 14px; }
.proof__item:not(:first-child) { border-left: 1px solid var(--rule-2); padding-left: 26px; }
.proof__item svg { width: 24px; height: 24px; color: var(--slate); flex: none; }
.proof__item b { display: block; font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.proof__item span { font-size: 13px; color: var(--ink-50); }

/* ---------- Section head (editorial, asymmetric) ---------- */
.s-head { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: clamp(40px, 5vw, 60px); align-items: end; }
@media (min-width: 860px) { .s-head { grid-template-columns: 1.5fr 1fr; gap: 56px; } }
.s-head__t { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.02; font-variation-settings: "opsz" 110, "WONK" 1; }
.s-head__t em { font-style: italic; color: var(--ember-d); }
.s-head__lead { font-size: 17px; line-height: 1.6; color: var(--ink-70); max-width: 42ch; align-self: end; padding-bottom: 6px; }
.band-slate .s-head__t, .band-slate h2, .band-slate h3 { color: #FBF6ED; }
.band-slate .s-head__lead { color: rgba(251,246,237,0.72); }
.band-slate .stamp { color: rgba(251,246,237,0.6); }

/* ---------- Product spec-tag cards ---------- */
.tags { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 760px) { .tags { grid-template-columns: 1fr 1fr; } }
.tag { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column; transition: box-shadow .25s ease, transform .25s ease; position: relative; }
.tag:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.tag__media { aspect-ratio: 16 / 10; overflow: hidden; position: relative; border-bottom: 1px solid var(--rule); }
.tag__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2) contrast(1.02); transition: transform .5s ease; }
.tag:hover .tag__media img { transform: scale(1.04); }
.tag__flag { position: absolute; top: 14px; left: 14px; background: var(--ink); color: var(--cream);
  font-family: var(--slab); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.tag__body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.tag__title { font-size: 27px; font-weight: 500; font-variation-settings: "opsz" 60, "WONK" 0; letter-spacing: -0.015em; }
.tag__desc { font-size: 14.5px; color: var(--ink-50); line-height: 1.55; margin: 8px 0 20px; }
.tag__specs { list-style: none; padding: 16px 0; margin: 0 0 20px; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2);
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.tag__specs li { display: flex; flex-direction: column; gap: 3px; }
.tag__specs .k { font-family: var(--slab); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-30); }
.tag__specs .v { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.tag__foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; }
.tag__price { font-family: var(--serif); font-size: 30px; font-weight: 500; color: var(--ink); letter-spacing: -0.02em; }
.tag__price small { font-family: var(--slab); font-size: 12px; font-weight: 600; color: var(--ink-50); letter-spacing: 0.06em; margin-left: 5px; }
.tag__price s { color: var(--ink-30); font-size: 18px; text-decoration-color: var(--ember); margin-right: 8px; }

.addon-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); border-radius: var(--r); overflow: hidden; margin-top: 24px; }
.addon { background: var(--paper); padding: 20px 22px; }
.addon .k { font-family: var(--slab); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-30); }
.addon b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 500; margin: 4px 0 2px; }
.addon .d { font-size: 13px; color: var(--ink-50); }
.note { font-size: 13.5px; color: var(--ink-50); margin-top: 24px; }
.note b { color: var(--ember-d); }

/* ---------- Editorial feature (zig-zag) ---------- */
.feat { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 880px) { .feat { grid-template-columns: 1fr 1fr; gap: 70px; } .feat--rev .feat__media { order: 2; } }
.feat__media { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 5 / 4; box-shadow: var(--sh-1); outline: 1px solid var(--rule); outline-offset: -1px; }
.feat__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25) contrast(1.02); }
.feat__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(60,66,83,0.12), rgba(122,46,18,0.10)); mix-blend-mode: multiply; }
.feat__t { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; margin: 16px 0 18px; }
.feat__t em { font-style: italic; color: var(--ember-d); }
.feat__p { font-size: 16.5px; line-height: 1.65; color: var(--ink-70); margin-bottom: 22px; }
.feat__list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 13px; }
.feat__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-70); }
.feat__list svg { width: 18px; height: 18px; color: var(--ember); flex: none; margin-top: 3px; }

/* ---------- Process — tree to fire ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 36px; }
.step__n { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--ember-d); letter-spacing: 0.1em; }
.step__rule { height: 1px; background: var(--rule); margin: 14px 0 18px; position: relative; }
.step__rule::before { content: ""; position: absolute; left: 0; top: -1px; width: 28px; height: 3px; background: var(--ember); }
.step__t { font-size: 21px; font-weight: 500; font-variation-settings: "opsz" 48, "WONK" 0; margin-bottom: 9px; }
.step__d { font-size: 14.5px; line-height: 1.55; color: var(--ink-50); }
.band-slate .step__d { color: rgba(251,246,237,0.66); }
.band-slate .step__rule { background: rgba(255,255,255,0.16); }

/* ---------- Testimonials (warm cream) ---------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.quote { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 28px; box-shadow: var(--sh-1); display: flex; flex-direction: column; }
.quote__stars { color: var(--ember); letter-spacing: 3px; font-size: 15px; }
.quote__t { font-family: var(--serif); font-size: 18.5px; line-height: 1.45; color: var(--ink); margin: 16px 0 22px; font-variation-settings: "opsz" 36, "WONK" 0; }
.quote__by { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--rule-2); margin-top: auto; }
.quote__av { width: 40px; height: 40px; border-radius: 999px; background: var(--slate); color: var(--cream); display: grid; place-items: center; font-family: var(--serif); font-size: 15px; font-weight: 600; flex: none; }
.quote__nm { font-size: 14px; font-weight: 600; color: var(--ink); }
.quote__wh { font-size: 12px; color: var(--ink-50); }
.quote--feat { grid-column: span 2; box-shadow: var(--sh-2, var(--sh-1)); }
.quote--feat .quote__t { font-size: 23px; line-height: 1.4; }
@media (max-width: 767px) { .quote--feat { grid-column: auto; } .quote--feat .quote__t { font-size: 20px; } }

/* ---------- CTA band ---------- */
.cta { position: relative; overflow: hidden; background: var(--slate-dd); color: var(--cream); }
.cta__glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 120% at 50% 120%, rgba(122,46,18,0.55) 0%, rgba(122,46,18,0.18) 30%, transparent 62%); }
.cta__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 860px) { .cta__in { grid-template-columns: 1.5fr auto; gap: 48px; align-items: end; } }
.cta__t { color: #fff; font-size: clamp(30px, 4vw, 46px); line-height: 1.04; }
.cta__t em { font-style: italic; color: var(--ember-l); }
.cta__sub { color: rgba(255,255,255,0.74); font-size: 17px; margin-top: 14px; max-width: 48ch; }
.cta__act { display: flex; flex-wrap: wrap; gap: 12px; }
.cta .btn--line { color: #fff; border-color: rgba(255,255,255,0.4); }
.cta .btn--line:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* ---------- Footer ---------- */
.ftr { background: var(--slate-d); color: rgba(242,239,232,0.74); padding-top: 0; }
.ftr__frieze { display: flex; gap: 14px; padding: 22px 0; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.10); opacity: 0.5; }
.ftr__frieze svg { width: 30px; height: 30px; flex: none; }
.ftr__frieze circle { fill: none; stroke: rgba(242,239,232,0.5); stroke-width: 1; }
.ftr__top { display: grid; grid-template-columns: 1fr; gap: 40px; padding: 56px 0 44px; }
@media (min-width: 760px) { .ftr__top { grid-template-columns: 1.5fr repeat(3, 1fr); gap: 48px; } }
.ftr__brand .brand__name { color: #fff; }
.ftr__brand .brand__rings circle { stroke: rgba(255,255,255,0.7); }
.ftr__tag { font-family: var(--slab); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 16px; }
.ftr__about { font-size: 14.5px; line-height: 1.6; color: rgba(242,239,232,0.7); margin-top: 12px; max-width: 36ch; }
.ftr__col h4 { font-family: var(--slab); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.ftr__col ul { list-style: none; padding: 0; margin: 0; }
.ftr__col li { margin-bottom: 11px; font-size: 14.5px; }
.ftr__col a { color: rgba(242,239,232,0.72); transition: color .18s ease; }
.ftr__col a:hover { color: var(--ember-l); }
.ftr__bot { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; padding: 24px 0; border-top: 1px solid rgba(255,255,255,0.10); font-size: 12.5px; color: rgba(242,239,232,0.5); }
.ftr__bot a { color: var(--ember-l); }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .nav, .hdr__tel, .hdr__cta { display: none; }
  .hero__ringmark, .hero__seal { display: none; }
  .hero__spec:not(:last-child) { border-right: 0; }
  .proof__item:not(:first-child) { border-left: 0; padding-left: 0; }
  .s-head { align-items: start; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ==============================================================
   INTERIOR PAGES — logs / story / delivery / contact
   Same tokens + voice as the home proof. One source of truth.
   ============================================================== */

/* ---------- Dark slate "chapter opener" hero ---------- */
.phero { position: relative; overflow: hidden; background: var(--slate-dd); color: #F4EFE6;
  padding-block: clamp(60px, 8vw, 104px); border-bottom: 1px solid rgba(255,255,255,0.08); }
.phero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 90% at 90% 0%, rgba(192,86,33,0.22) 0%, transparent 58%); }
.phero__rings { position: absolute; right: -86px; top: 50%; transform: translateY(-50%); width: 340px; height: 340px; opacity: 0.38; z-index: 0; }
.phero__rings circle { stroke: var(--ember-l); }
.phero__in { position: relative; z-index: 1; }
.phero .stamp { color: #F2CDA9; }
.phero .stamp::before { background: var(--ember-l); }
.phero__t { font-size: clamp(40px, 5.6vw, 72px); line-height: 0.99; letter-spacing: -0.025em; color: #fff;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1; font-weight: 400; margin: 22px 0 18px; max-width: 18ch; }
.phero__t em { font-style: italic; color: var(--ember-l); font-variation-settings: "opsz" 144, "SOFT" 6, "WONK" 1; }
.phero__sub { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: rgba(244,239,230,0.82); max-width: 56ch; }

/* paper band (alternating) + dark/ink button */
.bg-paper { background: var(--paper); }
.btn--ink { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--ink:hover { background: var(--ember-d); border-color: var(--ember-d); }
.mt-sm { margin-top: 14px; }

/* [hidden] tier panels — beat the author display rule (web-build trap) */
[data-tier][hidden] { display: none !important; }

/* ---------- Logs: tier toggle + pricing cards ---------- */
.tier-toggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--oat); border: 1px solid var(--rule-2); border-radius: 999px; margin-bottom: 16px; }
.tier-toggle__btn { border: 0; background: transparent; font-family: var(--slab); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; color: var(--ink-50); padding: 10px 18px; border-radius: 999px; transition: background .2s ease, color .2s ease; }
.tier-toggle__btn.is-active { background: var(--ink); color: var(--cream); }
.tier-note { font-size: 15px; color: var(--ink-70); max-width: 62ch; line-height: 1.6; margin-bottom: 30px; }

.pcards { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 820px) { .pcards { grid-template-columns: 1fr 1fr; } }
.pcard { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; position: relative; box-shadow: var(--sh-1); transition: box-shadow .25s ease, transform .25s ease; }
.pcard:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.pcard.is-featured { border-color: rgba(192,86,33,0.5); }
.pcard__media { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--rule); position: relative; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2) contrast(1.02); transition: transform .5s ease; }
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__tag { position: absolute; top: 14px; left: 14px; background: var(--ember); color: #fff; font-family: var(--slab); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.pcard__body { padding: 30px; display: flex; flex-direction: column; flex: 1; }
.pcard__title { font-size: 28px; font-weight: 500; font-variation-settings: "opsz" 60, "WONK" 0; letter-spacing: -0.015em; }
.pcard__sub { font-size: 14.5px; color: var(--ink-50); line-height: 1.55; margin: 8px 0 18px; }
.pcard__price-block { display: flex; align-items: baseline; gap: 12px; padding: 16px 0; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); margin-bottom: 20px; }
.pcard__price { font-family: var(--serif); font-size: 38px; font-weight: 500; color: var(--ink); letter-spacing: -0.02em; line-height: 1; }
.pcard__per { font-family: var(--slab); font-size: 12.5px; font-weight: 500; color: var(--ink-50); letter-spacing: 0.03em; line-height: 1.35; }
.pcard__list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 11px; }
.pcard__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--ink-70); line-height: 1.45; }
.pcard__list svg { width: 17px; height: 17px; color: var(--ember); flex: none; margin-top: 2px; }
.pcard .btn { margin-top: auto; justify-content: center; }

/* logs add-ons (icon row) */
.xtras { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); border-radius: var(--r); overflow: hidden; }
.xtra { background: var(--paper); padding: 22px 24px; display: flex; gap: 15px; align-items: flex-start; }
.xtra__icon { width: 40px; height: 40px; border-radius: 999px; background: rgba(192,86,33,0.10); color: var(--ember-d); display: grid; place-items: center; flex: none; }
.xtra__icon svg { width: 20px; height: 20px; }
.xtra__t { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.xtra__d { font-size: 13px; color: var(--ink-50); margin-top: 3px; line-height: 1.5; }
.note-line { font-size: 13.5px; color: var(--ink-50); margin-top: 28px; max-width: 84ch; line-height: 1.6; }
.note-line strong { color: var(--ember-d); }

/* ---------- Editorial gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.gallery__item { border-radius: var(--r); overflow: hidden; aspect-ratio: 1 / 1; outline: 1px solid var(--rule); outline-offset: -1px; }
.gallery__item--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.22) contrast(1.02); transition: transform .55s ease; }
.gallery__item:hover img { transform: scale(1.05); }

/* ---------- FAQ (editorial two-column rows) ---------- */
.faq { border-top: 1px solid var(--rule); }
.faq__item { padding: 26px 0; border-bottom: 1px solid var(--rule-2); }
@media (min-width: 760px) { .faq__item { display: grid; grid-template-columns: 1fr 1.5fr; gap: 44px; align-items: start; } }
.faq__q { font-family: var(--serif); font-size: 20px; font-weight: 500; font-variation-settings: "opsz" 48, "WONK" 0; letter-spacing: -0.012em; color: var(--ink); margin-bottom: 10px; }
.faq__a { font-size: 15.5px; line-height: 1.62; color: var(--ink-70); max-width: 68ch; }

/* ---------- Value / rule / access cards (editorial, ember rule) ---------- */
.vals { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: clamp(28px, 4vw, 48px); }
.val__icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--ember-d); }
.val__icon svg { width: 28px; height: 28px; }
.val__rule { height: 1px; background: var(--rule); margin: 16px 0; position: relative; }
.val__rule::before { content: ""; position: absolute; left: 0; top: -1px; width: 28px; height: 3px; background: var(--ember); }
.val__t { font-size: 21px; font-weight: 500; font-variation-settings: "opsz" 48, "WONK" 0; letter-spacing: -0.012em; margin-bottom: 9px; }
.val__d { font-size: 14.5px; line-height: 1.6; color: var(--ink-50); }

/* ---------- Delivery: map, areas, bands ---------- */
.areas { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) { .areas { grid-template-columns: 1.05fr 0.95fr; gap: 56px; } }
#delivery-map { height: clamp(360px, 48vh, 480px); border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule); box-shadow: var(--sh-1); position: relative; z-index: 0; }
.map-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 16px; font-size: 13px; color: var(--ink-50); }
.map-legend span { display: inline-flex; align-items: center; gap: 8px; }
.swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; flex: none; }
.areas__list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 22px; }
.areas__list li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: var(--ink-70); }
.areas__list svg { width: 16px; height: 16px; color: var(--ember); flex: none; }
.bands { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 44px; }
@media (min-width: 640px) { .bands { grid-template-columns: 1fr 1fr; } }
.band { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 28px 30px; box-shadow: var(--sh-1); }
.band__radius { font-family: var(--serif); font-size: 40px; font-weight: 500; color: var(--ember-d); letter-spacing: -0.02em; line-height: 1; }
.band__label { font-family: var(--slab); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-30); margin-top: 10px; }
.band__price { font-size: 16px; font-weight: 600; color: var(--ink); margin-top: 4px; }
.band__sub { font-size: 13.5px; color: var(--ink-50); margin-top: 2px; }

/* ---------- Contact: form + direct lines + order cards ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.3fr 1fr; gap: 36px; align-items: start; } }
.contact-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(24px, 3.4vw, 40px); box-shadow: var(--sh-1); }
.contact-card__t { font-family: var(--serif); font-size: 28px; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 8px; font-variation-settings: "opsz" 60, "WONK" 0; }
.contact-card__lead { color: var(--ink-50); font-size: 15px; margin-bottom: 26px; line-height: 1.55; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 16px; display: flex; flex-direction: column; }
.form-label { font-family: var(--slab); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 8px; }
.form-input, .form-select, .form-textarea { font-family: var(--sans); font-size: 16px; color: var(--ink); background: var(--cream); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 13px 15px; width: 100%; transition: border-color .18s ease, box-shadow .18s ease; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--ink-30); }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px rgba(192,86,33,0.15); }
.form-textarea { min-height: 120px; resize: vertical; }
.form-submit { width: 100%; justify-content: center; margin-top: 6px; }
.form-note { font-size: 12px; color: var(--ink-50); margin-top: 14px; text-align: center; }

.contact-row { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--rule-2); }
.contact-row:first-of-type { border-top: 0; padding-top: 4px; }
.contact-row__icon { width: 42px; height: 42px; border-radius: 999px; background: rgba(102,109,131,0.13); color: var(--slate-d); display: grid; place-items: center; flex: none; }
.contact-row__icon svg { width: 20px; height: 20px; }
.contact-row__label { font-family: var(--slab); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-30); }
.contact-row__value { font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--ink); display: block; margin: 2px 0 3px; letter-spacing: -0.01em; }
a.contact-row__value:hover { color: var(--ember-d); }
.contact-row__sub { font-size: 13.5px; color: var(--ink-50); line-height: 1.5; }
.photo-card { margin-top: 24px; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-2); outline: 1px solid var(--rule); outline-offset: -1px; }
.photo-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(0.18) contrast(1.02); }

.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 20px; }
.opt { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 30px; display: flex; flex-direction: column; box-shadow: var(--sh-1); }
.opt__icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px; }
.opt__icon--ember { background: rgba(192,86,33,0.10); color: var(--ember-d); }
.opt__icon--slate { background: rgba(102,109,131,0.13); color: var(--slate-d); }
.opt__icon svg { width: 22px; height: 22px; }
.opt__t { font-size: 21px; font-weight: 500; font-variation-settings: "opsz" 48, "WONK" 0; letter-spacing: -0.012em; margin-bottom: 6px; }
.opt__d { font-size: 14.5px; color: var(--ink-50); line-height: 1.55; margin-bottom: 22px; }
.opt .btn { margin-top: auto; justify-content: center; }

/* ---------- Interior mobile ---------- */
@media (max-width: 767px) {
  .phero__rings { width: 220px; right: -70px; opacity: 0.3; }
  .phero__t { max-width: none; }
  .areas__list { grid-template-columns: 1fr 1fr; }
  .gallery__item--wide { aspect-ratio: 16 / 10; }
}

/* ============================================================
   FEEDBACK ROUND 1 (2026-06-19) — client review of the 4 pages
   ============================================================ */

/* 1/2/5 — drop the growth-ring + seal decorations (client preference) */
.hero__ringmark, .hero__seal, .phero__rings, .ftr__frieze { display: none !important; }

/* 3 — readable ember italic accent on the dark slate band */
.band-slate .s-head__t em { color: var(--ember-l); }

/* 2 — home hero stats: keep all three on one clean row */
.hero__specs { display: flex; flex-wrap: nowrap; }
.hero__spec { padding: 16px 18px 0 0; margin-right: 18px; }
.hero__spec .l.stamp { white-space: nowrap; }
@media (max-width: 600px) { .hero__specs { flex-wrap: wrap; } }

/* 4 — Our Story team feature: photo matches the text column height */
@media (min-width: 880px) {
  .feat--stretch { align-items: stretch; }
  .feat--stretch .feat__media { aspect-ratio: auto; height: 100%; min-height: 440px; }
}

/* 6 — Contact: sticky form column */
@media (min-width: 900px) {
  .contact-grid > .contact-card { position: sticky; top: 90px; align-self: start; }
}

/* ============================================================
   FEEDBACK ROUND 2 (2026-06-19)
   ============================================================ */

/* 1 — dark ("red") ember on the dark slate band is unreadable -> light ember.
   Applies to the step numbers; the slate-band italic accents are already light. */
.band-slate .step__n { color: var(--ember-l); }

/* 3 — every feature image matches the height of its text column */
@media (min-width: 880px) {
  .feat { align-items: stretch; }
  .feat__media { aspect-ratio: auto; height: 100%; min-height: 380px; }
}

/* 2 — footer: smaller mark + top-aligned columns so the brand block lines up */
.ftr__brand .brand__logo { height: 42px; }
.ftr__top { align-items: start; }

/* 4 — Order Logs CTA: brand slate at rest, ignites to ember + warm glow on hover */
.hdr__cta { background: var(--slate); border: 1px solid var(--slate); color: #fff; }
.hdr__cta:hover { background: var(--ember-d); border-color: var(--ember-d); animation: hdr-cta-ember 1.5s ease-in-out infinite; }
@keyframes hdr-cta-ember {
  0%, 100% { box-shadow: 0 -2px 14px rgba(217,119,47,0.50), 0 4px 18px rgba(192,86,33,0.45); }
  50%      { box-shadow: 0 -4px 22px rgba(255,176,74,0.78), 0 6px 24px rgba(192,86,33,0.55); }
}

/* 6 — editorial mosaic galleries (alternating big/small tiles, no orphan) */
.gallery--mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(160px, 15vw, 230px); }
.gallery--mosaic .gallery__item { aspect-ratio: auto; height: 100%; }
.gallery--m6 .gallery__item:nth-child(1),
.gallery--m6 .gallery__item:nth-child(6) { grid-column: span 2; }
.gallery--m9 .gallery__item:nth-child(1),
.gallery--m9 .gallery__item:nth-child(5),
.gallery--m9 .gallery__item:nth-child(9) { grid-column: span 2; }
@media (max-width: 767px) {
  /* clean uniform 2-col on mobile (a phone can't replicate the 4-col desktop mosaic; equal
     squares read tidier and avoid the spanning gaps) */
  .gallery--mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(120px, 32vw, 175px); }
  .gallery--mosaic .gallery__item { grid-column: auto !important; }
}

/* gallery lightbox (click any gallery photo to view full-screen — desktop + mobile) */
.gallery__item img { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(18, 21, 28, 0.93);
  display: none; align-items: center; justify-content: center; padding: 24px; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 96vw; max-height: 90vh; border-radius: 6px; box-shadow: 0 24px 70px rgba(0,0,0,0.55); }
.lightbox__close { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 16px;
  width: 44px; height: 44px; background: none; border: 0; color: #fff; font-size: 34px; line-height: 1;
  cursor: pointer; opacity: 0.85; }
.lightbox__close:hover { opacity: 1; }

/* ============================================================
   FEEDBACK ROUND 3 (2026-06-19)
   ============================================================ */

/* 1 — Hero background: layered directional scrim (the senior-designer
   approach to text over a photo). Deep on the left where the headline sits,
   fading clear over the photo on the right, plus a soft bottom-up darken and
   a slight desaturation so the image reads calm behind the words. Replaces
   the old flat vertical fade. */
.hero__bg img { filter: saturate(0.86) brightness(0.95) contrast(1.02); }
.hero__bg::after {
  background:
    linear-gradient(90deg, rgba(22,25,33,0.88) 0%, rgba(22,25,33,0.66) 36%, rgba(22,25,33,0.22) 66%, rgba(22,25,33,0.04) 100%),
    linear-gradient(0deg, rgba(22,25,33,0.58) 0%, rgba(22,25,33,0.12) 28%, transparent 52%),
    radial-gradient(58% 70% at 90% 4%, rgba(192,86,33,0.15) 0%, transparent 55%);
}
@media (max-width: 767px) {
  /* stacked layout: full-width text needs a vertical scrim, not a side one */
  .hero__bg::after {
    background:
      linear-gradient(180deg, rgba(22,25,33,0.80) 0%, rgba(22,25,33,0.62) 42%, rgba(22,25,33,0.90) 100%),
      radial-gradient(70% 50% at 90% 2%, rgba(192,86,33,0.16) 0%, transparent 60%);
  }
}

/* 2 — Accent colour: brighten the dark-ember heading accent on light bands so
   it pops a touch more (same burnt red, lifted in OKLCH lightness only — not
   orange, not bright red). Dark slate bands keep light ember (round 1), which
   wins here on specificity. */
:root { --ember-accent: #9C3A17; }
.s-head__t em, .feat__t em { color: var(--ember-accent); }

/* ============================================================
   FEEDBACK ROUND 4 (2026-06-19) — desktop batch
   ============================================================ */

/* Hero overlay: single flat scrim (replaces the directional gradient) */
.hero__bg img { filter: saturate(.7) brightness(.84) contrast(1.04); }
.hero__bg::after { background: rgba(19,22,29,0.78); }
@media (max-width: 767px) { .hero__bg::after { background: rgba(19,22,29,0.82); } }

/* Warm photo grade: harmonise all foreground photography (calms cold blue skies) */
.hero__media img, .tag__media img, .feat__media img,
.pcard__media img, .gallery__item img, .photo-card img {
  filter: sepia(.34) saturate(1.12) hue-rotate(-8deg) contrast(1.04);
}

/* Feature image matches the text-column height (kills the empty space) */
@media (min-width: 880px) {
  .feat__media { position: relative; min-height: 320px; height: auto; aspect-ratio: auto; }
  .feat__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

/* Fire A "living ember fill" on the primary buttons (desktop hover) */
.hdr__cta { background: var(--slate); border: 1px solid var(--slate); color:#fff; }
.hdr__cta:hover, .form-submit:hover {
  background: linear-gradient(110deg, #6E2A11, #B14E1E, #E08A3C, #B14E1E, #6E2A11);
  background-size: 280% 100%; border-color: transparent; color:#fff;
  animation: fire-fill 2.6s linear infinite;
  box-shadow: 0 0 0 1px rgba(217,119,47,.45), 0 6px 22px rgba(192,86,33,.45);
}
@keyframes fire-fill { from { background-position: 0% 50%; } to { background-position: 280% 50%; } }

/* Interior page hero: ember-breathe glow on the RIGHT (text is left, stays readable) */
.phero::after {
  background: radial-gradient(46% 64% at 86% 46%, rgba(217,119,47,.30) 0%, rgba(192,86,33,.13) 36%, transparent 64%);
  transform-origin: 84% 48%; animation: ember-breathe 4.8s ease-in-out infinite;
}
@keyframes ember-breathe { 0%,100% { opacity:.58; transform: scale(1); } 50% { opacity:1; transform: scale(1.07); } }

/* Keyboard focus visibility (launch readiness) */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 4px;
}

/* Tasteful motion: hero entrance stagger + scroll reveals (desktop only, off for reduced-motion) */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  html.motion-ready .s-head, html.motion-ready .feat, html.motion-ready .tag,
  html.motion-ready .pcard, html.motion-ready .val, html.motion-ready .faq__item,
  html.motion-ready .step, html.motion-ready .band, html.motion-ready .opt,
  html.motion-ready .quote, html.motion-ready .contact-card, html.motion-ready .areas,
  html.motion-ready .addon-row, html.motion-ready .xtras {
    opacity: 0; transform: translateY(16px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  }
  html.motion-ready .s-head.in, html.motion-ready .feat.in, html.motion-ready .tag.in,
  html.motion-ready .pcard.in, html.motion-ready .val.in, html.motion-ready .faq__item.in,
  html.motion-ready .step.in, html.motion-ready .band.in, html.motion-ready .opt.in,
  html.motion-ready .quote.in, html.motion-ready .contact-card.in, html.motion-ready .areas.in,
  html.motion-ready .addon-row.in, html.motion-ready .xtras.in {
    opacity: 1; transform: none;
  }
  html.motion-ready .hero__copy > *, html.motion-ready .phero__in > * {
    opacity: 0; transform: translateY(14px); animation: hero-in .8s cubic-bezier(.22,1,.36,1) forwards;
  }
  html.motion-ready .hero__copy > *:nth-child(1), html.motion-ready .phero__in > *:nth-child(1){ animation-delay:.05s }
  html.motion-ready .hero__copy > *:nth-child(2), html.motion-ready .phero__in > *:nth-child(2){ animation-delay:.16s }
  html.motion-ready .hero__copy > *:nth-child(3), html.motion-ready .phero__in > *:nth-child(3){ animation-delay:.27s }
  html.motion-ready .hero__copy > *:nth-child(4), html.motion-ready .phero__in > *:nth-child(4){ animation-delay:.38s }
  html.motion-ready .hero__copy > *:nth-child(5){ animation-delay:.49s }
}
@keyframes hero-in { to { opacity:1; transform:none; } }

/* ============================================================
   FEEDBACK ROUND 5 (2026-06-19)
   ============================================================ */

/* 1 — Home hero: the photo card matches the text-column height and sits further right */
@media (min-width: 920px) {
  .hero__in { align-items: stretch; }
  .hero__fig { display: flex; align-items: stretch; justify-content: flex-end; }
  .hero__media { aspect-ratio: auto; height: 100%; width: 100%; max-width: none; margin-left: auto; }
  .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

/* 2 — CTA band takes the footer colour and drops the glow (the log-store divider will be the separation) */
.cta { background: var(--slate-d); }
.cta__glow { display: none !important; }

/* 4 — Contact "Send my enquiry" reverts to the plain ember button (no fire-fill) */
.form-submit:hover { background: var(--ember-d); border-color: var(--ember-d); color: #fff; animation: none !important; box-shadow: none; }

/* 3 (interim) — interior page hero: ember glow moved to the bottom + faster.
   The full realistic dancing flame is a focused follow-up (see handover). */
.phero::after {
  background: radial-gradient(58% 72% at 50% 110%, rgba(217,119,47,.36) 0%, rgba(192,86,33,.15) 38%, transparent 66%);
  transform-origin: 50% 100%; animation: ember-breathe 2.3s ease-in-out infinite;
}

/* ============================================================
   FEEDBACK ROUND 6 — firelight on interior heroes + log-wall divider
   ============================================================ */
.phero__fire { position: absolute; right: 2%; bottom: 0; width: 42%; height: 80%; z-index: 0; pointer-events: none; }
.phero__fire canvas { width: 100%; height: 100%; display: block; filter: blur(24px) saturate(1.05); mix-blend-mode: screen; }
.phero::after { display: none !important; }   /* remove the interim round-5 bottom glow the firelight replaces */

/* log-wall divider in the CTA -> footer seam */
#logwall { display: block; width: 100%; background: var(--slate-d); line-height: 0; }
#logwall svg { display: block; width: 100%; height: auto; }

/* ===== ROUND 6b — tighter CTA->wall gap, wider home hero photo ===== */
/* grain removed — it tinted the wall background so it no longer matched the slate sections.
   The wall SVG is transparent now and sits on the #logwall slate-d background (= the CTA/footer colour), so it blends. */

/* pull the log wall up closer to the CTA (cut the CTA's big bottom padding) */
.section.cta { padding-bottom: clamp(18px, 2.4vw, 30px); }

/* home hero: wider photo column, but the image matches the TEXT-column height so the section doesn't grow taller */
@media (min-width: 920px) {
  .hero__in { grid-template-columns: 0.9fr 1.1fr; gap: 52px; align-items: stretch; }
  .hero__fig { height: 100%; }
  .hero__media { aspect-ratio: auto; height: 100%; }
}

/* ===== ROUND 6c — hero + proof strip fill exactly one screen ===== */
/* The header is 74px sticky-in-flow. We wrap hero + proof in .screen-1 sized to
   (100svh - 74px), so header + hero + proof = one full viewport on EVERY screen
   size. The hero flex-grows to fill; the proof strip pins to the bottom edge.
   Content stays a readable size (clamp), centred in the grown hero. */
.screen-1 { min-height: calc(100svh - 74px); display: flex; flex-direction: column; }
.screen-1 > .hero { flex: 1 1 auto; display: flex; align-items: center; }
.screen-1 > .hero > .hero__in { width: 100%; }
.screen-1 > .proof { flex: 0 0 auto; }

@media (min-width: 920px) {
  /* photo width kept (1.18fr reads perfectly); the image matches the TEXT-column
     height again via stretch + height:100% */
  .hero__in { grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: stretch; }
  .hero__fig { height: 100%; justify-content: flex-end; }
  /* A2 — right edge of the photo lines up with the content/tipper edge (was inset 40px) */
  .hero__media { aspect-ratio: auto; height: 100%; margin-left: auto; margin-right: 0; }
}

/* ============================================================
   MOBILE NAV — hamburger + full-screen overlay menu (≤767px)
   ============================================================ */
.m-nav { display: none; }                 /* never shown on desktop */
@media (max-width: 767px) {
  /* burger sits at the right of the header (nav/tel/cta are hidden at this width) */
  .burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; margin-left: auto; padding: 11px 10px;
    background: none; border: 0; cursor: pointer; position: relative; z-index: 2;
  }
  .burger span { display: block; height: 2px; width: 24px; background: var(--ink); border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* header stays above the overlay so the burger remains tappable to close */
  .hdr { z-index: 250; }

  .m-nav {
    display: flex; position: fixed; inset: 0; z-index: 200;
    flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: var(--cream); padding: 24px calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s ease;
  }
  .m-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
  .m-nav__links { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .m-nav__links a { font-family: var(--serif); font-size: clamp(1.7rem, 8vw, 2.3rem); line-height: 1.1;
    color: var(--ink); padding: 12px 18px; }
  .m-nav__links a.is-active { color: var(--ember); }
  .m-nav__tel { margin-top: 22px; font-family: var(--slab); font-weight: 600; font-size: 1.1rem; color: var(--ink); padding: 8px;
    display: inline-flex; align-items: center; gap: 9px; }
  .m-nav__tel svg { width: 18px; height: 18px; color: var(--ember); flex: none; }
  .m-nav__cta { margin-top: 12px; }
}

/* ============================================================
   MOBILE PASS (≤767px) — hero one-screen fit, proof 2×2, tap targets, H2 cap
   ============================================================ */
@media (max-width: 767px) {
  /* B2 — mobile hero fits one screen: drop the foreground truck photo, keep the
     dark yard background photo, and tighten spacing */
  .hero__fig { display: none; }
  .hero { padding-block: clamp(26px, 6vw, 40px); }
  .hero__eyebrow { margin-bottom: 16px; }
  .hero__title { margin-bottom: 20px; }
  .hero__sub { margin-bottom: 22px; }

  /* B2 — proof strip as a compact 2x2 grid so hero + strip clear one screen */
  .proof__row { grid-template-columns: 1fr 1fr; }
  .proof__item { padding: 16px 6px; gap: 10px; }
  .proof__item:nth-child(n+3) { border-top: 1px solid var(--rule-2); }
  .proof__item b { font-size: 14.5px; }
  .proof__item span { font-size: 12px; }

  /* B6 — cap section H2 at ~30px on mobile */
  .s-head__t { font-size: clamp(26px, 6.6vw, 30px); }

  /* B3 — 44px tap areas for inline links and footer links */
  .link-arrow { display: inline-flex; align-items: center; min-height: 44px; }
  .ftr__col a { display: inline-block; padding: 9px 0; }
  .ftr__col li { margin-bottom: 0; }
  .ftr__bot a { display: inline-block; padding: 8px 4px; }
}

/* B5 — hero CTAs stack full-width on small phones */
@media (max-width: 420px) {
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
}

/* B4 — delivery map "tap to explore" veil (mobile only; JS adds/removes it) */
.map-activate {
  position: absolute; inset: 0; z-index: 1100; border: 0; cursor: pointer;
  background: rgba(28, 31, 40, 0.30); color: #fff;
  font: 600 14px/1.2 var(--sans, 'Plus Jakarta Sans', sans-serif); letter-spacing: 0.02em;
  display: flex; align-items: center; justify-content: center; text-align: center;
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}

/* ───────── Firelighter feature + icon add-on row ───────── */
.fl { display: grid; grid-template-columns: 1fr; gap: clamp(24px,3vw,46px); align-items: stretch; margin-top: clamp(40px,5vw,64px); }
@media (min-width: 820px) { .fl { grid-template-columns: 0.8fr 1fr; } }
.fl__media { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-2); outline: 1px solid var(--rule); outline-offset: -1px; aspect-ratio: 4/5; margin: 0; }
@media (min-width: 820px) { .fl__media { aspect-ratio: auto; } }
.fl__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: grayscale(0.12) contrast(1.02); }
.fl__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(60,66,83,0.10), rgba(122,46,18,0.08)); mix-blend-mode: multiply; }
.fl__body { display: flex; flex-direction: column; }
.fl__k { font-family: var(--slab); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-30); }
.fl__t { font-size: clamp(26px,3.2vw,38px); line-height: 1.1; margin: 10px 0 16px; }
.fl__t em { font-style: italic; color: var(--ember-d); margin: 0 0.12em; }
.fl__p { font-size: 16px; line-height: 1.62; color: var(--ink-70); margin-bottom: 20px; max-width: 46ch; }
.fl__p b { color: var(--ink); font-weight: 600; }
.fl__list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 11px; }
.fl__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--ink-70); }
.fl__list svg { width: 17px; height: 17px; color: var(--ember); flex: none; margin-top: 3px; }
.fl__foot { display: flex; align-items: baseline; gap: 22px; margin-top: auto; padding-top: 4px; }
.fl__price { font-family: var(--serif); font-size: 30px; font-weight: 500; color: var(--ink); letter-spacing: -0.02em; }
.fl__price small { font-family: var(--slab); font-size: 12px; font-weight: 600; color: var(--ink-50); letter-spacing: 0.06em; margin-left: 6px; }
.addon-row--icon .addon { display: flex; gap: 14px; align-items: flex-start; }
.addon-row--icon .ic { width: 38px; height: 38px; border-radius: 999px; background: rgba(192,86,33,0.10); color: var(--ember-d); display: grid; place-items: center; flex: none; }
.addon-row--icon .ic svg { width: 19px; height: 19px; }

/* ─── Footer bottom bar: stack on mobile so the credit doesn't misalign ─── */
.ftr__legal a { color: var(--ember-l); }
@media (max-width: 767px) {
  .ftr__bot { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ─── Legal / prose pages (privacy, terms) ─── */
.legal { max-width: 68ch; margin: 0 auto; }
.legal h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 40px 0 10px; }
.legal h2:first-of-type { margin-top: 8px; }
.legal p, .legal li { font-size: 16.5px; line-height: 1.7; color: var(--ink-70); }
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { margin: 0 0 8px; }
.legal a { color: var(--ember-d); text-decoration: underline; text-underline-offset: 2px; }
.legal__updated { font-family: var(--slab); font-size: 13px; letter-spacing: 0.04em; color: var(--ink-50); text-transform: uppercase; margin-bottom: 28px; }

/* ─── Contact form: honeypot + success / error states ─── */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 16px; padding: 14px 16px; border-radius: var(--r); font-size: 15px; line-height: 1.5; display: none; }
.form-status.is-visible { display: block; }
.form-status--ok { background: rgba(192,86,33,0.08); border: 1px solid rgba(192,86,33,0.35); color: var(--ink); }
.form-status--err { background: rgba(180,40,40,0.06); border: 1px solid rgba(180,40,40,0.35); color: #7a2020; }
.form-submit[disabled] { opacity: 0.6; cursor: default; }