/* ===========================================================================
   NZSS 2.0 — REDESIGN LAYER
   Modern, confident, current. Loaded ONLY on the redesign clone.
   ========================================================================= */

/* ---------- 1. NEW DESIGN TOKENS (override the existing palette) -------- */
:root {
    /* Foundation */
    --r2-ink:        #0A1424;    /* deep midnight, near-black slight blue */
    --r2-ink-2:      #14213D;    /* secondary ink */
    --r2-ink-3:      #2B3957;    /* tertiary ink */
    --r2-paper:      #FAF8F3;    /* warm cream off-white */
    --r2-paper-2:    #F1ECDF;    /* darker warm */
    --r2-paper-3:    #E8E1D1;    /* warmer still */
    --r2-line:       #DDD4BF;
    --r2-line-2:     #C7BD9F;

    /* Accents */
    --r2-coral:      #FF6B47;    /* electric coral, primary CTA */
    --r2-coral-2:    #E54E2A;    /* hover */
    --r2-coral-soft: rgba(255,107,71,0.10);
    --r2-gold:       #D4A437;    /* warm gold for premium markers */
    --r2-gold-soft:  rgba(212,164,55,0.12);
    --r2-green:      #2D7D5F;    /* deeper forest green, trust/eco */
    --r2-green-soft: rgba(45,125,95,0.10);
    --r2-blue:       #3B82F6;    /* occasional accent */

    /* Text */
    --r2-text:       #0A1424;
    --r2-text-2:     #4A5568;
    --r2-text-3:     #7B8492;
    --r2-text-on-ink: #F1ECDF;

    /* Type */
    --r2-display:    'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --r2-body:       'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --r2-serif:      'Instrument Serif', Georgia, serif;
    --r2-mono:       'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

    /* Radius */
    --r2-r-xs:       4px;
    --r2-r-sm:       8px;
    --r2-r-md:       14px;
    --r2-r-lg:       24px;
    --r2-r-xl:       36px;
    --r2-r-pill:     999px;

    /* Spacing */
    --r2-gutter:     clamp(20px, 4vw, 64px);
    --r2-max:        1440px;

    /* Shadows */
    --r2-shadow-sm:  0 2px 8px rgba(10, 20, 36, 0.04);
    --r2-shadow:     0 8px 32px rgba(10, 20, 36, 0.08);
    --r2-shadow-lg:  0 24px 60px rgba(10, 20, 36, 0.14);
    --r2-shadow-xl:  0 40px 100px rgba(10, 20, 36, 0.20);
    --r2-shadow-ink: 0 24px 60px rgba(10, 20, 36, 0.45);
}

/* ---------- 2. GLOBAL OVERRIDES — apply tokens to body & basic elements - */
body {
    background: var(--r2-paper);
    color: var(--r2-text);
    font-family: var(--r2-body);
    font-feature-settings: 'ss01', 'cv05';
}

/* Container for new sections */
.r2-container {
    width: 100%;
    max-width: var(--r2-max);
    margin: 0 auto;
    padding-left: var(--r2-gutter);
    padding-right: var(--r2-gutter);
}
.r2-container--wide {
    max-width: 1640px;
}
.r2-container--narrow {
    max-width: 980px;
}

/* Small utility: gradient text */
.r2-grad {
    background: linear-gradient(120deg, var(--r2-ink) 0%, var(--r2-coral) 60%, var(--r2-gold) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

/* Eyebrow label — used everywhere */
.r2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--r2-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--r2-text-2);
}
.r2-eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

/* ---------- 3. UTILITY STRIP (very top, dark, rotating) ----------------- */
.r2-utility {
    background: var(--r2-ink);
    color: var(--r2-paper);
    font-size: 12px;
    font-weight: 500;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.r2-utility__inner {
    display: flex;
    gap: 48px;
    align-items: center;
    white-space: nowrap;
}
.r2-utility__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0.85;
    font-feature-settings: 'tnum';
}
.r2-utility__item svg {
    width: 14px;
    height: 14px;
    color: var(--r2-coral);
}
.r2-utility__item--gold svg { color: var(--r2-gold); }
.r2-utility__item--green svg { color: #6BCF9E; }

/* ---------- 4. STICKY HEADER (replaces existing) ------------------------- */
.r2-header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: var(--r2-paper);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.r2-header.is-scrolled {
    background: rgba(250, 248, 243, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-color: var(--r2-line);
    box-shadow: var(--r2-shadow-sm);
}
.r2-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    height: 76px;
    padding-left: var(--r2-gutter);
    padding-right: var(--r2-gutter);
    max-width: var(--r2-max);
    margin: 0 auto;
    transition: height .3s ease;
}
.r2-header.is-scrolled .r2-header__inner { height: 64px; }

.r2-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--r2-ink);
    text-decoration: none;
    font-family: var(--r2-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.02em;
}
.r2-logo svg, .r2-logo img { height: 36px; width: auto; }

.r2-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
}
.r2-nav__link {
    color: var(--r2-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    padding: 8px 0;
    position: relative;
    transition: color .2s ease;
}
.r2-nav__link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 100%;
    height: 1px;
    background: var(--r2-coral);
    transition: right .25s ease;
}
.r2-nav__link:hover { color: var(--r2-coral); }
.r2-nav__link:hover::after { right: 0; }

.r2-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.r2-iconbtn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--r2-r-pill);
    color: var(--r2-ink);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .2s ease;
    position: relative;
}
.r2-iconbtn:hover { background: var(--r2-paper-2); }
.r2-iconbtn svg { width: 18px; height: 18px; }
.r2-iconbtn__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: var(--r2-coral);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    padding: 0 4px;
}

@media (max-width: 880px) {
    .r2-nav { display: none; }
    .r2-header__inner { grid-template-columns: auto 1fr auto; height: 60px; }
    .r2-header.is-scrolled .r2-header__inner { height: 56px; }
}

/* ---------- 5. HERO — full bleed editorial split ------------------------ */
.r2-hero {
    position: relative;
    background: var(--r2-paper);
    overflow: hidden;
    padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 9vw, 120px);
}
/* gradient mesh background */
.r2-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(60% 50% at 80% 20%, rgba(255, 107, 71, 0.12), transparent 60%),
      radial-gradient(50% 60% at 10% 90%, rgba(212, 164, 55, 0.10), transparent 60%),
      radial-gradient(40% 40% at 50% 50%, rgba(45, 125, 95, 0.05), transparent 60%);
    pointer-events: none;
}
.r2-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
    max-width: var(--r2-max);
    margin: 0 auto;
    padding-left: var(--r2-gutter);
    padding-right: var(--r2-gutter);
}
.r2-hero__title {
    font-family: var(--r2-display);
    font-size: clamp(48px, 8vw, 124px);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.04em;
    color: var(--r2-ink);
    margin: 24px 0 0;
}
.r2-hero__title em {
    font-family: var(--r2-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--r2-coral);
    letter-spacing: -0.01em;
}
.r2-hero__title .r2-hero__word {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px);
    animation: r2-rise .85s cubic-bezier(.2,.8,.2,1) forwards;
}
.r2-hero__title .r2-hero__word:nth-child(1) { animation-delay: .05s; }
.r2-hero__title .r2-hero__word:nth-child(2) { animation-delay: .15s; }
.r2-hero__title .r2-hero__word:nth-child(3) { animation-delay: .25s; }
.r2-hero__title .r2-hero__word:nth-child(4) { animation-delay: .35s; }
.r2-hero__title .r2-hero__word:nth-child(5) { animation-delay: .45s; }
@keyframes r2-rise {
    to { opacity: 1; transform: none; }
}

.r2-hero__lede {
    margin: 32px 0 0;
    max-width: 52ch;
    font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.55;
    color: var(--r2-text-2);
    font-weight: 400;
}

.r2-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 40px 0 0;
}
.r2-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 28px;
    border-radius: var(--r2-r-pill);
    font-family: var(--r2-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .25s ease;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}
.r2-btn--coral {
    background: var(--r2-coral);
    color: #FAF8F3;
    box-shadow: 0 10px 24px rgba(255, 107, 71, 0.35);
}
.r2-btn--coral:hover {
    background: var(--r2-coral-2);
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(255, 107, 71, 0.45);
}
.r2-btn--ink {
    background: var(--r2-ink);
    color: var(--r2-paper);
}
.r2-btn--ink:hover { background: var(--r2-ink-2); transform: translateY(-2px); }
.r2-btn--ghost {
    background: transparent;
    color: var(--r2-ink);
    border: 1.5px solid var(--r2-ink);
}
.r2-btn--ghost:hover {
    background: var(--r2-ink);
    color: var(--r2-paper);
    transform: translateY(-2px);
}
.r2-btn svg { width: 16px; height: 16px; }

.r2-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin: 56px 0 0;
    padding-top: 32px;
    border-top: 1px solid var(--r2-line);
}
.r2-hero__metaitem {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.r2-hero__metanum {
    font-family: var(--r2-display);
    font-size: 28px;
    font-weight: 600;
    color: var(--r2-ink);
    letter-spacing: -0.02em;
    font-feature-settings: 'tnum';
}
.r2-hero__metanum sup {
    font-size: 14px;
    color: var(--r2-coral);
    vertical-align: super;
    margin-left: 2px;
}
.r2-hero__metalabel {
    font-size: 13px;
    color: var(--r2-text-2);
}

/* Hero visual side */
.r2-hero__visual {
    position: relative;
    aspect-ratio: 1 / 1.05;
    max-height: 720px;
}
.r2-hero__cardbg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--r2-ink) 0%, var(--r2-ink-2) 100%);
    border-radius: var(--r2-r-xl);
    overflow: hidden;
    box-shadow: var(--r2-shadow-xl);
}
.r2-hero__cardbg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(60% 40% at 30% 0%, rgba(255, 107, 71, 0.35), transparent 60%),
      radial-gradient(50% 50% at 100% 100%, rgba(212, 164, 55, 0.25), transparent 60%);
}
.r2-hero__cardbg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(250, 248, 243, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(250, 248, 243, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(closest-side at 50% 50%, black 50%, transparent 100%);
    -webkit-mask-image: radial-gradient(closest-side at 50% 50%, black 50%, transparent 100%);
}
.r2-hero__device {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.r2-hero__device img {
    max-width: 70%;
    max-height: 85%;
    object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.4));
    animation: r2-float 8s ease-in-out infinite;
}
@keyframes r2-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
.r2-hero__price {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    color: var(--r2-paper);
}
.r2-hero__price-eyebrow {
    font-family: var(--r2-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(250, 248, 243, 0.65);
    margin: 0 0 4px;
}
.r2-hero__price-name {
    font-family: var(--r2-display);
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}
.r2-hero__price-tag {
    text-align: right;
}
.r2-hero__price-was {
    font-size: 13px;
    color: rgba(250, 248, 243, 0.55);
    text-decoration: line-through;
    margin: 0 0 2px;
}
.r2-hero__price-now {
    font-family: var(--r2-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--r2-coral);
    margin: 0;
    font-feature-settings: 'tnum';
    letter-spacing: -0.02em;
}

/* Floating spec callouts on hero card */
.r2-hero__callout {
    position: absolute;
    background: rgba(250, 248, 243, 0.10);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(250, 248, 243, 0.18);
    border-radius: var(--r2-r-md);
    padding: 10px 14px;
    color: var(--r2-paper);
    font-size: 12px;
    line-height: 1.4;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    animation: r2-float-soft 7s ease-in-out infinite;
}
.r2-hero__callout strong {
    display: block;
    font-family: var(--r2-display);
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 2px;
    color: var(--r2-coral);
}
.r2-hero__callout span { color: rgba(250, 248, 243, 0.75); font-size: 11px; }
.r2-hero__callout--a { top: 8%; left: -8%; animation-delay: 0s; }
.r2-hero__callout--b { top: 32%; right: -10%; animation-delay: 1.4s; }
.r2-hero__callout--c { bottom: 18%; left: -8%; animation-delay: 2.8s; }
@keyframes r2-float-soft {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

@media (max-width: 980px) {
    .r2-hero__grid { grid-template-columns: 1fr; gap: 48px; }
    .r2-hero__visual { aspect-ratio: 1 / 1; max-width: 520px; margin: 0 auto; }
    .r2-hero__callout--a { left: 4%; }
    .r2-hero__callout--b { right: 4%; }
    .r2-hero__callout--c { left: 4%; }
}
@media (max-width: 600px) {
    .r2-hero__callout { display: none; }
}

/* ---------- 6. MARQUEE — auto-scrolling brand strip --------------------- */
.r2-marquee {
    background: var(--r2-ink);
    color: var(--r2-paper);
    padding: 32px 0;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.r2-marquee__track {
    display: flex;
    gap: 64px;
    width: max-content;
    animation: r2-scroll 45s linear infinite;
    align-items: center;
}
@keyframes r2-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.r2-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--r2-display);
    font-size: 28px;
    font-weight: 500;
    color: rgba(250, 248, 243, 0.65);
    letter-spacing: -0.02em;
    white-space: nowrap;
    transition: color .25s ease;
}
.r2-marquee__item:hover { color: var(--r2-coral); }
.r2-marquee__item::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(250, 248, 243, 0.25);
    margin-left: 64px;
}
.r2-marquee__item:last-child::after { display: none; }
@media (prefers-reduced-motion: reduce) {
    .r2-marquee__track { animation: none; }
}

/* ---------- 7. "WHY REFURBISHED" — bento grid --------------------------- */
.r2-why {
    padding: clamp(72px, 9vw, 140px) 0;
    background: var(--r2-paper);
}
.r2-why__head {
    max-width: var(--r2-max);
    margin: 0 auto;
    padding: 0 var(--r2-gutter);
    margin-bottom: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: end;
}
.r2-why__title {
    font-family: var(--r2-display);
    font-size: clamp(36px, 5vw, 72px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--r2-ink);
    margin: 12px 0 0;
}
.r2-why__title em {
    font-family: var(--r2-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--r2-coral);
}
.r2-why__sub {
    font-size: 17px;
    line-height: 1.55;
    color: var(--r2-text-2);
    margin: 0;
}

.r2-bento {
    max-width: var(--r2-max);
    margin: 0 auto;
    padding: 0 var(--r2-gutter);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(120px, auto);
    gap: 20px;
}
.r2-tile {
    border-radius: var(--r2-r-lg);
    padding: 32px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.r2-tile:hover { transform: translateY(-4px); box-shadow: var(--r2-shadow-lg); }
.r2-tile__num {
    font-family: var(--r2-display);
    font-size: clamp(54px, 7vw, 96px);
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--r2-ink);
    font-feature-settings: 'tnum';
}
.r2-tile__num sup {
    font-size: 0.45em;
    font-weight: 500;
    color: var(--r2-coral);
    vertical-align: super;
    margin-left: 4px;
}
.r2-tile__label {
    font-family: var(--r2-display);
    font-size: 18px;
    font-weight: 500;
    color: var(--r2-text);
    margin: 16px 0 0;
}
.r2-tile__sub {
    font-size: 13px;
    color: var(--r2-text-2);
    margin: 4px 0 0;
    line-height: 1.5;
}

/* Bento layout — 6 cols, varied tile sizes */
.r2-tile--a { grid-column: span 2; grid-row: span 2; background: var(--r2-paper-2); }
.r2-tile--b { grid-column: span 2; grid-row: span 2; background: var(--r2-ink); color: var(--r2-paper); }
.r2-tile--b .r2-tile__num { color: var(--r2-paper); }
.r2-tile--b .r2-tile__label { color: var(--r2-paper); }
.r2-tile--b .r2-tile__sub { color: rgba(250, 248, 243, 0.65); }
.r2-tile--c { grid-column: span 2; grid-row: span 2; background: var(--r2-coral); color: #fff; }
.r2-tile--c .r2-tile__num { color: #fff; }
.r2-tile--c .r2-tile__num sup { color: rgba(255,255,255,0.7); }
.r2-tile--c .r2-tile__label { color: #fff; }
.r2-tile--c .r2-tile__sub { color: rgba(255,255,255,0.85); }
.r2-tile--d { grid-column: span 3; background: var(--r2-paper-2); }
.r2-tile--e { grid-column: span 3; background: var(--r2-paper-3); }
.r2-tile--f { grid-column: span 6; background: linear-gradient(135deg, var(--r2-ink-2), var(--r2-ink)); color: var(--r2-paper); padding: 56px 64px; }
.r2-tile--f .r2-tile__label { color: var(--r2-paper); font-size: clamp(28px, 3vw, 44px); line-height: 1.1; margin: 0; max-width: 30ch; font-weight: 600; letter-spacing: -0.02em; }
.r2-tile--f .r2-tile__sub { color: rgba(250, 248, 243, 0.65); font-size: 15px; max-width: 60ch; margin-top: 20px; }

.r2-tile__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r2-r-md);
    background: rgba(0,0,0,0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--r2-ink);
    margin-bottom: auto;
}
.r2-tile--b .r2-tile__icon { background: rgba(255,255,255,0.08); color: var(--r2-paper); }
.r2-tile--c .r2-tile__icon { background: rgba(255,255,255,0.15); color: #fff; }
.r2-tile--f .r2-tile__icon { background: rgba(255,255,255,0.08); color: var(--r2-coral); }
.r2-tile__icon svg { width: 22px; height: 22px; }

@media (max-width: 980px) {
    .r2-why__head { grid-template-columns: 1fr; gap: 24px; }
    .r2-bento { grid-template-columns: repeat(2, 1fr); }
    .r2-tile--a, .r2-tile--b, .r2-tile--c, .r2-tile--d, .r2-tile--e { grid-column: span 1; grid-row: auto; }
    .r2-tile--f { grid-column: span 2; padding: 40px; }
}
@media (max-width: 600px) {
    .r2-bento { grid-template-columns: 1fr; }
    .r2-tile--f { grid-column: span 1; padding: 32px; }
}

/* ---------- 8. FEATURED PRODUCT HERO (showstopper) ---------------------- */
.r2-featured {
    padding: clamp(80px, 10vw, 160px) 0;
    background: var(--r2-ink);
    color: var(--r2-paper);
    position: relative;
    overflow: hidden;
}
.r2-featured::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(40% 60% at 80% 20%, rgba(255, 107, 71, 0.18), transparent 50%),
      radial-gradient(40% 60% at 10% 90%, rgba(212, 164, 55, 0.12), transparent 50%);
}
.r2-featured__inner {
    position: relative;
    max-width: var(--r2-max);
    margin: 0 auto;
    padding: 0 var(--r2-gutter);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.r2-featured__copy { order: 0; }
.r2-featured__eyebrow { color: var(--r2-coral); font-family: var(--r2-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; }
.r2-featured__eyebrow::before { content: '★ '; }
.r2-featured__title {
    font-family: var(--r2-display);
    font-size: clamp(40px, 5.5vw, 84px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--r2-paper);
    margin: 16px 0 0;
}
.r2-featured__title em {
    font-family: var(--r2-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--r2-coral);
}
.r2-featured__desc {
    margin: 24px 0 0;
    max-width: 48ch;
    color: rgba(250, 248, 243, 0.75);
    font-size: 17px;
    line-height: 1.55;
}
.r2-featured__specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 32px;
    margin: 32px 0 0;
    padding-top: 24px;
    border-top: 1px solid rgba(250, 248, 243, 0.12);
}
.r2-featured__spec {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.r2-featured__spec-label {
    font-family: var(--r2-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(250, 248, 243, 0.5);
}
.r2-featured__spec-value {
    font-family: var(--r2-display);
    font-size: 18px;
    font-weight: 500;
    color: var(--r2-paper);
    letter-spacing: -0.005em;
}
.r2-featured__pricebar {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 40px 0 0;
    flex-wrap: wrap;
}
.r2-featured__price {
    font-family: var(--r2-display);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 700;
    color: var(--r2-coral);
    letter-spacing: -0.025em;
    font-feature-settings: 'tnum';
    line-height: 1;
}
.r2-featured__price-was {
    color: rgba(250, 248, 243, 0.5);
    text-decoration: line-through;
    font-size: 18px;
    font-feature-settings: 'tnum';
}
.r2-featured__visual {
    position: relative;
    aspect-ratio: 4/5;
}
.r2-featured__visual-bg {
    position: absolute;
    inset: 0;
    border-radius: var(--r2-r-xl);
    background: linear-gradient(135deg, rgba(250, 248, 243, 0.04), rgba(250, 248, 243, 0.01));
    border: 1px solid rgba(250, 248, 243, 0.08);
    overflow: hidden;
}
.r2-featured__visual-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(250, 248, 243, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(250, 248, 243, 0.025) 1px, transparent 1px);
    background-size: 30px 30px;
}
.r2-featured__visual-img {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.r2-featured__visual-img img {
    max-width: 75%;
    max-height: 85%;
    filter: drop-shadow(0 40px 80px rgba(0,0,0,0.5));
}
.r2-featured__chip {
    position: absolute;
    top: 24px;
    left: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(45, 125, 95, 0.15);
    border: 1px solid rgba(45, 125, 95, 0.35);
    color: #6BCF9E;
    padding: 8px 14px;
    border-radius: var(--r2-r-pill);
    font-family: var(--r2-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.r2-featured__chip svg { width: 12px; height: 12px; }
@media (max-width: 980px) {
    .r2-featured__inner { grid-template-columns: 1fr; gap: 48px; }
    .r2-featured__visual { max-width: 480px; margin: 0 auto; }
}

/* ---------- 9. CATEGORY PORTALS — 4 big cards --------------------------- */
.r2-portals {
    padding: clamp(72px, 9vw, 140px) 0;
    background: var(--r2-paper);
}
.r2-portals__head {
    max-width: var(--r2-max);
    margin: 0 auto;
    padding: 0 var(--r2-gutter);
    margin-bottom: 48px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 32px;
    flex-wrap: wrap;
}
.r2-portals__title {
    font-family: var(--r2-display);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--r2-ink);
    margin: 12px 0 0;
}
.r2-portals__link {
    color: var(--r2-ink);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--r2-r-pill);
    border: 1px solid var(--r2-ink);
    transition: background .2s ease, color .2s ease;
}
.r2-portals__link:hover { background: var(--r2-ink); color: var(--r2-paper); }
.r2-portals__grid {
    max-width: var(--r2-max);
    margin: 0 auto;
    padding: 0 var(--r2-gutter);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.r2-portal {
    position: relative;
    aspect-ratio: 3/4;
    background: var(--r2-paper-2);
    border-radius: var(--r2-r-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--r2-ink);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
    isolation: isolate;
}
.r2-portal:hover { transform: translateY(-6px); }
.r2-portal::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, transparent 40%, rgba(10, 20, 36, 0.6) 100%);
}
.r2-portal__num {
    position: absolute;
    top: 24px;
    left: 24px;
    font-family: var(--r2-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: rgba(10, 20, 36, 0.45);
}
.r2-portal__count {
    position: absolute;
    top: 24px;
    right: 24px;
    background: rgba(10, 20, 36, 0.06);
    border-radius: var(--r2-r-pill);
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--r2-ink);
}
.r2-portal__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.r2-portal__shape {
    width: 70%;
    height: 70%;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.4;
    transition: transform .6s ease, opacity .6s ease;
}
.r2-portal:hover .r2-portal__shape { transform: scale(1.2); opacity: 0.6; }
.r2-portal__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--r2-ink);
    opacity: 0.18;
    transition: opacity .4s ease, transform .4s ease;
}
.r2-portal:hover .r2-portal__icon { opacity: 0.3; transform: translate(-50%, -55%) scale(1.05); }
.r2-portal__icon svg { width: 140px; height: 140px; }
.r2-portal__title {
    font-family: var(--r2-display);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--r2-ink);
    margin: 0;
    z-index: 1;
}
.r2-portal__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--r2-ink);
    color: var(--r2-paper);
    margin-top: 16px;
    transition: transform .3s ease, background .25s ease;
}
.r2-portal:hover .r2-portal__arrow { background: var(--r2-coral); transform: translateX(6px); }
.r2-portal__arrow svg { width: 18px; height: 18px; }

.r2-portal--phones .r2-portal__shape { background: var(--r2-coral); }
.r2-portal--tablets .r2-portal__shape { background: var(--r2-gold); }
.r2-portal--laptops .r2-portal__shape { background: var(--r2-blue); }
.r2-portal--access  .r2-portal__shape { background: var(--r2-green); }

@media (max-width: 980px) {
    .r2-portals__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .r2-portals__grid { grid-template-columns: 1fr; gap: 12px; }
    .r2-portal { aspect-ratio: 5/3; }
    .r2-portal__icon svg { width: 100px; height: 100px; }
}

/* ---------- 10. PROCESS — visual horizontal timeline -------------------- */
.r2-process {
    padding: clamp(72px, 9vw, 140px) 0;
    background: var(--r2-paper-2);
    position: relative;
}
.r2-process__head {
    max-width: var(--r2-max);
    margin: 0 auto;
    padding: 0 var(--r2-gutter);
    margin-bottom: 64px;
    text-align: center;
}
.r2-process__title {
    font-family: var(--r2-display);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--r2-ink);
    margin: 12px 0 0;
}
.r2-process__sub {
    font-size: 17px;
    color: var(--r2-text-2);
    margin: 16px auto 0;
    max-width: 56ch;
}
.r2-process__line {
    max-width: var(--r2-max);
    margin: 0 auto;
    padding: 0 var(--r2-gutter);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    position: relative;
}
.r2-process__line::before {
    content: '';
    position: absolute;
    top: 32px;
    left: calc(var(--r2-gutter) + 60px);
    right: calc(var(--r2-gutter) + 60px);
    height: 2px;
    background: repeating-linear-gradient(to right,
        var(--r2-coral) 0, var(--r2-coral) 6px, transparent 6px, transparent 14px);
    opacity: 0.35;
    z-index: 0;
}
.r2-step {
    position: relative;
    z-index: 1;
    text-align: center;
}
.r2-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--r2-paper);
    border: 2px solid var(--r2-ink);
    font-family: var(--r2-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--r2-ink);
    margin: 0 auto 20px;
    position: relative;
}
.r2-step__icon {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--r2-coral);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.r2-step__icon svg { width: 14px; height: 14px; }
.r2-step__title {
    font-family: var(--r2-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--r2-ink);
    margin: 0 0 8px;
    letter-spacing: -0.005em;
}
.r2-step__desc {
    font-size: 13px;
    color: var(--r2-text-2);
    margin: 0;
    line-height: 1.5;
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 980px) {
    .r2-process__line { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
    .r2-process__line::before { display: none; }
}

/* ---------- 11. STORIES — customer testimonials with photos ------------- */
.r2-stories {
    padding: clamp(72px, 9vw, 140px) 0;
    background: var(--r2-paper);
}
.r2-stories__head {
    max-width: var(--r2-max);
    margin: 0 auto;
    padding: 0 var(--r2-gutter);
    margin-bottom: 56px;
}
.r2-stories__title {
    font-family: var(--r2-display);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--r2-ink);
    margin: 12px 0 0;
    max-width: 18ch;
}
.r2-stories__title em { font-family: var(--r2-serif); font-style: italic; font-weight: 400; color: var(--r2-coral); }
.r2-stories__grid {
    max-width: var(--r2-max);
    margin: 0 auto;
    padding: 0 var(--r2-gutter);
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 24px;
}
.r2-story {
    border-radius: var(--r2-r-lg);
    padding: 36px;
    position: relative;
    overflow: hidden;
    transition: transform .35s ease;
    display: flex;
    flex-direction: column;
}
.r2-story:hover { transform: translateY(-6px); }
.r2-story--a {
    background: var(--r2-ink);
    color: var(--r2-paper);
    grid-row: span 2;
    padding: 48px;
}
.r2-story--b { background: var(--r2-paper-2); color: var(--r2-ink); }
.r2-story--c { background: var(--r2-coral); color: #fff; }
.r2-story--d { background: var(--r2-paper-3); color: var(--r2-ink); grid-column: span 2; }
.r2-story__stars {
    display: inline-flex;
    gap: 2px;
    margin-bottom: 16px;
    color: var(--r2-gold);
}
.r2-story__stars svg { width: 16px; height: 16px; }
.r2-story--c .r2-story__stars { color: #fff; }
.r2-story__text {
    font-family: var(--r2-display);
    font-size: clamp(18px, 1.6vw, 24px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin: 0;
    flex: 1;
}
.r2-story--a .r2-story__text { font-size: clamp(20px, 1.9vw, 30px); }
.r2-story__author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid currentColor;
}
.r2-story--a .r2-story__author { border-color: rgba(250, 248, 243, 0.18); }
.r2-story--b .r2-story__author, .r2-story--d .r2-story__author { border-color: rgba(10, 20, 36, 0.12); }
.r2-story--c .r2-story__author { border-color: rgba(255, 255, 255, 0.25); }
.r2-story__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--r2-gold), var(--r2-coral));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    font-family: var(--r2-display);
}
.r2-story__who { display: flex; flex-direction: column; gap: 2px; }
.r2-story__name { font-weight: 600; font-size: 14px; letter-spacing: -0.005em; }
.r2-story__loc { font-size: 12px; opacity: 0.7; }
@media (max-width: 980px) {
    .r2-stories__grid { grid-template-columns: 1fr 1fr; }
    .r2-story--a { grid-row: span 1; grid-column: span 2; }
    .r2-story--d { grid-column: span 2; }
}
@media (max-width: 600px) {
    .r2-stories__grid { grid-template-columns: 1fr; }
    .r2-story--a, .r2-story--d { grid-column: span 1; }
    .r2-story { padding: 28px; }
}

/* ---------- 12. VISIT US block (replaces the old visit) ----------------- */
.r2-visit {
    padding: clamp(72px, 9vw, 140px) 0;
    background: var(--r2-ink);
    color: var(--r2-paper);
    position: relative;
    overflow: hidden;
}
.r2-visit::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(40% 60% at 20% 50%, rgba(255, 107, 71, 0.10), transparent 60%);
}
.r2-visit__inner {
    position: relative;
    max-width: var(--r2-max);
    margin: 0 auto;
    padding: 0 var(--r2-gutter);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.r2-visit__title {
    font-family: var(--r2-display);
    font-size: clamp(40px, 5.5vw, 84px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--r2-paper);
    margin: 12px 0 0;
}
.r2-visit__title em { font-family: var(--r2-serif); font-style: italic; font-weight: 400; color: var(--r2-coral); }
.r2-visit__info {
    margin: 36px 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.r2-visit__info-item h3 {
    font-family: var(--r2-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(250, 248, 243, 0.55);
    margin: 0 0 8px;
    font-weight: 500;
}
.r2-visit__info-item p {
    margin: 0;
    color: var(--r2-paper);
    font-size: 16px;
    line-height: 1.5;
}
.r2-visit__cta {
    margin: 40px 0 0;
}
.r2-visit__visual {
    aspect-ratio: 4/5;
    border-radius: var(--r2-r-xl);
    background:
      linear-gradient(135deg, rgba(255, 107, 71, 0.25), rgba(212, 164, 55, 0.15)),
      var(--r2-ink-2);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Stylised "map" pattern */
.r2-visit__map {
    width: 80%;
    height: 80%;
    position: relative;
}
.r2-visit__map::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(250, 248, 243, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(250, 248, 243, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
}
.r2-visit__pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--r2-coral);
    box-shadow: 0 0 0 12px rgba(255, 107, 71, 0.25), 0 0 0 30px rgba(255, 107, 71, 0.12);
    animation: r2-pulse 2.2s ease-out infinite;
}
@keyframes r2-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 107, 71, 0.6),    0 0 0 0 rgba(255, 107, 71, 0.3); }
    100% { box-shadow: 0 0 0 32px rgba(255, 107, 71, 0),   0 0 0 64px rgba(255, 107, 71, 0); }
}
.r2-visit__pinlabel {
    position: absolute;
    top: calc(50% + 28px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: var(--r2-paper);
    color: var(--r2-ink);
    padding: 6px 12px;
    border-radius: var(--r2-r-sm);
    font-size: 12px;
    font-weight: 600;
    box-shadow: var(--r2-shadow);
}
@media (max-width: 980px) {
    .r2-visit__inner { grid-template-columns: 1fr; gap: 48px; }
    .r2-visit__visual { max-width: 480px; margin: 0 auto; }
}

/* ---------- 13. FOOTER (rich, modular) ---------------------------------- */
.r2-footer {
    background: var(--r2-paper-2);
    color: var(--r2-text-2);
    padding: clamp(56px, 7vw, 96px) 0 32px;
}
.r2-footer__inner {
    max-width: var(--r2-max);
    margin: 0 auto;
    padding: 0 var(--r2-gutter);
}
.r2-footer__top {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: 48px;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--r2-line);
}
.r2-footer__brand h3 {
    font-family: var(--r2-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--r2-ink);
    letter-spacing: -0.02em;
    margin: 16px 0;
    max-width: 14ch;
    line-height: 1.05;
}
.r2-footer__brand p {
    color: var(--r2-text-2);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 24px;
    max-width: 40ch;
}
.r2-newsletter {
    display: flex;
    gap: 8px;
    max-width: 360px;
}
.r2-newsletter input {
    flex: 1;
    height: 48px;
    padding: 0 16px;
    background: var(--r2-paper);
    border: 1px solid var(--r2-line);
    border-radius: var(--r2-r-pill);
    font-family: var(--r2-body);
    font-size: 14px;
    color: var(--r2-text);
    outline: none;
    transition: border-color .2s ease;
}
.r2-newsletter input:focus { border-color: var(--r2-ink); }
.r2-newsletter button {
    height: 48px;
    padding: 0 24px;
    background: var(--r2-ink);
    color: var(--r2-paper);
    border: 0;
    border-radius: var(--r2-r-pill);
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}
.r2-newsletter button:hover { background: var(--r2-coral); }
.r2-footer__col h4 {
    font-family: var(--r2-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--r2-text-2);
    margin: 0 0 20px;
    font-weight: 500;
}
.r2-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.r2-footer__col a {
    color: var(--r2-ink);
    text-decoration: none;
    font-size: 14px;
    transition: color .2s ease;
}
.r2-footer__col a:hover { color: var(--r2-coral); }
.r2-footer__bottom {
    margin-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--r2-text-2);
}
.r2-pay {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    opacity: 0.7;
}
.r2-pay span {
    font-family: var(--r2-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.r2-pay__icons { display: inline-flex; gap: 6px; align-items: center; }
.r2-pay__icons div {
    background: var(--r2-paper);
    border: 1px solid var(--r2-line);
    border-radius: var(--r2-r-xs);
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--r2-ink);
}
@media (max-width: 980px) {
    .r2-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
    .r2-footer__brand { grid-column: span 2; }
}
@media (max-width: 600px) {
    .r2-footer__top { grid-template-columns: 1fr; }
    .r2-footer__brand { grid-column: span 1; }
}

/* ---------- 14. UNIVERSAL REVEAL ON SCROLL ------------------------------ */
[data-r2-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
    will-change: opacity, transform;
}
[data-r2-reveal].is-revealed { opacity: 1; transform: none; }
[data-r2-reveal-delay="1"].is-revealed { transition-delay: .08s; }
[data-r2-reveal-delay="2"].is-revealed { transition-delay: .16s; }
[data-r2-reveal-delay="3"].is-revealed { transition-delay: .24s; }
[data-r2-reveal-delay="4"].is-revealed { transition-delay: .32s; }
[data-r2-reveal-delay="5"].is-revealed { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
    [data-r2-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .r2-hero__title .r2-hero__word { opacity: 1; transform: none; animation: none; }
    .r2-hero__device img, .r2-hero__callout, .r2-visit__pin { animation: none; }
}

/* ---------- 15. HIDE existing legacy sections on the home page --------- */
body.page-id-14 .nzss-hero,
body.page-id-14 .nzss-section,
body.page-id-14 .nzss-stats,
body.page-id-14 .nzss-howitworks,
body.page-id-14 .nzss-brands,
body.page-id-14 .nzss-reviews { display: none !important; }

/* hide the parent theme's default header + page title bar on home only */
/* ─── SITE-WIDE legacy chrome hiding ─── */
/* Hide on EVERY page (header + footer chrome from old theme) */
.nzss-header-top,
#site-header,
.ct-header,
[data-id="header"],
.page-title-bar,
.nzss-topnav,
.nzss-footer,
.ct-footer,
footer[data-row="middle"],
footer[data-row="bottom"],
.site-footer { display: none !important; }

/* On HOME only, also hide the shop category mega-menu (catbar) since the
   redesign hero replaces the category-led entry point.
   On shop / product / category pages it stays visible. */
body.home .nzss-catbar,
body.page-id-14 .nzss-catbar,
body.home .nzss-trust,
body.page-id-14 .nzss-trust { display: none !important; }

/* Push catbar tight under the new r2-header on non-home pages */
body:not(.home):not(.page-id-14) .nzss-catbar {
    margin-top: 0;
    border-top: 1px solid var(--r2-line);
}

/* Remove the staging-banner top padding so the new sticky header sits flush */
body.page-id-14 #nzss-stage-banner ~ * { /* nothing extra; banner has its own offset via inline */ }
body.page-id-14 .r2-header { top: 30px; } /* clear the orange staging banner */


/* ─── 20. COMPACT RHYTHM ────────────────────────────────────────────────
   Mike feedback (13 May): too much wasted real estate, especially the
   process section. Reducing vertical padding on every section, trimming
   intra-section gaps and oversized titles. Overrides earlier values via
   later cascade (same selectors). */

/* Section-level padding */
.r2-hero      { padding: clamp(28px, 4vw, 60px) 0 clamp(36px, 5vw, 72px); }
.r2-why       { padding: clamp(40px, 5vw, 72px) 0; }
.r2-featured  { padding: clamp(48px, 6vw, 88px) 0; }
.r2-portals   { padding: clamp(40px, 5vw, 72px) 0; }
.r2-process   { padding: clamp(32px, 4vw, 56px) 0; }
.r2-stories   { padding: clamp(40px, 5vw, 72px) 0; }
.r2-visit     { padding: clamp(40px, 5vw, 72px) 0; }
.r2-footer    { padding: clamp(32px, 4vw, 56px) 0 20px; }

/* Section heading blocks — tighter bottom margins */
.r2-why__head, .r2-portals__head, .r2-stories__head { margin-bottom: 28px; }
.r2-process__head { margin-bottom: 22px; }

/* Section titles — smaller display */
.r2-why__title, .r2-portals__title, .r2-stories__title, .r2-process__title {
    font-size: clamp(26px, 3.4vw, 44px);
    line-height: 1.04;
}
.r2-visit__title    { font-size: clamp(32px, 4.5vw, 60px); }
.r2-featured__title { font-size: clamp(34px, 4.4vw, 60px); }

/* Process — kill the bloat */
.r2-process__sub  { font-size: 14px; max-width: 48ch; margin-top: 8px; }
.r2-step__num     { width: 48px; height: 48px; font-size: 16px; margin-bottom: 10px; }
.r2-step__icon    { width: 22px; height: 22px; top: -7px; right: -7px; }
.r2-step__icon svg{ width: 11px; height: 11px; }
.r2-step__title   { font-size: 14px; margin-bottom: 3px; }
.r2-step__desc    { font-size: 12px; line-height: 1.4; max-width: 20ch; }
.r2-process__line { gap: 14px; }
.r2-process__line::before { top: 24px; left: calc(var(--r2-gutter) + 36px); right: calc(var(--r2-gutter) + 36px); }

/* Hero — pull together */
.r2-hero__title    { margin-top: 18px; }
.r2-hero__lede     { margin-top: 20px; font-size: clamp(15px, 1.15vw, 18px); max-width: 50ch; }
.r2-hero__actions  { margin-top: 26px; }
.r2-hero__meta     { margin-top: 32px; padding-top: 20px; gap: 24px; }
.r2-hero__metanum  { font-size: 24px; }
.r2-hero__metalabel{ font-size: 12px; }

/* Bento — denser */
.r2-tile           { padding: 22px; }
.r2-tile--f        { padding: 32px 40px; }
.r2-tile__label    { margin-top: 12px; font-size: 16px; }
.r2-tile__sub      { margin-top: 4px; font-size: 12px; }
.r2-tile--f .r2-tile__label { font-size: clamp(24px, 2.6vw, 36px); }
.r2-tile--f .r2-tile__sub   { margin-top: 12px; font-size: 14px; }

/* Featured — tighter spec block */
.r2-featured__desc      { margin-top: 16px; font-size: 16px; }
.r2-featured__specs     { gap: 10px 24px; padding-top: 18px; margin-top: 22px; }
.r2-featured__spec-value{ font-size: 16px; }
.r2-featured__pricebar  { margin-top: 24px; gap: 20px; }
.r2-featured__chip      { top: 18px; left: 18px; }

/* Portals — slightly squatter cards */
.r2-portal     { aspect-ratio: 4/5; padding: 22px; }
.r2-portal__title { font-size: 26px; }
.r2-portal__arrow { width: 40px; height: 40px; margin-top: 12px; }
.r2-portal__icon svg { width: 110px; height: 110px; }

/* Stories — denser */
.r2-story         { padding: 24px; }
.r2-story--a      { padding: 32px; }
.r2-story__text   { font-size: clamp(16px, 1.3vw, 20px); }
.r2-story--a .r2-story__text { font-size: clamp(18px, 1.6vw, 26px); }
.r2-story__author { margin-top: 18px; padding-top: 16px; }

/* Visit — denser info grid */
.r2-visit__info     { margin-top: 24px; gap: 18px; }
.r2-visit__info-item h3 { margin-bottom: 4px; }
.r2-visit__info-item p  { font-size: 15px; }
.r2-visit__cta      { margin-top: 24px; }

/* Footer — denser */
.r2-footer__top    { padding-bottom: 28px; gap: 32px; }
.r2-footer__brand h3 { margin: 10px 0; font-size: 22px; }
.r2-footer__brand p  { margin-bottom: 16px; font-size: 13px; }
.r2-footer__col ul   { gap: 10px; }
.r2-footer__col h4   { margin-bottom: 14px; }
.r2-footer__bottom   { margin-top: 24px; }

/* Utility strip — shorter */
.r2-utility { height: 30px; font-size: 11px; }
.r2-utility__inner { gap: 36px; }

/* Header — slightly less tall */
.r2-header__inner               { height: 64px; }
.r2-header.is-scrolled .r2-header__inner { height: 54px; }

/* Hero meta text-variant (no big counters; just three small value claims) */
.r2-hero__metaitem--text {
    flex-direction: column;
    align-items: flex-start;
}
.r2-hero__metaitem--text .r2-hero__metalabel {
    font-size: 13px;
    color: var(--r2-text-2);
    line-height: 1.45;
}
.r2-hero__metaitem--text .r2-hero__metalabel strong {
    display: block;
    color: var(--r2-ink);
    font-family: var(--r2-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    margin-bottom: 2px;
}

/* ─── 21. VISIT SECTION REAL MAP + TIGHTER LAYOUT ──────────────────────
   Replaces the stylised grid-pattern map with a real Google Maps iframe,
   shrinks the title and pulls the section tighter. */

.r2-visit { padding: clamp(36px, 4.5vw, 64px) 0; }
.r2-visit__title { font-size: clamp(28px, 3.6vw, 48px); margin-top: 8px; }
.r2-visit__inner { gap: 56px; align-items: center; padding-top: 8px; }

/* Visual area — wider/shorter, holds the iframe */
.r2-visit__visual {
    aspect-ratio: 16/10;
    background: var(--r2-ink-2);
    border-radius: var(--r2-r-xl);
    overflow: hidden;
    /* drop the previous decorative background; iframe fills it */
}
.r2-visit__iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    /* Tone the bright Google map down so it sits in the dark section
       without screaming. Filter applies to the rendered iframe surface. */
    filter: saturate(0.85) brightness(0.96);
}
/* Old map pattern + pin no longer used; hide if present */
.r2-visit__map, .r2-visit__pin, .r2-visit__pinlabel { display: none; }

/* Small legal line under the info grid */
.r2-visit__legal {
    margin: 18px 0 0;
    font-family: var(--r2-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(250, 248, 243, 0.45);
}
.r2-visit__cta { margin-top: 20px; }

/* On mobile, stack and keep map a reasonable height */
@media (max-width: 980px) {
    .r2-visit__visual { aspect-ratio: 4/3; max-width: 100%; }
}

/* ─── 22. TEXT-LED BENTO TILE VARIANT ─────────────────────────────────
   For tiles where a number isn't substantiable. Big display word(s)
   in place of the giant counter; same visual weight as a number tile. */
.r2-tile--text .r2-tile__bigword {
    margin: 0;
    font-family: var(--r2-display);
    font-size: clamp(34px, 4.5vw, 64px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--r2-ink);
}
.r2-tile--text .r2-tile__bigword em {
    font-family: var(--r2-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--r2-coral);
    letter-spacing: -0.01em;
}
/* Inherit colour overrides from --b, --c, --f the same way as number tiles */
.r2-tile--b.r2-tile--text .r2-tile__bigword { color: var(--r2-paper); }
.r2-tile--c.r2-tile--text .r2-tile__bigword { color: #fff; }
.r2-tile--c.r2-tile--text .r2-tile__bigword em { color: rgba(255,255,255,0.75); }
.r2-tile--text .r2-tile__sub { margin-top: 12px; }

/* ─── 23. CATBAR RESTYLE ───────────────────────────────────────────────
   The shop category mega-menu (.nzss-catbar) sits under the new r2-header
   on every non-home page. Restyling to use the redesign palette
   (paper / ink / coral) and typography (Space Grotesk + Inter). */

/* Container — cream bar with a soft divider top + bottom */
.nzss-catbar {
    background: var(--r2-paper) !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--r2-line) !important;
    color: var(--r2-ink) !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.nzss-catbar__inner {
    background: transparent !important;
    max-width: var(--r2-max);
    margin: 0 auto;
    padding: 0 var(--r2-gutter) !important;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 24px;
}

/* The trigger — "Shop by category" button */
.nzss-catbar__cats { position: relative; }
.nzss-catbar__trigger {
    background: var(--r2-paper-2) !important;
    color: var(--r2-ink) !important;
    border: 1px solid transparent !important;
    border-radius: var(--r2-r-pill) !important;
    padding: 8px 18px 8px 14px !important;
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 10px !important;
    font-family: var(--r2-display) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: -0.005em !important;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.nzss-catbar__trigger:hover,
.nzss-catbar__cats.is-open .nzss-catbar__trigger,
.nzss-catbar__cats:hover .nzss-catbar__trigger {
    background: var(--r2-ink) !important;
    color: var(--r2-paper) !important;
    border-color: var(--r2-ink) !important;
}
.nzss-catbar__trigger .grid {
    width: 16px;
    height: 16px;
    color: currentColor !important;
}
.nzss-catbar__trigger .label { color: inherit !important; }
.nzss-catbar__trigger .chev {
    width: 11px;
    height: 11px;
    color: currentColor !important;
    transition: transform .25s ease;
}
.nzss-catbar__cats.is-open .nzss-catbar__trigger .chev,
.nzss-catbar__cats:hover .nzss-catbar__trigger .chev {
    transform: rotate(180deg);
}

/* Dropdown panel — paper background, rounded, layered shadow */
.nzss-catbar__dropdown {
    background: var(--r2-paper) !important;
    border: 1px solid var(--r2-line) !important;
    border-radius: var(--r2-r-lg) !important;
    box-shadow: var(--r2-shadow-lg) !important;
    margin-top: 12px !important;
    padding: 12px !important;
    min-width: 280px;
}

/* Top-level cat links inside the dropdown */
.nzss-catbar__dropdown .nzss-cat-link {
    display: flex;
    align-items: center;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: var(--r2-r-sm) !important;
    color: var(--r2-ink) !important;
    text-decoration: none !important;
    font-family: var(--r2-body) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: -0.005em;
    transition: background-color .15s ease, color .15s ease;
}
.nzss-catbar__dropdown .nzss-cat-link:hover {
    background: var(--r2-paper-2) !important;
    color: var(--r2-ink) !important;
}
.nzss-catbar__dropdown .nzss-cat-link__icon {
    width: 22px !important;
    height: 22px !important;
    color: var(--r2-text-2) !important;
    flex: 0 0 22px;
    transition: color .15s ease;
}
.nzss-catbar__dropdown .nzss-cat-link:hover .nzss-cat-link__icon {
    color: var(--r2-coral) !important;
}
.nzss-catbar__dropdown .nzss-cat-link__label {
    flex: 1 1 auto;
    color: inherit !important;
}
.nzss-catbar__dropdown .nzss-cat-link__chev {
    width: 10px !important;
    height: 10px !important;
    color: var(--r2-text-3) !important;
    opacity: 0.7;
}

/* Nested sublist */
.nzss-catbar__dropdown .nzss-cat-sublist {
    background: var(--r2-paper-2) !important;
    border-radius: var(--r2-r-md) !important;
    padding: 6px !important;
    margin-left: 8px;
    border: 0 !important;
}
.nzss-catbar__dropdown .nzss-cat-sublist__item {
    display: block !important;
    padding: 7px 12px !important;
    border-radius: var(--r2-r-xs) !important;
    color: var(--r2-text-2) !important;
    text-decoration: none !important;
    font-family: var(--r2-body) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    transition: background-color .15s ease, color .15s ease;
}
.nzss-catbar__dropdown .nzss-cat-sublist__item:hover {
    background: var(--r2-paper) !important;
    color: var(--r2-coral) !important;
}

/* The .nzss-catbar__nav (horizontal nav links to the right of trigger) */
.nzss-catbar__nav {
    display: flex;
    align-items: center;
    gap: 28px !important;
    flex: 1 1 auto;
}
.nzss-catbar__nav a {
    color: var(--r2-text-2) !important;
    text-decoration: none !important;
    font-family: var(--r2-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em;
    padding: 4px 0;
    position: relative;
    transition: color .2s ease;
}
.nzss-catbar__nav a:hover,
.nzss-catbar__nav a.is-active {
    color: var(--r2-coral) !important;
}

/* Phone callout on the right edge of catbar */
.nzss-catbar__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--r2-text-2) !important;
    font-family: var(--r2-body);
    font-size: 13px;
    font-weight: 500;
}
.nzss-catbar__phone svg {
    width: 14px !important;
    height: 14px !important;
    color: var(--r2-coral) !important;
}
.nzss-catbar__phone a {
    color: var(--r2-ink) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
.nzss-catbar__phone a:hover { color: var(--r2-coral) !important; }

/* Mobile — collapse on narrow */
@media (max-width: 880px) {
    .nzss-catbar__inner { gap: 12px; height: 48px; padding: 0 16px !important; }
    .nzss-catbar__nav { display: none; }
    .nzss-catbar__phone { display: none; }
    .nzss-catbar__trigger { font-size: 12px !important; height: 36px; padding: 6px 14px 6px 12px !important; }
}

/* ─── 25. CATBAR — fix dropdown z-index, hover-gap, archive H1 overlap ─

   Three issues being addressed:
   (a) The legacy Blocksy ".hero-section" on shop/category archive pages
       renders a giant H1 ("Shop", "Mobile Phones", etc.) directly in the
       space where the catbar dropdown opens — visible bleed-through.
       Solution: visually hide (sr-only) on archive pages. The H1 stays
       in the DOM for SEO; it just doesn't take up space.
   (b) Hover bridge needs to be ALWAYS present, not gated on :hover.
       The mouse needs something to hover ON during the gap traversal
       between trigger and dropdown.
   (c) Dropdown z-index needs to defeat any page content beneath. */

/* (a) sr-only the Blocksy archive hero on shop/product archives only.
   Keeps the H1 in the DOM (screen readers + search engines see it) but
   visually removed so the catbar dropdown can open without overlap. */
body.post-type-archive-product .hero-section,
body.tax-product_cat .hero-section,
body.tax-product_tag .hero-section,
body.tax-product_brand .hero-section,
body.woocommerce-shop .hero-section {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* (b) ALWAYS-PRESENT hover bridge. Sits in the 12px gap between the
   trigger pill and the dropdown panel, catching the cursor so :hover
   on the wrapper stays active during traversal. Transparent, ~18px high. */
.nzss-catbar__cats {
    position: relative;
    z-index: 100;
}
.nzss-catbar__cats::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 18px;
    pointer-events: auto;
    background: transparent;
    /* Below the dropdown panel itself but above other page content */
    z-index: 1;
}

/* (c) Dropdown sits high above page content (including any archive
   hero, product grid, etc.). */
.nzss-catbar__dropdown {
    z-index: 999 !important;
    margin-top: 12px !important;
}

/* When the dropdown is fully closed, suppress the bridge so it doesn't
   intercept clicks on content immediately below the catbar. The bridge
   only needs to exist when the user might be heading toward the
   (potentially-open) dropdown. */
.nzss-catbar__cats:not(:hover):not(.is-open)::after {
    pointer-events: none;
}