@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#0F1A2E;
  --cream:#FAFAF8;
  --amber:#D4923A;
  --slate:#5C6678;
  --text-on-dark:#FAFAF8;
  --text-on-light:#0F1A2E;
  --text-on-accent:#0F1A2E;
  --text-on-slate:#FAFAF8;
  --radius:6px;
  --radius-lg:16px;
  --shadow:0 20px 56px rgba(15,26,46,.14);
  --shadow-soft:0 10px 32px rgba(15,26,46,.1);
  --page-gutter:1.25rem;
}

html{scroll-behavior:smooth}

body{
  font-family:'Source Sans 3',system-ui,sans-serif;
  line-height:1.72;
  font-size:1.05rem;
  background:var(--cream);
  color:var(--text-on-light);
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,serif;
  line-height:1.18;
  font-weight:600;
}

img{max-width:100%;height:auto;display:block}

a{color:inherit}

.surface-dark{background:var(--ink);color:var(--text-on-dark)}
.surface-light{background:var(--cream);color:var(--text-on-light)}
.surface-accent{background:var(--amber);color:var(--text-on-accent)}
.surface-slate{background:var(--slate);color:var(--text-on-slate)}

.surface-dark a,.surface-light a,.surface-accent a,.surface-slate a{
  color:currentColor;
  text-decoration:underline;
  text-underline-offset:3px;
}

.surface-dark :where(h1,h2,h3,h4,p,li,dt,dd,label,address,figcaption,span,a:not(.btn)),
.surface-light :where(h1,h2,h3,h4,p,li,dt,dd,label,address,figcaption,span,a:not(.btn)),
.surface-accent :where(h1,h2,h3,h4,p,li,dt,dd,label,address,figcaption,span,a:not(.btn)),
.surface-slate :where(h1,h2,h3,h4,p,li,dt,dd,label,address,figcaption,span,a:not(.btn)){color:inherit}

.surface-dark .editorial-label,
.surface-slate .editorial-label{color:var(--amber)}

.surface-slate .extraction-stat-num,
.surface-dark .extraction-stat-num{color:var(--amber)}

.surface-dark .timeline-dot,
.brew-timeline .timeline-dot{color:var(--ink);background:var(--amber)}

.method-card,
.method-card h3,
.method-card p{color:var(--ink)}

.surface-accent .faq-card,
.surface-accent .faq-card h3,
.surface-accent .faq-card p{color:var(--text-on-light)}

.comparison-cell,
.comparison-cell h4,
.comparison-cell dt,
.comparison-cell dd{color:var(--ink)}

.hero-pattern-b__badge,
.hero-pattern-b__badge span{color:var(--ink)}

.surface-dark .btn-primary,
.surface-slate .btn-primary,
.surface-accent .btn-primary,
.surface-light .btn-primary,
.btn-primary{color:var(--ink);background:var(--amber);border-color:var(--amber)}

.surface-dark .btn-slate,
.surface-slate .btn-slate,
.surface-accent .btn-slate,
.surface-light .btn-slate,
.btn-slate{color:var(--cream);background:var(--slate);border-color:var(--slate)}

.surface-dark .btn-outline,
.surface-slate .btn-outline{color:var(--text-on-dark);border-color:currentColor}

.surface-accent .btn-outline{color:var(--text-on-accent);border-color:currentColor}

.editorial-label{
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--amber);
}

.surface-light .editorial-label{color:var(--slate)}
.surface-accent .editorial-label{color:var(--ink)}

.hero-serial{
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:1rem;
  opacity:.85;
}

.container{width:100%;max-width:1120px;margin:0 auto;padding-inline:var(--page-gutter)}
.container-wide{width:100%;max-width:1240px;margin:0 auto;padding-inline:var(--page-gutter)}

/* Header — transparent on hero, underline nav */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  transition:background .35s,box-shadow .35s,color .35s;
}

.site-header.is-transparent{
  background:transparent;
  color:var(--cream);
}

.site-header.is-scrolled{
  background:var(--cream);
  color:var(--ink);
  box-shadow:var(--shadow-soft);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:1.1rem;
}

.logo{
  font-family:'Fraunces',serif;
  font-size:1.35rem;
  text-decoration:none;
  color:inherit;
  font-weight:600;
  letter-spacing:-.02em;
}

.site-nav ul{
  display:flex;
  gap:1.5rem;
  list-style:none;
  flex-wrap:wrap;
}

.site-nav a{
  text-decoration:none;
  font-weight:600;
  font-size:.9rem;
  opacity:.85;
  color:inherit;
  position:relative;
  padding-bottom:4px;
}

.site-nav a::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  width:0;height:2px;
  background:currentColor;
  transition:width .25s ease;
}

.site-nav a:hover::after,.site-nav a.is-active::after{width:100%}
.site-nav a:hover,.site-nav a.is-active{opacity:1}

.nav-toggle{
  display:none;
  align-items:center;
  gap:.45rem;
  background:none;
  border:1px solid currentColor;
  padding:.45rem .75rem;
  border-radius:var(--radius);
  cursor:pointer;
  color:inherit;
  font:inherit;
  font-weight:600;
}

.nav-toggle-icon{display:flex;flex-direction:column;gap:5px;width:22px}
.nav-toggle-icon span{display:block;height:2px;background:currentColor;border-radius:1px}
.nav-backdrop{display:none}
.nav-close{display:none}

/* Pattern B — Full-bleed cinematic hero */
.hero-pattern-b{
  min-height:100vh;
  min-height:100dvh;
  position:relative;
  display:flex;
  align-items:flex-end;
  background:var(--ink) center/cover no-repeat;
  padding-top:5rem;
}

.hero-pattern-b__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(15,26,46,.35) 0%,rgba(15,26,46,.55) 45%,rgba(15,26,46,.88) 100%);
  z-index:1;
}

.hero-pattern-b__badge{
  position:absolute;
  top:clamp(5.5rem,12vh,7rem);
  right:clamp(1rem,4vw,3rem);
  z-index:3;
  background:rgba(250,250,248,.95);
  color:var(--ink);
  padding:.85rem 1.25rem;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  font-size:.88rem;
  font-weight:600;
  max-width:220px;
  line-height:1.4;
}

.hero-pattern-b__badge span{
  display:block;
  font-size:.72rem;
  font-weight:500;
  opacity:.75;
  margin-top:.25rem;
  letter-spacing:.04em;
}

.hero-pattern-b__content{
  position:relative;
  z-index:2;
  width:100%;
  padding:clamp(2.5rem,8vw,5rem) 0 clamp(3rem,10vw,6rem);
}

.hero-pattern-b h1{
  font-size:clamp(2.2rem,5.5vw,3.85rem);
  max-width:18ch;
  margin-bottom:1.1rem;
}

.hero-sub{
  max-width:52ch;
  margin-bottom:1.85rem;
  font-size:1.12rem;
  opacity:.92;
}

.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem}

/* Page hero (inner pages) */
.page-hero{
  padding:clamp(6rem,14vw,9rem) 0 clamp(2.5rem,6vw,4rem);
}

.page-hero h1{font-size:clamp(2rem,4.5vw,2.85rem);margin-bottom:.75rem}
.page-hero-lead{max-width:58ch;opacity:.9;font-size:1.08rem}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.75rem 1.45rem;
  border-radius:var(--radius);
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  font-family:inherit;
  transition:transform .2s,background .2s,border-color .2s;
}

.btn:hover{transform:translateY(-1px)}

.btn-primary{
  background:var(--amber);
  color:var(--ink);
  border-color:var(--amber);
}

.btn-primary:hover{background:#c48432;border-color:#c48432}

.btn-outline{
  background:transparent;
  color:inherit;
  border-color:currentColor;
}

.btn-slate{
  background:var(--slate);
  color:var(--cream);
  border-color:var(--slate);
}

/* Editorial charter */
.charter-block{padding:clamp(3rem,8vw,5rem) 0}
.charter-block p{max-width:72ch;font-size:1.08rem}

/* Extraction stats — 3 metrics */
.extraction-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid rgba(250,250,248,.15);
  border-bottom:1px solid rgba(250,250,248,.15);
}

.extraction-stat{
  padding:clamp(2rem,5vw,3rem) 1.5rem;
  text-align:center;
  border-right:1px solid rgba(250,250,248,.12);
}

.extraction-stat:last-child{border-right:none}

.extraction-stat-num{
  display:block;
  font-family:'Fraunces',serif;
  font-size:clamp(2.5rem,6vw,3.75rem);
  font-weight:700;
  color:var(--amber);
  line-height:1;
  margin-bottom:.5rem;
}

.extraction-stat-label{
  font-size:.88rem;
  opacity:.88;
  max-width:18ch;
  margin:0 auto;
}

/* Method lanes — amber review cards */
.method-lanes{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5rem;
  padding:clamp(3rem,8vw,5rem) 0;
}

.method-card{
  background:var(--amber);
  color:var(--ink);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  box-shadow:var(--shadow-soft);
}

.method-card__tag{
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  opacity:.7;
  margin-bottom:.65rem;
}

.method-card h3{font-size:1.35rem;margin-bottom:.75rem}
.method-card p{font-size:.98rem;line-height:1.65}

/* Brew timeline */
.brew-timeline{padding:clamp(3rem,8vw,5rem) 0}

.timeline-rail{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.25rem;
  margin-top:2rem;
  position:relative;
}

.timeline-rail::before{
  content:'';
  position:absolute;
  top:1.1rem;
  left:5%;right:5%;
  height:2px;
  background:var(--amber);
  opacity:.35;
  z-index:0;
}

.timeline-step{
  position:relative;
  z-index:1;
  text-align:center;
}

.timeline-dot{
  width:2.25rem;height:2.25rem;
  border-radius:50%;
  background:var(--amber);
  color:var(--ink);
  font-weight:700;
  font-size:.85rem;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto .85rem;
}

.timeline-step h4{font-size:1rem;margin-bottom:.45rem}
.timeline-step p{font-size:.88rem;opacity:.85}

/* Method comparison grid */
.comparison-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.25rem;
  margin-top:2rem;
}

.comparison-cell{
  background:var(--cream);
  border:1px solid rgba(15,26,46,.1);
  border-radius:var(--radius-lg);
  padding:1.35rem;
}

.comparison-cell h4{font-size:1.05rem;margin-bottom:.5rem;color:var(--ink)}
.comparison-cell dl{font-size:.9rem}
.comparison-cell dt{font-weight:700;margin-top:.65rem}
.comparison-cell dd{opacity:.85;margin-left:0}

.comparison-featured{
  grid-column:span 1;
}

.comparison-featured img{
  border-radius:var(--radius);
  margin-bottom:1rem;
}

/* Inline FAQ card-grid (index) */
.faq-card-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.25rem;
  margin-top:2rem;
}

.faq-card{
  background:var(--cream);
  border:1px solid rgba(15,26,46,.08);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  box-shadow:var(--shadow-soft);
}

.faq-card h3{font-size:1.05rem;margin-bottom:.65rem}
.faq-card p{font-size:.95rem;opacity:.9}

/* CTA band */
.cta-band{
  padding:clamp(3rem,8vw,4.5rem) 0;
  text-align:center;
}

.cta-band h2{font-size:clamp(1.65rem,3.5vw,2.25rem);margin-bottom:1.25rem}

/* Content sections */
.section-pad{padding:clamp(3rem,8vw,5rem) 0}

.content-img{border-radius:var(--radius-lg);width:100%}

.content-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
  align-items:start;
}

.content-grid--reverse .content-grid__media{order:2}
.content-grid--reverse .content-grid__text{order:1}

/* Review cards (programs) */
.review-grid{
  display:grid;
  gap:2.5rem;
}

.review-item{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:2rem;
  align-items:center;
  padding:2rem 0;
  border-bottom:1px solid rgba(15,26,46,.08);
}

.review-item:last-child{border-bottom:none}

.review-item img{border-radius:var(--radius-lg);width:100%}

.review-item h2{font-size:1.55rem;margin-bottom:.85rem}

.review-meta{
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:.5rem;
  font-weight:600;
}

/* Services cards */
.service-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5rem;
}

.service-card{
  border:1px solid rgba(15,26,46,.1);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  background:var(--cream);
}

.service-card h3{font-size:1.2rem;margin-bottom:.65rem}

/* FAQ page layout */
.faq-layout{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:2.5rem;
  align-items:start;
}

.faq-list{display:grid;gap:1.25rem}

.faq-list-item{
  border-bottom:1px solid rgba(15,26,46,.1);
  padding-bottom:1.25rem;
}

.faq-list-item h3{font-size:1.1rem;margin-bottom:.55rem}
.faq-list-item p{font-size:.98rem;opacity:.9}

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:2.5rem;
  padding:clamp(3rem,8vw,5rem) 0;
}

.contact-details address{font-style:normal;line-height:1.8}

.form-panel{
  background:var(--cream);
  border:1px solid rgba(15,26,46,.1);
  border-radius:var(--radius-lg);
  padding:2rem;
  box-shadow:var(--shadow-soft);
}

.form-group{margin-bottom:1.15rem}

.form-group label{
  display:block;
  font-weight:600;
  margin-bottom:.35rem;
  font-size:.92rem;
}

.form-group input,.form-group select,.form-group textarea{
  width:100%;
  padding:.65rem .85rem;
  border:1px solid rgba(15,26,46,.2);
  border-radius:var(--radius);
  font:inherit;
  background:#fff;
}

.form-group textarea{min-height:140px;resize:vertical}

.form-check{
  display:flex;
  gap:.65rem;
  align-items:flex-start;
}

.form-check input{width:auto;margin-top:.25rem;flex-shrink:0}

.hp-field{
  position:absolute;
  left:-9999px;
  height:0;overflow:hidden;
}

.alert{
  padding:1rem 1.15rem;
  border-radius:var(--radius);
  margin-bottom:1.25rem;
  background:rgba(212,146,58,.15);
  border:1px solid var(--amber);
}

/* Legal */
.legal-content h2{
  font-size:1.35rem;
  margin:2rem 0 .85rem;
}

.legal-content h3{
  font-size:1.12rem;
  margin:1.5rem 0 .65rem;
}

.legal-content p,.legal-content li{margin-bottom:.85rem}
.legal-content ul{padding-left:1.35rem}

.legal-hub{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.25rem;
  margin-top:2rem;
}

.legal-hub-card{
  border:1px solid rgba(15,26,46,.1);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  text-decoration:none;
  transition:box-shadow .2s,transform .2s;
}

.legal-hub-card:hover{
  box-shadow:var(--shadow-soft);
  transform:translateY(-2px);
}

.legal-hub-card h2{font-size:1.15rem;margin-bottom:.5rem;text-decoration:none}

/* Disclaimer callout */
.disclaimer-callout{
  padding:1.25rem 1.5rem;
  border-left:4px solid var(--amber);
  background:rgba(212,146,58,.08);
  margin:2rem 0;
  font-size:.95rem;
}

/* Footer */
.site-footer{padding:3rem 0 2rem}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:2rem;
  margin-bottom:2rem;
}

.footer-grid h3{
  font-size:.95rem;
  margin-bottom:.85rem;
  font-family:'Source Sans 3',sans-serif;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.footer-grid ul{list-style:none}
.footer-grid li{margin-bottom:.45rem}

.footer-grid a{text-decoration:none;opacity:.88}
.footer-grid a:hover{opacity:1;text-decoration:underline}

.footer-bottom{
  border-top:1px solid rgba(250,250,248,.12);
  padding-top:1.5rem;
  font-size:.88rem;
  opacity:.85;
}

.surface-light .footer-bottom{border-color:rgba(15,26,46,.1)}

.footer-disclaimer{margin-top:.65rem;max-width:72ch;line-height:1.6}

.footer-hosting{margin-top:.45rem;font-size:.82rem;opacity:.75}

/* Cookie banner */
.cookie-banner{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:200;
  padding:1.25rem 0;
  box-shadow:0 -8px 32px rgba(15,26,46,.12);
  border-top:1px solid rgba(15,26,46,.08);
}

.cookie-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
  justify-content:space-between;
}

.cookie-actions{display:flex;flex-wrap:wrap;gap:.65rem}

.cookie-custom-panel{
  width:100%;
  margin-top:.75rem;
  padding-top:.75rem;
  border-top:1px solid rgba(15,26,46,.1);
}

/* 404 */
.error-page{
  min-height:70vh;
  display:flex;
  align-items:center;
  text-align:center;
  padding:6rem 0 4rem;
}

/* Scroll reveal */
.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .65s ease,transform .65s ease;
}

.js .reveal.is-visible{
  opacity:1;
  transform:none;
}

.no-js .reveal{opacity:1;transform:none}

/* Responsive */
@media(max-width:960px){
  .method-lanes,.comparison-grid,.faq-card-grid,.service-cards,.content-grid,.contact-grid,.faq-layout,.footer-grid,.legal-hub{grid-template-columns:1fr}
  .timeline-rail{grid-template-columns:repeat(2,1fr);gap:2rem}
  .timeline-rail::before{display:none}
  .extraction-strip{grid-template-columns:1fr}
  .extraction-stat{border-right:none;border-bottom:1px solid rgba(250,250,248,.12)}
  .review-item{grid-template-columns:1fr}
  .content-grid--reverse .content-grid__media,.content-grid--reverse .content-grid__text{order:unset}
}

@media(max-width:768px){
  :root{--page-gutter:1.5rem}

  .nav-toggle{display:flex}
  .site-nav{
    position:fixed;
    top:0;right:0;
    width:min(320px,88vw);
    height:100vh;
    background:var(--ink);
    color:var(--cream);
    padding:4rem 1.5rem 2rem;
    transform:translateX(100%);
    transition:transform .3s ease;
    z-index:110;
  }
  .site-nav.is-open{transform:translateX(0)}
  .site-nav ul{flex-direction:column;gap:1.25rem}
  .nav-close{
    display:block;
    position:absolute;
    top:1rem;right:1rem;
    background:none;border:none;
    font-size:1.75rem;
    cursor:pointer;
    color:inherit;
  }
  .nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(15,26,46,.55);
    z-index:105;
    opacity:0;
    transition:opacity .3s;
    pointer-events:none;
  }
  .nav-backdrop.is-visible{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}
  .hero-pattern-b__badge{top:5rem;right:1rem;font-size:.82rem}
}