/* ============================================================
   SOLID BUILD CO. — Landing Page
   ============================================================ */

:root{
  --ink:#161515;
  --oxblood:#85120F;
  --stone:#BEBBB0;
  --paper:#F5F5F7;
  --black:#0B0B0B;

  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* long, soft settle — used for the services row */
  --ease-soft:cubic-bezier(.25,.9,.25,1);

  --hdr-h:88px;
  --gutter:clamp(20px, 3.4vw, 64px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--black);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:300;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-weight:400}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--oxblood); outline-offset:4px}
/* nav jumps land below the fixed pill, never under it */
section[id]{scroll-margin-top:calc(var(--hdr-h) + 34px)}

/* ============ LOADER ============ */
.loader{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:var(--stone);
  transform:translateY(0);
  transition:transform 1.15s var(--ease-out);
  will-change:transform;
}
.loader__mark{
  width:clamp(150px,15vw,240px);
  height:auto;
  opacity:0;
  transform:scale(.97);
  transition:opacity .9s ease, transform 1.5s var(--ease-out);
}
.loader.is-in .loader__mark{opacity:1; transform:scale(1)}
.loader.is-out{transform:translateY(-100%)}
.loader.is-done{display:none}

/* page held under the loader until reveal */
body.is-loading{overflow:hidden; height:100vh}
#main, .hdr{opacity:0; transition:opacity .6s ease .15s}
body.is-revealed #main, body.is-revealed .hdr{opacity:1}

/* ============ HEADER ============ */
.hdr{
  position:fixed; z-index:100;
  top:clamp(14px,1.7vw,26px);
  left:var(--gutter); right:var(--gutter);
  pointer-events:none;
}
.hdr__pill{
  pointer-events:auto;
  height:var(--hdr-h);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  padding:0 14px 0 22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(100deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 60%, rgba(255,255,255,.09));
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 10px 36px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.18);
  transition:background 1s var(--ease), border-color 1s var(--ease), box-shadow 1s var(--ease),
             color 1s var(--ease), height .5s var(--ease), padding .5s var(--ease);
  color:var(--ink);
}

/* header themes per section */
.hdr[data-theme="dark"] .hdr__pill{
  color:var(--paper);
  border-color:rgba(255,255,255,.10);
  background:linear-gradient(100deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 55%, rgba(255,255,255,.05));
  box-shadow:0 10px 36px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
}
.hdr[data-theme="bronze"] .hdr__pill{
  color:var(--paper);
  border-color:rgba(255,236,210,.13);
  background:linear-gradient(100deg, rgba(255,238,214,.11), rgba(255,238,214,.02) 55%, rgba(255,238,214,.06));
  box-shadow:0 10px 36px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,240,220,.10);
}
.hdr[data-theme="stone"] .hdr__pill{
  color:var(--ink);
  border-color:rgba(255,255,255,.30);
  background:linear-gradient(100deg, rgba(255,255,255,.26), rgba(255,255,255,.08) 60%, rgba(255,255,255,.16));
}

/* the mark carries 26% transparent padding, so the optical gap is
   already generous — no extra gap needed here */
.hdr__brand{display:flex; align-items:center; gap:0; min-width:0; margin-left:-10px}
.hdr__mark{
  width:52px; height:52px; flex:none; object-fit:contain;
  transition:opacity .8s var(--ease), width .5s var(--ease), height .5s var(--ease);
}
.hdr__mark--light{position:absolute; opacity:0}
.hdr[data-theme="dark"] .hdr__mark--dark,
.hdr[data-theme="bronze"] .hdr__mark--dark{opacity:0}
.hdr[data-theme="dark"] .hdr__mark--light,
.hdr[data-theme="bronze"] .hdr__mark--light{opacity:1}
.hdr__word{
  font-family:var(--serif); font-size:21px; font-weight:500;
  letter-spacing:.01em; white-space:nowrap;
  transition:font-size .5s var(--ease);
}

/* ---- thin bar from Services onward ---- */
.hdr:not([data-theme="light"]) .hdr__pill{height:60px; padding:0 10px 0 18px}
.hdr:not([data-theme="light"]) .hdr__mark{width:38px; height:38px}
.hdr:not([data-theme="light"]) .hdr__word{font-size:17px}
.hdr:not([data-theme="light"]) .hdr__link{padding:7px 17px; font-size:15px}
.hdr:not([data-theme="light"]) .hdr__ind{height:32px}
.hdr:not([data-theme="light"]) .cta{height:40px; padding:0 22px; font-size:13px}
/* icon button must keep zero padding, or the 22px above collapses the svg to 0 */
.hdr:not([data-theme="light"]) .cta--icon{width:40px; padding:0}
.hdr:not([data-theme="light"]) .cta--icon svg{width:18px; height:18px}

.hdr__nav{position:relative; display:flex; align-items:center; gap:6px}
.hdr__ind{
  position:absolute; top:50%; left:0;
  height:44px; width:0; transform:translateY(-50%);
  border-radius:999px;
  background:rgba(255,255,255,.44);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .62s var(--ease-out), width .62s var(--ease-out), opacity .4s ease, background .8s var(--ease);
  opacity:0;
}
.hdr[data-theme="dark"] .hdr__ind,
.hdr[data-theme="bronze"] .hdr__ind{background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.26)}
.hdr__link{
  position:relative; z-index:1;
  padding:11px 22px; border-radius:999px;
  font-size:17px; font-weight:400; white-space:nowrap;
  opacity:.72; transition:opacity .35s ease;
}
.hdr__link:hover{opacity:1}
.hdr__link.is-active{opacity:1}

.hdr__action{display:flex; justify-content:flex-end}
.cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:56px; padding:0 30px; border-radius:999px;
  background:var(--ink); color:var(--paper);
  font-size:15px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  cursor:pointer; border:0; font-family:var(--sans);
  transition:background .4s var(--ease), transform .4s var(--ease), opacity .4s ease;
  white-space:nowrap;
}
.cta:hover{background:var(--oxblood); transform:translateY(-1px)}
.cta--icon{width:56px; padding:0}
.cta--icon svg{width:22px; height:22px; flex:none}
.cta--full,.cta--icon,.cta--top{display:none}
.hdr[data-action="full"] .cta--full{display:inline-flex}
.hdr[data-action="icon"] .cta--icon{display:inline-flex}
.hdr[data-action="top"]  .cta--top{display:inline-flex}
.hdr[data-theme="dark"] .cta,
.hdr[data-theme="bronze"] .cta{background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.24)}
.hdr[data-theme="dark"] .cta:hover,
.hdr[data-theme="bronze"] .cta:hover{background:var(--oxblood); border-color:var(--oxblood)}

/* ============ 1 · THE WALK ============ */
.walk{position:relative; height:900vh}
.walk__sticky{
  position:sticky; top:0;
  height:100vh; width:100%;
  overflow:hidden; background:#0d0f12;
}
.walk__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.walk__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.30), rgba(0,0,0,0) 22%),
    linear-gradient(to top, rgba(0,0,0,.34), rgba(0,0,0,0) 34%);
}

/* caption cards */
.walk__caps{
  position:absolute; left:0; right:0;
  bottom:clamp(84px, 12vh, 150px);
  pointer-events:none;
}
.cap{
  position:absolute; left:0; top:0;
  display:block; width:max-content; max-width:min(76vw, 1180px);
  padding:18px clamp(56px, 8vw, 170px) 18px var(--gutter);
  font-family:var(--sans); font-size:23px; font-weight:500; line-height:1.3;
  color:var(--paper);
  text-shadow:0 2px 22px rgba(0,0,0,.34);
  background:linear-gradient(to right, rgba(11,11,11,.78) 0%, rgba(11,11,11,.62) 46%, rgba(11,11,11,0) 100%);
  opacity:0; transform:translateY(14px);
  transition:opacity .62s var(--ease), transform .62s var(--ease-out);
  will-change:opacity, transform;
}
.cap.is-on{opacity:1; transform:translateY(0)}

.scrollcue{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
  width:1px; height:56px; overflow:hidden;
  transition:opacity .5s ease;
}
.scrollcue__line{
  display:block; width:1px; height:100%;
  background:linear-gradient(to bottom, rgba(245,245,247,0), rgba(245,245,247,.9));
  animation:cue 2.1s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
.scrollcue.is-hidden{opacity:0}

/* ============ 2 · SERVICES ============ */
.svc{
  background:var(--black);
  min-height:100vh;
  display:flex; align-items:center;
  padding:clamp(96px,11vh,150px) var(--gutter);
}
.svc__wrap{width:100%; max-width:2200px; margin:0 auto}
.svc__head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:20px;
}
.svc__hash{font-size:17px; font-weight:600; color:var(--paper)}
.svc__eyebrow{
  font-size:15px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
}
.svc__list{border-top:1px solid rgba(245,245,247,.4)}
.svc__row{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;   /* auto column is page-centred */
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:clamp(16px,2vw,40px);
  padding:18px 0;
  border-bottom:1px solid rgba(245,245,247,.4);
  cursor:pointer;
  transition:padding .78s var(--ease-soft), background .78s var(--ease-soft);
}
.svc__num{
  grid-column:1; grid-row:1; justify-self:start;
  font-size:14px; font-weight:400; color:rgba(245,245,247,.55);
  transition:color .6s var(--ease-soft);
}
.svc__name{
  grid-column:2; grid-row:1;
  font-family:var(--serif);
  font-size:clamp(26px, 2.5vw, 42px);
  font-weight:400; line-height:1.06;
  text-align:center; white-space:nowrap;
  transition:transform .78s var(--ease-soft), color .6s var(--ease-soft);
  will-change:transform;
}
/* label and description are one type block — identical size, no gap between lines */
.svc__right{
  grid-column:3; grid-row:1; justify-self:end;
  text-align:right; max-width:46ch;
  /* 0fr -> 1fr animates to the description's true height at any width,
     so no fixed cap can clip longer copy */
  display:grid; grid-template-rows:auto 0fr;
  transition:grid-template-rows .78s var(--ease-soft), transform .78s var(--ease-soft);
  will-change:transform;
}
.svc__label{
  display:block;
  font-size:clamp(13px,1vw,16px); font-weight:400; line-height:1.5;
  color:var(--paper);
}
.svc__desc{
  display:block;
  font-size:clamp(13px,1vw,16px); font-weight:300; line-height:1.5;
  color:rgba(245,245,247,.86);
  opacity:0; overflow:hidden; min-height:0; margin:0;
  transform:translateY(-4px);
  transition:opacity .58s var(--ease-soft) .08s,
             transform .78s var(--ease-soft) .08s;
}

/* hover / focus state — small movements, long settle */
.svc__row:hover, .svc__row:focus-visible, .svc__row.is-open{
  padding:30px 0;
  background:linear-gradient(to right, rgba(245,245,247,.028), rgba(245,245,247,0) 72%);
}
.svc__row:hover .svc__num,
.svc__row:focus-visible .svc__num,
.svc__row.is-open .svc__num{color:rgba(245,245,247,.9)}
.svc__row:hover .svc__name,
.svc__row:focus-visible .svc__name,
.svc__row.is-open .svc__name{transform:translateX(-13%)}
.svc__row:hover .svc__right,
.svc__row:focus-visible .svc__right,
.svc__row.is-open .svc__right{transform:translateX(-18px); grid-template-rows:auto 1fr}
.svc__row:hover .svc__desc,
.svc__row:focus-visible .svc__desc,
.svc__row.is-open .svc__desc{opacity:1; transform:translateY(0)}

/* neighbouring rows ease back rather than snapping */
.svc__list:hover .svc__row:not(:hover) .svc__name{opacity:.62}
.svc__list .svc__row .svc__name{transition:transform .78s var(--ease-soft), opacity .6s var(--ease-soft)}

/* ============ 3 · EXPERIENCE ============ */
.exp{
  min-height:100vh;
  display:flex; align-items:center;
  padding:clamp(96px,11vh,150px) var(--gutter);
  background:
    radial-gradient(120% 90% at 78% 8%, #6b512f 0%, #4a3a24 26%, #2a2118 55%, #171310 100%),
    var(--black);
}
.exp__wrap{width:100%; max-width:2200px; margin:0 auto}
.exp__title{
  font-family:var(--serif);
  font-size:clamp(28px,2.6vw,44px);
  font-weight:400; line-height:1.2;
  margin-bottom:clamp(20px,2.2vh,34px);
  color:#F1E9DD;
}
.exp__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(0,1fr);
  gap:clamp(12px,1.1vw,20px);
  height:min(62vh, 720px);
}
.exp__card--a{grid-column:1 / 9;  grid-row:1 / 2}
.exp__card--b{grid-column:1 / 4;  grid-row:2 / 3}
.exp__card--c{grid-column:4 / 9;  grid-row:2 / 3}
.exp__card--d{grid-column:9 / 13; grid-row:1 / 3}

.exp__card{
  position:relative; margin:0; overflow:hidden;
  border-radius:22px;
  background:#1a1512;
  cursor:pointer;
  box-shadow:0 18px 50px rgba(0,0,0,.4);
}
.exp__card img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1); filter:blur(0px) brightness(1);
  transition:transform .85s var(--ease-out), filter .7s var(--ease);
  will-change:transform, filter;
}
.exp__card:hover img,
.exp__card:focus-visible img{
  transform:scale(1.10);
  filter:blur(9px) brightness(.52);
}
.exp__meta{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:6px;
  padding:clamp(20px,2vw,36px);
  opacity:0; transform:translateY(12px);
  transition:opacity .55s var(--ease) .06s, transform .65s var(--ease-out) .06s;
}
.exp__card:hover .exp__meta,
.exp__card:focus-visible .exp__meta{opacity:1; transform:translateY(0)}
.exp__kicker{
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--stone);
}
.exp__name{
  font-family:var(--serif); font-size:clamp(24px,2vw,34px);
  font-weight:400; line-height:1.1; color:#F7F1E8;
}
.exp__note{
  font-size:clamp(13px,.95vw,16px); font-weight:300; line-height:1.5;
  color:rgba(247,241,232,.78); max-width:38ch;
}

/* ============ 4 · CONTACT ============ */
.ct{background:var(--black)}
.ct__top{
  position:relative;
  min-height:56vh;
  display:flex; align-items:center;
  /* top padding clears the fixed header pill */
  padding:calc(var(--hdr-h) + clamp(60px,8vh,110px)) var(--gutter) clamp(44px,6vh,72px);
  background:var(--stone);
  color:var(--ink);
  overflow:hidden;
}
.ct__top::after{
  content:""; position:absolute; right:0; top:0; bottom:0; width:44%;
  background:linear-gradient(105deg, rgba(190,187,176,1) 0%, rgba(190,187,176,.55) 22%, rgba(190,187,176,0) 62%),
             url("assets/exp-1.jpg?v=2") center/cover no-repeat;
  opacity:.5; mix-blend-mode:luminosity;
  pointer-events:none;
}
.ct__inner{position:relative; z-index:1; width:100%; max-width:2200px; margin:0 auto}
.ct__rule{display:flex; align-items:center; gap:0; width:min(46%,520px); margin-bottom:20px}
.ct__line{flex:1; height:1px; background:var(--oxblood)}
.ct__dia{
  width:10px; height:10px; margin:0 8px; flex:none;
  background:var(--oxblood);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
}
.ct__title{
  font-family:var(--serif);
  font-size:clamp(32px,3.7vw,62px);
  font-weight:400; line-height:1.04; letter-spacing:-.01em;
}
.ct__sub{
  margin-top:10px;
  font-size:clamp(12px,1.05vw,17px); font-weight:400;
  letter-spacing:.03em; text-transform:uppercase;
}
.ct__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:26px; flex-wrap:wrap;
  margin-top:clamp(30px,4.5vh,62px);
}
.ct__ig{display:flex; align-items:center; gap:13px; font-size:clamp(15px,1.3vw,22px); font-weight:400}
.ct__igmark{
  display:grid; place-items:center; width:42px; height:42px; flex:none;
  border-radius:50%; background:var(--paper); color:var(--oxblood);
  transition:transform .45s var(--ease), background .45s var(--ease)
}
.ct__igmark svg{width:23px; height:23px}
.ct__ig:hover .ct__igmark{transform:scale(1.06)}
.ct__wa{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:12px;
  padding:17px 34px;
  background:var(--oxblood); color:var(--paper);
  font-size:clamp(12px,.95vw,15px); font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease);
}
.ct__wa::before{
  content:""; position:absolute; inset:0;
  background:var(--ink);
  transform:translateX(-101%);
  transition:transform .62s var(--ease-out);
}
.ct__wa:hover::before{transform:translateX(0)}
.ct__wa:hover{box-shadow:0 18px 44px rgba(133,18,15,.34)}
.ct__wa span,.ct__wa svg{position:relative; z-index:1}
.ct__arrow{width:18px; height:18px; transition:transform .5s var(--ease-out)}
.ct__wa:hover .ct__arrow{transform:translateX(5px)}

/* footer */
.ft{background:var(--black); padding:clamp(42px,5.5vh,72px) var(--gutter) 28px}
.ft__inner{
  max-width:2200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;
}
/* align-items must not be the default `stretch`, or the mark is forced
   to the column width and distorts */
.ft__brand{display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.ft__lockup{
  --lockup:clamp(150px,14vw,220px);
  width:auto;
  height:var(--lockup);
  object-fit:contain;
  /* the artwork carries 25% transparent padding; pull it back to the gutter */
  margin-left:calc(var(--lockup) * -0.25);
}
.ft__contact{justify-self:end; min-width:min(100%,460px)}
.ft__h{
  font-size:clamp(16px,1.25vw,21px); font-weight:600;
  letter-spacing:.01em; margin-bottom:14px;
}
.ft__dl{display:grid; grid-template-columns:auto 1fr; gap:7px 26px; margin:0}
.ft__dl dt{
  font-size:clamp(10px,.78vw,12px); font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
}
.ft__dl dd{
  margin:0; font-size:clamp(11px,.85vw,14px); font-weight:300;
  letter-spacing:.03em; text-transform:uppercase; color:rgba(245,245,247,.86);
}
.ft__dl dd a{transition:color .3s ease}
.ft__dl dd a:hover{color:var(--oxblood)}
.ft__areas{
  margin-top:20px; font-size:clamp(12px,.9vw,15px);
  letter-spacing:.09em; text-transform:uppercase; color:rgba(245,245,247,.6);
}
.ft__base{
  max-width:2200px; margin:clamp(48px,7vh,96px) auto 0;
  padding-top:22px; border-top:1px solid rgba(245,245,247,.12);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:clamp(12px,.95vw,16px); letter-spacing:.06em; text-transform:uppercase;
  color:rgba(245,245,247,.7);
}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  :root{--hdr-h:70px}
  .hdr__word{display:none}
  .hdr__link{padding:9px 15px; font-size:15px}
  .hdr__ind{height:38px}
  .cta{height:46px; padding:0 20px; font-size:13px}
  .cta--icon{width:46px}
  .svc__row{grid-template-columns:52px 1fr; row-gap:6px}
  .svc__name{grid-column:2; text-align:left; font-size:clamp(24px,4.4vw,36px); white-space:normal}
  .svc__right{grid-column:2; grid-row:2; justify-self:start; text-align:left}
  .svc__row:hover .svc__name,.svc__row.is-open .svc__name,
  .svc__row:hover .svc__right,.svc__row.is-open .svc__right{transform:none}
  .exp__grid{height:auto; grid-template-columns:repeat(6,1fr)}
  .exp__card{aspect-ratio:16/10}
  .exp__card--a{grid-column:1/7; grid-row:auto}
  .exp__card--b{grid-column:1/4; grid-row:auto; aspect-ratio:3/4}
  .exp__card--c{grid-column:4/7; grid-row:auto; aspect-ratio:3/4}
  .exp__card--d{grid-column:1/7; grid-row:auto; aspect-ratio:16/10}
  .exp__meta{opacity:1; transform:none; background:linear-gradient(to top, rgba(11,11,11,.82), rgba(11,11,11,0) 62%)}
  .exp__card img{filter:none}
  .ft__inner{grid-template-columns:1fr}
  .ft__contact{justify-self:start}
  .ct__top::after{width:100%; opacity:.22}
}

@media (max-width:720px){
  .walk{height:760vh}
  .cap{
    font-size:19px;
    padding:18px var(--gutter) 18px var(--gutter);
    max-width:92vw;
    background:linear-gradient(to right, rgba(11,11,11,.82) 0%, rgba(11,11,11,.66) 58%, rgba(11,11,11,0) 100%);
  }
  .walk__caps{bottom:96px}
  .hdr__nav{gap:0}
  .hdr__link{padding:8px 10px; font-size:13px}
  .ct__row{flex-direction:column; align-items:flex-start}
  .ct__wa{width:100%; justify-content:center; padding:20px 28px}
  .ft__base{flex-direction:column; gap:8px}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .walk{height:auto}
  .walk__sticky{position:relative; height:auto; aspect-ratio:16/9}
  .walk__video{position:relative; height:auto}
  .cap{position:relative; opacity:1; transform:none; margin:8px 0}
  .walk__caps{position:relative; bottom:auto; background:var(--black); padding:24px 0}
  .scrollcue{display:none}
}