/* Layout concept: a shot list on set. Viewfinder brackets frame the work,
   mono "slate" labels carry the facts, and the 3's diagonal cut from the logo
   becomes the section divider. Single committed light look with ink bands. */
:root {
  --paper: #F4F4F1;
  --white: #FFFFFF;
  --ink: #141414;
  --ink-2: #45443F;
  --ink-3: #5E5C56;
  --line: #D9D8D2;
  --orange: #EC6934;
  --orange-deep: #B9481B;
  --on-ink: #F4F4F1;
  --on-ink-2: #B6B4AC;

  --f-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Jost", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --radius: 4px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
main { overflow-x: clip; }
figure { margin: 0; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); text-transform: uppercase; line-height: .92; margin: 0; text-wrap: balance; letter-spacing: -.005em; }
h2 { font-size: clamp(36px, 4.4vw, 60px); font-weight: 800; }
h3 { font-size: 30px; font-weight: 700; line-height: 1; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 10vw, 136px); }
.slate {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 10px;
}
.slate::before { content: ""; width: 22px; height: 2px; background: var(--orange); }
.section-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 64px); max-width: 820px; }
.section-head p.lede { font-size: 20px; color: var(--ink-2); max-width: 60ch; }
.hl { color: var(--orange); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-weight: 700; font-size: 20px;
  text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
  padding: 14px 24px; border: 2px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--on-ink); cursor: pointer;
  transition: transform .16s var(--ease-out), background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--orange { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn--orange:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--on-ink); }
.btn .arrow { transition: transform .16s var(--ease-out); }

/* Nav */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.nav.is-scrolled { border-bottom-color: rgba(20,20,20,.06); box-shadow: 0 8px 24px -18px rgba(20,20,20,.45); }
@media (prefers-reduced-transparency: reduce) { .nav { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.nav__logo img { height: 26px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a:not(.btn) {
  font-family: var(--f-display); font-weight: 600; font-size: 19px; text-transform: uppercase;
  letter-spacing: .05em; text-decoration: none; color: var(--ink-2);
}
.nav__links a:not(.btn):hover { color: var(--orange-deep); }
.nav__links .btn { padding: 9px 18px; font-size: 18px; }
.nav__toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink); }
.nav__toggle span { display: block; width: 26px; height: 2px; background: currentColor; margin: 6px 0; transition: transform .2s var(--ease-out), opacity .2s var(--ease-out); }

@media (max-width: 880px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 24px;
  }
  .nav__links a:not(.btn) { padding: 14px 0; font-size: 26px; border-bottom: 1px solid var(--line); }
  .nav__links .btn { margin-top: 16px; justify-content: center; font-size: 22px; padding: 14px; }
  .nav__links {
    opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none;
    transition: opacity .15s var(--ease-out), transform .15s var(--ease-out), visibility 0s linear .15s;
  }
  .nav.is-open .nav__links {
    opacity: 1; transform: none; visibility: visible; pointer-events: auto;
    transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s;
  }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* Hero */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 112px); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__copy { display: grid; gap: 28px; min-width: 0; }
.hero h1 { font-size: clamp(44px, 6.4vw, 92px); font-weight: 800; letter-spacing: -.01em; }
.hero h1 .mark {
  color: var(--ink);
  background: linear-gradient(var(--orange), var(--orange)) 0 94% / 100% .1em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero__sub { font-size: clamp(19px, 1.6vw, 22px); color: var(--ink-2); max-width: 46ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__proof { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--ink-3); flex-wrap: wrap; }
.stars { color: var(--orange); letter-spacing: 2px; font-size: 18px; }

/* Hero collage */
.collage { position: relative; aspect-ratio: 1 / 1.02; max-width: 100%; min-width: 0; }
.shot { position: absolute; background: var(--white); padding: 10px 10px 36px; box-shadow: 0 18px 40px -18px rgba(20,20,20,.45); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot figcaption { position: absolute; left: 12px; right: 8px; bottom: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.shot--main { inset: 6% 4% 22% 8%; transform: rotate(-2deg); padding: 0; background: var(--ink); }
.shot--main img { opacity: .96; }
.shot--head { width: 38%; aspect-ratio: 2/2.9; right: -2%; bottom: 0; transform: rotate(5deg); }
.shot--small { width: 44%; aspect-ratio: 4/3.4; left: 0; bottom: 2%; transform: rotate(-6deg); }
.tape { position: absolute; width: 90px; height: 26px; background: rgba(236,105,52,.78); top: -12px; left: 50%; transform: translateX(-50%) rotate(-3deg); mix-blend-mode: multiply; }

.viewfinder { position: absolute; inset: 14px; pointer-events: none; color: var(--white); font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; }
.viewfinder i { position: absolute; width: 26px; height: 26px; border: 2px solid currentColor; }
.viewfinder i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.viewfinder i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.viewfinder i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.viewfinder i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.viewfinder .rec { position: absolute; top: 6px; left: 38px; display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.viewfinder .rec::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #FF3B30; }
.viewfinder .tc { position: absolute; top: 6px; right: 38px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }


/* load sequence: photos land like they're being pinned up */
@media (prefers-reduced-motion: no-preference) {
  .collage .shot, .collage .badge { animation: land .6s var(--ease-out) both; }
  .collage .shot--main { animation-delay: 0s; }
  .collage .shot--small { animation-delay: .08s; }
  .collage .shot--head { animation-delay: .16s; }
  .collage .badge { animation-delay: .24s; }
}
@keyframes land { from { opacity: 0; translate: 0 20px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none !important; }
}

/* Marquee band */
.marquee { background: var(--orange); color: var(--ink); overflow: hidden; transform: skewY(-2deg); margin-block: -8px; position: relative; z-index: 2; border-block: 2px solid var(--ink); }
.marquee__track { display: flex; width: max-content; animation: scroll 28s linear infinite; }
.marquee__track span { font-family: var(--f-display); font-weight: 800; font-size: clamp(34px, 4.4vw, 60px); text-transform: uppercase; padding: 10px 0; white-space: nowrap; }
.marquee__track span b { font-weight: 300; margin-inline: .5em; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* Problem / fix */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 2px solid var(--ink); background: var(--white); }
.versus > div { padding: clamp(28px, 4vw, 48px); display: grid; gap: 22px; align-content: start; min-width: 0; }
.versus > div + div { border-left: 2px solid var(--ink); background: var(--ink); color: var(--on-ink); }
.versus h3 { font-size: 34px; }
.versus ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; font-size: 19px; }
.versus li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: baseline; }
.versus .no li { color: var(--ink-3); }
.versus .no li::before { content: "–"; color: var(--ink-3); font-weight: 600; }

.versus .yes li::before { content: "✓"; color: var(--orange); font-weight: 700; }
.versus .yes .slate { color: var(--on-ink-2); }

/* Services */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 32px); }
.service { background: var(--white); border: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.service__img { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.service__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease-out); }
.service__body { padding: 26px 26px 30px; display: grid; gap: 14px; align-content: start; }
.service__body p { color: var(--ink-2); font-size: 17px; }
.service__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.service__tags span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line); padding: 4px 8px; color: var(--ink-2); }

/* Process */
.process { background: var(--white); border-block: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: step; }
.step { padding: 8px clamp(16px, 2vw, 28px) 0; border-left: 2px solid var(--ink); display: grid; gap: 12px; align-content: start; min-width: 0; }
.step__num { font-family: var(--f-display); font-weight: 800; font-size: 72px; line-height: .9; color: var(--orange); }
.step p { color: var(--ink-2); font-size: 17px; }

/* Work (ink band) */
.work { background: var(--ink); color: var(--on-ink); }
.work .slate { color: var(--on-ink-2); }
.work .section-head p.lede { color: var(--on-ink-2); }
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(150px, 16vw, 220px); gap: 14px; }
.gallery figure { margin: 0; position: relative; overflow: hidden; background: #222; min-width: 0; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease-out); }
.gallery figcaption {
  position: absolute; left: 0; bottom: 0; right: 0; padding: 28px 14px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink);
}
.g1 { grid-column: span 4; grid-row: span 2; }
.g2 { grid-column: span 2; grid-row: span 2; }
.g3 { grid-column: span 2; }
.g4 { grid-column: span 2; }
.g5 { grid-column: span 2; }
.g6 { grid-column: span 3; grid-row: span 2; }
.g7 { grid-column: span 3; grid-row: span 2; }

.reels-head { margin-top: clamp(56px, 7vw, 88px); margin-bottom: 28px; display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.reels-head h3 { font-size: clamp(34px, 4vw, 52px); }
.reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.reel { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #222; display: block; color: var(--on-ink); text-decoration: none; border: 0; padding: 0; cursor: pointer; font: inherit; width: 100%; }
.reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.1) 40%, rgba(0,0,0,.75)); }
.reel__play { position: absolute; z-index: 2; left: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; transition: scale .16s var(--ease-out); }
.reel__play::before { content: ""; border-left: 14px solid var(--ink); border-block: 8px solid transparent; margin-left: 4px; }
.reel__label { position: absolute; z-index: 2; left: 70px; right: 14px; bottom: 27px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-align: left; }
.reel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.reel--soon { cursor: default; border: 2px dashed #444; background: transparent; display: grid; place-content: center; text-align: center; padding: 20px; color: var(--on-ink-2); font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.reel--soon::after { display: none; }

/* Reviews */
.reviews__top { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(40px, 5vw, 64px); }
.rating { display: flex; align-items: center; gap: 16px; }
.rating strong { font-family: var(--f-display); font-size: 88px; font-weight: 800; line-height: .8; }
.rating div { display: grid; gap: 2px; font-size: 15px; color: var(--ink-3); }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 32px); }
.quote { background: var(--white); border: 1px solid var(--line); padding: 32px 28px 28px; display: grid; gap: 16px; grid-template-rows: auto auto 1fr auto; margin: 0; position: relative; min-width: 0; }
.quote::before { content: "“"; font-family: var(--f-display); font-weight: 800; font-size: 72px; line-height: .6; color: var(--orange); height: 26px; }
.quote__pull { font-family: var(--f-display); font-weight: 700; font-size: 28px; line-height: 1.08; letter-spacing: -.005em; text-wrap: balance; }
.quote blockquote { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.quote footer { display: grid; gap: 2px; padding-top: 16px; border-top: 1px solid var(--line); }
.quote footer strong { font-family: var(--f-display); font-size: 22px; text-transform: uppercase; letter-spacing: .02em; }
.quote footer span { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* Pricing */
.pricing { background: var(--white); border-block: 1px solid var(--line); }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 32px); align-items: stretch; }
.tier { border: 2px solid var(--ink); padding: 34px 30px; display: grid; gap: 22px; grid-template-rows: auto auto auto 1fr auto; background: var(--paper); position: relative; min-width: 0; }
.tier--featured { background: var(--ink); color: var(--on-ink); }
.tier--featured .slate { color: var(--on-ink-2); }
.tier__flag { position: absolute; top: -15px; right: 20px; background: var(--orange); color: var(--ink); font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; font-weight: 600; }
.tier h3 { font-size: 40px; }
.price { display: grid; gap: 4px; }
.price small { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.price strong { font-family: var(--f-display); font-weight: 800; font-size: 72px; line-height: .9; font-variant-numeric: tabular-nums; }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 17px; align-content: start; }
.tier li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; }
.tier li::before { content: "/"; color: var(--orange); font-weight: 700; font-family: var(--f-display); font-size: 20px; line-height: 1.3; }
.tier .btn { justify-content: center; }
.tier--featured .btn--ghost { color: var(--on-ink); border-color: var(--on-ink); }
.pricing__note { margin-top: 32px; color: var(--ink-2); font-size: 16px; max-width: 70ch; }

/* About */
.about__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.about__photo { position: relative; aspect-ratio: 4 / 5; border: 2px dashed var(--ink-3); display: grid; place-content: center; text-align: center; gap: 8px; color: var(--ink-3); font-family: var(--f-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 24px; background: var(--white); max-width: 100%; }
.about__photo .tape { top: -13px; }
.about__copy { display: grid; gap: 22px; min-width: 0; }
.about__copy p { font-size: 19px; color: var(--ink-2); max-width: 60ch; }
.spec { margin: 12px 0 0; display: grid; grid-template-columns: max-content 1fr; border-top: 2px solid var(--ink); }
.spec dt, .spec dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.spec dt { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-right: 28px; padding-top: 15px; }
.spec dd { font-size: 17px; }

/* FAQ */
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.faq__list { border-top: 2px solid var(--ink); }
.faq__list details { border-bottom: 1px solid var(--line); }
.faq__list summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--f-display); font-weight: 700; font-size: 25px; line-height: 1.15; letter-spacing: -.005em;
  transition: color .15s ease;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 34px; color: var(--orange); transition: transform .2s var(--ease-out); }
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list details p { padding: 0 0 24px; color: var(--ink-2); max-width: 62ch; }

/* Contact */
.contact { background: var(--orange); color: var(--ink); position: relative; }
.contact .slate { color: var(--ink); }
.contact .slate::before { background: var(--ink); }
.contact__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.contact__intro { display: grid; gap: 24px; min-width: 0; }
.contact__intro p { font-size: 20px; max-width: 42ch; }
.contact__direct { display: grid; gap: 6px; font-family: var(--f-mono); font-size: 14px; letter-spacing: .04em; }
.contact__direct a { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.form { background: var(--white); border: 2px solid var(--ink); padding: clamp(24px, 3.5vw, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; box-shadow: 10px 10px 0 var(--ink); min-width: 0; }
.field { display: grid; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 17px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: var(--white); box-shadow: 0 0 0 3px rgba(236,105,52,.35); }
.field textarea { min-height: 130px; resize: vertical; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label { font-family: var(--f-body); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ink); border: 1.5px solid var(--line); padding: 8px 14px; border-radius: 99px; cursor: pointer; background: var(--paper); }
.chips input:checked + label { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.chips input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 2px; }
.form .btn { grid-column: 1 / -1; justify-content: center; font-size: 22px; }
.form__status { grid-column: 1 / -1; font-size: 16px; padding: 14px 16px; border-left: 4px solid var(--orange); background: var(--paper); }
.form__status code { font-family: var(--f-mono); font-size: 15px; }

/* Footer */
.footer { background: var(--ink); color: var(--on-ink-2); padding-block: 56px 40px; }
.footer__grid { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: end; }
.footer__brand { display: grid; gap: 16px; min-width: 0; max-width: 100%; }
.footer__brand img { height: 30px; width: auto; }
.footer__tag { font-family: var(--f-display); font-size: clamp(22px, 6vw, 28px); overflow-wrap: anywhere; font-weight: 700; text-transform: uppercase; color: var(--on-ink); letter-spacing: .03em; }
.footer__tag b { color: var(--orange); font-weight: 400; margin-inline: .25em; }
.footer__links { display: flex; gap: 24px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.footer__links a { text-decoration: none; color: var(--on-ink); }
.footer__links a:hover { color: var(--orange); }
.footer__legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid #2c2c2c; font-size: 13px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Responsive */
@media (max-width: 1020px) {
  .services, .quotes, .tiers { grid-template-columns: 1fr; max-width: 640px; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .reels { grid-template-columns: repeat(2, 1fr); }
  .tier--featured { order: -1; }
}
@media (max-width: 880px) {
  .hero__grid, .about__grid, .faq__grid, .contact__grid { grid-template-columns: 1fr; }
  .collage { max-width: 560px; }
  .versus { grid-template-columns: 1fr; }
  .versus > div + div { border-left: 0; border-top: 2px solid var(--ink); }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .g1, .g6, .g7 { grid-column: span 2; grid-row: span 2; }
  .g2 { grid-column: span 1; grid-row: span 2; }
  .g3, .g4 { grid-column: span 1; }
  .g5 { grid-column: span 2; }
  .about__photo { max-width: 420px; aspect-ratio: 4 / 4; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .steps { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; box-shadow: 6px 6px 0 var(--ink); }
  .spec { grid-template-columns: 1fr; }
  .spec dt { padding-bottom: 0; border-bottom: 0; }
  .badge { width: 118px; height: 118px; }
  .badge__core { inset: 22px; }
  .badge strong { font-size: 30px; }
  .badge__stars svg { width: 9px; height: 9px; }
  .viewfinder .tc { display: none; }
  .gallery { grid-auto-rows: 140px; }
}

/* Reels row */
.reels-row { margin-top: clamp(56px, 7vw, 88px); display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; align-items: end; }
.reels-copy { display: grid; gap: 14px; align-content: end; padding-bottom: 12px; padding-right: 24px; min-width: 0; }
.reels-copy h3 { font-size: clamp(38px, 4.4vw, 60px); }
.reels-copy p { color: var(--on-ink-2); }
.reel .reel__thumb { z-index: 1; }
.legend { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding: 0; margin-bottom: 6px; }
@media (max-width: 880px) {
  .reels-row { grid-template-columns: 1fr 1fr; }
  .reels-copy { grid-column: 1 / -1; padding-right: 0; }
}

/* Lists */
.steps { list-style: none; margin: 0; padding: 0; }

/* Included strip */
.included { margin: clamp(32px, 4vw, 48px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--ink); background: var(--white); }
.included > div { padding: 22px 24px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.included > div + div { border-left: 1px solid var(--line); }
.included dt { font-family: var(--f-display); font-weight: 800; font-size: 40px; line-height: 1; text-transform: uppercase; color: var(--orange); }
.included dd { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.4; }
@media (max-width: 880px) {
  .included { grid-template-columns: 1fr 1fr; }
  .included > div:nth-child(3) { border-left: 0; }
  .included > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* About photo */
.about__photo { margin: 0; position: relative; aspect-ratio: 4 / 5; max-width: 100%; background: var(--white); padding: 12px 12px 12px; border: 0; box-shadow: 0 18px 40px -18px rgba(20,20,20,.45); transform: rotate(-1.5deg); display: block; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.about__photo .tape { top: -13px; z-index: 2; }
@media (max-width: 880px) { .about__photo { max-width: 420px; aspect-ratio: 4 / 5; } }

/* Timeline background: an edit timeline laid under the page.
   Tracks and frame ticks drift sideways as you scroll, and an orange
   playhead scrubs across each section as it passes through the screen. */
.tl { position: relative; isolation: isolate; overflow-x: clip; }
.tl::before {
  content: ""; position: absolute; inset: 0 -288px; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='80'%3E%3Cg fill='%23141414'%3E%3Crect width='96' height='1' fill-opacity='.10'/%3E%3Crect width='1' height='80' fill-opacity='.035'/%3E%3Crect width='1' height='13' fill-opacity='.16'/%3E%3Crect x='24' width='1' height='6' fill-opacity='.12'/%3E%3Crect x='48' width='1' height='9' fill-opacity='.14'/%3E%3Crect x='72' width='1' height='6' fill-opacity='.12'/%3E%3Crect x='12' width='1' height='4' fill-opacity='.08'/%3E%3Crect x='36' width='1' height='4' fill-opacity='.08'/%3E%3Crect x='60' width='1' height='4' fill-opacity='.08'/%3E%3Crect x='84' width='1' height='4' fill-opacity='.08'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 96px 80px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}
/* Playhead: a full-width box with the head drawn on its right edge, so translateX(-100% to 0)
   sweeps it across the section using transform only */
.tl::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='12'%3E%3Cpath d='M0 0h13v6l-6.5 6L0 6z' fill='%23EC6934'/%3E%3C/svg%3E") right top / 13px 12px no-repeat,
    linear-gradient(var(--orange), var(--orange)) calc(100% - 5.75px) 0 / 1.5px 100% no-repeat;
  opacity: .4; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
          mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tl::before { animation: tl-drift-l linear both; animation-timeline: view(); }
    .tl:nth-of-type(even)::before { animation-name: tl-drift-r; }
    .tl::after { animation: tl-scrub linear both; animation-timeline: view(); }
  }
}
@supports not (animation-timeline: view()) { .tl::after { display: none; } }
@keyframes tl-drift-l { from { transform: translateX(0); } to { transform: translateX(-288px); } }
@keyframes tl-drift-r { from { transform: translateX(-288px); } to { transform: translateX(0); } }
@keyframes tl-scrub { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .tl::after { display: none; } }

/* Google rating badge: spinning text ring around the score */
.badge {
  position: absolute; top: -4%; right: 0; width: 158px; height: 158px; border-radius: 50%; z-index: 3;
  background: var(--orange); color: var(--ink); text-decoration: none; display: block;
  box-shadow: 0 14px 30px -14px rgba(20,20,20,.55), inset 0 0 0 2px var(--ink);
  transition: transform .25s var(--ease-out);
}
.badge__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
.badge__ring text { font-family: var(--f-mono); font-size: 13px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; fill: var(--ink); }
.badge__core {
  position: absolute; inset: 30px; border-radius: 50%; background: var(--ink); color: var(--on-ink);
  display: grid; place-content: center; justify-items: center; gap: 3px; text-align: center;
}
.badge strong { font-family: var(--f-display); font-size: 40px; font-weight: 800; line-height: .85; }
.badge__g { width: 20px; height: 20px; background: var(--white); border-radius: 50%; padding: 3px; margin-bottom: 2px; }
.badge__stars { display: flex; gap: 1px; }
.badge__stars svg { width: 12px; height: 12px; fill: var(--orange); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .badge__stars svg { animation: pop .3s var(--ease-out) both; }
  .badge__stars svg:nth-child(1) { animation-delay: .5s; }
  .badge__stars svg:nth-child(2) { animation-delay: .56s; }
  .badge__stars svg:nth-child(3) { animation-delay: .62s; }
  .badge__stars svg:nth-child(4) { animation-delay: .68s; }
  .badge__stars svg:nth-child(5) { animation-delay: .74s; }
}
@media (prefers-reduced-motion: reduce) { .badge__ring { animation: none; } }

/* ---- Review pass: press feedback, calmer motion, wayfinding, form ---- */

/* Instant feedback on press (works on touch, where hover doesn't exist) */
.btn:active { transform: scale(.97); transition-duration: .1s; }
.chips label { transition: transform .1s var(--ease-out), background-color .15s ease, color .15s ease, border-color .15s ease; }
.chips label:active { transform: scale(.95); }
.faq__list summary:active { color: var(--orange-deep); }
.reel:active .reel__play { scale: .92; }
.badge:active { transform: scale(.97); }

/* Badge ring spins only while hovered */
.badge__ring { animation-play-state: paused; }
.badge:hover .badge__ring, .badge:focus-visible .badge__ring { animation-play-state: running; animation-duration: 6s; }

/* Current-section indicator in the nav */
.nav__links a:not(.btn) { position: relative; }
.nav__links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out);
}
.nav__links a[aria-current="true"] { color: var(--ink); }
.nav__links a[aria-current="true"]::after { transform: scaleX(1); }
@media (max-width: 880px) {
  .nav__links { background: var(--white); }
  .nav__links a:not(.btn)::after { bottom: 10px; right: auto; width: 28px; }
}

/* Service card titles now fit one line; keep bodies aligned regardless */
.service__body h3 { min-height: 1em; }

/* Playhead stays out of running text on phones */
@media (max-width: 880px) { .tl::after { display: none; } }

/* Hero headline on phones */
@media (max-width: 560px) { .hero h1 { font-size: 44px; } }

/* Form: optional markers and inline errors */
.field label em, .legend em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ink-3); font-family: var(--f-body); font-size: 13px; }
.field__error { font-size: 14px; color: #A3300F; }
.field [aria-invalid="true"] { border-color: #A3300F; background: var(--white); }
@media (max-width: 560px) { .hero__ctas .btn { width: 100%; justify-content: center; font-size: 19px; } }

/* ---- Animation pass ---- */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn:hover .arrow { transform: translateX(3px); }
  .service:hover .service__img img { transform: scale(1.03); }
  .gallery figure:hover img { transform: scale(1.03); }
  .reel:hover .reel__play { scale: 1.08; }
  .badge:hover { transform: scale(1.04) rotate(-3deg); }
}
.btn:active { transform: scale(.97); }

/* FAQ answers ease open where the browser supports it; elsewhere they open instantly */
@supports (interpolate-size: allow-keywords) {
  .faq__list { interpolate-size: allow-keywords; }
  .faq__list details::details-content {
    height: 0; overflow: clip; opacity: 0;
    transition: height .25s var(--ease-out), opacity .2s ease, content-visibility .25s allow-discrete;
  }
  .faq__list details[open]::details-content { height: auto; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn .arrow, .service__img img, .gallery img, .badge, .chips label, .nav__links { transition-property: opacity, background-color, border-color, color, visibility !important; }
  .btn:hover, .btn:active, .badge:hover, .chips label:active { transform: none !important; }
  .nav__links { transform: none !important; }
  .faq__list details::details-content { transition: opacity .2s ease, content-visibility .2s allow-discrete; }
}

/* Instagram link: black glyph next to the handle */
.ig { display: inline-flex; align-items: center; gap: 10px; width: fit-content; text-decoration: none; }
.ig__handle { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ig__mark { position: relative; width: 22px; height: 22px; display: grid; place-items: center; transition: transform .16s var(--ease-out); }
.ig__icon { width: 22px; height: 22px; display: block; }
/* Attention pulse: two soft rings ripple off the icon once, when the contact section scrolls into view */
.ig__mark::before, .ig__mark::after {
  content: ""; position: absolute; inset: -2px; border: 2px solid var(--ink); border-radius: 30%;
  opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ig.is-seen .ig__mark { animation: ig-settle .45s var(--ease-out) both; }
  .ig.is-seen .ig__mark::before { animation: ig-pulse 1.1s var(--ease-out) .25s 2 both; }
  .ig.is-seen .ig__mark::after  { animation: ig-pulse 1.1s var(--ease-out) .55s 2 both; }
}
@keyframes ig-settle { from { transform: scale(.85) rotate(-8deg); } to { transform: none; } }
@keyframes ig-pulse { from { opacity: .5; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@media (hover: hover) and (pointer: fine) {
  .ig:hover .ig__mark { transform: scale(1.12) rotate(-6deg); }
}
.ig:active .ig__mark { transform: scale(.92); transition-duration: .1s; }
/* Long event names in gallery captions wrap instead of clipping */
.gallery figcaption { line-height: 1.35; }
@media (max-width: 560px) { .gallery figcaption { font-size: 10.5px; letter-spacing: .04em; padding: 24px 10px 10px; } }

/* Packages (no prices): coverage length sits where a price would */
.tier { grid-template-rows: auto auto 1fr auto; }
.price strong { font-size: clamp(44px, 4.4vw, 60px); }
.tier ul { font-size: 16px; }
.pkg-extras { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); background: var(--paper); }
.pkg-extras > div { padding: 26px 30px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.pkg-extras > div + div { border-left: 1px solid var(--line); }
.pkg-extras h3 { font-size: 26px; }
.pkg-extras p { color: var(--ink-2); font-size: 17px; }
.pkg-extras ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 16px; color: var(--ink-2); }
.pkg-extras li { display: grid; grid-template-columns: 18px 1fr; gap: 6px; }
.pkg-extras li::before { content: "+"; color: var(--orange); font-weight: 700; }
select { font: inherit; }
.field select { font-size: 17px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); width: 100%; }
@media (max-width: 880px) {
  .pkg-extras { grid-template-columns: 1fr; }
  .pkg-extras > div + div { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 1020px) and (min-width: 881px) { .nav__links { gap: 20px; } }
.price strong { font-size: clamp(40px, 3.6vw, 52px); white-space: nowrap; }
.tier .btn { font-size: 18px; white-space: nowrap; padding-inline: 16px; }