/* index.css — page-specific (auto-generated) */

.eyebrow{
    font-family:"Instrument Sans",sans-serif;
    font-size:.74rem;
    letter-spacing:.24em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--accent);
    display:inline-block;
  }

a:focus-visible,button:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
    border-radius:3px;
  }

.brand{
    font-family:"Fraunces",serif;
    font-size:1.28rem;font-weight:500;color:#fff;
    letter-spacing:.01em;transition:color .35s ease;
  }

.hero{
    position:relative;min-height:92vh;display:flex;align-items:flex-end;
    color:#fff;overflow:hidden;
  }

.hero .bg{
    position:absolute;inset:0;
    background:#2a2622 url("/images/hero.jpg") center 35%/cover no-repeat;
    background-image:image-set(url("/images/hero.webp") type("image/webp"), url("/images/hero.jpg") type("image/jpeg"));
    background-size:cover;background-position:center 35%;background-repeat:no-repeat;
  }

.hero .scrim{
    position:absolute;inset:0;
    background:
      linear-gradient(90deg, rgba(15,11,7,.72) 0%, rgba(15,11,7,.42) 42%, rgba(15,11,7,.12) 100%),
      linear-gradient(0deg, rgba(15,11,7,.78) 0%, rgba(15,11,7,.25) 40%, rgba(15,11,7,0) 70%);
  }

.hero .wrap{position:relative;padding-bottom:clamp(3.5rem,8vh,6rem);padding-top:9rem;width:100%}

.hero .kicker{color:var(--accent-soft);margin-bottom:1.4rem}

.hero h1{
    color:#fff;font-size:clamp(3.4rem,10vw,7rem);font-weight:500;
    line-height:.92;margin-bottom:1.1rem;
  }

.hero .tag{
    font-family:"Fraunces",serif;font-style:italic;font-weight:400;
    font-size:clamp(1.15rem,2.4vw,1.6rem);color:rgba(255,255,255,.92);
    max-width:34ch;margin-bottom:2.4rem;line-height:1.35;
  }

.cta{
    display:inline-flex;align-items:center;gap:.7rem;
    background:var(--paper);color:var(--ink);
    font-weight:600;font-size:.98rem;letter-spacing:.01em;
    padding:.95rem 1.9rem;border-radius:2px;border:none;cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  }

.cta svg{transition:transform .25s ease}

.cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.55)}

.cta:hover svg{transform:translateX(4px)}

.cta.dark{background:var(--accent-soft);color:var(--espresso)}

.cta.dark:hover{background:#d9bd94}

.eq{display:flex;align-items:flex-end;gap:5px;height:26px;margin-bottom:2rem}

.eq span{width:4px;background:var(--accent-soft);border-radius:2px;height:40%}

@media (prefers-reduced-motion: no-preference){
    .eq span{animation:bounce 1.4s ease-in-out infinite}
    .eq span:nth-child(1){animation-delay:-.2s;height:60%}
    .eq span:nth-child(2){animation-delay:-.5s;height:100%}
    .eq span:nth-child(3){animation-delay:0s;height:45%}
    .eq span:nth-child(4){animation-delay:-.7s;height:80%}
    .eq span:nth-child(5){animation-delay:-.3s;height:55%}
    .eq span:nth-child(6){animation-delay:-.6s;height:90%}
    .eq span:nth-child(7){animation-delay:-.1s;height:50%}
  }

@keyframes bounce{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

.story{padding-block:clamp(5rem,11vw,9rem)}

.story + .story{padding-top:0}

.story .grid{
    display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(2.5rem,6vw,6rem);align-items:center;
  }

.story .copy{max-width:34rem}

.story h2{font-size:clamp(2.5rem,5.5vw,4rem);margin:1rem 0 1.5rem}

.story p{font-size:1.1rem;color:var(--text);line-height:1.8}

.story .copy em{font-style:italic;color:var(--ink)}

.wave{width:150px;height:16px;color:var(--accent);opacity:.9;margin-top:2rem;display:block}

.frame{
    position:relative;border-radius:12px;overflow:hidden;
    aspect-ratio:4/5;box-shadow:var(--shadow);
    background:linear-gradient(150deg,#3a2f27,#1c1712);
  }

.frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.frame picture{display:block;width:100%;height:100%}

.frame:hover img{transform:scale(1.04)}

.frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);border-radius:12px;pointer-events:none}

.story.reverse .frame{order:-1}

.story.reverse .copy{margin-left:auto}

.band{
    background:var(--espresso);color:#fff;position:relative;overflow:hidden;
    padding-block:clamp(4.5rem,10vw,7.5rem);
  }

.band .wave-bg{
    position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
    color:rgba(201,168,122,.10);width:100%;height:200px;
  }

.band .inner{position:relative;text-align:center;max-width:40rem;margin-inline:auto}

.band .eyebrow{color:var(--accent-soft)}

.band h2{color:#fff;font-size:clamp(2.3rem,5.5vw,3.7rem);margin:1rem 0 1.1rem}

.band p{color:rgba(255,255,255,.75);font-size:1.12rem;margin-bottom:2.2rem;line-height:1.7}

@media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none}
    .eq span{animation:none}
    .frame img{transition:none}
  }

@media (max-width:860px){
    nav ul{gap:1.3rem}
    nav a{font-size:.85rem}
    .brand{font-size:1.1rem}
    .story .grid{grid-template-columns:1fr;gap:2rem}
    .story.reverse .frame{order:0}
    .story .copy,.story.reverse .copy{max-width:100%;margin:0}
    .frame{aspect-ratio:3/2;max-width:520px}
    .story .copy{max-width:60ch}
  }

@media (max-width:520px){
    nav ul li:not(:last-child){display:none}
    .hero{min-height:86vh}
  }

.cta-ghost{display:inline-flex;align-items:center;gap:.6rem;color:#fff;font-weight:600;font-size:.98rem;padding:.95rem 1.6rem;border-radius:2px;border:1px solid rgba(255,255,255,.35);cursor:pointer;transition:border-color .25s ease,background .25s ease,transform .25s ease}
.cta-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.section{padding-block:clamp(4.5rem,10vw,8rem)}
.section.how{padding-top:0}
.section-head{max-width:44rem;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.section-head h2{font-size:clamp(2.3rem,5vw,3.6rem);margin:.9rem 0 1rem}
.section-head p{font-size:1.08rem;color:var(--stone)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.4rem)}
.step{border-top:2px solid var(--line);padding-top:1.4rem}
.step .step-n{font-family:"Fraunces",serif;font-size:1.15rem;color:var(--accent);font-variant-numeric:tabular-nums}
.step h3{font-size:1.35rem;margin:.5rem 0 .55rem}
.step p{color:var(--stone);line-height:1.7}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:1.6rem}}