/* =========================================================
   SHARONLY HILL — DESIGN SYSTEM
   Display: Fraunces (characterful serif, restrained use)
   Body: Inter
   Data/Eyebrow/Nav: Space Grotesk
   ========================================================= */

:root{
  /* Brand palette */
  --navy-deep:   #071630;
  --navy:        #0B1F3A;
  --navy-soft:   #142c4f;
  --slate:       #5F6B7A;
  --slate-light: #8b96a3;
  --soft-gray:   #E7EBF0;
  --white:       #FFFFFF;
  --teal:        #2F6F7E;
  --teal-bright: #3f92a4;
  --gold:        #C6A15B;
  --gold-bright: #dcb877;

  /* Semantic */
  --bg:          var(--white);
  --ink:         var(--navy);
  --ink-soft:    var(--slate);
  --line:        rgba(11,31,58,0.10);
  --line-soft:   rgba(11,31,58,0.06);

  /* Type */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'Space Grotesk', 'Inter', sans-serif;

  /* Rhythm */
  --gutter: clamp(1.5rem, 5vw, 4.5rem);
  --section-pad: clamp(4.5rem, 9vw, 9rem);
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  /* Motion */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-slow: 1.1s;
  --dur-med: 0.6s;
  --dur-fast: 0.35s;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
html.lenis, html.lenis body{ height:auto; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
svg{ display:block; }

::selection{ background:var(--gold); color:var(--navy-deep); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:4px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Layout ---------- */
.wrap{
  max-width:1360px;
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.section{ padding:var(--section-pad) 0; position:relative; }
.section-tight{ padding:clamp(3rem,6vw,5.5rem) 0; }
.section-navy{ background:var(--navy); color:var(--white); }
.section-navy .eyebrow{ color:var(--gold-bright); }
.section-navy .ink-soft{ color:rgba(250,251,252,0.68); }
.section-gray{ background:var(--soft-gray); }

/* ---------- Type scale ---------- */
.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:0.75rem;
  font-weight:500;
  color:var(--teal);
  display:inline-flex;
  align-items:center;
  gap:0.6em;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:currentColor;
  display:inline-block;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0;
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.08;
}
.section-navy h1,.section-navy h2,.section-navy h3,.section-navy h4{ color:var(--white); }

h1, .h1{ font-size:clamp(2.6rem, 5.4vw, 4.6rem); font-weight:560; letter-spacing:-0.02em; }
h2, .h2{ font-size:clamp(2.1rem, 3.6vw, 3.1rem); }
h3, .h3{ font-size:clamp(1.4rem, 1.9vw, 1.7rem); }
h4, .h4{ font-size:1.05rem; font-weight:600; }

p{ margin:0 0 1em; color:var(--ink-soft); }
.lede{ font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--ink-soft); font-weight:400; line-height:1.55; }
.ink-soft{ color:var(--ink-soft); }
.text-center{ text-align:center; }
.max-w{ max-width:640px; }
.max-w-lg{ max-width:820px; }
.mx-auto{ margin-left:auto; margin-right:auto; }

.stat-num{
  font-family:var(--font-mono);
  font-weight:600;
  letter-spacing:-0.02em;
}

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:0.6em;
  padding:0.95em 1.9em;
  font-family:var(--font-mono);
  font-size:0.86rem;
  font-weight:500;
  letter-spacing:0.02em;
  border-radius:999px;
  border:1px solid transparent;
  transition:transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium), background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  color:var(--navy-deep);
  box-shadow:0 1px 2px rgba(11,31,58,0.15);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px -10px rgba(198,161,91,0.55);
}
.btn-ghost{
  background:transparent;
  border-color:rgba(11,31,58,0.22);
  color:var(--ink);
}
.section-navy .btn-ghost{ border-color:rgba(250,251,252,0.3); color:var(--white); }
.btn-ghost:hover{ border-color:var(--teal); color:var(--teal); transform:translateY(-2px); }
.section-navy .btn-ghost:hover{ border-color:var(--gold-bright); color:var(--gold-bright); }
.btn svg{ width:15px; height:15px; transition:transform var(--dur-fast) var(--ease-premium); }
.btn:hover svg{ transform:translateX(3px); }

.btn-icon-circle{
  width:52px;height:52px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  transition:all var(--dur-fast) var(--ease-premium);
}
.btn-icon-circle:hover{ background:var(--navy); border-color:var(--navy); color:#fff; transform:rotate(20deg); }

/* ---------- Cards & panels ---------- */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  transition:transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium), border-color var(--dur-med);
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px -30px rgba(11,31,58,0.28);
  border-color:transparent;
}
.glass{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.divider{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
  border:0;
  margin:0;
}
.divider-navy{ background:linear-gradient(90deg, transparent, rgba(255,255,255,0.14) 20%, rgba(255,255,255,0.14) 80%, transparent); }

/* Blueprint / systems-diagram texture used across brand as signature motif */
.blueprint-bg{
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size:56px 56px;
}
.blueprint-bg-light{
  background-image:
    linear-gradient(rgba(11,31,58,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,31,58,0.05) 1px, transparent 1px);
  background-size:44px 44px;
}

/* ---------- Reveal animation hooks (GSAP toggles) ---------- */
.reveal{ opacity:0; transform:translateY(28px); }
.reveal-fade{ opacity:0; }
.reveal-scale{ opacity:0; transform:scale(0.94); }
.reveal-line > *{ opacity:0; transform:translateY(100%); }

/* ---------- Utility ---------- */
.flex{ display:flex; }
.grid{ display:grid; }
.gap-sm{ gap:0.75rem; }
.gap-md{ gap:1.5rem; }
.gap-lg{ gap:3rem; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.mt-0{ margin-top:0; }
.pill{
  display:inline-flex; align-items:center; gap:0.5em;
  padding:0.4em 0.9em; border-radius:999px;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--slate);
}