:root {
  /* Palette drawn from the Birch & Grain catalog brand image:
     a moody dark study, deep ink-charcoal with a navy-slate cabinetry soul,
     warm walnut/birch wood, a brass pendant glow, and a copper accent. */
  --grain:    #191B20;   /* deep moody ink-charcoal, the dark study */
  --grain-md: #2B313B;   /* slate charcoal */
  --grain-lt: #6B6256;   /* warm walnut-taupe (text on light) */
  --birch:    #E7DBC3;   /* warm birch cream */
  --birch-dk: #C8A86E;   /* warm camel / soft brass */
  --cream:    #F5F0E6;   /* warm catalog paper */
  --warm:     #FCF9F2;   /* lightest paper */
  --rust:     #A8521F;   /* copper, the ampersand */
  --rust-lt:  #EFE5DA;   /* copper tint */
  --brass:    #CBA15A;   /* brass pendant glow */
  --navy:     #20303F;   /* cabinetry navy */
  --navy-lt:  #2E4456;   /* lifted cabinetry navy */
  --dark-grad:linear-gradient(150deg,var(--grain) 0%,var(--navy) 100%); /* shared dark-surface gradient */
  --border:   rgba(25,27,32,0.1);
  --border-md:rgba(25,27,32,0.18);
  --serif:    'Cormorant Garamond', Georgia, serif;
  --sans:     'Jost', sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--warm);color:var(--grain);overflow-x:hidden;line-height:1.6}

/* ── TOPBAR ── */
.topbar{background:var(--dark-grad);color:var(--birch);font-size:12px;font-weight:400;text-align:center;padding:10px 1rem;letter-spacing:0.06em}
.topbar strong{font-weight:600;color:var(--brass)}

/* ── HEADER ── */
header{background:rgba(253,250,244,0.95);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200}
.header-inner{max-width:1240px;margin:0 auto;padding:0 2.5rem;height:72px;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0}
.logo svg{height:60px;width:auto;display:block}
nav{display:flex;gap:0}
nav a{font-size:12px;font-weight:500;letter-spacing:0.09em;text-transform:uppercase;color:var(--grain-lt);padding:0 18px;height:72px;display:flex;align-items:center;text-decoration:none;transition:color 0.2s;position:relative}
nav a::after{content:'';position:absolute;bottom:0;left:18px;right:18px;height:2px;background:var(--rust);transform:scaleX(0);transform-origin:left;transition:transform 0.3s}
nav a:hover{color:var(--grain)}
nav a:hover::after{transform:scaleX(1)}
.header-right{display:flex;align-items:center;gap:14px;flex-shrink:0}
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;cursor:pointer;border:none;text-decoration:none;transition:all 0.22s}
.btn-grain{background:var(--dark-grad);color:var(--cream)}
.btn-grain:hover{background:var(--grain-md)}
.btn-ghost{background:transparent;color:var(--grain);border:1.5px solid var(--border-md)}
.btn-ghost:hover{background:var(--dark-grad);color:var(--cream);border-color:var(--grain)}
.btn-rust{background:var(--rust);color:#fff}
.btn-rust:hover{background:#8A4319}
.btn-lg{padding:14px 32px;font-size:13px}
.btn-xl{padding:17px 40px;font-size:14px}
.phone-lnk{font-family:var(--serif);font-size:17px;font-weight:400;color:var(--grain-lt);letter-spacing:0.02em}

/* ── HERO ── */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 112px);overflow:hidden}
.hero-left{background:var(--dark-grad);display:flex;flex-direction:column;justify-content:center;padding:7rem 5rem 6rem;position:relative;overflow:hidden}
.hero-right{background:var(--cream);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:4rem 3rem}
.hero-right::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(172deg,transparent 0,transparent 36px,rgba(25,27,32,0.028) 36px,rgba(25,27,32,0.028) 37px)}

.h-eyebrow{font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(228,216,192,0.45);display:flex;align-items:center;gap:12px;margin-bottom:1.5rem;animation:fadeUp 0.9s ease forwards}
.h-eyebrow::before{content:'';width:28px;height:1px;background:rgba(228,216,192,0.3)}
.hero-h1{font-family:var(--serif);font-size:clamp(54px,5.5vw,82px);font-weight:300;line-height:0.96;color:var(--cream);letter-spacing:-0.01em;margin-bottom:1.75rem;animation:fadeUp 0.9s ease 0.15s forwards}
.hero-h1 em{font-style:italic;color:var(--birch-dk)}
.hero-p{font-size:15px;color:rgba(228,216,192,0.6);line-height:1.75;max-width:400px;margin-bottom:2.25rem;font-weight:300;animation:fadeUp 0.9s ease 0.28s forwards}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;animation:fadeUp 0.9s ease 0.38s forwards}
.hero-actions .btn-rust{padding:14px 32px;font-size:13px}
.hero-actions .btn-ghost{border-color:rgba(228,216,192,0.25);color:var(--birch);padding:14px 28px;font-size:13px}
.hero-actions .btn-ghost:hover{background:rgba(228,216,192,0.1);color:var(--cream);border-color:rgba(228,216,192,0.4)}
.hero-stats{display:flex;gap:0;margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(228,216,192,0.1);animation:fadeUp 0.9s ease 0.48s forwards}
.h-stat{flex:1}
.h-stat:not(:last-child){border-right:1px solid rgba(228,216,192,0.1);padding-right:2rem;margin-right:2rem}
.h-stat-num{font-family:var(--serif);font-size:34px;font-weight:300;color:var(--birch);line-height:1}
.h-stat-lbl{font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(228,216,192,0.4);margin-top:5px}

/* Hero right card */
.hero-showcase{background:var(--warm);position:relative;max-width:656px;width:100%;animation:fadeUp 1s ease 0.25s forwards}
.hero-showcase::before{content:'';position:absolute;top:-10px;left:-10px;right:10px;bottom:10px;border:1px solid var(--brass);z-index:0}
.showcase-inner{position:relative;z-index:1;padding:2rem}
.showcase-tag{font-size:9.5px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--rust);margin-bottom:1.25rem;display:flex;align-items:center;gap:10px}
.showcase-tag::after{content:'';flex:1;height:1px;background:var(--rust-lt)}
.showcase-name{font-family:var(--serif);font-size:22px;font-weight:400;margin-bottom:4px;margin-top:1.25rem}
.showcase-meta{font-size:11.5px;color:var(--grain-lt);letter-spacing:0.04em;margin-bottom:1rem}
.showcase-chips{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:1rem}
.s-chip{background:var(--cream);border:1px solid var(--border);padding:7px 11px;font-size:11px;color:var(--grain-md)}
.s-chip strong{display:block;font-size:13px;font-weight:600;color:var(--grain);margin-bottom:1px}
.showcase-btn{display:block;width:100%;padding:12px;background:var(--dark-grad);color:var(--cream);font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;border:none;cursor:pointer;transition:background 0.2s;text-align:center}
.showcase-btn:hover{background:var(--rust)}

/* ── TRUST STRIP ── */
.trust-strip{background:var(--grain-md);border-bottom:1px solid rgba(255,255,255,0.05)}
.trust-inner{max-width:1240px;margin:0 auto;padding:0 2.5rem;display:flex;justify-content:space-around;flex-wrap:wrap}
.t-item{display:flex;align-items:center;gap:9px;padding:16px 1rem;font-size:12.5px;font-weight:500;color:rgba(228,216,192,0.65);letter-spacing:0.03em}
.t-item svg{width:17px;height:17px;stroke:var(--birch-dk);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ── SECTION ── */
section{padding:88px 2.5rem}
.si{max-width:1240px;margin:0 auto}
.eyebrow{font-size:10.5px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--rust);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--birch-dk)}
.sh2{font-family:var(--serif);font-size:clamp(34px,3.5vw,52px);font-weight:300;line-height:1.1;letter-spacing:-0.01em}
.sh2 em{font-style:italic;color:var(--rust)}
.sdesc{font-size:14.5px;color:var(--grain-lt);line-height:1.8;max-width:520px;margin-top:10px}

/* ── SERVICES ── */
.services-bg{background:var(--cream)}
.srv-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2.5rem;flex-wrap:wrap;gap:1rem}
.srv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
.srv-card{background:var(--warm);cursor:default;transition:background 0.3s;position:relative;overflow:hidden}
.srv-img{width:100%;height:220px;object-fit:cover;display:block}
.srv-card.srv-wide{grid-column:1 / -1;display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch;min-height:320px}
.srv-wide-imgs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border)}
.srv-wide-imgs img{width:100%;height:100%;min-height:165px;object-fit:cover;display:block}
.srv-card.srv-wide .srv-body{display:flex;flex-direction:column;justify-content:center;padding:2.5rem 3rem}
.srv-body{padding:1.75rem 2rem 2.25rem}
.srv-card::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--rust);transform:scaleX(0);transform-origin:left;transition:transform 0.4s}
.srv-card:hover{background:var(--dark-grad)}
.srv-card:hover::after{transform:scaleX(1)}
.srv-card:hover .srv-card:hover .srv-name,.srv-card:hover .srv-rooms{color:var(--cream)}
.srv-card:hover .srv-desc{color:rgba(228,216,192,0.55)}
.srv-card:hover .srv-tag{background:rgba(168,82,31,0.3);color:rgba(231,219,195,0.7)}
.srv-name{font-family:var(--serif);font-size:22px;font-weight:400;margin-bottom:8px;transition:color 0.3s}
.srv-desc{font-size:13px;color:var(--grain-lt);line-height:1.65;margin-bottom:14px;transition:color 0.3s}
.srv-rooms{display:flex;flex-wrap:wrap;gap:5px;transition:color 0.3s}
.srv-tag{font-size:9.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--rust);background:var(--rust-lt);padding:3px 9px;transition:all 0.3s}

/* ── CRAFT ── */
.craft-bg{background:var(--dark-grad);color:var(--cream)}
.craft-inner{display:grid;grid-template-columns:1fr 1fr;gap:7rem;align-items:center}
.craft-eyebrow{color:rgba(228,216,192,0.4)}
.craft-eyebrow::before{background:var(--birch-dk)}
.craft-h2{color:var(--cream)}
.craft-desc{color:rgba(228,216,192,0.55);max-width:none;margin-bottom:2rem}
.spec-list{border-top:1px solid rgba(228,216,192,0.08)}
.spec-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid rgba(228,216,192,0.08)}
.spec-k{font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:rgba(228,216,192,0.38)}
.spec-v{font-family:var(--serif);font-size:17px;font-weight:400;color:var(--birch)}
.craft-right{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.c-stat{background:rgba(255,255,255,0.04);border:1px solid rgba(228,216,192,0.07);padding:22px 18px}
.c-stat-num{font-family:var(--serif);font-size:40px;font-weight:300;color:var(--birch-dk);line-height:1;letter-spacing:-0.01em}
.c-stat-unit{font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:rgba(228,216,192,0.38);margin-top:3px}
.c-stat-desc{font-size:12px;color:rgba(228,216,192,0.4);margin-top:10px;line-height:1.5}
.c-stat.wide{grid-column:1/-1;display:flex;align-items:center;gap:1.5rem}
.c-stat.wide .c-stat-num{font-size:30px;flex-shrink:0}
.c-stat.wide .c-stat-desc{margin-top:0}

/* ── STYLES ── */
.styles-bg{background:var(--warm)}
.styles-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2.5rem;flex-wrap:wrap;gap:1rem}
.styles-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.style-card{cursor:pointer;transition:transform 0.25s}
.style-card:hover{transform:translateY(-4px)}
.style-swatch{height:200px;position:relative;overflow:hidden}
.style-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,26,33,0.72) 0%,transparent 55%)}
.style-info{position:absolute;bottom:0;left:0;right:0;padding:14px}
.style-name{font-family:var(--serif);font-size:19px;font-weight:400;color:#fff;line-height:1.1}
.style-sub{font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.6);margin-top:3px}
.style-body{padding:14px;background:var(--cream);border:1px solid var(--border);border-top:none}
.style-desc{font-size:12.5px;color:var(--grain-lt);line-height:1.55;margin-bottom:8px}
.style-link{font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--rust)}

/* ── PROCESS ── */
.process-bg{background:var(--cream)}
.process-head{text-align:center;max-width:560px;margin:0 auto 3.5rem}
.process-head .sdesc{margin:10px auto 0}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.process-grid::before{content:'';position:absolute;top:34px;left:12%;right:12%;height:1px;background:var(--border);z-index:0}
.p-step{padding:0 1.5rem;text-align:center;position:relative;z-index:1}
.p-circle{width:68px;height:68px;border-radius:50%;background:var(--warm);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;transition:border-color 0.2s,background 0.2s}
.p-step:hover .p-circle{border-color:var(--rust);background:var(--rust-lt)}
.p-circle svg{width:26px;height:26px;stroke:var(--rust);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.p-num{font-size:10px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--rust);margin-bottom:6px}
.p-name{font-family:var(--serif);font-size:21px;font-weight:400;margin-bottom:8px}
.p-desc{font-size:13px;color:var(--grain-lt);line-height:1.65}

/* ── AREAS ── */
.areas-bg{background:var(--cream)}
.areas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:8px;margin-top:2rem}
.area-chip{background:var(--warm);border:1px solid var(--border);padding:13px 16px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;transition:border-color 0.2s,background 0.2s,color 0.2s;cursor:default}
.area-chip:hover{border-color:var(--rust);background:var(--rust-lt);color:var(--rust)}
.area-dot{width:6px;height:6px;border-radius:50%;background:var(--rust);flex-shrink:0}

/* ── QUOTE ── */
.quote-bg{background:var(--warm)}
/* ── REVIEWS ── */
.reviews-bg{background:var(--dark-grad);color:var(--cream)}
.reviews-bg .rv-h2{color:var(--cream)}
.reviews-bg .rv-sdesc{color:rgba(228,216,192,0.6)}
.rv-head{margin-bottom:2.25rem}
.rv-summary{display:flex;align-items:center;gap:1.5rem;padding-bottom:2.5rem;margin-bottom:2.5rem;border-bottom:1px solid rgba(228,216,192,0.12);flex-wrap:wrap}
.rv-score{font-family:var(--serif);font-size:64px;line-height:0.9;font-weight:400;color:var(--cream)}
.rv-summary-text{display:flex;flex-direction:column;gap:4px}
.rv-stars{color:#E8B23A;font-size:22px;letter-spacing:4px;line-height:1}
.rv-meta{font-size:13px;color:rgba(228,216,192,0.6);letter-spacing:0.02em}
.rv-meta strong{color:var(--cream);font-weight:600}
.rv-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.rv-card{background:rgba(228,216,192,0.05);border:1px solid rgba(228,216,192,0.1);padding:2rem;display:flex;flex-direction:column;gap:1.1rem;margin:0}
.rv-card-stars{color:#E8B23A;font-size:15px;letter-spacing:3px;line-height:1}
.rv-card blockquote{font-family:var(--serif);font-size:19px;line-height:1.55;font-style:italic;color:var(--cream);margin:0;font-weight:400}
.rv-card figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase}
.rv-src{color:rgba(228,216,192,0.8);font-weight:600}
.rv-verified{color:#9CC177;display:flex;align-items:center;gap:5px}
.rv-cta{display:flex;gap:14px;margin-top:2.5rem;flex-wrap:wrap}
.rv-btn-ghost{background:transparent;color:var(--cream);border:1.5px solid rgba(228,216,192,0.32)}
.rv-btn-ghost:hover{background:rgba(228,216,192,0.1);border-color:var(--cream)}
@media(max-width:760px){.rv-grid{grid-template-columns:1fr}.rv-score{font-size:52px}.rv-card blockquote{font-size:17px}}
.quote-inner{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:start}
.q-left .sdesc{margin-bottom:1.75rem}
.promise-list{display:flex;flex-direction:column;gap:10px;margin-bottom:2rem}
.promise{display:flex;align-items:flex-start;gap:12px;font-size:13.5px;color:var(--grain-md)}
.p-dot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--rust);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.p-dot::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--rust)}
.q-phone{display:flex;align-items:center;gap:14px;padding:18px 20px;background:var(--dark-grad);margin-top:1.5rem}
.q-phone svg{width:20px;height:20px;stroke:var(--birch-dk);fill:none;stroke-width:1.8;stroke-linecap:round;flex-shrink:0}
.q-phone-num{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--cream)}
.q-phone-lbl{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(228,216,192,0.4);margin-top:2px}
.form-box{background:var(--dark-grad);padding:2.5rem;position:relative}
.form-box::before{content:'';position:absolute;top:-8px;left:-8px;right:8px;bottom:8px;border:1px solid var(--brass);z-index:0}
.form-box-inner{position:relative;z-index:1}
.form-title{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--cream);margin-bottom:1.5rem}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:9.5px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:rgba(228,216,192,0.38);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;background:rgba(255,255,255,0.06);border:none;border-bottom:1px solid rgba(228,216,192,0.15);padding:10px 0;font-family:var(--sans);font-size:14px;color:var(--cream);outline:none;transition:border-color 0.2s}
.field input::placeholder,.field textarea::placeholder{color:rgba(228,216,192,0.22)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--birch-dk)}
.field select{appearance:none;cursor:pointer}
.field select option{background:#20242b;color:#f5f0e6}
.field textarea{resize:vertical;min-height:88px}
.form-btn{width:100%;background:var(--rust);color:#fff;border:none;padding:15px;font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;transition:background 0.2s;margin-top:6px}
.form-btn:hover{background:#8A4319}
.form-note{font-size:10.5px;color:rgba(228,216,192,0.28);text-align:center;margin-top:10px;letter-spacing:0.04em}
.success-box{display:none;text-align:center;padding:3rem 1rem}
.success-box .s-title{font-family:var(--serif);font-size:30px;font-weight:300;font-style:italic;color:var(--birch-dk);margin-bottom:10px}
.success-box p{font-size:13.5px;color:rgba(228,216,192,0.55);line-height:1.7}

/* ── FAQ ── */
.faq-bg{background:var(--cream)}
.faq-head{text-align:center;max-width:520px;margin:0 auto 2.5rem}
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-btn{width:100%;text-align:left;background:none;border:none;padding:18px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:var(--sans);font-size:14.5px;font-weight:500;color:var(--grain);gap:1rem;transition:color 0.2s}
.faq-btn:hover{color:var(--rust)}
.faq-icon{font-family:var(--serif);font-size:22px;font-weight:300;color:var(--rust);flex-shrink:0;line-height:1;transition:transform 0.3s}
.faq-btn.open .faq-icon{transform:rotate(45deg)}
.faq-body{font-size:13.5px;color:var(--grain-lt);line-height:1.8;max-height:0;overflow:hidden;transition:max-height 0.35s ease,padding 0.3s}
.faq-body.open{max-height:280px;padding-bottom:18px}

/* ── FOOTER ── */
footer{background:var(--dark-grad);color:rgba(228,216,192,0.45);padding:64px 2.5rem 28px}
.footer-inner{max-width:1240px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:3.5rem;margin-bottom:2.5rem}
.f-logo{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--cream);letter-spacing:0.03em;margin-bottom:3px}
.f-logo span{color:var(--rust)}
.f-logo svg{height:40px;width:auto;display:block;margin-bottom:2px}
.f-sub{font-size:8.5px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(228,216,192,0.28)}
.f-brand p{font-size:12.5px;color:rgba(228,216,192,0.38);line-height:1.8;margin-top:14px;max-width:240px;font-weight:300}
.f-col h5{font-size:9.5px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:rgba(228,216,192,0.28);margin-bottom:14px}
.f-col a{display:block;font-size:12.5px;color:rgba(228,216,192,0.45);text-decoration:none;margin-bottom:9px;transition:color 0.2s;font-weight:300}
.f-col a:hover{color:var(--birch-dk)}
.footer-bottom{border-top:1px solid rgba(228,216,192,0.07);padding-top:22px;display:flex;justify-content:space-between;font-size:11.5px;flex-wrap:wrap;gap:8px}
.footer-bottom a{color:rgba(228,216,192,0.3);text-decoration:none}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:1 !important;transform:translateY(0) !important;transition:opacity 0.75s ease,transform 0.75s ease}
.reveal.ready{opacity:0 !important;transform:translateY(22px) !important}
.reveal.in{opacity:1 !important;transform:translateY(0) !important}

/* ── TABLET ── */
@media(max-width:960px){
  .hero{grid-template-columns:1fr}
  .hero-right{background:var(--cream);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:4rem 3rem}
  .hero-left{padding:4rem 2rem 3rem}
  .craft-inner,.quote-inner{grid-template-columns:1fr}
  .srv-grid{grid-template-columns:1fr 1fr}
  .srv-card.srv-wide{display:block;min-height:0}
  .srv-wide-imgs img{min-height:130px}
  .srv-card.srv-wide .srv-body{padding:1.75rem 2rem 2.25rem}
  .styles-grid{grid-template-columns:1fr 1fr}
  .process-grid{grid-template-columns:1fr 1fr}
  .process-grid::before{display:none}
  .footer-top{grid-template-columns:1fr 1fr}
  nav{display:none}
  .phone-lnk{display:none}
  .craft-right{grid-template-columns:1fr 1fr}
}

/* ── MOBILE ── */
@media(max-width:600px){
  /* Base */
  section{padding:56px 1.25rem}

  /* Topbar */
  .topbar{font-size:11px;padding:8px 1rem;line-height:1.5}

  /* Header */
  .header-inner{padding:0 1.25rem;height:62px}
  .logo svg{height:44px}
      .header-right{gap:8px}
  .btn-grain{padding:8px 14px;font-size:11px}
  nav{display:none}
  .phone-lnk{display:none}

  /* Hamburger menu */
  .mobile-menu-btn{display:flex}
  .mobile-nav{display:block}

  /* Hero */
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-right{display:block;padding:0 1.25rem 2rem}
  .hero-left{padding:3rem 1.25rem 2.5rem}
  .hero-h1{font-size:44px;margin-bottom:1.25rem}
  .hero-p{font-size:14px;margin-bottom:1.75rem}
  .hero-actions{gap:10px}
  .hero-actions .btn-rust,.hero-actions .btn-ghost{padding:13px 20px;font-size:12px;width:100%;justify-content:center}
  .hero-stats{gap:0;margin-top:2rem;padding-top:1.5rem}
  .h-stat{flex:1}
  .h-stat-num{font-size:26px}
  .h-stat:not(:last-child){padding-right:1rem;margin-right:1rem}
  .hero-showcase{max-width:100%}
  .hero-showcase::before{display:none}
  .showcase-inner{padding:1.25rem}
  .showcase-chips{grid-template-columns:1fr 1fr;gap:6px}

  /* Trust strip */
  .trust-inner{padding:0 1rem;gap:0;flex-direction:column;align-items:flex-start}
  .t-item{padding:10px 0;font-size:12px;border-bottom:1px solid rgba(228,216,192,0.08)}
  .t-item:last-child{border:none}

  /* Section headers */
  .sh2{font-size:32px}
  .sdesc{font-size:13.5px}
  .eyebrow{font-size:10px}

  /* Services */
  .srv-head{flex-direction:column;align-items:flex-start;gap:14px}
  .srv-grid{grid-template-columns:1fr;gap:1px}
  .srv-card{padding:1.75rem 1.25rem}
  .srv-name{font-size:20px}

  /* Craft */
  .craft-inner{gap:3rem}
  .craft-right{grid-template-columns:1fr 1fr;gap:8px}
  .c-stat{padding:16px 14px}
  .c-stat-num{font-size:30px}
  .c-stat.wide{flex-direction:column;gap:8px}
  .c-stat.wide .c-stat-num{font-size:26px}
  .spec-row{padding:12px 0}
  .spec-v{font-size:14px}

  /* Styles */
  .styles-head{flex-direction:column;align-items:flex-start;gap:14px}
  .styles-grid{grid-template-columns:1fr 1fr;gap:10px}
  .style-swatch{height:160px}
  .style-name{font-size:16px}

  /* Process */
  .process-grid{grid-template-columns:1fr 1fr;gap:2rem 1rem}
  .p-circle{width:56px;height:56px}
  .p-name{font-size:17px}
  .p-desc{font-size:12px}

  /* Areas */
  .areas-grid{grid-template-columns:1fr 1fr}

  /* Quote */
  .quote-inner{gap:2.5rem}
  .q-phone{padding:14px 16px}
  .q-phone-num{font-size:18px}
  .form-box{padding:1.5rem}
  .form-row-2{grid-template-columns:1fr}
  .form-title{font-size:20px}

  /* FAQ */
  .faq-btn{font-size:13.5px}

  /* Footer */
  .footer-top{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column;gap:6px;font-size:11px}
  footer{padding:48px 1.25rem 24px}

  /* Sections inner padding */
  .si{padding:0}
}

/* ── VERY SMALL PHONES ── */
@media(max-width:380px){
  .hero-h1{font-size:36px}
  .styles-grid{grid-template-columns:1fr}
  .craft-right{grid-template-columns:1fr}
  .areas-grid{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr}
  .showcase-chips{grid-template-columns:1fr 1fr}
}

/* ── HAMBURGER & MOBILE NAV ── */
.mob-btn{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;margin-left:4px}
.mob-btn span{display:block;width:22px;height:2px;background:var(--grain);border-radius:2px;transition:all 0.3s}
.mob-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mob-btn.open span:nth-child(2){opacity:0}
.mob-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob-overlay{position:fixed;inset:0;background:rgba(25,27,32,0.5);z-index:299;opacity:0;pointer-events:none;transition:opacity 0.3s}
.mob-overlay.open{opacity:1;pointer-events:all}
.mob-nav{position:fixed;top:0;right:0;bottom:0;width:min(320px,85vw);background:var(--warm);z-index:300;transform:translateX(100%);transition:transform 0.35s ease;display:flex;flex-direction:column;padding:1.5rem}
.mob-nav.open{transform:translateX(0)}
.mob-nav-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.mob-nav-links{display:flex;flex-direction:column;gap:0;flex:1}
.mob-nav-links a{font-size:18px;font-family:var(--serif);font-weight:400;color:var(--grain);padding:14px 0;border-bottom:1px solid var(--border);text-decoration:none;transition:color 0.2s}
.mob-nav-links a:hover{color:var(--rust)}
.mob-nav-footer{margin-top:2rem;display:flex;flex-direction:column;gap:0}
.mob-call-btn{display:flex;align-items:center;justify-content:center;padding:13px;background:var(--dark-grad);color:var(--cream);font-size:14px;font-weight:500;border-radius:0;text-decoration:none;letter-spacing:0.02em}
@media(max-width:960px){.mob-btn{display:flex}}

.featured-inner{max-width:1400px;margin:0 auto}
.featured-label{padding:2.5rem 3rem 1.25rem;display:flex;align-items:center;gap:16px}
.featured-label::after{content:'';flex:1;height:1px;background:rgba(228,216,192,0.15)}
.featured-img-wrap{position:relative;overflow:hidden}
.featured-img{width:100%;height:580px;object-fit:cover;object-position:center 30%;display:block}
.featured-caption{position:absolute;bottom:0;left:0;right:0;padding:2rem 3rem;background:linear-gradient(transparent, rgba(20,26,33,0.88))}
.featured-title{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--cream);margin-bottom:4px}
.featured-meta{font-size:11px;color:var(--birch-dk);letter-spacing:0.08em}
@media(max-width:600px){
  .featured-img{height:320px}
  .featured-label{padding:2rem 1.25rem 1rem}
  .featured-caption{padding:1.25rem}
  .featured-title{font-size:20px}
}

/* The two original legal pages carry their own embedded <style>. The
   generated /sms-terms.html uses the normal shell, so it needs the same
   rules here or it renders as unstyled prose on a pale hero. Values are
   copied from privacy-policy.html so the three pages match. */
.legal-hero{background:var(--dark-grad);padding:5rem 2rem 4rem}
.legal-hero-inner{max-width:760px;margin:0 auto}
.legal-hero h1{font-family:var(--serif);font-size:46px;font-weight:400;
  color:var(--cream);line-height:1.15;margin-bottom:1rem}
.legal-hero .updated{font-size:12px;color:var(--grain-lt);letter-spacing:.04em}
.legal-eyebrow{font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rust);margin-bottom:1rem;display:block}
.legal-wrap{max-width:1100px;margin:0 auto;padding:4rem 2rem 6rem}
.legal-body{min-width:0;max-width:760px}
.legal-body a{color:var(--rust);text-decoration:underline;text-underline-offset:3px}
.legal-section{margin-bottom:3.5rem;padding-bottom:3.5rem;border-bottom:1px solid var(--border)}
.legal-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.legal-section h2{font-family:var(--serif);font-size:28px;font-weight:400;
  color:var(--grain);margin-bottom:1.25rem;line-height:1.3}
.legal-section h3{font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grain);margin:1.75rem 0 .75rem}
.legal-section p{font-size:14.5px;line-height:1.8;color:var(--grain-md,#2B313B);margin-bottom:1rem}
.legal-section p:last-child{margin-bottom:0}
.contact-box{background:var(--cream);border:1px solid var(--border);
  padding:2rem;margin-top:1.5rem;border-radius:2px}
.contact-box p{font-size:14.5px;line-height:1.8;color:var(--grain-md,#2B313B);margin-bottom:.4rem}
.contact-box a{color:var(--rust)}
@media(max-width:860px){
  .legal-hero h1{font-size:32px}
  .legal-hero{padding:3.5rem 1.25rem 3rem}
  .legal-wrap{padding:2.5rem 1.25rem 4rem}
}

/* The footer's legal links sat flush against each other, which read as
   "Privacy PolicyTerms of Service" even before SMS Terms made it three. */
.footer-bottom span a + a{margin-left:14px;padding-left:14px;
  border-left:1px solid rgba(231,219,195,.22)}

/* Bug 4: the consent/policy note under the contact form. A carrier
   reviewing the opt-in page has to be able to read it, so it is 13px at
   full contrast rather than the 12px brass of the line above it. */
.form-legal{font-size:13px;line-height:1.6;color:var(--ink-soft);
  margin-top:1rem;max-width:34rem}
.form-legal a{color:var(--rust);text-decoration:underline}

/* M8: "Keep reading" block at the foot of every post. */
.post-related{max-width:720px;margin:3.5rem auto 0;padding:1.75rem 1.5rem 1.25rem;
  border-top:1px solid rgba(25,27,32,.12)}
.post-related h2{font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin:0 0 1rem}
.post-related ul{list-style:none;margin:0;padding:0}
.post-related li{margin:0 0 .6rem}
.post-related a{font-family:var(--serif);font-size:17px;line-height:1.4;
  color:var(--grain);text-decoration:none;border-bottom:1px solid rgba(25,27,32,.18);
  padding-bottom:1px}
.post-related a:hover{border-bottom-color:var(--rust);color:var(--rust)}

/* ── M9: accessibility ──────────────────────────────────────────────────
   Lighthouse flagged three things, all of them in the original stylesheet:
   footer type down at 8.5px, spec labels and footer links below the 4.5:1
   contrast minimum, and footer tap targets under 24px. The alpha values
   were measured against the footer gradient (#191B20 to --navy): 0.28 gave
   2.2:1 and 0.45 gave 3.6:1, so both failed; 0.64 lands at 5.4:1 and over.
   Overrides live here rather than in parts/site.css.raw, which stays the
   untouched original. The small-caps eyebrows elsewhere are a deliberate
   design idiom and are left alone.                                        */
.spec-k{font-size:11.5px;color:rgba(231,219,195,0.64)}
.f-sub{font-size:12px;letter-spacing:0.16em;color:rgba(231,219,195,0.64)}
.cdetail-h{font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--brass);
  margin:0 0 .5rem}
.legal-toc-h{font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;margin:0 0 .75rem}
.f-col h5,.f-col h2.f-col-h{font-size:12px;letter-spacing:0.14em;
  color:rgba(231,219,195,0.66);font-weight:700;margin-bottom:14px;
  font-family:var(--sans);text-transform:uppercase}
.f-col a{font-size:14px;color:rgba(231,219,195,0.68);margin-bottom:2px;
  padding:5px 0;min-height:24px}
.f-col a:hover{color:var(--birch)}
.f-brand p{font-size:13px;color:rgba(231,219,195,0.66)}
.footer-bottom{font-size:12px;color:rgba(231,219,195,0.64)}
.footer-bottom a{color:rgba(231,219,195,0.72)}

/* ===== Added by rebuild: new page types & fixes ===================== */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--rust);color:#fff;
  padding:10px 16px;z-index:10000}
.skip-link:focus{left:0}
/* Header fit between the mobile breakpoint (960px) and full width.
   The desktop header already overflowed below ~1100px before any of this.

   These rules are deliberately NOT language-specific. Spanish labels are
   wider, so an earlier Spanish breakpoint made the logo change size the
   moment you used the language toggle. Both languages now tighten at the
   same points, sized for the wider of the two, and the logo keeps one
   height across the whole desktop range. */
.logo svg{height:56px}
@media(max-width:1500px){
  .header-inner{padding:0 1.5rem;gap:1rem}
  nav a{padding:0 10px}
}
@media(max-width:1280px){
  .phone-lnk{display:none}
  nav a{padding:0 8px;font-size:11px}
}
/* 961-1060px is the tightest band: the nav is still shown (it only hides at
   960) and Spanish labels no longer fit. Shrink the logo once here, for both
   languages, so the two stay identical. */
@media(max-width:1060px){
  .logo svg{height:46px}
  nav a{padding:0 6px;font-size:10.5px;letter-spacing:.06em}
  .header-inner{padding:0 1rem;gap:.6rem}
}
  nav a{padding:0 9px;font-size:11.5px}
}

/* language toggle, in the top bar and the mobile drawer */
.langswitch{display:inline-flex;align-items:center;gap:.4em;padding:2px 10px;
  border-radius:999px;border:1px solid rgba(231,224,208,.25);
  color:var(--birch);text-decoration:none;font-weight:600;letter-spacing:.04em;
  white-space:nowrap;transition:border-color .2s,background .2s,color .2s}
.langswitch:hover{border-color:var(--brass);color:var(--cream);
  background:rgba(203,161,90,.12)}
.mob-nav-footer .langswitch{display:flex;justify-content:center;margin-bottom:10px;
  padding:10px;border-radius:2px;border-color:var(--border);color:var(--grain)}
.mob-nav-footer .langswitch:hover{color:var(--rust)}
@media(max-width:600px){.topbar .langswitch{padding:1px 8px}}

/* Reviews: horizontal scroller.
   CSS scroll-snap does the work, so it is swipeable on touch and needs no
   JavaScript to function; the arrows are progressive enhancement for mouse
   users. The track is focusable so the keyboard can reach it too. */
.rv-scroller{position:relative}
.rv-track{
  display:flex;gap:1.25rem;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 4px 18px;margin:0 -4px;
  scrollbar-width:thin;scrollbar-color:rgba(231,224,208,.28) transparent}
.rv-track::-webkit-scrollbar{height:6px}
.rv-track::-webkit-scrollbar-track{background:rgba(231,224,208,.08);border-radius:3px}
.rv-track::-webkit-scrollbar-thumb{background:rgba(231,224,208,.28);border-radius:3px}
.rv-track:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
.rv-track .rv-card{
  flex:0 0 clamp(290px,34%,430px);scroll-snap-align:start;margin:0;
  padding:1.6rem 1.7rem;gap:.9rem}
.rv-track .rv-card blockquote{font-size:17px;line-height:1.52}
/* the long one was full-width in the grid; in a scroller every card matches */
.rv-track .rv-feature{flex:0 0 clamp(290px,34%,430px);grid-column:auto}
.rv-arrow{
  position:absolute;top:calc(50% - 26px);transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:var(--warm);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28);transition:opacity .2s,background .2s}
.rv-arrow svg{width:19px;height:19px;fill:none;stroke:var(--ink);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rv-arrow:hover{background:#fff}
.rv-arrow[disabled]{opacity:0;pointer-events:none}
.rv-prev{left:-22px}
.rv-next{right:-22px}
@media(hover:none){.rv-arrow{display:none}}
@media(max-width:760px){
  .rv-arrow{display:none}
  .rv-track .rv-card,.rv-track .rv-feature{flex:0 0 86%}
}

/* showroom floor plans */
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:2.5rem 0 1.5rem}
.plan-fig{margin:0;background:#fff;border:1px solid var(--border)}
.plan-img{width:100%;height:auto;display:block}
.plan-fig figcaption{padding:1.2rem 1.4rem 1.5rem;display:block}
.plan-fig figcaption strong{display:block;font-family:var(--serif);font-size:20px;
  font-weight:400;color:var(--ink);margin-bottom:.4rem}
.plan-fig figcaption span{display:block;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.plan-note{font-size:13px;color:var(--brass);margin:0}
@media(max-width:960px){.plan-grid{grid-template-columns:1fr;gap:1.5rem}}

/* Phone numbers were plain text until they became tracked tel: links. Any
   that sit inside an already-styled container must inherit, not pick up the
   browser's default blue underline. The attribute rule is a safety net for
   any bare tel:/mailto: link added later. */
.q-phone-num a{color:inherit;text-decoration:none}
.q-phone-num a:hover{text-decoration:underline}
a[href^="tel:"]:not([class]),a[href^="mailto:"]:not([class]){
  color:inherit;text-decoration:none}
a[href^="tel:"]:not([class]):hover,a[href^="mailto:"]:not([class]):hover{
  text-decoration:underline}
a.phone-lnk{text-decoration:none}
/* the top bar phone is now a real tel: link — keep it looking like text */
.topbar a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.topbar a:hover{border-bottom-color:currentColor}
.topbar a strong{color:var(--brass)}
.f-static{color:var(--brass);display:block;padding:5px 0;font-size:13px}
/* <picture> wrappers must behave like the <img> they replaced */
.srv-wide-imgs picture{display:block;height:100%;min-height:165px}
.style-swatch picture{display:contents}
.hero-showcase picture{display:block}
/* clickable service cards */
.srv-card{cursor:pointer}
.srv-stretch{color:inherit;text-decoration:none}
.srv-stretch::after{content:'';position:absolute;inset:0;z-index:2}
.srv-card:hover .srv-stretch{color:var(--cream)}
/* breadcrumbs.
   NOTE: the stylesheet carries a global `nav a {display:flex;height:72px;
   padding:0 18px;text-transform:uppercase}` rule for the header menu. A
   <nav> breadcrumb inherits it and stacks into 72px-tall blocks, so every
   property it sets has to be unset explicitly here. */
.crumbs{background:var(--warm);border-bottom:1px solid var(--border);
  font-size:13px;padding:12px 0;letter-spacing:.02em}
.crumbs .si{display:flex;align-items:center;flex-wrap:wrap;gap:0}
.crumbs a,.crumbs span{display:inline;height:auto;padding:0;font-size:13px;
  font-weight:400;letter-spacing:.02em;text-transform:none;line-height:1.5}
.crumbs a{color:var(--brass);text-decoration:none}
.crumbs a::after{display:none;content:none}
.crumbs a:hover{color:var(--rust);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink-soft)}
.crumb-sep{opacity:.4;margin:0 .6em;color:var(--brass)}
/* generic page header */
.ph{background:var(--dark-grad);color:var(--cream);padding:4.5rem 0 4rem}
.ph .eyebrow{color:var(--brass)}
.ph h1{font-family:var(--serif);font-weight:300;font-size:clamp(34px,5vw,56px);
  line-height:1.08;margin:.3rem 0 1rem;color:var(--cream)}
.ph h1 em{font-style:italic;color:var(--rust-lt)}
.ph p{max-width:60ch;color:rgba(231,224,208,.72);font-size:17px;line-height:1.7}
.ph-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.6rem}
.ph-tags span{border:1px solid rgba(231,224,208,.22);color:rgba(231,224,208,.8);
  padding:5px 12px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.ph-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}
/* .btn-ghost is defined for light backgrounds (dark text, dark border); on
   the dark page header it renders nearly invisible. */
.ph .btn-ghost,.cta-band .btn-ghost{border-color:rgba(231,224,208,.35);
  color:var(--cream);background:transparent}
.ph .btn-ghost:hover,.cta-band .btn-ghost:hover{background:rgba(231,224,208,.1);
  border-color:rgba(231,224,208,.6);color:#fff}
/* prose + two column layout */
.pw{padding:4.5rem 0}
.pgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:4rem;align-items:start}
.prose h2{font-family:var(--serif);font-weight:300;font-size:clamp(24px,3vw,32px);
  margin:2.6rem 0 1rem;color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--sans);font-weight:600;font-size:17px;margin:1.8rem 0 .6rem}
.prose p{margin:0 0 1.1rem;line-height:1.8;color:var(--ink-soft);font-size:16px}
.prose a{color:var(--rust);text-decoration:underline;text-underline-offset:2px}
.prose ul{margin:0 0 1.2rem 1.1rem;line-height:1.8;color:var(--ink-soft)}
.prose li{margin-bottom:.4rem}
.prose img,.prose picture{max-width:100%;height:auto}
/* spec table */
.spec{border:1px solid var(--border);background:var(--warm)}
.spec h3{font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);padding:1rem 1.4rem;
  border-bottom:1px solid var(--border);margin:0;font-weight:600}
.spec dl{margin:0;padding:.4rem 1.4rem 1.2rem}
.spec dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brass);margin-top:1rem}
.spec dd{margin:.25rem 0 0;font-size:15px;color:var(--ink);line-height:1.5}
.aside-cta{border:1px solid var(--border);padding:1.6rem 1.4rem;margin-top:1.5rem;
  background:var(--cream)}
.aside-cta p{font-size:14px;color:var(--ink-soft);line-height:1.65;margin:0 0 1rem}
.aside-cta .btn{width:100%;justify-content:center}
/* hub grids */
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border)}
.hub-card{background:var(--warm);padding:0;text-decoration:none;display:block;
  position:relative;transition:background .3s}
.hub-card:hover{background:var(--dark-grad)}
.hub-card .hub-body{padding:1.5rem 1.6rem 1.9rem}
.hub-name{font-family:var(--serif);font-size:21px;font-weight:400;color:var(--ink);
  margin:0 0 .5rem}
.hub-card:hover .hub-name{color:var(--cream)}
.hub-desc{font-size:14px;line-height:1.65;color:var(--ink-soft);margin:0}
.hub-card:hover .hub-desc{color:rgba(228,216,192,.6)}
.hub-img{width:100%;height:190px;object-fit:cover;display:block}
/* related */
.rel-wrap{background:var(--warm);padding:4rem 0;border-top:1px solid var(--border)}
.rel-h{margin-bottom:1.8rem}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.rel-card{text-decoration:none;display:block;background:var(--cream);
  border:1px solid var(--border)}
.rel-img{width:100%;height:150px;object-fit:cover;display:block}
.rel-name{display:block;padding:1rem 1.2rem;font-size:15px;color:var(--ink);
  font-weight:500}
.rel-card:hover .rel-name{color:var(--rust)}
/* CTA band */
.cta-band{background:var(--dark-grad);color:var(--cream);padding:3.6rem 0}
.cta-inner{display:flex;gap:2.5rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap}
.cta-band .sh2{color:var(--cream);margin:0 0 .5rem}
.cta-band .sh2 em{color:var(--rust-lt)}
.cta-band p{color:rgba(231,224,208,.68);max-width:52ch;margin:0;font-size:15px;
  line-height:1.65}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.cta-band .btn-ghost{border-color:rgba(231,224,208,.3);color:var(--cream)}
/* The grid was auto-fill sized for 12 chips; with 4 it left ~3 empty tracks
   on the right. auto-fit collapses the empty tracks so the remaining chips
   distribute across the full width. */
@media(min-width:961px){
  .areas-grid{grid-template-columns:repeat(auto-fit,minmax(175px,1fr))}
}
/* Reviews: five named Google reviews in a two-column grid.
   The longest runs full width so the odd count does not leave a hole, and
   align-items:start stops a short card stretching to match a tall neighbour. */
.rv-grid{align-items:start}
.rv-feature{grid-column:1 / -1}
.rv-card blockquote p{margin:0 0 .85rem}
.rv-card blockquote p:last-child{margin-bottom:0}
.rv-name{color:var(--cream);font-weight:600;letter-spacing:.1em}
.rv-when{color:rgba(228,216,192,.45);text-transform:none;letter-spacing:.04em}
.rv-card figcaption{flex-wrap:wrap;gap:10px}
@media(max-width:760px){.rv-feature{grid-column:auto}}

/* GHL's form_embed.js auto-resizes the iframe and overwrites the inline
   height:620px, collapsing it to ~5px so the modal looked empty. A
   stylesheet min-height survives that, which is why /contact/ always worked. */
#ghl-form-iframe{min-height:620px}
#contact-page-form{min-height:680px}

/* The little rule before each eyebrow renders as a stray dash. Removed. */
.h-eyebrow::before,.eyebrow::before{content:none;display:none}
.h-eyebrow,.eyebrow{gap:0}

/* area chips: now real links, so strip the default anchor styling */
a.area-chip{text-decoration:none;color:inherit;cursor:pointer}
a.area-chip:hover{border-color:var(--rust);background:var(--rust-lt);color:var(--rust)}
/* area chips */
.area-list{display:flex;flex-wrap:wrap;gap:8px;margin:1.4rem 0 0}
.area-list a,.area-list span{border:1px solid var(--border);padding:7px 14px;
  font-size:13px;color:var(--ink-soft);text-decoration:none;background:var(--cream)}
.area-list a:hover{border-color:var(--rust);color:var(--rust)}
/* contact page */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.contact-form-wrap{border:1px solid var(--border);background:var(--warm);padding:1px}
.contact-form-wrap iframe{width:100%;min-height:680px;border:none;display:block;
  background:var(--warm)}
.cdetail{margin-bottom:1.6rem}
.cdetail h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);margin:0 0 .4rem;font-weight:600}
.cdetail p,.cdetail a{font-size:16px;color:var(--ink);line-height:1.6;margin:0;
  text-decoration:none}
.cdetail a:hover{color:var(--rust)}
/* FAQ: real headings now wrap the buttons */
.faq-h{margin:0;font-size:inherit;font-weight:inherit}
/* footer heading level fix */
footer .f-col h2{font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);margin:0 0 1rem;font-weight:600}
@media(max-width:960px){
  .pgrid{grid-template-columns:1fr;gap:2.5rem}
  .hub-grid{grid-template-columns:1fr 1fr}
  .rel-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr;gap:2.5rem}
}
@media(max-width:600px){
  .hub-grid{grid-template-columns:1fr}
  .rel-grid{grid-template-columns:1fr}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .pw{padding:3rem 0}
}

/* ===== System font stack (apple.com approach) ======================
   Replaces Cormorant Garamond + Jost, which cost 367 KB of woff2 across
   11 faces — more than every image on the page combined. Nothing is
   downloaded here; each OS uses a display face it already has.
   Optical sizes differ from Cormorant (larger x-height, lower contrast),
   so the display sizes are nudged down slightly to match the old rhythm. */
:root{
  --serif: ui-serif, "New York", "Iowan Old Style", "Apple Garamond", "Palatino Linotype", Palatino, "Times New Roman", Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
nav a{white-space:nowrap}
.hero-h1{font-size:clamp(34px,4.0vw,54px);letter-spacing:-0.022em;font-weight:400;line-height:1.1}
.sh2{font-size:clamp(25px,2.8vw,38px);letter-spacing:-0.018em;font-weight:400}
.phone-lnk{font-size:16px}
.srv-name,.style-name,.p-name,.showcase-name,.featured-title{letter-spacing:-0.01em}
.h-stat-num,.c-stat-num,.rv-score,.q-phone-num{letter-spacing:-0.02em}
.logo svg,.f-logo svg{/* wordmark is vector outlines — unaffected by fonts */}