/* ============================================================
   SlabFresh — interior page styles
   Loads after main.css. Homepage uses main.css alone.
   ============================================================ */

/* Dark bar on interior pages so the official teal + white lockup is used
   everywhere. A white wordmark can't sit on a light bar. */
.nav:not(.nav--overlay) {
  /* Solid, not 94%. At 94% the cream page bled through and warmed the bar to a
     brownish #252220 instead of reading as charcoal. */
  background: var(--ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.10);
}
.nav:not(.nav--overlay) .nav__logo { --lg-word: #fff; --lg-mark: #fff; --lg-teal: var(--teal); }
.nav:not(.nav--overlay) .nav__links a,
.nav:not(.nav--overlay) .nav__tel { color: #fff; }
.nav:not(.nav--overlay) .nav__burger span { background: #fff; }
.nav:not(.nav--overlay) .nav__links a.is-on { color: var(--teal-lift); }
.nav__links a.is-on { color: var(--teal-deep); }
.nav__links a.is-on::after { transform: scaleX(1); }

/* ---------- breadcrumbs ---------- */
.crumbs { position: relative; z-index: 2; padding-top: clamp(5rem, 11vh, 7rem); }
.crumbs ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .55rem;
  font-size: .84rem; color: var(--ink-mute);
}
.crumbs li + li::before { content: "/"; margin-right: .55rem; opacity: .45; }
.crumbs a:hover { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.phero .crumbs ol { color: rgba(255,255,255,.72); }
.phero .crumbs [aria-current] { color: #fff; }
.phero .crumbs a:hover { color: var(--teal-lift); }

/* ---------- interior hero ---------- */
.phero {
  position: relative; isolation: isolate;
  display: grid; align-content: start;
  padding-bottom: clamp(2.6rem, 7vh, 4.6rem);
  background: var(--ink);
  min-height: clamp(420px, 62vh, 660px);
}
.phero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.phero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top right, rgba(10,9,7,.95) 0%, rgba(10,9,7,.86) 30%, rgba(10,9,7,.5) 55%, rgba(10,9,7,.2) 78%),
    linear-gradient(to top, rgba(10,9,7,.7) 0%, rgba(10,9,7,.3) 45%, rgba(10,9,7,.55) 100%);
}
.phero__body { padding-top: clamp(1.6rem, 4vh, 2.6rem); }
.phero__eyebrow { color: var(--teal-lift); margin-bottom: .9rem; }
.phero__h1 { color: #fff; font-size: var(--t-xxl); max-width: 15ch; }
.phero__lede { color: rgba(255,255,255,.84); max-width: 52ch; margin-top: 1.1rem; }
.phero__actions {
  display: flex; flex-wrap: wrap; gap: .85rem 1.4rem; align-items: center;
  margin-top: clamp(1.4rem, 3.4vh, 2.2rem);
}
.phero__actions .tel { color: #fff; }

/* ---------- split blocks ---------- */
.split { padding-block: var(--vspace); background: var(--paper); }
.split--rev { background: var(--sand-pale); }
.split__in {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.split--rev .split__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.split--rev .split__media { order: 2; }
@media (max-width: 880px) {
  .split__in, .split--rev .split__in { grid-template-columns: 1fr; gap: 2rem; }
  .split--rev .split__media { order: 0; }
}
.split__media img {
  width: 100%; height: auto; object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), calc(100% - 46px) 100%, 0 100%);
}
.split--rev .split__media img { clip-path: polygon(46px 0, 100% 0, 100% 100%, 0 100%, 0 46px); }
.split__copy .eyebrow { color: var(--teal-deep); display: block; margin-bottom: .9rem; }
.split__copy h2 { font-size: var(--t-xl); margin-bottom: 1.1rem; max-width: 16ch; }
.split__copy p { color: var(--ink-mute); max-width: 52ch; }
.split__copy p + p { margin-top: .9rem; }
.split__copy .btn, .split__copy .tel { margin-top: 1.5rem; }

/* ---------- layer list ---------- */
.layers { background: var(--ink); color: #fff; padding-block: var(--vspace); position: relative; overflow: hidden; }
.layers::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/flake-dark.svg") repeat; background-size: 300px; opacity: .5; pointer-events: none;
}
.layers__in {
  position: relative; display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem);
}
@media (max-width: 900px) { .layers__in { grid-template-columns: 1fr; } }
.layers__copy .eyebrow { color: var(--teal-lift); display: block; margin-bottom: .9rem; }
.layers__copy h2 { font-size: var(--t-xl); margin-bottom: 1.1rem; max-width: 15ch; }
.layers__copy p { color: rgba(255,255,255,.72); max-width: 44ch; margin-bottom: 1.6rem; }
.layers__copy .btn--ghost { --btn-fg: #fff; box-shadow: inset 0 0 0 1.5px var(--line-dark); }
.layers__copy .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.layers__copy .btn--ghost::after { background: #fff; }
.layers__list { list-style: none; padding: 0; margin: 0; }
.layers__list li {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem;
  padding: 1.15rem 0; border-top: 1px solid rgba(255,255,255,.14);
}
.layers__list li:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.layers__n {
  font-family: var(--display); font-weight: 800; font-stretch: 110%;
  font-size: 1.05rem; letter-spacing: -.02em; color: var(--teal-lift); padding-top: .15rem;
}
.layers__list h3 {
  font-family: var(--display); font-weight: 700; font-stretch: 104%;
  font-size: 1.08rem; letter-spacing: -.02em; margin-bottom: .25rem;
}
.layers__list p { color: rgba(255,255,255,.62); font-size: .97rem; }

/* ---------- compact 1-2-3 ---------- */
.steps--compact { padding-block: var(--vspace); }
.steps--compact .steps__head { margin-bottom: clamp(1.8rem, 4vh, 2.8rem); }
.steps--compact .steps__head h2 { font-size: var(--t-xl); }
.mini123 {
  list-style: none; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem);
}
@media (max-width: 800px) { .mini123 { grid-template-columns: 1fr; gap: 1.6rem; } }
.mini123 li { border-top: 2px solid var(--ink); padding-top: 1rem; }
.mini123 li:nth-child(2) { border-top-color: var(--teal); }
.mini123 b {
  display: block; font-family: var(--display); font-weight: 900; font-stretch: 115%;
  font-size: 1.4rem; letter-spacing: -.04em; color: var(--ink-mute); margin-bottom: .5rem;
}
.mini123 li:nth-child(2) b { color: var(--teal-deep); }
.mini123 h3 {
  font-family: var(--display); font-weight: 800; font-stretch: 105%;
  font-size: 1.22rem; letter-spacing: -.03em; margin-bottom: .4rem;
}
.mini123 p { color: var(--ink-mute); font-size: .98rem; }
.steps__more { position: relative; margin-top: clamp(1.8rem, 4vh, 2.6rem); }

/* ---------- stages (how it works) ---------- */
.stages { background: var(--paper); padding-block: var(--vspace); position: relative; overflow: hidden; }
.stages::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/flake-light.svg") repeat; background-size: 300px; opacity: .5; pointer-events: none;
}
.stages__list { position: relative; list-style: none; padding: 0; max-width: 62rem; margin-inline: auto; }
.stage {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3vw, 2.6rem);
  padding-block: clamp(1.4rem, 3vh, 2.2rem); border-top: 1px solid var(--line);
}
.stage:first-child { border-top: 0; }
.stage__n {
  font-family: var(--display); font-weight: 900; font-stretch: 118%;
  font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: .9; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 2px var(--ink); opacity: .8;
}
.stage:nth-child(even) .stage__n { -webkit-text-stroke-color: var(--teal); }
.stage__body h2 {
  font-family: var(--display); font-weight: 800; font-stretch: 106%;
  font-size: var(--t-lg); letter-spacing: -.03em; margin-bottom: .5rem;
}
.stage__body p { color: var(--ink-mute); max-width: 58ch; }

/* ---------- FAQ ---------- */
.faq { background: var(--sand-pale); padding-block: var(--vspace); }
.faq__head { margin-bottom: clamp(1.6rem, 4vh, 2.4rem); }
.faq__head .eyebrow { color: var(--teal-deep); display: block; margin-bottom: .8rem; }
.faq__head h2 { font-size: var(--t-xl); }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.4rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 700; font-stretch: 104%;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem); letter-spacing: -.02em; line-height: 1.3;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--teal-deep); }
.faq__item summary i { flex: none; width: 20px; height: 20px; margin-top: .18rem; position: relative; }
.faq__item summary i::before, .faq__item summary i::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .3s var(--ease-out), opacity .2s;
}
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i::after { transform: rotate(0); opacity: 0; }
.faq__a { padding-bottom: 1.25rem; color: var(--ink-mute); max-width: 62ch; }

/* ---------- prose ---------- */
.prose-wrap { background: var(--paper); padding-block: var(--vspace); }
.prose { color: var(--ink); }
.prose__h1 { font-size: var(--t-xl); margin-bottom: 1.2rem; }
.prose__lead {
  font-size: clamp(1.12rem, 1.6vw, 1.32rem); line-height: 1.55;
  color: var(--ink); margin-bottom: 1.8rem;
}
.prose h2 {
  font-family: var(--display); font-weight: 800; font-stretch: 106%;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem); letter-spacing: -.03em; line-height: 1.12;
  margin-top: 2.6rem; margin-bottom: .8rem;
}
.prose h3 {
  font-family: var(--display); font-weight: 700; font-stretch: 104%;
  font-size: clamp(1.12rem, 1.7vw, 1.32rem); letter-spacing: -.02em;
  margin-top: 1.8rem; margin-bottom: .5rem;
}
.prose p { color: var(--ink-mute); margin-bottom: 1rem; max-width: 68ch; }
.prose ul, .prose ol { color: var(--ink-mute); margin: 0 0 1.2rem 1.15rem; max-width: 66ch; }
.prose li { margin-bottom: .5rem; padding-left: .3rem; }
.prose li::marker { color: var(--teal-deep); font-weight: 700; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose em { font-style: italic; }
.prose a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose a:hover { color: var(--ink); }
.prose__table { width: 100%; border-collapse: collapse; margin: 1.4rem 0 1.8rem; font-size: .97rem; }
.prose__table th, .prose__table td {
  text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top;
}
.prose__table th {
  font-family: var(--display); font-weight: 700; font-size: .82rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink); border-bottom-color: var(--ink);
}
.prose__table td { color: var(--ink-mute); }
.prose__table tr td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
@media (max-width: 620px) { .prose__table tr td:first-child { white-space: normal; } }

/* ---------- guide ---------- */
.guide { background: var(--paper); }
.guide__head { padding-block: clamp(1.4rem, 3vh, 2.2rem) clamp(1.8rem, 4vh, 2.6rem); }
.guide__kicker { color: var(--teal-deep); margin-bottom: .9rem; }
.guide__h1 { font-size: var(--t-xxl); max-width: 16ch; }
.guide__stand { color: var(--ink-mute); max-width: 56ch; margin-top: 1.1rem; }
.guide__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: .84rem; color: var(--ink-mute); letter-spacing: .03em;
}
.guide__body { padding-bottom: var(--vspace); }

/* ---------- guides hub ---------- */
.ghero { background: var(--ink); color: #fff; padding-bottom: clamp(2.4rem, 6vh, 4rem); position: relative; overflow: hidden; }
.ghero::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/flake-dark.svg") repeat; background-size: 300px; opacity: .5;
}
.ghero .crumbs ol { color: rgba(255,255,255,.6); }
.ghero .crumbs [aria-current] { color: #fff; }
.ghero__in { position: relative; padding-top: clamp(1.6rem, 4vh, 2.4rem); }
.ghero__in .eyebrow { color: var(--teal-lift); display: block; margin-bottom: .9rem; }
.ghero__in h1 { font-size: var(--t-xxl); }
.ghero__in .lede { color: rgba(255,255,255,.75); max-width: 54ch; margin-top: 1.1rem; }
.glist { background: var(--paper); padding-block: var(--vspace); }
.glist__items {
  list-style: none; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1rem, 2.2vw, 1.8rem);
}
.gcard a {
  display: flex; flex-direction: column; height: 100%;
  padding: clamp(1.3rem, 2.4vw, 1.9rem); background: var(--sand-pale);
  transition: background .3s var(--ease), transform .4s var(--ease-out);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}
.gcard a:hover { background: var(--sand); transform: translateY(-3px); }
.gcard__k { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-deep); }
.gcard h2 {
  font-family: var(--display); font-weight: 800; font-stretch: 105%;
  font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -.03em; line-height: 1.08;
  margin: .7rem 0 .6rem;
}
.gcard p { color: var(--ink-mute); font-size: .97rem; flex: 1; }
.gcard__go {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.2rem;
  font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: -.01em;
}
.gcard__go svg { width: 15px; height: 15px; transition: transform .35s var(--ease-out); }
.gcard a:hover .gcard__go svg { transform: translateX(4px); }

/* ---------- city grid ---------- */
.citygrid { background: var(--sand-pale); padding-block: var(--vspace); }
.citygrid__head {
  font-family: var(--display); font-weight: 800; font-stretch: 106%;
  font-size: var(--t-lg); letter-spacing: -.03em; margin-bottom: clamp(1.4rem, 3vh, 2.2rem);
}
.citygrid__list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(.9rem, 2vw, 1.5rem);
}
.citycard {
  display: flex; flex-direction: column; padding: clamp(1.2rem, 2.2vw, 1.7rem);
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease);
}
.citycard:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--ink); }
.citycard__pin {
  display: grid; place-items: center; width: 34px; aspect-ratio: 1; border-radius: 999px;
  background: var(--teal); color: #04211F; margin-bottom: .9rem;
}
.citycard__pin svg { width: 17px; height: 17px; }
.citycard h3 {
  font-family: var(--display); font-weight: 800; font-stretch: 105%;
  font-size: 1.22rem; letter-spacing: -.03em; margin-bottom: .45rem;
}
.citycard p { color: var(--ink-mute); font-size: .95rem; flex: 1; }
.citycard__go {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem;
  font-weight: 700; font-size: .88rem; color: var(--teal-deep);
}
.citycard__go svg { width: 14px; height: 14px; transition: transform .35s var(--ease-out); }
.citycard:hover .citycard__go svg { transform: translateX(4px); }
.area__cities a { text-decoration: none; }
.area__cities a span { border-bottom: 3px solid transparent; transition: border-color .25s var(--ease), color .25s; }
.area__cities a:hover span { color: var(--teal-deep); border-bottom-color: var(--teal); }
.area__cities .is-here { color: var(--teal-deep); }

/* ---------- related ---------- */
.related { background: var(--paper); padding-block: clamp(2.6rem, 6vh, 4.4rem); border-top: 1px solid var(--line); }
.related__head {
  font-family: var(--display); font-weight: 700; font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1.2rem;
}
.related__list {
  list-style: none; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .6rem;
}
.related__list a {
  display: flex; align-items: center; gap: .9rem; padding: 1.05rem 1.2rem;
  background: var(--sand-pale); transition: background .3s var(--ease), transform .3s var(--ease-out);
}
.related__list a:hover { background: var(--sand); transform: translateX(3px); }
.related__k { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep); flex: none; }
.related__t { font-weight: 600; font-size: .97rem; flex: 1; line-height: 1.3; }
.related__i { width: 15px; height: 15px; flex: none; color: var(--ink-mute); }

/* ---------- contact ---------- */
.contact { background: var(--ink); color: #fff; padding-block: clamp(6.5rem, 14vh, 9rem) var(--vspace); position: relative; overflow: hidden; }
.contact::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/flake-dark.svg") repeat; background-size: 300px; opacity: .5;
}
.contact__in {
  position: relative; display: grid; grid-template-columns: 1fr minmax(340px, 480px);
  gap: clamp(2.4rem, 6vw, 5.5rem); align-items: start;
}
@media (max-width: 940px) { .contact__in { grid-template-columns: 1fr; } }
.contact__copy .eyebrow { color: var(--teal-lift); display: block; margin-bottom: 1rem; }
.contact__copy h1 { font-size: var(--t-xxl); }
.contact__copy .lede { color: rgba(255,255,255,.78); max-width: 46ch; margin-top: 1.1rem; }
.contact__ways {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 1.6rem;
  margin-top: clamp(2rem, 5vh, 3rem); padding-top: 1.8rem; border-top: 1px solid var(--line-dark);
}
.contact__ways h2 {
  font-family: var(--body); font-size: .76rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: .6rem;
}
.contact__ways p { font-size: .88rem; color: rgba(255,255,255,.5); margin-top: .35rem; }
.contact__tel { color: #fff; font-size: 1.2rem; }
.contact__mail {
  font-family: var(--display); font-weight: 700; font-stretch: 104%;
  letter-spacing: -.02em; color: #fff; word-break: break-all;
}
.contact__mail:hover, .contact__where a:hover { color: var(--teal-lift); }
.contact__where { color: #fff !important; font-size: 1rem !important; }
.contact__where a { color: var(--teal-lift); }
.contact__hours { display: grid; gap: .2rem; color: rgba(255,255,255,.72); font-size: .88rem; }
.contact__hours div { display: flex; justify-content: space-between; gap: .75rem; }
.contact__hours dt { color: rgba(255,255,255,.5); }
.contact__hours dd { margin: 0; color: #fff; white-space: nowrap; }
.contact__reassure { margin-top: 2rem; }
.contact__formhead {
  font-family: var(--display); font-weight: 800; font-stretch: 105%;
  font-size: 1.3rem; letter-spacing: -.03em; margin-bottom: 1rem;
}

/* ---------- thanks / 404 ---------- */
.thanks { background: var(--paper); padding-block: clamp(8rem, 18vh, 12rem) var(--vspace); text-align: center; }
.thanks__in { display: grid; justify-items: center; }
.thanks__mark {
  display: grid; place-items: center; width: 68px; aspect-ratio: 1; border-radius: 999px;
  background: var(--teal); color: #04211F; margin-bottom: 1.6rem;
}
.thanks__mark svg { width: 32px; height: 32px; }
.thanks h1 { font-size: var(--t-xxl); }
.thanks .lede { color: var(--ink-mute); max-width: 46ch; margin-top: 1.1rem; }
.thanks__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }
.thanks__fine { margin-top: 2rem; font-size: .88rem; color: var(--ink-mute); max-width: 44ch; }

/* ============================================================
   GUIDE ARTICLE — image head, contents rail, callouts
   ============================================================ */
.ghead {
  position: relative; isolation: isolate;
  background: var(--ink);
  padding-bottom: clamp(2rem, 5vh, 3.2rem);
  min-height: clamp(360px, 52vh, 540px);
  display: grid; align-content: start;
}
.ghead__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.ghead__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.ghead__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top right, rgba(10,9,7,.96) 0%, rgba(10,9,7,.9) 34%, rgba(10,9,7,.55) 62%, rgba(10,9,7,.28) 85%),
    linear-gradient(to top, rgba(10,9,7,.72) 0%, rgba(10,9,7,.34) 46%, rgba(10,9,7,.6) 100%);
}
.ghead .crumbs ol { color: rgba(255,255,255,.72); }
.ghead .crumbs [aria-current] { color: #fff; }
.ghead .crumbs a:hover { color: var(--teal-lift); }
.ghead__body { padding-top: clamp(1.4rem, 3.4vh, 2.2rem); }
.ghead__kicker { color: var(--teal-lift); margin-bottom: .9rem; }
.ghead__h1 { color: #fff; font-size: var(--t-xxl); max-width: 17ch; }
.ghead__stand { color: rgba(255,255,255,.84); max-width: 54ch; margin-top: 1.1rem; }
.ghead__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.4rem;
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.55);
}

.gbody {
  background: var(--paper);
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(2.6rem, 6vh, 4.4rem) var(--vspace);
  align-items: start;
}
@media (max-width: 940px) { .gbody { grid-template-columns: 1fr; } }
.gbody__main { max-width: 68ch; }

.gtoc { position: sticky; top: clamp(5.5rem, 12vh, 7rem); }
@media (max-width: 940px) {
  .gtoc { position: static; border-left: 3px solid var(--teal); padding-left: 1.1rem; }
  .gtoc__cta { display: none; }
}
.gtoc__label {
  font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: .9rem;
}
.gtoc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; display: grid; gap: .1rem; }
.gtoc li { counter-increment: toc; }
.gtoc a {
  display: block; padding: .45rem 0 .45rem .5rem;
  font-size: .92rem; line-height: 1.35; color: var(--ink-mute);
  border-left: 2px solid var(--line);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.gtoc a:hover { color: var(--ink); border-left-color: var(--teal); }
.gtoc__cta {
  margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.gtoc__cta p { font-size: .9rem; color: var(--ink-mute); margin-bottom: .8rem; }
.gtoc__cta .btn { padding: .7rem 1.2rem; font-size: .9rem; }

/* short-version callout */
.callout {
  background: var(--ink); color: #fff;
  padding: clamp(1.2rem, 2.6vw, 1.8rem);
  margin-bottom: 2.2rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.callout__k {
  font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal-lift); margin-bottom: .6rem;
}
.callout p:last-child { color: rgba(255,255,255,.88); margin: 0; font-size: 1.04rem; line-height: 1.5; }

/* first paragraph of a guide gets a little more presence */
.gbody__main > .prose__lead:first-child,
.callout + .prose__lead { font-size: clamp(1.16rem, 1.7vw, 1.36rem); }

/* section headings get a rule so the article has visible rhythm */
.gbody__main h2 { padding-top: 1.4rem; border-top: 2px solid var(--ink); scroll-margin-top: clamp(5rem, 11vh, 7rem); }
.gbody__main h2:first-of-type { border-top: 0; padding-top: 0; }

/* ============================================================
   ABOUT — values list + pull quote
   ============================================================ */
.values { background: var(--sand-pale); padding-block: var(--vspace); }
.values__head { margin-bottom: clamp(1.8rem, 4vh, 2.8rem); }
.values__head .eyebrow { color: var(--teal-deep); display: block; margin-bottom: .9rem; }
.values__head h2 { font-size: var(--t-xl); }
.values__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1.2rem, 2.6vw, 2.2rem);
}
.values__list li { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.values__list li:nth-child(2) { border-top-color: var(--teal); }
.values__list li:nth-child(4) { border-top-color: var(--teal); }
.values__n {
  display: block; font-family: var(--display); font-weight: 900; font-stretch: 116%;
  font-size: 1.5rem; letter-spacing: -.05em; color: var(--ink-mute); margin-bottom: .5rem;
}
.values__list li:nth-child(2) .values__n,
.values__list li:nth-child(4) .values__n { color: var(--teal-deep); }
.values__list h3 {
  font-family: var(--display); font-weight: 800; font-stretch: 105%;
  font-size: 1.2rem; letter-spacing: -.03em; line-height: 1.15; margin-bottom: .5rem;
}
.values__list p { color: var(--ink-mute); font-size: .98rem; }

.pullquote { background: var(--ink); color: #fff; padding-block: var(--vspace); position: relative; overflow: hidden; }
.pullquote::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/flake-dark.svg") repeat; background-size: 300px; opacity: .5;
}
.pullquote__in { position: relative; text-align: center; }
.pullquote__q {
  font-family: var(--display); font-weight: 800; font-stretch: 104%;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: 1.22; letter-spacing: -.035em;
  max-width: 24ch; margin-inline: auto;
}
.pullquote__by { margin-top: 1.4rem; font-size: .92rem; color: rgba(255,255,255,.55); }
.pullquote__by b { color: #fff; font-weight: 700; }

/* in-article figure */
.gfig { margin: 2.4rem 0; }
.gfig img {
  width: 100%; height: auto;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}
.gfig figcaption {
  margin-top: .85rem; padding-left: .9rem;
  border-left: 3px solid var(--teal);
  font-size: .92rem; line-height: 1.5; color: var(--ink-mute);
}

/* NAP line under the footer phone — factual, not a location pitch */
.foot__addr {
  display: block; margin-top: .5rem;
  font-style: normal; font-size: .86rem; line-height: 1.5;
  color: rgba(255,255,255,.45);
}

/* ============================================================
   TOUCH TARGETS
   Measured at 390px: footer links were 16-19px tall and the tel
   links 23-31px. Google wants 48px. These only apply to coarse
   pointers so desktop density is untouched.
   ============================================================ */
@media (pointer: coarse) {
  .foot ul a,
  .foot__bottom a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding-inline: 2px;
  }
  .foot__bottom p {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 .55rem;
  }
  .tel { min-height: 44px; align-items: center; }
  .nav__burger { width: 48px; height: 48px; }
  .nav__logo { display: inline-flex; align-items: center; min-height: 44px; }
  .form__fine a,
  .prose a { display: inline-block; min-height: 44px; padding-block: .7rem; }
  .gtoc a { min-height: 44px; display: flex; align-items: center; }
  .contact__mail,
  .contact__where a { display: inline-flex; align-items: center; min-height: 44px; }
  .finish__label h3 { padding-block: .15rem; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
}

/* the hero eyebrow was 10.88px on phones — under the 12px legibility floor */
@media (max-width: 620px) {
  .hero__eyebrow { font-size: .75rem; letter-spacing: .09em; }
}

/* drawer links are real tap targets once the menu is open */
@media (pointer: coarse) {
  .drawer a { min-height: 48px; display: flex; align-items: center; }
}

/* ============================================================
   CITY PAGE — checklist block
   ============================================================ */
.checklist { background: var(--sand-pale); padding-block: var(--vspace); }
.checklist__in {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 880px) { .checklist__in { grid-template-columns: 1fr; gap: 2rem; } }
.checklist__copy .eyebrow { color: var(--teal-deep); display: block; margin-bottom: .9rem; }
.checklist__copy h2 { font-size: var(--t-xl); margin-bottom: 1.1rem; }
.checklist__copy p { color: var(--ink-mute); max-width: 40ch; margin-bottom: 1.6rem; }
.checklist__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.checklist__list li {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
  padding: 1.15rem 0; border-top: 1px solid var(--line);
}
.checklist__list li:last-child { border-bottom: 1px solid var(--line); }
.checklist__n {
  font-family: var(--display); font-weight: 900; font-stretch: 115%;
  font-size: 1.05rem; letter-spacing: -.03em; color: var(--teal-deep);
}
.checklist__list p { color: var(--ink); font-size: 1rem; line-height: 1.5; }

/* ============================================================
   GUIDE PROSE — break up the wall of text
   ============================================================ */
.gbody__main h2 { position: relative; display: flex; align-items: baseline; gap: .8rem; }
.prose__num {
  font-family: var(--display); font-weight: 900; font-stretch: 118%;
  font-size: .62em; letter-spacing: -.03em; color: var(--teal-deep);
  flex: none; opacity: .9;
}

/* bulleted lists become scannable rows instead of a grey paragraph */
.gbody__main ul { list-style: none; margin-left: 0; padding: 0; }
.gbody__main ul li {
  position: relative; padding: .7rem 0 .7rem 2rem;
  border-top: 1px solid var(--line); margin-bottom: 0;
}
.gbody__main ul li:last-child { border-bottom: 1px solid var(--line); }
.gbody__main ul li::before {
  content: ""; position: absolute; left: .25rem; top: 1.15rem;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--teal); transform: rotate(45deg);
}
.gbody__main ol { counter-reset: step; list-style: none; margin-left: 0; padding: 0; }
.gbody__main ol li {
  position: relative; padding: .7rem 0 .7rem 2.4rem;
  counter-increment: step; border-top: 1px solid var(--line); margin-bottom: 0;
}
.gbody__main ol li:last-child { border-bottom: 1px solid var(--line); }
.gbody__main ol li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: .78rem;
  font-family: var(--display); font-weight: 900; font-stretch: 115%;
  font-size: .88rem; letter-spacing: -.02em; color: var(--teal-deep);
}

/* a lead paragraph that follows a heading gets a touch more presence */
.gbody__main h2 + p { font-size: 1.06em; }