:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

:root{
  --ink:#14120f;
  --surface:#eee7d6;
  --surface-2:#e3dbc5;
  --paper:#ffffff;
  --text-dim:#6b6459;
  --text-dim-2:#948c7d;
  --accent:#0ea5e9;
  --accent-soft:#cfe6ec;
  --accent-2:#c98a2e;
  --on-image:#ffffff;
  --line:rgba(20,18,15,0.12);
  --line-strong:rgba(20,18,15,0.22);
  --shadow: 0 24px 48px -28px rgba(20,18,15,0.22);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Jost", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-inline:clamp(16px, 4vw, 56px);
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ max-width:1180px; margin-inline:auto; }

h1,h2,h3{
  font-family:"Jost", ui-sans-serif, system-ui, sans-serif;
  font-weight:700;
  line-height:1.02;
  letter-spacing:-0.01em;
  text-wrap:balance;
  margin:0;
}

.eyebrow{
  font-family:"Jost", sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:-0.01em;
  color:var(--accent);
}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(to bottom, rgba(255,255,255,0.94), rgba(255,255,255,0.8) 70%, transparent);
  backdrop-filter:blur(6px);
  padding-block:16px;
  margin-inline:calc(-1 * clamp(16px, 4vw, 56px));
  padding-inline:clamp(16px, 4vw, 56px);
}
.site-inner{
  max-width:1180px; margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand-name{
  font-family:"Jost", sans-serif;
  font-weight:700;
  font-size:clamp(22px, 3.4vw, 32px);
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--accent);
}
nav.links{ display:flex; gap:clamp(14px,3vw,28px); font-size:13.5px; }
nav.links a{
  text-decoration:none; color:var(--text-dim);
  border-bottom:1px solid transparent;
  padding-block:2px;
  white-space:nowrap;
  transition:color .2s ease, border-color .2s ease;
}
nav.links a:hover, nav.links a:focus-visible{ color:var(--ink); border-color:var(--accent); }

@media (max-width:640px){
  .site-inner{ flex-wrap:wrap; row-gap:14px; }
  nav.links{ width:100%; flex-wrap:wrap; gap:10px 18px; font-size:12.5px; }
}

/* ---------- hero ---------- */
.hero{
  margin-top:18px;
  position:relative;
  border-radius:4px;
  overflow:hidden;
  border:1px solid var(--line);
  aspect-ratio:16/10.5;
  max-height:640px;
  animation:hero-in 1.1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes hero-in{ from{ opacity:0; transform:scale(1.035);} to{ opacity:1; transform:scale(1);} }
.hero img, .hero video{
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
}
.hero .scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(10,8,6,0.92) 0%, rgba(10,8,6,0.35) 46%, rgba(10,8,6,0.05) 72%),
    linear-gradient(to right, rgba(10,8,6,0.55) 0%, rgba(10,8,6,0) 42%);
}
.play-toggle{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%;
  background:rgba(20,18,15,0.55);
  border:1.5px solid rgba(255,255,255,0.7);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(3px);
  z-index:5;
  padding:0;
  transition:background .2s ease, transform .2s ease;
}
.play-toggle svg{ margin-left:3px; }
.play-toggle:hover{ background:rgba(20,18,15,0.75); transform:translate(-50%,-50%) scale(1.06); }
.play-toggle[hidden]{ display:none; }
.hero-copy{
  position:absolute; left:0; right:0; bottom:0;
  padding:clamp(20px,4vw,52px);
}
.hero-copy .eyebrow{ margin-bottom:10px; display:block; }
.hero-copy h1{
  font-size:clamp(2.4rem, 6.4vw, 4.6rem);
  color:var(--on-image);
}
.hero-copy .tagline{
  margin-top:14px;
  max-width:46ch;
  color:var(--accent-2);
  font-size:clamp(0.95rem, 1.4vw, 1.08rem);
  line-height:1.55;
}

/* ---------- intro ---------- */
.intro{
  margin-top:clamp(56px, 8vw, 96px);
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:clamp(24px, 5vw, 64px);
  align-items:start;
  padding-bottom:clamp(48px,7vw,80px);
  border-bottom:1px solid var(--line);
}
@media (max-width:760px){ .intro{ grid-template-columns:1fr; } }
.intro h2{ font-size:clamp(1.6rem, 3vw, 2.1rem); color:var(--ink); }
.intro p{
  margin:0 0 20px;
  max-width:62ch;
  color:var(--text-dim);
  font-size:1.02rem;
  line-height:1.7;
}
.services-row{
  display:flex; flex-wrap:wrap; gap:9px;
  margin-top:6px;
}
.tag{
  font-family:"Jost", sans-serif;
  font-weight:500;
  font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink);
  border:1px solid var(--line-strong);
  border-radius:100px;
  padding:7px 13px;
  white-space:nowrap;
}

/* ---------- about us ---------- */
.about-us{
  margin-top:clamp(64px,9vw,110px);
  padding-block:clamp(48px,7vw,80px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:center;
}
.about-us h2{
  font-size:clamp(1.8rem,3.6vw,2.6rem);
  color:var(--ink);
  margin-bottom:clamp(28px,5vw,44px);
}
.about-copy{
  max-width:62ch;
  margin-inline:auto;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.about-copy p{
  margin:0;
  color:var(--ink);
  font-size:1.02rem;
  line-height:1.75;
}
.about-signoff{
  margin-top:clamp(28px,5vw,40px);
  font-size:0.95rem;
  color:var(--text-dim);
}
.about-signoff a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--line-strong);
  text-underline-offset:3px;
  margin-inline:4px;
}
.about-signoff a:hover{ color:var(--accent); text-decoration-color:var(--accent); }

/* ---------- page header (used on sub-pages instead of hero) ---------- */
.page-header{
  margin-top:clamp(32px,5vw,56px);
  padding-bottom:clamp(32px,5vw,48px);
  border-bottom:1px solid var(--line);
}
.page-header h1{
  font-size:clamp(2rem,4.4vw,3.2rem);
  color:var(--ink);
  margin-top:10px;
}
.page-header p{
  margin-top:16px;
  max-width:56ch;
  color:var(--text-dim);
  font-size:1.02rem;
  line-height:1.7;
}

/* ---------- gallery ---------- */
.gallery{ margin-top:clamp(56px,8vw,96px); }
.gallery:first-of-type{ margin-top:clamp(32px,5vw,56px); }
.gallery-head{
  display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:20px;
  margin-bottom:28px;
}
.gallery-head h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); color:var(--ink); }
.gallery-head .count{
  font-family:"Jost", sans-serif; font-weight:500; font-size:12px; color:var(--text-dim-2);
  letter-spacing:0.06em;
}
.gallery-head .count.alt{ color:var(--accent-2); }

.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; }
.filter-btn{
  font-family:"Jost", sans-serif;
  font-weight:500;
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  background:transparent;
  color:var(--text-dim);
  border:1px solid var(--line-strong);
  border-radius:100px;
  padding:8px 15px;
  cursor:pointer;
  transition:all .18s ease;
}
.filter-btn:hover{ color:var(--ink); border-color:var(--ink); }
.filter-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.filters.alt .filter-btn.active{ background:var(--accent-2); border-color:var(--accent-2); color:#fff; }

.platform-row{
  display:flex; align-items:center; gap:10px;
  margin-top:22px;
}
.platform-cta{
  font-family:"Jost", sans-serif; font-weight:500; font-size:12px; letter-spacing:0.04em;
  color:var(--accent-2); text-decoration:none; border-bottom:1px solid var(--accent-2);
  padding-bottom:2px;
}
.platform-cta:hover{ color:var(--ink); border-color:var(--ink); }

.frames{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(10px,1.6vw,18px);
}
@media (max-width:900px){ .frames{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px){ .frames{ grid-template-columns:repeat(2,1fr); } }

.frame{
  transition:opacity .25s ease, transform .25s ease;
}
.frame[hidden]{ display:none; }
.frame figure{ margin:0; }
.frame .shot{
  position:relative;
  overflow:hidden;
  border-radius:3px;
  background:var(--surface);
  border:1px solid var(--line);
}
.frame .shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.frame:hover .shot img{ transform:scale(1.045); }
.ratio-portrait{ aspect-ratio:3/4; }
.ratio-tall{ aspect-ratio:9/16; }
.ratio-23{ aspect-ratio:2/3; }

.frame .shot .num{
  position:absolute; top:10px; left:10px;
  font-family:"Jost", sans-serif; font-weight:500; font-size:11px;
  color:var(--on-image);
  background:rgba(20,18,15,0.55);
  border:1px solid rgba(255,255,255,0.28);
  border-radius:100px;
  padding:3px 8px;
  backdrop-filter:blur(3px);
}
.frame figcaption{
  margin-top:9px;
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
}
.frame .cap-main{ font-size:13px; color:var(--ink); }
.frame .cap-meta{
  font-family:"Jost", sans-serif; font-weight:500; font-size:10.5px; color:var(--text-dim-2);
  letter-spacing:0.04em; white-space:nowrap; text-transform:uppercase;
}

/* ---------- featured story ---------- */
.story{
  margin-top:clamp(64px,9vw,110px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,32px);
}
@media (max-width:760px){ .story{ grid-template-columns:1fr; } }
.story-media{
  position:relative; border-radius:4px; overflow:hidden; border:1px solid var(--line);
  aspect-ratio:9/16;
  max-height:640px;
  margin-inline:auto;
}
.story-media img, .story-media video{ width:100%; height:100%; object-fit:cover; }
.story-text{ display:flex; flex-direction:column; justify-content:center; gap:16px; padding-block:8px; }
.story-text h3{ font-size:clamp(1.5rem,2.6vw,2rem); color:var(--ink); }
.story-text p{ color:var(--text-dim); line-height:1.7; margin:0; max-width:48ch; font-size:1rem; }
.story-text .cap-meta{ font-family:"Jost",sans-serif; font-weight:500; font-size:11px; color:var(--accent-2); letter-spacing:0.1em; text-transform:uppercase; }

/* ---------- services ---------- */
.services{ margin-top:clamp(64px,9vw,110px); }
.services:first-of-type{ margin-top:clamp(32px,5vw,56px); }
.services h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); color:var(--ink); margin-bottom:30px; }
.services-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
@media (max-width:820px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .services-grid{ grid-template-columns:1fr; } }
.service-card{
  background:var(--surface);
  padding:26px 22px;
  display:flex; flex-direction:column; gap:10px;
}
.service-card .idx{ font-family:"Jost",sans-serif; font-weight:600; font-size:11px; color:var(--accent); }
.service-card h3{ font-weight:600; font-size:1.18rem; color:var(--ink); }
.service-card p{ margin:0; color:var(--text-dim); font-size:0.92rem; line-height:1.55; }

/* ---------- work with me ---------- */
.work-with-me{
  margin-top:clamp(64px,9vw,110px);
  padding-block:clamp(48px,7vw,80px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.work-with-me:first-of-type{ margin-top:clamp(32px,5vw,56px); border-top:none; padding-top:0; }
.work-with-me .eyebrow{ display:block; margin-bottom:10px; }
.work-with-me h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); color:var(--ink); margin-bottom:16px; }
.wwm-intro{ max-width:56ch; color:var(--text-dim); font-size:1.02rem; line-height:1.7; margin:0 0 30px; }
.wwm-cta{
  margin-top:clamp(28px,5vw,40px);
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
}
.cta-button{
  font-family:"Jost",sans-serif; font-weight:600; font-size:13px; letter-spacing:0.04em;
  color:#fff; background:var(--accent); text-decoration:none;
  border-radius:100px; padding:12px 24px;
  transition:background .2s ease;
}
.cta-button:hover{ background:var(--ink); }

/* ---------- footer ---------- */
footer.site{
  margin-top:clamp(64px,9vw,110px);
  padding-block:clamp(36px,6vw,56px);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:28px;
  align-items:flex-end; justify-content:space-between;
}
footer.site h2{
  font-size:clamp(1.8rem,4.2vw,3rem); color:var(--ink); max-width:14ch;
}
.footer-right{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.cta-link{
  font-family:"Jost",sans-serif; font-weight:500; font-size:13px; letter-spacing:0.04em;
  color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent);
  padding-bottom:2px;
}
.cta-link:hover{ color:var(--accent); }
.meta-line{ color:var(--text-dim-2); font-size:12.5px; }
.fine-print{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-size:11.5px; color:var(--text-dim-2); font-family:"Jost",sans-serif; font-weight:500;
  width:100%;
}
.fine-print-brand{ display:flex; align-items:center; gap:8px; }
.footer-mark{
  width:20px; height:20px; border-radius:50%;
  border:1px solid var(--line-strong);
  object-fit:cover;
  flex:none;
}
.brand-bar{
  height:56px;
  background:#592f6e;
  margin-inline:calc(-1 * clamp(16px, 4vw, 56px));
  margin-top:clamp(36px,6vw,56px);
}