/* ============================================================
   BeautyAI — Warm Editorial design system
   Cormorant Garamond + Jost · espresso / cream / champagne-hairline
   ============================================================ */

:root{
  --paper:#F2ECDE;
  --paper-deep:#EBE3D2;
  --espresso:#1B1714;
  --espresso-soft:#2A2420;
  --ink:#241F1B;
  --taupe:#6F6356;
  --taupe-light:#8B7F71;
  --champagne:#C2A878;
  --champagne-deep:#A88A56;
  --rose-ghost:#C9ABA4;
  --cream:#EDE4D3;
  --display:'Cormorant Garamond', Georgia, serif;
  --body:'Jost', system-ui, sans-serif;
  --line:rgba(27,23,20,.16);
  --line-soft:rgba(27,23,20,.10);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(24px,6vw,80px)}

.eyebrow{
  font-family:var(--body);font-weight:400;font-size:11px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--taupe);
}
.eyebrow .dot{color:var(--champagne-deep);margin:0 .5em}
.mark{color:var(--champagne-deep);font-style:normal}
a{color:inherit;text-decoration:none}

/* ── masthead ── */
header.mast{
  position:sticky;top:0;z-index:50;
  background:rgba(242,236,222,.86);
  backdrop-filter:blur(8px);
  border-bottom:.5px solid var(--line);
}
.mast-inner{display:flex;align-items:center;justify-content:space-between;height:78px}
.wordmark{font-family:var(--display);font-weight:500;font-size:27px;letter-spacing:.01em;line-height:1}
.wordmark .ai{color:var(--champagne-deep)}
nav.mast-nav{display:flex;gap:clamp(20px,3vw,44px);align-items:center}
nav.mast-nav a{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);
  position:relative;padding:4px 0;transition:color .35s ease;
}
nav.mast-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:.5px;width:0;
  background:var(--champagne-deep);transition:width .4s ease;
}
nav.mast-nav a:hover,nav.mast-nav a.here{color:var(--ink)}
nav.mast-nav a:hover::after,nav.mast-nav a.here::after{width:100%}

/* ── shared link / cta ── */
.ulink{
  display:inline-block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);padding-bottom:6px;position:relative;
}
.ulink::after{
  content:"";position:absolute;left:0;bottom:0;height:.5px;width:100%;
  background:var(--champagne-deep);transform:scaleX(1);transform-origin:left;
  transition:transform .45s cubic-bezier(.4,0,.1,1);
}
.ulink:hover::after{transform:scaleX(0);transform-origin:right}
.ulink .arr{margin-left:.7em;transition:transform .4s ease;display:inline-block}
.ulink:hover .arr{transform:translateX(6px)}

/* ── home hero ── */
.hero{padding:clamp(72px,13vw,150px) 0 clamp(60px,9vw,120px);position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,8.2fr) minmax(0,3.8fr);gap:40px;align-items:end}
.hero .spine{
  position:absolute;left:clamp(24px,6vw,80px);top:clamp(72px,13vw,150px);
  width:.5px;height:clamp(180px,26vw,320px);
  background:linear-gradient(var(--champagne) 0%,rgba(194,168,120,0) 100%);
  transform-origin:top;animation:spineDraw 1.4s .2s cubic-bezier(.2,.7,.2,1) both;
}
.hero-text{padding-left:clamp(20px,4vw,52px)}
.hero h1{
  font-family:var(--display);font-weight:300;
  font-size:clamp(48px,8.4vw,118px);line-height:.96;letter-spacing:-.012em;
  color:var(--espresso);margin:26px 0 0;
}
.hero h1 em{font-style:italic;color:var(--ink)}
.hero h1 .amp{color:var(--champagne-deep);font-style:italic}
.hero-sub{max-width:30ch;margin-top:34px;font-size:clamp(15px,1.4vw,17px);color:var(--taupe);font-weight:300;line-height:1.85}
.hero-cta-row{margin-top:42px}
.hero-aside{padding-bottom:10px}
.hero-aside .label{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--taupe-light)}
.hero-aside .line{font-family:var(--display);font-style:italic;font-weight:400;font-size:21px;color:var(--ink);margin-top:12px;line-height:1.4;max-width:24ch}

/* ── interior page hero ── */
.page-hero{padding:clamp(64px,10vw,124px) 0 clamp(36px,5vw,64px);position:relative}
.page-hero .eyebrow{display:block;margin-bottom:30px}
.page-hero h1{
  font-family:var(--display);font-weight:300;
  font-size:clamp(40px,6.8vw,90px);line-height:1.0;letter-spacing:-.012em;color:var(--espresso);max-width:16ch;
}
.page-hero h1 em{font-style:italic;color:var(--ink)}
.page-hero h1 .gold{color:var(--champagne-deep);font-style:italic}
.page-hero .lede{margin-top:32px;max-width:46ch;font-size:clamp(16px,1.45vw,19px);color:var(--taupe);font-weight:300;line-height:1.85}

/* ── bands ── */
.band{padding:clamp(64px,10vw,130px) 0}
.band.deep{background:var(--paper-deep);border-top:.5px solid var(--line-soft)}
.band.dark{background:var(--espresso);color:var(--cream)}
.band.dark .eyebrow{color:var(--champagne)}

/* ── manifesto / quotes ── */
.manifesto{background:var(--espresso);color:var(--cream);padding:clamp(80px,12vw,150px) 0}
.manifesto .mk{font-size:14px;color:var(--champagne);margin-bottom:30px}
.manifesto p{font-family:var(--display);font-weight:300;font-size:clamp(28px,4.6vw,58px);line-height:1.18;letter-spacing:-.01em;max-width:18ch}
.manifesto p .hl{font-style:italic;color:var(--champagne)}

.big-quote{font-family:var(--display);font-weight:300;font-size:clamp(26px,4vw,50px);line-height:1.22;letter-spacing:-.01em;max-width:20ch}
.big-quote em{font-style:italic;color:var(--champagne)}
.quote-attr{margin-top:30px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--champagne)}

/* ── section head ── */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;border-bottom:.5px solid var(--line);padding-bottom:22px;margin-bottom:8px}
.sec-head h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,38px);color:var(--espresso);letter-spacing:-.01em}

/* ── services (home teaser + full) ── */
.svc-row{
  display:grid;grid-template-columns:minmax(0,3.4fr) minmax(0,6.6fr);gap:clamp(24px,5vw,72px);
  padding:clamp(38px,5vw,58px) 0;border-bottom:.5px solid var(--line);align-items:start;
}
.svc-row .svc-title{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.6vw,34px);color:var(--ink);line-height:1.12}
.svc-row .svc-title .em{display:block;font-style:italic;font-size:.62em;color:var(--champagne-deep);margin-bottom:14px;letter-spacing:.02em}
.svc-row .svc-body{font-size:clamp(15px,1.35vw,17px);color:var(--taupe);font-weight:300;line-height:1.85;max-width:46ch;padding-top:6px}
.svc-row .svc-body .deliver{margin-top:22px;list-style:none;display:flex;flex-wrap:wrap;gap:8px 0}
.svc-row .svc-body .deliver li{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe-light);position:relative;padding:0 18px 0 0;margin-right:18px}
.svc-row .svc-body .deliver li::after{content:"✦";position:absolute;right:0;color:var(--champagne-deep);font-size:9px;top:1px}
.svc-row .svc-body .deliver li:last-child{margin-right:0;padding-right:0}
.svc-row .svc-body .deliver li:last-child::after{content:""}

/* ── two-column editorial ── */
.two-col{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,90px);align-items:start}
.col-label .eyebrow{display:block;margin-bottom:0}
.col-label .vrule{height:.5px;width:46px;background:var(--champagne-deep);margin-top:24px}
.col-body h3{font-family:var(--display);font-weight:300;font-size:clamp(28px,3.8vw,48px);line-height:1.18;color:var(--espresso);letter-spacing:-.01em;max-width:20ch}
.col-body h3 em{font-style:italic;color:var(--ink)}
.col-body .p{margin-top:26px;font-size:clamp(15px,1.35vw,17px);color:var(--taupe);max-width:54ch;line-height:1.85;font-weight:300}
.col-body .p + .p{margin-top:18px}
.band.dark .col-body h3{color:var(--cream)}
.band.dark .col-body h3 em{color:var(--champagne)}
.band.dark .col-body .p{color:#C9BFAE}
.band.dark .col-label .vrule{background:var(--champagne)}
.band.dark .eyebrow .dot{color:var(--champagne)}

/* ── credentials row ── */
.creds{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:8px;border-top:.5px solid var(--line)}
.creds .cred{padding:clamp(28px,4vw,44px) clamp(18px,3vw,32px) 8px 0;border-right:.5px solid var(--line)}
.creds .cred:last-child{border-right:none}
.creds .cred .n{font-family:var(--display);font-weight:300;font-size:clamp(38px,5vw,64px);color:var(--espresso);line-height:1}
.creds .cred .l{margin-top:14px;font-size:12px;letter-spacing:.04em;color:var(--taupe);line-height:1.6;max-width:24ch}

/* ── sub-brands / work cards ── */
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,36px);margin-top:8px}
.work-card{border:.5px solid var(--line);background:var(--paper);padding:clamp(28px,4vw,46px);border-radius:0;transition:border-color .4s ease}
.work-card:hover{border-color:var(--champagne-deep)}
.work-card .tm{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--champagne-deep);margin-bottom:22px}
.work-card h3{font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,38px);color:var(--ink);line-height:1.08;letter-spacing:-.01em}
.work-card .cat{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe-light);margin-top:10px}
.work-card .desc{margin-top:22px;font-size:15px;color:var(--taupe);line-height:1.8;font-weight:300}
.work-card .go{margin-top:26px}

.note{margin-top:clamp(44px,6vw,72px);border-top:.5px solid var(--line);padding-top:32px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px}
.note .nt{font-family:var(--display);font-style:italic;font-size:clamp(20px,2.4vw,28px);color:var(--ink);max-width:30ch;line-height:1.3}

/* ── how we work steps (a real sequence → numbers earn their place) ── */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:8px}
.flow .step .si{font-family:var(--display);font-style:italic;font-size:22px;color:var(--champagne-deep)}
.flow .step h4{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.2vw,28px);color:var(--ink);margin-top:14px;line-height:1.1}
.flow .step p{margin-top:14px;font-size:15px;color:var(--taupe);line-height:1.8;font-weight:300}
.flow .step .rule{height:.5px;width:36px;background:var(--champagne-deep);margin-top:22px}

/* ── contact ── */
.contact-hero{padding:clamp(80px,13vw,170px) 0 clamp(60px,9vw,120px);text-align:center}
.contact-hero .mk{font-size:15px;color:var(--champagne-deep);margin-bottom:30px}
.contact-hero h1{font-family:var(--display);font-weight:300;font-size:clamp(40px,7vw,92px);line-height:1.02;letter-spacing:-.012em;color:var(--espresso);max-width:18ch;margin:0 auto}
.contact-hero h1 em{font-style:italic;color:var(--ink)}
.contact-hero .lede{max-width:42ch;margin:30px auto 0;font-size:clamp(16px,1.45vw,19px);color:var(--taupe);font-weight:300;line-height:1.85}
.contact-hero .cta-big{margin-top:48px}
.contact-rows{max-width:680px;margin:0 auto;border-top:.5px solid var(--line)}
.contact-rows .row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:26px 0;border-bottom:.5px solid var(--line)}
.contact-rows .row .k{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe)}
.contact-rows .row .v{font-family:var(--display);font-size:clamp(19px,2.2vw,26px);color:var(--ink);font-style:italic}
.contact-rows .row .v a:hover{color:var(--champagne-deep)}

/* ── closing cta ── */
.closing{background:var(--espresso);color:var(--cream);padding:clamp(88px,13vw,160px) 0;text-align:center}
.closing .mk{font-size:15px;color:var(--champagne);margin-bottom:28px}
.closing h2{font-family:var(--display);font-weight:300;font-size:clamp(32px,5.4vw,68px);line-height:1.12;letter-spacing:-.01em;max-width:16ch;margin:0 auto 44px}
.closing h2 em{font-style:italic;color:var(--champagne)}
.closing .ulink{color:var(--cream)}
.closing .ulink::after{background:var(--champagne)}

/* ── footer ── */
footer.site{padding:54px 0 60px;border-top:.5px solid var(--line)}
.foot-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px}
.foot-mark{font-family:var(--display);font-weight:500;font-size:21px}
.foot-mark .ai{color:var(--champagne-deep)}
.foot-meta{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.foot-meta a:hover{color:var(--ink)}

/* ── reveal ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@keyframes spineDraw{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ── responsive ── */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-aside{border-top:.5px solid var(--line);padding-top:28px}
  .hero .spine{display:none}
  .hero-text{padding-left:0}
  .svc-row{grid-template-columns:1fr;gap:18px}
  .two-col{grid-template-columns:1fr;gap:30px}
  .creds{grid-template-columns:1fr}
  .creds .cred{border-right:none;border-bottom:.5px solid var(--line);padding:26px 0 22px}
  .creds .cred:last-child{border-bottom:none}
  .work-grid{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr;gap:36px}
  nav.mast-nav{gap:16px}
  nav.mast-nav a{font-size:10px;letter-spacing:.16em}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}