:root{
    --cream:#F4EFE7;
    --ivory:#FBF8F2;
    --navy:#0F1A2E;
    --brand-blue:#1F4FB8;
    --brand-red:#C73A2E;
    --taupe:#6B6357;
    --hairline:#E5DDD0;
  }

  html,body{ background:var(--cream); color:var(--navy); }
  body{
    font-family:'Geist', ui-sans-serif, system-ui, sans-serif;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  ::selection{ background:var(--navy); color:var(--ivory); }

  .font-display{ font-family:'EB Garamond', Georgia, serif; }
  .font-sans{    font-family:'Geist', ui-sans-serif, system-ui; }

  /* --- typographic primitives --- */
  .eyebrow{
    font-family:'Geist', ui-sans-serif, system-ui;
    font-size:11px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    font-weight:500;
  }
  .label{
    font-family:'Geist', ui-sans-serif, system-ui;
    font-size:11px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    font-weight:500;
  }
  .tnum{ font-variant-numeric:tabular-nums; }
  .h-display{
    font-family:'EB Garamond', Georgia, serif;
    font-weight:500;
    letter-spacing:-0.025em;
    line-height:0.98;
  }

  /* --- hairline rules --- */
  .hairline-t{ border-top:1px solid var(--hairline); }
  .hairline-b{ border-bottom:1px solid var(--hairline); }
  .vline{      border-left:1px solid var(--hairline); }

  /* --- buttons --- */
  .btn-pill{
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 22px;
    border-radius:999px;
    font-family:'Geist', ui-sans-serif, system-ui;
    font-size:14px; font-weight:500;
    line-height:1; letter-spacing:0.01em;
    cursor:pointer;
    transition: transform 180ms cubic-bezier(0.2,0.6,0.2,1),
                box-shadow 220ms ease-out,
                background-color 180ms ease-out,
                color 180ms ease-out,
                border-color 180ms ease-out;
    border:1px solid transparent;
  }
  .btn-pill .arr{ display:inline-block; transition:transform 180ms ease-out; }
  .btn-pill:hover .arr{ transform:translateX(4px); }
  .btn-pill:active{ transform:translateY(0); }

  .btn-cream{ background:var(--ivory); color:var(--navy); }
  .btn-cream:hover{
    transform:translateY(-1px);
    box-shadow: 0 12px 28px -16px rgba(15,26,46,0.45), 0 0 0 1px rgba(15,26,46,0.18);
  }

  .btn-navy{ background:var(--navy); color:var(--ivory); }
  .btn-navy:hover{
    transform:translateY(-1px);
    box-shadow: 0 14px 32px -16px rgba(15,26,46,0.55);
  }

  .btn-ghost-light{
    background:transparent; color:#fff;
    text-decoration:underline; text-decoration-color:rgba(255,255,255,0.55);
    text-underline-offset:5px;
    padding:14px 6px;
  }
  .btn-ghost-light:hover{ text-decoration-color:#fff; }

  .btn-ghost-dark{
    background:transparent; color:var(--navy);
    text-decoration:underline; text-decoration-color:rgba(15,26,46,0.4);
    text-underline-offset:5px;
    padding:14px 6px;
  }
  .btn-ghost-dark:hover{ text-decoration-color:var(--navy); }

  /* --- focus visible (cream sections) --- */
  a:focus-visible, button:focus-visible, input:focus-visible {
    outline:2px solid var(--brand-red);
    outline-offset:3px;
    border-radius:2px;
  }
  .on-navy a:focus-visible,
  .on-navy button:focus-visible,
  .on-navy input:focus-visible{
    outline-color:var(--ivory);
  }

  /* Anchored sections start below the fixed bar when navigated to */
  section[id], #contact{ scroll-margin-top: 150px; }

  /* --- nav --- */
  /* Solid from load: the split hero below is cream, so the bar never sits
     over a photo and never needs the transparent treatment. */
  .nav-bar{
    position:fixed; top:0; left:0; right:0; z-index:50;
    background: var(--cream);
    border-bottom:1px solid var(--hairline);
    box-shadow: 0 4px 14px -10px rgba(15,26,46,0.18);
  }
  /* Shrinks to about half height once the hero scrolls away. The bar is
     fixed, so animating its height repaints only the bar itself. */
  .nav-bar > div{
    transition: height 320ms cubic-bezier(0.2,0.6,0.2,1);
  }
  .nav-bar.compact > div{ height:64px; }
  @media (min-width: 769px){
    .nav-bar.compact > div{ height:72px; }
  }
  .nav-wordmark{
    transform-origin:left center;
    transition: transform 320ms cubic-bezier(0.2,0.6,0.2,1);
  }
  .nav-bar.compact .nav-wordmark{ transform: translateY(-2px) scale(0.52); }
  @media (prefers-reduced-motion: reduce){
    .nav-bar > div, .nav-wordmark{ transition:none; }
  }

  .nav-link{
    font-family:'Geist'; font-size:13px; font-weight:500; letter-spacing:0.05em;
    color: var(--navy); padding:6px 0;
    border-bottom:1px solid transparent;
    transition: opacity 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
  }
  .nav-link:hover{ border-bottom-color:currentColor; }
  .nav-wordmark{
    color: var(--navy);
    transform: translateY(-8px);
  }
  @media (max-width: 768px){
    .nav-wordmark{ transform: translateY(-4px); }
  }
  .nav-cart{
    color: var(--navy); opacity:0.92;
    transition: opacity 160ms ease-out;
  }
  .nav-cart:hover{ opacity:1; }

  .nav-social{
    color: var(--navy); opacity:0.9;
    transition: opacity 160ms ease-out;
    display:inline-flex; align-items:center;
  }
  .nav-social:hover{ opacity:1; }

  /* --- hero --- */
  /* Split hero: copy left, an L of three photos right. The photos are the
     product-line index: backyard court, garage floor, pickleball. */
  .hero{
    position:relative;
    background: var(--cream);
    /* clear the fixed 128/140px bar */
    padding-top: 150px;
  }
  @media (min-width: 769px){
    .hero{ padding-top: 170px; }
  }

  .hero-title{
    font-family:'EB Garamond', Georgia, serif;
    font-weight:500;
    line-height:0.96;
    letter-spacing:-0.025em;
    font-size: clamp(40px, 4.2vw, 60px);
    color: var(--navy);
  }
  .hero-title em{ font-weight:400; }

  .hero-sub{
    font-family:'Geist'; font-size:17px; line-height:1.6;
    color: var(--taupe);
    max-width:440px;
  }

  .hero-figure{
    position:relative;
    display:block;
    border-radius:12px;
    overflow:hidden;
    border:1px solid var(--hairline);
    background: var(--navy);
  }
  .hero-figure img{
    display:block; width:100%; height:100%;
    object-fit:cover;
  }
  /* quiet navy wash so the photos sit in the palette */
  .hero-figure::after{
    content:""; position:absolute; inset:0;
    background: var(--navy);
    mix-blend-mode:multiply;
    opacity:0.08;
    pointer-events:none;
  }
  a.hero-figure{
    transition: transform 280ms cubic-bezier(0.2,0.6,0.2,1),
                box-shadow 280ms ease-out;
  }
  a.hero-figure:hover{
    transform: translateY(-3px);
    box-shadow:
      0 24px 48px -20px rgba(15,26,46,0.22),
      0 4px 12px -4px rgba(15,26,46,0.08);
  }
  a.hero-figure:hover img{ transform: scale(1.03); }
  .hero-figure img{ transition: transform 520ms cubic-bezier(0.2,0.6,0.2,1); }

  .hero-chip{
    position:absolute; left:12px; bottom:12px; z-index:2;
    font-family:'Geist'; font-size:10px; font-weight:500;
    letter-spacing:0.18em; text-transform:uppercase;
    color: var(--ivory);
    background: rgba(15,26,46,0.62);
    padding:6px 10px 5px;
    border-radius:999px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* load sequence: copy first, then the three photos in reading order */
  .hero-rise{
    opacity:0; transform: translateY(14px);
    animation: heroRise 640ms cubic-bezier(0.2,0.6,0.2,1) forwards;
  }
  .hero-rise-1{ animation-delay: 60ms; }
  .hero-rise-2{ animation-delay: 200ms; }
  .hero-rise-3{ animation-delay: 290ms; }
  .hero-rise-4{ animation-delay: 380ms; }
  @keyframes heroRise{
    to { opacity:1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce){
    .hero-rise{ animation:none; opacity:1; transform:none; }
  }

  /* --- card surface --- */
  .surface{
    background:var(--ivory);
    border:1px solid var(--hairline);
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
  }
  .card-lift{
    transition: transform 280ms cubic-bezier(0.2,0.6,0.2,1),
                box-shadow 280ms ease-out;
  }
  .card-lift:hover{
    transform: translateY(-3px);
    box-shadow:
      0 24px 48px -20px rgba(15,26,46,0.22),
      0 4px 12px -4px rgba(15,26,46,0.08);
  }
  .card-lift .img-zoom{
    transition: transform 520ms cubic-bezier(0.2,0.6,0.2,1);
  }
  .card-lift:hover .img-zoom{
    transform: scale(1.03);
  }
  .card-lift .arr{ display:inline-block; transition:transform 200ms ease-out; }
  .card-lift:hover .arr{ transform:translateX(5px); }

  /* image tinting */
  .img-tint{
    position:absolute; inset:0;
    background:var(--navy);
    mix-blend-mode:multiply;
    opacity:0.08;
    pointer-events:none;
  }
  .img-fade-bottom{
    position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 55%, rgba(15,26,46,0.4) 100%);
    pointer-events:none;
  }

  /* --- mobile nav overlay --- */
  .mobile-nav{
    position:fixed; inset:0; z-index:60;
    background:var(--cream);
    transform: translateY(-12px);
    opacity:0;
    pointer-events:none;
    transition: transform 380ms cubic-bezier(0.2,0.6,0.2,1), opacity 260ms ease-out;
  }
  .mobile-nav.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .mobile-nav-item{
    font-family:'EB Garamond', Georgia, serif;
    font-size:44px; font-weight:500; letter-spacing:-0.02em;
    color:var(--navy);
    transition: color 160ms ease-out, transform 220ms cubic-bezier(0.2,0.6,0.2,1);
  }
  .mobile-nav-item:hover{ color:var(--brand-red); transform:translateX(6px); }

  /* --- chips (tile colours) --- */
  .chip-tile{
    width:14px; height:14px;
    border:1px solid rgba(15,26,46,0.18);
    border-radius:2px;
  }

  /* --- calculator --- */
  .calc-pill{
    font-family:'Geist'; font-size:13px; font-weight:500;
    padding:9px 16px;
    border-radius:999px;
    border:1px solid rgba(244,239,231,0.22);
    color:rgba(244,239,231,0.82);
    background:transparent;
    cursor:pointer;
    transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
  }
  .calc-pill:hover{ border-color:rgba(244,239,231,0.55); color:#fff; }
  .calc-pill[aria-pressed="true"]{
    background:var(--ivory); color:var(--navy); border-color:var(--ivory);
  }
  .calc-input-wrap{
    border:1px solid rgba(244,239,231,0.22);
    background: rgba(255,255,255,0.02);
    padding:14px 18px;
    border-radius:6px;
    transition: border-color 160ms ease-out, background-color 160ms ease-out;
  }
  .calc-input-wrap:focus-within{
    border-color: rgba(244,239,231,0.6);
    background: rgba(255,255,255,0.06);
  }
  .calc-input-label{
    font-family:'Geist'; font-size:10px; letter-spacing:0.28em; text-transform:uppercase;
    color: rgba(244,239,231,0.6);
  }
  .calc-input{
    background:transparent; border:none; outline:none; width:100%;
    font-family:'Geist'; font-weight:500; font-size:34px; color:var(--ivory);
    margin-top:4px;
    font-variant-numeric:tabular-nums;
  }
  .calc-stepper{
    width:28px; height:28px; border-radius:999px;
    border:1px solid rgba(244,239,231,0.3);
    color:var(--ivory); background:transparent;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition: background-color 140ms ease-out, border-color 140ms ease-out;
  }
  .calc-stepper:hover{ background:rgba(244,239,231,0.1); border-color:rgba(244,239,231,0.55); }
  .calc-result-tile-count{
    font-family:'EB Garamond', Georgia, serif;
    font-style:italic;
    font-weight:500;
    font-size: clamp(56px, 7.5vw, 88px);
    line-height:1;
    letter-spacing:-0.02em;
    color:var(--ivory);
    font-variant-numeric:tabular-nums;
  }

  /* --- tile shop card --- */
  .tile-shop-card{
    background:var(--ivory);
    border:1px solid var(--hairline);
    overflow:hidden;
    position:relative;
    transition: transform 260ms cubic-bezier(0.2,0.6,0.2,1), box-shadow 260ms ease-out;
  }
  .tile-shop-card:hover{
    transform:translateY(-3px);
    box-shadow: 0 22px 44px -22px rgba(15,26,46,0.22);
  }
  .tile-shop-card .swatch-photo,
  .tile-shop-card .swatch-solid{
    aspect-ratio: 1/1;
    background-repeat:no-repeat;
    transition: transform 520ms cubic-bezier(0.2,0.6,0.2,1);
    position:relative;
  }
  .tile-shop-card .swatch-photo{ background-size: cover; }
  .tile-shop-card .swatch-solid{
    background-color: var(--swatch-color, #6B6357);
    background-image:
      url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg fill='rgba(0,0,0,0.18)'%3E%3Cpolygon points='5.5,2 7.5,5 5.5,8 3.5,5'/%3E%3Cpolygon points='16.5,2 18.5,5 16.5,8 14.5,5'/%3E%3Cpolygon points='11,7 13,10 11,13 9,10'/%3E%3Cpolygon points='5.5,12 7.5,15 5.5,18 3.5,15'/%3E%3Cpolygon points='16.5,12 18.5,15 16.5,18 14.5,15'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 22px 22px;
    background-repeat: repeat;
    box-shadow: inset 0 -10px 24px -8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  .tile-shop-card.swatch-light .swatch-solid{
    box-shadow: inset 0 -10px 24px -8px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(15,26,46,0.06);
  }
  .tile-shop-card:hover .swatch-photo,
  .tile-shop-card:hover .swatch-solid{ transform:scale(1.04); }
  .tile-shop-card.is-sold-out:hover{ transform:none; box-shadow:none; }
  .tile-shop-card.is-sold-out:hover .swatch-photo,
  .tile-shop-card.is-sold-out:hover .swatch-solid{ transform:none; }
  .oos-overlay{
    position:absolute; inset:0; z-index:2;
    background: linear-gradient(180deg, rgba(15,26,46,0.18) 0%, rgba(15,26,46,0.30) 100%);
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
  }
  .oos-banner{
    background:var(--navy);
    color:var(--ivory);
    font-family:'Geist', ui-sans-serif;
    font-size:10px; font-weight:600;
    letter-spacing:0.22em; text-transform:uppercase;
    padding:9px 14px;
    border-top:1px solid rgba(251,248,242,0.18);
    border-bottom:1px solid rgba(251,248,242,0.18);
    width:100%;
    text-align:center;
    box-shadow: 0 8px 20px -8px rgba(0,0,0,0.4);
  }

  /* --- court style card --- */
  .style-card{
    background:var(--ivory);
    border:1px solid var(--hairline);
    overflow:hidden;
    display:block;
    transition: transform 280ms cubic-bezier(0.2,0.6,0.2,1), box-shadow 280ms ease-out;
  }
  .style-card:hover{
    transform:translateY(-3px);
    box-shadow:
      0 24px 48px -20px rgba(15,26,46,0.22),
      0 4px 12px -4px rgba(15,26,46,0.08);
  }
  .style-card .render{
    aspect-ratio: 1/1;
    display:block; width:100%; height:auto;
    object-fit: cover;
    object-position: center;
    background-size: cover;
    background-position: center;
    background-repeat:no-repeat;
    transition: transform 520ms cubic-bezier(0.2,0.6,0.2,1);
  }
  .style-card:hover .render{ transform:scale(1.025); }
  .style-card .arr{ display:inline-block; transition: transform 200ms ease-out; }
  .style-card:hover .arr{ transform:translateX(5px); }

  /* --- sold out / out of stock court --- */
  .style-card.is-soldout{ position:relative; }
  .style-card.is-soldout .render{ filter:grayscale(0.4) brightness(0.72); }
  .style-card.is-soldout:hover .render{ transform:none; }
  .soldout-overlay{
    position:absolute; top:0; left:0; right:0; aspect-ratio:1/1;
    display:flex; align-items:center; justify-content:center;
    background:rgba(15,26,46,0.32); pointer-events:none;
  }
  .soldout-badge{
    font-family:'Geist', ui-sans-serif, system-ui; font-weight:600;
    font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--ivory); background:var(--brand-red);
    padding:11px 20px; border-radius:999px;
    box-shadow:0 14px 30px -12px rgba(15,26,46,0.7);
  }
  .add-to-cart[disabled]{ background:var(--taupe); opacity:.6; cursor:not-allowed; }
  .add-to-cart[disabled]:hover{ transform:none; }

  /* --- gallery (installs) --- */
  .install-card{
    background:var(--ivory);
    border:1px solid var(--hairline);
    overflow:hidden;
    position:relative;
    transition: transform 260ms cubic-bezier(0.2,0.6,0.2,1), box-shadow 260ms ease-out;
  }
  .install-card:hover{
    transform:translateY(-2px);
    box-shadow: 0 18px 36px -20px rgba(15,26,46,0.22);
  }

  /* --- colour deck --- */
  .colour-card{
    aspect-ratio: 5 / 6;
    overflow:hidden;
    background:var(--ivory);
    border:1px solid var(--hairline);
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
    position:relative;
    transition: transform 280ms cubic-bezier(0.2,0.6,0.2,1), box-shadow 280ms ease-out;
  }
  .colour-card:hover{
    transform: translateY(-4px);
    box-shadow:
      0 28px 56px -22px rgba(15,26,46,0.28),
      0 6px 14px -6px rgba(15,26,46,0.1);
  }
  .colour-card .swatch{
    position:absolute; top:0; left:0; right:0;
    height:70%;
    transition: transform 520ms cubic-bezier(0.2,0.6,0.2,1);
  }
  .colour-card:hover .swatch{ transform: scale(1.04); }
  .colour-card .swatch{ background-size: 215% auto; background-repeat:no-repeat; }
  .colour-card .swatch-red  { background-image:url('IMG_3282.JPG'); background-position: 4%  18%; }
  .colour-card .swatch-blue { background-image:url('IMG_3282.JPG'); background-position: 96% 18%; }
  .colour-card .swatch-gray { background-image:url('IMG_3282.JPG'); background-position: 4% 96%; }
  .colour-card .info{
    position:absolute; left:0; right:0; bottom:0;
    height:30%;
    background:var(--ivory);
    border-top:1px solid var(--hairline);
    padding: 18px 20px;
  }

  /* --- pull quote --- */
  .pull-quote{
    font-family:'EB Garamond', Georgia, serif;
    font-style:italic; font-weight:500;
    font-size: clamp(26px, 3.2vw, 34px);
    line-height:1.35;
    letter-spacing:-0.01em;
    color:var(--taupe);
    text-align:center;
    max-width:680px;
  }

  /* --- placeholder install card --- */
  .install-placeholder{
    background:var(--ivory);
    border:1px dashed #C8BFAE;
    color:var(--taupe);
  }

  /* --- footer contact form --- */
  .f-label{
    font-family:'Geist', ui-sans-serif;
    font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
    color: rgba(244,239,231,0.6);
    display:block; margin-bottom:7px; font-weight:500;
  }
  .footer-input{
    width:100%;
    background: rgba(255,255,255,0.04);
    border:1px solid rgba(244,239,231,0.18);
    color: var(--ivory);
    font-family:'Geist', ui-sans-serif;
    font-size:15px; line-height:1.5;
    padding:13px 16px;
    border-radius:7px;
    transition: border-color 160ms ease-out, background-color 160ms ease-out, box-shadow 160ms ease-out;
    resize: vertical;
  }
  .footer-input::placeholder{
    color: rgba(244,239,231,0.42);
  }
  .footer-input:focus{
    outline:none;
    border-color: rgba(244,239,231,0.65);
    background: rgba(255,255,255,0.08);
    box-shadow: 0 0 0 3px rgba(244,239,231,0.07);
  }
  textarea.footer-input{
    min-height: 118px;
    max-height: 240px;
  }

  /* --- contact form as a soft light card on the navy footer --- */
  .contact-card{
    background: var(--cream);
    border: 1px solid rgba(15,26,46,0.08);
    border-radius: 14px;
    padding: 26px 26px 24px;
    box-shadow: 0 18px 40px -28px rgba(0,0,0,0.45);
  }
  .contact-card .f-label{ color: var(--taupe); }
  .contact-card .footer-input{
    background: var(--ivory);
    border-color: var(--hairline);
    color: var(--navy);
  }
  .contact-card .footer-input::placeholder{ color: rgba(15,26,46,0.40); }
  .contact-card .footer-input:focus{
    border-color: var(--brand-blue);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(31,79,184,0.12);
  }

  /* --- FAQ accordion --- */
  .faq-item{ border-bottom:1px solid var(--hairline); }
  .faq-item summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    padding:22px 2px;
    font-family:'Geist', ui-sans-serif, system-ui;
    font-size:18px; font-weight:500; color:var(--navy);
    transition: color 160ms ease-out;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary:hover{ color:var(--brand-red); }
  .faq-item summary:focus-visible{ outline:2px solid var(--brand-red); outline-offset:3px; border-radius:2px; }
  .faq-ico{ position:relative; flex:0 0 auto; width:16px; height:16px; }
  .faq-ico::before, .faq-ico::after{
    content:''; position:absolute; background:var(--taupe);
    transition: transform 220ms cubic-bezier(0.2,0.6,0.2,1), opacity 180ms ease-out, background-color 160ms ease-out;
  }
  .faq-ico::before{ left:0; top:7px; width:16px; height:2px; }
  .faq-ico::after{ left:7px; top:0; width:2px; height:16px; }
  .faq-item[open] .faq-ico::after{ transform:scaleY(0); opacity:0; }
  .faq-item[open] .faq-ico::before{ background:var(--brand-red); }
  .faq-item summary:hover .faq-ico::before,
  .faq-item summary:hover .faq-ico::after{ background:var(--brand-red); }
  .faq-a{
    padding:0 2px 24px; max-width:680px;
    color:var(--taupe); font-size:15px; line-height:1.7;
  }
  .faq-a a{ color:var(--navy); text-decoration:underline; text-underline-offset:3px; }

  /* --- footer --- */
  .footer-link{
    font-family:'Geist'; font-size:14px; line-height:2;
    color:rgba(244,239,231,0.78);
    transition: color 160ms ease-out;
    display:inline-block;
  }
  .footer-link:hover{ color:#fff; }
  .footer-col-label{
    font-family:'Geist'; font-size:11px; letter-spacing:0.28em; text-transform:uppercase;
    color:rgba(244,239,231,0.52);
    margin-bottom:14px;
    font-weight:500;
  }

  /* utility: noise overlay for navy section depth */
  .grain::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:
      radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
      radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 2px 2px;
    opacity:0.6;
    mix-blend-mode: overlay;
  }

  /* --- wordmark live-text --- */
  .wordmark{
    display:inline-flex; align-items:baseline; gap:10px;
    font-family:'EB Garamond', Georgia, serif;
    font-weight:500; font-style:italic;
    font-size:84px; letter-spacing:-0.03em;
    line-height:1;
  }
  @media (max-width: 768px){
    .wordmark{ font-size:48px; gap:7px; letter-spacing:-0.025em; }
  }
  .wordmark .courts{
    font-family:'EB Garamond', Georgia, serif;
    font-style:italic; font-weight:500;
    font-size:0.66em;                /* scales with parent font-size */
    letter-spacing:-0.005em;
    text-transform:none;
    color:var(--brand-red);
    transform:none;
  }

  /* skip-to-content link (visible on keyboard focus) */
  .skip-link{
    position:absolute; left:12px; top:-56px; z-index:200;
    background:var(--navy); color:var(--ivory);
    font-family:'Geist', ui-sans-serif, system-ui, sans-serif;
    font-size:13px; font-weight:500; letter-spacing:0.02em;
    padding:10px 16px; border-radius:8px; text-decoration:none;
    transition:top .18s cubic-bezier(.2,.8,.2,1);
  }
  .skip-link:focus{ top:12px; outline:2px solid var(--brand-red); outline-offset:2px; }

  /* --- tile card quantity + add to cart --- */
  .qty-row{ display:flex; align-items:center; gap:8px; }
  .qty-btn{ width:30px; height:30px; border:1px solid var(--hairline); border-radius:8px; background:var(--ivory); color:var(--navy); font-size:16px; line-height:1; cursor:pointer; transition:border-color .18s ease, transform .18s ease; }
  .qty-btn:hover{ border-color:var(--navy); }
  .qty-btn:active{ transform:translateY(1px); }
  .qty-btn:focus-visible{ outline:2px solid var(--brand-red); outline-offset:2px; }
  .qty-input{ width:64px; text-align:center; padding:6px 4px; border:1px solid var(--hairline); border-radius:8px; font-size:13px; color:var(--navy); background:var(--ivory); }
  .qty-input:focus-visible{ outline:2px solid var(--brand-red); outline-offset:2px; }
  /* hide native number-input spinner arrows */
  .qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  .qty-input{ -moz-appearance:textfield; appearance:textfield; }
  .add-to-cart{ display:block; width:100%; margin-top:10px; padding:9px 12px; border-radius:999px; background:var(--navy); color:var(--ivory); font-size:12px; font-weight:500; letter-spacing:0.02em; cursor:pointer; border:none; transition:transform .2s cubic-bezier(.2,.8,.2,1), background-color .2s ease; }
  .add-to-cart:hover{ transform:translateY(-1px); background:#16243e; }
  .add-to-cart:active{ transform:translateY(0); }
  .add-to-cart:focus-visible{ outline:2px solid var(--brand-red); outline-offset:2px; }

  /* --- cart drawer --- */
  .cart-overlay{ position:fixed; inset:0; background:rgba(15,26,46,0.38); z-index:300; opacity:0; transition:opacity .25s ease; }
  .cart-overlay.is-open{ opacity:1; }
  .cart-drawer{ position:fixed; top:0; right:0; height:100%; width:min(420px,92vw); background:var(--cream); z-index:301; transform:translateX(100%); transition:transform .32s cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column; box-shadow:-24px 0 60px -30px rgba(15,26,46,0.4); }
  .cart-drawer.is-open{ transform:translateX(0); }
  .cart-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--hairline); }
  .cart-close{ background:none; border:none; font-size:26px; line-height:1; color:var(--navy); cursor:pointer; }
  .cart-close:focus-visible{ outline:2px solid var(--brand-red); outline-offset:2px; }
  .cart-body{ flex:1; overflow-y:auto; padding:20px 24px; }
  .cart-foot{ padding:18px 24px; border-top:1px solid var(--hairline); }
  .cart-line{ padding:12px 0; border-bottom:1px solid var(--hairline); font-size:14px; color:var(--navy); }
  .cart-line-top{ display:flex; align-items:center; justify-content:space-between; }
  .cart-line-bottom{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; }
  .cart-remove{ border:none; background:none; color:var(--taupe); cursor:pointer; font-size:18px; line-height:1; padding:0 2px; }
  .cart-remove:hover{ color:var(--brand-red); }
  .cart-field{ margin-top:16px; }
  .cart-field label{ display:block; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--taupe); margin-bottom:6px; }
  .cart-field select, .cart-field input{ width:100%; padding:9px 10px; border:1px solid var(--hairline); border-radius:8px; background:var(--ivory); font-size:13px; color:var(--navy); }
  .cart-field select:focus-visible, .cart-field input:focus-visible{ outline:2px solid var(--brand-red); outline-offset:2px; }
  .fulfil-toggle{ display:flex; gap:8px; }
  .fulfil-opt{ flex:1; padding:10px 12px; border:1px solid var(--hairline); border-radius:8px; background:var(--ivory); color:var(--navy); font-size:13px; font-weight:500; cursor:pointer; transition:border-color .18s ease, background-color .18s ease, color .18s ease; }
  .fulfil-opt:hover{ border-color:var(--navy); }
  .fulfil-opt[aria-pressed="true"]{ background:var(--navy); color:var(--ivory); border-color:var(--navy); }
  .fulfil-opt:focus-visible{ outline:2px solid var(--brand-red); outline-offset:2px; }
  .cart-total-row{ display:flex; justify-content:space-between; font-size:14px; color:var(--navy); margin-top:6px; }
  .cart-total-row.grand{ font-weight:600; font-size:16px; margin-top:10px; }
  .cart-error{ color:var(--brand-red); font-size:13px; margin-top:10px; }
  .cart-empty{ color:var(--taupe); font-size:14px; }
  .cart-thumb{ display:block; border-radius:4px; border:1px solid var(--hairline); margin-top:8px; }
  .cart-dl{ font-size:12px; color:var(--taupe); background:none; border:none; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:3px; }
  .cart-dl:hover{ color:var(--navy); }
  .cart-checkout{ display:block; width:100%; margin-top:16px; padding:13px; border-radius:999px; background:var(--navy); color:var(--ivory); font-size:14px; font-weight:500; border:none; cursor:pointer; transition:transform .2s cubic-bezier(.2,.8,.2,1), background-color .2s ease; }
  .cart-checkout:hover:not(:disabled){ transform:translateY(-1px); background:#16243e; }
  .cart-checkout:disabled{ opacity:.5; cursor:not-allowed; }
  .cart-checkout:focus-visible{ outline:2px solid var(--brand-red); outline-offset:2px; }

  /* --- contact confirmation modal --- */
  .confirm-overlay{ position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(15,26,46,0.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity .28s ease; }
  .confirm-overlay.is-open{ opacity:1; }
  .confirm-card{ position:relative; width:min(440px,100%); background:var(--ivory); border:1px solid var(--hairline); border-radius:20px; padding:42px 38px 34px; text-align:center; box-shadow:0 50px 100px -45px rgba(15,26,46,0.55), 0 1px 0 rgba(255,255,255,0.7) inset; transform:translateY(14px) scale(.96); opacity:0; transition:transform .42s cubic-bezier(.2,.8,.2,1), opacity .32s ease; }
  .confirm-overlay.is-open .confirm-card{ transform:translateY(0) scale(1); opacity:1; }
  .confirm-close{ position:absolute; top:14px; right:16px; background:none; border:none; font-size:24px; line-height:1; color:var(--taupe); cursor:pointer; padding:4px; border-radius:8px; transition:color .16s ease, transform .25s cubic-bezier(.2,.8,.2,1); }
  .confirm-close:hover{ color:var(--brand-red); transform:rotate(90deg); }
  .confirm-close:active{ transform:rotate(90deg) scale(.92); }
  .confirm-close:focus-visible{ outline:2px solid var(--brand-red); outline-offset:2px; }
  .confirm-badge{ width:60px; height:60px; margin:0 auto 22px; border-radius:999px; background:var(--navy); display:flex; align-items:center; justify-content:center; box-shadow:0 16px 30px -12px rgba(15,26,46,0.55); transform:scale(.4); opacity:0; transition:transform .5s cubic-bezier(.18,.9,.3,1.25) .08s, opacity .3s ease .08s; }
  .confirm-overlay.is-open .confirm-badge{ transform:scale(1); opacity:1; }
  .confirm-badge svg{ width:28px; height:28px; stroke:var(--ivory); }
  .confirm-eyebrow{ font-family:'Geist', ui-sans-serif, system-ui; font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--brand-red); font-weight:500; }
  .confirm-title{ font-family:'EB Garamond', Georgia, serif; font-size:29px; line-height:1.12; letter-spacing:-0.02em; color:var(--navy); margin-top:10px; }
  .confirm-text{ font-size:14px; line-height:1.7; color:var(--taupe); margin-top:14px; }
  .confirm-actions{ margin-top:26px; }
  .confirm-btn{ display:inline-block; width:100%; padding:13px; border-radius:999px; background:var(--navy); color:var(--ivory); font-size:14px; font-weight:500; border:none; cursor:pointer; transition:transform .2s cubic-bezier(.2,.8,.2,1), background-color .2s ease; }
  .confirm-btn:hover{ transform:translateY(-1px); background:#16243e; }
  .confirm-btn:active{ transform:translateY(0); }
  .confirm-btn:focus-visible{ outline:2px solid var(--brand-red); outline-offset:2px; }
  @media (prefers-reduced-motion: reduce){
    .confirm-overlay, .confirm-card, .confirm-badge, .confirm-close, .confirm-btn{ transition:opacity .2s ease; }
    .confirm-card, .confirm-badge{ transform:none; }
  }