:root{
  --bg:#0a0a0c;
  --panel:#111113;
  --text:#f3f1ea;
  --dim:#8a8a90;
  --dim2:#5f5f66;
  --gold:#c9a24b;
  --line:#242428;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}

/* ---------- NAV ---------- */
/* minimal bar riding over the God spot: brand left, CTA right, no sticky slab.
   --gutter is the shared left inset the wordmark and the big name both hang on */
:root{ --gutter:clamp(24px, 10vw, 200px); }
.nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:30px var(--gutter); position:absolute; top:0; left:0; right:0; z-index:50;
  transition:transform 0.75s cubic-bezier(.22,.7,.3,1);
}
.nav--tucked{transform:translateY(-130%); transition-duration:0.28s;}
/* the skip pills: small, see-through, stacked in the top-right corner, both
   directions always on offer once the reader is below the nav. The pair steps
   out of the way while the page is actually moving (nav.js) and returns once
   the scroll settles; the direction that would go nowhere is dimmed. */
.skip-group{
  position:fixed; top:calc(10px + env(safe-area-inset-top, 0px)); right:12px; z-index:60;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  opacity:0; pointer-events:none; transition:opacity .35s;
}
.skip-group--on{opacity:1; pointer-events:auto;}
.skip-group--on.skip-group--scrolling{opacity:0; pointer-events:none; transition-duration:.15s;}
.skip-btn{
  border:1px solid rgba(243,241,234,0.28); border-radius:999px; padding:5px 10px;
  font-size:10px; letter-spacing:0.08em; color:rgba(243,241,234,0.72); font-weight:600;
  background:rgba(12,12,14,0.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:opacity .3s, background .2s, color .2s;
}
.skip-btn:hover{background:rgba(12,12,14,0.6); color:var(--text);}
.skip-btn--idle{opacity:0.3; pointer-events:none;}
.nav-brand{display:flex; align-items:center; gap:6px;}
/* signature angled up into the right, just overlapping the printed name */
.nav-sig{height:38px; width:auto; display:block; filter:brightness(0) invert(1);
  transform:rotate(-25deg); transform-origin:center bottom;
  margin-right:-10px; position:relative; z-index:1; pointer-events:none;}
.nav-name{
  font-family:'Outfit',sans-serif; text-transform:uppercase;
  font-size:21px; font-weight:800; letter-spacing:0.02em;
}
.nav-cta{
  border:none; border-radius:8px; padding:13px 26px;
  font-family:'Inter',sans-serif; text-transform:uppercase; letter-spacing:0.06em;
  font-size:13.5px; font-weight:700; color:#0b0b0c; background:var(--gold);
  transition:transform .2s, box-shadow .25s;
}
.nav-cta:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(201,162,75,0.35);}

/* ---------- GOD SPOT (hero): name upper-middle on the gutter; the portrait sits
   smaller on the right and is dropped deep into a near-black field with only a
   faint cool glow, the way the reference keeps its subject faded into the dark ---------- */
/* Fixed, width-scaled height (not viewport-height driven) so the strip lands at
   the same pixel as the reference regardless of how tall the screen is. */
.hero{
  position:relative; overflow:hidden;
  min-height:clamp(520px, 40vw, 820px); display:flex; align-items:center;
  /* one continuous blue→teal wash: a bright core around the subject, plus a broad
     linear bleed that carries the colour all the way left behind the name and
     eases to nothing — a long, soft falloff, never a hard line */
  background:
    /* spotlight glow placed right behind him and matched to the studio backdrop,
       so the photo's own bright top and sides melt into it — no rectangle */
    radial-gradient(30vw 42vw at 80% 32%, rgba(74,156,224,0.78) 0%, rgba(50,132,198,0.44) 38%, rgba(30,96,152,0.12) 66%, rgba(24,80,130,0) 85%),
    /* broad, very soft leftward bleed that carries the colour behind the name and
       eases to nothing over a long distance — a gradual falloff, never a line */
    linear-gradient(100deg, rgba(10,15,22,0) 0%, rgba(18,58,92,0.14) 34%, rgba(26,92,146,0.30) 62%, rgba(32,114,172,0.46) 88%, rgba(38,128,182,0.55) 100%),
    #0a0f13;
}
/* film-grain texture over the whole god spot, the way the reference blends its hero */
.hero::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* the subject is a transparent cutout, so it drops straight onto the gradient with
   no rectangle. It is darkened and slightly faded to sit back in the frame, and
   its foot dissolves into the carousel. Position + size ride on CSS variables the
   localhost hero editor writes (translate + scale), so it can be dragged/resized. */
.hero-photo{position:absolute; top:0; right:0; bottom:0; width:40%; overflow:hidden;}
.hero-photo img{
  position:absolute; left:50%; bottom:0; height:90%; width:auto;
  transform:translate(calc(-50% + var(--hx,0px)), var(--hy,0px)) scale(var(--hs,1));
  transform-origin:center bottom;
  filter:brightness(0.72) contrast(1.02) saturate(0.96);
  opacity:0.92;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 88%, transparent 99.5%);
          mask-image:linear-gradient(180deg, #000 0%, #000 88%, transparent 99.5%);
}
.hero-photo img.adm-grabbing{cursor:grabbing;}
body.editing-hero .hero-photo{overflow:visible; z-index:40;}
body.editing-hero .hero-photo img{cursor:grab; outline:2px dashed rgba(201,162,75,.9); outline-offset:-2px;}
.hero-handle{position:absolute; width:16px; height:16px; z-index:41; background:var(--gold);
  border:2px solid #0b0b0c; border-radius:50%; display:none; transform:translate(-50%,-50%);}
body.editing-hero .hero-handle{display:block;}
.hero-handle[data-c="nw"],.hero-handle[data-c="se"]{cursor:nwse-resize;}
.hero-handle[data-c="ne"],.hero-handle[data-c="sw"]{cursor:nesw-resize;}

.hero-inner{position:relative; z-index:2; padding:0 var(--gutter); max-width:1200px;}
.hero-eyebrow{
  font-family:'Outfit',sans-serif; text-transform:uppercase;
  font-size:clamp(15px, 1.5vw, 24px); font-weight:500; letter-spacing:0.01em;
  color:#fff; margin-bottom:20px;
}
.hero-name{
  font-family:'Bebas Neue',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(72px, 11.6vw, 232px); line-height:0.88; letter-spacing:0.005em;
  margin:0;
}

/* ---------- BTS STRIP: infinite right-to-left marquee, rounded cards ---------- */
.strip{overflow:hidden; position:relative; z-index:2; background:var(--bg); padding:10px 0;}
.strip__track{display:flex; width:max-content; will-change:transform;
  animation-name:strip-scroll; animation-timing-function:linear; animation-iteration-count:infinite;}
.strip:hover .strip__track{animation-play-state:paused;}
.strip__card{
  flex:0 0 auto; width:405px; height:265px; margin-right:12px;
  overflow:hidden; border-radius:14px; background:var(--panel); position:relative;
}
/* the slight scale trims any thin white border baked into a source frame */
.strip__card img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02);}
.strip__card--motion{outline:2px solid var(--gold); outline-offset:-2px;}
/* stop-motion frames stacked; only .is-on shows — an opacity flip, no decode gap */
.strip__card--motion .sm-frame{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; display:block; transform:scale(1.02);
}
.strip__card--motion .sm-frame.is-on{opacity:1;}
.strip__card--motion canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
@keyframes strip-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
/* the strip can be grabbed and pulled through to scan it fast (mouse or touch) */
.strip--scrub{cursor:grab; touch-action:pan-y; user-select:none;}
.strip--scrub .strip__card{cursor:inherit;}
.strip--scrub.strip--grabbing, .strip--scrub.strip--grabbing .strip__card{cursor:grabbing;}
/* the media inside a card must not swallow the drag (native image-drag / capture) */
.strip--scrub .strip__card img,
.strip--scrub .strip__card canvas,
.strip--scrub .strip__card .sm-frame{pointer-events:none; -webkit-user-drag:none;}

/* ---------- SERVICES: the About-style block, tightened ---------- */
.services{
  display:grid; grid-template-columns:minmax(0,0.9fr) 1.1fr; gap:56px; align-items:center;
  max-width:1400px; margin:0 auto; padding:11vh 40px;
}
.services-photo{aspect-ratio:4/3; overflow:hidden; border-radius:6px; background:var(--panel);}
.services-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.services-head{
  font-family:'Bebas Neue',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(46px,6vw,96px); line-height:0.86; letter-spacing:0.01em; margin:0;
}
.services-kicker{
  margin:20px 0 22px; font-size:12px; letter-spacing:0.16em; color:var(--gold); font-weight:600;
}
.services-copy p{font-size:16px; line-height:1.7; color:#d3d2cb; margin-bottom:16px; max-width:56ch;}
.instruction{
  margin-top:14px; font-size:12px; letter-spacing:0.08em; color:var(--dim);
}

/* ---------- REEL GRID (the very bottom: the three features, breathing) ---------- */
.reel-section{padding:6vh 40px 110px; position:relative; z-index:2;}
.reel-head{max-width:1400px; margin:0 auto; padding-bottom:26px;}
.reel-grid{
  max-width:1400px; margin:0 auto; display:grid;
  grid-template-columns:repeat(2, 1fr); gap:24px;
}
.reel-grid .reel-card{border-radius:14px;}
.reel-instruction{text-align:center; padding-top:30px;}
.reel-card{
  position:relative; aspect-ratio:16/10; background:#000; overflow:hidden;
  cursor:grab; touch-action:none; user-select:none;
}
.reel-card.grabbing{cursor:grabbing;}
.reel-card canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.reel-card video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:none; pointer-events:none;
}
.reel-card.has-video video{display:block;}
.reel-card.has-video canvas{display:none;}
.frame-counter{
  position:absolute; top:12px; right:12px; z-index:3;
  background:rgba(0,0,0,.55); color:#cfcfd2; font-size:11px; letter-spacing:0.05em;
  padding:4px 8px; border-radius:3px; font-variant-numeric:tabular-nums;
}
.reel-overlay{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:14px 16px 16px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.92) 100%);
}
.reel-badges{font-size:10.5px; letter-spacing:0.12em; color:var(--gold); font-weight:600;}
.reel-credits{font-size:10.5px; letter-spacing:0.03em; color:#c9c8c2; margin-top:4px; line-height:1.4;}
.reel-bottom{display:flex; justify-content:space-between; align-items:flex-end; margin-top:10px;}
.reel-title{font-size:16px; font-weight:700;}
.reel-time{font-size:12px; color:#bdbdbf; font-variant-numeric:tabular-nums;}

/* ---------- STILLS: pinned parallax chapters ---------- */
.stills-section{position:relative; z-index:2; padding-top:9vh;}
.stills-head{max-width:1400px; margin:0 auto; padding:0 40px 5vh;}
.stills-eyebrow{
  font-size:11px; letter-spacing:0.3em; color:#9fb0b5; font-weight:500;
  margin-bottom:26px;
}
.stills-headline{
  font-family:'Fraunces',serif; font-optical-sizing:auto;
  font-weight:300; font-size:clamp(44px, 7vw, 96px); line-height:1.04;
  letter-spacing:-0.01em; margin:0;
}
/* chapters butt together at the same 2px seam the video grid uses; each
   stage is a full viewport of imagery, three rows deep */
.chapter{position:relative;}
.chapter + .chapter{margin-top:2px;}
.chapter__stage{
  position:relative;
  height:100vh; display:flex; flex-direction:column; justify-content:center;
  gap:2px; overflow:hidden; background:var(--bg);
}
.chapter__row{display:flex; align-items:stretch; gap:2px; will-change:transform;}
.chapter__row figure{
  margin:0; flex:0 0 auto; height:calc((100vh - 4px)/3);
  background:var(--panel); overflow:hidden; position:relative;
}
.chapter__row figure img{
  display:block; height:100%; width:100%; object-fit:cover;
  backface-visibility:hidden;
}
/* a scrubbable video living inside a row: vertical swipes keep scrolling the
   page, horizontal drags scrub the clip */
.chapter__row .reel-card{aspect-ratio:auto; touch-action:pan-y;}

/* ---------- BREAK: the titled interlude between still batches ---------- */
.break-section{position:relative; z-index:2; padding:16vh 40px 12vh; background:var(--bg);}
.break-head{max-width:1400px; margin:0 auto 6vh; text-align:center;}
.break-head .stills-eyebrow{color:var(--gold); margin-bottom:22px;}
.break-text{
  max-width:680px; margin:30px auto 0; font-size:16px; line-height:1.7;
  color:var(--dim);
}
.break-reels{
  max-width:1400px; margin:0 auto; display:grid;
  grid-template-columns:repeat(3, 1fr); gap:18px;
}
.break-reels .reel-card{border-radius:14px;}
.break-instruction{text-align:center; padding-top:26px;}

/* ---------- NEWSLETTER: the call to action after the first gallery. Measured
   on the reference at 2000px: 96px/20% padding, Bebas 64px tag on a colour
   block, Bebas 224px headline with the second word in the accent, Outfit 32px
   line, a white email box, then signature + social row centred ---------- */
.newsletter{
  position:relative; z-index:2; padding:clamp(56px, 4.8vw, 96px) calc(var(--gutter) * 2);
  background:radial-gradient(circle at 50% 35%, #17141c 0%, #0c0b0e 70%);
}
.newsletter__inner{max-width:1200px;}
.newsletter__tag{
  display:inline-block; font-family:'Bebas Neue',sans-serif; text-transform:uppercase;
  font-size:clamp(30px, 3.2vw, 64px); line-height:1.2; padding:0 .25em;
  background:var(--gold); color:#0b0b0c; margin-bottom:clamp(22px, 2.4vw, 48px);
}
.newsletter__head{
  font-family:'Bebas Neue',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(64px, 11.2vw, 224px); line-height:1; margin:0;
}
.newsletter__head span{color:var(--gold);}
.newsletter__sub{
  font-family:'Outfit',sans-serif; font-weight:400; color:#fff;
  font-size:clamp(18px, 1.6vw, 32px); line-height:1.25; max-width:40em;
  margin:clamp(14px, 1.2vw, 24px) 0 clamp(36px, 3.4vw, 68px);
}
.newsletter__form{display:flex; flex-wrap:wrap; gap:10px; max-width:900px; position:relative;}
.newsletter__email{
  flex:1 1 300px; height:56px; border:0; border-radius:6px; padding:0 18px;
  font:16px 'Inter',sans-serif; background:#fff; color:#0b0b0c; min-width:0;
}
.newsletter__email::placeholder{color:#8a8a90;}
.newsletter__btn{
  height:56px; padding:0 28px; border:0; border-radius:6px; cursor:pointer;
  background:var(--gold); color:#0b0b0c; font:700 13.5px 'Inter',sans-serif;
  text-transform:uppercase; letter-spacing:0.06em; transition:transform .2s, box-shadow .25s;
}
.newsletter__btn:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(201,162,75,0.35);}
.newsletter__btn:disabled{opacity:.6; transform:none; box-shadow:none;}
.newsletter__hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.newsletter__note{flex-basis:100%; min-height:18px; font-size:13px; color:var(--dim); letter-spacing:0.02em;}
.newsletter__foot{margin-top:clamp(48px, 4vw, 80px); display:flex; flex-direction:column; align-items:center; gap:22px;}
.newsletter__sig{height:64px; width:auto; filter:brightness(0) invert(1); opacity:.9;}
.newsletter__socials{display:flex; gap:16px;}
.newsletter__socials a{display:block; width:24px; height:24px; color:var(--gold); transition:transform .2s, color .2s;}
.newsletter__socials a:hover{transform:translateY(-2px); color:#e0be6c;}
.newsletter__socials svg{width:100%; height:100%; fill:currentColor; display:block;}

/* ---------- PILLARS: the vertical receipts ---------- */
.pillars-section{position:relative; z-index:2; padding:14vh 40px 100px;}
.pillars-head{padding:0 0 6vh;}
.pillars-platforms{
  margin-top:26px; font-size:12px; letter-spacing:0.18em;
  color:var(--dim); line-height:2;
}
/* each pillar is a framed capsule: media and its description live inside
   the same rounded frame, and the frames float apart from one another */
.pillar-grid{
  max-width:1060px; margin:0 auto; display:grid;
  grid-template-columns:repeat(2, 1fr); gap:34px 30px; align-items:start;
}
.pillar{
  background:var(--panel); border:1px solid var(--line);
  border-radius:22px; padding:14px 14px 24px;
}
/* media is height-capped so a whole capsule (video + words) fits one screen */
.pillar-media{display:flex; flex-direction:column; gap:8px; align-items:center;}
.pillar-media .reel-card{
  aspect-ratio:9/16; height:44vh; width:auto; max-width:100%;
  touch-action:pan-y; border-radius:14px;
}
.pillar-media.stacked .reel-card{aspect-ratio:16/9; height:calc((44vh - 8px)/2);}
.pillar-copy{padding:0 8px;}
.pillar-kicker{
  margin-top:16px; font-size:10.5px; letter-spacing:0.12em;
  color:var(--gold); font-weight:600;
}
.pillar-title{font-size:17px; font-weight:700; margin-top:6px;}
.pillar-text{font-size:12.5px; color:#b9b7b0; line-height:1.55; margin-top:8px;}

/* ---------- CURATE (localhost only; admin.js does not run when deployed) ---------- */
.adm-pill{
  position:fixed; bottom:22px; right:24px; z-index:70;
  border:1px solid #3a3a40; border-radius:999px; padding:9px 16px;
  font-size:11px; letter-spacing:0.12em; color:var(--dim); cursor:pointer;
  background:rgba(10,10,12,0.7); backdrop-filter:blur(6px); font-family:'Inter',sans-serif;
}
.adm-pill:hover{color:var(--text); border-color:var(--gold);}
/* hero editor pill sits bottom-left, clear of the Curate pill; its bar rides a
   little higher so the two never overlap */
.adm-pill--hero{left:24px; right:auto;}
.adm-bar--hero{bottom:74px;}
.adm-bar{
  position:fixed; bottom:22px; left:50%; transform:translate(-50%, 80px); z-index:70;
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border:1px solid #3a3a40; border-radius:999px;
  background:rgba(10,10,12,0.88); backdrop-filter:blur(10px);
  transition:transform .3s ease, opacity .3s ease; opacity:0; pointer-events:none;
}
.adm-bar--open{transform:translate(-50%, 0); opacity:1; pointer-events:auto;}
.adm-status{font-size:11.5px; color:var(--dim); letter-spacing:0.04em; padding:0 6px; white-space:nowrap;}
.adm-btn{
  border:1px solid #3a3a40; border-radius:999px; padding:7px 13px; cursor:pointer;
  font-size:11.5px; color:var(--text); background:none; font-family:'Inter',sans-serif;
  white-space:nowrap;
}
.adm-btn:hover:not(:disabled){border-color:var(--gold);}
.adm-btn:disabled{opacity:0.35; cursor:default;}
.adm-btn--danger{color:#ff8d7a; border-color:#5a2c24;}
.adm-btn--danger:hover:not(:disabled){border-color:#ff8d7a;}
.adm-btn--gold{color:var(--gold);}
.curating .chapter__row figure{cursor:grab;}
.curating .chapter__row figure:hover img{filter:brightness(1.15);}
.chapter__row figure.adm-selected{outline:3px solid var(--gold); outline-offset:-3px;}
.chapter__row figure.adm-selected img{filter:brightness(0.45) saturate(0.6);}
.chapter__row figure.adm-dragging{opacity:0.35;}

/* ---------- LIGHTBOX (click a still, it glides to centre stage) ---------- */
.lb-backdrop{
  position:fixed; inset:0; z-index:79;
  background:rgba(5,5,6,0.74); opacity:0;
}
.lb-img{
  position:fixed; z-index:80; margin:0; object-fit:cover; display:block;
  border-radius:8px; box-shadow:0 34px 90px rgba(0,0,0,0.65);
  cursor:zoom-out;
}

@media (max-width:860px){
  /* phone gutter: the reference hangs everything on 5vw at 375 */
  :root{ --gutter:clamp(18px, 5vw, 40px); }
  .pillars-section{padding:10vh 24px 80px;}
  .pillar-grid{grid-template-columns:1fr; gap:24px;}
  .reel-section{padding:4vh 24px 80px;}
  .reel-grid{gap:18px;}
  .reel-grid{grid-template-columns:1fr;}
  .reel-card{aspect-ratio:16/11;}
  .break-section{padding:11vh 24px 9vh;}
  .break-reels{grid-template-columns:1fr; gap:14px;}
  .nav{padding:18px var(--gutter);}
  .nav-sig{height:30px; margin-right:-8px;}
  .nav-name{font-size:16px; white-space:nowrap;}
  .nav-cta{padding:10px 14px; font-size:11.5px; white-space:nowrap;}

  /* ---- hero, measured against the reference at 375px wide: the carousel lands
     at 416px (1.11× the width), the name is Bebas 88px (23.4vw) with a 24px
     eyebrow 32px above it, the whole text block bottom-aligned 32px above the
     strip, and the subject is tucked top-right and dropped back into the dark.
     Mobile keeps its own framing: the desktop hero editor's transform is
     deliberately not applied here. ---- */
  .hero{
    min-height:clamp(416px, 111vw, 640px); align-items:flex-end;
    background:
      radial-gradient(64vw 76vw at 74% 30%, rgba(74,156,224,0.70) 0%, rgba(50,132,198,0.40) 38%, rgba(30,96,152,0.12) 66%, rgba(24,80,130,0) 85%),
      linear-gradient(170deg, rgba(10,15,22,0) 0%, rgba(18,58,92,0.14) 34%, rgba(26,92,146,0.30) 62%, rgba(32,114,172,0.42) 100%),
      #0a0f13;
  }
  .hero-photo{width:64%; opacity:0.62;}
  .hero-photo img{height:82%; transform:translate(-50%, 0) scale(1);}
  .hero-inner{width:100%; padding:0 var(--gutter) 32px;}
  .hero-eyebrow{font-size:clamp(18px, 6.4vw, 24px); margin-bottom:30px; line-height:1.25;}
  .hero-name{font-size:clamp(64px, 23.4vw, 110px); line-height:1;}

  /* carousel cards at the reference's phone size: 85% of the width, 3:2 */
  .strip__card{width:min(85vw, 360px); height:calc(min(85vw, 360px) / 1.5); margin-right:16px;}
  .newsletter{padding:56px var(--gutter);}
  .newsletter__head{font-size:clamp(64px, 17vw, 96px);}
  .newsletter__email, .newsletter__btn{height:52px;}
  .newsletter__btn{flex:1 1 100%;}
  .services{grid-template-columns:1fr; gap:26px; padding:8vh 22px;}
  .services-photo{aspect-ratio:16/10;}
  .stills-head{padding:0 24px 4vh;}
}