:root{--bg:#09090c;--paper:#f3f0ea;--ink:#111114;--muted:#a3a3aa;--pink:#ff3aa7;--line:rgba(255,255,255,.14);--shell:min(1180px,calc(100% - 48px))}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:#fff;font-family:Inter,system-ui,sans-serif;overflow-x:hidden}.shell{width:var(--shell);margin:auto}
.hero{min-height:100svh;position:relative;display:flex;align-items:flex-end;overflow:hidden;background:#050507}.hero-photo{position:absolute;inset:0;background-image:url('assets/hero.webp');background-repeat:no-repeat;background-size:cover;background-position:center 34%;transform:none}.hero-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.82) 23%,rgba(0,0,0,.52) 35%,rgba(0,0,0,.12) 49%,rgba(0,0,0,.03) 69%,rgba(0,0,0,.16) 100%),linear-gradient(0deg,rgba(0,0,0,.68),transparent 36%)}
.nav{position:absolute;z-index:4;top:0;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;padding:24px 0}.logo{color:#fff;text-decoration:none;font-weight:900;letter-spacing:.03em;font-size:20px}
.hero .nav .logo{padding:7px 10px;border-radius:10px;background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.58) 58%,rgba(0,0,0,0) 100%);text-shadow:0 1px 10px rgba(0,0,0,.75)}.logo span{color:var(--pink)}.navlinks{display:flex;gap:30px}.navlinks a,.nav-cta{font-size:12px;font-weight:800;color:#fff;text-decoration:none}.nav-cta{border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:12px 20px;background:rgba(0,0,0,.16);backdrop-filter:blur(10px)}
.hero-content{position:relative;z-index:3;padding-bottom:8.5vh}.hero-text{width:min(620px,43vw)}.eyebrow,.kicker{font-size:12px;letter-spacing:.17em;font-weight:800}.hero h1{font-size:clamp(56px,5.55vw,86px);line-height:.91;letter-spacing:-.06em;margin:20px 0 28px;font-weight:900}.hero h1 .hero-white{color:#fff}.hero h1 .hero-pink{color:var(--pink)}.hero-line-nowrap{white-space:nowrap}.hero-line{font-size:clamp(20px,1.75vw,27px);font-weight:750;line-height:1.22;margin:0 0 12px}.hero-copy{font-size:16px;line-height:1.65;color:#d4d4d8;max-width:500px}.actions,.contact-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.button{border:0;border-radius:999px;padding:16px 24px;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font:inherit;font-weight:800}.pink{background:var(--pink);color:#08080b}.ghost{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.3);color:#fff}.scroll{position:absolute;z-index:3;right:28px;bottom:28px;color:#fff;text-decoration:none;font-size:10px;letter-spacing:.2em;writing-mode:vertical-rl;opacity:.7}.scroll span{font-size:22px;margin-top:10px}
.manifest{padding:150px 0}.manifest-intro{max-width:900px}.manifest h2,.video-head h2,.reviews h2,.formats h2,.contact h2,.about h2{font-size:clamp(44px,6vw,90px);line-height:.96;letter-spacing:-.055em;margin:18px 0 68px}.manifest h2 em,.video-head h2 span,.formats h2 span,.contact h2 span{font-style:normal;color:var(--pink)}.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.12)}.principle{background:var(--bg);padding:46px}.principle span{color:var(--pink);font-size:12px;font-weight:800}.principle h3{font-size:28px;margin:32px 0 12px}.principle p{color:#bbb;font-size:17px;line-height:1.6;margin:0}
.story{display:grid;grid-template-columns:1.08fr .92fr;min-height:82vh}.story.image-right{grid-template-columns:.92fr 1.08fr}.photo{min-height:70vh;background-size:cover;background-position:center}.photo-people{background-image:url('assets/people.webp');background-position:center 22%}.photo-moment{background-image:url('assets/moment.webp')}.story-copy{padding:10vw 7vw;align-self:center}.story-copy h2{font-size:clamp(42px,5vw,75px);line-height:1;letter-spacing:-.05em;margin:20px 0 28px}.story-copy p{font-size:19px;line-height:1.65;color:#c5c5c9}.story-copy strong{display:block;margin-top:30px;font-size:20px;color:var(--pink)}.story.light{background:var(--paper);color:var(--ink)}.story.light .story-copy p{color:#555}
.video-section{padding:150px 0;background:#050507}.video-head{margin-bottom:54px}.video-head h2{margin-bottom:0}.video-gallery{position:relative;display:flex;align-items:center;gap:16px}.video-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,31.5%);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 16px;width:100%}.video-rail::-webkit-scrollbar{display:none}.video-card{scroll-snap-align:start;min-width:0}.video-card video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#111;border-radius:24px;border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 55px rgba(0,0,0,.42);transition:transform .35s ease,filter .35s ease}.video-card:hover video{transform:scale(1.012);filter:brightness(1.06)}.video-caption{padding:16px 4px 0;display:flex;flex-direction:column;gap:6px}.video-caption b{font-size:16px}.video-caption span{font-size:13px;line-height:1.5;color:#999}.video-arrow{flex:0 0 48px;width:48px;height:48px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:#111117;color:#fff;font-size:22px;cursor:pointer;transition:.2s ease}.video-arrow:hover{background:var(--pink);color:#09090c;border-color:var(--pink);transform:scale(1.04)}
.quote-band{height:88vh;min-height:720px;position:relative;display:flex;align-items:center;overflow:hidden;background:#060609}.quote-bg{position:absolute;inset:0;background-color:#050507;background-image:url('assets/story.webp');background-repeat:no-repeat;background-size:auto 126%;background-position:80% 44%}.quote-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,4,7,.98) 0%,rgba(4,4,7,.93) 29%,rgba(4,4,7,.68) 45%,rgba(4,4,7,.14) 64%,rgba(4,4,7,.08) 100%),linear-gradient(0deg,rgba(4,4,7,.32),transparent 40%)}.quote-band blockquote{position:relative;z-index:1;width:min(670px,44vw);margin-left:max(52px,calc((100vw - 1180px)/2));text-align:left;font-size:clamp(42px,5.2vw,78px);line-height:.98;font-weight:850;letter-spacing:-.05em}.quote-band em{color:var(--pink);font-style:normal}
.reviews{padding:150px 0}.reviews-head{max-width:700px}.review-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.review{border:1px solid var(--line);border-radius:24px;padding:34px;min-height:270px;display:flex;flex-direction:column;justify-content:space-between}.review.featured{grid-row:span 2;background:var(--pink);color:#0a0a0d}.review p{font-size:20px;line-height:1.5;margin:0}.review.featured p{font-size:30px;line-height:1.32;font-weight:650}.review span{font-size:13px;font-weight:800;opacity:.7;margin-top:24px}
.about{display:grid;grid-template-columns:1.02fr .98fr;background:var(--paper);color:var(--ink);min-height:90vh}.about-media{min-height:90vh;background:#08080b;overflow:hidden;position:relative}.about-media video{width:100%;height:100%;min-height:90vh;object-fit:cover;object-position:center center;display:block}.about-media:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 72%,rgba(243,240,234,.13))}.about-copy{padding:9vw 7vw;align-self:center}.about-copy h2{margin-bottom:30px}.about-copy p{font-size:18px;line-height:1.7;color:#454545}.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.chips span{border:1px solid #bbb;border-radius:999px;padding:10px 14px;font-size:13px;font-weight:700}
.formats{padding:150px 0}.format-list{border-top:1px solid var(--line)}.format-list>div{display:grid;grid-template-columns:70px 1fr 1fr;gap:30px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line)}.format-list b{color:var(--pink)}.format-list h3{font-size:28px;margin:0}.format-list p{margin:0;color:#aaa;line-height:1.5}
.contact{min-height:90vh;position:relative;display:flex;align-items:center;overflow:hidden;background:#050507}.contact-photo{position:absolute;top:0;right:0;bottom:0;width:58%;background:url('assets/heart.webp') center 48%/auto 96% no-repeat;background-color:#050507;filter:brightness(.82)}.contact-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.84) 36%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.1) 100%)}.contact-inner{position:relative;z-index:1}.contact-inner>*{max-width:760px}.contact h2{margin-bottom:24px}.contact p{font-size:18px;color:#ccc}.full{width:100%}footer{padding:32px 0 50px;display:flex;justify-content:space-between;color:#888}
dialog{width:min(560px,calc(100% - 30px));border:1px solid #333;border-radius:28px;background:#111114;color:#fff;padding:0;box-shadow:0 30px 100px rgba(0,0,0,.6)}dialog::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(8px)}dialog form{padding:40px;position:relative}dialog h2{font-size:36px;letter-spacing:-.04em;margin:14px 0 24px}.close{position:absolute;right:20px;top:14px;background:none;border:0;color:#fff;font-size:32px;cursor:pointer}label{display:block;font-size:13px;font-weight:700;margin:14px 0}input,select,textarea{width:100%;margin-top:8px;border:1px solid #333;border-radius:14px;background:#1a1a1f;color:#fff;padding:14px;font:inherit}small{color:#888;display:block;margin-top:12px}.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){:root{--shell:min(100% - 28px,1180px)}.navlinks{display:none}.nav{padding-top:18px}.hero{min-height:94svh;align-items:flex-end}.hero-photo{background-size:auto 100%;background-position:54% 16%;background-color:#050507}.hero-vignette{background:linear-gradient(0deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.78) 48%,rgba(0,0,0,.16) 79%),linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.08))}.hero-content{padding-bottom:6vh}.hero-text{width:100%;max-width:620px}.hero h1{font-size:clamp(48px,13.2vw,78px)}.hero-line-nowrap{white-space:normal}.hero-copy{font-size:15px}.manifest{padding:95px 0}.principles{grid-template-columns:1fr}.story,.story.image-right,.about{grid-template-columns:1fr}.story.image-right .story-copy{order:2}.story.image-right .photo{order:1}.photo{min-height:62vh}.story-copy{padding:72px 28px}.video-section,.reviews,.formats{padding:95px 0}.video-gallery{width:calc(100% - 14px);gap:8px}.video-rail{grid-auto-columns:minmax(250px,82%);gap:14px}.video-arrow{width:42px;height:42px;flex-basis:42px}.quote-band{height:74vh;min-height:620px;align-items:flex-end;padding-bottom:64px}.quote-bg{background-size:auto 100%;background-position:64% center}.quote-overlay{background:linear-gradient(0deg,rgba(4,4,7,.96) 0%,rgba(4,4,7,.75) 48%,rgba(4,4,7,.12) 78%)}.quote-band blockquote{width:calc(100% - 36px);margin:0 18px;font-size:clamp(38px,11vw,64px)}.review-grid{grid-template-columns:1fr}.review.featured{grid-row:auto}.review.featured p{font-size:24px}.about-media{min-height:68vh}.about-media video{min-height:68vh}.about-copy{padding:72px 28px}.format-list>div{grid-template-columns:40px 1fr}.format-list p{grid-column:2}.contact{min-height:84vh;align-items:flex-end;padding-bottom:64px}.contact-photo{width:100%;left:0;right:0;background-size:auto 88%;background-position:center 30%}.contact-shade{background:linear-gradient(0deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.72) 43%,rgba(0,0,0,.1) 78%)}.nav-cta{padding:10px 14px}.scroll{display:none}}

/* ===== v1.5 fixes =====
   1) Hero returns to the full-screen photographic composition from the preferred earlier version.
   2) Copy stays safely on the left and never lands on the face.
   3) Video cards use real in-video poster frames.
   4) "Я передаю свій стан" uses the wedding movement loop.
*/
@media (min-width:901px){
  .hero-photo{
    inset:0;
    width:100%;
    background-image:url('assets/hero.webp');
    background-size:cover;
    background-repeat:no-repeat;
    background-position:56% 24%;
    transform:scale(1.002);
  }
  .hero-vignette{
    background:
      linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.80) 24%,rgba(0,0,0,.48) 37%,rgba(0,0,0,.10) 52%,rgba(0,0,0,.02) 72%,rgba(0,0,0,.14) 100%),
      linear-gradient(0deg,rgba(0,0,0,.58),transparent 38%);
  }
  .hero-text{width:min(470px,34vw)}
  .hero h1{font-size:clamp(54px,5.7vw,88px);line-height:.87;margin:18px 0 26px}
  .hero-line{font-size:clamp(19px,1.55vw,24px)}
  .hero-copy{font-size:15px;max-width:460px}
}
@media (min-width:1280px){
  .hero-content{padding-bottom:9vh}
  .hero-photo{background-position:57% 24%}
}
@media (max-width:900px){
  .hero-photo{background-size:cover;background-position:58% 18%}
}


/* ===== v2.1 HERO ONLY =====
   Everything else on the site stays exactly as it was.

   EASY HERO PHOTO CONTROLS:
   --hero-x: larger number = photo shifts visually to the RIGHT
   --hero-y: larger number = photo shifts visually DOWN

   Current desktop tuning: lower + right, so the face clears
   the navigation and does not crowd the headline.
*/
:root{
  --hero-x: 68%;
  --hero-y: 14%;
}

@media (min-width:901px){
  .hero-photo{
    background-position: var(--hero-x) var(--hero-y) !important;
    background-size: cover !important;
    transform: scale(1.002);
  }
}

@media (min-width:1280px){
  :root{
    --hero-x: 68%;
    --hero-y: 14%;
  }
}

/* Mobile keeps the existing successful composition. */
@media (max-width:900px){
  .hero-photo{
    background-position:58% 18% !important;
  }
}

/* ===== v2.2 HERO TYPOGRAPHY / PROPORTIONS ONLY =====
   Keep all v2.1 content, photo position and the rest of the site unchanged.
   This only makes the hero headline block match the preferred proportions:
   strong, compact, three clean lines with more breathing room from the face.
*/
@media (min-width:901px){
  .hero-text{
    width:min(560px,39vw);
  }

  .hero h1{
    font-size:clamp(58px,4.95vw,76px);
    line-height:.94;
    letter-spacing:-.058em;
    margin:16px 0 24px;
  }

  .hero-line-nowrap{
    white-space:nowrap;
  }

  .hero-line{
    font-size:clamp(18px,1.38vw,22px);
    line-height:1.24;
    margin:0 0 12px;
    max-width:520px;
  }

  .hero-copy{
    font-size:15px;
    line-height:1.62;
    max-width:500px;
  }

  .actions{
    margin-top:26px;
  }
}

/* ===== v2.3 HERO POSITION ONLY =====
   Based on the preferred early landing composition:
   - keeps ALL v2.2 content, typography, photo position and the rest of the site unchanged
   - moves the hero copy farther LEFT by giving this block the wider 1440px layout
   - moves the hero copy a little LOWER by reducing bottom spacing
*/
@media (min-width:901px){
  .hero-content.shell{
    width:min(1440px,calc(100% - 72px));
    margin-left:auto;
    margin-right:auto;
    padding-bottom:5.2vh;
  }
}


/* ===== v2.4 HERO VISUAL POLISH ONLY =====
   Goal: match the preferred early hero proportions without touching any other section.
   - larger, more substantial headline
   - hero copy sits farther left and a little lower
   - stronger photo shading so navigation stays crisp
   - keeps the existing hero photo and its 68% / 14% framing
*/
@media (min-width:901px){
  .hero-content.shell{
    width:100%;
    max-width:none;
    margin:0;
    padding-left:36px;
    padding-right:36px;
    padding-bottom:2.4vh;
  }

  .hero-text{
    width:min(660px,44vw);
  }

  .hero h1{
    font-size:clamp(64px,6.05vw,94px);
    line-height:.89;
    letter-spacing:-.062em;
    margin:16px 0 26px;
    font-weight:900;
  }

  .hero-line{
    font-size:clamp(20px,1.5vw,24px);
    line-height:1.22;
    margin:0 0 14px;
    max-width:610px;
    font-weight:800;
  }

  .hero-copy{
    font-size:16px;
    line-height:1.64;
    max-width:610px;
  }

  .actions{
    margin-top:28px;
  }

  .hero-vignette{
    background:
      linear-gradient(180deg,rgba(0,0,0,.48) 0%,rgba(0,0,0,.16) 14%,transparent 29%),
      linear-gradient(90deg,rgba(0,0,0,.97) 0%,rgba(0,0,0,.88) 24%,rgba(0,0,0,.62) 38%,rgba(0,0,0,.24) 53%,rgba(0,0,0,.07) 72%,rgba(0,0,0,.17) 100%),
      linear-gradient(0deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.15) 38%,transparent 58%);
  }
}

/* ===== v2.5 MOBILE RESPONSIVE FIXES ONLY =====
   Desktop >= 901px is intentionally untouched.
*/
@media (max-width:900px){
  :root{--shell:calc(100% - 32px)}

  /* Navigation */
  .nav{padding-top:16px;align-items:center}
  .logo{font-size:18px}
  .nav-cta{font-size:12px;padding:10px 15px}

  /* Hero: keep the portrait feeling, but clear the copy */
  .hero{
    min-height:100svh;
    align-items:flex-end;
  }
  .hero-photo{
    background-size:auto 92% !important;
    background-position:72% 2% !important;
    background-color:#050507;
  }
  .hero-vignette{
    background:
      linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.16) 18%,rgba(0,0,0,.02) 34%),
      linear-gradient(90deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.52) 54%,rgba(0,0,0,.12) 100%),
      linear-gradient(0deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.84) 39%,rgba(0,0,0,.24) 72%,transparent 100%);
  }
  .hero-content{
    padding-bottom:7svh;
    padding-top:118px;
  }
  .hero-text{width:100%;max-width:560px}
  .eyebrow{font-size:11px;letter-spacing:.16em}
  .hero h1{
    font-size:clamp(45px,12.2vw,64px);
    line-height:.93;
    letter-spacing:-.055em;
    margin:15px 0 22px;
  }
  .hero-line-nowrap{white-space:nowrap}
  .hero-line{
    font-size:clamp(20px,5.5vw,24px);
    line-height:1.18;
    max-width:340px;
    margin-bottom:13px;
  }
  .hero-copy{
    font-size:15px;
    line-height:1.55;
    max-width:350px;
  }
  .actions{gap:10px;margin-top:23px}
  .hero .button{padding:15px 19px;font-size:14px}

  /* Section typography: avoid giant headings overflowing on iPhone */
  .manifest h2,.video-head h2,.reviews h2,.formats h2,.contact h2,.about h2{
    font-size:clamp(38px,10.5vw,54px);
    line-height:.98;
    letter-spacing:-.05em;
  }

  /* Video carousel: one clear primary card + a peek of the next */
  .video-section{padding:86px 0}
  .video-head{margin-bottom:34px}
  .video-head h2{margin-top:14px}
  .video-gallery{
    width:100%;
    gap:6px;
  }
  .video-rail{
    grid-auto-columns:78%;
    gap:14px;
    padding:4px 0 14px;
  }
  .video-card video{border-radius:20px}
  .video-arrow{
    position:absolute;
    z-index:3;
    top:42%;
    width:44px;
    height:44px;
    background:rgba(12,12,17,.88);
    backdrop-filter:blur(8px);
  }
  .video-arrow.prev{left:-7px}
  .video-arrow.next{right:-7px}
  .video-arrow.prev{background:var(--pink);color:#09090c;border-color:var(--pink)}
  .video-caption{padding-top:13px}

  /* About loop */
  .about-media,.about-media video{min-height:56vh}
  .about-copy{padding:64px 20px 72px}

  /* Contact: remove the huge dead black area on mobile */
  .contact{
    min-height:auto;
    display:block;
    padding:0;
  }
  .contact-photo{
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center 32%;
    filter:brightness(.68);
  }
  .contact-shade{
    background:
      linear-gradient(0deg,rgba(0,0,0,.97) 0%,rgba(0,0,0,.79) 52%,rgba(0,0,0,.37) 82%,rgba(0,0,0,.18) 100%);
  }
  .contact-inner{
    padding-top:88px;
    padding-bottom:88px;
  }
  .contact h2{margin:16px 0 20px}
  .contact p{font-size:16px;line-height:1.55;max-width:350px}
  .contact-actions{gap:12px;margin-top:24px}
  .contact .button{width:auto;min-width:0;padding:15px 20px;font-size:15px}

  footer{padding:26px 0 34px;align-items:center}
  footer .logo{font-size:18px}
}

@media (max-width:430px){
  .hero-photo{background-size:auto 90% !important;background-position:69% 3% !important}
  .hero-content{padding-bottom:6svh}
  .hero h1{font-size:clamp(43px,11.8vw,54px)}
  .hero-line-nowrap{white-space:normal}
  .hero-copy{max-width:330px}
  .hero .actions{flex-direction:column;align-items:flex-start}
  .hero .button{width:auto}
  .video-rail{grid-auto-columns:80%}
  .contact-actions{flex-direction:column;align-items:flex-start}
}

/* ===== v2.6 MOBILE COMPOSITION FIXES ONLY =====
   Desktop >= 901px stays untouched.
   Mobile goals:
   1) Hero copy starts BELOW the face so the portrait reads first.
   2) Video cards are visually centered in the viewport.
   3) Final CTA separates PHOTO and TEXT into two clear blocks.
*/
@media (max-width:900px){
  /* HERO — portrait first, copy below the face */
  .hero{
    min-height:112svh;
    align-items:flex-start;
  }
  .hero-photo{
    background-size:auto 70svh !important;
    background-position:58% 0 !important;
    background-color:#050507;
  }
  .hero-vignette{
    background:
      linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.08) 22%,rgba(0,0,0,.02) 38%,rgba(0,0,0,.60) 54%,rgba(0,0,0,.94) 68%,rgba(0,0,0,1) 100%),
      linear-gradient(90deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.06) 60%,rgba(0,0,0,.12) 100%);
  }
  .hero-content{
    width:var(--shell);
    margin:0 auto;
    padding-top:48svh;
    padding-bottom:7svh;
  }
  .hero-text{max-width:560px}

  /* VIDEO — center the active/first card instead of pinning it left */
  .video-gallery{
    width:100%;
    padding-inline:0;
  }
  .video-rail{
    grid-auto-columns:84%;
    gap:14px;
    padding:4px 8% 16px;
    scroll-padding-inline:8%;
  }
  .video-card{
    scroll-snap-align:center;
  }
  .video-arrow.prev{left:4px}
  .video-arrow.next{right:4px}

  /* CONTACT — photo and copy become two separate blocks */
  .contact{
    min-height:0;
    display:block;
    overflow:hidden;
    background:#050507;
  }
  .contact-photo{
    position:relative;
    inset:auto;
    width:100%;
    height:48svh;
    min-height:390px;
    background-size:cover;
    background-position:center 34%;
    filter:brightness(.78);
  }
  .contact-shade{
    top:0;
    left:0;
    right:0;
    bottom:auto;
    height:48svh;
    min-height:390px;
    background:linear-gradient(0deg,rgba(5,5,7,.82) 0%,rgba(5,5,7,.18) 38%,rgba(5,5,7,.08) 100%);
  }
  .contact-inner{
    width:var(--shell);
    margin:0 auto;
    padding:50px 0 58px;
    background:#050507;
  }
  .contact-inner>*{max-width:100%}
  .contact h2{
    margin:14px 0 20px;
  }
  .contact p{
    max-width:420px;
  }
}

@media (max-width:430px){
  .hero{min-height:116svh}
  .hero-photo{
    background-size:auto 66svh !important;
    background-position:58% 0 !important;
  }
  .hero-content{
    padding-top:47svh;
    padding-bottom:6svh;
  }
  .video-rail{
    grid-auto-columns:86%;
    padding-left:7%;
    padding-right:7%;
    scroll-padding-inline:7%;
  }
  .contact-photo,
  .contact-shade{
    height:45svh;
    min-height:350px;
  }
  .contact-inner{padding:44px 0 52px}
}

/* ===== v2.7 READABILITY + FLOATING BACK-TO-TOP =====
   Keeps the v2.6 composition intact.
   Mobile: adds a local dark cushion behind hero copy only, leaving the portrait brighter.
   All devices: adds a floating one-tap button to return to the top.
*/
.scroll-top{
  position:fixed;
  right:22px;
  bottom:24px;
  width:52px;
  height:52px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(10,10,14,.84);
  color:#fff;
  font:700 26px/1 Inter,system-ui,sans-serif;
  display:grid;
  place-items:center;
  z-index:9999;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(12px) scale(.96);
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease,background .2s ease,border-color .2s ease;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 12px 34px rgba(0,0,0,.34);
}
.scroll-top.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.scroll-top:hover{
  background:var(--pink);
  color:#09090c;
  border-color:var(--pink);
}
.scroll-top:active{transform:scale(.94)}
.scroll-top:focus-visible{outline:3px solid rgba(255,58,167,.45);outline-offset:3px}

@media (max-width:900px){
  /* Darken only the copy area — the face stays readable and vivid above it. */
  .hero-text{
    position:relative;
    z-index:1;
  }
  .hero-text::before{
    content:"";
    position:absolute;
    z-index:-1;
    left:-22px;
    right:-22px;
    top:-26px;
    bottom:-34px;
    pointer-events:none;
    background:
      radial-gradient(ellipse at 18% 24%,rgba(0,0,0,.72) 0%,rgba(0,0,0,.53) 40%,rgba(0,0,0,.18) 72%,transparent 100%),
      linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.58) 70%,rgba(0,0,0,.80));
    filter:blur(5px);
  }
  .hero h1,
  .hero-line,
  .hero-copy,
  .hero .eyebrow{
    text-shadow:0 2px 16px rgba(0,0,0,.52);
  }
  .hero-copy{line-height:1.62}

  /* Keep the button safely above Safari's bottom toolbar. */
  .scroll-top{
    right:16px;
    bottom:max(88px,calc(env(safe-area-inset-bottom) + 72px));
    width:50px;
    height:50px;
    font-size:25px;
  }
}