/* ==========================================================================
   Home Ready TX — design system
   Concept: "The Field Ledger" — a contractor's job book crossed with a
   Texas land survey. Olive ground, cream paper, gold survey marks.
   Palette is locked to the colours already shipping on homereadytx.com.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* brand — taken from the live site's stylesheet, do not drift */
  --ink:        #13180e;   /* deep olive, primary text + dark ground */
  --ink-2:      #3a4028;   /* raised olive surface */
  --ink-3:      #242b1c;   /* between the two, for layered dark panels */
  --cream:      #f7f1e5;   /* page ground */
  --cream-card: #fefaf1;   /* raised paper */
  --cream-mute: #f0ebe0;   /* sunken paper */
  --cream-warm: #f0e7d6;   /* text on dark */
  --gold:       #cf8634;   /* the survey mark. Used sparingly, always meaningful */
  --gold-soft:  #f1e2cf;   /* gold at 12% on paper */
  --gold-lift:  #e0a256;   /* gold on dark ground, lifted for contrast */
  --rule:       #ddd7ca;   /* hairline on paper */
  --rule-dark:  #ffffff1f; /* hairline on olive */
  --muted:      #6b6f5c;   /* secondary text on paper */
  --muted-dark: #a8ad94;   /* secondary text on olive */

  /* type */
  --font-display:   "Archivo", "Archivo Black", system-ui, sans-serif;
  --font-editorial: "Fraunces", Georgia, serif;
  --font-body:      "Hind", system-ui, sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, monospace;

  /* motion — house tokens, set before any effect is chosen */
  --wx-ease:      cubic-bezier(0.5, 0, 0, 1);
  --wx-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --wx-ease-in:   cubic-bezier(0.32, 0, 0.67, 0);
  --wx-dur:       0.8s;
  --wx-dur-exit:  0.4s;
  --wx-dur-micro: 0.2s;
  --wx-stagger:   80ms;

  /* layout */
  --gut: clamp(20px, 5vw, 76px);
  --maxw: 1320px;
  --header-h: 74px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: .004em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; }
p { margin: 0 0 1.05em; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* ---------- paper grain: the atmosphere layer ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

/* ---------- primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(72px, 9vw, 148px); position: relative; }
.section--tight { padding-block: clamp(52px, 6vw, 96px); }
.dark { background: var(--ink); color: var(--cream-warm); }
.dark h1, .dark h2, .dark h3 { color: var(--cream); }

/* the ledger eyebrow — mono, tracked, with a rule and a section numeral */
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 12px; margin: 0 0 22px;
}
.dark .eyebrow { color: var(--muted-dark); }
.eyebrow::before {
  content: attr(data-num); color: var(--gold); font-variant-numeric: tabular-nums;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--rule); max-width: 120px; }
.dark .eyebrow::after { background: var(--rule-dark); }

/* display scale — deliberately NOT one clamp everywhere.
   Each level is set by the weight the section should carry. */
.d1 { font-size: clamp(36px, 5.1vw, 64px);  line-height: 1.04; letter-spacing: -.032em; }
.d2 { font-size: clamp(32px, 4.6vw, 58px);  line-height: 1.02; letter-spacing: -.028em; }
.d3 { font-size: clamp(26px, 3.1vw, 39px);  line-height: 1.1;  letter-spacing: -.02em; }
.d4 { font-size: clamp(20px, 2.1vw, 25px);  line-height: 1.22; letter-spacing: -.012em; }

/* The editorial accent — one landing word per section, never more.
   Fraunces carries a real optical-size axis, so display cuts are set at the
   display end (144) and inline ones nearer text. Most sites never touch it;
   the difference is a sharper, less doughy italic at large sizes. */
.acc {
  font-family: var(--font-editorial); font-weight: 400; font-style: italic;
  font-optical-sizing: auto; color: var(--gold); letter-spacing: -.012em;
  font-variation-settings: "opsz" 144;
}
.d3 .acc, .d4 .acc, p .acc { font-variation-settings: "opsz" 36; letter-spacing: -.004em; }
.lede .acc, .prose .acc { font-variation-settings: "opsz" 14; letter-spacing: 0; }

/* Tracking is a function of size, not one global value. Large display type
   needs to be pulled in; small caps-tracked type needs to be opened up. */
.d1 { font-variation-settings: normal; }
.d1, .d2 { text-wrap: balance; }
.lede, .prose p { text-wrap: pretty; }
.dark .acc { color: var(--gold-lift); }

.lede { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--muted); max-width: 54ch; }
.dark .lede { color: var(--muted-dark); }

.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }

/* A drawn divider rather than a 1px line — hand-varied width, off-centre
   diamond. Small thing; it is the kind of thing a template never has. */
.flourish { display: flex; align-items: center; gap: 18px; color: var(--rule); }
.dark .flourish { color: #ffffff2b; }
.flourish::before, .flourish::after { content: ""; height: 1px; background: currentColor; flex: 1; }
.flourish::before { max-width: 38%; }
.flourish i {
  width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg);
  flex: none; display: block;
}

/* Marginalia — set like an annotation in the margin of a drawing, rotated a
   degree off true so it reads as written rather than placed. */
.aside-note {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); transform: rotate(-1.4deg);
  display: inline-block;
}
.aside-note b { color: var(--gold); font-weight: 500; }
/* break between the segments, never inside one */
.aside-note span { white-space: nowrap; margin-right: 6px; }
@media (max-width: 420px) { .aside-note { letter-spacing: .13em; font-size: 10px; } }
.tnum { font-variant-numeric: tabular-nums; }
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
.dark .rule { background: var(--rule-dark); }

/* hand-drawn underline — the deliberate imperfection */
.scribble { position: relative; display: inline-block; }
/* the underline must clear the descender without touching the line below —
   at hero line-height that leaves roughly .1em of room, so it sits tight */
.scribble svg {
  position: absolute; left: -1%; bottom: -.09em; width: 102%; height: .2em;
  overflow: visible; pointer-events: none;
}
.scribble svg path {
  fill: none; stroke: var(--gold); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: draw 1.15s var(--wx-ease-out) .75s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--ink); --fg: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bg);
  padding: 15px 26px; border-radius: 999px; text-decoration: none;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: .005em;
  cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
  transition: color var(--wx-dur-micro) var(--wx-ease), border-color var(--wx-dur-micro) var(--wx-ease);
}
/* gold sweeps up from the base on hover — one curve, everywhere */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold);
  transform: translateY(101%); transition: transform .42s var(--wx-ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover { color: var(--ink); border-color: var(--gold); }
.btn--gold { --bg: var(--gold); --fg: var(--ink); border-color: var(--gold); }
.btn--gold::before { background: var(--ink); }
.btn--gold:hover { color: var(--cream); border-color: var(--ink); }
.btn--ghost { --bg: transparent; --fg: var(--ink); border-color: var(--ink); }
.dark .btn--ghost { --fg: var(--cream); border-color: #ffffff4d; }
.dark .btn--ghost:hover { color: var(--ink); }
.btn--lg { padding: 18px 34px; font-size: 16px; }
.btn--block { width: 100%; }
.btn .arr { transition: transform .38s var(--wx-ease); }
.btn:hover .arr { transform: translateX(4px); }

/* text link with a gold rule that draws left to right */
.tlink {
  text-decoration: none; font-weight: 600; position: relative;
  padding-bottom: 2px; display: inline-flex; align-items: center; gap: 7px;
}
.tlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .42s var(--wx-ease);
}
.tlink:hover::after { transform: scaleX(1); }

/* ---------- photo treatment: olive duotone unifies every image ---------- */
.shot { position: relative; overflow: hidden; background: var(--ink-2); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #13180e26, #13180e0d 42%, #13180e59);
  mix-blend-mode: multiply;
}
.shot--tilt { transform: rotate(-1.1deg); }

/* ---------- announcement + header ---------- */
.topbar {
  background: var(--ink); color: var(--cream-warm);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.topbar a { color: var(--gold-lift); text-decoration: none; font-weight: 500; }
.topbar a:hover { color: var(--cream); }
.topbar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); display: inline-block; margin-right: 8px; animation: pulse 2.6s var(--wx-ease) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.topbar__hide { display: none; }
@media (min-width: 880px) { .topbar__hide { display: inline; } }

/* The header runs on ink, continuous with the .topbar above it, so the brand
   lockup can be used exactly as supplied — its wordmark is cream and would be
   invisible on the old cream bar. */
.hdr {
  position: sticky; top: 0; z-index: 800;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--wx-ease), background .3s var(--wx-ease);
}
.hdr.is-stuck { border-bottom-color: var(--rule-dark); background: color-mix(in srgb, var(--ink) 98%, transparent); }
.hdr .wrap { display: flex; align-items: center; gap: 28px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.brand img { width: 38px; height: 38px; }
/* beats `.brand img` on specificity — the lockup is 3.35:1, not square */
.brand img.brand__logo { width: 150px; height: auto; display: block; }
@media (max-width: 420px) { .brand img.brand__logo { width: 126px; } }
.nav { display: none; gap: 30px; align-items: center; }
@media (min-width: 1040px) { .nav { display: flex; } }
.nav a {
  text-decoration: none; font-size: 15px; font-weight: 500; position: relative; padding-block: 6px;
  color: var(--cream-warm);  /* header is ink now */
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--cream); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--wx-ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.hdr__cta { display: none; }
@media (min-width: 720px) { .hdr__cta { display: inline-flex; } }

/* menu button + drawer */
.menubtn {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; border: 1px solid var(--rule-dark); border-radius: 999px;
  background: transparent; cursor: pointer; align-items: center;
}
@media (min-width: 1040px) { .menubtn { display: none; } }
.menubtn span { width: 17px; height: 1.5px; background: var(--cream); transition: transform .3s var(--wx-ease), opacity .2s; }
.menubtn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menubtn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menubtn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 900; background: var(--ink); color: var(--cream);
  padding: 26px var(--gut) 40px; display: flex; flex-direction: column;
  transform: translateY(-100%); transition: transform .56s var(--wx-ease);
  overflow-y: auto; visibility: hidden;
}
.drawer.is-open { transform: translateY(0); visibility: visible; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; }
.drawer__close { width: 44px; height: 44px; border-radius: 999px; border: 1px solid #ffffff33; background: none; color: var(--cream); font-size: 22px; cursor: pointer; line-height: 1; }
.drawer nav { display: flex; flex-direction: column; }
.drawer nav a {
  font-family: var(--font-display); font-size: clamp(27px, 7vw, 40px); font-weight: 700;
  letter-spacing: -.03em; text-decoration: none; padding: 15px 0;
  border-bottom: 1px solid var(--rule-dark); display: flex; justify-content: space-between; align-items: center;
}
.drawer nav a span { font-family: var(--font-mono); font-size: 11px; color: var(--gold-lift); letter-spacing: .16em; }
.drawer__foot { margin-top: auto; padding-top: 30px; display: grid; gap: 12px; }

/* ---------- hero ---------- */
.hero { position: relative; padding-top: clamp(26px, 3vw, 44px); padding-bottom: clamp(30px, 4vw, 66px); }
.hero__grid { display: grid; gap: clamp(30px, 4vw, 54px); align-items: center; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 1.08fr .92fr; } }
.hero__pill {
  display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--rule);
  background: var(--cream-card); border-radius: 999px; padding: 7px 15px 7px 11px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 26px;
}
.hero__pill b { color: var(--ink); font-weight: 600; }
.hero h1 { margin-bottom: 26px; }
.hero__sub { max-width: 46ch; font-size: clamp(17px, 1.4vw, 20px); color: var(--muted); }
.hero__acts { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; align-items: center; }
.hero__note { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* marginalia — a designer's aside, set in the margin like a field note */
.margin-note {
  font-family: var(--font-editorial); font-style: italic; font-size: 15px; color: var(--muted);
  border-left: 2px solid var(--gold); padding-left: 14px; margin: 30px 0 0; max-width: 38ch; line-height: 1.5;
}

/* Hero media + the job ledger card that overlaps it.
   On desktop the photo breaks the container and bleeds off the right edge of
   the screen — the asymmetry is the point, a contained box reads as a template. */
.hero__media { position: relative; }
/* The bleed widens this column well past its grid track, so the ratio has to
   come down with it or the hero grows taller than the fold. */
.hero__media .shot { aspect-ratio: 5 / 4; border-radius: 3px 0 0 3px; }
@media (min-width: 1000px) {
  .hero__media { margin-right: calc(-1 * (var(--gut) + max(0px, (100vw - var(--maxw)) / 2))); }
}
@media (min-width: 1400px) { .hero__media .shot { aspect-ratio: 3 / 2; } }
@media (max-width: 999px) { .hero__media .shot { aspect-ratio: 16 / 11; border-radius: 3px; } }

/* Entrance choreography. The single biggest motion spend on a luxury site is
   the page load, not decorative scroll reveals — so it is staged here by hand.
   The h1 is left alone: GSAP `lines` owns it. */
@keyframes heroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes heroWipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.hero [data-enter] { opacity: 0; animation: heroIn .95s var(--wx-ease-out) forwards; }
.hero [data-enter="1"] { animation-delay: .05s; }
.hero [data-enter="2"] { animation-delay: .62s; }
.hero [data-enter="3"] { animation-delay: .74s; }
.hero [data-enter="4"] { animation-delay: .86s; }
.hero [data-enter="5"] { animation-delay: 1.02s; }
.hero__media > .hero__frame { animation: heroWipe 1.15s var(--wx-ease) .2s both; }
/* The ledger fades on opacity ONLY — `tilt` owns its transform, and a
   forwards-filling transform animation would beat the inline one and kill it. */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.hero .ledger { animation: fadeIn .8s var(--wx-ease-out) 1.15s both; }
.hero .ledger { transition: box-shadow .4s var(--wx-ease); }
.hero .ledger:hover { box-shadow: 0 36px 70px -26px #13180eb3; }
@media (prefers-reduced-motion: reduce) {
  .hero [data-enter], .hero__media > .hero__frame, .hero .ledger {
    opacity: 1; animation: none; clip-path: none;
  }
}
.ledger {
  background: var(--ink); color: var(--cream-warm); border-radius: 3px;
  padding: 22px 24px; box-shadow: 0 28px 60px -28px #13180e99;
}
@media (min-width: 1000px) {
  .ledger { position: absolute; left: -54px; bottom: -40px; width: 300px; }
}
@media (max-width: 999px) { .ledger { margin-top: -34px; margin-inline: 12px; position: relative; z-index: 2; } }
.ledger h4 {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-lift); margin-bottom: 14px;
}
.ledger dl { margin: 0; display: grid; gap: 11px; }
.ledger .row { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; border-bottom: 1px dotted #ffffff2e; padding-bottom: 10px; }
.ledger .row:last-child { border-bottom: 0; padding-bottom: 0; }
.ledger dt { font-size: 13px; color: var(--muted-dark); }
.ledger dd { margin: 0; font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--cream); text-align: right; }

/* ---------- ticker ---------- */
.ticker { border-block: 1px solid var(--rule); background: var(--cream-mute); padding-block: 15px; overflow: hidden; }
.dark .ticker { border-color: var(--rule-dark); background: var(--ink-3); }
/* data-wx="marquee" supplies display:flex + overflow:hidden and clones the
   first child as the second track, so gap must live on the marquee element. */
.ticker__marq { gap: 42px; }
.ticker__row { display: flex; gap: inherit; white-space: nowrap; align-items: center; flex: 0 0 auto; }
.ticker span {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .17em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 42px;
}
.ticker span::after { content: "◆"; color: var(--gold); font-size: 8px; }

/* ---------- section header: three variants so the page is not one template ---------- */
.shead { display: grid; gap: 20px; margin-bottom: clamp(38px, 4vw, 62px); }
@media (min-width: 900px) { .shead--split { grid-template-columns: 1.15fr .85fr; align-items: end; gap: 52px; } }
.shead--centre { text-align: center; justify-items: center; max-width: 720px; margin-inline: auto; }
.shead--centre .eyebrow { justify-content: center; }
.shead--centre .eyebrow::after { display: none; }
.shead--stack { max-width: 780px; }

/* ---------- market proof: the reason this business exists ---------- */
.market { display: grid; gap: 1px; background: var(--rule-dark); border: 1px solid var(--rule-dark); border-radius: 3px; overflow: hidden; }
@media (min-width: 620px) { .market { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .market { grid-template-columns: repeat(4, 1fr); } }
.market__cell { background: var(--ink); padding: 30px 26px 28px; }
.market__cell b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(38px, 4.4vw, 56px); letter-spacing: -.045em; line-height: 1; color: var(--cream);
  margin-bottom: 12px;
}
.market__cell b em { font-style: normal; font-size: .46em; color: var(--gold-lift); letter-spacing: 0; margin-left: 3px; }
.market__cell p { font-size: 14.5px; color: var(--muted-dark); margin: 0; line-height: 1.5; }
.market__cell .src { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #ffffff59; margin-top: 12px; display: block; }

/* ---------- services ---------- */
.svc { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
@media (min-width: 680px) { .svc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .svc { grid-template-columns: repeat(3, 1fr); } }
.svc__card {
  background: var(--cream-card); padding: 34px 30px 30px; text-decoration: none; display: flex;
  flex-direction: column; min-height: 268px; position: relative; isolation: isolate;
  transition: color .45s var(--wx-ease);
}
.svc__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--wx-ease);
}
.svc__card:hover::before { transform: scaleY(1); }
.svc__card:hover { color: var(--cream); }
.svc__card:hover .svc__no { color: var(--gold-lift); }
.svc__card:hover .svc__card-p { color: var(--muted-dark); }
.svc__card:hover .svc__go { color: var(--gold-lift); border-color: #ffffff3d; }
/* The featured card breaks the grid — two columns wide, on purpose.
   It switches to its own grid so the body and the inclusions list sit side by
   side and the "details" rule still spans the full width underneath. */
.svc__side { display: none; }
@media (min-width: 1060px) {
  .svc__card--wide {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    grid-template-rows: 1fr auto;
    column-gap: 52px;
    padding-right: 40px;
  }
  .svc__card--wide .svc__body { grid-area: 1 / 1; }
  .svc__card--wide .svc__side { grid-area: 1 / 2; display: block; align-self: center; }
  .svc__card--wide .svc__go { grid-area: 2 / 1 / 3 / -1; }
  .svc__card--wide h3 { font-size: clamp(27px, 2.5vw, 33px); }
  .svc__card--wide .svc__card-p { max-width: 42ch; font-size: 16px; }
}
/* Timeline note on the standard cards — they sit in a row sized by the tall
   featured card, so without it they read as half-empty. */
.svc__meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 0;
  padding-top: 14px; border-top: 1px dotted var(--rule); max-width: 34ch;
  transition: color .45s var(--wx-ease), border-color .45s var(--wx-ease);
}
.svc__card:hover .svc__meta { color: var(--gold-lift); border-color: #ffffff26; }

.svc__side dl { margin: 0; display: grid; gap: 0; }
.svc__side .row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px dotted var(--rule);
  font-size: 14px; color: var(--muted);
  transition: color .45s var(--wx-ease), border-color .45s var(--wx-ease);
}
.svc__side .row:last-child { border-bottom: 0; }
.svc__side .row::before { content: "—"; color: var(--gold); flex: none; }
.svc__card:hover .svc__side .row { color: var(--muted-dark); border-color: #ffffff26; }
.svc__no { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--gold); margin-bottom: 18px; transition: color .45s var(--wx-ease); }
.svc__card h3 { font-size: 23px; letter-spacing: -.018em; margin-bottom: 11px; }
.svc__card-p { font-size: 15px; color: var(--muted); margin: 0 0 20px; line-height: 1.55; transition: color .45s var(--wx-ease); }
.svc__go {
  margin-top: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); display: inline-flex; align-items: center; gap: 9px; padding-top: 16px;
  border-top: 1px solid var(--rule); width: 100%; transition: color .45s var(--wx-ease), border-color .45s var(--wx-ease);
}
.svc__card:hover .svc__go .arr { transform: translateX(5px); }
.svc__go .arr { transition: transform .38s var(--wx-ease); }
.svc__body { flex: 1; }

/* ---------- process ---------- */
.steps { display: grid; gap: 0; }
.step {
  display: grid; gap: 14px 30px; padding-block: 30px; border-top: 1px solid var(--rule);
  align-items: start;
}
.dark .step { border-color: var(--rule-dark); }
@media (min-width: 860px) { .step { grid-template-columns: 90px 1fr 1.1fr; align-items: baseline; } }
.step:last-child { border-bottom: 1px solid var(--rule); }
.dark .step:last-child { border-color: var(--rule-dark); }
.step__n {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -.05em; line-height: .82; color: var(--gold);
}
.step h3 { font-size: clamp(21px, 2.1vw, 27px); letter-spacing: -.02em; }
.step p { margin: 0; color: var(--muted); font-size: 15.5px; }
.dark .step p { color: var(--muted-dark); }

/* ---------- past work ---------- */
.work { display: grid; gap: clamp(18px, 2.4vw, 30px); }
@media (min-width: 900px) { .work { grid-template-columns: repeat(6, 1fr); } }
.case { text-decoration: none; display: block; position: relative; }
/* deliberately uneven spans — a real editor's grid, not a 3-up template */
@media (min-width: 900px) {
  .case--a { grid-column: span 4; }
  .case--b { grid-column: span 2; }
  .case--c { grid-column: span 2; }
  .case--d { grid-column: span 4; }
}
.case .shot { aspect-ratio: 16 / 10; border-radius: 3px; }
.case--b .shot, .case--c .shot { aspect-ratio: 4 / 5; }
.case .shot img { transition: transform 1.1s var(--wx-ease); }
.case:hover .shot img { transform: scale(1.045); }
.case__meta { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding-top: 15px; }
.case__meta h3 { font-size: 19px; letter-spacing: -.015em; }
.case__meta span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.case__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--rule); border-radius: 999px; padding: 4px 10px; color: var(--muted);
}
.dark .tag { border-color: var(--rule-dark); color: var(--muted-dark); }
.case__result {
  position: absolute; top: 14px; left: 14px; background: var(--gold); color: var(--ink);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: 6px 11px; border-radius: 999px;
}

/* Placeholder marker. Home Ready has no public photo library yet, so every
   image on this build is stand-in imagery and says so. Remove the class (or
   add .no-ph to body) once real job photography is dropped in. */
.is-placeholder { position: relative; }
.is-placeholder::before {
  content: "PLACEHOLDER IMAGE"; position: absolute; z-index: 3; bottom: 10px; right: 10px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em;
  background: #13180ee0; color: var(--gold-lift); padding: 5px 9px; border-radius: 3px;
  pointer-events: none;
}
.compare-wrap .is-placeholder::before {
  content: "PLACEHOLDER — awaiting real before / after photography";
  top: 12px; left: 12px; right: auto; bottom: auto; font-size: 10px;
  border: 1px solid var(--gold); letter-spacing: .13em;
}
/* the duotone that unifies every other photo, applied to the slider too */
.compare-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, #13180e2e, #13180e0d 45%, #13180e4d);
  mix-blend-mode: multiply;
}
body.no-ph .is-placeholder::before { display: none; }

/* ---------- before / after ---------- */
.compare-wrap { position: relative; border-radius: 3px; overflow: hidden; background: var(--ink-2); }
.compare-wrap [data-wx="compare"] { aspect-ratio: 16 / 10; }
@media (max-width: 640px) { .compare-wrap [data-wx="compare"] { aspect-ratio: 4 / 3; } }
.compare-legend {
  display: flex; justify-content: space-between; padding-top: 13px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.dark .compare-legend { color: var(--muted-dark); }

/* ---------- calculator ---------- */
.calc { display: grid; gap: 0; border: 1px solid var(--rule-dark); border-radius: 3px; overflow: hidden; }
@media (min-width: 940px) { .calc { grid-template-columns: 1.08fr .92fr; } }
.calc__in { background: var(--ink-3); padding: clamp(26px, 3.4vw, 42px); }
.calc__out { background: var(--ink); padding: clamp(26px, 3.4vw, 42px); display: flex; flex-direction: column; }
.field { margin-bottom: 24px; }
.field > label, .field > .flabel {
  display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-lift); margin-bottom: 11px;
}
.field__hint { font-size: 13px; color: var(--muted-dark); margin: 9px 0 0; line-height: 1.45; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: block; border: 1px solid #ffffff2e; border-radius: 999px; padding: 9px 16px;
  font-size: 14px; color: var(--cream-warm); cursor: pointer;
  transition: background .28s var(--wx-ease), color .28s var(--wx-ease), border-color .28s var(--wx-ease);
}
.chip input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--gold-lift); outline-offset: 2px; }
.chip:hover span { border-color: var(--gold-lift); }
.range { width: 100%; accent-color: var(--gold); margin: 6px 0 0; }
.range-val { font-family: var(--font-mono); font-size: 26px; color: var(--cream); letter-spacing: -.02em; }
.range-val small { font-size: 13px; color: var(--muted-dark); letter-spacing: .1em; }
.calc__figure {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.6vw, 46px);
  letter-spacing: -.04em; line-height: 1.08; color: var(--cream); margin: 6px 0 6px;
  text-wrap: balance;
}
.calc__figure em { font-style: normal; color: var(--gold-lift); }
.calc__band { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); }
.calc__bars { margin: 26px 0; display: grid; gap: 14px; }
.bar__top { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--muted-dark); margin-bottom: 6px; }
.bar__top b { color: var(--cream); font-family: var(--font-mono); font-size: 13px; }
.bar__track { height: 7px; background: #ffffff1a; border-radius: 999px; overflow: hidden; }
.bar__fill { height: 100%; background: var(--gold); border-radius: 999px; width: 0; transition: width .7s var(--wx-ease); }
.bar__fill--alt { background: #8a8f76; }
.calc__verdict {
  margin-top: auto; padding-top: 22px; border-top: 1px solid var(--rule-dark);
  font-size: 15px; color: var(--cream-warm); line-height: 1.55;
}
.calc__verdict b { color: var(--gold-lift); }
.calc__disc { font-size: 12.5px; color: #ffffff6b; margin: 14px 0 0; line-height: 1.5; }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.form__row { display: grid; gap: 16px; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.inp {
  width: 100%; background: var(--cream-card); border: 1px solid var(--rule); border-radius: 3px;
  padding: 14px 16px; font-size: 16px; color: var(--ink);
  transition: border-color .25s var(--wx-ease), box-shadow .25s var(--wx-ease);
}
.inp::placeholder { color: #9a9c8c; }
.inp:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px #cf863426; }
textarea.inp { min-height: 118px; resize: vertical; }
.dark .inp { background: #ffffff0f; border-color: #ffffff2e; color: var(--cream); }
.dark .inp::placeholder { color: #ffffff5c; }
.form__legal { font-size: 12.5px; color: var(--muted); margin: 0; }
.dark .form__legal { color: #ffffff70; }
.form__msg { font-size: 14.5px; padding: 13px 16px; border-radius: 3px; display: none; }
/* Inherit the section's own text colour — every lead form sits on .cta or .dark
   (ink background, cream text) except /book/, which is a light section. Pinning
   a colour here put dark ink on the dark panel and made the success message
   unreadable. .form__msg.err has always inherited, which is why it was fine. */
.form__msg.ok { display: block; background: #cf863424; border: 1px solid var(--gold); }
.form__msg.err { display: block; background: #e4001418; border: 1px solid #e40014; }

/* honeypot */
.hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; }

/* ---------- reviews ---------- */
.revs { display: grid; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 760px)  { .revs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .revs { grid-template-columns: repeat(3, 1fr); } }
.rev { background: var(--cream-card); border: 1px solid var(--rule); border-radius: 3px; padding: 28px 26px; display: flex; flex-direction: column; }
.rev--hero { grid-column: 1 / -1; background: var(--ink); border-color: transparent; color: var(--cream-warm); padding: clamp(30px, 4vw, 52px); }
.rev--hero p { font-family: var(--font-editorial); font-style: italic; font-size: clamp(21px, 2.6vw, 32px); line-height: 1.34; color: var(--cream); max-width: 26ch; }
/* drop cap — an old editorial move AI sites never bother with */
.rev--hero p::first-letter { float: left; font-size: 3.1em; line-height: .78; padding: .07em .1em 0 0; color: var(--gold-lift); }
.rev__stars { color: var(--gold); letter-spacing: .18em; font-size: 13px; margin-bottom: 14px; }
.rev p { font-size: 15.5px; line-height: 1.6; margin: 0 0 20px; }
.rev__by { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 13.5px; }
.rev--hero .rev__by { border-color: var(--rule-dark); }
.rev__by b { display: block; font-weight: 600; }
.rev__by span { color: var(--muted); }
.rev--hero .rev__by span { color: var(--muted-dark); }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; }
.faq__item { border-bottom: 1px solid var(--rule); }
.dark .faq__item { border-color: var(--rule-dark); }
.faq__q {
  width: 100%; background: none; border: 0; text-align: left; cursor: pointer;
  padding: 24px 46px 24px 0; position: relative; font-family: var(--font-display);
  font-weight: 600; font-size: clamp(17px, 1.7vw, 21px); letter-spacing: -.015em; line-height: 1.32;
}
.faq__q::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 13px; height: 1.5px;
  background: var(--gold); transform: translateY(-50%);
}
.faq__q::before {
  content: ""; position: absolute; right: 11.75px; top: 50%; width: 1.5px; height: 13px;
  background: var(--gold); transform: translateY(-50%) scaleY(1); transform-origin: center;
  transition: transform .4s var(--wx-ease);
}
.faq__q[aria-expanded="true"]::before { transform: translateY(-50%) scaleY(0); }
.faq__a { overflow: hidden; height: 0; transition: height .48s var(--wx-ease); }
.faq__a > div { padding: 0 52px 26px 0; color: var(--muted); font-size: 15.5px; }
.dark .faq__a > div { color: var(--muted-dark); }

/* ---------- areas ---------- */
.areas { display: flex; flex-wrap: wrap; gap: 9px; }
.area {
  text-decoration: none; border: 1px solid var(--rule); border-radius: 999px; padding: 9px 17px;
  font-size: 14.5px; transition: background .3s var(--wx-ease), color .3s var(--wx-ease), border-color .3s var(--wx-ease);
}
.dark .area { border-color: var(--rule-dark); }
.area:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* ---------- CTA band ---------- */
.cta { background: var(--ink); color: var(--cream-warm); position: relative; overflow: hidden; }
.cta__grid { display: grid; gap: clamp(30px, 4vw, 56px); }
@media (min-width: 940px) { .cta__grid { grid-template-columns: .95fr 1.05fr; align-items: start; } }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--muted-dark); padding-block: clamp(50px, 6vw, 82px) 30px; border-top: 1px solid var(--rule-dark); }
.foot__grid { display: grid; gap: 38px; }
@media (min-width: 760px)  { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1060px) { .foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }
.foot h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .19em; text-transform: uppercase; color: var(--gold-lift); margin-bottom: 17px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a { text-decoration: none; font-size: 14.5px; }
.foot a:hover { color: var(--cream); }
/* The footer carries the full lockup (760x227), not the square mark — 46px wide
   squashed it to an unreadable 46x14. */
.foot__brand img { width: 190px; height: auto; margin-bottom: 16px; }
@media (max-width: 480px) { .foot__brand img { width: 164px; } }
.foot__bot {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #ffffff59;
}

/* ---------- sticky mobile action bar ---------- */
.mobar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 850; display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: var(--ink); border-top: 1px solid var(--rule-dark);
  transform: translateY(102%); transition: transform .45s var(--wx-ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobar.is-on { transform: translateY(0); }
@media (min-width: 900px) { .mobar { display: none; } }
.mobar a {
  padding: 13px 6px; text-align: center; text-decoration: none; color: var(--cream-warm);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  border-right: 1px solid var(--rule-dark); display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.mobar a:last-child { border-right: 0; }
.mobar a.is-primary { background: var(--gold); color: var(--ink); font-weight: 600; }
.mobar svg { width: 17px; height: 17px; }
@media (max-width: 899px) { body { padding-bottom: 62px; } }

/* ---------- misc page furniture ---------- */
.crumbs { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-block: 20px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.crumbs span { color: var(--gold); margin-inline: 8px; }
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(25px, 2.6vw, 33px); letter-spacing: -.022em; margin: 46px 0 16px; }
.prose h3 { font-size: clamp(19px, 1.8vw, 22px); letter-spacing: -.015em; margin: 32px 0 12px; }
.prose ul { padding-left: 20px; margin: 0 0 1.1em; }
.prose li { margin-bottom: 8px; }
.prose strong { font-weight: 600; }

/* two-column local-market fact table */
.facts { border-top: 1px solid var(--rule); margin-top: 26px; }
.facts .row { display: grid; gap: 4px 24px; padding-block: 15px; border-bottom: 1px solid var(--rule); }
@media (min-width: 640px) { .facts .row { grid-template-columns: 210px 1fr; align-items: baseline; } }
.facts dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-size: 15.5px; }

/* reveal fallback so content is never trapped if JS or GSAP fails */
.no-js [data-wx], .wx-failed [data-wx] { opacity: 1 !important; transform: none !important; }