/* ====================================================================
   SACWFM AWARDS — CONSOLIDATED SITE STYLESHEET
   Shared across all pages: index, about, faqs, eligibility, categories,
   sponsorship, contact, gallery.
   ==================================================================== */

/* ---- 1. Core site styles (variables, header, footer, homepage sections, animations) ---- */

  :root{
    /* ===== Brand palette (per luxury Saudi awards spec) ===== */
    --brand: #8B5D3B;             /* Primary */
    --brand-soft: rgba(139,93,59,0.35);
    --bronze-light: #C8A86A;      /* Luxury Gold */
    --gold-highlight: #E8D1A0;    /* Light Gold — shimmer/highlight moments */
    --bronze: #8F6A34;            /* Dark Gold */
    --bronze-deep: #8F6A34;
    --near-black: #2A1C12;         /* Background — darkened #8B5D3B */
    --panel-dark: #8B5D3B;         /* Secondary Background — primary brand color, literal value */
    --panel-darker: #1C130C;       /* deepest — footer floor, darkened #8B5D3B */
    --card-bg: #1B1714;           /* Cards */
    --card-hover: #231D19;        /* Card Hover */
    --cream: #F7F2EA;             /* Text */
    --cream-dim: #C5B8A4;         /* Muted Text */
    --hairline: rgba(200,168,106,0.15); /* Borders */
    --btn-grad-start: #D5B47B;
    --btn-grad-end: #A67A43;
    --shadow-cinematic: 0 20px 60px rgba(0,0,0,0.45);
  }

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

  html{ scroll-behavior:smooth; }

  html,body{
    background:var(--near-black);
    font-family:'Jost', sans-serif;
  }

  img{ max-width:100%; display:block; }

  /* ================= ACCESSIBILITY ================= */

  a:focus-visible,
  button:focus-visible,
  .cat-tab:focus-visible,
  .nav-toggle:focus-visible{
    outline: 2px solid var(--bronze-light);
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* ================= SCROLL REVEAL ================= */

  .reveal{
    opacity:0;
    transform: translateY(30px);
    transition: opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1);
  }

  .reveal.in-view{
    opacity:1;
    transform: translateY(0);
  }

  .reveal-zoom{
    opacity:0;
    transform: scale(0.94);
    transition: opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1);
  }

  .reveal-rise{
    opacity:0;
    transform: translateY(36px) scale(0.95);
    transition: opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1);
  }

  .reveal-rise.in-view{
    opacity:1;
    transform: translateY(0) scale(1);
  }

  .reveal-zoom.in-view{
    opacity:1;
    transform: scale(1);
  }

  @media (prefers-reduced-motion: reduce){
    .reveal, .reveal-zoom, .reveal-rise{
      opacity:1 !important;
      transform:none !important;
      transition:none !important;
    }
  }

  /* ================= HERO ================= */

  .hero{
    position:relative;
    width:100%;
    aspect-ratio:1717/916;
    min-height:460px;
    background:#0e0906;
    overflow:hidden;
    display:flex;
    align-items:center;
  }

  .hero-bg{
    position:absolute;
    inset:0;
    background: url('https://sacwfmawards.com/application/views/themes/PIX01/assets/img/2026/hero-bg.png') center center / cover no-repeat;
    z-index:0;
    animation: heroDrift 30s ease-in-out infinite alternate;
    will-change: transform;
  }

  @keyframes heroDrift{
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.07) translate(-1%, -1%); }
  }

  /* a few drifting sparkle points, echoing the logo's star marks */
  .hero-sparkles{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    overflow:hidden;
  }

  .spark{
    position:absolute;
    width:4px; height:4px;
    border-radius:50%;
    background: var(--bronze-light);
    box-shadow: 0 0 9px 2px rgba(211,172,114,0.85);
    opacity:0;
    animation: sparkFloat 7s ease-in-out infinite;
  }

  @keyframes sparkFloat{
    0%   { transform: translateY(0) scale(0.6); opacity:0; }
    15%  { opacity:0.9; }
    50%  { opacity:0.6; }
    100% { transform: translateY(-70px) scale(1); opacity:0; }
  }

  .spark:nth-child(1){ left:14%; top:70%; animation-delay:0s; }
  .spark:nth-child(2){ left:22%; top:40%; animation-delay:1.4s; }
  .spark:nth-child(3){ left:33%; top:60%; animation-delay:2.8s; }
  .spark:nth-child(4){ left:8%;  top:30%; animation-delay:4.2s; }
  .spark:nth-child(5){ left:44%; top:22%; animation-delay:2s; }
  .spark:nth-child(6){ left:52%; top:75%; animation-delay:5.4s; }
  .spark:nth-child(7){ left:62%; top:34%; animation-delay:0.8s; }
  .spark:nth-child(8){ left:70%; top:66%; animation-delay:3.6s; }
  .spark:nth-child(9){ left:80%; top:26%; animation-delay:1.8s; }
  .spark:nth-child(10){ left:88%; top:58%; animation-delay:4.8s; }
  .spark:nth-child(11){ left:38%; top:80%; animation-delay:6s; }
  .spark:nth-child(12){ left:76%; top:82%; animation-delay:2.6s; }

  /* one flat, light wash — calms the busy artwork without a heavy scrim */
  .hero::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index:1;
    background: rgb(10 7 5 / 74%);
    pointer-events: none;
  }

  .hero-content{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    padding: clamp(90px, 9vw, 130px) 8% 3%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    max-width:74%;
    margin:0 auto;
  }

  .eyebrow-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.85em;
    margin-bottom: clamp(14px, 2.4vw, 26px);
  }

  .eyebrow-line{
    width: clamp(28px, 4vw, 48px);
    height:1px;
    background: linear-gradient(90deg, transparent, var(--bronze-light), transparent);
  }

  .eyebrow{
    font-family:'Jost', sans-serif;
    font-weight:500;
    letter-spacing:0.42em;
    text-transform:uppercase;
    font-size: clamp(11px, 1.05vw, 15px);
    color: var(--bronze-light);
  }

  .eyebrow strong{
    color:var(--cream);
    font-weight:600;
  }

  h1{
    font-family:'Marcellus', serif;
    font-weight:400;
    line-height:1.06;
    color:var(--cream);
    font-size: clamp(28px, 4.3vw, 62px);
    letter-spacing:0.005em;
    text-shadow: 0 2px 24px rgba(0,0,0,0.55);
  }

  h1 .country{
    display:block;
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-weight:500;
    font-size: 0.46em;
    color: var(--bronze-light);
    letter-spacing:0.02em;
    margin-bottom: 0.35em;
  }

  h1 .accent{
    color:var(--bronze-light);
  }

  .hero-lede{
    margin-top: clamp(16px, 2.2vw, 24px);
    max-width: 620px;
    font-family:'Cormorant Garamond', serif;
    font-size: clamp(16px, 1.5vw, 20px);
    line-height:1.65;
    color: var(--cream-dim);
    letter-spacing:0.01em;
  }

  .hero-meta{
    margin-top: clamp(20px, 2.6vw, 30px);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap: clamp(16px, 2.4vw, 30px);
  }

  .hero-meta-item{
    display:flex;
    align-items:center;
    gap:9px;
    font-family:'Jost', sans-serif;
    font-weight:500;
    font-size: clamp(11.5px, 0.95vw, 13px);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color: var(--cream);
  }

  .hero-meta-item svg{
    width:16px; height:16px;
    stroke: var(--bronze-light);
    flex-shrink:0;
  }

  .cta-row{
    margin-top: clamp(28px, 4vw, 46px);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: clamp(12px, 1.4vw, 18px);
  }

  .btn-nominate{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:'Jost', sans-serif;
    font-weight:500;
    letter-spacing:0.22em;
    text-transform:uppercase;
    font-size: clamp(12px, 1vw, 14px);
    color:var(--near-black);
    background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end));
    padding: clamp(13px, 1.5vw, 18px) clamp(28px, 3vw, 42px);
    border-radius: 2px;
    text-decoration:none;
    box-shadow: 0 8px 24px rgba(184,137,79,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
    transition: transform .35s ease, box-shadow .35s ease, gap .35s ease;
    cursor:pointer;
    border:none;
  }

  .btn-nominate svg{
    width:15px; height:15px;
    stroke: var(--near-black);
    transition: transform .35s ease;
  }

  .btn-nominate:hover{
    transform: translateY(-2px) scale(1.02);
    gap:14px;
    box-shadow: 0 16px 40px rgba(200,168,106,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
  }

  .btn-nominate:hover svg{ transform: translateX(3px); }

  .btn-nominate-lg{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:'Jost', sans-serif;
    font-weight:500;
    letter-spacing:0.22em;
    text-transform:uppercase;
    font-size: clamp(12.5px, 1vw, 14px);
    color:var(--near-black);
    background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end));
    padding: clamp(15px, 1.7vw, 20px) clamp(36px, 3.6vw, 52px);
    border-radius: 2px;
    text-decoration:none;
    box-shadow: 0 8px 24px rgba(184,137,79,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
    transition: transform .35s ease, box-shadow .35s ease, gap .35s ease;
  }

  .btn-nominate-lg svg{
    width:16px; height:16px;
    stroke: var(--near-black);
    transition: transform .35s ease;
  }

  .btn-nominate-lg:hover{
    transform: translateY(-2px) scale(1.02);
    gap:18px;
    box-shadow: 0 16px 40px rgba(200,168,106,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
  }

  .btn-nominate-lg:hover svg{ transform: translateX(4px); }

  /* ================= STICKY HEADER ================= */

  .site-header{
    position:fixed;   /* overlays the hero image from first paint, instead of sitting above it */
    top:0;
    left:0; right:0;
    z-index:100;
    display:flex;
    align-items:center;
    padding: clamp(14px, 1.8vw, 22px) clamp(20px, 4vw, 60px);
    background: none;
    border-bottom: 1px solid transparent;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    transition: background .35s ease, box-shadow .35s ease, border-color .35s ease, padding .35s ease;
  }

  .site-header.scrolled{
    background: rgba(14,9,6,0.92);
    border-bottom: 1px solid var(--brand-soft);
    box-shadow: 0 8px 30px rgba(0,0,0,0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding-top: clamp(10px, 1.3vw, 16px);
    padding-bottom: clamp(10px, 1.3vw, 16px);
  }

  .header-inner{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: clamp(16px, 3vw, 40px);
  }

  .logo{
    display:flex;
    align-items:center;
    text-decoration:none;
    flex-shrink:0;
  }

  .logo img{
    height: clamp(58px, 6.8vw, 92px);
    width:auto;
    display:block;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.4));
    transition: height .35s ease;
  }

  .site-header.scrolled .logo img{
    height: clamp(46px, 5vw, 68px);
  }

  .main-nav{
    display:flex;
    align-items:center;
    gap: clamp(8px, 1.3vw, 18px);
  }

  .main-nav a{
    font-family:'Jost', sans-serif;
    font-weight:400;
    font-size: 13px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color: var(--cream-dim);
    text-decoration:none;
    position:relative;
    padding-bottom:5px;
    transition: color .3s ease;
    white-space:nowrap;
  }

  .main-nav a::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:100%;
    height:1px;
    background:var(--bronze-light);
    transform:scaleX(0);
    transform-origin:left;
    transition: transform .3s ease;
  }

  .main-nav a:hover{ color:var(--cream); }
  .main-nav a:hover::after{ transform:scaleX(1); }
  .main-nav a.active{ color: var(--bronze-light); }

  .header-actions{
    display:flex;
    align-items:center;
    gap: 18px;
    flex-shrink:0;
  }

  .btn-header{
    font-family:'Jost', sans-serif;
    font-weight:500;
    font-size: 11.5px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color: var(--cream);
    border: 1px solid var(--bronze-light);
    padding: 10px 22px;
    border-radius: 2px;
    text-decoration:none;
    white-space:nowrap;
    transition: background .35s ease, color .35s ease, transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }

  .btn-header:hover{
    background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end));
    color: var(--near-black);
    border-color: transparent;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 34px rgba(200,168,106,0.35);
  }

  .nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:34px;
    height:34px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
  }

  .nav-toggle span{
    display:block;
    width:100%;
    height:1px;
    background:var(--cream);
    transition: transform .3s ease, opacity .3s ease;
  }

  .nav-toggle.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

  .mobile-panel{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    background: rgba(12,8,5,0.97);
    border-bottom: 1px solid rgba(211,172,114,0.25);
    padding: 8px clamp(20px,4vw,60px) 26px;
    flex-direction:column;
    gap:2px;
  }

  .mobile-panel.open{ display:flex; }

  .mobile-panel a{
    font-family:'Jost', sans-serif;
    font-size:13px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color: var(--cream-dim);
    text-decoration:none;
    padding: 12px 0;
    border-bottom: 1px solid rgba(211,172,114,0.1);
  }

  .mobile-panel a:hover{ color:var(--bronze-light); }

  .mobile-panel .btn-header{
    margin-top:14px;
    align-self:flex-start;
  }

  /* ================= ABOUT SECTION ================= */

  .about{
    position:relative;
    background: linear-gradient(180deg, #0D0A08 0%, #090807 45%, #0D0A08 100%);
    padding: 120px 0;
    overflow:hidden;
  }

  .about::before{
    /* large warm glow, bottom left */
    content:"";
    position:absolute;
    left:-18%;
    bottom:-30%;
    width:700px;
    height:700px;
    pointer-events:none;
    background:
      radial-gradient(
        circle,
        rgba(139,93,59,0.18) 0%,
        rgba(139,93,59,0.10) 25%,
        rgba(139,93,59,0.05) 45%,
        transparent 70%
      );
    filter: blur(60px);
  }

  .about::after{
    /* Saudi geometric pattern, top right */
    content:"";
    position:absolute;
    top:-60px;
    right:-60px;
    width:480px;
    height:480px;
    background:url('https://sacwfmawards.com/application/views/themes/PIX01/assets/img/2026/pattern-lattice.png') top right / 420px no-repeat;
    pointer-events:none;
  }

  .about-pattern-bl{
    content:"";
    position:absolute;
    bottom:-60px;
    left:-60px;
    width:480px;
    height:480px;
    background:url('https://sacwfmawards.com/application/views/themes/PIX01/assets/img/2026/pattern-lattice.png') bottom left / 420px no-repeat;
    transform: scaleX(-1);
    pointer-events:none;
  }

  .about-noise{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0.025;
    background-image: radial-gradient(circle, rgba(255,255,255,0.35) 0.6px, transparent 0.7px);
    background-size: 8px 8px;
  }

  .about-numeral{
    position:absolute;
    top: clamp(-10px, -1vw, 10px);
    right: clamp(20px, 5vw, 70px);
    font-family:'Marcellus', serif;
    font-size: clamp(140px, 20vw, 300px);
    line-height:1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(211,172,114,0.16);
    user-select:none;
    pointer-events:none;
    z-index:0;
  }

  .about-inner{
    position:relative;
    z-index:1;
    width:min(1240px, 92%);
    margin:0 auto;
    display:grid;
    grid-template-columns: 560px 1fr;
    gap: 90px;
    align-items:center;
  }

  /* ---- layered image frame ---- */

  .about-media{
    position:relative;
  }

  .about-media::before{
    content:"";
    position:absolute;
    left:-22px;
    top:-22px;
    width:100%;
    height:100%;
    border:1px solid rgba(200,168,106,0.12);
    border-radius:24px;
    z-index:0;
  }


  .about-media-frame{
    position:relative;
    z-index:2;
    border-radius:24px;
    overflow:hidden;
    border: 1px solid transparent;
    background:
      linear-gradient(#151311, #151311) padding-box,
      conic-gradient(from var(--border-angle), transparent 0%, rgba(200,168,106,0.05) 15%, var(--bronze-light) 27%, #fff3d6 30%, var(--bronze-light) 33%, rgba(200,168,106,0.05) 45%, transparent 60%, transparent 100%) border-box;
    box-shadow:
      0 35px 70px rgba(0,0,0,0.55),
      0 0 0 1px rgba(200,168,106,0.05);
    animation: borderRotate 5s linear infinite;
  }

  .about-media-frame img{
    width:100%;
    aspect-ratio: 2/3;
    object-fit:cover;
    display:block;
    transition: transform .7s ease;
  }

  .about-media:hover .about-media-frame img{
    transform: scale(1.05);
  }

  /* ---- content column ---- */

  .about-content .eyebrow{
    display:inline-block;
    margin-bottom: 18px;
    font-size:14px;
    letter-spacing:4px;
  }

  .about-content h2{
    font-family:"Cormorant Garamond", serif;
    font-weight:600;
    line-height:1.15;
    color:#fff;
    font-size: clamp(32px, 3.6vw, 54px);
    margin: 18px 0 25px;
    letter-spacing:normal;
  }

  .about-content h2 .accent{
    white-space:nowrap;
    display:block;
    color: var(--bronze-light);
  }

  .divider-mark{
    color: var(--bronze-light);
    font-size:22px;
    margin: 18px 0 35px;
    font-style:normal;
  }

  .divider-mark::before,
  .divider-mark::after{
    content:"";
    display:inline-block;
    width:70px;
    height:1px;
    background:rgba(200,168,106,0.3);
    vertical-align:middle;
    margin:0 18px;
  }

  .about-content p{
    font-family:'Cormorant Garamond', serif;
    font-weight:400;
    font-size: clamp(16px, 1.35vw, 18.5px);
    line-height:1.75;
    color: var(--cream-dim);
    letter-spacing:0.01em;
    margin-bottom: clamp(16px, 1.9vw, 20px);
  }

  .about-content p:first-of-type::first-letter{
    font-family:'Marcellus', serif;
    font-size: 2.5em;
    line-height:0.85;
    float:left;
    padding-right:0.1em;
    color: var(--bronze-light);
  }

  .about-content p b{
    color: var(--cream);
    font-weight:600;
  }

  .about-content > .btn-header{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:16px 34px;
    margin-top:18px;
    color:#fff;
    font-family:'Jost', sans-serif;
    font-weight:500;
    font-size:14px;
    letter-spacing:normal;
    text-transform:none;
    border:none;
    border-radius:10px;
    background: linear-gradient(180deg, #C89C60, #8B5D3B);
    box-shadow: 0 12px 30px rgba(139,93,59,0.35);
    transition: transform .35s ease, box-shadow .35s ease;
  }

  .about-content > .btn-header svg{
    width:14px; height:14px;
    stroke:currentColor;
    transition: transform .3s ease;
  }

  .about-content > .btn-header:hover{
    transform: translateY(-4px);
    background: linear-gradient(180deg, #C89C60, #8B5D3B);
    box-shadow: 0 20px 45px rgba(139,93,59,0.5);
  }

  .about-content > .btn-header:hover svg{
    transform: translateX(3px);
  }

  /* ================= CATEGORIES ================= */

  .categories{
    position:relative;
    background: var(--near-black);
    padding: clamp(60px, 8vw, 110px) 8% clamp(65px, 8.5vw, 110px);
    border-top: 1px solid rgba(139,93,59,0.4);
    overflow:hidden;
  }

  .categories::before{
    content:"";
    position:absolute;
    top:0; right:0;
    width: clamp(240px, 34vw, 460px);
    height: clamp(180px, 26vw, 340px);
    background: url('https://sacwfmawards.com/application/views/themes/PIX01/assets/img/2026/pattern-lattice.png') right top / contain no-repeat;
    opacity:0.05; /* subtle Saudi geometric pattern accent, 2-5% per spec */

    pointer-events:none;
  }

  .cat-head{
    position:relative;
    z-index:1;
    max-width:800px;
    margin:0 auto clamp(46px, 6vw, 72px);
    text-align:center;
  }

  .cat-head .eyebrow{
    display:inline-block;
    margin-bottom: clamp(14px, 2vw, 20px);
  }

  .cat-head h2{
    font-family:'Marcellus', serif;
    font-weight:400;
    line-height:1.16;
    color: var(--cream);
    font-size: clamp(30px, 3.6vw, 48px);
    margin-bottom: clamp(14px, 1.8vw, 20px);
  }

  .cat-head p{
    font-family:'Cormorant Garamond', serif;
    font-size: clamp(17px, 1.4vw, 20px);
    line-height:1.7;
    color: var(--cream-dim);
  }

  /* ---- tabs ---- */

  .cat-tabs{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap: clamp(10px, 1.6vw, 18px);
    margin-bottom: clamp(40px, 5vw, 60px);
  }

  .cat-tab{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 13px 22px;
    border: 1px solid rgba(211,172,114,0.28);
    border-radius: 2px;
    background: transparent;
    color: var(--cream-dim);
    font-family:'Jost', sans-serif;
    font-weight:500;
    font-size: 12px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    cursor:pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
    white-space:nowrap;
  }

  .cat-tab svg{
    width:16px; height:16px;
    stroke: currentColor;
    flex-shrink:0;
    opacity:0.85;
  }

  .cat-tab:hover{
    border-color: var(--bronze-light);
    color: var(--cream);
  }

  .cat-tab.active{
    background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end));
    border-color: transparent;
    color: var(--near-black);
    box-shadow: 0 8px 22px rgba(184,137,79,0.3);
  }

  /* ---- panels ---- */

  .cat-panels{
    position:relative;
    z-index:1;
  }

  .cat-panel{
    display:none;
    animation: catFadeIn .5s ease;
  }

  .cat-panel.active{ display:block; }

  @keyframes catFadeIn{
    from{ opacity:0; transform: translateY(8px); }
    to{ opacity:1; transform: translateY(0); }
  }

  .cat-slider{
    position:relative;
    max-width:1180px;
    margin:0 auto;
    display:flex;
    align-items:center;
    gap: clamp(8px, 1.4vw, 20px);
  }

  .cat-viewport{
    flex:1;
    min-width:0;
    overflow:hidden;
  }

  .cat-track{
    display:flex;
    gap: clamp(14px, 1.8vw, 22px);
    transition: transform .6s cubic-bezier(.65,0,.35,1);
    will-change: transform;
  }

  .cat-track.no-transition{ transition:none; }

  .cat-track .cat-card{
    flex: 0 0 calc(25% - clamp(11px, 1.35vw, 16.5px));
    min-width:0;
  }

  .cat-track.center-single{
    justify-content:center;
    width:100%;
  }

  .cat-slide-btn{
    flex-shrink:0;
    width:42px; height:42px;
    border-radius:50%;
    border:1px solid var(--hairline);
    background:transparent;
    color: var(--bronze-light);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
  }

  .cat-slide-btn svg{ width:18px; height:18px; stroke:currentColor; }

  .cat-slide-btn:hover{
    background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end));
    color: var(--near-black);
    border-color: transparent;
    transform: scale(1.06);
  }

  .cat-slide-btn:disabled{
    opacity:0.3;
    cursor:default;
    pointer-events:none;
  }

  .cat-card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: 14px;
    padding: 26px 18px 22px;
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(200,168,106,0.09), transparent 55%),
      linear-gradient(160deg, #211A15 0%, #1B1512 55%, #120E0B 100%);
    border: 1px solid rgba(200,168,106,0.2);
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.04);
    transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
    will-change: transform;
  }

  .cat-card:hover{
    border-color: rgba(200,168,106,0.5);
    transform: translateY(-6px);
    box-shadow: var(--shadow-cinematic), 0 0 34px rgba(200,168,106,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
  }

  .wreath-wrap{
    position:relative;
    width:100%;
    max-width:230px;
    aspect-ratio: 1 / 1;
    margin:0 auto;
  }

  .wreath-icon{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    opacity:0.9;
    transition: opacity .4s ease, transform .5s ease;
  }

  .cat-card:hover .wreath-icon{
    opacity:1;
    transform: scale(1.03);
  }

  .wreath-text{
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 0 22%;
    text-align:center;
  }

  .wreath-text h3{
    font-family:'Marcellus', serif;
    font-weight:400;
    font-size: clamp(10.5px, 0.9vw, 12.5px);
    line-height:1.26;
    color: var(--cream);
  }

  .cat-nominate{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-family:'Jost', sans-serif;
    font-weight:500;
    font-size:9.5px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color: var(--bronze-light);
    text-decoration:none;
    padding: 6px 14px;
    border: 1px solid var(--hairline);
    border-radius: 20px;
    transition: background .35s ease, color .35s ease, border-color .35s ease, gap .35s ease, transform .35s ease, box-shadow .35s ease;
  }

  .cat-nominate svg{
    width:9px; height:9px;
    stroke:currentColor;
    transition: transform .3s ease;
  }

  .cat-nominate:hover{
    background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end));
    color: var(--near-black);
    border-color: transparent;
    gap:7px;
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 8px 20px rgba(200,168,106,0.3);
  }


  /* ================= NOMINATION JOURNEY ================= */

  .journey{
    position:relative;
    background:#090807;
    padding: clamp(60px, 8vw, 110px) 8%;
    border-top: 1px solid rgba(200,168,106,0.18);
    overflow:hidden;
  }

  .journey::before{
    /* soft gold ambient light, top center */
    content:"";
    position:absolute;
    top:-15%; left:50%;
    width:900px; height:600px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(200,168,106,0.1) 0%, rgba(200,168,106,0.04) 40%, transparent 70%);
    pointer-events:none;
  }

  .journey-particles{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
  }

  .jspark{
    position:absolute;
    width:3px; height:3px;
    border-radius:50%;
    background: var(--bronze-light);
    box-shadow: 0 0 7px 1px rgba(211,172,114,0.7);
    opacity:0;
    animation: sparkFloat 8s ease-in-out infinite;
  }

  .jspark:nth-child(1){ left:8%;  top:20%; animation-delay:0s; }
  .jspark:nth-child(2){ left:18%; top:70%; animation-delay:1.6s; }
  .jspark:nth-child(3){ left:88%; top:25%; animation-delay:3.2s; }
  .jspark:nth-child(4){ left:80%; top:78%; animation-delay:4.6s; }
  .jspark:nth-child(5){ left:50%; top:10%; animation-delay:2.2s; }
  .jspark:nth-child(6){ left:44%; top:90%; animation-delay:5.8s; }

  .journey-head{
    position:relative;
    z-index:1;
    max-width:700px;
    margin:0 auto clamp(70px, 8vw, 110px);
    text-align:center;
  }

  .journey-head .eyebrow{ display:inline-block; margin-bottom: clamp(14px, 2vw, 20px); }

  .journey-head h2{
    font-family:'Marcellus', serif;
    font-weight:400;
    line-height:1.18;
    color: var(--cream);
    font-size: clamp(28px, 3.4vw, 44px);
    margin-bottom: clamp(12px, 1.6vw, 18px);
  }

  .journey-head p{
    font-family:'Cormorant Garamond', serif;
    font-size: clamp(16px, 1.3vw, 19px);
    color: var(--cream-dim);
  }

  /* ---- step layout ---- */

  .journey-grid{
    position:relative;
    z-index:1;
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 44px);
  }

  /* connecting line behind the three numbered circles, with a light that travels across it */
  .journey-line{
    position:absolute;
    top:32px;
    left:16.6%;
    right:16.6%;
    height:1px;
    background: linear-gradient(90deg, transparent, var(--hairline) 12%, var(--hairline) 88%, transparent);
    overflow:hidden;
    z-index:0;
  }

  .journey-line-flow{
    position:absolute;
    top:0; left:-22%;
    width:22%;
    height:100%;
    background: linear-gradient(90deg, transparent, var(--bronze-light), transparent);
    animation: journeyFlow 4.5s linear infinite;
  }

  @keyframes journeyFlow{
    0%   { left:-22%; }
    100% { left:100%; }
  }

  .journey-step{
    position:relative;
    z-index:1;
    text-align:center;
  }

  .journey-step-number{
    position:relative;
    z-index:1;
    width:64px; height:64px;
    margin:0 auto clamp(18px, 2.2vw, 24px);
    border-radius:50%;
    border:1px solid var(--bronze-light);
    background: var(--near-black);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Marcellus', serif;
    font-size:24px;
    color: var(--bronze-light);
    transition: background .4s ease, color .4s ease, box-shadow .4s ease, transform .4s ease;
  }

  .journey-step:hover .journey-step-number{
    background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end));
    color: var(--near-black);
    box-shadow: 0 0 0 7px rgba(200,168,106,0.12), 0 8px 22px rgba(200,168,106,0.3);
    transform: scale(1.06);
  }

  /* ---- scaled-down mockup frame ---- */

  .mockup-frame{
    position:relative;
    width:100%;
    max-width:340px;
    height:180px;
    margin:0 auto clamp(18px, 2.2vw, 24px);
    overflow:hidden;
    border-radius:14px;
  }

  .mockup-frame .browser-mockup{
    position:absolute;
    top:0; left:0;
    width:760px;
    max-width:none;
    transform-origin: top left;
    transform: scale(0.447);
  }

  .mockup-frame .browser-mockup:hover{
    transform: translateY(-8px) scale(0.447);
  }

  .journey-step-text{
    max-width:280px;
    margin:0 auto;
  }

  .journey-step-text h3{
    font-family:'Marcellus', serif;
    font-weight:400;
    font-size: clamp(17px, 1.5vw, 19.5px);
    color: var(--cream);
    margin-bottom: 8px;
  }

  .journey-step-text p{
    font-family:'Cormorant Garamond', serif;
    font-size: clamp(14.5px, 1.05vw, 16px);
    line-height:1.6;
    color: var(--cream-dim);
  }

  .journey-cta{
    position:relative;
    z-index:1;
    text-align:center;
    margin-top: clamp(40px, 5vw, 60px);
  }

  /* ---- browser mockup chrome ---- */

  .browser-mockup{
    width:100%;
    max-width:760px;
    margin:0 auto;
    border-radius:16px;
    border:1px solid rgba(200,168,106,0.18);
    background:#151311;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(200,168,106,0.06);
    overflow:hidden;
    transition: transform .45s ease, box-shadow .45s ease;
  }

  .browser-mockup:hover{
    transform: translateY(-8px);
    box-shadow: 0 35px 80px rgba(0,0,0,0.6), 0 0 40px rgba(200,168,106,0.25);
  }

  .browser-chrome{
    display:flex;
    align-items:center;
    gap:7px;
    padding: 13px 18px;
    background:#0f0d0b;
    border-bottom:1px solid rgba(200,168,106,0.12);
  }

  .chrome-dot{
    width:9px; height:9px;
    border-radius:50%;
    background: rgba(200,168,106,0.3);
    flex-shrink:0;
  }

  .chrome-address{
    margin-left:12px;
    flex:1;
    background:#090807;
    border:1px solid rgba(200,168,106,0.12);
    border-radius:20px;
    padding:6px 16px;
    font-family:'Jost', sans-serif;
    font-size:11px;
    letter-spacing:0.02em;
    color: var(--cream-dim);
    text-align:left;
  }

  .browser-body{
    position:relative;
    min-height:360px;
    padding: clamp(30px, 4.4vw, 52px) clamp(20px, 3.4vw, 40px);
    display:flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(160deg, #151311 0%, #100e0c 100%);
    transition: transform .55s cubic-bezier(.22,.8,.32,1);
  }

  /* zoom focal point per step — aimed at the button / cards, never the chrome above */
  .mockup-account .browser-body{ transform-origin: 50% 78%; }
  .mockup-categories .browser-body{ transform-origin: 50% 55%; }
  .mockup-form .browser-body{ transform-origin: 50% 84%; }

  .browser-mockup:hover .browser-body{
    transform: scale(1.16);
  }

  /* ---- shared cursor ---- */

  .mock-cursor{
    position:absolute;
    width:20px; height:20px;
    color: var(--cream);
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.6));
    z-index:5;
    pointer-events:none;
  }

  .mock-cursor svg{ width:100%; height:100%; }

  /* ---- account form (step 1) ---- */

  .mock-form{
    position:relative;
    width:100%;
    max-width:320px;
    text-align:left;
  }

  .mock-form h4{
    font-family:'Marcellus', serif;
    font-weight:400;
    font-size:19px;
    color: var(--cream);
    text-align:center;
    margin-bottom:22px;
  }

  .mock-field{ margin-bottom:16px; }

  .mock-field label{
    display:block;
    font-family:'Jost', sans-serif;
    font-size:10px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color: var(--cream-dim);
    margin-bottom:7px;
  }

  .mock-input{
    position:relative;
    background:#0c0a08;
    border:1px solid rgba(200,168,106,0.18);
    border-radius:8px;
    padding:10px 14px;
    min-height:20px;
    display:flex;
    align-items:center;
    overflow:hidden;
    font-family:'Jost', sans-serif;
    font-size:13px;
    color: var(--cream);
    transition: border-color .3s ease, box-shadow .3s ease;
  }

  .mock-input-text{
    display:inline-block;
    white-space:nowrap;
    clip-path: inset(0 100% 0 0);
  }

  .mock-select{ color: var(--cream-dim); font-size:12.5px; }

  .mock-btn{
    width:100%;
    margin-top:6px;
    padding:12px;
    border:none;
    border-radius:8px;
    background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end));
    color: var(--near-black);
    font-family:'Jost', sans-serif;
    font-weight:600;
    font-size:12.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    cursor:default;
    box-shadow: 0 8px 20px rgba(200,168,106,0.25);
    transform-origin:center;
  }

  .mock-success{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:14px;
    padding:10px;
    border-radius:8px;
    background: rgba(120,180,140,0.1);
    border:1px solid rgba(120,180,140,0.3);
    color:#9FD8AE;
    font-family:'Jost', sans-serif;
    font-size:12px;
    letter-spacing:0.03em;
    opacity:0;
    transform: scale(0.9);
  }

  .mock-success svg{ width:15px; height:15px; stroke:#9FD8AE; flex-shrink:0; }

  /* ---- category grid (step 2) ---- */

  .mock-cat-grid{
    position:relative;
    width:100%;
    height:200px;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
  }

  .mock-cat-card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:22px 10px;
    background:#0f0d0b;
    border:1px solid rgba(200,168,106,0.15);
    border-radius:12px;
    font-family:'Jost', sans-serif;
    font-size:11.5px;
    letter-spacing:0.02em;
    color: var(--cream-dim);
    text-align:center;
    transition: border-color .4s ease, box-shadow .4s ease, background .4s ease;
  }

  .mcc-icon{
    width:26px; height:26px;
    border-radius:50%;
    border:1px solid var(--bronze-light);
  }

  .mock-cat-card.mcc-selected{
    border-color: rgba(200,168,106,0.7);
    background:#171310;
    box-shadow: 0 0 22px rgba(200,168,106,0.35), inset 0 0 0 1px rgba(200,168,106,0.2);
    color: var(--cream);
  }

  .mock-cat-card.mcc-selected .mcc-icon{
    background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end));
  }

  /* ---- nomination form (step 3) ---- */

  .mock-form-wide{ max-width:420px; }

  .mock-field-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
  }

  .mock-upload{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:18px 14px;
    border:1px dashed rgba(200,168,106,0.3);
    border-radius:10px;
    text-align:center;
  }

  .mock-upload svg{ width:20px; height:20px; stroke: var(--bronze-light); }

  .mock-upload span{
    font-family:'Jost', sans-serif;
    font-size:11px;
    color: var(--cream-dim);
  }

  .mock-upload-bar{
    width:100%;
    height:3px;
    border-radius:2px;
    background: rgba(200,168,106,0.15);
    overflow:hidden;
    margin-top:2px;
  }

  .mock-upload-fill{
    display:block;
    height:100%;
    width:0%;
    background: linear-gradient(90deg, var(--btn-grad-start), var(--btn-grad-end));
  }

  /* ================================================================
     STEP 1 ANIMATION — Create Account (9s loop)
     ================================================================ */

  .mock-cursor-account{ animation: cursorAccount 9s ease-in-out infinite; }
  .mock-type-email{ animation: typeEmail 9s linear infinite; }
  .mock-type-password{ animation: typePassword 9s linear infinite; }
  .mock-btn-account{ animation: btnPressAccount 9s ease-in-out infinite; }
  .mock-success-account{ animation: successPop 9s ease-in-out infinite; }

  @keyframes cursorAccount{
    0%   { opacity:0; left:69%; transform: translateY(-24px) scale(1); }
    5%   { opacity:1; left:69%; transform: translateY(-24px) scale(1); }
    16%  { left:80%; transform: translateY(75px) scale(1); }
    19%  { left:80%; transform: translateY(75px) scale(0.8); }
    22%  { left:80%; transform: translateY(75px) scale(1); }
    38%  { left:80%; transform: translateY(75px) scale(1); }
    46%  { left:80%; transform: translateY(148px) scale(1); }
    49%  { left:80%; transform: translateY(148px) scale(0.8); }
    52%  { left:80%; transform: translateY(148px) scale(1); }
    64%  { left:80%; transform: translateY(148px) scale(1); }
    73%  { left:50%; transform: translateY(212px) scale(1); }
    76%  { left:50%; transform: translateY(212px) scale(0.75); }
    79%  { left:50%; transform: translateY(212px) scale(1); }
    90%  { opacity:1; left:50%; transform: translateY(212px) scale(1); }
    94%  { opacity:0; left:50%; transform: translateY(212px) scale(1); }
    100% { opacity:0; left:69%; transform: translateY(-24px) scale(1); }
  }

  @keyframes typeEmail{
    0%   { clip-path: inset(0 100% 0 0); }
    19%  { clip-path: inset(0 100% 0 0); }
    38%  { clip-path: inset(0 0% 0 0); animation-timing-function: steps(14,end); }
    93%  { clip-path: inset(0 0% 0 0); }
    97%  { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 100% 0 0); }
  }

  @keyframes typePassword{
    0%   { clip-path: inset(0 100% 0 0); }
    49%  { clip-path: inset(0 100% 0 0); }
    64%  { clip-path: inset(0 0% 0 0); animation-timing-function: steps(10,end); }
    93%  { clip-path: inset(0 0% 0 0); }
    97%  { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 100% 0 0); }
  }

  @keyframes btnPressAccount{
    0%, 74%   { transform: scale(1); box-shadow: 0 8px 20px rgba(200,168,106,0.25); }
    77%       { transform: scale(0.96); box-shadow: 0 4px 10px rgba(200,168,106,0.2); }
    80%, 93%  { transform: scale(1); box-shadow: 0 8px 26px rgba(200,168,106,0.4); }
    97%,100%  { transform: scale(1); box-shadow: 0 8px 20px rgba(200,168,106,0.25); }
  }

  @keyframes successPop{
    0%, 79%  { opacity:0; transform: scale(0.9); }
    84%      { opacity:1; transform: scale(1.03); }
    88%      { transform: scale(1); }
    93%      { opacity:1; transform: scale(1); }
    97%,100% { opacity:0; transform: scale(0.9); }
  }

  /* ================================================================
     STEP 2 ANIMATION — Explore Categories (9s loop)
     ================================================================ */

  .mock-cursor-categories{ animation: cursorCategories 9s ease-in-out infinite; }
  .mcc-1{ animation: selectCard1 9s ease-in-out infinite; }
  .mcc-3{ animation: hoverPulse 9s ease-in-out infinite; animation-delay:0s; }
  .mcc-5{ animation: hoverPulse5 9s ease-in-out infinite; }

  @keyframes cursorCategories{
    0%   { opacity:0; left:8%;    top:-16px; }
    6%   { opacity:1; left:8%;    top:-16px; }
    20%  { left:16.6%; top:50px; }
    22%  { left:16.6%; top:50px; }
    36%  { left:50%;   top:50px; }
    38%  { left:50%;   top:50px; }
    52%  { left:83.3%; top:150px; }
    54%  { left:83.3%; top:150px; }
    62%  { left:16.6%; top:50px; }
    65%  { left:16.6%; top:50px; transform: scale(0.8); }
    68%  { left:16.6%; top:50px; transform: scale(1); }
    90%  { opacity:1; left:16.6%; top:50px; }
    95%  { opacity:0; left:16.6%; top:50px; }
    100% { opacity:0; left:8%; top:-16px; }
  }

  @keyframes selectCard1{
    0%, 64%   { border-color: rgba(200,168,106,0.15); background:#0f0d0b; box-shadow:none; color: var(--cream-dim); }
    68%, 92%  { border-color: rgba(200,168,106,0.7); background:#171310; box-shadow: 0 0 22px rgba(200,168,106,0.35), inset 0 0 0 1px rgba(200,168,106,0.2); color: var(--cream); }
    97%,100%  { border-color: rgba(200,168,106,0.15); background:#0f0d0b; box-shadow:none; color: var(--cream-dim); }
  }

  @keyframes hoverPulse{
    0%, 21%, 40%,100% { border-color: rgba(200,168,106,0.15); background:#0f0d0b; }
    27%, 33%          { border-color: rgba(200,168,106,0.45); background:#141210; }
  }

  @keyframes hoverPulse5{
    0%, 37%, 56%,100% { border-color: rgba(200,168,106,0.15); background:#0f0d0b; }
    43%, 49%          { border-color: rgba(200,168,106,0.45); background:#141210; }
  }

  /* ================================================================
     STEP 3 ANIMATION — Submit Nomination (10s loop)
     ================================================================ */

  .mock-cursor-form{ animation: cursorForm 10s ease-in-out infinite; }
  .mock-type-name{ animation: typeName 10s linear infinite; }
  .mock-type-company{ animation: typeCompany 10s linear infinite; }
  .mock-select{ animation: selectPulse 10s ease-in-out infinite; }
  .mock-upload{ animation: uploadPulse 10s ease-in-out infinite; }
  .mock-upload-fill{ animation: uploadFill 10s ease-in-out infinite; }
  .mock-btn-submit{ animation: btnPressSubmit 10s ease-in-out infinite; }
  .mock-success-submit{ animation: successPopSubmit 10s ease-in-out infinite; }

  @keyframes cursorForm{
    0%   { opacity:0; left:50%; transform: translateY(-24px) scale(1); }
    4%   { opacity:1; left:50%; transform: translateY(-24px) scale(1); }
    13%  { left:23%; transform: translateY(83px) scale(1); }
    16%  { left:23%; transform: translateY(83px) scale(0.8); }
    19%  { left:23%; transform: translateY(83px) scale(1); }
    28%  { left:23%; transform: translateY(83px) scale(1); }
    34%  { left:76%; transform: translateY(83px) scale(1); }
    37%  { left:76%; transform: translateY(83px) scale(0.8); }
    40%  { left:76%; transform: translateY(83px) scale(1); }
    50%  { left:76%; transform: translateY(83px) scale(1); }
    56%  { left:50%; transform: translateY(156px) scale(1); }
    59%  { left:50%; transform: translateY(156px) scale(0.8); }
    62%  { left:50%; transform: translateY(156px) scale(1); }
    68%  { left:50%; transform: translateY(250px) scale(1); }
    71%  { left:50%; transform: translateY(250px) scale(0.8); }
    74%  { left:50%; transform: translateY(250px) scale(1); }
    84%  { left:50%; transform: translateY(325px) scale(1); }
    87%  { left:50%; transform: translateY(325px) scale(0.75); }
    90%  { left:50%; transform: translateY(325px) scale(1); }
    95%  { opacity:1; left:50%; transform: translateY(325px) scale(1); }
    98%  { opacity:0; left:50%; transform: translateY(325px) scale(1); }
    100% { opacity:0; left:50%; transform: translateY(-24px) scale(1); }
  }

  @keyframes typeName{
    0%   { clip-path: inset(0 100% 0 0); }
    16%  { clip-path: inset(0 100% 0 0); }
    28%  { clip-path: inset(0 0% 0 0); animation-timing-function: steps(13,end); }
    94%  { clip-path: inset(0 0% 0 0); }
    97%  { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 100% 0 0); }
  }

  @keyframes typeCompany{
    0%   { clip-path: inset(0 100% 0 0); }
    37%  { clip-path: inset(0 100% 0 0); }
    50%  { clip-path: inset(0 0% 0 0); animation-timing-function: steps(17,end); }
    94%  { clip-path: inset(0 0% 0 0); }
    97%  { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 100% 0 0); }
  }

  @keyframes selectPulse{
    0%, 58%  { border-color: rgba(200,168,106,0.18); }
    62%      { border-color: rgba(200,168,106,0.6); box-shadow: 0 0 16px rgba(200,168,106,0.25); }
    68%,100% { border-color: rgba(200,168,106,0.18); box-shadow:none; }
  }

  @keyframes uploadPulse{
    0%, 70%  { border-color: rgba(200,168,106,0.3); }
    74%, 82% { border-color: rgba(200,168,106,0.6); }
    88%,100% { border-color: rgba(200,168,106,0.3); }
  }

  @keyframes uploadFill{
    0%, 73%  { width:0%; }
    84%      { width:100%; }
    94%,100% { width:100%; }
  }

  @keyframes btnPressSubmit{
    0%, 88%  { transform: scale(1); box-shadow: 0 8px 20px rgba(200,168,106,0.25); }
    91%      { transform: scale(0.96); box-shadow: 0 4px 10px rgba(200,168,106,0.2); }
    94%,97%  { transform: scale(1); box-shadow: 0 8px 26px rgba(200,168,106,0.4); }
    100%     { transform: scale(1); box-shadow: 0 8px 20px rgba(200,168,106,0.25); }
  }

  @keyframes successPopSubmit{
    0%, 93%  { opacity:0; transform: scale(0.9); }
    96%      { opacity:1; transform: scale(1.03); }
    98%      { opacity:1; transform: scale(1); }
    100%     { opacity:0; transform: scale(0.9); }
  }

  /* ================= KEY DATES ================= */

  .dates{
    position:relative;
    background: var(--near-black);
    padding: clamp(60px, 8vw, 110px) 8% clamp(65px, 8.5vw, 110px);
    border-top: 1px solid rgba(139,93,59,0.4);
    overflow:hidden;
  }

  .dates::before{
    content:"";
    position:absolute;
    top:0; right:0;
    width: clamp(220px, 30vw, 400px);
    height: clamp(160px, 22vw, 300px);
    background: url('https://sacwfmawards.com/application/views/themes/PIX01/assets/img/2026/pattern-lattice.png') right top / contain no-repeat;
    opacity:0.05; /* subtle Saudi geometric pattern accent, 2-5% per spec */
    pointer-events:none;
  }

  .dates-head{
    position:relative;
    z-index:1;
    max-width:760px;
    margin:0 auto clamp(56px, 7vw, 90px);
    text-align:center;
  }

  .dates-head .eyebrow{
    display:inline-block;
    margin-bottom: clamp(14px, 2vw, 20px);
  }

  .dates-head h2{
    font-family:'Marcellus', serif;
    font-weight:400;
    line-height:1.16;
    color: var(--cream);
    font-size: clamp(30px, 3.6vw, 48px);
  }

  .dates-track{
    position:relative;
    z-index:1;
    max-width:1080px;
    margin:0 auto;
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2vw, 24px);
  }

  @property --border-angle{
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
  }

  .date-item{
    position:relative;
    text-align:center;
    padding: clamp(30px, 3vw, 40px) clamp(14px, 1.6vw, 22px);
    border-radius: 20px;
    border: 1px solid transparent;
    background:
      linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
      conic-gradient(from var(--border-angle), transparent 0%, rgba(200,168,106,0.05) 15%, var(--bronze-light) 27%, #fff3d6 30%, var(--bronze-light) 33%, rgba(200,168,106,0.05) 45%, transparent 60%, transparent 100%) border-box;
    box-shadow: 0 12px 30px rgba(0,0,0,0.28), 0 0 0 1px rgba(200,168,106,0.05);
    transition: transform .35s ease, box-shadow .35s ease;
    animation: borderRotate 5s linear infinite, cardBreathe 4s ease-in-out infinite;
    will-change: transform;
  }

  @keyframes borderRotate{
    to{ --border-angle: 360deg; }
  }

  @keyframes cardBreathe{
    0%, 100% { box-shadow: 0 12px 30px rgba(0,0,0,0.28), 0 0 0 1px rgba(200,168,106,0.05), 0 0 18px rgba(200,168,106,0.06); }
    50%      { box-shadow: 0 12px 30px rgba(0,0,0,0.28), 0 0 0 1px rgba(200,168,106,0.05), 0 0 28px rgba(200,168,106,0.16); }
  }

  /* elegant corner accents, ticket-style */
  .date-item::after{
    content:"";
    position:absolute;
    inset:9px;
    border-radius:12px;
    pointer-events:none;
    background-image:
      linear-gradient(rgba(200,168,106,0.55), rgba(200,168,106,0.55)), linear-gradient(rgba(200,168,106,0.55), rgba(200,168,106,0.55)),
      linear-gradient(rgba(200,168,106,0.55), rgba(200,168,106,0.55)), linear-gradient(rgba(200,168,106,0.55), rgba(200,168,106,0.55)),
      linear-gradient(rgba(200,168,106,0.55), rgba(200,168,106,0.55)), linear-gradient(rgba(200,168,106,0.55), rgba(200,168,106,0.55)),
      linear-gradient(rgba(200,168,106,0.55), rgba(200,168,106,0.55)), linear-gradient(rgba(200,168,106,0.55), rgba(200,168,106,0.55));
    background-repeat: no-repeat;
    background-size: 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px;
    background-position:
      top left, top left,
      top right, top right,
      bottom left, bottom left,
      bottom right, bottom right;
    opacity:0.7;
    transition: opacity .35s ease;
  }

  .date-item:hover::after{ opacity:1; }

  .date-item::before{
    content:"";
    position:absolute;
    top:0; left:50%;
    width:40px; height:1px;
    background: var(--bronze-light);
    transform: translateX(-50%);
    opacity:0.6;
    transition: width .35s ease;
    z-index:1;
  }

  .date-item:hover{
    transform: translateY(-6px);
    box-shadow: var(--shadow-cinematic), 0 0 36px rgba(200,168,106,0.22), 0 0 0 1px rgba(200,168,106,0.05);
  }

  .date-item:hover::before{ width:64px; }

  .date-marker-wrap{
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom: clamp(16px, 2vw, 22px);
  }

  .date-marker{
    position:relative;
    width:12px; height:12px;
    background: var(--bronze-light);
    transform: rotate(45deg);
    z-index:1;
  }

  .date-marker::after{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:50%;
    border:1px solid rgba(211,172,114,0.55);
    animation: datePulse 2.8s ease-out infinite;
  }

  .date-item:nth-child(2) .date-marker::after{ animation-delay:0.5s; }
  .date-item:nth-child(3) .date-marker::after{ animation-delay:1s; }
  .date-item:nth-child(4) .date-marker::after{ animation-delay:1.5s; }

  .date-item:nth-child(2){ animation-delay: 0s, 0.7s; }
  .date-item:nth-child(3){ animation-delay: 0s, 1.4s; }
  .date-item:nth-child(4){ animation-delay: 0s, 2.1s; }

  @keyframes datePulse{
    0%   { transform: scale(0.6); opacity:0.85; }
    80%  { transform: scale(2.1); opacity:0; }
    100% { opacity:0; }
  }

  .date-value{
    display:block;
    font-family:'Marcellus', serif;
    font-weight:400;
    font-size: clamp(23px, 2.2vw, 32px);
    line-height:1.35;
    padding-bottom:4px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, var(--bronze) 0%, var(--bronze-light) 25%, #fbecd2 50%, var(--bronze-light) 75%, var(--bronze) 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: dateShimmer 6s linear infinite;
  }

  @keyframes dateShimmer{
    0%   { background-position: 0% center; }
    100% { background-position: -220% center; }
  }

  .date-label{
    display:block;
    font-family:'Jost', sans-serif;
    font-weight:500;
    font-size: clamp(10.5px, 0.85vw, 12px);
    letter-spacing:0.14em;
    text-transform:uppercase;
    color: var(--cream-dim);
  }

  /* ================= ORGANISERS ================= */

  .organisers{
    position:relative;
    background: var(--panel-dark);
    padding: clamp(60px, 8vw, 110px) 8% clamp(65px, 8.5vw, 110px);
    border-top: 1px solid rgba(139,93,59,0.4);
    overflow:hidden;
  }

  .organisers::after{
    /* scrim so text stays readable against the literal brand-color background */
    content:"";
    position:absolute;
    inset:0;
    background: rgba(0,0,0,0.4);
    pointer-events:none;
    z-index:0;
  }

  .organisers::before{
    content:"";
    position:absolute;
    bottom:0; left:0;
    width: clamp(220px, 30vw, 400px);
    height: clamp(160px, 22vw, 300px);
    background: url('https://sacwfmawards.com/application/views/themes/PIX01/assets/img/2026/pattern-lattice.png') left bottom / contain no-repeat;
    transform: scaleX(-1);
    opacity:0.05; /* subtle Saudi geometric pattern accent, 2-5% per spec */
    pointer-events:none;
  }

  .organisers-head{
    position:relative;
    z-index:1;
    max-width:700px;
    margin:0 auto clamp(50px, 6vw, 76px);
    text-align:center;
  }

  .organisers-head .eyebrow{
    display:inline-block;
    margin-bottom: clamp(14px, 2vw, 20px);
  }

  .organisers-head h2{
    font-family:'Marcellus', serif;
    font-weight:400;
    color: var(--cream);
    font-size: clamp(30px, 3.6vw, 48px);
  }

  .organisers-grid{
    position:relative;
    z-index:1;
    max-width:1140px;
    margin:0 auto;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.4vw, 32px);
  }

  .organiser-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap: 18px;
    padding: clamp(28px, 3vw, 40px) clamp(22px, 2.6vw, 30px);
    background: var(--card-bg);
    border: 1px solid var(--hairline);
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.28);
    transition: border-color .35s ease, transform .35s ease, background .35s ease, box-shadow .35s ease;
    will-change: transform;
  }

  .organiser-card:hover{
    border-color: rgba(200,168,106,0.45);
    transform: translateY(-6px);
    background: var(--card-hover);
    box-shadow: var(--shadow-cinematic), 0 0 32px rgba(200,168,106,0.14);
  }

  .organiser-logo-wrap{
    width:150px;
    height:64px;
    background: rgba(247,242,234,0.95);
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    overflow:hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  }

  .organiser-logo-wrap img{
    transition: transform .5s ease;
  }

  .organiser-card:hover .organiser-logo-wrap img{
    transform: scale(1.06);
  }

  .organiser-logo-wrap img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
  }

  .organiser-card h3{
    font-family:'Marcellus', serif;
    font-weight:400;
    font-size: clamp(18px, 1.5vw, 21px);
    color: var(--cream);
  }

  .organiser-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:'Jost', sans-serif;
    font-weight:500;
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color: var(--bronze-light);
    text-decoration:none;
    margin-top:-8px;
  }

  .organiser-link svg{ width:11px; height:11px; stroke:currentColor; }
  .organiser-link:hover{ color: var(--cream); }

  .organiser-card p{
    font-family:'Cormorant Garamond', serif;
    font-size: clamp(15.5px, 1.2vw, 17px);
    line-height:1.65;
    color: var(--cream-dim);
  }

  /* ================= SPOTLIGHT BANNER ================= */

  .spotlight{
    position:relative;
    width:100%;
    min-height:clamp(420px, 55vw, 620px);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#0c0805;
  }

  .spotlight-bg{
    position:absolute;
    inset:0;
    background: url('https://sacwfmawards.com/application/views/themes/PIX01/assets/img/2026/spotlight-bg.jpg') center 65% / cover no-repeat;
    animation: heroDrift 30s ease-in-out infinite alternate;
    will-change: transform;
  }

  .spotlight::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(60% 70% at 50% 45%, rgba(10,6,4,0.62) 0%, rgba(10,6,4,0.4) 60%, rgba(10,6,4,0.25) 100%),
      linear-gradient(180deg, rgba(10,6,4,0.8) 0%, rgba(10,6,4,0.4) 22%, rgba(10,6,4,0.4) 78%, rgba(10,6,4,0.82) 100%);
    pointer-events:none;
  }

  .spotlight-content{
    position:relative;
    z-index:1;
    text-align:center;
    max-width:720px;
    padding: 60px 8%;
  }

  .spotlight-content .eyebrow{
    display:inline-block;
    margin-bottom: clamp(16px, 2vw, 24px);
  }

  .spotlight-content h2{
    font-family:'Marcellus', serif;
    font-weight:400;
    line-height:1.14;
    color: var(--cream);
    font-size: clamp(32px, 4.2vw, 56px);
    text-shadow: 0 2px 30px rgba(0,0,0,0.6);
    margin-bottom: clamp(16px, 2vw, 22px);
  }

  .spotlight-content p{
    font-family:'Cormorant Garamond', serif;
    font-size: clamp(17px, 1.4vw, 21px);
    line-height:1.7;
    color: var(--cream-dim);
    text-shadow: 0 2px 16px rgba(0,0,0,0.5);
    margin-bottom: clamp(28px, 3.4vw, 40px);
  }

  /* ================= SPONSORS & HOSTED BY ================= */

  .partners{
    position:relative;
    background: var(--near-black);
    padding: clamp(60px, 8vw, 110px) 8% clamp(50px, 6.5vw, 85px);
    border-top: 1px solid rgba(139,93,59,0.4);
    overflow:hidden;
  }

  .partners::before{
    content:"";
    position:absolute;
    top:0; left:0;
    width: clamp(220px, 30vw, 400px);
    height: clamp(160px, 22vw, 300px);
    background: url('https://sacwfmawards.com/application/views/themes/PIX01/assets/img/2026/pattern-lattice.png') left top / contain no-repeat;
    transform: scaleX(-1);
    opacity:0.05; /* subtle Saudi geometric pattern accent, 2-5% per spec */
    pointer-events:none;
  }

  .partners-head{
    position:relative;
    z-index:1;
    max-width:640px;
    margin:0 auto clamp(20px, 3vw, 32px);
    text-align:center;
  }

  .partners-head .eyebrow{
    display:inline-block;
    margin-bottom: clamp(14px, 2vw, 20px);
  }

  .partners-head h2{
    font-family:'Marcellus', serif;
    font-weight:400;
    color: var(--cream);
    font-size: clamp(28px, 3.2vw, 42px);
    margin-bottom: clamp(10px, 1.4vw, 16px);
  }

  .partners-head p{
    font-family:'Cormorant Garamond', serif;
    font-size: clamp(16px, 1.3vw, 19px);
    line-height:1.7;
    color: var(--cream-dim);
  }

  .sponsor-grid{
    position:relative;
    z-index:1;
    max-width:980px;
    margin: clamp(40px, 5vw, 60px) auto 0;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 1.6vw, 20px);
  }

  .sponsor-slot{
    height: 100px;
    display:flex;
    align-items:center;
    justify-content:center;
    border: 1px dashed rgba(200,168,106,0.3);
    border-radius: 16px;
    font-family:'Jost', sans-serif;
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color: rgba(197,184,164,0.55);
    transition: border-color .3s ease, color .3s ease, background .3s ease;
  }

  .sponsor-slot:hover{
    border-color: rgba(200,168,106,0.6);
    color: var(--bronze-light);
    background: rgba(200,168,106,0.05);
  }

  .partners-cta{
    position:relative;
    z-index:1;
    text-align:center;
    margin-top: clamp(36px, 4.4vw, 52px);
  }

  .hosted-by{
    position:relative;
    z-index:1;
    margin-top: clamp(64px, 8vw, 96px);
    padding-top: clamp(48px, 6vw, 70px);
    border-top: 1px solid rgba(211,172,114,0.12);
    text-align:center;
  }

  .hosted-by .eyebrow{
    display:inline-block;
    margin-bottom: clamp(24px, 3vw, 36px);
  }

  .hosted-by-logos{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap: clamp(30px, 4vw, 56px);
  }

  .hosted-by-logos img{
    height: 46px;
    width:auto;
    opacity:0.9;
    transition: opacity .3s ease;
  }

  .hosted-by-logos img.invert-logo{
    filter: brightness(0) invert(1);
  }

  .hosted-by-logos img:hover{ opacity:1; }

  /* ================= FOOTER ================= */

  .site-footer{
    position:relative;
    background: var(--panel-darker);
    padding: clamp(60px, 7vw, 90px) 8% 0;
    border-top: 1px solid rgba(200,168,106,0.3);
    overflow:hidden;
  }

  .site-footer::before{
    content:"";
    position:absolute;
    top:0; right:0;
    width: clamp(220px, 30vw, 400px);
    height: clamp(160px, 22vw, 300px);
    background: url('https://sacwfmawards.com/application/views/themes/PIX01/assets/img/2026/pattern-lattice.png') right top / contain no-repeat;
    opacity:0.05;
    pointer-events:none;
  }

  .footer-grid{
    position:relative;
    z-index:1;
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
    gap: clamp(30px, 4vw, 50px);
    padding-bottom: clamp(46px, 6vw, 70px);
  }

  .footer-brand img{
    height:52px;
    width:auto;
    margin-bottom:18px;
  }

  .footer-brand p{
    font-family:'Cormorant Garamond', serif;
    font-size:16px;
    line-height:1.7;
    color: var(--cream-dim);
    max-width:280px;
    margin-bottom:22px;
  }

  .footer-social{
    display:flex;
    gap:10px;
  }

  .footer-social a{
    width:36px; height:36px;
    border-radius:50%;
    border:1px solid rgba(211,172,114,0.3);
    display:flex;
    align-items:center;
    justify-content:center;
    color: var(--cream-dim);
    transition: background .3s ease, color .3s ease, border-color .3s ease;
  }

  .footer-social svg{ width:15px; height:15px; stroke:currentColor; }

  .footer-social a:hover{
    background: var(--bronze-light);
    color: var(--near-black);
    border-color: transparent;
  }

  .footer-col h4{
    font-family:'Jost', sans-serif;
    font-weight:500;
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color: var(--cream);
    margin-bottom: clamp(18px, 2vw, 24px);
  }

  .footer-col ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .footer-col a{
    font-family:'Cormorant Garamond', serif;
    font-size:16.5px;
    color: var(--cream-dim);
    text-decoration:none;
    transition: color .3s ease;
  }

  .footer-col a:hover{ color: var(--bronze-light); }

  .footer-contact p{
    font-family:'Cormorant Garamond', serif;
    font-size:16.5px;
    line-height:1.6;
    color: var(--cream-dim);
    margin-bottom:14px;
  }

  .footer-contact p strong{
    display:block;
    color:var(--cream);
    font-weight:600;
    font-family:'Jost', sans-serif;
    font-size:13px;
    letter-spacing:0.03em;
    margin-bottom:4px;
  }

  .footer-contact a{
    color: var(--bronze-light);
    text-decoration:none;
  }

  .footer-bottom{
    max-width:1200px;
    margin:0 auto;
    padding: clamp(20px, 2.4vw, 26px) 0;
    border-top: 1px solid rgba(211,172,114,0.12);
    text-align:center;
  }

  .footer-bottom p{
    font-family:'Jost', sans-serif;
    font-size:12px;
    letter-spacing:0.03em;
    color: var(--cream-dim);
    opacity:0.7;
  }

  /* ================= RESPONSIVE ================= */

  @media (max-width: 1180px){
    .about-inner{
      grid-template-columns: 460px 1fr;
      gap: 60px;
    }
    .browser-mockup{ max-width:600px; }
    .browser-body{ min-height:320px; }
  }

  @media (max-width: 980px){
    .about-inner{
      grid-template-columns: 1fr;
    }
    .about-media{
      max-width:480px;
      margin: 0 auto clamp(20px, 4vw, 32px);
    }
    .about-numeral{ font-size: clamp(110px, 32vw, 220px); top:-4%; }
    .journey-grid{ grid-template-columns: 1fr; gap:56px; max-width:340px; margin:0 auto; }
    .journey-line{ display:none; }
    .dates-track{ grid-template-columns: repeat(2, 1fr); max-width:560px; }
    .organisers-grid{ grid-template-columns: repeat(2, 1fr); max-width:680px; margin:0 auto; }
    .footer-grid{ grid-template-columns: repeat(2, 1fr); }

    /* tablet spacing: reduced vertical rhythm */
    .about, .categories, .journey, .dates, .organisers, .partners{
      padding-top: 72px;
      padding-bottom: 72px;
    }
    .site-footer{ padding-top: 72px; }
  }

  @media (min-width: 1401px){
    .mobile-panel{ display:none !important; }
  }

  @media (max-width: 1400px){
    .main-nav{ display:none; }
    .header-actions .btn-header{ display:none; }
    .nav-toggle{ display:flex; }
  }

  @media (max-width: 760px){
    .spotlight{ min-height:460px; }

    .hero{
      aspect-ratio:auto;
      min-height:760px;
    }
    .hero-bg{
      background-position: 78% center;
    }
    .hero::before{
      background:linear-gradient(
        180deg,
        rgba(8,5,3,0.22) 0%,
        rgba(8,5,3,0.32) 42%,
        rgba(8,5,3,0.78) 68%,
        rgba(8,5,3,0.88) 100%
      );
    }
    .hero-content{
      max-width:100%;
      padding: 22% 7% 10%;
      justify-content:center;
      height:100%;
    }
    h1{ font-size: 34px; }

    .hero-lede{ font-size:15px; max-width:100%; }
    .hero-meta{ gap:14px; }

    .about-content h2{ font-size:28px; }
    .about-media::before, .about-media::after{ display:none; }
    .about{ padding: 70px 6%; }

    .categories{ padding: 70px 6%; }
    .cat-track .cat-card{ flex-basis: calc(50% - 7px); }
    .cat-tabs{ gap:10px; }
    .cat-tab{ padding:11px 16px; font-size:11px; }
    .cat-card{ padding: 18px 10px 16px; }
    .wreath-wrap{ max-width:150px; }
    .wreath-text{ padding: 0 22%; }
    .wreath-text h3{ font-size:10px; }
    .cat-slide-btn{ width:36px; height:36px; }

    .journey{ padding: 70px 6%; }
    .journey-grid{ grid-template-columns: 1fr; gap:48px; max-width:320px; margin:0 auto; }
    .journey-line{ display:none; }
    .journey-step-number{ width:56px; height:56px; font-size:20px; }
    .mockup-frame{ max-width:300px; height:159px; }
    .mockup-frame .browser-mockup{ transform: scale(0.395); }
    .mockup-frame .browser-mockup:hover{ transform: translateY(-8px) scale(0.395); }
    .journey-step-text{ max-width:280px; }
    .journey-head h2{ font-size:26px; }

    .dates{ padding: 70px 6%; }
    .dates-track{
      grid-template-columns: repeat(2, 1fr);
      gap:14px;
      max-width:420px;
    }
    .date-item{ padding: 26px 12px; }

    .organisers{ padding: 70px 6%; }
    .organisers-grid{ grid-template-columns: 1fr; max-width:420px; margin:0 auto; }

    .partners{ padding: 70px 6%; }
    .sponsor-grid{ grid-template-columns: repeat(2, 1fr); }
    .hosted-by-logos{ gap:28px; }
    .hosted-by-logos img{ height:36px; }

    .site-footer{ padding: 70px 6% 0; }
    .footer-grid{
      grid-template-columns: 1fr;
      gap: 40px;
      text-align:left;
    }
  }

  @media (max-width: 640px){
    .sponsor-grid{ grid-template-columns: 1fr; max-width:340px; margin-left:auto; margin-right:auto; }
    .cat-track .cat-card{ flex-basis: 100%; }
    .cat-slider{ gap:8px; }
    .wreath-wrap{ max-width:220px; }
    .wreath-text h3{ font-size:12.5px; }
  }

  @media (prefers-reduced-motion: reduce){
    .btn-nominate{ transition:none; }
    html{ scroll-behavior:auto; }
    .hero-bg{ animation:none; }
    .spark{ animation:none; opacity:0; }
  }


/* ---- 2. Shared inner-page template (page-hero banner + page-content wrapper) ---- */
.page-hero{
    position:relative; width:100%;
    min-height: clamp(280px, 34vw, 400px);
    display:flex; align-items:center; justify-content:center;
    background:#0e0906 url('https://sacwfmawards.com/application/views/themes/PIX01/assets/img/2026/hero-bg.png') center 30% / cover no-repeat;
    overflow:hidden;
  }
  .page-hero::before{ content:""; position:absolute; inset:0; background: rgb(10 7 5 / 72%); pointer-events:none; }
  .page-hero-content{ position:relative; z-index:1; text-align:center; padding: clamp(150px, 16vw, 180px) 8% 40px; }
  .breadcrumb{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom: clamp(16px, 2vw, 22px); font-family:'Jost', sans-serif; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; }
  .breadcrumb a{ color: var(--cream-dim); text-decoration:none; transition: color .3s ease; }
  .breadcrumb a:hover{ color: var(--bronze-light); }
  .breadcrumb span{ color: var(--bronze-light); }
  .breadcrumb .sep{ color: rgba(200,168,106,0.4); }
  .page-hero h1{ font-family:'Marcellus', serif; font-weight:400; color: var(--cream); font-size: clamp(36px, 5vw, 62px); text-shadow: 0 2px 24px rgba(0,0,0,0.55); }

  .page-content{ position:relative; background: var(--near-black); padding: clamp(70px, 10vw, 110px) 8%; border-top: 1px solid rgba(200,168,106,0.18); overflow:hidden; }
  .page-content::before{ content:""; position:absolute; top:-60px; right:-60px; width:480px; height:480px; background:url('https://sacwfmawards.com/application/views/themes/PIX01/assets/img/2026/pattern-lattice.png') top right / 420px no-repeat; pointer-events:none; }
  .page-content::after{ content:""; position:absolute; bottom:-60px; left:-60px; width:480px; height:480px; background:url('https://sacwfmawards.com/application/views/themes/PIX01/assets/img/2026/pattern-lattice.png') bottom left / 420px no-repeat; transform: scaleX(-1); pointer-events:none; }
  .page-content-inner{ position:relative; z-index:1; max-width:820px; margin:0 auto; text-align:center; }
  .page-content-inner.wide{ max-width:1180px; }
  .page-content .eyebrow{ display:inline-block; margin-bottom: clamp(14px, 2vw, 20px); }
  .page-content h2{ font-family:'Marcellus', serif; font-weight:400; line-height:1.16; color: var(--cream); font-size: clamp(28px, 3.4vw, 42px); }
  .page-content .divider-mark{ text-align:center; margin: clamp(20px, 2.4vw, 28px) auto clamp(10px, 1.2vw, 16px); }
  .page-lede{ max-width:680px; margin: 0 auto clamp(30px, 3.6vw, 42px); font-family:'Cormorant Garamond', serif; font-size: clamp(16px, 1.3vw, 19px); color: var(--cream-dim); line-height:1.75; text-align:left; }

  .page-cta-row{ display:flex; flex-wrap:wrap; justify-content:center; gap: clamp(14px, 1.8vw, 20px); margin-top: clamp(36px, 4.4vw, 50px); }
  .page-cta{ display:inline-flex; align-items:center; gap:10px; padding: 15px 28px; border: 1px solid var(--hairline); border-radius: 2px; font-family:'Jost', sans-serif; font-weight:500; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color: var(--cream); text-decoration:none; transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease, gap .35s ease; }
  .page-cta svg{ width:13px; height:13px; stroke:currentColor; transition: transform .3s ease; }
  .page-cta:hover{ background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end)); color: var(--near-black); border-color: transparent; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(200,168,106,0.3); gap:14px; }

  @media (max-width: 760px){
    .page-hero-content{ padding: 130px 6% 30px; }
    .page-hero h1{ font-size: 30px; }
    .page-content{ padding: 56px 6%; }
    .page-cta{ width:100%; justify-content:center; }
    .page-cta-row{ flex-direction:column; }
  }

/* ---- 3. FAQ page (accordion) ---- */
/* ================= PAGE HERO (inner pages) ================= */

  .page-hero{
    position:relative;
    width:100%;
    min-height: clamp(280px, 34vw, 400px);
    display:flex;
    align-items:center;
    justify-content:center;
    background:#0e0906 url('https://sacwfmawards.com/application/views/themes/PIX01/assets/img/2026/hero-bg.png') center 30% / cover no-repeat;
    overflow:hidden;
  }

  .page-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background: rgb(10 7 5 / 72%);
    pointer-events:none;
  }

  .page-hero-content{
    position:relative;
    z-index:1;
    text-align:center;
    padding: clamp(150px, 16vw, 180px) 8% 40px;
  }

  .breadcrumb{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom: clamp(16px, 2vw, 22px);
    font-family:'Jost', sans-serif;
    font-size:12px;
    letter-spacing:0.1em;
    text-transform:uppercase;
  }

  .breadcrumb a{
    color: var(--cream-dim);
    text-decoration:none;
    transition: color .3s ease;
  }

  .breadcrumb a:hover{ color: var(--bronze-light); }
  .breadcrumb span{ color: var(--bronze-light); }
  .breadcrumb .sep{ color: rgba(200,168,106,0.4); }

  .page-hero h1{
    font-family:'Marcellus', serif;
    font-weight:400;
    color: var(--cream);
    font-size: clamp(36px, 5vw, 62px);
    text-shadow: 0 2px 24px rgba(0,0,0,0.55);
  }

  /* ================= PAGE CONTENT WRAPPER ================= */

  .page-content{
    position:relative;
    background: var(--near-black);
    padding: clamp(70px, 10vw, 110px) 8%;
    border-top: 1px solid rgba(200,168,106,0.18);
    overflow:hidden;
  }

  .page-content::before{
    content:"";
    position:absolute;
    top:-60px; right:-60px;
    width:480px;
    height:480px;
    background:url('https://sacwfmawards.com/application/views/themes/PIX01/assets/img/2026/pattern-lattice.png') top right / 420px no-repeat;
    pointer-events:none;
  }

  .page-content::after{
    content:"";
    position:absolute;
    bottom:-60px; left:-60px;
    width:480px;
    height:480px;
    background:url('https://sacwfmawards.com/application/views/themes/PIX01/assets/img/2026/pattern-lattice.png') bottom left / 420px no-repeat;
    transform: scaleX(-1);
    pointer-events:none;
  }

  .page-content-inner{
    position:relative;
    z-index:1;
    max-width:820px;
    margin:0 auto;
    text-align:center;
  }

  .page-content .eyebrow{
    display:inline-block;
    margin-bottom: clamp(14px, 2vw, 20px);
  }

  .page-content h2{
    font-family:'Marcellus', serif;
    font-weight:400;
    line-height:1.16;
    color: var(--cream);
    font-size: clamp(28px, 3.4vw, 42px);
  }

  .page-content .divider-mark{
    text-align:center;
    margin: clamp(20px, 2.4vw, 28px) auto clamp(10px, 1.2vw, 16px);
  }

  .page-lede{
    max-width:600px;
    margin: 0 auto clamp(40px, 5vw, 60px);
    font-family:'Cormorant Garamond', serif;
    font-size: clamp(16px, 1.3vw, 19px);
    color: var(--cream-dim);
    line-height:1.7;
  }

  /* ================= FAQ ACCORDION ================= */

  .faq-list{
    text-align:left;
  }

  .faq-item{
    border-bottom: 1px solid var(--hairline);
    transition: border-color .3s ease;
  }

  .faq-item.open{ border-color: rgba(200,168,106,0.4); }

  .faq-question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding: clamp(20px, 2.4vw, 26px) 6px;
    background:none;
    border:none;
    text-align:left;
    cursor:pointer;
    font-family:'Marcellus', serif;
    font-weight:400;
    font-size: clamp(15.5px, 1.3vw, 18px);
    color: var(--cream);
    transition: color .3s ease;
  }

  .faq-question:hover{ color: var(--bronze-light); }

  .faq-icon{
    position:relative;
    flex-shrink:0;
    width:20px; height:20px;
  }

  .faq-icon::before,
  .faq-icon::after{
    content:"";
    position:absolute;
    background: var(--bronze-light);
    transition: transform .35s ease, opacity .35s ease;
  }

  .faq-icon::before{
    top:50%; left:0;
    width:100%; height:1px;
    transform: translateY(-50%);
  }

  .faq-icon::after{
    left:50%; top:0;
    width:1px; height:100%;
    transform: translateX(-50%);
  }

  .faq-item.open .faq-icon::after{
    transform: translateX(-50%) rotate(90deg);
    opacity:0;
  }

  .faq-answer-wrap{
    display:grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s cubic-bezier(.4,0,.2,1);
  }

  .faq-item.open .faq-answer-wrap{
    grid-template-rows: 1fr;
  }

  .faq-answer-inner{
    overflow:hidden;
  }

  .faq-answer{
    padding: 0 30px 24px 6px;
    font-family:'Cormorant Garamond', serif;
    font-size: clamp(15.5px, 1.2vw, 17.5px);
    line-height:1.75;
    color: var(--cream-dim);
  }

  .faq-answer p{ margin-bottom:12px; }
  .faq-answer p:last-child{ margin-bottom:0; }

  .faq-answer ul{
    margin: 6px 0 14px;
    padding-left: 20px;
  }

  .faq-answer li{
    margin-bottom:8px;
    line-height:1.6;
  }

  .faq-answer a{
    color: var(--bronze-light);
    text-decoration:underline;
    text-decoration-color: rgba(200,168,106,0.4);
  }

  .faq-answer strong{
    color: var(--cream);
    font-weight:600;
  }

  .faq-contact-block{
    margin-top:6px;
    padding: 14px 18px;
    background: var(--card-bg);
    border: 1px solid var(--hairline);
    border-radius: 10px;
  }

  .faq-contact-block p{ margin-bottom:6px; font-size: 0.95em; }
  .faq-contact-block p:last-child{ margin-bottom:0; }

  .page-cta-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap: clamp(14px, 1.8vw, 20px);
    margin-top: clamp(40px, 5vw, 56px);
  }

  .page-cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 15px 28px;
    border: 1px solid var(--hairline);
    border-radius: 2px;
    font-family:'Jost', sans-serif;
    font-weight:500;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color: var(--cream);
    text-decoration:none;
    transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease, gap .35s ease;
  }

  .page-cta svg{
    width:13px; height:13px;
    stroke:currentColor;
    transition: transform .3s ease;
  }

  .page-cta:hover{
    background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end));
    color: var(--near-black);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(200,168,106,0.3);
    gap:14px;
  }

  @media (max-width: 760px){
    .page-hero-content{ padding: 130px 6% 30px; }
    .page-hero h1{ font-size: 30px; }
    .page-content{ padding: 56px 6%; }
    .faq-question{ font-size:15px; }
    .faq-answer{ font-size:15px; padding-right:10px; }
    .page-cta{ width:100%; justify-content:center; }
    .page-cta-row{ flex-direction:column; }
  }

/* ---- 4. Eligibility page (numbered criteria list) ---- */
/* ================= PAGE HERO (inner pages) ================= */

  .page-hero{
    position:relative;
    width:100%;
    min-height: clamp(280px, 34vw, 400px);
    display:flex;
    align-items:center;
    justify-content:center;
    background:#0e0906 url('https://sacwfmawards.com/application/views/themes/PIX01/assets/img/2026/hero-bg.png') center 30% / cover no-repeat;
    overflow:hidden;
  }

  .page-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background: rgb(10 7 5 / 72%);
    pointer-events:none;
  }

  .page-hero-content{
    position:relative;
    z-index:1;
    text-align:center;
    padding: clamp(150px, 16vw, 180px) 8% 40px;
  }

  .breadcrumb{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom: clamp(16px, 2vw, 22px);
    font-family:'Jost', sans-serif;
    font-size:12px;
    letter-spacing:0.1em;
    text-transform:uppercase;
  }

  .breadcrumb a{
    color: var(--cream-dim);
    text-decoration:none;
    transition: color .3s ease;
  }

  .breadcrumb a:hover{ color: var(--bronze-light); }
  .breadcrumb span{ color: var(--bronze-light); }
  .breadcrumb .sep{ color: rgba(200,168,106,0.4); }

  .page-hero h1{
    font-family:'Marcellus', serif;
    font-weight:400;
    color: var(--cream);
    font-size: clamp(36px, 5vw, 62px);
    text-shadow: 0 2px 24px rgba(0,0,0,0.55);
  }

  /* ================= PAGE CONTENT WRAPPER ================= */

  .page-content{
    position:relative;
    background: var(--near-black);
    padding: clamp(70px, 10vw, 110px) 8%;
    border-top: 1px solid rgba(200,168,106,0.18);
    overflow:hidden;
  }

  .page-content::before{
    content:"";
    position:absolute;
    top:-60px; right:-60px;
    width:480px;
    height:480px;
    background:url('https://sacwfmawards.com/application/views/themes/PIX01/assets/img/2026/pattern-lattice.png') top right / 420px no-repeat;
    pointer-events:none;
  }

  .page-content::after{
    content:"";
    position:absolute;
    bottom:-60px; left:-60px;
    width:480px;
    height:480px;
    background:url('https://sacwfmawards.com/application/views/themes/PIX01/assets/img/2026/pattern-lattice.png') bottom left / 420px no-repeat;
    transform: scaleX(-1);
    pointer-events:none;
  }

  .page-content-inner{
    position:relative;
    z-index:1;
    max-width:820px;
    margin:0 auto;
    text-align:center;
  }

  .page-content .eyebrow{
    display:inline-block;
    margin-bottom: clamp(14px, 2vw, 20px);
  }

  .page-content h2{
    font-family:'Marcellus', serif;
    font-weight:400;
    line-height:1.16;
    color: var(--cream);
    font-size: clamp(28px, 3.4vw, 42px);
  }

  .page-content .divider-mark{
    text-align:center;
    margin: clamp(20px, 2.4vw, 28px) auto clamp(10px, 1.2vw, 16px);
  }

  .page-lede{
    max-width:640px;
    margin: 0 auto clamp(36px, 4.4vw, 50px);
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size: clamp(17px, 1.4vw, 20px);
    color: var(--bronze-light);
    line-height:1.7;
  }

  /* ================= ELIGIBILITY CRITERIA LIST ================= */

  .eligibility-list{
    text-align:left;
    counter-reset: elig-counter;
  }

  .eligibility-item{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap: clamp(16px, 2vw, 22px);
    padding: clamp(16px, 2vw, 20px) 4px;
    border-bottom: 1px solid var(--hairline);
    transition: background .3s ease;
  }

  .eligibility-item:last-child{ border-bottom:none; }

  .eligibility-item:hover{ background: rgba(200,168,106,0.03); }

  .eligibility-num{
    counter-increment: elig-counter;
    flex-shrink:0;
    width:34px; height:34px;
    border-radius:50%;
    border:1px solid rgba(200,168,106,0.35);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Marcellus', serif;
    font-size:13px;
    color: var(--bronze-light);
    margin-top:2px;
  }

  .eligibility-num::before{
    content: counter(elig-counter);
  }

  .eligibility-item p{
    font-family:'Cormorant Garamond', serif;
    font-size: clamp(15.5px, 1.2vw, 17.5px);
    line-height:1.75;
    color: var(--cream-dim);
    padding-top:6px;
  }

  .eligibility-item p strong{
    color: var(--cream);
    font-weight:600;
  }

  .eligibility-note{
    margin-top: clamp(32px, 3.8vw, 44px);
    padding: clamp(20px, 2.4vw, 26px);
    background: var(--card-bg);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    text-align:center;
  }

  .eligibility-note p{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height:1.7;
    color: var(--cream-dim);
  }

  .page-cta-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap: clamp(14px, 1.8vw, 20px);
    margin-top: clamp(40px, 5vw, 56px);
  }

  .page-cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 15px 28px;
    border: 1px solid var(--hairline);
    border-radius: 2px;
    font-family:'Jost', sans-serif;
    font-weight:500;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color: var(--cream);
    text-decoration:none;
    transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease, gap .35s ease;
  }

  .page-cta svg{
    width:13px; height:13px;
    stroke:currentColor;
    transition: transform .3s ease;
  }

  .page-cta:hover{
    background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end));
    color: var(--near-black);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(200,168,106,0.3);
    gap:14px;
  }

  @media (max-width: 760px){
    .page-hero-content{ padding: 130px 6% 30px; }
    .page-hero h1{ font-size: 28px; }
    .page-content{ padding: 56px 6%; }
    .eligibility-item{ gap:12px; }
    .eligibility-num{ width:28px; height:28px; font-size:11px; }
    .eligibility-item p{ font-size:15px; }
    .page-cta{ width:100%; justify-content:center; }
    .page-cta-row{ flex-direction:column; }
  }

/* ---- 5. Categories page (info cards + read-more modals) ---- */
/* ================= PAGE HERO (inner pages) ================= */

  .page-hero{
    position:relative;
    width:100%;
    min-height: clamp(280px, 34vw, 400px);
    display:flex;
    align-items:center;
    justify-content:center;
    background:#0e0906 url('https://sacwfmawards.com/application/views/themes/PIX01/assets/img/2026/hero-bg.png') center 30% / cover no-repeat;
    overflow:hidden;
  }

  .page-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background: rgb(10 7 5 / 72%);
    pointer-events:none;
  }

  .page-hero-content{
    position:relative;
    z-index:1;
    text-align:center;
    padding: clamp(150px, 16vw, 180px) 8% 40px;
  }

  .breadcrumb{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom: clamp(16px, 2vw, 22px);
    font-family:'Jost', sans-serif;
    font-size:12px;
    letter-spacing:0.1em;
    text-transform:uppercase;
  }

  .breadcrumb a{ color: var(--cream-dim); text-decoration:none; transition: color .3s ease; }
  .breadcrumb a:hover{ color: var(--bronze-light); }
  .breadcrumb span{ color: var(--bronze-light); }
  .breadcrumb .sep{ color: rgba(200,168,106,0.4); }

  .page-hero h1{
    font-family:'Marcellus', serif;
    font-weight:400;
    color: var(--cream);
    font-size: clamp(36px, 5vw, 62px);
    text-shadow: 0 2px 24px rgba(0,0,0,0.55);
  }

  /* ================= PAGE CONTENT WRAPPER ================= */

  .page-content{
    position:relative;
    background: var(--near-black);
    padding: clamp(70px, 10vw, 110px) 8%;
    border-top: 1px solid rgba(200,168,106,0.18);
    overflow:hidden;
  }

  .page-content-head{
    position:relative;
    z-index:1;
    max-width:700px;
    margin:0 auto clamp(40px, 5vw, 56px);
    text-align:center;
  }

  .page-content .eyebrow{ display:inline-block; margin-bottom: clamp(14px, 2vw, 20px); }

  .page-content h2{
    font-family:'Marcellus', serif;
    font-weight:400;
    line-height:1.16;
    color: var(--cream);
    font-size: clamp(28px, 3.4vw, 42px);
  }

  .page-content .divider-mark{
    text-align:center;
    margin: clamp(20px, 2.4vw, 28px) auto 0;
  }

  /* ================= CATEGORY TABS (reused pattern) ================= */

  .cat-tabs-wrap{
    position:relative;
    z-index:1;
    max-width:1180px;
    margin:0 auto clamp(36px, 4vw, 50px);
  }

  /* ================= INFO CARDS ================= */

  .info-cat-grid{
    position:relative;
    z-index:1;
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 2vw, 26px);
  }

  .info-cat-card{
    display:flex;
    flex-direction:column;
    padding: clamp(24px, 2.6vw, 30px);
    background:
      radial-gradient(120% 140% at 0% 0%, rgba(200,168,106,0.09), transparent 55%),
      linear-gradient(160deg, #211A15 0%, #1B1512 55%, #120E0B 100%);
    border: 1px solid rgba(200,168,106,0.2);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.32);
    transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
  }

  .info-cat-card:hover{
    border-color: rgba(200,168,106,0.5);
    transform: translateY(-6px);
    box-shadow: var(--shadow-cinematic), 0 0 30px rgba(200,168,106,0.16);
  }

  .info-cat-card h3{
    font-family:'Marcellus', serif;
    font-weight:400;
    font-size: clamp(16.5px, 1.35vw, 19px);
    line-height:1.35;
    color: var(--cream);
    margin-bottom:12px;
  }

  .info-cat-card p{
    font-family:'Cormorant Garamond', serif;
    font-size: clamp(14.5px, 1.1vw, 16px);
    line-height:1.65;
    color: var(--cream-dim);
    flex:1;
    margin-bottom:18px;
  }

  .info-cat-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-top:14px;
    border-top:1px solid var(--hairline);
  }

  .read-more-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:none;
    border:none;
    padding:0;
    font-family:'Jost', sans-serif;
    font-weight:500;
    font-size:11.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color: var(--bronze-light);
    cursor:pointer;
    transition: gap .3s ease, color .3s ease;
  }

  .read-more-btn svg{ width:12px; height:12px; stroke:currentColor; transition: transform .3s ease; }
  .read-more-btn:hover{ gap:10px; color: var(--gold-highlight); }

  .info-cat-nominate{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-family:'Jost', sans-serif;
    font-weight:500;
    font-size:10.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color: var(--cream);
    text-decoration:none;
    padding:7px 14px;
    border:1px solid var(--hairline);
    border-radius:20px;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
  }

  .info-cat-nominate:hover{
    background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end));
    color: var(--near-black);
    border-color: transparent;
  }

  .sponsor-tag{
    display:inline-block;
    margin-bottom:12px;
    font-family:'Jost', sans-serif;
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color: var(--bronze-light);
    opacity:0.85;
  }

  .cat-panel{ display:none; }
  .cat-panel.active{ display:block; }

  /* ================= MODAL ================= */

  .cat-modal-overlay{
    position:fixed;
    inset:0;
    z-index:200;
    background: rgba(6,4,3,0.82);
    backdrop-filter: blur(4px);
    display:none;
    align-items:center;
    justify-content:center;
    padding: 24px;
    opacity:0;
    transition: opacity .3s ease;
  }

  .cat-modal-overlay.open{
    display:flex;
    opacity:1;
  }

  .cat-modal{
    position:relative;
    width:100%;
    max-width:640px;
    max-height:85vh;
    overflow-y:auto;
    background: linear-gradient(160deg, #1B1512 0%, #100E0C 100%);
    border: 1px solid rgba(200,168,106,0.3);
    border-radius: 20px;
    box-shadow: 0 40px 90px rgba(0,0,0,0.6), 0 0 60px rgba(200,168,106,0.1);
    padding: clamp(30px, 4vw, 46px);
    transform: scale(0.95) translateY(10px);
    transition: transform .35s cubic-bezier(.2,.8,.3,1);
  }

  .cat-modal-overlay.open .cat-modal{
    transform: scale(1) translateY(0);
  }

  .cat-modal-close{
    position:absolute;
    top: 18px; right: 18px;
    width:36px; height:36px;
    border-radius:50%;
    border:1px solid var(--hairline);
    background:none;
    color: var(--cream-dim);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
  }

  .cat-modal-close:hover{
    background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end));
    color: var(--near-black);
    border-color:transparent;
  }

  .cat-modal-close svg{ width:16px; height:16px; stroke:currentColor; }

  .cat-modal .eyebrow{ display:inline-block; margin-bottom:10px; }

  .cat-modal h3{
    font-family:'Marcellus', serif;
    font-weight:400;
    font-size: clamp(20px, 2.2vw, 25px);
    line-height:1.3;
    color: var(--cream);
    margin-bottom:14px;
    padding-right:30px;
  }

  .cat-modal .modal-desc{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size: clamp(15.5px, 1.2vw, 17px);
    line-height:1.7;
    color: var(--bronze-light);
    margin-bottom:22px;
    padding-bottom:22px;
    border-bottom:1px solid var(--hairline);
  }

  .cat-modal .modal-note{
    font-family:'Cormorant Garamond', serif;
    font-size:14px;
    color: var(--cream-dim);
    opacity:0.75;
    margin-bottom:20px;
    padding: 10px 14px;
    border-left: 2px solid var(--hairline);
  }

  .cat-modal h4{
    font-family:'Jost', sans-serif;
    font-weight:600;
    font-size:12px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color: var(--bronze-light);
    margin: 22px 0 12px;
  }

  .cat-modal h4:first-of-type{ margin-top:0; }

  .cat-modal ul{
    margin:0 0 4px;
    padding-left:20px;
  }

  .cat-modal li{
    font-family:'Cormorant Garamond', serif;
    font-size: clamp(14.5px, 1.1vw, 16px);
    line-height:1.65;
    color: var(--cream-dim);
    margin-bottom:8px;
  }

  .cat-modal-nominate{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:24px;
    padding: 13px 30px;
    background: linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end));
    color: var(--near-black);
    font-family:'Jost', sans-serif;
    font-weight:600;
    font-size:12px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    text-decoration:none;
    border-radius:2px;
    transition: transform .3s ease, box-shadow .3s ease;
  }

  .cat-modal-nominate:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(200,168,106,0.35);
  }

  .cat-modal-nominate svg{ width:14px; height:14px; stroke:currentColor; }

  body.modal-open{ overflow:hidden; }

  @media (max-width: 980px){
    .info-cat-grid{ grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 760px){
    .page-hero-content{ padding: 130px 6% 30px; }
    .page-hero h1{ font-size: 30px; }
    .page-content{ padding: 56px 6%; }
    .info-cat-grid{ grid-template-columns: 1fr; }
    .cat-tabs{ flex-wrap:wrap; }
  }

/* ---- 6. Sponsorship & Contact pages (benefit list + contact cards) ---- */
.why-list{ text-align:left; max-width:680px; margin:0 auto clamp(40px,5vw,56px); }
  .why-item{ display:flex; align-items:flex-start; gap:16px; padding:14px 0; border-bottom:1px solid var(--hairline); }
  .why-item:last-child{ border-bottom:none; }
  .why-mark{ flex-shrink:0; width:8px; height:8px; background:var(--bronze-light); transform:rotate(45deg); margin-top:10px; }
  .why-item p{ font-family:'Cormorant Garamond', serif; font-size:clamp(15.5px,1.2vw,17.5px); line-height:1.7; color:var(--cream-dim); }

  .contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,26px); max-width:1000px; margin:0 auto; }
  .contact-card{ padding:clamp(26px,2.8vw,32px) clamp(20px,2.2vw,26px); background:radial-gradient(120% 140% at 0% 0%, rgba(200,168,106,0.09), transparent 55%), linear-gradient(160deg,#211A15 0%,#1B1512 55%,#120E0B 100%); border:1px solid rgba(200,168,106,0.2); border-radius:18px; text-align:center; transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
  .contact-card:hover{ transform:translateY(-6px); border-color:rgba(200,168,106,0.5); box-shadow:var(--shadow-cinematic), 0 0 30px rgba(200,168,106,0.16); }
  .contact-tag{ display:block; font-family:'Jost', sans-serif; font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--bronze-light); margin-bottom:14px; }
  .contact-card h3{ font-family:'Marcellus', serif; font-weight:400; font-size:clamp(17px,1.5vw,20px); color:var(--cream); margin-bottom:12px; }
  .contact-card a{ display:block; font-family:'Jost', sans-serif; font-size:13px; color:var(--cream-dim); text-decoration:none; margin-bottom:6px; word-break:break-word; transition:color .3s ease; }
  .contact-card a:hover{ color:var(--bronze-light); }

  @media (max-width:980px){ .contact-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---- 7. Gallery page (video grid + photo lightbox) ---- */
.gallery-videos{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,30px); max-width:1180px; margin:0 auto clamp(50px,6vw,70px); }
  .gallery-video-block h3{ font-family:'Marcellus', serif; font-weight:400; font-size:clamp(16px,1.4vw,19px); color:var(--cream); text-align:center; margin-bottom:14px; }
  .video-frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:1px solid rgba(200,168,106,0.18); box-shadow:0 20px 44px rgba(0,0,0,0.45); }
  .video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:none; }

  .photo-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; max-width:1180px; margin:0 auto; }
  .photo-item{ position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden; cursor:pointer; border:1px solid rgba(200,168,106,0.15); }
  .photo-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease, filter .5s ease; }
  .photo-item::after{ content:""; position:absolute; inset:0; background:rgba(10,7,5,0); transition:background .35s ease; }
  .photo-item:hover img{ transform:scale(1.08); }
  .photo-item:hover::after{ background:rgba(10,7,5,0.25); }
  .photo-item .zoom-mark{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.6); width:34px; height:34px; border-radius:50%; border:1px solid var(--bronze-light); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s ease, transform .3s ease; pointer-events:none; }
  .photo-item .zoom-mark svg{ width:14px; height:14px; stroke:var(--bronze-light); }
  .photo-item:hover .zoom-mark{ opacity:1; transform:translate(-50%,-50%) scale(1); }

  /* Lightbox */
  .lightbox-overlay{ position:fixed; inset:0; z-index:250; background:rgba(6,4,3,0.92); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:24px; opacity:0; transition:opacity .3s ease; }
  .lightbox-overlay.open{ display:flex; opacity:1; }
  .lightbox-img-wrap{ position:relative; max-width:min(1100px,90vw); max-height:85vh; }
  .lightbox-img-wrap img{ max-width:100%; max-height:85vh; display:block; border-radius:10px; box-shadow:0 40px 90px rgba(0,0,0,0.6); }
  .lightbox-close, .lightbox-prev, .lightbox-next{ position:fixed; width:44px; height:44px; border-radius:50%; border:1px solid rgba(200,168,106,0.3); background:rgba(10,7,5,0.6); color:var(--cream); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .3s ease, color .3s ease, border-color .3s ease; z-index:251; }
  .lightbox-close svg, .lightbox-prev svg, .lightbox-next svg{ width:18px; height:18px; stroke:currentColor; }
  .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background:linear-gradient(135deg, var(--btn-grad-start), var(--btn-grad-end)); color:var(--near-black); border-color:transparent; }
  .lightbox-close{ top:24px; right:24px; }
  .lightbox-prev{ left:24px; top:50%; transform:translateY(-50%); }
  .lightbox-next{ right:24px; top:50%; transform:translateY(-50%); }
  .lightbox-counter{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); font-family:'Jost',sans-serif; font-size:12px; letter-spacing:0.1em; color:var(--cream-dim); z-index:251; }

  @media (max-width:980px){ .gallery-videos{ grid-template-columns:1fr; } .photo-grid{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:640px){ .photo-grid{ grid-template-columns:repeat(2,1fr); gap:8px; } .lightbox-prev{ left:8px; } .lightbox-next{ right:8px; } .lightbox-close{ top:12px; right:12px; } }