/* Self-hosted (OFL) variable fonts, latin subset: no third-party request
   blocking first paint. Preloaded in each page's <head>. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600 900; font-display: swap; src: url('/fonts/archivo-latin.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/geist-latin.woff2') format('woff2'); }

:root {
    /* Apex Performance NZ brand palette — from brand style guide */
    --black: #0a0a0a; /* off-black: pure #000 reads harsh on screens */
    --ink: #141414;
    --grey-700: #58595b;
    --grey-500: #616366; /* was #939598: failed WCAG contrast on paper and the footer grey */
    --grey-300: #d1d3d4;
    --grey-100: #ececea;
    --paper: #f6f5f4;
    --white: #ffffff;
    --border: rgba(0,0,0,0.1);
    --border-soft: rgba(0,0,0,0.06);

    /* Single accent: neon (see .neon-l2 / .accent-neon). The old "Apex Blue" (#2e608a)
       competed with it, so the --blue slots now resolve to ink on light
       sections and to neon inside dark ones (.flip-dark below). */
    --blue: var(--ink);
    --blue-deep: #000000;
    --blue-tint: var(--neon);

    --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Geist', 'Open Sans', Arial, sans-serif;
  }

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

  html { scroll-behavior: smooth; }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
  }

  a { color: inherit; text-decoration: none; }
  img { display: block; width: 100%; }

  /* ─── ANNOUNCEMENT BAR ─── */
  .announcement {
    background: var(--black);
    color: var(--paper);
    text-align: center;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .announcement a { color: var(--white); font-weight: 600; border-bottom: 1px solid var(--white); }

  /* ─── NAV ─── */
  nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(246,245,244,0.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--grey-300);
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
  }

  .nav-logo { display: flex; align-items: center; height: 26px; }
  .nav-logo img { height: 100%; width: auto; }

  .nav-links {
    display: flex;
    gap: 36px;
    list-style: none;
    align-items: center;
  }
  .nav-links a {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey-700);
    transition: color 0.2s;
    position: relative;
  }
  .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0;
    width: 0; height: 1px;
    background: var(--blue);
    transition: width 0.2s;
  }
  .nav-links a:hover { color: var(--black); }
  .nav-links a:hover::after { width: 100%; }

  .nav-actions { display: flex; align-items: center; gap: 14px; }

  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--black);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-icon {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--grey-700);
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
  }
  .nav-icon:hover { color: var(--black); background: var(--grey-100); }
  .nav-btn {
    background: var(--black);
    color: var(--white);
    border: none;
    padding: 10px 22px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.2s;
  }
  .nav-btn:hover { background: var(--grey-700); }

  /* ─── HERO ─── */
  .hero {
    position: relative;
    min-height: 88vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border-bottom: 1px solid var(--grey-300);
  }

  .hero-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 80px 60px 80px 60px;
    position: relative;
    z-index: 2;
  }

  .hero-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--grey-700);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    animation: fadeUp 0.6s 0.1s forwards;
  }
  .hero-eyebrow::before {
    content: '';
    width: 32px; height: 1px;
    background: var(--blue);
  }

  .hero-headline {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(56px, 7.5vw, 108px);
    line-height: 0.95;
    letter-spacing: -0.01em;
    color: var(--black);
    text-transform: uppercase;
    margin-bottom: 28px;
    opacity: 0;
    animation: fadeUp 0.7s 0.2s forwards;
  }
  .hero-headline .hollow {
    color: transparent;
    -webkit-text-stroke: 2px var(--blue);
  }

  .hero-sub {
    font-size: 15px;
    font-weight: 400;
    color: var(--grey-700);
    max-width: 360px;
    line-height: 1.7;
    margin-bottom: 44px;
    opacity: 0;
    animation: fadeUp 0.7s 0.35s forwards;
  }

  .hero-ctas {
    display: flex;
    gap: 14px;
    align-items: center;
    opacity: 0;
    animation: fadeUp 0.7s 0.45s forwards;
  }

  .btn-primary {
    background: var(--black);
    color: var(--white);
    padding: 15px 36px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.2s;
    display: inline-block;
  }
  .btn-primary:hover { background: var(--grey-700); transform: translateY(-1px); }

  .btn-ghost {
    border: 1px solid var(--grey-500);
    color: var(--black);
    padding: 14px 32px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: transparent;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.2s;
    display: inline-block;
  }
  .btn-ghost:hover { border-color: var(--black); background: var(--grey-100); }

  .hero-right {
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg, var(--grey-100) 0%, var(--paper) 55%, var(--grey-100) 100%);
  }
  .hero-right::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--paper) 0%, transparent 26%);
    z-index: 1;
  }

  .hero-athlete {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
  }

  /* Oversized watermark of the Apex ascent mark — signature element */
  .hero-icon-watermark {
    position: absolute;
    bottom: -8%;
    right: -10%;
    width: 78%;
    opacity: 0.05;
    filter: brightness(0);
    pointer-events: none;
  }

  .hero-geo {
    position: absolute;
    top: 0; right: 0;
    width: 60%;
    height: 100%;
    opacity: 0.14;
    pointer-events: none;
  }

  .hero-photo-note {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    z-index: 2;
  }
  .hero-photo-note .label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--grey-500);
  }
  .hero-photo-note .sub {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--grey-500);
  }

  .hero-stat {
    position: absolute;
    bottom: 80px;
    right: 48px;
    z-index: 3;
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-top: 2px solid var(--blue);
    border-radius: 4px;
    padding: 20px 24px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.06);
    opacity: 0;
    animation: fadeUp 0.7s 0.6s forwards;
  }
  .hero-stat-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 38px;
    line-height: 1;
    color: var(--black);
  }
  .hero-stat-label {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey-700);
    margin-top: 4px;
  }

  .scroll-hint {
    position: absolute;
    bottom: 36px;
    left: 60px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--grey-700);
    opacity: 0;
    animation: fadeUp 0.6s 0.7s forwards;
  }
  .scroll-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--blue);
    animation: pulse 2s infinite;
  }

  /* ─── BRAND STRIP ─── */
  .brand-strip {
    border-bottom: 1px solid var(--grey-300);
    padding: 18px 60px;
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
  }
  .brand-strip-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--grey-700);
    white-space: nowrap;
    margin-right: 40px;
    flex-shrink: 0;
  }
  .brand-logos {
    display: flex;
    gap: 48px;
    align-items: center;
  }
  .brand-logo-item {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.08em;
    color: var(--grey-500);
    transition: color 0.2s;
    cursor: pointer;
    white-space: nowrap;
  }
  .brand-logo-item:hover { color: var(--black); }

  /* ─── SECTION LABEL ─── */
  .section-eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--grey-700);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .section-eyebrow::before {
    content: '';
    width: 24px; height: 1px;
    background: var(--blue);
  }

  /* ─── SHOP BY CATEGORY ─── */
  .categories {
    padding: 100px 60px;
  }
  .categories-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 48px;
  }
  .section-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(36px, 4.5vw, 58px);
    letter-spacing: -0.01em;
    line-height: 0.98;
    text-transform: uppercase;
    color: var(--black);
  }
  .view-all-link {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grey-700);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s, gap 0.2s;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--grey-300);
  }
  .view-all-link:hover { color: var(--black); gap: 14px; border-color: var(--black); }

  .cat-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 400px 220px;
    gap: 12px;
  }
  .cat-card {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
  }
  .cat-card:first-child { grid-row: 1 / 3; }
  .cat-card-bg {
    position: absolute;
    inset: 0;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .cat-card:hover .cat-card-bg { transform: scale(1.04); }
  .cat-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.12) 60%);
  }
  .cat-card-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 28px;
    z-index: 2;
  }
  .cat-card-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    margin-bottom: 8px;
  }
  .cat-card-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 30px;
    letter-spacing: 0;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 16px;
  }
  .cat-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 2px;
    transition: color 0.2s, gap 0.2s;
  }
  .cat-card:hover .cat-card-cta { color: var(--white); gap: 12px; border-color: var(--white); }

  /* Category background placeholders — neutral brand greys, no off-brand hues */
  .bg-shoes      { background: linear-gradient(135deg, #d9d7d4 0%, #bdbab6 50%, #a9a6a2 100%); }
  .bg-apparel    { background: linear-gradient(135deg, #e2e0de 0%, #c7c4c1 50%, #aeabA8 100%); }
  .bg-bags       { background: linear-gradient(135deg, #dcdad7 0%, #c2bfbc 50%, #a6a3a0 100%); }
  .bg-hoodies    { background: linear-gradient(135deg, #d4d2cf 0%, #b7b4b1 50%, #9c9996 100%); }
  .bg-accessories{ background: linear-gradient(135deg, #e6e4e1 0%, #cdcac7 50%, #b3b0ad 100%); }

  .placeholder-visual {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .placeholder-visual img {
    width: 38%;
    opacity: 0.16;
    filter: brightness(0) invert(1);
  }
  .cat-card:first-child .placeholder-visual img { width: 46%; }

  /* ─── FEATURED PRODUCTS ─── */
  .featured {
    padding: 0 60px 100px;
  }
  .featured-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
  }

  .product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .product-card { cursor: pointer; }
  .product-img {
    position: relative;
    aspect-ratio: 3/4;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 14px;
    background: var(--grey-100);
    border: 1px solid var(--grey-300);
  }
  .product-img-bg {
    position: absolute;
    inset: 0;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .product-card:hover .product-img-bg { transform: scale(1.06); }

  .product-badge {
    position: absolute;
    top: 12px; left: 12px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 2px;
    z-index: 2;
  }
  .badge-new { background: var(--blue); color: var(--white); }
  .badge-sale { background: var(--white); color: var(--black); border: 1px solid var(--black); }

  .product-quick-add {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: var(--black);
    color: var(--white);
    text-align: center;
    padding: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 3;
  }
  .product-card:hover .product-quick-add { transform: translateY(0); }

  .product-brand {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--grey-500);
    margin-bottom: 4px;
  }
  .product-name {
    font-size: 14px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 6px;
    line-height: 1.4;
  }
  .product-price { font-size: 14px; font-weight: 600; color: var(--black); }
  .product-price .original {
    color: var(--grey-500);
    text-decoration: line-through;
    font-size: 12px;
    margin-right: 6px;
    font-weight: 400;
  }
  .product-price .sale { color: var(--black); }

  .pimg-1, .pimg-2, .pimg-3, .pimg-4 { background: linear-gradient(160deg, var(--grey-100) 0%, #e2e0dd 100%); }

  .pimg-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 46px;
    color: rgba(0,0,0,0.07);
    letter-spacing: 0.1em;
  }

  /* ─── BRAND FEATURE SECTION ─── */
  .brand-feature {
    margin: 0 60px 100px;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    min-height: 480px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--grey-300);
  }
  .brand-feature-visual {
    background: linear-gradient(135deg, var(--grey-100) 0%, #e4e2df 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .brand-feature-visual-text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 150px;
    color: rgba(0,0,0,0.06);
    letter-spacing: 0.04em;
    user-select: none;
  }
  .brand-feature-content {
    background: var(--white);
    padding: 60px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid var(--grey-300);
  }
  .brand-feature-logo {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 44px;
    letter-spacing: 0.06em;
    color: var(--black);
    margin-bottom: 20px;
    line-height: 1;
  }
  .brand-feature-desc {
    font-size: 15px;
    font-weight: 400;
    color: var(--grey-700);
    line-height: 1.75;
    margin-bottom: 36px;
    max-width: 380px;
  }
  .brand-feature-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--grey-300);
  }
  .stat-item-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 34px;
    color: var(--black);
    line-height: 1;
    margin-bottom: 4px;
  }
  .stat-item-label { font-size: 11px; color: var(--grey-700); letter-spacing: 0.08em; }

  /* ─── SOCIAL PROOF ─── */
  .social-proof {
    padding: 80px 60px;
    background: var(--grey-100);
    border-top: 1px solid var(--grey-300);
    border-bottom: 1px solid var(--grey-300);
  }
  .social-proof-header { text-align: center; margin-bottom: 56px; }
  .testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .testimonial-card {
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: 4px;
    padding: 28px;
    transition: border-color 0.2s;
  }
  .testimonial-card:hover { border-color: var(--grey-500); }
  .stars { color: var(--black); font-size: 13px; letter-spacing: 2px; margin-bottom: 16px; }
  .testimonial-text {
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-700);
    line-height: 1.7;
    margin-bottom: 20px;
    font-style: italic;
  }
  .testimonial-author { display: flex; align-items: center; gap: 12px; }
  .author-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--grey-100);
    border: 1px solid var(--grey-300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--black);
  }
  .author-name { font-size: 13px; font-weight: 600; color: var(--ink); }
  .author-detail { font-size: 11px; color: var(--grey-700); letter-spacing: 0.05em; }

  /* ─── TRUST STRIP ─── */
  .trust-strip {
    padding: 32px 60px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--grey-300);
  }
  .trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 24px;
    border-right: 1px solid var(--grey-300);
  }
  .trust-item:first-child { padding-left: 0; }
  .trust-item:last-child { border-right: none; }
  .trust-icon {
    width: 38px; height: 38px;
    background: var(--blue-tint);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--blue-deep);
  }
  .trust-icon svg { width: 18px; height: 18px; }
  .trust-text-title { font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: 0.04em; }
  .trust-text-sub { font-size: 11px; color: var(--grey-700); }

  /* ─── NEWSLETTER ─── */
  .team-orders { padding: 88px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .team-orders-sub { font-size: 16px; line-height: 1.7; color: var(--grey-500); max-width: 460px; margin-bottom: 28px; }
  .team-orders-actions { display: flex; gap: 12px; flex-wrap: wrap; }
  @media (max-width: 860px) {
    .team-orders { padding: 64px 28px; grid-template-columns: 1fr; gap: 24px; }
  }

  .newsletter {
    padding: 100px 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .newsletter-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(36px, 4vw, 54px);
    letter-spacing: -0.01em;
    line-height: 0.98;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 16px;
  }
  .newsletter-title .hollow { color: transparent; -webkit-text-stroke: 2px var(--blue); }
  .newsletter-sub { font-size: 14px; font-weight: 400; color: var(--grey-700); line-height: 1.7; }
  .newsletter-form { display: flex; flex-direction: column; gap: 12px; }
  .email-row { display: flex; gap: 0; }
  .email-input {
    flex: 1;
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-right: none;
    color: var(--ink);
    padding: 14px 20px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    outline: none;
    border-radius: 2px 0 0 2px;
    transition: border-color 0.2s;
  }
  .email-input::placeholder { color: var(--grey-500); }
  .email-input:focus { border-color: var(--blue); }
  .email-submit {
    background: var(--black);
    color: var(--white);
    border: none;
    padding: 14px 28px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0 2px 2px 0;
    transition: background 0.2s;
    white-space: nowrap;
  }
  .email-submit:hover { background: var(--grey-700); }
  .form-note { font-size: 11px; color: var(--grey-500); letter-spacing: 0.04em; }
  .rewards-teaser {
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-left: 4px solid var(--neon);
    border-radius: 4px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .rewards-teaser:hover { border-color: var(--ink); border-left-color: var(--neon); }
  .rewards-icon { font-size: 18px; color: var(--blue-deep); }
  .rewards-text-title { font-size: 13px; font-weight: 700; color: var(--blue-deep); }
  .rewards-text-sub { font-size: 12px; color: var(--grey-700); }

  /* ─── FOOTER ─── */
  footer { background: var(--grey-100); border-top: 1px solid var(--grey-300); padding: 64px 60px 40px; }
  .footer-top { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
  .footer-logo { height: 30px; width: auto; margin-bottom: 16px; }
  .footer-brand-desc { font-size: 13px; font-weight: 400; color: var(--grey-700); line-height: 1.7; margin-bottom: 24px; max-width: 280px; }
  .footer-socials { display: flex; gap: 10px; }
  .social-btn {
    width: 36px; height: 36px;
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
  }
  .social-btn:hover { border-color: var(--black); background: var(--white); }
  .footer-col-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 20px;
  }
  .footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .footer-links a { font-size: 13px; font-weight: 400; color: var(--grey-700); transition: color 0.2s; }
  .footer-links a:hover { color: var(--black); }
  .footer-bottom {
    border-top: 1px solid var(--grey-300);
    padding-top: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 28px;
  }
  .footer-legal { font-size: 12px; color: var(--grey-500); letter-spacing: 0.04em; margin-right: auto; }
  .footer-email { font-size: 12px; color: var(--grey-700); letter-spacing: 0.04em; }
  .footer-email a { color: var(--black); font-weight: 600; }
  .footer-credit { font-size: 12px; color: var(--grey-500); letter-spacing: 0.04em; }
  .footer-credit a { color: var(--grey-700); transition: color 0.2s; }
  .footer-credit a:hover { color: var(--black); }

  /* ─── ANIMATIONS ─── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
  }

  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .hero-eyebrow, .hero-headline, .hero-sub, .hero-ctas, .hero-stat, .scroll-hint { opacity: 1; }
  }

  a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
  }

  /* ─── RESPONSIVE ─── */
  @media (max-width: 1080px) {
    .cat-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 320px 220px 220px; }
    .cat-card:first-child { grid-row: 1 / 2; grid-column: 1 / 3; }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials { grid-template-columns: 1fr; gap: 16px; }
    .footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer-top > div:nth-child(2) { grid-column: 1; }
  }

  @media (max-width: 860px) {
    nav { padding: 0 24px; }
    .nav-toggle { display: flex; }
    .nav-links {
      display: none;
      position: fixed;
      top: 68px;
      left: 0;
      right: 0;
      flex-direction: column;
      gap: 0;
      background: var(--white);
      border-bottom: 1px solid var(--grey-300);
      box-shadow: 0 12px 24px rgba(0,0,0,0.08);
      padding: 8px 24px 16px;
      max-height: calc(100vh - 68px);
      overflow-y: auto;
    }
    .nav-links.open { display: flex; }
    .nav-links li { width: 100%; }
    .nav-links a { display: block; padding: 16px 0; font-size: 14px; border-bottom: 1px solid var(--grey-300); }
    .nav-links a::after { display: none; }
    .hero { grid-template-columns: 1fr; min-height: auto; }
    .hero-left { padding: 56px 28px 40px; order: 2; }
    .hero-right { min-height: 60vh; order: 1; }
    .hero-stat { right: 24px; bottom: 24px; padding: 14px 18px; }
    .scroll-hint { display: none; }
    .categories, .featured { padding: 64px 28px; }
    .brand-feature { margin: 0 28px 64px; grid-template-columns: 1fr; min-height: auto; }
    .brand-feature-visual { min-height: 220px; }
    .brand-feature-content { border-left: none; border-top: 1px solid var(--grey-300); padding: 40px 28px; }
    .social-proof { padding: 56px 28px; }
    .newsletter { padding: 64px 28px; grid-template-columns: 1fr; gap: 40px; }
    .trust-strip { grid-template-columns: 1fr 1fr; row-gap: 20px; padding: 28px 28px; }
    .trust-item { border-right: none; padding: 0; }
    .brand-strip { padding: 16px 28px; }
    footer { padding: 48px 28px 32px; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  }

  @media (max-width: 540px) {
    .cat-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .cat-card:first-child { grid-column: 1; }
    .cat-card { min-height: 240px; }
    .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .footer-top { grid-template-columns: 1fr; }
    .categories-header, .featured-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  }

  /* ══════════════════════════════════════════════════════
     SHARED SUB-PAGE COMPONENTS
     ══════════════════════════════════════════════════════ */

  /* Breadcrumb */
  .breadcrumb {
    padding: 18px 60px 0;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--grey-500);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .breadcrumb a { color: var(--grey-700); transition: color 0.2s; }
  .breadcrumb a:hover { color: var(--blue); }
  .breadcrumb span.sep { color: var(--grey-300); }
  .breadcrumb span.current { color: var(--black); font-weight: 600; }

  /* Generic page header band (About / Contact / FAQ / Rewards / Sizing) */
  .page-header {
    position: relative;
    padding: 36px 60px 56px;
    overflow: hidden;
    border-bottom: 1px solid var(--grey-300);
  }
  .page-header-watermark {
    position: absolute;
    top: -10%;
    right: -4%;
    width: 280px;
    opacity: 0.05;
    filter: brightness(0);
    pointer-events: none;
  }
  /* White TriXstars in the header corner (About, FAQ, Contact, Rewards, ...) */
  .page-header-shoes {
    position: absolute;
    top: 24px;
    right: 60px;
    height: calc(100% - 48px);
    max-height: 300px;
    width: auto;
    pointer-events: none;
  }
  .page-header > :not(.page-header-shoes):not(.page-header-watermark):not(.shop-gift-promo) { position: relative; z-index: 1; }
  .page-header-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey-700); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
  .page-header-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--blue); }
  .page-header-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(40px, 6vw, 72px);
    letter-spacing: -0.01em;
    line-height: 0.98;
    text-transform: uppercase;
    color: var(--black);
    max-width: 800px;
    position: relative;
    z-index: 2;
  }
  .page-header-sub {
    font-size: 15px;
    color: var(--grey-700);
    max-width: 560px;
    margin-top: 18px;
    line-height: 1.7;
    position: relative;
    z-index: 2;
  }

  /* Generic content section width wrapper */
  .section-wrap { padding: 80px 60px; }
  .section-wrap.tight { padding: 56px 60px; }
  .section-wrap.narrow { max-width: 760px; margin: 0 auto; }

  /* ─── ABOUT US ─── */
  .about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    padding: 80px 60px;
    align-items: center;
  }
  .about-copy p { color: var(--grey-700); font-size: 15px; line-height: 1.8; margin-bottom: 18px; max-width: 480px; }
  .about-copy p:last-of-type { margin-bottom: 28px; }
  .about-visual {
    aspect-ratio: 4/5;
    border-radius: 6px;
    background: linear-gradient(150deg, var(--grey-100) 0%, #e4e2df 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .about-visual .ph-label { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--grey-500); }
  .founders-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid var(--grey-300);
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 28px;
  }
  .founders-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }

  .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0 60px 100px; }
  .value-card { border: 1px solid var(--grey-300); border-radius: 6px; padding: 32px 28px; background: var(--white); }
  .value-card .num { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--blue); letter-spacing: 0.1em; margin-bottom: 18px; }
  .value-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: 0.01em; color: var(--black); margin-bottom: 12px; }
  .value-card p { font-size: 14px; color: var(--grey-700); line-height: 1.7; }

  .stats-band { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--grey-300); border-bottom: 1px solid var(--grey-300); }
  .stats-band .stat { padding: 40px 32px; border-right: 1px solid var(--grey-300); }
  .stats-band .stat:last-child { border-right: none; }
  .stats-band .stat-num { font-family: var(--font-display); font-weight: 800; font-size: 38px; color: var(--black); line-height: 1; margin-bottom: 8px; }
  .stats-band .stat-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-700); }

  /* ─── CONTACT US ─── */
  .contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; padding: 72px 60px 100px; }
  .contact-info-card h2 { font-family: var(--font-display); font-weight: 800; font-size: 28px; text-transform: uppercase; color: var(--black); margin-bottom: 14px; }
  .contact-info-card > p { color: var(--grey-700); font-size: 14px; line-height: 1.7; margin-bottom: 32px; max-width: 360px; }
  .contact-row { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; border-top: 1px solid var(--grey-300); }
  .contact-row:first-of-type { border-top: 1px solid var(--grey-300); }
  .contact-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--blue-tint); color: var(--blue-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .contact-icon svg { width: 17px; height: 17px; }
  .contact-row-title { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-700); margin-bottom: 3px; }
  .contact-row-value { font-size: 15px; color: var(--black); font-weight: 500; }
  .contact-row-value a { color: var(--black); }
  .contact-row-value a:hover { color: var(--blue); }

  .form-card { background: var(--white); border: 1px solid var(--grey-300); border-radius: 6px; padding: 44px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .form-group { margin-bottom: 20px; }
  .form-group.full { grid-column: 1 / -1; }
  .form-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-700); margin-bottom: 8px; }
  .form-input, .form-textarea {
    width: 100%;
    background: var(--paper);
    border: 1px solid var(--grey-300);
    color: var(--ink);
    padding: 13px 16px;
    font-family: var(--font-body);
    font-size: 14px;
    border-radius: 2px;
    outline: none;
    transition: border-color 0.2s;
  }
  .form-input:focus, .form-textarea:focus { border-color: var(--blue); }
  .form-textarea { resize: vertical; min-height: 130px; }
  .form-submit-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; flex-wrap: wrap; gap: 16px; }
  .form-note-small { font-size: 11px; color: var(--grey-500); max-width: 320px; }

  /* ─── FAQ ─── */
  .faq-layout { display: grid; grid-template-columns: 240px 1fr; gap: 56px; padding: 64px 60px 100px; }
  .faq-nav { position: sticky; top: 90px; align-self: start; }
  .faq-nav-title { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 16px; }
  .faq-nav-link {
    display: block;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--grey-700);
    border-left: 2px solid transparent;
    padding-left: 14px;
    transition: color 0.2s, border-color 0.2s;
  }
  .faq-nav-link:hover { color: var(--black); }
  .faq-nav-link.active { color: var(--black); border-left-color: var(--blue); }

  .faq-group { margin-bottom: 52px; }
  .faq-group-title { font-family: var(--font-display); font-weight: 800; font-size: 24px; text-transform: uppercase; color: var(--black); margin-bottom: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--grey-300); }
  .faq-item { border-bottom: 1px solid var(--grey-300); }
  .faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 4px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
  }
  .faq-question .icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--grey-300); display: flex; align-items: center; justify-content: center; position: relative; transition: border-color 0.2s, background 0.2s; }
  .faq-question .icon::before, .faq-question .icon::after { content: ''; position: absolute; background: var(--grey-700); transition: transform 0.2s, background 0.2s; }
  .faq-question .icon::before { width: 9px; height: 1px; }
  .faq-question .icon::after { width: 1px; height: 9px; }
  .faq-item.open .faq-question .icon { border-color: var(--blue); background: var(--blue-tint); }
  .faq-item.open .faq-question .icon::after { transform: scaleY(0); }
  .faq-item.open .faq-question .icon::before, .faq-item.open .faq-question .icon::after { background: var(--blue-deep); }
  .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
  .faq-answer-inner { padding: 0 4px 22px; font-size: 14px; color: var(--grey-700); line-height: 1.75; max-width: 680px; }
  .faq-answer-inner a { color: var(--blue-deep); font-weight: 600; border-bottom: 1px solid currentColor; }
  .faq-answer-inner ul { margin: 10px 0 10px 18px; }
  .faq-answer-inner li { margin-bottom: 6px; }

  .faq-cta-band {
    background: var(--grey-100);
    border-top: 1px solid var(--grey-300);
    border-bottom: 1px solid var(--grey-300);
    padding: 64px 60px;
    text-align: center;
  }
  .faq-cta-band h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px,3.4vw,40px); text-transform: uppercase; color: var(--black); margin-bottom: 12px; }
  .faq-cta-band p { color: var(--grey-700); font-size: 14px; margin-bottom: 28px; }
  .faq-cta-buttons { display: flex; gap: 14px; justify-content: center; }

  /* ─── REWARDS ─── */
  .steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 24px 60px 80px; }
  .step-card { position: relative; padding-top: 8px; }
  .step-num { font-family: var(--font-display); font-weight: 800; font-size: 50px; color: var(--blue-tint); line-height: 1; margin-bottom: 4px; -webkit-text-stroke: 1.5px var(--blue); color: transparent;}
  .step-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 20px; text-transform: uppercase; color: var(--black); margin: 10px 0 12px; }
  .step-card p { font-size: 13px; color: var(--grey-700); line-height: 1.6; }
  .step-line { position: absolute; top: 30px; left: -12%; width: 0; height: 1px; background: var(--grey-300); }

  .earn-rows, .redeem-rows { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
  .earn-row, .redeem-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: 4px;
  }
  .earn-row-label, .redeem-row-label { font-size: 13px; color: var(--grey-700); font-weight: 500; }
  .earn-row-value { font-size: 15px; font-weight: 700; color: var(--blue-deep); }
  .redeem-row-points { font-size: 12px; color: var(--grey-500); letter-spacing: 0.04em; }
  .redeem-row-value { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--black); }

  .rewards-cta-band { text-align: center; padding: 80px 60px; background: var(--black); }
  .rewards-cta-band h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px,4vw,48px); text-transform: uppercase; color: var(--white); margin-bottom: 14px; }
  .rewards-cta-band p { color: rgba(246,245,244,0.65); font-size: 14px; margin-bottom: 30px; }
  .rewards-cta-band .btn-primary { background: var(--blue); }
  .rewards-cta-band .btn-primary:hover { background: var(--blue-deep); }

  /* ─── SIZING ─── */
  .size-tabs { display: flex; gap: 10px; padding: 8px 60px 0; }
  .size-tab {
    padding: 12px 26px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--grey-300);
    border-radius: 30px;
    color: var(--grey-700);
    cursor: pointer;
    background: var(--white);
    transition: all 0.2s;
  }
  .size-tab.active { background: var(--black); color: var(--white); border-color: var(--black); }

  .size-panel { padding: 48px 60px 0; display: none; }
  .size-panel.active { display: block; }
  .size-table-wrap { overflow-x: auto; border: 1px solid var(--grey-300); border-radius: 6px; margin-bottom: 16px; }
  table.size-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
  table.size-table th { background: var(--grey-100); text-align: left; padding: 13px 18px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-700); border-bottom: 1px solid var(--grey-300); }
  table.size-table td { padding: 12px 18px; border-bottom: 1px solid var(--border-soft); color: var(--ink); }
  table.size-table tr:last-child td { border-bottom: none; }
  table.size-table tr:nth-child(even) td { background: var(--paper); }
  .size-disclaimer { font-size: 12px; color: var(--grey-500); margin-bottom: 48px; max-width: 640px; }

  .measure-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 8px 60px 90px; }
  .measure-step { display: flex; gap: 14px; }
  .measure-step .m-num { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--blue); flex-shrink: 0; width: 28px; }
  .measure-step p { font-size: 13px; color: var(--grey-700); line-height: 1.6; }

  /* ─── SHOP / ALL PRODUCTS ─── */
  .shop-header { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 60px; margin-bottom: 4px; flex-wrap: wrap; gap: 12px; }
  .shop-layout { display: grid; grid-template-columns: 230px 1fr; gap: 44px; padding: 32px 60px 100px; align-items: start; }

  .filter-sidebar { position: sticky; top: 90px; }
  .filter-clear { font-size: 11px; color: var(--blue-deep); font-weight: 600; cursor: pointer; margin-bottom: 20px; display: inline-block; }
  .filter-group { border-bottom: 1px solid var(--grey-300); padding-bottom: 20px; margin-bottom: 20px; }
  .filter-title { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--black); margin-bottom: 14px; }
  .filter-option { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; color: var(--grey-700); cursor: pointer; }
  .filter-option input { width: 15px; height: 15px; accent-color: var(--black); }
  .filter-option:hover { color: var(--black); }
  .category-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; position: relative; }
  .category-chip { border: 1px solid var(--grey-300); color: var(--grey-700); padding: 8px 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; transition: all 0.2s; }
  .category-chip:hover { border-color: var(--black); color: var(--black); }
  .category-chip[aria-current="page"] { background: var(--black); border-color: var(--black); color: var(--paper); }
  .shop-empty { grid-column: 1 / -1; padding: 40px 0; color: var(--grey-700); font-size: 15px; }
  .shop-empty a { color: var(--black); font-weight: 600; text-decoration: underline; }
  .price-range-track { height: 3px; background: var(--grey-300); border-radius: 2px; position: relative; margin: 18px 0 10px; }
  .price-range-fill { position: absolute; left: 18%; right: 32%; top: 0; bottom: 0; background: var(--blue); border-radius: 2px; }
  .price-range-dot { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: var(--white); border: 2px solid var(--blue); transform: translate(-50%,-50%); }
  .price-range-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--grey-700); }

  .shop-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--grey-300); }
  .shop-result-count { font-size: 13px; color: var(--grey-700); }
  .shop-sort { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--black); }
  .shop-sort select { border: 1px solid var(--grey-300); background: var(--white); padding: 8px 12px; border-radius: 2px; font-family: var(--font-body); font-size: 12px; color: var(--black); }

  .shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 18px; }
  .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 56px; }
  .page-num { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 13px; font-weight: 600; color: var(--grey-700); cursor: pointer; }
  .page-num.active { background: var(--black); color: var(--white); }
  .page-num:hover:not(.active) { background: var(--grey-100); }
  .page-arrow { font-size: 13px; color: var(--grey-700); }

  /* ─── PRODUCT DETAIL ─── */
  .product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 32px 60px 0; }
  .gallery-main { aspect-ratio: 3/4; background: var(--grey-100); border: 1px solid var(--grey-300); border-radius: 6px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
  .gallery-main .pimg-placeholder { font-size: 64px; }
  .gallery-thumbs { display: flex; gap: 10px; }
  .gallery-thumb { width: 70px; aspect-ratio: 3/4; border-radius: 4px; border: 1px solid var(--grey-300); background: var(--grey-100); cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.12); }
  .gallery-thumb.active { border-color: var(--black); border-width: 2px; }

  .pd-brand { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 8px; }
  .pd-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px,3vw,38px); text-transform: uppercase; color: var(--black); line-height: 1.05; margin-bottom: 14px; }
  .pd-price { font-size: 22px; font-weight: 700; color: var(--black); margin-bottom: 22px; }
  .pd-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 12px; color: var(--grey-700); }
  .pd-rating .stars { color: var(--black); font-size: 13px; }

  .pd-option-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--black); margin-bottom: 10px; display: block; }
  .color-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
  .swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .swatch .dot { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--grey-300); }
  .swatch.active { border-color: var(--black); }

  .size-grid { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
  .size-option { min-width: 46px; height: 42px; padding: 0 10px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--grey-300); border-radius: 4px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; transition: all 0.15s; }
  .size-option:hover { border-color: var(--black); }
  .size-option.active { background: var(--black); color: var(--white); border-color: var(--black); }
  .size-option.disabled { color: var(--grey-300); border-color: var(--grey-100); cursor: not-allowed; text-decoration: line-through; }
  .size-guide-link { font-size: 12px; color: var(--blue-deep); font-weight: 600; margin-bottom: 28px; display: inline-block; }

  .pd-actions { display: flex; gap: 12px; margin-bottom: 28px; }
  .pd-actions .btn-primary { flex: 1; text-align: center; }
  .btn-secondary-outline { flex: 1; text-align: center; background: var(--white); border: 1px solid var(--black); color: var(--black); padding: 15px 36px; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border-radius: 2px; transition: all 0.2s; }
  .btn-secondary-outline:hover { background: var(--grey-100); }

  .pd-meta-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--grey-700); padding: 14px 0; border-top: 1px solid var(--grey-300); }

  .pd-accordion { margin-top: 8px; border-top: 1px solid var(--grey-300); }
  .pd-accordion .faq-item:last-child { border-bottom: 1px solid var(--grey-300); }

  .related-section { padding: 90px 60px 100px; }

  /* Active nav state (current page) */
  .nav-links a.active { color: var(--black); }
  .nav-links a.active::after { width: 100%; background: var(--black); }

  @media (max-width: 1080px) {
    .about-split { grid-template-columns: 1fr; gap: 40px; }
    .values-grid { grid-template-columns: 1fr; padding: 0 28px 64px; }
    .stats-band { grid-template-columns: 1fr 1fr; }
    .stats-band .stat:nth-child(2) { border-right: none; }
    .contact-grid { grid-template-columns: 1fr; padding: 48px 28px 64px; }
    .shop-layout { grid-template-columns: 1fr; padding: 24px 28px 64px; }
    .filter-sidebar { position: static; }
    .shop-grid { grid-template-columns: repeat(2, 1fr); }
    .product-detail { grid-template-columns: 1fr; padding: 24px 28px 0; }
    .faq-layout { grid-template-columns: 1fr; padding: 40px 28px 64px; }
    .faq-nav { position: static; display: flex; flex-wrap: wrap; gap: 8px 18px; padding-bottom: 24px; border-bottom: 1px solid var(--grey-300); margin-bottom: 32px; }
    .steps-row { grid-template-columns: 1fr; padding: 16px 28px 56px; }
    .measure-steps { grid-template-columns: 1fr; padding: 8px 28px 64px; }
  }

  @media (max-width: 640px) {
    .breadcrumb, .page-header, .section-wrap, .about-split, .values-grid, .stats-band .stat, .contact-grid, .shop-header, .faq-cta-band, .rewards-cta-band, .product-detail { padding-left: 20px; padding-right: 20px; }
    .page-header { padding-top: 24px; padding-bottom: 40px; }
    .form-row { grid-template-columns: 1fr; }
    .form-card { padding: 28px 22px; }
    .shop-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .pd-actions { flex-direction: column; }
    .rewards-grid-responsive { grid-template-columns: 1fr !important; gap: 40px !important; }
  }

  /* ══════════════════════════════════════════════════════
     DARK-SECTION THEMING SYSTEM (homepage concept variants)
     Apply .flip-dark to any <section>/<div> wrapper to flip
     it to the dark/bold palette. Works by re-scoping the same
     semantic variables every component already reads from —
     no component CSS needs to change.
     ══════════════════════════════════════════════════════ */
  :root {
    --surface-1: #0e0e0e;
    --surface-2: #181818;
    --neon: #d4ff00;
    --neon-deep: #d4ff00; /* kept as a name; every green on the site is the one neon (16 Oct 2026) */
    --neon-tint: transparent;
  }

  .flip-dark {
    --blue: var(--neon);
    --blue-deep: var(--neon);
    --blue-tint: var(--neon);
    background: var(--surface-1) !important;
    color: var(--paper);
    --black: var(--paper);
    --ink: var(--paper);
    --grey-700: rgba(246,245,244,0.62);
    --grey-500: rgba(246,245,244,0.6);
    --grey-300: rgba(255,255,255,0.14);
    --border: rgba(255,255,255,0.12);
    --border-soft: rgba(255,255,255,0.07);
  }
  /* Within a dark section, blue accent moments switch to the neon pop colour */
  .flip-dark.accent-neon {
    --blue: var(--neon);
    --blue-deep: var(--neon);
    --blue-tint: var(--neon);
  }
  .flip-dark .btn-primary { background: var(--blue); color: var(--black); }
  .flip-dark.accent-neon .btn-primary { color: #0a0a0a; }
  .flip-dark .btn-primary:hover { background: var(--blue-deep); }
  .flip-dark .btn-ghost { border-color: rgba(255,255,255,0.3); color: var(--paper); }
  .flip-dark .btn-ghost:hover { border-color: var(--paper); background: rgba(255,255,255,0.06); }
  .flip-dark .nav-btn { background: var(--blue); }
  .flip-dark.accent-neon .badge-new { color: #0a0a0a; }
  .flip-dark .email-submit { background: var(--blue); color: var(--black); }
  .flip-dark.accent-neon .email-submit { color: #0a0a0a; }
  .flip-dark .product-quick-add { background: var(--blue); color: var(--black); }
  .flip-dark.accent-neon .product-quick-add { color: #0a0a0a; }

  /* Decorative photo-placeholder panels stay neutral (they represent real
     photography later, so they intentionally don't theme with the section) */
  .flip-dark .hero-right {
    background: linear-gradient(155deg, var(--surface-2) 0%, var(--surface-1) 55%, #050505 100%);
  }
  .flip-dark .hero-right::before { background: linear-gradient(to right, var(--surface-1) 0%, transparent 26%); }
  .flip-dark .hero-icon-watermark { filter: brightness(0) invert(1); opacity: 0.06; }
  .flip-dark .hero-geo line { stroke: rgba(255,255,255,0.5); }
  .flip-dark .hero-photo-note .label, .flip-dark .hero-photo-note .sub { color: rgba(246,245,244,0.4); }
  .flip-dark .hero-stat {
    background: var(--white);
    border-top: 2px solid var(--blue);
    --black: #0d0d0d; --ink: #0d0d0d; --grey-700: #58595b; --grey-500: #616366;
  }
  .flip-dark .scroll-dot { background: var(--blue); }

  .flip-dark .trust-icon { background: var(--neon); color: #0a0a0a; }

  .flip-dark .testimonial-card, .flip-dark .value-card, .flip-dark .form-card {
    background: var(--white);
    --black: #0d0d0d; --ink: #0d0d0d; --grey-700: #58595b; --grey-500: #616366;
    --grey-300: #d1d3d4; --border: rgba(0,0,0,0.1); --border-soft: rgba(0,0,0,0.06);
  }
  .flip-dark .testimonial-card { border-color: rgba(255,255,255,0.1); }
  .flip-dark .author-avatar { background: var(--grey-100); }
  .flip-dark .badge-sale { color: #0a0a0a; border-color: #0a0a0a; }

  .flip-dark .brand-feature-content { background: var(--surface-2); border-left-color: rgba(255,255,255,0.1); }
  .flip-dark .brand-feature { border-color: rgba(255,255,255,0.12); }

  .flip-dark .email-input { background: var(--surface-2); border-color: rgba(255,255,255,0.16); color: var(--paper); }
  .flip-dark .email-input::placeholder { color: rgba(246,245,244,0.4); }
  .flip-dark .rewards-teaser { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
  .flip-dark .rewards-icon, .flip-dark .rewards-text-title { color: var(--blue); }

  .flip-dark .footer-links a, .flip-dark .footer-legal, .flip-dark .footer-email, .flip-dark .footer-credit, .flip-dark .footer-credit a { color: rgba(246,245,244,0.6); }
  .flip-dark .footer-links a:hover, .flip-dark .footer-credit a:hover { color: var(--paper); }
  .flip-dark .footer-email a, .flip-dark .footer-col-title { color: var(--paper); }
  .flip-dark .footer-logo, .flip-dark .nav-logo.invert img { filter: brightness(0) invert(1); }
  .flip-dark .social-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: var(--paper); }
  .flip-dark footer { border-color: rgba(255,255,255,0.12) !important; }

  /* Optional grain texture for the bolder concept */
  body.grain::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.35'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1000;
    opacity: 0.4;
    mix-blend-mode: overlay;
  }

  /* Concept comparison strip (shown only on these 3 draft pages) */
  .concept-strip {
    background: #fff;
    border-bottom: 1px solid var(--grey-300);
    padding: 14px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    position: sticky;
    top: 68px;
    z-index: 99;
  }
  .concept-strip .tabs { display: flex; gap: 8px; }
  .concept-strip a {
    padding: 7px 16px;
    border-radius: 30px;
    border: 1px solid var(--grey-300);
    color: var(--grey-700);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .concept-strip a.current { background: var(--black); color: var(--white); border-color: var(--black); }
  .concept-strip .note { color: var(--grey-500); font-weight: 400; }
  @media (max-width: 860px) { .concept-strip { padding: 14px 20px; flex-direction: column; gap: 10px; align-items: flex-start; top: 0; } }

  /* ════════════════════════════════════════════════════════════════
     PROGRESSIVE NEON POP SYSTEM  (Refined + / ++ / +++)
     ════════════════════════════════════════════════════════════════ */

  /* ─ L1: Refined + — a few pops (newsletter, rewards, 2 eyebrow lines) ─ */
  .neon-l1 .newsletter-title .hollow { -webkit-text-stroke-color: var(--neon); }
  .neon-l1 .rewards-teaser { border-left-color: var(--neon); }
  .neon-l1 .rewards-icon,
  .neon-l1 .rewards-text-title { color: var(--ink); }
  .neon-l1 .featured .section-eyebrow::before { background: var(--neon); }
  .neon-l1 .newsletter .section-eyebrow::before { background: var(--neon); }

  /* ─ L2: Refined ++ — neon everywhere blue used to be ─
     (was L3 previously — promoted to ++ per client ask) */
  .neon-l2 .newsletter-title .hollow { -webkit-text-stroke-color: var(--neon); }
  .neon-l2 .rewards-teaser { border-left-color: var(--neon); }
  .neon-l2 .rewards-icon,
  .neon-l2 .rewards-text-title { color: var(--ink); }
  .neon-l2 .section-eyebrow::before { background: var(--neon); }
  .neon-l2 .badge-new { background: var(--neon) !important; color: #0a0a0a !important; }
  .neon-l2 .trust-icon { background: var(--neon); color: #0a0a0a; }
  .neon-l2 .hero-stat { border-top-color: var(--neon); }
  .neon-l2 .hero-eyebrow::before,
  .neon-l2 .scroll-dot { background: var(--neon); }
  .neon-l2 .brand-feature-content .btn-primary { background: var(--neon); color: #0a0a0a; }
  .neon-l2 .product-price .sale { color: var(--neon-deep); font-weight: 700; }
  .neon-l2 .email-input:focus { border-color: var(--neon); }
  .neon-l2 .email-submit { background: var(--neon); color: #0a0a0a; }
  .neon-l2 .view-all-link:hover { color: var(--ink); border-color: var(--neon); }
    .neon-l2 .cat-card { outline: 0px solid var(--neon); transition: outline 0.25s; }
  .neon-l2 .cat-card:hover { outline: 3px solid var(--neon); outline-offset: 0; }
  .neon-l2 .cat-card:hover .cat-card-cta { color: var(--neon); border-color: var(--neon); }
  .neon-l2 .stat-item-num { color: var(--ink); }
  .neon-l2 .stars { color: var(--ink); }
  .neon-l2 .nav-links a::after { background: var(--neon); }
  .neon-l2 .hero-stat-num { color: var(--neon); }
  .neon-l2 .product-brand { color: var(--ink); }

  /* ─ L3: Refined +++ — neon spreads to NEW surfaces entirely ─
     Announcement bar, nav button, brand strip, product card borders,
     category card hover glow, section titles, footer column titles,
     author avatars, social proof bg tint, hero stat full border. */

  /* Announcement bar → neon (boldest brand statement at top of every page) */
  .neon-l3 .announcement { background: var(--neon); color: #0a0a0a; }
  .neon-l3 .announcement a { color: #0a0a0a; border-bottom-color: rgba(0,0,0,0.4); }

  /* Nav Rewards button → neon */
  .neon-l3 .nav-btn { background: var(--neon); color: #0a0a0a; }

  /* Brand strip → neon tint wash + TRIXSTAR in neon */
  .neon-l3 .brand-strip { background: transparent; }
  .neon-l3 .brand-logo-item:hover { color: var(--ink); }

  /* All the L2 "everywhere blue used to be" carry over */
  .neon-l3 .newsletter-title .hollow { -webkit-text-stroke-color: var(--neon); }
  .neon-l3 .rewards-teaser { border-left-color: var(--neon); }
  .neon-l3 .rewards-icon,
  .neon-l3 .rewards-text-title { color: var(--ink); }
  .neon-l3 .section-eyebrow::before { background: var(--neon); }
  .neon-l3 .badge-new { background: var(--neon) !important; color: #0a0a0a !important; }
  .neon-l3 .trust-icon { background: var(--neon); color: #0a0a0a; }
  .neon-l3 .hero-eyebrow::before,
  .neon-l3 .scroll-dot { background: var(--neon); }
  .neon-l3 .brand-feature-content .btn-primary { background: var(--neon); color: #0a0a0a; }
  .neon-l3 .product-price .sale { color: var(--neon-deep); font-weight: 700; }
  .neon-l3 .email-input:focus { border-color: var(--neon); }
  .neon-l3 .email-submit { background: var(--neon); color: #0a0a0a; }
  .neon-l3 .view-all-link { color: var(--ink); border-bottom-color: var(--neon); }
  .neon-l3 .view-all-link:hover { color: var(--ink); gap: 14px; }
  .neon-l3 .cat-card:hover .cat-card-cta { color: var(--neon); border-color: var(--neon); }
  .neon-l3 .stat-item-num { color: var(--ink); }
  .neon-l3 .stars { color: var(--ink); }
  .neon-l3 .nav-links a::after { background: var(--neon); }
  .neon-l3 .hero-stat-num { color: var(--neon); }
  .neon-l3 .product-brand { color: var(--ink); }

  /* NEW surfaces only in L3 */
  /* Hero stat card — full neon border not just top */
  .neon-l3 .hero-stat { border: 2px solid var(--neon) !important; border-top: 2px solid var(--neon) !important; }

  /* Product cards — subtle neon left-border accent, always visible */
  .neon-l3 .product-card .product-img { border-left: 3px solid var(--neon); }

  /* Category cards — neon border glow on hover */
  .neon-l3 .cat-card { outline: 0px solid var(--neon); transition: outline 0.2s; }
  .neon-l3 .cat-card:hover { outline: 3px solid var(--neon); outline-offset: 0; }

  /* Section titles — neon underline bar */
  .neon-l3 .section-title {
    border-bottom: 3px solid var(--neon);
    padding-bottom: 12px;
    display: inline-block;
  }

  /* Footer column titles → neon */
  .neon-l3 .footer-col-title { color: var(--neon); }

  /* Author avatar initials → neon bg */
  .neon-l3 .author-avatar { background: var(--neon); color: #0a0a0a; }

  /* Social proof section → faint neon tint wash on the grey bg */
  .neon-l3 .social-proof { background: transparent; }

  /* Testimonial card hover — neon border */
  .neon-l3 .testimonial-card:hover { border-color: var(--neon); }

  /* Nav links active underline → neon */
  .neon-l3 .nav-links a.active::after { background: var(--neon); }

  /* ── Rewards join / member panel (js/member.js) ── */
  .rewards-join { display:flex; flex-direction:column; align-items:center; gap:16px; max-width:420px; margin:0 auto; }
  .rewards-cta-band .rewards-join p { margin-bottom:0; }
  .rewards-join .form-note { font-size:12px; line-height:1.6; }
  .link-btn {
    background:none; border:none; padding:0; cursor:pointer;
    font:inherit; font-weight:600; color:inherit; text-decoration:underline; text-underline-offset:3px;
  }
  .flip-dark .link-btn { color:var(--paper); }
  .flip-dark .link-btn:hover { color:var(--neon); }
  /* Beats .rewards-cta-band.flip-dark p (later in this file) */
  .rewards-cta-band.flip-dark [data-member-panel] .rewards-balance {
    font-family:var(--font-display); font-weight:800; line-height:1;
    font-size:clamp(56px, 8vw, 96px); color:var(--neon); margin:14px 0 12px;
  }
  .rewards-balance-unit { font-size:0.3em; text-transform:uppercase; letter-spacing:0.08em; color:var(--paper); }
  .btn-row.btn-row--center { justify-content:center; }
  .rewards-cta-band .rewards-join-error { margin:20px 0 0; color:var(--paper); }
  .rewards-join-error a { text-decoration:underline; }
  /* Signed-in member: small neon dot on the account icon */
  .member-toggle { position:relative; border:none; background:transparent; }
  .member-toggle.is-member::after {
    content:''; position:absolute; top:7px; right:7px; width:8px; height:8px;
    border-radius:50%; background:var(--neon); box-shadow:0 0 0 2px var(--paper);
  }
  .member-toggle:disabled { opacity:0.5; cursor:progress; }

  /* ── Gift card visual (.gc-card-*; the homepage band reuses it) ── */
  .gc-card-visual {
    aspect-ratio:1.586; border-radius:12px; overflow:hidden; position:relative;
    background:linear-gradient(135deg, #1a1a1a 0%, #2e2e2e 100%);
    box-shadow:0 20px 60px rgba(0,0,0,0.22); margin-bottom:20px;
  }
  .gc-card-stripe { position:absolute; inset:0;
    background:linear-gradient(135deg, transparent 20%, rgba(255,255,255,0.07) 80%); }
  .neon-l2 .gc-card-stripe {
    background:linear-gradient(135deg, transparent 20%, rgba(255,255,255,0.07) 80%); }
  .gc-card-logo { position:absolute; top:28px; left:28px; }
  .gc-card-logo img { height:26px; filter:brightness(0) invert(1); opacity:0.9; }
  .gc-card-amount-display { position:absolute; bottom:28px; left:28px;
    font-family:var(--font-display); font-weight:900; font-size:40px;
    color:var(--white); letter-spacing:-0.02em; line-height:1; }
  .gc-card-label { position:absolute; bottom:32px; right:28px;
    font-size:9px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
    color:rgba(255,255,255,0.45); }

  /* ── Dark neon sections beyond the homepage (About stats, FAQ CTA,
     Loyalty CTA, Gift Card hero) — reuse .flip-dark.accent-neon ── */
  .stats-band.flip-dark { border-color: var(--surface-1); }
  .stats-band.flip-dark .stat-num { color: var(--neon); }

  .faq-cta-band.flip-dark { border-color: var(--surface-1); }

  .rewards-cta-band.flip-dark h2 { color: var(--paper); }
  .rewards-cta-band.flip-dark p { color: var(--grey-700); }



  /* Small phones: logo + Rewards + hamburger overflowed the header and pushed
     the menu toggle off-screen (≤390px). */
  @media (max-width: 540px) {
    nav { padding: 0 16px; }
    .nav-actions { gap: 4px; }
    .nav-btn { padding: 9px 12px; }
    .nav-toggle { margin-left: 10px; flex-shrink: 0; }
  }

  /* Skip link: hidden until focused by keyboard */
  .skip-link {
    position: absolute; left: 16px; top: -48px; z-index: 1000;
    background: var(--ink); color: var(--paper); padding: 10px 16px;
    font-size: 13px; font-weight: 600; transition: top 0.15s;
  }
  .skip-link:focus { top: 12px; }

  .pd-action-error { margin: -16px 0 24px; font-size: 13px; color: #b42318; }

  .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  [hidden] { display: none !important; }
  .gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Policy pages (privacy, returns) */
  .policy-body { max-width: 760px; padding: 8px 60px 96px; color: var(--grey-700); font-size: 15px; line-height: 1.75; }
  .policy-body h2 { font-family: var(--font-display); font-weight: 800; font-size: 18px; text-transform: uppercase; color: var(--ink); margin: 40px 0 12px; }
  .policy-body p, .policy-body ul, .policy-body ol { margin-bottom: 14px; }
  .policy-body ul, .policy-body ol { padding-left: 22px; }
  .policy-body li { margin-bottom: 6px; }
  .policy-body a { color: var(--ink); text-decoration: underline; overflow-wrap: anywhere; }
  .policy-updated { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-500); }
  @media (max-width: 640px) { .policy-body { padding: 8px 20px 72px; } }

  /* Hero: cut-out model standing in a soft studio spotlight */
  .hero-spot { position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 52% 62% at 50% 6%, rgba(255,255,255,0.15), rgba(255,255,255,0.04) 48%, transparent 72%),
      radial-gradient(ellipse 40% 9% at 50% 100%, rgba(255,255,255,0.06), transparent 72%); }
  .hero-model { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 88%; width: auto; max-width: none; z-index: 1;
    filter: drop-shadow(0 0 48px rgba(0,0,0,0.45)); }
  /* Interim real photo in the About visual (until custom shoots) */
  .hero-right::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to right, var(--surface-1) 0%, rgba(14,14,14,0) 30%); }
  .about-visual { position: relative; overflow: hidden; }
  .about-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* Founders photo: sized to sit beside the copy rather than tower over it */
  .about-split { grid-template-columns: minmax(0, 520px) minmax(0, 460px); justify-content: center; gap: 88px; }
  .about-title { margin: 22px 0 26px; }
  .about-copy p { font-size: 16px; max-width: 520px; margin-bottom: 20px; }
  .about-copy p:last-of-type { margin-bottom: 34px; }
  @media (max-width: 1080px) {
    .about-split { grid-template-columns: 1fr; justify-content: stretch; gap: 40px; }
    .about-visual { width: 100%; max-width: 480px; }
  }
  @media (max-width: 860px) {
    /* Stacked hero: fade the photo into the copy below it, not from the left */
    .hero-right::after { background: linear-gradient(to bottom, rgba(14,14,14,0) 70%, var(--surface-1) 100%); }
    /* Pinned to the hero's bottom corner it covered the Explore Brands button;
       "NZ owned" is repeated in the trust strip directly below */
    .hero-stat { display: none; }
  }

  /* Swatches and sizes are <button>s now (keyboard + screen-reader friendly) */
  button.swatch, button.size-option { background: transparent; font-family: var(--font-body); padding: 0; }
  button.size-option { padding: 0 10px; background: var(--white); }
  button.size-option.active { background: var(--black); }
  .swatch:focus-visible, .size-option:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .pd-action-error a { color: inherit; font-weight: 600; text-decoration: underline; }

  /* ── Cart: nav icon + slide-over drawer (js/cart.js) ── */
  .cart-toggle { position: relative; border: none; background: transparent; }
  .cart-count {
    position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px; background: var(--neon); color: #0a0a0a;
    font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  }
  body.cart-open { overflow: hidden; }
  .cart-layer { position: fixed; inset: 0; z-index: 1000; }
  .cart-backdrop { position: absolute; inset: 0; background: rgba(10,10,10,0.45); opacity: 0; transition: opacity 0.25s; }
  .cart-drawer {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
    background: var(--paper); display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform 0.25s ease;
    box-shadow: -12px 0 40px rgba(0,0,0,0.12);
  }
  .cart-layer.is-open .cart-backdrop { opacity: 1; }
  .cart-layer.is-open .cart-drawer { transform: translateX(0); }
  .cart-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--grey-300); }
  .cart-head h2 { font-family: var(--font-display); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: 0.02em; }
  .cart-close { background: none; border: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--ink); padding: 0 4px; }
  .cart-body { flex: 1; overflow-y: auto; padding: 8px 24px; }
  .cart-empty { padding: 40px 0 20px; color: var(--grey-700); font-size: 14px; }
  .cart-empty-link { display: inline-block; }
  .cart-item { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--grey-300); }
  .cart-item-img { display: block; aspect-ratio: 4/5; background: var(--grey-100) center / cover no-repeat; border-radius: 4px; }
  .cart-item-name { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
  .cart-item-opts { font-size: 12px; color: var(--grey-700); margin-bottom: 10px; }
  .cart-item-row { display: flex; align-items: center; justify-content: space-between; }
  .cart-qty { display: inline-flex; align-items: center; border: 1px solid var(--grey-300); border-radius: 4px; }
  .cart-qty button { width: 30px; height: 30px; background: none; border: none; cursor: pointer; font-size: 16px; color: var(--ink); }
  .cart-qty span { min-width: 24px; text-align: center; font-size: 13px; font-weight: 600; }
  .cart-item-price { font-size: 14px; font-weight: 600; }
  .cart-remove { margin-top: 8px; background: none; border: none; padding: 0; font-size: 12px; color: var(--grey-700); text-decoration: underline; cursor: pointer; }
  .cart-foot { padding: 20px 24px 24px; border-top: 1px solid var(--grey-300); background: var(--white); }
  .cart-subtotal { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 6px; }
  .cart-note { font-size: 12px; color: var(--grey-700); margin-bottom: 16px; }
  .cart-checkout { width: 100%; text-align: center; }
  .cart-checkout:disabled { opacity: 0.6; cursor: wait; }
  .cart-fallback { margin-top: 16px; font-size: 13px; color: var(--grey-700); line-height: 1.6; }
  .cart-fallback .btn-ghost { display: block; text-align: center; margin-top: 10px; }

  /* ══════════════════════════════════════════════════════════════
     MOBILE-FIRST PASS (13 Oct 2026)
     Phones are most of this audience. Everything below either fixes a
     phone layout problem found in testing at 390px, or supports the
     baked-HTML performance work (real <img> photos, no re-rendering).
     ══════════════════════════════════════════════════════════════ */

  :root {
    --neon-text: #0a0a0a;   /* small text on paper is ink: neon there is unreadable, and no second green */
    --nav-h: 68px;
    --gutter: 60px;
  }

  /* Small text on paper: ink, not a darker green (16 Oct 2026). */
  .neon-l2 .product-brand,
  .neon-l2 .product-price .sale { color: var(--neon-text); }

  /* Highlighter-pen accent behind a word in a heading */
  .neon-mark {
    background: linear-gradient(transparent 60%, var(--neon) 60%, var(--neon) 90%, transparent 90%);
    padding: 0 0.08em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .flip-dark .neon-mark { background: none; color: var(--neon); }

  .btn-neon, .flip-dark .btn-neon { background: var(--neon); color: #0a0a0a; }
  .btn-neon:hover { background: var(--neon); color: #0a0a0a; }

  .link-btn { background: none; border: none; padding: 0; font: inherit; color: var(--black); font-weight: 600; text-decoration: underline; cursor: pointer; }

  /* Page-header eyebrow line: neon on every page */
  .neon-l2 .page-header-eyebrow::before { background: var(--neon); height: 2px; }

  /* ── Product cards: real <img> photos (crawlable, lazy, no layout shift) ── */
  a.product-img { display: block; }
  img.product-img-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .product-card[hidden] { display: none !important; }
  .product-name { display: block; }
  .badge-out { background: var(--grey-300); color: var(--grey-700); }
  @media (hover: none) { .product-quick-add { display: none; } .product-card:hover .product-img-bg { transform: none; } }

  /* Home: baked category / brand photos */
  .cat-card-img, .brand-feature-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cat-card-img { transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  .cat-card:hover .cat-card-img { transform: scale(1.04); }
  .brand-feature-visual { min-height: 320px; }
  a.brand-logo-item { text-decoration: none; }

  /* ── Product gallery: one swipeable track; thumbnails on desktop ── */
  .gallery-main { display: block; }
  .gallery-track {
    display: flex; height: 100%;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  .gallery-track::-webkit-scrollbar { display: none; }
  .gallery-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
  .gallery-track:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
  .gallery-count {
    position: absolute; right: 12px; bottom: 12px; z-index: 2;
    background: rgba(10,10,10,0.72); color: var(--paper);
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 20px;
  }
  button.gallery-thumb { padding: 0; overflow: hidden; background: var(--grey-100); }
  .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .size-option[aria-pressed="true"], .size-option.active { background: var(--black); color: var(--white); border-color: var(--black); }
  .size-grid.needs-choice .size-option:not(.disabled) { border-color: var(--ink); box-shadow: 0 0 0 2px var(--neon); }
  .pd-sticky { display: none; }
  /* Brand, gift card, size guide and rewards links are for the phone menu only */
  @media (min-width: 861px) { .nav-links .nav-m { display: none; } }

  /* ── Shop filters: desktop sidebar, phone bottom sheet ── */
  .filter-open, .filter-sheet-head, .filter-apply, .filter-backdrop { display: none; }
  .filter-clear { background: none; border: none; padding: 0; }

  /* ── Brand-page buying guide ── */
  .brand-guide { padding: 24px var(--gutter) 96px; border-top: 1px solid var(--grey-300); }
  .brand-guide-head { padding: 64px 0 36px; }
  .brand-guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .guide-block { background: var(--white); border: 1px solid var(--grey-300); border-top: 3px solid var(--neon); border-radius: 4px; padding: 28px; }
  .guide-block h3 { font-family: var(--font-display); font-weight: 800; font-size: 19px; text-transform: uppercase; color: var(--black); margin-bottom: 12px; }
  .guide-block p { font-size: 14px; color: var(--grey-700); line-height: 1.75; }
  .guide-block a { color: var(--black); font-weight: 600; text-decoration: underline; text-decoration-color: var(--neon-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .guide-list { list-style: none; margin-top: 14px; display: grid; gap: 8px; }
  .guide-list li { position: relative; padding-left: 18px; font-size: 14px; color: var(--ink); line-height: 1.55; }
  .guide-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: var(--neon); border-radius: 50%; }

  /* ── FAQ: more neon ── */
  .faq-group-title { position: relative; border-bottom-color: var(--grey-300); }
  .faq-group-title::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 56px; height: 3px; background: var(--neon); }
  .faq-nav-title { color: var(--neon-text); }
  .faq-nav-link.active { border-left-color: var(--neon); background: var(--neon-tint); }
  .faq-item { transition: background 0.2s; }
  .faq-group .faq-item.open { background: linear-gradient(90deg, var(--neon-tint), transparent 70%); box-shadow: inset 3px 0 0 var(--neon); }
  .faq-group .faq-item.open .faq-question, .faq-group .faq-item.open .faq-answer-inner { padding-left: 16px; }
  .faq-item.open .faq-question .icon { border-color: var(--neon); background: var(--neon); }
  .faq-item.open .faq-question .icon::before, .faq-item.open .faq-question .icon::after { background: #0a0a0a; }
  .faq-question:hover .icon { border-color: var(--ink); }
  .faq-answer-inner a { text-decoration-color: var(--neon-deep); }

  /* ── About: more neon ── */
  .founders-tag { border: 1.5px solid var(--neon); background: var(--neon); color: #0a0a0a; }
  .founders-tag .dot { width: 8px; height: 8px; background: #0a0a0a; }
  .about-copy .btn-primary { background: var(--neon); color: #0a0a0a; }
  .about-copy .btn-primary:hover { background: var(--neon); }
  .values-head { padding: 0 var(--gutter) 32px; }
  .value-card { border-top: 3px solid var(--neon); transition: transform 0.2s, box-shadow 0.2s; }
  .value-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,0.06); }
  /* Neon digits; the thin ink outline keeps them legible on the white card */
  .value-card .num { color: var(--neon); font-size: 30px; font-weight: 900; letter-spacing: 0.04em; line-height: 1; margin-bottom: 16px; }

  /* ── Contact: neon submit, neon icon rows ── */

  .contact-info-card h2 { position: relative; padding-bottom: 12px; }
  .contact-info-card h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; background: var(--neon); }

  /* ════════════ ≤1080: tablets and phones ════════════ */
  @media (max-width: 1080px) {
    .filter-open {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--white); border: 1px solid var(--black); color: var(--black);
      padding: 10px 16px; min-height: 42px; border-radius: 2px;
      font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
    }
    .filter-open[data-active]:not([data-active=""])::after {
      content: attr(data-active); min-width: 18px; height: 18px; border-radius: 9px; background: var(--neon); color: #0a0a0a;
      font-size: 10px; line-height: 18px; text-align: center; padding: 0 5px;
    }
    .shop-toolbar { position: sticky; top: var(--nav-h); z-index: 20; background: var(--paper); margin: 0 -28px 18px; padding: 12px 28px; gap: 12px; flex-wrap: wrap; }
    .shop-result-count { margin-right: auto; }
    .filter-sidebar {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
      max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain;
      background: var(--paper); border-radius: 16px 16px 0 0; padding: 0 22px 0;
      box-shadow: 0 -12px 40px rgba(0,0,0,0.18);
      transform: translateY(105%); visibility: hidden; transition: transform 0.28s ease, visibility 0s 0.28s;
    }
    .filter-sidebar.is-open { transform: translateY(0); visibility: visible; transition: transform 0.28s ease; }
    .filter-sheet-head {
      display: flex; align-items: center; justify-content: space-between;
      position: sticky; top: 0; z-index: 1; background: var(--paper);
      padding: 18px 0 14px; margin-bottom: 8px; border-bottom: 1px solid var(--grey-300);
      font-family: var(--font-display); font-weight: 800; font-size: 18px; text-transform: uppercase;
    }
    .filter-sheet-head::before { content: ''; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--grey-300); }
    .filter-close { background: none; border: none; font-size: 30px; line-height: 1; width: 44px; height: 44px; margin-right: -10px; cursor: pointer; color: var(--ink); }
    .filter-apply { display: block; position: sticky; bottom: 0; width: calc(100% + 44px); margin: 8px -22px 0; border-radius: 0; padding: 18px; padding-bottom: max(18px, env(safe-area-inset-bottom)); background: var(--black); }
    .neon-l2 .filter-apply { background: var(--neon); color: #0a0a0a; }
    .filter-backdrop { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(10,10,10,0.45); }
    .filter-backdrop[hidden] { display: none !important; }
    body.sheet-open { overflow: hidden; }
    .filter-option { min-height: 40px; padding: 4px 0; font-size: 14px; }
    .filter-option input { width: 18px; height: 18px; }
    .price-range-dot { width: 24px; height: 24px; }
    .price-range-track { margin: 26px 12px 14px; }
    .filter-clear { display: inline-block; padding: 10px 0; margin-bottom: 8px; }

    .gallery-thumbs { display: none; }
    .brand-guide-grid { grid-template-columns: 1fr; }
  }

  /* ════════════ ≤860: phones and small tablets ════════════ */
  @media (max-width: 860px) {
    :root { --nav-h: 60px; --gutter: 20px; }

    .announcement { padding: 9px 16px; font-size: 11px; letter-spacing: 0.08em; }
    .announcement .ann-long { display: none; }

    nav { height: var(--nav-h); padding: 0 12px 0 20px; }
    .nav-logo { height: 24px; }
    .nav-actions .nav-btn { display: none; }        /* "Apex Rewards" is in the menu */
    .nav-icon { width: 44px; height: 44px; }
    .nav-toggle { width: 44px; height: 44px; padding: 0 9px; margin-left: 0; }
    .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-links {
      top: var(--nav-h); max-height: calc(100dvh - var(--nav-h)); padding: 4px 20px 28px;
      background: var(--paper);
    }
    .nav-links a { padding: 15px 0; font-size: 15px; letter-spacing: 0.06em; color: var(--ink); }
    .nav-links li:first-child a { font-weight: 800; }
    .nav-links .nav-m a { font-weight: 500; text-transform: none; letter-spacing: 0.01em; font-size: 16px; padding-left: 14px; border-left: 3px solid transparent; }
    .nav-links .nav-m a:active, .nav-links .nav-m a.active { border-left-color: var(--neon); }
    .nav-links li:last-child a { border-bottom: none; color: #0a0a0a; background: var(--neon); padding-left: 14px; margin-top: 14px; font-weight: 700; }
    body.menu-open { overflow: hidden; }

    /* Hero: photo full-bleed with the copy over it, so the headline and both
       buttons are on the first screen of a phone */
    .hero { display: block; position: relative; min-height: calc(100svh - var(--nav-h) - 34px); max-height: 760px; }
    .hero-right { position: absolute; inset: 0; min-height: 0; }
    .hero-right::after { background: linear-gradient(to bottom, rgba(14,14,14,0) 25%, rgba(14,14,14,0.55) 52%, var(--surface-1) 88%); }
    .hero-model { height: 84%; }
    .hero-left { position: relative; z-index: 3; min-height: inherit; max-height: inherit; padding: 32px 20px 28px; justify-content: flex-end; }
    .hero-eyebrow, .hero-headline, .hero-sub, .hero-ctas { opacity: 1; animation: none; }
    .hero-eyebrow { margin-bottom: 12px; color: var(--paper); }
    .hero-headline { font-size: clamp(46px, 14vw, 72px); margin-bottom: 14px; }
    .hero-sub { font-size: 14px; margin-bottom: 22px; color: rgba(246,245,244,0.8); }
    .hero-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .hero-ctas a { text-align: center; padding: 15px 10px; }

    .trust-strip { gap: 16px 12px; padding: 22px 20px; }
    .trust-icon { width: 32px; height: 32px; }
    .trust-item { gap: 10px; align-items: flex-start; }

    .brand-strip { padding: 14px 20px; overflow-x: auto; scrollbar-width: none; }
    .brand-strip::-webkit-scrollbar { display: none; }
    .brand-strip-label { margin-right: 22px; }
    .brand-logos { gap: 26px; }
    .brand-logo-item { font-size: 15px !important; padding: 8px 0; }

    .categories, .featured { padding: 52px 20px; }
    .categories-header, .featured-header { margin-bottom: 24px; }
    .section-title { font-size: clamp(30px, 9vw, 40px); }

    .brand-feature { margin: 0 20px 52px; }
    .brand-feature-visual { min-height: 0; aspect-ratio: 4 / 3; }
    .brand-feature-content { padding: 28px 22px 32px; }
    .brand-feature-logo { font-size: 34px; }
    .brand-feature-desc { font-size: 14px; margin-bottom: 24px; }
    .brand-feature-stats { margin-bottom: 26px; padding-top: 22px; }

    /* Testimonials: swipe through instead of three tall stacked cards */
    .social-proof { padding: 52px 0; }
    .social-proof-header { margin-bottom: 28px; padding: 0 20px; }
    .testimonials { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px 6px; scrollbar-width: none; }
    .testimonials::-webkit-scrollbar { display: none; }
    .testimonial-card { flex: 0 0 84%; scroll-snap-align: center; padding: 22px; }
    .testimonial-card.reveal { opacity: 1; transform: none; }

    .team-orders { padding: 52px 20px; }
    .team-orders-actions a { flex: 1 1 100%; text-align: center; }

    .newsletter { padding: 52px 20px; gap: 24px; }
    .newsletter > * { min-width: 0; }
    .newsletter-title { font-size: clamp(34px, 10vw, 44px); }

    /* Footer: links in two columns, bigger tap targets */
    footer { padding: 40px 20px 28px; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 28px 20px; margin-bottom: 32px; }
    .footer-top > div:first-child { grid-column: 1 / -1; }
    .footer-top > div:nth-child(2) { grid-column: auto; }
    .footer-links { gap: 0; }
    .footer-links a { display: block; padding: 7px 0; font-size: 14px; }
    .footer-col-title { margin-bottom: 8px; }
    .social-btn { width: 44px; height: 44px; }

    /* Sub-pages */
    .breadcrumb { padding: 14px 20px 0; font-size: 10px; white-space: nowrap; overflow: hidden; }
    .breadcrumb a, .breadcrumb .sep { flex-shrink: 0; padding: 6px 0; }
    .breadcrumb span.current { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .page-header { padding: 20px 20px 32px; }
    .page-header-title { font-size: clamp(32px, 9.5vw, 46px) !important; }
    .page-header-sub { font-size: 14px; margin-top: 12px; }
    .page-header-watermark { width: 180px; right: -40px; }
    .page-header-shoes { top: 2px; right: 10px; height: auto; width: 70px; }
    .category-chips { flex-wrap: nowrap; overflow-x: auto; margin: 18px -20px 0; padding: 0 20px 4px; scrollbar-width: none; }
    .category-chips::-webkit-scrollbar { display: none; }
    .category-chip { flex-shrink: 0; padding: 11px 14px; }
    .section-wrap, .section-wrap.tight { padding: 48px 20px; }

    /* Shop */
    .shop-layout { padding: 4px 20px 56px; }
    .shop-toolbar { margin: 0 -20px 16px; padding: 10px 20px; border-bottom: 1px solid var(--grey-300); }
    .shop-sort { font-size: 0; gap: 0; }               /* hide the "Sort by" text, keep the select */
    .shop-sort select { font-size: 13px; min-height: 42px; padding: 0 10px; }
    .shop-grid, .product-grid { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
    .product-img { margin-bottom: 10px; border-radius: 3px; }
    .product-badge { top: 8px; left: 8px; font-size: 8.5px; padding: 3px 7px; }
    .product-brand { font-size: 9px; letter-spacing: 0.12em; }
    .product-name { font-size: 13px; line-height: 1.35; margin-bottom: 4px; }
    .product-price { font-size: 13px; }

    /* Product page: full-bleed swipe gallery, compact info, sticky add-to-cart */
    .product-detail { padding: 0 0 0; gap: 0; }
    .gallery { margin: 12px 0 0; }
    .gallery-main { border-radius: 0; border-left: none; border-right: none; margin-bottom: 0; }
    .pd-info { padding: 22px 20px 0; }
    .pd-title { font-size: 26px; margin-bottom: 8px; }
    .pd-price { font-size: 19px; margin-bottom: 20px; }
    .color-swatches { margin-bottom: 20px; }
    .swatch { width: 44px; height: 44px; }
    .swatch .dot { width: 32px; height: 32px; }
    .size-grid { gap: 8px; }
    .size-option { min-width: 52px; height: 46px; font-size: 14px; }
    .size-guide-link { padding: 8px 0; margin-bottom: 16px; }
    .pd-actions { flex-direction: column; gap: 10px; margin-bottom: 18px; }
    .pd-actions .btn-primary, .btn-secondary-outline { padding: 17px 20px; }
    .neon-l2 .pd-actions .btn-primary { background: var(--neon); color: #0a0a0a; }
    .related-section { padding: 52px 20px 64px; }
    .related-section .section-title { margin-bottom: 22px !important; }
    .pd-sticky {
      display: flex; align-items: center; gap: 12px;
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
      background: rgba(255,255,255,0.97); backdrop-filter: blur(10px);
      border-top: 1px solid var(--grey-300); box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
      padding: 10px 16px; padding-bottom: max(10px, env(safe-area-inset-bottom));
      transform: translateY(110%); transition: transform 0.25s ease;
    }
    .pd-sticky.is-visible { transform: translateY(0); }
    .pd-sticky-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
    .pd-sticky-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pd-sticky-price { font-size: 13px; font-weight: 700; }
    .pd-sticky-price .original { text-decoration: line-through; color: var(--grey-500); font-weight: 400; margin-right: 4px; }
    .pd-sticky-add { padding: 14px 20px; white-space: nowrap; }
    .neon-l2 .pd-sticky-add { background: var(--neon); color: #0a0a0a; }
    body:has(.pd-sticky.is-visible) footer { padding-bottom: 96px; }

    /* Size guide was squeezed into a narrow column */
    .size-tabs { padding: 8px 20px 0; overflow-x: auto; }
    .size-tab { white-space: nowrap; min-height: 44px; }
    .size-panel { padding: 28px 20px 0; }
    table.size-table { min-width: 0; }
    table.size-table th, table.size-table td { padding: 11px 12px; }
    .measure-steps { padding: 8px 20px 56px; gap: 18px; }

    /* FAQ: jump-to links as a swipeable chip row */
    .faq-layout { padding: 28px 20px 56px; gap: 0; }
    .faq-nav { flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 0 -20px 28px; padding: 0 20px 18px; scrollbar-width: none; }
    .faq-nav::-webkit-scrollbar { display: none; }
    .faq-nav-title { display: none; }
    .faq-nav-link { flex-shrink: 0; border: 1px solid var(--grey-300); border-radius: 30px; padding: 10px 16px; white-space: nowrap; background: var(--white); }
    .faq-nav-link.active { border-color: var(--neon); background: var(--neon); color: #0a0a0a; }
    .faq-question { padding: 18px 4px; font-size: 15px; min-height: 56px; }
    .faq-group-title { font-size: 21px; }
    .faq-cta-buttons { flex-direction: column; }

    .about-split { padding: 40px 20px; gap: 32px; }
    .values-head { padding: 0 20px 22px; }
    .values-grid { padding: 0 20px 56px; gap: 14px; }
    .stats-band .stat { padding: 26px 20px; }
    .stats-band .stat-num { font-size: 30px; }
    .contact-grid { padding: 36px 20px 56px; gap: 36px; }
    .form-card { padding: 24px 18px; }
    .form-input, .form-textarea, .email-input { font-size: 16px; } /* stops iOS zooming into fields */
    .brand-guide { padding: 8px 20px 56px; }
    .brand-guide-head { padding: 44px 0 22px; }
    .guide-block { padding: 22px 20px; }
  }

  @media (max-width: 540px) {
    nav { padding: 0 8px 0 16px; }
    .cat-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 250px; grid-auto-rows: 190px; gap: 10px; }
    .cat-card { min-height: 0; }
    .cat-card:first-child { grid-column: 1 / -1; grid-row: auto; }
    .cat-card-content { padding: 16px; }
    .cat-card-tag { font-size: 9px; margin-bottom: 4px; }
    .cat-card-name { font-size: 18px !important; margin-bottom: 8px; }
    .cat-card:first-child .cat-card-name { font-size: 28px !important; }
    .cat-card-cta { font-size: 10px; }

    .email-row { flex-direction: column; gap: 8px; }
    .email-input { min-width: 0; border-right: 1px solid var(--grey-300); border-radius: 2px; }
    .email-submit { border-radius: 2px; padding: 15px; }
    .faq-cta-band, .rewards-cta-band { padding: 48px 20px; }
  }

  /* Swipe hint under phone carousels (js/carousel.js) */
  .carousel-nav { display: none; }
  @media (max-width: 860px) {
    .carousel-nav { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 18px; padding: 0 20px; }
    .carousel-hint { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-700); }
    .carousel-hint svg { animation: swipe-nudge 1.6s ease-in-out infinite; }
    .carousel-nav.touched .carousel-hint svg { animation: none; }
    .carousel-dot { width: 28px; height: 28px; padding: 0; border: none; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
    .carousel-dot::before { content: ''; width: 8px; height: 8px; border-radius: 4px; background: var(--grey-300); transition: width 0.2s, background 0.2s; }
    .carousel-dot.active::before { width: 22px; background: var(--ink); }
  }
  @keyframes swipe-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

  /* Full-bleed hero photo (alternative to the cut-out .hero-model) */
  .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; z-index: 1; }

  /* ---------- Moved from inline style attributes (14 Oct) ----------
     Two-class selectors so these still beat the base rules (and their
     mobile overrides) the way the inline styles did. */
  .page-header.page-header--tall { min-height: 52vh; }
  .page-header.page-header--shop { padding-bottom: 28px; }
  .page-header-title.page-header-title--shop { font-size: clamp(36px, 5vw, 58px); }
  .btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
  .filter-group.filter-group--last { border-bottom: none; }
  a.link-strong { color: var(--blue-deep); font-weight: 600; }
  .btn-primary.nowrap { white-space: nowrap; }
  .req { color: #c0392b; }
  label .label-hint { color: var(--grey-500); font-weight: 400; text-transform: none; letter-spacing: 0; }
  .hero-photo.hero-photo--top { object-position: center top; }
  .brand-logo-item.brand-logo-item--ba { font-size: 16px; letter-spacing: 0.1em; }
  .brand-logo-item.brand-logo-item--soon { color: var(--grey-300); font-size: 14px; letter-spacing: 0.08em; }
  .cat-card .cat-card-name.cat-card-name--sm { font-size: 22px; }
  .btn-primary.btn-fit { width: fit-content; }
  .section-eyebrow.section-eyebrow--center { justify-content: center; }
  .section-title.section-title--md { font-size: clamp(32px, 4vw, 48px); }
  .section-title.section-title--sm { font-size: clamp(26px, 3vw, 34px); margin-bottom: 8px; }
  .section-title.section-title--chart { font-size: clamp(24px, 3vw, 32px); margin-bottom: 20px; }
  .section-title.mb-8 { margin-bottom: 8px; }
  .section-title.mb-32 { margin-bottom: 32px; }
  .section-wrap.pt-0 { padding-top: 0; }
  .section-wrap.pt-8 { padding-top: 8px; }
  .rewards-grid-responsive { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
  .fine-print { font-size: 12px; color: var(--grey-500); margin-top: 28px; max-width: 640px; }

  /* ---------- Homepage gift card band (15 Oct) ----------
     Light section between the dark "Kitting out a squad" and the dark
     newsletter. Reuses the gift-card page's card (.gc-card-*), fanned. */
  .gift-band { padding: 100px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .gift-band-sub { font-size: 16px; line-height: 1.7; color: var(--grey-700); max-width: 460px; margin: 16px 0 28px; }
  .gift-band-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .gift-band-note { font-size: 12px; color: var(--grey-700); letter-spacing: 0.04em; }
  .gift-band-visual { position: relative; display: block; width: 100%; max-width: 440px; aspect-ratio: 1.586; justify-self: center; margin: 24px 0; }
  .gift-band-card { position: absolute; inset: 0; margin: 0; transform: rotate(3deg); transition: transform 0.35s ease, box-shadow 0.35s ease; }
  .gift-band-card--back { transform: rotate(-9deg) translate(-7%, 5%); filter: brightness(0.7); box-shadow: 0 12px 36px rgba(0,0,0,0.16); }
  .gift-band-visual:hover .gift-band-card { transform: rotate(0deg) translateY(-6px); box-shadow: 0 28px 70px rgba(0,0,0,0.26); }
  .gift-band-visual:hover .gift-band-card--back { transform: rotate(-12deg) translate(-10%, 6%); box-shadow: 0 12px 36px rgba(0,0,0,0.16); }
  @media (max-width: 860px) {
    .gift-band { padding: 64px 28px 72px; grid-template-columns: 1fr; gap: 40px; }
    .gift-band-visual { max-width: 340px; }
  }
  @media (max-width: 540px) {
    .gift-band { padding: 52px 20px 64px; }
    .gift-band-actions .btn-primary { flex: 1 1 100%; text-align: center; }
    .gift-band .gc-card-amount-display { font-size: 32px; }
    .gift-band-visual { max-width: 290px; margin: 16px auto 8px; }
  }

  /* Newsletter is dark now (matches "Kitting out a squad"). Neon outlined
     words ("FLY" in the hero, "ACCESS") get a soft glow; drop-shadow
     follows the stroke only, so the letters stay hollow. */
  .hollow.glow {
    filter: drop-shadow(0 0 6px rgba(212,255,0,0.55)) drop-shadow(0 0 18px rgba(212,255,0,0.3));
  }
  /* .neon-l2 sets dark olive text and a light-blue hover, both for light backgrounds */
  .neon-l2 .flip-dark .rewards-icon,
  .neon-l2 .flip-dark .rewards-text-title { color: var(--neon); }
  .flip-dark .rewards-teaser:hover { background: rgba(255,255,255,0.06); }
  a.rewards-teaser { color: inherit; text-decoration: none; }

  /* ---------- Dark footer (15 Oct): <footer class="flip-dark"> on every page ----------
     The social buttons are white circles with --black icons; in flip-dark
     --black is paper, so the icon would vanish. */
  footer.flip-dark .social-btn { background: transparent; border-color: rgba(255,255,255,0.22); color: var(--paper); }
  footer.flip-dark .social-btn:hover { border-color: var(--neon); color: var(--neon); background: transparent; }
  footer.flip-dark .footer-links a:hover,
  footer.flip-dark .footer-email a:hover { color: var(--neon); }

  /* ---------- Gift card nudges (15 Oct) ----------
     Shop All header promo (replaces the TriXstar shoes there) and a line
     under the product size guide link. */
  .shop-gift-promo {
    display: inline-flex; align-items: center; gap: 18px; margin-top: 24px;
    max-width: 380px; padding: 16px 20px 16px 18px;
    background: var(--white); border: 1px solid var(--grey-300); border-radius: 6px;
    color: inherit; text-decoration: none; position: relative; z-index: 1;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .shop-gift-promo:hover { border-color: var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
  .mini-gift-card {
    position: relative; flex: 0 0 104px; aspect-ratio: 1.586; border-radius: 7px; overflow: hidden;
    background: linear-gradient(135deg, #1a1a1a 0%, #2e2e2e 100%);
    box-shadow: 0 8px 20px rgba(0,0,0,0.22); transform: rotate(-6deg); transition: transform 0.3s ease;
  }
  .mini-gift-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 20%, rgba(255,255,255,0.08) 80%); }
  .mini-gift-card img { position: absolute; top: 9px; left: 10px; width: auto; height: 11px; filter: brightness(0) invert(1); opacity: 0.9; }
  .mini-gift-card-amount { position: absolute; bottom: 7px; left: 10px; z-index: 1; font-family: var(--font-display); font-weight: 900; font-size: 17px; line-height: 1; color: var(--neon); }
  .shop-gift-promo:hover .mini-gift-card { transform: rotate(0deg) translateY(-2px); }
  .shop-gift-promo-text { display: flex; flex-direction: column; gap: 4px; }
  .shop-gift-promo-title { font-family: var(--font-display); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: 0.01em; color: var(--black); text-wrap: balance; }
  .shop-gift-promo-sub { font-size: 13px; line-height: 1.5; color: var(--grey-700); }
  .shop-gift-promo-cta { font-size: 12px; font-weight: 600; color: var(--ink); margin-top: 2px; text-decoration: underline; text-decoration-color: var(--neon); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  /* Desktop: fills the header's right side top to bottom, bigger card and type */
  @media (min-width: 1081px) {
    .shop-gift-promo {
      position: absolute; top: 28px; bottom: 28px; right: 60px; margin-top: 0;
      width: min(560px, calc(100% - 740px)); max-width: none;
      gap: 32px; padding: 24px 36px 24px 32px;
    }
    .mini-gift-card { flex-basis: 190px; border-radius: 11px; box-shadow: 0 16px 36px rgba(0,0,0,0.25); }
    .mini-gift-card img { height: 18px; top: 16px; left: 17px; }
    .mini-gift-card-amount { font-size: 30px; bottom: 13px; left: 17px; }
    .shop-gift-promo-text { gap: 8px; }
    .shop-gift-promo-title { font-size: 24px; line-height: 1.05; }
    .shop-gift-promo-sub { font-size: 15px; }
    .shop-gift-promo-cta { font-size: 13px; margin-top: 4px; }
  }
  @media (min-width: 1081px) and (max-width: 1260px) {
    .shop-gift-promo { gap: 22px; padding: 20px 24px 20px 22px; }
    .mini-gift-card { flex-basis: 130px; }
    .mini-gift-card img { height: 13px; top: 11px; left: 12px; }
    .mini-gift-card-amount { font-size: 21px; bottom: 9px; left: 12px; }
    .shop-gift-promo-title { font-size: 19px; }
    .shop-gift-promo-sub { font-size: 14px; }
  }
  @media (max-width: 540px) {
    .shop-gift-promo { display: flex; max-width: none; gap: 14px; padding: 14px 16px 14px 14px; }
    .mini-gift-card { flex-basis: 84px; }
    .mini-gift-card img { height: 9px; top: 7px; left: 8px; }
    .mini-gift-card-amount { font-size: 14px; bottom: 6px; left: 8px; }
  }

  .size-help { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 28px; }
  .size-help .size-guide-link { margin-bottom: 0; }
  .size-help { gap: 14px; }
  /* Product pages: mini banner, tiny card as the icon */
  .size-gift-banner {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 12px 16px 12px 12px; border-radius: 6px;
    background: var(--white); border: 1px solid var(--grey-300); border-left: 4px solid var(--neon);
    color: var(--ink); text-decoration: none; transition: background 0.2s, border-color 0.2s;
  }
  .size-gift-banner:hover { border-color: var(--ink); border-left-color: var(--neon); }
  .mini-gift-card.mini-gift-card--icon { flex: 0 0 52px; border-radius: 5px; transform: rotate(-8deg); box-shadow: 0 5px 12px rgba(0,0,0,0.25); }
  .mini-gift-card--icon img { top: 50%; left: 50%; height: 15px; transform: translate(-50%, -50%); z-index: 1; }
  .size-gift-banner:hover .mini-gift-card--icon { transform: rotate(0deg) translateY(-1px); }
  .size-gift-banner-text { flex: 1; font-size: 13px; line-height: 1.45; color: var(--grey-700); }
  .size-gift-banner-text strong { color: var(--ink); font-weight: 700; }
  .size-gift-banner-arrow { font-size: 16px; color: var(--ink); transition: transform 0.2s; }
  .size-gift-banner:hover .size-gift-banner-arrow { transform: translateX(3px); }
  @media (max-width: 860px) {
    .size-help { gap: 4px; margin-bottom: 18px; }
  }

  /* ---------- Form status (js/forms.js) ---------- */
  .form-status { font-size: 13px; line-height: 1.5; margin: 0; }
  .form-status--ok { color: var(--ink); font-weight: 600; }
  .form-status--error { color: #b3261e; }
  .form-status a { text-decoration: underline; }
  .flip-dark .form-status--ok { color: var(--neon); }
  .flip-dark .form-status--error { color: #ff8a80; }

  /* ---------- Gift card page (design D, 15 Oct; js/gift-card-render.js) ----------
     gx- prefix: the design's .hero/.panel/.summary names clash with site styles. */
  .gx-display { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; }
  .gx-outline {
    color: transparent; -webkit-text-stroke: 2px var(--neon);
    filter: drop-shadow(0 0 6px rgba(212,255,0,0.55)) drop-shadow(0 0 18px rgba(212,255,0,0.3));
  }
  .gx-eyebrow { display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #a8a8a8; }
  .gx-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--neon); }

  .gx-hero { background: var(--surface-1); color: var(--paper); padding: 40px 60px 88px; overflow: hidden; }
  .gx-crumbs { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a8a8a; margin-bottom: 56px; }
  .gx-crumbs a { color: #8a8a8a; text-decoration: none; }
  .gx-crumbs a:hover { color: var(--paper); }
  .gx-crumbs span:last-child { color: var(--paper); }
  .gx-hero-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 64px; }
  .gx-hero-copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
  .gx-hero-copy h1 { margin: 0; font-size: clamp(56px, 7.4vw, 112px); line-height: 0.9; letter-spacing: -0.02em; color: var(--paper); }
  .gx-hero-copy p { margin: 0; max-width: 440px; font-size: 17px; line-height: 1.6; color: #b8b8b8; }

  .gx-stage {
    flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 44px; padding: 40px 0 8px;
    background: radial-gradient(ellipse 60% 55% at 50% 40%, #262626 0%, var(--surface-1) 72%);
  }
  .gx-card {
    width: 100%; max-width: 520px; aspect-ratio: 1.586; background: #111; border: 1px solid #333; border-radius: 6px; padding: 32px;
    display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 50px 90px rgba(0,0,0,0.7);
  }
  .gx-card-top, .gx-card-bottom { display: flex; justify-content: space-between; gap: 16px; }
  .gx-card-top { align-items: flex-start; }
  .gx-card-bottom { align-items: flex-end; }
  .gx-wordmark { width: auto; height: 34px; filter: brightness(0) invert(1); }
  .gx-chip { width: 44px; height: 30px; border: 1.5px solid var(--neon); border-radius: 3px; flex-shrink: 0; }
  .gx-card-amount { font-family: var(--font-display); font-weight: 900; font-size: clamp(64px, 8vw, 100px); line-height: 0.85; letter-spacing: -0.03em; color: var(--neon); }
  .gx-card-meta { text-align: right; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #a8a8a8; line-height: 1.7; }

  .gx-picker { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .gx-picker legend { padding: 0; margin: 0 auto 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #a8a8a8; }
  .gx-amounts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; }
  .gx-amount {
    background: none; border: 0; border-bottom: 4px solid transparent; padding: 4px 2px 8px; min-height: 44px; cursor: pointer;
    font-family: var(--font-display); font-weight: 900; font-size: clamp(38px, 3.6vw, 56px); line-height: 1;
    color: #3a3a3a; transition: color 0.15s, border-color 0.15s;
  }
  .gx-amount sup { font-size: 0.45em; vertical-align: top; position: relative; top: 0.1em; }
  .gx-amount:hover { color: #6a6a6a; }
  .gx-amount[aria-pressed="true"] { color: var(--neon); border-bottom-color: var(--neon); }
  .gx-amount:focus-visible { outline: 2px solid var(--neon); outline-offset: 4px; }
  .gx-amount:disabled { opacity: 0.35; cursor: not-allowed; color: #3a3a3a; }

  .gx-checkout { padding: 80px 60px 96px; max-width: 1320px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
  .gx-checkout form { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
  .gx-panel { background: var(--white); border: 1px solid var(--grey-100); padding: clamp(20px, 3vw, 40px); display: flex; flex-direction: column; gap: 28px; }
  .gx-panel h2 { margin: 0; display: flex; align-items: baseline; gap: 16px; }
  .gx-num { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--ink); }
  .gx-title { font-size: 32px; letter-spacing: -0.01em; color: var(--ink); }
  .gx-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
  .gx-field { display: flex; flex-direction: column; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-700); }
  .gx-hint { letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--grey-500); }
  .gx-field input, .gx-field textarea {
    height: 54px; padding: 0 16px; border: 1px solid var(--grey-300); border-radius: 2px; background: var(--paper);
    font-family: var(--font-body); font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink); width: 100%;
  }
  .gx-field textarea { height: auto; padding: 16px; resize: vertical; }
  .gx-field input:focus, .gx-field textarea:focus { outline: none; border-color: var(--ink); background: var(--white); }

  .gx-summary { flex: 1 1 320px; min-width: 0; position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; }
  .gx-summary-box { background: var(--surface-1); color: var(--paper); padding: 32px; display: flex; flex-direction: column; gap: 22px; }
  .gx-summary-label { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #a8a8a8; }
  .gx-summary-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 1px solid #262626; padding-bottom: 22px; }
  .gx-name { font-family: var(--font-display); font-weight: 800; font-size: 16px; text-transform: uppercase; line-height: 1.2; }
  .gx-total { font-family: var(--font-display); font-weight: 900; font-size: 56px; line-height: 0.9; letter-spacing: -0.03em; color: var(--neon); }
  .gx-summary dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 12px 16px; font-size: 14px; }
  .gx-summary dt { color: #a8a8a8; }
  .gx-summary dd { margin: 0; }
  .gx-buy {
    height: 60px; background: var(--neon); color: #0a0a0a; border: 0; cursor: pointer;
    font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; transition: background 0.15s;
  }
  .gx-buy:hover { background: var(--neon); box-shadow: 0 8px 26px rgba(212,255,0,0.35); }
  .gx-buy:disabled { opacity: 0.7; cursor: progress; }
  .gx-buy:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
  .gx-error { margin: 0; font-size: 13px; line-height: 1.5; color: #ff8a80; }
  .gx-error a { color: var(--paper); text-decoration: underline; }
  .gx-summary-note { margin: 0; padding: 0 4px; font-size: 13px; line-height: 1.5; color: var(--grey-700); }

  @media (max-width: 900px) { .gx-summary { position: static; } }
  @media (max-width: 860px) {
    .gx-hero { padding: 28px 20px 64px; }
    .gx-crumbs { margin-bottom: 36px; }
    .gx-hero-grid { gap: 40px; }
    .gx-checkout { padding: 48px 20px 72px; gap: 32px; }
    .gx-card { padding: 22px; }
    .gx-wordmark { height: 24px; }
    .gx-chip { width: 34px; height: 24px; }
    .gx-amounts { gap: 4px 20px; }
  }

  /* ─── TEAM ORDERS LANDING (/team-orders, 16 Oct 2026) ───
     Colours come from --tm-* tokens: light by default, flipped inside any
     .flip-dark (the whole <main> on /team-orders, single sections on
     /team-orders-two). Neon is the single accent. Reuses the gift card page's
     .gx-display / .gx-outline / .gx-eyebrow / .gx-crumbs.
     Shape rule: buttons and inputs 2px radius, tiles and photos 4px. */
  .tm {
    --tm-pad: 60px;
    --tm-fg: var(--ink); --tm-muted: var(--grey-700); --tm-faint: var(--grey-500); --tm-line: rgba(0,0,0,0.1);
    --tm-surface: var(--white); --tm-field-bg: var(--paper); --tm-field-border: rgba(0,0,0,0.2); --tm-label: var(--grey-700);
    --tm-accent-text: var(--ink); --tm-accent-line: var(--neon); --tm-ghost: rgba(0,0,0,0.3); --tm-ghost-hover: rgba(0,0,0,0.05);
    --tm-stripe: rgba(0,0,0,0.035); --tm-error: #b3261e; --tm-placeholder: #6b6d70; --tm-eyebrow: var(--grey-500);
    overflow: hidden;
  }
  .tm.flip-dark, .tm .flip-dark {
    --tm-fg: var(--paper); --tm-muted: #b8b8b8; --tm-faint: #8f8f8f; --tm-line: rgba(255,255,255,0.1);
    --tm-surface: var(--surface-2); --tm-field-bg: var(--surface-1); --tm-field-border: rgba(255,255,255,0.2); --tm-label: #d0d0d0;
    --tm-accent-text: var(--neon); --tm-accent-line: var(--neon); --tm-ghost: rgba(255,255,255,0.3); --tm-ghost-hover: rgba(255,255,255,0.06);
    --tm-stripe: rgba(255,255,255,0.025); --tm-error: #ff8a80; --tm-placeholder: #8a8a8a; --tm-eyebrow: #a8a8a8;
  }
  .tm .gx-eyebrow { color: var(--tm-eyebrow); }
  /* Full-bleed sections, content held to 1440px */
  .tm-section { padding: 104px max(var(--tm-pad), calc(50% - 720px + var(--tm-pad))); }
  .tm-section + .tm-section, .tm-brands + .tm-section { border-top: 1px solid var(--tm-line); }
  .tm-alt { background: var(--grey-100); }
  .tm-h2 { font-size: clamp(34px, 4.4vw, 64px); line-height: 0.95; letter-spacing: -0.015em; color: var(--tm-fg); max-width: 18ch; margin-bottom: 52px; text-wrap: balance; }
  .tm h3 { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.01em; color: var(--tm-fg); }

  .tm-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px; border-radius: 2px;
    font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
    border: 1px solid transparent; cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.2s;
  }
  .tm-btn:active { transform: translateY(1px) scale(0.99); }
  .tm-btn:focus-visible { outline: 2px solid var(--tm-fg); outline-offset: 3px; }
  .tm-btn--neon { background: var(--neon); color: #0a0a0a; }
  .tm-btn--neon:hover { background: var(--neon); box-shadow: 0 8px 26px rgba(212,255,0,0.35); transform: translateY(-1px); }
  .tm-btn--ghost { color: var(--tm-fg); border-color: var(--tm-ghost); background: transparent; }
  .tm-btn--ghost:hover { border-color: var(--tm-fg); background: var(--tm-ghost-hover); }
  .tm-link { display: inline-block; align-self: flex-start; margin-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tm-accent-text); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
  .tm-link:hover { color: var(--tm-fg); }

  /* Hero */
  .tm-hero { padding: 40px max(var(--tm-pad), calc(50% - 720px + var(--tm-pad))) 88px; position: relative; }
  .tm-hero::before { content: ""; position: absolute; top: -20%; right: -10%; width: 70%; height: 120%; pointer-events: none;
    background: radial-gradient(ellipse 50% 45% at 60% 45%, rgba(255,255,255,0.04), transparent 70%); }
  .tm-hero .gx-crumbs { margin-bottom: 48px; position: relative; }
  .tm-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 40px; align-items: center; position: relative; }
  .tm-hero-copy { display: flex; flex-direction: column; gap: 26px; }
  .tm-hero-copy h1 { font-size: clamp(52px, 6.4vw, 96px); line-height: 0.9; letter-spacing: -0.02em; color: var(--tm-fg); }
  .tm-hero-copy p { max-width: 480px; font-size: 17px; line-height: 1.6; color: var(--tm-muted); }
  .tm-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
  .tm-hero-visual img { width: 100%; height: auto; border-radius: 4px;
    -webkit-mask-image: radial-gradient(ellipse 62% 64% at 50% 55%, #000 44%, transparent 80%);
            mask-image: radial-gradient(ellipse 62% 64% at 50% 55%, #000 44%, transparent 80%); transform: scale(1.12); }

  /* Benefits bento: 4 tiles, 3 columns, kit tile spans both rows */
  .tm-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(240px, auto); gap: 16px; }
  .tm-tile { position: relative; overflow: hidden; border-radius: 4px; padding: 36px; background: var(--tm-surface); border: 1px solid var(--tm-line);
    display: flex; flex-direction: column; gap: 12px; }
  .tm-tile p { font-size: 15px; line-height: 1.65; color: var(--tm-muted); max-width: 40ch; }
  .tm-tile--price { grid-column: span 2; background: var(--neon); border-color: var(--neon); }
  .tm-tile--price h3 { color: #0a0a0a; }
  .tm-tile--price p { color: #0a0a0a; }
  .tm-tile-big { position: absolute; right: 28px; bottom: 18px; font-size: clamp(56px, 7vw, 112px); line-height: 0.85; text-align: right;
    color: transparent; -webkit-text-stroke: 2px rgba(10,10,10,0.55); pointer-events: none; }
  .tm-tile--kit { grid-row: span 2; justify-content: flex-end;
    background: radial-gradient(ellipse 80% 55% at 50% 32%, rgba(255,255,255,0.06), transparent 70%), var(--tm-surface); }
  .tm-tile.flip-dark { background: radial-gradient(ellipse 80% 55% at 50% 32%, rgba(255,255,255,0.06), transparent 70%), var(--surface-1) !important; border-color: var(--surface-1); }
  .tm-tile--kit img { width: 92%; height: auto; margin: 8px auto auto; transform: rotate(-6deg); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    filter: drop-shadow(0 30px 40px rgba(0,0,0,0.55)); }
  .tm-tile--kit:hover img { transform: rotate(-2deg) translateY(-8px); }
  .tm-tile--comp { background: repeating-linear-gradient(135deg, var(--tm-stripe) 0 2px, transparent 2px 14px), var(--tm-surface); border-left: 3px solid var(--neon); }

  /* Brand panels: hover or focus widens a panel */
  .tm-brands { padding: 104px 0; border-top: 1px solid var(--tm-line); }
  .tm-brands-title, .tm-panels { padding-left: max(var(--tm-pad), calc(50% - 720px + var(--tm-pad))); padding-right: max(var(--tm-pad), calc(50% - 720px + var(--tm-pad))); }
  .tm-panels { display: flex; gap: 12px; height: 560px; }
  .tm-panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 4px; background: var(--surface-2);
    transition: flex-grow 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
  .tm-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) brightness(0.82);
    transition: filter 0.5s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
  .tm-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.15) 48%, transparent 70%); }
  .tm-panel-body { position: absolute; left: 28px; right: 28px; bottom: 26px; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
  .tm-panel-name { font-size: clamp(28px, 2.6vw, 40px); line-height: 0.95; color: var(--paper); }
  .tm-panel-what { font-size: 14px; line-height: 1.5; color: #d8d8d8; max-width: 30ch; }
  .tm-panel:hover, .tm-panel:focus-visible { flex-grow: 1.9; }
  .tm-panel:hover img, .tm-panel:focus-visible img { filter: none; transform: scale(1.03); }
  .tm-panel:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }

  /* How it works: 4 steps on a line that fills in neon as the section scrolls into view */
  .tm-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; position: relative; padding-top: 36px; }
  .tm-steps::before, .tm-steps::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
  .tm-steps::before { background: var(--tm-line); }
  .tm-steps::after { background: var(--tm-accent-line); transform-origin: left; }
  .tm-step { display: flex; flex-direction: column; gap: 12px; }
  .tm-step-num { font-size: 56px; line-height: 1; color: var(--tm-accent-text); }
  .tm-step p { font-size: 15px; line-height: 1.65; color: var(--tm-muted); }
  .tm-step a { color: var(--tm-fg); border-bottom: 1px solid var(--tm-accent-line); }
  @keyframes tm-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes tm-fill-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .tm-steps::after { animation: tm-fill linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
    }
  }

  /* People */
  .tm-people { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 560px); gap: 88px; justify-content: center; align-items: center; }
  .tm-people-photo img { border-radius: 4px; aspect-ratio: 4 / 5; object-fit: cover; height: auto; }
  .tm-people-photo figcaption { margin-top: 14px; font-size: 13px; color: var(--tm-faint); }
  .tm-people-copy { display: flex; flex-direction: column; gap: 22px; }
  .tm-people-copy .tm-h2 { margin-bottom: 0; }
  .tm-people-copy p { font-size: 17px; line-height: 1.7; color: var(--tm-muted); max-width: 46ch; }

  /* FAQ: heading left, questions right */
  .tm-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 64px; align-items: start; }
  .tm-faq .tm-h2 { position: sticky; top: 120px; margin-bottom: 0; }
  .tm-faq-list { border-top: 1px solid var(--grey-300); }
  .tm .faq-question { font-size: 16px; padding: 24px 4px; min-height: 64px; color: var(--tm-fg); }
  .tm .faq-answer-inner { font-size: 15px; color: var(--tm-muted); }

  /* Enquiry */
  .tm-enquire { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; align-items: start; }
  .tm-enquire-copy { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 120px; }
  .tm-enquire-copy .tm-h2 { margin-bottom: 0; }
  .tm-enquire-copy p { font-size: 17px; line-height: 1.7; color: var(--tm-muted); max-width: 40ch; }
  .tm-direct { display: grid; gap: 14px; margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--tm-line); }
  .tm-direct dt { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tm-faint); margin-bottom: 2px; }
  .tm-direct dd { font-size: 16px; color: var(--tm-fg); }
  .tm-direct a:hover { color: var(--tm-accent-text); }

  .tm-form { background: var(--tm-surface); border: 1px solid var(--tm-line); border-radius: 4px; padding: 44px; display: flex; flex-direction: column; gap: 22px; }
  .tm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .tm-field { display: flex; flex-direction: column; gap: 8px; border: 0; min-width: 0; }
  .tm-field label, .tm-field legend { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tm-label); }
  .tm-optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--tm-faint); }
  .tm-field input, .tm-field select, .tm-field textarea {
    width: 100%; min-height: 52px; padding: 14px 16px; border-radius: 2px; border: 1px solid var(--tm-field-border); background: var(--tm-field-bg);
    color: var(--tm-fg); font-family: var(--font-body); font-size: 16px; transition: border-color 0.15s, box-shadow 0.15s;
  }
  .tm-field textarea { resize: vertical; min-height: 110px; }
  .tm-field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 44px;
    background-image: linear-gradient(45deg, transparent 50%, var(--tm-accent-line) 50%), linear-gradient(135deg, var(--tm-accent-line) 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
  .tm-field select option { background: var(--tm-surface); color: var(--tm-fg); }
  .tm-field input::placeholder, .tm-field textarea::placeholder { color: var(--tm-placeholder); }
  .tm-field input:focus, .tm-field select:focus, .tm-field textarea:focus { outline: none; border-color: var(--tm-accent-line); box-shadow: 0 0 0 2px var(--neon); }
  .tm-field.is-invalid input, .tm-field.is-invalid select { border-color: var(--tm-error); }
  .tm-field.is-invalid label { color: var(--tm-error); }
  .tm-choices { padding: 0; }
  .tm-choices legend { margin-bottom: 10px; }
  .tm-choices label { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tm-fg); cursor: pointer; }
  .tm-choices input { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: var(--neon); flex-shrink: 0; }
  .tm-form-error { margin: 0; font-size: 14px; color: var(--tm-error); }
  .tm-form-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 4px; }
  .tm-form-note { font-size: 13px; color: var(--tm-faint); max-width: 30ch; }
  .tm .form-status { font-size: 15px; }

  /* Hero entrance (load) */
  @keyframes tm-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: no-preference) {
    .tm-in { animation: tm-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
    .tm-in-2 { animation-delay: 0.08s; }
    .tm-in-3 { animation-delay: 0.16s; }
    .tm-in-4 { animation-delay: 0.24s; }
  }
  @media (prefers-reduced-motion: reduce) {
    .tm .reveal { opacity: 1; transform: none; transition: none; }
    .tm-panel, .tm-panel img, .tm-tile--kit img { transition: none; }
  }

  @media (max-width: 1080px) {
    .tm-bento { grid-template-columns: 1fr 1fr; }
    .tm-tile--price { grid-column: 1 / -1; }
    .tm-steps { grid-template-columns: 1fr 1fr; row-gap: 48px; }
    .tm-people, .tm-faq, .tm-enquire { grid-template-columns: 1fr; gap: 48px; }
    .tm-people-photo { max-width: 460px; }
    .tm-faq .tm-h2, .tm-enquire-copy { position: static; }
  }
  @media (max-width: 860px) {
    .tm { --tm-pad: 20px; }
    .tm-hero { padding-top: 28px; padding-bottom: 64px; }
    .tm-hero .gx-crumbs { margin-bottom: 32px; }
    .tm-hero-grid { grid-template-columns: 1fr; gap: 28px; }
    .tm-section, .tm-brands { padding-top: 72px; padding-bottom: 72px; }
    .tm-h2 { margin-bottom: 36px; }
    .tm-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .tm-tile { padding: 28px; }
    .tm-tile--price { min-height: 260px; }
    .tm-tile--kit { grid-row: auto; }
    .tm-tile--kit img { width: 78%; }
    .tm-panels { flex-direction: column; height: auto; }
    .tm-panel { flex: none; height: 300px; }
    .tm-panel:hover, .tm-panel:focus-visible { flex-grow: 0; }
    .tm-steps { grid-template-columns: 1fr; gap: 36px; padding-top: 0; padding-left: 28px; }
    .tm-steps::before, .tm-steps::after { top: 0; bottom: 0; right: auto; width: 2px; height: auto; }
    .tm-steps::after { transform-origin: top; }
    .tm-step-num { font-size: 44px; }
    .tm-form { padding: 24px 20px; }
    .tm-form-row { grid-template-columns: 1fr; }
    .tm-hero-ctas .tm-btn { flex: 1 1 100%; }
  }
  @supports (animation-timeline: view()) {
    @media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
      .tm-steps::after { animation-name: tm-fill-v; animation-range: entry 10% cover 60%; }
    }
  }

  /* ─── TEAM ORDERS, COMBINED VARIANT (/team-orders-three, 16 Oct 2026) ───
     Layout ideas from a second mock-up on top of the .tm-* page: full-bleed hero
     photo with a badge, brand strip, hairline perk grid, chip toggles, flat form. */
  .tmx-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 620px; }
  .tmx-hero-copy { justify-content: center; padding: 40px 48px 88px max(var(--tm-pad), calc(50vw - 720px + var(--tm-pad))); }
  .tmx-hero-copy .gx-crumbs { margin-bottom: 22px; }
  .tmx-hero-copy h1 { font-size: clamp(52px, 6vw, 100px); }
  .tmx-hero-media { position: relative; min-height: 520px; background: var(--surface-1); overflow: hidden; margin-left: -1px; }
  .tmx-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; }
  .tmx-hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, var(--surface-1) 0%, var(--surface-1) 3%, rgba(14,14,14,0) 45%), linear-gradient(0deg, rgba(14,14,14,0.5) 0%, transparent 30%); }
  /* Dark card so "FREE" can be the true neon (neon on a light card is unreadable) */
  .tmx-badge { position: absolute; z-index: 2; right: clamp(16px, 3vw, 44px); bottom: 40px; margin: 0; background: rgba(14,14,14,0.86); color: var(--paper);
    padding: 18px 24px 20px; border: 1px solid rgba(255,255,255,0.14); border-top: 3px solid var(--neon); border-radius: 2px; display: flex; flex-direction: column; gap: 6px;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 18px 40px rgba(0,0,0,0.45); }
  .tmx-badge strong { font-family: var(--font-display); font-weight: 900; font-size: 34px; line-height: 1; text-transform: uppercase; color: var(--neon); }
  .tmx-badge span { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #d0d0d0; }

  /* Brand strip */
  .tmx-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 40px;
    padding: 30px max(var(--tm-pad), calc(50% - 720px + var(--tm-pad))); border-bottom: 1px solid var(--tm-line); background: var(--paper); }
  .tmx-strip-label { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tm-faint); }
  .tmx-strip-brand { font-size: clamp(20px, 2vw, 28px); letter-spacing: 0.03em; color: var(--tm-fg); transition: color 0.2s; }
  .tmx-strip-brand:hover { color: var(--tm-accent-text); }

  /* Perks: hairline grid */
  .tmx-perks-section .gx-eyebrow { margin-bottom: 18px; }
  .tmx-h2-tight { max-width: 20ch; }
  .tmx-perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--grey-300); border: 1px solid var(--grey-300); border-radius: 4px; overflow: hidden; }
  .tmx-perk { background: var(--white); padding: 36px 30px 40px; display: flex; flex-direction: column; gap: 12px; }
  .tmx-perk h3 { font-size: 17px; }
  .tmx-perk p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tm-muted); }
  .tmx-perk-big { font-size: clamp(34px, 3.2vw, 46px); line-height: 0.95; color: var(--tm-fg); margin-bottom: 4px; }
  .tmx-perk--dark .tmx-perk-big { color: var(--neon); }

  /* Range: light, header with a link */
  .tmx-range { background: var(--paper); }
  .tmx-range-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 48px;
    padding: 0 max(var(--tm-pad), calc(50% - 720px + var(--tm-pad))); }
  .tmx-range-head .tm-h2 { margin-bottom: 0; }
  .tmx-range-head .tm-link { margin-bottom: 6px; }

  /* Enquiry: flat form straight on the dark section */
  .tmx-enquire { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.5fr); }
  .tm-form.tmx-form { background: none; border: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; }
  .tmx-full { grid-column: 1 / -1; }
  .tmx-chip-group legend { margin-bottom: 12px; }
  .tmx-chips { display: flex; flex-wrap: wrap; gap: 10px; }
  .tm-field .tmx-chip { position: relative; text-transform: none; letter-spacing: 0; font-weight: 400; }
  .tmx-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .tmx-chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1px solid var(--tm-field-border); border-radius: 2px;
    font-size: 15px; font-weight: 500; color: var(--tm-fg); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
  .tmx-chip span::before { content: "+"; font-weight: 600; }
  .tmx-chip span:hover { border-color: var(--tm-fg); }
  .tmx-chip input:checked + span { background: var(--neon); border-color: var(--neon); color: #0a0a0a; font-weight: 600; }
  .tmx-chip input:checked + span::before { content: "\2713"; }
  .tmx-chip input:focus-visible + span { outline: 2px solid var(--neon); outline-offset: 3px; }
  .tmx-submit { width: 100%; min-height: 64px; font-size: 15px; }
  .tmx-form-note { margin-top: 14px; max-width: none; }

  @media (max-width: 1080px) {
    .tmx-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tmx-enquire { grid-template-columns: 1fr; }
    .tm-form.tmx-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 860px) {
    .tmx-hero { grid-template-columns: 1fr; min-height: 0; }
    .tmx-hero-copy { padding: 28px var(--tm-pad) 48px; }
    .tmx-hero-media { min-height: 340px; }
    .tmx-hero-media::before { background: linear-gradient(180deg, var(--surface-1) 0%, rgba(14,14,14,0) 30%); }
    .tmx-badge { bottom: 20px; padding: 14px 18px 16px; }
    .tmx-badge strong { font-size: 26px; }
    .tmx-strip { justify-content: flex-start; gap: 10px 24px; padding-top: 22px; padding-bottom: 22px; }
    .tmx-strip-label { flex-basis: 100%; }
    .tmx-perks, .tm-form.tmx-form { grid-template-columns: 1fr; }
  }


  /* Homepage team band as a cover banner (16 Oct 2026): photo across the left,
     faded into the dark panel the copy sits on (mirrors the gift card band below). */
  .team-orders--cover { position: relative; overflow: hidden; display: block; min-height: 560px; padding: 104px 60px; }
  .team-orders-photo { position: absolute; top: 0; left: 0; bottom: 0; width: 70%; height: 100%; object-fit: cover; object-position: 50% 52%; }
  .team-orders--cover::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(270deg, var(--surface-1) 0%, var(--surface-1) 30%, rgba(14,14,14,0.85) 40%, rgba(14,14,14,0.4) 55%, rgba(14,14,14,0) 75%); }
  .team-orders-copy { position: relative; z-index: 2; max-width: 520px; margin-left: auto; }
  .team-orders--cover .team-orders-sub { color: rgba(246,245,244,0.72); margin-top: 22px; }
  @media (max-width: 860px) {
    .team-orders--cover { min-height: 0; padding: 0 0 56px; }
    .team-orders-photo { position: relative; width: 100%; height: 280px; }
    .team-orders--cover::before { background: linear-gradient(180deg, rgba(14,14,14,0) 120px, var(--surface-1) 280px); }
    .team-orders-copy { padding: 0 20px; margin-top: -40px; margin-left: 0; max-width: none; }
  }

  /* Squad rates: retail vs squad price (/team-orders-three) */
  .tmx-squad { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); gap: 72px; align-items: center; }
  .tmx-squad-copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
  .tmx-squad-copy .tm-h2 { margin-bottom: 0; }
  .tmx-squad-copy p { font-size: 17px; line-height: 1.7; color: var(--tm-muted); max-width: 40ch; }
  .tmx-squad-table { width: 100%; border-collapse: collapse; }
  .tmx-squad-table thead th { padding: 0 0 16px; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tm-faint); }
  .tmx-squad-table thead th:nth-child(n+2), .tmx-squad-table td { text-align: right; }
  .tmx-squad-table tbody tr { border-top: 1px solid var(--tm-line); }
  .tmx-squad-table tbody tr:last-child { border-bottom: 1px solid var(--tm-line); }
  .tmx-squad-table tbody th, .tmx-squad-table td { padding: 26px 0; vertical-align: middle; }
  .tmx-squad-table tbody th { text-align: left; }
  .tmx-squad-table tbody th a { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .tmx-squad-table tbody th a:hover .tmx-squad-name { color: var(--neon); }
  .tmx-squad-name { font-size: clamp(22px, 2.2vw, 32px); line-height: 1; color: var(--tm-fg); transition: color 0.2s; }
  .tmx-squad-sub { font-size: 14px; color: var(--tm-muted); }
  .tmx-squad-retail { padding-left: 24px !important; font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 1.8vw, 24px); color: var(--tm-faint); white-space: nowrap; }
  .tmx-squad-rate { padding-left: 24px !important; font-family: var(--font-display); font-weight: 900; font-size: clamp(16px, 1.6vw, 22px); text-transform: uppercase; color: var(--neon); white-space: nowrap; }
  .tmx-squad-table tr.has-rate .tmx-squad-retail { text-decoration: line-through; text-decoration-thickness: 2px; }
  .tmx-squad-note { margin-top: 18px; font-size: 13px; color: var(--tm-faint); }

  @media (max-width: 1080px) { .tmx-squad { grid-template-columns: 1fr; gap: 40px; } }
  @media (max-width: 640px) {
    .tmx-squad-table thead { display: none; }
    .tmx-squad-table tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 22px 0; }
    .tmx-squad-table tbody th { grid-column: 1 / -1; padding: 0; }
    .tmx-squad-table td { padding: 0 !important; }
    .tmx-squad-retail { text-align: left !important; }
  }

  /* ─── ONE NEON (16 Oct 2026) ───
     Every green on the site is #d4ff00, the "Shop Now" button colour. No darker or
     lighter greens and no see-through neon fills (they read as olive). Small text on
     light backgrounds is ink with a neon underline or fill instead. Glows around neon
     type are the same neon. */
  /* Neon buttons: hover lifts with a neon glow instead of shifting to a darker green */
  .flip-dark .btn-primary:hover, .neon-l2 .brand-feature-content .btn-primary:hover, .about-copy .btn-primary:hover,
  .btn-neon:hover, .neon-l2 .email-submit:hover, .flip-dark .email-submit:hover {
    background: var(--neon); color: #0a0a0a; box-shadow: 0 8px 26px rgba(212,255,0,0.35); transform: translateY(-1px);
  }
  /* Hero "NZ owned" card: dark, so the NZ can be the true neon */
  .flip-dark .hero-stat { background: rgba(14,14,14,0.86); border: 1px solid rgba(255,255,255,0.14); border-top: 3px solid var(--neon);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 18px 40px rgba(0,0,0,0.45); }
  .flip-dark .hero-stat .hero-stat-label { color: #d0d0d0; }
  /* FAQ open icon is a neon disc: its minus sign is ink in both themes */
  .faq-item.open .faq-question .icon::before, .faq-item.open .faq-question .icon::after { background: #0a0a0a; }
  /* Links that used a dark green on light: ink text, neon underline */
  .faq-answer-inner a, a.link-strong, .filter-clear, .size-guide-link, .earn-row-value { color: var(--ink); }
  .faq-answer-inner a { border-bottom: 2px solid var(--neon); }
  .flip-dark .faq-answer-inner a, .flip-dark a.link-strong, .flip-dark .filter-clear, .flip-dark .size-guide-link, .flip-dark .earn-row-value { color: var(--neon); }
  .tm-link { border-bottom: 2px solid var(--neon); }
  .tm-link:hover { border-bottom-color: currentColor; }
  /* Gift card visuals: the amount is the neon (as on the gift card page's card) */
  .gc-card-amount-display { color: var(--neon); }

  /* ─── TEAM ORDERS, PARTNER GYM LAYOUT (/team-orders, 22 Oct 2026) ───
     Adds the award line, spare-pair nudge, partner gym section and Altair facts
     to the .tm / .tmx page. One neon: neon text only on dark, ink plus a neon fill on light. */
  .tmp-award { display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; color: var(--neon); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
  .tmp-award svg { flex-shrink: 0; }
  .tmp-award span { color: #d0d0d0; }
  .tmp-award strong { color: var(--neon); font-weight: 700; margin-right: 6px; }

  .tmp-nudge { margin-top: 24px; padding: 18px 22px; border-left: 3px solid var(--neon); background: rgba(255,255,255,0.04); font-size: 15px; line-height: 1.6; color: var(--tm-muted); }
  .tmp-nudge strong { display: block; margin-bottom: 4px; font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--neon); }

  .tmx-perk p a { color: var(--ink); border-bottom: 2px solid var(--neon); white-space: nowrap; }

  .tmp-partner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 72px; align-items: center; background: var(--paper); }
  .tmp-partner-copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
  .tmp-partner-copy .tm-h2 { margin-bottom: 0; }
  .tmp-partner-copy p { font-size: 17px; line-height: 1.7; color: var(--tm-muted); max-width: 42ch; }
  .tmp-mark { background: linear-gradient(transparent 58%, var(--neon) 58%, var(--neon) 92%, transparent 92%); padding: 0 0.06em; }
  .tmp-partner-cards { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1px; background: var(--grey-300); border: 1px solid var(--grey-300); border-radius: 4px; overflow: hidden; }
  .tmp-card { background: var(--white); padding: 36px 32px 40px; display: flex; flex-direction: column; gap: 20px; }
  .tmp-card--dark { background: var(--surface-1); }
  .tmp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
  .tmp-list li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.6; color: var(--tm-muted); }
  .tmp-list li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 12px; height: 12px; border-radius: 50%; background: var(--neon); box-shadow: inset 0 0 0 3px var(--tm-surface); border: 1px solid var(--neon); }
  .tmp-card:not(.tmp-card--dark) .tmp-list li::before { box-shadow: none; border-color: var(--ink); }
  .tmp-list strong { color: var(--tm-fg); font-weight: 600; }
  .tmp-card-foot { margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--tm-line); font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--neon); }

  .tmp-facts { list-style: none; margin: 0 0 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--grey-300);
    border-top: 1px solid var(--grey-300); border-bottom: 1px solid var(--grey-300);
    padding: 0; margin-left: max(var(--tm-pad), calc(50% - 720px + var(--tm-pad))); margin-right: max(var(--tm-pad), calc(50% - 720px + var(--tm-pad))); }
  .tmp-facts li { background: var(--paper); padding: 22px 20px 22px 0; display: flex; flex-direction: column; gap: 4px; }
  .tmp-facts li + li { padding-left: 24px; }
  .tmp-facts strong { font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.05; text-transform: uppercase; color: var(--ink); }
  .tmp-facts li:first-child strong { background: linear-gradient(transparent 60%, var(--neon) 60%); align-self: flex-start; }
  .tmp-facts span { font-size: 14px; color: var(--grey-700); }

  .tm-form.tmx-form .tmp-span-2 { grid-column: span 2; }

  @media (max-width: 1080px) {
    .tmp-partner { grid-template-columns: 1fr; gap: 44px; }
    .tmp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tmp-facts li:nth-child(3) { padding-left: 0; }
  }
  @media (max-width: 860px) {
    .tmp-partner-cards { grid-template-columns: 1fr; }
    .tmp-card { padding: 28px 24px 32px; }
    .tm-form.tmx-form .tmp-span-2 { grid-column: auto; }
    .tmp-award { font-size: 12px; }
  }
  @media (max-width: 520px) {
    .tmp-facts { grid-template-columns: 1fr; }
    .tmp-facts li, .tmp-facts li + li { padding-left: 0; }
  }