/* ============================================================
   Bluff & Bay Interiors - site styles
   Brand: deep pine teal + marsh gold + warm cream
   Headlines: Cormorant Garamond · Body: Open Sans
   ============================================================ */

:root {
  --pine-deep: #0E2E30;
  --pine: #2E5A5C;
  --pine-soft: #14383a;
  --gold: #C2A35A;
  --gold-dark: #0E2E30;
  --cream: #F4EDE1;
  --cream-edge: #EFE7D8;
  --ink: #20302F;
  --muted: #6B7B79;
  --mist: #8FA9A3;
  --cream-text: #C9D6D2;
  --border: #D8CDB8;
  --border-input: #DCCFBA;
  --maxw: 1240px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Open Sans', sans-serif;
  color: var(--ink);
  background-color: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--pine-deep); }
input, select, textarea, button { font-family: inherit; }

h1, h2, h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; margin: 0; }

.container { max-width: var(--maxw); margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.container-narrow { max-width: 1000px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }

.eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 18px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; border: none; cursor: pointer; border-radius: 8px;
  font-size: 15px; font-weight: 500; letter-spacing: 0.01em; text-transform: none;
  padding: 16px 32px; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
  text-align: center;
}
.btn-sm { padding: 12px 22px; font-size: 14px; }
.btn-gold { background: var(--gold); color: var(--pine-deep); box-shadow: 0 10px 26px rgba(194,163,90,.3); }
.btn-gold:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 34px rgba(194,163,90,.45); }
.btn-dark { background: var(--pine-deep); color: var(--cream); }
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(14,46,48,.35); }
.btn-outline { background: transparent; color: var(--pine); border: 1px solid var(--pine); font-weight: 500; }
.btn-outline:hover { background: var(--pine); color: var(--cream); }
.btn-ghost { background: transparent; color: var(--cream); border: 1px solid rgba(244,237,225,.45); font-weight: 500; }
.btn-ghost:hover { background: rgba(244,237,225,.1); border-color: rgba(244,237,225,.85); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cream-edge);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand img { height: 64px; width: auto; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav-link {
  position: relative; background: none; border: none; cursor: pointer; padding: 6px 0;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); transition: color .18s ease;
}
.nav-link:hover { color: var(--pine); }
.nav-link.active { color: var(--pine); }
.nav-link.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold);
}
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer; padding: 6px;
  flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--pine-deep); transition: .2s ease; }

/* ---------- Generic sections ---------- */
section { position: relative; }
.sec-dark { background: var(--pine-deep); color: var(--cream); }
.sec-pine { background: var(--pine-deep); color: var(--cream); }
.sec-cream { background: var(--cream); }
.pad-lg { padding-top: 92px; padding-bottom: 92px; }
.pad-md { padding-top: 70px; padding-bottom: 70px; }
.center { text-align: center; }

/* ---------- Palm tree accent (from the logo), scattered sparingly: one at the
   top of each page and one in the footer, never more than 1-2 on screen at once ---------- */
.hero::before, .page-hero::before {
  content: ""; position: absolute; top: 0; right: 0; width: 230px; height: 310px;
  background-image: url('../img/palm-tree-mist.svg'); background-repeat: no-repeat;
  background-position: top right; background-size: contain;
  pointer-events: none; z-index: 0;
}
/* Home hero: palm moved to the left so it clears the room photo on the right. */
.hero::before {
  right: auto; left: 0; background-position: top left; transform: scaleX(-1);
}
.site-footer::before {
  content: ""; position: absolute; bottom: 0; left: 0; width: 130px; height: 182px;
  background-image: url('../img/palm-tree-mist.svg'); background-repeat: no-repeat;
  background-position: bottom left; background-size: contain; transform: scaleX(-1);
  pointer-events: none; z-index: 0;
}
.sec-dark > *, .sec-pine > *, .sec-cream > *, .hero > *, .page-hero > * { position: relative; z-index: 1; }
@media (max-width: 640px) {
  .hero::before, .page-hero::before { width: 130px; height: 176px; }
  .site-footer::before { width: 90px; height: 126px; }
}

.page-hero { text-align: center; }
.page-hero .inner { max-width: 1000px; margin: 0 auto; padding: 84px 28px; }
.page-hero h1 { font-size: clamp(40px, 5.5vw, 62px); line-height: 1.05; margin-bottom: 20px; }
.page-hero p { font-size: 18px; line-height: 1.65; color: var(--cream-text); max-width: 600px; margin: 0 auto; }

/* ---------- Home hero ---------- */
.hero { background: var(--pine-deep); color: var(--cream); overflow: hidden; }
.hero-grid {
  max-width: var(--maxw); margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; min-height: 620px;
}
.hero-copy { padding: 80px 0; }
.hero h1 { font-size: clamp(40px, 4.4vw, 58px); line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 26px; }
.hero h1 .alt { color: var(--mist); font-style: italic; }
.hero-lead { font-size: 18px; line-height: 1.65; color: var(--cream-text); max-width: 480px; margin: 0 0 38px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero-area { margin-top: 42px; font-size: 13px; letter-spacing: 0.04em; color: var(--mist); }
.hero-media { padding: 40px 0; }
.hero-media img {
  width: 100%; aspect-ratio: 4/3.4; object-fit: cover; border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
}

/* ---------- Value props ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.vp-card {
  background: #fff; border-radius: 8px; padding: 38px 34px;
  box-shadow: 0 8px 26px rgba(46,90,92,.06); transition: transform .2s ease, box-shadow .2s ease;
}
.vp-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(46,90,92,.14); }
.vp-num { font-family: 'Cormorant Garamond', serif; font-size: 30px; color: var(--gold); font-weight: 600; margin-bottom: 14px; }
.vp-card h3 { font-size: 26px; font-weight: 600; color: var(--pine); margin-bottom: 10px; }
.vp-card p { font-size: 14.5px; color: var(--muted); margin: 0; }

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 60px; align-items: center; }
.split-media img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: 14px; box-shadow: 0 24px 56px rgba(46,90,92,.16); }
.split h2 { font-size: clamp(34px, 4vw, 48px); line-height: 1.08; color: var(--ink); margin-bottom: 20px; }
.split p { font-size: 16.5px; color: var(--muted); margin: 0 0 28px; max-width: 460px; }

/* ---------- Featured / project cards ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; margin-bottom: 44px; }
.sec-head h2 { font-size: clamp(34px, 4vw, 48px); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
.grid-cards.featured { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.project-card {
  border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--cream-edge);
  box-shadow: 0 10px 30px rgba(46,90,92,.08); transition: transform .2s ease, box-shadow .2s ease; cursor: pointer;
}
.project-card.on-dark { background: var(--pine-soft); border: none; }
.project-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(46,90,92,.16); }
.project-card .thumb { aspect-ratio: 4/3.2; overflow: hidden; }
.project-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.project-card:hover .thumb img { transform: scale(1.04); }
.project-card .body { padding: 22px 22px 26px; }
.project-card .tag { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.project-card h3 { font-size: 24px; font-weight: 600; color: var(--pine); }
.project-card.on-dark h3 { color: var(--cream); }

/* ---------- Testimonial ---------- */
.quote { max-width: 900px; margin: 0 auto; text-align: center; }
.quote .mark { font-family: 'Cormorant Garamond', serif; font-size: 64px; line-height: 0; color: var(--gold); height: 30px; }
.quote p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.32; color: var(--pine); margin: 0 0 28px; }
.quote .who { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* ---------- Areas ---------- */
.areas { display: flex; justify-content: center; gap: 14px 40px; flex-wrap: wrap; }
.areas span { font-family: 'Cormorant Garamond', serif; font-size: 26px; color: var(--pine); font-weight: 500; }

/* ---------- Steps (how it works) ---------- */
.step { display: grid; grid-template-columns: 92px 1fr; gap: 30px; padding: 34px 0; border-bottom: 1px solid var(--cream-edge); align-items: start; }
.step .n { font-family: 'Cormorant Garamond', serif; font-size: 56px; font-weight: 600; color: var(--gold); line-height: 1; }
.step h3 { font-size: 30px; font-weight: 600; color: var(--pine); margin-bottom: 10px; }
.step p { font-size: 16px; color: var(--muted); margin: 0; max-width: 620px; }

/* ---------- AI before/after slider ---------- */
.ba {
  position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden;
  cursor: ew-resize; user-select: none; box-shadow: 0 30px 70px rgba(46,90,92,.2); touch-action: none;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .after { z-index: 1; }
.ba .before { z-index: 2; clip-path: inset(0 50% 0 0); }
.ba .lbl { position: absolute; bottom: 22px; z-index: 3; font-family: 'Courier New', monospace; font-size: 12px; letter-spacing: .1em; padding: 8px 13px; border-radius: 6px; }
.ba .lbl-before { left: 22px; color: var(--cream); background: rgba(14,46,48,.65); }
.ba .lbl-after { right: 22px; color: var(--muted); background: rgba(244,237,225,.9); }
.ba .handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--gold); transform: translateX(-1px); z-index: 4; }
.ba .knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; background: var(--gold); box-shadow: 0 4px 14px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; color: var(--pine-deep); font-size: 16px; font-weight: 700; }

.ai-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.ai-point { background: var(--cream); border-radius: 10px; padding: 32px 28px; }
.ai-point h3 { font-size: 24px; font-weight: 600; color: var(--pine); margin-bottom: 10px; }
.ai-point p { font-size: 14.5px; color: var(--muted); margin: 0; }

/* ---------- Services ---------- */
.svc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 44px; align-items: center; padding: 40px 0; border-bottom: 1px solid var(--cream-edge); }
.svc-row img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; }
.svc-row h3 { font-size: 34px; font-weight: 600; color: var(--pine); margin-bottom: 14px; }
.svc-row .body p { font-size: 16px; color: var(--muted); margin: 0 0 14px; }
.svc-row .who { font-size: 14px; color: var(--mist); margin: 0; font-style: italic; }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 60px; align-items: center; }
.about-grid h1 { font-size: clamp(40px, 5vw, 58px); line-height: 1.05; color: var(--ink); margin-bottom: 24px; }
.about-grid p { font-size: 16.5px; line-height: 1.72; color: var(--muted); margin: 0 0 18px; }
.about-photo { max-width: 380px; width: 100%; margin: 0 auto; }
.about-photo img { width: 100%; border-radius: 14px; box-shadow: 0 24px 56px rgba(46,90,92,.18); }
.about-card { background: var(--cream); border-radius: 0 0 14px 14px; padding: 18px 22px; margin-top: -6px; }
.about-card .name { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: var(--pine); }
.about-card .role { font-size: 13px; color: var(--muted); }

/* ---------- Filters / chips ---------- */
.chips { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }
.chip {
  border: 1px solid var(--border); background: #fff; color: var(--pine); cursor: pointer;
  padding: 10px 20px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.chip:hover { background: var(--cream); }
.chip.active { border-color: var(--pine); background: var(--pine); color: var(--cream); }

/* ---------- Blog ---------- */
.grid-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px; }
.post-card { border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--cream-edge); box-shadow: 0 10px 30px rgba(46,90,92,.08); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; cursor: pointer; }
.post-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(46,90,92,.16); }
.post-card .thumb { aspect-ratio: 16/10; overflow: hidden; }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card:hover .thumb img { transform: scale(1.04); }
.post-card .body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.post-meta .date { font-size: 11.5px; color: var(--muted); }
.post-meta .cat { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.post-card h3 { font-size: 25px; font-weight: 600; color: var(--pine); line-height: 1.18; margin-bottom: 12px; }
.post-card p { font-size: 14.5px; color: var(--muted); margin: 0 0 18px; }
.post-card .more { margin-top: auto; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }

/* ---------- Form ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: block; }
.field.full { grid-column: 1 / -1; }
.field-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.field .lab { display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pine); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; border: 1px solid var(--border-input); border-radius: 8px;
  font-size: 15px; color: var(--ink); background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--pine); }
.field .err { display: block; font-size: 12.5px; color: #b04a3a; margin-top: 6px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.oos-note { grid-column: 1 / -1; background: var(--pine); color: var(--cream); border-radius: 8px; padding: 16px 20px; font-size: 14.5px; line-height: 1.5; }
.form-submit { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-submit .note { font-size: 13px; color: var(--mist); }
.success { text-align: center; background: var(--cream); border-radius: 14px; padding: 64px 36px; }
.success .check { width: 66px; height: 66px; border-radius: 50%; background: var(--pine); color: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 24px; }
.success h2 { font-size: 36px; font-weight: 600; color: var(--pine); margin-bottom: 14px; }
.success p { font-size: 16px; color: var(--muted); margin: 0 auto 28px; max-width: 420px; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--gold); }
.cta-band .inner { max-width: var(--maxw); margin: 0 auto; padding: 56px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band .msg { font-family: 'Cormorant Garamond', serif; font-size: clamp(22px, 3.6vw, 40px); font-weight: 600; color: var(--pine-deep); line-height: 1.1; white-space: nowrap; }
@media (max-width: 640px) {
  /* Not enough width for the full line on phones; let it wrap there like before. */
  .cta-band .msg { white-space: normal; }
}

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--pine-deep); color: var(--cream-text); }
.site-footer > * { position: relative; z-index: 1; }
.footer-grid { max-width: var(--maxw); margin: 0 auto; padding: 70px 28px 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 44px; }
.footer-brand .word { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 600; color: var(--cream); line-height: 1; }
.footer-brand .sub { font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); margin-top: 6px; }
.footer-brand p { font-size: 14px; line-height: 1.6; color: var(--mist); margin: 20px 0 0; max-width: 260px; }
.footer-col h4 { font-family: 'Open Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cream); margin: 0 0 16px; }
.footer-col a, .footer-col div { display: block; font-size: 14.5px; color: var(--cream-text); margin-bottom: 11px; }
.footer-col a:hover { color: var(--gold); }
.footer-col .gold { color: var(--gold); }
.footer-bottom { border-top: 1px solid rgba(244,237,225,.12); margin-top: 20px; }
.footer-bottom .inner { max-width: var(--maxw); margin: 0 auto; padding: 22px 28px; font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------- Rendering vs Reality proof ---------- */
.ph-note { text-align: center; font-size: 12.5px; color: var(--mist); margin-top: 14px; font-style: italic; }
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 48px; }
.proof-pair { position: relative; margin: 0; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(46,90,92,.1); }
.proof-pair img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proof-pair .render-half { clip-path: inset(0 50% 0 0); filter: saturate(1.25) contrast(1.06) brightness(1.04); }
.proof-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--gold); transform: translateX(-1px); z-index: 2; }
.proof-tag { position: absolute; bottom: 12px; z-index: 3; font-family: 'Courier New', monospace; font-size: 10px; letter-spacing: .08em; padding: 5px 9px; border-radius: 5px; }
.proof-tag-l { left: 12px; color: var(--cream); background: rgba(14,46,48,.7); }
.proof-tag-r { right: 12px; color: var(--pine); background: rgba(244,237,225,.92); }
.proof-pair figcaption { position: absolute; top: 12px; left: 12px; z-index: 3; font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.55); }

/* ---------- Animations ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal { animation: fadeUp .5s ease both; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .hero-copy { padding: 64px 0 20px; }
  .hero-media { padding: 0 0 56px; }
  .nav-toggle { display: flex; }
  /* The header's backdrop blur turns it into the containing block for the
     fixed menu below, collapsing the slide-in drawer to the header's height
     (menu looked transparent at the top of the phone screen). Drop the blur
     on phones so the drawer sizes to the full viewport and its solid
     background fills the whole panel. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 84vw);
    flex-direction: column; align-items: flex-start; gap: 20px;
    background: var(--pine-deep); padding: 90px 32px 32px; transform: translateX(100%);
    transition: transform .28s ease; box-shadow: -20px 0 60px rgba(0,0,0,.3); z-index: 60;
  }
  .nav.open { transform: translateX(0); }
  .nav .nav-link { color: var(--cream); font-size: 14px; }
  .nav .nav-link:hover, .nav .nav-link.active { color: var(--gold); }
  .nav .nav-link.active::after { display: none; }
  .nav .btn { width: 100%; }
  /* Must stay below .site-header's z-index (50): the header is a positioned
     ancestor of the fixed nav drawer, so the drawer's own z-index (60) only
     ranks it within the header's stacking context. A backdrop z-index above
     50 would paint over the whole header, swallowing taps on the nav links. */
  .nav-backdrop { position: fixed; inset: 0; background: rgba(14,46,48,.5); opacity: 0; pointer-events: none; transition: opacity .28s ease; z-index: 40; }
  .nav-backdrop.show { opacity: 1; pointer-events: auto; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--cream); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--cream); }
}
@media (max-width: 620px) {
  .pad-lg { padding-top: 64px; padding-bottom: 64px; }
  .step { grid-template-columns: 1fr; gap: 8px; }
  .step .n { font-size: 44px; }
  .form { grid-template-columns: 1fr; }
  .sec-head { align-items: flex-start; }
  /* Shrink the before/after slider labels so the two text boxes fit on a phone */
  .ba .lbl { font-size: 9.5px; letter-spacing: .06em; padding: 5px 8px; bottom: 12px; max-width: 44%; }
  .ba .lbl-before { left: 12px; }
  .ba .lbl-after { right: 12px; }
  .ba .knob { width: 38px; height: 38px; font-size: 14px; }
  .sec-dark::before, .sec-pine::before, .hero::before, .site-footer::before, .sec-cream::before {
    width: 130px; height: 130px;
  }
}

/* ---------- Blog article (native post pages) ---------- */
.article { max-width: 760px; margin: 0 auto; }
.article .meta { font-size: 13px; color: var(--muted); letter-spacing: .04em; margin-bottom: 8px; }
.article .meta .cat { color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-left: 10px; }
.article h1 { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.08; color: var(--ink); margin: 0 0 6px; }
.article .lede-img { width: 100%; border-radius: 14px; margin: 26px 0 30px; aspect-ratio: 16/10; object-fit: cover; box-shadow: 0 16px 40px rgba(46,90,92,.14); }
.article p { font-size: 17px; line-height: 1.78; color: #3a4a48; margin: 0 0 20px; }
.article ul { font-size: 17px; line-height: 1.78; color: #3a4a48; margin: 0 0 20px; padding-left: 22px; }
.article li { margin: 0 0 8px; }
.article h2 { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 600; color: var(--pine); margin: 34px 0 12px; }
.article .back { display: inline-block; margin-bottom: 18px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }