/* ============================================
   EZER — shared design system
   Light theme (brand = warmth of cream ground)
   ============================================ */

:root{
  --cream: #F6F1E7;
  --cream-deep: #EFE7D6;
  --panel: #FBF8F1;
  --ink: #2A241C;
  --ink-soft: #57503F;
  --terracotta: #A85736;     /* darkened for AA contrast on cream */
  --terracotta-deep: #8F4B2C;
  --sage: #6E7D60;
  --line: #E4DACB;
  --serif: 'Fraunces', serif;
  --hebrew: 'Frank Ruhl Libre', serif;
  --sans: 'Work Sans', sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
img{ max-width:100%; display:block; }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 6vw;
  background:rgba(246,241,231,.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-mark{
  font-family:var(--serif); font-weight:600; font-size:1.3rem;
  letter-spacing:.02em; text-decoration:none; color:var(--ink);
}
.nav-links{
  display:flex; gap:26px; list-style:none; margin:0; padding:0;
  font-size:.86rem; letter-spacing:.02em;
}
.nav-links a{ text-decoration:none; color:var(--ink-soft); transition:color .2s; padding:8px 0; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--terracotta); }
.nav-links a[aria-current="page"]{ font-weight:600; }
@media (max-width:720px){
  .nav-links{ gap:16px; font-size:.78rem; flex-wrap:wrap; justify-content:flex-end; max-width:60%; }
}

/* ---------- LAYOUT ---------- */
.wrap{ max-width:860px; margin:0 auto; padding:0 6vw; }
.block{ padding:90px 0; }
.block-tight{ padding:60px 0; }

.eyebrow{
  font-size:.76rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--terracotta); font-weight:600; margin-bottom:14px; display:block;
}

h1,h2,h3{ font-family:var(--serif); font-weight:600; margin:0 0 .4em; color:var(--ink); letter-spacing:-.01em; }
h1{ font-size:clamp(2.3rem,5.5vw,3.6rem); line-height:1.1; }
h2{ font-size:clamp(1.7rem,3.5vw,2.3rem); line-height:1.2; }
h3{ font-size:1.25rem; }
p{ color:var(--ink-soft); max-width:60ch; }
.lead{ font-size:1.15rem; color:var(--ink); max-width:60ch; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block; padding:14px 28px; border-radius:999px;
  font-size:.94rem; font-weight:500; text-decoration:none; cursor:pointer;
  border:1px solid transparent; transition:transform .15s, background .2s, color .2s;
}
.btn-solid{ background:var(--terracotta); color:var(--cream); }
.btn-solid:hover{ background:var(--terracotta-deep); transform:translateY(-1px); }
.btn-outline{ border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--cream); }

/* ---------- HERO ---------- */
.hero{
  min-height:82vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  position:relative; overflow:hidden; padding:80px 6vw;
}
.hero-hebrew{
  font-family:var(--hebrew); font-size:clamp(6rem,22vw,15rem);
  color:var(--terracotta); opacity:.09; position:absolute;
  top:50%; left:50%; transform:translate(-50%,-50%); line-height:1;
  user-select:none; pointer-events:none;
}
.hero-content{ position:relative; opacity:0; transform:translateY(14px); animation:rise .9s ease .15s forwards; }
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }
.hero h1{ margin-bottom:.3em; }
.hero .lead{ margin:0 auto; }
.hero-cta{ margin-top:38px; display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* ---------- CARDS / PANELS ---------- */
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:34px; }
.panel + .panel{ margin-top:16px; }

.cta-band{
  background:var(--ink); color:var(--cream); border-radius:20px;
  padding:52px 8%; text-align:center;
}
.cta-band h2{ color:var(--cream); }
.cta-band p{ color:#D9D2C2; margin:0 auto 26px; }
.cta-band .btn-solid{ background:var(--terracotta); }

/* ---------- OFFER ACCORDION ---------- */
.offer-list{ border-top:1px solid var(--line); }
.offer-item{ border-bottom:1px solid var(--line); }
.offer-btn{
  width:100%; background:none; border:none; cursor:pointer; text-align:left;
  display:flex; justify-content:space-between; align-items:center;
  padding:26px 0; font-family:var(--serif); font-size:1.25rem; color:var(--ink);
}
.offer-toggle{ font-size:1.4rem; color:var(--terracotta); transition:transform .25s; margin-left:20px; flex-shrink:0; }
.offer-item.open .offer-toggle{ transform:rotate(45deg); }
.offer-body{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.offer-item.open .offer-body{ max-height:260px; }
.offer-body p{ padding-bottom:24px; }

/* ---------- THE NAME (interactive) ---------- */
.name-letters{
  display:flex; justify-content:center; gap:10px; direction:rtl;
  margin:30px 0; font-family:var(--hebrew); font-size:4rem;
}
.letter{
  background:none; border:none; cursor:pointer; padding:6px 12px; border-radius:12px;
  color:var(--ink); font-family:var(--hebrew); font-size:4rem; transition:background .2s,color .2s;
}
.letter:hover, .letter.active{ background:var(--cream-deep); color:var(--terracotta); }
.letter-detail{ max-width:480px; margin:0 auto; min-height:96px; transition:opacity .2s; }
.letter-detail .term{ font-family:var(--serif); font-weight:600; color:var(--ink); display:block; margin-bottom:4px; }

/* ---------- VALUES ---------- */
.values-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.value-card{ border:1px solid var(--line); border-radius:14px; padding:20px; cursor:pointer; transition:border-color .2s,background .2s; }
.value-card:hover, .value-card.open{ border-color:var(--terracotta); background:var(--panel); }
.value-num{ font-family:var(--serif); color:var(--terracotta); font-size:.85rem; display:block; margin-bottom:6px; }
.value-title{ font-family:var(--serif); font-weight:600; font-size:1.05rem; }
.value-body{ max-height:0; overflow:hidden; transition:max-height .25s; font-size:.9rem; }
.value-card.open .value-body{ max-height:120px; margin-top:10px; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); padding:22px 0; }
.faq-q{ font-family:var(--serif); font-weight:600; font-size:1.1rem; color:var(--ink); margin:0 0 8px; }
.faq-a{ margin:0; }

/* ---------- STEP TIMELINE ---------- */
.steps{ list-style:none; margin:30px 0 0; padding:0; counter-reset:step; }
.steps li{ position:relative; padding:0 0 28px 46px; border-left:2px solid var(--line); margin-left:14px; }
.steps li:last-child{ border-left-color:transparent; padding-bottom:0; }
.steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:-15px; top:-2px; width:28px; height:28px;
  background:var(--terracotta); color:var(--cream); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:.85rem;
}
.steps h3{ margin:0 0 4px; }

/* ---------- PORTRAIT ---------- */
.why-layout{ display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:start; }
.portrait{ border-radius:16px; width:200px; height:auto; border:1px solid var(--line); }
@media (max-width:600px){
  .why-layout{ grid-template-columns:1fr; }
  .portrait{ width:160px; }
}

/* ---------- FLAGS (author-only, for Ryan) ---------- */
.flag{ display:inline-block; margin-top:16px; font-size:.78rem; color:var(--sage); background:#EEF0EA; padding:6px 12px; border-radius:8px; }

/* ---------- FOOTER ---------- */
.footer{ border-top:1px solid var(--line); padding:40px 6vw 56px; }
.footer-inner{ max-width:860px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; font-size:.84rem; color:var(--ink-soft); }
.footer a{ color:var(--terracotta); text-decoration:none; }
.footer-links{ display:flex; gap:18px; list-style:none; margin:0; padding:0; }
.footer-ai{
  max-width:860px; margin:22px auto 0; padding-top:18px;
  border-top:1px solid var(--line);
  text-align:center; font-size:.76rem; color:var(--ink-soft); opacity:.72;
  font-style:italic;
}

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