:root{
    /* ---- pulled straight from Re-Runway's global.css ---- */
    --color-background: #f9f9f9;
    --color-surface-container: #eeeeee;
    --color-on-surface: #1b1b1b;
    --color-on-surface-variant: #434655;
    --color-primary: #004ac6;
    --color-primary-fixed: #dbe1ff;
    --color-secondary-container: #6dfe9c;
    --color-on-secondary-fixed: #00210c;
    --color-tertiary: #9d2940;
    --color-tertiary-fixed: #ffdadc;
    --color-black: #000000;
    --color-white: #ffffff;
    --radius-full: 0.75rem;
    --margin-desktop: 64px;
    --margin-mobile: 16px;
    --transition-snappy: 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  *, *::before, *::after{ box-sizing:border-box; }

  body{
    margin:0; padding:0;
    background-color:var(--color-background);
    color:var(--color-on-surface);
    font-family:'DM Sans', sans-serif;
    font-size:16px; line-height:24px;
  }
  a{ text-decoration:none; color:inherit; display:inline-block; }
  button{ cursor:pointer; font-family:inherit; background:none; border:none; }

  .material-symbols-outlined{
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    font-size:20px; line-height:1;
  }

  /* ---- exact neo-shadow utility from global.css ---- */
  .neo-shadow_blk{
    box-shadow:4px 4px 0px 0px rgba(0,0,0,1);
    transition:transform var(--transition-snappy), box-shadow var(--transition-snappy);
  }
  .neo-shadow_blk:hover{ transform:translate(4px,4px); box-shadow:0px 0px 0px 0px rgba(0,0,0,1); }

  /* ---- navbar ---- */
  .navbar{
    position:sticky; top:0; z-index:50;
    display:flex; justify-content:space-between; align-items:center;
    height:80px; width:100%;
    padding:0 var(--margin-desktop);
    background-color:rgba(249,249,249,0.82);
    border-bottom:3px solid var(--color-black);
    box-shadow:4px 4px 0px 0px rgba(0,0,0,1);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
  .logo{ font-size:24px; line-height:32px; font-weight:800; letter-spacing:-0.04em; text-transform:uppercase; }
  .nav-tag{
    background-color:var(--color-secondary-container);
    border:2px solid var(--color-black);
    padding:4px 12px;
    font-weight:800; font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
  }
  .nav-right{ display:flex; align-items:center; gap:16px; }
  .cart-btn{
    display:flex; align-items:center; gap:8px;
    font-size:14px; font-weight:800;
    border:3px solid var(--color-black);
    background-color:var(--color-secondary-container);
    padding:10px 18px;
  }
  .cart-btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0px 0px rgba(0,0,0,1); }
  .cart-btn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0px 0px rgba(0,0,0,1); }

  /* ---- hero ---- */
  .hero{
    background-image:radial-gradient(#000 1px, transparent 1px);
    background-size:20px 20px;
    padding:72px var(--margin-desktop) 64px;
    border-bottom:3px solid var(--color-black);
  }
  .hero-inner{ max-width:640px; margin:0 auto; text-align:center; }
  .hero-tag{
    display:inline-block;
    background-color:var(--color-secondary-container);
    color:var(--color-on-secondary-fixed);
    border:2px solid var(--color-black);
    padding:4px 12px;
    font-weight:800; font-size:12px; letter-spacing:0.05em; text-transform:uppercase;
  }
  .hero-title{
    font-size:clamp(30px, 5.6vw, 58px);
    line-height:1.02; font-weight:900;
    margin:16px 0 12px;
    text-transform:uppercase;
    text-shadow:3px 3px 0px var(--color-black);
    min-height:2.1em;
    transition:opacity 0.2s ease;
  }
  .hero-subtitle{
    font-size:16px; font-weight:500;
    color:var(--color-on-surface-variant);
    margin:0 0 36px;
    min-height:2.5em;
    transition:opacity 0.2s ease;
  }

  /* ---- signature interactive: warehouse-to-runway dial ---- */
  .dial-card{
    background-color:var(--color-white);
    border:2px solid var(--color-black);
    box-shadow:5px 5px 0px 0px rgba(0,0,0,1);
    padding:28px clamp(20px,4vw,36px) 32px;
    text-align:left;
  }
  .dial-labels{
    display:flex; justify-content:space-between;
    font-size:11px; font-weight:800; letter-spacing:0.08em;
    margin-bottom:10px;
  }
  .dial-labels .from{ color:var(--color-on-surface-variant); }
  .dial-labels .to{ color:var(--color-primary); }

  .dial-wrap{ position:relative; padding-top:30px; }
  .dial-tag{
    position:absolute; top:0; transform:translateX(-50%);
    font-size:11px; font-weight:800; letter-spacing:0.03em; text-transform:uppercase;
    padding:4px 10px;
    background-color:var(--color-secondary-container);
    border:2px solid var(--color-black);
    white-space:nowrap;
    transition:left 0.06s linear;
  }

  input[type=range]{
    -webkit-appearance:none; appearance:none;
    width:100%; height:10px;
    background-color:var(--color-surface-container);
    border:2px solid var(--color-black);
    outline:none;
    cursor:pointer;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:24px; height:24px;
    background-color:var(--color-primary);
    border:2.5px solid var(--color-black);
    cursor:grab;
    transition:transform 0.15s ease;
  }
  input[type=range]::-webkit-slider-thumb:active{ cursor:grabbing; transform:scale(1.1); }
  input[type=range]::-moz-range-thumb{
    width:24px; height:24px;
    background-color:var(--color-primary);
    border:2.5px solid var(--color-black);
    border-radius:0;
    cursor:grab;
  }
  input[type=range]:focus-visible{ outline:2px solid var(--color-primary); outline-offset:3px; }

  .dial-footer{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:14px;
    margin-top:22px;
  }

  .dial-cta{
    display:inline-flex; align-items:center; gap:8px;
    font-size:14px; font-weight:800;
    border:3px solid var(--color-black);
    background-color:var(--color-on-surface);
    color:var(--color-white);
    padding:12px 20px;
    transition:transform var(--transition-snappy), box-shadow var(--transition-snappy), background-color 0.2s ease;
  }
  .dial-cta:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0px 0px rgba(0,0,0,1); }
  .dial-cta:active{ transform:translate(2px,2px); box-shadow:1px 1px 0px 0px rgba(0,0,0,1); }
  .dial-cta.at-runway{ background-color:var(--color-primary); }
  .dial-cta.nudge{ animation:shake 0.35s ease; }
  @keyframes shake{
    0%,100%{ transform:translateX(0); }
    25%{ transform:translateX(-4px) rotate(-1deg); }
    75%{ transform:translateX(4px) rotate(1deg); }
  }

  .stamp{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11px; font-weight:800; letter-spacing:0.05em;
    color:var(--color-primary);
    border:2px solid var(--color-primary);
    padding:6px 10px;
    opacity:0; transform:scale(1.5) rotate(-6deg);
    transition:opacity 0.35s ease, transform 0.35s cubic-bezier(.2,1.4,.4,1);
  }
  .stamp.show{ opacity:1; transform:scale(1) rotate(-6deg); }

  .contacts{
    display:flex; gap:8px; flex-wrap:wrap;
    width:100%;
    max-height:0; opacity:0; overflow:hidden;
    transition:max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
  }
  .contacts.unlocked{ max-height:60px; opacity:1; margin-top:14px; }
  .contacts a{
    display:flex; align-items:center; gap:6px;
    font-size:13px; font-weight:700;
    border:2px solid var(--color-black);
    padding:8px 12px;
    transition:background-color 0.2s ease, color 0.2s ease;
  }
  .contacts a:hover{ background-color:var(--color-primary); color:var(--color-white); }

  /* ---- work-with-us band ---- */
  .collab-roles{ margin:22px 0 24px; }
  .collab-roles-label{ font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--color-on-surface-variant); margin:0 0 10px; }
  .role-pill-row{ display:flex; flex-wrap:wrap; gap:8px; }
  .role-pill{
    border:2px solid var(--color-black);
    background-color:var(--color-white);
    border-radius:var(--radius-full);
    padding:8px 16px;
    font-size:13px; font-weight:800;
    display:flex; align-items:center; gap:6px;
    transition:transform var(--transition-snappy), background-color 0.15s ease, color 0.15s ease;
  }
  .role-pill:hover{ transform:translate(-2px,-2px); }
  .role-pill .material-symbols-outlined{ font-size:16px; }
  .role-pill[aria-pressed="true"]{
    background-color:var(--color-primary);
    color:var(--color-white);
    box-shadow:3px 3px 0px 0px rgba(0,0,0,1);
    transform:translate(-2px,-2px);
  }

  .collab-extra{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
  .collab-extra .search-input{ width:230px; }

  /* ---- newsletter band ---- */
  .footer-newsletter{
    background-image:radial-gradient(#000 1px, transparent 1px);
    background-size:20px 20px;
    border-top:3px solid var(--color-black);
    border-bottom:3px solid var(--color-black);
    padding:56px var(--margin-desktop);
  }
  .footer-newsletter-inner{
    max-width:1000px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  }
  .footer-newsletter-copy{ max-width:420px; }
  .footer-newsletter-title{ font-size:clamp(22px,3vw,30px); font-weight:900; text-transform:uppercase; line-height:1.1; margin:10px 0 8px; }
  .footer-newsletter-sub{ font-size:14px; color:var(--color-on-surface-variant); margin:0; }
  .footer-newsletter-form{ display:flex; gap:12px; flex-wrap:wrap; }
  .search-input{
    font-family:'DM Sans', sans-serif;
    border:2px solid var(--color-black);
    padding:12px 14px; font-size:14px; font-weight:700;
    background-color:var(--color-white);
    width:230px;
  }
  .search-input:focus{ outline:2px solid var(--color-primary); outline-offset:2px; }
  .footer-newsletter-btn{ white-space:nowrap; }

  .inline-message{ font-size:13px; font-weight:700; margin-top:12px; }
  .inline-message.success{ color:var(--color-primary); }
  .inline-message.error{ color:var(--color-tertiary); }

  /* ---- footer bottom ---- */
  .footer-bottom{
    padding:22px var(--margin-desktop);
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  }
  .footer-copyright{ font-size:12px; font-weight:600; color:var(--color-on-surface-variant); margin:0; }
  .footer-socials{ display:flex; gap:10px; }
  .footer-social-btn{
    width:40px; height:40px;
    display:flex; align-items:center; justify-content:center;
    border:2px solid var(--color-black);
    background-color:var(--color-white);
    color:var(--color-black);
  }

  @media (max-width:768px){
    .navbar{ padding:0 var(--margin-mobile); height:68px; }
    .logo{ font-size:19px; line-height:26px; }
    .nav-tag{ display:none; }
    .hero{ padding:48px var(--margin-mobile) 40px; }
    .dial-footer{ flex-direction:column; align-items:flex-start; }
    .footer-newsletter{ padding:40px var(--margin-mobile); }
    .footer-newsletter-inner{ flex-direction:column; align-items:flex-start; }
    .search-input{ width:100%; }
    .footer-newsletter-form{ width:100%; }
    .footer-newsletter-btn{ width:100%; justify-content:center; }
    .footer-bottom{ padding:20px var(--margin-mobile); flex-direction:column; align-items:flex-start; }
  }