/* ═══════════════════════════════════════════════════════════════
   McDade MotionWorks — shared design system
   Linked by index.html and visual.html. Page-specific rules stay
   inline on each page, below the link tag.
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ───────────────────────────────────────────────────── */
:root{
  /* brand — do not alter */
  --gradient: linear-gradient(90deg,#ff2a75 0%,#ff5bd3 35%,#ff8fb1 50%,#ffc27a 72%,#ffd86b 100%);
  --brand:      #ff2a75;
  --brand-deep: #d6135a;   /* accessible on white — AA at 5.1:1 */

  /* surface — reconciled: visual.html values won, they carry the
     brand's slight violet lean. Index was #000 / #0b0b0c / #141416. */
  --ink:    #0a0a0f;
  --ink-2:  #101018;
  --ink-3:  #16161f;
  --paper:  #fff;

  /* ink on surface */
  --text:        #fff;
  --text-soft:   rgb(255 255 255 / .72);
  --text-muted:  #8b8b96;          /* 5.8:1 on --ink, passes AA */
  --text-dim:    rgb(255 255 255 / .6);
  /* ink on paper */
  --text-dark:       #0a0a0f;
  --text-dark-soft:  #55555f;
  --text-dark-muted: #79798a;

  --line:      rgb(255 255 255 / .12);
  --line-soft: rgb(255 255 255 / .08);
  --line-dark: rgb(0 0 0 / .1);

  /* glass */
  --glass-bg:      rgb(255 255 255 / .055);
  --glass-bg-hi:   rgb(255 255 255 / .1);
  --glass-border:  rgb(255 255 255 / .13);
  --glass-border-hi: rgb(255 255 255 / .3);
  --glass-blur:    blur(20px) saturate(150%);
  --glass-shadow:  0 8px 32px rgb(0 0 0 / .34), inset 0 1px 0 rgb(255 255 255 / .1);
  --glass-shadow-hi: 0 20px 48px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .18);

  /* space scale */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-7: 3rem;   --s-8: 4rem;
  --section-y: clamp(3.5rem, 8vw, 6rem);
  --gutter:    clamp(1.25rem, 3vw, 2rem);

  /* type — tokenised at existing values so nothing shifts visually */
  --fs-display: clamp(2rem, 5.2vw, 3.6rem);
  --fs-h2:      clamp(1.6rem, 3.6vw, 2.7rem);
  --fs-h3:      clamp(1.15rem, 2vw, 1.4rem);
  --fs-body:    1rem;
  --fs-sm:      .875rem;
  --fs-xs:      .78rem;
  --fs-micro:   .7rem;

  --lh-display: 1.06;
  --lh-heading: 1.15;
  --lh-body:    1.6;

  --measure:      68ch;   /* body copy cap */
  --measure-tight: 56ch;

  /* form */
  --radius-sm: 12px; --radius: 18px; --radius-lg: 22px; --radius-pill: 999px;

  --ease: cubic-bezier(.16,.84,.44,1);
  --header-h: 64px;
}

/* ── BASE ─────────────────────────────────────────────────────── */
*{ box-sizing: border-box }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100% }

body{
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,.display{
  font-family: 'Archivo','Inter',system-ui,sans-serif;
  font-variation-settings: 'wdth' 118;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: var(--lh-heading);
  margin: 0;
  text-wrap: balance;              /* kills headline orphans */
}
h1{ line-height: var(--lh-display) }
p{ margin: 0 0 1.15em; text-wrap: pretty }
a{ color: inherit }
img,video{ display: block; max-width: 100% }

.wrap{
  width: 100%; max-width: 1240px; margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── UTILITIES ────────────────────────────────────────────────── */
.grad{
  background-image: var(--gradient); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.eyebrow{
  font-family:'Inter',sans-serif; font-size: var(--fs-micro);
  font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 var(--s-3);
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline: 3px solid #ffd86b; outline-offset: 3px; border-radius: 2px;
}

/* ── GLASS ────────────────────────────────────────────────────── */
.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg);
}
.glass--hover{ transition: transform .35s var(--ease), background .35s, border-color .35s, box-shadow .35s }
.glass--hover:hover,.glass--hover:focus-visible{
  transform: translateY(-5px);
  background: var(--glass-bg-hi);
  border-color: var(--glass-border-hi);
  box-shadow: var(--glass-shadow-hi);
}

/* ── BUTTONS ──────────────────────────────────────────────────── */
.cta,.cta-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family: inherit; font-weight: 600; font-size: .95rem; line-height: 1.2;
  border-radius: var(--radius-pill); text-decoration: none; cursor: pointer;
  min-height: 44px;                 /* tap target floor */
  padding: .9rem 1.9rem; border: 0;
  transition: background-position .5s var(--ease), transform .25s var(--ease),
              border-color .25s, background .25s;
}
.cta{
  color:#000;
  background-image: var(--gradient); background-size: 200% auto; background-position: 0% center;
  box-shadow: 0 6px 20px rgb(0 0 0 / .22);
}
.cta:hover{ background-position: 100% center; transform: translateY(-2px) }
.cta-ghost{
  color:#fff; background: transparent;
  border: 1px solid rgb(255 255 255 / .28);
  padding: .85rem 1.75rem;
}
.cta-ghost:hover{ border-color: rgb(255 255 255 / .7); background: rgb(255 255 255 / .06); transform: translateY(-2px) }
.cta-full{ width: 100% }
.ghost{ /* legacy alias used by the order pages */ }

/* ── HEADER ───────────────────────────────────────────────────── */
.hdr{
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 60;
  padding-block-start: env(safe-area-inset-top);
  background: transparent; border-block-end: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
}
.hdr--solid,
.hdr.solid{
  background: rgb(10 10 15 / .92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-block-end-color: var(--line);
}
.hdr--sticky{ position: sticky; background: rgb(10 10 15 / .94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-block-end-color: var(--line) }
.hdr-in{
  display:flex; align-items:center; justify-content:space-between;
  height: var(--header-h); max-width: 1240px; margin-inline: auto;
  padding-inline: var(--gutter);
}
.hdr-mark{
  display:flex; align-items:center; gap:.55rem; text-decoration:none;
  font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 112;
  font-weight:700; font-size:.95rem; letter-spacing:-.01em;
}
.hdr-mark img{ height: 30px; width: auto }
.hdr-nav{ display:none; align-items:center; gap: 1.75rem }
@media(min-width:960px){ .hdr-nav{ display:flex } }
.hdr-nav a{ font-size:.875rem; font-weight:500; text-decoration:none; color: var(--text-soft); transition: color .2s }
.hdr-nav a:hover{ color:#fff }
.hdr-cta{ font-size:.8rem !important; padding:.5rem 1.2rem !important; min-height: 0 }

.burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; background:none;
  border:1px solid rgb(255 255 255 / .22); border-radius:10px; color:#fff; cursor:pointer;
}
@media(min-width:960px){ .burger{ display:none } }
.mnav{
  display:none; background: rgb(10 10 15 / .98);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-block-start: 1px solid var(--line); padding: .5rem var(--gutter) 1.4rem;
}
.mnav.open{ display:block }
.mnav a{
  display:flex; align-items:center; justify-content:space-between;
  padding: .95rem 0; min-height: 44px; font-size:1rem; font-weight:500;
  text-decoration:none; border-block-end: 1px solid var(--line-soft);
}
.mnav a:last-child{ border-block-end: 0 }

#mobileSafeArea{ display:none }
@media(max-width:767px){
  #mobileSafeArea{
    display:block; position:fixed; inset-block-start:0; inset-inline:0;
    height: env(safe-area-inset-top,0px); background: var(--ink); z-index: 70;
  }
}

/* ── FOOTER ───────────────────────────────────────────────────── */
.ftr{ background:#000; padding: var(--s-7) 0 2.5rem; border-block-start:1px solid var(--line); font-size:.87rem }
.ftr-grid{ display:grid; grid-template-columns:1fr; gap: 2.2rem }
@media(min-width:760px){ .ftr-grid{ grid-template-columns: 2fr 1fr 1fr 1fr } }
.ftr h2{
  font-family:'Inter',sans-serif; font-variation-settings: normal;
  font-size: var(--fs-micro); font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color: var(--text-muted); margin: 0 0 .9rem;
}
.ftr ul{ list-style:none; margin:0; padding:0 }
.ftr li{ margin-block-end:.55rem }
.ftr a{ color: var(--text-soft); text-decoration:none; transition: color .2s }
.ftr a:hover{ color:#fff }
.ftr-base{
  margin-block-start: 2.7rem; padding-block-start: var(--s-5);
  border-block-start:1px solid var(--line); display:flex; flex-wrap:wrap;
  gap:.75rem; justify-content:space-between; color: var(--text-muted); font-size:.78rem;
}
.ftr-social{ display:flex; align-items:center; gap:.85rem; margin-block-start:1.15rem }
.ftr-social img{ height:1.25rem; width:1.25rem; filter:invert(1); opacity:.5; transition: opacity .2s var(--ease) }
.ftr-social a{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px }
.ftr-social a:hover img{ opacity:1 }

/* ── SECTION HEADS ────────────────────────────────────────────── */
.sec{ padding-block: var(--section-y) }
.sec-head{ max-width: var(--measure-tight); margin: 0 0 clamp(2rem,4vw,3rem) }
.sec-head.mid{ margin-inline: auto; text-align: center }
.sec-head h2{ font-size: var(--fs-h2); margin: 0 0 .8rem }
.sec-head p{ color: var(--text-muted); font-size: clamp(.9rem,1.4vw,1.02rem); margin: 0 }

/* ── SCROLL REVEAL ────────────────────────────────────────────── */
.mmw-ready .mmw-reveal{
  opacity: 0; transform: translateY(20px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.mmw-ready .mmw-reveal.mmw-in{ opacity: 1; transform: none }
.mmw-ready .mmw-stagger > *{
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.mmw-ready .mmw-stagger.mmw-in > *{ opacity: 1; transform: none }
.mmw-ready .mmw-stagger.mmw-in > *:nth-child(1){ transition-delay:.03s }
.mmw-ready .mmw-stagger.mmw-in > *:nth-child(2){ transition-delay:.06s }
.mmw-ready .mmw-stagger.mmw-in > *:nth-child(3){ transition-delay:.09s }
.mmw-ready .mmw-stagger.mmw-in > *:nth-child(4){ transition-delay:.12s }
.mmw-ready .mmw-stagger.mmw-in > *:nth-child(5){ transition-delay:.15s }
.mmw-ready .mmw-stagger.mmw-in > *:nth-child(6){ transition-delay:.18s }
.mmw-ready .mmw-stagger.mmw-in > *:nth-child(7){ transition-delay:.21s }
.mmw-ready .mmw-stagger.mmw-in > *:nth-child(8){ transition-delay:.24s }
.mmw-ready .mmw-stagger.mmw-in > *:nth-child(9){ transition-delay:.27s }
.mmw-ready .mmw-stagger.mmw-in > *:nth-child(10){ transition-delay:.30s }
.mmw-ready .mmw-stagger.mmw-in > *:nth-child(11){ transition-delay:.33s }
.mmw-ready .mmw-stagger.mmw-in > *:nth-child(12){ transition-delay:.36s }

/* ── MOTION ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
  .mmw-ready .mmw-reveal,
  .mmw-ready .mmw-stagger > *{ opacity: 1 !important; transform: none !important }
}