:root{
    --navy:#15171C;
    --navy-2:#1c1f26;
    --emerald:#0F6B4A;
    --gold:#C9A227;
    --gold-light:#E0BD4C;
    --steel:#A8B2C3;
    --off:#F8F7F4;
    --ink:#171819;
    --body-text:#3A3D44;
    --max:1140px;
  }
  *{margin:0; padding:0; box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Montserrat',Arial,sans-serif; color:var(--body-text); background:var(--off);
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}
  section{position:relative;}

  ::selection{ background:var(--gold); color:var(--navy); }
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001s !important; animation-iteration-count:1 !important; transition-duration:0.001s !important; scroll-behavior:auto !important; }
  }

  /* ===== EXTRA INTERACTIVITY PASS — additive only ===== */
  #mcd-cursor-dot, #mcd-cursor-ring{
    position:fixed; top:0; left:0; pointer-events:none; z-index:9999; opacity:0;
    transition:opacity .25s ease;
  }
  #mcd-cursor-dot{
    width:6px; height:6px; border-radius:50%; background:var(--gold);
    box-shadow:0 0 10px rgba(201,162,39,.9);
  }
  #mcd-cursor-ring{
    width:34px; height:34px; border-radius:50%; border:1.5px solid rgba(201,162,39,.55);
    transition:opacity .25s ease, width .25s cubic-bezier(.2,.8,.2,1), height .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
  }
  #mcd-cursor-ring.mcd-active{ width:54px; height:54px; border-color:rgba(201,162,39,.9); background:rgba(201,162,39,.07); }
  #mcd-cursor-ring.mcd-down{ width:26px; height:26px; }
  @media (max-width:860px){ #mcd-cursor-dot, #mcd-cursor-ring{ display:none; } }

  #compare{ transition:transform .15s ease-out; will-change:transform; }
  #mcd-sparkle-burst{
    position:absolute; inset:0; z-index:5; pointer-events:none; width:100%; height:100%;
  }

  #back-to-top{ overflow:visible; }
  #mcd-btt-ring{ position:absolute; inset:-3px; width:50px; height:50px; transform:rotate(-90deg); pointer-events:none; }
  #mcd-btt-ring circle{
    fill:none; stroke:rgba(21,23,28,.55); stroke-width:2.5; transition:stroke-dashoffset .1s linear;
  }

  .c-after:before{ background-position:0 var(--dotShift, 0px); }
  .client-card-preview:before{ background-position:0 var(--dotShift, 0px); }
  .mcd-stagger{
    opacity:0; transform:perspective(1000px) rotateX(-78deg) translateY(40px) scale(.9);
    transform-origin:50% 100%;
    transition:opacity .75s ease, transform .85s cubic-bezier(.16,.84,.32,1.18);
  }
  .mcd-stagger.mcd-in{ opacity:1; transform:perspective(1000px) rotateX(0deg) translateY(0) scale(1); }
  @media (max-width:760px){
    /* the 3D flip can visually expand past the card's own box under perspective,
       which overflows narrow viewports horizontally — keep it simple on mobile */
    .mcd-stagger{ transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
    .mcd-stagger.mcd-in{ transform:translateY(0); }
  }

  /* ---- EXAGGERATED 3D round two ---- */
  @keyframes mcdBreathe3D{
    0%,100%{ transform:perspective(400px) rotateY(-14deg) rotateX(4deg) translateZ(0px); }
    50%{ transform:perspective(400px) rotateY(14deg) rotateX(-4deg) translateZ(10px); }
  }

  @keyframes mcdBttSpin3D{
    0%,100%{ transform:perspective(300px) rotateY(0deg); }
    50%{ transform:perspective(300px) rotateY(18deg); }
  }
  #back-to-top{ transform-style:preserve-3d; }

  @keyframes mcdIconFloat3D{
    0%,100%{ transform:translateY(0) rotateZ(0deg) scale(1); }
    33%{ transform:translateY(-18px) rotateZ(4deg) scale(1.04); }
    66%{ transform:translateY(8px) rotateZ(-4deg) scale(.97); }
  }
  .icon-watermark{ animation:mcdIconFloat3D 6s ease-in-out infinite !important; }

  .img-col{ transform-style:preserve-3d; will-change:transform; }
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }
  .eyebrow{
    font-size:11px; font-weight:700; letter-spacing:2.5px; color:var(--gold); text-transform:uppercase;
    margin-bottom:14px; display:block;
  }
  h1,h2,h3{font-weight:800; color:var(--ink); line-height:1.15;}
  h1,h2{ font-family:'Fraunces','Montserrat',serif; font-weight:600; letter-spacing:-0.01em; }
  h2{font-size:clamp(28px,4vw,42px); margin-bottom:16px;}
  p{line-height:1.7;}
  .lede{font-size:17px; color:#5b5f68; max-width:640px;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 26px; border-radius:6px; font-weight:700; font-size:14px; cursor:pointer;
    border:none; transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background .2s ease, border-color .2s ease;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn:active{ transform:translateY(0); }
  .btn-gold{ background:var(--gold); color:var(--navy); position:relative; overflow:hidden; isolation:isolate; }
  .btn-gold:hover{ background:var(--gold-light); box-shadow:0 10px 24px rgba(201,162,39,.4); }
  .btn-gold::after{
    content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,.6), transparent);
    transform:skewX(-20deg); transition:left .65s ease; pointer-events:none;
  }
  .btn-gold:hover::after{ left:130%; }
  .btn-outline{ background:transparent; color:var(--off); border:1.5px solid rgba(248,247,244,.4); }
  .btn-outline.dark{ color:var(--navy); border-color:rgba(21,23,28,.3); }
  .btn-outline:hover{ border-color:var(--gold); color:var(--gold); }
  .section-pad{ padding:90px 0; }
  .center{ text-align:center; }
  .center .lede{ margin:0 auto; }

  /* ---------- HEADER ---------- */
  header{
    position:fixed; top:0; left:0; width:100%; z-index:50;
    background:rgba(21,23,28,.72); backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,.08);
    transition:box-shadow .3s ease, background .3s ease;
  }
  header.scrolled{ background:rgba(15,16,20,.92); box-shadow:0 8px 24px rgba(0,0,0,.25); }

  #scroll-progress{
    position:fixed; top:0; left:0; height:3px; width:0%; z-index:60;
    background:linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
    box-shadow:0 0 10px rgba(201,162,39,.6); transition:width .08s linear;
  }

  #back-to-top{
    position:fixed; bottom:26px; right:26px; width:44px; height:44px; border-radius:50%;
    background:var(--gold); color:var(--navy); border:none; font-size:18px; cursor:pointer;
    box-shadow:0 8px 20px rgba(0,0,0,.25); z-index:40; opacity:0; pointer-events:none;
    transform:translateY(10px); transition:opacity .3s ease, transform .3s ease;
  }
  #back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
  #back-to-top:hover{ background:var(--gold-light); }
  .nav{ display:flex; align-items:center; justify-content:space-between; height:72px; }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand img{ height:44px; width:auto; }
  .brand span{ color:var(--off); font-weight:700; font-size:15px; letter-spacing:.3px; }
  nav.links{ display:flex; align-items:center; gap:34px; }
  nav.links a{ color:var(--steel); font-size:13.5px; font-weight:600; position:relative; padding-bottom:4px; }
  nav.links a:after{
    content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--gold);
    transition:width .25s ease;
  }
  nav.links a:hover{ color:var(--gold); }
  nav.links a:hover:after, nav.links a.active:after{ width:100%; }
  nav.links a.active{ color:var(--gold); }
  .nav-cta{ display:flex; align-items:center; gap:16px; }
  .menu-btn{ display:none; background:none; border:none; color:var(--off); font-size:22px; cursor:pointer; }

  @media (max-width:860px){
    nav.links{ display:none; }
    .menu-btn{ display:block; }
    .nav-cta .btn{ padding:10px 16px; font-size:12.5px; }
  }

  /* ---------- HERO ---------- */
  #hero{
    background:var(--navy); min-height:100vh; display:flex; align-items:center; overflow:hidden;
    padding-top:72px;
  }
  #hero-canvas-wrap{ position:absolute; inset:0; z-index:1; }
  #hero-canvas-wrap canvas{ display:block; }
  .hero-inner{ position:relative; z-index:2; width:100%; text-align:center; padding:60px 24px; }
  .hero-inner .eyebrow{ opacity:0; animation:fadeUp .9s ease forwards .15s; }
  .hero-inner h1{
    color:var(--off); font-size:clamp(34px,7vw,64px); margin-bottom:18px;
    opacity:0; animation:fadeUp .9s ease forwards .35s;
  }
  .hero-inner h1 .gold{ color:var(--gold); }
  .hero-inner .lede{
    color:var(--steel); margin:0 auto 30px; opacity:0; animation:fadeUp .9s ease forwards .55s;
    font-family:'Fraunces',serif; font-style:italic; font-weight:500;
    font-size:clamp(19px,2.4vw,26px); letter-spacing:.2px; max-width:none;
  }
  .hero-ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; opacity:0; animation:fadeUp .9s ease forwards .75s; }
  @keyframes fadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
  .scroll-hint{
    position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
    color:#5b6068; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase;
  }

  /* ---------- SLIDER SECTION ---------- */
  #slider-section{ background:var(--off); }
  .compare{
    position:relative; width:100%; max-width:760px; margin:46px auto 0; aspect-ratio:16/11.5;
    border-radius:10px; overflow:hidden; box-shadow:0 30px 60px rgba(20,20,25,.18);
    cursor:ew-resize; user-select:none; border:1px solid rgba(0,0,0,.06);
    transition:box-shadow .3s ease;
  }
  .compare:hover{ box-shadow:0 36px 70px rgba(20,20,25,.24); }
  .compare-caption{ max-width:760px; margin:14px auto 0; display:flex; justify-content:space-between; padding:0 4px; }
  .cc-l{ font-size:11.5px; font-weight:700; color:#8a8d93; }
  .cc-r{ font-size:11.5px; font-weight:700; color:var(--gold); }

  .c-panel{ position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column;}

  /* ---- BEFORE: deliberately generic, dated, default-template feel ---- */
  .c-before{ background:#eaeaea; font-family:Arial, Helvetica, sans-serif; }
  .c-bar-old{ height:13%; background:#dcdcdc; border-bottom:1px solid #cacaca; display:flex; align-items:center; padding:0 5%; gap:14px; flex-shrink:0; }
  .logo-ph{ width:18px; height:18px; background:#b7b7b7; flex-shrink:0; }
  .nav-old{ display:flex; gap:10px; flex-wrap:wrap; }
  .nav-old span{ font-size:9.5px; color:#7a7a7a; }
  .stock-photo{ height:23%; background:repeating-linear-gradient(45deg,#d4d4d4,#d4d4d4 8px,#cccccc 8px,#cccccc 16px); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .content-old{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:3% 7%; min-height:0; }
  .content-old h4{ font-family:Arial, Helvetica, sans-serif; font-size:clamp(13px,2.3vw,19px); color:#555; margin:0 0 8px; font-weight:700; }
  .c-line{ height:6px; border-radius:1px; margin-bottom:6px; background:#cacaca; width:70%; }
  .c-line.w2{ width:52%; margin-bottom:10px; }
  .btn-row-old{ display:flex; gap:6px; margin-top:2px; }
  .btn-old{ font-size:9.5px; font-weight:700; font-family:Arial,sans-serif; padding:7px 12px; color:#fff; white-space:nowrap; }
  .btn-old-1{ background:#3b78c4; }
  .btn-old-2{ background:#5cb85c; }
  .stars-old{ margin-top:8px; font-size:10px; color:#c9a227; letter-spacing:1px; }
  .stars-old span{ color:#9a9a9a; font-size:8.5px; letter-spacing:normal; margin-left:2px; }
  .foot-old{ flex-shrink:0; text-align:right; font-size:7.5px; color:#a3a3a3; padding:5px 5% 7px; font-family:Arial,sans-serif; }

  /* ---- AFTER: rich, intentional, branded ---- */
  .c-after{ background:radial-gradient(circle at 55% 50%, rgba(201,162,39,.2) 0%, transparent 46%), radial-gradient(ellipse at 70% 20%, #1c3650 0%, var(--navy) 55%, #0d1117 100%); width:760px; max-width:none; position:relative; overflow:hidden; }
  .after-dust{ position:absolute; inset:0; z-index:0; pointer-events:none; }
  .icon-watermark-wrap{
    position:absolute; left:417px; top:50%; width:230px; height:230px; transform:translateY(-50%);
    z-index:0; pointer-events:none; display:flex; align-items:center; justify-content:center;
  }
  .icon-watermark-glow{
    position:absolute; inset:-20%; border-radius:50%;
    background:radial-gradient(circle, rgba(201,162,39,.38) 0%, rgba(201,162,39,.12) 45%, transparent 72%);
    animation:iconGlowPulse 4.5s ease-in-out infinite;
  }
  .icon-watermark-ring{
    position:absolute; inset:6%; border-radius:50%; border:1px dashed rgba(201,162,39,.35);
    animation:iconRingSpin 32s linear infinite;
  }
  .icon-watermark{
    position:relative; width:62%; opacity:.85; filter:drop-shadow(0 0 26px rgba(201,162,39,.55)) drop-shadow(0 0 60px rgba(201,162,39,.25));
    animation:iconFloat 5s ease-in-out infinite;
  }
  @keyframes iconGlowPulse{ 0%,100%{ opacity:.7; transform:scale(1); } 50%{ opacity:1; transform:scale(1.08); } }
  @keyframes iconRingSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
  @keyframes iconFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
  @media (max-width:600px){
    .icon-watermark-wrap{ left:150px; top:64%; width:190px; height:190px; }
    .c-after{ width:100% !important; max-width:100% !important; }
  }
  @media (max-width:760px){
    /* on mobile the comparison panel's text stretches full-width, leaving no
       clear space for the large glowing watermark without it overlapping
       the heading/pills — hide it rather than risk future overlap as text reflows */
    .icon-watermark-wrap{ display:none; }
  }
  @media (prefers-reduced-motion: reduce){
    .icon-watermark-glow, .icon-watermark-ring, .icon-watermark{ animation:none; }
  }
  .c-after:before{
    content:""; position:absolute; inset:0;
    background-image:radial-gradient(circle, rgba(201,162,39,.55) 1px, transparent 1.4px);
    background-size:26px 26px; opacity:.35;
  }
  .c-bar-new{ height:13%; display:flex; align-items:center; gap:10px; padding:0 5%; position:relative; z-index:1; border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0; }
  .dot-mark{ width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px rgba(201,162,39,.7); flex-shrink:0; }
  .c-bar-new span{ font-size:10.5px; font-weight:700; letter-spacing:1.3px; color:var(--off); }
  .content-new{ flex:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:4% 7%; position:relative; z-index:1; min-height:0; }
  .tagx{ font-size:9.5px; letter-spacing:1.8px; color:var(--gold); font-weight:700; margin-bottom:8px; }
  .content-new h4{ font-size:clamp(15px,3.2vw,25px); color:var(--off); margin:0 0 8px; font-weight:800; line-height:1.18; }
  .content-new h4 em{ color:var(--gold); font-style:normal; }
  .content-new p{ font-size:11px; color:var(--steel); margin-bottom:12px; line-height:1.45; }
  .btn-new{ background:var(--gold); color:var(--navy); font-size:10.5px; font-weight:800; padding:9px 18px; border-radius:5px; box-shadow:0 8px 18px rgba(201,162,39,.3); }
  .trust-new{ margin-top:14px; display:flex; gap:7px; flex-wrap:wrap; }
  .trust-new .pill{
    font-size:8.8px; font-weight:700; letter-spacing:.2px; color:var(--gold);
    border:1px solid rgba(201,162,39,.4); border-radius:20px; padding:5px 10px;
    background:rgba(201,162,39,.08);
  }
  .foot-new{ flex-shrink:0; text-align:left; font-size:7.5px; color:#5f6a7d; padding:5px 0 7px 5%; position:relative; z-index:1; }

  .c-clip{ position:absolute; top:0; left:0; height:100%; width:50%; overflow:hidden; }
  .c-handle{ position:absolute; top:0; left:50%; height:100%; width:3px; background:var(--gold); transform:translateX(-50%); box-shadow:0 0 10px rgba(201,162,39,.55); }
  .c-grip{ position:absolute; top:50%; left:50%; width:42px; height:42px; border-radius:50%; background:var(--gold);
    transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; font-weight:800;
    color:var(--navy); box-shadow:0 6px 18px rgba(0,0,0,.25); font-size:15px; animation:gripHint 1.8s ease-in-out infinite; }
  .compare.dragged .c-grip{ animation:none; }
  @keyframes gripHint{ 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-58%,-50%) scale(1.06); } }

  /* ---------- WHY CUSTOM ---------- */
  #why{ background:var(--off); }
  .why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; perspective:1600px; }
  .why-grid img{ border-radius:8px; box-shadow:0 26px 50px rgba(20,20,25,.16); overflow:hidden; transition:transform .5s cubic-bezier(.2,.8,.2,1); display:block; }
  .img-col{ border-radius:8px; overflow:hidden; position:relative; }
  .img-col .tilt-inner{ transform-style:preserve-3d; transition:transform .4s cubic-bezier(.2,.8,.2,1); position:relative; z-index:1; }
  .img-col.tilting .tilt-inner{ transition:none; }
  .img-col:hover img{ transform:scale(1.045); }
  .img-col::before{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
    background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(201,162,39,.22), transparent 60%);
    opacity:0; transition:opacity .4s ease;
  }
  .img-col:hover::before{ opacity:1; }
  @media (max-width:860px){ .why-grid{ grid-template-columns:1fr; gap:30px; } .why-grid .img-col{ order:-1; } }

  /* ---------- PRICING ---------- */
  #pricing{ background:#efedea; }
  .tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; perspective:1400px; }
  @media (max-width:980px){ .tiers{ grid-template-columns:1fr; } }
  .tier{
    background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:10px;
    display:flex; flex-direction:column; position:relative; overflow:hidden;
    padding:34px 28px; transition:box-shadow .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .tier:hover{ box-shadow:0 24px 44px rgba(20,20,25,.13); }
  .tier.featured:hover{ box-shadow:0 34px 64px rgba(20,20,25,.3); }
  .tier.featured{ background:var(--navy); border-color:var(--navy); color:var(--off); box-shadow:0 30px 60px rgba(20,20,25,.25); padding-top:48px; }
  .tier::before{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
    background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(201,162,39,.22), transparent 55%);
    opacity:0; transition:opacity .3s ease;
  }
  .tier:hover::before{ opacity:1; }
  .tier.featured::before{ background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(201,162,39,.32), transparent 55%); }
  .tier:hover{ transform:translateY(-6px); box-shadow:0 24px 44px rgba(20,20,25,.13); }
  .tier.featured:hover{ transform:translateY(-14px); box-shadow:0 34px 64px rgba(20,20,25,.3); }
  .tier.featured{ background:var(--navy); border-color:var(--navy); color:var(--off); transform:translateY(-8px); box-shadow:0 30px 60px rgba(20,20,25,.25); }
  @keyframes mcdGoldGlow{
    0%,100%{ box-shadow:0 30px 60px rgba(20,20,25,.25), 0 0 0 rgba(201,162,39,0); }
    50%{ box-shadow:0 30px 60px rgba(20,20,25,.25), 0 0 36px rgba(201,162,39,.32); }
  }
  .tier.featured{ animation:mcdGoldGlow 4s ease-in-out infinite; }
  .tier.featured:hover{ animation-play-state:paused; }
  .tier.featured::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:3; border-radius:inherit;
    background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.07) 50%, transparent 65%);
    background-size:240% 100%; background-position:-140% 0;
    animation:mcdSheenSweep 6s ease-in-out infinite;
  }
  @keyframes mcdSheenSweep{
    0%, 40%{ background-position:-140% 0; }
    60%, 100%{ background-position:140% 0; }
  }
  .tier .badge{ position:absolute; top:16px; right:20px; background:var(--gold); color:var(--navy); font-size:10px;
    font-weight:800; letter-spacing:.6px; padding:5px 12px; border-radius:20px; z-index:4;
    box-shadow:0 4px 12px rgba(201,162,39,.35); }
  .tier h3{ font-size:21px; margin-bottom:6px; }
  .tier.featured h3{ color:var(--off); }
  .tier .price{ font-size:28px; font-weight:800; color:var(--emerald); margin-bottom:2px; }
  .tier.featured .price{ color:var(--gold); }
  .tier .price-to{ font-size:12px; color:#8a8d93; margin-bottom:18px; }
  .tier.featured .price-to{ color:var(--steel); }
  .tier .desc{ font-size:14px; color:#5b5f68; margin-bottom:22px; min-height:62px; }
  .tier.featured .desc{ color:#cdd3dd; }
  .tier ul{ list-style:none; margin:0 0 26px; padding:0; flex:1; }
  .tier li{ font-size:13px; padding:8px 0 8px 22px; position:relative; border-top:1px solid rgba(0,0,0,.06); color:#4b4f57; }
  .tier.featured li{ border-top:1px solid rgba(255,255,255,.1); color:#c7cedb; }
  .tier li:before{ content:"\2713"; position:absolute; left:0; top:8px; color:var(--emerald); font-weight:800; font-size:12px; }
  .tier.featured li:before{ color:var(--gold); }
  .tier .btn{ width:100%; }
  .spotlight-cta{ margin-top:16px; padding:11px 20px; font-size:12.5px; }
  .tier-addon{
    font-size:12.5px; color:var(--gold-light); border-top:1px solid rgba(255,255,255,.14);
    padding:14px 0 18px; margin-top:-8px; text-align:center; font-weight:600; letter-spacing:.2px;
  }

  .founding{
    margin-top:42px; background:var(--emerald); color:var(--off); border-radius:10px;
    padding:26px 30px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  }
  .founding strong{ display:block; font-size:16px; margin-bottom:4px; }
  .founding span{ font-size:13px; color:#d7ecdf; }

  .maint{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:60px; perspective:1200px; }
  @media (max-width:860px){ .maint{ grid-template-columns:1fr; } }
  .maint .card{
    background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:8px;
    position:relative; overflow:hidden; transition:box-shadow .3s ease; padding:22px;
  }
  .maint .card.tilting{ transition:none; }
  .maint .card:hover{ box-shadow:0 18px 32px rgba(20,20,25,.12); }
  .maint .card .tilt-inner{
    position:relative; z-index:1; transform-style:preserve-3d;
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .maint .card:hover .tilt-inner{ transform:translateY(-4px); }
  .maint .card.tilting .tilt-inner{ transition:none; }
  .maint .card::before{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
    background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(201,162,39,.18), transparent 55%);
    opacity:0; transition:opacity .3s ease;
  }
  .maint .card:hover::before{ opacity:1; }
  .maint .card h4{ font-size:15px; margin-bottom:4px; color:var(--ink); }
  .maint .card .p{ font-weight:800; color:var(--emerald); font-size:14px; margin-bottom:10px; }
  .maint .card p{ font-size:12.5px; color:#666; }

  .guarantee{ margin-top:54px; max-width:760px; }
  .guarantee h3{ font-size:17px; margin-bottom:10px; }
  .guarantee p{ font-size:14px; color:#5b5f68; }

  /* ---------- SECTION BREAK ---------- */
  .break{
    height:46vh; min-height:300px; background-size:120%; background-position:center 50%;
    display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
    will-change:background-position;
  }
  .break-video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:66% 48%; z-index:0;
    opacity:0; transition:opacity 1.2s ease;
  }
  .break-video.is-playing{ opacity:1; }
  .break:after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(21,23,28,.30) 0%, rgba(21,23,28,.72) 42%, rgba(21,23,28,.72) 62%, rgba(21,23,28,.35) 100%); }
  .break .quote{ position:relative; z-index:2; color:var(--off); font-style:italic; font-size:clamp(18px,2.6vw,26px); text-align:center; padding:0 24px; text-shadow:0 2px 18px rgba(0,0,0,.85), 0 1px 6px rgba(0,0,0,.9); }
  .break .quote .gold{ color:var(--gold); font-style:normal; font-weight:700; }

  /* ---------- PORTFOLIO TEASER ---------- */
  #portfolio-teaser{ background:var(--navy); color:var(--off); position:relative; overflow:hidden; }
  #portfolio-teaser > .wrap{ position:relative; z-index:1; }
  .ambient-dust{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
  #portfolio-teaser .eyebrow{ }
  #portfolio-teaser h2{ color:var(--off); }
  #portfolio-teaser .lede{ color:var(--steel); }
  .client-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:46px; text-align:left; perspective:1500px; }
  @media (max-width:980px){ .client-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){ .client-grid{ grid-template-columns:1fr; } }
  .client-card{
    display:block; border-radius:10px; overflow:hidden; background:#0d1117; position:relative;
    border:1px solid rgba(255,255,255,.09); text-decoration:none; color:var(--off);
    transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
  }
  .client-card .tilt-inner{ transform-style:preserve-3d; transition:transform .3s cubic-bezier(.2,.8,.2,1); position:relative; z-index:1; }
  .client-card.tilting .tilt-inner{ transition:none; }
  .client-card::before{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
    background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(201,162,39,.28), transparent 55%);
    opacity:0; transition:opacity .3s ease;
  }
  .client-card:hover::before{ opacity:1; }
  .client-card:hover{ transform:translateY(-5px); border-color:rgba(201,162,39,.45); box-shadow:0 22px 40px rgba(0,0,0,.35); }
  .client-card-browser{ display:flex; align-items:center; gap:6px; padding:9px 10px; background:#1a1d24; border-bottom:1px solid rgba(255,255,255,.07); }
  .client-card-browser .dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.18); }
  .client-card-browser .url{ margin-left:6px; font-size:9.5px; color:#8a8f9c; background:rgba(255,255,255,.05); border-radius:4px; padding:3px 8px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .client-card-preview{
    height:180px; min-height:180px; display:block; position:relative; overflow:hidden;
    background-size:100% auto; background-repeat:no-repeat; background-position:center center;
    transition:background-position 2.5s ease;
  }
  .client-card:hover .client-card-preview{ background-position:center bottom; }
  .client-card-preview:before{ content:""; position:absolute; inset:0;
    background:linear-gradient(to bottom, rgba(10,11,15,0) 78%, rgba(10,11,15,.55) 100%); pointer-events:none; }
  .client-card-tag{ display:none; }
  .client-card-title{ display:none; }
  .client-card-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; background:#12151b; border-top:1px solid rgba(255,255,255,.06); }
  .client-card-footer .name{ display:flex; flex-direction:column; gap:3px; font-size:13.5px; font-weight:700; line-height:1.3; }
  .client-card-footer .tag-inline{ font-size:10.5px; font-weight:500; letter-spacing:.2px; text-transform:none; color:var(--gold); opacity:.85; margin-left:0; }
  .client-card-footer{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; background:rgba(255,255,255,.03); }
  .client-card-footer .name{ font-size:13px; font-weight:700; }
  .client-card-footer .arrow{ color:var(--gold); font-size:14px; transition:transform .25s ease; }
  .client-card:hover .arrow{ transform:translateX(3px); }
  .coming{ text-align:center; margin-top:36px; color:#7b828e; font-size:12.5px; letter-spacing:.3px; }

  /* ---------- TESTIMONIALS ---------- */
  #testimonials{ background:var(--off); }
  .testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:46px; text-align:left; perspective:1400px; }
  @media (max-width:860px){ .testimonial-grid{ grid-template-columns:1fr; } }
  .testimonial-card{
    background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:10px; padding:26px 22px;
    position:relative; display:flex; flex-direction:column; box-shadow:0 10px 24px rgba(20,20,25,.05);
    overflow:hidden; transition:box-shadow .3s ease;
  }
  .testimonial-card:hover{ box-shadow:0 22px 40px rgba(20,20,25,.13); }
  .testimonial-card .tilt-inner{
    display:flex; flex-direction:column; flex:1; position:relative; z-index:1;
    transform-style:preserve-3d; transition:transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .testimonial-card:hover .tilt-inner{ transform:translateY(-4px); }
  .testimonial-card.tilting .tilt-inner{ transition:none; }
  .testimonial-card::before{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
    background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(201,162,39,.16), transparent 55%);
    opacity:0; transition:opacity .3s ease;
  }
  .testimonial-card:hover::before{ opacity:1; }
  .quote-mark{ font-size:34px; color:var(--gold); line-height:1; font-family:Georgia,serif; margin-bottom:6px; }
  .testimonial-text{ font-size:14px; color:#4b4f57; line-height:1.55; margin-bottom:18px; flex:1; }
  .testimonial-author strong{ display:block; font-size:13.5px; color:var(--ink); }
  .testimonial-author span{ font-size:12px; color:#8a8d93; }

  /* ---------- FAQ ---------- */
  #faq{ background:var(--off); }
  .faq-item{ border-top:1px solid rgba(0,0,0,.08); }
  .faq-item:last-child{ border-bottom:1px solid rgba(0,0,0,.08); }
  .faq-q{
    width:100%; background:none; border:none; text-align:left; cursor:pointer; padding:20px 4px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    font-family:inherit; font-size:15.5px; font-weight:700; color:var(--ink);
  }
  .faq-q:hover{ color:var(--emerald); }
  .faq-icon{ flex-shrink:0; font-size:18px; font-weight:400; color:var(--gold); transition:transform .3s ease; line-height:1; }
  .faq-item.open .faq-icon{ transform:rotate(45deg); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
  .faq-a p{ font-size:13.5px; color:#5b5f68; padding:0 4px 20px; }

  /* ---------- CONTACT / FOOTER ---------- */
  #contact{ background:var(--navy-2); color:var(--off); position:relative; overflow:hidden; }
  #contact > .wrap{ position:relative; z-index:1; }
  #contact .eyebrow{}
  #contact h2{ color:var(--off); }
  #contact .lede{ color:var(--steel); }
  .contact-direct{ margin-top:22px; font-size:13.5px; color:var(--steel); }
  .contact-direct a{ color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(201,162,39,.4); }
  .contact-direct a:hover{ border-bottom-color:var(--gold); }
  form{ max-width:560px; margin:36px auto 0; display:grid; gap:14px; }
  form input, form textarea{
    width:100%; padding:14px 16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
    border-radius:6px; color:var(--off); font-family:inherit; font-size:14px;
  }
  form input::placeholder, form textarea::placeholder{ color:#7f8794; }
  form textarea{ min-height:120px; resize:vertical; }
  form .btn{ justify-self:center; margin-top:6px; padding:14px 36px; }

  footer{ background:var(--navy); padding:40px 0 28px; }
  .footer-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
  .footer-inner .brand span{ color:var(--steel); font-size:12.5px; }
  .footer-links{ display:flex; gap:20px; }
  .footer-links a{ color:#7b828e; font-size:12.5px; }
  .footer-links a:hover{ color:var(--gold); }
  /* ===== PERFORMANCE CHARTS ===== */
  #why-custom{ background:var(--off); }
  .perf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:48px; }
  .perf-chart{
    background:#fff; border:1px solid #e7e4dc; border-radius:16px; padding:30px 32px;
    box-shadow:0 2px 20px rgba(21,23,28,.04);
  }
  .perf-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:26px; }
  .perf-metric{ font-weight:700; font-size:15px; color:var(--ink); }
  .perf-note{ font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:#9a9188; }
  .bar-row{ display:flex; align-items:center; gap:16px; margin-bottom:16px; }
  .bar-row:last-child{ margin-bottom:0; }
  .bar-label{ flex:0 0 130px; font-size:12.5px; color:#5b5f68; text-align:right; }
  .bar-track{ flex:1; height:34px; background:#f1efe9; border-radius:8px; overflow:hidden; position:relative; }
  .bar-fill{
    height:100%; width:0; border-radius:8px; display:flex; align-items:center; justify-content:flex-end;
    padding-right:12px; transition:width 1.1s cubic-bezier(.16,.8,.3,1);
  }
  .bar-fill span{ font-size:12.5px; font-weight:700; color:#fff; }
  .bar-old{ background:linear-gradient(90deg,#c3bcb0,#a8a094); }
  .bar-old span{ color:#4a463f; }
  .bar-new{ background:linear-gradient(90deg,var(--gold),#b08d1f); box-shadow:0 0 18px rgba(201,162,39,.35); }
  .perf-chart.in-view .bar-fill{ width:var(--target); }

  /* comparison table */
  .compare-table{
    margin-top:32px; background:#fff; border:1px solid #e7e4dc; border-radius:16px; overflow:hidden;
    box-shadow:0 2px 20px rgba(21,23,28,.04);
  }
  .ct-row{ display:grid; grid-template-columns:1.1fr 1.3fr 1.3fr; align-items:center; }
  .ct-row:not(:last-child){ border-bottom:1px solid #efece5; }
  .ct-row span{ padding:16px 22px; font-size:13.5px; }
  .ct-head span{ font-weight:800; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--ink); background:#faf8f4; }
  .ct-head span:last-child{ color:var(--gold); }
  .ct-feat{ font-weight:700; color:var(--ink); }
  .ct-no{ color:#8a8178; }
  .ct-no::before{ content:'\\2715  '; color:#c9c2b8; font-weight:700; }
  .ct-yes{ color:#2f6b4f; font-weight:600; }
  .ct-yes::before{ content:'\\2713  '; color:var(--emerald); font-weight:800; }
  @media (max-width:820px){
    .perf-grid{ grid-template-columns:1fr; }
    .bar-label{ flex-basis:100px; }
    .ct-row{ grid-template-columns:1fr; }
    .ct-row span{ padding:10px 18px; }
    .ct-head{ display:none; }
    .ct-feat{ background:#faf8f4; padding-top:14px; }
    .ct-no::before{ content:'Template: \\2715  '; font-size:11px; }
    .ct-yes::before{ content:'MCD: \\2713  '; font-size:11px; }
  }

  .copyright{ text-align:center; color:#565c66; font-size:11.5px; margin-top:26px; }

  /* ===== V2 STRATEGY PASS ===== */
  .trust-line{
    margin-top:34px; font-size:11.5px; letter-spacing:1.8px; text-transform:uppercase;
    color:#6f7889; opacity:0; animation:fadeUp .9s ease forwards 1s;
  }

  /* Proof band */
  #proof{ background:var(--navy-2); padding:0; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
  .proof-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
  .proof-item{ padding:34px 20px; text-align:center; border-right:1px solid rgba(255,255,255,.06); }
  .proof-item:last-child{ border-right:none; }
  .proof-num{ font-family:'Fraunces',serif; font-size:clamp(30px,3.4vw,42px); font-weight:600; color:var(--gold); line-height:1; margin-bottom:8px; }
  .proof-plus{ font-size:.6em; vertical-align:super; margin-left:1px; }
  .proof-label{ font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--steel); }
  @media (max-width:760px){
    .proof-grid{ grid-template-columns:1fr 1fr; }
    .proof-item{ padding:26px 14px; }
    .proof-item:nth-child(2){ border-right:none; }
    .proof-item:nth-child(1), .proof-item:nth-child(2){ border-bottom:1px solid rgba(255,255,255,.06); }
  }

  /* Proof band */
  #audiences{ background:var(--navy); padding:88px 0; }
  #audiences .eyebrow{ }
  #audiences h2{ color:var(--off); }
  #audiences .lede{ color:var(--steel); }
  .audience-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px; text-align:left; }
  .audience-card{
    background:var(--navy-2); border:1px solid rgba(255,255,255,.07); border-radius:14px;
    padding:32px 28px; position:relative; overflow:hidden;
    transition:transform .35s ease, border-color .35s ease;
  }
  .audience-card::before{
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, var(--gold), transparent 70%);
    opacity:0; transition:opacity .35s ease;
  }
  .audience-card:hover{ transform:translateY(-5px); border-color:rgba(201,162,39,.35); }
  .audience-card:hover::before{ opacity:1; }
  .audience-card .a-icon{ display:block; margin-bottom:18px; }
  .audience-card .a-icon svg{ width:34px; height:34px; color:var(--gold); }
  .audience-card h3{ color:var(--off); font-size:19px; margin-bottom:10px; }
  .audience-card p{ color:var(--steel); font-size:13.5px; }
  .audience-card .a-for{ margin-top:16px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); }
  @media (max-width:860px){ .audience-grid{ grid-template-columns:1fr; } }

  /* Add-ons — beyond the website */
  .addons-head{ margin-top:72px; }
  .addons-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; }
  .addon-card{
    background:#fff; border:1px solid #e7e4dc; border-radius:12px; padding:26px 24px; text-align:left;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .addon-card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(21,23,28,.10); }
  .addon-card h4{ font-size:15px; color:var(--ink); margin-bottom:6px; font-weight:700; }
  .addon-card .a-price{ color:var(--emerald); font-weight:700; font-size:13px; margin-bottom:10px; }
  .addon-card p{ font-size:12.8px; color:#5b5f68; line-height:1.65; }
  .addon-card .a-tag{
    display:inline-block; font-size:9.5px; letter-spacing:1.4px; text-transform:uppercase;
    background:rgba(201,162,39,.12); color:#8d711b; padding:4px 9px; border-radius:20px; margin-bottom:12px; font-weight:700;
  }
  @media (max-width:860px){ .addons-grid{ grid-template-columns:1fr; } }
  @media (min-width:861px){ .addon-orphan{ grid-column:2; } }

  /* Founder */
  #founder{ background:var(--navy); padding:96px 0; overflow:hidden; }
  .founder-grid{ display:grid; grid-template-columns:1fr 1.25fr; gap:56px; align-items:center; }
  .founder-visual{
    position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/5;
    border:1px solid rgba(201,162,39,.28);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 60px rgba(0,0,0,.45);
  }
  .founder-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); }
  .founder-visual::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(to top, rgba(10,11,15,.88) 0%, rgba(10,11,15,.15) 38%, transparent 62%);
  }
  .founder-visual .fv-tag{
    position:absolute; left:24px; bottom:22px; z-index:2;
    font-size:10.5px; letter-spacing:3px; text-transform:uppercase;
    color:var(--gold); font-weight:700;
  }
  .founder-visual .fv-tag::before{
    content:''; display:block; width:22px; height:1px; background:rgba(201,162,39,.6);
    margin-bottom:9px;
  }
  #founder h2{ color:var(--off); }
  #founder p{ color:var(--steel); font-size:14.5px; margin-bottom:14px; }
  #founder .founder-sign{
    font-family:'Fraunces',serif; font-style:italic; font-size:19px; color:var(--gold); margin-top:22px;
  }
  .founder-creds{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
  .founder-creds span{
    font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--steel);
    border:1px solid rgba(255,255,255,.14); border-radius:20px; padding:6px 13px;
  }
  @media (max-width:860px){ .founder-grid{ grid-template-columns:1fr; gap:34px; } .founder-visual{ width:100%; max-width:340px; margin:0 auto; } }

  /* Process */
  #process{ padding:88px 0; }
  .process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px; }
  .process-step{ text-align:left; padding:24px 20px; border-left:2px solid #e7e4dc; transition:border-color .3s ease; }
  .process-step:hover{ border-color:var(--gold); }
  .process-step .p-num{
    font-family:'Fraunces',serif; font-size:34px; color:var(--gold); font-weight:600; display:block; margin-bottom:12px;
  }
  .process-step h4{ font-size:15px; color:var(--ink); margin-bottom:8px; font-weight:700; }
  .process-step p{ font-size:12.8px; color:#5b5f68; line-height:1.65; }
  @media (max-width:860px){ .process-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .process-grid{ grid-template-columns:1fr; } }
  /* ---------- client roster (Trusted by) ---------- */
  .roster{ background:var(--navy); padding:84px 0; border-top:1px solid rgba(255,255,255,.07); }
  .roster .roster-h{ color:var(--off); }
  .roster .lede{ color:var(--steel); margin-left:auto; margin-right:auto; }
  .logo-wall{
    margin-top:44px; display:flex; flex-wrap:wrap; justify-content:center;
    align-items:flex-start; gap:40px 56px; max-width:920px; margin-left:auto; margin-right:auto;
  }
  .logo-item{ display:flex; flex-direction:column; align-items:center; gap:12px; }
  .logo-item img{
    height:44px; width:auto; max-width:190px; object-fit:contain;
    opacity:.66; transition:opacity .3s ease, transform .3s ease;
  }
  .logo-item:hover img{ opacity:1; transform:translateY(-2px); }
  .logo-item span{
    font-size:9.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
    color:var(--gold); opacity:.85;
  }
  .roster-note{ margin-top:40px; font-size:12.5px; color:var(--steel); opacity:.8; }
  @media (max-width:620px){
    .logo-wall{ gap:32px 36px; }
    .logo-item img{ height:36px; max-width:140px; }
  }

  /* ---------- founder "As seen with" ---------- */
  .seen-with{ margin-top:26px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
  .seen-label{
    font-size:10px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--steel);
  }
  .seen-logos{ display:flex; align-items:center; gap:26px; }
  .seen-logos img{ height:26px; width:auto; opacity:.85; }
  .seen-logos img:first-child{ height:20px; }

  /* ---------- areas we serve ---------- */
  .areas{ background:var(--navy-2); padding:46px 0; border-top:1px solid rgba(255,255,255,.06); }
  .areas .eyebrow{ margin-bottom:10px; }
  .areas-line{ font-size:14.5px; line-height:1.6; color:var(--steel); max-width:760px; margin:0 auto; }
  .areas-line strong{ color:var(--off); font-weight:600; }

  /* ---------- cookie banner ---------- */
  #cookie-banner{
    position:fixed; left:16px; right:16px; bottom:16px; z-index:120;
    max-width:560px; margin:0 auto; background:rgba(21,23,28,.97);
    border:1px solid rgba(201,162,39,.35); border-radius:14px; padding:18px 20px;
    box-shadow:0 18px 50px rgba(0,0,0,.45); backdrop-filter:blur(6px);
    display:flex; flex-direction:column; gap:14px;
    opacity:0; transform:translateY(14px); transition:opacity .35s ease, transform .35s ease;
  }
  #cookie-banner.show{ opacity:1; transform:translateY(0); }
  #cookie-banner p{ font-size:12.5px; line-height:1.55; color:var(--steel); margin:0; }
  #cookie-banner a{ color:var(--gold-light); text-decoration:underline; }
  .cookie-actions{ display:flex; gap:10px; justify-content:flex-end; }
  .cookie-actions .btn{ padding:9px 16px; font-size:12px; }
  @media (max-width:520px){
    .cookie-actions{ justify-content:stretch; }
    .cookie-actions .btn{ flex:1; text-align:center; }
  }
  /* ---------- capabilities (full-service studio) ---------- */
  .capabilities{ background:var(--off); padding:88px 0 76px; }
  .cap-h{ font-size:clamp(28px,3.6vw,42px); margin-top:10px; }
  .capabilities .lede{ margin:14px auto 0; max-width:560px; }
  .cap-grid{
    margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:rgba(21,23,28,.08); border:1px solid rgba(21,23,28,.08);
  }
  .cap-item{ background:var(--off); padding:38px 32px; }
  .cap-num{
    display:block; font-family:'Fraunces',serif; font-size:13px; font-weight:600;
    color:var(--gold); letter-spacing:1px; margin-bottom:14px;
  }
  .cap-item h4{ font-size:17px; margin-bottom:8px; }
  .cap-item p{ font-size:14px; line-height:1.55; color:var(--body-text); opacity:.82; margin:0; }
  @media (max-width:820px){
    .cap-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:560px){
    .cap-grid{ grid-template-columns:1fr; }
    .cap-item{ padding:30px 24px; }
  }
  /* ---------- intro logo loader ---------- */
  html.intro-active{ overflow:hidden; }
  #intro-loader{
    position:fixed; inset:0; z-index:10000; background:var(--navy);
    display:flex; align-items:center; justify-content:center;
    transition:opacity .5s ease, visibility .5s ease; cursor:pointer;
  }
  #intro-loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  .intro-mark{ position:relative; display:flex; flex-direction:column; align-items:center; gap:20px; }
  .intro-glow{
    position:absolute; top:50%; left:50%; width:70vw; max-width:520px; aspect-ratio:1/1;
    transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
    background:radial-gradient(circle, rgba(201,162,39,.16) 0%, rgba(201,162,39,.06) 40%, rgba(201,162,39,0) 72%);
    opacity:0; animation:introGlow 1s ease forwards .05s;
  }
  @keyframes introGlow{ to{ opacity:1; } }
  .intro-mark img{
    position:relative; z-index:1;
    width:clamp(220px, 34vw, 420px); height:auto; opacity:0; transform:scale(.9) translateY(6px);
    animation:introLogo .7s cubic-bezier(.22,.68,.35,1) forwards .1s;
  }
  .intro-line{
    width:0; height:1px; background:var(--gold);
    animation:introLine .5s ease forwards .6s;
  }
  @keyframes introLogo{ to{ opacity:1; transform:scale(1) translateY(0); } }
  @keyframes introLine{ to{ width:150px; } }
  @media (prefers-reduced-motion:reduce){
    #intro-loader{ transition:none; }
    .intro-mark img{ animation:none; opacity:1; transform:none; }
    .intro-line{ animation:none; width:150px; }
    .intro-glow{ animation:none; opacity:1; }
  }
  /* ---------- Maiden City AI teaser ---------- */
  #mcd-ai{ background:var(--navy-2); padding:88px 0; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
  .mcdai-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start; }
  .mcdai-copy h2{ color:var(--off); font-size:clamp(26px,3vw,36px); margin:12px 0 16px; }
  .mcdai-copy .lede{ color:var(--steel); max-width:480px; }
  .mcdai-copy .btn{ margin-top:26px; }
  .mcdai-list{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .mcdai-item{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:22px 20px; }
  .mcdai-status{
    display:inline-block; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    color:var(--gold-light); border:1px solid rgba(224,189,76,.35); border-radius:999px; padding:4px 10px; margin-bottom:12px;
  }
  .mcdai-item h4{ color:var(--off); font-size:16px; margin-bottom:6px; }
  .mcdai-item p{ color:var(--steel); font-size:13px; line-height:1.55; }
  @media (max-width:860px){
    .mcdai-grid{ grid-template-columns:1fr; gap:36px; }
    .mcdai-list{ grid-template-columns:1fr; }
  }

/* ===== Maiden City Digital Weddings entry window ===== */
.nav-weddings{ color:#C9A227 !important; letter-spacing:.14em; }
.mcdw{ background:#0d0c0b; padding:clamp(18px, 3vw, 40px); }
.mcdw-card{ position:relative; display:block; max-width:1400px; margin:0 auto; min-height:clamp(460px, 78vh, 760px); overflow:hidden; color:#f3eee6; isolation:isolate; }
.mcdw-bg,.mcdw-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mcdw-bg img{ transform:scale(1.06); transition:transform 2.4s cubic-bezier(.2,.7,.1,1); }
.mcdw-card:hover .mcdw-bg img,.mcdw-card:focus-visible .mcdw-bg img{ transform:scale(1); }
.mcdw-shade{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(13,12,11,.9), rgba(13,12,11,.45) 55%, rgba(13,12,11,.15)), linear-gradient(0deg, rgba(13,12,11,.8), transparent 55%); }
.mcdw-inner{ position:absolute; left:0; right:0; bottom:0; padding:clamp(28px, 5vw, 72px); display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.mcdw-eyebrow{ font:600 11px/1.3 'Montserrat',sans-serif; letter-spacing:.3em; text-transform:uppercase; color:#d4bc92; }
.mcdw-title{ font-family:'Fraunces',Georgia,serif; font-weight:400; font-size:clamp(2.8rem, 8vw, 7.4rem); line-height:.9; letter-spacing:-.03em; }
.mcdw-title em{ font-style:italic; color:#d4bc92; }
.mcdw-triad{ font:500 12px/1.8 'Montserrat',sans-serif; letter-spacing:.32em; text-transform:uppercase; }
.mcdw-copy{ max-width:36em; font-size:1rem; line-height:1.7; color:rgba(243,238,230,.8); }
.mcdw-cta{ display:inline-flex; align-items:center; gap:14px; margin-top:8px; padding:18px 28px; background:#b89b6c; color:#0d0c0b; font:600 12px/1 'Montserrat',sans-serif; letter-spacing:.24em; text-transform:uppercase; transition:gap .5s, background .4s; }
.mcdw-cta svg{ width:18px; height:10px; }
.mcdw-card:hover .mcdw-cta{ gap:24px; background:#f3eee6; }
.mcdw-card:focus-visible{ outline:2px solid #C9A227; outline-offset:4px; }
@media (prefers-reduced-motion: reduce){ .mcdw-bg img{ transform:none; transition:none; } }

/* ---------------------------------------------------------------
   Readability pass. The brand gold reads at 2.26:1 on the light
   sections, under the 4.5:1 minimum. Same hue, deeper value, used
   only where gold text sits on a light background. On dark
   backgrounds the original gold is restored below, so buttons,
   rules, dots and the hero are untouched.
   --------------------------------------------------------------- */
:root{ --gold-deep:#7E6210; --gold-on-light:var(--gold-deep); }

.eyebrow, .cap-num, .faq-icon, .quote-mark, .tagx, .pkg-tag,
.process-step .p-num, .addon-card .a-tag,
.break .quote .gold{ color:var(--gold-on-light); }

/* every dark surface hands the bright gold back to its children */
#hero, #proof, #audiences, #founder, #portfolio-teaser, #contact,
#mcd-ai, .roster, .areas, footer, .tier.featured, #intro-loader,
#cookie-banner{ --gold-on-light:var(--gold); }

/* small text that missed the minimum by a hair */
#hero .trust-line{ color:#a3acba; }
#hero .scroll-hint{ color:#98a1b0; }
.tier .price-to{ color:#5f646e; }
.testimonial-author span{ color:#5f646e; }
nav.links a{ color:#e8eaee; }
footer .copyright{ color:#98a1b0; }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:100000;
  background:#C9A227; color:#15171C; padding:12px 20px; font:700 13px/1 'Montserrat',Arial,sans-serif;
  letter-spacing:1px; text-transform:uppercase; }
.skip-link:focus{ left:12px; top:12px; }