/* Sachin Shetty, photographer and cinematographer, Bengaluru. Site design, code and all photographs
   copyright 2026 Sachin Shetty. All rights reserved. Copying is not permitted. SSMARK-73A85C22A464 */
/* Editorial Impact / Sachin — fashion edition */
@font-face { font-family: "Bebas Neue"; src: url("assets/fonts/bebas-neue.woff2") format("woff2"), url("assets/fonts/bebas-neue.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("assets/fonts/manrope.woff2") format("woff2"), url("assets/fonts/manrope.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("assets/fonts/manrope-semibold.woff2") format("woff2"), url("assets/fonts/manrope-semibold.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }

:root {
  --ink: #111110; --white: #faf9f6; --paper: #eeede9; --muted: #64635e;
  --accent: #bc291e; --accent-light: #f06b5d; --accent-bright: #ff3b30;
  --line: rgb(17 17 16 / 22%); --line-light: rgb(250 249 246 / 28%);
  --display: "Bebas Neue", "Arial Narrow", sans-serif;
  --editorial: var(--display);
  --body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --utility: var(--body);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gutter: 32px; --section-space: 96px; --header-height: 88px;
  /* Leave room for the fixed header, a two-line caption, and breathing space. */
  --gallery-image-height: max(96px, calc(100svh - var(--header-height) - 160px));
  --type-hero: 176px; --type-page: 128px; --type-editorial: 64px; --type-statement: 80px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  font-family: var(--body); color: var(--ink); background: var(--white);
  font-synthesis: none;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 16px); }
body { margin: 0; background: var(--white); color: var(--ink); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.menu-open, body.lightbox-open { overflow: hidden; }
::selection { background: var(--accent); color: var(--white); }
h1, h2, h3, p, blockquote, figure { margin: 0; }
ol, ul { margin: 0; padding: 0; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; border-radius: 0; }
button { cursor: pointer; }
button, a, input, select, textarea { outline-offset: 5px; }
:focus-visible { outline: 2px solid currentColor; }
main > section, .inquiry-form { scroll-margin-top: var(--header-height); }
main > section > *, .project-card, .portfolio-item { min-width: 0; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 12px 16px; background: var(--white); color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.eyebrow, .hero__topline, .statement-band__meta, .image-credit, .project-card__caption small,
.project-card__caption > span:last-child:not(:first-child), .portfolio-item__meta small, .project-card__index,
.project-card__view, .portfolio-item__media > span, .page-hero__label, .about-hero__label,
.menu-panel__meta, .menu-panel__footer, .contact-band__meta, .site-footer__top, .site-footer__bottom,
.proof-quote__attribution, .contact-page__details span, .form-row__label, .viewer__eyebrow {
  font-family: var(--utility); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase;
}
.display-massive, .page-hero__massive, .services-hero h1, .about-hero h1, .contact-page h1, .contact-band__title, .error-page h1 {
  font-family: var(--display); font-weight: 400; letter-spacing: 0; line-height: .9; text-transform: uppercase;
}
.display-editorial { font-family: var(--editorial); font-size: var(--type-editorial); font-weight: 400; line-height: 1.03; letter-spacing: 0; text-wrap: balance; }
.display-editorial em, .page-hero__massive em, .services-hero h1 em, .about-hero h1 em,
.contact-page h1 em, .contact-band__title em, .error-page h1 em {
  font-family: var(--editorial); font-style: normal; font-weight: 400; text-transform: uppercase; line-height: 1.06;
}
.text-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; width: fit-content; padding: 8px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid currentColor; }
.text-link span { transition: transform 240ms var(--ease); }
.text-link:is(:hover, :focus-visible) span { transform: translate(4px, -4px); }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 56px; border: 1px solid currentColor; padding: 16px 24px; font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: background 220ms, color 220ms; }
.button--ink { background: var(--ink); color: var(--white); border-color: var(--ink); }
.button--outline { background: transparent; color: var(--ink); }
.button--light { background: var(--white); color: var(--ink); border-color: var(--white); }
.button--ink:hover { background: var(--white); color: var(--ink); }
.button--outline:hover { background: var(--ink); color: var(--white); }
.button--light:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

.site-header { position: fixed; z-index: 50; inset: 0 0 auto; height: var(--header-height); display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 48px; padding: 0 var(--gutter); border-bottom: 1px solid transparent; transition: color 240ms, background 240ms, border-color 240ms; }
.site-header--overlay { color: var(--white); background: rgb(17 17 16 / 16%); }
.site-header--solid, .site-header--overlay.is-scrolled { background: var(--white); color: var(--ink); border-color: var(--line); }
.site-header--red { background: var(--accent); color: var(--white); border-color: var(--line-light); }
.brand { display: inline-flex; align-items: center; gap: 24px; width: fit-content; min-height: 44px; }
.brand__name { font-family: var(--display); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.brand__name i, .site-footer__wordmark i { font-weight: 400; font-style: normal; }
.brand__role { max-width: 110px; border-left: 1px solid currentColor; padding-left: 16px; font-size: 10px; line-height: 1.5; text-transform: uppercase; letter-spacing: .09em; }
.header-inquiry { display: inline-flex; min-height: 44px; align-items: center; gap: 24px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; text-decoration: underline; text-underline-offset: 6px; }
.header-inquiry[href="/contact"], .header-inquiry[href="contact.html"] { min-height: 40px; padding: 0 16px; background: var(--accent-bright); color: var(--white); text-decoration: none; transition: background 180ms ease; }
.header-inquiry[href="/contact"]:is(:hover, :focus-visible), .header-inquiry[href="contact.html"]:is(:hover, :focus-visible) { background: var(--accent); color: var(--white); }
.site-header--red .header-inquiry { color: var(--white); }
.menu-toggle { display: flex; min-width: 80px; min-height: 44px; align-items: center; justify-content: space-between; gap: 16px; border: 0; padding: 0; background: transparent; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.menu-toggle__glyph { position: relative; width: 24px; height: 16px; }
.menu-toggle__glyph::before, .menu-toggle__glyph::after { content: ""; position: absolute; left: 0; width: 24px; height: 1px; background: currentColor; transition: transform 240ms; }
.menu-toggle__glyph::before { top: 4px; }
.menu-toggle__glyph::after { top: 11px; }
.menu-open .site-header { color: var(--white); background: var(--ink); border-color: var(--line-light); }
.menu-open .menu-toggle__glyph::before { transform: translateY(3.5px) rotate(45deg); }
.menu-open .menu-toggle__glyph::after { transform: translateY(-3.5px) rotate(-45deg); }
.menu-panel { position: fixed; z-index: 40; inset: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 24px; overflow-y: auto; padding: calc(var(--header-height) + 24px) var(--gutter) 24px; background: var(--ink); color: var(--white); visibility: hidden; opacity: 0; transform: translateY(-24px); transition: opacity 320ms, transform 480ms var(--ease), visibility 480ms; }
.menu-panel[aria-hidden="false"] { visibility: visible; opacity: 1; transform: none; }
.menu-panel__meta, .menu-panel__footer { display: flex; justify-content: space-between; gap: 24px; }
.menu-panel__footer { border-top: 1px solid var(--line-light); padding-top: 16px; }
.menu-panel__nav { display: flex; flex-direction: column; justify-content: center; max-width: 1280px; width: 100%; margin: auto; }
.menu-panel__nav a { display: grid; grid-template-columns: 64px 1fr; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line-light); font-family: var(--display); font-size: 72px; font-weight: 400; line-height: 1.05; letter-spacing: 0; text-transform: uppercase; transition: padding-left 320ms var(--ease), color 220ms; }
.menu-panel__nav a span { font-family: var(--body); font-size: 12px; }
.menu-panel__nav a:is(:hover, :focus-visible, [aria-current="page"]) { color: var(--accent-bright); padding-left: 24px; }
.menu-panel__nav a[aria-current="page"] { font-style: normal; }

/* Opening: one photograph, three intentional lines. */
.hero { position: relative; min-height: 760px; height: calc(100svh - 24px); max-height: 1120px; background: var(--ink); color: var(--white); overflow: hidden; }
.hero__media { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 62% center; animation: hero-settle 900ms var(--ease) both; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 40%), transparent 68%), linear-gradient(0deg, rgb(0 0 0 / 35%), transparent 45%); }
.hero__topline { position: absolute; top: calc(var(--header-height) + 24px); inset-inline: var(--gutter); display: flex; justify-content: flex-end; gap: 24px; }
.hero__content { position: absolute; inset: auto var(--gutter) 64px; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; gap: 32px; }
.hero__content--minimal { grid-template-columns: 1fr; }
.hero__title { font-size: var(--type-hero); line-height: .84; }
.hero__title > span { display: block; width: fit-content; animation: type-reveal 800ms var(--ease) both; }
.hero__title > span:first-child { font-size: 1.14em; }
.hero__title > .hero__quiet { font-family: var(--display); font-size: .52em; font-style: normal; text-transform: uppercase; margin-left: 1.4em; padding-bottom: .18em; line-height: 1; animation-delay: 90ms; }
.hero__title > span:last-child { font-size: .72em; animation-delay: 180ms; }
.hero__support { justify-self: end; max-width: 290px; border-top: 1px solid var(--line-light); padding-top: 16px; }
.hero__support p { font-size: 16px; line-height: 1.6; }
.hero__support .text-link { margin-top: 16px; }
.hero__support .text-link:only-child { margin-top: 0; }
.hero__folio { position: absolute; bottom: 16px; inset-inline: var(--gutter); display: flex; justify-content: space-between; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.hero__folio > a:only-child { margin-left: auto; }

/* Editorial rhythm: statement, selected edit, a single image-led feature. */
.statement-band { display: grid; grid-template-columns: 2fr 8fr 2fr; gap: 32px; padding: var(--section-space) var(--gutter); }
.statement-band--ink { background: var(--ink); color: var(--white); }
.statement-band > .eyebrow { padding-top: 12px; }
.statement-band__title { font-family: var(--editorial); font-size: var(--type-statement); font-weight: 400; line-height: 1.04; letter-spacing: 0; }
.statement-band__title em { font-weight: 400; font-style: normal; color: var(--accent-bright); opacity: 1; }
.statement-band__meta { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line-light); padding-top: 12px; align-self: end; }
.work-section { padding: var(--section-space) 8px 48px; }
.section-head { display: grid; grid-template-columns: 2fr 8fr 2fr; gap: 32px; align-items: end; padding: 0 24px 64px; }
.section-head .display-editorial { font-size: 80px; }
.section-head .text-link { justify-self: end; white-space: nowrap; }
.project-grid, .portfolio-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: start; }
.project-card--portrait { grid-column: span 4; }
.project-card--landscape { grid-column: span 8; padding-top: 96px; }
.project-card--square { grid-column: 2 / span 5; padding-top: 32px; }
.project-card--portrait-tall { grid-column: 8 / span 5; padding-top: 96px; }
.project-card--series { grid-column: span 6; }
.project-card--series + .project-card--series { padding-top: 96px; }
.project-card--inset-left { grid-column: 2 / span 5; padding-top: 32px; }
/* Repeatable rows: new collections extend the page, never replace existing cards. */
.project-grid--collections > .project-card { grid-column: span 6; padding-top: 0; }
.project-card__trigger, .portfolio-item__trigger { display: block; }
.project-card__image-wrap, .portfolio-item__media { position: relative; display: block; overflow: hidden; max-height: var(--gallery-image-height); background: var(--paper); }
.project-card--portrait .project-card__image-wrap, .project-card--portrait-tall .project-card__image-wrap { aspect-ratio: 2 / 3; }
.project-card--landscape .project-card__image-wrap { aspect-ratio: 3 / 2; }
.project-card--square .project-card__image-wrap { aspect-ratio: 1; }
.project-card__image-wrap img, .portfolio-item__media img { width: 100%; height: 100%; max-height: var(--gallery-image-height); object-fit: contain; }
.project-card__index, .project-card__view, .portfolio-item__media > span { position: absolute; top: 16px; background: var(--white); color: var(--ink); padding: 8px 12px; font-size: 12px; }
.project-card__index { left: 16px; }
.project-card__view, .portfolio-item__media > span { right: 16px; opacity: 0; transform: translateY(8px); transition: transform 240ms, opacity 240ms; }
.project-card__trigger:is(:hover, :focus-visible) .project-card__view, .portfolio-item__trigger:is(:hover, :focus-visible) .portfolio-item__media > span { transform: none; opacity: 1; }
.project-card__caption, .portfolio-item__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 8px 48px; }
.project-card__caption > span:first-child { display: flex; flex-direction: column; gap: 8px; }
.project-card__caption strong, .portfolio-item__meta strong { font-family: var(--editorial); font-size: 32px; font-weight: 400; line-height: 1.12; }
.project-card__caption small, .portfolio-item__meta small { color: var(--muted); }
.project-card__caption > span:last-child:not(:first-child) { text-align: right; font-size: 10px; max-width: 120px; }
.image-text-feature { display: grid; grid-template-columns: 7fr 5fr; background: var(--paper); }
.image-text-feature__media { position: relative; min-height: 760px; }
.image-text-feature__media img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 39% center; }
.image-credit { position: absolute; left: 24px; bottom: 24px; padding: 8px 12px; background: var(--white); color: var(--ink); }
.image-text-feature__copy { display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 32px; padding: 64px; }
.image-text-feature__copy .display-editorial { font-size: 72px; }
.image-text-feature__copy p:not(.eyebrow) { max-width: 46ch; line-height: 1.8; }
.image-text-feature__copy .text-link { margin-top: 16px; }

/* The homepage service index stays compact; full detail belongs on Services. */
.offering-grid { display: grid; grid-template-columns: 4fr 8fr; column-gap: 64px; row-gap: 32px; padding: var(--section-space) var(--gutter); }
.offering-grid__heading .display-editorial { margin-top: 24px; }
.offering-grid__items { border-bottom: 1px solid var(--line); }
.offering { display: grid; grid-template-columns: 32px 1fr; column-gap: 24px; row-gap: 12px; padding: 24px 0; border-top: 1px solid var(--line); }
.offering__number { font-size: 12px; padding-top: 8px; }
.offering h3 { font-family: var(--editorial); font-size: 40px; font-weight: 400; line-height: 1.15; }
.offering p { grid-column: 2; max-width: 52ch; color: var(--muted); font-size: 16px; }
.offering-grid__link { grid-column: 2; }
.process-strip { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; padding: var(--section-space) var(--gutter); background: var(--ink); color: var(--white); }
.process-strip__intro .display-editorial { margin-top: 32px; font-size: 48px; }
.process-strip__steps { list-style: none; }
.process-strip__steps li { display: grid; grid-template-columns: 1fr 2fr 3fr; gap: 24px; padding: 24px 0 48px; border-top: 1px solid var(--line-light); }
.process-strip__steps span { font-size: 12px; text-transform: uppercase; }
.process-strip__steps h3 { font-family: var(--display); font-size: 40px; font-weight: 400; line-height: 1; }
.process-strip__steps p { font-size: 14px; }
.proof-quote { padding: var(--section-space) var(--gutter); }
.proof-quote blockquote { max-width: 1100px; margin: 48px auto 32px; font-family: var(--editorial); font-style: normal; font-size: 64px; line-height: 1.12; }
.proof-quote__attribution { text-align: right; }

/* Closing statement: in flow so long words and zoom cannot collide with the CTA. */
.contact-band { display: flex; flex-direction: column; min-height: 720px; gap: 48px; padding: 24px var(--gutter) 48px; background: var(--accent); color: var(--white); }
.contact-band__meta { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line-light); padding-top: 12px; }
.contact-band__title { margin-top: auto; font-size: 144px; max-width: 1500px; }
.contact-band__title em { font-size: .76em; }
.contact-band__button { align-self: end; }
.contact-band--compact { min-height: 560px; }
.contact-band--compact .contact-band__title { font-size: 112px; }
.site-footer { padding: 24px var(--gutter); background: var(--ink); color: var(--white); }
.site-footer__top, .site-footer__bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line-light); padding-top: 16px; font-size: 10px; }
.site-footer__bottom div { display: flex; gap: 24px; }
.site-footer__top a, .site-footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__wordmark { padding: 48px 0 64px; font-family: var(--display); font-size: clamp(32px, 9.25vw, 180px); font-weight: 400; line-height: 1; letter-spacing: 0; text-align: center; white-space: nowrap; }

/* Archive, about, and services openers share a strict twelve-column composition. */
.page-hero, .about-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 8px; row-gap: 48px; align-items: center; padding: calc(var(--header-height) + 32px) var(--gutter) 64px; min-height: 92svh; background: var(--paper); }
.page-hero__label, .about-hero__label { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding-top: 12px; }
.page-hero__massive, .about-hero h1 { grid-column: 1 / span 7; font-size: var(--type-page); }
.page-hero__massive em, .about-hero h1 em { display: block; font-size: .57em; margin-top: 16px; }
.page-hero__insert { grid-column: 9 / span 4; height: 480px; object-fit: cover; }
.about-hero__portrait { grid-column: 8 / -1; }
.about-hero__portrait img { aspect-ratio: 1200 / 995; object-fit: cover; object-position: center; }
.about-hero__portrait figcaption { font-size: 12px; margin-top: 12px; text-transform: uppercase; letter-spacing: .05em; }
.about-hero--portrait-only { min-height: 0; align-items: start; padding-bottom: var(--section-space); }
.about-hero--portrait-only .about-hero__portrait { grid-column: 4 / 11; margin-top: 16px; }
.portfolio-index { padding: 64px 8px; }
.filter-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin: 0 24px 48px; border-top: 1px solid var(--line); padding-top: 16px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.filter-strip__controls { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-strip button { min-height: 44px; border: 1px solid var(--line); background: transparent; padding: 8px 16px; font-size: 12px; text-transform: uppercase; }
.filter-strip button:is(:hover, .is-active) { background: var(--ink); border-color: var(--ink); color: var(--white); }
.portfolio-item--wide { grid-column: span 8; }
.portfolio-item--portrait { grid-column: span 4; }
.portfolio-item--series { grid-column: span 6; }
.portfolio-item--landscape { grid-column: span 7; }
.portfolio-item--square { grid-column: span 5; }
.portfolio-item--wide .portfolio-item__media, .portfolio-item--landscape .portfolio-item__media { aspect-ratio: 3 / 2; }
.portfolio-item--portrait .portfolio-item__media { aspect-ratio: 2 / 3; }
.portfolio-item--square .portfolio-item__media { aspect-ratio: 1; }
.portfolio-item__meta small { text-align: right; font-size: 10px; max-width: 130px; }
/* Model series keep full photographic frames, with the same editorial grid and type. */
.series-hero__copy { grid-column: 1 / span 6; display: flex; flex-direction: column; align-items: start; gap: 32px; }
.series-hero__copy h1 { font-size: var(--type-hero); }
.series-hero__copy h1.series-title--long { font-size: var(--type-page); }
.series-hero__cover { grid-column: 8 / span 5; display: block; }
.series-hero__cover img { max-height: max(96px, calc(100svh - var(--header-height) - 248px)); object-fit: contain; }
.series-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 8px; align-items: start; }
.series-frame--closing { grid-column: 1 / -1; width: 50%; justify-self: center; }
.series-frame > a { display: block; }
.series-frame img { width: 100%; height: auto; max-height: var(--gallery-image-height); object-fit: contain; }
.series-frame__caption { display: flex; justify-content: space-between; gap: 16px; padding: 16px 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.series-hero__cover:is(:hover, :focus-visible) .series-frame__caption, .series-frame:focus-within figcaption { color: var(--accent); }
.page-hero--work .page-hero__insert { height: auto; max-height: var(--gallery-image-height); aspect-ratio: 2 / 3; object-fit: contain; object-position: center 30%; }
.services-hero { display: grid; grid-template-columns: 7fr 5fr; min-height: 92svh; padding-top: var(--header-height); background: var(--ink); color: var(--white); }
.services-hero__copy { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 32px var(--gutter) 48px; }
.services-hero h1 { font-size: 112px; }
.services-hero h1 em { display: block; font-size: .52em; padding-top: 16px; color: var(--accent-light); }
.services-hero__copy > p:last-child { max-width: 36ch; }
.services-hero > img { height: 100%; min-height: 660px; object-fit: cover; object-position: 39% center; }
.service-list { padding: var(--section-space) var(--gutter); }
.service-row { display: grid; grid-template-columns: 1fr 4fr 7fr; gap: 24px; padding: 32px 0 64px; border-top: 1px solid var(--line); }
.service-row__number { font-size: 12px; }
.service-row__title h2 { margin-top: 16px; font-family: var(--editorial); font-size: 48px; font-weight: 400; line-height: 1.08; }
.service-row__body { display: grid; grid-template-columns: 3fr 2fr; gap: 48px; }
.service-row__body p { font-size: 16px; max-width: 48ch; }
.service-row__body ul { list-style: none; font-size: 12px; text-transform: uppercase; }
.service-row__body li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.about-story { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; padding: var(--section-space) var(--gutter); }
.about-story--bio-only .about-story__body { grid-column: 2; }
.about-story__heading .display-editorial { margin-top: 32px; font-size: 56px; }
.about-story__body { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.about-story__lead { grid-column: 1 / -1; font-family: var(--editorial); font-size: 40px; line-height: 1.2; }
.about-story__body > p:not(.about-story__lead) { max-width: 52ch; }
.about-facts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; padding: 0 var(--gutter) var(--section-space); }
.about-facts article { border-top: 1px solid var(--line); padding: 16px 16px 24px; }
.about-facts article { grid-column: span 4; }
.about-facts h3 { font-family: var(--editorial); font-size: 28px; font-weight: 400; line-height: 1.1; text-transform: uppercase; }
.about-facts p { margin-top: 24px; max-width: 38ch; font-size: 15px; line-height: 1.65; }
.wide-image-band { position: relative; min-height: 660px; height: 86svh; }
.wide-image-band img { height: 100%; object-fit: cover; }
.wide-image-band p { position: absolute; bottom: 32px; left: 32px; max-width: 460px; padding: 24px; background: var(--white); font-family: var(--editorial); font-size: 32px; line-height: 1.2; }

/* Inquiry: usable form, honest delivery status, no implementation copy. */
.contact-page { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; min-height: 100svh; padding: calc(var(--header-height) + 48px) var(--gutter) 64px; background: var(--accent); color: var(--white); }
.contact-page__intro { display: flex; flex-direction: column; gap: 48px; }
.contact-page h1 { font-size: 104px; }
.contact-page h1 em { font-size: .7em; }
.contact-page__details { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid var(--line-light); padding-top: 16px; margin-top: auto; }
.contact-page__details.contact-page__details--direct { align-self: start; grid-template-columns: 1fr; gap: 0; width: 100%; max-width: 520px; margin-top: 0; padding-top: 0; }
.contact-page__details.contact-page__details--direct > p, .contact-page__direct-row { min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--line-light); color: var(--white); font-size: clamp(18px, 2vw, 24px); font-weight: 600; line-height: 1.3; letter-spacing: .01em; text-transform: uppercase; }
.contact-page__details.contact-page__details--direct > p { display: flex; align-items: center; }
.contact-page__direct-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.contact-page__details.contact-page__details--direct .contact-page__direct-row > a { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; min-width: 0; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit; transition: color 180ms ease, padding-left 180ms ease; }
.contact-page__direct-row > a:is(:hover, :focus-visible) { color: var(--ink); padding-left: 8px; }
.contact-page__direct-row > button { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; border: 1px solid var(--line-light); padding: 8px 10px; background: transparent; color: var(--white); font-family: var(--utility); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background 180ms ease, color 180ms ease; }
.contact-page__direct-row > button svg { display: block; }
.contact-page__direct-row > button.is-done { color: var(--accent-light); }
.contact-page__direct-row > button:is(:hover, :focus-visible) { background: var(--white); color: var(--accent); }
.contact-page__direct-row--address { align-items: start; padding-top: 16px; padding-bottom: 16px; }
.contact-page__direct-row--address address { min-width: 0; font-style: normal; font-size: 15px; font-weight: 400; line-height: 1.6; letter-spacing: 0; text-transform: none; }
.contact-page__direct-row--address address strong { display: block; margin-bottom: 8px; font-family: var(--utility); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.contact-page__details span { display: block; margin-bottom: 8px; }
.contact-page__direct-row > a span { margin-bottom: 0; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit; }
.contact-page__details p, .contact-page__details a { font-size: 14px; overflow-wrap: anywhere; }
.inquiry-form { align-self: start; padding: 32px; background: var(--white); color: var(--ink); }
.inquiry-form__heading { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 32px; gap: 16px; }
.inquiry-form__heading h2 { font-family: var(--editorial); font-size: 40px; font-weight: 400; }
.inquiry-form__heading span { font-size: 12px; }
.form-row { display: block; border-bottom: 1px solid var(--line); padding: 18px 0 10px; cursor: text; transition: border-color 180ms ease, box-shadow 180ms ease; }
.form-row__label { display: block; margin-bottom: 4px; transition: color 180ms ease; }
.form-row input, .form-row select, .form-row textarea { display: block; width: 100%; min-width: 0; border: 0; outline: 0; padding: 8px 0 10px; background: transparent; color: var(--ink); caret-color: var(--accent-bright); font-family: var(--body); font-size: 16px; line-height: 1.6; resize: vertical; }
.form-row input:focus-visible, .form-row select:focus-visible, .form-row textarea:focus-visible { outline: 0; }
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--muted); opacity: 1; }
.form-row:focus-within { border-bottom-color: transparent; box-shadow: inset 0 -2px 0 var(--accent-bright); }
.form-row:focus-within .form-row__label { color: var(--accent-bright); }
.form-row--select { cursor: pointer; }
.form-row--select select { cursor: pointer; }
.form-row textarea { min-height: 144px; }
.inquiry-form__actions { display: grid; gap: 8px; }
.inquiry-form__actions .button { width: 100%; }
.inquiry-form__submit { width: 100%; }
.inquiry-form__note { margin-top: 16px; font-size: 12px; color: var(--muted); }
.inquiry-form__fallback { margin-top: 16px; width: 100%; min-height: 160px; font-size: 14px; padding: 12px; border: 1px solid var(--line); }
.contact-image { display: grid; grid-template-columns: 8fr 4fr; background: var(--ink); color: var(--white); }
.contact-image img { height: 640px; object-fit: cover; }
.contact-image div { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 32px; }
.contact-image div > span { font-size: 12px; text-transform: uppercase; }
.contact-image a { font-family: var(--editorial); font-size: 48px; line-height: 1.1; }

/* Native dialog: the photograph remains fully inspectable. */
.lightbox { position: fixed; inset: 0; margin: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; padding: 24px 32px; border: 0; background: var(--ink); color: var(--white); overflow-y: auto; }
.lightbox[open] { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 48px; row-gap: 24px; }
.lightbox::backdrop { background: var(--ink); }
.viewer__top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-light); padding-bottom: 16px; gap: 24px; }
.lightbox__close, .viewer__controls button { min-height: 44px; border: 1px solid var(--line-light); padding: 8px 16px; background: transparent; color: var(--white); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.lightbox__close:hover, .viewer__controls button:hover { background: var(--white); color: var(--ink); }
.lightbox__media { position: relative; grid-column: 1; grid-row: 2 / 4; min-height: 0; display: flex; align-items: center; justify-content: center; touch-action: pan-y pinch-zoom; }
.lightbox__media img { width: 100%; height: 100%; max-height: calc(100dvh - 128px); object-fit: contain; }
.lightbox__caption { align-self: center; }
.lightbox__caption p { font-family: var(--editorial); font-size: 48px; font-weight: 400; line-height: 1.08; }
.lightbox__caption [data-lightbox-category], .lightbox__caption [data-lightbox-meta] { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.lightbox__caption [data-lightbox-category] { margin-top: 16px; }
.lightbox__caption [data-lightbox-meta] { margin-top: 32px; color: #c2c1bb; }
.lightbox__caption [data-lightbox-description] { margin-top: 32px; font-family: var(--body); font-size: 16px; line-height: 1.7; color: #d0cfc8; }
.viewer__disclosure { margin-top: 24px; font-size: 12px; color: #b3b2ac; }
.viewer__controls { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-self: end; }
.viewer__status { grid-column: 1 / -1; min-height: 24px; color: #d0cfc8; font-size: 12px; }
/* Viewer text, once (owner, 29 Sept: the title repeated four times was "text bombing"): the status line is read by screen
   readers only, and comes into view when it has news (loading, or a failed image). */
.viewer__status:not(.is-visible) { position: absolute; width: 1px; height: 1px; min-height: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lightbox__caption [data-lightbox-category][hidden] { display: none; }
.lightbox.is-loading .lightbox__media { opacity: .5; }
.lightbox.is-loading .viewer__status { color: var(--white); }
.viewer__original { display: inline-block; margin-top: 16px; min-height: 44px; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }

.error-page { background: var(--accent); color: var(--white); }
.error-page__main { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: 100svh; padding: 32px var(--gutter); }
.error-page h1 { font-size: var(--type-page); }
.error-page h1 em { font-size: .64em; }
.error-page__footer { display: flex; justify-content: space-between; align-items: end; gap: 32px; border-top: 1px solid var(--line-light); padding-top: 24px; }
.error-page__footer p { max-width: 40ch; }

/* Reveals fail open: content is never held invisible while waiting for JS. */
.js .reveal.is-visible { animation: section-reveal 600ms var(--ease) both; }
@keyframes section-reveal { from { opacity: .45; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes type-reveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes hero-settle { from { transform: scale(1.025); } to { transform: scale(1); } }

@media (min-width: 1600px) {
  :root { --gutter: 48px; --type-hero: 208px; --type-page: 160px; --type-editorial: 80px; --type-statement: 96px; }
  .hero__support { max-width: 340px; }
  .image-text-feature__copy { padding: 96px; }
  .contact-band__title { font-size: 176px; }
  .section-head { padding-inline: 40px; }
}
@media (max-width: 1279px) {
  :root { --gutter: 24px; --type-hero: 144px; --type-page: 104px; --type-editorial: 56px; --type-statement: 64px; }
  .site-header { gap: 32px; }
  .statement-band { grid-template-columns: 2fr 9fr; }
  .statement-band__meta { grid-column: 2; flex-direction: row; gap: 24px; }
  .section-head { grid-template-columns: 2fr 7fr; padding-inline: 16px; }
  .section-head .display-editorial { font-size: 64px; }
  .section-head .text-link { grid-column: 2; justify-self: start; }
  .image-text-feature__copy { padding: 48px 32px; }
  .image-text-feature__copy .display-editorial { font-size: 56px; }
  .image-text-feature__media { min-height: 660px; }
  .contact-band__title { font-size: 128px; }
  .contact-band--compact .contact-band__title { font-size: 96px; }
  .services-hero h1 { font-size: 96px; }
  .service-row__body { grid-template-columns: 1fr; gap: 24px; }
  .service-row__title h2 { font-size: 40px; }
  .about-story { gap: 32px; }
  .about-story__heading .display-editorial { font-size: 48px; }
  .contact-page { gap: 32px; grid-template-columns: 1fr 1fr; }
  .contact-page h1 { font-size: 80px; }
  .inquiry-form { padding: 24px; }
  .project-card__caption, .portfolio-item__meta { flex-direction: column; gap: 8px; }
  .project-card__caption > span:last-child:not(:first-child), .portfolio-item__meta small { max-width: none; text-align: left; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --gutter: 24px; --type-hero: 120px; --type-page: 80px; --type-editorial: 48px; --type-statement: 56px; --section-space: 64px; }
  .brand__role { display: none; }
  .hero__content { grid-template-columns: 7fr 5fr; }
  .hero__support { max-width: 230px; }
  .hero { min-height: 720px; }
  .project-card--landscape, .project-card--portrait-tall { padding-top: 64px; }
  .project-card__caption strong, .portfolio-item__meta strong { font-size: 28px; }
  .offering-grid { gap: 32px; }
  .offering h3 { font-size: 32px; }
  .contact-band { min-height: 660px; }
  .contact-band__title { font-size: 104px; }
  .contact-band--compact .contact-band__title { font-size: 80px; }
  .services-hero h1 { font-size: 80px; }
  .services-hero__copy { gap: 32px; }
  .process-strip { grid-template-columns: 1fr; gap: 48px; }
  .process-strip__intro { max-width: 600px; }
  .about-story { grid-template-columns: 1fr; }
  .about-story--bio-only .about-story__body { grid-column: auto; }
  .about-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 8px; }
  .about-facts article:nth-of-type(n) { grid-column: auto; }
  .contact-page { grid-template-columns: 1fr; gap: 64px; }
  .contact-page h1 { font-size: 112px; }
  .contact-page__details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inquiry-form { max-width: 640px; width: 100%; justify-self: end; }
  .lightbox[open] { grid-template-columns: minmax(0, 1fr) 240px; column-gap: 24px; }
  .lightbox__caption p { font-size: 40px; }
}
@media (max-width: 767px) {
  :root { --gutter: 16px; --section-space: 64px; --header-height: 72px; --type-hero: 96px; --type-page: 80px; --type-editorial: 44px; --type-statement: 44px; }
  .site-header { grid-template-columns: 1fr auto; gap: 16px; }
  .brand__name { font-size: 32px; }
  .brand__role, .header-inquiry { display: none; }
  .menu-toggle { font-size: 12px; }
  .menu-panel { padding-top: 96px; gap: 16px; }
  .menu-panel__meta, .menu-panel__footer { flex-direction: column; gap: 8px; }
  .menu-panel__nav a { grid-template-columns: 32px 1fr; font-size: 48px; padding-block: 16px; }
  .menu-panel__nav a:is(:hover, :focus-visible, [aria-current="page"]) { padding-left: 8px; }
  .hero { height: auto; min-height: 0; max-height: none; overflow: hidden; }
  .hero__media, .hero__shade { height: 600px; }
  .hero__media { object-position: 62% center; }
  .hero__shade { background: linear-gradient(0deg, rgb(0 0 0 / 50%), transparent 60%); }
  .hero__topline { top: 96px; font-size: 10px; gap: 12px; }
  .hero__topline span { max-width: 52%; }
  .hero__topline span:last-child { max-width: 36%; text-align: right; }
  .hero__content { position: relative; inset: auto; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 352px var(--gutter) 0; }
  .hero__title { padding-bottom: 32px; min-height: 248px; }
  .hero__title > span:last-child { font-size: .74em; }
  .hero__support { align-self: stretch; max-width: none; border: 0; padding: 24px 0 16px; }
  .hero__support p { font-size: 14px; max-width: 34ch; }
  .hero__support .text-link { margin-top: 8px; font-size: 12px; }
  .hero__folio { position: static; margin: 0 var(--gutter); border-top: 1px solid var(--line-light); padding: 16px 0; gap: 16px; font-size: 10px; }
  .statement-band { grid-template-columns: 1fr; gap: 32px; }
  .statement-band > .eyebrow { padding-top: 0; }
  .statement-band__meta { grid-column: 1; flex-direction: row; flex-wrap: wrap; gap: 24px; }
  .work-section { padding: 64px 4px 32px; }
  .section-head { grid-template-columns: 1fr; gap: 24px; padding: 0 12px 48px; }
  .section-head .display-editorial { font-size: 52px; }
  .section-head .text-link { grid-column: 1; }
  .project-grid, .portfolio-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .project-card--portrait, .project-card--landscape, .project-card--square, .project-card--portrait-tall { grid-column: 1 / -1; padding: 0; }
  .project-card--series + .project-card--series { padding-top: 0; }
  .project-grid--collections > .project-card { grid-column: 1 / -1; padding-top: 0; }
  .project-card__caption, .portfolio-item__meta { flex-direction: row; align-items: start; padding: 16px 12px 48px; }
  .project-card__caption strong, .portfolio-item__meta strong { font-size: 28px; }
  .project-card__caption > span:last-child:not(:first-child), .portfolio-item__meta small { max-width: 96px; font-size: 10px; text-align: right; }
  .project-card__caption small { font-size: 10px; }
  .project-card__view, .portfolio-item__media > span { opacity: 1; transform: none; font-size: 10px; }
  .project-card__index { font-size: 10px; }
  .project-card--landscape .project-card__image-wrap { aspect-ratio: 4 / 3; }
  .image-text-feature { grid-template-columns: 1fr; }
  .image-text-feature__media { min-height: 0; height: 540px; }
  .image-text-feature__copy { padding: 48px 16px 64px; gap: 24px; }
  .image-text-feature__copy .display-editorial { font-size: 56px; }
  .image-credit { left: 16px; bottom: 16px; font-size: 10px; }
  .offering-grid { grid-template-columns: 1fr; gap: 32px; }
  .offering-grid__link { grid-column: 1; }
  .offering { column-gap: 16px; }
  .offering h3 { font-size: 32px; }
  .process-strip { grid-template-columns: 1fr; gap: 48px; }
  .process-strip__intro .display-editorial { font-size: 40px; }
  .process-strip__steps li { grid-template-columns: 1fr; gap: 12px; }
  .process-strip__steps p { font-size: 16px; }
  .proof-quote blockquote { font-size: 40px; }
  .contact-band { min-height: 580px; padding: 24px 16px 32px; gap: 32px; }
  .contact-band__meta { font-size: 10px; gap: 24px; }
  .contact-band__meta span { max-width: 48%; }
  .contact-band__meta span:last-child { text-align: right; }
  .contact-band__title { font-size: 80px; }
  .contact-band__title em { font-size: .54em; }
  .contact-band__button { align-self: stretch; }
  .contact-band--compact { min-height: 480px; }
  .contact-band--compact .contact-band__title { font-size: 64px; }
  .contact-band--compact .contact-band__title em { font-size: .64em; }
  .site-footer__top, .site-footer__bottom { font-size: 10px; }
  .site-footer__top > span { max-width: 180px; }
  .site-footer__bottom { flex-direction: column; gap: 12px; }
  .site-footer__wordmark { padding-block: 48px; }
  .page-hero, .about-hero { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 4px; padding: 96px 16px 48px; min-height: 0; }
  .page-hero__label, .about-hero__label { font-size: 10px; gap: 16px; }
  .page-hero__massive, .about-hero h1 { grid-column: 1 / -1; }
  .page-hero__massive em, .about-hero h1 em { font-size: .5em; margin-top: 12px; }
  .page-hero__insert { grid-column: 2 / -1; width: 100%; height: 280px; }
  .about-hero__portrait { grid-column: 2 / -1; }
  .about-hero--portrait-only .about-hero__portrait { grid-column: 1 / -1; margin-top: 0; }
  .portfolio-index { padding: 48px 4px 32px; }
  .series-hero__copy, .series-hero__cover { grid-column: 1 / -1; }
  .series-hero__copy { gap: 24px; }
  .series-hero__cover img { max-height: var(--gallery-image-height); }
  .series-grid { grid-template-columns: 1fr; gap: 32px 4px; }
  .series-frame--closing { width: 100%; }
  .filter-strip { margin-inline: 12px; margin-bottom: 32px; flex-direction: column; align-items: stretch; }
  .filter-strip__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-item--wide, .portfolio-item--portrait, .portfolio-item--square, .portfolio-item--landscape { grid-column: 1 / -1; }
  .portfolio-item--wide .portfolio-item__media, .portfolio-item--landscape .portfolio-item__media { aspect-ratio: 4 / 3; }
  .services-hero { grid-template-columns: 1fr; min-height: 0; }
  .services-hero__copy { gap: 48px; padding: 32px 16px 48px; }
  .services-hero h1 { font-size: 80px; }
  .services-hero > img { height: 480px; min-height: 0; }
  .service-row { grid-template-columns: 24px 1fr; gap: 16px; padding: 24px 0 48px; }
  .service-row__body { grid-column: 2; grid-template-columns: 1fr; gap: 24px; }
  .service-row__title h2 { font-size: 40px; }
  .about-story { grid-template-columns: 1fr; gap: 48px; }
  .about-story__heading .display-editorial { font-size: 44px; }
  .about-story__body { grid-template-columns: 1fr; gap: 24px; }
  .about-story__lead { font-size: 32px; }
  .about-facts { grid-template-columns: 1fr; gap: 24px; }
  .about-facts article { padding-inline: 0; }
  .wide-image-band { height: 660px; min-height: 0; }
  .wide-image-band p { bottom: 16px; inset-inline: 16px; font-size: 28px; }
  .contact-page { grid-template-columns: 1fr; padding: 104px 16px 48px; gap: 48px; }
  .contact-page h1 { font-size: 72px; }
  .contact-page__details { grid-template-columns: 1fr; gap: 24px; }
  .contact-page__intro { gap: 32px; }
  .inquiry-form { padding: 24px 16px; }
  .inquiry-form__heading h2 { font-size: 32px; }
  .contact-image { grid-template-columns: 1fr; }
  .contact-image img { height: 480px; }
  .contact-image div { min-height: 260px; padding: 24px 16px; }
  .contact-image a { font-size: 40px; }
  .lightbox { padding: 12px 16px 24px; }
  .lightbox[open] { grid-template-columns: 1fr; grid-template-rows: auto minmax(220px, 48dvh) auto auto; gap: 16px; }
  .viewer__top { padding-bottom: 12px; }
  .viewer__eyebrow { font-size: 10px; }
  .lightbox__media { grid-column: 1; grid-row: 2; }
  .lightbox__media img { max-height: 48dvh; }
  .lightbox__caption p { font-size: 32px; }
  .lightbox__caption [data-lightbox-category] { margin-top: 8px; }
  .lightbox__caption [data-lightbox-meta] { margin-top: 12px; }
  .lightbox__caption [data-lightbox-description] { margin-top: 16px; font-size: 14px; }
  .viewer__disclosure { margin-top: 12px; }
  .viewer__controls { grid-column: 1; position: sticky; bottom: 0; padding-top: 8px; background: var(--ink); }
  .error-page__footer { align-items: stretch; flex-direction: column; }
}
@media (max-width: 359px) {
  :root { --type-hero: 80px; --type-page: 64px; --type-statement: 40px; }
  .hero__title { padding-top: 20px; }
  .hero__title > span:last-child { font-size: .72em; }
  .contact-band__title { font-size: 64px; }
  .contact-page h1 { font-size: 64px; }
  .menu-panel__nav a { font-size: 40px; }
  .section-head .display-editorial { font-size: 44px; }
}
@media (max-height: 650px) and (min-width: 768px) {
  .menu-panel__nav a { font-size: 40px; padding-block: 8px; }
  .lightbox[open] { min-height: 560px; }
}
.video-hero { min-height: 0; row-gap: 24px; padding-bottom: 40px; }
.header-back { position: absolute; top: 100%; left: 0; right: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 var(--gutter); background: var(--white); color: var(--ink); border-bottom: 1px solid var(--line); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.header-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-header--with-back ~ main { padding-top: 44px; }
.menu-open .header-back { visibility: hidden; }
.video-hero .page-hero__massive { grid-column: 1 / -1; font-size: clamp(48px, 8vw, 128px); }
.video-hero__intro { grid-column: 1 / -1; max-width: 620px; font-size: clamp(18px, 2vw, 28px); line-height: 1.4; }
.video-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--paper); }
.film { min-width: 0; border-bottom: 1px solid var(--ink); padding: 40px var(--gutter) 48px; scroll-margin-top: calc(var(--header-height) + 24px); }
.film--featured { grid-column: 1 / -1; padding-top: 0; }
.film:nth-child(even) { border-right: 1px solid var(--ink); }
.film__caption { border-left: 3px solid var(--ink); padding-left: 20px; margin-top: 24px; }
.film__number { display: block; color: var(--muted); font-family: var(--display); font-size: 14px; letter-spacing: .16em; margin-bottom: 10px; }
.film__caption h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(36px, 3.4vw, 56px); line-height: 1.05; margin-bottom: 16px; }
.film__link { display: inline-block; margin-top: 18px; color: var(--muted); font-size: 11px; text-underline-offset: 4px; text-decoration: underline; }
.film__link:hover { color: var(--ink); }
.film__player { width: 100%; aspect-ratio: 16 / 9; background: #121212; }
.film--featured .film__player { max-height: calc(100svh - var(--header-height) - 48px); }
.film__player iframe { display: block; width: 100%; height: 100%; border: 0; }
.film__credits { display: grid; gap: 10px; margin: 0; }
.film__credits > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; }
.film__credits dt { color: var(--muted); font-family: var(--display); font-size: 14px; text-transform: uppercase; letter-spacing: .04em; line-height: 1.5; }
.film__credits dt::after { content: ":"; }
.film__credits dd { margin: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .video-list { grid-template-columns: 1fr; }
  .film { padding: 32px 16px 36px; }
  .film--featured { padding-top: 0; }
  .film:nth-child(even) { border-right: 0; }
  .film__caption { padding-left: 16px; margin-top: 20px; }
  .film__caption h2 { font-size: 40px; }
}

/* Homepage close: compact, deliberate rhythm without an oversized empty field. */
.contact-band.contact-band--home {
  min-height: 0;
  gap: clamp(24px, 2.2vw, 36px);
  padding: 24px var(--gutter) 40px;
}
.contact-band--home .contact-band__title {
  margin-top: clamp(48px, 5vw, 80px);
}
@media (max-width: 767px) {
  .contact-band.contact-band--home {
    gap: 24px;
    padding: 20px 16px 28px;
  }
  .contact-band--home .contact-band__title {
    margin-top: 32px;
  }
}
/* Contact form, simple: one line, name + email, message, one button. Quiet filled fields, sharp corners. */
.inquiry-form--simple { display: grid; gap: 16px; padding: 48px; }
.inquiry-form__intro { margin-bottom: 16px; font-size: 18px; line-height: 1.5; color: var(--muted); }
.inquiry-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: block; }
.field input, .field textarea { display: block; width: 100%; min-width: 0; border: 1px solid transparent; border-radius: 0; padding: 16px 18px; background: var(--paper); color: var(--ink); caret-color: var(--accent-bright); font: inherit; font-size: 16px; line-height: 1.5; transition: border-color 180ms ease, background 180ms ease; }
.field textarea { min-height: 168px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input:focus-visible, .field textarea:focus-visible { outline: 0; border-color: var(--ink); background: var(--white); }
.inquiry-form--simple .inquiry-form__submit { justify-content: center; margin-top: 8px; }
.inquiry-form--simple .inquiry-form__note { margin-top: 0; }
.inquiry-form--simple .inquiry-form__whatsapp { justify-content: center; width: 100%; margin-top: -8px; }
.inquiry-form--simple .inquiry-form__note:empty { display: none; }
@media (max-width: 767px) {
  .inquiry-form--simple { padding: 28px 16px; gap: 12px; }
  .inquiry-form__pair { grid-template-columns: 1fr; gap: 12px; }
}
/* Studio footer: a viewfinder. Ruler, crop corners, column lines, faint portrait, name across the base. */
.site-footer--studio { position: relative; overflow: hidden; padding: 0 var(--gutter) 40px; background: var(--ink); color: var(--white); isolation: isolate; }
.site-footer--studio::before { content: ""; position: absolute; inset: 0 var(--gutter); z-index: -1; background: linear-gradient(to right, transparent calc(25% - 1px), rgb(250 249 246 / 8%) calc(25% - 1px) 25%, transparent 25% calc(75% - 1px), rgb(250 249 246 / 8%) calc(75% - 1px) 75%, transparent 75%); pointer-events: none; }
.footer__corner { position: absolute; width: 18px; height: 18px; border: 0 solid rgb(250 249 246 / 55%); pointer-events: none; }
.footer__corner--tl { top: 16px; left: 16px; border-top-width: 1px; border-left-width: 1px; }
.footer__corner--tr { top: 16px; right: 16px; border-top-width: 1px; border-right-width: 1px; }
.footer__corner--bl { bottom: 16px; left: 16px; border-bottom-width: 1px; border-left-width: 1px; }
.footer__corner--br { bottom: 16px; right: 16px; border-bottom-width: 1px; border-right-width: 1px; }
.footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 96px; }
.footer__lede { grid-column: 1; padding-right: 24px; }
.footer__kicker { font-size: 14px; line-height: 1.5; color: #a9a8a2; }
.footer__statement { margin-top: 16px; font-family: var(--display); font-size: 40px; line-height: 1; text-transform: uppercase; }
.footer__lede { display: flex; flex-direction: column; align-items: start; }
.footer__cta { margin-top: 28px; border-color: var(--accent-bright); background: var(--accent-bright); color: var(--white); white-space: nowrap; transition: background 180ms ease, border-color 180ms ease; }
.footer__cta:is(:hover, :focus-visible) { border-color: var(--accent); background: var(--accent); color: var(--white); }
.footer__contact { grid-column: 2 / span 2; display: flex; flex-direction: column; align-items: start; padding-left: 16px; }
.footer__label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #a9a8a2; }
.footer__phone { font-size: 20px; font-weight: 500; }
.footer__email { margin-top: 12px; padding-bottom: 6px; border-bottom: 2px solid currentColor; font-size: clamp(24px, 2.4vw, 37px); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; transition: color 240ms var(--ease); }
.footer__email:is(:hover, :focus-visible), .footer__phone:is(:hover, :focus-visible) { color: var(--accent-light); }
.footer__role { margin-top: 24px; font-size: 13px; color: #a9a8a2; }
.footer__nav { grid-column: 4; display: flex; flex-direction: column; align-items: start; padding-left: 16px; }
.footer__nav a { font-family: var(--display); font-size: 40px; line-height: 1.1; text-transform: uppercase; transition: color 240ms var(--ease), transform 300ms var(--ease); }
.footer__nav a:is(:hover, :focus-visible) { color: var(--accent-light); transform: translateX(6px); }
.footer__top { grid-column: 4; align-self: start; justify-self: start; display: grid; place-items: center; width: 64px; height: 64px; margin-left: 16px; border: 1px solid rgb(250 249 246 / 40%); font-size: 20px; background: rgb(17 17 16 / 60%); transition: background 240ms var(--ease), color 240ms var(--ease); }
.footer__top:is(:hover, :focus-visible) { background: var(--white); color: var(--ink); }
.footer__base { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; margin-top: 120px; }
.footer__name { grid-column: 1 / span 3; font-family: var(--display); font-size: clamp(62px, 8.8vw, 163px); line-height: .8; white-space: nowrap; }
.footer__meta { grid-column: 4; display: flex; flex-direction: column; align-items: start; gap: 8px; padding-left: 16px; font-size: 13px; color: #a9a8a2; }
.footer__meta a { display: inline-flex; gap: 8px; align-items: center; min-height: 32px; color: var(--white); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
.footer__meta a:is(:hover, :focus-visible) { color: var(--accent-light); }
@media (max-width: 1023px) {
  .footer__statement { font-size: 32px; }
  .footer__nav a { font-size: 32px; }
  .footer__base { margin-top: 96px; }
}
@media (max-width: 767px) {
  .site-footer--studio { padding: 0 16px 32px; }
  .site-footer--studio::before { display: none; }
  .footer__corner--tl, .footer__corner--tr { top: 16px; }
    .footer__grid { grid-template-columns: 1fr 1fr; row-gap: 48px; padding-top: 72px; }
  .footer__lede, .footer__contact { grid-column: 1 / -1; padding: 0; }
  .footer__lede { padding-right: 72px; }
  .footer__nav { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
  .footer__nav a { font-size: 30px; line-height: 1.3; }
  .footer__email { font-size: 20px; }
  .footer__top { position: absolute; top: 64px; right: 16px; width: 52px; height: 52px; margin: 0; }
  .footer__base { grid-template-columns: 1fr; row-gap: 24px; margin-top: 72px; }
  .footer__name { grid-column: 1; font-size: 17vw; line-height: .82; white-space: normal; }
  .footer__meta { grid-column: 1; padding: 0; }
}
/* A feature block used as a whole page: clear the fixed header like the other page heroes do. */
.image-text-feature--page { margin-top: var(--header-height); }
/* The offers panel sits inside the page like a mounted plate, edges on the work grid's 8px line. */
.offers { margin-inline: 8px; }
@media (max-width: 767px) { .offers { margin-inline: 4px; } }
/* Shop: compact page head, then one feature block per product (reuses the workshop layout). */
.shop-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; padding: calc(var(--header-height) + 40px) var(--gutter) 48px; }
.shop-head p { max-width: 30ch; padding-bottom: 12px; color: var(--muted); font-size: 18px; line-height: 1.5; }
.product__visual { overflow: hidden; }
.product__wordmark { position: absolute; left: 0; right: 0; bottom: 9%; font-family: var(--display); font-size: clamp(56px, 8vw, 132px); line-height: 1; text-align: center; color: rgb(17 17 16 / 82%); pointer-events: none; }
.product__facts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.product__facts li { padding-left: 20px; position: relative; font-size: 15px; }
.product__facts li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 1px; background: var(--ink); }
.product__price { margin-top: 8px; font-family: var(--display); font-size: 44px; line-height: 1; }
.product__buy { margin-top: -8px; }
@media (max-width: 767px) {
  .shop-head { flex-direction: column; align-items: start; gap: 16px; padding: calc(var(--header-height) + 32px) 16px 32px; }
  .shop-head p { padding-bottom: 0; font-size: 16px; }
}
/* About intro: portrait and bio in one screen, same frame as Workshop and Shop. */
.about-intro { grid-template-columns: 1fr 1fr; }
.about-intro .image-text-feature__media { aspect-ratio: auto; align-self: stretch; min-height: min(50vw, calc(100svh - var(--header-height) - 44px)); }
.about-intro .about-intro__copy { gap: 14px; padding: 40px 56px; }
.about-intro__copy p { max-width: 58ch; color: var(--muted); font-size: 15px; line-height: 1.6; }
.about-intro__copy .about-intro__lead { color: var(--ink); font-size: 20px; line-height: 1.45; }
@media (max-width: 1279px) {
  .about-intro .about-intro__copy { gap: 12px; padding: 32px; }
  .about-intro__copy p { font-size: 14px; line-height: 1.55; }
  .about-intro__copy .about-intro__lead { font-size: 18px; }
}
@media (max-width: 767px) {
  .about-intro { grid-template-columns: 1fr; }
  .about-intro .image-text-feature__media { aspect-ratio: 1 / 1; align-self: start; min-height: 0; }
  .about-intro .about-intro__copy { padding: 40px 16px 56px; gap: 14px; }
  .about-intro__copy p { font-size: 15px; }
}
/* Menu holds only the links now: one row, links centred. */
.menu-panel { grid-template-rows: 1fr; }
/* Wide-cover album on the Work grid: same half-row width as the tall albums, 3:2 cover. */
.portfolio-item--landscape.portfolio-item--series { grid-column: span 6; }
/* Red band: one slim strip on every page. Headline left, actions right, one centre line. */
.contact-band, .contact-band.contact-band--home, .contact-band--compact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 48px; row-gap: 24px; min-height: 0; padding: 56px var(--gutter); }
.contact-band__title, .contact-band--compact .contact-band__title, .contact-band--home .contact-band__title { margin: 0; max-width: none; font-size: clamp(56px, 5.6vw, 96px); line-height: .92; }
.contact-band__title em, .contact-band--compact .contact-band__title em { font-size: 1em; line-height: inherit; }
.contact-band__actions { display: flex; align-items: center; gap: 32px; }
.contact-band__button { align-self: auto; white-space: nowrap; }
.contact-band__actions .text-link { white-space: nowrap; }
@media (max-width: 767px) {
  .contact-band, .contact-band.contact-band--home, .contact-band--compact { grid-template-columns: 1fr; row-gap: 28px; padding: 48px 16px; }
  .contact-band__title, .contact-band--compact .contact-band__title, .contact-band--home .contact-band__title { margin: 0; font-size: 52px; }
  .contact-band__title em, .contact-band--compact .contact-band__title em { font-size: 1em; }
  .contact-band__actions { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .contact-band__actions .text-link { align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Section head without an eyebrow label: keep the heading in its usual column. */
.section-head--bare .display-editorial { grid-column: 2; }
@media (max-width: 767px) { .section-head--bare .display-editorial { grid-column: 1; } }
/* Hero slider: photographs crossfade in place, denim leads. */
.hero__media[data-hero-slide] { transition: opacity 1200ms var(--ease); }
.hero__media[data-hero-slide]:not(.is-active) { opacity: 0; }
.hero__media.hero__media--beach { object-position: 62% 55%; }
.hero__media.hero__media--mansion { object-position: 55% center; }
.hero__shade--bright { background: linear-gradient(180deg, rgb(0 0 0 / 45%), transparent 30%), linear-gradient(0deg, rgb(0 0 0 / 30%), transparent 40%); opacity: 0; transition: opacity 1200ms var(--ease); }
.hero.is-bright .hero__shade--bright { opacity: 1; }
.hero__folio > a { margin-left: auto; }
.hero__dots { display: flex; gap: 8px; }
.hero__dots[hidden] { display: none; }
.hero__dot { padding: 12px 8px; margin-block: -12px; border: 0; background: none; letter-spacing: inherit; text-transform: inherit; opacity: .55; transition: opacity 300ms var(--ease); }
.hero__dot:first-child { margin-left: -8px; }
.hero__dot span { display: block; padding-bottom: 4px; border-bottom: 1px solid transparent; }
.hero__dot[aria-pressed="true"] { opacity: 1; }
.hero__dot[aria-pressed="true"] span { border-color: currentColor; }
@media (max-width: 767px) {
  .hero__media.hero__media--beach { object-position: 68% center; }
  .hero__folio { position: relative; inset: auto; }
}
/* Series frame caption with only the full-frame action: keep it on the right. */
.series-frame__caption > span:only-child { margin-left: auto; }
.series-frame > a:is(:hover, :focus-visible) .series-frame__caption { color: var(--accent); }
/* Footer row with only the back-to-top link: keep it on the right. */
.site-footer__top > a:only-child { margin-left: auto; }
/* Full image view inside the viewer: Close sits where the viewer's Close sits. */
.viewer__full { position: fixed; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 92px 32px 24px; background: var(--ink); }
.viewer__full[hidden] { display: none; }
.viewer__full img { width: 100%; height: 100%; object-fit: contain; }
.viewer__full-close { position: absolute; top: 24px; right: 32px; }
@media (max-width: 767px) {
  .viewer__full { padding: 72px 8px 8px; }
  .viewer__full-close { top: 12px; right: 16px; }
}
/* Square image feature: the frame matches the square photo on every screen, so nothing is cropped. */
.image-text-feature__media--square { min-height: 0; height: auto; aspect-ratio: 1 / 1; align-self: start; }
.image-text-feature__media--square img { object-position: center top; }
/* Questions: portrait + direct line on the left, answers on the right. Native details, one press opens. */
.faq { display: grid; grid-template-columns: 4fr 8fr; column-gap: 64px; padding: var(--section-space) var(--gutter); }
.faq__intro { display: flex; flex-direction: column; align-items: start; gap: 48px; }
.faq__person { display: flex; align-items: center; gap: 16px; }
.faq__person img { width: 64px; height: 64px; object-fit: cover; object-position: center 30%; filter: grayscale(1); }
.faq__person p { display: flex; flex-direction: column; line-height: 1.3; }
.faq__person strong { font-family: var(--display); font-size: 24px; font-weight: 400; letter-spacing: .02em; }
.faq__person span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.faq__ask h3 { font-family: var(--display); font-size: 32px; font-weight: 400; line-height: 1.1; }
.faq__ask p { margin-top: 12px; max-width: 34ch; color: var(--muted); font-size: 16px; line-height: 1.7; }
.faq__intro .text-link { margin-top: auto; }
.faq__main .display-editorial { font-size: 96px; line-height: .95; }
.faq__list { margin-top: 48px; border-bottom: 1px solid var(--line); }
.faq__item { border-top: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; font-family: var(--display); font-size: 36px; line-height: 1.1; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon { position: relative; flex: none; width: 48px; height: 48px; border: 1px solid var(--line); transition: background 240ms var(--ease), border-color 240ms var(--ease); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform 240ms var(--ease), background 240ms var(--ease); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__item summary:is(:hover, :focus-visible) .faq__icon { background: var(--ink); border-color: var(--ink); }
.faq__item summary:is(:hover, :focus-visible) .faq__icon::before, .faq__item summary:is(:hover, :focus-visible) .faq__icon::after { background: var(--white); }
.faq__item > p { max-width: 62ch; padding: 0 72px 28px 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.faq__item > p a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1279px) {
  .faq { column-gap: 48px; }
  .faq__main .display-editorial { font-size: 72px; }
  .faq__item summary { font-size: 30px; }
}
@media (max-width: 767px) {
  .faq { grid-template-columns: 1fr; row-gap: 56px; padding: 64px 16px; }
  .faq__intro { order: 2; gap: 32px; }
  .faq__main .display-editorial { font-size: 56px; }
  .faq__list { margin-top: 32px; }
  .faq__item summary { padding: 20px 0; font-size: 26px; }
  .faq__icon { width: 44px; height: 44px; }
  .faq__item > p { padding: 0 0 24px; font-size: 15px; }
}
.faq__email { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.faq__email:is(:hover, :focus-visible) { color: var(--accent); }
/* What I can offer: mirrors the workshop block. Compact index left, square frame right, one screen tall. */
.offers { display: grid; grid-template-columns: 1fr 1fr; background: #e6e4de; color: var(--ink); }
.offers__copy { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 40px; padding: 64px; }
.offers__title { font-family: var(--display); font-size: 72px; font-weight: 400; line-height: .9; text-transform: uppercase; }
.offers__copy .text-link { align-self: start; }
.offers__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.offer { display: grid; grid-template-columns: 36px 1fr 24px; column-gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); transition: opacity 300ms var(--ease); }
.offer__num { font-size: 12px; letter-spacing: .08em; color: var(--muted); transition: color 300ms var(--ease); }
.offer__name { font-family: var(--display); font-size: 34px; line-height: 1; text-transform: uppercase; transition: transform 400ms var(--ease); }
.offer__arrow { justify-self: end; font-size: 18px; transition: transform 300ms var(--ease), color 300ms var(--ease); }
.offer__thumb { display: none; }
.offer:focus-visible { outline-offset: -2px; }
.offer:focus-visible .offer__num, .offer:focus-visible .offer__arrow { color: var(--accent); }
.offers__stage { position: relative; }
.offers__frame { position: absolute; top: 64px; bottom: 64px; left: 50%; transform: translateX(-50%); aspect-ratio: 4 / 5; overflow: hidden; background: #e2e1dc; }
.offers__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms var(--ease); }
.offers__shot.is-active { opacity: 1; }
.offers__shot--film { object-fit: contain; background: #000; }
.offers__shot--numeral { display: grid; place-items: center; font-family: var(--display); font-size: clamp(200px, 26vw, 440px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgb(17 17 16 / 35%); }
/* Two paper panels back to back: split them with the site's own white grid gap. */
.offers + .image-text-feature { margin-top: 8px; }
@media (hover: hover) and (pointer: fine) {
  .offers__list:hover .offer { opacity: .32; }
  .offers__list:hover .offer:hover { opacity: 1; }
  .offer:hover .offer__name { transform: translateX(10px); }
  .offer:hover .offer__num { color: var(--accent); }
  .offer:hover .offer__arrow { color: var(--accent); transform: translate(4px, -4px); }
}
@media (max-width: 1279px) {
  .offers__copy { gap: 32px; padding: 48px 32px; }
  .offers__title { font-size: 56px; }
  .offer { padding: 12px 0; }
  .offer__name { font-size: 28px; }
  .offers__frame { top: 48px; bottom: 48px; }
}
@media (max-width: 767px) {
  .offers + .image-text-feature { margin-top: 4px; }
  .offers { grid-template-columns: 1fr; }
  .offers__stage { display: none; }
  .offers__copy { gap: 32px; padding: 64px 16px; }
  .offers__title { font-size: 56px; }
  .offers__frame { display: none; }
  .offer { grid-template-columns: 32px 1fr 56px; padding: 12px 0; }
  .offer__name { font-size: 26px; }
  .offer__thumb { display: block; width: 56px; height: 56px; object-fit: cover; }
  .offer__thumb--numeral { display: grid; place-items: center; border: 1px solid var(--line); font-family: var(--display); font-size: 24px; color: var(--muted); }
  .offer__arrow { display: none; }
}

/* Photos: no drag-out, no long-press save sheet on phones. */
img,
a[href$=".jpg"] {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* Long album titles (CHOCOLATE PHILOSOPHY): shrink to fit instead of running into the cover or off a phone. */
@media (min-width: 768px) and (max-width: 1023px) {
  .series-hero__copy .page-hero__massive--long { font-size: min(var(--type-hero), 12.5vw); }
}
@media (max-width: 767px) {
  .series-hero__copy .page-hero__massive--long { font-size: min(var(--type-hero), calc((100vw - 32px) / 3.9)); }
}


/* Workshop page: every image is mounted, not bled (the upcoming photo and the past posters read as one system):
   breathing space on every side, centred in the image column, and capped to one screen so each image reads whole. */
.workshop-past-section { padding-top: var(--section-space); }
.mount-row { --mount: clamp(24px, 4vw, 72px); --col: 58.333vw; }
.workshop-poster + .workshop-poster { margin-top: 8px; }
.image-text-feature__media--mounted { min-height: 0; height: auto; display: flex; align-items: center; justify-content: center; padding: var(--mount); }
/* Height is the smaller of "fills the column" and "fits one screen"; --ratio (set per image) gives the width, so space is reserved before the image loads. */
.image-text-feature__media--mounted img { position: static; inset: auto; width: auto; max-width: 100%; aspect-ratio: var(--ratio); height: min(calc((var(--col) - 2 * var(--mount)) / var(--ratio)), calc(100svh - var(--header-height) - 2 * var(--mount))); object-fit: contain; }
.image-text-feature__copy .mount-row__title { font-size: 56px; }
.image-text-feature__copy p.workshop-poster__partners { color: var(--muted); font-size: 14px; }
@media (max-width: 767px) {
  .mount-row { --mount: 16px; --col: 100vw; }
  .workshop-poster + .workshop-poster { margin-top: 4px; }
  .image-text-feature__media--mounted { height: auto; }
  .image-text-feature__copy .mount-row__title { font-size: 44px; }
}

/* About: "Awards & press." heading, then each item mounted like the workshop posters, 8px apart. */
.mount-row + .mount-row { margin-top: 8px; }
.image-text-feature__media--mounted > a { display: block; line-height: 0; }
@media (max-width: 767px) { .mount-row + .mount-row { margin-top: 4px; } }

/* About + Workshop section headings sit on the page's text line (where the facts text starts), not on a floating grid column. */
.section-head--datum { grid-template-columns: 1fr; padding-left: calc(var(--gutter) + 16px); padding-right: var(--gutter); }
.section-head--datum .display-editorial { grid-column: 1; }
@media (max-width: 767px) { .section-head--datum { padding-left: var(--gutter); } }

/* About intro: the portrait is mounted like every other image block on the page (50/50 split, so the column is 50vw). */
.about-intro .image-text-feature__media--mounted { min-height: 0; aspect-ratio: auto; }
@media (min-width: 768px) {
  .about-intro.mount-row { --col: 50vw; }
  /* photo and bio share one top line: both start at the mount margin */
  .about-intro .image-text-feature__media--mounted { align-items: flex-start; }
  .about-intro .about-intro__copy { justify-content: flex-start; padding-top: var(--mount); }
  /* optical: lift the first line so the capitals, not the line box, meet the photo top (Manrope at line-height 1.8) */
  .about-intro .about-intro__lead { margin-top: -0.54em; }
}

/* Shop: the STUDIOBAG plate is mounted like the About and Workshop images; the wordmark rides on the plate, sized to it (13.7% of its width, as before). */
.product__frame { position: relative; line-height: 0; container-type: inline-size; aspect-ratio: 1; width: min(calc(var(--col) - 2 * var(--mount)), calc(100svh - var(--header-height) - 2 * var(--mount))); }
.image-text-feature__media--mounted .product__frame img { width: 100%; height: 100%; max-width: none; }
@supports (container-type: inline-size) { .product__frame .product__wordmark { font-size: 13.7cqw; } }

/* About: "Also in the press", text-only mentions under the featured items, on the same text line as the facts and heading. */
.press-list { display: grid; gap: 16px; padding: 64px var(--gutter) var(--section-space) calc(var(--gutter) + 16px); }
.press-list__item { display: grid; gap: 6px; max-width: 62ch; color: var(--ink); text-decoration: none; }
.press-list__meta { color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.press-list__title { font-family: var(--display); font-size: 32px; line-height: 1.05; text-transform: uppercase; }
.press-list__note { color: var(--muted); font-size: 15px; line-height: 1.6; }
.press-list__item:is(:hover, :focus-visible) .press-list__title { color: var(--accent); }
@media (max-width: 767px) { .press-list { padding: 48px var(--gutter) 64px; } .press-list__title { font-size: 26px; } }

/* Motion, after gustaffurusten.se (script.js drives the decode, hover scramble, glide and clock). */
scr-word { white-space: nowrap; }
scr-char { display: inline-block; text-align: center; }
/* Live Bengaluru clock in the footer; tabular digits so the seconds never wobble. */
.footer__clock { margin-top: 8px; font-size: 13px; color: #a9a8a2; font-variant-numeric: tabular-nums; }

/* Album page title = the viewer title size (owner's call, 2026-09-28): 48 / 40 tablet / 32 phone. Overrides every long-title rule above. */
.series-hero__copy h1, .series-hero__copy h1.series-title--long, .series-hero__copy .page-hero__massive--long { font-size: 48px; }
@media (min-width: 768px) and (max-width: 1023px) {
  .series-hero__copy h1, .series-hero__copy h1.series-title--long, .series-hero__copy .page-hero__massive--long { font-size: 40px; }
}
@media (max-width: 767px) {
  .series-hero__copy h1, .series-hero__copy h1.series-title--long, .series-hero__copy .page-hero__massive--long { font-size: 32px; }
}

/* Collage (after benjoarwas.com, owner's call 2026-09-28): home + Work cards keep each photo's own shape,
   one or two columns wide, dropped into the shortest columns by script.js. Edges sit on the logo line.
   Without script the old grid stays. */
.is-collage { display: block; position: relative; margin-inline: calc(var(--gutter) - 8px); }
.is-collage > article:is(.project-card, .portfolio-item) { position: absolute; top: 0; left: 0; padding: 0; margin: 0; }
.is-collage > article[hidden] { display: none; }
.is-collage .project-card__image-wrap, .is-collage .portfolio-item__media { aspect-ratio: var(--card-ratio, 2 / 3); max-height: none; }
.is-collage .project-card__image-wrap img, .is-collage .portfolio-item__media img { height: 100%; max-height: none; object-fit: cover; }
@media (max-width: 767px) { .is-collage { margin-inline: calc(var(--gutter) - 4px); } }
/* Work filter line sits on the same edge as the logo and the collage at every width (phones already do). */
@media (min-width: 768px) { .filter-strip { margin-inline: calc(var(--gutter) - 8px); } }
/* Touch screens have no hover, so the "View series" label used to sit permanently on every card (owner: "oh sweet horror", 29 Sept). Photo-only cards there; the whole card is the link. */
@media (max-width: 767px), (hover: none) {
  .project-card__view, .portfolio-item__media > span { display: none; }
}
/* "What I offer" stays on one line everywhere (owner, 29 Sept: the forced break looked weird on a phone). */
.offers__title { white-space: nowrap; }
/* "What I offer" and "Any questions?" take the same size as "Have a project in mind?" at every width (owner, 29 Sept: they read too large). */
.offers__title, #faq-title { font-size: var(--type-statement); }
/* Copy buttons beside the footer phone and email (owner, 29 Sept). Plain text, no drawn box; "Copied" confirms in the accent. */
.footer__line { display: flex; align-items: baseline; gap: 16px; }
.footer__line + .footer__line { margin-top: 12px; }
.footer__line .footer__email { margin-top: 0; }
.footer__copy { display: inline-flex; align-items: center; font-family: var(--utility); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1; color: #a9a8a2; background: none; border: 0; padding: 6px; margin-left: -6px; cursor: pointer; transform: translateY(2px); }
.footer__copy svg { display: block; }
.footer__copy:is(:hover, :focus-visible) { color: var(--white); }
.footer__copy.is-done { color: var(--accent-light); }
/* Shop: licence request instead of a WhatsApp chat (owner, 29 Sept). Same fields as the contact form, on the paper page. */
.licence-form { display: grid; gap: 12px; margin-top: 4px; max-width: 460px; }
.licence-form__title { font-family: var(--utility); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.licence-form .field input { background: var(--white); border-color: var(--line); }
.licence-form .field input:focus { border-color: var(--ink); }
.licence-form__submit { margin-top: 4px; justify-self: start; }
.licence-form__note { margin-top: 0; min-height: 0; }
.licence-form__note:empty { display: none; }
.product__steps { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; line-height: 1.55; color: var(--muted); }
/* Same short dash as the facts list above it (owner, 29 Sept: no 01 02 03). */
.product__steps li { position: relative; padding-left: 20px; }
.product__steps li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--ink); }
@media (max-width: 767px) { .licence-form { max-width: none; } .inquiry-form__pair { grid-template-columns: 1fr; } }
/* Shop copy lines (owner's copy, 29 Sept). */
.product__terms { display: inline-block; margin-top: 6px; padding: 6px 10px; background: #f7c43c; font-size: 14px; font-weight: 500; color: var(--ink); }
.product__refund { margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--muted); max-width: 46ch; }
/* keep the terms line tight under the price (the column gap is 32px). */
.product__price + .product__terms { margin-top: -34px; }
@media (max-width: 767px) { .product__price + .product__terms { margin-top: -32px; } }
/* Shop: the plate starts on the same line as the copy (owner, 29 Sept: "it must come up"), like the About portrait. */
@media (min-width: 768px) {
  .product.mount-row .image-text-feature__media--mounted { align-items: flex-start; }
  .product.mount-row .image-text-feature__copy { justify-content: flex-start; padding-top: var(--mount); }
}
/* Video page: a still frame with a play mark; the YouTube player loads only when pressed (owner noticed the slow thumbnails, 29 Sept). */
.film__poster { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #121212; cursor: pointer; overflow: hidden; }
.film__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film__play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(17, 17, 16, .82); transition: background 200ms var(--ease), transform 200ms var(--ease); }
.film__play::after { content: ""; position: absolute; left: 55%; top: 50%; width: 0; height: 0; transform: translate(-50%, -50%); border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--paper); }
.film__poster:is(:hover, :focus-visible) .film__play { background: var(--accent); transform: translate(-50%, -50%) scale(1.06); }
.film__poster:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 767px) { .film__play { width: 60px; height: 60px; } }
/* Hero: light prev / next arrows at mid-height on the far left and right (owner, 29 Sept: "where people generally see them"). */
.hero__arrows { position: absolute; top: 50%; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 calc(var(--gutter) - 12px); transform: translateY(-50%); pointer-events: none; z-index: 3; }
.hero__arrows[hidden] { display: none; }
.hero__arrow { pointer-events: auto; width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: none; color: var(--white); font-family: var(--utility); font-size: 26px; line-height: 1; opacity: .6; cursor: pointer; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); transition: opacity 300ms var(--ease); }
.hero__arrow:is(:hover, :focus-visible) { opacity: 1; }
.hero__arrow:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
@media (max-width: 767px) { .hero__arrows { padding: 0 4px; } .hero__arrow { font-size: 22px; opacity: .75; } }
.hero__folio { justify-content: flex-start; }
.hero__folio > a { margin-left: auto; }
/* Album page: a one-line credit under the title (Adventure Worx, agency Chitramaya; owner, 29 Sept). */
.series-hero__credit { margin-top: -16px; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 44ch; }
/* The label wears the Video page's credit font (owner, 29 Sept: "the AGENCY font used in the video section"). */
.series-hero__credit-label { font-family: var(--display); font-weight: 400; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
@media (max-width: 767px) { .series-hero__credit { margin-top: -8px; font-size: 13px; } }
/* Shop heading: same size as the statement headings, and a shorter block (owner, 29 Sept: "SHOP can be sized down, eating up space"). */
.shop-head { padding: calc(var(--header-height) + 24px) var(--gutter) 24px; }
.shop-head .page-hero__massive { font-size: calc(var(--type-editorial) * .75); } /* two steps below the other page titles (owner, 29 Sept: SHOP still overpowering, then one more) */
.shop-head p { padding-bottom: 6px; }
@media (max-width: 767px) { .shop-head { padding: calc(var(--header-height) + 20px) 16px 20px; } }
/* Page titles on Work, Video and Contact: statement size, shorter blocks (owner, 29 Sept: applied after the Shop). */
.page-hero--work .page-hero__massive, .video-hero .page-hero__massive, .contact-page h1 { font-size: var(--type-statement); }
.page-hero--work, .video-hero { padding-top: calc(var(--header-height) + 24px); padding-bottom: 32px; row-gap: 24px; }
.contact-page { padding-top: calc(var(--header-height) + 24px); }
@media (max-width: 767px) { .page-hero--work, .video-hero { padding-top: calc(var(--header-height) + 20px); padding-bottom: 24px; } }
#workshop-title { font-size: var(--type-statement); }
/* Shop has no Back to home at all (owner, 29 Sept): the logo is the way home. */