/* Nearby Arborist. Tokens and layout plan: DESIGN.md. Growth rings, one lit ring; Bark and Chainsaw Orange on Sawdust;
   Young Serif for headings, Manrope for reading. Light theme only. No gradients, glow, glass or side accent bars. */

@font-face { font-family: 'Young Serif'; src: url(/assets/fonts/young-serif-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url(/assets/fonts/manrope-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url(/assets/fonts/manrope-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url(/assets/fonts/manrope-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --bark: #2B1F17; --sawdust: #F4ECDC; --white: #FFFFFF; --orange: #E8661C; --wood: #EAD7B5; --heart: #D9B988;
  --leaf: #5E7F76; --orange-light: #F6A570; --grey: #6B5D51; --soft: #CDBFA8; --line: #DCCDB2;
  --serif: 'Young Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 8px; --card-r: 14px; --wrap: 1180px;
  --ease: cubic-bezier(.2, .8, .25, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--sawdust); color: var(--bark); font: 400 17px/1.6 var(--sans); overflow-x: hidden; }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--bark); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--orange); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.4rem); line-height: 1.04; }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.7vw, 2.6rem); }
h3 { font-size: 1.3rem; line-height: 1.2; }
h4 { font: 700 .95rem/1.3 var(--sans); margin: 0 0 .7em; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--bark); color: var(--sawdust); padding: 10px 14px; border-radius: var(--r); z-index: 99; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; box-shadow: 0 0 0 1.5px var(--bark); border-radius: 4px; }
.ic { width: 22px; height: 22px; flex: none; }
.tbc { background: #ffe3a3; padding: 0 4px; border-radius: 3px; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- buttons and small type */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 22px;
  background: var(--orange); color: var(--bark); border: 0; border-radius: var(--r); font: 700 1rem/1.2 var(--sans);
  text-decoration: none; cursor: pointer; transition: transform .18s var(--ease), background-color .18s var(--ease); }
.btn:hover { background: #F07A33; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn .ic { width: 20px; height: 20px; transition: transform .2s var(--ease); }
.btn:hover .ic { transform: translateX(3px); }
.btn.block { display: flex; width: 100%; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 2px var(--bark); }
.btn.ghost:hover { background: var(--wood); }
.textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.textlink .ic { width: 18px; height: 18px; }
.textlink.light, .on-dark a { color: var(--sawdust); }
.linkish { background: none; border: 0; padding: 0; font-weight: 700; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; cursor: pointer; }
.eyebrow { font: 700 .9rem/1.3 var(--sans); color: var(--grey); margin: 0 0 12px; }
.eyebrow.ring, .ringlist li, .checked { position: relative; }
.eyebrow.ring { padding-left: 28px; }
.eyebrow.ring::before, .ringlist li::before, .rmark { content: ''; display: inline-block; width: 20px; height: 20px; background: url(/assets/img/ring-mark.svg) center / contain no-repeat; }
.eyebrow.ring::before { position: absolute; left: 0; top: -1px; }
.ringlist { list-style: none; padding: 0; margin: 0; }
.ringlist li { padding-left: 32px; margin-bottom: 10px; }
.ringlist li::before { position: absolute; left: 0; top: 3px; }
.rmark { vertical-align: -4px; margin-right: 8px; }
.small, .hint, .fineprint { font-size: .9rem; color: var(--grey); }
.optional { font-weight: 400; color: var(--grey); }
.safety { font-size: .92rem; color: var(--bark); margin: 12px 0 0; }

/* ---------------------------------------------------------------- header and menus */
.site-head { position: sticky; top: 0; z-index: 40; background: var(--sawdust); border-bottom: 1px solid var(--line); }
.site-head > .wrap { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.logo { display: inline-flex; flex-direction: column; gap: 4px; flex: none; text-decoration: none; }
.logo img { display: block; width: 214px; height: auto; }
.logo-desc { font: 600 .78rem/1.2 var(--sans); color: var(--grey); letter-spacing: .01em; }
.mainnav { margin-left: auto; }
.mainnav > ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.mainnav .dd { display: flex; align-items: center; }
.dd-top, .nav-link { display: inline-block; padding: 10px 12px; font-weight: 700; text-decoration: none; border-radius: var(--r); }
.dd-top:hover, .nav-link:hover { background: var(--wood); }
.dd-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 36px; margin-left: -8px; background: none; border: 0; cursor: pointer; border-radius: var(--r); }
.dd-btn .chev { transition: transform .2s var(--ease); }
.dd.open .dd-btn .chev { transform: rotate(180deg); }
.dd-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); padding: 28px 0 0; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; }
.dd:hover:not(.shut) .dd-panel, .dd.open .dd-panel { opacity: 1; visibility: visible; transform: none; }
.dd-in { display: grid; grid-template-columns: 1fr 300px; gap: 40px; }
.dd-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.dd-groups.g4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.dd-groups.g5 { grid-template-columns: repeat(5, 1fr); gap: 22px; }
.dd-in.no-side { grid-template-columns: 1fr; }
.dd-h { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 10px; }
.dd-g ul { list-style: none; margin: 0; padding: 0; }
.dd-g li a { display: block; padding: 6px 0; text-decoration: none; }
.dd-g li a:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.dd-side { background: var(--sawdust); border-radius: var(--card-r); padding: 20px; align-self: start; }
.dd-foot { padding: 16px 20px 20px; border-top: 1px solid var(--line); margin-top: 24px; }
.dd-foot a { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; }
.head-cta { min-height: 44px; padding: 10px 18px; }
.menu-btn { display: none; margin-left: auto; width: 48px; height: 48px; align-items: center; justify-content: center; background: none; border: 1.5px solid var(--bark); border-radius: var(--r); cursor: pointer; }
.mobile-nav { position: fixed; inset: 0; z-index: 60; background: var(--sawdust); overflow-y: auto; padding: 0 20px 40px; display: none; }
.mobile-nav.open { display: block; }
.menu-open, .menu-open body { overflow: hidden; }
.mn-head { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.mn-close { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1.5px solid var(--bark); border-radius: var(--r); }
.mn-top { padding: 8px 0 20px; }
.mn-desc { color: var(--grey); margin: 0 0 12px; }
.mn-label { font-family: var(--serif); font-size: 1.4rem; margin: 6px 0 6px; }
.mn-sec { border-top: 1px solid var(--line); }
.mn-sec summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-weight: 700; cursor: pointer; }
.mn-sec summary::-webkit-details-marker { display: none; }
.mn-sec[open] summary .chev { transform: rotate(180deg); }
.mn-body ul { list-style: none; margin: 0 0 12px; padding: 0; }
.mn-body li a { display: block; padding: 9px 0 9px 14px; text-decoration: none; }
.mn-h { font: 700 .82rem/1.3 var(--sans); color: var(--grey); margin: 8px 0 0 14px; }
.mn-body .mn-all { border-top: 0; padding: 8px 0 16px 14px; }
.mn-all, .mn-link { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-weight: 700; text-decoration: none; border-top: 1px solid var(--line); }
.mn-links { margin-top: 18px; }
.site-head.slim > .wrap { min-height: 64px; }
@media (max-width: 1080px) {
  .mainnav, .head-cta { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 560px) {
  .logo img { width: 190px; }
  .logo-desc { display: none; }   /* the phone header: the hero line says what we do, right under it */
  .site-head > .wrap { min-height: 64px; }
}

/* ---------------------------------------------------------------- stacked paper (the card style) */
.paper { position: relative; isolation: isolate; }
.paper::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--wood); border-radius: var(--card-r);
  transform: rotate(-1.4deg) translate(-5px, 7px); }
.paper > * { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--card-r); }

/* ---------------------------------------------------------------- the quote flow card */
.flowcard { padding: 22px; }
.ftop { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.qlog { width: 56px; height: 56px; flex: none; }
.qlog .bark { fill: var(--wood); stroke: var(--bark); stroke-width: 4; }
.qlog .r { fill: none; stroke: var(--line); stroke-width: 3; transition: stroke .25s var(--ease), stroke-width .25s var(--ease); }
.qlog .crack { fill: var(--bark); }
.qlog[data-done="1"] .r1, .qlog[data-done="2"] .r2, .qlog[data-done="3"] .r3, .qlog[data-done="4"] .r4 { stroke: var(--orange); stroke-width: 5; }
.qlog[data-done="2"] .r1, .qlog[data-done="3"] .r1, .qlog[data-done="3"] .r2,
.qlog[data-done="4"] .r1, .qlog[data-done="4"] .r2, .qlog[data-done="4"] .r3 { stroke: var(--bark); }
.fq { font-family: var(--serif); font-size: 1.45rem; line-height: 1.15; margin: 0; }
.step { display: none; }
.step.on { display: block; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 700; margin: 0 0 10px; padding: 0; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tiles legend { grid-column: 1 / -1; }
.tile { position: relative; }
.tile input { position: absolute; opacity: 0; pointer-events: none; }
.tile label { display: flex; align-items: center; gap: 12px; height: 100%; min-height: 64px; padding: 12px 14px; background: var(--white);
  border: 1.5px solid var(--line); border-radius: var(--r); font-weight: 700; line-height: 1.25; cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease), transform .15s var(--ease); }
.tile label small { display: block; font-weight: 400; color: var(--grey); font-size: .85rem; margin-top: 2px; }
.tile label:hover { border-color: var(--bark); }
.tile label:active { transform: scale(.985); }
.tile input:checked + label { border-color: var(--bark); background: var(--wood); box-shadow: inset 0 0 0 1px var(--bark); }
.tile input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 3px; }
.tile.urgent label { background: var(--bark); color: var(--sawdust); border-color: var(--bark); }
.tile.urgent label small { color: var(--soft); }
.tile.urgent label .ic { color: var(--orange-light); }
.tile.urgent input:checked + label { box-shadow: 0 0 0 3px var(--orange); }
.chips-q { margin-bottom: 16px; }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.chipset label { position: relative; }
.chipset input { position: absolute; opacity: 0; pointer-events: none; }
.chipset span { display: inline-flex; align-items: center; min-height: 46px; padding: 10px 16px; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r); font-weight: 600; cursor: pointer; }
.chipset span:hover { border-color: var(--bark); }
.chipset input:checked + span { background: var(--wood); border-color: var(--bark); box-shadow: inset 0 0 0 1px var(--bark); }
.chipset input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 3px; }
.chips-q .hint { margin: 8px 0 0; }
.stop { background: var(--bark); color: var(--sawdust); border-radius: var(--r); padding: 16px 18px; margin: 4px 0 14px; }
.stop a { color: var(--sawdust); font-weight: 700; }
.stop-h { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.25rem; margin-bottom: 8px; }
.stop-h .ic { color: var(--orange-light); }
.stop p:last-child { margin: 0; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; }
.field input, .field textarea, .pc-row input, .pc-row select { width: 100%; min-height: 52px; padding: 12px 14px; background: var(--white);
  border: 1.5px solid var(--bark); border-radius: var(--r); font-size: 1.05rem; }
.field textarea { min-height: 96px; resize: vertical; }
.field .hint { display: block; margin-top: 6px; }
.ferr, .err { color: #9B2C10; font-weight: 600; font-size: .95rem; }
.err:empty { display: none; }
.err { margin: 10px 0 0; }
.ferr { display: block; margin-top: 6px; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 6px; font-size: .95rem; cursor: pointer; }
.consent input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--bark); }
.add-note { margin: 0 0 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.captcha { margin: 10px 0 0; }
.captcha .g-recaptcha:empty { display: none; }
.step-nav { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.back { background: none; border: 0; padding: 10px 4px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.card-note { display: flex; align-items: center; gap: 8px; margin: 18px 0 0 6px; font-weight: 600; }
.card-note .ic { color: var(--leaf); }

/* ---------------------------------------------------------------- home hero: a stacked headline over a wide card */
.hero { position: relative; overflow: hidden; padding: 40px 0 56px; }
.hero > .wrap { position: relative; }
.hero h1 { max-width: 12.5em; font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4.2rem); }
.hero-sub { font-size: 1.15rem; max-width: 30em; margin-bottom: 26px; }
.hero-card { max-width: 980px; position: relative; z-index: 1; }
.hero-stump { position: absolute; right: -13vw; bottom: 34px; width: min(44vw, 660px); pointer-events: none; }
.hero-stump .stump { display: block; width: 100%; height: auto; }
.rings-wrap { line-height: 0; overflow: hidden; }
.rings-break { display: block; width: 100%; height: 120px; }
@media (max-width: 860px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .hero-stump { display: none; }
}
@media (max-width: 560px) {
  .hero { padding: 22px 0 36px; }
  .hero-sub { font-size: 1.02rem; margin-bottom: 20px; }
  .flowcard { padding: 16px; }
  .tile label { min-height: 58px; padding: 10px 11px; gap: 9px; font-size: .95rem; }
  .tile label .ic { width: 20px; height: 20px; }
  .tile.urgent { grid-column: 1 / -1; }
  .qlog { width: 46px; height: 46px; }
  .fq { font-size: 1.25rem; }
  .rings-break { height: 80px; }
}

/* ---------------------------------------------------------------- home sections */
section { padding: 64px 0; }
.sec-head { max-width: 46em; margin-bottom: 28px; }
.jobs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.jobs-cols h3 { font-size: 1.5rem; padding-bottom: 12px; border-bottom: 2px solid var(--bark); }
.jobrows { list-style: none; margin: 0; padding: 0; }
.jobrows li { border-bottom: 1px solid var(--line); }
.jobrows a { display: flex; align-items: center; gap: 16px; padding: 16px 0 16px 34px; position: relative; text-decoration: none; }
.jobrows a::before { content: ''; position: absolute; left: 0; top: 20px; width: 22px; height: 22px; background: url(/assets/img/ring-mark.svg) center / contain no-repeat; }
.jobrows a > span { flex: 1; font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; }
.jobrows small { display: block; font: 400 .95rem/1.45 var(--sans); color: var(--grey); margin-top: 4px; }
.jobrows .ic { transition: transform .2s var(--ease); }
.jobrows a:hover .ic { transform: translateX(4px); }
.jobrows a:hover > span { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.band, .on-dark { background: var(--bark); color: var(--sawdust); }
.band-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.band h2 { color: var(--sawdust); margin: 0; }
.band p { color: var(--sawdust); }
.how-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.how-rings { list-style: none; margin: 0; padding: 0; position: relative; }
.how-rings li { position: relative; padding: 0 0 26px 92px; min-height: 90px; }
.how-rings li::before { content: ''; position: absolute; left: 0; top: 0; width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid var(--bark); box-shadow: inset 0 0 0 9px var(--sawdust), inset 0 0 0 11px var(--line); }
.how-rings li:nth-child(2)::before { border-color: var(--orange); border-width: 4px; }
.how-rings li:nth-child(3)::before { box-shadow: inset 0 0 0 7px var(--sawdust), inset 0 0 0 9px var(--line), inset 0 0 0 17px var(--sawdust), inset 0 0 0 19px var(--line); }
.how-rings li:not(:last-child)::after { content: ''; position: absolute; left: 31px; top: 70px; bottom: 6px; width: 2px; background: var(--line); }
.how-rings h3 { font-size: 1.45rem; margin-bottom: 6px; }
.permits { background: var(--wood); }
.permits-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
.state-rules { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--bark); }
.state-rules li { border-bottom: 1px solid var(--heart); }
.state-rules a { display: grid; grid-template-columns: 11em 1fr; gap: 14px; padding: 14px 0; text-decoration: none; }
.state-rules b { font: 400 1.2rem/1.3 var(--serif); }
.state-rules span { color: var(--bark); font-size: .95rem; }
.state-rules a:hover b { text-decoration: underline; text-decoration-color: var(--orange); }
.place-index { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 26px; }
.place-index h3 { font: 700 .95rem/1.3 var(--sans); padding-bottom: 10px; border-bottom: 1px solid var(--bark); }
.place-index p a { display: block; font: 400 1.35rem/1.6 var(--serif); text-decoration: none; }
.place-index p a:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.guide-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 26px; }
.gcard { display: block; text-decoration: none; }
.gcard:nth-child(2)::before { transform: rotate(1.2deg) translate(5px, 7px); }
.gcard-in { display: block; padding: 24px; height: 100%; }
.gcard b { display: block; font: 400 1.4rem/1.2 var(--serif); margin-bottom: 10px; }
.gcard span span { color: var(--grey); }
.gcard:hover b { text-decoration: underline; text-decoration-color: var(--orange); }
.faq-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font: 400 1.2rem/1.3 var(--serif); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { width: 22px; height: 22px; flex: none; transition: transform .2s var(--ease); }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq details p { margin: 0 0 18px; max-width: 40em; }
.closing { text-align: left; padding-top: 30px; }
.closing h2 { margin-bottom: 18px; }
.cta-sub { max-width: 40em; }
.pc-row { display: flex; gap: 12px; max-width: 760px; flex-wrap: wrap; }
.pc-row select { flex: 1.4 1 220px; width: auto; }
.pc-row input { flex: 1 1 140px; width: auto; }
.pc-row .btn { flex: none; }
@media (max-width: 860px) {
  section { padding: 48px 0; }
  .jobs-cols, .band-grid, .how-grid, .permits-grid, .faq-grid { grid-template-columns: 1fr; gap: 28px; }
  .place-index { grid-template-columns: 1fr 1fr; gap: 24px; }
  .guide-cards { grid-template-columns: 1fr; gap: 26px; }
  .state-rules a { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 480px) {
  .place-index { grid-template-columns: 1fr; }
  .pc-row .btn { width: 100%; }
}

/* ---------------------------------------------------------------- footer and sticky bar */
.site-foot { padding: 0 0 30px; }
.foot-rings { display: block; width: 100%; height: 90px; object-fit: cover; object-position: center bottom; margin-bottom: 30px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 28px; }
.foot-logo { width: 220px; height: auto; margin-bottom: 14px; }
.foot-brand p { color: var(--soft); max-width: 26em; }
.foot-h { font: 700 .95rem/1.3 var(--sans); margin: 0 0 .7em; color: var(--sawdust); }   /* footer column titles: a p, not a heading (4 Nov 2026), styled as the old h4 */
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li a { display: inline-block; padding: 5px 0; color: var(--sawdust); text-decoration: none; }
.site-foot li a:hover { text-decoration: underline; text-decoration-color: var(--orange-light); }
.foot-small { display: flex; flex-direction: column; gap: 10px; margin-top: 36px; padding-top: 20px; border-top: 1px solid #4A3B30; color: var(--soft); font-size: .88rem; }
.foot-small a { color: var(--soft); }
.site-foot.slim { padding: 24px 0; }
.site-foot.slim .foot-small { margin: 0; border: 0; padding: 0; }
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--sawdust); border-top: 1px solid var(--line); display: none; }
.sticky .btn { width: 100%; }
@media (max-width: 860px) { .sticky:not([hidden]) { display: block; } .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- the quote page, thank-you, 404 */
.flow { padding: 30px 0 70px; }
.flow-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.flow-h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); margin-bottom: 22px; }
.aside-card { padding-top: 70px; }
.aside-card h2 { font-size: 1.5rem; }
.simple { padding: 46px 0 0; }
.ty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; padding-bottom: 46px; }
.ty-log { width: 96px; height: 96px; margin-bottom: 18px; }
.ty-card { padding: 26px; }
.ty-card h2 { font-size: 1.6rem; }
.lede { font-size: 1.15rem; max-width: 38em; }
.nf { max-width: 760px; padding-bottom: 40px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
@media (max-width: 860px) {
  .flow-grid, .ty-grid { grid-template-columns: 1fr; gap: 30px; }
  .aside-card { padding-top: 0; }
}

/* ---------------------------------------------------------------- content pages */
.phero { padding: 26px 0 0; position: relative; }
.phero .ph-text { max-width: 820px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 16px; padding: 0; font-size: .88rem; color: var(--grey); }
.crumbs li:not(:last-child)::after { content: '/'; margin-left: 6px; color: var(--line); }
.crumbs a { color: var(--grey); }
.phero h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem); margin-bottom: 10px; }
.phero h1.has-sub { margin-bottom: 4px; }
.h1-sub { font: 400 1.25rem/1.35 var(--serif); color: var(--grey); margin-bottom: 12px; }
.checked { display: flex; align-items: center; font-weight: 700; margin: 0 0 6px; }
.official { margin: 0 0 12px; font-weight: 700; }
.official span { font-weight: 400; color: var(--grey); font-size: .9rem; }
.phero .lede { margin-bottom: 20px; }
.askwrap { max-width: 980px; margin-bottom: 34px; }
.askcard { padding: 20px; }
.ask-h { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 12px; }
.tiles.small { grid-template-columns: repeat(4, 1fr); }
.tiles.small legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* the card's heading asks it */
.tiles.small label { min-height: 56px; font-size: .95rem; }
.ask-row { display: flex; align-items: flex-end; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.ask-row .field { flex: 1 1 200px; max-width: 320px; margin: 0; }
.ask-note { display: flex; align-items: center; margin: 14px 0 0; font-weight: 600; font-size: .95rem; }
.trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.trust-strip ul { display: flex; flex-wrap: wrap; gap: 8px 36px; padding-top: 16px; padding-bottom: 10px; }
.trust-strip li { margin: 0 0 6px; font-weight: 600; }
.next-band { padding: 56px 0; }
.next-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; }
.next-band .eyebrow { color: var(--soft); }
.next-band h2 { color: var(--sawdust); }
.next-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: s; }
.next-steps li { position: relative; padding-left: 64px; counter-increment: s; }
.next-steps li::before { content: counter(s); position: absolute; left: 0; top: -4px; width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--soft); display: flex; align-items: center; justify-content: center; font: 400 1.3rem/1 var(--serif); color: var(--sawdust); }
.next-steps li:nth-child(2)::before { border-color: var(--orange-light); border-width: 3px; }
.next-steps h3 { color: var(--sawdust); margin-bottom: 4px; }
.next-steps p { color: var(--soft); margin: 0; }
.doc { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; padding-top: 50px; padding-bottom: 30px; }
.prose { max-width: 720px; min-width: 0; }
.tbl { max-width: 100%; }
.prose .meta { font-size: .88rem; color: var(--grey); margin-bottom: 26px; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-top: 1.6em; }
.prose h3 { font-size: 1.2rem; }
.prose ul, .prose ol { padding-left: 1.2em; }
.b { margin-bottom: 26px; }
.b-check ul, .b-flags ul, .b-ask ul { list-style: none; padding: 0; }
.b-check li, .b-flags li, .b-ask li { display: flex; gap: 12px; margin-bottom: 10px; }
.b-check .rmark { flex: none; margin: 3px 0 0; }
.b-flags .ic, .b-ask .ic { flex: none; margin-top: 2px; }
.b-steps ol { padding: 0; list-style: none; counter-reset: st; }
.b-steps li { position: relative; padding-left: 52px; counter-increment: st; margin-bottom: 16px; }
.b-steps li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--bark); display: flex; align-items: center; justify-content: center; font-family: var(--serif); }
.b-warn { background: var(--bark); color: var(--sawdust); border-radius: var(--card-r); padding: 20px 22px; }
.b-warn h2 { color: var(--sawdust); margin: 0; font-size: 1.35rem; }
.b-warn a { color: var(--sawdust); }
.warn-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.warn-head .ic { color: var(--orange-light); }
.b-warn p { margin: 0; }
.tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.b-compare table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.b-compare th, .b-compare td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.b-compare thead th { font-weight: 700; background: var(--sawdust); }
.diy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.diy-grid > div { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.diy-grid h3 { font-size: 1.15rem; }
.b-advice { display: flex; gap: 18px; background: var(--wood); border-radius: var(--card-r); padding: 22px; }
.adv-mark { width: 56px; height: 56px; flex: none; }
.b-advice h2 { margin-top: 0; font-size: 1.4rem; }
.b-advice p { margin: 0; }
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.loc { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.loc h3 { font-size: 1.15rem; }
.loc p { margin: 0; }
.toc { margin-bottom: 26px; }
.doc-side .side-in { position: static; }   /* never sticky (4 Nov 2026): a floating box slid over the button card's text */
.toc h2 { font: 700 .95rem/1.3 var(--sans); margin-bottom: 10px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.toc li a { display: block; padding: 6px 0 6px 14px; font-size: .93rem; text-decoration: none; color: var(--grey); }
.toc li a:hover { color: var(--bark); }
.side-cta { margin-top: 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--card-r); padding: 18px; }
.cta-band { background: var(--wood); border-radius: var(--card-r); padding: 0; margin: 30px 0; }
.cta-in { display: flex; align-items: center; gap: 24px; justify-content: space-between; padding: 24px; flex-wrap: wrap; }
.cta-in h2 { font-size: 1.5rem; margin-bottom: 6px; }
.cta-in p { margin: 0; max-width: 34em; }
.cards-sec, .chips-sec { padding: 40px 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 46px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--card-r); text-decoration: none; transition: transform .18s var(--ease), border-color .18s var(--ease); }
.card:hover { border-color: var(--bark); transform: translateY(-2px); }
.card-ic { color: var(--leaf); }
.card-t { font: 400 1.2rem/1.25 var(--serif); }
.card-b { color: var(--grey); font-size: .95rem; }
.card-subs { font-size: .88rem; color: var(--grey); }
.card-go { position: absolute; right: 16px; bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips a { display: inline-block; padding: 8px 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; font-weight: 600; }
.chips a:hover { border-color: var(--bark); }
.state-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.state-col ul { list-style: none; padding: 0; margin: 0; }
.state-col li a { display: block; padding: 4px 0; }
.hub-intro { padding-top: 40px; }
.sources { padding: 34px 0 50px; border-top: 1px solid var(--line); }
.sources h2 { font-size: 1.3rem; }
.sources ul { padding-left: 1.1em; font-size: .93rem; }
.sources li { margin-bottom: 6px; }
.sources li span { color: var(--grey); }
figure.page-photo { margin: 0; }
figure.page-photo img, .proof-grid img { display: block; width: 100%; background: var(--wood); filter: saturate(.85) sepia(.12) contrast(1.03); }
figure.page-photo img { aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--card-r); }
@media (max-width: 860px) { figure.page-photo img { aspect-ratio: 16 / 9; } }
figure figcaption { font-size: .85rem; color: var(--grey); padding: 8px 0 0; }
.proof-sec { padding: 46px 0; }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
.quiz-pop { position: fixed; right: 16px; bottom: 16px; z-index: 35; width: min(360px, calc(100vw - 32px)); background: var(--white); border: 1px solid var(--line);
  border-radius: var(--card-r); padding: 18px; box-shadow: 0 10px 30px rgba(43, 31, 23, .14); transform: translateY(16px); opacity: 0; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.quiz-pop.in { transform: none; opacity: 1; }
.qp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.qp-title { font: 400 1.25rem/1.2 var(--serif); margin: 0; }
.qp-close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
.qp-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qp-opt { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1.5px solid var(--line); border-radius: var(--r); font-size: .9rem; font-weight: 600; cursor: pointer; }
.qp-opt input { position: absolute; opacity: 0; }
.qp-opt:has(input:checked) { border-color: var(--bark); background: var(--wood); }
.qp-step label { display: block; font-weight: 700; margin-bottom: 6px; }
.qp-step input { width: 100%; min-height: 50px; padding: 10px 12px; border: 1.5px solid var(--bark); border-radius: var(--r); margin-bottom: 10px; }
.qp-fine { font-size: .85rem; color: var(--grey); margin: 10px 0 0; }
@media (max-width: 860px) {
  .tiles.small { grid-template-columns: 1fr 1fr; }
  .tiles.small .tile.urgent { grid-column: 1 / -1; }
  .next-grid, .doc { grid-template-columns: minmax(0, 1fr); gap: 28px; }   /* minmax(0): a wide table scrolls in its box, never widens the page */
  .doc { padding-top: 36px; }
  .toc { position: static; }
  .doc-side .side-in { position: static; }
  .diy-grid, .loc-grid, .proof-grid, .rv-grid { grid-template-columns: 1fr; }
  .phero h1 { font-size: clamp(1.9rem, 1.4rem + 2.6vw, 2.8rem); }
}
@media (max-width: 560px) {
  .phero { padding-top: 16px; }
  .crumbs ol { margin-bottom: 10px; font-size: .82rem; }
  .phero .eyebrow { margin-bottom: 8px; }
  .phero.reading h1 { font-size: 1.85rem; }
  .official { font-size: .92rem; margin-bottom: 8px; }
  .phero .lede { margin-bottom: 14px; }
  .h1-sub { font-size: 1.1rem; margin-bottom: 8px; }
  .askcard { padding: 16px; }
  .ask-h { font-size: 1.2rem; }
  .ask-row .field { max-width: none; }
  .ask-row .btn { width: 100%; }
  .phero .lede { font-size: 1.02rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- home, 3 Nov rebuild (template variation 4, in the rings brand) */
.hero-row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.hero-row .hero-card { max-width: none; }
.hero-row .tiles { grid-template-columns: repeat(2, 1fr); }
.hero-side { position: relative; padding-top: 4px; }
.hero-photo, .why-photo, .svc-media, .g-media { position: relative; display: block; overflow: hidden; background: var(--wood); }
.hero-photo { aspect-ratio: 4 / 5; border-radius: var(--card-r); }
.hero-photo::after { content: ''; position: absolute; right: 18px; bottom: 18px; width: 64px; height: 64px; border-radius: 50%;
  border: 3px solid var(--orange); box-shadow: 0 0 0 8px rgba(244, 236, 220, .9), 0 0 0 10px var(--heart); }
.hero-photo img, .why-photo img, .svc-media img, .g-media img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(.85) sepia(.12) contrast(1.03); transition: transform .4s var(--ease); }
.svc-media > .ic, .g-media > .ic { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); color: var(--heart); }
.hero-ticks { margin: 22px 0 0; }
.hero-ticks li { font-weight: 600; }
.feats { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 34px 0; }
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.feat { display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; padding: 4px 24px; border-left: 1px solid var(--line); }
.feat:first-child { border-left: 0; padding-left: 0; }
.feat > .ic { width: 28px; height: 28px; color: var(--orange); grid-row: span 2; }
.feat h3 { font-size: 1.15rem; margin: 2px 0 6px; }
.feat p { font-size: .93rem; color: var(--grey); margin: 0; }
.sec-split { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: end; margin-bottom: 30px; }
.sec-split h2 { margin: 0; }
.sec-split > p { margin: 0; color: var(--grey); }
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.svc-card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--card-r); overflow: hidden; text-decoration: none; padding-bottom: 46px; transition: border-color .18s var(--ease), transform .18s var(--ease); }
.svc-card:hover { border-color: var(--bark); transform: translateY(-2px); }
.svc-card:hover img { transform: scale(1.04); }
.svc-media { aspect-ratio: 4 / 3; }
.svc-card.big { grid-column: span 2; grid-row: span 2; }
.svc-card.big .svc-media { aspect-ratio: auto; flex: 1; min-height: 260px; }
.svc-txt { display: flex; flex-direction: column; }
.svc-t { font: 400 1.25rem/1.2 var(--serif); padding: 14px 16px 4px; }
.svc-card.big .svc-t { font-size: 1.7rem; padding-top: 18px; }
.svc-b { color: var(--grey); font-size: .92rem; padding: 0 16px; }
.svc-card > .ic { position: absolute; right: 14px; bottom: 14px; transition: transform .2s var(--ease); }
.svc-card:hover > .ic { transform: translateX(3px); }
.svc-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 24px 0 0; }
.svc-more > a:not(.textlink) { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); text-decoration: none; font-weight: 600; font-size: .93rem; }
.svc-more > a:not(.textlink):hover { border-color: var(--bark); }
.why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.why-photo { aspect-ratio: 5 / 4; border-radius: var(--card-r); box-shadow: -10px 12px 0 var(--wood); }
.why-text .ringlist { margin: 18px 0 24px; }
.loc-tabs { margin-bottom: 22px; }
.tablist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.loc-tabs:not(.tabs-on) .tablist { display: none; }
.tab { min-height: 44px; padding: 8px 16px; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r); font-weight: 700; cursor: pointer; }
.tab:hover { border-color: var(--bark); }
.tab[aria-selected="true"] { background: var(--bark); border-color: var(--bark); color: var(--sawdust); }
.tp { padding: 18px 0 8px; }
.loc-tabs:not(.tabs-on) .tp + .tp { border-top: 1px solid var(--line); margin-top: 18px; }
.tp-h { font-size: 1.5rem; margin-bottom: 14px; }
.tp-h a { text-decoration: none; }
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 26px; }
.cc { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 40px 14px 16px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--card-r); text-decoration: none; }
.cc:hover { border-color: var(--bark); }
.cc b { font: 400 1.15rem/1.2 var(--serif); }
.cc span { font-size: .86rem; color: var(--grey); }
.cc .ic { position: absolute; right: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); }
.place-groups { display: grid; gap: 24px; margin-bottom: 24px; }
.pg h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 1.2rem; margin-bottom: 10px; }
.pg h3 a { text-decoration-color: var(--orange); }
.pg-n { font: 600 .85rem/1.3 var(--sans); color: var(--grey); }
.pg .chips { gap: 6px; }
.pg .chips a, .state-page-chips a { padding: 6px 12px; border-radius: 999px; font-size: .92rem; }
.pg .chips.jobs { margin-top: 10px; }
.pg .chips.jobs a { background: var(--wood); border-color: var(--heart); }
.places-sec { padding: 44px 0; }
.pg-lede { max-width: 46em; color: var(--grey); margin-bottom: 24px; }
.sc-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 700; }
.sc-all .ic { width: 16px; height: 16px; }
.gcard { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--card-r); overflow: hidden; }
.gcard:hover { border-color: var(--bark); }
.gcard:hover img { transform: scale(1.04); }
.g-media { aspect-ratio: 16 / 9; }
.photo-credits { margin: 26px 0 0; }
.photo-credits a { color: var(--grey); }
@media (max-width: 1080px) {
  .hero-row { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 24px; }
  .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .hero-row { grid-template-columns: minmax(0, 1fr); }
  .hero-photo { aspect-ratio: 16 / 10; }
  .feat-grid { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .feat { padding: 0 16px; }
  .feat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .sec-split, .why-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .why-grid { gap: 28px; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .svc-card.big { grid-row: auto; }
  .svc-card.big .svc-media { aspect-ratio: 16 / 9; min-height: 0; flex: none; }
}
@media (max-width: 560px) {
  .hero-row .tiles { grid-template-columns: 1fr 1fr; }
  .feat-grid { grid-template-columns: 1fr; }
  .feat, .feat:nth-child(odd) { border-left: 0; padding: 0; }
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-card, .svc-card.big { grid-column: auto; flex-direction: row; align-items: stretch; padding: 0 34px 0 0; min-height: 96px; }
  .svc-card .svc-media, .svc-card.big .svc-media { width: 104px; flex: none; aspect-ratio: auto; }
  .svc-txt { display: flex; flex-direction: column; justify-content: center; }
  .svc-t, .svc-card.big .svc-t { font-size: 1.12rem; padding: 12px 12px 2px; }
  .svc-b { font-size: .86rem; padding: 0 12px 12px; }
  .svc-card > .ic { top: 50%; bottom: auto; right: 10px; transform: translateY(-50%); }
  .cc-grid { grid-template-columns: 1fr 1fr; }
  .tab { padding: 8px 12px; }
}

/* ---------------------------------------------------------------- 3 Nov rebuild 2: The Door Hero / Find My Roofer page order
   (Brendan: "doesn't follow the consistent structure that works for CVR"). Same rings look; only the order changed. */
/* hero: the words and 3 or 4 ring ticks left, the ask card right; on a phone the ticks go under the card */
.lp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); grid-template-areas: "text card" "ticks card" "pic card";
  grid-template-rows: auto auto 1fr; column-gap: 56px; align-items: start; }
.lp-grid > .ph-text { grid-area: text; max-width: none; }
.lp-grid > .lp-ticks { grid-area: ticks; margin: 2px 0 26px; }
.lp-grid > .lp-card { grid-area: card; min-width: 0; }
.lp-grid > .lp-photo { grid-area: pic; }
.lp-ticks li { font-weight: 600; font-size: 1.05rem; line-height: 1.35; }
.phero.job .lp-card .askwrap { max-width: none; margin: 4px 0 30px; }
.lp-card .tiles.small { grid-template-columns: 1fr 1fr; }
.lp-card .tiles.small .tile.urgent { grid-column: 1 / -1; }
.lp-card .ask-row .field { max-width: none; }
.lp-home h1 { max-width: none; font-size: clamp(2.2rem, 1.25rem + 2.7vw, 3.7rem); }
.lp-home .lp-card { position: relative; z-index: 1; max-width: none; }
.lp-home .tiles { grid-template-columns: 1fr 1fr; }
.lp-home .tiles .tile.urgent { grid-column: 1 / -1; }
.lp-grid > .hero-photo { aspect-ratio: 3 / 2; }
.rate-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 14px; font-size: .95rem; font-weight: 600; }
.rate-line b { font: 400 1.15rem/1 var(--serif); }
.rv-stars { display: inline-flex; gap: 2px; color: var(--orange); flex: none; }
.rv-stars svg { width: 18px; height: 18px; }
@media (max-width: 960px) {
  .lp-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "card" "ticks" "pic"; grid-template-rows: auto; }
  .lp-grid > .lp-ticks { margin: 0 0 24px; }
  .lp-home .lp-card { margin-bottom: 26px; }
  .lp-grid > .hero-photo { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) { .lp-ticks li { font-size: .98rem; } }

/* the reviews slot (proof.py): renders only when an in-network arborist's reviews or photos exist */
.proof-sec .pf-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; color: var(--grey); margin: -6px 0 20px; }
.proof-sec .rv-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 0; }
.rv { margin: 0; display: flex; flex-direction: column; gap: 10px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--card-r); padding: 20px 20px 18px; }
.rv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rv-job { font-size: .85rem; font-weight: 700; color: var(--grey); }
.rv blockquote { margin: 0; }
.rv blockquote p { margin: 0; }
.rv figcaption { padding: 0; font-size: .95rem; color: var(--bark); }
.rv-who { margin: 0; font-size: .82rem; color: var(--grey); }
.redact { color: var(--grey); }
.proof-sec .proof-grid { margin-top: 18px; }
.proof-job { margin: 0; }
.proof-grid img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--card-r); }

/* the ask band: what happens next, with the ask itself (job buttons when the page doesn't know the job, the postcode) */
.ask-band .next-intro h2 { margin-bottom: 20px; }
.ask-band .next-steps { align-self: start; }   /* the steps keep their spacing beside a tall ask */
.band-ask { max-width: 540px; }
.band-ask legend { color: var(--sawdust); }
.band-ask .chipset span { min-height: 42px; padding: 8px 13px; font-size: .93rem; color: var(--bark); }
.band-ask .safety { color: var(--soft); font-size: .88rem; }
.band-ask .ask-row { margin-top: 14px; }
.band-ask .field label { color: var(--sawdust); }
.band-ask .field input { border-color: var(--sawdust); }
.on-dark .err { color: var(--orange-light); }

/* the ask inside the content, and the page photo at the top of the reading part */
.inline-ask .cta-in { display: block; }
.inline-ask .cta-in > div { margin-bottom: 16px; }
.prose .cta-in h2 { margin-top: 0; }
.doc-photo { margin: 0 0 30px; }
figure.page-photo.doc-photo img { aspect-ratio: 16 / 9; }

/* home: the CTA band (the specialist point on Heartwood), the compact places block, the guides links */
.cta-home { background: var(--wood); }
.cta-home .why-photo { box-shadow: -10px 12px 0 var(--heart); }
.st-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
.st-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--card-r); padding: 18px 18px 16px; }
.st-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.st-card h3 a { text-decoration: none; }
.st-card h3 a:hover, .st-card li a:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.st-card ul { list-style: none; margin: 0 0 10px; padding: 0; }
.st-card li a { display: block; padding: 3px 0; text-decoration: none; }
.st-card .sc-all { margin-top: auto; font-size: .92rem; }
.guides-more { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
@media (max-width: 1080px) { .st-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .st-card { padding: 14px; } }

/* /photo-credits/ (noindex, footer link): only the photos whose licence asks for a credit */
.credits { max-width: 920px; padding-bottom: 30px; }
.credit-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.credit-list .cr { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 18px; align-items: start; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--card-r); padding: 14px; }
.cr img { display: block; width: 160px; height: 107px; object-fit: cover; border-radius: var(--r); background: var(--wood);
  filter: saturate(.85) sepia(.12) contrast(1.03); }
.cr p { margin: 0 0 6px; }
.cr-t { font: 400 1.15rem/1.3 var(--serif); }
.cr summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.cr .chips { gap: 6px; margin-top: 8px; }
.cr .chips a { padding: 4px 10px; font-size: .88rem; }
@media (max-width: 560px) { .credit-list .cr { grid-template-columns: minmax(0, 1fr); } .cr img { width: 100%; height: auto; aspect-ratio: 3 / 2; } }

/* ---------------------------------------------------------------- landing pages (4 Nov 2026, Cameron: "that is awful")
   Service, city, city-service and suburb pages read like a business: two forms (the hero card and the closing ask), a few
   short sections, no byline or contents box, the sources closed at the bottom. Link blocks carry styled labels. */
#ask { scroll-margin-top: 96px; }
.h2like { font: 400 clamp(1.35rem, 1.1rem + .9vw, 1.8rem)/1.15 var(--serif); letter-spacing: -0.01em; margin: 0 0 16px; text-wrap: balance; }
.next-band .h2like { color: var(--sawdust); font-size: clamp(1.7rem, 1.25rem + 1.7vw, 2.6rem); margin-bottom: 22px; }
.next-intro .btn { margin-top: 4px; }
.next-steps .ns-t { font: 400 1.3rem/1.2 var(--serif); color: var(--sawdust); margin: 0 0 4px; }
.feat .feat-h { font: 400 1.15rem/1.2 var(--serif); margin: 2px 0 6px; color: var(--bark); }
.lp-doc { padding-top: 46px; padding-bottom: 10px; }
.lp-doc .prose > .b:last-child { margin-bottom: 0; }
.lp-doc .prose h2 { margin-top: 1.2em; }
.lp-doc .prose .doc-photo + .b h2, .lp-doc .prose > .b:first-child h2 { margin-top: .4em; }
.lp-doc { grid-template-columns: minmax(0, 1fr) 380px; }
.lp-doc .side-in { position: static; }
.lp-doc .doc-side figure.page-photo { margin: 0 0 16px; }
.lp-doc .doc-side figure.page-photo img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.lp-doc .side-cta { margin-top: 0; }
.linkblock { padding: 26px 0; }
.linkblock + .linkblock { padding-top: 0; }
.linkblock .h2like { font-size: 1.3rem; margin-bottom: 12px; }
.linkblock .chips a { padding: 6px 13px; border-radius: 999px; font-size: .93rem; }
.linkblock .cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.linkblock .card { padding: 16px 16px 40px; }
.close-ask { padding: 56px 0 44px; }
.close-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 40px; align-items: start; }
.close-text h2 { margin-bottom: 12px; }
.close-ask .askwrap { margin-bottom: 0; }
.close-ask .tiles.small { grid-template-columns: repeat(2, 1fr); }
.sources-c { padding: 20px 0 36px; border-top: 1px solid var(--line); }
.sources-d summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; padding: 6px 0; }
.sources-d summary::-webkit-details-marker { display: none; }
.sources-d summary .chev { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.sources-d[open] summary .chev { transform: rotate(180deg); }
.sources-d ul { padding-left: 1.1em; font-size: .9rem; margin-top: 12px; }
.sources-d li { margin-bottom: 6px; }
.sources-d li span { color: var(--grey); }
.city-chips { gap: 10px; margin-top: 6px; }
.city-chips a { padding: 10px 18px; border-radius: 999px; font-size: 1rem; }
.city-chips a.all { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 2px solid var(--bark); }
.city-chips a.all .ic { width: 18px; height: 18px; }
.guide-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 30px; }
.guide-list a { font-weight: 700; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.svc-media, .g-media { background: var(--wood); }
@media (max-width: 860px) {
  .close-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lp-doc { grid-template-columns: minmax(0, 1fr); }
  .lp-doc .doc-side { order: -1; }
  .lp-doc .side-in { position: static; }
  .lp-doc .side-cta { display: none; }      /* phones: the sticky bar does this job */
  .lp-doc .doc-side figure.page-photo img { aspect-ratio: 16 / 10; }
  .lp-doc:not(.has-pic) .doc-side { display: none; }
  .lp-doc { padding-top: 34px; }
}
.linkblock .cards.compact { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.linkblock .card.compact { padding: 14px 46px 14px 16px; min-height: 0; justify-content: center; }
.card.compact .card-t { font-size: 1.05rem; }
.card.compact .card-go { bottom: auto; top: 50%; transform: translateY(-50%); }

/* Referral disclaimer at the bottom of every footer (Cameron, 5 Nov 2026) */
.foot-disclaimer{flex-basis:100%;width:100%;max-width:none;margin:1.5rem 0 0;padding:1.25rem 0 0;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent);font-size:.8rem;line-height:1.6;text-align:left}
.foot-disclaimer p{margin:0 0 .75em;max-width:80em}
.foot-disclaimer p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- 12 Nov 2026 (Cameron): the photo IS the home hero
   ("the image as the hero section, not below it"), the way landing-page template variation 4 does it: the photo fills
   the section behind a bark tint, words and ticks left in white, the ask card right. The CRO order is unchanged: on a
   phone the card still comes straight after the words (first job button above 640 px) and the ticks go under it.
   The tint (12 Nov 2026, photo heroes, tuned the same day): two layers in Bark. ::after is a light tint over the whole
   photo (28%), so the scene reads at a glance; on the home hero it deepens a little along the bottom, behind the line
   under the card. ::before is a scrim behind the text column only (the left 52%, faded out by 72%).
   ANY-PHOTO RULE (12 Nov 2026 full run: many photos now share these heroes, so no tint is tuned to one photo). Behind
   every piece of hero text the tint is worked out on a PURE WHITE photo pixel. The scrim (78%) over the 28% brings the
   text column to 84% Bark: on white that leaves white text at 9.6:1, Sawdust 8.2, Bark Soft 5.3, Heart 5.2 and
   Chainsaw Light (the headline accent and the sub-line) 4.8, whatever the photo and however long the headline. The
   home hero's bottom band (50% over the 28% = 64%) sits behind the white line under the card: 4.9:1 on white. On a
   phone there is no scrim: ::after is one top to bottom tint, 84% (white 9.6, Chainsaw Light 4.8) and only ever darker
   further down, fading into solid Bark by 560 px, so the words pass wherever they wrap. */
.hero.lp-home { padding: 64px 0 76px; background: var(--bark); }
.hero.lp-home > .wrap { position: static; }
.lp-home .lp-grid { grid-template-areas: "text card" "ticks card"; grid-template-rows: auto 1fr; }
.lp-home .lp-grid > .ph-text, .lp-home .lp-grid > .lp-ticks { position: relative; z-index: 1; }
.lp-home .lp-grid > .hero-photo { position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; border-radius: 0; background: var(--bark); }
.lp-home .hero-photo::after { top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; z-index: 2; border: 0; border-radius: 0;
  box-shadow: none; background: linear-gradient(0deg, rgba(43, 31, 23, .5) 0, rgba(43, 31, 23, .5) 170px, rgba(43, 31, 23, 0) 330px),
    linear-gradient(rgba(43, 31, 23, .28), rgba(43, 31, 23, .28)); }
.lp-home .hero-photo::before, .has-photo .hero-photo::before { content: ''; position: absolute; inset: 0; z-index: 2;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 72%); mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 72%); }
.lp-home .hero-photo::before { background: rgba(43, 31, 23, .78); }
.lp-home .ph-text h1 { color: var(--white); }
.lp-home .ph-text .eyebrow { color: var(--heart); }
.lp-home .ph-text .hero-sub { color: var(--sawdust); }
.lp-home .lp-ticks li { color: var(--white); }
.lp-home .lp-card > .rate-line, .lp-home .lp-card > .card-note { color: var(--white); }
.lp-home .lp-card > .card-note .ic { color: var(--orange-light); }
@media (max-width: 960px) {
  .hero.lp-home { padding: 22px 0 36px; }
  .lp-home .lp-grid { grid-template-areas: "text" "card" "ticks"; grid-template-rows: auto; }
  .lp-home .lp-grid > .hero-photo { bottom: auto; height: 560px; aspect-ratio: auto; }
  .lp-home .hero-photo::before { display: none; }
  .lp-home .hero-photo::after { background: linear-gradient(180deg, rgba(43, 31, 23, .84) 0, rgba(43, 31, 23, .84) 300px, var(--bark) 560px); }
}

/* ---------------------------------------------------------------- 12 Nov 2026 (Cameron): landing pages show every written
   section (6 to 10 a page, was 3 or 4). Each section carried the page-band padding (64 px top and bottom), which left a
   200 px hole between sections once there were ten of them. Sections inside the landing-page reading column now sit
   close, the way a list of answers reads; the dark warning card and the advice card keep their own padding. */
.lp-doc .prose > .b:not(.b-warn):not(.b-advice) { padding-top: 10px; padding-bottom: 10px; }
.lp-doc .prose > .b-warn, .lp-doc .prose > .b-advice { margin-top: 34px; margin-bottom: 34px; }

/* ---------------------------------------------------------------- 12 Nov 2026 (Cameron): menu and hero round.
   Services panel: a one-line description under every service, a dark card on the right (a link to the quote form) and
   a two-link bottom row. Locations panel: one column per main city with its most searched suburb pages, a tinted
   "More cities" panel, a suburb box (menu.py: not a form) and a row of states or regions. Guides keeps the plain panel. */
.dd-rich { padding-top: 24px; }
.dd-rich .dd-in { grid-template-columns: minmax(0, 1fr) 264px; gap: 32px; }
.dd-rich .dd-groups.g3 { gap: 28px; }
.dd-rich .dd-groups.g4 { gap: 22px; }
.dd-rich .dd-h { font: 700 .74rem/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--grey); margin: 0 0 6px; }
.dd-rich .dd-g li a { padding: 7px 0; line-height: 1.3; }
.dd-rich .dd-g li a b { display: block; font-weight: 700; font-size: .98rem; }
.dd-rich .dd-g li a span { display: block; margin-top: 2px; font-size: .84rem; color: var(--grey); }
.dd-rich .dd-g li a:hover { text-decoration: none; }
.dd-rich .dd-g li a:hover b { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.dd-promo { display: flex; flex-direction: column; background: var(--bark); color: var(--sawdust); border-radius: var(--card-r); padding: 22px 20px 20px; }
.dd-promo-h { font: 400 1.4rem/1.15 var(--serif); color: var(--white); margin: 0 0 10px; }
.dd-promo p:not(.dd-promo-h) { font-size: .93rem; line-height: 1.5; color: var(--soft); margin: 0 0 18px; }
.dd-promo .btn { margin-top: auto; }
.dd-foot2 { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; }
.dd-foot2 > a { flex: none; }
.loc-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.loc-title { font: 400 1.5rem/1.15 var(--serif); margin: 0 0 4px; }
.loc-sub { font-size: .92rem; color: var(--grey); margin: 0; }
.loc-find { flex: 0 0 340px; }
.loc-find label { display: block; font: 700 .85rem/1.3 var(--sans); margin: 0 0 6px; }
.loc-find-row { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px; background: var(--white); border: 1.5px solid var(--soft); border-radius: var(--r); }
.loc-find-row:focus-within { border-color: var(--bark); box-shadow: 0 0 0 3px var(--orange); }
.loc-find-row > .ic { width: 20px; height: 20px; color: var(--grey); }
.loc-find input { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; background: none; font-size: 1rem; }
.loc-find input:focus, .loc-find input:focus-visible { outline: 0; box-shadow: none; }
.loc-go { flex: none; padding: 6px 12px; background: var(--wood); border-radius: 6px; font: 700 .88rem/1.3 var(--sans); text-decoration: none; }
.loc-go:hover { background: var(--heart); }
.loc-main { display: grid; grid-template-columns: minmax(0, 1fr) 278px; gap: 26px; padding-top: 20px; }
.loc-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.loc-city { display: inline-flex; align-items: center; gap: 6px; font: 400 1.2rem/1.2 var(--serif); text-decoration: none; }
.loc-city .ic { width: 16px; height: 16px; color: var(--grey); }
.loc-code { font: 700 .72rem/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--grey); margin: 3px 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.loc-col ul, .loc-more ul { list-style: none; margin: 0; padding: 0; }
.loc-col li a, .loc-more li a { display: block; padding: 5px 0; font-size: .95rem; line-height: 1.3; text-decoration: none; }
.loc-col li a:hover, .loc-more li a:hover, .loc-city:hover, .loc-states a:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.loc-all { display: inline-block; margin-top: 6px; font-weight: 700; font-size: .8rem; letter-spacing: -.005em; }
.loc-more { align-self: start; background: var(--sawdust); border-radius: var(--card-r); padding: 18px 18px 14px; }
.loc-more-h { font: 400 1.2rem/1.2 var(--serif); margin: 0 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.loc-more-cols { display: flex; gap: 18px; }
.loc-more li a { white-space: nowrap; }
.loc-states { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 0; }
.loc-states .dd-h { margin: 0 4px 0 0; }
.dd-foot .loc-states a { display: inline; font-weight: 600; font-size: .92rem; text-decoration: none; }
.mn-body .loc-find { margin: 2px 0 12px 14px; }
.mn-body .loc-find input { font-size: 16px; }

/* Hero: the second part of the headline in the accent colour (site.js draws it from data-accent-from, so the promise
   stays one unbroken wording in the page source). On the home photo that is Chainsaw Light, the lighter tint of the
   brand orange: Chainsaw Orange itself measured as low as 2.2:1 against the tinted sky of the 12 Nov hero photo, under
   the 3:1 a headline needs (and only 4.8:1 on plain Bark with no photo at all). On Sawdust the orange is too light to read as words (2.8:1), so the landing pages' second
   line uses a deeper orange ink (4.5:1). Job tiles carry a short line saying what the job is. */
:root { --orange-ink: #B8480C; }
.h1-accent { color: var(--orange-light); }
.phero.lp .h1-sub { color: var(--orange-ink); }
.tile label small { line-height: 1.25; }
@media (max-width: 560px) { .tile label small { font-size: .8rem; } }

/* ---------------------------------------------------------------- 12 Nov 2026 (Cameron): a photo in the hero of landing
   pages too (pilot: /stump-grinding/). Same pattern as the home hero above: the page's hero photo (photos.hero_for)
   fills the band behind a bark tint, heavier on the left behind the words and lighter on the right; the words and ring
   ticks are white on the left, the stacked-paper ask card stays on the right, and the ring break stays under the band
   on Sawdust. Only a page that has a hero photo gets .has-photo; every other page keeps the plain Sawdust hero. On a
   phone the order is unchanged (words, card, ticks) and the photo sits behind the words, fading into Bark.
   The sub-line is Chainsaw Light here: the deeper orange ink used on Sawdust is too dark to read on the photo. The
   tint is in two layers, as on the home hero (see the note there): 28% Bark over the whole photo and a scrim that
   brings the text column to 84% (the any-photo rule, worked out on a white pixel: see the note on the home hero). On
   a phone it is one top to bottom tint, 84% fading into solid Bark by 560 px.
   Reading pages (guides, tree pages, permit and council pages, state pages, hubs, About and the other company pages;
   12 Nov 2026 full run) carry the photo the same way: .phero.reading.has-photo wraps the same words, and the same ask
   card under them where the page has one, in the band. Their words run up to 820 px wide, so the scrim is drawn from
   the text column itself (.wrap::before: 78% from the left edge of the screen to 60 px past the widest line, faded out
   over the next 160 px) and not from a share of the screen; with the 28% that is the same 84% behind every word. */
.phero.has-photo { padding-top: 0; }
.has-photo .lp-band { position: relative; overflow: hidden; background: var(--bark); padding: 26px 0 14px; }
.has-photo .lp-grid { grid-template-areas: "text card" "ticks card"; grid-template-rows: auto 1fr; }
.has-photo .lp-grid > .ph-text, .has-photo .lp-grid > .lp-ticks, .has-photo .lp-grid > .lp-card { position: relative; z-index: 1; }
.has-photo .lp-grid > .hero-photo, .has-photo .lp-band > .hero-photo { position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; border-radius: 0; background: var(--bark); }
.reading.has-photo .lp-band > .wrap { position: relative; z-index: 1; }
.reading.has-photo .lp-band { padding: 26px 0 8px; }
.reading.has-photo:not(.ask) .lp-band { padding-bottom: 30px; }
.reading.has-photo .hero-photo::before { display: none; }
.reading.has-photo .lp-band > .wrap::before { content: ''; position: absolute; z-index: -1; top: -200px; bottom: -200px; left: -100vw;
  width: calc(100vw + 1060px); pointer-events: none;
  background: linear-gradient(90deg, rgba(43, 31, 23, .78) 0, rgba(43, 31, 23, .78) calc(100% - 160px), rgba(43, 31, 23, 0) 100%); }
.has-photo .hero-photo::after { top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; z-index: 2; border: 0; border-radius: 0;
  box-shadow: none; background: rgba(43, 31, 23, .28); }
.has-photo .hero-photo::before { background: rgba(43, 31, 23, .78); }
.has-photo .ph-text h1 { color: var(--white); }
.has-photo .ph-text .eyebrow { color: var(--heart); }
.phero.has-photo .h1-sub { color: var(--orange-light); }
.has-photo .ph-text .lede { color: var(--sawdust); }
.has-photo .ph-text .checked, .has-photo .ph-text .official a { color: var(--white); }
.has-photo .ph-text .official span { color: var(--soft); }
.has-photo .crumbs ol, .has-photo .crumbs a { color: var(--soft); }
.has-photo .crumbs li:not(:last-child)::after { color: var(--grey); }
.has-photo .lp-ticks li { color: var(--white); }
.has-photo .lp-card > .rate-line { color: var(--white); }
@media (max-width: 960px) {
  .has-photo .lp-band { padding: 16px 0 12px; }
  .has-photo .lp-grid { grid-template-areas: "text" "card" "ticks"; grid-template-rows: auto; }
  .has-photo .lp-grid > .hero-photo, .has-photo .lp-band > .hero-photo { bottom: auto; height: 560px; aspect-ratio: auto; }
  .has-photo .hero-photo::before, .reading.has-photo .lp-band > .wrap::before { display: none; }
  .has-photo .hero-photo::after { background: linear-gradient(180deg, rgba(43, 31, 23, .84) 0, rgba(43, 31, 23, .84) 300px, var(--bark) 560px); }
  .reading.has-photo .lp-band { padding: 16px 0 4px; }
  .reading.has-photo:not(.ask) .lp-band { padding-bottom: 20px; }
}