:root {
  color-scheme: dark;
  --background: #101110;
  --surface: #191b19;
  --input: #111311;
  --text: #f3efe6;
  --muted: #bcb8ac;
  --line: #3b3e37;
  --accent: #d4ab72;
  background: var(--background);
  color: var(--text);
  font: 1rem/1.55 system-ui,sans-serif;
}
* { box-sizing:border-box; }
body,h1,h2,h3 { margin:0; }
a { color:inherit; }
a:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.shell { width:min(74rem, calc(100% - 2.5rem)); margin-inline:auto; }
header,footer { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-block:1rem; }
.brand { display:flex; align-items:center; gap:.65rem; font-weight:750; text-decoration:none; }
.brand img { object-fit:contain; }
.button { display:inline-block; background:var(--accent); color:#18140f; padding:.75rem 1rem; font-weight:750; text-decoration:none; border-radius:.3rem; }
.button:hover { background:#e8c495; }
.hero { position:relative; isolation:isolate; background:#131613; color:white; min-height:34rem; display:grid; align-items:center; }
.hero img,.hero::after { position:absolute; inset:0; width:100%; height:100%; }
.hero img { object-fit:cover; z-index:-2; }
.hero::after { content:""; z-index:-1; background:linear-gradient(90deg,#0b0d0cf7 0%,#0b0d0cc4 42%,#0b0d0c42 100%), linear-gradient(0deg,#101110,transparent 30%); }
.hero-copy { padding-block:5rem; }
.label { font-size:.8rem; letter-spacing:.09em; text-transform:uppercase; }
h1,h2,h3 { font-family:Georgia,serif; line-height:1.06; font-weight:400; }
h1 { font-size:clamp(3rem,7vw,6.25rem); max-width:12ch; }
h2 { font-size:clamp(2.25rem,5vw,3.75rem); margin-bottom:1.5rem; }
h3 { font-size:1.85rem; }
.hero-copy > p:not(.label) { max-width:34rem; margin:1.25rem 0; }
.section { padding-block:4rem; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.cards article { display:flex; flex-direction:column; padding:clamp(1.25rem,3vw,2rem); background:var(--surface); border:1px solid var(--line); border-radius:.4rem; }
.cards ul { padding-left:1.15rem; margin:0 0 1.5rem; }
.cards li + li { margin-top:.35rem; }
.cards .button { align-self:start; margin-top:auto; }
.pricing { color:var(--muted); }
.work { padding-bottom:4rem; }
.work > div { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.work a { background:var(--surface); color:white; text-decoration:none; }
.work img { display:block; width:100%; aspect-ratio:16/8; object-fit:cover; }
.work span { display:block; padding:1rem; }
footer { border-top:1px solid var(--line); flex-wrap:wrap; }
@media(max-width:750px) { .cards,.work > div { grid-template-columns:1fr; } .hero { min-height:28rem; } header .button { font-size:.8rem; } }
header nav { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; }
.portfolio article { min-width:0; }
.portfolio video,.portfolio img { width:100%; aspect-ratio:9/16; display:block; object-fit:contain; background:#0b0d0c; }
.portfolio img { object-fit:cover; }
.portfolio h3 { margin-top:.65rem; font-size:1.45rem; }
.portfolio p { margin:.3rem 0 1.25rem; color:var(--muted); }
.portfolio .reel-link { position:relative; display:block; }
.portfolio .reel-link span { position:absolute; bottom:0; width:100%; background:#131613ea; }
#inquiry-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem .85rem; max-width:42rem; }
#inquiry-form label { display:grid; gap:.25rem; font-weight:650; }
#inquiry-form :is(input,select,textarea) { width:100%; min-height:2.75rem; padding:.45rem .6rem; border:1px solid #62665b; border-radius:.25rem; background:var(--input); font:inherit; color:inherit; }
#inquiry-form button { border:0; cursor:pointer; }
#inquiry-form button:disabled { opacity:.65; }
.inquiry-wide { grid-column:1/-1; }
@media(max-width:600px) { #inquiry-form { grid-template-columns:1fr; } }

.hero { min-height: min(39rem, 90svh); }
h1 { max-width: 17ch; }
h1 em { display:block; color:var(--accent); font-size:.54em; font-style:normal; margin-top:.35em; }
.hero-inquire { margin-left:1rem; text-underline-offset:.2em; }
.work { padding-block:4rem; }
.portfolio video { aspect-ratio: 9 / 16; object-fit: cover; }
.work .instagram-heading { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-top:2.5rem; }
.instagram-heading a { background:none; color:inherit; text-decoration:underline; }
.work .instagram-strip { grid-auto-flow:column; grid-auto-columns:clamp(10rem,21vw,14rem); grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; padding:.25rem .25rem .75rem; }
.instagram-strip article { scroll-snap-align:start; }
.ig-preview { position:relative; display:block; width:100%; border:0; padding:0; background:var(--surface); color:white; cursor:pointer; }
.ig-preview img { aspect-ratio: 9 / 16; }
.ig-preview span { position:absolute; bottom:0; width:100%; padding:.55rem; background:#0b0d0ce8; font:600 .85rem system-ui; }
.instagram-strip h3 { font-size:1.3rem; margin-top:.5rem; }
#packages { border-top:1px solid var(--line); }
#inquire { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:2rem; }
#inquiry-form { background:var(--surface); border:1px solid var(--line); padding:clamp(.9rem,2vw,1.4rem); }
#instagram-viewer { width:min(96vw,34rem); max-height:90dvh; padding:0; border:0; background:var(--surface); color:inherit; }
#instagram-viewer::backdrop { background:#101813bd; }
.embed-bar { display:flex; align-items:center; justify-content:space-between; padding:1rem; gap:.75rem; }
.embed-bar h2 { font-size:1.45rem; margin:0; }
.embed-bar button { padding:.5rem .75rem; cursor:pointer; }
#instagram-frame iframe { width:100%; height:70dvh; display:block; border:0; }
@media(max-width:750px) { #inquire { grid-template-columns:1fr; } }


.hero img { filter: saturate(.78) brightness(.83); }
.label { color: var(--accent); }
header nav > a:not(.button), footer a { text-underline-offset: .25em; }
.portfolio video, .ig-preview { border: 1px solid var(--line); border-radius: .35rem; }
.ig-preview { overflow: hidden; }
.ig-preview span { background: #101110ed; }
.instagram-heading a { color: var(--accent); }
.cards li, #inquire > div > p { color: var(--muted); }
.embed-bar button { background: var(--input); color: var(--text); border: 1px solid var(--line); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.process { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.process-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem; margin:0 0 1.75rem; padding:0; list-style:none; counter-reset:process-step; }
.process-steps li { counter-increment:process-step; border-top:1px solid var(--line); padding:1rem 0 0; }
.process-steps li::before { content:counter(process-step, decimal-leading-zero); display:block; color:var(--accent); font-weight:700; margin-bottom:.65rem; }
.process-steps h3 { font-size:1.55rem; }
.process-steps p { color:var(--muted); margin:.65rem 0 0; }
@media(max-width:850px) { .process-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:500px) { .process-steps { grid-template-columns:1fr; } }

.hero-reel { position:absolute; inset:0; width:100%; height:100%; z-index:-2; object-fit:cover; opacity:0; transition:opacity .45s ease; }
.hero-reel.is-playing { opacity:1; }
.hero-motion { position:absolute; bottom:1rem; right:1rem; padding:.5rem .7rem; background:#101110e8; color:var(--text); border:1px solid var(--line); cursor:pointer; }
.client-work { padding-block:1.75rem; border-bottom:1px solid var(--line); }
.client-work h2 { font:700 .85rem/1.4 system-ui,sans-serif; color:var(--accent); margin:0 0 1rem; }
.client-work ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.client-work strong,.client-work span { display:block; }
.client-work strong { font-size:clamp(1.05rem,2vw,1.5rem); }
.client-work span { color:var(--muted); font-size:.9rem; }
@media(max-width:600px) { .client-work ul { grid-template-columns:1fr; } .hero-motion { font-size:.75rem; } }
@media(prefers-reduced-motion:reduce) { .hero-reel { transition:none; } }

.instagram-strip .social-reel {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--input);
  border: 1px solid var(--line);
  border-radius: .35rem;
}

.hero h1 { max-width: 15ch; font-size: clamp(2.6rem,6.7vw,5.65rem); }
.hero h1 em { font-size: .56em; line-height: 1.15; }
.content-support { border-top: 1px solid var(--line); }
.support-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 2rem; margin:0; }
.support-grid div { border-top:1px solid var(--line); padding:1rem 0; }
.support-grid dt { color:var(--accent); font-weight:700; }
.support-grid dd { color:var(--muted); margin:.45rem 0 0; }
.offer-price { color:var(--accent); margin:.8rem 0 0; }
.offer-price strong { font-size:1.5rem; }
.cards .offer-stack { list-style:none; padding:0; }
.offer-stack li { border-top:1px solid var(--line); padding:.55rem 0 .55rem 1.25rem; position:relative; }
.offer-stack li::before { content:"✓"; position:absolute; left:0; color:var(--accent); }
@media(max-width:600px) { .support-grid { grid-template-columns:1fr; } }

#native-videos { margin-top: 2.5rem; }
.work .portfolio {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: clamp(10rem, 21vw, 14rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: .25rem .25rem .75rem;
}
.portfolio article { scroll-snap-align: start; }

.portfolio video, .instagram-strip .social-reel, .ig-preview { border: 0; }
.booking-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--line);
  background: var(--surface);
}
.booking-callout p { margin: .45rem 0 0; color: var(--muted); }

.client-booking h2 { font-size: clamp(1.8rem, 3.5vw, 2.7rem); margin: 0; }
#inquiry-form label > span { color: var(--muted); font-size: .85rem; }

.portfolio-booking { flex-direction: column; align-items: center; text-align: center; }
.process-fees { margin-bottom: 1.75rem; }