/* ===== Lytson Studios — design tokens ===== */
:root{
  --bg: #C5A078;
  --panel-bg: #F7F4EE;
  --ink: #17140F;
  --ink-soft: #4A463F;
  --gold: #A9761E;
  --gold-deep: #8C5F17;
  --gold-glow: #C99A44;
  --card: #F0E9DC;
  --line: rgba(23,18,10,.20);
  --line-strong: rgba(23,18,10,.32);
  --max: 1240px;
  --gutter: clamp(24px, 6vw, 96px);
  --font-head: "Anton", sans-serif;
  --font-body: "Jost", sans-serif;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--bg);
  background-image: url("assets/images/background-wall.jpg");
  background-size: contain;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}
@supports (background-image: url("x.webp")){
  body{ background-image: url("assets/images/background-wall.webp"); }
}
/* iOS Safari doesn't support background-attachment:fixed reliably; falls back to scroll (still looks correct since the image repeats the same crop) */
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }

.accent{ color: var(--gold); }

/* ===== Scroll reveal ===== */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s cubic-bezier(.16,.7,.24,1), transform .65s cubic-bezier(.16,.7,.24,1);
  transition-delay: calc(var(--d, 0) * 110ms);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ transition: none; opacity: 1; transform: none; }
}

/* ===== Scroll-snap scroller ===== */
html{
  scroll-behavior: smooth;
}
.scroller{
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
}
.panel{
  min-height: 100vh;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  padding: 104px 0 48px;
}
.panel__inner{
  width: 100%;
  max-width: var(--max);
  padding: 0 var(--gutter);
}

/* ===== Nav ===== */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px var(--gutter) 0;
  pointer-events: none;
}
.nav__dots{
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
}
.dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(23,20,15,.25);
  position: relative;
  transition: background .25s ease, transform .25s ease;
}
.dot:hover{ background: var(--gold); transform: scale(1.3); }
.dot.is-active{ background: var(--gold); transform: scale(1.3); }
.dot::after{
  content: attr(data-label);
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink);
  background: var(--bg);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.dot:hover::after{ opacity: 1; }

/* ===== Hero ===== */
.panel--hero{ background: #000; padding: 0; overflow:hidden; }
.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 860px){
  /* The reel is edited for a landscape 16:9 frame, wordmark included.
     object-fit:cover on a tall, narrow phone screen scales it up to fill
     the height, cropping most of the width away — the wordmark and other
     text baked into the footage end up sliced off. object-fit:contain
     shows the whole frame instead, letterboxed on the panel's own black
     background, which reads intentionally rather than broken. */
  .hero-video{ object-fit: contain; }
}
.scroll-cue{
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 14px;
  display:flex;
  justify-content:center;
  padding-top: 8px;
  z-index: 5;
}
.scroll-cue__line{
  width: 3px; height: 8px;
  background: var(--gold-glow);
  border-radius: 2px;
  animation: scrollcue 1.6s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{ opacity: 1; transform: translateY(0); }
  70%{ opacity: 0; transform: translateY(10px); }
  100%{ opacity: 0; transform: translateY(10px); }
}

/* ===== Typography blocks ===== */
.headline{
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.005em;
  font-size: clamp(48px, 7.2vw, 101px);
  display: flex;
  flex-direction: column;
}
.headline > span{
  /* Flex items default to min-width:auto, which lets a long single word
     (e.g. "EXTRAORDINARY.") push past the container instead of wrapping.
     This lets it shrink to the available width and break if it must,
     instead of overflowing off the edge of narrow screens. (Hyphenation
     was tried here but isn't reliable enough across browsers to trust
     over a guaranteed non-overflowing break.) */
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.section-title{
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(34px, 4.3vw, 53px);
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.section-title.center{ text-align:center; }
.eyebrow{
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 22px;
  line-height: 1.3;
}
.body-copy{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.45;
  color: var(--ink);
  max-width: 46ch;
  text-wrap: pretty;
}
.body-copy--wide{ max-width: 82ch; }
.rule{
  display:block;
  height: 3px;
  background: var(--gold);
  margin: 14px 0;
}
.rule--short{ width: 46px; }

/* ===== Section 1: Intro ===== */
.intro{
  display: grid;
  grid-template-columns: auto 1px minmax(0, 1fr);
  gap: clamp(16px, 1.5vw, 24px);
  align-items: center;
}
.panel__inner.intro{ max-width: 1680px; padding-top: 0; padding-bottom: 0; padding-left: clamp(24px, 3.2vw, 68px); padding-right: clamp(12px, 0.9vw, 28px); }
.intro::before{ content:""; } /* placeholder for grid col spacing */
.intro > .headline{ grid-column: 1; }
.intro__right{ grid-column: 3; }
.intro{ position: relative; }
.intro__right{ position: relative; }
.intro__right::before{
  content:"";
  position:absolute;
  left: calc(-1 * clamp(12px,2.5vw,32px));
  top:0; bottom:0;
  width:1px;
  background: var(--line-strong);
}

/* Shift the intro content slightly higher and scale up its copy ~20% to make use of the page's height */
#intro .panel__inner{ transform: translateY(-4vh); }
#intro .headline{ font-size: clamp(58px, 8.6vw, 121px); }
#intro .eyebrow{ font-size: 24px; }
#intro .body-copy{ font-size: 25px; }
#intro .rule--short{ margin: 17px 0; }

/* ===== Section 2: Divisions ===== */
.divisions__grid{
  margin-top: clamp(40px, 6vh, 72px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(24px, 5vw, 64px);
}
.divisions__divider{
  width: 1px;
  background: var(--line-strong);
}
.division__title{
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 26px;
}
.plain-list li{
  font-size: 21px;
  line-height: 1.9;
  color: var(--ink);
}

/* Shift the divisions content slightly higher and scale up its copy ~20%, matching section 1 */
#divisions .panel__inner{ transform: translateY(-4vh); }
#divisions .section-title{ font-size: clamp(41px, 5.2vw, 64px); }
#divisions .division__title{ font-size: 31px; }
#divisions .plain-list li{ font-size: 25px; }

/* ===== Section 3: Work grid ===== */
.panel__inner.work{ max-width: 1460px; padding: 0 clamp(20px, 4vw, 64px); }
/* "SELECTED WORK" 20% larger, anchored to grow upward into the space above so the cards below never shift.
   The title's row height is reserved at its ORIGINAL (pre-enlarged) size, and the title bottom-aligns within
   that reserved row — so however tall the bigger title renders (even if it wraps to 2 lines on a narrow
   screen), it overflows upward into the panel's top padding instead of pushing the grid down. */
.panel__inner.work{
  display: grid;
  grid-template-rows: calc(1.1 * clamp(34px, 4.3vw, 53px)) auto;
  row-gap: 0;
}
#work .section-title{
  align-self: end;
  font-size: clamp(41px, 5.2vw, 64px);
}
.work__grid{
  margin-top: clamp(24px, 4vh, 44px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 20px;
}
.work-card{
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--tint);
  border: 2px solid rgba(169, 118, 30, 0.55);
  display: block;
  min-width: 0;
  min-height: 0;
  box-shadow: 0 14px 30px rgba(15, 10, 5, 0.32);
  transition: opacity .65s cubic-bezier(.16,.7,.24,1), transform .4s cubic-bezier(.16,.7,.24,1), border-color .25s ease, box-shadow .25s ease;
  transition-delay: calc(var(--d, 0) * 110ms), calc(var(--d, 0) * 110ms), 0s, 0s;
}
.work-card:hover{ transition-delay: 0s; }
.work-card:hover{ transform: translateY(-5px); border-color: rgba(201, 154, 68, 0.85); box-shadow: 0 20px 38px rgba(15, 10, 5, 0.4); }
.work-card picture{
  display: block;
  width: 100%;
  height: 100%;
}
.work-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.work-card__caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.9) 100%);
}
.work-card__title{
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.work-card__tag{
  color: rgba(255,255,255,.75);
  font-size: 12px;
  letter-spacing: 0.1em;
  margin-top: 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.work-card__play{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(10, 8, 5, 0.55);
  border: 1.5px solid rgba(255,255,255,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
  pointer-events: none;
  backdrop-filter: blur(2px);
}
.work-card__play svg{ width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.work-card:hover .work-card__play,
.work-card:focus-visible .work-card__play{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  background: rgba(169, 118, 30, 0.85);
}

/* ===== Video modal ===== */
.video-modal{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  opacity: 0;
  visibility: hidden;
  background-color: var(--bg);
  background-image: url("assets/images/background-wall.jpg");
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
  transition: opacity .3s ease;
}
@supports (background-image: url("x.webp")){
  .video-modal{ background-image: url("assets/images/background-wall.webp"); }
}
.video-modal::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 5, 0.72);
}
.video-modal.is-open{
  opacity: 1;
  visibility: visible;
}
.video-modal__frame{
  position: relative;
  width: 100%;
  max-width: 1180px;
}
.video-modal__ratio{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  border: 2px solid rgba(169, 118, 30, 0.55);
  background: #000;
}
.video-modal__ratio iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.video-modal__close{
  position: absolute;
  top: clamp(14px, 3vw, 32px);
  right: clamp(14px, 3vw, 32px);
  z-index: 2;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(10, 8, 5, 0.65);
  border: 1.5px solid rgba(255,255,255,.7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.video-modal__close svg{ width: 18px; height: 18px; }
.video-modal__close:hover{
  background: rgba(169, 118, 30, 0.85);
  border-color: rgba(201, 154, 68, 0.95);
  transform: scale(1.06);
}

/* ===== Section 4: Why ===== */
.why .headline{ margin-bottom: 20px; }
.headline--left{ align-items: flex-start; }
.features{
  margin-top: clamp(28px, 5vh, 48px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vw, 32px);
}
.features__divider{
  display:none;
}
@media (min-width: 860px){
  .features{ grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr; align-items: start; }
  .features__divider{ display:block; background: var(--line); }
}
.feature__icon{
  display: inline-flex;
  width: 38px; height: 38px;
  color: var(--gold-deep);
  margin-bottom: 14px;
}
.feature__icon svg{ width:100%; height:100%; }
.feature__title{
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 16px;
  color: var(--gold-deep);
  margin-bottom: 8px;
}
.feature__desc{
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

/* Shift the why-Lytson content slightly higher; headline stays its original size, copy is bumped modestly, icons get the bigger boost */
#why .panel__inner{ transform: translateY(-4vh); }
#why .body-copy{ font-size: 23px; }
#why .feature__icon{ width: 56px; height: 56px; margin-bottom: 16px; }
#why .feature__title{ font-size: 18px; }
#why .feature__desc{ font-size: 20px; }

/* ===== Section 5: Team ===== */
.team .body-copy{ margin-top: 14px; }
.team__grid{
  margin-top: clamp(24px, 4vh, 40px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.team-card{
  background: var(--card);
  border-radius: 14px;
  padding: 18px;
}
.team-card__photo{
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--tint), #101010);
  margin-bottom: 16px;
}
.team-card__photo picture{ display:block; width:100%; height:100%; }
.team-card__photo img{ width:100%; height:100%; object-fit: cover; display:block; }
.team-card__role{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 4px;
}
.team-card__name{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 8px;
}
.team-card__desc{
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ===== Section 6: Contact ===== */
.contact .headline{ margin-bottom: 16px; }
.panel__inner.contact > p.body-copy{ max-width: 52ch; }
.contact__grid{
  margin-top: clamp(24px, 4vh, 40px);
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(24px, 5vw, 64px);
}
.contact__divider{ background: var(--line-strong); }
.contact-list{ margin-top: 16px; display:flex; flex-direction:column; gap:14px; }
.contact-list li{
  display:flex; align-items:center; gap:14px;
  font-size: 19px;
}
.contact-list__icon{
  width: 21px; height:21px;
  color: var(--gold);
  flex: none;
}
.contact-list__icon svg{ width:100%; height:100%; }
.contact-list a:hover{ color: var(--gold); }
.contact-person{
  display: inline-block;
  margin-top: 16px;
  padding: 18px 32px;
  border: 1.5px solid var(--gold);
  border-radius: 4px;
  transition: background .2s ease, color .2s ease;
}
.contact-person:hover{
  background: var(--gold);
  color: #fff;
}
.contact-person__name{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
  color: inherit;
}
.contact-person__email{
  display: block;
  margin-top: 8px;
  font-size: 19px;
  color: inherit;
}
.contact__col .body-copy{ margin-top: 14px; }
#contact .contact__col:last-child{ padding-left: 50px; }
.btn-outline{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 18px 32px;
  border: 1.5px solid var(--gold);
  border-radius: 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
  transition: background .2s ease, color .2s ease;
}
.btn-outline:hover{ background: var(--gold); color: #fff; }
.footer-line{
  margin-top: clamp(36px, 6vh, 64px);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink);
}

/* ===== Responsive ===== */
@media (max-width: 860px){
  .intro{ grid-template-columns: 1fr; }
  .intro__right{ grid-column: 1; }
  .intro__right::before{ display:none; }
  .divisions__grid{ grid-template-columns: 1fr; }
  .divisions__divider{ width:100%; height:1px; margin: 8px 0; }
  .work__grid{ grid-template-columns: repeat(2, 1fr); }
  .features{ grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 4vh, 40px) clamp(16px, 3vw, 32px); }
  .team__grid{ grid-template-columns: 1fr; }
  .contact__grid{ grid-template-columns: 1fr; }
  .contact__divider{ width:100%; height:1px; }
  .nav__dots{ display:none; }
  .panel{ padding: 90px 0 40px; height: auto; min-height: 100vh; }
  /* Stacked mobile layouts run noticeably taller than one screen (the
     team section alone can run 2.5x viewport height). Mandatory scroll
     snap assumes each section fits in one screen; forcing it here fights
     the user's swipe (especially on iOS Safari) when a section is taller
     than the viewport, and made some sections feel impossible to scroll
     through cleanly. Mobile just gets a normal, free-scrolling page. */
  .scroller{ scroll-snap-type: none; }
  .panel{ scroll-snap-align: none; scroll-snap-stop: normal; }
}
/* On phones, "contain" left the wide desktop background letterboxed with
   the page's tan/orange color filling the rest below it. Swap in a tall
   portrait crop of the same wall+lamp scene (logo recomposited into it)
   and switch to "cover" so it fills the screen edge-to-edge with no
   color band showing through. */
@media (max-width: 860px){
  body{
    background-image: url("assets/images/background-wall-mobile.jpg");
    background-size: cover;
    background-position: center top;
  }
  @supports (background-image: url("x.webp")){
    body{ background-image: url("assets/images/background-wall-mobile.webp"); }
  }
  .video-modal{
    background-image: url("assets/images/background-wall-mobile.jpg");
    background-size: cover;
    background-position: center top;
  }
  @supports (background-image: url("x.webp")){
    .video-modal{ background-image: url("assets/images/background-wall-mobile.webp"); }
  }
}
@media (max-width: 520px){
  .work__grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .headline{ font-size: clamp(38px, 12vw, 67px); }
  #intro .headline{ font-size: clamp(46px, 14.4vw, 80px); }
  #intro .panel__inner{ transform: translateY(-2vh); }
  #why .panel__inner{ transform: translateY(-2vh); }
  .features{ grid-template-columns: 1fr; }
}
@media (max-width: 343px){
  /* Below this width "SELECTED WORK" wraps to 2 lines even at its original size, so the reserved
     title row needs to be doubled too, or the enlarged title would overcorrect and creep upward. */
  .panel__inner.work{ grid-template-rows: calc(2.2 * clamp(34px, 4.3vw, 53px)) auto; }
}