/* ============================================================================
   BUR OAK — SITE PATTERNS
   Page-level compositions. Depends on tokens.css + components.css.
   Nothing here redefines a token; everything consumes them.
   ========================================================================= */

/* ------------------------------------------------------------- shells ---- */
.hero { padding-block: clamp(var(--sp-10), 7vw, var(--sp-20)) clamp(var(--sp-8), 5vw, var(--sp-16)); }
.hero__eyebrow > .label-medium:first-child { color: var(--gold-ink-deep); font-weight: 500; }
.hero__eyebrow { display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: center;
  padding-bottom: var(--sp-5); margin-bottom: clamp(var(--sp-6), 4vw, var(--sp-10));
  border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.hero h1, .hero > .display-large { max-width: 17ch; }
.hero__lede { max-width: 52ch; color: var(--md-sys-color-on-surface-variant); }
.hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-8); }

.section--rule { border-top: 1px solid var(--md-sys-color-outline-variant); }
.section--tonal { background: var(--md-sys-color-surface-container); }
.section--invert { background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface); }
.section--invert .on-variant { color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 74%, transparent); }
.section--invert a:not(.btn) { color: var(--md-sys-color-inverse-primary); }
.section--invert .btn--filled { --_bg: var(--md-sys-color-inverse-on-surface); --_fg: var(--md-sys-color-inverse-surface); }
.section--invert .btn--outlined { --_fg: var(--md-sys-color-inverse-on-surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 45%, transparent); }

/* left rail + content — the recurring editorial layout */
.rail { display: grid; gap: var(--sp-3); }
@media (min-width: 840px) {
  .rail { grid-template-columns: 148px minmax(0, 1fr); gap: clamp(var(--sp-6), 4vw, var(--sp-16)); align-items: start; }
  .rail > .rail__label { padding-top: .5em; }
}
.rail__label { color: var(--gold-ink-deep); display: flex; align-items: center;
  gap: var(--sp-3); font-weight: 500; }
.rail__label::before { content: ""; width: 22px; height: 2px; flex: none;
  background: var(--gold); }
@media (min-width: 840px) { .rail__label::before { width: 28px; } }

/* ------------------------------------------------------------ figures ---- */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  border-top: 1px solid var(--md-sys-color-outline-variant); margin-top: var(--sp-10); }
.figures > div { padding: var(--sp-5) var(--sp-5) 0 0;
  border-right: 1px solid var(--md-sys-color-outline-variant); }
.figures > div:last-child { border-right: 0; }
.figures .n { font-family: var(--md-ref-typeface-brand); font-weight: 400;
  color: var(--brand-green);
  font-size: clamp(1.875rem, 1.4rem + 2.2vw, 2.625rem); line-height: 1; letter-spacing: -.03em; }
.figures .l { margin-top: var(--sp-3); color: var(--md-sys-color-on-surface-variant); }
@media (max-width: 599px) { .figures > div { border-right: 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant); padding-bottom: var(--sp-4); } }

/* -------------------------------------------------------------- plate ---- */
/* technical drawings — fine line on a lifted surface */
.plate { background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid transparent; box-shadow: var(--md-sys-elevation-2);
  border-radius: var(--md-sys-shape-corner-l); padding: clamp(var(--sp-4), 2.6vw, var(--sp-8)); }
.plate svg { width: 100%; height: auto; }
.plate__cap { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  border-top: 1px solid var(--md-sys-color-outline-variant); margin-top: var(--sp-4); padding-top: var(--sp-3);
  color: var(--md-sys-color-on-surface-variant); }
.plate__cap strong { color: var(--md-sys-color-on-surface); font-weight: 600; }
.pl-t { font-family: var(--md-ref-typeface-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; fill: var(--md-sys-color-on-surface); }
.pl-t.d { fill: var(--md-sys-color-on-surface-variant); }
.pl-t.s { fill: var(--gold-ink-deep); }
.pl-lead { stroke: var(--md-sys-color-outline); stroke-width: .7; fill: none; }
.pl-k { stroke: var(--md-sys-color-on-surface); fill: none; }
.pl-fill { fill: var(--md-sys-color-surface-container-high); }
.map { display: block; width: 100%; height: auto; }
.mapstate { fill: var(--md-sys-color-surface-container-high);
  stroke: var(--md-sys-color-outline-variant); stroke-width: 1.2; stroke-linejoin: round;
  transition: fill var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard); }
.mapstate.pri { fill: var(--brand-green); }
.mapstate.sec { fill: var(--sage-mid); }
.mapstate:hover, .mapstate.pri:hover, .mapstate.sec:hover { fill: var(--gold); }
.maplabel { font-family: var(--md-ref-typeface-mono); font-size: 15px; font-weight: 500;
  letter-spacing: .14em; fill: var(--md-sys-color-on-surface-variant); pointer-events: none; }
.maplabel.on-dark { fill: var(--md-sys-color-on-primary); }
.maplabel.on-tint { fill: var(--md-sys-color-on-primary-container); }
.mapdot { fill: var(--gold); stroke: var(--md-sys-color-surface-container-lowest);
  stroke-width: 1.6; pointer-events: none; }
.mapdot.hot { fill: var(--gold-ink); }
.mapkey { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-4);
  color: var(--md-sys-color-on-surface-variant); }
.mapkey i { display: inline-block; width: 12px; height: 12px; margin-right: var(--sp-2);
  border-radius: 2px; vertical-align: -1px; }

/* ---------------------------------------------------------- rule list ---- */
.rlist { list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--md-sys-color-outline); }
.rlist > li { display: grid; gap: var(--sp-1) var(--sp-5); padding-block: var(--sp-5);
  border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.rlist > li > .k { color: var(--md-sys-color-on-surface); }
.rlist > li > .v { margin: 0; color: var(--md-sys-color-on-surface-variant); }
.rlist > li > .i { color: var(--md-sys-color-primary); }
@media (min-width: 840px) {
  .rlist > li { grid-template-columns: 190px minmax(0, 1fr); align-items: baseline; }
  .rlist--num > li { grid-template-columns: 34px 190px minmax(0, 1fr); }
}
@media (max-width: 839px) { .rlist--num > li > .i { grid-row: 1; } }

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 30px; margin-bottom: var(--sp-4); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 11px; height: 11px;
  border: 2px solid var(--md-sys-color-primary); border-radius: 2px; }

/* --------------------------------------------------------- calculator ---- */
.calc { display: grid; gap: clamp(var(--sp-8), 4vw, var(--sp-16)); }
@media (min-width: 900px) { .calc { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; } }
.slider { border-bottom: 1px solid var(--md-sys-color-outline-variant);
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-5); }
.slider__top { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-3); margin-bottom: var(--sp-2); }
.slider__val { font-family: var(--md-ref-typeface-brand); font-weight: 400; font-size: 1.375rem;
  letter-spacing: -.01em; color: var(--md-sys-color-primary); }
input[type="range"] { width: 100%; min-height: var(--target-min); accent-color: var(--md-sys-color-primary);
  cursor: pointer; margin: 0; background: transparent; }
.bar { padding-block: var(--sp-5); border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.bar__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  margin-bottom: var(--sp-3); }
.bar__val { font-family: var(--md-ref-typeface-brand); font-weight: 300; font-size: 1.75rem; letter-spacing: -.025em; }
.bar__track { height: 18px; display: flex; border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-xs); overflow: hidden; }
.bar__seg { height: 100%; transition: width var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard); }
.seg--cash { background: var(--md-sys-color-secondary-container); }
.seg--second { background: var(--md-sys-color-primary); }
.legend { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-4);
  color: var(--md-sys-color-on-surface-variant); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: var(--sp-2);
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: 2px; }

/* --------------------------------------------------------------- faq ---- */
.faq { border-top: 1px solid var(--md-sys-color-outline); }
.faq details { border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between;
  align-items: baseline; gap: var(--sp-5); min-height: var(--target-min);
  padding-block: var(--sp-4); font-family: var(--md-ref-typeface-brand);
  font-size: var(--md-sys-typescale-headline-small-size); font-weight: 400; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--md-ref-typeface-mono); font-size: 1.25rem;
  color: var(--md-sys-color-primary); line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding-bottom: var(--sp-5); max-width: var(--measure-prose);
  color: var(--md-sys-color-on-surface-variant); }
.faq .answer p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ article ---- */
.article { display: grid; gap: var(--sp-8); }
@media (min-width: 1000px) { .article { grid-template-columns: minmax(0, 1fr) 250px;
  gap: clamp(var(--sp-8), 4vw, var(--sp-16)); align-items: start; } }
.toc { position: sticky; top: calc(var(--appbar-h, 64px) + var(--sp-6));
  border-left: 2px solid var(--md-sys-color-outline-variant); padding-left: var(--sp-4); }
.toc ol { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.toc li { margin-bottom: var(--sp-1); }
.toc a { display: block; min-height: var(--target-min); display: flex; align-items: center;
  color: var(--md-sys-color-on-surface-variant); text-decoration: none;
  font-size: var(--md-sys-typescale-body-medium-size); }
.toc a:hover { color: var(--md-sys-color-primary); }
@media (max-width: 999px) { .toc { position: static; } }

.article__body > h2 { margin-top: var(--sp-12); scroll-margin-top: calc(var(--appbar-h, 64px) + var(--sp-6)); }
.article__body > h3 { margin-top: var(--sp-8); }
.article__body > p, .article__body > ul { max-width: var(--measure-prose); }
.article__meta { display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: center;
  color: var(--md-sys-color-on-surface-variant); }

.takeaways { background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-radius: var(--md-sys-shape-corner-l); padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-8);
  margin-block: var(--sp-8); }
.takeaways ul { margin: var(--sp-3) 0 0; padding-left: var(--sp-5); }
.takeaways li { margin-bottom: var(--sp-2); }

.callout { border-left: 3px solid var(--md-sys-color-tertiary);
  background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);
  padding: var(--sp-5); border-radius: 0 var(--md-sys-shape-corner-s) var(--md-sys-shape-corner-s) 0;
  margin-block: var(--sp-8); max-width: var(--measure-prose); }
.callout p:last-child { margin-bottom: 0; }

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0;
  color: var(--md-sys-color-on-surface-variant); }
.breadcrumb a { min-height: 32px; display: inline-flex; align-items: center; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--sp-2); opacity: .5; }

.cta-band { background: var(--gold-pale);
  color: var(--md-sys-color-on-primary-container);
  border-radius: var(--md-sys-shape-corner-l); padding: var(--sp-8);
  display: grid; gap: var(--sp-5); margin-block: var(--sp-10); }
@media (min-width: 700px) { .cta-band { grid-template-columns: 1fr auto; align-items: center; } }
.cta-band .btn--filled { --_bg: var(--md-sys-color-on-primary-container); --_fg: var(--md-sys-color-primary-container); }

/* --------------------------------------------------------------- foot ---- */
.sitefoot { background: var(--md-sys-color-surface-container-low);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  padding-block: var(--sp-12) var(--sp-8); }
.sitefoot__grid { display: grid; gap: var(--sp-8); }
@media (min-width: 700px) { .sitefoot__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.sitefoot ul { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.sitefoot li a { display: flex; align-items: center; min-height: var(--target-min);
  color: var(--md-sys-color-on-surface-variant); text-decoration: none; }
.sitefoot li a:hover { color: var(--md-sys-color-primary); }
.sitefoot__fine { border-top: 1px solid var(--md-sys-color-outline-variant);
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  color: var(--md-sys-color-on-surface-variant); }

.shot { border: 1px dashed var(--md-sys-color-outline);
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--md-sys-color-on-surface) 3%, transparent) 0 8px, transparent 8px 16px);
  border-radius: var(--md-sys-shape-corner-s);
  display: flex; align-items: flex-end; padding: var(--sp-3); min-height: 110px;
  color: var(--md-sys-color-on-surface-variant); }
.r43 { aspect-ratio: 4/3; } .r169 { aspect-ratio: 16/9; } .r11 { aspect-ratio: 1/1; }


/* ------------------------------------------------------ service artwork ---- */
/* Original line drawings, not stock. Same drafting language as the plates:
   soil ground, ink linework, one amber accent per scene. */
.card--media { padding: 0; overflow: hidden; }
.card--media .card__text { padding: var(--sp-5) var(--sp-6) var(--sp-6); }

/* photography — 16:9, cover-cropped, never allowed to shift layout */
.card__media { display: block; margin: 0; background: var(--md-sys-color-surface-container); }
.card__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; transition: transform var(--md-sys-motion-duration-long) var(--md-sys-motion-easing-standard); }
.card--link:hover .card__media img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) { .card--link:hover .card__media img { transform: none; } }
.art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  background: var(--md-sys-color-surface-container-low);
  border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.art-sky   { fill: var(--md-sys-color-surface-container-low); }
.art-soil  { fill: var(--soil-2); }
.art-grade { stroke: var(--gold); stroke-width: 1.8; }
.art-line  { fill: none; stroke: var(--md-sys-color-on-surface); stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round; }
.art-thin  { fill: none; stroke: var(--md-sys-color-on-surface-variant); stroke-width: 1.1;
  stroke-linecap: round; }
.art-fill  { fill: var(--brand-green); }
.art-tint  { fill: var(--sage);
  stroke: var(--md-sys-color-on-surface); stroke-width: 1.4; }
.art-void  { fill: var(--md-sys-color-surface-container-lowest);
  stroke: var(--md-sys-color-on-surface); stroke-width: 1.6; }
.art-accent { fill: var(--gold); }
.art-accent-line { fill: none; stroke: var(--gold); stroke-width: 2.4;
  stroke-linecap: round; }
.card--media:hover .art-accent { fill: var(--gold-ink); }


/* ==========================================================================
   THE STRUCTURE — above grade / below grade
   An illustration, not a schematic. The eye enters at the canopy, follows the
   four callouts inward, drops through the grade line and then reads the soil
   strata top to bottom, alternating left and right so it never has to search
   for the next label.
   Two versions: the drawing above 760px, a stacked HTML version below it,
   toggled by CSS so only one is ever in the accessibility tree.
   ========================================================================== */
:root {
  --soil-1: #F4F0EA;
  --soil-2: #ECE5DB;
  --soil-3: #E3DACD;
  --soil-4: #D9CDBB;
  --canopy-back: #B7C5B5;
  --canopy-mid:  #CCD7CA;
  --canopy-fore: #DFE6DD;
  --bark:        #7C6650;
  --root:        #A28C72;
}

.structure { margin-top: var(--sp-8); }
.structure__art { margin: 0; }
.structure__art img { display: block; width: 100%; height: auto;
  border-radius: var(--md-sys-shape-corner-l); box-shadow: var(--md-sys-elevation-3); }
.kitchen { margin: var(--sp-6) 0 0; }
.kitchen img { display: block; width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover;
  border-radius: var(--md-sys-shape-corner-l); box-shadow: var(--md-sys-elevation-3); }

.dg-wash        { fill: url(#dg-sun); }
.dg-sun-core    { fill: var(--gold-light); opacity: .5; }
.dg-sun-halo    { fill: var(--gold); opacity: .1; }
.dg-canopy-back { fill: var(--canopy-back); }
.dg-canopy-mid  { fill: var(--canopy-mid); }
.dg-canopy-fore { fill: var(--canopy-fore); }
.dg-trunk       { fill: var(--bark); }
.dg-root        { fill: var(--root); }
.dg-lateral     { fill: none; stroke: var(--root); stroke-linecap: round; }
.dg-grade       { stroke: var(--brand-gold); stroke-width: 2.5; stroke-linecap: round; }
.dg-grass       { fill: none; stroke: var(--canopy-back); stroke-width: 1.8; stroke-linecap: round; }
.dg-lead        { fill: none; stroke: var(--charcoal-soft); stroke-width: 1.2; }
.dg-dot         { fill: var(--brand-gold); }
.dg-node        { fill: var(--brand-gold); stroke: var(--linen); stroke-width: 3.5; }
.dg-soil-1 { fill: var(--soil-1); } .dg-soil-2 { fill: var(--soil-2); }
.dg-soil-3 { fill: var(--soil-3); } .dg-soil-4 { fill: var(--soil-4); }

.dg-eyebrow { font-family: var(--md-ref-typeface-plain); font-size: 11.5px; font-weight: 600;
  letter-spacing: .18em; fill: var(--gold-ink-deep); }
.dg-callout { font-family: var(--md-ref-typeface-plain); font-size: 16px; font-weight: 600;
  fill: var(--charcoal); }
.dg-callout-sub { font-family: var(--md-ref-typeface-plain); font-size: 13px; fill: var(--charcoal-mid); }
.dg-stratum { font-family: var(--md-ref-typeface-brand); font-size: 23px; font-weight: 500;
  fill: var(--charcoal); }
.dg-stratum-sub { font-family: var(--md-ref-typeface-plain); font-size: 13.5px; fill: var(--charcoal-mid); }

.structure__stack { display: none; }
/* The diagram's labels are set into the artwork, so below ~760px they fall
   under 10px. Swap to the HTML version there — one is always in the a11y tree. */
@media (max-width: 759px) {
  .structure__art { display: none; }
  .structure__stack { display: block; }
}

.stack-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.stack-head span { color: var(--gold-ink-deep); }
.stack-head::after { content: ""; flex: 1; height: 1px; background: var(--md-sys-color-outline-variant); }
.stack-above { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.stack-above li { list-style: none; background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-s); padding: var(--sp-3) var(--sp-4);
  font-weight: 600; font-size: 15.5px; }
.stack-grade { display: flex; align-items: center; gap: var(--sp-3); margin-block: var(--sp-5);
  color: var(--gold-ink-deep); }
.stack-grade::before, .stack-grade::after { content: ""; flex: 1; height: 2px; background: var(--gold); }
.stack-strata { list-style: none; margin: 0; padding: 0; border-radius: var(--md-sys-shape-corner-m);
  overflow: hidden; }
.stack-strata li { padding: var(--sp-5); }
.stack-strata li:nth-child(1) { background: var(--soil-1); }
.stack-strata li:nth-child(2) { background: var(--soil-2); }
.stack-strata li:nth-child(3) { background: var(--soil-3); }
.stack-strata li:nth-child(4) { background: var(--soil-4); }
.stack-strata h3 { margin: 0 0 var(--sp-1); }
.stack-strata p { margin: 0; color: var(--charcoal-mid); font-size: 14.5px; }


/* ------------------------------------------------------------- brand ---- */
.brand__lockup { height: clamp(32px, 4.4vw, 46px); width: auto; display: block; }
.brand--stacked img { width: 216px; height: auto; }
.appbar .brand { min-height: var(--target-min); }

/* ----------------------------------------------------------- mascot ---- */
/* Used only where the audience is a crew member or a lost visitor. It stays
   off /owners/ — a seller weighing a life's work does not want a cartoon. */
.mascot { display: block; width: 100%; max-width: 210px; height: auto; }
.mascot--sm { max-width: 148px; }
.mascot-row { display: flex; align-items: flex-end; gap: var(--sp-6); flex-wrap: wrap; }
.mascot-say { position: relative; background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-l); padding: var(--sp-5) var(--sp-6);
  max-width: 34ch; }
.mascot-say::after { content: ""; position: absolute; left: -9px; bottom: 26px;
  width: 18px; height: 18px; background: var(--md-sys-color-surface-container);
  transform: rotate(45deg); border-radius: 3px; }
.mascot-say p { margin: 0; }
@media (max-width: 599px) { .mascot-say::after { display: none; } }


/* ==========================================================================
   OPERATOR-FIRST CHROME
   Consumer conversion furniture, modelled on how A1 organises a home-service
   site: a persistent phone number, a scheduling CTA in every viewport, and a
   thumb-reachable action bar on phones.
   ========================================================================== */
.utility { background: var(--brand-green); color: var(--linen); }
.utility__inner { display: flex; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap; padding-block: var(--sp-2); }
.utility p { margin: 0; color: color-mix(in srgb, var(--linen) 82%, transparent); }
.utility a { color: var(--gold); text-decoration: none; }
.utility a:hover { color: var(--linen); text-decoration: underline; }
@media (max-width: 599px) { .utility__inner p:first-child { display: none; }
  .utility__inner { justify-content: center; } }

.nav__link--tel { color: var(--md-sys-color-primary); font-weight: 700; }
@media (max-width: 1059px) { .nav__phone { display: none; } }

.btn--lg { min-height: 54px; padding-inline: var(--sp-8);
  font-size: var(--md-sys-typescale-label-large-size); }

/* thumb bar — phones only, clears the safe area */
.actionbar { display: none; }
@media (max-width: 767px) {
  .actionbar { display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--md-sys-color-surface-container-lowest);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: 0 -4px 20px rgba(44,37,34,.06);
    padding-bottom: env(safe-area-inset-bottom); }
  .actionbar a { display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: var(--target-min); padding: var(--sp-2) var(--sp-1);
    font-family: var(--md-ref-typeface-plain); font-size: 11px; font-weight: 600;
    letter-spacing: .04em; color: var(--md-sys-color-on-surface-variant); text-decoration: none; }
  .actionbar a:active { color: var(--md-sys-color-primary); }
  .actionbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  body { padding-bottom: 68px; }
}

/* hero, service variant */
.hero--service { padding-block: clamp(var(--sp-10), 6vw, var(--sp-16)); }
.hero__grid { display: grid; gap: clamp(var(--sp-8), 4vw, var(--sp-16)); align-items: center; }
@media (min-width: 840px) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); } }
.hero__art img { width: 100%; height: auto; border-radius: var(--md-sys-shape-corner-l);
  box-shadow: var(--md-sys-elevation-3); aspect-ratio: 16/9; object-fit: cover; }

.trustbar { background: var(--md-sys-color-surface-container); }
.trustbar__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,160px), 1fr));
  gap: var(--sp-5); padding-block: var(--sp-6); text-align: center; }
.trustbar .n { display: block; font-family: var(--md-ref-typeface-brand); font-size: 1.375rem;
  color: var(--brand-green); }
.trustbar .l { display: block; margin-top: 4px; font-family: var(--md-ref-typeface-plain);
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant); }

.card__cta { color: var(--md-sys-color-primary); display: inline-block; }

/* three-column responsibility split */
.split3 { display: grid; gap: var(--sp-6); }
@media (min-width: 840px) { .split3 { grid-template-columns: repeat(3, 1fr); } }
.split3__col { background: var(--md-sys-color-surface-container-lowest);
  border-radius: var(--md-sys-shape-corner-l); padding: var(--sp-6);
  box-shadow: var(--md-sys-elevation-1); }
.split3__col--mid { background: var(--md-sys-color-surface-container); box-shadow: none; }

/* lettered acquisition timeline */
.timeline { list-style: none; margin: var(--sp-8) 0 0; padding: 0;
  border-left: 2px solid var(--md-sys-color-outline-variant); }
.timeline > li { display: grid; gap: var(--sp-1) var(--sp-5); position: relative;
  padding: 0 0 var(--sp-8) var(--sp-8); }
@media (min-width: 700px) { .timeline > li { grid-template-columns: 96px minmax(0,1fr); } }
.timeline .i { position: absolute; left: -19px; top: 0; width: 36px; height: 36px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--gold); color: var(--charcoal);
  font-family: var(--md-ref-typeface-plain); font-weight: 700; font-size: 14px; }
.timeline .w { color: var(--gold-ink-deep); padding-top: 9px; }
.timeline .k { margin: 0 0 var(--sp-1); }
.timeline .v { margin: 0; color: var(--md-sys-color-on-surface-variant); }
@media (max-width: 699px) { .timeline .w { padding-top: 0; } }

.logoslot { aspect-ratio: 16/7; border: 1px dashed var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-s); display: grid; place-items: center;
  color: var(--md-sys-color-on-surface-variant); }

/* family-of-brands band */
.brandband { border-top: 1px solid var(--md-sys-color-outline-variant);
  margin-top: var(--sp-8); padding-top: var(--sp-6); text-align: center; }
.brandband p { color: var(--md-sys-color-on-surface-variant); margin: 0 0 var(--sp-4); }
.brandband__row { display: flex; gap: var(--sp-4); flex-wrap: wrap; justify-content: center; }
.brandband__slot { min-width: 150px; padding: var(--sp-4) var(--sp-5);
  border: 1px dashed var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-s);
  font-family: var(--md-ref-typeface-plain); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); }


/* help block — the mascot's one job on the consumer side: the calm moment
   where somebody is confused, not the emergency moment where they are not. */
.helpblock { display: grid; gap: var(--sp-6); align-items: center;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-xl);
  padding: clamp(var(--sp-6), 4vw, var(--sp-12)); }
@media (min-width: 700px) { .helpblock { grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-12)); } }
.helpblock__mascot { max-width: 230px; justify-self: center; }
@media (max-width: 699px) { .helpblock__mascot { max-width: 150px; } }
.helpblock__body p:last-of-type a { color: var(--md-sys-color-primary); }


/* ==========================================================================
   PHOTO-LED ACQUISITION LAYOUTS
   Guild's How We Partner page is carried by photographs of real trucks, real
   crews and a real family — not by diagrams. These are the primitives for it.
   ========================================================================== */

/* full-bleed stage: image, scrim, copy on top */
.stage { position: relative; isolation: isolate; min-height: clamp(460px, 62vh, 700px);
  display: grid; align-items: end; overflow: hidden; }
.stage--short { min-height: clamp(360px, 46vh, 520px); }
.stage__media { position: absolute; inset: 0; z-index: -2; }
.stage__media img { width: 100%; height: 100%; object-fit: cover; }
/* Two-layer scrim, solved against the actual image rather than eyeballed.
   The source banners carry a highlight knee (nothing brighter than L*0.49),
   so a light veil is enough: linen text measures 5.77:1 over the desktop copy
   block and 5.08:1 at full mobile width. The horizontal layer keeps the right
   of the frame open so the photograph still reads. */
.stage__scrim { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(22,34,26,.20) 0%, rgba(22,34,26,0) 75%),
    linear-gradient(180deg, rgba(22,34,26,.40) 0%, rgba(22,34,26,.66) 85%, rgba(22,34,26,.66) 100%); }
/* copy is full-bleed on phones, so drop the horizontal falloff there */
@media (max-width: 839px) {
  .stage__scrim { background:
    linear-gradient(180deg, rgba(22,34,26,.48) 0%, rgba(22,34,26,.70) 70%, rgba(22,34,26,.72) 100%); }
}
.stage__body { padding-block: clamp(var(--sp-10), 7vw, var(--sp-16)) clamp(var(--sp-10), 6vw, var(--sp-16));
  color: var(--linen); }
.stage__body h1 { color: var(--linen); max-width: 17ch; }
.stage__eyebrow { color: var(--gold); margin-bottom: var(--sp-4); }
.stage__lede { color: color-mix(in srgb, var(--linen) 92%, transparent); max-width: 54ch;
  margin-top: var(--sp-5); }
.stage .btn--ghost { color: var(--linen);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--linen) 55%, transparent); }
.stage .btn--ghost:hover { background: color-mix(in srgb, var(--linen) 12%, transparent); }

/* opening statement — what we are, what we are not */
.statement { max-width: 74ch; margin-inline: auto; text-align: center; }
.statement__lead { font-family: var(--md-ref-typeface-brand);
  font-size: clamp(1.375rem, 1.1rem + 1.5vw, 2rem); line-height: 1.42; font-weight: 400;
  margin: var(--sp-5) 0 var(--sp-6); }

/* numbered pillar cards */
.pillar { position: relative; padding-top: var(--sp-10); }
.pillar__n { position: absolute; top: var(--sp-5); left: var(--sp-6);
  font-family: var(--md-ref-typeface-plain); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; color: var(--gold-ink-deep); }

/* alternating photo / copy rows */
.feature { display: grid; gap: clamp(var(--sp-6), 4vw, var(--sp-16)); align-items: center; }
@media (min-width: 840px) { .feature { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .feature--flip .feature__img { order: 2; } }
.feature__img img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--md-sys-shape-corner-l); box-shadow: var(--md-sys-elevation-3); }
.feature__body h2 { margin: var(--sp-3) 0 var(--sp-4); }

/* pull-quote over a photograph */
.quoteband { position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(var(--sp-16), 10vw, var(--sp-24)); text-align: center; }
.quoteband__media { position: absolute; inset: 0; z-index: -2; }
.quoteband__media img { width: 100%; height: 100%; object-fit: cover; }
.quoteband__scrim { position: absolute; inset: 0; z-index: -1; background: rgba(22,34,26,.80); }
.quoteband__body { color: var(--linen); }
.quoteband__text { font-family: var(--md-ref-typeface-brand); font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.375rem); line-height: 1.34;
  max-width: 24ch; margin: 0 auto var(--sp-5); text-wrap: balance; }
.quoteband .label-medium { color: var(--gold); }

/* brand architecture: group above the line, brands below */
.arch { background: var(--md-sys-color-surface-container-lowest);
  border-radius: var(--md-sys-shape-corner-xl); padding: clamp(var(--sp-5), 3vw, var(--sp-10));
  box-shadow: var(--md-sys-elevation-2); }
.arch__row { display: grid; gap: var(--sp-4); }
.arch__tag { color: var(--gold-ink-deep); }
.arch__crown { background: var(--brand-green); color: var(--linen);
  border-radius: var(--md-sys-shape-corner-l); padding: var(--sp-6) var(--sp-8); text-align: center; }
.arch__crown .on-variant { color: color-mix(in srgb, var(--linen) 76%, transparent); }
.arch__divider { display: flex; align-items: center; gap: var(--sp-4);
  margin-block: var(--sp-6); color: var(--gold-ink-deep); }
.arch__divider::before, .arch__divider::after { content: ""; flex: 1; height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 18px); }
.arch__brands { display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%,150px), 1fr)); }
.arch__brands .logoslot { aspect-ratio: 16/9; }
.logoslot--lg { aspect-ratio: 16/8; }


/* letter-campaign landing form */
.talkform { background: var(--md-sys-color-surface-container-lowest);
  border-radius: var(--md-sys-shape-corner-xl); padding: clamp(var(--sp-5), 3vw, var(--sp-8));
  box-shadow: var(--md-sys-elevation-3); position: sticky; top: calc(var(--appbar-h, 76px) + 16px); }
@media (max-width: 839px) { .talkform { position: static; margin-top: var(--sp-8); } }
.talkform h2 { font-size: var(--md-sys-typescale-headline-small-size); }