/* ============================= TOKENS ============================= */
  :root{
    --black:#000000;
    --white:#ffffff;
    --gray:#8e8e8e;
    --gray-dim:#4a4a4a;

    --font-display:'Anton', ui-sans-serif, system-ui, sans-serif;
    --font-body:'Inter', ui-sans-serif, system-ui, sans-serif;

    --edge:clamp(20px, 4.2vw, 43px);
    --section-gap:clamp(40px, 5.5vw, 80px);

    --ease:cubic-bezier(.16,.8,.24,1);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }

  body{
    background:var(--black);
    color:var(--white);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
  ul{ list-style:none; }

  ::selection{ background:var(--white); color:var(--black); }

  :focus-visible{
    outline:1px solid var(--white);
    outline-offset:4px;
  }

  .edge{ padding-left:var(--edge); padding-right:var(--edge); }

  /* skip link */
  .skip-link{
    position:absolute; left:-999px; top:0; background:var(--white); color:var(--black);
    padding:12px 18px; z-index:999;
  }
  .skip-link:focus{ left:var(--edge); top:18px; }

  /* ============================= CURSOR DOT ============================= */
  .cursor-dot{
    position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
    background:var(--white); pointer-events:none; z-index:9999;
    transform:translate(-50%,-50%);
    transition:width .25s var(--ease), height .25s var(--ease), background-color .25s var(--ease), opacity .3s;
    mix-blend-mode:difference;
    will-change:transform;
  }
  .cursor-dot.hover{ width:52px; height:52px; }
  @media (hover:none), (max-width:900px){ .cursor-dot{ display:none; } }

  /* ============================= NAV ============================= */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:500;
    display:flex; align-items:center; justify-content:space-between;
    padding-top:18px; padding-bottom:18px;
    background:rgba(0,0,0,0);
    border-bottom:1px solid rgba(255,255,255,0);
    transition:background-color .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  }
  .nav.scrolled{
    background:#000;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .brand{
    display:flex; align-items:center; gap:14px;
    position:relative; z-index:2;
  }
  .brand-stamp{
    width:46px; height:46px; flex-shrink:0;
    transition:transform .6s var(--ease);
  }
  .brand:hover .brand-stamp{ transform:rotate(24deg); }
  .brand-name{
    font-size:15px; letter-spacing:.02em; line-height:1.15;
  }
  .brand-name strong{ display:block; font-weight:600; }
  .brand-name span{ display:block; color:var(--gray); font-size:12px; }

  .nav-links{
    display:flex; align-items:center; gap:34px;
  }
  .nav-links a{
    font-size:15px; font-weight:500; position:relative; padding-bottom:4px;
  }
  .nav-links a::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:var(--gray); transform:scaleX(0); transform-origin:right;
    transition:transform .35s var(--ease);
  }
  .nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    border:1px solid var(--white);
    padding:13px 22px;
    font-size:14px; font-weight:600; letter-spacing:.01em;
    white-space:nowrap;
    transition:background-color .35s var(--ease), color .35s var(--ease);
  }
  .btn:hover{ background:var(--white); color:var(--black); }
  .btn-arrow{ transition:transform .35s var(--ease); }
  .btn:hover .btn-arrow{ transform:translateX(3px); }

  .nav .btn{ padding:11px 18px; font-size:13px; }

  .nav-toggle{
    display:none; flex-direction:column; gap:5px; width:28px;
  }
  .nav-toggle span{ height:1px; background:var(--white); display:block; }

  @media (max-width:900px){
    .nav-links{
      position:fixed; inset:0; top:0; background:var(--black);
      flex-direction:column; justify-content:center; align-items:flex-start;
      padding:0 var(--edge); gap:28px;
      transform:translateY(-100%); transition:transform .5s var(--ease);
      z-index:400;
    }
    .nav-links.open{ transform:translateY(0); }
    .nav-links a{ font-size:32px; font-family:var(--font-display); text-transform:uppercase; }
    .nav-links .btn{ margin-top:10px; }
    .nav-toggle{ display:flex; z-index:600; }
  }

  /* ============================= HERO ============================= */
  /* Two-column hero: massive type carries the message on the left,
     two skewed portrait frames sit stacked on the right with a black gap
     between them, reading visually like a slash "/". */
  .hero{
    position:relative;
    padding:clamp(110px, 14vh, 160px) var(--edge) clamp(36px, 5vh, 64px);
    min-height:auto;
    display:flex; flex-direction:column;
    overflow:hidden;
  }

  .hero-topline{
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:24px; margin-bottom:clamp(24px, 4vh, 40px);
    opacity:0; transform:translateY(14px);
    animation:fadeUp .8s var(--ease) forwards; animation-delay:.2s;
  }
  .hero-eyebrow{
    display:flex; align-items:center; gap:12px;
    font-size:12px; font-weight:500; color:var(--gray);
    text-transform:uppercase; letter-spacing:.16em;
  }
  .hero-eyebrow::before{
    content:''; width:32px; height:1px; background:var(--gray-dim); display:inline-block;
  }
  .hero-topline .hero-note{
    max-width:280px; font-size:14px; line-height:1.55;
    color:var(--white); text-align:right;
  }

  .hero-main{
    display:grid; grid-template-columns:1fr auto; gap:clamp(30px, 5vw, 80px);
    align-items:center; flex:1;
  }
  .hero-left{ min-width:0; }

  .hero-headline{
    font-family:var(--font-display); font-weight:400; text-transform:uppercase;
    font-size:clamp(56px, 12vw, 180px); line-height:.88; letter-spacing:0;
    margin:0;
  }
  .hero-headline .line{ overflow:hidden; }
  .hero-headline .line span{
    display:block; transform:translateY(110%);
    animation:riseUp 1s var(--ease) forwards;
  }
  .hero-headline .line:nth-child(1) span{ animation-delay:.35s; }
  .hero-headline .line:nth-child(2) span{ animation-delay:.48s; }
  @keyframes riseUp{ to{ transform:translateY(0); } }

  .hero-lead-cta{
    display:flex; align-items:center; gap:clamp(20px, 3vw, 36px); flex-wrap:wrap;
    margin-top:clamp(28px, 4vh, 46px);
    opacity:0; transform:translateY(14px);
    animation:fadeUp .8s var(--ease) forwards; animation-delay:1.1s;
  }
  .hero-byline-text{
    display:flex; flex-direction:column; gap:2px;
  }
  .hero-byline-title{
    font-size:clamp(13px, 1.1vw, 15px); font-weight:600;
    letter-spacing:.02em; color:var(--white);
  }
  .hero-byline-sub{
    font-size:clamp(11px, .9vw, 12px); color:var(--gray);
    text-transform:uppercase; letter-spacing:.14em;
  }

  /* Right column: two parallelogram portrait frames next to each other,
     leaning like italic slashes, treated like film stills. */
  .hero-photos{
    display:flex; gap:clamp(6px, 1vw, 16px);
    padding-right:clamp(12px, 2vw, 28px);
    opacity:0; transform:translateY(14px);
    animation:fadeUp .9s var(--ease) forwards; animation-delay:.6s;
    position:relative;
  }
  .hero-photo{
    display:flex; flex-direction:column;
    align-items:stretch;
    animation:photoFloat 5.5s ease-in-out infinite;
  }
  .hero-photo:nth-child(1){ margin-top:clamp(8px, 1.5vw, 22px); }
  .hero-photo:nth-child(2){ margin-top:0; animation-duration:6.2s; animation-delay:.5s; }
  @keyframes photoFloat{
    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(-5px); }
  }

  .hero-photo-frame{
    position:relative;
    width:clamp(220px, 26vw, 380px);
    aspect-ratio:3/4;
    overflow:hidden;
    background:linear-gradient(180deg, #1c1c1c 0%, #080808 100%);
    clip-path:polygon(18% 0, 100% 0, 82% 100%, 0 100%);
    filter:drop-shadow(0 0 14px rgba(193,0,55,.4)) drop-shadow(0 0 36px rgba(193,0,55,.22));
    animation:neonPulse 4s ease-in-out infinite, framePop 6.5s ease-in-out infinite;
    transform-origin:50% 50%;
  }
  .hero-photo:nth-child(2) .hero-photo-frame{
    animation:neonPulse 4s ease-in-out infinite, framePop 6.5s ease-in-out infinite 1s;
  }
  @keyframes neonPulse{
    0%, 100%{ filter:drop-shadow(0 0 14px rgba(193,0,55,.4)) drop-shadow(0 0 36px rgba(193,0,55,.22)); }
    50%{ filter:drop-shadow(0 0 22px rgba(193,0,55,.7)) drop-shadow(0 0 58px rgba(193,0,55,.38)); }
  }
  /* frame reacts to the shine crossing it: a small pop/lift timed to the
     same window the light sweeps through (12%-46% of the cycle) */
  @keyframes framePop{
    0%, 10%{ transform:translateY(0) scale(1); }
    24%{ transform:translateY(-6px) scale(1.02); }
    46%, 100%{ transform:translateY(0) scale(1); }
  }
  .hero-photo-frame:hover{ filter:drop-shadow(0 0 26px rgba(193,0,55,.85)) drop-shadow(0 0 64px rgba(193,0,55,.5)); }
  .hero-photo-frame img{
    width:100%; height:100%;
    object-fit:contain; object-position:center bottom;
    display:block;
    transition:transform 1.2s var(--ease);
  }
  .hero-photo-frame:hover img{ transform:scale(1.04); }
  .ramses-frame img{ transform:scale(0.9); }
  .ramses-frame:hover img{ transform:scale(0.94); }

  /* subtle cinematic top light + bottom shadow */
  .hero-photo-frame::before{
    content:''; position:absolute; inset:0; z-index:1;
    background:
      linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 25%),
      linear-gradient(180deg, transparent 60%, rgba(0,0,0,.5) 100%);
    pointer-events:none;
  }

  /* trading-card foil shine: a thin, crisp bright line that glides
     diagonally from the top-left toward the bottom-right of the frame, like
     light catching a new, still-sealed card. Covers the whole frame and
     sweeps via background-position on both axes at once, so the motion
     itself is diagonal (not just the line's tilt). Uses 'screen' blending
     instead of 'overlay' so the brightness stays even and clean regardless
     of what's underneath, instead of blotching against the photo's tones. */
  .hero-photo-frame::after{
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(115deg,
      transparent 47%,
      rgba(255,255,255,.95) 50%,
      transparent 53%);
    background-repeat:no-repeat;
    background-size:220% 220%;
    background-position:-60% -60%;
    mix-blend-mode:screen;
    animation:cardShine 6.5s ease-in-out infinite;
  }
  .hero-photo:nth-child(2) .hero-photo-frame::after{ animation-delay:1s; }
  @keyframes cardShine{
    0%, 12%{ background-position:160% 160%; }
    46%, 100%{ background-position:-60% -60%; }
  }

  /* timecode-style corner label */
  .hero-photo-code{
    position:absolute; top:10px; left:22%; z-index:3;
    font-size:10px; font-weight:600; letter-spacing:.16em;
    color:rgba(255,255,255,.85); text-transform:uppercase;
    padding:3px 6px; background:rgba(0,0,0,.5);
    backdrop-filter:blur(4px);
  }

  /* caption block sits directly below the frame, aligned to the slash */
  .hero-photo-caption{
    display:flex; align-items:baseline; gap:8px;
    margin-top:12px; padding:0 clamp(6px, 1vw, 14px);
    text-align:left;
  }
  .hero-photo-caption .dot{
    width:6px; height:6px; background:var(--white); flex-shrink:0;
    transform:translateY(-2px);
  }
  .hero-photo-name{
    font-family:var(--font-display); text-transform:uppercase;
    font-size:clamp(14px, 1.3vw, 18px); letter-spacing:.08em;
    color:var(--white); line-height:1;
  }

  .hero-photo-label{ display:none; }

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

  .hero-meta{ margin-top:0; padding:0; }

  /* stats */
  .stats{
    display:flex; justify-content:center; flex-wrap:wrap;
    margin:clamp(24px, 3vw, 40px) auto clamp(18px, 2.2vw, 30px);
    text-align:center;
    opacity:0; animation:fadeUp .8s var(--ease) forwards; animation-delay:1.45s;
  }
  .stat{
    padding:0 clamp(20px, 3vw, 44px);
    border-left:1px solid rgba(255,255,255,.14);
  }
  .stat:first-child{ border-left:none; padding-left:0; }
  .stat-num{
    font-family:var(--font-display); font-size:clamp(34px, 4.4vw, 58px);
    line-height:1;
  }
  .stat-label{
    font-size:14px; color:var(--gray); margin:8px auto 0; line-height:1.4;
    max-width:22ch;
  }

  @media (max-width:1100px){
    .hero-topline{ flex-direction:column; align-items:flex-start; gap:14px; }
    .hero-topline .hero-note{ text-align:left; max-width:none; }
  }

  @media (max-width:900px){
    .hero{ min-height:auto; padding-top:clamp(110px, 14vh, 150px); padding-bottom:40px; }
    .hero-main{ grid-template-columns:1fr; gap:36px; align-items:flex-start; }
    .hero-photos{ padding-right:0; justify-content:center; width:100%; }
    .hero-photo-frame{ width:clamp(180px, 38vw, 300px); }
    .stats{ flex-direction:column; row-gap:22px; }
    .stat{ border-left:none; padding-left:0; padding-right:0; border-top:1px solid rgba(255,255,255,.14); padding-top:18px; }
    .stat:first-child{ border-top:none; padding-top:0; }
  }

  @media (max-width:560px){
    .hero-photos{
      flex-direction:column; align-items:center; gap:28px;
    }
    .hero-photo:nth-child(1){ margin-top:0; }
    .hero-photo-frame{ width:min(72vw, 300px); }
  }

  /* ============================= SECTION SHELL ============================= */
  section{ padding-top:var(--section-gap); }
  #offer{ padding-top:clamp(18px, 2.5vw, 32px); }
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:30px;
    margin-bottom:clamp(40px,5.5vw,70px);
  }
  .section-title{
    font-family:var(--font-display); text-transform:uppercase;
    font-size:clamp(34px, 5.4vw, 68px); line-height:.98; max-width:14ch;
  }
  .section-note{
    font-size:16px; color:var(--gray); max-width:34ch; line-height:1.55;
    padding-bottom:6px;
  }
  @media (max-width:700px){
    .section-head{ flex-direction:column; align-items:flex-start; gap:16px; }
  }

  /* reveal-on-scroll */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.in-view{ opacity:1; transform:translateY(0); }

  /* ============================= OFFER ============================= */
  /* "Full social media management" section: 3 vertical reels autoplay side by
     side as the visual showcase, followed by the 4-step process cards. */
  .offer-lead{
    max-width:64ch; font-size:clamp(15px, 1.4vw, 18px);
    color:var(--gray); line-height:1.6; margin:0 0 clamp(28px, 3vw, 40px);
  }
  .offer-reels{
    display:grid; grid-template-columns:repeat(3, minmax(0, 420px));
    justify-content:center;
    gap:clamp(16px, 2vw, 28px);
    margin-bottom:clamp(34px, 4.5vw, 54px);
  }
  .offer-reel{
    display:flex; flex-direction:column;
    max-width:420px; width:100%; margin:0 auto;
  }
  .offer-reel-head{
    background:#0d0d0d; border:1px solid rgba(255,255,255,.1); border-bottom:none;
    padding:14px 16px;
  }
  .offer-reel-head .name{ font-size:15px; font-weight:600; color:var(--white); }
  .offer-reel-head .tag{ font-size:12px; color:rgba(255,255,255,.7); margin-top:4px; }
  .offer-reel-video{
    position:relative; aspect-ratio:9/16;
    overflow:hidden; background:#0d0d0d;
    border:1px solid rgba(255,255,255,.08);
  }
  .offer-reel-video video{
    width:100%; height:100%; object-fit:cover; display:block;
  }

  /* mute/unmute control: videos autoplay muted by default (required by
     browsers), tap to hear the audio */
  .reel-mute-btn{
    position:absolute; bottom:12px; right:12px; z-index:3;
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,.25);
    color:var(--white); cursor:pointer;
    transition:background-color .25s var(--ease), transform .2s var(--ease);
  }
  .reel-mute-btn:hover{ background:rgba(0,0,0,.75); transform:scale(1.06); }
  .reel-mute-btn svg{ width:17px; height:17px; }
  .reel-mute-btn .icon-on{ display:none; }
  .reel-mute-btn[aria-pressed="true"] .icon-off{ display:none; }
  .reel-mute-btn[aria-pressed="true"] .icon-on{ display:block; }

  @media (max-width:800px){
    .offer-reels{ grid-template-columns:1fr; gap:16px; max-width:260px; margin-left:auto; margin-right:auto; }
    .offer-reel{ max-width:260px; }
  }

  /* michelin star badge: icon repeated per star instead of spelling out the count */
  .michelin-icon{
    width:15px; height:15px; object-fit:contain; display:inline-block; flex-shrink:0; vertical-align:middle;
  }
  .michelin-tag{
    display:flex; align-items:center; gap:6px;
  }
  .michelin-tag span{ display:inline-block; }

  /* -------- closing wide video block (below pricing) -------- */
  .close-video{
    position:relative; width:100%; aspect-ratio:2.6/1;
    overflow:hidden; background:#0d0d0d;
    border-top:1px solid rgba(255,255,255,.14);
    border-bottom:1px solid rgba(255,255,255,.14);
    margin-top:var(--section-gap);
  }
  .close-video video{ width:100%; height:100%; object-fit:cover; display:block; }
  .close-video-label{
    position:absolute; top:14px; left:14px; z-index:3;
    padding:6px 11px; background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
    font-size:12px; font-weight:500; color:var(--white); letter-spacing:.02em;
  }
  .close-video-label .michelin-icon{ width:13px; height:13px; }
  .close-video-overlay{
    position:absolute; inset:0; z-index:2;
    display:flex; align-items:center; justify-content:flex-start;
    padding:clamp(24px, 4vw, 64px);
    background:linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.5) 40%, rgba(0,0,0,.12) 68%, transparent 90%);
  }
  .close-video-overlay h2{
    color:var(--white); font-family:var(--font-display); font-weight:400;
    font-size:clamp(34px, 6.2vw, 92px); line-height:.95; letter-spacing:-.01em;
    max-width:14ch; text-transform:uppercase; margin:0;
  }
  @media (max-width:700px){
    .close-video{ aspect-ratio:4/5; }
    .close-video-overlay{
      background:linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 55%, transparent 100%);
      align-items:flex-end; justify-content:flex-start;
    }
    .close-video-overlay h2{ max-width:none; }
  }

  .offer-list{
    display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
    background:rgba(255,255,255,.14);
    border-top:1px solid rgba(255,255,255,.14);
  }
  .offer-item{
    background:var(--black); padding:clamp(26px,3vw,43px);
    display:flex; gap:22px;
    transition:background-color .4s var(--ease);
  }
  .offer-item:hover{ background:#0a0a0a; }
  .offer-num{
    font-family:var(--font-display); font-size:20px; color:var(--gray); flex-shrink:0; padding-top:3px;
  }
  .offer-copy h3{
    font-size:21px; font-weight:600; margin-bottom:10px;
  }
  .offer-copy p{
    font-size:15px; line-height:1.6; color:var(--gray); max-width:44ch;
  }
  @media (max-width:800px){ .offer-list{ grid-template-columns:1fr; } }

  /* "OR" divider between the two ways of working together */
  /* split section head: "Full social media management" and "Social media
     help" side by side with an "OR" divider between them */
  .section-head-split{
    display:flex; align-items:stretch; gap:clamp(28px, 3.5vw, 48px);
    margin-bottom:clamp(40px, 5.5vw, 70px);
  }
  .section-head-col{
    flex:1; min-width:0;
    display:flex; flex-direction:column; justify-content:flex-start;
  }
  .section-head-col .section-title{
    max-width:none; font-size:clamp(30px, 4vw, 54px); margin-bottom:14px;
  }
  .section-head-col .section-note{ max-width:none; padding-bottom:0; }
  .or-divider-vertical{
    display:flex; flex-direction:column; align-items:center;
    flex-shrink:0;
  }
  .or-divider-vline{
    width:1px; flex:1; background:rgba(255,255,255,.16);
  }
  .or-divider-label{
    width:42px; height:42px; flex-shrink:0; margin:12px 0;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    font-family:var(--font-display); font-size:12px; font-weight:700;
    letter-spacing:.06em; color:var(--white);
    background:#0d0d0d; border:1px solid rgba(255,255,255,.25);
  }
  @media (max-width:900px){
    .section-head-split{ flex-direction:column; align-items:stretch; gap:20px; }
    .or-divider-vertical{ flex-direction:row; align-items:center; }
    .or-divider-vline{ width:auto; height:1px; flex:1; }
    .or-divider-label{ margin:0 12px; }
  }

  /* ============================= SHOWCASE GRIDS ============================= */
  .video-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  }
  .video-grid .tile:nth-child(2){ transform:translateY(46px); }
  .video-grid .tile:nth-child(4){ transform:translateY(-20px); }

  .tile{
    position:relative; overflow:hidden;
    background:#0d0d0d;
    border:1px solid rgba(255,255,255,.08);
  }
  .tile-reel{ aspect-ratio:9/16; }  .tile-photo{ aspect-ratio:4/5; }

  /* Play indicator: a subtle circle-with-triangle overlay that sits on paused
     videos. Fades out as soon as the video starts playing. Autoplay works
     fine on real hosts; this exists mainly for preview sandboxes that
     block autoplay of data URI videos. */
  .tile video, .offer-video video{ cursor:pointer; }
  .tile-reel::after, .offer-video::after{
    content:''; position:absolute; top:50%; left:50%;
    width:56px; height:56px; margin:-28px 0 0 -28px;
    border-radius:50%; z-index:3; pointer-events:none;
    background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center;
    background-size:22px 22px;
    border:1px solid rgba(255,255,255,.5);
    backdrop-filter:blur(4px);
    transition:opacity .4s var(--ease);
    opacity:1;
  }
  .tile-reel.is-playing::after, .offer-video.is-playing::after{ opacity:0; }

  .tile-frame{
    position:absolute; inset:0;
    background-image:
      repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 26px);
    display:flex; align-items:center; justify-content:center;
  }

  .tile-play{
    width:52px; height:52px; border:1px solid rgba(255,255,255,.5); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:transform .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
  }
  .tile-play::after{
    content:''; width:0; height:0; margin-left:3px;
    border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:13px solid var(--white);
  }
  .tile:hover .tile-play{
    transform:scale(1.12); background:var(--white); border-color:var(--white);
  }
  .tile:hover .tile-play::after{ border-left-color:var(--black); }

  .tile-cap{
    position:absolute; left:0; right:0; bottom:0; padding:16px;
    background:linear-gradient(0deg, rgba(0,0,0,.75), transparent);
    transform:translateY(6px); opacity:.85;
    transition:transform .4s var(--ease), opacity .4s var(--ease);
  }
  .tile:hover .tile-cap{ transform:translateY(0); opacity:1; }
  .tile-cap .name{ font-size:14px; font-weight:600; }
  .tile-cap .tag{ font-size:12px; color:var(--gray); margin-top:2px; }

  .tile img, .tile video{ width:100%; height:100%; object-fit:cover; }
  .tile img.michelin-icon{ width:15px; height:15px; object-fit:contain; }

  .photo-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
    margin-bottom:clamp(36px, 4.5vw, 56px);
  }

  /* carousel strip: full client posts shown side by side, all frames visible
     at once (scroll to see overflow) instead of one-at-a-time with arrows */
  .carousel-strip-block{ margin-top:clamp(20px, 3vw, 32px); margin-bottom:clamp(36px, 4.5vw, 56px); }
  .carousel-strip-head{
    display:flex; align-items:baseline; flex-wrap:wrap; justify-content:space-between;
    margin-bottom:22px; gap:8px 16px;
  }
  .carousel-strip-title{ font-size:15px; font-weight:600; color:var(--white); display:flex; align-items:center; gap:8px; }
  .carousel-strip-sub{ font-size:13px; color:var(--gray); white-space:nowrap; }

  .carousel-strip{
    display:flex; gap:8px; overflow-x:auto;
    -webkit-overflow-scrolling:touch; padding-bottom:10px;
  }
  .carousel-strip::-webkit-scrollbar{ height:5px; }
  .carousel-strip::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); }
  .carousel-strip::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); }

  .carousel-frame{
    flex:0 0 auto; height:clamp(210px, 32vw, 340px); aspect-ratio:4/5;
    overflow:hidden; background:#0d0d0d; border:1px solid rgba(255,255,255,.08);
  }
  .carousel-frame img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .5s var(--ease);
  }
  .carousel-frame:hover img{ transform:scale(1.03); }

  @media (max-width:900px){

    .video-grid{ grid-template-columns:repeat(2,1fr); }
    .video-grid .tile:nth-child(2), .video-grid .tile:nth-child(4){ transform:none; }
    .photo-grid{ grid-template-columns:repeat(2,1fr); }
    .carousel-strip .carousel-frame{ height:clamp(180px, 60vw, 280px); }
  }

  /* ============================= PRICING ============================= */
  .pricing-grid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.14);
  }
  .plan{
    background:var(--black); padding:clamp(30px,3.5vw,48px) clamp(26px,2.8vw,38px);
    display:flex; flex-direction:column;
    transition:background-color .4s var(--ease);
  }
  .plan:hover{ background:#0a0a0a; }

  /* Featured plan: white background, black text. Used for the film+edit plan
     to visually distinguish it from the edit-only one. */
  .plan.featured{ background:var(--white); color:var(--black); }
  .plan.featured:hover{ background:var(--white); }
  .plan.featured .plan-kicker{ color:#555; }
  .plan.featured .plan-desc{ color:#333; }
  .plan.featured .price-list-head{ color:#555; border-bottom-color:rgba(0,0,0,.15); }
  .plan.featured .price-row{ border-bottom-color:rgba(0,0,0,.08); }
  .plan.featured .price-row-label,
  .plan.featured .price-row-price{ color:var(--black); }
  .plan.featured .plan-notes{ border-top-color:rgba(0,0,0,.15); color:#444; }
  .plan.featured .plan-notes strong{ color:var(--black); }
  .plan.featured .plan-cta{ border-color:var(--black); color:var(--black); }
  .plan.featured .plan-cta:hover{ background:var(--black); color:var(--white); }

  .plan-kicker{ font-size:12px; color:var(--gray); margin-bottom:14px; text-transform:uppercase; letter-spacing:.14em; }
  .plan-name{
    font-family:var(--font-display); font-size:clamp(28px, 3vw, 40px);
    text-transform:uppercase; margin-bottom:12px; line-height:1;
  }
  .plan-desc{ font-size:14px; color:var(--gray); line-height:1.55; margin-bottom:22px; }

  /* Location callout: sits inside the "Film + edit" card, under its "Get a
     quote" button, so it reads as a footnote to that specific plan rather
     than shared page furniture. */
  .plan-notice{
    display:flex; align-items:center; justify-content:center; gap:10px;
    font-size:13px; font-weight:500; color:var(--white);
    padding:13px 16px; margin-top:22px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.18);
    line-height:1.5;
  }
  .plan-notice strong{ font-weight:600; color:var(--white); }

  /* slow blinking red dot: signals "we're here, we're active" without alarming */
  .plan-notice-dot{
    width:9px; height:9px; border-radius:50%;
    background:#ff3b3b; flex-shrink:0;
    box-shadow:0 0 0 0 rgba(255,59,59,.6);
    animation:pulseDot 2.4s var(--ease) infinite;
  }
  @keyframes pulseDot{
    0%   { box-shadow:0 0 0 0 rgba(255,59,59,.55); opacity:1; }
    60%  { box-shadow:0 0 0 10px rgba(255,59,59,0);  opacity:.55; }
    100% { box-shadow:0 0 0 0 rgba(255,59,59,0);     opacity:1; }
  }

  .price-list{
    flex:1; display:flex; flex-direction:column;
    margin-bottom:22px;
  }
  .price-list-head{
    display:flex; justify-content:space-between; align-items:baseline;
    font-size:11px; color:var(--gray-dim); text-transform:uppercase; letter-spacing:.14em;
    padding-bottom:12px; margin-bottom:6px;
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .price-row{
    display:flex; justify-content:space-between; align-items:baseline;
    padding:11px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
    font-size:14px; gap:16px;
  }
  .price-row:last-child{ border-bottom:none; }
  .price-row-label{ color:var(--white); }
  .price-row-price{
    color:var(--white); font-weight:600; white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }

  .plan-notes{
    margin-top:20px; padding-top:20px;
    border-top:1px solid rgba(255,255,255,.14);
    display:flex; flex-direction:column; gap:8px;
    font-size:12px; color:var(--gray); line-height:1.5;
  }
  .plan-notes p{ margin:0; }
  .plan-notes strong{ color:var(--white); font-weight:600; }

  .plan-cta{
    margin-top:24px;
    display:inline-flex; justify-content:center;
    border:1px solid var(--white); padding:14px 22px;
    font-size:14px; font-weight:600;
    transition:background-color .35s var(--ease), color .35s var(--ease);
  }
  .plan-cta:hover{ background:var(--white); color:var(--black); }

  @media (max-width:900px){
    .pricing-grid{ grid-template-columns:1fr; }
  }

  /* ============================= CTA BAND ============================= */
  .cta-band{
    position:relative;
    padding-top:clamp(30px, 4vw, 50px);
    padding-bottom:0;
    overflow:hidden;
    text-align:center;
  }
  .cta-band-inner{
    display:flex; flex-direction:column; align-items:center;
    gap:18px;
    max-width:1200px; margin:0 auto;
  }
  .cta-band p{
    font-size:clamp(15px, 1.2vw, 17px); color:var(--gray);
    margin:0; max-width:44ch;
  }
  .cta-band .btn{ padding:17px 30px; font-size:15px; }
  .cta-band-photo{
    display:block; width:100%;
    max-width:min(560px, 62vw); height:auto;
    margin:clamp(30px, 4vw, 50px) auto 0;
    position:relative; z-index:1;
    filter:drop-shadow(0 30px 50px rgba(0,0,0,.5));
  }

  @media (max-width:900px){
    .cta-band-photo{ max-width:78vw; }
  }

  /* ============================= FOOTER ============================= */
  footer{
    border-top:1px solid rgba(255,255,255,.14);
    padding-top:43px; padding-bottom:43px;
    display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
  }
  .footer-left{ display:flex; align-items:center; gap:14px; }
  .footer-left .brand-stamp{ width:38px; height:38px; }
  .footer-links{ display:flex; gap:26px; flex-wrap:wrap; }
  .footer-links a{ font-size:14px; color:var(--gray); transition:color .3s; }
  .footer-links a:hover{ color:var(--white); }
  .footer-meta{ font-size:13px; color:var(--gray-dim); width:100%; margin-top:30px; }

  /* ============================= MODAL ============================= */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.8); backdrop-filter:blur(6px);
    z-index:900; display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
    padding:20px;
  }
  .modal-overlay.open{ opacity:1; pointer-events:auto; }

  .modal{
    background:var(--black); border:1px solid rgba(255,255,255,.18);
    width:100%; max-width:520px; padding:clamp(28px,4vw,43px);
    transform:translateY(24px) scale(.98); opacity:0;
    transition:transform .45s var(--ease), opacity .45s var(--ease);
    max-height:88vh; overflow-y:auto;
  }
  .modal-overlay.open .modal{ transform:translateY(0) scale(1); opacity:1; }

  .modal-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
  .modal h3{ font-family:var(--font-display); font-size:clamp(28px,4vw,38px); text-transform:uppercase; line-height:1; }
  .modal-close{ font-size:28px; line-height:1; padding:4px; }
  .modal p.lead{ color:var(--gray); font-size:14px; margin-top:8px; margin-bottom:26px; }

  .field{ margin-bottom:18px; }
  .field label{ display:block; font-size:13px; color:var(--gray); margin-bottom:7px; }
  .field input, .field textarea{
    width:100%; background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,.3);
    color:var(--white); font-family:var(--font-body); font-size:15px; padding:9px 2px;
    transition:border-color .3s;
  }
  .field input:focus, .field textarea:focus{ border-color:var(--white); outline:none; }
  .field textarea{ resize:vertical; min-height:70px; }

  .modal .btn{ width:100%; justify-content:center; margin-top:8px; }

  .success-state{ text-align:center; padding:20px 0 6px; display:none; }
  .success-state.show{ display:block; }
  .success-state .tile-play{ margin:0 auto 20px; }
  .success-state h4{ font-family:var(--font-display); font-size:26px; text-transform:uppercase; margin-bottom:10px; }
  .success-state p{ color:var(--gray); font-size:14px; }
  .form-body.hidden{ display:none; }