/* ══════════════════════════════════════
   SARA RADWAN — Design System
   sarahradwan.me
══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,700;0,9..144,900;1,9..144,300;1,9..144,400;1,9..144,700&family=Inter:wght@300;400;500;600&family=Caveat:wght@600&display=swap');

:root {
  --off-white: #F7F4EF;
  --ink:       #1C1917;
  --ink2:      #2C2825;
  --warm-mid:  #6B6560;
  --accent:    #C4401C;
  --accent-lt: #E05A32;
  --warm-line: rgba(28,25,23,0.1);
  --serif:     'Fraunces', Georgia, serif;
  --sans:      'Inter', sans-serif;
  --script:    'Caveat', cursive;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--off-white);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: clip;
  cursor: none;
}

/* ── CURSOR ── */
#cur {
  position: fixed; width: 8px; height: 8px;
  background: var(--accent); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .25s, height .25s;
}
#cur-ring {
  position: fixed; width: 32px; height: 32px;
  border: 1px solid var(--accent); border-radius: 50%; opacity: .4;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width .3s, height .3s;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  height: 64px; padding: 0 52px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(247,244,239,0.94); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--warm-line);
}
.nav-logo {
  font-family: var(--serif); font-size: .82rem; font-weight: 300;
  color: var(--ink); text-decoration: none;
  letter-spacing: .14em; text-transform: uppercase;
}
.nav-logo em { font-style: normal; color: var(--accent); font-weight: 300; }
.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-links a {
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--warm-mid); text-decoration: none; transition: color .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active { border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.nav-cta {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--off-white); background: var(--ink);
  padding: 9px 22px; text-decoration: none; transition: background .2s;
}
.nav-cta:hover { background: var(--accent); }

/* ── FOOTER ── */
.site-footer {
  background: var(--ink2); padding: 48px 52px;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 40px; align-items: start;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-brand {}
.footer-sig { font-family: var(--script); font-size: 1.4rem; color: rgba(247,244,239,.4); margin-bottom: 8px; display: block; }
.footer-tagline { font-size: 0.75rem; line-height: 1.6; color: rgba(247,244,239,.25); max-width: 220px; }
.footer-nav-label {
  font-size: 0.6rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: block;
}
.footer-nav { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.footer-nav a {
  font-size: 0.8rem; color: rgba(247,244,239,.35); text-decoration: none; transition: color .2s;
}
.footer-nav a:hover { color: rgba(247,244,239,.8); }
.footer-contact-label {
  font-size: 0.6rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: block;
}
.footer-email {
  font-family: var(--serif); font-size: 0.9rem;
  color: rgba(247,244,239,.4); text-decoration: none;
  display: block; margin-bottom: 24px; transition: color .2s;
}
.footer-email:hover { color: rgba(247,244,239,.8); }
.footer-copy {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 20px 52px;
  background: var(--ink2);
  font-size: 0.62rem; color: rgba(247,244,239,.18); letter-spacing: .06em;
  display: flex; justify-content: space-between;
}

/* ── SHARED UTILITIES ── */
.section-label {
  font-size: 0.65rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.section-label::before { content: ''; width: 24px; height: 1px; background: var(--accent); }

.page-header {
  padding: 140px 52px 80px;
  border-bottom: 1px solid var(--warm-line);
}
.page-header-label { margin-bottom: 20px; }
.page-header-title {
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 6.5rem);
  font-weight: 300; line-height: .95;
  letter-spacing: -.03em; color: var(--ink);
}
.page-header-title em { font-style: italic; font-weight: 700; color: var(--accent); }

/* ── MARQUEE ── */
.marquee-wrap {
  background: var(--accent); padding: 13px 0;
  overflow: hidden; white-space: nowrap;
}
.marquee-track { display: inline-flex; animation: marquee 20s linear infinite; }
.m-item {
  font-size: 0.68rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(247,244,239,.8); padding: 0 36px;
}
.m-dot { color: rgba(247,244,239,.35); }

/* ── REVEAL ANIMATION ── */
.reveal { opacity:1; transform:none; }
.reveal.animate {
  opacity:0; transform:translateY(16px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.animate.on { opacity:1; transform:none; }
.d1{transition-delay:.08s} .d2{transition-delay:.16s}
.d3{transition-delay:.24s} .d4{transition-delay:.32s}

@keyframes up {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes marquee {
  from{transform:translateX(0)} to{transform:translateX(-50%)}
}
@keyframes slide { 0%{left:-100%} 100%{left:100%} }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px; background: var(--ink); color: var(--off-white);
  font-size: 0.72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; transition: background .2s;
}
.btn-primary:hover { background: var(--accent); }
.btn-accent {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; background: var(--accent); color: var(--off-white);
  font-size: 0.72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; transition: background .2s;
}
.btn-accent:hover { background: var(--ink); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border: 1px solid rgba(247,244,239,.2);
  color: rgba(247,244,239,.6); font-size: 0.72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  transition: border-color .2s, color .2s;
}
.btn-ghost:hover { border-color: var(--off-white); color: var(--off-white); }
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border: 1px solid var(--ink);
  color: var(--ink); font-size: 0.72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
.btn-outline:hover { background: var(--ink); color: var(--off-white); }

/* Shared cursor script */
/* (included inline in each page) */

@media(max-width:960px){
  nav { padding:0 20px; }
  .nav-links { display:none; }
  .page-header { padding:120px 20px 60px; }
  .site-footer { grid-template-columns:1fr; padding:48px 20px; gap:32px; }
  .footer-copy { padding:20px; flex-direction:column; gap:6px; }
}

/* ── SHARED LOGO STRIP ── */
.logo-strip-wrap{background:var(--ink2);overflow:hidden;padding:32px 0}
.logo-strip-outer{position:relative;overflow:hidden;width:100%}
.logo-strip-outer::before,.logo-strip-outer::after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.logo-strip-outer::before{left:0;background:linear-gradient(to right,var(--ink2),transparent)}
.logo-strip-outer::after{right:0;background:linear-gradient(to left,var(--ink2),transparent)}
.logo-strip-track{display:flex;width:max-content;animation:logoScroll 32s linear infinite;align-items:center}
.logo-strip-track:hover{animation-play-state:paused}
.ls-logo{display:flex;align-items:center;justify-content:center;padding:0 48px;flex-shrink:0;height:56px}
.ls-logo img{max-height:34px;max-width:120px;opacity:.5;filter:invert(1) grayscale(1);transition:opacity .3s;object-fit:contain}
.ls-logo img:hover{opacity:.95;filter:invert(1) grayscale(1)}
@keyframes logoScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* ── SHARED PRE-FOOTER CTA ── */
.page-cta{background:var(--ink);padding:64px 52px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:32px}
.page-cta-tag{font-size:.57rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-lt);margin-bottom:12px;display:block}
.page-cta-hl{font-family:var(--serif);font-size:clamp(1.8rem,3vw,3rem);font-weight:200;color:var(--off-white);line-height:1.1;letter-spacing:-.02em}
.page-cta-hl em{font-style:italic;font-weight:700}
.page-cta-btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
@media(max-width:768px){.page-cta{padding:48px 20px;flex-direction:column;align-items:flex-start}.logo-strip-wrap{padding:24px 0}}