:root {
  --black: #080808;
  --near-black: #101010;
  --charcoal: #171717;
  --charcoal-2: #202020;
  --white: #ffffff;
  --soft-white: #f5f5f2;
  --muted: #a6a6a0;
  --line: rgba(255,255,255,.14);
  --line-dark: rgba(0,0,0,.14);
  --silver: #c8c8c2;
  --accent: #a99d82;
  --container: 1480px;
  --pad: clamp(22px, 4vw, 72px);
  --ease: cubic-bezier(.2,.8,.2,1);
  --header-h: 86px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  margin: 0;
  background: var(--black);
  color: var(--soft-white);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.menu-open, body.modal-open { overflow: hidden; }
::selection { background: var(--soft-white); color: var(--black); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img, video { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--soft-white); outline-offset: 4px; }

.skip-link { position: fixed; left: 16px; top: -100px; z-index: 5000; background: #fff; color: #000; padding: 10px 14px; }
.skip-link:focus { top: 16px; }

.container { width: min(calc(100% - (var(--pad) * 2)), var(--container)); margin-inline: auto; }
.container--wide { width: min(calc(100% - 32px), 1760px); margin-inline: auto; }
.section { position: relative; padding: clamp(88px, 10vw, 170px) 0; }
.section--tight { padding: clamp(70px, 7vw, 110px) 0; }
.section--light { background: var(--soft-white); color: var(--black); }
.section--charcoal { background: var(--near-black); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .65; }
.kicker { color: var(--muted); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.display {
  margin: 0;
  font-size: clamp(54px, 8.3vw, 145px);
  line-height: .84;
  letter-spacing: -.06em;
  text-transform: uppercase;
  font-weight: 760;
}
.display--medium { font-size: clamp(48px, 6.6vw, 108px); }
.display--small { font-size: clamp(43px, 5.2vw, 82px); }
.display .serif, .serif { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic; text-transform: none; letter-spacing: -.045em; }
.lede { max-width: 690px; font-size: clamp(18px, 2vw, 28px); line-height: 1.35; letter-spacing: -.025em; }
.copy { color: var(--muted); max-width: 620px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: clamp(45px, 7vw, 96px); }
.section-head__text { max-width: 960px; }
.section-head__aside { max-width: 330px; color: var(--muted); font-size: 14px; }

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: var(--header-h);
  transition: height .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { height: 72px; background: rgba(8,8,8,.82); backdrop-filter: blur(18px); border-color: rgba(255,255,255,.1); }
.site-header__inner { width: min(calc(100% - 40px), 1780px); height: 100%; margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; justify-self: start; }
.brand img { width: 45px; height: 45px; }
.brand__text { display: grid; line-height: 1.05; }
.brand__text strong { font-size: 13px; letter-spacing: .02em; text-transform: uppercase; }
.brand__text span { margin-top: 5px; font-size: 9px; letter-spacing: .17em; color: #a6a6a0; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); }
.site-nav a { position: relative; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #d8d8d3; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: #fff; transition: right .3s var(--ease); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { right: 0; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 9px; }
.header-phone { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--line); transition: background .3s, color .3s; }
.header-phone:hover { background: #fff; color: #000; }
.menu-toggle { display: none; width: 48px; height: 48px; border: 1px solid var(--line); background: rgba(0,0,0,.1); padding: 0; align-items: center; justify-content: center; cursor: pointer; }
.menu-toggle span, .menu-toggle::before { content: ""; display: block; position: absolute; width: 18px; height: 1px; background: currentColor; transition: transform .35s var(--ease); }
.menu-toggle::before { transform: translateY(-4px); }
.menu-toggle span { transform: translateY(4px); }
.menu-toggle.is-open::before { transform: rotate(45deg); }
.menu-toggle.is-open span { transform: rotate(-45deg); }

/* Buttons */
.btn {
  --btn-bg: var(--soft-white);
  --btn-color: var(--black);
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 22px;
  border: 1px solid rgba(255,255,255,.2);
  background: var(--btn-bg);
  color: var(--btn-color);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .3s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn .arrow { display: inline-block; transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }
.btn--dark { --btn-bg: var(--black); --btn-color: var(--white); border-color: var(--black); }
.btn--ghost { --btn-bg: transparent; --btn-color: var(--soft-white); border-color: rgba(255,255,255,.34); }
.btn--ghost:hover { background: #fff; color: #000; border-color: #fff; }
.btn--ghost-dark { --btn-bg: transparent; --btn-color: var(--black); border-color: rgba(0,0,0,.3); }
.btn--ghost-dark:hover { background: #000; color: #fff; }
.btn--sm { min-height: 44px; padding-inline: 17px; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 5px; }

/* Hero */
.hero { min-height: 100svh; position: relative; display: flex; align-items: end; overflow: hidden; background: #050505; }
.hero-media { position: absolute; inset: 0; display: grid; grid-template-columns: 1.25fr .75fr .8fr; gap: 2px; background: #0a0a0a; }
.hero-media__col { min-width: 0; overflow: hidden; position: relative; }
.hero-media__col img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.05) brightness(.72); transform: scale(1.025); animation: heroZoom 12s var(--ease) both; }
.hero-media__col:nth-child(2) { display: grid; grid-template-rows: 1fr 1fr; gap: 2px; }
.hero-media__col:nth-child(2) img { height: 50svh; }
.hero-media__col:nth-child(3) img { filter: saturate(.45) brightness(.48) contrast(1.1); }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,5,.28), rgba(5,5,5,.05) 50%, rgba(5,5,5,.34)), linear-gradient(0deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.06) 62%, rgba(5,5,5,.35) 100%); }
.hero-noise { position: absolute; inset: 0; opacity: .09; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.hero-content { position: relative; z-index: 2; width: 100%; padding: calc(var(--header-h) + 60px) var(--pad) clamp(36px, 5vw, 72px); }
.hero-content__inner { width: min(100%, 1680px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); align-items: end; gap: 50px; }
.hero-title { margin: 0; font-size: clamp(70px, 10.2vw, 180px); line-height: .76; letter-spacing: -.075em; text-transform: uppercase; font-weight: 800; text-shadow: 0 10px 40px rgba(0,0,0,.15); }
.hero-title span { display: block; }
.hero-title .outline { color: transparent; -webkit-text-stroke: 1.4px rgba(255,255,255,.92); }
.hero-aside { padding-bottom: 7px; }
.hero-aside p { margin: 0 0 26px; max-width: 460px; font-size: clamp(17px, 1.5vw, 23px); line-height: 1.4; color: #dfdfdb; }
.hero-meta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px 28px; color: #aaa; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.scroll-cue { position: absolute; z-index: 3; right: var(--pad); bottom: 45px; display: flex; align-items: center; gap: 11px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; writing-mode: vertical-rl; color: #c7c7c1; }
.scroll-cue::after { content: ""; width: 1px; height: 56px; background: linear-gradient(#fff, transparent); }
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1.015); } }

/* Brand statement */
.statement-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(30px, 6vw, 100px); align-items: start; }
.statement-copy { max-width: 1200px; margin: 0; font-size: clamp(42px, 6.4vw, 112px); line-height: .99; letter-spacing: -.055em; font-weight: 630; }
.statement-copy em { font-family: Georgia, serif; font-weight: 400; }
.statement-foot { margin-top: 70px; display: flex; justify-content: flex-end; }
.statement-foot p { max-width: 460px; color: #555550; font-size: 16px; }

/* Services */
.services-list { border-top: 1px solid var(--line); }
.service-row { position: relative; display: grid; grid-template-columns: 72px minmax(230px, 1.1fr) minmax(260px, .8fr) 48px; align-items: center; gap: 28px; min-height: 138px; border-bottom: 1px solid var(--line); overflow: hidden; }
.service-row__number { font-size: 11px; color: var(--muted); letter-spacing: .12em; }
.service-row__title { font-size: clamp(25px, 3vw, 48px); line-height: 1; text-transform: uppercase; letter-spacing: -.035em; font-weight: 670; }
.service-row__desc { color: var(--muted); font-size: 14px; max-width: 430px; }
.service-row__arrow { font-size: 22px; justify-self: end; transition: transform .35s var(--ease); }
.service-row:hover .service-row__arrow { transform: translate(5px,-5px); }
.service-preview { position: fixed; z-index: 80; width: 270px; height: 360px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.86) rotate(-2deg); transition: opacity .2s, transform .35s var(--ease); overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.service-preview.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(1deg); }
.service-preview img { width: 100%; height: 100%; object-fit: cover; }

/* Signature */
.signature { min-height: 92svh; position: relative; display: flex; align-items: center; overflow: hidden; }
.signature__image { position: absolute; inset: 0; }
.signature__image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; filter: brightness(.48) saturate(.68); }
.signature__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.8), rgba(0,0,0,.08) 68%), linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.08)); }
.signature__content { position: relative; z-index: 2; }
.signature .display { max-width: 970px; }
.annotation { position: absolute; z-index: 2; color: #deded7; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; }
.annotation::before { content: "+"; margin-right: 8px; color: var(--accent); }
.annotation--1 { top: 22%; right: 12%; }
.annotation--2 { top: 48%; right: 6%; }
.annotation--3 { bottom: 18%; right: 18%; }

/* Portfolio */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.filter-btn { border: 1px solid var(--line); color: #a8a8a2; background: transparent; min-height: 42px; padding: 0 15px; font-size: 10px; letter-spacing: .12em; cursor: pointer; transition: .25s; }
.filter-btn:hover, .filter-btn.is-active { color: #000; background: #fff; border-color: #fff; }
.section--light .filter-btn { border-color: var(--line-dark); color: #5a5a56; }
.section--light .filter-btn:hover, .section--light .filter-btn.is-active { background: #000; color: #fff; border-color: #000; }
.portfolio-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; gap: clamp(8px, 1.2vw, 18px); }
.portfolio-card { grid-column: span 4; min-height: 520px; position: relative; overflow: hidden; background: #121212; cursor: pointer; opacity: 1; transform: scale(1); transition: opacity .35s, transform .35s; }
.portfolio-card:nth-child(5n+1) { grid-column: span 7; min-height: 690px; }
.portfolio-card:nth-child(5n+2) { grid-column: span 5; min-height: 690px; }
.portfolio-card:nth-child(5n+4) { grid-column: span 5; min-height: 580px; }
.portfolio-card:nth-child(5n+5) { grid-column: span 7; min-height: 580px; }
.portfolio-card.is-hidden { display: none; }
.portfolio-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .7s var(--ease); filter: saturate(.8); }
.portfolio-card:hover img { transform: scale(1.035); filter: saturate(1); }
.portfolio-card__overlay { position: absolute; inset: auto 0 0; padding: 25px; background: linear-gradient(transparent, rgba(0,0,0,.82)); display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.portfolio-card__meta span { display: block; font-size: 9px; letter-spacing: .16em; color: #c2c2bd; margin-bottom: 7px; }
.portfolio-card__meta strong { font-size: 18px; letter-spacing: -.02em; }
.portfolio-card__view { width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; display: grid; place-items: center; font-size: 16px; }

/* Before/after */
.ba-layout { display: grid; grid-template-columns: .76fr 1.24fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.ba-frame { position: relative; aspect-ratio: 16/11; overflow: hidden; background: #151515; cursor: ew-resize; }
.ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-before { filter: saturate(.15) brightness(.65); }
.ba-after-wrap { position: absolute; inset: 0; width: 55%; overflow: hidden; border-right: 1px solid #fff; }
.ba-after-wrap img { width: 100vw; max-width: none; height: 100%; object-fit: cover; object-position: left center; }
.ba-handle { position: absolute; left: 55%; top: 50%; transform: translate(-50%,-50%); width: 62px; height: 62px; border-radius: 50%; border: 1px solid rgba(255,255,255,.8); background: rgba(0,0,0,.55); backdrop-filter: blur(10px); display: grid; place-items: center; pointer-events: none; }
.ba-handle::before { content: "↔"; font-size: 20px; }
.ba-range { position: absolute; inset: 0; opacity: 0; cursor: ew-resize; width: 100%; height: 100%; }
.ba-label { position: absolute; top: 18px; padding: 7px 9px; background: rgba(0,0,0,.72); font-size: 9px; letter-spacing: .14em; }
.ba-label--before { left: 18px; }
.ba-label--after { right: 18px; }
.demo-note { margin-top: 14px; color: #8d8d87; font-size: 11px; line-height: 1.5; }

/* Video showcase */
.video-grid { display: grid; grid-template-columns: 1.3fr .7fr; grid-template-rows: 1fr 1fr; gap: 12px; min-height: 760px; }
.video-card { position: relative; overflow: hidden; background: #111; min-height: 360px; cursor: pointer; }
.video-card:first-child { grid-row: 1 / 3; }
.video-card img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.66) saturate(.65); transition: transform .6s var(--ease), filter .6s; }
.video-card:hover img { transform: scale(1.025); filter: brightness(.78) saturate(.9); }
.video-card__overlay { position: absolute; inset: 0; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.5)); }
.video-card__label { font-size: 10px; letter-spacing: .17em; }
.play-button { width: 72px; height: 72px; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; display: grid; place-items: center; margin: auto; background: rgba(0,0,0,.22); backdrop-filter: blur(7px); transition: transform .35s var(--ease), background .35s; }
.video-card:hover .play-button { transform: scale(1.06); background: rgba(255,255,255,.12); }
.play-button::before { content: ""; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 4px; }
.video-card__foot { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.video-card__title { font-size: 18px; }
.video-card__status { color: #b5b5ae; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }

/* Workshop */
.workshop-strip { display: grid; grid-template-columns: 1.2fr .65fr .85fr; gap: 10px; height: min(72vw, 820px); max-height: 820px; }
.workshop-strip figure { margin: 0; position: relative; overflow: hidden; }
.workshop-strip img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.65) brightness(.8); transition: transform .8s var(--ease); }
.workshop-strip figure:hover img { transform: scale(1.035); }
.workshop-strip figure:nth-child(2) { margin-top: 11%; margin-bottom: 7%; }
.workshop-strip figure:nth-child(3) { margin-top: 5%; }
.workshop-labels { display: flex; gap: 28px; margin-top: 20px; color: #aaa; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }

/* Process */
.process { border-top: 1px solid var(--line); }
.process-step { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 30px; padding: 38px 0; border-bottom: 1px solid var(--line); align-items: start; }
.process-step__no { color: var(--muted); font-size: 11px; letter-spacing: .12em; }
.process-step h3 { margin: 0; font-size: clamp(29px, 4vw, 58px); text-transform: uppercase; line-height: 1; letter-spacing: -.04em; }
.process-step p { margin: 4px 0 0; color: var(--muted); max-width: 420px; }

/* About */
.about-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(40px, 8vw, 130px); align-items: center; }
.about-media { position: relative; height: min(74vw, 760px); min-height: 530px; overflow: hidden; }
.about-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6); }
.about-media__tag { position: absolute; right: 0; bottom: 0; padding: 16px 18px; background: #fff; color: #000; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.about-copy p { color: #555550; max-width: 570px; font-size: 17px; }
.about-copy .display { margin-bottom: 32px; }

/* Social proof */
.proof-panel { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(55px, 8vw, 110px) 0; display: grid; grid-template-columns: .7fr 1.3fr; gap: 50px; align-items: end; }
.proof-panel__quote { font-size: clamp(42px, 6vw, 90px); line-height: .95; letter-spacing: -.055em; margin: 0; }
.proof-panel__note { color: var(--muted); max-width: 410px; }

/* Final CTA */
.final-cta { position: relative; min-height: 88svh; overflow: hidden; display: flex; align-items: flex-end; }
.final-cta__media { position: absolute; inset: 0; }
.final-cta__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(.45) saturate(.58); }
.final-cta__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.93), rgba(0,0,0,.03) 70%), linear-gradient(90deg, rgba(0,0,0,.55), transparent 70%); }
.final-cta__content { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(55px, 8vw, 110px); }
.final-cta__content .display { max-width: 1100px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(50px, 10vw, 160px); }
.contact-block { border-top: 1px solid var(--line); }
.contact-row { display: grid; grid-template-columns: 130px 1fr; gap: 25px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.contact-row__label { color: var(--muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.contact-row__value { font-size: clamp(18px, 2vw, 28px); letter-spacing: -.02em; }
.contact-aside { align-self: start; position: sticky; top: 115px; }
.contact-aside__card { border: 1px solid var(--line); padding: clamp(28px, 4vw, 50px); background: #101010; }
.contact-aside__card p { color: var(--muted); }

/* Page hero */
.page-hero { position: relative; min-height: 72svh; padding: calc(var(--header-h) + 80px) 0 70px; display: flex; align-items: flex-end; overflow: hidden; }
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.32) saturate(.5); }
.page-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,8,8,.95), rgba(8,8,8,.05) 80%); }
.page-hero__content { position: relative; z-index: 2; }
.page-hero__meta { margin-top: 30px; display: flex; gap: 35px; color: #aaa; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }

/* Gallery editorial */
.editorial-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 95px; gap: 12px; }
.editorial-grid figure { margin: 0; position: relative; overflow: hidden; background: #111; cursor: pointer; }
.editorial-grid figure:nth-child(1) { grid-column: 1 / 8; grid-row: span 6; }
.editorial-grid figure:nth-child(2) { grid-column: 8 / 13; grid-row: span 5; }
.editorial-grid figure:nth-child(3) { grid-column: 1 / 5; grid-row: span 5; }
.editorial-grid figure:nth-child(4) { grid-column: 5 / 9; grid-row: span 6; }
.editorial-grid figure:nth-child(5) { grid-column: 9 / 13; grid-row: span 4; }
.editorial-grid figure:nth-child(6) { grid-column: 1 / 7; grid-row: span 6; }
.editorial-grid figure:nth-child(7) { grid-column: 7 / 13; grid-row: span 6; }
.editorial-grid figure:nth-child(8) { grid-column: 3 / 11; grid-row: span 7; }
.editorial-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .7s; filter: saturate(.72); }
.editorial-grid figure:hover img { transform: scale(1.025); filter: saturate(1); }
.editorial-grid figcaption { position: absolute; left: 18px; bottom: 16px; z-index: 2; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; text-shadow: 0 2px 10px #000; }

/* Legal */
.legal-shell { padding: calc(var(--header-h) + 70px) 0 120px; min-height: 80vh; }
.legal-shell .display { margin-bottom: 55px; }
.legal-card { max-width: 920px; border: 1px solid var(--line); padding: clamp(28px, 5vw, 60px); }
.legal-card h2 { font-size: 28px; margin-top: 45px; }
.legal-card h2:first-child { margin-top: 0; }
.legal-card p, .legal-card li { color: #b2b2ac; }
.placeholder-warning { border-left: 2px solid var(--accent); padding: 18px 20px; background: rgba(169,157,130,.08); color: #e8e0cf !important; }

/* Footer */
.site-footer { background: #050505; border-top: 1px solid var(--line); padding: 70px 0 28px; }
.footer-top { display: grid; grid-template-columns: 1.35fr .65fr .65fr; gap: 60px; padding-bottom: 65px; }
.footer-brand .brand img { width: 68px; height: 68px; }
.footer-tagline { max-width: 480px; margin-top: 25px; color: #aaa; }
.footer-title { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #777; margin-bottom: 18px; }
.footer-links { display: grid; gap: 9px; font-size: 14px; }
.footer-links a:hover { color: #aaa; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; gap: 25px; color: #666; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.footer-legal { display: flex; gap: 20px; }

/* Mobile menu */
.mobile-menu { position: fixed; inset: 0; z-index: 950; background: rgba(5,5,5,.98); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; padding: calc(var(--header-h) + 45px) 24px 30px; overflow-y: auto; }
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__nav { display: grid; border-top: 1px solid var(--line); }
.mobile-menu__nav a { border-bottom: 1px solid var(--line); padding: 16px 0; font-size: clamp(32px, 9vw, 58px); line-height: 1; letter-spacing: -.04em; text-transform: uppercase; }
.mobile-menu__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 35px; }

/* Sticky mobile */
.mobile-sticky { display: none; position: fixed; z-index: 800; inset: auto 10px 10px; background: rgba(11,11,11,.92); backdrop-filter: blur(14px); border: 1px solid var(--line); padding: 5px; grid-template-columns: 1fr 1fr; gap: 5px; }
.mobile-sticky .btn { min-height: 48px; }

/* Modals */
.modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(0,0,0,.84); backdrop-filter: blur(13px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.modal.is-open { opacity: 1; visibility: visible; }
.modal__panel { width: min(100%, 1180px); max-height: calc(100svh - 36px); overflow: auto; background: #0e0e0e; border: 1px solid var(--line); position: relative; }
.modal__close { position: sticky; float: right; right: 18px; top: 18px; z-index: 6; width: 48px; height: 48px; border: 1px solid var(--line); background: rgba(8,8,8,.8); display: grid; place-items: center; cursor: pointer; font-size: 22px; }

/* Lightbox */
.lightbox-panel { width: min(100%, 1500px); height: min(88svh, 940px); display: grid; grid-template-columns: minmax(0, 1fr) 360px; background: #070707; border: 1px solid var(--line); }
.lightbox-media { position: relative; min-height: 0; overflow: hidden; background: #030303; }
.lightbox-media img { width: 100%; height: 100%; object-fit: contain; }
.lightbox-info { padding: 85px 34px 34px; display: flex; flex-direction: column; }
.lightbox-info__category { font-size: 9px; color: #888; letter-spacing: .16em; }
.lightbox-info h3 { font-size: 34px; line-height: 1.04; letter-spacing: -.04em; margin: 16px 0 20px; }
.lightbox-info p { color: #aaa; }
.lightbox-counter { margin-top: auto; color: #777; font-size: 10px; letter-spacing: .14em; }
.lightbox-nav { display: flex; gap: 7px; margin-top: 20px; }
.lightbox-nav button { width: 52px; height: 52px; background: transparent; border: 1px solid var(--line); cursor: pointer; }

/* Video modal */
.video-modal-panel { width: min(100%, 1280px); background: #050505; border: 1px solid var(--line); }
.video-stage { aspect-ratio: 16/9; position: relative; background: #000; overflow: hidden; }
.video-stage video, .video-stage img { width: 100%; height: 100%; object-fit: contain; }
.video-placeholder-notice { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; text-align: center; background: linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.82)); }
.video-placeholder-notice__inner { max-width: 620px; }
.video-placeholder-notice h3 { font-size: clamp(32px, 5vw, 62px); margin: 0 0 15px; letter-spacing: -.05em; text-transform: uppercase; }
.video-placeholder-notice p { color: #aaa; }
.video-controls { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #0e0e0e; border-top: 1px solid var(--line); }
.video-control { width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; }
.video-progress { flex: 1; accent-color: #fff; }
.video-time { color: #aaa; font-size: 10px; min-width: 92px; text-align: center; }

/* Enquiry modal */
.enquiry-panel { width: min(100%, 1220px); height: min(92svh, 880px); background: var(--soft-white); color: var(--black); display: grid; grid-template-columns: 320px 1fr; overflow: hidden; border: 0; }
.enquiry-aside { padding: 42px; background: #0c0c0c; color: #fff; display: flex; flex-direction: column; }
.enquiry-aside .brand { margin-bottom: 80px; }
.enquiry-progress { margin-top: auto; }
.enquiry-progress__label { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .13em; color: #888; margin-bottom: 11px; }
.enquiry-progress__track { height: 1px; background: #333; }
.enquiry-progress__bar { height: 100%; width: 16.66%; background: #fff; transition: width .4s var(--ease); }
.enquiry-main { position: relative; padding: clamp(30px, 5vw, 74px); overflow-y: auto; }
.enquiry-close { position: absolute; right: 26px; top: 24px; width: 44px; height: 44px; border: 1px solid rgba(0,0,0,.2); background: transparent; cursor: pointer; font-size: 20px; }
.enquiry-step { display: none; max-width: 760px; min-height: 580px; padding-top: 45px; }
.enquiry-step.is-active { display: flex; flex-direction: column; animation: stepIn .45s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.enquiry-step__no { font-size: 10px; letter-spacing: .16em; color: #777; margin-bottom: 22px; }
.enquiry-step h2 { margin: 0 0 35px; font-size: clamp(40px, 5.8vw, 76px); line-height: .95; letter-spacing: -.055em; }
.option-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.option-card { position: relative; border: 1px solid rgba(0,0,0,.18); min-height: 68px; padding: 0 18px; display: flex; align-items: center; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.option-card:hover, .option-card:has(input:checked) { background: #000; color: #fff; border-color: #000; }
.option-card input { position: absolute; opacity: 0; pointer-events: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #666; }
.field input, .field textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(0,0,0,.28); background: transparent; color: #000; padding: 12px 0; outline: none; border-radius: 0; }
.field input:focus, .field textarea:focus { border-color: #000; }
.field textarea { min-height: 150px; resize: vertical; }
.field .error { color: #8b2019; font-size: 11px; min-height: 16px; }
.enquiry-actions { margin-top: auto; padding-top: 36px; display: flex; justify-content: space-between; gap: 10px; }
.enquiry-summary { border-top: 1px solid rgba(0,0,0,.16); }
.summary-row { display: grid; grid-template-columns: 165px 1fr; gap: 20px; padding: 13px 0; border-bottom: 1px solid rgba(0,0,0,.16); }
.summary-row span { color: #777; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.summary-row strong { font-weight: 600; }
.enquiry-success { display: none; min-height: 580px; padding-top: 70px; }
.enquiry-success.is-active { display: flex; flex-direction: column; justify-content: center; max-width: 740px; }
.enquiry-success h2 { font-size: clamp(48px, 7vw, 90px); line-height: .9; letter-spacing: -.06em; text-transform: uppercase; margin: 0 0 28px; }
.enquiry-success p { font-size: 18px; color: #4f4f4a; }

/* Cursor */
.cursor { position: fixed; z-index: 5000; width: 58px; height: 58px; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%) scale(.25); opacity: 0; transition: transform .22s var(--ease), opacity .22s, background .22s; mix-blend-mode: difference; display: grid; place-items: center; color: #fff; font-size: 8px; letter-spacing: .12em; }
.cursor.is-visible { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.cursor.is-active { background: #fff; color: #000; mix-blend-mode: normal; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 1180px) {
  .site-header__inner { grid-template-columns: 1fr auto; }
  .site-nav { display: none; }
  .header-actions .btn { display: none; }
  .menu-toggle { display: inline-flex; position: relative; }
  .hero-content__inner { grid-template-columns: 1fr; }
  .hero-aside { max-width: 620px; }
  .scroll-cue { display: none; }
  .portfolio-card, .portfolio-card:nth-child(n) { grid-column: span 6; min-height: 560px; }
  .video-grid { min-height: 640px; }
  .enquiry-panel { grid-template-columns: 230px 1fr; }
  .enquiry-aside { padding: 28px; }
}

@media (max-width: 860px) {
  :root { --header-h: 72px; --pad: 22px; }
  .section-head { display: block; }
  .section-head__aside { margin-top: 24px; }
  .brand__text span { display: none; }
  .header-phone { display: none; }
  .hero-media { grid-template-columns: 1fr .75fr; }
  .hero-media__col:nth-child(3) { display: none; }
  .hero-title { font-size: clamp(66px, 16vw, 122px); }
  .statement-grid { grid-template-columns: 1fr; }
  .service-row { grid-template-columns: 46px 1fr 34px; gap: 16px; min-height: 112px; }
  .service-row__desc { display: none; }
  .service-preview { display: none; }
  .ba-layout, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1.25fr .75fr; min-height: 760px; }
  .video-card:first-child { grid-column: 1 / 3; grid-row: auto; }
  .workshop-strip { height: 80vw; grid-template-columns: 1.2fr .8fr; }
  .workshop-strip figure:nth-child(3) { display: none; }
  .process-step { grid-template-columns: 58px 1fr; }
  .process-step p { grid-column: 2; }
  .proof-panel { grid-template-columns: 1fr; }
  .contact-aside { position: static; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .enquiry-panel { grid-template-columns: 1fr; height: min(96svh, 920px); }
  .enquiry-aside { display: none; }
  .lightbox-panel { grid-template-columns: 1fr; height: min(94svh, 980px); overflow: auto; }
  .lightbox-media { min-height: 62svh; }
  .lightbox-info { padding: 28px; }
  .editorial-grid { grid-auto-rows: 70px; }
}

@media (max-width: 640px) {
  body { padding-bottom: 72px; }
  .container--wide { width: calc(100% - 18px); }
  .site-header__inner { width: calc(100% - 28px); }
  .brand img { width: 39px; height: 39px; }
  .menu-toggle { width: 44px; height: 44px; }
  .mobile-sticky { display: grid; }
  .hero { min-height: 94svh; }
  .hero-media { grid-template-columns: 1fr; }
  .hero-media__col:nth-child(2) { display: none; }
  .hero-media__col img { object-position: 62% center; }
  .hero-content { padding-bottom: 26px; }
  .hero-title { font-size: clamp(65px, 21vw, 104px); line-height: .79; }
  .hero-title .outline { -webkit-text-stroke-width: 1px; }
  .hero-aside p { font-size: 16px; max-width: 330px; }
  .hero-meta { gap: 8px 18px; font-size: 9px; }
  .button-row { width: 100%; }
  .button-row .btn { flex: 1 1 140px; }
  .display { font-size: clamp(50px, 15vw, 76px); }
  .display--medium, .display--small { font-size: clamp(46px, 13vw, 68px); }
  .statement-copy { font-size: clamp(42px, 13vw, 68px); }
  .statement-foot { margin-top: 45px; justify-content: flex-start; }
  .service-row { min-height: 104px; }
  .service-row__title { font-size: 25px; }
  .signature { min-height: 80svh; }
  .annotation { display: none; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 9px; }
  .portfolio-card, .portfolio-card:nth-child(n) { grid-column: 1; min-height: 0; aspect-ratio: 4/5; }
  .ba-frame { aspect-ratio: 4/5; }
  .video-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
  .video-card, .video-card:first-child { grid-column: auto; grid-row: auto; min-height: 0; aspect-ratio: 4/5; }
  .workshop-strip { height: 120vw; grid-template-columns: 1fr 1fr; gap: 6px; }
  .process-step { padding: 28px 0; grid-template-columns: 42px 1fr; gap: 14px; }
  .about-media { min-height: 0; height: 120vw; }
  .final-cta { min-height: 82svh; }
  .contact-row { grid-template-columns: 1fr; gap: 7px; }
  .footer-top { grid-template-columns: 1fr; gap: 42px; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { display: grid; }
  .page-hero { min-height: 64svh; padding-bottom: 45px; }
  .page-hero__meta { flex-wrap: wrap; gap: 10px 20px; }
  .editorial-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .editorial-grid figure:nth-child(n) { grid-column: 1; grid-row: auto; aspect-ratio: 4/5; }
  .option-grid, .form-grid { grid-template-columns: 1fr; }
  .field--full { grid-column: auto; }
  .enquiry-main { padding: 24px; }
  .enquiry-step { padding-top: 42px; min-height: calc(96svh - 48px); }
  .enquiry-step h2 { font-size: clamp(38px, 12vw, 58px); }
  .option-card { min-height: 58px; }
  .summary-row { grid-template-columns: 1fr; gap: 3px; }
  .enquiry-actions { position: sticky; bottom: 0; background: var(--soft-white); padding: 15px 0 4px; }
  .enquiry-actions .btn { flex: 1; }
  .lightbox-media { min-height: 55svh; }
  .cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body > main { animation: pageIn .55s var(--ease) both; }
body.is-leaving > main { opacity: 0; transform: translateY(8px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
@media (prefers-reduced-motion: reduce) { body > main { animation: none; } }

/* =========================================================
   FINAL CORRECTION
   Restores original arrows + fixes mobile homepage hero
   ========================================================= */


/* ---------------------------------------------------------
   RESTORE ORIGINAL ARROWS
   --------------------------------------------------------- */

.btn .arrow,
.service-row__arrow,
.portfolio-card__view {
  position: static;
  background: none;
  -webkit-mask: none;
  mask: none;
  vertical-align: baseline;
}

/* Remove the incorrect CSS-drawn arrows from previous fix */
.btn .arrow::before,
.btn .arrow::after,
.service-row__arrow::before,
.service-row__arrow::after,
.portfolio-card__view::before,
.portfolio-card__view::after {
  content: none !important;
  display: none !important;
}

/* Normal CTA arrow */
.btn .arrow {
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 0;
  font-size: inherit !important;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .3s var(--ease);
}

.btn:hover .arrow {
  transform: translateX(5px);
}


/* Service row arrow - restore desktop design */
.service-row__arrow {
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  font-size: 22px !important;
  line-height: 1;
  justify-self: end;
  flex-shrink: 0;
  transition: transform .35s var(--ease);
}

.service-row:hover .service-row__arrow {
  transform: translate(5px, -5px);
}


/* Portfolio round arrow */
.portfolio-card__view {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px !important;
  line-height: 1;
}


/* =========================================================
   MOBILE HOMEPAGE HERO
   ========================================================= */

@media (max-width: 640px) {

  .hero {
    min-height: 100svh;
    height: auto;
    width: 100%;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #050505;
  }


  /* FORCE HERO IMAGE TO REMAIN VISIBLE ON MOBILE */
  .hero-media {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero-media__col {
    display: none !important;
  }

  .hero-media__col:first-child {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .hero-media__col:first-child img {
    display: block !important;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 58% center;
    opacity: 1 !important;

    filter:
      saturate(.72)
      contrast(1.05)
      brightness(.62);
  }


  /* Mobile cinematic overlay */
  .hero-media::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
      linear-gradient(
        180deg,
        rgba(5,5,5,.18) 0%,
        rgba(5,5,5,.22) 32%,
        rgba(5,5,5,.58) 62%,
        rgba(5,5,5,.92) 100%
      );
  }


  /* Content */
  .hero-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 100%;

    padding:
      calc(var(--header-h) + 42px)
      18px
      28px;
  }


  .hero-content__inner {
    width: 100%;
    max-width: 100%;

    margin: 0;

    display: grid;
    grid-template-columns: minmax(0, 1fr);

    gap: 22px;
  }


  .hero-content__inner > * {
    min-width: 0;
    max-width: 100%;
  }


  /* Small TS Customs line */
  .hero .eyebrow {
    max-width: 100%;

    margin-bottom: 16px;

    font-size: 9px;
    line-height: 1.25;

    letter-spacing: .13em;

    white-space: normal;
  }


  /* PRECISION / PERFECTED */
  .hero-title {
    width: 100%;
    max-width: 100%;

    margin: 0;

    font-size: clamp(44px, 14.2vw, 62px);

    line-height: .82;

    letter-spacing: -.06em;

    overflow: visible;
  }


  .hero-title span {
    display: block;
    white-space: nowrap;
    max-width: 100%;
  }


  .hero-title .outline {
    -webkit-text-stroke-width: 1px;
  }


  /* Description */
  .hero-aside {
    width: 100%;
    max-width: 100%;

    min-width: 0;

    padding-bottom: 0;
  }


  .hero-aside p {
    width: 100%;
    max-width: 360px;

    margin: 0 0 18px;

    font-size: 15px;
    line-height: 1.45;
  }


  /* IMPORTANT:
     Stack hero CTAs so nothing goes outside screen
  */
  .hero-aside .button-row {
    display: grid !important;

    grid-template-columns: 1fr;

    width: 100%;

    gap: 8px;

    margin-top: 0;
  }


  .hero-aside .button-row .btn {
    width: 100%;
    max-width: 100%;

    min-width: 0;

    min-height: 50px;

    padding-left: 16px;
    padding-right: 16px;

    flex: none;
  }


  /* Keep the CTA arrow visible */
  .hero-aside .btn .arrow {
    display: inline-block !important;

    width: auto !important;
    height: auto !important;

    font-size: inherit !important;
  }


  /* Address / phone */
  .hero-meta {
    margin-top: 20px;

    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    gap: 6px 14px;

    font-size: 8.5px;

    letter-spacing: .12em;
  }


  .hero-meta a {
    grid-column: 1 / -1;
  }
}


/* Very small phones */
@media (max-width: 360px) {

  .hero-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-title {
    font-size: clamp(42px, 13.8vw, 50px);
  }

  .hero .eyebrow {
    font-size: 8px;
  }
}