/* Site theme — blush / white / coffee / forest green.
   Loaded last on every page so it settles colours the page styles set. */
:root{
  --blush:#F8EDE8; --white:#FFFFFF; --coffee:#3B2A22; --forest:#2F4A3A;
}
body{font-family:var(--body);color:var(--coffee);background:var(--blush)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);color:var(--coffee)}

/* headlines are coffee… */
.testimonials h2,.process h2,.process h3,.form-sec h2,.aya-hero h1,.invest h2,
.values h2,.value h3,.bio-intro__statement,.why__statement,.why__body .pull,
.meet-leticia blockquote,.bquote blockquote{color:var(--coffee)}

/* …and their italic words are forest */
.hero-text h1 em,.svc-hero h1 em,.contact-hero h1 em,.thanks h1 em,.aya-hero h1 em,
.manifesto h2 strong,.meet-leticia blockquote em,.bio-intro__statement em,
.why__statement em,.about-hero h1 em,.about-hero__dek em{color:var(--forest)}

/* small labels */
.eyebrow,.about-page .eyebrow,.testimonials .eyebrow,.process .eyebrow,.form-sec .eyebrow,
.values .eyebrow,.aya-hero .eyebrow,.invest .eyebrow,.about-hero .eyebrow,
.signature,.meet-leticia .signature,.bquote cite,.quotes cite,.pm-grid h3,.field label,
.fact span,.bio-intro__label,.why__label,.about-hero__note,.about-hero__index,.details .label{color:var(--forest)}

/* numbers */
.step .num,.who-item .num,.exp .num,.chapter__number,.value span,.fact strong,.pm-price{color:var(--forest)}

/* links */
nav a:hover{color:var(--forest)}
.details a,.thanks .links a{color:var(--forest);border-bottom-color:rgba(47,74,58,.35)}
.details a:hover,.thanks .links a:hover{color:var(--coffee)}

/* ---------- buttons ---------- */
a.btn,.form button,.form-card button{background:var(--forest);color:var(--blush)}
a.btn:hover,.form button:hover,.form-card button:hover{background:var(--coffee);color:var(--blush)}
a.btn.ghost,nav .btn.ghost{background:transparent;color:var(--coffee);border:1px solid var(--coffee)}
a.btn.ghost:hover,nav .btn.ghost:hover{background:var(--coffee);color:var(--blush)}

/* ---------- section bands: blush alternating with white ---------- */
.process{background:var(--blush);color:var(--coffee)}
.testimonials{background:var(--white);color:var(--coffee)}
.form-sec{background:var(--blush);color:var(--coffee)}
.aya-hero,.invest{background:var(--white);color:var(--coffee)}
.fact-strip,.why,.aya-strip{background:var(--blush)}
.bio-intro,.values{background:var(--white)}
.values{color:var(--coffee)}
.values__sticky p,.value p{color:var(--coffee)}
.values__list{border-top-color:rgba(59,42,34,.22)}
.value{border-bottom-color:rgba(59,42,34,.16)}
.aya-strip__mark{color:var(--forest)}

/* ---------- coffee bands: closing calls-to-action, manifesto, footer ---------- */
.closing,.pm-closing,.about-cta,footer{background:var(--coffee);color:var(--blush)}
.closing h2,.pm-closing h2,.about-cta h2{color:var(--blush)}
.closing h2 em,.about-cta h2 em,.manifesto blockquote em{color:var(--blush);font-style:italic}
.closing .eyebrow,.pm-closing .eyebrow,.about-page .about-cta .eyebrow{color:var(--blush);opacity:.8}
.about-cta::before{color:rgba(248,237,232,.05)}
.manifesto cite{color:var(--blush);opacity:.75}
.closing .btn,.pm-closing .btn,.about-cta .btn{background:var(--forest);color:var(--blush);border:0}
.closing .btn:hover,.pm-closing .btn:hover,.about-cta .btn:hover{background:var(--blush);color:var(--coffee)}
footer .tag{color:var(--blush)}

/* ---------- footer contact details ---------- */
.footer-info{opacity:.8;line-height:1.9}
.footer-line,.footer-name{display:block}
.footer-info a{color:inherit;text-decoration:none}
.footer-info a:hover{text-decoration:underline;text-underline-offset:3px}

/* form fields sit white on the blush form bands */
.form input,.form select,.form textarea{background:var(--white)}

/* ---------- larger type across every screen size ---------- */
body{font-size:20px}
.eyebrow{font-size:15px;letter-spacing:.24em}
a.btn,.card a,.form button,.form-card button{font-size:14.5px}
footer{font-size:17.5px}
footer .tag{font-size:22px}
.services .serving,.press span{font-size:18px}
.card p,.step p,.includes p,.exp p,.details p,.chapter p,.aya-strip p,.pm-includes p,.pm-tier .lead{font-size:19.5px}
.quotes blockquote{font-size:22px}
.quotes cite,.bquote cite,.field label,.details .label,.pm-grid h3{font-size:14px}
.meet-leticia .signature,.about-hero__index{font-size:15.5px}
.form input,.form select,.form textarea{font-size:18px}
.pm-grid p,.pm-craft p,.pm-products .pm-intro,.form-card .lede,.thanks .links,.form-note{font-size:18px}
.pm-tax,.pm-note{font-size:17px}
.why__label,.bio-intro__label,.fact span,.seen__kind,.manifesto cite,.about-hero__note{font-size:13px}
.timeline__aside,.seen__aside,.seen__title{font-size:19.5px}

/* ---------- home hero: large eyebrow + subtitle over the video ---------- */
.hero-text .eyebrow{font-size:clamp(18px,1.6vw,24px);letter-spacing:.22em}
.hero-text p{font-size:clamp(24px,2.1vw,30px)}

/* ---------- mobile: larger, easier-to-read type ---------- */
@media(max-width:600px){
  body{font-size:21px}
  .eyebrow{font-size:16px;letter-spacing:.2em}
  a.btn,.card a,.form button,.form-card button{font-size:15.5px}
  nav a,nav .services-toggle{font-size:18px}
  nav .services-submenu a{font-size:16px}
  nav .btn.ghost{font-size:14px}
  footer{font-size:18.5px}
  footer .tag{font-size:23px;margin-bottom:26px;line-height:1.3}

  /* footer: each detail on its own line, grouped into separated blocks */
  footer{padding:52px 8vw 56px}
  .footer-info{opacity:1;line-height:1.5;max-width:340px;margin:0 auto}
  .footer-group{padding:20px 0;border-top:1px solid rgba(248,237,232,.18)}
  .footer-group:first-child{border-top:0;padding-top:0}
  .footer-group:last-child{padding-bottom:0}
  .footer-name{font-family:var(--display);font-size:24px;letter-spacing:.02em;margin-bottom:8px}
  .footer-line{opacity:.85}
  .footer-line>span,.footer-line>a{display:block}
  .footer-line>span+span,.footer-line>a+a{margin-top:2px}
  .footer-dot,.footer-comma{display:none!important}
  .footer-line+.footer-line{margin-top:10px;font-style:italic}
  .footer-info a{display:block;padding:6px 0;word-break:break-word}
  .footer-serving{font-size:17px;line-height:1.55}
  .footer-social{display:flex!important;justify-content:center;gap:10px 22px;flex-wrap:wrap}
  .footer-social a{border:1px solid rgba(248,237,232,.35);border-radius:999px;padding:8px 16px;font-size:16px;letter-spacing:.04em}

  .hero-text .eyebrow{font-size:18px;letter-spacing:.18em}
  .hero-text p{font-size:24px}
  .services .serving,.press span{font-size:19px}
  .card p,.step p,.includes p,.exp p,.details p,.chapter p,.aya-strip p,.pm-includes p,.pm-tier .lead{font-size:20.5px}
  .card h3{font-size:29px}
  .step h3{font-size:24px}
  .quotes blockquote{font-size:23px}
  .quotes cite,.bquote cite,.field label,.details .label,.pm-grid h3{font-size:15px}
  .meet-leticia .signature,.about-hero__index{font-size:16px}
  .form input,.form select,.form textarea{font-size:19px}
  .form-sec p,.closing p{font-size:22px}
  .pm-grid p,.pm-craft p,.pm-products .pm-intro,.form-card .lede,.thanks .links,.form-note{font-size:19px}
  .pm-tax,.pm-note{font-size:18px}
  .why__label,.bio-intro__label,.fact span,.seen__kind,.manifesto cite,.about-hero__note{font-size:14px}
  .timeline__aside,.seen__aside,.seen__title{font-size:20.5px}
}

/* ---------- home hero: a few shades deeper than the backdrop blush ---------- */
:root{--blush-deep:#E6C3B8}
.hero-text .eyebrow,.hero-text h1 em{color:var(--blush-deep);text-shadow:0 1px 14px rgba(59,42,34,.45)}
.hero-text a.btn{background:var(--blush-deep);color:var(--coffee)}
.hero-text a.btn:hover{background:var(--coffee);color:var(--blush)}

/* ---------- home hero title: three services set at one equal size, divided by small blush dots ---------- */
.hero-text .hero-title{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 clamp(18px,2.4vw,40px);max-width:none;margin:0 0 30px;
  font-family:var(--display);font-weight:500;font-size:clamp(42px,6vw,96px);line-height:1;letter-spacing:-.005em;text-transform:uppercase;color:var(--coffee);text-shadow:0 0 24px rgba(248,237,232,.65)}
.hero-title__sep{width:9px;height:9px;border-radius:50%;background:var(--blush-deep);box-shadow:0 0 0 1px rgba(59,42,34,.12)}
@media(max-width:600px){
  .hero-text .hero-title{flex-direction:column;gap:6px;font-size:clamp(36px,10vw,46px)}
  .hero-title__sep{width:6px;height:6px}
}

/* ---------- home booking form: white band, so its fields switch to blush ---------- */
.form-sec--white{background:var(--white)}
.form-sec--white .form input,.form-sec--white .form select,.form-sec--white .form textarea{background:var(--blush)}

/* ---------- footer logo: the dark signature logo turned blush for the coffee band ---------- */
.footer-logo{display:block;width:auto;height:84px;margin:6px auto 18px;filter:brightness(0) invert(94%) sepia(6%) saturate(400%) hue-rotate(320deg)}
@media(max-width:600px){
  .footer-logo{height:72px;margin:0 auto 14px}
}

/* ---------- magazine headlines: condensed Didone capitals + italic accents ---------- */
h1,h2,h3{font-optical-sizing:auto}
h1{font-weight:500;text-transform:uppercase;letter-spacing:-.005em;line-height:.98;text-wrap:balance}
.contact-hero h1,.svc-hero h1,.thanks h1,.pm-hero h1,.hero-text h1:not(.hero-title){font-size:clamp(44px,6vw,96px)}
.aya-hero h1,.press-hero h1{font-size:clamp(46px,6.4vw,104px);letter-spacing:-.005em}
/* split heroes (text beside a photo) get a size that fits their column */
.svc-hero h1{font-size:clamp(40px,4.6vw,72px)}
h1 em{font-family:var(--script);font-style:italic!important;font-weight:400;text-transform:none;letter-spacing:-.01em;font-size:1.08em;line-height:1}
/* when a title ends on its accent, the italic drops to its own line beneath the capitals, cover-style */
h1.h1--stack em{display:block;font-size:1.12em;line-height:.95;margin-top:.02em}
.center h1.h1--stack em,.contact-hero h1.h1--stack em,.thanks h1.h1--stack em,.aya-hero h1.h1--stack em,.pm-hero h1.h1--stack em{text-align:center}

/* section headings: tighter display capitals */
h2{font-weight:500;text-transform:uppercase;letter-spacing:.01em;line-height:1.05}

/* ---------- italic serif accents across the site ---------- */
h2 em,h3 em,blockquote em,.why__statement em,.bio-intro__statement em,.manifesto h2 strong{
  font-family:var(--script);font-style:italic!important;font-weight:400;text-transform:none;letter-spacing:-.01em;font-size:1.1em;line-height:1}
.signature,.meet-leticia .signature{font-family:var(--script);font-style:italic;text-transform:none;letter-spacing:0;font-size:clamp(24px,2vw,30px);line-height:1.2}
.quotes cite,.bquote cite{font-family:var(--script);font-style:italic;text-transform:none;letter-spacing:0;font-size:22px;line-height:1.2}
.footer-name{font-family:var(--script);font-style:italic;letter-spacing:0;font-size:30px}
@media (max-width:640px){
  .quotes cite,.bquote cite{font-size:20px}
  .footer-name{font-size:26px}
}

/* ---------- home services: hero-scale capitals that bleed over the bottom of each photo ---------- */
.services--home .services-title{font-size:clamp(42px,6vw,96px);line-height:1;letter-spacing:-.005em;margin-top:16px;text-wrap:balance}
.services--home .card .img{position:relative;margin-bottom:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,.55) 84%,transparent 100%);mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,.55) 84%,transparent 100%)}
.services--home .card h3{position:relative;z-index:1;margin:clamp(-120px,-6.4vw,-64px) 0 22px;padding:0 6px;
  font-size:clamp(40px,4.3vw,70px);font-weight:500;line-height:.95;letter-spacing:-.005em;text-transform:uppercase;text-wrap:balance;overflow-wrap:anywhere;
  color:var(--coffee);text-shadow:0 0 24px rgba(248,237,232,.85),0 0 8px rgba(248,237,232,.6)}
@media(max-width:900px){
  .services--home .card h3{font-size:clamp(44px,12vw,72px);margin-top:clamp(-96px,-14vw,-56px)}
}