/* ============================================================
   Shared stylesheet for shreyvaughn.com subpages.
   Matches the portfolio art direction: warm paper, ink,
   vermilion + electric blue + deep green, editorial serif.
   ============================================================ */
:root{
  --paper:#f4f0e8;
  --paper-2:#ece6da;
  --ink:#14110d;
  --ink-soft:#4a463d;
  --accent:#ff4d1c;
  --accent-2:#1a52ff;
  --accent-3:#0e3b2e;
  --line:rgba(20,17,13,.14);
  --serif:"Times New Roman", Georgia, serif;
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;cursor:none}
::selection{background:var(--accent);color:var(--paper)}
a{color:inherit;text-decoration:none}
svg,img{display:block}

body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* cursor */
.cursor{position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);z-index:10000;pointer-events:none;transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease);mix-blend-mode:difference}
.cursor.grow{width:72px;height:72px;background:var(--paper)}
.cursor-label{position:fixed;top:0;left:0;z-index:10001;pointer-events:none;transform:translate(-50%,-50%) scale(0);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);transition:transform .3s var(--ease)}
.cursor-label.show{transform:translate(-50%,-50%) scale(1)}
@media (hover:none){body{cursor:auto}.cursor,.cursor-label{display:none}}

/* glass nav */
nav{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;justify-content:space-between;align-items:center;padding:16px clamp(20px,4vw,56px);background:rgba(244,240,232,.55);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid rgba(20,17,13,.08);color:var(--ink)}
nav .brand{font-family:var(--serif);font-size:22px;font-style:italic;letter-spacing:-.01em}
nav .brand b{font-style:normal;font-weight:700}
nav .links{display:flex;align-items:center;gap:clamp(14px,2vw,34px);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
nav .links a{position:relative}
nav .links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:currentColor;transition:width .4s var(--ease)}
nav .links a:hover::after{width:100%}
nav .links a.cta{background:var(--ink);color:var(--paper);padding:9px 18px;border-radius:100px;transition:background .3s var(--ease),color .3s var(--ease)}
nav .links a.cta::after{display:none}
nav .links a.cta:hover{background:var(--accent);color:var(--paper)}
@media(max-width:640px){nav .links a:not(.cta){display:none}}

/* page hero */
.page-hero{padding:clamp(120px,18vh,190px) clamp(20px,4vw,56px) clamp(40px,7vh,80px);border-bottom:1px solid var(--line)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.page-hero h1{font-family:var(--serif);font-weight:400;line-height:.9;letter-spacing:-.03em;font-size:clamp(48px,9vw,132px);margin-top:20px}
.page-hero h1 i{font-style:italic;color:var(--accent)}
.page-hero .lede{max-width:52ch;margin-top:28px;font-size:clamp(16px,1.7vw,21px);line-height:1.5;color:var(--ink-soft)}
.page-hero .lede b{color:var(--ink);font-weight:600}
.back{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:28px;transition:color .3s var(--ease)}
.back:hover{color:var(--accent)}

/* hero visual */
.hero-visual{margin-top:clamp(30px,5vh,56px);border:1px solid var(--line);overflow:hidden;background:var(--ink);aspect-ratio:24/9}
.hero-visual svg{width:100%;height:100%;display:block}
@media(max-width:640px){.hero-visual{aspect-ratio:16/11}}

/* content */
.section{padding:clamp(44px,8vh,96px) clamp(20px,4vw,56px);border-bottom:1px solid var(--line)}
.section-meta{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.two-col{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(28px,5vw,72px);align-items:start}
@media(max-width:820px){.two-col{grid-template-columns:1fr;gap:20px}}
.two-col h2{font-family:var(--serif);font-size:clamp(28px,4vw,52px);font-weight:400;letter-spacing:-.02em;line-height:1}
.prose p{font-size:clamp(16px,1.5vw,19px);line-height:1.65;color:var(--ink-soft);margin-bottom:20px;max-width:56ch}
.prose p b,.prose p strong{color:var(--ink);font-weight:600}

/* impact list */
.impact{list-style:none;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.impact li{display:flex;gap:20px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line);font-size:clamp(16px,1.6vw,20px);line-height:1.5;color:var(--ink)}
.impact li .n{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--accent);min-width:34px}
.impact li b{font-weight:600}
.impact li span.d{color:var(--ink-soft);font-weight:400}

/* products list (labs) */
.plist{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
@media(max-width:760px){.plist{grid-template-columns:1fr}}
.plist .p{border:1px solid var(--line);background:var(--paper-2);padding:26px 22px}
.plist .p h4{font-family:var(--serif);font-size:26px;font-weight:400;font-style:italic}
.plist .p .tagp{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:10px 0 12px}
.plist .p p{font-size:14px;line-height:1.55;color:var(--ink-soft)}

/* stat row */
.stats{display:flex;gap:clamp(24px,5vw,64px);flex-wrap:wrap}
.stat b{font-family:var(--serif);font-size:clamp(40px,6vw,72px);font-weight:400;display:block;line-height:1}
.stat span{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:8px;display:block}

/* buttons / cta band */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;letter-spacing:.02em;padding:16px 26px;border-radius:100px;background:var(--ink);color:var(--paper);transition:.35s var(--ease)}
.btn:hover{background:var(--accent);color:var(--paper);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.cta-band{background:var(--ink);color:var(--paper);padding:clamp(50px,9vh,110px) clamp(20px,4vw,56px);text-align:center}
.cta-band h2{font-family:var(--serif);font-weight:400;letter-spacing:-.03em;line-height:.95;font-size:clamp(40px,7vw,104px)}
.cta-band h2 i{font-style:italic;color:var(--accent)}
.cta-band .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.cta-band .btn.light{background:var(--paper);color:var(--ink)}
.cta-band .btn.light:hover{background:var(--accent);color:var(--paper)}
.cta-band .btn.outline{background:transparent;color:var(--paper);border:1px solid rgba(244,240,232,.35)}
.cta-band .btn.outline:hover{background:var(--paper);color:var(--ink)}

/* booking cards (get-in-touch) */
.book-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(16px,2vw,24px)}
@media(max-width:820px){.book-grid{grid-template-columns:1fr}}
.book-card{border:1px solid var(--line);background:var(--paper-2);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between;min-height:230px}
.book-card.dark{background:var(--ink);color:var(--paper)}
.book-card h3{font-family:var(--serif);font-size:clamp(26px,3vw,40px);font-weight:400;letter-spacing:-.01em;line-height:1.02}
.book-card p{font-size:15px;line-height:1.55;color:var(--ink-soft);margin-top:12px;max-width:40ch}
.book-card.dark p{color:rgba(244,240,232,.7)}
.book-card .go{margin-top:26px;font-size:14px;font-weight:600;letter-spacing:.02em;display:inline-flex;align-items:center;gap:8px}
.email-lanes{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.email-lane{border:1px solid var(--line);padding:20px 22px;transition:.3s var(--ease)}
.email-lane:hover{background:var(--paper-2)}
.email-lane .k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.email-lane .v{font-family:var(--serif);font-size:22px;font-style:italic;margin-top:6px}

/* faq */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq .q{border-bottom:1px solid var(--line);padding:26px 0}
.faq .q h4{font-family:var(--serif);font-size:clamp(20px,2.2vw,28px);font-weight:400;margin-bottom:12px}
.faq .q p{font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:64ch}
.faq .q p a{color:var(--ink);border-bottom:1px solid var(--accent)}

/* footer */
footer.site{background:var(--ink);color:var(--paper);padding:clamp(44px,7vh,80px) clamp(20px,4vw,56px) 40px}
footer.site .foot-links{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
footer.site .foot-links a{font-size:12px;font-weight:600;letter-spacing:.06em;border:1px solid rgba(244,240,232,.3);border-radius:100px;padding:11px 18px;transition:.35s var(--ease)}
footer.site .foot-links a:hover{background:var(--paper);color:var(--ink)}
footer.site .foot-meta{font-size:12px;color:rgba(244,240,232,.6);line-height:1.7}
footer.site .foot-meta b{color:var(--paper);font-weight:600}

/* reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ---- mobile ---- */
@media(max-width:600px){
  body{-webkit-text-size-adjust:100%}
  nav{padding:13px 20px}
  .page-hero{padding-top:92px}
  .page-hero h1{font-size:clamp(38px,10vw,64px)}
  .cta-band h2{font-size:clamp(34px,9vw,72px)}
  .cta-band .row .btn{width:100%;justify-content:center}
  .book-card{min-height:0}
  .impact li{gap:14px}
  .stats{gap:24px 32px}
}