/* ── RESET ────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:#000;color:#fff;overflow-x:clip}
a{text-decoration:none;color:inherit}
button{font-family:'Inter',sans-serif;cursor:pointer;border:none;background:none}
img{display:block;max-width:100%}

/* ── VARIABLES ────────────────────────────── */
:root{
  --w60:rgba(255,255,255,.6);
  --w30:rgba(255,255,255,.3);
  --w20:rgba(255,255,255,.2);
  --w10:rgba(255,255,255,.1);
  --w08:rgba(255,255,255,.08);
  --w05:rgba(255,255,255,.05);
}

/* ── NAV ──────────────────────────────────── */
/* Figma: centered container 1000px wide, logo left, links right, top:19px */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:19px 0;
  background:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,transparent 100%);
}
.nav-wrap{
  width:min(1280px,90vw);margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
}
/* Logo: multi-line, small caps */
.logo{
  font-size:11px;font-weight:500;letter-spacing:1.8px;line-height:1.45;
  text-transform:uppercase;color:rgba(255,255,255,.9);
  display:flex;flex-direction:column;
}
.logo img{height: 55px;}
.logo .mark{font-size:9px;letter-spacing:1px;opacity:.7}
.nav-links{display:flex;gap:48px;list-style:none}
.nav-links a{
  font-size:16px;font-weight:300;letter-spacing:3.5px;text-transform:uppercase;
  color:var(--w60);transition:color .3s;
}
.nav-links a:hover{color:#fff}

/* hamburger */
.ham{display:none;flex-direction:column;gap:5px;padding:4px;background:none;border:none;cursor:pointer}
.ham span{display:block;width:24px;height:1.5px;background:rgba(255,255,255,.8);transition:all .3s}
.ham.open span:nth-child(1){transform:rotate(45deg) translate(4.7px,4.7px)}
.ham.open span:nth-child(2){opacity:0}
.ham.open span:nth-child(3){transform:rotate(-45deg) translate(4.7px,-4.7px)}

/* mobile drawer */
.mob-menu{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.97);z-index:199;
  flex-direction:column;align-items:center;justify-content:center;gap:40px;
  transform:translateY(-100%);transition:transform .4s cubic-bezier(.77,0,.175,1);
}
.mob-menu.open{transform:translateY(0)}
.mob-menu a{font-size:28px;font-weight:300;letter-spacing:6px;text-transform:uppercase;color:rgba(255,255,255,.8);transition:color .3s}
.mob-menu a:hover{color:#fff}


/* DESKTOP DROPDOWN */
.dropdown{
  position: relative;
}

.dropdown-menu{
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  /*background: #000;*/
  padding: 12px 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.3s ease;
  z-index: 999;
  /*box-shadow: 0 10px 30px rgba(0,0,0,0.08);*/
  color:#fff;
}

.dropdown-menu li{
  width: 100%;
}

.dropdown-menu a{
  display: block;
  padding: 10px 2px;
  text-decoration: none;
}

.dropdown:hover .dropdown-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Mobile dropdown hidden by default */
.mob-dropdown-content{
  display: none;
  padding-left: 15px;
}

/* show when active */
.mob-dropdown-content.show{
  display: block;
}

.mob-dropdown-content a{
  display: block;
  padding: 10px 0;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
}



/* ── HERO ─────────────────────────────────── */
/* 
  Figma: 1920×1073px. Full viewport.
  Big ghosted text "CAPTURING MOMENTS THAT MATTER" at ~100px bold weight:0.1 opacity, positioned left ~92px bottom ~336px
  Buttons: VIEW WORK + CONTACT, pill shape, bottom ~500px left 92px
  Scroll indicator bottom-center. Watch showreel bottom-right.
*/
#hero{
  position:relative;width:100%;height:100svh;min-height:640px;
  background:#1a1a1a;overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  transform:scale(1.04);
  animation:heroZoom 8s ease-out forwards;
}
.hero-bg video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/*.hero-bg{
  position:absolute;inset:0;
  background:url('../images/video.png') center/cover no-repeat;
  transform:scale(1.04);animation:heroZoom 8s ease-out forwards;
}*/

@keyframes heroZoom{to{transform:scale(1)}}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45)}

/* Hero content block — left aligned, bottom positioned */
.hero-text{
  position:absolute;
  left:clamp(24px,4.8vw,92px);
  bottom:clamp(120px,22vh,336px);
  width:min(800px,calc(100vw - 48px));
}
/* The big ghosted "CAPTURING MOMENTS" text */
.hero-ghost{
  font-size:clamp(50px,6.8vw,100px);font-weight:700;line-height:1.1;
  letter-spacing:5px;text-transform:uppercase;
  color:rgba(255,255,255,.4);
  text-shadow:0 2px 8px rgba(0,0,0,.4);
  filter:blur(.5px);
  margin-bottom:0;
  /* stagger in */
  opacity:0;transform:translateY(28px);
  transition:opacity .9s .05s ease,transform .9s .05s ease;
}
/* "that matter" second ghost line */
.hero-ghost2{
  font-size:clamp(50px,6.8vw,100px);font-weight:700;line-height:1.1;
  letter-spacing:5px;text-transform:uppercase;
  color:rgba(255,255,255,.4);
  text-shadow:0 2px 8px rgba(0,0,0,.4);
  filter:blur(.5px);
  margin-bottom:clamp(32px,5vh,76px);
  opacity:0;transform:translateY(28px);
  transition:opacity .9s .2s ease,transform .9s .2s ease;
}
.hero-btns{
  display:flex;gap:20px;
  /*flex-wrap:wrap;*/
  opacity:0;transform:translateY(28px);
  transition:opacity .9s .35s ease,transform .9s .35s ease;
  position: absolute;
  top: 50%;
  left: 58.5%;
}
@media (min-width: 320px) and (max-width: 480px){
  .hero-btns{
    transform:translate(-50%, -50%);
    gap:20px;
    justify-content:center;
    left: 10% !important;
  }
  
  .hero-bg video{
    height:26%;
  object-fit:contain;  
  }
  
  #hero{
    height:auto;
    min-height:0;
  }
  
  .hero-bg{
      position: relative;
  }
}


.hero-loaded .hero-ghost,
.hero-loaded .hero-ghost2,
.hero-loaded .hero-btns{opacity:1;transform:translateY(0)}

/* Pill button */
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  height:58px;padding:0 32px;
  border-radius:999px;
  font-size:14px;font-weight:300;letter-spacing:2.8px;text-transform:uppercase;color:#fff;
  transition:background .3s,border-color .3s;white-space:nowrap;
}
.pill-border{border:1px solid var(--w20);background:rgba(0,0,0,.004)}
.pill-border:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.pill-border2{border:1px solid var(--w30);background:rgba(0,0,0,.004)}
.pill-border2:hover{border-color:rgba(255,255,255,.6)}

/* Scroll hint */
.scroll-hint{
  position:absolute;bottom:0px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:.8;
}
@media (max-width: 768px){
  .scroll-hint{
    /*bottom:5px;*/
    display:none;
  }
}
.scroll-hint span{font-size:10px;font-weight:400;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.65)}
.scroll-line{width:1px;height:60px;background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,transparent 100%);animation:scrollPulse 2.2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:1}50%{opacity:.25}}

/* Watch showreel */
.showreel{
  position:absolute;bottom:50px;right:clamp(24px,4.8vw,92px);
  display:flex;align-items:center;gap:12px;
  opacity:.8;transition:opacity .3s;
}
.showreel:hover{opacity:1}
.play-ring{
  width:40px;height:40px;border:1px solid var(--w30);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:border-color .3s;
}
.showreel:hover .play-ring{border-color:#fff}
.play-ring svg{width:11px;height:13px;fill:rgba(255,255,255,.7);margin-left:2px}
.showreel-txt{font-size:12px;font-weight:300;letter-spacing:3px;text-transform:uppercase;color:var(--w60)}

/* ── ABOUT – WE DON'T JUST CAPTURE VISUALS ── */
/*
  Figma: 1920×1102px, black bg.
  Left side: giant bold text lines. Center: portrait photo (534×800px) absolute.
  Right of photo: body text at 24px weight:200
  Lines: "WE DON'T" left-aligned, "JUST CAPTURE" indented, "VISUALS" right-aligned
  Photo overlaps lines, positioned ~center-left
*/
#about{
  background:#000;position:relative;overflow:hidden;
  padding:clamp(80px,9.3vw,187px) 0 clamp(60px,7vw,120px);
  display:flex;
  justify-content:center;
  align-items:center;
  /*min-height:100vh;*/
}

/* The portrait photo sits left-of-center, overlapping the text lines */
.about-photo{
  position:absolute;
  left:calc(50% - 310px);
  top:80%;transform:translateY(-50%);
  width:clamp(200px,27.8vw,534px);
  height:clamp(300px,41.7vw,800px);
  background:url('../images/original-1.png') center/cover no-repeat;
  pointer-events:none;z-index:1;
}
.about-lines{
  position:relative;z-index:1;
  padding:0 clamp(16px,4.8vw,92px);
}
/* Font: Inter 135px weight:400, line-height:163px */
.aline{
  display:block;
  font-size:clamp(44px,9.3vw,100px);font-weight:400;line-height:1.21;
  color:#fff;text-shadow:0 4px 4px rgba(0,0,0,.25);
}
.aline-2{padding-left:clamp(16px,8vw,92px)} /* JUST CAPTURE is indented right */
.aline-3{text-align:right;right: 7%;position: inherit;}                   /* VISUALS is right-aligned */

/* Mobile-only inline photo (shown ≤1024px, hidden above) */
.about-photo-mob{
  display:none;
  width:100%;
  max-height:60vw;
  object-fit:cover;
  margin:clamp(16px,3vw,32px) 0;
}

/* Body paragraph — right side, below VISUALS */
.about-body{
  z-index:2;
  /*max-width:700px;*/
  width:80%;
  margin:0;
  padding:0;
  text-align:center;
  font-size:clamp(13px,1.25vw,24px);
  font-weight:200;
  line-height:1.5;
  color:#fff;
  text-shadow:0 4px 4px rgba(0,0,0,.25);
  font-style: italic;
}

/* ── SERVICES – WHAT WE DO ────────────────── */
/*
  Figma: 1920×1872px, black bg.
  Heading "WHAT WE DO" at 100px weight:400, left 92px, top 159px
  Then 3 full-width image strips, each 518px tall:
    - Strip starts at top:320, 843, 1366
    - Each has label pill bottom-left and "CLICK HERE→" bottom-right
    - Gradient overlay bottom to top
*/
#services{background:#000;padding-top:clamp(60px,8.3vw,159px);padding-bottom:0}
.sec-head{
  font-size:clamp(36px,5.2vw,100px);font-weight:400;line-height:1.21;
  color:#fff;text-shadow:0 4px 4px rgba(0,0,0,.25);
  padding:0 clamp(24px,4.8vw,92px);
  margin-bottom:clamp(20px,2.2vw,42px);
}

.svc-strip{ 
  position:sticky;top:0;
  width:100%;
  /*height:clamp(100vh,27vw,600px);*/
  overflow:hidden;background:#111;
  aspect-ratio:16/9;   
  /*max-height:600px*/;
}
/* each strip slides over the one before it */
#services .svc-strip:nth-child(2){z-index:11 /*max-height: 700px;*/}
#services .svc-strip:nth-child(3){z-index:12}
#services .svc-strip:nth-child(4){z-index:13}
/* inset shadow at top edge gives the physical stacking feel */
.svc-strip+.svc-strip::before{
  content:'';position:absolute;inset:0 0 auto 0;
  height:24px;
  background:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,transparent 100%);
  z-index:10;pointer-events:none;
}
.svc-bg{
  position:absolute;left:100px;right:100px;/*top:-15%*/;
  /*height:130%;*/
  background-size:cover;background-position:center;
  transform:translateY(var(--py,0%));
  will-change:transform;
}

.svc-bg video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.svc-strip:last-child{
  position:relative;
}

.svc-strip:hover .svc-bg{filter:brightness(1.08)}
.svc-grad{
  position:absolute;inset:0;
  /*background:linear-gradient(0deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 100%);*/
}
/* label pill — left */
.svc-label{
  position:absolute;bottom:clamp(16px,20%,250px);left:clamp(16px,8.8vw,130px);
  display:inline-flex;align-items:center;
  height:clamp(44px,3.6vw,58px);
  padding:0 clamp(14px,2.8vw,53px);
  border-radius:999px;
  overflow:hidden;
  /* apple liquid glass */
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 4px 16px rgba(0,0,0,.35);
  font-size:clamp(13px,1.67vw,32px);font-weight:400;letter-spacing:2.8px;
  text-transform:uppercase;color:#fff;white-space:nowrap;
  transition:background .35s,box-shadow .35s;
}
/* static top-arc gloss — always visible */
.svc-label::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.06) 50%,transparent 100%);
  border-radius:inherit;
  pointer-events:none;
}
/* diagonal shine sweep — triggers on hover */
.svc-label::after{
  content:'';
  position:absolute;top:0;left:-110%;
  width:65%;height:100%;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.65) 50%,transparent 80%);
  mix-blend-mode:screen;
  transform:skewX(-15deg);
  transition:left .55s ease;
  pointer-events:none;
}
.svc-label:hover{
  background:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 6px 24px rgba(0,0,0,.4);
}
.svc-label:hover::after{left:140%}
/* click here — right */
.svc-cta{
  position:absolute;bottom:clamp(16px,20%,250px);right:clamp(16px,8.8vw,130px);
  display:inline-flex;align-items:center;
  height:clamp(44px,3vw,58px);
  padding:0 clamp(14px,2.2vw,42px);
  border:1px solid var(--w20);border-radius:999px;
  background:rgba(0,0,0,.004);
  /* Figma: font-size:16px weight:300 letter-spacing:2.8px */
  font-size:clamp(10px,0.83vw,16px);font-weight:300;letter-spacing:2.8px;
  text-transform:uppercase;color:#fff;white-space:nowrap;
  transition:border-color .3s;
}
.svc-cta:hover{border-color:rgba(255,255,255,.5)}

@media(max-width:991px){ .svc-bg{
    
   left:0;right:0px;top:0; 
}
}

/* ── HOW WE DO IT ─────────────────────────── */
/*
  Figma: 1920×1090px black.
  Heading "HOW WE DO IT" 100px, left 92px.
  3 cards side-by-side: each 680×600px with 10px border-radius.
  Cards positioned: left:-80 | 620 | 1320 (they slightly overflow)
  Each card has frosted glass label top-center rotated -2.7deg
  Below cards: description text per column
*/
#technical{background:#000;padding:clamp(60px,8vw,120px) 0 clamp(60px,8vw,120px)}
.how-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(8px,1vw,20px);
  padding:0 clamp(8px,2.1vw,40px);
  margin-top:clamp(24px,3.6vw,68px);
}
.how-card{
  position:relative;
  border-radius:10px;overflow:hidden;background:#222;
  box-shadow:-2px 10px 16.2px rgba(0,0,0,.43);
  display:flex;flex-direction:column;
}
.how-img{
  width:100%;aspect-ratio:68/60;/* 680×600 */
  background-size:cover;background-position:center;
  transition:transform .6s ease;flex-shrink:0;
  position:relative;
}
.how-card:hover .how-img{transform:scale(1.04)}
/* Frosted label — top of image, rotated, centered */
.how-label{
  position:absolute;top:24px;left:50%;
  transform:translateX(-50%) rotate(-2.7deg);
  border-radius:10px;overflow:hidden;
  padding:clamp(10px,1.5vw,20px) clamp(14px,2.5vw,32px);
  width:max-content;max-width:86%;text-align:center;
  font-size:clamp(13px,2.1vw,40px);font-weight:400;line-height:1.2;
  color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5);
  /* glass */
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 24px rgba(0,0,0,.3);
  pointer-events:none;
}
/* top-arc gloss */
.how-label::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.05) 55%,transparent 100%);
  border-radius:inherit;
  pointer-events:none;
}
/* Description below each card */
.how-desc{
  padding:clamp(16px,2.5vw,40px) clamp(16px,3vw,57px);
  font-size:clamp(10px,1.25vw,24px);font-weight:200;line-height:1.21;
  text-align:center;color:#fff;text-shadow:0 4px 4px rgba(0,0,0,.25);
}

/* ── WE BELIEVE BREAKER ───────────────────── */
/*
  Figma: 1920×1113px, pure black bg.
  Center: stacked photos (Group 4, 510×592px) positioned top:135px, centered.
  Text bottom: "WE BELIEVE" left ~202px, "EACH FRAME" right aligned ~750px, "HOLDS WEIGHT" center.
  Font: Inter 135px weight:300.
*/
#breaker{
  background:#000;position:relative;overflow:hidden;
  min-height:clamp(300px,58vw,1113px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(28px,4.2vw,80px);
}
@media (max-width: 768px){
  #breaker{
    margin-top: 30px;
  }
}

/* Stacked photo group — centered, top portion */
.stacked-wrap{
  position:absolute;
  left:50%;top:clamp(16px,7vw,135px);
  width:clamp(120px,26.6vw,510px);
  height:clamp(160px,30.8vw,592px);
  pointer-events:none;
  animation:stackWrap 9s ease-in-out infinite;
}
/* whole stack bobs up and down as one unit */
@keyframes stackWrap{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%    {transform:translateX(-50%) translateY(-22px)}
}

.stk{
  position:absolute;inset:0;
  border-radius:3px;
  background-size:cover;background-position:center;
  box-shadow:0 16px 40px rgba(0,0,0,.75),0 4px 10px rgba(0,0,0,.5);
  will-change:transform;
}

/* ── individual card drift keyframes ── */
@keyframes stk1{
  0%,100%{transform:rotate(18.57deg) translate(0,0)}
  35%    {transform:rotate(23deg) translate(7px,-10px)}
  70%    {transform:rotate(14deg) translate(-5px,5px)}
}
@keyframes stk2{
  0%,100%{transform:rotate(13.91deg) translate(0,0)}
  40%    {transform:rotate(18deg) translate(-6px,-14px)}
  75%    {transform:rotate(10deg) translate(4px,4px)}
}
@keyframes stk3{
  0%,100%{transform:rotate(10.52deg) translate(0,0) scale(1)}
  50%    {transform:rotate(7deg) translate(-4px,-18px) scale(1.04)}
}
@keyframes stk4{
  0%,100%{transform:rotate(5.93deg) translate(0,0)}
  30%    {transform:rotate(10deg) translate(6px,-12px)}
  65%    {transform:rotate(2deg) translate(-7px,-5px)}
}
/* top card — most expressive, fans up and tilts */
@keyframes stk5{
  0%,100%{transform:rotate(0deg) translate(0,0) scale(1)}
  28%    {transform:rotate(-5deg) translate(-10px,-24px) scale(1.06)}
  58%    {transform:rotate(3.5deg) translate(7px,-14px) scale(1.02)}
}

.stk:nth-child(1){animation:stk1 6.4s ease-in-out infinite}
.stk:nth-child(2){animation:stk2 5.8s ease-in-out infinite .7s}
.stk:nth-child(3){animation:stk3 7.2s ease-in-out infinite 1.4s}
.stk:nth-child(4){animation:stk4 5.5s ease-in-out infinite .4s}
.stk:nth-child(5){animation:stk5 6.8s ease-in-out infinite 1.0s}

/* keep background images */
.stk:nth-child(1){background-image:url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=500&q=80')}
.stk:nth-child(2){background-image:url('https://images.unsplash.com/photo-1476224203421-9ac39bcb3327?w=500&q=80')}
.stk:nth-child(3){background-image:url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=500&q=80')}
.stk:nth-child(4){background-image:url('https://images.unsplash.com/photo-1467003909585-2f8a72700288?w=500&q=80')}
.stk:nth-child(5){background-image:url('../images/rectangle-19.png')}

/* Three large text lines */
.breaker-lines{position:relative;z-index:1;padding:0 clamp(16px,10.5vw,202px)}
.bl{
  display:block;
  font-size:clamp(28px,7.03vw,135px);font-weight:300;line-height:1.21;
  color:#fff;text-shadow:0 7px 4px rgba(131,131,131,.25);
}
/* "EACH FRAME" is offset right in the design */
.bl:nth-child(2){padding-left:clamp(0px,20vw,400px)}
/* "HOLDS WEIGHT" centered */
.bl:nth-child(3){text-align:center}

/* ── FEATURED WORKS ───────────────────────── */
/*
  Figma: 1920×947px. Full-bleed image bg, dark gradient top+bottom.
  "FEATURED WORKS" text centered top, letter-spacing:7.2px 40px.
  "01 / 05" top-left.
  Dots right side vertical.
  Bottom bar: frosted glass pill with tags left, work title+desc right.
*/
#featured{
  position:relative;background:#000;
  height:clamp(480px,49.3vw,947px);overflow:hidden;
}
.fw-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:opacity .8s ease;
}
.fw-grad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.8) 100%);
  z-index:1;pointer-events:none;
}
/* "FEATURED WORKS" title */
.fw-title{
  position:absolute;top:36px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:clamp(16px,2.08vw,40px);font-weight:400;
  letter-spacing:7.2px;text-transform:uppercase;color:#fff;white-space:nowrap;
}
/* 01/05 counter */
.fw-counter{
  position:absolute;top:32px;left:32px;z-index:2;
  font-size:16px;font-weight:400;color:#fff;line-height:1.25;
}
/* Side dots */
.fw-dots{
  position:absolute;right:clamp(14px,4.2vw,80px);top:50%;transform:translateY(-50%);
  z-index:2;display:flex;flex-direction:column;gap:20px;
}
.dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.3);cursor:pointer;transition:background .3s;
}
.dot.active{background:#C33C54;box-shadow:0 0 0 2px rgba(195,60,84,.2),0 0 12px rgba(195,60,84,.5)}

/* Bottom info bar */
.fw-bar{
  position:absolute;bottom:clamp(14px,4.2vw,80px);
  left:50%;transform:translateX(-50%);
  z-index:2;width:min(1291px,92vw);
  overflow:hidden;
  /* apple liquid glass */
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(5px) saturate(180%);
  -webkit-backdrop-filter:blur(8px) saturate(180%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 8px 32px rgba(0,0,0,.45);
  border-radius:24px;
  padding:clamp(16px,1.7vw,33px) clamp(20px,2.6vw,49px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
}
/* static top-arc gloss */
.fw-bar::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 50%,transparent 100%);
  border-radius:inherit;pointer-events:none;
}
/* periodic auto-shimmer shine */
.fw-bar::after{
  content:'';
  position:absolute;top:0;left:-50%;
  width:45%;height:100%;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);
  mix-blend-mode:screen;
  transform:skewX(-12deg);
  pointer-events:none;
  animation:fwBarShine 7s ease-in-out infinite;
}
@keyframes fwBarShine{
  0%,60%{left:-50%}
  90%,100%{left:115%}
}
.fw-tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fw-tag{
  display:inline-flex;align-items:center;height:38px;padding:0 17px;
  background:var(--w05);border:1px solid var(--w20);border-radius:999px;
  font-size:14px;font-weight:300;letter-spacing:.35px;color:#fff;
  cursor:pointer;transition:background .3s;white-space:nowrap;
}
.fw-tag:hover{background:rgba(255,255,255,.12)}
.fw-info{text-align:right;flex-shrink:0}
/* Work name: 40px weight:400 */
.fw-name{font-size:clamp(18px,2.08vw,40px);font-weight:400;line-height:1.5;color:#fff}
/* Desc: 18px weight:300 letter-spacing:2px */
.fw-desc{
  font-size:clamp(11px,.94vw,18px);font-weight:300;line-height:1.62;
  letter-spacing:2px;color:var(--w60);margin-top:6px;max-width:366px;
}

/* ── BRANDS WE'VE WORKED WITH ─────────────── */
/*
  Figma: 1920×1080px gradient #2A2A2A→#000.
  Title "BRANDS WE'VE WORKED WITH" center, 100px weight:400.
  Two rows of brand logos, evenly spaced.
  Row 1: Läderach, Grammie, Vicoli, 1Oak, The Leela (5 logos)
  Row 2: The Park Hotels, WelcomHotel, The Rug Republic, Six Senses (4 logos)
*/
#brands{
  background:linear-gradient(180deg,#2A2A2A 0%,#000 100%);
  padding:clamp(60px,8.3vw,160px) clamp(24px,4.8vw,92px) clamp(60px,8.3vw,160px);
}
.brands-title{
  font-size:clamp(24px,5.2vw,100px);font-weight:400;line-height:1.21;
  color:#fff;text-shadow:0 4px 4px rgba(0,0,0,.25);
  text-align:center;margin-bottom:clamp(40px,6.3vw,120px);
}
.brands-row{
  display:flex;justify-content:center;align-items:center;
  flex-wrap:wrap;gap:clamp(24px,4vw,72px) clamp(40px,6.5vw,120px);
  max-width:1400px;margin:0 auto;
}
.brand-logo{
  display:flex;align-items:center;justify-content:center;
  opacity:.75;transition:opacity .3s;
  /* We'll use SVG text representations since we don't have the actual assets */
}
.brand-logo img{width: 125px;}
.brand-logo:hover{opacity:1}
.brand-txt{
  font-size:clamp(12px,1.25vw,22px);font-weight:500;letter-spacing:3px;
  text-transform:uppercase;color:rgba(255,255,255,.75);
  transition:color .3s;white-space:nowrap;
}
.brand-txt:hover{color:#fff}
/* Serif-style brand names */
.brand-serif{
  font-size:clamp(12px,1.15vw,20px);font-weight:400;letter-spacing:1.5px;
  color:rgba(255,255,255,.75);transition:color .3s;white-space:nowrap;
  font-style:italic;
}

/* camera-flash overlay — fixed, covers entire viewport */
#camFlash{
  position:fixed;inset:0;z-index:9999;
  background:#fff;opacity:0;pointer-events:none;
  will-change:opacity;
}

/* ── TAKE A SHOT CTA ──────────────────────── */
#cta{
  position:relative;background:#000;
  height:clamp(320px,56.25vw,1080px);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
/* subtle pulse on hover to signal clickability */
#cta:hover .cta-title{letter-spacing:.06em;transition:letter-spacing .4s ease}
#cta:hover .cta-sub{opacity:.7;transition:opacity .4s ease}

/* camera shutter button */
.cam-btn{
  position:relative;
  width:clamp(60px,5vw,84px);height:clamp(60px,5vw,84px);
  border-radius:50%;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 20px rgba(0,0,0,.4);
  color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:clamp(28px,3.5vw,52px);
  transition:transform .3s ease, background .3s ease, box-shadow .3s ease;
}
.cam-btn svg{
  width:clamp(22px,1.9vw,30px);height:clamp(22px,1.9vw,30px);
  stroke:#fff;pointer-events:none;
}
/* expanding sonar rings */
.cam-btn::before,.cam-btn::after{
  content:'';position:absolute;inset:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.45);
  animation:camRing 2.4s ease-out infinite;
}
.cam-btn::after{animation-delay:1.2s}
@keyframes camRing{
  0%  {transform:scale(1);opacity:.6}
  100%{transform:scale(2.2);opacity:0}
}
/* hover & active */
.cam-btn:hover{
  background:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 6px 28px rgba(0,0,0,.5);
  transform:scale(1.1);
}
.cam-btn:active{transform:scale(.92)}
.cta-bg{
  position:absolute;inset:0;
  background:url('../images/gemini-bg.png') center/cover no-repeat;
  opacity:.45;
  /* spotlight-like image — dark with light beam */
}
.cta-inner{position:relative;z-index:1;text-align:center;padding:0 24px}
.cta-title{
  font-size:clamp(28px,3.33vw,64px);font-weight:300;
  letter-spacing:.03em;color:#fff;text-shadow:0 4px 4px rgba(0,0,0,.25);
}
.cta-sub{
  font-size:clamp(14px,1.04vw,20px);font-weight:300;
  letter-spacing:.03em;color:#fff;text-shadow:0 4px 4px rgba(0,0,0,.25);
  margin-top:clamp(8px,1vw,16px);
}

/* ── GET IN TOUCH FORM ────────────────────── */
/*
  Figma: 1920×1080px, same spotlight photo bg.
  "GET IN TOUCH" left-of-center ish → actually centered: left:721px on 1920 = centered on 478px title
  Form centered: left:736px, width:448px
  Fields: NAME, EMAIL, PHONE NUMBER, COMPANY NAME with bottom border only
  Button: "SEND ENQUIRY" full-width, pill shape
*/
#contact{
  position:relative;background:#000;
  min-height:clamp(400px,56.25vw,1080px);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(60px,8.3vw,160px) 24px;
}
.contact-bg{
  position:absolute;inset:0;
  background:url('../images/gemini-bg.png') center/cover no-repeat;
  opacity:.35;
}
.contact-box{position:relative;z-index:1;width:min(448px,100%)}
/* "GET IN TOUCH" — 64px weight:300 letter-spacing:.03em */
.contact-title{
  font-size:clamp(32px,3.33vw,64px);font-weight:300;
  letter-spacing:.03em;color:#fff;text-shadow:0 4px 4px rgba(0,0,0,.25);
  text-align:left;margin-bottom:clamp(32px,3.6vw,70px);
}
.field{margin-bottom:clamp(20px,2.6vw,49px)}
/* Label: 16px weight:400 letter-spacing:1.8px uppercase */
.field label{
  display:block;font-size:16px;font-weight:400;
  letter-spacing:1.8px;text-transform:uppercase;
  color:var(--w60);margin-bottom:0;line-height:1;
}
/* Input: bottom border only, 49px height */
.field input{
  display:block;width:100%;height:49px;background:transparent;
  border:none;border-bottom:1px solid var(--w20);outline:none;
  color:#fff;font-family:'Inter',sans-serif;font-size:16px;font-weight:300;
  padding:8px 0;transition:border-color .3s;
}
.field input:focus{border-bottom-color:var(--w60)}
.field input::placeholder{color:rgba(255,255,255,.15)}
/* SEND ENQUIRY button: 448×64px, border pill */
.btn-enquiry{
  display:block;width:100%;height:64px;
  border:1px solid var(--w20);border-radius:999px;
  background:transparent;
  font-size:20px;font-weight:400;letter-spacing:2.4px;text-transform:uppercase;color:#fff;
  margin-top:clamp(24px,2.6vw,50px);
  transition:background .3s,border-color .3s;
}
.btn-enquiry:hover{background:var(--w08);border-color:var(--w60)}


/* ── PORTFOLIO PAGE ───────────────────────────────── */

.portfolio-grid-section{
  background: #000;
  padding: 100px 6%;
}

/* FILTERS */
.portfolio-tabs{
  display: flex;
  justify-content: center;
  gap: 35px;
  margin-bottom: 70px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.portfolio-tabs button{
  background: none;
  border: none;
  font-size: 15px;
  letter-spacing: .08em;
  color: #777;
  cursor: pointer;
  text-transform: uppercase;
  transition: .3s ease;
}

.portfolio-tabs button:hover,
.portfolio-tabs button.active{
  color: #fff;
}

/* GRID */
.portfolio-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

/* CARD */
.portfolio-card {
  text-decoration: none;
  color: inherit;
  display: block;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 10px;;
  /* top gloss arc */
  position: relative;
}

/* gloss shine layer */
.portfolio-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.05) 40%,
    transparent 100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* hover shine sweep */
.portfolio-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  /*background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 80%
  );*/
  transform: skewX(-15deg);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 2;
}

.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 16px 48px rgba(0, 0, 0, 0.35);
}

.portfolio-card:hover::after {
  left: 140%; /* shine sweeps across on hover */
}

.portfolio-image{
  overflow: hidden;
}

.portfolio-image img{
  width: auto;
  height: 595px;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
  border-radius:10px;
}

/* HOVER */
.portfolio-card:hover img{
  transform: scale(1.04);
}

.portfolio-card h3{
  text-align: center;
  margin-top: 22px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .08em;
  color: #8a8a8a;
  transition: .3s ease;
}

.portfolio-card:hover h3{
  color: #fff;
}

/* MOBILE */
@media(max-width:991px){
  .portfolio-grid{
    grid-template-columns: 1fr;
  }

  .portfolio-image img{
    height: 420px;
  }
}

/* ── portfolios ───────────────────────────────── */

.portfolio-detail{
  padding: 140px 8% 0px;
  background: #000;
}

.back-btn {
  margin-bottom: 40px;
  background: transparent;
  border: none;
  font-size: 12px;
  cursor: pointer;
  color: #fff;
  font-weight: 500;
}


.portfolio-top{
  display: flex;
  justify-content: space-between;
  gap: 100px;
}

.portfolio-left{
  flex: 1;
}

.portfolio-left h1{
  font-size: 35px;
  font-weight: 400;
  line-height: 50px;
  margin-bottom: 35px;
  color: #fff;
}

.project-description{
  font-size: 18px;
  line-height: 25px;
  font-weight: 200;
  color: #fff;
  max-width: 980px;
}

.portfolio-meta{
  width: 320px;
}

.meta-item{
  margin-bottom: 35px;
}

.meta-item span{
  display: block;
  font-size: 12px;
  letter-spacing: .14em;
  color: #999;
  margin-bottom: 12px;
}

.meta-item p{
  font-size: 16px;
  color: #fff;
  line-height: 1.7;
  font-weight: 200;
}

/* SHARE */
.social-links{
  display: flex;
  gap: 18px;
}

.social-links a{
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  transition: .3s ease;
}

.social-links a:hover{
  color: #635f60;
  transform: translateY(-2px);
}

/* MASONRY */
.masonry-gallery{
  padding: 40px 8% 120px;
  background: #000;
}

.gallery-grid{
  columns: 3 320px;
  column-gap: 15px;
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: 15px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

/* top gloss arc */
.gallery-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.05) 40%,
    transparent 100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* hover shine sweep */
.gallery-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 80%
  );
  transform: skewX(-15deg);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 2;
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 16px 48px rgba(0, 0, 0, 0.35);
}

.gallery-item:hover::after {
  left: 140%;
}

/* image stays flush and rounded inside card */
.gallery-item img {
  width: 100%;
  display: block;
  border-radius: 10px;
  transition: transform 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.04);
}


/* VIDEO */
.video-showcase{
  padding: 20px 8%;
  background: #000;
}

/*.section-heading{
  margin-bottom: 50px;
}

.section-heading span{
  font-size: 12px;
  letter-spacing: .18em;
  color: #999;
}

.section-heading h2{
  font-size: 54px;
  font-weight: 400;
  margin-top: 10px;
}*/

.video-grid{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 8px;
}

.video-grid video{
  width: 100%;
  border-radius: 18px;
}

.video-grid video:last-child{
  grid-column: span 2;
}

/* MOBILE */
@media(max-width:991px){

  .portfolio-top{
    flex-direction: column;
    gap: 50px;
  }

  .portfolio-left h1{
    font-size: 30px;
  }

  .project-description{
    font-size: 13px;
    line-height: 1.5;
  }

  .video-grid{
    grid-template-columns: 1fr;
  }

  .video-grid video:last-child{
    grid-column: auto;
  }
}

/*video gallery*/

.video-gallery-section{
  /*max-width:1400px;
  margin:60px auto 100px;*/
  padding:0 40px;
  background: #000;
  padding-bottom:50px;
}

.video-gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  align-items:start;
}

.video-gallery-item {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

/* top gloss arc */
.video-gallery-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.05) 40%,
    transparent 100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* hover shine sweep */
.video-gallery-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 80%
  );
  transform: skewX(-15deg);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 2;
}

.video-gallery-item:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 16px 48px rgba(0, 0, 0, 0.35);
}

.video-gallery-item:hover::after {
  left: 140%;
}

.video-gallery-item iframe{
  width:100%;
  aspect-ratio:16/9;
  border:none;
  display:block;
  border-radius:8px;
}

@media (max-width:991px){

  .video-gallery-section{
    padding:20px;
    /*margin:40px auto 80px;*/
  }

  .video-gallery-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

}

/* TICKER 
.ticker-wrap{
  width:100%;
  overflow:hidden;
  background:#000;
  padding:18px 0;
}

.ticker-track{
  display:flex;
  width:max-content;
  gap:40px;
  white-space:nowrap;
  animation:scrollTicker 25s linear infinite;
}

.ticker-track span{
  color:#fff;
  font-size:16px;
  font-weight:500;
  letter-spacing:2px;
  text-transform:uppercase;
}

@keyframes scrollTicker{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-50%);
  }
}
@media (max-width: 768px){

  .ticker-wrap{
    padding:12px 0;
  }

  .ticker-track{
    gap:25px;
    animation:scrollTicker 18s linear infinite;
  }

  .ticker-track span{
    font-size:12px;
    letter-spacing:1px;
    white-space:nowrap;
  }

} */

.stats-counter{
  background:#000;
  padding:10px 5%;
  overflow:hidden;
}

.stats-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-align:center;
}

.stat-box{
  flex:1;
}

.flip-number{
  font-size:clamp(55px,8vw,50px);
  font-weight:300;
  color:#fff;
  line-height:1;
  letter-spacing:2px;
  transition:transform .5s ease;
}

.flip-number.flip{
  transform:rotateX(360deg);
}

.stat-box p{
  color:#a8a8a8;
  font-size:14px;
  letter-spacing:4px;
  margin-top:15px;
  text-transform:uppercase;
}

.divider{
  width:1px;
  height:130px;
  background:rgba(255,255,255,.15);
}

/* Mobile */
@media(max-width:768px){

  .stats-row{
    flex-wrap:wrap;
    gap:40px;
  }

  .divider{
    display:none;
  }

  .stat-box{
    width:48%;
  }

  .flip-number{
    font-size:52px;
  }

  .stat-box p{
    font-size:11px;
    letter-spacing:2px;
  }
}

/* shorts */
.youtube-playlist{
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}

.youtube-playlist iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* --------------- INDUSTRIES ---------------------*/
.industries-section{
  background:#000;
  padding:110px 8%;
}

.industries-grid{
  display:grid;
  grid-template-columns: 220px repeat(4,1fr);
  gap:50px 30px;
  align-items:center;
}

/* title in first column */
.industries-title{
  grid-column:1;
  grid-row:1 / 3;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:35px;
  font-weight:400;
  margin:0;
  text-align:center;
}

/* Heading */
/*.industries-heading{
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 300;
  letter-spacing: 3px;
  color: #f5f5f5;
  line-height: 1;
}

.industry-heading h2{
  color:#fff;
  font-size:56px;
  font-weight:300;
  letter-spacing:2px;
  margin:0;
  line-height:1;
}*/

.industries-grid .industry-card:nth-child(n+6){
  grid-column: span 1;
}

/* Center second row */
.industries-grid .industry-card:nth-child(6){
  grid-column: 2;
}

/*.industries-title{
  font-size: 35px;
  padding-top: 30px;
  font-weight: 400;
}*/
/* Cards */
.industry-card{
  text-align:center;
  transition:.4s ease;
}

.industry-card:hover{
  transform: translateY(-8px);
}

.industry-card:hover img{
  transform: scale(1.06);
}

.industry-card img{
  width: 70px;
  height: 70px;
  object-fit: contain;
  opacity: 0.9;
  transition:.4s ease;
  margin: 0 auto;
}

.industry-card h3{
  color:#d7d7d7;
  font-size:14px;
  font-weight:300;
  line-height:1.4;
  margin:0;
  padding-top: 10px;
}

/* Tablet */
@media(max-width:991px){

  .industries-grid{
    grid-template-columns: repeat(2,1fr);
    gap: 65px 30px;
  }

  .industries-title{
    grid-column: 1 / -1;
    grid-row: auto;
    text-align: center;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 42px;
  }
  .industries-grid .industry-card:nth-child(6) {
  grid-column: 1;
}
}


/* Mobile */
@media(max-width:768px){

  .industries-section{
    padding: 70px 6%;
  }

  .industries-grid{
    grid-template-columns: repeat(2,1fr);
    gap: 30px 20px;
  }

  .industries-title{
    grid-column: 1 / -1;
    grid-row: auto;
    font-size: 25px;
    text-align: center;
    justify-content: center;
    margin-bottom: 10px;
  }

  .industry-card img{
    width:70px;
    height:70px;
    object-fit:contain;
    margin-bottom:22px;
  }

  .industry-card h3{
    font-size:14px;
    line-height:1.4;
  }
  .industries-grid .industry-card:nth-child(6) {
  grid-column: 1;
}
}

/*.industrycard {
  text-decoration: none;
  color: inherit;
  display: block;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 10px;*/
  /* top gloss arc */
  /*position: relative;
}*/

/* gloss shine layer */
/*.industrycard::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.05) 40%,
    transparent 100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}*/

/* hover shine sweep */
/*.industrycard::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 80%
  );
  transform: skewX(-15deg);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 2;
}*/

/*.industrycard:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 16px 48px rgba(0, 0, 0, 0.35);
}*/

/*.industrycard:hover::after {
  left: 140%; /* shine sweeps across on hover 
}*/


/* View all */
.featured-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 8%;
  margin-top:70px;
  width:100%;
}

.featured-title{
  font-size:20px;
  font-weight:400;
  letter-spacing:2px;
  color:#fff;
  margin:0;
  text-transform:uppercase;
}

.view-all-btn{
  margin-left:auto;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
}
@media(max-width:768px){

  .featured-head{
    align-items:flex-start;
    gap:20px;
  }

  .view-all-btn{
    padding:5px 0px;
    font-size:12px;
  }

  .featured-title{
    font-size: 18px;
  }
}

/* DIGITAL CONTENT SHORTS */
.shorts-showcase {
  background: #000;
  padding: 20px 4%;
  overflow: hidden;
}

.shorts-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* exactly 4 per row */
  gap: 16px;
  padding-bottom: 12px;
}

.shorts-wrap::-webkit-scrollbar {
  display: none;
}

/* each card mimics the phone/shorts container */
.short-card {
  /*flex: 0 0 auto;*/
  width: 100%;               /* narrow like a phone */
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
  position: relative;
}

.short-card:hover {
  transform: translateY(-6px) scale(1.02);
}

/* 9:16 vertical ratio — key for shorts look */
.short-card iframe {
  width: 100%;
  aspect-ratio: 9/16;
  border: none;
  display: block;
}

/* Responsive */
@media(max-width: 768px) {
  .shorts-wrap {
    display:flex;
    flex-wrap: wrap;        /* ← allows stacking */
    overflow-x: hidden;     /* ← no horizontal scroll on mobile */
    justify-content: center;
  }

  .short-card {
    width: 80%;             /* ← each card takes most of screen width */
    max-width: 320px;
  }
}

@media(max-width: 480px) {
  .short-card {
    width: 90%;
    max-width: 280px;
  }
}


/* ── FOOTER ───────────────────────────────── */
/*
  Figma: 1920×318px, black.
  Left: Studio logo/wordmark (large, multi-line).
  Center: "QUICK LINKS" column — Explore Sets, Contact Us.
  Right: "CONNECT" column — email, phone, Instagram.
  Bottom line: copyright centered.
*/
footer{
  background:#000;
  padding:clamp(40px,4.2vw,80px) clamp(24px,4.8vw,92px) clamp(20px,2vw,40px);
}
.footer-grid{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:clamp(24px,5vw,80px);
  align-items:start;
  margin-bottom:clamp(28px,2.9vw,56px);
}
/* Logo wordmark — the SVG-styled one from Figma */
.footer-wordmark{
  font-size:clamp(20px,2.6vw,48px);font-weight:400;
  letter-spacing:2px;text-transform:uppercase;color:#fff;
  line-height:1.2;
}
.footer-wordmark .studio-part{
  display:flex;align-items:center;gap:6px;
}

.footer-logo{
  width: 180px;   /* adjust size */
  height: auto;
  display: block;
}

/* Column heading */
/* Footer columns */
.fcol h5{
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 22px;
}

.fcol ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  margin: 0;
}

.fcol ul li{
  display: flex;
  align-items: center;
  gap: 12px;
}

.fcol ul a{
  font-size: 16px;
  font-weight: 300;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: .3s ease;
}

.fcol ul a:hover{
  color: #fff;
}

/* Icon box */
.ico{
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Better spacing between columns */
.footer-grid{
  display: flex;
  justify-content: space-between;
  gap: 70px;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Mobile */
@media(max-width:768px){

  .footer-grid{
    flex-direction: column;
    gap: 35px;
  }

  .fcol h5{
    margin-bottom: 14px;
  }

  .fcol ul a{
    font-size: 15px;
  }
}
/* Copyright bar */
.footer-bar{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:clamp(12px,1vw,20px);text-align:center;
}
.footer-bar p{font-size:14px;font-weight:400;color:rgba(255,255,255,.5)}

/* ── SCROLL REVEAL ────────────────────────── */
.rev{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease}
.rev.d1{transition-delay:.1s}.rev.d2{transition-delay:.2s}.rev.d3{transition-delay:.3s}.rev.d4{transition-delay:.4s}
.rev.in{opacity:1;transform:translateY(0)}

/* ── RESPONSIVE ───────────────────────────── */
@media(max-width:1024px){
  .about-photo{display:none}
  /* mobile-only about photo shown as a block element */
  .about-photo-mob{display:block}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-wordmark{grid-column:1/-1}
  .how-grid{gap:10px}
}
@media(max-width:768px){
  .nav-links{display:none}
  .ham{display:flex}
  .mob-menu{display:flex}
  /* hero */
  .hero-text{left:24px;bottom:90px;width:calc(100vw - 48px);/*bottom: clamp(132px,200vh,750px);*/}
  .pill{height:46px;padding:0 20px;font-size:12px}
  .showreel{display:none}
  /* about */
  .about-lines{padding:0 24px}
  .about-body{padding-right:24px;padding-left:24px;max-width:100%;/*margin-top:24px*/}
  /* services */
  .sec-head{padding:0 24px}
  .svc-strip{height:clamp(180px,50vw,280px)}
  .svc-label{height:42px;padding:0 14px;font-size:13px;left:12px;bottom:14px}
  .svc-cta{height:42px;padding:0 12px;font-size:11px;right:12px;bottom:14px}
  /* how */
  .how-grid{grid-template-columns:1fr;padding:0 16px;gap:14px}
  .how-img{aspect-ratio:16/9}
  /* breaker */
  .breaker-lines{padding:0 24px}
  /* featured */
  .fw-bar{flex-direction:column;align-items:flex-start;padding:16px 18px;bottom:12px}
  .fw-info{text-align:left}
  .fw-desc{max-width:none}
  /* brands */
  .brands-row{gap:20px 40px}
  /* footer */
  .footer-grid{grid-template-columns:1fr}
  .footer-wordmark{grid-column:auto}
}
@media(max-width:480px){
  .brands-row{gap:18px 28px}
  .fw-title{font-size:14px;letter-spacing:4px}
}