/* ==========================================================================
   PHS Renovations — Evergreen
   site.css — design tokens + everything shared across more than one page
   (nav, footer, buttons, section shell, credentials bar, service grid,
    process grid, CTA card, contact desk + form, reveal animations)
   ========================================================================== */

:root {
  /* neutrals */
  --ivory:    #ffffff;
  --ivory-2:  #f3f4f6;
  --paper:    #ffffff;
  --ink:      #1a211c;
  --ink-2:    #3c453d;
  --muted:    #6f7670;
  --faint:    #9aa099;
  --line:     #e7e8eb;
  --line-2:   #d9dbdf;
  /* warm panel tint — DESIGN-LANGUAGE.md's ivory-2. --ivory-2 above is the
     older cool grey and is still used by the service/gallery placeholders;
     new warm-evidence surfaces use this one. */
  --band:     #f5f5f2;

  /* brand — per design-guidelines.txt
     NOTE: these were named --forest / --ochre in the original single-file
     mock, left over from the pre-brand-palette draft. Values are unchanged;
     only the names were corrected. */
  --burgundy:      #8A2F2E;   /* Secondary — Burgundy Red   */
  --burgundy-2:    #6e2423;
  --burgundy-soft: #f4e2e3;
  --gold:          #CA942A;   /* Primary — Warm Gold        */
  --gold-2:        #b07f1f;
  --gold-soft:     #efe3cd;
  --charcoal:      #4D4D4D;   /* Secondary 2 — Charcoal Grey */

  /* burgundy-on-dark text tints */
  --on-dark:      #f4e6e6;
  --on-dark-2:    #d9c6c7;
  --on-dark-3:    #c2989e;
  --on-dark-4:    #b58d92;

  --disp: "Fraunces", Georgia, serif;
  --ui:   "Hanken Grotesk", system-ui, sans-serif;
  --shadow-card: 0 30px 60px -34px rgba(26, 33, 28, .42), 0 2px 8px rgba(26, 33, 28, .05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  font-family: var(--ui);
  background: var(--ivory);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.5;
}

/* subtle paper grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .03;
  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='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 36px; }
a { color: inherit; }
img { max-width: 100%; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold-2);
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); }

/* skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--burgundy); color: var(--paper);
  padding: 12px 20px; border-radius: 0 0 10px 0; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

/* ============ NAV ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 92px; max-width: 1360px; padding-left: 28px; padding-right: 28px; }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--ink); }
.brand .mark {
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--burgundy); color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--disp); font-weight: 500; font-size: 18px; letter-spacing: .5px;
  box-shadow: 0 8px 18px -8px rgba(138, 47, 46, .7);
  position: relative; overflow: hidden; flex: none;
}
.brand .mark::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .18), transparent 55%);
}
.brand b {
  font-family: var(--disp); font-size: 20px; font-weight: 500;
  letter-spacing: -.2px; display: block; line-height: 1;
}
.brand .loc {
  display: block;
  font-size: 11px; letter-spacing: .6px; color: var(--muted);
  margin-top: 4px; text-transform: uppercase;
}
/* the full PHS lockup (icon + wordmark + tagline) used in the nav */
.brand-logo { height: 68px; width: auto; display: block; }
@media (max-width: 560px) {
  .nav .wrap { height: 76px; }
  .brand-logo { height: 52px; }
}
.menu { display: flex; gap: 32px; }
.menu a {
  text-decoration: none; color: var(--ink-2); font-size: 15px; font-weight: 500;
  transition: color .2s; position: relative;
}
.menu a::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  height: 1.5px; width: 100%; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .28s;
}
.menu a:hover { color: var(--ink); }
.menu a:hover::after,
.menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a[aria-current="page"] { color: var(--ink); }

.nav-cta {
  background: var(--burgundy); color: var(--paper); text-decoration: none;
  font-weight: 600; font-size: 14.5px; padding: 12px 22px; border-radius: 100px;
  transition: background .2s, transform .2s;
  box-shadow: 0 10px 22px -12px rgba(138, 47, 46, .8);
  white-space: nowrap;
}
.nav-cta:hover { background: var(--burgundy-2); transform: translateY(-1px); }

/* mobile nav — not present in the original single-file mock; added because a
   14-page site needs a working menu under 980px */
.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line-2);
  background: var(--paper); border-radius: 12px; cursor: pointer;
  align-items: center; justify-content: center; color: var(--ink); flex: none;
}
.nav-toggle svg { display: block; }
.nav-toggle .x { display: none; }
.nav-toggle[aria-expanded="true"] .x { display: block; }
.nav-toggle[aria-expanded="true"] .bars { display: none; }

.mobile-menu {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 12px 0 22px;
}
.mobile-menu.open { display: block; }
/* the mobile menu wraps its content in .wrap too, which would otherwise inherit
   the top bar's `.nav .wrap` (display:flex; height:92px; space-between) and crush
   the list, CTA and phone into one squished 92px-tall horizontal strip. Reset it
   to a normal vertical stack. */
.mobile-menu .wrap { display: block; height: auto; }
.mobile-menu ul { list-style: none; }
.mobile-menu a {
  display: block; padding: 15px 0; text-decoration: none;
  font-family: var(--disp); font-size: 1.2rem; font-weight: 500;
  border-bottom: 1px solid var(--line); color: var(--ink);
}
.mobile-menu .m-cta {
  display: block; margin-top: 20px; text-align: center;
  background: var(--burgundy); color: var(--paper); border: 0;
  font-family: var(--ui); font-size: 15px; font-weight: 600;
  padding: 15px; border-radius: 100px;
}
.mobile-menu .m-phone {
  display: block; margin-top: 12px; text-align: center; border: 0;
  font-family: var(--ui); font-size: 15px; color: var(--ink-2);
}
@media (max-width: 980px) {
  .menu { display: none; }
  .nav .nav-cta { display: none; }
  .nav-toggle { display: flex; }
}

/* ---------- services mega dropdown ----------
   Desktop-only (lives inside .menu, which is hidden < 980px). Opens on hover,
   on keyboard focus (:focus-within), and on click (.open, set by site.js). A
   2-column board of the eight services, each a thumbnail + name. Photos are
   PLACEHOLDERS (ship-gated in the markup); the fence tile is a drawn gold icon,
   not a stand-in photo, because no real/stock fence shot exists yet. */
.nav-svc { position: relative; display: inline-flex; align-items: center; }
.nav-svc-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ui); font-size: 15px; font-weight: 500; line-height: 1;
  color: var(--ink-2); background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; position: relative; transition: color .2s;
}
.nav-svc-trigger .chev { display: block; color: var(--faint); transition: transform .25s ease, color .2s; }
.nav-svc-trigger::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  height: 1.5px; width: 100%; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .28s;
}
.nav-svc:hover .nav-svc-trigger,
.nav-svc.open .nav-svc-trigger,
.nav-svc:focus-within .nav-svc-trigger { color: var(--ink); }
.nav-svc:hover .nav-svc-trigger::after,
.nav-svc:focus-within .nav-svc-trigger::after,
.nav-svc.open .nav-svc-trigger::after,
.nav-svc[data-current] .nav-svc-trigger::after { transform: scaleX(1); }
.nav-svc:hover .chev,
.nav-svc:focus-within .chev,
.nav-svc.open .chev { transform: rotate(180deg); color: var(--ink-2); }

.mega {
  position: absolute; top: calc(100% + 34px); left: 50%;
  width: min(560px, 90vw);
  transform: translateX(-50%) translateY(8px) scale(.985);
  transform-origin: top center;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow-card);
  padding: 12px; z-index: 200;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .22s cubic-bezier(.2, .8, .2, 1), visibility .2s;
}
/* invisible bridge so the pointer keeps .nav-svc:hover while crossing the gap */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -34px; height: 34px; }
.nav-svc:hover .mega,
.nav-svc:focus-within .mega,
.nav-svc.open .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.svc-item {
  display: flex; align-items: center; gap: 13px;
  padding: 9px 11px; border-radius: 12px; text-decoration: none;
  transition: background .18s;
}
.svc-item:hover { background: var(--band); }
.svc-thumb {
  width: 52px; height: 52px; flex: none; border-radius: 10px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(26, 33, 28, .07);
  display: grid; place-items: center; background: var(--band);
}
.svc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-thumb.icon { color: var(--gold); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-soft); }
.svc-name {
  font-family: var(--disp); font-weight: 500; font-size: 1.04rem;
  color: var(--ink); line-height: 1.14; letter-spacing: -.1px;
}
.svc-arrow { margin-left: auto; flex: none; color: var(--gold); opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s; }
.svc-item:hover .svc-arrow { opacity: 1; transform: none; }

.mega-all {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 8px; padding: 12px; border-top: 1px solid var(--line);
  font-family: var(--ui); font-weight: 600; font-size: 14px;
  color: var(--burgundy); text-decoration: none;
}
.mega-all:hover { color: var(--burgundy-2); }
.mega-all svg { transition: transform .2s; }
.mega-all:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .mega { transition: opacity .15s ease, visibility .15s; transform: translateX(-50%); }
  .nav-svc:hover .mega,
  .nav-svc:focus-within .mega,
  .nav-svc.open .mega { transform: translateX(-50%); }
  .nav-svc-trigger .chev, .svc-arrow, .mega-all svg { transition: none; }
}

/* ============ SECTION SHELL ============ */
section.block { padding: 96px 0; }
.sec-head { max-width: 680px; }
.sec-head h2 {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.05;
  letter-spacing: -.01em; margin-top: 16px;
}
.sec-head h2 .it { font-style: italic; color: var(--burgundy); }
.sec-head p { color: var(--ink-2); font-size: 1.1rem; line-height: 1.6; margin-top: 18px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }

/* dark (burgundy) section variant */
.on-burgundy { background: var(--burgundy); color: var(--on-dark); }
.on-burgundy .sec-head h2 { color: var(--paper); }
.on-burgundy .sec-head h2 .it { color: var(--gold-soft); }
.on-burgundy .sec-head p { color: var(--on-dark-2); }
.on-burgundy .eyebrow { color: var(--gold-soft); }
.on-burgundy .eyebrow::before { background: var(--gold-soft); }

/* ============ BUTTONS ============ */
.btn-pri {
  background: var(--gold); color: #2a1d05; text-decoration: none;
  font-weight: 700; font-size: 15.5px; padding: 16px 30px; border-radius: 100px;
  transition: transform .2s, box-shadow .2s, background .2s;
  box-shadow: 0 14px 30px -14px rgba(202, 148, 42, .9);
  display: inline-block; border: 0; cursor: pointer; font-family: var(--ui);
}
.btn-pri:hover {
  transform: translateY(-2px); background: var(--gold-2);
  box-shadow: 0 18px 36px -14px rgba(202, 148, 42, .95);
}
.btn-sec {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15.5px;
  padding: 15px 24px; border: 1.5px solid var(--line-2); background: var(--paper);
  border-radius: 100px; display: inline-flex; align-items: center; gap: 10px;
  transition: border-color .2s, transform .2s;
}
.btn-sec:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-sec svg { color: var(--burgundy); }
.cta-row { display: flex; align-items: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; }

/* ============ CREDENTIALS BAR ============ */
.creds { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.creds .wrap { display: flex; align-items: center; gap: 34px; padding: 26px 36px; flex-wrap: wrap; }
.creds .lbl {
  font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); font-weight: 600; max-width: 130px; line-height: 1.45;
}
.creds .items { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; flex: 1; }
.creds .items span {
  font-family: var(--disp); font-size: 18px; font-weight: 500; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 9px; letter-spacing: -.01em;
}
.creds .items span svg { color: var(--gold); flex: none; }

/* ============ TRUST BAR ============ ------------------------------------
   Replaces .creds. Six issued badge marks in one row, height-normalised and
   desaturated so no single logo dominates. Currently pointed at placeholder
   SVGs in img/badges/ cut to each body's real aspect ratio — swapping in the
   official assets is a file drop, no markup or CSS change.
   .creds is left in place until this is rolled out to the other 13 pages.
   ------------------------------------------------------------------------ */
.trustbar {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  --logo-h: 32px;
}
.trustbar .inner {
  max-width: 1280px; margin: 0 auto; padding: 22px 36px;
  display: flex; align-items: center; gap: 32px;
}
.trustbar .lbl {
  flex: none; align-self: stretch; display: flex; align-items: center;
  padding-right: 32px; border-right: 1px solid var(--line);
  font-size: 10.5px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--faint); line-height: 1.7;
}
.trustbar .marks {
  flex: 1; min-width: 0; display: flex; align-items: center;
  justify-content: space-between; gap: 20px 34px; flex-wrap: wrap;
}
.trustbar img {
  display: block; height: var(--logo-h); width: auto;
  filter: grayscale(1); opacity: .58;
  transition: filter .25s, opacity .25s;
}
/* square badges read weak against wordmarks at the same height */
.trustbar img.is-badge { height: calc(var(--logo-h) * 1.34); }
.trustbar img:hover { filter: none; opacity: 1; }

@media (max-width: 1080px) {
  .trustbar .marks { justify-content: flex-start; gap: 22px 30px; }
}
@media (max-width: 760px) {
  .trustbar { --logo-h: 26px; }
  .trustbar .inner { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px 24px; }
  .trustbar .lbl { border-right: 0; padding-right: 0; align-self: auto; }
  /* grid, not wrap — flex-wrap left a hole in the middle of the second row */
  .trustbar .marks {
    display: grid; grid-template-columns: repeat(3, 1fr);
    justify-items: center; align-items: center;
    width: 100%; gap: 22px 18px;
  }
}
/* 3-up holds down to ~360px (widest mark is 3:1 at 26px = 78px); only the
   smallest phones drop to 2-up */
@media (max-width: 360px) {
  .trustbar .marks { grid-template-columns: repeat(2, 1fr); }
}

/* ============ SERVICE GRID ============ */
.svc-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc {
  position: relative; background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  transition: transform .3s, box-shadow .3s, border-color .3s;
  display: flex; flex-direction: column;
}
.svc:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: var(--line-2); }
.svc .ph { aspect-ratio: 16/10; overflow: hidden; background: var(--ivory-2); }
.svc .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.svc:hover .ph img { transform: scale(1.06); }
.svc .body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.svc h3 { font-family: var(--disp); font-weight: 500; font-size: 1.45rem; letter-spacing: -.01em; }
.svc p { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin-top: 8px; flex: 1; }
.svc .facts { display: flex; gap: 22px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.svc .facts .f .k { font-size: 10.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--faint); }
.svc .facts .f .v {
  font-family: var(--disp); font-size: 17px; color: var(--burgundy);
  font-weight: 500; margin-top: 3px;
}
.svc .more {
  margin-top: 18px; font-size: 13.5px; font-weight: 600; color: var(--gold-2);
  display: inline-flex; align-items: center; gap: 7px; transition: gap .2s; text-decoration: none;
}
.svc:hover .more { gap: 11px; }
.svc.wide { grid-column: span 3; display: grid; grid-template-columns: 1.1fr 1fr; }
.svc.wide .ph { aspect-ratio: auto; }
.svc.wide .body { justify-content: center; padding: 36px 40px; }
@media (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc.wide { grid-column: span 2; grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc.wide { grid-column: span 1; }
}

/* ============ PROCESS ============ */
.process { background: var(--paper); border-top: 1px solid var(--line); }
.proc-grid {
  margin-top: 52px; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; position: relative;
}
.proc-grid::before {
  content: ""; position: absolute; top: 26px; left: 8%; right: 8%; height: 1px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 16px);
}
.step { padding: 0 22px; position: relative; }
.step .num {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--ivory); border: 1.5px solid var(--gold); color: var(--burgundy);
  display: grid; place-items: center;
  font-family: var(--disp); font-size: 20px; font-weight: 500;
  position: relative; z-index: 1;
}
.step h4 { font-family: var(--disp); font-weight: 500; font-size: 1.3rem; margin-top: 22px; }
.step p { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin-top: 9px; }

.proc-feature {
  margin-top: 56px; background: var(--burgundy); border-radius: 20px;
  padding: 40px 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  align-items: center; color: var(--paper); overflow: hidden; position: relative;
}
.proc-feature .eyebrow { color: var(--gold-soft); }
.proc-feature .eyebrow::before { background: var(--gold-soft); }
.proc-feature h3 {
  font-family: var(--disp); font-weight: 400; font-size: 1.9rem;
  line-height: 1.15; margin-top: 14px;
}
.proc-feature h3 .it { font-style: italic; color: var(--gold-soft); }
.proc-feature p { color: var(--on-dark-2); font-size: 1.02rem; line-height: 1.6; margin-top: 16px; }
.proc-feature .pf-visual {
  aspect-ratio: 4/3; border-radius: 12px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); position: relative;
}
.proc-feature .pf-visual img { width: 100%; height: 100%; object-fit: cover; }
.pf-tag {
  position: absolute; left: 14px; bottom: 14px; font-size: 11.5px; font-weight: 600;
  color: #fff; background: rgba(20, 28, 22, .5); backdrop-filter: blur(8px);
  padding: 7px 13px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, .2);
  display: inline-flex; align-items: center; gap: 8px;
}
@media (max-width: 900px) {
  .proc-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .proc-grid::before { display: none; }
  .proc-feature { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .proc-grid { grid-template-columns: 1fr; } }

/* ============ CTA ============ */
.cta { padding: 100px 0; }
.cta-card {
  background: var(--burgundy); border-radius: 26px; padding: 64px 56px;
  color: var(--paper); position: relative; overflow: hidden;
}
.cta-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 88% 10%, rgba(202, 148, 42, .22), transparent 60%);
}
.cta-card .inner {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center;
}
.cta-card h2 {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.05;
}
.cta-card h2 .it { font-style: italic; color: var(--gold-soft); }
.cta-card p { color: var(--on-dark-2); font-size: 1.1rem; line-height: 1.6; margin-top: 16px; max-width: 440px; }
.cta-actions { display: flex; flex-direction: column; gap: 14px; }
.cta-actions .btn-pri { text-align: center; }
.cta-phone {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px; text-decoration: none; color: var(--paper); transition: background .2s;
}
.cta-phone:hover { background: rgba(255, 255, 255, .12); }
.cta-phone .ico {
  width: 40px; height: 40px; border-radius: 11px; background: var(--gold);
  color: #2a1d05; display: grid; place-items: center; flex: none;
}
.cta-phone .k { font-size: 12px; color: var(--on-dark-3); letter-spacing: .5px; }
.cta-phone .v { font-family: var(--disp); font-size: 19px; }
@media (max-width: 820px) {
  .cta-card .inner { grid-template-columns: 1fr; }
  .cta-card { padding: 44px 32px; }
}

/* ============ CONTACT DESK ============ -----------------------------------
   One contained object: the ask on the right, its context on the left, inside
   a single ivory panel. Used on both the home page and contact.html — the two
   differ only in what fills the left column, and that difference is the whole
   point of the component:

   · contact.html — a page hero already carries the headline, so the section
     gets a LABEL, not a header, and the left column is the three things people
     actually worry about ("what happens after you send this").
   · index.html   — no page hero, so the section's header lives in the left
     column and there are NO margin notes: everything they would say is already
     on the home page (the process grid, the values, the trust bar). Repeating
     it here is the exact mistake this component was built to remove.

   Replaced .contact-grid / .contact-aside / .c-card, and made the separate
   "After you hit send" process block redundant on contact.html.
   -------------------------------------------------------------------------- */

.deskwrap { padding: 0 0 92px; }
/* when nothing precedes it — no page hero above — it needs its own top air */
.deskwrap.standalone { padding: 96px 0 100px; }
.desk {
  background: var(--band); border: 1px solid var(--line); border-radius: 24px;
  padding: 42px 46px 44px;
}
.desk-main {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 56px; align-items: start;
}
/* Placement is explicit so each page can put the element that matters most on
   that page first in the DOM: contact.html leads with the form (a phone must
   not stack three paragraphs above the ask), home leads with the header. Both
   land in the same visual columns. */
.desk-main .form-card  { grid-column: 2; grid-row: 1; }
.desk-main .notes      { grid-column: 1; grid-row: 1; }
/* stretch, not start: the intro column has to fill the row height for the
   bottom-anchored .direct lines to finish level with the foot of the form */
.desk-main .desk-intro {
  grid-column: 1; grid-row: 1; align-self: stretch;
  display: flex; flex-direction: column;
}

/* — left: the section header. h2 on the home page (a hero sits above it there);
   h1 on contact.html, where the desk itself is the page's opening object. */
.desk-intro h2,
.desk-intro h1 {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.06;
  letter-spacing: -.01em; margin-top: 16px; max-width: 17ch; text-wrap: balance;
}
.desk-intro h2 .it,
.desk-intro h1 .it { font-style: italic; color: var(--burgundy); }
.desk-intro > p {
  color: var(--ink-2); font-size: 1.06rem; line-height: 1.62;
  margin: 18px 0 34px; max-width: 46ch;
}
.desk-intro > p b { color: var(--ink); font-weight: 600; }

/* direct lines — for the people who will never fill in a form. Bottom-anchored
   so they finish level with the foot of the form card. */
.direct { margin-top: auto; border-top: 1px solid var(--line-2); max-width: 430px; }
.direct a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 15px 2px; border-bottom: 1px solid var(--line-2);
  text-decoration: none; color: var(--ink);
  transition: color .2s, border-color .2s;
}
.direct a:hover { color: var(--burgundy); border-bottom-color: var(--faint); }
.direct a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.direct .k {
  flex: none; width: 84px; font-size: 10.5px; font-weight: 600;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold-2);
}
.direct .v {
  font-family: var(--disp); font-size: 1.14rem; font-weight: 500;
  letter-spacing: -.01em; overflow-wrap: anywhere;
}

/* — left, home desk: reassurance checklist. Fills the intro column between the
     lede and the bottom-pinned .direct lines; each row is a verified fact with a
     gold check in a soft-gold disc (the section's one colour pop). Sits above the
     auto-margined .direct, so .direct still finishes level with the form's foot.
     New class — home variant only; contact.html leads with .notes instead. */
.desk-list {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; gap: 15px; max-width: 430px;
}
.desk-list li { display: flex; align-items: flex-start; gap: 13px; }
.desk-list .ck {
  flex: none; width: 24px; height: 24px; margin-top: 1px;
  border-radius: 50%; background: var(--gold-soft);
  display: grid; place-items: center; color: var(--gold-2);
}
.desk-list .ck svg { width: 13px; height: 13px; }
.desk-list .tx { min-width: 0; }
.desk-list b {
  display: block; font-weight: 600; color: var(--ink);
  font-size: 15.5px; letter-spacing: -.1px; line-height: 1.35;
}
.desk-list .sub {
  display: block; margin-top: 1px; color: var(--muted);
  font-size: 13.5px; line-height: 1.45;
}

/* — left, contact page: margin notes. Narrow measure, hairline-separated,
     marker above the claim because the column is too narrow to set them side
     by side. Labelled by *when* the worry happens, not numbered 1-2-3 —
     numbering belongs to the process page, where the sequence is the
     information. */
.notes-lbl {
  font-size: 10.5px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--gold-2); display: flex; align-items: center; gap: 12px; padding-top: 4px;
}
.notes-lbl::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.note { padding: 22px 0 21px; border-bottom: 1px solid var(--line-2); }
.note:first-of-type { padding-top: 20px; }
.note .when {
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--muted);
}
.note h3 {
  font-family: var(--disp); font-weight: 500; font-size: 1.28rem;
  line-height: 1.26; letter-spacing: -.2px; margin-top: 8px;
}
.note p { margin-top: 8px; font-size: 14.8px; line-height: 1.62; color: var(--ink-2); }
.note p b { color: var(--ink); font-weight: 600; }

/* the notes rail closes on borrowed trust, which keeps its own issued artwork —
   recognizability is the credibility. Inside the rail rather than in a
   panel-wide footer so the column ends level with the form. Deliberately NOT
   used on the home page, where .trustbar already shows these six marks. */
.vouch { padding-top: 22px; }
/* grid, not wrap — flex left an orphan mark on a second row */
.vouch .marks {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start;
  align-items: center; gap: 18px 30px;
}
.vouch .marks img {
  height: 28px; width: auto; filter: grayscale(1); opacity: .55;
  transition: filter .25s, opacity .25s;
}
.vouch .marks img.is-badge { height: 36px; }
.vouch .marks img:hover { filter: none; opacity: 1; }
.vouch .said { margin-top: 16px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.vouch .said b { color: var(--ink-2); font-weight: 600; }

/* — under the desk (contact page only): the direct lines as targets. Two, not
     three: PHS publishes no street address, so a "Visit us" card would be a
     card with nothing in it. */
.reach { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.reach a {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 16px;
  text-decoration: none; color: inherit;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.reach a:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-card); }
.reach a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.reach .ci {
  width: 42px; height: 42px; border-radius: 12px; background: var(--burgundy-soft);
  display: grid; place-items: center; color: var(--burgundy); flex: none;
}
.reach .tx { min-width: 0; }
.reach .k { display: block; font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--faint); }
.reach .v {
  display: block; font-family: var(--disp); font-size: 1.2rem; font-weight: 500;
  margin-top: 4px; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere;
}
.area { margin-top: 18px; font-size: 13.5px; color: var(--muted); }

/* financing reassurance — a simple gold check under the direct contact lines */
.desk-fin {
  display: flex; align-items: center; gap: 9px; margin-top: 16px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.desk-fin svg { color: var(--gold); flex: none; }
.desk-fin span { font-weight: 400; color: var(--muted); }

/* — the ask itself */
.form-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px;
  padding: 34px; box-shadow: var(--shadow-card);
}
.desk .form-card { padding: 30px 32px 32px; }
.form-cap {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 6px 14px; padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid var(--line);
}
.form-cap h2 { font-family: var(--disp); font-weight: 500; font-size: 1.45rem; letter-spacing: -.2px; }
.form-cap span { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .4px; color: var(--ink-2); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--ui); font-size: 15px; color: var(--ink);
  padding: 13px 15px; border: 1.5px solid var(--line-2); border-radius: 11px;
  background: var(--ivory); transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 128px; resize: vertical; }
/* native select chrome clashed with the custom-styled text inputs beside it */
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' stroke='%236f7670' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--burgundy);
  box-shadow: 0 0 0 3px rgba(138, 47, 46, .1);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.desk .field textarea { min-height: 104px; }
.form-card .btn-pri { width: 100%; margin-top: 6px; }
.form-note { font-size: 12.5px; color: var(--muted); margin-top: 14px; text-align: center; line-height: 1.5; }
.desk .form-note { text-align: left; font-size: 13px; margin-top: 16px; }
.desk .form-note b { color: var(--ink-2); font-weight: 600; }

@media (max-width: 1000px) {
  .desk-main { grid-template-columns: 1fr; gap: 34px; }
  /* stacked, in DOM order: contact leads with the ask, home with its header */
  .desk-main .form-card,
  .desk-main .notes,
  .desk-main .desk-intro { grid-column: auto; grid-row: auto; }
  .desk { padding: 32px 30px 34px; }
  /* nothing to bottom-anchor against once the columns stack — the paragraph's
     own 34px bottom margin is the gap */
  .direct { margin-top: 4px; max-width: 100%; }
}
@media (max-width: 620px) {
  .deskwrap { padding-bottom: 68px; }
  .deskwrap.standalone { padding: 64px 0 72px; }
  /* the panel keeps its tint but gives its side padding back to the fields —
     at 390px a card inside a card inside a page is three insets too many */
  .desk { padding: 22px 12px 24px; border-radius: 20px; }
  .desk .form-card { padding: 24px 20px 26px; }
  .desk-main { gap: 28px; }
  /* the email address is the widest unbreakable string on the site — trim the
     chrome and type so it stays on one line rather than hyphenating mid-domain */
  .reach { grid-template-columns: 1fr; gap: 14px; }
  .reach a { padding: 18px; gap: 14px; }
  .reach .ci { width: 38px; height: 38px; }
  .reach .v { font-size: 1rem; }
  .direct .k { width: 62px; }
  .direct .v { font-size: 1rem; }
}
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

/* ============ FOOTER — "the colophon" ============
   A book's colophon closes it by naming who made it, where and when. For a
   family shop that is the honest sign-off: who we are, the city, the year, and
   a direct line to a real person. Everything is scoped under <footer> with new
   .f-* classes, so there are no collisions to guard against.
   Rhythm: colophon (closing line + signature | reach plate) → sitemap → legal.
   Accent transposition: on the burgundy field the emotional beat (normally a
   burgundy word) can't be burgundy-on-burgundy, so the one italic word takes
   gold — gold otherwise stays utilitarian (eyebrow, hairline seam, hovers). */
footer { background: var(--burgundy-2); color: var(--on-dark-2); padding: 0; position: relative; }
/* warm seam: a gold hairline where the white page meets the band */
footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold) 78%, transparent);
  opacity: .55;
}
footer .wrap { padding-top: 76px; padding-bottom: 40px; }

/* ---- colophon: closing line + signature | reach plate ---- */
.f-colophon {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 56px; align-items: start; padding-bottom: 44px;
}
/* the PHS lockup on the dark footer — knocked out to white so it reads on burgundy */
.f-logo { height: 72px; width: auto; display: block; margin-bottom: 22px; filter: brightness(0) invert(1); }
.f-eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 22px;
}
.f-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); opacity: .7; }
.f-close {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.24;
  color: var(--paper); letter-spacing: -.01em; max-width: 20ch;
}
.f-close .it { font-style: italic; color: var(--gold); }
.f-sign {
  margin-top: 22px; font-size: 14.5px; color: var(--on-dark-3);
  display: inline-flex; align-items: center; gap: 10px;
}
.f-sign::before { content: ""; width: 22px; height: 1px; background: var(--on-dark-4); opacity: .6; }
.f-sign b { color: var(--on-dark); font-weight: 500; }

/* the engraved "reach a real person" plate */
.f-plate {
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px;
  padding: 22px 24px 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
}
.f-plate-cap {
  font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.f-tel {
  display: block; text-decoration: none;
  font-family: var(--disp); font-weight: 500; font-size: 1.6rem; letter-spacing: .01em;
  color: var(--paper); line-height: 1.1; transition: color .2s;
}
.f-tel:hover { color: var(--gold); }
.f-plate-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.f-plate-rows a, .f-plate-rows span { text-decoration: none; color: var(--on-dark-2); font-size: 14.5px; }
.f-plate-rows a { transition: color .2s; }
.f-plate-rows a:hover { color: var(--paper); }
.f-plate-socials {
  display: flex; gap: 10px; margin-top: 15px;
  padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1);
}
.f-plate-socials a {
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .16);
  display: grid; place-items: center; color: var(--on-dark-2);
  transition: background .2s, color .2s, border-color .2s;
}
.f-plate-socials a:hover { background: var(--gold); color: #2a1d05; border-color: var(--gold); }

/* ---- sitemap ---- */
.f-map {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr);
  gap: 40px; padding: 40px 0; border-top: 1px solid rgba(255, 255, 255, .1);
}
.f-map h5 {
  font-size: 11.5px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--on-dark-4); font-weight: 600; margin-bottom: 15px;
}
.f-map ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.f-map a {
  text-decoration: none; color: var(--on-dark-2); font-size: 14.5px;
  transition: color .2s; position: relative;
}
.f-map a:hover { color: var(--paper); }
.f-map a:hover::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--gold);
}
/* the last cell restates the promise, quietly — real evidence, not a nav list */
.f-promise { align-self: start; }
.f-promise p { font-size: 14px; line-height: 1.6; color: var(--on-dark-3); max-width: 30ch; }
.f-promise .seal {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--gold);
}
.f-promise .seal svg { flex: none; }

/* ---- legal bar ---- */
.f-legal {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 26px; flex-wrap: wrap;
  padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px; color: var(--on-dark-4);
}
.f-legal .name { color: var(--on-dark-3); }
.f-legal nav { display: flex; gap: 20px; }
.f-legal a { text-decoration: none; color: var(--on-dark-4); transition: color .2s; }
.f-legal a:hover { color: var(--on-dark); }

@media (max-width: 900px) {
  .f-colophon { grid-template-columns: 1fr; gap: 36px; }
  .f-map { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  footer .wrap { padding-top: 60px; }
  .f-map { grid-template-columns: 1fr 1fr; gap: 26px 24px; }
  .f-promise { grid-column: 1 / -1; }
  .f-legal { flex-direction: column; align-items: flex-start; }
}

/* ============ MOTION ============ */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1);
}
.reveal.in { opacity: 1; transform: none; }
.up { opacity: 0; transform: translateY(20px); animation: up 1s cubic-bezier(.2, .8, .2, 1) forwards; }
.d1 { animation-delay: .05s } .d2 { animation-delay: .16s } .d3 { animation-delay: .3s }
.d4 { animation-delay: .44s } .d5 { animation-delay: .58s } .d6 { animation-delay: .72s }
@keyframes up { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, .up, .reveal {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}