/* ============================================================
   StoryFrame World — components & interactions
   ============================================================ */

/* ---------- HERO (Section 1) ---------- */
.hero-bg{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease; }
.hero-bg.active{ opacity:1; }

/* ---------- INDUSTRIES ACCORDION (Section 3) ---------- */
.accordion{
  position:absolute; left:0; top:0; width:1920px; height:1080px;
  display:flex; background:var(--p2);
}
.acc-col{
  position:relative; height:100%;
  flex:1 1 0; min-width:0;
  border-right:5px solid var(--white);
  overflow:hidden; cursor:pointer;
  /* entrance state */
  transform:translateY(72px); opacity:0;
  transition:flex-grow .7s cubic-bezier(.7,0,.2,1);
}
.acc-col:last-child{ border-right:none; }
.acc-col .col-img{
  position:absolute; inset:0; background-position:center; background-size:cover;
  transform:scale(1.04); transition:transform 1.2s ease, filter .7s ease;
  filter:saturate(.9);
}
.acc-col .col-grad{ position:absolute; inset:0; background:var(--col-grad); }
/* collapsed label (vertical) */
.acc-col .col-label{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) rotate(-90deg);
  transform-origin:center;
  font-weight:700; font-size:72px; line-height:1; color:var(--white);
  white-space:nowrap; letter-spacing:.01em;
  transition:opacity .35s ease, font-size .6s ease;
  text-shadow:0 2px 20px rgba(0,0,0,.35);
}
/* expanded content — fits the ~1280px active column at exact Figma coords */
.acc-col .col-content{
  position:absolute; left:84px; top:0; width:620px; height:1080px;
  opacity:0; visibility:hidden; transform:translateY(24px);
  transition:opacity .4s ease, transform .5s ease, visibility 0s linear .7s;
  pointer-events:none;
}
/* legal disclaimer under each market sample */
.acc-col .col-disc{ margin:0; font-style:italic; font-size:15px; line-height:1.45; color:rgba(255,255,255,.5); max-width:560px; }
/* Tag + title stack, bottom-anchored just above the body copy so a one-line OR
   two-line title (e.g. URBAN / ACTIVATION) stays balanced and never overlaps. */
.acc-col .col-head{
  position:absolute; left:0; top:110px; width:760px; height:218px;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:16px;
}
.acc-col .col-head .t-h2{ width:760px; }
.acc-col .col-phone{
  position:absolute; left:89px; top:134px; width:1487px; height:836px;
  background-position:center; background-size:contain; background-repeat:no-repeat;
  opacity:0; transform:scale(.97); transition:opacity .6s ease .2s, transform .8s ease .2s;
  pointer-events:none;
}

/* sizing states (flex-grow: inactive=1, active=10 → active ≈ 1280px, others ≈ 128px) */
.accordion.has-active .acc-col.active{ flex-grow:10; }
.acc-col.active .col-label{ opacity:0; }
.accordion.has-active .acc-col:not(.active) .col-label{ font-size:54px; }
.acc-col.active .col-content{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .55s ease .25s, transform .6s ease .25s, visibility 0s; pointer-events:auto; }
.acc-col.active .col-phone{ opacity:1; transform:scale(1); }
.acc-col.active .col-img{ transform:scale(1); filter:saturate(1); }

/* stagger fly-up entrance (revealed on scroll-in) */
.accordion.revealed .acc-col{
  transform:translateY(0); opacity:1;
  transition:transform .8s cubic-bezier(.2,.7,.2,1), opacity .7s ease,
             flex-grow .7s cubic-bezier(.7,0,.2,1);
}
.accordion.revealed .acc-col:nth-child(1){ transition-delay:.05s; }
.accordion.revealed .acc-col:nth-child(2){ transition-delay:.13s; }
.accordion.revealed .acc-col:nth-child(3){ transition-delay:.21s; }
.accordion.revealed .acc-col:nth-child(4){ transition-delay:.29s; }
.accordion.revealed .acc-col:nth-child(5){ transition-delay:.37s; }
.accordion.revealed .acc-col:nth-child(6){ transition-delay:.45s; }
/* once user interacts, drop entrance delays so resizing is snappy */
.accordion.has-active .acc-col{ transition-delay:0s !important; }

/* ---------- SERVICES ACCORDION (Section 4) ----------
   The products accordion rotated 90deg: horizontal panels stacked vertically,
   the active one grows in HEIGHT (flex-grow) instead of width. Same gradient
   scrim family, same reveal/hover mechanic, same JS interaction. */
.svc-header{ position:absolute; left:84px; top:64px; width:1560px; z-index:6; }
.svc-eyebrow{ display:block; color:var(--yellow); font-weight:700; font-size:20px; letter-spacing:.2em; text-transform:uppercase; margin:0 0 16px; }
.svc-headline{ margin:0; font-weight:700; font-size:54px; line-height:1.06; letter-spacing:-.01em; color:var(--white); }

.svc-acc{
  position:absolute; left:0; top:232px; width:1920px; height:848px;
  display:flex; flex-direction:column; background:var(--p2);
}
.svc-panel{
  position:relative; width:100%;
  flex:1 1 0; min-height:0;
  border-bottom:4px solid var(--white);
  overflow:hidden; cursor:pointer;
  transform:translateY(48px); opacity:0;               /* entrance */
  transition:flex-grow .7s cubic-bezier(.7,0,.2,1);
}
.svc-panel:last-child{ border-bottom:none; }
.svc-panel .svc-img{
  position:absolute; inset:0; background-position:center; background-size:cover;
  transform:scale(1.04); transition:transform 1.2s ease, filter .7s ease; filter:saturate(.9);
}
.svc-panel .svc-grad{ position:absolute; inset:0; background:var(--svc-grad); }
/* collapsed label (horizontal), left + vertically centred */
.svc-panel .svc-label{
  position:absolute; left:84px; top:50%; transform:translateY(-50%);
  font-weight:700; font-size:44px; line-height:1; color:var(--white);
  white-space:nowrap; text-shadow:0 2px 20px rgba(0,0,0,.35);
  transition:opacity .35s ease, font-size .5s ease;
}
/* expanded content: left column, vertically centred in the tall active panel */
.svc-panel .svc-content{
  position:absolute; left:84px; top:0; bottom:0; width:920px;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  opacity:0; visibility:hidden; transform:translateY(20px);
  transition:opacity .4s ease, transform .5s ease, visibility 0s linear .7s; pointer-events:none;
}
.svc-panel .svc-title{ margin:0 0 14px; font-weight:700; font-size:52px; line-height:1.02; letter-spacing:-.01em; color:var(--white); }
.svc-panel .svc-tagline{ margin:0 0 18px; font-weight:700; font-size:27px; line-height:1.2; color:var(--yellow); }
.svc-panel .svc-desc{ margin:0 0 26px; font-weight:400; font-size:21px; line-height:1.5; color:rgba(255,255,255,.82); max-width:780px; }
.svc-tags{ display:flex; flex-wrap:wrap; gap:12px; margin:0 0 30px; }
.svc-tags .svc-chip{
  font-weight:500; font-size:16px; letter-spacing:.02em; color:rgba(255,255,255,.92);
  padding:9px 20px; border:1.5px solid rgba(255,255,255,.3); border-radius:999px; line-height:1;
}
.svc-panel .svc-book{ height:56px; font-size:20px; padding:0 30px; }

/* sizing states: active panel grows HEIGHT (inactive flex-grow 1, active 10) */
.svc-acc.has-active .svc-panel.active{ flex-grow:10; }
.svc-panel.active .svc-label{ opacity:0; }
.svc-acc.has-active .svc-panel:not(.active) .svc-label{ font-size:34px; }
.svc-panel.active .svc-content{ opacity:1; visibility:visible; transform:none; transition:opacity .55s ease .22s, transform .6s ease .22s, visibility 0s; pointer-events:auto; }
.svc-panel.active .svc-img{ transform:scale(1); filter:saturate(1); }

/* stagger fly-up entrance (revealed on scroll-in, mirrors the products accordion) */
.svc-acc.revealed .svc-panel{
  transform:translateY(0); opacity:1;
  transition:transform .8s cubic-bezier(.2,.7,.2,1), opacity .7s ease, flex-grow .7s cubic-bezier(.7,0,.2,1);
}
.svc-acc.revealed .svc-panel:nth-child(1){ transition-delay:.05s; }
.svc-acc.revealed .svc-panel:nth-child(2){ transition-delay:.13s; }
.svc-acc.revealed .svc-panel:nth-child(3){ transition-delay:.21s; }
.svc-acc.revealed .svc-panel:nth-child(4){ transition-delay:.29s; }
.svc-acc.has-active .svc-panel{ transition-delay:0s !important; }

/* ---------- CASE STUDIES (Section 4) ---------- */
.carousel{ position:absolute; inset:0; }

/* video-driven case study sequence */
.cs-video .cs-vid{
  position:absolute; left:0; top:0; width:1920px; height:1080px;
  object-fit:cover; opacity:0; transition:opacity .35s ease; z-index:5;
}
.cs-intro{ position:absolute; inset:0; z-index:8; transition:opacity .45s ease; }
/* invisible CTA hotspots over the video freeze-frames */
.cs-hot{
  position:absolute; z-index:12; background:transparent; border:none; padding:0;
  cursor:pointer; opacity:0; pointer-events:none;
}
.cs-video.cs-p1 .cs-hot.story{ pointer-events:auto; }
.cs-video.cs-p2 .cs-hot.start{ pointer-events:auto; }
/* default hotspot rectangles over the video CTAs (generous hit areas) */
.cs-hot.story{ left:770px; top:725px; width:280px; height:70px; }
.cs-hot.start{ left:790px; top:716px; width:200px; height:66px; }
.cs-nav{
  position:absolute; width:38px; height:54px; z-index:20; background:none; border:none;
  display:flex; align-items:center; justify-content:center; color:var(--white);
  opacity:.9; transition:opacity .2s ease, transform .2s ease;
}
.cs-nav:hover{ opacity:1; transform:scale(1.12); }
.cs-nav.prev{ left:40px; top:489px; }
.cs-nav.next{ right:40px; top:489px; }
.cs-nav svg{ width:38px; height:54px; }

/* ---------- CONTACT FORM (Section 6) ---------- */
.field{
  position:absolute; left:1288px; width:554px;
  background:var(--input); border:none; border-radius:11px;
  color:var(--white); font-family:var(--font); font-size:24px; line-height:24px;
  padding:17px 22px; resize:none; outline:none;
  transition:box-shadow .2s ease;
}
.field::placeholder{ color:var(--gray); opacity:1; }
.field:focus{ box-shadow:0 0 0 2px var(--yellow); }
/* invalid state set by the form's JS validation */
.field.invalid,
.select-field.invalid{ box-shadow:0 0 0 2px #ff5d5d; }

/* Custom Sector dropdown — lives inside the scaled stage so it scales with the page
   (a native <select> popup ignores the stage transform and renders at full screen size). */
.select-field{
  display:flex; align-items:center; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M3 6 L8 11 L13 6' stroke='%23818181' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 22px center; padding-right:54px;
}
.select-field .sel-value{ color:var(--white); }
.select-field .sel-value.placeholder{ color:var(--gray); }
.select-field.open,
.select-field:focus{ box-shadow:0 0 0 2px var(--yellow); }
.sel-menu{
  position:absolute; left:0; right:0; top:calc(100% + 8px);
  background:var(--input); border-radius:11px; padding:8px;
  box-shadow:0 18px 50px rgba(0,0,0,.55); z-index:40;
  max-height:330px; overflow:auto;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.select-field.open .sel-menu{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .18s ease, transform .18s ease; }
.sel-opt{
  padding:9px 18px; border-radius:8px; font-size:20px; line-height:1.2;
  color:var(--white); white-space:nowrap;
}
.sel-opt:hover,.sel-opt.active{ background:var(--p1); }
.send-btn{
  position:absolute; left:1288px; top:955px; width:554px; height:58px;
  border-radius:11px; background:var(--yellow); color:var(--p2); border:none;
  font-weight:700; font-size:24px; line-height:24px;
}
.send-btn:hover{ filter:brightness(1.06); }
/* the sent/error states swap to a coloured background — keep white text there */
.send-btn.sent{ background:#1f8a5b; color:var(--white); }
.send-btn.error{ background:#c0392b; color:var(--white); }
.send-btn:disabled{ opacity:.7; cursor:default; }

/* ---------- HAMBURGER NAV OVERLAY ---------- */
.nav-overlay{
  position:fixed; inset:0; z-index:200;
  background:linear-gradient(rgba(13,0,47,.42), rgba(13,0,47,.62)), url("../assets/gradient-bg.png") center/cover no-repeat, var(--p2);
  display:flex; flex-direction:column; justify-content:center; padding:0 9vw; overflow-y:auto;
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s;
}
@media (max-height:780px){
  .nav-overlay{ justify-content:flex-start; padding-top:13vh; padding-bottom:8vh; }
}
.nav-overlay.open{ opacity:1; visibility:visible; transition:opacity .4s ease; }
.nav-close{
  position:absolute; top:32px; right:46px; width:40px; height:40px;
  background:none; border:none; color:var(--white);
}
.nav-close::before,.nav-close::after{ content:""; position:absolute; left:8px; top:19px; width:24px; height:3px; background:var(--white); border-radius:2px; }
.nav-close::before{ transform:rotate(45deg); }
.nav-close::after{ transform:rotate(-45deg); }
.nav-list{ list-style:none; margin:0; padding:0; }
.nav-list li{ overflow:hidden; }
.nav-list button{
  background:none; border:none; color:var(--white);
  font-weight:700; font-size:clamp(26px,4.4vw,58px); line-height:1.12;
  letter-spacing:-.01em; padding:2px 0; display:flex; align-items:baseline; gap:22px;
  transform:translateY(110%); transition:transform .55s cubic-bezier(.2,.7,.2,1), color .2s ease;
}
.nav-overlay.open .nav-list button{ transform:translateY(0); }
.nav-list li:nth-child(1) button{ transition-delay:.08s; }
.nav-list li:nth-child(2) button{ transition-delay:.14s; }
.nav-list li:nth-child(3) button{ transition-delay:.20s; }
.nav-list li:nth-child(4) button{ transition-delay:.26s; }
.nav-list li:nth-child(5) button{ transition-delay:.32s; }
.nav-list li:nth-child(6) button{ transition-delay:.38s; }
.nav-list li:nth-child(7) button{ transition-delay:.44s; }
.nav-list button:hover{ color:var(--yellow); }
.nav-list .num{ font-size:.32em; font-weight:500; color:var(--yellow); transform:translateY(-.6em); }

/* ---------- EXPANDED PLACEHOLDER PAGES ---------- */
.expanded{
  position:fixed; inset:0; z-index:150; overflow-y:auto;
  background:radial-gradient(120% 120% at 80% 90%, var(--p0) 0%, var(--p1) 38%, var(--p2) 100%);
  opacity:0; visibility:hidden; transform:translateY(24px);
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1), visibility 0s linear .55s;
}
.expanded.open{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.exp-back{
  position:fixed; top:34px; left:40px; z-index:5; display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:var(--white);
  border-radius:40px; padding:11px 20px 11px 14px; font-weight:500; font-size:15px;
  transition:background .2s ease;
}
.exp-back:hover{ background:rgba(255,255,255,.16); }
.exp-back svg{ width:16px; height:16px; }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; transition-duration:.05s !important; }
}