/* ===========================================================
   SIMPLIFY-ED — DESIGN TOKENS (v3)
   One directional colour journey: saturated Clarity, easing down
   through a tint, into Paper, with Ink reserved for text and the
   footer bookend. Inter only, weight carries personality.
   =========================================================== */

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

:root{
  /* ---- brand palette ---- */
  --ink:          #101B26;
  --ink-10:       rgba(16,27,38,.1);
  --clarity:      #35707A;   /* dominant open colour, sound-familiar zone */
  --clarity-deep: #22454F;   /* ink -> clarity gradient anchor */
  --ember:        #C1693B;
  --ember-l:      #DB8656;
  --slate:        #5B6672;
  --paper:        #F5F1E7;   /* lightest paper step */
  --paper-2:      #EFE8D8;   /* paper step 2 */
  --paper-3:      #E8DFC8;   /* paper step 3 */
  --paper-dim:    #E0D5B8;   /* deepest paper step, just before the footer */
  --white:        #FFFFFF;

  /* ---- type ---- */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ls: -0.05em;
  --ls-wordmark: -0.08em;

  --fs-2xs: 0.75rem;
  --fs-xs:  0.875rem;
  --fs-sm:  1rem;
  --fs-md:  1.2rem;
  --fs-lg:  clamp(1.5rem, 2.4vw, 1.9rem);
  --fs-xl:  clamp(2.1rem, 4vw, 3.1rem);
  --fs-2xl: clamp(2.8rem, 6.4vw, 5.4rem);
  --fs-stat: clamp(3.6rem, 8vw, 6.4rem);

  /* ---- one shared spacing scale, used everywhere ---- */
  --sp-1: clamp(.5rem, .6vw, .625rem);
  --sp-2: clamp(1rem, 1.4vw, 1.25rem);
  --sp-3: clamp(1.5rem, 2.2vw, 2rem);
  --sp-4: clamp(2rem, 3.2vw, 2.75rem);
  --sp-5: clamp(2.75rem, 4.5vw, 4rem);
  --sp-6: clamp(3.5rem, 6vw, 5.5rem);
  --sp-section: clamp(3.25rem, 6.5vw, 6rem);

  --wide: 1360px;
  --gutter: clamp(1.5rem, 4vw, 4rem);

  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-font-smoothing: antialiased; }
body{
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  letter-spacing: var(--ls);
  overflow-x: hidden;
  font-size: var(--fs-sm);
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; letter-spacing: inherit; }

::selection{ background: var(--ember); color: var(--paper); }
:focus-visible{ outline: 2px solid var(--ember); outline-offset: 3px; }

.wrap{
  max-width: var(--wide);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

h1,h2,h3,h4,h5{ margin: 0; letter-spacing: var(--ls); font-weight: 600; }
.wordmark{ font-weight: 700; letter-spacing: var(--ls-wordmark); }

.eyebrow{
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ember);
}
.eyebrow--light{ color: var(--ember-l); }

.fs-2xl{ font-size: var(--fs-2xl); font-weight: 700; line-height: 1.02; }
.fs-xl{  font-size: var(--fs-xl);  font-weight: 600; line-height: 1.1; }
.fs-lg{  font-size: var(--fs-lg);  font-weight: 600; line-height: 1.22; }
.fs-md{  font-size: var(--fs-md);  font-weight: 400; line-height: 1.6; }
.fs-sm{  font-size: var(--fs-sm);  font-weight: 400; line-height: 1.65; }
.fs-2xs{ font-size: var(--fs-2xs); font-weight: 500; }

.fw-light{ font-weight: 300; }
.fw-regular{ font-weight: 400; }
.fw-medium{ font-weight: 500; }
.fw-semibold{ font-weight: 600; }
.fw-bold{ font-weight: 700; }

.stat-num{
  display: block;
  font-size: var(--fs-stat);
  font-weight: 700;
  letter-spacing: var(--ls);
  line-height: 1;
}
.stat-label{
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--slate);
}

.underline-reveal{ position: relative; display: inline-block; }
.underline-reveal::after{
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -0.12em;
  height: 1px;
  background: currentColor;
  transition: right .32s var(--ease-out);
}
a:hover .underline-reveal::after,
a:focus-visible .underline-reveal::after{ right: 0; }

.btn{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.75rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.btn:hover{ transform: translateY(-2px); }
.btn-ember{ background: var(--ember); color: var(--paper); }
.btn-ember:hover{ background: var(--ink); color: var(--paper); }
.btn-ghost{ background: transparent; color: inherit; border-color: currentColor; }
.btn-ghost:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-ghost-light{ background: transparent; color: var(--paper); border-color: rgba(245,241,231,.45); }
.btn-ghost-light:hover{ background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn svg{ width: 17px; height: 17px; transition: transform .25s var(--ease-out); }
.btn:hover svg{ transform: translate(3px,-3px); }
.btn-row{ display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

[data-reveal]{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-reveal].is-in{ opacity: 1; transform: translateY(0); }
[data-reveal-stagger] > *{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal-stagger].is-in > *{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-reveal-stagger] > *{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

section{ position: relative; }