/* Layout: West Texas big-sky photo hero, then alternating white and near-black bands; red only for actions and urgency. Single light look by choice (brand site). */
:root {
  --red: #ED1B2F;        /* Pantone 86 U, brand guidelines */
  --red-dark: #C41226;
  --ink: #120907;        /* Process black, brand guidelines */
  --ink-2: #2A2220;
  --paper: #FFFFFF;
  --sand: #F5F1EE;       /* warm neutral leaning toward the red */
  --line: #E4DCD8;
  --muted: #6B5F5B;
  --on-ink-muted: #B9AEAA;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1180px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--font); font-variation-settings: "wdth" 100; }
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.display { font-family: var(--display); font-variation-settings: "wdth" 72; font-weight: 850; text-transform: uppercase; letter-spacing: -0.005em; line-height: 0.95; text-wrap: balance; margin: 0; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin: 0 0 12px; }
h2.display { font-size: clamp(34px, 5vw, 56px); }
h3 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; }
p { margin: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 4px; font: 800 16px/1 var(--font); font-variation-settings: "wdth" 90; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; white-space: nowrap; border: 2px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-red { background: var(--red); color: var(--paper); }
.btn-red:hover { background: var(--red-dark); }
.btn-ghost { border-color: currentColor; color: var(--paper); background: transparent; }
.btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--ink-2); }

/* Utility bar */
.topbar { background: var(--ink); color: var(--paper); font-size: 14px; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; }
.topbar .pulse { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.topbar .pulse::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(237,27,47,.3); }
.topbar a { font-weight: 800; text-decoration: none; letter-spacing: .02em; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.social { display: flex; gap: 10px; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink-2); color: var(--paper); transition: background .15s; }
.social a:hover { background: var(--red); }
.social svg { width: 20px; height: 20px; }
.social-sm { gap: 4px; }
.social-sm a { width: 28px; height: 28px; background: transparent; color: var(--on-ink-muted); }
.social-sm a:hover { background: transparent; color: var(--paper); }
.social-sm svg { width: 16px; height: 16px; }
.topbar .hours { color: var(--on-ink-muted); }

/* Header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--paper); }
header.site { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
header.site .wrap { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.logo { flex: none; }
.logo img { height: 58px; width: auto; }
nav.main { display: flex; gap: 22px; margin-left: auto; }
nav.main a { white-space: nowrap; text-decoration: none; font-weight: 700; font-size: 15px; padding: 6px 0; border-bottom: 2px solid transparent; }
nav.main a:hover { border-color: var(--red); }
header.site .btn { min-height: 46px; padding: 0 18px; font-size: 15px; }
.head-phone { display: grid; text-decoration: none; font-weight: 900; font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 85; white-space: nowrap; }
.head-phone small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--red); }
.head-phone:hover { color: var(--red); }
.menu-btn { display: none; margin-left: auto; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink); }
.menu-btn svg { width: 28px; height: 28px; }

/* Hero: two stacked slides in one grid cell, so height fits the taller one */
.hero { position: relative; color: var(--paper); background: var(--ink); overflow: hidden; display: grid; }
.slide { grid-area: 1 / 1; position: relative; display: grid; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.slide.is-on { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,9,7,.92) 0%, rgba(18,9,7,.78) 42%, rgba(18,9,7,.15) 75%, rgba(18,9,7,0) 100%); }
.slide-camera .hero-img { object-position: 50% 40%; }
.slide-camera::after { background: linear-gradient(90deg, rgba(18,9,7,.94) 0%, rgba(18,9,7,.85) 45%, rgba(18,9,7,.35) 80%, rgba(18,9,7,.2) 100%); }
.hero .wrap { position: relative; z-index: 1; width: 100%; padding-block: clamp(64px, 9vw, 120px) clamp(80px, 10vw, 132px); }
.hero-copy { max-width: 620px; display: grid; gap: 22px; }
.hero .eyebrow { color: #FF5A68; margin: 0; }
.hero .display.big { font-size: clamp(48px, 7.4vw, 92px); }
.hero .display em { font-style: normal; color: var(--red); }
.hero .lede { font-size: clamp(18px, 1.6vw, 20px); color: #EDE6E3; max-width: 520px; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero .ctas .phone { font-variant-numeric: tabular-nums; }
.hero .fine { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--on-ink-muted); }
.hero .fine span { display: inline-flex; align-items: center; gap: 6px; }
.hero .fine svg { width: 16px; height: 16px; color: var(--red); }
.hero-dots { position: absolute; z-index: 2; left: 0; right: 0; bottom: 28px; }
.hero-dots .wrap { padding-block: 0; display: flex; gap: 10px; }
.hero-dots button { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--on-ink-muted); font: 700 12px/1 var(--font); text-transform: uppercase; letter-spacing: .12em; }
.hero-dots button::before { content: ""; width: 34px; height: 3px; background: rgba(255,255,255,.35); transition: background .2s, width .2s; }
.hero-dots button[aria-current="true"] { color: var(--paper); }
.hero-dots button[aria-current="true"]::before { background: var(--red); width: 54px; }
.hero-dots button + button { margin-left: 14px; }

/* Proof strip */
.proof { background: var(--paper); border-bottom: 1px solid var(--line); }
.proof .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof-item { display: flex; align-items: center; gap: 14px; padding-block: 26px; padding-inline: 20px; border-left: 1px solid var(--line); }
.proof-item:first-child { border-left: 0; padding-left: 0; }
.proof-item .big { font-family: var(--display); font-variation-settings: "wdth" 70; font-weight: 900; font-size: 44px; line-height: 1; color: var(--red); flex: none; }
.proof-item .big.ink { color: var(--ink); }
.proof-item p { font-size: 14px; line-height: 1.35; color: var(--muted); }
.proof-item strong { display: block; color: var(--ink); font-size: 15px; }

/* Sections */
section.band { padding-block: clamp(64px, 8vw, 104px); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.section-head p { max-width: 440px; color: var(--muted); }

/* Services */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.service { background: var(--paper); padding: 30px 28px 28px; display: grid; gap: 12px; align-content: start; text-decoration: none; transition: background .15s; position: relative; }
.service:hover { background: var(--sand); }
.service .ico { width: 44px; height: 44px; color: var(--red); }
.service p { color: var(--muted); font-size: 15.5px; }
.service .more { font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; }
.service .more svg { width: 16px; height: 16px; transition: transform .15s; }
.service:hover .more svg { transform: translateX(3px); }

/* Camera inspection feature */
.camera-band { background: var(--ink); color: var(--paper); }
.camera-band .eyebrow { color: #FF5A68; }
.camera { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.camera-copy { display: grid; gap: 22px; min-width: 0; }
.camera-copy .lede { color: #E6DEDB; font-size: 18px; max-width: 600px; }
.uses { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #3A302D; border: 1px solid #3A302D; margin-top: 6px; }
.use { background: var(--ink-2); padding: 20px 22px; display: grid; gap: 6px; align-content: start; }
.use h3 { font-size: 17px; }
.use p { color: var(--on-ink-muted); font-size: 15px; line-height: 1.5; }
.camera .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.realtor { font-size: 15px; color: var(--on-ink-muted); }
.realtor a { color: var(--paper); font-weight: 700; }
.camera-media { display: grid; gap: 16px; min-width: 0; }
.video { position: relative; display: block; border-radius: 4px; overflow: hidden; background: #000; text-decoration: none; }
.video img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .4s, opacity .2s; opacity: .85; }
.video:hover img { transform: scale(1.03); opacity: 1; }
.video .play { position: absolute; top: 50%; left: 50%; translate: -50% -60%; width: 72px; height: 72px; border-radius: 50%; background: var(--red); color: var(--paper); display: grid; place-items: center; box-shadow: 0 8px 30px rgba(0,0,0,.4); transition: scale .15s; }
.video:hover .play { scale: 1.08; }
.video .play svg { width: 30px; height: 30px; margin-left: 4px; }
.video-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 14px; background: linear-gradient(0deg, rgba(18,9,7,.95), rgba(18,9,7,0)); font-size: 14px; line-height: 1.4; color: var(--on-ink-muted); }
.video-cap strong { display: block; color: var(--paper); font-size: 16px; }
.camera-photo { margin: 0; position: relative; }
.camera-photo img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 4px; }
.camera-photo figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; background: rgba(18,9,7,.88); padding: 14px 16px; font-size: 14px; line-height: 1.4; color: var(--on-ink-muted); border-left: 3px solid var(--red); }
.camera-photo figcaption strong { display: block; color: var(--paper); font-size: 15px; }
.compare { margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid #3A302D; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.compare-head { display: grid; gap: 14px; min-width: 0; }
.compare-head .eyebrow { margin: 0; }
.compare-head h3 { font-size: clamp(28px, 3.4vw, 40px); }
.compare-head p:last-child { color: #E6DEDB; }
.compare-table { min-width: 0; overflow-x: auto; }
.compare table { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 14px 12px; border-bottom: 1px solid #3A302D; text-align: center; }
.compare tbody th { text-align: left; font-weight: 600; color: #E6DEDB; padding-left: 0; }
.compare thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--on-ink-muted); font-weight: 700; }
.compare .us { background: rgba(237,27,47,.14); }
.compare thead .us { color: var(--paper); background: var(--red); border-radius: 4px 4px 0 0; }
.compare svg { width: 20px; height: 20px; display: inline-block; vertical-align: middle; }
.compare .yes { color: #4ADE80; }
.compare td.us .yes { color: var(--paper); }
.compare .no { color: #7A6B67; }
.service .tag { position: absolute; top: 18px; right: 18px; background: var(--red); color: var(--paper); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: 4px 8px; border-radius: 3px; }

/* Call band */
.callout { background: var(--red); color: var(--paper); }
.callout .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 34px; flex-wrap: wrap; }
.callout h2 { font-size: clamp(30px, 4vw, 44px); }
.callout p { color: #FFE3E5; margin-top: 6px; }
.callout .btn { background: var(--paper); color: var(--red); font-size: 18px; min-height: 58px; font-variant-numeric: tabular-nums; }
.callout .btn:hover { background: var(--ink); color: var(--paper); }

/* Why */
.why { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.why-photo { position: relative; }
.why-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 4px; }
.why-photo .tag { position: absolute; left: -1px; bottom: 28px; background: var(--ink); color: var(--paper); padding: 14px 18px; font-size: 14px; line-height: 1.35; max-width: 260px; }
.why-photo .tag strong { display: block; font-family: var(--display); font-variation-settings: "wdth" 72; font-weight: 850; text-transform: uppercase; font-size: 22px; line-height: 1.05; }
.why-list { display: grid; gap: 26px; margin-top: 32px; }
.why-item { display: grid; grid-template-columns: 40px 1fr; gap: 16px; }
.why-item svg { width: 32px; height: 32px; color: var(--red); margin-top: 2px; }
.why-item p { color: var(--muted); margin-top: 4px; }

/* Steps */
.steps-band { background: var(--sand); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: s; }
.step { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 28px; display: grid; gap: 10px; align-content: start; }
.step .n { font-family: var(--display); font-variation-settings: "wdth" 70; font-weight: 900; font-size: 56px; line-height: .9; color: var(--red); }
.step p { color: var(--muted); font-size: 15.5px; }

/* Reviews */
.reviews-band { background: var(--ink); color: var(--paper); }
.reviews-band .section-head p { color: var(--on-ink-muted); }
.reviews-band .eyebrow { color: #FF5A68; }
.rating { display: flex; align-items: center; gap: 14px; }
.stars { display: inline-flex; gap: 2px; color: #FFB400; }
.stars svg { width: 20px; height: 20px; }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review { background: var(--ink-2); border-radius: 4px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.review blockquote { margin: 0; font-size: 16.5px; line-height: 1.55; color: #F1EBE8; flex: 1; }
.review .who { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; color: var(--on-ink-muted); border-top: 1px solid #3A302D; padding-top: 14px; }
.review .who strong { color: var(--paper); display: block; font-size: 15px; }
.review .src { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.reviews-cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Split: commercial / PM */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel { position: relative; min-height: 380px; border-radius: 4px; overflow: hidden; color: var(--paper); display: flex; align-items: end; text-decoration: none; background: var(--ink); }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.panel:hover img { transform: scale(1.03); }
.panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,9,7,.92) 0%, rgba(18,9,7,.35) 60%, rgba(18,9,7,.1) 100%); }
.panel .body { position: relative; z-index: 1; padding: 32px; display: grid; gap: 10px; max-width: 480px; }
.panel h3 { font-family: var(--display); font-variation-settings: "wdth" 72; font-weight: 850; text-transform: uppercase; font-size: 34px; line-height: 1; }
.panel p { color: #E6DEDB; }
.panel .more { font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--paper); margin-top: 6px; }

/* Area */
.area { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.towns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; margin-top: 28px; }
.towns > * { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 700; }

.towns > * span { color: var(--muted); font-weight: 500; font-size: 14px; }
.office { background: var(--sand); border-radius: 4px; padding: 32px; display: grid; gap: 22px; }
.office dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; }
.office dt { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--muted); padding-top: 2px; }
.office dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.office .btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* Footer */
footer.site { background: var(--ink); color: var(--on-ink-muted); font-size: 15px; }
footer.site .wrap { padding-block: 56px 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.foot-grid h4 { margin: 0 0 14px; color: var(--paper); font-size: 13px; text-transform: uppercase; letter-spacing: .12em; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid a { text-decoration: none; }
.foot-grid a:hover { color: var(--paper); }
.follow { margin-top: 22px; margin-bottom: 10px; color: var(--paper); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.foot-logo { height: 40px; width: auto; margin-bottom: 18px; }
.foot-base { margin-top: 44px; padding-top: 22px; border-top: 1px solid #2E2523; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }

/* Booking dialog (stands in for the Housecall Pro widget) */
.book-dlg { border: 0; border-radius: 6px; padding: 0; max-width: 440px; width: calc(100% - 32px); color: var(--ink); background: var(--paper); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.book-dlg::backdrop { background: rgba(18,9,7,.6); }
.book-dlg .hd { background: var(--ink); color: var(--paper); padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; }
.book-dlg .hd h3 { font-family: var(--display); font-variation-settings: "wdth" 72; font-weight: 850; text-transform: uppercase; font-size: 26px; }
.book-dlg .x { background: none; border: 0; color: var(--paper); font-size: 28px; line-height: 1; cursor: pointer; padding: 4px; }
.book-dlg .bd { padding: 24px; display: grid; gap: 16px; }
.book-dlg .note { background: var(--sand); border-left: 3px solid var(--red); padding: 12px 14px; font-size: 14px; color: var(--ink-2); }
.book-dlg label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; }
.book-dlg select, .book-dlg input { font: inherit; font-weight: 400; padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); }

/* Mobile call bar */
.callbar { display: none; }

@media (max-width: 1320px) { nav.main { gap: 16px; } nav.main a { font-size: 14px; } header.site .wrap { gap: 20px; } }
@media (max-width: 1040px) {
  nav.main { display: none; }
  header.site .btn { display: none; }
  .head-phone { margin-left: auto; }
  .menu-btn { display: block; margin-left: 0; }
  .proof .wrap { grid-template-columns: repeat(2, 1fr); }
  .proof-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .proof-item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .services { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .topbar .hours, .topbar-phone { display: none; }
  header.site .wrap { min-height: 70px; }
  .logo img { height: 46px; }
  .slide::after, .slide-camera::after { background: linear-gradient(0deg, rgba(18,9,7,.95) 0%, rgba(18,9,7,.82) 55%, rgba(18,9,7,.45) 100%); }
  .hero .ctas .btn { flex: 1 1 100%; }
  .proof .wrap { grid-template-columns: 1fr; }
  .proof-item, .proof-item:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-block: 18px; }
  .proof-item:first-child { border-top: 0; }
  .services, .steps, .split, .why, .area, .camera, .uses, .compare { grid-template-columns: 1fr; }
  .compare th, .compare td { padding: 12px 8px; font-size: 14px; }
  .camera .ctas .btn { flex: 1 1 100%; }
  .video .play { width: 56px; height: 56px; translate: -50% -90%; }
  .video-cap span, .video-cap { font-size: 13px; }
  .why-photo img { aspect-ratio: 4/3; }
  .towns { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .callbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--paper); border-top: 1px solid var(--line); padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
  .callbar .btn { min-height: 50px; padding: 0 12px; font-size: 15px; }
}

/* ---------- Service page (drain-cleaning.html) ---------- */
.crumbs { font-size: 13px; color: var(--on-ink-muted); display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--paper); }
.page-hero { background: var(--ink); color: var(--paper); }
.page-hero .wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; padding-block: clamp(48px, 7vw, 88px); }
.page-hero .copy { display: grid; gap: 20px; min-width: 0; }
.page-hero .eyebrow { color: #FF5A68; margin: 0; }
.page-hero h1 { font-size: clamp(44px, 6.4vw, 80px); }
.page-hero h1 em { font-style: normal; color: var(--red); }
.page-hero .lede { font-size: clamp(17px, 1.5vw, 19px); color: #EDE6E3; max-width: 540px; }
.page-hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.page-hero .fine { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--on-ink-muted); }
.page-hero .fine span { display: inline-flex; align-items: center; gap: 6px; }
.page-hero .fine svg { width: 16px; height: 16px; color: var(--red); }
.page-hero figure { margin: 0; position: relative; }
.page-hero figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; }
.page-hero .quick { position: absolute; left: 16px; bottom: 16px; right: 16px; background: var(--paper); color: var(--ink); border-radius: 4px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.page-hero .quick .stars { flex: none; }
.page-hero .quick p { font-size: 14px; line-height: 1.4; color: var(--muted); }
.page-hero .quick strong { color: var(--ink); display: block; font-size: 15px; }

.signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sign { border-top: 3px solid var(--ink); padding-top: 18px; display: grid; gap: 8px; align-content: start; }
.sign h3 { font-size: 19px; }
.sign p { color: var(--muted); font-size: 15.5px; }
.sign.alert { border-color: var(--red); }
.sign.alert h3::after { content: "Call today"; margin-left: 10px; vertical-align: 2px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; background: var(--red); color: var(--paper); padding: 3px 7px; border-radius: 3px; }

.methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.method { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 28px; display: grid; gap: 10px; align-content: start; }
.method .ico { width: 44px; height: 44px; color: var(--red); }
.method p { color: var(--muted); font-size: 15.5px; }
.method .best { font-size: 13px; color: var(--ink); font-weight: 700; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 4px; }
.method .best span { color: var(--muted); font-weight: 500; }

.repeat { background: var(--ink); color: var(--paper); border-radius: 6px; overflow: hidden; display: grid; grid-template-columns: 1fr 1.2fr; }
.repeat img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.repeat .body { padding: clamp(28px, 4vw, 48px); display: grid; gap: 16px; align-content: center; }
.repeat .eyebrow { color: #FF5A68; margin: 0; }
.repeat h2 { font-size: clamp(30px, 4vw, 46px); }
.repeat p { color: #E6DEDB; }
.repeat .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

.faq-wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq-wrap .side { display: grid; gap: 16px; position: sticky; top: calc(110px + env(safe-area-inset-top, 0px)); }
.faq-wrap .side p { color: var(--muted); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 800; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sand); display: grid; place-items: center; font-size: 22px; font-weight: 500; color: var(--red); transition: rotate .2s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 48px 22px 0; color: var(--muted); }

.mockup-note { background: #FFF6D6; color: #5A4500; font-size: 13px; padding: 8px 0; text-align: center; }

@media (max-width: 1040px) {
  .signs, .methods { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .page-hero .wrap, .repeat, .faq-wrap { grid-template-columns: 1fr; }
  .page-hero .ctas .btn, .repeat .ctas .btn { flex: 1 1 100%; }
  .signs, .methods { grid-template-columns: 1fr; }
  .faq-wrap .side { position: static; }
  .repeat img { min-height: 200px; max-height: 260px; }
  .faq details p { padding-right: 0; }
}

/* Camera page */
.page-hero .video img { aspect-ratio: 16/9; }
.finds { display: grid; grid-template-columns: 0.8fr 1.6fr; gap: clamp(28px, 4vw, 48px); align-items: start; }
.finds .signs { grid-template-columns: repeat(2, 1fr); }
.finds-photo { margin: 0; }
.finds-photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 4px; }
.finds-photo figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; }
.method .best a { color: var(--red); }
@media (max-width: 760px) {
  .finds, .finds .signs { grid-template-columns: 1fr; }
  .finds-photo img { aspect-ratio: 4/3; }
}

/* Sewer line page */
.steps-band .section-head p a, .faq a { color: var(--red); font-weight: 700; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.option { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 32px; display: grid; gap: 12px; align-content: start; }
.option.featured { border: 2px solid var(--red); }
.option .tag-line { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--red); }
.option h3 { font-family: var(--display); font-variation-settings: "wdth" 72; font-weight: 850; text-transform: uppercase; font-size: 32px; line-height: 1; }
.option p { color: var(--muted); }
.option ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.option li { display: flex; gap: 10px; font-weight: 600; font-size: 15px; }
.option li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; background: var(--red); border-radius: 50%; }
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.process li { display: grid; gap: 10px; align-content: start; position: relative; }
.process img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 4px; }
.process .n { position: absolute; top: 12px; left: 12px; width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: var(--paper); display: grid; place-items: center; font-family: var(--display); font-variation-settings: "wdth" 70; font-weight: 900; font-size: 22px; }
.process p { color: var(--muted); font-size: 15px; }
.money { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.money-copy { display: grid; gap: 18px; min-width: 0; }
.money-copy .eyebrow { margin: 0; }
.money-copy p { color: #E6DEDB; }
.money-copy .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.money-quote { margin: 0; background: var(--ink-2); border-radius: 4px; padding: 32px; display: grid; gap: 16px; border-left: 4px solid var(--red); }
.money-quote blockquote { margin: 0; font-size: 18px; line-height: 1.55; color: #F1EBE8; }
.money-quote figcaption { font-size: 14px; color: var(--on-ink-muted); }
.money-quote figcaption strong { display: block; color: var(--paper); }
.video.wide { max-width: 880px; margin: 0 auto; }
.video.wide img { aspect-ratio: 16/9; }
@media (max-width: 1040px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .options, .money { grid-template-columns: 1fr; }
  .money-copy .ctas .btn { flex: 1 1 100%; }
  .process img { aspect-ratio: 4/3; }
}

/* Water heater page */
.table-scroll { overflow-x: auto; }
.vs { width: 100%; min-width: 560px; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; font-size: 15.5px; }
.vs th, .vs td { padding: 16px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.vs thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.vs thead th.hl { color: var(--paper); background: var(--ink); }
.vs tbody th { font-weight: 800; width: 22%; }
.vs tbody td { color: var(--muted); }
.vs tbody tr:last-child th, .vs tbody tr:last-child td { border-bottom: 0; }
.ba-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.ba-copy { display: grid; gap: 18px; min-width: 0; }
.ba-copy .eyebrow { margin: 0; }
.ba-copy > p { color: var(--muted); }
.sticker { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; background: var(--sand); border-radius: 4px; padding: 16px; margin-top: 6px; }
.sticker img { width: 100%; border-radius: 3px; box-shadow: 0 6px 18px rgba(0,0,0,.18); rotate: -3deg; }
.sticker p { font-size: 15px; color: var(--muted); }
.sticker strong { display: block; color: var(--ink); font-size: 16px; }
.ba { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 3/4; max-height: 640px; justify-self: center; width: 100%; max-width: 480px; background: var(--ink); user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-label { position: absolute; top: 14px; background: rgba(18,9,7,.85); color: var(--paper); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: 3px; pointer-events: none; }
.ba-label.l { left: 14px; } .ba-label.r { right: 14px; background: var(--red); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--paper); pointer-events: none; }
.ba-handle span { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--paper); box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.ba-handle span::before { content: "‹ ›"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 18px; color: var(--ink); letter-spacing: 2px; }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba input:focus-visible + * , .ba:focus-within .ba-handle span { outline: 3px solid var(--red); outline-offset: 2px; }
.money-photo { margin: 0; }
.money-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; }
@media (max-width: 760px) {
  .ba-wrap { grid-template-columns: 1fr; }
  .sticker { grid-template-columns: 110px 1fr; }
  .vs { min-width: 0; }
  .vs thead { display: none; }
  .vs tbody tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
  .vs tbody tr:last-child { border-bottom: 0; }
  .vs tbody th { grid-column: 1 / -1; width: auto; padding: 14px 16px 4px; border: 0; }
  .vs tbody td { border: 0; padding: 4px 16px 14px; font-size: 14.5px; }
  .vs tbody td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); margin-bottom: 2px; }
  .vs tbody td.hl::before { color: var(--red); }
}

/* Commercial page: project map (light, full width) */
.page-hero .quick-num { flex: none; font-family: var(--display); font-variation-settings: "wdth" 70; font-weight: 900; font-size: 40px; line-height: 1; color: var(--red); }
.pmap-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.pmap-note { font-size: 13px; color: var(--muted); }
.pmap-map { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 18px 40px -24px rgba(18,9,7,.25); }
.lbk-map { width: 100%; height: auto; display: block; }
.lbk-map .ground { fill: #FBF9F8; }
.lbk-map .st { stroke: #ECE5E1; stroke-width: 2.5; fill: none; }
.lbk-map .hwy { stroke: #D9CEC9; stroke-width: 7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lbk-map .loop { stroke: #C9BBB5; stroke-width: 9; fill: none; }
.lbk-map .campus { fill: #F1EBE8; }
.lbk-map .lbl { fill: #A3958F; font: 600 13px var(--font); }
.lbk-map .lbl.hw { fill: #6B5F5B; font-weight: 800; font-size: 13px; letter-spacing: .1em; text-anchor: middle; paint-order: stroke; stroke: #FBF9F8; stroke-width: 6px; }
.lbk-map .lbl.area { fill: #8A7C77; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-anchor: middle; paint-order: stroke; stroke: #FBF9F8; stroke-width: 5px; }
.lbk-map .pin { cursor: pointer; }
.lbk-map .pin path { fill: var(--red); stroke: var(--paper); stroke-width: 2.5; filter: drop-shadow(0 3px 4px rgba(18,9,7,.3)); }
.lbk-map .pin .dot { fill: var(--paper); }
.lbk-map .pin .halo { fill: rgba(237,27,47,.18); opacity: 0; transition: opacity .2s; }
.lbk-map .pin.on .halo, .lbk-map .pin:hover .halo, .lbk-map .pin:focus-visible .halo { opacity: 1; }
.lbk-map .pin:focus { outline: none; }
.pop { position: absolute; z-index: 2; width: min(320px, 70%); transform: translate(18px, -100%); margin-top: -10px; background: var(--paper); border-radius: 6px; box-shadow: 0 16px 40px rgba(18,9,7,.25); padding: 12px; display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: start; }
.pop.flip { transform: translate(calc(-100% - 18px), -100%); }
.pop img { width: 72px; height: 72px; object-fit: cover; border-radius: 4px; }
.pop > div { display: grid; gap: 2px; min-width: 0; padding-right: 18px; }
.pop strong { font-size: 16px; }
.pop:not(:has(img)) { grid-template-columns: 1fr; }
.pop-x { position: absolute; top: 4px; right: 6px; background: none; border: 0; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 700 13px/1 var(--font); padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pcard { width: 100%; display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; text-align: left; background: transparent; border: 0; border-radius: 6px; padding: 6px 8px; color: var(--ink); font: inherit; cursor: pointer; transition: background .15s; }
.pcard:hover { background: var(--sand); }
.pcard[aria-pressed="true"] { background: #FDE8EA; box-shadow: inset 3px 0 0 var(--red); }
.pcard img, .pcard-ph { width: 44px; height: 44px; border-radius: 4px; object-fit: cover; }
.pcard-ph { display: grid; place-items: center; background: var(--sand); color: #B9AAA4; font-family: var(--display); font-variation-settings: "wdth" 70; font-weight: 900; font-size: 22px; }
.pcard-body { display: grid; gap: 1px; min-width: 0; }
.pcard-body strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-type { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--red); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-work { font-size: 14px; color: var(--muted); line-height: 1.4; }
#projects .pmap-map { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: clamp(460px, 44vw, 660px); }
.pmap-panel { background: var(--paper); border-right: 1px solid var(--line); overflow-y: auto; padding: 14px 10px 14px max(14px, env(safe-area-inset-left, 0px)); overscroll-behavior: contain; }
.pmap-count { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 0 8px 8px; }
.pmap-canvas { position: relative; min-width: 0; }
#projects .pmap-canvas .lbk-map { width: 100%; height: 100%; aspect-ratio: auto; max-height: none; }
.jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.job { display: grid; gap: 10px; align-content: start; }
.job-imgs { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 6px; aspect-ratio: 4/3; overflow: hidden; }
.job-imgs img { width: 100%; height: 100%; min-height: 0; min-width: 0; object-fit: cover; border-radius: 3px; }
.job-imgs img:first-child { grid-row: 1 / 3; }
.job p { color: var(--muted); font-size: 15px; }
.method a { color: var(--red); font-weight: 700; }
@media (max-width: 1040px) {
  #projects .pmap-map { grid-template-columns: 260px minmax(0, 1fr); }
  .jobs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .jobs { grid-template-columns: 1fr; }
  .pop, .pop.flip { position: relative; left: auto !important; top: auto !important; transform: none; margin: 0; width: auto; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); }
}

/* Commercial: full-bleed hero photo and edge-to-edge map */
.page-hero.hero-photo { position: relative; overflow: hidden; }
.hero-photo .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,9,7,.94) 0%, rgba(18,9,7,.8) 40%, rgba(18,9,7,.25) 75%, rgba(18,9,7,.1) 100%); }
.hero-photo .wrap { position: relative; z-index: 1; grid-template-columns: minmax(0, 640px); padding-block: clamp(80px, 11vw, 150px); }
.hero-stat { display: flex; align-items: center; gap: 14px; margin-top: 6px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); max-width: 420px; }
.hero-stat p { font-size: 14px; color: var(--on-ink-muted); line-height: 1.4; }
.hero-stat strong { display: block; color: var(--paper); font-size: 15px; }
#projects .pmap-map { border: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.pop[hidden] { display: none; }
@media (max-width: 760px) {
  .hero-photo::after { background: linear-gradient(0deg, rgba(18,9,7,.95) 0%, rgba(18,9,7,.8) 55%, rgba(18,9,7,.5) 100%); }
  #projects .pmap-map { grid-template-columns: 1fr; height: auto; }
  .pmap-canvas { order: -1; }
  #projects .pmap-canvas .lbk-map { height: 320px; }
  .pmap-panel { max-height: 300px; border-right: 0; border-top: 1px solid var(--line); }
}

.methods.methods-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .methods.methods-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .methods.methods-4 { grid-template-columns: 1fr; } }

/* Careers */
.perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.perks li { display: flex; gap: 12px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 16px 18px; font-weight: 700; }
.perks svg { width: 22px; height: 22px; color: var(--red); flex: none; }
.option > div:last-child { margin-top: 8px; }
@media (max-width: 1040px) { .perks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .perks { grid-template-columns: 1fr; } }

a.proof-item { text-decoration: none; color: inherit; }
a.proof-item:hover strong { color: var(--red); }

/* Housecall Pro chat bubble: sit above the phone Call/Book bar */
@media (max-width: 760px) {
  #proChatIframeContainer { bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---------- Blog ---------- */
.page-hero.slim .wrap { grid-template-columns: minmax(0, 1fr); padding-block: clamp(40px, 6vw, 72px); }
.page-hero.slim h1 { font-size: clamp(36px, 5vw, 60px); max-width: 22ch; }
.article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.article { max-width: 68ch; font-size: 18px; line-height: 1.7; min-width: 0; }
.article > * + * { margin-top: 1em; }
.article h2, .article h3, .article h4 { line-height: 1.2; margin-top: 1.6em; }
.article h2 { font-size: 28px; } .article h3 { font-size: 24px; } .article h4 { font-size: 20px; }
.article ul, .article ol { padding-left: 1.3em; }
.article li + li { margin-top: .4em; }
.article li > p { margin: 0; }
.article img { display: block; max-width: 100%; height: auto; border-radius: 4px; }
.article a { color: var(--red); overflow-wrap: anywhere; }
.article-side { position: sticky; top: 110px; display: grid; gap: 14px; padding: 28px; background: var(--ink); color: var(--paper); border-radius: 4px; }
.article-side h2 { font-size: 26px; line-height: 1.1; margin: 0; }
.article-side p { margin: 0; color: #EDE6E3; }
.article-side .eyebrow { color: #FF5A68; margin: 0; }
.article-side .btn-ink { background: transparent; border-color: rgba(255,255,255,.4); }
.article-side .btn { white-space: normal; text-align: center; padding: 14px 16px; line-height: 1.15; min-width: 0; }
.article-side .side-link { color: var(--paper); font-size: 14px; }
.post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.post-card { display: grid; align-content: start; gap: 10px; padding: 28px; background: var(--paper); color: inherit; text-decoration: none; transition: background .15s; }
.post-card:hover { background: #FBF7F6; }
.post-card time { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.post-card h2 { font-size: 22px; line-height: 1.2; margin: 0; }
.post-card p { margin: 0; color: var(--muted); }
.post-card .more { font-weight: 800; color: var(--red); text-transform: uppercase; font-size: 14px; letter-spacing: .04em; }
@media (max-width: 900px) {
  .article-wrap { grid-template-columns: minmax(0, 1fr); }
  .article-side { position: static; }
}