/* ==========================================================================
   KT Studio Inc. — Landing page (seventh edit)
   Type: Playfair Display (headlines, as in the portfolio) + Montserrat
   (body; stand-in for Gotham until the brand kit confirms a licensed face).
   Rhythm: sections alternate between near-black and the portfolio's
   off-white paper. Components read their colours from the section theme.
   Motion: the industries banner is the only thing that moves (the hero
   clip and the services-page clip are video, not animation).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --paper: #f6f5f0;
  --black: #0a0a0a;
  --ink: #111110;
  --ink-2: #5c5b56;
  --ink-3: #8a8984;
  --line: rgba(17, 17, 16, .14);
  --line-strong: rgba(17, 17, 16, .5);
  --tint: #e9e7e0;

  --light: #f6f5f0;
  --light-2: rgba(246, 245, 240, .7);
  --light-3: rgba(246, 245, 240, .45);
  --line-light: rgba(246, 245, 240, .18);
  --line-light-strong: rgba(246, 245, 240, .5);
  --tint-dark: #1b1b1a;

  --live: #e5322d;
  --error: #b3261e;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 80px);
  --max: 1600px;
  --header-h: 76px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Section themes: every component reads these tokens */
.theme-light {
  --bg: var(--paper); --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3);
  --rule: var(--line); --rule-strong: var(--line-strong); --ph: var(--tint);
  background: var(--bg); color: var(--fg);
}
.theme-dark {
  --bg: var(--black); --fg: var(--light); --fg-2: var(--light-2); --fg-3: var(--light-3);
  --rule: var(--line-light); --rule-strong: var(--line-light-strong); --ph: var(--tint-dark);
  background: var(--bg); color: var(--fg);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
  background: var(--black);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 300 1rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--fg, var(--ink)); outline-offset: 4px; }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .8rem 1rem;
  font: 500 .7rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
.skip:focus { top: 12px; }

/* Film grain on the dark bands (a static texture) */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.grain > * { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   Type system
   -------------------------------------------------------------------------- */
.label {
  font: 500 .66rem/1.5 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fg-2, var(--ink-2));
}
.title {
  font: 400 clamp(2rem, 4.6vw, 4.8rem)/1 var(--serif);
  text-transform: uppercase;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.title em { font-style: italic; text-transform: none; letter-spacing: 0; }
.lead { font: 400 clamp(1.1rem, 1.5vw, 1.4rem)/1.5 var(--serif); }
.section__intro { max-width: 46ch; color: var(--fg-2); }

.link {
  display: inline-block;
  font: 500 .68rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  padding-bottom: .5em; border-bottom: 1px solid currentColor;
}
.link:hover { opacity: .65; }

/* Buttons take the section's colours */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 3.3rem; padding: 0 1.8rem;
  border: 1px solid var(--fg, var(--ink));
  font: 500 .66rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--solid { background: var(--fg, var(--ink)); color: var(--bg, var(--paper)); }
.btn--solid:hover { background: transparent; color: var(--fg, var(--ink)); }
.btn--ghost { background: transparent; color: var(--fg, var(--ink)); }
.btn--ghost:hover { background: var(--fg, var(--ink)); color: var(--bg, var(--paper)); }
.btn[disabled] { opacity: .5; cursor: progress; }

/* --------------------------------------------------------------------------
   Header: a static black bar with the contact button always visible
   -------------------------------------------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  background: #000; color: var(--light); border-bottom: 1px solid rgba(246, 245, 240, .12);
}
.header__inner {
  height: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.wordmark {
  font: 500 1.05rem/1 var(--serif);
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
.wordmark span { font-weight: 400; opacity: .55; }
/* Header: the stacked KT Studio mark instead of set type */
.wordmark--logo { display: inline-flex; align-items: center; }
.wordmark--logo img { height: 46px; width: auto; display: block; }

.nav ul { display: flex; gap: clamp(1.1rem, 2.2vw, 2.6rem); }
.nav a {
  display: inline-block; padding: .55rem 0; white-space: nowrap;
  font: 500 .64rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="true"] { border-bottom-color: currentColor; }

.header .btn { min-height: 2.65rem; padding: 0 1.3rem; border-color: var(--light); background: var(--light); color: #000; white-space: nowrap; }
.header .btn:hover { background: transparent; color: var(--light); }
.header__cta-short { display: none; }

.menu-btn {
  display: none; align-items: center; gap: .9rem;
  background: none; border: 0; padding: .5rem 0; cursor: pointer; color: var(--light);
  font: 500 .64rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
}
.menu-btn__icon { position: relative; width: 26px; height: 12px; }
.menu-btn__icon i { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; }
.menu-btn__icon i:first-child { top: 0; }
.menu-btn__icon i:last-child { top: 11px; }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:first-child { top: 5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:last-child { top: 5px; transform: rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 40;
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  visibility: hidden;
}
.mobile-nav.is-open { visibility: visible; }
.mobile-nav__link {
  display: block; padding: .55rem 0;
  font: 400 clamp(1.6rem, 6.8vw, 2.7rem)/1.15 var(--serif); text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
}
.mobile-nav__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.mobile-nav__foot p { font: 400 .95rem/1.7 var(--serif); }
body.nav-open { overflow: hidden; }

@media (max-width: 1099px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 600px) {
  .header__inner { gap: 1rem; }
  .wordmark { font-size: .95rem; letter-spacing: .12em; }
  .wordmark--logo img { height: 38px; }
  .header .btn { padding: 0 .9rem; min-height: 2.4rem; }
  .header__cta-long { display: none; }
  .header__cta-short { display: inline; }
}
@media (max-width: 380px) { .wordmark span { display: none; } .wordmark--logo img { height: 34px; } }

/* --------------------------------------------------------------------------
   Hero: the headline block centred beside the looping showreel
   -------------------------------------------------------------------------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  min-height: 100svh; background: #000;
}
.hero__inner {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: 1.4rem;
  min-height: 100svh;
  padding: calc(var(--header-h) + 2rem) clamp(1.5rem, 3vw, 3rem) 5rem var(--gutter);
}
.hero__eyebrow { margin-bottom: .4rem; }
.hero__title {
  font: 400 clamp(2.2rem, 5.4vw, 6rem)/.96 var(--serif);
  text-transform: uppercase; letter-spacing: -.018em;
  text-wrap: balance;
}
.hero__title em { font-style: italic; text-transform: none; letter-spacing: 0; }
.hero__lede { max-width: 44ch; color: var(--fg-2); }

.hero__media { position: relative; margin: 0; min-height: 100svh; overflow: hidden; background: #000; }
/* The showreel file is 4:5 with a white band on its right; a 9:16 frame that covers the column shows only the picture */
.hero__video { position: absolute; inset: 0; overflow: hidden; }
.hero__video video {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: max(100%, calc(100svh * 9 / 16)); aspect-ratio: 9 / 16; height: auto;
  object-fit: cover; object-position: left center; background: #000;
}
.hero__media figcaption {
  position: absolute; left: 1.5rem; bottom: 1.5rem; z-index: 2;
  font: 500 .58rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--light-2);
}

.hero__scroll {
  position: absolute; left: var(--gutter); bottom: 2.2rem;
  display: inline-flex; align-items: center; gap: .9rem;
  font: 500 .58rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--fg-2);
}
.hero__scroll i { display: block; width: 56px; height: 1px; background: var(--fg-3); }
.hero__cta { align-self: flex-start; margin-top: .4rem; }
.hero__cta:hover { background: var(--fg); color: var(--bg); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__inner { min-height: 0; padding: calc(var(--header-h) + 1.25rem) var(--gutter) 2rem; gap: 1.1rem; }
  .hero__eyebrow { margin-bottom: .2rem; }
  .hero__media { min-height: 0; aspect-ratio: 9 / 16; }
  .hero__video video { width: 100%; }
  .hero__scroll { display: none; }
}

/* --------------------------------------------------------------------------
   Industries banner: a slim moving line, small type, small dots between items.
   The only animation on the page.
   -------------------------------------------------------------------------- */
.ticker { overflow: hidden; padding: .7rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ticker__track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track span {
  display: flex; align-items: center; gap: 1.6rem; padding: 0 .8rem;
  font: 500 .62rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--fg-2);
  white-space: nowrap;
}
.ticker__track span::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .7; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Sections: little air above each block; the small label sits close to its title
   -------------------------------------------------------------------------- */
.section { position: relative; padding: clamp(3rem, 6vw, 5rem) var(--gutter); }
.section--tight { padding-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.section__inner { max-width: var(--max); margin: 0 auto; }
.section__head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 1.25rem clamp(1.5rem, 4vw, 4rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
}
.section__head-main { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 380px; }
.section__head-side { display: flex; flex-direction: column; gap: 1.1rem; flex: 0 1 46ch; padding-bottom: .4rem; }

/* Image frames: the fixed-ratio boxes photographs sit in */
.frame { overflow: hidden; background: var(--ph); }
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Her portraits are never cropped: these frames take the photo's own proportions */
.frame--whole { aspect-ratio: auto; background: none; }
.frame--whole img { height: auto; object-fit: contain; }

/* About (paper): label, title and copy in one column, the portrait centred beside them */
.about__grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 6rem); align-items: center;
}
.about__text { display: flex; flex-direction: column; gap: 1.2rem; max-width: 60ch; }
.about__text .label + .title { margin-top: -.85rem; margin-bottom: .5rem; }
.about__text p:not(.lead) { color: var(--fg-2); }
.about__text .link { align-self: flex-start; margin-top: .3rem; }
.about__media { width: 100%; max-width: 440px; justify-self: end; }
.about__media figcaption { margin-top: .8rem; font: 400 .72rem/1.5 var(--sans); letter-spacing: .08em; color: var(--fg-2); }
@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__media { justify-self: start; max-width: 400px; }
}

/* Services: the portfolio's services page written over a band of the sofa photograph.
   The band is cut to show a little wall, the sofa and a little of the chequered floor
   (the band is only as tall as the text; the photo covers it, anchored at 73% so wall, sofa and floor show);
   a dark wash keeps the type legible. */
.services {
  position: relative; isolation: isolate; text-align: center;
  padding: clamp(3rem, 5.5vw, 4.5rem) var(--gutter);
  background: var(--black) url("../assets/services-sofa.jpg") center 73% / cover no-repeat;
}
.services::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10, 10, 10, .58); }
.services__inner { max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.services__inner .title { margin-bottom: clamp(1.25rem, 2.6vw, 2.25rem); }
.services__list {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  font: 600 clamp(1.15rem, 2.4vw, 2.1rem)/1.25 var(--serif); text-transform: uppercase; letter-spacing: .02em;
  margin-bottom: clamp(1.1rem, 2.4vw, 2rem);
}
.services__list li { display: flex; align-items: baseline; }
.services__list li + li::before { content: ""; display: inline-block; width: 1px; height: .85em; background: currentColor; opacity: .55; margin: 0 .95em; align-self: center; }
.services__list a:hover { opacity: .7; }
.services__for { font: 600 .64rem/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; margin-bottom: .6rem; }
.services__industries { font: 400 clamp(.98rem, 1.35vw, 1.2rem)/1.5 var(--serif); }
.services__industries i, .services__overview i, .slist__desc i { font-style: normal; opacity: .45; padding: 0 .4em; }
.services__all { margin-top: clamp(1.25rem, 2.6vw, 2rem); }
.services__overview { font: 600 clamp(.95rem, 1.2vw, 1.15rem)/1.5 var(--serif); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 860px) {
  .services { padding: clamp(3.5rem, 9vw, 5rem) var(--gutter); background-position: center 62%; }
  .services__list { gap: .1em .15em; font-size: 1.05rem; }
  .services__list li + li::before { margin: 0 .6em; }
}
@media (max-width: 600px) {
  /* Phones: one service per line, no separators */
  .services__list { flex-direction: column; align-items: center; gap: .15em; font-size: 1.1rem; }
  .services__list li + li::before { display: none; }
}

/* Services page (black): the index list, each line with its image beside it */
.services-page { padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem)); }
.slist { border-top: 1px solid var(--rule); }
.slist__item { border-bottom: 1px solid var(--rule); }
.slist__link {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px) minmax(0, 34ch) 2.5rem;
  gap: 1.5rem clamp(1.5rem, 3vw, 3.5rem); align-items: center;
  padding: clamp(1.4rem, 2.6vw, 2.4rem) 0;
}
.slist__title { font: 400 clamp(1.3rem, 2.5vw, 2.5rem)/1.05 var(--serif); text-transform: uppercase; letter-spacing: .02em; text-wrap: balance; }
.slist__thumb { position: relative; margin: 0; aspect-ratio: 4 / 5; }
.slist__thumb video { display: block; width: 100%; height: 100%; object-fit: cover; }
.slist__tag {
  position: absolute; left: .9rem; bottom: .9rem; max-width: calc(100% - 1.8rem); margin: 0;
  background: rgba(17, 17, 16, .72); color: var(--light);
  font: 500 .56rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: .5rem .7rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.slist__desc { font-size: .92rem; line-height: 1.75; color: var(--fg-2); }
.slist__arrow { font: 400 1.6rem/1 var(--serif); justify-self: end; }
.slist__item:hover .slist__arrow { opacity: .6; }
.services-page__cta {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem;
}
.services-page__cta .lead { max-width: 40ch; }
@media (max-width: 860px) {
  .slist__link { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "thumb" "desc"; row-gap: 1rem; }
  .slist__title { grid-area: title; }
  .slist__desc { grid-area: desc; }
  .slist__arrow { display: none; }
  .slist__thumb { grid-area: thumb; aspect-ratio: 16 / 10; max-width: 440px; }
}

/* Our work: every band the same height, laid out like the portfolio's pages —
   the name centred above, the pictures below at one shared height */
.section--work-head { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.work__foot { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.work__more {
  padding-top: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule); text-align: left;
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: baseline;
  font: 400 1rem/1.4 var(--serif); color: var(--fg-2);
}
.work__more .label { margin-right: .5rem; }
.card { --media-h: min(46vh, 430px); display: flex; align-items: center; height: clamp(620px, 80vh, 760px); padding: 1.5rem 0; }
.card__inner {
  width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center;
  gap: clamp(1.25rem, 2.5vw, 2rem); text-align: center;
}
.card__text { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.card__cat { font: 500 .62rem/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--fg-2); }
.card__name { font: 400 clamp(1.3rem, 2.4vw, 2.5rem)/1.1 var(--sans); text-transform: uppercase; letter-spacing: .12em; text-wrap: balance; }
.card__name em { font-style: normal; font-weight: 400; }
.card__credit { font-size: .7rem; letter-spacing: .06em; color: var(--fg-3); }
.card__media { margin: 0; width: 100%; max-width: 100% !important; display: flex; justify-content: center; }
.card__media .frame { height: var(--media-h) !important; width: auto; max-width: 100%; aspect-ratio: var(--ar, 4 / 5); }
.card__media .frame[style*="--ar:auto"], .card__media .frame:has(.strip) { aspect-ratio: auto; }
.card__media .frame--pair { --media-h: min(46vh, 430px, calc((min(100vw - 2 * var(--gutter), var(--max)) - 10px) / 4.8)); }
.card__media .frame--row { height: auto !important; width: min(100%, calc(var(--n, 4) * var(--ratio, .8) * var(--media-h))); background: none; }
.mosaic, .pair { display: grid; gap: 3px; height: 100%; }
.mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mosaic--3 { grid-template-columns: repeat(3, 1fr); }
.pair { grid-template-columns: var(--cols, 1fr 1fr); }
.mosaic img, .pair img { width: 100%; height: 100%; object-fit: cover; }
.stack { display: flex; flex-direction: column; gap: clamp(6px, 1vw, 12px); }
.stack > img { width: 100%; height: auto; display: block; }
.stack > .pair { width: 100%; height: auto; }
/* A strip of whole photographs side by side (same proportions, equal heights) */
.strip { display: flex; --strip-gap: clamp(4px, .8vw, 10px); gap: var(--strip-gap); height: 100%; }
.strip img { height: 100%; width: auto; min-width: 0; display: block; }
/* Photo sliders (.frame--row): four pictures edge to edge, the rest reached with the slim bar underneath */
.frame--row .strip { height: auto; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.frame--row .strip::-webkit-scrollbar { display: none; }
.slidebar { position: relative; height: 2px; margin-top: 12px; background: var(--rule); cursor: pointer; touch-action: none; }
.slidebar::before { content: ""; position: absolute; inset: -10px 0; }
.slidebar__thumb { position: absolute; left: 0; top: -1px; height: 4px; background: var(--fg); }
.frame--row .strip img { height: auto; width: calc(100% / var(--n, 4)); flex: 0 0 calc(100% / var(--n, 4)); scroll-snap-align: start; }
@media (max-width: 860px) {
  .card { height: auto; padding: 2.5rem 0; border-top: 1px solid var(--rule); }
  .card__inner { gap: 1.5rem; }
  .card__media .frame { height: auto !important; width: 100%; max-width: 100%; }
  .strip { height: auto; flex-wrap: wrap; }
  .strip img { height: auto; flex: 1 1 30%; }
  .strip--pair img { flex-basis: 100%; }
  /* Photo sliders: two pictures per view on small screens, slide for the rest */
  .frame--row .strip { flex-wrap: nowrap; }
  .frame--row .strip img { width: 50%; flex: 0 0 50%; }
}

/* KT Studio Live (black): the host's portrait beside the copy */
.live__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.live__text { display: flex; flex-direction: column; gap: 1.4rem; max-width: 60ch; }
.live__text .label + .title { margin-top: -1rem; }
.live__text > p:not(.lead):not(.label):not(.live__host) { color: var(--fg-2); }
.live__host { border-left: 2px solid var(--fg); padding-left: 1.1rem; color: var(--fg-2); }
.live__host strong { font-weight: 500; color: var(--fg); }
.live__cta { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; }
.live__media { position: relative; margin: 0; width: 100%; max-width: 480px; justify-self: end; }
.live__media figcaption {
  margin-top: .9rem;
  display: flex; align-items: center; gap: 1rem;
  font: 400 .68rem/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2);
}
.live-badge {
  display: inline-flex; align-items: center; border: 1px solid var(--rule-strong); padding: .45rem .7rem;
  font: 600 .56rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--fg);
}
.live-dot {
  display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .65rem;
  background: var(--live); vertical-align: middle; position: relative; top: -1px;
}
.live__what { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 1rem 0; }
.live__what summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font: 500 .66rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--fg);
}
.live__what summary::-webkit-details-marker { display: none; }
.live__what summary::after { content: "+"; font: 300 1.3rem/1 var(--serif); }
.live__what[open] summary::after { content: "\2013"; }
.live__what p { margin-top: 1rem; font-size: .92rem; color: var(--fg-2); }
.steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.steps li { display: flex; flex-direction: column; gap: .6rem; border-top: 1px solid var(--rule); padding-top: 1.2rem; }
.steps h3 { font: 400 1.2rem/1.2 var(--serif); }
.steps p { font-size: .9rem; color: var(--fg-2); }
.live__brands {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 6vw, 7rem);
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 2.25rem; border-top: 1px solid var(--rule);
}
.live__brands-title { font: 400 clamp(1.4rem, 2.3vw, 2.1rem)/1.1 var(--serif); margin-top: .35rem; }
.live__brands > div:last-child { display: flex; flex-direction: column; gap: 1.5rem; max-width: 60ch; }
.live__brands > div:last-child > p { color: var(--fg-2); }
@media (max-width: 860px) {
  .live__grid, .live__brands { grid-template-columns: 1fr; }
  .live__media { justify-self: start; max-width: 420px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* Our approach (paper) — wording from the KT Studio social media proposal */
.manifesto {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 8rem); align-items: center;
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
}
.manifesto__media { margin: 0; width: 100%; max-width: 480px; justify-self: end; }
.manifesto__media .frame { aspect-ratio: 3 / 4; }
.manifesto__media figcaption { margin-top: .8rem; font: 500 .58rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--fg-2); }
.manifesto__text { display: flex; flex-direction: column; gap: 1.6rem; max-width: 64ch; }
.manifesto__text .label + .manifesto__line { margin-top: -1.2rem; }
.manifesto__line { font: 400 clamp(1.5rem, 3.2vw, 3.2rem)/1.08 var(--serif); text-transform: uppercase; letter-spacing: -.012em; text-wrap: balance; }
.manifesto__line em { font-style: italic; text-transform: none; }
.approach { display: flex; flex-direction: column; border-top: 1px solid var(--rule); max-width: 56ch; }
.approach li { padding: .95rem 0; border-bottom: 1px solid var(--rule); color: var(--fg-2); font-size: .94rem; line-height: 1.55; }
@media (max-width: 860px) {
  .manifesto { grid-template-columns: 1fr; }
  .manifesto__media { justify-self: start; max-width: 400px; }
}

/* Iconic imagery (black): a still grid, a swipeable row on phones */
.gallery__grid { width: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.75rem, 1.5vw, 1.5rem); }
.g { margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.g .frame { aspect-ratio: 4 / 5; }
.g figcaption { font: 500 .55rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-2); }
@media (max-width: 1023px) { .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .gallery__grid {
    display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 1rem; width: auto;
  }
  .gallery__grid::-webkit-scrollbar { display: none; }
  .g { flex: 0 0 68vw; max-width: 320px; scroll-snap-align: start; }
}

/* Clients (paper): sliceable logo row with arrows, drag and a progress bar */
.slider__nav { flex-direction: row; gap: .5rem; padding-bottom: .25rem; flex: 0 0 auto; margin-left: auto; }
.slider__btn {
  width: 3.25rem; height: 3.25rem; border: 1px solid var(--rule-strong); background: none; color: var(--fg); cursor: pointer;
  font: 400 1.2rem/1 var(--serif); transition: background .25s, color .25s;
}
.slider__btn:hover { background: var(--fg); color: var(--bg); }
.slider { position: relative; border-top: 1px solid var(--rule); padding-top: 2.25rem; }
.slider__track {
  display: flex; gap: var(--slide-gap, clamp(1rem, 2.5vw, 2.5rem));
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 1.5rem; cursor: grab;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.slider__item {
  flex: 0 0 calc((100% - 4 * var(--slide-gap, clamp(1rem, 2.5vw, 2.5rem))) / 5);
  scroll-snap-align: start; height: 120px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule);
}
.slider__item:hover { border-color: var(--rule-strong); }
.slider__item img { max-height: 48px; max-width: 68%; width: auto; height: auto; object-fit: contain; opacity: .88; }
.theme-dark .slider__item img { filter: invert(1) brightness(1.1); }
.slider__progress { position: relative; height: 1px; background: var(--rule); }
.slider__progress i { position: absolute; top: -1px; left: 0; height: 3px; width: 20%; background: var(--fg); }
.logo-text {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  font: 600 1.35rem/1 var(--serif); letter-spacing: .02em; text-transform: uppercase; opacity: .9;
}
.logo-text small { font: 500 .5rem/1 var(--sans); letter-spacing: .32em; }
@media (max-width: 1023px) { .slider__item { flex-basis: calc((100% - 2 * var(--slide-gap, clamp(1rem, 2.5vw, 2.5rem))) / 3); } }
@media (max-width: 600px) { .slider__item { flex-basis: calc((100% - var(--slide-gap, clamp(1rem, 2.5vw, 2.5rem))) / 2); height: 96px; } }

/* Contact (paper) */
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.contact__text { display: flex; flex-direction: column; gap: 1.4rem; }
.contact__text .label + .title { margin-top: -1rem; }
.contact__details { display: flex; flex-direction: column; gap: 1.2rem; margin-top: .4rem; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.contact__details dt { font: 500 .6rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--fg-3); margin-bottom: .4rem; }
.contact__details dd { font: 400 1.05rem/1.4 var(--serif); }
.contact__social { display: flex; gap: 1.5rem; }
.contact__details a { border-bottom: 1px solid transparent; }
.contact__details a:hover { border-color: currentColor; }
.contact__panel {
  border: 1px solid var(--rule-strong); padding: clamp(1.5rem, 3vw, 2.75rem);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.contact__panel .label + .contact__panel-title { margin-top: -.7rem; }
.contact__panel-title { font: 400 clamp(1.3rem, 2vw, 1.85rem)/1.15 var(--serif); }
.contact__panel > p:not(.label):not(.contact__panel-title) { color: var(--fg-2); }
.contact__panel-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .4rem; }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }

/* Form fields (inside the brief) */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem; position: relative; }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field label { font: 500 .6rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--fg-2); }
.field input, .field textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--rule-strong); border-radius: 0;
  background: transparent; padding: .65rem 0; margin: 0;
  font: 400 1rem/1.5 var(--sans); color: var(--fg);
  appearance: none; -webkit-appearance: none;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--fg); }
.field__error { display: none; font-size: .74rem; color: var(--error); }
.field.is-invalid .field__error { display: block; }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: var(--error); }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.form__note { grid-column: 1 / -1; font-size: .76rem; color: var(--fg-3); }
.form__note a { text-decoration: underline; text-underline-offset: 3px; }
.form__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.form__status { font-size: .86rem; min-height: 1.4em; color: var(--fg-2); }
.form__status.is-error { color: var(--error); }
.form__success { display: none; grid-column: 1 / -1; padding: 2rem 0; border-top: 1px solid var(--rule); }
.form__success-copy { margin-top: 1rem; color: var(--fg-2); }
.form__success-copy a { text-decoration: underline; text-underline-offset: 3px; }
.form.is-sent > *:not(.form__success), .brief__form.is-sent > *:not(.form__success) { display: none; }
.form.is-sent .form__success, .brief__form.is-sent .form__success { display: block; }
@media (max-width: 600px) { .form { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Footer (black)
   -------------------------------------------------------------------------- */
.footer {
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 2.5rem;
}
.footer__mark { width: min(300px, 55vw); }
.footer__row {
  width: 100%; max-width: var(--max);
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem 2.5rem; flex-wrap: wrap;
  border-top: 1px solid var(--rule); padding-top: 1.5rem;
}
.footer nav ul { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; }
.footer nav a, .footer__meta a { font: 500 .6rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; border-bottom: 1px solid transparent; }
.footer nav a:hover, .footer__meta a:hover { border-color: currentColor; }
.footer__meta { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; font-size: .72rem; color: var(--fg-2); }

/* --------------------------------------------------------------------------
   Brief builder pop-up
   -------------------------------------------------------------------------- */
.brief {
  border: 0; padding: 0; width: min(92vw, 840px); max-height: 92vh; overflow: auto;
  background: var(--paper); color: var(--ink);
}
.brief::backdrop { background: rgba(10, 10, 10, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.brief__form { display: flex; flex-direction: column; gap: 1.75rem; padding: clamp(1.5rem, 4vw, 3rem); }
.brief__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; }
.brief__title { font: 400 clamp(1.5rem, 2.8vw, 2.4rem)/1 var(--serif); text-transform: uppercase; letter-spacing: -.01em; margin-top: .3rem; }
.brief__title em { font-style: italic; text-transform: none; }
.brief__close {
  background: none; border: 1px solid currentColor; color: inherit; cursor: pointer; white-space: nowrap;
  font: 500 .6rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; padding: .7rem .9rem;
  transition: background .25s, color .25s;
}
.brief__close:hover { background: var(--ink); color: var(--paper); }
.brief__step { border: 0; border-top: 1px solid var(--rule); padding: 1.25rem 0 0; margin: 0; min-inline-size: 0; }
.brief__step > legend { float: left; width: 100%; padding: 0; margin-bottom: 1rem; }
.brief__step .field__error { margin-top: .75rem; }
.brief__step.is-invalid .field__error { display: block; }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; clear: both; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-block; border: 1px solid var(--rule-strong); padding: .75rem 1rem; cursor: pointer;
  font: 500 .62rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  transition: background .25s, color .25s, border-color .25s;
}
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.brief .form { gap: 1.25rem 1.5rem; clear: both; }
.brief .form__success { border-top: 0; padding-top: 0; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 60; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); padding: .9rem 1.2rem;
  font: 400 .8rem/1.45 var(--sans); max-width: min(90vw, 440px); text-align: center;
  visibility: hidden;
}
.toast.is-visible { visibility: visible; }

/* Utilities */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.dialog-open { overflow: hidden; }

/* The banner stops for visitors who ask for reduced motion; clips stay paused (see main.js) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: .4rem; }
}

@media print {
  .header, .mobile-nav, .hero__scroll, .ticker, .toast, dialog { display: none !important; }
  .services { background: none; color: var(--ink); }
}

/* ---------- About page ---------- */
.about-page { padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem)); }
.about-page .about__grid { align-items: start; }
.about__video { aspect-ratio: 9 / 16; }
.about-page .about__text .contact__panel-actions { margin-top: .6rem; align-items: center; gap: 1rem 1.75rem; }
.about__points {
  list-style: none; padding: 1.75rem 0 0; margin: clamp(2rem, 4vw, 3rem) 0 0; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2.5rem;
}
.about__points li { position: relative; padding-left: 1.5rem; font-size: .95rem; line-height: 1.6; color: var(--fg-2); }
.about__points li::before { content: "\2014"; position: absolute; left: 0; top: 0; color: var(--fg-3); }
/* Instagram feed: a grid of posts, each opening the profile */
.ig__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.5rem, 1vw, 1rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.ig__grid a { display: block; }
.ig__grid .frame { aspect-ratio: 4 / 5; }
.ig__grid img { transition: opacity .3s var(--ease); }
.ig__grid a:hover img { opacity: .82; }
@media (max-width: 860px) {
  .about__points { grid-template-columns: 1fr; }
  .ig__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Opening sequence (home) ----------
   html.intro-on is set by a tiny inline script in index.html before first paint; main.js removes the
   panel when it has lifted and drops the class once the hero has settled. Without the class nothing here
   applies, so the page is unchanged for section links, reduced-motion visitors and the other pages. */
.intro { display: none; }
.intro-lock, .intro-lock body { overflow: hidden; }
.intro-on .intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 120;
  background: #000; color: var(--light); cursor: pointer;
  animation: intro-lift 1.05s cubic-bezier(.77, 0, .18, 1) 2.9s both;
}
.intro__panel { display: grid; justify-items: center; gap: 1.1rem; animation: intro-in 1.1s var(--ease) .15s both; }
.intro__mark { width: min(300px, 58vw); height: auto; display: block; }
.intro__rule { display: block; width: 56px; height: 1px; background: var(--light-3); transform-origin: center; animation: intro-rule .9s var(--ease) .9s both; }
.intro__line { margin: 0; font: 500 .62rem/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--light-2); animation: fade-in .9s var(--ease) 1.2s both; }

.intro-on .header { animation: fade-in .9s var(--ease) 3.6s both; }
.intro-on .hero__eyebrow { animation: rise-in .9s var(--ease) 3.25s both; }
.intro-on .hero__title { animation: rise-in 1.05s var(--ease) 3.35s both; }
.intro-on .hero__lede { animation: rise-in .95s var(--ease) 3.5s both; }
.intro-on .hero__cta { animation: rise-in .9s var(--ease) 3.55s both; }
.intro-on .hero__scroll { animation: fade-in .9s var(--ease) 4s both; }
.intro-on .hero__media { animation: media-in 1.4s var(--ease) 3.25s both; }

@keyframes intro-lift { to { transform: translateY(-101%); } }
@keyframes intro-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes intro-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes media-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* ---------- Branding packages (services page): the portfolio's three brand boards, as designed ---------- */
.packages__head { text-align: center; margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.packages__head .label + .title { margin-top: .4rem; }
.packages__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.6vw, 2.5rem); align-items: start; }
.package { margin: 0; text-align: center; }
.package__title { margin: 0 0 1rem; font: 400 clamp(1.15rem, 1.7vw, 1.6rem)/1.2 var(--serif); text-transform: uppercase; letter-spacing: .01em; }
.package__title em { font-style: italic; text-transform: none; letter-spacing: 0; }
.package .frame { aspect-ratio: 1167 / 1500; background: none; }
.package .frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.package__cat { margin-top: 1.1rem; font: 500 .68rem/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--fg-2); }
@media (max-width: 860px) { .packages__grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* ---------- Two images with a caption each (Ronny Kobo: Instagram feed + e-mail newsletter) ---------- */
.frame--pair-caps { background: none; }
.strip--pair .pair__item { display: flex; flex-direction: column; align-items: center; height: 100%; margin: 0; }
.strip--pair .pair__item img { height: calc(100% - 1.7rem); width: auto; }
.pair__cap { margin-top: .55rem; font: 500 .58rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; }
@media (max-width: 860px) {
  .strip--pair .pair__item { flex: 1 1 100%; height: auto; }
  .strip--pair .pair__item img { height: auto; width: 100%; }
}

/* ---------- Our Work dividers: the deck's Campaigns / Branding / Social Media pages as slim strips between the bands ---------- */
.work-divider { position: relative; display: grid; place-items: center; text-align: center; min-height: clamp(150px, 24vh, 230px); padding: 2.2rem var(--gutter); background-color: #000; background-position: center; background-size: cover; background-repeat: no-repeat; color: var(--light); }
.work-divider::before { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 10, .5); }
.work-divider > * { position: relative; margin: 0; }
.work-divider .label { color: var(--light-2); margin-bottom: .55rem; }
.work-divider .title { font-size: clamp(1.7rem, 3.6vw, 2.8rem); }
.pair__item--titled img { height: calc(100% - 4rem); }
.pair__title { margin: 0 0 .5rem; font: 400 clamp(.95rem, 1.3vw, 1.15rem)/1.2 var(--serif); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.pair__title em { font-style: italic; text-transform: none; letter-spacing: 0; }

/* Brief builder: the brief stays on screen after sending, with a copy button */
.form__brief { margin: 1.25rem 0 .75rem; padding: 1rem 1.1rem; border: 1px solid var(--rule); text-align: left; white-space: pre-wrap; word-break: break-word; font: 400 .85rem/1.6 var(--sans); color: var(--fg-2); max-height: 220px; overflow: auto; }
.form__copy { margin-bottom: .5rem; }

/* ---------- Phones: no caption or label under about 11px ---------- */
@media (max-width: 600px) {
  .card__cat, .card__credit, .pair__cap, .pair__title, .g figcaption, .hero__media figcaption, .manifesto__media figcaption,
  .slist__tag, .live-badge, .footer nav a, .footer__meta a, .contact__details dt, .field label, .chip span,
  .ticker__track span, .package__cat, .intro__line, .services__for, .live__media figcaption { font-size: .68rem; }
  .label { font-size: .7rem; }
  .form__note, .form__status { font-size: .84rem; }
  .btn { min-height: 3.1rem; }
}