/* Alcor Visual — editorial photography studio site */

:root {
  --bg: #FAFAF7;
  --paper: #F5F2ED;
  --ink: #1A1A1A;
  --meta: #6B6B6B;
  --hair: #E5E2DD;
  --accent: #8B7355;

  --serif: "Fraunces", "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }

::selection { background: var(--ink); color: var(--bg); }

/* keep page hidden until i18n is applied to avoid an EN flash on HR sessions */
html.av-i18n-pending body { visibility: hidden; }

/* ---------- animation foundation ----------
   One reveal pattern used everywhere: fade in (opacity 0 → 1) + 16px upward
   translate, 700ms ease-out. Implemented via @keyframes animation (NOT CSS
   transition) because transitions have a property-change-detection race during
   the animation-delay window — when .av-reveal sets opacity 0 and .is-visible
   is added before the delay elapses, the browser sees no change to animate
   and silently skips the transition. Animations don't suffer from this — they
   just run when the rule applies. */

html { scroll-behavior: smooth; }

@keyframes av-reveal-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .av-reveal {
    opacity: 0;
    transform: translateY(16px);
  }
  .av-reveal.is-visible {
    animation: av-reveal-in 700ms ease-out var(--av-reveal-delay, 0ms) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .av-reveal { opacity: 1; transform: none; }
  .av-reveal.is-visible { animation: none; }
}

/* ---------- nav ---------- */
.av-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
}
.av-nav--solid { background: var(--bg); border-bottom: 1px solid var(--hair); }
.av-nav--over  {
  position: fixed; top: 0; left: 0; right: 0;
  background: rgba(250,250,247,0.85);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(229,226,221,0.4);
}

.av-nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 56px;
  gap: 24px;
  max-width: 1600px;
  margin: 0 auto;
}

.av-logo {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--ink);
  justify-self: start;
  display: inline-flex;
  align-items: center;
}
.av-logo img {
  display: block;
  height: 18px;
  width: auto;
}

.av-nav__center {
  display: flex;
  gap: 36px;
  align-items: center;
  justify-self: center;
}
.av-nav__link {
  background: none;
  border: 0;
  padding: 6px 0;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.02em;
  position: relative;
  transition: opacity 150ms ease;
  text-decoration: none;
}
.av-nav__link:hover { opacity: 0.6; }
.av-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--ink);
}
.av-nav__work { position: relative; }
.av-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -4px);
  background: var(--bg);
  border: 1px solid var(--hair);
  padding: 24px 32px;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
}
.av-dropdown.is-open,
.av-nav__work:focus-within .av-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.av-dropdown ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.av-dropdown a {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--ink);
  transition: color 150ms ease;
  display: block;
  outline: none;
}
.av-dropdown a:hover,
.av-dropdown a:focus-visible { color: var(--meta); }

/* Grouped two-column variant */
.av-dropdown--grouped {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 56px;
  padding: 28px 36px;
  min-width: 480px;
}
.av-dropdown--grouped.is-open { display: grid; }
.av-dropdown__col { min-width: 160px; }
.av-dropdown__h {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 16px;
}

.av-nav__lang {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-self: end;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.av-nav__lang button {
  background: none;
  border: 0;
  padding: 4px 2px;
  color: var(--meta);
  font-size: 12px;
  letter-spacing: 0.08em;
  transition: color 150ms ease;
}
.av-nav__lang button.is-active { color: var(--ink); }
.av-lang-sep { color: var(--hair); }

.av-burger {
  background: none;
  border: 0;
  color: var(--ink);
  padding: 4px;
  display: none;
  align-items: center;
}

/* mobile menu overlay */
.av-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  padding: 80px 28px 32px;
  display: flex;
  flex-direction: column;
  /* allow internal scroll when item count overflows the viewport (15+ items × 36px on small phones) */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.av-mobile-menu.is-open { opacity: 1; pointer-events: auto; }

/* Per-item stagger when menu opens — fades each <li> in 50ms after the previous.
   Items past index 9 share the 500ms cap so the reveal stays under 1s. */
@media (prefers-reduced-motion: no-preference) {
  .av-mobile-menu li {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 400ms ease-out, transform 400ms ease-out;
  }
  .av-mobile-menu.is-open li {
    opacity: 1;
    transform: translateY(0);
  }
  .av-mobile-menu.is-open li:nth-child(1) { transition-delay: 100ms; }
  .av-mobile-menu.is-open li:nth-child(2) { transition-delay: 150ms; }
  .av-mobile-menu.is-open li:nth-child(3) { transition-delay: 200ms; }
  .av-mobile-menu.is-open li:nth-child(4) { transition-delay: 250ms; }
  .av-mobile-menu.is-open li:nth-child(5) { transition-delay: 300ms; }
  .av-mobile-menu.is-open li:nth-child(6) { transition-delay: 350ms; }
  .av-mobile-menu.is-open li:nth-child(7) { transition-delay: 400ms; }
  .av-mobile-menu.is-open li:nth-child(8) { transition-delay: 450ms; }
  .av-mobile-menu.is-open li:nth-child(n+9) { transition-delay: 500ms; }
}

/* dedicated close button inside the menu — needed because the burger sits inside .av-nav (z-index 50)
   and gets covered by the menu (z-index 60); user couldn't see the X icon swap. Absolute positioning
   relative to the fixed-positioned menu means it stays pinned at top-right even when content scrolls. */
.av-mobile-close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: none;
  border: 0;
  padding: 4px;
  color: var(--ink);
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 1;
}
.av-mobile-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.av-mobile-list a {
  font-family: var(--serif);
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.av-mobile-group-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meta);
  margin-top: 12px;
  margin-bottom: 4px;
}
.av-mobile-group-label:first-child { margin-top: 0; }
.av-mobile-divider { height: 1px; background: var(--hair); margin: 16px 0 8px; }
.av-mobile-lang {
  /* margin-top: auto pushes lang switcher to bottom of the flex column when items fit;
     when content overflows and scrolls, it sits at end of natural flow (still at bottom). */
  margin-top: auto;
  padding-top: 24px;
  display: flex; gap: 8px; align-items: center;
  font-size: 12px; letter-spacing: 0.1em; color: var(--meta);
}
.av-mobile-lang button { background: none; border: 0; color: var(--meta); padding: 0; font-size: 12px; letter-spacing: 0.1em; }
.av-mobile-lang button.is-active { color: var(--ink); }

/* ---------- generic section ---------- */
.av-section {
  padding: 120px 56px;
  max-width: 1600px;
  margin: 0 auto;
}
/* Anchor-link offset so the sticky nav doesn't cover the section eyebrow
   when scrolling to a #hash target (footer Studio column → #about, #approach, #clients). */
.av-section[id] { scroll-margin-top: 80px; }

.av-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 24px;
}
.av-section__head { margin-bottom: 56px; max-width: 720px; }
.av-section__h {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: 0;
}

/* ---------- hero ---------- */
.av-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh; /* fits the visible viewport on mobile even with the address bar shown */
  min-height: 600px;
  overflow: hidden;
}
.av-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.92);
}
/* Bottom gradient overlay so the headline + meta line stay readable
   regardless of what's in the lower part of the hero photo.
   Transparent at ~50% height, fades to ~55% black at the bottom edge. */
.av-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
.av-hero__overlay {
  position: absolute;
  bottom: 56px;
  left: 56px;
  right: 56px;
  color: #fff;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  z-index: 2;
}
.av-hero__h {
  font-family: var(--serif);
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0;
  max-width: 860px;
  color: #fff;
}
.av-hero__meta {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  padding-bottom: 8px;
  white-space: nowrap;
}
/* Elegant scroll cue — a thin animated hairline, centred at the hero's
   bottom edge. Clicking it smooth-scrolls to the first content section. */
.av-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 2;
  display: block;
  padding: 8px 16px;
  line-height: 0;
}
.av-hero__scroll-line {
  display: block;
  width: 1px;
  height: 56px;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.25);
}
.av-hero__scroll-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 45%;
  background: rgba(255, 255, 255, 0.92);
  animation: av-hero-scroll 2.4s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
@keyframes av-hero-scroll {
  0%   { transform: translateY(-100%); }
  65%  { transform: translateY(222%); }
  100% { transform: translateY(222%); }
}
.av-hero__scroll:hover .av-hero__scroll-line { background: rgba(255, 255, 255, 0.4); }
@media (prefers-reduced-motion: reduce) {
  .av-hero__scroll-line::after { animation: none; height: 100%; opacity: 0.6; }
}
@media (max-width: 767px) {
  .av-hero__scroll { display: block; bottom: 26px; padding: 6px 16px; }
  .av-hero__scroll-line { height: 40px; }
}

/* ---------- selected work grid ---------- */
.av-selected-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 24px;
}
@media (max-width: 1024px) {
  .av-selected-grid { grid-template-columns: repeat(2, 1fr); }
}
.av-selected-card { display: block; }
.av-selected-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: opacity 200ms ease;
}
.av-selected-card:hover img { opacity: 0.9; }
.av-selected-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 14px;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.005em;
}
.av-selected-meta {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta);
  white-space: nowrap;
}

/* ---------- industries list ---------- */
.av-industries { border-top: 1px solid var(--hair); }
.av-industry-list { list-style: none; padding: 0; margin: 0; }
.av-industry-list li { border-bottom: 1px solid var(--hair); }
.av-industry-list a {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: baseline;
  gap: 32px;
  padding: 32px 0;
  font-family: var(--serif);
  transition: padding 220ms ease, color 220ms ease;
}
.av-industry-list a:hover { padding-left: 16px; color: var(--meta); }
.av-industry-num {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--meta);
}
.av-industry-label {
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.av-industry-arrow { color: var(--meta); font-size: 18px; }

/* ---------- studio statement on home ---------- */
/* Inherits .av-section's 1600px max-width + 56px horizontal padding so eyebrow
   and CTA align to the same left spine as industries above and clients below.
   The paragraph itself is constrained to 62ch for comfortable reading rhythm
   (matches the industry page intro). */
.av-statement__p {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin: 0 0 32px;
  max-width: 62ch;
}

.av-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}
.av-arrow-link .av-arrow {
  display: inline-block;
  transition: transform 250ms ease;
}
.av-arrow-link:hover .av-arrow { transform: translateX(4px); }

/* ---------- clients ---------- */
.av-clients__list {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  max-width: 1080px;
  margin: 0;
  color: var(--ink);
}
.av-mid { color: var(--meta); padding: 0 4px; }

/* ---------- CTA blocks ---------- */
.av-cta-block { text-align: center; padding-top: 160px; padding-bottom: 160px; border-top: 1px solid var(--hair); }
.av-cta-block__h {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 24px;
}
.av-cta-block__sub { color: var(--meta); font-size: 14px; letter-spacing: 0.04em; margin-bottom: 40px; }
.av-cta-block__link {
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: -0.005em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}

.av-cta-quiet { display: flex; align-items: center; justify-content: space-between; gap: 32px; border-top: 1px solid var(--hair); padding-top: 64px; padding-bottom: 64px; }
.av-cta-quiet p { font-family: var(--serif); font-size: 28px; margin: 0; letter-spacing: -0.005em; }

/* ---------- figure / caption ---------- */
.av-figure { margin: 0; position: relative; }
.av-figure img { width: 100%; height: 100%; object-fit: cover; transition: opacity 300ms ease; display: block; }
.av-figure:hover img { opacity: 0.85; }
.av-figure figcaption { margin-top: 10px; }
.av-caption {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta);
}

/* ---------- lightbox ---------- */
.av-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 20, 20, 0.96);
  display: none;
  flex-direction: column;
  align-items: stretch;
  opacity: 0;
  transition: opacity 220ms ease;
  -webkit-tap-highlight-color: transparent;
}
.av-lightbox.is-open { display: flex; opacity: 1; }

.av-lightbox__counter {
  position: absolute;
  top: 22px;
  left: 56px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.6);
  z-index: 2;
}
.av-lightbox__close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 150ms ease;
  z-index: 2;
}
.av-lightbox__close:hover { opacity: 0.6; }

.av-lightbox__main {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 80px 12px;
  min-height: 0;
}
.av-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  cursor: default;
  transition: opacity 180ms ease;
}
.av-lightbox.is-loading .av-lightbox__img { opacity: 0.4; }

.av-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 26px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 150ms ease, color 150ms ease;
}
.av-lightbox__nav:hover { opacity: 1; color: #fff; }
.av-lightbox__nav--prev { left: 16px; }
.av-lightbox__nav--next { right: 16px; }

.av-lightbox__caption {
  /* hidden by client decision — caption text stays in DOM for accessibility,
     but no visual caption is rendered in the lightbox. */
  display: none;
}

.av-lightbox__thumbs {
  display: flex;
  gap: 8px;
  padding: 0 24px 24px;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.av-lightbox__thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 150ms ease, outline-color 150ms ease;
  outline: 1px solid transparent;
  outline-offset: 2px;
}
.av-lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.av-lightbox__thumb:hover { opacity: 0.75; }
.av-lightbox__thumb.is-active {
  opacity: 1;
  outline-color: rgba(255, 255, 255, 0.9);
}

/* clickable cursor on masonry images so the affordance reads */
.av-masonry .av-figure { cursor: zoom-in; }

/* Hide per-photo caption labels in the masonry grid on industry pages.
   The caption text remains in the DOM so the lightbox can still read it
   for its own caption display when a photo is clicked. */
.av-masonry .av-figure figcaption { display: none; }

/* hidden masonry figures — revealed by the Load more button.
   Selector specificity is 0,3,0 so it beats `.av-masonry .av-figure { display: block }` (0,2,0)
   defined later in the masonry section, regardless of source order. */
.av-masonry .av-figure.av-figure--hidden { display: none; }

/* Load more button — sits below the industry masonry */
.av-load-more-wrap {
  text-align: center;
  padding: 16px 56px 96px;
  max-width: 1600px;
  margin: 0 auto;
}
.av-load-more {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  background: none;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: -0.005em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  transition: gap 220ms ease;
}
.av-load-more:hover { gap: 18px; }
.av-load-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.av-load-more__arrow { color: var(--meta); font-size: 18px; }
.av-load-more[hidden] { display: none; }
@media (max-width: 767px) {
  .av-load-more-wrap { padding: 16px 22px 64px; }
  .av-load-more { font-size: 18px; }
}

@media (max-width: 767px) {
  .av-lightbox__counter { top: 18px; left: 22px; }
  .av-lightbox__close   { top: 10px; right: 12px; }
  .av-lightbox__main    { padding: 56px 12px 8px; }
  .av-lightbox__nav     { padding: 6px; font-size: 22px; width: 40px; height: 40px; }
  .av-lightbox__nav--prev { left: 4px; }
  .av-lightbox__nav--next { right: 4px; }
  .av-lightbox__thumbs    { padding: 0 12px 16px; justify-content: flex-start; }
  .av-lightbox__thumb     { width: 52px; height: 52px; }
}

/* ---------- masonry gallery (industry pages) ---------- */
.av-masonry {
  column-count: 3;
  column-gap: 24px;
  padding: 0 56px 96px;
  max-width: 1600px;
  margin: 0 auto;
  display: block;
}
.av-masonry .av-figure {
  break-inside: avoid;
  margin: 0 0 24px;
  display: block;
}
.av-masonry .av-figure img {
  width: 100%;
  height: auto;
}

.av-pull-section { padding-top: 48px; padding-bottom: 96px; text-align: center; }
.av-pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 auto;
  max-width: 900px;
  color: var(--ink);
}

/* ---------- industry page ---------- */
/* Hero shares the .av-section 1600px max-width + 56px horizontal padding container,
   so kicker / H1 / lede / intro all sit on the same left edge as the logo above
   and the gallery below. Lede and intro use ch units for typographic measure
   independent of the container width. */
.av-ind-title { padding-top: 96px; padding-bottom: 96px; }
.av-ind-h1 {
  font-family: var(--serif);
  font-size: clamp(64px, 9vw, 120px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin: 0 0 48px;
}
.av-ind-lede {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.3;
  margin: 0 0 32px;
  max-width: 38ch;          /* ~45–55 cpl — display impact */
  letter-spacing: -0.005em;
}
.av-ind-intro {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  max-width: 62ch;          /* ~65–70 cpl — comfortable reading rhythm */
}

/* what we shoot + process */
.av-ind-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  border-top: 1px solid var(--hair);
}
.av-list-bare { list-style: none; padding: 0; margin: 0; }
.av-list-bare li {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.4;
  border-bottom: 1px solid var(--hair);
  padding: 18px 0;
}
.av-list-bare li:first-child { border-top: 1px solid var(--hair); }

.av-process { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 32px; }
.av-process li { display: grid; grid-template-columns: 56px 1fr; gap: 24px; align-items: start; }
.av-process__n {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--meta);
  padding-top: 6px;
}
.av-process h4 {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 8px;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.av-process p { margin: 0; color: var(--ink); }

/* FAQ */
.av-faq ul { list-style: none; padding: 0; margin: 0; }
.av-faq li { border-bottom: 1px solid var(--hair); }
.av-faq li:first-child { border-top: 1px solid var(--hair); }
.av-faq button {
  width: 100%;
  background: none;
  border: 0;
  padding: 28px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-align: left;
}
.av-faq__sign { font-family: var(--sans); font-size: 20px; color: var(--meta); font-weight: 200; }
/* max-height transition with 800px cap — well above any real FAQ answer (5 sentences ~ 200px),
   so no clipping in practice. The grid-template-rows trick was tried but had
   inconsistent rendering across browser versions; max-height is the reliable choice. */
.av-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 350ms ease;
}
.av-faq li.is-open .av-faq__a { max-height: 800px; }
.av-faq__a-inner { padding-bottom: 28px; }
.av-faq__a p { margin: 0; max-width: 760px; color: var(--meta); }
@media (prefers-reduced-motion: reduce) {
  .av-faq__a { transition: none; }
}

/* related */
.av-related { padding-bottom: 160px; }
.av-related__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.av-related__card { display: block; }
.av-related__card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity 200ms ease; }
.av-related__card:hover img { opacity: 0.9; }
.av-related__label {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.005em;
}

/* ---------- studio page ---------- */
/* Hero shares the .av-section 1600px container so kicker / H1 / intro all sit
   on the same left edge as the logo above and the sections below. The intro
   uses the same sans 17px / 62ch treatment as industry-page intros for
   structural consistency across the site. */
.av-studio-hero { padding-top: 160px; padding-bottom: 96px; }
.av-studio-h1 {
  font-family: var(--serif);
  font-size: clamp(56px, 8vw, 112px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin: 0 0 48px;        /* H1 → intro */
}
.av-studio-intro {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  max-width: 62ch;          /* ~65–70 cpl, matches industry page intros */
}

.av-approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.av-approach-item h3 {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.3;
  margin: 0 0 12px;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.av-approach-item p { margin: 0; color: var(--ink); }

/* studio team feature block */
.av-studio-team-feature { padding-top: 24px; padding-bottom: 24px; }
.av-tf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.av-tf-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: #f0f0ee;
  background-image: repeating-linear-gradient(
    135deg,
    #f0f0ee 0 14px,
    #e8e8e6 14px 16px
  );
  display: flex;
  align-items: center;
  justify-content: center;
}
.av-tf-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.av-tf-portrait-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  color: #b6b6b3;
  letter-spacing: 0.02em;
}
.av-tf-body { padding-top: 8px; }
.av-tf-title {
  font-family: var(--serif);
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 24px 0 48px;
  color: var(--ink);
}
.av-tf-paras p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 560px;
}
.av-tf-paras p:last-child { margin-bottom: 0; }
.av-tf-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--hair);
  max-width: 560px;
}
.av-tf-stat-n {
  font-family: var(--serif);
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 12px;
}
.av-tf-stat-l {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meta);
}

.av-press-list { list-style: none; padding: 0; margin: 0; }
.av-press-list li { border-bottom: 1px solid var(--hair); }
.av-press-list li:first-child { border-top: 1px solid var(--hair); }
.av-press-list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.005em;
  transition: padding 220ms ease, color 220ms ease;
}
.av-press-list a:hover { padding-left: 12px; color: var(--meta); }
.av-arrow { color: var(--meta); }

/* ---------- contact page ---------- */
.av-contact-v2 { padding-top: 96px; padding-bottom: 160px; }
.av-c2-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 96px;
  align-items: start;
}
.av-c2-left { padding-top: 8px; }
.av-c2-h1 {
  font-family: var(--serif);
  font-size: clamp(44px, 5.2vw, 80px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 24px 0 32px;
  color: var(--ink);
}
.av-c2-avail {
  font-size: 16px;
  line-height: 1.65;
  color: var(--meta);
  max-width: 480px;
  margin: 0 0 32px;
}
.av-c2-email {
  font-size: 16px;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.av-c2-form { display: flex; flex-direction: column; gap: 28px; }
.av-c2-submit {
  align-self: stretch;
  margin-top: 12px;
  background: var(--ink);
  color: var(--bg);
  border: 0;
  padding: 22px 24px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.18em;
  font-weight: 500;
  cursor: not-allowed;
  opacity: 0.45;
  transition: opacity 180ms ease, transform 180ms ease;
}
.av-c2-submit.is-valid { opacity: 1; cursor: pointer; }
.av-c2-submit.is-valid:hover { transform: translateY(-1px); }
.av-c2-submit[disabled] { transform: none; }

/* honeypot — removed visually, still submitted by bots */
.av-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* AJAX submit states */
.av-c2-form[hidden] { display: none; }
.av-c2-error {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #9b2c2c;
}
.av-c2-success { max-width: 460px; }
.av-c2-success[hidden] { display: none; }
.av-c2-success__h {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--ink);
  margin: 20px 0 16px;
}
.av-c2-success__p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--meta);
  margin: 0 0 24px;
}

/* form fields */
.av-field { display: flex; flex-direction: column; gap: 10px; }
.av-field label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meta);
}
.av-field input,
.av-field select,
.av-field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hair);
  padding: 10px 0;
  font-family: var(--sans);
  font-size: 17px;
  color: var(--ink);
  border-radius: 0;
  outline: none;
  transition: border-color 180ms ease;
  width: 100%;
}
.av-field input::placeholder,
.av-field textarea::placeholder { color: var(--meta); opacity: 0.7; }
.av-field input:focus,
.av-field select:focus,
.av-field textarea:focus { border-bottom-color: var(--ink); }
.av-field textarea { resize: vertical; min-height: 100px; }
.av-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--meta) 50%), linear-gradient(135deg, var(--meta) 50%, transparent 50%);
  background-position: calc(100% - 14px) 18px, calc(100% - 8px) 18px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

/* ---------- footer ---------- */
.av-footer { background: var(--paper); border-top: 1px solid var(--hair); margin-top: 0; }
.av-footer__cta {
  padding: 100px 56px 80px;
  border-bottom: 1px solid var(--hair);
  max-width: 1600px;
  margin: 0 auto;
}
.av-footer__cta-line {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}
.av-footer__cta-link {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.005em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}
.av-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 56px 32px;
  padding: 64px 56px;
  max-width: 1600px;
  margin: 0 auto;
}
.av-footer__h {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 18px;
}
.av-footer__cols ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.av-footer__cols a { color: var(--ink); transition: opacity 150ms ease; }
.av-footer__cols a:hover { opacity: 0.6; }

.av-footer__address {
  font-style: normal;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 18px;
}
.av-footer__address-line { display: block; }
.av-footer__contact-line {
  margin: 0 0 6px;
  color: var(--ink);
  line-height: 1.55;
}
.av-footer__contact-line a {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease, opacity 150ms ease;
}
.av-footer__contact-line a:hover {
  border-bottom-color: var(--hair);
}

.av-footer__bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  padding: 24px 56px;
  border-top: 1px solid var(--hair);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--meta);
  max-width: 1600px;
  margin: 0 auto;
}
.av-footer__copyright { flex: 0 1 auto; line-height: 1.55; }
.av-footer__legal { display: inline-flex; gap: 10px; align-items: center; flex: 0 1 auto; }
.av-footer__legal a { color: var(--meta); }
.av-footer__legal a:hover { color: var(--ink); }

/* ---------- components page ---------- */
.av-components__h {
  font-family: var(--serif);
  font-size: 56px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-weight: 400;
  margin: 0 0 64px;
}
.av-components__sub {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 64px 0 24px;
  border-top: 1px solid var(--hair);
  padding-top: 32px;
}
.av-components__type { display: flex; flex-direction: column; gap: 32px; }
.av-tspec__meta { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta); margin-bottom: 12px; }
.av-tspec--display { font-family: var(--serif); font-size: 96px; line-height: 1.05; letter-spacing: -0.02em; }
.av-tspec--h1 { font-family: var(--serif); font-size: 64px; line-height: 1.05; letter-spacing: -0.02em; }
.av-tspec--h2 { font-family: var(--serif); font-size: 40px; line-height: 1.15; }
.av-tspec--body { font-family: var(--sans); font-size: 17px; line-height: 1.55; max-width: 560px; }
.av-tspec--meta { font-family: var(--sans); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--meta); }

.av-components__sw { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.av-sw__chip { aspect-ratio: 1 / 1; }
.av-sw__chip--bg, .av-sw__chip--paper { border: 1px solid var(--hair); }
.av-sw__name { font-size: 13px; margin-top: 12px; }
.av-sw__v { font-size: 11px; color: var(--meta); letter-spacing: 0.06em; }
.av-components__links { display: flex; flex-direction: column; gap: 18px; align-items: start; }
.av-link-underline { border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.av-link-meta { font-size: 11px; letter-spacing: 0.14em; color: var(--meta); border-bottom: 1px solid var(--hair); padding-bottom: 2px; }
.av-components__form { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 720px; }
.av-components__patterns { display: flex; flex-direction: column; gap: 56px; }
.av-pat__label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta); margin-bottom: 16px; }
.av-components__footer-preview { border: 1px solid var(--hair); }
.av-components__footer-preview .av-footer { margin: 0; }

/* gallery patterns A–F */
.g-pa .av-figure { aspect-ratio: 16 / 9; }
.g-pb { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.g-pb .av-figure { aspect-ratio: 3 / 4; }
.g-pc { display: grid; grid-template-columns: 60fr 40fr; gap: 24px; align-items: start; }
.g-pc-1 { aspect-ratio: 4 / 3; }
.g-pc-2 { aspect-ratio: 3 / 4; margin-top: 80px; }
.g-pd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.g-pd .av-figure { aspect-ratio: 3 / 4; }
.g-pe { max-width: 720px; margin: 0 auto; }
.g-pe .av-figure { aspect-ratio: 3 / 4; }
.g-pf .av-figure { aspect-ratio: 21 / 9; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .av-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
}

@media (max-width: 900px) {
  .av-masonry { column-count: 2; padding: 0 22px 64px; column-gap: 16px; }
  .av-masonry .av-figure { margin-bottom: 16px; }
  .av-components__sw { grid-template-columns: repeat(3, 1fr); }
  .av-components__form { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .av-nav__inner { display: flex; justify-content: space-between; padding: 18px 22px; }
  .av-nav__center, .av-nav__lang { display: none; }
  .av-burger { display: flex; }

  .av-section { padding: 64px 22px; }
  .av-section__h { font-size: 28px; }

  .av-hero { height: 100vh; height: 100svh; min-height: 0; }
  .av-hero__overlay { bottom: 104px; left: 22px; right: 22px; flex-direction: column; align-items: flex-start; }
  .av-hero__h { font-size: 44px; }
  .av-hero__meta { white-space: normal; }

  .av-selected-grid { grid-template-columns: 1fr; gap: 32px; }
  .av-selected-label { font-size: 18px; }

  .av-industry-list a { grid-template-columns: 32px 1fr auto; gap: 16px; padding: 22px 0; }
  .av-industry-label { font-size: 32px; }

  .av-statement__p { font-size: 22px; }
  .av-clients__list { font-size: 18px; }

  .av-cta-block { padding-top: 80px; padding-bottom: 80px; }
  .av-cta-block__link { font-size: 20px; }
  .av-cta-quiet { flex-direction: column; align-items: flex-start; }
  .av-cta-quiet p { font-size: 22px; }

  .av-ind-h1 { font-size: 56px; margin-bottom: 32px; }
  .av-ind-lede { font-size: 22px; }
  .av-ind-twocol { grid-template-columns: 1fr; gap: 48px; }

  .av-faq button { font-size: 18px; padding: 22px 0; }

  .av-related__grid { grid-template-columns: 1fr; gap: 16px; }

  .av-studio-hero { padding-top: 96px; padding-bottom: 64px; }
  .av-studio-h1 { font-size: 48px; margin-bottom: 32px; }
  .av-approach-grid { grid-template-columns: 1fr; gap: 32px; }
  .av-tf-grid { grid-template-columns: 1fr; gap: 40px; }
  .av-tf-title { font-size: 36px; margin: 16px 0 32px; }
  .av-tf-stats { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
  .av-tf-stat-n { font-size: 24px; }

  .av-c2-grid { grid-template-columns: 1fr; gap: 56px; }
  .av-c2-h1 { font-size: 40px; }

  .av-footer__cta { padding: 56px 22px 40px; }
  .av-footer__cta-line { font-size: 32px; }
  .av-footer__cols { grid-template-columns: 1fr; gap: 40px; padding: 40px 22px; }
  .av-footer__bar { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 22px; }
  .av-footer__webdev { text-align: left; }

  .av-components__h { font-size: 36px; }
  .av-tspec--display { font-size: 56px; }
  .av-tspec--h1 { font-size: 44px; }
  .av-tspec--h2 { font-size: 28px; }
  .g-pb, .g-pc, .g-pd { grid-template-columns: 1fr; }
  .g-pc-2 { margin-top: 0; }
}

@media (max-width: 600px) {
  .av-masonry { column-count: 1; }
}