:root {
  --paper: #f0ede6;
  --ink: #171816;
  --muted: #686a64;
  --line: rgba(23, 24, 22, 0.18);
  --accent: #b8643c;
  --brand-font: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

.site-header {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 3.2vw;
  color: white;
}

.brand { display: inline-flex; align-items: center; gap: .7em; text-decoration: none; font-family: var(--brand-font); font-size: clamp(19px, 1.45vw, 23px); font-weight: 600; letter-spacing: -.025em; }
.site-header > .brand { color: #fff; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .42)); }
.brand-mark { width: 1.18em; height: 1.18em; border: 1.5px solid currentColor; border-radius: 50%; position: relative; flex: 0 0 auto; }
.brand-mark::before { content: ""; position: absolute; inset: .18em; border: 1px solid currentColor; border-radius: 50%; opacity: .78; }
.brand-aperture {
  position: absolute;
  inset: .08em;
  width: calc(100% - .16em);
  height: calc(100% - .16em);
  overflow: visible;
  fill: rgba(0, 0, 0, .28);
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .34));
  transform-origin: center;
}
.brand-aperture path { fill: none; opacity: .95; }
.brand-mark:hover::before { animation: lens-ring-adjust .72s cubic-bezier(.3,.75,.25,1); }
.brand-mark:hover .brand-aperture { animation: aperture-adjust .72s cubic-bezier(.3,.75,.25,1) forwards; }

@keyframes lens-ring-adjust {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(.82); }
}

@keyframes aperture-adjust {
  0% { transform: rotate(0) scale(1); }
  42% { transform: rotate(28deg) scale(.68); }
  72% { transform: rotate(52deg) scale(.82); }
  100% { transform: rotate(60deg) scale(1); }
}
.brand-lockup { display: inline-flex; width: max-content; flex-direction: column; }
.brand-name { display: inline-flex; align-items: center; gap: .28em; line-height: 1; }
.brand-studio {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .75em;
  margin-top: .48em;
  font-family: "Manrope", sans-serif;
  font-size: .34em;
  font-weight: 600;
  line-height: .7;
  letter-spacing: .38em;
  text-indent: .38em;
  text-transform: uppercase;
  transform: scaleY(.74);
  transform-origin: center top;
}
.brand-studio::before,
.brand-studio::after {
  content: "";
  height: 1px;
  background: currentColor;
  opacity: .72;
}
.brand-word { display: inline-block; position: relative; }
.brand-light { --spot-x: 50%; --spot-y: 50%; --shadow-x: 0px; --shadow-y: 2px; isolation: isolate; transition: text-shadow .18s ease; }
.brand-light::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -13px -18px;
  border-radius: 50%;
  background: radial-gradient(circle 34px at calc(var(--spot-x) + 18px) calc(var(--spot-y) + 13px), rgba(255, 255, 255, .62), rgba(242, 247, 255, .18) 56%, transparent 78%);
  filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.brand-light::after {
  content: "Light";
  position: absolute;
  z-index: -1;
  inset: 0;
  color: rgba(0, 0, 0, .78);
  filter: blur(1.2px);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--shadow-x), var(--shadow-y));
  transition: opacity .14s ease, transform .08s linear;
}
.brand-light.is-lit { color: #fff; text-shadow: 0 0 8px rgba(255, 255, 255, .38); }
.brand-light.is-lit::before,
.brand-light.is-lit::after { opacity: 1; }
.focus-text { display: inline-block; transform-origin: center; }
.brand-focus::before,
.brand-focus::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  opacity: 0;
  transform: scale(1.45);
  transition: opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}
.brand-focus::before { top: -5px; left: -7px; border-top: 1px solid currentColor; border-left: 1px solid currentColor; }
.brand-focus::after { right: -7px; bottom: -5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.brand-focus.is-focusing .focus-text { animation: focus-breathe .72s cubic-bezier(.45,0,.25,1); }
.brand-focus.is-locked::before,
.brand-focus.is-locked::after { opacity: 1; transform: scale(1); }

@keyframes focus-breathe {
  0% { filter: blur(0); transform: scale(1); }
  28% { filter: blur(2px); transform: scale(1.015); }
  58% { filter: blur(5px); transform: scale(1.04); }
  82% { filter: blur(1.2px); transform: scale(.99); }
  100% { filter: blur(0); transform: scale(1); }
}
nav { display: flex; gap: 26px; align-items: center; padding: 10px 14px; color: #fff; background: rgba(14, 16, 14, .46); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; box-shadow: 0 8px 28px rgba(0, 0, 0, .2); backdrop-filter: blur(10px); }
nav a { font-size: 13px; font-weight: 500; text-decoration: none; text-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.nav-cta { border-bottom: 1px solid currentColor; padding-bottom: 4px; }

.hero { position: relative; min-height: 100svh; color: white; display: grid; align-items: end; overflow: clip; }
.hero-photo { position: absolute; inset: 0; }
.photo-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,16,13,.5) 0, rgba(13,16,13,.08) 58%, rgba(13,16,13,.12)); }
.hero-copy { position: relative; z-index: 2; padding: 0 5vw 10vh; max-width: 950px; }
.eyebrow, .section-label { margin: 0 0 22px; text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 600; }
h1, h2 { margin: 0; font-family: "Manrope", sans-serif; font-weight: 400; letter-spacing: -.055em; }
h1 { font-size: clamp(50px, 6.8vw, 108px); line-height: 1.02; }
.text-link { display: inline-flex; gap: 13px; margin-top: 34px; text-decoration: none; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.65); padding-bottom: 6px; }
.scroll-cue { position: absolute; right: 3.2vw; bottom: 7vh; z-index: 2; margin: 0; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; writing-mode: vertical-rl; }

.intro { padding: 18vh 8vw 20vh; display: grid; grid-template-columns: 1fr 3fr; gap: 4vw; }
.intro h2 { max-width: 900px; font-size: clamp(43px, 6vw, 92px); line-height: 1; }
.intro > p:last-child { grid-column: 2; max-width: 410px; color: var(--muted); font-size: 17px; line-height: 1.6; }

.photo-story { background: #11130f; color: white; }
.story-panel { position: relative; min-height: 150vh; }
.sticky-photo { position: sticky; top: 0; height: 100svh; overflow: hidden; clip-path: inset(var(--clip, 7%) var(--clip, 7%) round 3px); transition: clip-path .2s linear; }
.panel-two .sticky-photo { clip-path: inset(var(--clip, 7%) var(--clip, 7%) round 3px); }
.sticky-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.45)); }
.story-caption { position: absolute; z-index: 3; left: 5vw; bottom: 10vh; display: flex; align-items: start; gap: 32px; }
.story-caption span { font-size: 11px; opacity: .7; margin-top: 9px; }
.story-caption p { margin: 0; font-family: "Manrope", sans-serif; font-size: clamp(36px, 5.2vw, 78px); line-height: .98; letter-spacing: -.05em; }

@media (min-width: 761px) {
  .panel-one {
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(220px, .7fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(54px, 8vw, 130px);
    padding: clamp(110px, 13vw, 190px) 8vw;
  }

  .panel-one .sticky-photo {
    position: relative;
    top: auto;
    height: auto;
    aspect-ratio: 3 / 2;
    order: 2;
    clip-path: none;
    border-radius: 4px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, .3);
  }

  .panel-one .sticky-photo::after { display: none; }

  .panel-one .story-caption {
    position: relative;
    left: auto;
    bottom: auto;
    order: 1;
  }

  .panel-one .story-caption p { font-size: clamp(40px, 4.4vw, 68px); }
}

.services { padding: 18vh 8vw 20vh; }
.service-line { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--line); padding: 26px 0 30px; }
.service-line:last-child { border-bottom: 1px solid var(--line); }
.service-line h2 { font-size: clamp(38px, 5vw, 74px); }
.service-line span { color: var(--muted); font-size: 11px; }

.inquiry { min-height: 90vh; display: grid; grid-template-columns: 1.15fr .85fr; background: #d8d2c6; }
.inquiry-photo { overflow: hidden; min-height: 70vh; }
.inquiry-photo img { transform: scale(1.04); }
.inquiry-card { padding: 11vw 7vw; align-self: center; }
.inquiry-card h2 { font-size: clamp(50px, 6vw, 88px); line-height: .96; }
.inquiry-card > p:not(.eyebrow) { color: var(--muted); font-size: 17px; margin: 24px 0 42px; }
.button { display: inline-block; background: var(--ink); color: white; text-decoration: none; padding: 16px 23px; font-size: 13px; border-radius: 999px; transition: transform .25s ease, background .25s ease; }
.button:hover { transform: translateY(-2px); background: var(--accent); }
.button-muted { cursor: default; background: #454740; }
.button-muted:hover { transform: none; background: #454740; }

footer { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 5vw; padding: 70px 5vw; background: var(--ink); color: #f5f1e9; }
footer p { margin: 0; color: #a8aaa3; font-size: 12px; line-height: 1.6; }

.media-frame img { will-change: transform; transform: scale(1.08) translateY(var(--shift, 0px)); }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .site-header { padding: 20px; }
  nav a:not(.nav-cta) { display: none; }
  .hero-copy { padding: 0 22px 12vh; }
  .scroll-cue { display: none; }
  .intro { grid-template-columns: 1fr; padding: 14vh 24px; }
  .intro h2, .intro > p:last-child { grid-column: 1; }
  .intro > p:last-child { margin-top: 22px; }
  .story-panel { min-height: 125vh; }
  .story-caption { left: 24px; bottom: 9vh; }
  .services { padding: 14vh 24px; }
  .inquiry { grid-template-columns: 1fr; }
  .inquiry-photo { min-height: 62vh; }
  .inquiry-card { padding: 80px 24px 90px; }
  footer { grid-template-columns: 1fr; padding: 54px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .media-frame img { transform: none !important; }
  .brand-focus.is-focusing .focus-text { animation: none; }
  .brand-focus:hover::before,
  .brand-focus:hover::after { opacity: 1; transform: scale(1); }
  .brand-mark:hover::before,
  .brand-mark:hover .brand-aperture { animation: none; }
}