/* =========================================================
   DESIGN TOKENS
   Alemán Home Solutions — warm wood / residential flooring identity
========================================================== */
:root{
  /* Core neutrals — clean white / off-white, charcoal text */
  --ink:        #20242B;
  --ink-soft:   #525A66;
  --paper:      #FFFFFF;
  --paper-warm: #F6F5F1;
  --stone:      #ECEAE4;

  /* Wood accent — used sparingly (kickers, bullets, small highlights) */
  --oak:        #B4763F;
  --oak-deep:   #8F5A29;

  /* Primary navy + secondary charcoal — CTAs, dark sections, brand mark */
  --walnut:     #1B2A4A;   /* primary navy */
  --espresso:   #101B33;   /* deep navy, dark section backgrounds */
  --espresso-2: #182545;   /* card surfaces within dark navy sections */
  --charcoal:   #23262B;   /* secondary dark neutral */

  --line:       rgba(27,42,74,0.14);
  --line-light: rgba(255,255,255,0.20);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1180px;
  --radius-sm: 3px;
  --radius-md: 6px;

  --ease: cubic-bezier(.22,.68,0,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:500; color:var(--ink); margin:0 0 .5em; letter-spacing:-0.01em; }
p{ margin:0 0 1em; color:var(--ink-soft); }
button{ font-family:inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline:2px solid var(--oak); outline-offset:3px; }

.section-inner{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.section-inner > h2{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); }
.section-lead{ max-width:52ch; font-size:1.05rem; margin-bottom:2.4rem; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0.95rem 1.7rem;
  font-size:0.95rem; font-weight:600;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--walnut); color:#fff; }
.btn-primary:hover{ background:var(--espresso); }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,0.55); }
.btn-ghost:hover{ background:rgba(255,255,255,0.12); border-color:#fff; }
.btn-outline{ background:transparent; color:var(--walnut); border-color:var(--walnut); }
.btn-outline:hover{ background:var(--walnut); color:#fff; }
.btn-ghost-dark{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost-dark:hover{ border-color:var(--ink); }

/* =========================================================
   HEADER / NAV
========================================================== */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled{ border-bottom-color:var(--line); background:rgba(255,255,255,0.97); }
.header-inner{
  max-width:var(--container); margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; gap:28px;
}
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; min-width:0; }
.brand-mark{
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.brand-mark img{ width:36px; height:auto; display:block; }
.brand-name{ font-family:var(--font-display); font-size:1.05rem; color:var(--ink); }
.brand-name em{ font-style:italic; font-weight:500; color:var(--oak-deep); }

.main-nav{ display:flex; align-items:center; gap:26px; }
.main-nav a{ font-size:0.94rem; color:var(--ink-soft); position:relative; padding:4px 0; transition:color .2s; }
.main-nav a:hover{ color:var(--ink); }
.main-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--oak); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
.main-nav a:hover::after{ transform:scaleX(1); }
.nav-cta-link{ color:var(--oak-deep) !important; font-weight:600; }
.nav-cta-link::after{ display:none; }

.header-cta{
  padding:0.6rem 1.25rem; background:var(--walnut); color:#fff;
  border-radius:var(--radius-sm); font-size:0.9rem; font-weight:600;
  transition:background .2s;
}
.header-cta:hover{ background:var(--espresso); }

.menu-toggle{
  display:none; width:44px; height:44px; border:none; background:none; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.menu-toggle span{ width:22px; height:2px; background:var(--ink); transition:transform .3s var(--ease), opacity .3s; }
.menu-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity:0; }
.menu-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO
========================================================== */
.hero{ position:relative; height:min(92vh, 780px); min-height:560px; overflow:hidden; background:var(--espresso); }
.hero-slider::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:180px; z-index:2;
  background:linear-gradient(180deg, rgba(27,42,74,0) 0%, var(--walnut) 100%);
  pointer-events:none;
}
.hero-slider{ position:relative; height:100%; }
.hero-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity 1.1s var(--ease);
}
.hero-slide.is-active{ opacity:1; visibility:visible; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; }
.hero-slide-scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(9,14,25,0.82) 0%, rgba(9,14,25,0.55) 42%, rgba(9,14,25,0.25) 75%);
}
.hero-content{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; justify-content:center;
  max-width:var(--container); margin:0 auto; padding:0 24px;
  pointer-events:none;
}
.hero-copy{ display:none; max-width:620px; pointer-events:auto; }
.hero-copy.is-active{ display:block; animation:heroIn .9s var(--ease); }
@keyframes heroIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
.hero-kicker{ color:#D9A876; font-size:0.95rem; margin-bottom:0.9rem; font-weight:500; }
.hero-content h1{
  color:#fff; font-size:clamp(2.1rem, 5vw, 3.5rem); line-height:1.08; margin-bottom:0.6em; max-width:16ch;
}
.hero-sub{ color:rgba(255,255,255,0.82); font-size:1.1rem; max-width:44ch; }
.hero-actions{ display:flex; gap:14px; margin-top:1.6rem; flex-wrap:wrap; pointer-events:auto; }

.hero-dots{
  position:absolute; left:50%; transform:translateX(-50%); bottom:28px; z-index:6;
  display:flex; gap:9px;
}
.hero-dots button{
  width:26px; height:3px; border:none; background:rgba(255,255,255,0.4); cursor:pointer; padding:0;
  transition:background .25s;
}
.hero-dots button.is-active{ background:#fff; }

/* =========================================================
   TRUST STRIP
========================================================== */
.trust-strip{
  background:linear-gradient(180deg, var(--walnut) 0%, var(--walnut) 84%, var(--paper) 100%);
  color:var(--paper);
}
.trust-inner{
  max-width:var(--container); margin:0 auto; padding:1.6rem 24px;
  display:flex; align-items:center; justify-content:center; gap:2.5rem; flex-wrap:wrap; text-align:center;
}
.trust-item{ display:flex; flex-direction:column; gap:0.2rem; }
.trust-label{ font-size:0.8rem; color:#D9A876; }
.trust-value{ font-family:var(--font-display); font-size:1.05rem; }
.trust-divider{ width:1px; height:28px; background:rgba(255,255,255,0.25); }
@media (max-width:640px){ .trust-divider{ display:none; } }

/* =========================================================
   SERVICES
========================================================== */
.services{
  padding:6.5rem 0;
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper) calc(100% - 140px), var(--stone) 100%);
}
.service-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.75rem;
}
.service-card{
  background:var(--paper); padding:1.8rem; display:flex; flex-direction:column;
  border-radius:var(--radius-md);
  box-shadow:0 14px 34px rgba(27,42,74,0.08);
  transition:box-shadow .35s var(--ease), transform .35s var(--ease);
}
.service-card:hover{ box-shadow:0 20px 46px rgba(27,42,74,0.14); transform:translateY(-4px); }
.service-card-img{ aspect-ratio:5/4; overflow:hidden; margin:-1.8rem -1.8rem 1.4rem; border-radius:var(--radius-md) var(--radius-md) 0 0; }
.service-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.service-card:hover .service-card-img img{ transform:scale(1.04); }
.service-card h3{ font-size:1.2rem; }
.service-card p{ font-size:0.95rem; flex:1; }
.card-link{ font-size:0.9rem; font-weight:600; color:var(--oak-deep); margin-top:0.6rem; display:inline-block; }
.card-link::after{ content:''; }

@media (max-width:920px){ .service-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .service-grid{ grid-template-columns:1fr; } }

/* =========================================================
   FEATURE SECTIONS (flooring / stairs)
========================================================== */
.feature{ padding:2px 0; }
.feature-flooring{
  background:linear-gradient(180deg, var(--stone) 0%, var(--stone) calc(100% - 120px), var(--paper-warm) 100%);
}
.feature-stairs{
  background:var(--paper-warm);
}
.feature-inner{
  max-width:var(--container); margin:0 auto; padding:5.5rem 24px;
  display:grid; grid-template-columns:0.85fr 1fr; gap:4.5rem; align-items:center;
}
.feature-inner-reverse{ grid-template-columns:1fr 0.85fr; }
.feature-inner-reverse .feature-copy{ order:1; }
.feature-inner-reverse .feature-media{ order:2; }
.feature-media{
  aspect-ratio:5/6; overflow:hidden; border-radius:var(--radius-md);
  box-shadow:0 24px 55px rgba(27,42,74,0.16);
}
.feature-media img{ width:100%; height:100%; object-fit:cover; }
.feature-kicker{ color:var(--oak-deep); font-weight:600; font-size:0.92rem; margin-bottom:0.7rem; }
.feature-copy h2{ font-size:clamp(1.8rem, 3vw, 2.3rem); max-width:14ch; }
.feature-copy p{ max-width:46ch; }
.feature-list{ margin:1.3rem 0 1.8rem; display:flex; flex-direction:column; gap:0.55rem; }
.feature-list li{ position:relative; padding-left:1.3rem; font-size:0.98rem; color:var(--ink-soft); }
.feature-list li::before{
  content:''; position:absolute; left:0; top:0.6em; width:7px; height:7px; background:var(--oak);
}

@media (max-width:860px){
  .feature-inner, .feature-inner-reverse{ grid-template-columns:1fr; gap:2.2rem; padding:3.5rem 24px; }
  .feature-inner-reverse .feature-copy{ order:2; }
  .feature-inner-reverse .feature-media{ order:1; }
  .feature-media{ aspect-ratio:16/10; }
}

/* =========================================================
   HOW WE WORK / CRAFTSMANSHIP
========================================================== */
.craft{
  padding:6rem 0 8.5rem;
  background:linear-gradient(180deg, var(--paper-warm) 0%, var(--paper-warm) calc(100% - 190px), var(--espresso) 100%);
}
.craft-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1.75rem; margin-top:1rem;
}
.craft-item{
  position:relative; margin:0; aspect-ratio:6/5; overflow:hidden; border-radius:var(--radius-md);
  box-shadow:0 20px 46px rgba(27,42,74,0.14);
}
.craft-item img{ width:100%; height:100%; object-fit:cover; }
.craft-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1.3rem 1.1rem;
  background:linear-gradient(0deg, rgba(9,14,25,0.82) 0%, rgba(9,14,25,0) 65%);
  color:#fff; font-size:0.95rem; line-height:1.4;
}
@media (max-width:760px){ .craft-grid{ grid-template-columns:1fr; } }

/* =========================================================
   BEFORE / AFTER
========================================================== */
.before-after{
  padding:6.5rem 0; color:var(--paper);
  background:linear-gradient(180deg, var(--espresso) 0%, var(--espresso) calc(100% - 160px), var(--paper) 100%);
}
.before-after h2{ color:#fff; }
.before-after .section-lead{ color:rgba(255,255,255,0.75); }

.ba-slider{
  position:relative; width:100%; aspect-ratio:16/9; max-height:640px; overflow:hidden;
  border-radius:var(--radius-md); user-select:none; cursor:ew-resize;
  box-shadow:0 30px 60px rgba(0,0,0,0.35);
}
.ba-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-img-wrap{ position:absolute; inset:0; width:50%; overflow:hidden; }
.ba-img-wrap .ba-img{ width:var(--ba-img-width, 100%); max-width:none; }
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff;
  transform:translateX(-50%); cursor:ew-resize;
}
.ba-handle-grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:#fff; color:var(--walnut);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.3);
}
.ba-tag{
  position:absolute; top:16px; padding:0.4rem 0.85rem; font-size:0.8rem; font-weight:600;
  border-radius:var(--radius-sm); background:rgba(9,14,25,0.6); color:#fff; letter-spacing:0.02em;
}
.ba-tag-before{ left:16px; }
.ba-tag-after{ right:16px; }

/* =========================================================
   GALLERY
========================================================== */
.gallery{
  padding:6.5rem 0;
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper) calc(100% - 120px), var(--stone) 100%);
}
.gallery-filters{ display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.filter-btn{
  padding:0.55rem 1.1rem; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--ink-soft); font-size:0.88rem; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.filter-btn:hover{ border-color:var(--oak); }
.filter-btn.is-active{ background:var(--walnut); border-color:var(--walnut); color:#fff; }

.gallery-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.6rem;
}
.gallery-item{
  position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-md);
  cursor:pointer; background:var(--stone);
  box-shadow:0 16px 36px rgba(27,42,74,0.12);
  transition:box-shadow .35s var(--ease), transform .35s var(--ease);
}
.gallery-item:hover{ box-shadow:0 22px 48px rgba(27,42,74,0.18); transform:translateY(-3px); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery-item:hover img{ transform:scale(1.05); }
.gallery-item-overlay{
  position:absolute; inset:0; background:linear-gradient(0deg, rgba(9,14,25,0.82) 0%, rgba(9,14,25,0) 55%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.1rem 1.2rem; color:#fff;
}
.gallery-item-cat{ font-size:0.76rem; color:#D9A876; margin-bottom:0.2rem; }
.gallery-item-title{ font-family:var(--font-display); font-size:1.05rem; }
.gallery-item.is-hidden{ display:none; }

@media (max-width:920px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .gallery-grid{ grid-template-columns:1fr; } }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(9,14,25,0.94);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-inner{ max-width:1000px; width:100%; display:grid; grid-template-columns:1.3fr 1fr; gap:0; background:var(--paper); border-radius:var(--radius-md); overflow:hidden; max-height:88vh; }
.lightbox-media{ background:#111; }
.lightbox-media img{ width:100%; height:100%; object-fit:cover; max-height:88vh; }
.lightbox-info{ padding:2.2rem; overflow-y:auto; }
.lightbox-category{ color:var(--oak-deep); font-size:0.85rem; font-weight:600; }
.lightbox-location{ color:var(--ink-soft); font-size:0.9rem; margin-bottom:1rem; }
.lightbox-close{
  position:absolute; top:14px; right:16px; background:none; border:none; color:#fff;
  font-size:2rem; line-height:1; cursor:pointer;
  width:44px; height:44px; padding:0;
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:800px){ .lightbox-inner{ grid-template-columns:1fr; overflow-y:auto; } .lightbox-media img{ max-height:44vh; } }

/* =========================================================
   BANISTER
========================================================== */
.banister{
  padding:2px 0;
  background:linear-gradient(180deg, var(--stone) 0%, var(--stone) calc(100% - 120px), var(--paper-warm) 100%);
}
.banister-inner{
  max-width:var(--container); margin:0 auto; padding:5.5rem 24px;
  display:grid; grid-template-columns:0.8fr 1fr; gap:4rem; align-items:center;
}
.banister-media{
  aspect-ratio:4/3.2; overflow:hidden; border-radius:var(--radius-md);
  box-shadow:0 22px 50px rgba(27,42,74,0.14);
}
.banister-media img{ width:100%; height:100%; object-fit:cover; }
.banister-copy h2{ font-size:clamp(1.8rem, 3vw, 2.2rem); max-width:16ch; }
.banister-copy p{ max-width:44ch; }
@media (max-width:860px){ .banister-inner{ grid-template-columns:1fr; gap:2rem; padding:3.5rem 24px; } .banister-media{ aspect-ratio:16/10; } }

/* =========================================================
   SERVICE AREA
========================================================== */
.areas{
  padding:6.5rem 0;
  background:linear-gradient(180deg, var(--paper-warm) 0%, var(--paper-warm) calc(100% - 120px), var(--paper) 100%);
}
.areas-grid{
  display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:1rem;
}
.areas-grid span{
  padding:0.6rem 1.15rem; border:1px solid var(--line); border-radius:999px;
  font-size:0.92rem; color:var(--ink-soft); background:var(--paper);
  box-shadow:0 4px 12px rgba(27,42,74,0.05);
}

/* =========================================================
   ABOUT
========================================================== */
.about{
  padding:2px 0;
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper) calc(100% - 170px), var(--espresso) 100%);
}
.about-inner{
  max-width:var(--container); margin:0 auto; padding:6.5rem 24px;
  display:grid; grid-template-columns:1fr 0.75fr; gap:4.5rem; align-items:center;
}
.about-media{ aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius-md); box-shadow:0 24px 55px rgba(27,42,74,0.16); }
.about-media img{ width:100%; height:100%; object-fit:cover; }
.about-copy h2{ font-size:clamp(1.8rem, 3vw, 2.3rem); max-width:18ch; }
.about-copy p{ max-width:50ch; }
@media (max-width:860px){ .about-inner{ grid-template-columns:1fr; gap:2rem; padding:3.5rem 24px; } .about-media{ order:-1; aspect-ratio:16/10; } }

/* =========================================================
   ESTIMATE FORM
========================================================== */
.estimate{
  padding:6.5rem 0; color:var(--paper);
  background:linear-gradient(180deg, var(--espresso) 0%, var(--espresso) calc(100% - 160px), var(--paper) 100%);
}
.estimate h2{ color:#fff; }
.estimate .section-lead{ color:rgba(255,255,255,0.75); }

.estimate-layout{ display:grid; grid-template-columns:1.5fr 0.9fr; gap:3rem; align-items:start; }

.estimate-form{
  background:var(--espresso-2); padding:2.2rem; border-radius:var(--radius-md); border:1px solid var(--line-light);
  box-shadow:0 30px 70px rgba(0,0,0,0.3);
  display:flex; flex-direction:column; gap:1.1rem;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.estimate-form label{ display:flex; flex-direction:column; gap:0.45rem; font-size:0.88rem; color:#C7CEDA; }
.form-full{ grid-column:1/-1; }
.estimate-form input, .estimate-form select, .estimate-form textarea{
  width:100%;
  font-family:inherit; font-size:1rem; padding:0.75rem 0.9rem;
  background:rgba(255,255,255,0.06); border:1px solid var(--line-light); border-radius:var(--radius-sm);
  color:#fff; transition:border-color .2s;
}
.estimate-form textarea{ resize:vertical; }
.estimate-form input:focus, .estimate-form select:focus, .estimate-form textarea:focus{ border-color:var(--oak); }
.estimate-form input::placeholder, .estimate-form textarea::placeholder{ color:rgba(255,255,255,0.4); }
.form-file input{ padding:0.6rem; }
.form-hint{ font-size:0.8rem; color:rgba(255,255,255,0.5); }
.form-submit{ align-self:flex-start; margin-top:0.4rem; }
.form-status{ font-size:0.9rem; color:#D9A876; min-height:1.2em; }
.form-status.is-success{ color:#D9A876; }
.form-status.is-error{ color:#E2857A; }
.form-submit:disabled{ opacity:0.7; cursor:not-allowed; }

.estimate-aside{ display:flex; flex-direction:column; gap:1.2rem; }
.estimate-aside-card{
  background:var(--espresso-2); border:1px solid var(--line-light); border-radius:var(--radius-md); padding:1.8rem;
  box-shadow:0 24px 55px rgba(0,0,0,0.25);
}
.estimate-aside-card h3{ color:#fff; font-size:1.15rem; }
.estimate-aside-card p{ color:rgba(255,255,255,0.72); font-size:0.92rem; }

@media (max-width:920px){ .estimate-layout{ grid-template-columns:1fr; } }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }

/* =========================================================
   CONTACT
========================================================== */
.contact{
  padding:5.5rem 0;
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper) calc(100% - 70px), var(--walnut) 100%);
}
.contact-inner{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; }
.contact-methods{ display:flex; gap:2.5rem; flex-wrap:wrap; }
.contact-method{ display:flex; flex-direction:column; gap:0.2rem; }
.contact-method-label{ font-size:0.82rem; color:var(--ink-soft); }
.contact-method-value{ font-family:var(--font-display); font-size:1.25rem; color:var(--oak-deep); }

/* =========================================================
   FOOTER
========================================================== */
.site-footer{ background:var(--walnut); color:var(--paper); padding:2.6rem 0; }
.footer-inner{
  max-width:var(--container); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.footer-brand{ display:flex; align-items:center; gap:10px; }
.footer-brand .brand-name{ color:#fff; }
.footer-brand .brand-name em{ color:#D9A876; }
.footer-nav{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.footer-nav a{ font-size:0.9rem; color:rgba(255,255,255,0.78); transition:color .2s; }
.footer-nav a:hover{ color:#fff; }
.footer-copy{ width:100%; font-size:0.8rem; color:rgba(255,255,255,0.5); margin-top:1.4rem; margin-bottom:0; }

/* =========================================================
   MOBILE STICKY CTA
========================================================== */
.mobile-sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:none; gap:1px; background:var(--line);
  box-shadow:0 -6px 24px rgba(0,0,0,0.12);
}
.msc-btn{ flex:1; text-align:center; padding:0.95rem 0.5rem; font-size:0.92rem; font-weight:600; }
.msc-btn-primary{ background:var(--walnut); color:#fff; }
.msc-btn-outline{ background:var(--oak-deep); color:#fff; }

@media (max-width:1080px){
  .main-nav{ 
    position:fixed; top:0; right:0; height:100vh; width:min(78vw, 320px);
    background:var(--paper); flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1.6rem; padding:2rem; transform:translateX(100%); transition:transform .35s var(--ease);
    box-shadow:-10px 0 30px rgba(0,0,0,0.12); z-index:65;
    overflow-y:auto;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav a{ font-size:1.15rem; }
  .header-cta{ display:none; }
  .menu-toggle{ display:flex; }
  .mobile-sticky-cta{ display:flex; padding-bottom:env(safe-area-inset-bottom); }
  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
}

/* Small phones (320–480px): keep the wordmark from crowding the
   hamburger button, and let long CTA text stack instead of risking
   overflow while staying nowrap. */
@media (max-width:480px){
  .header-inner{ padding:14px 16px; gap:12px; }
  .brand{ gap:8px; }
  .brand-mark img{ width:30px; }
  .brand-name{ font-size:0.86rem; }

  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; white-space:normal; text-align:center; }
}

/* Short landscape phones: the 560px hero min-height can otherwise take
   up more than the whole viewport. */
@media (max-height:500px) and (orientation:landscape){
  .hero{ min-height:420px; }
}

/* =========================================================
   SCROLL REVEAL (single subtle entrance)
========================================================== */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }