/* ===== animatable custom prop for the AI wipe ===== */
  @property --x{ syntax:'<percentage>'; inherits:true; initial-value:8%; }

  :root{
    --paper:#F6F1E8; --paper-2:#FBF8F2; --sand:#EADFCB; --stone:#D6C7AC; --clay:#B6A584;
    --green:#15634A; --green-700:#0F4536; --signal:#1F8A63; --signal-tint:#E4EFE9;
    --ink:#1C1A14; --ink-soft:#5C574C; --ink-faint:#928B7C;
    --line:rgba(28,26,20,.13); --line-2:rgba(28,26,20,.07);
    --ui:"Quicksand", system-ui, sans-serif;
    --serif:"Playfair Display", Georgia, serif;
    --edit:"Cormorant Garamond", Georgia, serif;
    --maxw:1180px;
    --gutter:clamp(20px,5vw,80px);
    --radius:22px;
    --loop:6.5s;          /* AI loop duration (tweakable) */
    --intensity:1;         /* fly-up intensity (tweakable) */
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html,body{margin:0;}
  .ai-section{
    font-family:var(--ui); color:var(--ink);
    border-top:1px solid var(--line);
    background:
      radial-gradient(130% 60% at 50% -8%, var(--paper-2), transparent 60%),
      linear-gradient(180deg, var(--paper) 0%, var(--paper) 60%, var(--sand) 140%);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  button{font-family:inherit; cursor:pointer;}
  ::selection{background:var(--signal-tint);}
  a{color:inherit;}

  .ai-section .wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);}

  /* ============================ SECTION HEAD ============================ */
  .ai-head{padding:clamp(92px,13vh,150px) 0 clamp(40px,7vh,80px);}
  .ai-eyebrow{
    display:inline-flex; align-items:center; gap:11px; margin:0 0 18px;
    font:600 12px/1 var(--ui); letter-spacing:.24em; text-transform:uppercase; color:var(--green);
  }
  .ai-eyebrow::before{content:""; width:30px; height:1.5px; background:var(--green);}
  .ai-eyebrow .ai-chip{
    display:inline-flex; align-items:center; gap:6px; letter-spacing:.12em;
    border:1.3px solid var(--green); border-radius:100px; padding:4px 10px 4px 8px; color:var(--green);
  }
  .ai-eyebrow .ai-chip .glyph{
    width:14px; height:14px; border-radius:50%;
    border:1.6px solid var(--signal); border-right-color:transparent; display:inline-block;
  }
  .ai-title{
    margin:0; max-width:17ch; font-family:var(--serif); font-weight:500; letter-spacing:-.018em;
    font-size:clamp(38px,6.4vw,76px); line-height:1.0; color:var(--ink); text-wrap:balance;
  }
  .ai-title em{font-style:italic; color:var(--green);}
  .ai-lede{
    margin:24px 0 0; max-width:46ch; font-family:var(--edit); font-size:clamp(19px,2.2vw,24px);
    line-height:1.5; color:var(--ink-soft);
  }
  .ai-lede b{color:var(--ink); font-weight:600; font-style:italic;}
  .ai-scrollcue{
    display:inline-flex; align-items:center; gap:12px; margin-top:34px;
    font:600 12.5px/1 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
  }
  .ai-scrollcue .mouse{
    width:22px; height:34px; border-radius:100px; border:1.6px solid var(--ink-faint); position:relative; flex:0 0 auto;
  }
  .ai-scrollcue .mouse::after{
    content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; border-radius:3px;
    background:var(--green); transform:translateX(-50%); animation:wheel 1.6s ease-in-out infinite;
  }
  @keyframes wheel{0%,100%{transform:translate(-50%,0); opacity:1;}60%{transform:translate(-50%,10px); opacity:.2;}}

  /* ============================ STAGE / ROWS ============================ */
  .ai-stage{ perspective:1500px; perspective-origin:50% 40%; padding-bottom:clamp(60px,12vh,150px); }
  .ai-row{
    display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(34px,5vw,80px);
    align-items:center; margin:clamp(60px,11vh,128px) 0;
    transform-style:preserve-3d;
  }
  .ai-row:nth-child(even){ grid-template-columns:.94fr 1.06fr; }
  .ai-row:nth-child(even) .ai-media-wrap{ order:2; }
  .ai-row:nth-child(even) .ai-text{ order:1; text-align:right; }
  .ai-row:nth-child(even) .ai-text .ai-meta-row,
  .ai-row:nth-child(even) .ai-text .ai-name-row{ justify-content:flex-end; }
  .ai-row:nth-child(even) .ai-text .ai-actions{ justify-content:flex-end; }

  /* — the two animated layers (driven by --p from scroll) — */
  .ai-media-wrap, .ai-text{ will-change:transform, opacity, filter; }
  .ai-media-wrap{
    transform:
      translateY(calc((1 - var(--p,0)) * 150px * var(--intensity)))
      translateX(calc((1 - var(--p,0)) * var(--dx, -34px) * var(--intensity)))
      scale(calc(.84 + var(--p,0) * .16))
      rotateX(calc((1 - var(--p,0)) * 13deg * var(--intensity)))
      rotateZ(calc((1 - var(--p,0)) * var(--dz, -2deg) * var(--intensity)));
    opacity:clamp(0, calc(var(--p,0) * 1.6), 1);
    filter:blur(calc((1 - var(--p,0)) * 9px));
  }
  .ai-text{
    transform:
      translateY(calc((1 - var(--p,0)) * 64px * var(--intensity)))
      translateX(calc((1 - var(--p,0)) * calc(var(--dx, -34px) * -.5) * var(--intensity)));
    opacity:clamp(0, calc((var(--p,0) - .12) * 1.9), 1);
  }
  .ai-row:nth-child(even){ --dx:34px; --dz:2deg; }

  /* ============================ MEDIA CARD ============================ */
  .ai-media{
    position:relative; width:100%; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden;
    background:var(--scene, var(--stone));
    box-shadow:
      0 2px 0 rgba(255,255,255,.4) inset,
      0 34px 70px -34px rgba(20,18,14,.62),
      0 8px 22px -16px rgba(20,18,14,.5);
    --x:8%;
  }
  body[data-corners="sharp"] .ai-media{ border-radius:6px; }

  .ai-media image-slot{ position:absolute; inset:0; width:100%; height:100%; z-index:1; --om-slot:1; }

  /* ===== before/after VIDEO layers — one source, two effects, perfectly in sync ===== */
  .ai-media .ai-vid{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
    z-index:1; background:var(--scene, var(--stone)); pointer-events:none;
  }
  .ai-vid-after{ filter:var(--fx-after, saturate(1.08) contrast(1.02)); }       /* right · "after" */
  .ai-vid-before{                                                              /* left · "before" */
    z-index:2; filter:var(--fx-before, grayscale(.5) saturate(.5) brightness(.86) contrast(.97));
    clip-path:inset(0 calc(100% - var(--x)) 0 0);
  }

  /* before/after wipe — backdrop-filter mutes whatever is beneath (slot photo OR scene) */
  .ai-ba{
    position:absolute; inset:0; z-index:2; pointer-events:none;
    -webkit-backdrop-filter:grayscale(.55) saturate(.45) brightness(.84) contrast(.96);
    backdrop-filter:grayscale(.55) saturate(.45) brightness(.84) contrast(.96);
    clip-path:inset(0 calc(100% - var(--x)) 0 0);
  }
  .ai-ba::after{ /* subtle cool cast on the "before" side */
    content:""; position:absolute; inset:0; background:rgba(36,46,58,.16); mix-blend-mode:multiply;
  }
  /* moving divider handle at the wipe edge */
  .ai-divider{
    position:absolute; top:0; bottom:0; left:var(--x); width:2px; z-index:4; pointer-events:none;
    background:linear-gradient(180deg, transparent, rgba(255,255,255,.9) 12%, rgba(255,255,255,.9) 88%, transparent);
    box-shadow:0 0 14px 1px rgba(255,255,255,.5), 0 0 0 1px rgba(20,18,14,.12);
    transform:translateX(-1px);
  }
  .ai-divider::before{
    content:""; position:absolute; top:50%; left:50%; width:26px; height:26px; transform:translate(-50%,-50%);
    border-radius:50%; background:rgba(251,248,242,.95); border:1.5px solid rgba(20,18,14,.12);
    box-shadow:0 4px 12px -4px rgba(20,18,14,.5);
  }
  .ai-divider::after{
    content:""; position:absolute; top:50%; left:50%; width:11px; height:11px; transform:translate(-50%,-50%) rotate(45deg);
    border:2px solid var(--green); border-left:none; border-bottom:none;
    box-shadow:-5px 5px 0 -2px var(--green);
  }

  /* AI scan beam */
  .ai-scan{
    position:absolute; top:0; bottom:0; left:0; width:34%; z-index:3; pointer-events:none; mix-blend-mode:screen;
    background:linear-gradient(90deg, transparent, rgba(31,138,99,.0) 30%, rgba(120,230,180,.55) 50%, rgba(31,138,99,0) 70%, transparent);
    animation:scan var(--loop) cubic-bezier(.7,0,.3,1) infinite;
  }
  .ai-scan::after{
    content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%);
    background:linear-gradient(180deg, transparent, rgba(170,255,210,.9), transparent);
    box-shadow:0 0 18px 2px rgba(120,230,180,.6);
  }
  @keyframes scan{
    0%{ transform:translateX(-120%); opacity:0; }
    12%{ opacity:1; }
    50%{ transform:translateX(330%); opacity:1; }
    58%,100%{ transform:translateX(330%); opacity:0; }
  }

  /* drive the wipe + a soft scene shimmer */
  .ai-media[data-anim="on"]{ animation:wipe var(--loop) cubic-bezier(.65,0,.35,1) infinite; }
  @keyframes wipe{
    0%   { --x:8%;  }
    44%  { --x:94%; }
    56%  { --x:94%; }
    100% { --x:8%;  }
  }

  /* scrim + chrome */
  .ai-media-scrim{
    position:absolute; inset:0; z-index:5; pointer-events:none;
    background:linear-gradient(180deg, rgba(20,18,14,.34) 0%, transparent 26%, transparent 58%, rgba(20,18,14,.66) 100%);
  }
  .ai-tag{
    position:absolute; top:14px; left:14px; z-index:6; display:inline-flex; align-items:center; gap:8px;
    padding:7px 12px 7px 9px; border-radius:100px; font:700 11.5px/1 var(--ui); letter-spacing:.04em; color:#FBF8F2;
    background:rgba(20,18,14,.42); border:1px solid rgba(255,255,255,.2);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .ai-tag .ring{
    width:14px; height:14px; border-radius:50%; border:1.7px solid #8be6b4; border-right-color:transparent;
    animation:spin 2.4s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  .ai-loopbadge{
    position:absolute; top:14px; right:14px; z-index:6; display:inline-flex; align-items:center; gap:7px;
    padding:6px 11px; border-radius:100px; font:600 11px/1 var(--ui); letter-spacing:.06em; color:#FBF8F2;
    background:rgba(20,18,14,.42); border:1px solid rgba(255,255,255,.2);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .ai-loopbadge .dot{ width:7px; height:7px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 0 rgba(31,138,99,.6); animation:pulse 2s ease-out infinite; }
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,138,99,.55);}100%{box-shadow:0 0 0 9px rgba(31,138,99,0);}}
  .ai-balabels{
    position:absolute; left:14px; right:14px; bottom:13px; z-index:6; display:flex; justify-content:space-between;
    font:700 10.5px/1 var(--ui); letter-spacing:.18em; text-transform:uppercase; pointer-events:none;
  }
  .ai-balabels .b{ color:rgba(251,248,242,.7); }
  .ai-balabels .a{ color:#fff; display:inline-flex; align-items:center; gap:6px; }
  .ai-balabels .a::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--signal); }

  body[data-anim="off"] .ai-media{ animation:none; }
  body[data-anim="off"] .ai-scan{ display:none; }
  body[data-anim="off"] .ai-media{ --x:50%; }

  /* ============================ TEXT BLOCK ============================ */
  .ai-text{ min-width:0; }
  .ai-index{
    font-family:var(--serif); font-weight:500; font-size:15px; letter-spacing:.05em; color:var(--green);
    display:inline-flex; align-items:baseline; gap:8px; margin-bottom:14px;
  }
  .ai-index .slash{ color:var(--clay); }
  .ai-index .total{ color:var(--ink-faint); }
  .ai-meta-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
  .ai-kicker{
    display:inline-flex; align-items:center; gap:7px;
    font:700 11px/1 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--green);
    border:1.3px solid color-mix(in oklab, var(--green) 36%, transparent); border-radius:100px; padding:6px 11px 6px 9px;
  }
  .ai-kicker .sq{ width:9px; height:9px; border-radius:2px; background:var(--signal); }
  .ai-name-row{ display:flex; align-items:baseline; gap:14px; }
  .ai-name{
    margin:0; font-family:var(--serif); font-weight:500; letter-spacing:-.015em;
    font-size:clamp(30px,4vw,46px); line-height:1.02; color:var(--ink);
  }
  .ai-name em{ font-style:italic; color:var(--green); }
  .ai-desc{
    margin:16px 0 0; max-width:40ch; font-family:var(--edit); font-size:clamp(18px,2vw,22px);
    line-height:1.5; color:var(--ink-soft);
  }
  .ai-row:nth-child(even) .ai-desc{ margin-left:auto; }
  .ai-actions{ display:flex; align-items:center; gap:18px; margin-top:26px; }
  .ai-add{
    display:inline-flex; align-items:center; gap:10px; padding:13px 22px 13px 20px; border-radius:100px;
    border:1.5px solid var(--green); background:var(--green); color:#fff; font:700 14px/1 var(--ui);
    transition:.18s; white-space:nowrap;
  }
  .ai-add .pl{
    width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.18); display:inline-flex; align-items:center;
    justify-content:center; font-size:15px; line-height:1; font-weight:600;
  }
  .ai-add:hover{ background:var(--green-700); border-color:var(--green-700); transform:translateY(-2px); box-shadow:0 14px 26px -14px rgba(15,69,54,.7); }
  .ai-price{ display:flex; align-items:baseline; gap:4px; font-family:var(--ui); color:var(--ink); white-space:nowrap; }
  .ai-price .plus{ font-size:16px; font-weight:700; color:var(--signal); }
  .ai-price .cur{ font-size:16px; font-weight:700; color:var(--ink-soft); }
  .ai-price .val{ font-size:30px; font-weight:700; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
  .ai-price .per{ font-size:12.5px; font-weight:600; color:var(--ink-faint); margin-left:3px; }
  body[data-price="off"] .ai-price{ display:none; }

  /* ============================ CLOSING STRIP ============================ */
  .ai-foot{
    margin:clamp(40px,8vh,90px) 0 clamp(70px,12vh,130px);
    border-top:1px solid var(--line); padding-top:clamp(34px,6vh,60px);
    display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap;
  }
  .ai-foot h4{ margin:0; font-family:var(--serif); font-weight:500; font-size:clamp(24px,3vw,34px); color:var(--ink); max-width:18ch; line-height:1.08; }
  .ai-foot h4 em{ font-style:italic; color:var(--green); }
  .ai-foot p{ margin:12px 0 0; font-family:var(--edit); font-size:19px; color:var(--ink-soft); max-width:38ch; }
  .ai-foot-cta{
    display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:100px;
    border:1.5px solid var(--ink); background:transparent; color:var(--ink); font:700 14.5px/1 var(--ui); transition:.18s; white-space:nowrap;
  }
  .ai-foot-cta:hover{ background:var(--ink); color:var(--paper); }

  /* ============================ RESPONSIVE ============================ */
  @media (max-width:860px){
    .ai-stage{ perspective:1100px; }
    .ai-row, .ai-row:nth-child(even){ grid-template-columns:1fr; gap:26px; }
    .ai-row:nth-child(even) .ai-media-wrap{ order:1; }
    .ai-row:nth-child(even) .ai-text{ order:2; text-align:left; }
    .ai-row:nth-child(even) .ai-text .ai-meta-row,
    .ai-row:nth-child(even) .ai-text .ai-name-row,
    .ai-row:nth-child(even) .ai-text .ai-actions{ justify-content:flex-start; }
    .ai-row:nth-child(even) .ai-desc{ margin-left:0; }
    .ai-media-wrap{ transform:translateY(calc((1 - var(--p,0)) * 90px * var(--intensity))) scale(calc(.9 + var(--p,0)*.1)); }
    .ai-text{ transform:translateY(calc((1 - var(--p,0)) * 40px * var(--intensity))); }
  }

  /* layout: centered stack (tweak) */
  body[data-layout="stack"] .ai-row,
  body[data-layout="stack"] .ai-row:nth-child(even){
    grid-template-columns:minmax(0, 780px); justify-content:center; text-align:center; gap:24px;
  }
  body[data-layout="stack"] .ai-media-wrap{ order:1 !important; }
  body[data-layout="stack"] .ai-text{ order:2 !important; text-align:center !important; }
  body[data-layout="stack"] .ai-text .ai-meta-row,
  body[data-layout="stack"] .ai-text .ai-name-row,
  body[data-layout="stack"] .ai-text .ai-actions{ justify-content:center !important; }
  body[data-layout="stack"] .ai-desc{ margin-left:auto !important; margin-right:auto; }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .ai-media-wrap, .ai-text{ transform:none !important; opacity:1 !important; filter:none !important; }
    .ai-media{ animation:none !important; --x:50%; }
    .ai-scan, .ai-scrollcue .mouse::after, .ai-tag .ring{ animation:none !important; }
  }