*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --charcoal:#2B2B2D;
  --soft-black:#1A1A1D;
  --slate:#6B6B70;
  --greige:#BDB6AF;
  --sand:#DCCFC6;
  --stone:#E9E2DD;
  --rose-clay:#A67B73;
  --rose-clay-deep:#8C6962;
  --mauve-brown:#7B5B55;
  --rose-gold:#D4B08C;
  --blush:#F3E9E4;
  --ivory:#FAF8F7;
  --white:#FFFFFF;
  --text:#2B2B2D;
  --text-mid:#5B5B60;
  --text-muted:#8C8680;
  --border:rgba(43,43,45,0.10);
  --border-rose:rgba(166,123,115,0.30);
  --serif:'Playfair Display',Georgia,'Book Antiqua',serif;
  --sans:'Lato',-apple-system,'Segoe UI',sans-serif;
  --radius:4px;
  --radius-lg:10px;
  --shadow:0 2px 20px rgba(43,43,45,0.08);
  --shadow-lg:0 8px 48px rgba(43,43,45,0.16);
}
html{font-size:16px;overflow-x:hidden}
/* Note: scroll-behavior is intentionally NOT 'smooth' here. The wheel
   smooth-scroll library (smoothscroll.min.js) animates the page via
   repeated scrollTo() calls; CSS smooth-scroll re-animates each of
   those calls and the two fight to a standstill. Anchor links get
   smooth behavior via a one-shot scrollIntoView in script.js. */
body{font-family:var(--sans);color:var(--text);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%;}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ─── ANIMATIONS ─── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal.visible{opacity:1;transform:none}
.reveal-left{opacity:0;transform:translateX(-28px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal-left.visible{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(28px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal-right.visible{opacity:1;transform:none}
.delay-1{transition-delay:0.1s}
.delay-2{transition-delay:0.2s}
.delay-3{transition-delay:0.3s}
.delay-4{transition-delay:0.4s}

/* ─── NAV ─── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;height:72px;
  background:rgba(43,43,45,0.97);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:background 0.3s,border-color 0.3s,box-shadow 0.3s;
}
/* When the homepage is scrolled to the very top, the nav fades into the
   dark hero. As soon as the user scrolls past the hero, the .hero-mode
   class is removed (see script.js) and the nav goes back to its default
   charcoal panel so it stays readable over white sections. */
.home nav.hero-mode{
  background:transparent;
  border-bottom-color:transparent;
  backdrop-filter:none;
}
.home nav.hero-mode .btn-nav{
  background:var(--rose-clay);color:var(--charcoal);
}
.home nav.hero-mode .btn-nav:hover{background:var(--rose-clay-deep)}
.nav-logo{
  display:flex;align-items:center;
}
.nav-logo img{
  display:block;height:42px;width:auto;
}
.nav-links{display:flex;gap:36px;list-style:none;align-items:center}
.nav-links a{
  font-size:0.8rem;letter-spacing:0.10em;text-transform:uppercase;
  color:rgba(255,255,255,0.72);transition:color 0.2s;font-weight:400;
}
.nav-links a:hover{color:var(--white)}

/* Portal link in the nav (injected by script.js). Plain inline link so its
   text baseline matches the other nav items; the lock icon sits inline with
   a slight negative vertical-align so its center lines up with the cap height
   of the uppercase label. */
.nav-portal-link{
  font-size:0.8rem;letter-spacing:0.10em;text-transform:uppercase;
  color:rgba(255,255,255,0.72);transition:color 0.2s;font-weight:400;
}
.nav-portal-link:hover,.nav-portal-link.active{color:var(--rose-clay);}
.nav-portal-link .nav-portal-lock{
  display:inline-block;
  width:13px;height:13px;
  vertical-align:-2px;
  margin-right:6px;
  stroke:currentColor;color:#4a8a5e;
}
.nav-portal-link:hover .nav-portal-lock{color:#4a8a5e;}
.nav-right{display:flex;align-items:center;gap:20px}
.nav-phone{
  font-size:0.78rem;letter-spacing:0.06em;
  color:rgba(255,255,255,0.55);
}
.btn-nav{
  padding:9px 22px;border-radius:var(--radius);
  background:var(--rose-clay);color:var(--charcoal);
  font-size:0.78rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
  transition:background 0.2s,transform 0.15s;
  border:none;cursor:pointer;font-family:var(--sans);
}
.btn-nav:hover{background:var(--rose-clay-deep);transform:translateY(-1px)}

/* ─── HERO ─── */
.hero{
  min-height:100vh;
  /* Dark hero matched to bulb.jpg's own near-black backdrop so the
     image's bg disappears against the page bg. */
  background:#1F1F22;
  display:grid;grid-template-columns:1fr 1fr;
  padding-top:72px;
  position:relative;overflow:hidden;
  color:#EFE2D7;
}
/* Bulb image anchored to the right column. The radial mask is centered at
   70% horizontal so the bright spot always sits in the right portion of
   the hero, even when the page narrows and the text column grows toward
   center. With hero bg ≈ image bg, any tiny luminance delta on the soft
   mask fade is invisible. */
/* The bulb img is wrapped in <picture> for WebP/JPG fallback. We move the
   bulb's absolute positioning + radial mask onto picture itself so picture
   is removed from .hero's grid flow. Otherwise picture would take column 2
   and push .hero-right (sparkles) onto a new row at bottom-left. The inner
   img then just fills its picture box; the mask on picture clips both. */
.hero > picture{
  position:absolute;
  top:0;bottom:0;right:0;
  width:60%;
  pointer-events:none;
  z-index:0;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 0%,#000 30%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 0%,#000 30%,transparent 100%);
}
.hero-bulb{
  width:100%;height:100%;
  object-fit:cover;object-position:center center;
  display:block;
}
.hero-left,.hero-right{position:relative;z-index:2}
.hero-left{
  display:flex;flex-direction:column;justify-content:center;
  padding:104px 48px 64px 72px;
  position:relative;z-index:2;
}
.hero-pitch{
  font-family:var(--serif);font-size:clamp(2.1rem,3.6vw,3.3rem);
  font-weight:600;line-height:1.10;color:#FFFFFF;
  margin-bottom:24px;letter-spacing:-0.005em;
}
.hero-bullets{
  list-style:none;display:flex;flex-direction:column;gap:18px;
  margin:8px 0 0;padding:0;max-width:560px;
  color:rgba(239,226,215,0.85);font-size:0.98rem;line-height:1.55;font-weight:300;
}
.hero-bullets li{counter-increment:hero-bullets}
.hero-bullets{counter-reset:hero-bullets}
.hero-bullets li::before{
  content:counter(hero-bullets) ". ";
  color:var(--rose-clay);font-weight:600;
}
.hero-bullets strong{color:var(--rose-clay);font-weight:600}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:28px;
}
.hero-eyebrow-line{width:32px;height:1px;background:rgba(239,226,215,0.45)}
.hero-eyebrow-text{
  font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(239,226,215,0.65);font-weight:400;
}
.hero h1{
  font-family:var(--serif);font-size:clamp(2.8rem,4.5vw,4.2rem);
  font-weight:600;line-height:1.10;color:#FFFFFF;
  margin-bottom:24px;letter-spacing:-0.005em;
}
.hero h1 em{font-style:italic;color:var(--rose-clay);font-weight:500}
.hero h1 .hero-legacy{color:var(--rose-clay)}
.hero-sub{
  font-size:1.02rem;line-height:1.72;
  color:rgba(239,226,215,0.72);max-width:480px;margin-bottom:44px;font-weight:300;
}
.hero-ctas{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:56px}
.btn-primary{
  position:relative;overflow:hidden;
  padding:15px 32px;border-radius:var(--radius);
  background:var(--rose-clay);color:var(--charcoal);
  font-size:0.82rem;font-weight:500;letter-spacing:0.09em;text-transform:uppercase;
  transition:all 0.2s;border:none;cursor:pointer;font-family:var(--sans);
  display:inline-flex;align-items:center;gap:8px;
}
.btn-primary::after{
  content:"";position:absolute;top:0;left:-60%;
  width:50%;height:100%;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,0.42) 50%,transparent 100%);
  transform:skewX(-22deg);
  animation:btnPrimaryShine 4.2s ease-in-out infinite;
  pointer-events:none;
}
.btn-primary > *{position:relative;z-index:1}
.btn-primary:hover{background:var(--rose-clay-deep);transform:translateY(-2px);box-shadow:0 8px 24px rgba(166,123,115,0.30)}

@keyframes btnPrimaryShine{
  0%   {left:-60%}
  55%  {left:120%}
  100% {left:120%}
}
.btn-outline{
  padding:15px 32px;border-radius:var(--radius);
  background:transparent;color:#F0E3D9;
  font-size:0.82rem;font-weight:400;letter-spacing:0.09em;text-transform:uppercase;
  border:1px solid rgba(240,227,217,0.32);transition:all 0.2s;cursor:pointer;font-family:var(--sans);
}
.btn-outline:hover{border-color:rgba(240,227,217,0.65);background:rgba(240,227,217,0.06)}
.hero-trust{
  display:flex;gap:28px;flex-wrap:wrap;
  padding-top:36px;border-top:1px solid rgba(240,227,217,0.16);
}
.trust-item{
  display:flex;flex-direction:column;gap:4px;
}
.trust-item-label{
  font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(240,227,217,0.52);font-weight:400;
}
.trust-item-value{
  font-size:0.88rem;font-weight:500;
  color:rgba(240,227,217,0.92);letter-spacing:0.02em;
}
.hero-right{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  padding:96px 72px 48px 24px;
}

/* ─── HERO FORM (sits on the right of the hero, above the fold) ─── */
.hero-form{
  width:100%;max-width:520px;
  background:rgba(43,43,45,0.82);
  border:1px solid rgba(240,227,217,0.10);
  border-radius:var(--radius-lg);
  padding:32px 32px 28px;
  box-shadow:0 24px 60px rgba(0,0,0,0.42);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex;flex-direction:column;gap:14px;
}
.hero-form-title{
  font-family:var(--serif);font-weight:500;
  font-size:1.55rem;color:#FFFFFF;text-align:center;
  margin-bottom:6px;letter-spacing:0.005em;
}
.hero-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero-form .form-group{display:flex;flex-direction:column;gap:0}
.hero-form input,
.hero-form select,
.hero-form textarea{
  width:100%;background:#FFFFFF;color:var(--text);
  border:1px solid transparent;
  border-radius:var(--radius);
  padding:13px 16px;
  font-family:var(--sans);font-size:0.95rem;
  outline:none;transition:border-color 0.15s,box-shadow 0.15s;
}
.hero-form input::placeholder,
.hero-form textarea::placeholder{color:var(--text-muted)}
.hero-form input:focus,
.hero-form select:focus,
.hero-form textarea:focus{
  border-color:var(--rose-clay);
  box-shadow:0 0 0 3px rgba(166,123,115,0.20);
}
.hero-form textarea{resize:vertical;min-height:96px}
.hero-form select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A67B73' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
  padding-right:36px;
}
.hero-form-submit{
  margin-top:10px;position:relative;overflow:hidden;
  width:100%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#C18A82 0%,var(--rose-clay) 50%,var(--rose-clay-deep) 100%);
  color:#FFFFFF;
  font-family:var(--sans);font-weight:700;
  font-size:1.05rem;letter-spacing:0.18em;text-transform:uppercase;
  padding:20px 24px;border-radius:var(--radius);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 10px 24px rgba(166,123,115,0.40),
    0 0 28px rgba(212,176,140,0.25);
  transition:transform 0.18s ease,box-shadow 0.22s ease,filter 0.18s ease;
  animation:heroCtaPulse 2.6s ease-in-out infinite;
}
.hero-form-submit::after{
  content:"";position:absolute;top:0;left:-60%;
  width:50%;height:100%;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,0.28) 50%,transparent 100%);
  transform:skewX(-22deg);
  animation:heroCtaShine 3.8s ease-in-out infinite;
  pointer-events:none;
}
.hero-form-submit:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.14) inset,
    0 16px 36px rgba(166,123,115,0.55),
    0 0 36px rgba(212,176,140,0.40);
}
.hero-form-submit:active{transform:translateY(0)}
.hero-form-submit:disabled{opacity:0.7;cursor:wait;transform:none;animation:none}
.hero-form-submit:disabled::after{display:none}

@keyframes heroCtaPulse{
  0%,100%{box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 10px 24px rgba(166,123,115,0.40),
    0 0 28px rgba(212,176,140,0.25);}
  50%{box-shadow:
    0 0 0 1px rgba(255,255,255,0.14) inset,
    0 14px 34px rgba(166,123,115,0.55),
    0 0 44px rgba(212,176,140,0.45);}
}
@keyframes heroCtaShine{
  0%   {left:-60%}
  55%  {left:120%}
  100% {left:120%}
}
.hero-form .contact-form-status{
  margin-top:2px;font-size:0.88rem;color:rgba(239,226,215,0.9);
}
.hero-form .contact-form-status.success{color:#9BD9A8}
.hero-form .contact-form-status.error{color:#F4A89A}

/* ─── Mobile: stack the hero-pitch / hero-form layout used on the
   /book-your-free-consultation/ page ─── */
@media (max-width:900px){
  .hero.hero-pitch-form{grid-template-columns:1fr;min-height:auto;padding-top:88px;padding-bottom:32px}
  .hero.hero-pitch-form .hero-left{padding:32px 24px 8px}
  .hero.hero-pitch-form .hero-right{padding:8px 24px 32px;align-items:stretch;justify-content:center;display:flex}
  .hero-form{max-width:none;width:100%;padding:24px 22px 22px}
  .hero-form-title{font-size:1.3rem}
  .hero-form .form-row{grid-template-columns:1fr}
  .hero-bullets{max-width:none}
}

/* ─── HERO SPARKLES ─── */
.hero-sparkles{
  position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 100%);
}
.sparkle{
  position:absolute;
  left:var(--x);top:var(--y);
  width:var(--s,6px);height:var(--s,6px);
  border-radius:50%;
  background:radial-gradient(circle,#FFF6E6 0%,rgba(255,228,200,0.7) 35%,transparent 70%);
  box-shadow:
    0 0 10px 2px rgba(255,228,200,0.55),
    0 0 22px 4px rgba(212,176,140,0.30);
  opacity:0;
  transform:translate(-50%,-50%) scale(0.4);
  animation:sparkle 5.4s var(--d,0s) infinite ease-in-out;
  will-change:opacity,transform;
}
/* Warm rose-gold variant for variety */
.sparkle.warm{
  background:radial-gradient(circle,#F2D6BE 0%,rgba(212,176,140,0.7) 40%,transparent 75%);
  box-shadow:
    0 0 10px 2px rgba(212,176,140,0.50),
    0 0 24px 5px rgba(166,123,115,0.28);
}
/* Brighter sparkle, used for the filament center */
.sparkle.bright{
  background:radial-gradient(circle,#FFFFFF 0%,rgba(255,235,210,0.85) 35%,transparent 75%);
  box-shadow:
    0 0 14px 3px rgba(255,228,200,0.75),
    0 0 32px 7px rgba(212,176,140,0.40),
    0 0 60px 14px rgba(166,123,115,0.20);
}
@keyframes sparkle{
  0%, 100% { opacity:0; transform:translate(-50%,-50%) scale(0.4); }
  6%       { opacity:0.95; transform:translate(-50%,-50%) scale(1.25); }
  14%      { opacity:0.4; transform:translate(-50%,-50%) scale(0.85); }
  22%      { opacity:1; transform:translate(-50%,-50%) scale(1.45) rotate(8deg); }
  34%      { opacity:0; transform:translate(-50%,-50%) scale(0.4); }
}
@media (prefers-reduced-motion: reduce){
  .sparkle{ animation:none; opacity:0.55; transform:translate(-50%,-50%) scale(1); }
}

/* ─── STATS BAR ─── */
.stats-bar{
  background:var(--blush);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:36px 80px;
  display:flex;justify-content:space-between;align-items:center;
  gap:32px;
}
.stat-item{text-align:center;flex:1}
.stat-num{
  font-family:var(--serif);font-size:2.4rem;font-weight:600;
  color:var(--charcoal);line-height:1;display:block;margin-bottom:6px;
}
.stat-label{
  font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--text-muted);font-weight:400;
}
.stat-divider{width:1px;height:48px;background:var(--border)}

/* ─── SERVICES ─── */
.services{padding:100px 80px;background:var(--white)}
.section-header{margin-bottom:64px}
.section-eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
}
.section-eyebrow-line{width:28px;height:1px;background:var(--rose-clay)}
.section-eyebrow-text{
  font-size:0.70rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--rose-clay);font-weight:400;
}
.section-title{
  font-family:var(--serif);font-size:clamp(2rem,3vw,3rem);
  font-weight:600;color:var(--charcoal);line-height:1.18;margin-bottom:16px;
}
.section-sub{
  font-size:1rem;color:var(--text-muted);max-width:560px;line-height:1.72;font-weight:300;
}
.services-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.service-card{
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:36px 30px;background:var(--white);
  transition:all 0.3s;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  color:inherit;text-decoration:none;cursor:pointer;
}
.service-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--rose-clay);transform:scaleX(0);transform-origin:left;
  transition:transform 0.3s;
}
.service-card:hover{border-color:rgba(166,123,115,0.25);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.service-card:hover::before{transform:scaleX(1)}
.service-icon{
  width:48px;height:48px;border-radius:var(--radius);
  background:var(--blush);display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;
}
.service-icon svg{width:22px;height:22px;stroke:var(--rose-clay);stroke-width:1.6;fill:none}
.service-num{
  font-family:var(--serif);font-size:0.8rem;color:var(--text-muted);
  margin-bottom:10px;display:block;
}
.service-name{
  font-family:var(--serif);font-size:1.3rem;font-weight:600;
  color:var(--charcoal);margin-bottom:12px;line-height:1.25;
}
.service-desc{
  font-size:0.88rem;color:var(--text-muted);line-height:1.70;
  margin-bottom:28px;flex-grow:1;
}
.service-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.78rem;letter-spacing:0.10em;text-transform:uppercase;
  color:var(--rose-clay);font-weight:500;
  transition:gap 0.2s;
}
.service-link:hover{gap:10px}
.service-link svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}

/* ─── ABOUT ─── */
.about{
  padding:100px 80px;background:var(--blush);
  display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:center;
}
.about-img-wrap{position:relative}
.about-img-main{
  border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:4/5;
}
.about-img-main img{width:100%;height:100%;object-fit:cover;object-position:top center}
.about-img-placeholder{
  width:100%;height:100%;min-height:480px;
  background:linear-gradient(145deg,var(--blush),var(--sand));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:1.2rem;color:rgba(43,43,45,0.4);
  text-align:center;padding:30px;letter-spacing:0.04em;
}
.about-credential-strip{
  position:absolute;bottom:24px;left:-28px;
  background:var(--charcoal);color:var(--white);
  border-radius:var(--radius-lg);padding:16px 22px;
  box-shadow:var(--shadow-lg);min-width:220px;
}
.about-cred-title{
  font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.45);margin-bottom:8px;display:block;
}
.about-cred-name{
  font-family:var(--serif);font-size:1.1rem;font-weight:600;
  color:var(--white);display:block;margin-bottom:4px;
}
.about-cred-role{
  font-size:0.78rem;color:var(--rose-clay);display:block;
}
.about-content{}
.about-bio{
  font-size:1.02rem;line-height:1.80;color:var(--text-mid);margin-bottom:28px;font-weight:300;
}
.about-quote{
  border-left:2px solid var(--rose-clay);padding-left:24px;margin:36px 0;
}
.about-quote p{
  font-family:var(--serif);font-size:1.25rem;font-style:italic;
  line-height:1.60;color:var(--charcoal);
}
.about-badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.badge{
  padding:8px 16px;border-radius:2px;
  border:1px solid var(--border-rose);
  font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--rose-clay);font-weight:400;background:rgba(166,123,115,0.04);
}

/* ─── PROCESS ─── */
.process{padding:100px 80px;background:var(--white)}
.process-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:48px;
  margin-top:64px;position:relative;
}
.process-grid::before{
  content:'';position:absolute;top:30px;left:calc(16.66% + 16px);
  right:calc(16.66% + 16px);height:1px;
  background:linear-gradient(90deg,var(--rose-clay),transparent 50%,var(--rose-clay));
  opacity:0.25;
}
.process-step{text-align:center;padding:0 20px}
.process-num{
  font-family:var(--serif);font-size:3rem;font-weight:600;
  color:var(--blush);line-height:1;margin-bottom:20px;display:block;
}
.process-icon{
  width:60px;height:60px;border-radius:50%;
  background:var(--blush);border:1px solid var(--border-rose);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
}
.process-icon svg{width:24px;height:24px;stroke:var(--rose-clay);stroke-width:1.6;fill:none}
.process-title{
  font-family:var(--serif);font-size:1.2rem;font-weight:600;
  color:var(--charcoal);margin-bottom:10px;
}
.process-desc{font-size:0.88rem;color:var(--text-muted);line-height:1.72}

/* ─── CTA BANNER ─── */
.cta-banner{
  background:linear-gradient(135deg,#B68A82 0%,#A67B73 60%,#8C6962 100%);
  padding:80px;
  display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:48px;position:relative;overflow:hidden;
}
.cta-banner::after{
  content:'';position:absolute;right:0;top:0;bottom:0;width:40%;
  background:linear-gradient(90deg,transparent,rgba(43,43,45,0.06));
  pointer-events:none;
}
.cta-label{
  font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--charcoal);display:block;margin-bottom:16px;font-weight:600;
}
.cta-title{
  font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.8rem);
  font-weight:600;color:var(--charcoal);line-height:1.18;
}
.cta-title em{font-style:italic;color:#fff}
.cta-right{display:flex;flex-direction:column;align-items:flex-end;gap:16px;position:relative;z-index:1}
.cta-phone{
  font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--charcoal);
  text-decoration:none;
}
.cta-phone:hover{color:var(--charcoal);text-decoration:underline}
.cta-phone-label{
  font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(43,43,45,0.55);display:block;text-align:right;margin-bottom:4px;
  font-weight:600;
}
/* Book Online button on the rose-gold banner: inverted to charcoal-on-cream */
.cta-banner .btn-primary{
  background:var(--charcoal);color:#F4E9DE;
}
.cta-banner .btn-primary:hover{
  background:#1A1A1C;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,0.20);
}

/* ─── NEWS ─── */
.news{padding:100px 80px;background:var(--blush)}
.news-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:64px;
}
.news-card{
  display:block;color:inherit;
  background:var(--white);border-radius:var(--radius-lg);
  border:1px solid var(--border);overflow:hidden;
  transition:transform 0.3s,box-shadow 0.3s;
}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.news-card-img{
  height:200px;overflow:hidden;
  background:linear-gradient(145deg,var(--mauve-brown),var(--charcoal));
}
.news-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.news-card-img-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.78rem;letter-spacing:0.06em;color:rgba(255,255,255,0.6);
}
.news-footer{
  display:flex;justify-content:center;margin-top:48px;
}
.news-footer .btn-outline{
  color:var(--charcoal);border-color:var(--border);
}
.news-footer .btn-outline:hover{
  border-color:var(--rose-clay);color:var(--rose-clay);background:transparent;
}
.news-empty{
  grid-column:1/-1;text-align:center;padding:40px 20px;
  color:var(--text-muted);
}
.news-card-body{padding:28px}
.news-tag{
  display:inline-block;margin-bottom:12px;padding:4px 10px;
  border-radius:2px;background:var(--blush);
  font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--rose-clay);
}
.news-title{
  font-family:var(--serif);font-size:1.1rem;font-weight:600;
  color:var(--charcoal);line-height:1.35;margin-bottom:12px;
}
.news-excerpt{font-size:0.83rem;color:var(--text-muted);line-height:1.65}
.news-read{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:18px;font-size:0.75rem;letter-spacing:0.10em;text-transform:uppercase;
  color:var(--rose-clay);font-weight:500;
}

/* ─── CONTACT ─── */
.contact{
  padding:100px 80px;background:var(--white);
}
.contact-header{
  max-width:1080px;margin:0 auto 64px;text-align:center;
}
.contact-header .section-title,
.contact-header .contact-lede{max-width:760px;margin-left:auto;margin-right:auto;}
.contact-header .section-eyebrow{justify-content:center}
.contact-lede{
  font-size:1.05rem;line-height:1.72;color:var(--text-mid);
  margin:14px auto 40px;max-width:600px;font-weight:300;
}
.contact-info-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  text-align:left;
}
.contact-detail{
  display:flex;gap:14px;align-items:flex-start;color:inherit;
  padding:18px 20px;border:1px solid var(--border);border-radius:var(--radius-lg);
  transition:border-color 0.2s,background 0.2s;
}
a.contact-detail:hover{
  border-color:var(--rose-clay);background:var(--ivory);
}
.contact-detail-icon{
  width:40px;height:40px;border-radius:var(--radius);flex-shrink:0;
  background:var(--blush);display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}
.contact-detail-icon svg{width:18px;height:18px;stroke:var(--rose-clay);stroke-width:1.6;fill:none}
.contact-detail-label{
  font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:4px;display:block;font-weight:700;
}
.contact-detail-value{
  font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--charcoal);
  display:block;line-height:1.4;
}
/* Keep the phone number on a single line. The address still wraps where appropriate. */
.contact-detail[href^="tel:"] .contact-detail-value{white-space:nowrap;}
.contact-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;
  max-width:1200px;margin:0 auto;
}
.contact-col{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:36px 36px 30px;
  display:flex;flex-direction:column;
  scroll-margin-top:92px;
}
.contact-col-header{margin-bottom:24px}
.contact-col-title{
  font-family:var(--serif);font-size:1.5rem;font-weight:600;
  color:var(--charcoal);margin-bottom:8px;
}
.contact-col-sub{
  font-size:0.92rem;color:var(--text-muted);line-height:1.6;
}
.contact-cal-embed{
  flex:1;min-height:680px;width:100%;
  border:1px solid var(--border);border-radius:var(--radius);overflow:auto;
  background:var(--white);
}
.contact-form-status{
  margin-top:14px;padding:12px 14px;border-radius:var(--radius);
  font-size:0.9rem;line-height:1.5;
}
.contact-form-status.success{
  background:rgba(46,122,79,0.08);color:#2e7a4f;border:1px solid rgba(46,122,79,0.22);
}
.contact-form-status.error{
  background:rgba(184,54,14,0.08);color:#b8360e;border:1px solid rgba(184,54,14,0.22);
}
.contact-form{display:flex;flex-direction:column;gap:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{
  font-size:0.72rem;letter-spacing:0.10em;text-transform:uppercase;
  color:var(--text-muted);font-weight:400;
}
.form-group input,
.form-group select,
.form-group textarea{
  padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius);
  font-size:0.92rem;font-family:var(--sans);color:var(--text);
  background:var(--white);transition:border-color 0.2s;outline:none;
  appearance:none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{border-color:var(--rose-clay)}
.form-group textarea{resize:vertical;min-height:110px}
.form-group select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A67B73' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.btn-form{
  padding:15px 36px;border-radius:var(--radius);width:100%;
  background:var(--charcoal);color:var(--white);
  font-size:0.82rem;font-weight:500;letter-spacing:0.09em;text-transform:uppercase;
  border:none;cursor:pointer;font-family:var(--sans);
  transition:background 0.2s,transform 0.15s;
}
.btn-form:hover{background:var(--mauve-brown);transform:translateY(-1px)}
.or-divider{
  text-align:center;font-size:0.78rem;color:var(--text-muted);
  display:flex;align-items:center;gap:16px;
}
.or-divider::before,.or-divider::after{
  content:'';flex:1;height:1px;background:var(--border);
}

/* ─── FOOTER ─── */
footer{
  background:var(--charcoal);padding:48px 80px;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:64px;
  border-top:1px solid rgba(255,255,255,0.06);
}
.footer-brand{}
.footer-logo{
  display:block;margin-bottom:18px;
}
.footer-logo img{
  display:block;height:56px;width:auto;
}
.footer-tagline{
  font-size:0.82rem;line-height:1.65;
  color:rgba(255,255,255,0.42);max-width:280px;margin-bottom:20px;font-weight:300;
}
.footer-address{
  font-size:0.78rem;color:rgba(255,255,255,0.35);line-height:1.65;
}
.footer-col-title{
  font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(255,255,255,0.38);margin-bottom:18px;
}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-links a{
  font-size:0.84rem;color:rgba(255,255,255,0.55);transition:color 0.2s;
}
.footer-links a:hover{color:var(--white)}
.footer-bottom{
  background:var(--charcoal);padding:20px 80px;
  border-top:1px solid rgba(255,255,255,0.05);
  display:flex;justify-content:space-between;align-items:center;
}
.footer-copy{font-size:0.75rem;color:rgba(255,255,255,0.28)}

/* ─── SERVICE DETAIL PAGE ─── */
.service-hero{
  background:var(--charcoal);color:var(--white);
  padding:140px 80px 80px;position:relative;overflow:hidden;
}
.service-hero::before{
  content:'';position:absolute;top:-100px;right:-80px;width:600px;height:600px;
  background:radial-gradient(circle,rgba(166,123,115,0.10) 0%,transparent 65%);
  pointer-events:none;
}
.service-hero-inner{position:relative;z-index:1;max-width:780px}
.service-hero .service-num{
  font-family:var(--serif);font-size:0.86rem;color:var(--rose-clay);
  letter-spacing:0.18em;text-transform:uppercase;margin-bottom:18px;display:inline-block;
}
.service-hero-title{
  font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.6rem);
  font-weight:600;line-height:1.12;color:var(--white);margin-bottom:20px;
}
.service-hero-sub{
  font-size:1.10rem;line-height:1.7;color:rgba(255,255,255,0.70);
  max-width:600px;font-weight:300;margin-bottom:34px;
}
.service-hero-meta{
  display:flex;flex-wrap:wrap;gap:32px;
  padding-top:30px;border-top:1px solid rgba(255,255,255,0.10);
}
.service-meta-item{
  display:flex;flex-direction:column;gap:4px;
}
.service-meta-label{
  font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.42);
}
.service-meta-value{
  font-size:0.92rem;color:rgba(255,255,255,0.92);font-weight:500;
}

.service-body{
  background:var(--white);padding:80px 80px 90px;
}
.service-body-grid{
  display:grid;grid-template-columns:7fr 4fr;gap:64px;
  max-width:1200px;margin:0 auto;align-items:start;
}
.service-content > * + *{margin-top:18px}
.service-content h2{
  font-family:var(--serif);font-size:1.6rem;font-weight:600;
  color:var(--charcoal);line-height:1.25;
  margin-top:44px;margin-bottom:14px;
}
.service-content h2:first-child{margin-top:0}
.service-content p{
  font-size:1rem;line-height:1.78;color:var(--text-mid);font-weight:400;
}
.service-content strong{color:var(--charcoal);font-weight:700}
.service-checklist{
  list-style:none;padding:0;margin:0;
}
.service-checklist li{
  position:relative;padding:8px 0 8px 30px;
  font-size:0.98rem;line-height:1.6;color:var(--text-mid);
  border-bottom:1px solid var(--border);
}
.service-checklist li:last-child{border-bottom:none}
.service-checklist li::before{
  content:'';position:absolute;left:0;top:14px;
  width:14px;height:14px;border-radius:50%;
  background:var(--blush);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A67B73' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8.5 6.5 12 13 5'/%3E%3C/svg%3E");
  background-size:10px;background-position:center;background-repeat:no-repeat;
}
.service-process{
  list-style:none;padding:0;margin:0;counter-reset:step;
}
.service-process li{
  counter-increment:step;
  position:relative;padding:18px 0 18px 56px;
  font-size:0.98rem;line-height:1.6;color:var(--text-mid);
  border-bottom:1px solid var(--border);
}
.service-process li:last-child{border-bottom:none}
.service-process li::before{
  content:counter(step);
  position:absolute;left:0;top:18px;
  width:36px;height:36px;border-radius:50%;
  background:var(--rose-clay);color:var(--white);
  font-family:var(--serif);font-size:0.95rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.service-process li strong{display:block;color:var(--charcoal);margin-bottom:4px;font-size:1.02rem}
.service-faq{
  border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:10px;background:var(--white);
}
.service-faq summary{
  padding:18px 22px;font-family:var(--serif);font-size:1.05rem;
  font-weight:600;color:var(--charcoal);cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.service-faq summary::-webkit-details-marker{display:none}
.service-faq summary::after{
  content:'+';color:var(--rose-clay);font-size:1.4rem;font-weight:300;
  transition:transform 0.2s;
}
.service-faq[open] summary::after{transform:rotate(45deg)}
.service-faq[open] summary{border-bottom:1px solid var(--border)}
.service-faq p{
  padding:18px 22px;font-size:0.96rem;line-height:1.7;color:var(--text-mid);
}

.service-cta-card{
  background:var(--charcoal);color:var(--white);
  padding:36px 32px;border-radius:var(--radius-lg);
  position:sticky;top:96px;
}
.service-cta-card h3{
  font-family:var(--serif);font-size:1.4rem;font-weight:600;
  color:var(--white);margin-bottom:10px;
}
.service-cta-card p{
  font-size:0.94rem;line-height:1.6;color:rgba(255,255,255,0.65);
  margin-bottom:22px;font-weight:300;
}
.service-cta-card .btn-primary,
.service-cta-card .btn-outline-light{
  display:flex;justify-content:center;width:100%;margin-bottom:12px;
}
.btn-outline-light{
  padding:13px 24px;border-radius:var(--radius);
  background:transparent;color:var(--white);
  font-size:0.78rem;font-weight:400;letter-spacing:0.09em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.32);transition:all 0.2s;cursor:pointer;
  font-family:var(--sans);text-align:center;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn-outline-light:hover{border-color:rgba(255,255,255,0.72);background:rgba(255,255,255,0.06)}
.service-cta-detail{
  margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.10);
  text-align:center;font-size:0.82rem;
}
.service-cta-detail span{
  display:block;color:rgba(255,255,255,0.45);
  letter-spacing:0.08em;text-transform:uppercase;font-size:0.66rem;margin-bottom:6px;
}
.service-cta-detail a{
  font-family:var(--serif);font-size:1.15rem;color:var(--white);font-weight:600;
}

/* Pricing card block used inside service pages */
.pricing-grid{
  display:grid;gap:18px;grid-template-columns:1fr;
  margin:24px 0 16px;
}
.pricing-grid.two-up{grid-template-columns:1fr 1fr}
.pricing-card{
  background:var(--blush);
  border:1px solid var(--border-rose);
  border-radius:var(--radius-lg);
  padding:32px 30px 28px;
  display:flex;flex-direction:column;
}
.pricing-card.featured{
  background:var(--charcoal);color:var(--white);
  border-color:var(--charcoal);
}
.pricing-amount{
  font-family:var(--serif);font-size:2.6rem;font-weight:600;
  color:var(--charcoal);line-height:1;
}
.pricing-card.featured .pricing-amount{color:var(--white)}
.pricing-amount-suffix{
  display:block;margin-top:6px;margin-bottom:18px;
  font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--text-muted);font-weight:500;
}
.pricing-card.featured .pricing-amount-suffix{color:rgba(255,255,255,0.5)}
.pricing-name{
  font-family:var(--serif);font-size:1.18rem;font-weight:600;
  color:var(--charcoal);margin-bottom:10px;
}
.pricing-card.featured .pricing-name{color:var(--white)}
.pricing-desc{
  font-size:0.92rem;line-height:1.6;color:var(--text-mid);
  margin-bottom:18px;font-weight:300;
}
.pricing-card.featured .pricing-desc{color:rgba(255,255,255,0.72)}
.pricing-list{
  list-style:none;padding:0;margin:0 0 18px;
  border-top:1px solid rgba(43,43,45,0.10);
}
.pricing-card.featured .pricing-list{border-top-color:rgba(255,255,255,0.10)}
.pricing-list li{
  position:relative;padding:8px 0 8px 22px;
  font-size:0.9rem;color:var(--text-mid);line-height:1.55;
  border-bottom:1px solid rgba(43,43,45,0.06);
}
.pricing-card.featured .pricing-list li{
  color:rgba(255,255,255,0.78);
  border-bottom-color:rgba(255,255,255,0.08);
}
.pricing-list li:last-child{border-bottom:none}
.pricing-list li::before{
  content:'';position:absolute;left:0;top:13px;
  width:12px;height:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A67B73' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8.5 6.5 12 13 5'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
}
.pricing-card.featured .pricing-list li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23D4B08C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8.5 6.5 12 13 5'/%3E%3C/svg%3E");
}
.pricing-extras{
  margin-top:auto;padding-top:14px;
  border-top:1px dashed rgba(43,43,45,0.18);
  font-size:0.84rem;color:var(--text-muted);line-height:1.55;
}
.pricing-card.featured .pricing-extras{
  border-top-color:rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.55);
}
.pricing-extras strong{color:var(--charcoal);font-weight:700}
.pricing-card.featured .pricing-extras strong{color:var(--white)}
.pricing-note{
  font-size:0.86rem;color:var(--text-muted);font-style:italic;
  margin-top:8px;line-height:1.6;
}

/* Small price tag shown on the homepage service cards */
.service-card .service-price{
  display:inline-block;margin-top:10px;
  font-family:var(--serif);font-size:0.95rem;font-weight:600;
  color:var(--charcoal);
}
.service-card .service-price-suffix{
  font-family:var(--sans);font-size:0.7rem;font-weight:500;
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--text-muted);margin-left:4px;
}

@media (max-width:760px){
  .pricing-grid.two-up{grid-template-columns:1fr}
}

.service-others{
  background:var(--blush);padding:80px 80px 100px;
}
.service-others-title{
  font-family:var(--serif);font-size:1.7rem;font-weight:600;
  text-align:center;color:var(--charcoal);margin-bottom:40px;
}
.service-others .services-grid{max-width:1200px;margin:0 auto}

/* ─── BLOG LIST PAGE ─── */
.blog-hero{
  background:var(--charcoal);color:var(--white);
  padding:140px 80px 80px;position:relative;overflow:hidden;
}
.blog-hero::before{
  content:'';position:absolute;top:-80px;right:-60px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(166,123,115,0.10) 0%,transparent 65%);
  pointer-events:none;
}
.blog-hero-inner{position:relative;z-index:1;max-width:760px}
.blog-hero .section-eyebrow-line{background:var(--rose-clay)}
.blog-hero .section-eyebrow-text{color:var(--rose-clay)}
.blog-hero-title{
  font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.6rem);
  font-weight:600;line-height:1.15;color:var(--white);margin-bottom:20px;
}
.blog-hero-title em{font-style:italic;color:var(--rose-clay)}
.blog-hero-sub{
  font-size:1.05rem;line-height:1.72;color:rgba(255,255,255,0.62);
  max-width:560px;font-weight:300;
}
.blog-filter{
  background:var(--white);padding:32px 80px 0;
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  border-bottom:1px solid var(--border);
}
.blog-filter-tab{
  padding:14px 24px;font-family:var(--sans);font-size:0.78rem;
  letter-spacing:0.10em;text-transform:uppercase;font-weight:500;
  color:var(--text-mid);border-bottom:2px solid transparent;
  transition:color 0.2s,border-color 0.2s;margin-bottom:-1px;
}
.blog-filter-tab:hover{color:var(--rose-clay)}
.blog-filter-tab.active{color:var(--rose-clay);border-bottom-color:var(--rose-clay)}
.blog-list{padding:90px 80px;background:var(--white)}
.blog-list-loading,.blog-list-empty{
  text-align:center;color:var(--text-muted);padding:60px 0;
  font-size:0.95rem;letter-spacing:0.04em;
}
.blog-featured{
  display:grid;grid-template-columns:6fr 5fr;gap:48px;
  align-items:stretch;margin-bottom:80px;
  border-radius:var(--radius-lg);overflow:hidden;
  background:var(--blush);transition:transform 0.3s,box-shadow 0.3s;
  color:inherit;
}
.blog-featured:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.blog-featured-img{
  position:relative;overflow:hidden;min-height:340px;
  background:linear-gradient(145deg,var(--mauve-brown),var(--charcoal));
}
.blog-featured-img img{width:100%;height:100%;object-fit:cover;display:block}
.post-img-fallback{
  width:100%;height:100%;
  background:linear-gradient(145deg,var(--mauve-brown),var(--charcoal));
}
.post-img-fallback.lg{min-height:340px}
.blog-featured-body{
  padding:48px 44px;display:flex;flex-direction:column;justify-content:center;
}
.blog-featured-title{
  font-family:var(--serif);font-size:clamp(1.6rem,2.4vw,2.2rem);
  font-weight:600;color:var(--charcoal);line-height:1.22;
  margin:14px 0 16px;
}
.blog-featured-excerpt{
  font-size:1rem;line-height:1.72;color:var(--text-mid);
  margin-bottom:28px;font-weight:300;
}
.blog-featured-meta{
  display:flex;justify-content:space-between;align-items:center;
  font-size:0.78rem;letter-spacing:0.10em;text-transform:uppercase;
  color:var(--text-muted);
}
.blog-featured-cta{color:var(--rose-clay);font-weight:500}
.blog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.blog-card{
  background:var(--white);border-radius:var(--radius-lg);
  border:1px solid var(--border);overflow:hidden;
  transition:transform 0.3s,box-shadow 0.3s;
  display:flex;flex-direction:column;color:inherit;
}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.blog-card-img{height:200px;overflow:hidden;background:var(--blush)}
.blog-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card-body{padding:26px 26px 24px;display:flex;flex-direction:column;flex-grow:1}
.blog-card-title{
  font-family:var(--serif);font-size:1.18rem;font-weight:600;
  color:var(--charcoal);line-height:1.32;margin:12px 0 12px;
}
.blog-card-excerpt{
  font-size:0.88rem;color:var(--text-muted);line-height:1.65;
  margin-bottom:18px;flex-grow:1;
}
.blog-card-meta{
  display:flex;justify-content:space-between;align-items:center;
  font-size:0.72rem;letter-spacing:0.10em;text-transform:uppercase;
  color:var(--text-muted);padding-top:14px;border-top:1px solid var(--border);
}
.blog-card-cta{color:var(--rose-clay);font-weight:500}

/* ─── SINGLE POST PAGE ─── */
.post-hero{
  background:var(--charcoal);color:var(--white);
  padding:140px 80px 70px;position:relative;overflow:hidden;
}
.post-hero::before{
  content:'';position:absolute;top:-80px;right:-60px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(166,123,115,0.10) 0%,transparent 65%);
  pointer-events:none;
}
.post-hero-inner{position:relative;z-index:1;max-width:780px;margin:0 auto}
.post-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.74rem;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);margin-bottom:28px;
  transition:color 0.2s;
}
.post-back:hover{color:var(--white)}
.post-tag{
  display:inline-block;margin-bottom:18px;padding:5px 12px;
  border-radius:2px;background:rgba(166,123,115,0.18);
  font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--rose-clay);
}
.post-title{
  font-family:var(--serif);font-size:clamp(2rem,3.6vw,3.2rem);
  font-weight:600;line-height:1.18;color:var(--white);margin-bottom:18px;
}
.post-meta{
  font-size:0.78rem;letter-spacing:0.08em;
  color:rgba(255,255,255,0.50);
}
.post-feature-img{
  max-width:1080px;margin:0 auto;padding:0 80px;
  margin-top:-40px;position:relative;z-index:5;
}
.post-feature-img img{
  width:100%;height:auto;display:block;
  border-radius:var(--radius-lg);
  box-shadow:0 20px 60px rgba(43,43,45,0.20);
}
.post-article{
  max-width:760px;margin:0 auto;padding:80px 32px 100px;
}
.post-body{
  font-size:1.06rem;line-height:1.78;color:var(--text-mid);font-weight:400;
}
.post-body > *:first-child{margin-top:0}
.post-body p{margin:0 0 22px}
.post-body h2{
  font-family:var(--serif);font-size:1.7rem;font-weight:600;
  color:var(--charcoal);line-height:1.25;
  margin:46px 0 18px;
}
.post-body h3{
  font-family:var(--serif);font-size:1.32rem;font-weight:600;
  color:var(--charcoal);line-height:1.3;
  margin:38px 0 14px;
}
.post-body h4{
  font-family:var(--serif);font-size:1.12rem;font-weight:600;
  color:var(--charcoal);margin:30px 0 12px;
}
.post-body a{
  color:var(--rose-clay);border-bottom:1px solid rgba(166,123,115,0.30);
  transition:color 0.2s,border-color 0.2s;
}
.post-body a:hover{color:var(--rose-clay-deep);border-bottom-color:var(--rose-clay)}
.post-body strong{color:var(--charcoal);font-weight:700}
.post-body em{font-style:italic}
.post-body ul,.post-body ol{margin:0 0 22px 24px;padding:0}
.post-body li{margin-bottom:8px}
.post-body blockquote{
  border-left:3px solid var(--rose-clay);
  padding:6px 0 6px 22px;margin:28px 0;
  font-family:var(--serif);font-size:1.18rem;font-style:italic;
  color:var(--charcoal);line-height:1.6;
}
.post-body img,
.post-body figure{
  display:block;max-width:100%;height:auto;
  margin:32px auto;border-radius:var(--radius);
}
.post-body figure img{margin:0}
.post-body figcaption{
  font-size:0.82rem;color:var(--text-muted);
  text-align:center;margin-top:8px;font-style:italic;
}
.post-body hr{
  border:none;height:1px;background:var(--border);margin:40px 0;
}
.post-body table{
  width:100%;border-collapse:collapse;margin:28px 0;
  font-size:0.95rem;
}
.post-body th,.post-body td{
  padding:12px 14px;border:1px solid var(--border);text-align:left;
}
.post-body th{background:var(--blush);color:var(--charcoal);font-weight:600}
.post-body code{
  background:var(--stone);padding:2px 6px;border-radius:3px;
  font-size:0.92em;font-family:Menlo,Consolas,monospace;
}
.post-body pre{
  background:var(--charcoal);color:var(--ivory);
  padding:18px 22px;border-radius:var(--radius);overflow-x:auto;
  margin:24px 0;font-size:0.9rem;
}
.post-body pre code{background:transparent;color:inherit;padding:0}
.post-body iframe{
  display:block;max-width:100%;margin:28px auto;
  border:1px solid var(--border);border-radius:var(--radius);
}
.post-footer{
  border-top:1px solid var(--border);
  margin-top:56px;padding-top:36px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:16px;
}
.post-footer-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.78rem;letter-spacing:0.10em;text-transform:uppercase;
  color:var(--rose-clay);font-weight:500;
}
.post-related{
  background:var(--blush);padding:80px 80px 100px;
}
.post-related-title{
  font-family:var(--serif);font-size:1.6rem;font-weight:600;
  color:var(--charcoal);text-align:center;margin-bottom:40px;
}
.post-related-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  max-width:1200px;margin:0 auto;
}
.post-loading,.post-not-found{
  text-align:center;padding:200px 32px;color:var(--text-muted);
}
.post-not-found h1{
  font-family:var(--serif);font-size:2rem;color:var(--charcoal);
  margin-bottom:16px;
}

/* ─── SECURE PORTAL PROMO (homepage) ─── */
.portal-promo{
  background:var(--charcoal);
  padding:100px 80px;
  position:relative;overflow:hidden;
  color:#F4E9DE;
}
.portal-promo::before{
  content:'';position:absolute;top:-120px;right:-80px;width:560px;height:560px;
  background:radial-gradient(circle,rgba(166,123,115,0.12) 0%,transparent 65%);
  pointer-events:none;
}
.portal-promo-inner{
  max-width:1200px;margin:0 auto;position:relative;z-index:1;
}
.portal-promo-lede{
  font-size:1.05rem;line-height:1.72;
  color:rgba(244,233,222,0.72);
  margin:18px auto 0;max-width:600px;font-weight:300;
}
.portal-promo .section-eyebrow-line{background:rgba(166,123,115,0.45)}
.portal-promo .section-eyebrow-text{color:var(--rose-clay)}
.portal-promo-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  margin-bottom:56px;
}
.portal-feature{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(244,233,222,0.10);
  border-radius:var(--radius-lg);
  padding:36px 30px;
  transition:border-color 0.3s,background 0.3s;
}
.portal-feature:hover{
  border-color:rgba(166,123,115,0.35);
  background:rgba(255,255,255,0.05);
}
.portal-feature-icon{
  width:48px;height:48px;border-radius:var(--radius);
  background:rgba(166,123,115,0.12);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
}
.portal-feature-icon svg{
  width:22px;height:22px;
  stroke:var(--rose-clay);
  fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Lock icon on the first feature card gets the security-green treatment. */
.portal-feature:first-child .portal-feature-icon{background:rgba(74,138,94,0.14);}
.portal-feature:first-child .portal-feature-icon svg{stroke:#5fa874;}
.portal-feature-title{
  font-family:var(--serif);font-size:1.25rem;font-weight:600;
  color:#F4E9DE;margin-bottom:12px;line-height:1.25;
}
.portal-feature-desc{
  font-size:0.95rem;line-height:1.72;
  color:rgba(244,233,222,0.68);font-weight:300;
}
.portal-promo-cta{
  text-align:center;
}
.portal-promo-cta .btn-primary{
  margin:0 auto;
}
.portal-promo-note{
  margin:18px auto 0;
  font-size:0.85rem;
  color:rgba(244,233,222,0.55);
  font-style:italic;
}

@media (max-width:900px){
  .portal-promo{padding:64px 28px;}
  .portal-promo-grid{grid-template-columns:1fr;gap:18px;margin-bottom:40px;}
}

/* ─── RESPONSIVE: hamburger nav + hero stacking ─── */

/* On desktop, the JS-injected .nav-drawer is invisible to layout
   (display:contents) so its children — .nav-links and .nav-right — behave
   as direct flex children of <nav>. The desktop nav looks unchanged. */
.nav-drawer{display:contents;}

/* Hamburger button. Hidden on desktop, visible at tablet width. */
.nav-toggle{
  display:none;
  background:transparent;border:0;padding:0;
  width:42px;height:42px;cursor:pointer;
  position:relative;z-index:101;
}
.nav-toggle span{
  display:block;position:absolute;left:9px;right:9px;height:1.5px;
  background:#F0E3D9;transition:transform 0.25s,top 0.25s,opacity 0.2s;
  border-radius:2px;
}
.nav-toggle span:nth-child(1){top:14px;}
.nav-toggle span:nth-child(2){top:20px;}
.nav-toggle span:nth-child(3){top:26px;}
nav.menu-open .nav-toggle span:nth-child(1){top:20px;transform:rotate(45deg);}
nav.menu-open .nav-toggle span:nth-child(2){opacity:0;}
nav.menu-open .nav-toggle span:nth-child(3){top:20px;transform:rotate(-45deg);}

/* Prevent the page from scrolling while the menu drawer is open. */
body.nav-locked{overflow:hidden;}

/* Tablet and below: the .nav-drawer becomes a real positioned panel that
   slides down from beneath the top bar. Its two children stack vertically. */
@media (max-width:1024px){
  nav{padding:0 28px;}
  .nav-toggle{display:block;}

  .nav-drawer{
    display:flex;flex-direction:column;
    position:fixed;left:0;right:0;top:72px;
    max-height:calc(100vh - 72px);overflow-y:auto;
    background:rgba(43,43,45,0.98);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,0.06);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:transform 0.25s ease,opacity 0.2s ease;
  }
  nav.menu-open .nav-drawer{
    transform:translateY(0);opacity:1;pointer-events:auto;
  }
  /* In hero-mode the nav itself is transparent; the drawer always shows the
     opaque panel so the menu stays readable over the bulb. (Already set
     above, but explicit here for clarity.) */
  .home nav.hero-mode .nav-drawer{
    background:rgba(43,43,45,0.98);backdrop-filter:blur(14px);
  }

  .nav-links{
    flex-direction:column;gap:0;
    padding:8px 0;width:100%;
  }
  .nav-links a{
    display:block;padding:18px 28px;
    font-size:0.92rem;letter-spacing:0.12em;
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  .nav-links li{width:100%;}
  .nav-links li:last-child a{border-bottom:0;}
  .nav-right{
    display:flex;flex-direction:column;align-items:stretch;gap:10px;
    padding:14px 28px 24px;border-top:1px solid rgba(255,255,255,0.05);
  }
  .nav-phone{padding:6px 0;text-align:center;font-size:0.95rem;}
  .btn-nav{width:100%;text-align:center;padding:14px 22px;}
}

/* Hero: stack to one column, hide the bulb so it doesn't compete with text. */
@media (max-width:980px){
  .hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding:120px 0 80px;
  }
  .hero-bulb{display:none;}
  .hero-left{padding:0 32px;}
  /* Default homepage hero-right only holds decorative sparkles — hide it. */
  .hero-right{display:none;}
  /* On the consultation page (hero-pitch-form variant), the right column
     holds the form, so keep it visible and stacked below the pitch. */
  .hero.hero-pitch-form .hero-right{
    display:flex;padding:32px 32px 0;align-items:stretch;justify-content:center;
  }
  .hero-form{max-width:none;width:100%;padding:24px 22px 22px;}
  .hero-form-title{font-size:1.3rem;}
  .hero-form .form-row{grid-template-columns:1fr;}
  .hero-ctas{margin-bottom:36px;}
  .hero-meta{padding:0 32px;}
}

/* Generic content padding cleanup for narrower screens so the dense
   80px-side-padding sections breathe. */
@media (max-width:760px){
  nav{padding:0 20px;}
  .contact{padding:80px 24px;}
  .blog-hero{padding:120px 24px 64px;}
  .blog-filter{padding:28px 24px 0;}
  .blog-list{padding:64px 24px;}
  .service-others{padding:64px 24px 80px;}
}

/* ─── RESPONSIVE GRIDS ───
   The site uses several fixed multi-column grids (services, news, blog,
   process, footer, etc.) that get unreadable below ~900px. Step them down
   progressively so cards stay legible at every viewport width. */

/* Tablet: drop the 4-col services row to 2, large container padding shrinks. */
@media (max-width:1100px){
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .services,.process,.news{padding:80px 40px;}
  footer{padding:64px 40px 28px;gap:48px;}
}

/* Smaller tablet / large phone: collapse the 3-col grids to 2,
   stack hero-driven 2-col sections (about, blog featured), tighten gaps. */
@media (max-width:900px){
  .services-grid,
  .process-grid,
  .news-grid,
  .blog-grid,
  .post-related-grid,
  .contact-info-row{grid-template-columns:repeat(2,1fr);}

  .about{grid-template-columns:1fr;gap:48px;}
  .contact-grid{grid-template-columns:1fr;gap:24px;}
  .contact-cal-embed{min-height:560px;}
  .contact-col{padding:28px 22px;min-width:0;max-width:100%;}
  .form-row{grid-template-columns:1fr;gap:14px;}
  .contact-header{padding:0;}
  .contact-header h2{padding:0;}

  /* On narrower screens the dark credential card overlaps Lauren's face.
     Pull it out of absolute positioning and stack it cleanly below the photo. */
  .about-credential-strip{
    position:static;
    bottom:auto;left:auto;
    margin:20px 0 0;
    box-shadow:none;
    border-radius:var(--radius);
    display:inline-block;
    width:auto;
  }
  .blog-featured{grid-template-columns:1fr;}
  .blog-featured-body{padding:32px 28px;}
  .blog-featured-img{min-height:240px;}

  footer{grid-template-columns:1fr 1fr;gap:40px;}

  .services,.process,.news,.about,.contact{padding:64px 28px;}
  .cta-banner{padding:48px 28px;grid-template-columns:1fr;gap:32px;text-align:left;}
  .stats-bar{padding:28px;}
  .portal-promo{padding:64px 28px;}
  /* Service pages: stack the content + CTA sidebar vertically, tighten padding */
  .service-hero{padding:120px 28px 60px;}
  .service-hero-meta{flex-wrap:wrap;gap:20px;}
  .service-body{padding:60px 28px 70px;}
  .service-body-grid{grid-template-columns:1fr;gap:40px;}
  .service-content img,.service-content figure{max-width:100%;height:auto;}
  .services .section-header,
  .process .section-header,
  .news .section-header,
  .about .section-header,
  .contact .section-header{margin-bottom:40px;}

  .stats-bar{padding:28px 28px;flex-wrap:wrap;gap:24px;}
  .stats-bar .stat-item{flex:1 1 40%;}
  .stats-bar .stat-divider{display:none;}
}

/* Phone: single column everywhere. */
@media (max-width:640px){
  .services-grid,
  .process-grid,
  .news-grid,
  .blog-grid,
  .post-related-grid,
  .contact-info-row,
  .pricing-grid.two-up{grid-template-columns:1fr;}

  footer{grid-template-columns:1fr;gap:32px;padding:48px 24px 24px;}
  .footer-bottom{padding:18px 24px;flex-direction:column;gap:10px;text-align:center;}

  .stats-bar{flex-direction:column;align-items:flex-start;}
  .stats-bar > *{flex:1 1 100%;width:100%;}
  .stat-divider{display:none;}

  .services,.process,.news,.about,.contact{padding:56px 20px;}
  .cta-banner{padding:40px 20px;}
  .portal-promo{padding:56px 20px;}
  .service-hero{padding:110px 20px 50px;}
  .service-body{padding:48px 20px 60px;}
  .section-title{font-size:1.75rem;}
}

/* Anti-spam honeypot — must be visually hidden but technically rendered
   so bots see and fill it. Don't use display:none (some bots skip those).
   Position offscreen and shrink to a single pixel; aria-hidden in markup. */
.lp-trap{
  position:absolute !important;
  left:-9999px !important; top:-9999px !important;
  width:1px !important; height:1px !important;
  opacity:0 !important; pointer-events:none !important;
  tab-index:-1 !important;
}