/* ============================================================================
   Natural Choice Kitchens — bespoke design pass (Light Editorial track)
   Loads AFTER styles.css + the brand-token :root block, so these win.
   Theme: warm paper, deep ink, refined Fraunces serif, restrained heritage
   green accent, layered depth, quiet motion. Built to feel like a high-end
   interior-design studio, not a contractor template.
   ============================================================================ */

:root{
  --nc-green:#3E6B4C;
  --nc-green-deep:#2C4D38;
  --nc-ink:#212a24;
  --nc-paper:#FAF8F3;
  --nc-paper-2:#F2EEE4;
  --nc-line:#E2DCCF;
  --fs-1:clamp(2.7rem,5.4vw,4.6rem);
}

/* ---- Base typography: editorial serif, lighter weights, more air ---- */
body{ background:var(--nc-paper); color:var(--nc-ink); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ font-family:var(--font-heading); letter-spacing:-.01em; }
h1,.x-hero h1,.x-banner h1,.x-head h2,.section-head h2,.x-bigcta h2{ font-weight:500; }
/* italic accent word inside any heading */
h1 em,h2 em,.x-hero h1 em,.x-bigcta h2 em{ font-style:italic; font-weight:500; color:var(--nc-green); }
.x-bigcta h2 em{ color:#dCEBD9; }
.section{ padding:clamp(64px,9vw,116px) 0; }

/* ---- Eyebrows: thin, lettered, green ---- */
.x-head .k,.section-head .eyebrow,.x-eyebrow{
  font-family:var(--font-body); font-weight:700; text-transform:uppercase;
  letter-spacing:.24em; font-size:11.5px;
}
.x-head .k,.section-head .eyebrow{ color:var(--nc-green); }
.x-head h2,.section-head h2{ font-size:clamp(2rem,3.6vw,3.1rem); letter-spacing:-.015em; line-height:1.06; }
.x-head p,.section-head p{ font-size:1.1rem; line-height:1.65; color:var(--nc-green-deep); opacity:.78; }

/* ---- Header / nav: airy, paper, hairline ---- */
/* solid white header: the supplied logo has a white (non-transparent) background,
   so a white bar lets it blend seamlessly instead of showing a white box on paper */
.site-header{ background:#fff; border-bottom:1px solid var(--nc-line); }
.nav-links a{ font-weight:500; letter-spacing:.01em; }
.nav-cta{ background:var(--nc-green)!important; color:#fff!important; border-radius:2px; font-weight:600!important; letter-spacing:.02em; }
.nav-cta:hover{ background:var(--nc-green-deep)!important; }

/* ---- Buttons: quieter, editorial ---- */
.x-btn{ font-weight:600; letter-spacing:.02em; font-size:1rem; border-radius:2px; padding:15px 28px; box-shadow:none; }
.x-btn-primary{ background:var(--nc-green); box-shadow:0 14px 34px rgba(44,77,56,.26); }
.x-btn-primary:hover{ background:var(--nc-green-deep); }
.x-btn svg{ width:17px; height:17px; }

/* ============================ HERO ============================ */
.x-hero{ min-height:92vh; }
/* warmer, more graded scrim — luxurious, not muddy */
.x-hero .x-hero-scrim{
  background:
    linear-gradient(180deg, rgba(20,30,24,.30) 0%, rgba(20,30,24,.12) 34%, rgba(18,28,22,.74) 100%),
    linear-gradient(90deg, rgba(18,28,22,.5) 0%, rgba(18,28,22,0) 60%);
}
.x-hero .container{ padding-bottom:clamp(56px,8vw,92px); }
/* eyebrow → quiet translucent pill, not a solid green block */
.x-hero .x-eyebrow{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.34);
  color:#fff; letter-spacing:.22em; backdrop-filter:blur(4px); padding:8px 16px; border-radius:2px;
}
.x-hero h1{ font-weight:500; font-size:var(--fs-1); line-height:1.02; max-width:20ch; text-shadow:0 2px 40px rgba(0,0,0,.35); }
.x-hero .x-sub{ font-weight:400; font-size:clamp(1.08rem,1.7vw,1.3rem); max-width:44ch; }
.x-chips{ border-top:1px solid rgba(255,255,255,.22); gap:12px 30px; }
.x-chip{ font-weight:500; font-size:.92rem; }
.x-chip svg{ color:#CFE3CF; }
/* entrance motion */
.x-hero .x-eyebrow{ animation:ncUp .7s .05s both; }
.x-hero h1{ animation:ncUp .7s .16s both; }
.x-hero .x-sub{ animation:ncUp .7s .28s both; }
.x-hero .x-cta-row{ animation:ncUp .7s .4s both; }
.x-hero .x-chips{ animation:ncUp .7s .52s both; }
@keyframes ncUp{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ .x-hero *{ animation:none!important; } }

/* ============================ STATS ============================ */
.x-stats{ background:var(--nc-green-deep); }
.x-stat .num{ font-family:var(--font-heading); font-weight:500; color:#EAF1E7; font-size:clamp(1.9rem,3vw,2.7rem); }
.x-stat .lbl{ color:rgba(234,241,231,.62); letter-spacing:.16em; }

/* ===================== SIGNATURE: ethos band ===================== */
.nc-ethos{ background:var(--nc-paper); position:relative; overflow:hidden; }
.nc-ethos .container{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,80px); align-items:center;
}
.nc-ethos .nc-ethos-copy .k{ color:var(--nc-green); font-family:var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.24em; font-size:11.5px; margin-bottom:18px; }
.nc-ethos h2{ font-size:clamp(2rem,3.6vw,3rem); font-weight:500; line-height:1.1; margin:0 0 22px; }
.nc-ethos p{ font-size:1.12rem; line-height:1.8; color:var(--nc-green-deep); opacity:.85; margin:0 0 18px; max-width:46ch; }
.nc-ethos .nc-sign{ font-family:var(--font-heading); font-style:italic; font-size:1.15rem; color:var(--nc-green); opacity:.9; }
.nc-ethos-figure{ position:relative; }
.nc-ethos-figure img{ width:100%; height:100%; max-height:560px; object-fit:cover; border-radius:3px; display:block; box-shadow:0 30px 70px rgba(44,77,56,.18); }
.nc-ethos-figure .nc-badge{
  position:absolute; left:-22px; bottom:30px; background:var(--nc-paper);
  border:1px solid var(--nc-line); border-radius:3px; padding:16px 22px; box-shadow:0 20px 50px rgba(0,0,0,.12);
  font-family:var(--font-heading); font-size:1rem; line-height:1.3; max-width:200px;
}
.nc-ethos-figure .nc-badge strong{ display:block; font-size:1.6rem; font-weight:500; color:var(--nc-green); }
@media (max-width:780px){
  .nc-ethos .container{ grid-template-columns:1fr; gap:32px; }
  .nc-ethos-figure .nc-badge{ left:14px; bottom:14px; }
}

/* ===================== SERVICES (tiles) ===================== */
.x-head h2{ } /* keep */
.x-services{ gap:22px; }
.x-svc{ border-radius:3px; min-height:400px; box-shadow:0 16px 40px rgba(44,77,56,.12); }
.x-svc::after{ background:linear-gradient(180deg, rgba(24,34,27,0) 32%, rgba(20,30,23,.9) 100%); }
.x-svc h3{ font-weight:500; font-size:1.6rem; }
.x-svc p{ font-weight:400; color:rgba(255,255,255,.88); }
.x-svc .x-arrow{ font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:.78rem; }
.x-svc .x-arrow span{ color:#CFE3CF; }
.x-svc img{ transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.x-svc:hover img{ transform:scale(1.05); }

/* ===================== WHY (features) ===================== */
.section-alt{ background:var(--nc-paper-2); position:relative; }
.x-why{ gap:34px 30px; }
.x-feat .ic{ background:#fff; border:1px solid var(--nc-line); border-radius:3px; width:54px; height:54px; }
.x-feat .ic svg{ color:var(--nc-green); }
.x-feat h4{ font-family:var(--font-heading); font-weight:500; font-size:1.28rem; letter-spacing:-.01em; }
.x-feat p{ line-height:1.7; }

/* ===================== STEPS ===================== */
.x-step .n{ font-family:var(--font-heading); font-weight:400; font-style:italic; color:var(--nc-green); opacity:.5; font-size:2.8rem; }
.x-step h4{ font-family:var(--font-heading); font-weight:500; font-size:1.3rem; }
.x-step p{ line-height:1.7; }

/* ===================== AREA CARDS ===================== */
.card-grid{ gap:18px; }
.card{ background:#fff; border:1px solid var(--nc-line); border-radius:3px; transition:transform .25s, box-shadow .25s, border-color .25s; }
.card:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(44,77,56,.14); border-color:var(--nc-green); }
.card h3{ font-family:var(--font-heading); font-weight:500; font-size:1.2rem; }

/* ===================== FAQ ===================== */
.x-faq details{ border-bottom:1px solid var(--nc-line); }
.x-faq summary{ font-family:var(--font-heading); font-weight:500; font-size:1.18rem; }
.x-faq summary::after{ color:var(--nc-green); }
.x-faq details[open] summary{ color:var(--nc-green-deep); }

/* ===================== BIG CTA band ===================== */
.x-bigcta{ background:var(--nc-green-deep); position:relative; overflow:hidden; }
.x-bigcta::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(900px 380px at 80% -10%, rgba(255,255,255,.10), transparent 60%);
}
.x-bigcta h2{ font-weight:500; font-size:clamp(2rem,3.6vw,3rem); }
.x-bigcta .x-btn-white{ background:#fff; color:var(--nc-green-deep); }

/* ===================== Service / area body copy ===================== */
.x-body{ max-width:760px; }
.x-body h2{ font-family:var(--font-heading); font-weight:500; font-size:clamp(1.6rem,2.6vw,2.1rem); margin-top:2.4em; }
.x-body .x-lead{ font-size:1.28rem; line-height:1.6; color:var(--nc-ink); font-family:var(--font-heading); font-weight:400; }
.x-body p{ line-height:1.8; font-size:1.06rem; color:#39433b; }
.x-checklist li{ line-height:1.5; }
.x-banner .x-hero-scrim{ background:linear-gradient(180deg, rgba(20,30,24,.45), rgba(18,28,22,.82)); }
.x-banner h1{ font-weight:500; }

/* ===================== Contact form ===================== */
.nc-form{ background:#fff; border:1px solid var(--nc-line); border-radius:4px; padding:clamp(20px,3vw,32px); box-shadow:0 20px 50px rgba(44,77,56,.08); }
.nc-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.nc-field{ margin-bottom:16px; }
.nc-field label{ display:block; font-size:.82rem; font-weight:600; letter-spacing:.02em; color:var(--nc-green-deep); margin-bottom:6px; }
.nc-form input,.nc-form select,.nc-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--nc-line); border-radius:3px;
  font-family:var(--font-body); font-size:1rem; color:var(--nc-ink); background:var(--nc-paper);
  transition:border-color .15s, box-shadow .15s;
}
.nc-form input:focus,.nc-form select:focus,.nc-form textarea:focus{
  outline:none; border-color:var(--nc-green); box-shadow:0 0 0 3px rgba(62,107,76,.14); background:#fff;
}
.nc-form textarea{ resize:vertical; }
.nc-note{ font-size:.85rem; color:var(--nc-green-deep); opacity:.75; margin:14px 0 0; text-align:center; }
@media (max-width:560px){ .nc-row{ grid-template-columns:1fr; gap:0; } }

/* ===================== Legacy CTA band + buttons (about/legal) ===================== */
.cta-band{ background:var(--nc-green-deep)!important; }
.cta-band h2{ font-family:var(--font-heading); font-weight:500; }
.btn-primary{ background:var(--nc-green)!important; color:#fff!important; border-radius:2px; font-weight:600; letter-spacing:.02em; }
.btn-primary:hover{ background:#fff!important; color:var(--nc-green-deep)!important; }

/* ===================== Footer ===================== */
.site-footer{ background:var(--nc-green-deep); }
.site-footer h4{ font-family:var(--font-heading); font-weight:500; }
.x-social-ico:hover{ background:rgba(255,255,255,.2)!important; transform:translateY(-2px); }