@font-face{
      font-family:"Nevis";
      src:url("../fonts/nevis.woff2") format("woff2");
      font-weight:700;
      font-style:normal;
      font-display:swap;
    }

    :root{
      --bg:#f7f4ee;
      --surface:#ffffff;
      --surface-soft:#fcfaf5;
      --ink:#171717;
      --ink-soft:#5f5a50;
      --gold:#c9a84c;
      --gold-deep:#a88423;
      --gold-soft:rgba(201,168,76,.16);
      --border:#e7dfcf;
      --shadow:0 24px 70px rgba(30,22,8,.10);
      --shadow-soft:0 14px 34px rgba(30,22,8,.08);
      --ff-heading:"Nevis",sans-serif;
      --ff-body:"Work Sans",sans-serif;
      --hero-dark:#1a1a1a;
      --hero-dark-2:#2b2b2b;
      --wave:#efe6d1;
      --wave-2:#f6eddb;
    }

    *{
      box-sizing:border-box;
    }

    html,body{
      margin:0;
      min-height:100%;
    }

    body{
      font-family:var(--ff-body);
      background:
        radial-gradient(circle at 10% 10%, rgba(201,168,76,.08), transparent 18%),
        linear-gradient(180deg, #fbfaf7 0%, #f4efe5 100%);
      color:var(--ink);
      overflow-x:hidden;
    }

    .landing{
      position:relative;
      min-height:100vh;
      min-height:100svh;
      overflow:hidden;
      isolation:isolate;
    }

    .landing::before{
      content:"";
      position:absolute;
      right:-180px;
      top:-120px;
      width:560px;
      height:560px;
      border-radius:50%;
      background:rgba(201,168,76,.08);
      filter:blur(10px);
      z-index:-2;
    }

    .landing-inner{
      width:min(1240px, calc(100% - 48px));
      margin:0 auto;
      min-height:100vh;
      min-height:100svh;
      display:grid;
      grid-template-columns:1.02fr .98fr;
      align-items:center;
      gap:24px;
      padding:28px 0 40px;
    }

    /* LEFT */
    .hero-title{
      margin:0 0 18px;
      font-family:var(--ff-heading);
      font-size:clamp(40px, 5.5vw, 68px);
      line-height:1.02;
      letter-spacing:-.02em;
      color:#181818;
      text-transform:uppercase;
    }

    .hero-title br{
      display:block;
    }

    .hero-copy{
      max-width:580px;
      padding:18px 10px 18px 4px;
    }

    .brand{
      display:inline-flex;
      align-items:center;
      gap:14px;
      margin-bottom:28px;
    }

    .brand-mark{
      width:60px;
      height:60px;
      border-radius:18px;
      display:grid;
      place-items:center;
    }

    .brand-mark img{
      width:60px;
      height:60px;
      object-fit:contain;
    }

    .brand-eyebrow{
      font-size:14px;
      font-weight:800;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:#8a6f2d;
    }


    .hero-title .accent{
      color:var(--gold-deep);
      display:inline-block;
    }

    .accent-script{
      font-style:italic;
      text-transform:none;
      letter-spacing:0;
    }

    .hero-subtitle{
      margin:0 0 30px;
      max-width:470px;
      font-size:17px;
      line-height:1.72;
      color:var(--ink-soft);
      font-weight:500;
    }

    .hero-actions{
      display:flex;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;
      margin-bottom:34px;
    }

    .btn-primary{
      text-decoration:none;
      min-height:54px;
      padding:0 24px;
      border-radius:999px;
      background:linear-gradient(135deg, var(--hero-dark) 0%, var(--hero-dark-2) 100%);
      color:#fff;
      display:inline-flex;
      align-items:center;
      gap:12px;
      font-size:14px;
      font-weight:800;
      letter-spacing:.06em;
      text-transform:uppercase;
      box-shadow:0 18px 34px rgba(23,23,23,.18);
      transition:transform .18s ease, box-shadow .18s ease;
      position:relative;
      overflow:hidden;
    }

    .btn-primary:hover{
      transform:translateY(-2px);
      box-shadow:0 22px 40px rgba(23,23,23,.22);
    }

    .btn-primary svg{
      width:15px;
      height:15px;
      flex-shrink:0;
    }

    .btn-primary::after{
      content:"";
      position:absolute;
      width:140px;
      height:140px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 70%);
      left:-30px;
      top:-42px;
      pointer-events:none;
      animation:ctaGlow 3.2s ease-in-out infinite;
    }
    
    /* RIGHT */
    .hero-visual{
      position:relative;
      min-height:720px;
      display:flex;
      align-items:center;
      justify-content:center;
      perspective:1200px;
    }

    .visual-bg{
      position:absolute;
      inset:-40px -120px -50px 26px;
      background:linear-gradient(180deg, var(--wave-2) 0%, var(--wave) 100%);
      border-top-left-radius:220px 160px;
      border-bottom-left-radius:320px 260px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
      z-index:0;
    }

    .visual-bg::before{
      content:"";
      position:absolute;
      left:-110px;
      top:-8px;
      width:250px;
      height:130px;
      background:var(--bg);
      border-bottom-right-radius:190px 120px;
      border-top-right-radius:120px 80px;
    }

    .visual-shell{
      position:relative;
      z-index:2;
      width:min(560px,100%);
      padding:34px 20px 20px;
      display:flex;
      align-items:center;
      justify-content:center;
      transform-style:preserve-3d;
    }

    .visual-card{
      position:relative;
      width:100%;
      max-width:500px;
      border-radius:34px;
      background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.16));
      border:1px solid rgba(255,255,255,.42);
      box-shadow:0 26px 60px rgba(166,132,35,.12);
      padding:28px 24px 18px;
      overflow:hidden;
      backdrop-filter:blur(6px);
      transform-style:preserve-3d;
      transition:transform .18s ease, box-shadow .25s ease, opacity .6s ease;
      will-change:transform;
    }

    .visual-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(255,255,255,.18), transparent 40%),
        radial-gradient(circle at 14% 16%, rgba(255,255,255,.22), transparent 18%);
      pointer-events:none;
    }

    .visual-card:hover{
      box-shadow:0 30px 70px rgba(166,132,35,.18);
    }

    .storyset-illustration{
      position:relative;
      z-index:2;
      display:block;
      width:100%;
      max-width:430px;
      margin:28px auto 12px;
      filter:
        saturate(.78)
        sepia(.22)
        hue-rotate(-10deg)
        brightness(1.02);
      mix-blend-mode:multiply;
      transform:translateZ(28px);
      transform-style:preserve-3d;
      transition:transform .18s ease, opacity .8s ease;
      will-change:transform;
      animation:softDrift 7s ease-in-out infinite;
    }

    .float-chip{
      position:absolute;
      z-index:3;
      min-width:110px;
      padding:12px 14px;
      border-radius:20px;
      background:#fff;
      border:1px solid rgba(201,168,76,.18);
      box-shadow:0 16px 30px rgba(30,22,8,.08);
      color:#5f5a50;
      transform-style:preserve-3d;
      transition:transform .18s ease, opacity .7s ease;
      will-change:transform;
    }

    .float-chip small{
      display:block;
      font-size:10px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:#8a6f2d;
      margin-bottom:5px;
    }

    .float-chip strong{
      display:block;
      font-size:21px;
      font-weight:800;
      color:#1f1f1f;
      letter-spacing:-.03em;
    }

    .float-chip.left{
      left:18px;
      top:46px;
    }

    .float-chip.right{
      right:16px;
      top:66px;
      min-width:124px;
    }

    .mini-bars{
      display:flex;
      align-items:flex-end;
      gap:5px;
      height:28px;
      margin-top:4px;
    }

    .mini-bars span{
      width:9px;
      border-radius:999px 999px 3px 3px;
      background:linear-gradient(180deg, #d9bf78 0%, #b58d2a 100%);
    }

    .mini-bars span:nth-child(1){ height:14px; }
    .mini-bars span:nth-child(2){ height:24px; }
    .mini-bars span:nth-child(3){ height:31px; }
    .mini-bars span:nth-child(4){ height:18px; }

    .visual-note{
      position:absolute;
      right:20px;
      bottom:20px;
      max-width:220px;
      padding:16px 18px;
      border-radius:22px;
      background:#fff;
      border:1px solid rgba(201,168,76,.18);
      box-shadow:0 18px 34px rgba(30,22,8,.08);
      z-index:3;
      transform-style:preserve-3d;
      transition:transform .18s ease, opacity .8s ease;
      will-change:transform;
    }

    .visual-note strong{
      display:block;
      margin-bottom:5px;
      font-size:14px;
      font-weight:800;
      color:#1f1f1f;
    }

    .visual-note span{
      display:block;
      font-size:12px;
      line-height:1.58;
      color:#6f675c;
      font-weight:600;
    }

    /* PAGE LOAD ANIMATIONS */
    .reveal{
      opacity:0;
      transform:translateY(26px);
      animation:fadeUp .9s cubic-bezier(.22,1,.36,1) forwards;
      will-change:transform, opacity;
    }

    .reveal-left{
      opacity:0;
      transform:translateX(-28px);
      animation:fadeLeft .9s cubic-bezier(.22,1,.36,1) forwards;
      will-change:transform, opacity;
    }

    .reveal-right{
      opacity:0;
      transform:translateX(28px);
      animation:fadeRight .9s cubic-bezier(.22,1,.36,1) forwards;
      will-change:transform, opacity;
    }

    /* opacity-only reveals for parallax-controlled elements */
    .fade-only{
      opacity:0;
      animation:fadeOnly .9s cubic-bezier(.22,1,.36,1) forwards;
    }

    .delay-1{ animation-delay:.08s; }
    .delay-2{ animation-delay:.16s; }
    .delay-3{ animation-delay:.24s; }
    .delay-4{ animation-delay:.32s; }
    .delay-5{ animation-delay:.40s; }
    .delay-6{ animation-delay:.48s; }
    .delay-7{ animation-delay:.56s; }
    .delay-8{ animation-delay:.64s; }

    @keyframes fadeUp{
      to{
        opacity:1;
        transform:translateY(0);
      }
    }

    @keyframes fadeLeft{
      to{
        opacity:1;
        transform:translateX(0);
      }
    }

    @keyframes fadeRight{
      to{
        opacity:1;
        transform:translateX(0);
      }
    }

    @keyframes fadeOnly{
      to{
        opacity:1;
      }
    }

    @keyframes softDrift{
      0%,100%{ transform:translate3d(0,0,28px); }
      50%{ transform:translate3d(0,-8px,28px); }
    }

    @keyframes ctaGlow{
      0%,100%{
        transform:scale(1);
        opacity:.55;
      }
      50%{
        transform:scale(1.12);
        opacity:.9;
      }
    }

    @media (max-width:1080px){
      .landing-inner{
        grid-template-columns:1fr;
        gap:20px;
        min-height:auto;
      }

      .hero-copy{
        max-width:none;
        padding-top:12px;
      }

      .hero-title{
        max-width:none;
      }

      .hero-visual{
        min-height:620px;
      }

      .visual-bg{
        inset:20px -90px -30px 0;
      }
    }

    @media (max-width:760px){
      .landing-inner{
        width:calc(100% - 24px);
        padding:18px 0 26px;
      }

      .brand{
        margin-bottom:22px;
      }

      .hero-title{
        font-size:clamp(34px, 10vw, 50px);
      }

      .hero-subtitle{
        font-size:15px;
        max-width:none;
      }

      .hero-meta{
        grid-template-columns:1fr;
      }

      .hero-visual{
        min-height:500px;
      }

      .visual-bg{
        inset:18px -70px -20px -6px;
        border-top-left-radius:140px 100px;
        border-bottom-left-radius:220px 170px;
      }

      .visual-bg::before{
        left:-70px;
        width:170px;
        height:90px;
      }

      .visual-shell{
        padding:18px 6px 12px;
      }

      .visual-card{
        padding:18px 14px 14px;
      }

      .storyset-illustration{
        max-width:320px;
        margin-top:42px;
      }

      .float-chip.left{
        left:10px;
        top:16px;
      }

      .float-chip.right{
        right:10px;
        top:44px;
      }

      .visual-note{
        position:static;
        max-width:none;
        margin:8px 6px 2px;
      }
    }

    @media (prefers-reduced-motion: reduce){
      .reveal,
      .reveal-left,
      .reveal-right,
      .fade-only{
        opacity:1 !important;
        transform:none !important;
        animation:none !important;
      }

      .storyset-illustration,
      .btn-primary::after{
        animation:none !important;
      }

      .visual-card,
      .storyset-illustration,
      .float-chip,
      .visual-note{
        transition:none !important;
      }
    }