/* ============================================================
   Hunter Stills — Homepage mockup
   Scheme: Darkroom Red
   ============================================================ */

:root{
  --ink:#111111;
  --white:#ffffff;
  --darkroom:#C0392B;
  --blush:#F7F0EF;
  --grain:#8C8078;
  --mist:#EEEEEE;
  --body:#444444;
  --muted:#BBBBBB;

  --ff: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --maxw: 1280px;
  --pad: clamp(20px, 4vw, 64px);

  --t-fast: .25s cubic-bezier(.2,.7,.2,1);
  --t-med:  .45s cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; }
html { scroll-behavior: smooth; }
body{
  font-family: var(--ff);
  color: var(--body);
  background: var(--white);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color: inherit; text-decoration: none; }

.container{
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ---------- Typography primitives ---------- */
.kicker{
  display:inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--darkroom);
  margin: 0 0 22px;
}
.kicker--light{ color:#ffb7ad; }

/* Hero kicker — slightly bigger than base, bar prefix for presence */
.kicker--hero{
  display:inline-flex;
  align-items:center;
  gap: 14px;
  font-size: 14px;
  letter-spacing: .26em;
  font-weight: 900;
  margin: 0 0 26px;
}
.kicker--hero::before{
  content:"";
  display:inline-block;
  width: 44px;
  height: 2px;
  background: currentColor;
  flex: 0 0 auto;
}

/* Lead kicker — the kicker IS the section heading (no strap below it) */
.kicker--lead{
  display:block;
  font-size: clamp(28px, 3.8vw, 44px);
  letter-spacing: .02em;
  font-weight: 800;
  line-height: 1.06;
  margin: 0 0 24px;
  color: var(--ink);
}

/* Closer kickers always read white on dark background */
.closer .kicker{ color: #fff; }
.closer .kicker--light{ color: #fff; }

@media (max-width: 640px){
  .kicker{ font-size: 12px; }
  .kicker--hero{ font-size: 13px; }
  .kicker--hero::before{ width: 32px; }
}

.display{
  font-size: clamp(44px, 6.2vw, 92px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.display--closer{ color: var(--white); }

.heading{
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 24px;
}
.heading--xl{
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.lede{
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 400;
}
.lede strong{ font-weight: 700; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  border-radius: 0;
  border: 1.5px solid transparent;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  cursor: pointer;
  white-space: nowrap;
}
.btn--primary{
  background: var(--darkroom);
  color: #fff;
  border-color: var(--darkroom);
}
.btn--primary:hover{ background:#a5301f; border-color:#a5301f; }

.btn--ghost-light{
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.7);
}
.btn--ghost-light:hover{ background: rgba(255,255,255,.12); border-color:#fff; }

.btn--lg{ padding: 18px 28px; font-size: 15px; }

.link-arrow{
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 2px;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.link-arrow:hover{ color: var(--darkroom); border-color: var(--darkroom); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: fixed;
  inset: 0 0 auto 0;
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px var(--pad);
  z-index: 50;
  transition: background var(--t-med), padding var(--t-med), box-shadow var(--t-med);
}
.nav.is-scrolled{
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(1.1) blur(8px);
  padding: 12px var(--pad);
  box-shadow: 0 1px 0 var(--mist);
}
.nav__links{ display:flex; align-items:center; gap: 28px; }
.nav__links a{
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: .02em;
  transition: color var(--t-fast);
}
.nav__links a:hover{ color: var(--darkroom); }
.nav.is-scrolled .nav__links a{ color: var(--ink); }
.nav__cta{
  border: 1.5px solid currentColor;
  padding: 8px 14px !important;
}

/* Logo */
.logo{
  display:inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: .9;
  text-decoration: none;
  user-select: none;
}
.logo__hunter{
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -.04em;
  color: var(--white);
  line-height: 1;
}
.nav.is-scrolled .logo__hunter{ color: var(--ink); }
.logo__stills{
  margin-top: 2px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .01em;
  color: #fff;
  background: var(--darkroom);
  padding: 3px 6px 4px;
  line-height: 1;
  align-self: stretch;
  text-align: center;
}
.logo--sm .logo__hunter{ font-size: 20px; color: var(--ink); }
.logo--sm .logo__stills{ font-size: 13px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display:flex; align-items:flex-end;
  color: #fff;
}
.hero__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  z-index: 0;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.10) 40%, rgba(0,0,0,.75) 100%);
  z-index: 1;
}
.hero__content{
  position: relative;
  z-index: 2;
  width:100%;
  padding: 0 var(--pad) clamp(60px, 8vw, 120px);
  max-width: calc(var(--maxw) + (var(--pad) * 2));
  margin: 0 auto;
}
.hero__inner{
  max-width: 640px;   /* keep copy to the left; lets the horse breathe */
}
.hero__content .display{
  color: #fff;
  max-width: 14ch;
  margin-bottom: 28px;
  font-size: clamp(40px, 5.6vw, 82px);
  line-height: 1.02;
}
.hero__ctas{ display:flex; gap:12px; flex-wrap:wrap; }

/* Homepage hero — new image has more negative space on the left,
   so let the H1 breathe into a wider text zone */
.hero--home .hero__inner{ max-width: 780px; }
.hero--home .hero__content .display{ max-width: 18ch; }

/* Prominent SEO line: BUSINESS PHOTOGRAPHER · LONDON & BRISTOL */
.hero__seo{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 0;
  color: #fff;
  font-size: clamp(14px, 1.25vw, 17px);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
}
.hero__seo strong{
  font-weight: 900;
  letter-spacing: .14em;
  color: #fff;
}
.hero__seo-bar{
  display: inline-block;
  width: 32px; height: 3px;
  background: var(--darkroom);
  flex-shrink: 0;
}
.hero__seo-sep{
  color: var(--darkroom);
  font-size: 1.2em;
  line-height: 0;
  transform: translateY(-1px);
}
.hero__seo-loc{
  color: rgba(255,255,255,.92);
  font-weight: 500;
}
@media (max-width: 560px){
  .hero__seo{ flex-wrap: wrap; gap: 10px; }
  .hero__seo-bar{ width: 22px; }
}
.hero__scroll{
  position:absolute; right: var(--pad); bottom: 24px;
  z-index: 2;
  font-size: 10px; letter-spacing:.3em; text-transform: uppercase;
  color: rgba(255,255,255,.8);
  writing-mode: vertical-rl;
}
.hero__scroll::before{
  content:""; display:inline-block;
  width:1px; height: 40px; background: rgba(255,255,255,.6);
  margin-bottom: 10px;
  vertical-align: middle;
}

/* ============================================================
   INTRO
   ============================================================ */
.intro{
  padding: clamp(56px, 7vw, 100px) 0;
  background: var(--white);
  border-bottom: 1px solid var(--mist);
}
.intro__grid{
  display:grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: clamp(28px, 4.5vw, 72px);
  align-items: start;
}
.intro__fig{
  margin: 0;
}
.intro__fig img{
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
}
.intro__body{
  border-left: 3px solid var(--darkroom);
  padding-left: clamp(20px, 3vw, 40px);
  padding-top: 4px;
}
@media (max-width: 780px){
  .intro__grid{ grid-template-columns: 1fr; gap: 24px; }
  .intro__fig img{ aspect-ratio: 3/2; }
  .intro__body{ border-left: none; border-top: 3px solid var(--darkroom); padding-left: 0; padding-top: 20px; }
}

/* ============================================================
   PROBLEM
   ============================================================ */
.problem{
  padding: clamp(60px, 7.5vw, 110px) 0;
  background: var(--blush);
}
.problem__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 880px){
  .problem__grid{ grid-template-columns: 1fr; }
}
.problem__text p{ color: var(--body); font-size: 17px; max-width: 52ch; }
.problem__fig{ margin:0; }
.problem__fig img{
  width:100%; aspect-ratio: 4/3; object-fit: cover;
}

/* ============================================================
   SERVICES
   ============================================================ */
.services{
  padding: clamp(60px, 7.5vw, 110px) 0;
  background: var(--white);
}
.services__head{
  max-width: 1000px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.services__grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
}
@media (max-width: 1200px){
  .services__grid{ grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (max-width: 880px){
  .services__grid{ grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 560px){
  .services__grid{ grid-template-columns: 1fr; }
}
.service{
  display: block;
  color: var(--ink);
  transition: color var(--t-fast);
}
.service__img{
  margin: 0 0 20px;
  overflow: hidden;
  background: var(--mist);
}
.service__img img{
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  transition: transform var(--t-med);
}
.service:hover .service__img img{ transform: scale(1.03); }
.service__num{
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--darkroom);
  margin-bottom: 10px;
}
.service h3{
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 900;
  letter-spacing: -.015em;
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--ink);
}
.service p{
  font-size: 14px;
  line-height: 1.55;
  color: var(--body);
  margin: 0 0 16px;
  max-width: 32ch;
}
.service__link{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1.5px solid var(--darkroom);
  padding-bottom: 2px;
}
.service:hover{ color: var(--darkroom); }
.service:hover .service__link{ color: var(--darkroom); border-color: var(--darkroom); }

/* ============================================================
   WORK RAIL
   ============================================================ */
.work{
  padding: clamp(44px, 6vw, 80px) 0;
  background: var(--ink);
  color: #fff;
}
.work__head{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 20px 40px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.work__head .kicker{ grid-column: 1; color: #ffb7ad; }
.work__head .heading{ grid-column: 1; color: #fff; margin: 0; max-width: 18ch; }
.work__head .link-arrow{
  grid-column: 2; color: #fff; border-color: rgba(255,255,255,.5);
  justify-self: end;
}
.work__head .link-arrow:hover{ color: #ffb7ad; border-color: #ffb7ad; }

.work__rail{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(340px, 22vw);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--pad);
  scrollbar-width: thin;
  scrollbar-color: var(--darkroom) transparent;
}
.work__rail::-webkit-scrollbar{ height: 6px; }
.work__rail::-webkit-scrollbar-thumb{ background: var(--darkroom); }
.work__rail figure{
  margin:0;
  scroll-snap-align: start;
}
.work__rail img{
  width:100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* ============================================================
   WHY
   ============================================================ */
.why{
  padding: clamp(60px, 7.5vw, 110px) 0;
  background: var(--blush);
}
.why__head{
  max-width: 900px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.why__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 880px){
  .why__grid{ grid-template-columns: 1fr; gap: 32px; }
}
.pillar{
  border-top: 2px solid var(--ink);
  padding-top: 24px;
}
.pillar__num{
  display:inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--darkroom);
  margin-bottom: 16px;
}
.pillar h3{
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 12px;
}
.pillar p{ font-size: 15px; line-height: 1.6; color: var(--body); margin: 0; }

/* ============================================================
   PROOF
   ============================================================ */
.proof{
  padding: clamp(60px, 7.5vw, 110px) 0;
  background: var(--white);
  border-top: 1px solid var(--mist);
  border-bottom: 1px solid var(--mist);
}
.logos{
  display:grid;
  grid-template-columns: repeat(8, 1fr); /* single row on desktop */
  border-top: 1px solid var(--mist);
  border-left: 1px solid var(--mist);
  margin: 16px 0 0;
}
@media (max-width: 1200px){ .logos{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px){ .logos{ grid-template-columns: repeat(2, 1fr); } }
.logo-cell{
  border-right: 1px solid var(--mist);
  border-bottom: 1px solid var(--mist);
  aspect-ratio: 1 / 1;            /* SQUARE */
  display:grid; place-items:center;
  color: var(--grain);
  padding: 8px 12px;               /* tighter so logos fill more of the square */
  filter: grayscale(100%);
  opacity: .9;
  transition: opacity var(--t-fast), filter var(--t-fast), color var(--t-fast);
}
.logo-cell:hover{ opacity: 1; filter: grayscale(0); color: var(--ink); }
.logo-cell img{
  max-width: 92%;
  max-height: 92%;                 /* fuller in the square */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Tighten placeholder SVGs a touch so they sit nicely in the grid */
.logo-cell img[src$=".svg"]{
  max-height: 50%;
}

/* Logos-only and quotes-only variants */
.proof--logos{
  /* Equal top and bottom padding */
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 0;
}
.proof--logos .logos{ margin: 0; }
.proof--logos .kicker{ margin-bottom: 20px; }
.proof--quotes{ padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(60px, 7.5vw, 110px); border-top: 0; }
.proof--quotes .kicker{ margin-bottom: 28px; }

.quotes{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 1024px){ .quotes{ grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 720px){ .quotes{ grid-template-columns: 1fr; gap: 32px; } }
.quote{
  margin: 0;
  padding-left: 20px;
  border-left: 3px solid var(--darkroom);
}
.quote p{
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
  margin: 0 0 16px;
  letter-spacing: -.01em;
}
.quote cite{
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--grain);
}

/* ============================================================
   LOCATION
   ============================================================ */
.location{
  padding: clamp(44px, 5.5vw, 72px) 0;
  background: var(--white);
}
.location__body{
  font-size: clamp(18px, 1.4vw, 22px);
  color: var(--body);
  margin: 24px 0 40px;
  max-width: 50ch;
}
.location .heading--xl{ max-width: 22ch; margin-bottom: 32px; }
.location__links{
  display:flex; flex-wrap: wrap; gap: 12px 16px;
}
.location__links a{
  display:inline-flex; align-items:center;
  padding: 12px 18px;
  border: 1.5px solid var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.location__links a:hover{
  background: var(--ink);
  color: #fff;
}

/* ============================================================
   CLOSER
   ============================================================ */
.closer{
  position:relative;
  padding: clamp(80px, 10vw, 140px) 0;
  overflow:hidden;
  color: #fff;
}
.closer__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover;
  z-index: 0;
}
.closer__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(17,17,17,.7), rgba(17,17,17,.85));
  z-index: 1;
}
.closer__content{
  position: relative; z-index: 2;
  max-width: 900px;
}
.closer__content .display,
.closer .display,
.closer .display--md,
.closer .display--sm{
  color: #fff;
  margin: 0 0 24px;
  max-width: 20ch;
}
.closer__content p{
  font-size: clamp(18px, 1.5vw, 22px);
  color: rgba(255,255,255,.85);
  margin: 0 0 36px;
  max-width: 52ch;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  padding: 56px 0 32px;
  background: var(--white);
  border-top: 1px solid var(--mist);
}
.footer__grid{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px 48px;
  align-items: start;
}
@media (max-width: 780px){
  .footer__grid{ grid-template-columns: 1fr; }
  .footer__grid > .logo{ justify-self: start; }
}
.footer__nav{ display:flex; gap: 24px; flex-wrap: wrap; }
.footer__nav a{
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.footer__nav a:hover{ color: var(--darkroom); }
.footer__meta p{
  margin: 0;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grain);
  text-align: right;
}
@media (max-width: 780px){ .footer__meta p{ text-align:left; } }
.footer__copy{
  grid-column: 1 / -1;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--mist);
  padding-top: 24px;
  margin-top: 24px;
}

/* ---------- Small-screen nav tweaks ---------- */
@media (max-width: 640px){
  .nav__links a:not(.nav__cta){ display:none; }
}

/* ---------- No-hero pages ---------- */
/* Portfolio, About and Contact don't have a full-height hero image, so the
   default white-on-transparent nav is invisible against the white page.
   Start these pages in the "scrolled" nav look so the logo + links show. */
body.page--portfolio .nav,
body.page--about .nav,
body.page--contact .nav{
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(1.1) blur(8px);
  padding: 12px var(--pad);
  box-shadow: 0 1px 0 var(--mist);
}
body.page--portfolio .logo__hunter,
body.page--about .logo__hunter,
body.page--contact .logo__hunter{
  color: var(--ink);
}
body.page--portfolio .nav__links a,
body.page--about .nav__links a,
body.page--contact .nav__links a{
  color: var(--ink);
}

/* ============================================================
   SERVICE PAGE — additions
   ============================================================ */

/* ---------- Display size variants ---------- */
.display--sm{ font-size: clamp(28px, 3.8vw, 44px); line-height: 1.05; letter-spacing: -.01em; font-weight: 700; margin: 0 0 20px; }
.display--md{ font-size: clamp(36px, 5vw, 64px); line-height: 1.05; letter-spacing: -.015em; font-weight: 700; margin: 0 0 20px; }

/* ---------- Generic section spacing ---------- */
.section{ padding: clamp(60px, 7.5vw, 110px) 0; }
.section + .section{ border-top: 1px solid var(--mist); }
.section__head{ max-width: 720px; margin: 0 0 clamp(36px, 5vw, 64px); }

/* ---------- Two-column split (image + text) ---------- */
.split__grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.section--reverse .split__grid{ direction: rtl; }
.section--reverse .split__grid > *{ direction: ltr; }
.split__img{ margin: 0; }
.split__img img{
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}
/* Headshots page — portrait/square source images need a taller display
   container (4:5) so the subject fills the frame instead of floating in a
   landscape crop with lots of empty background. */
.page--headshots .split__img img{
  aspect-ratio: 4 / 5;
  object-position: center 25%;
}
/* What-is-it uses a landscape source image, so let it fill its natural 4:3
   ratio without vertical over-cropping. */
.page--headshots #what-is-it .split__img img{
  aspect-ratio: 4 / 3;
  object-position: center center;
}
.split__text .display--sm{ max-width: 16ch; }
.split__text p{ max-width: 52ch; }
.split__text p + p{ margin-top: 14px; }
.muted{ color: var(--muted); font-size: 14px; }

/* Steps inside How it works */
.steps{
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  counter-reset: step;
}
.steps li{
  counter-increment: step;
  position: relative;
  padding: 14px 0 14px 56px;
  border-top: 1px solid var(--mist);
  max-width: 56ch;
}
.steps li:last-child{ border-bottom: 1px solid var(--mist); }
.steps li::before{
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 16px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--darkroom);
}
.steps strong{ color: var(--ink); }

@media (max-width: 880px){
  .split__grid{ grid-template-columns: 1fr; gap: 28px; }
  .section--reverse .split__grid{ direction: ltr; }
  .split__img img{ aspect-ratio: 3 / 2; }
}

/* ---------- Hero variant for service pages ---------- */
.hero--service{ height: clamp(560px, 78vh, 760px); }
.hero--service .hero__sub{
  color: rgba(255,255,255,.86);
  margin: 16px 0 28px;
  max-width: 44ch;
  font-size: clamp(15px, 1.4vw, 18px);
}
.hero--service .hero__content .display{
  font-size: clamp(32px, 4.2vw, 60px);
  line-height: 1.05;
  max-width: 18ch;
  margin-bottom: 20px;
}
.hero--service .kicker,
.hero--service .kicker--light,
.hero--service .kicker--hero{ color: #fff; }
.hero--service .kicker--hero::before{ background: #fff; }

/* Slightly larger logos in the "I've worked with" grid */
.logo-cell{ padding: 4px 8px; }
.logo-cell img{ max-width: 96%; max-height: 96%; }

/* Service pages — tighten top padding on specific sections */
.page--brand-story #what-is-it,
.page--brand-story .section--gallery,
.page--brand-story #why,
.page--personal-brand #what-is-it,
.page--personal-brand .section--gallery,
.page--personal-brand #why,
.page--interiors #what-is-it,
.page--interiors .section--gallery,
.page--interiors #why,
.page--events #what-is-it,
.page--events .section--gallery,
.page--events #why{
  padding-top: clamp(40px, 5.2vw, 72px);
}

/* Commercial interiors — hero content shifted right so the people in the shot are unobscured */
@media (min-width: 881px){
  .page--interiors .hero--service .hero__content{
    display: flex;
    justify-content: flex-end;
  }
  .page--interiors .hero--service .hero__inner{
    margin-right: 0;
    text-align: left;
  }
}

/* Commercial interiors — smidge-tighter padding on What-is-it (bottom), How it works (top & bottom), Internal links (top & bottom) */
.page--interiors #what-is-it{
  padding-bottom: clamp(44px, 5.6vw, 80px);
}
.page--interiors #how-it-works,
.page--interiors #internal-links{
  padding-top: clamp(44px, 5.6vw, 80px);
  padding-bottom: clamp(44px, 5.6vw, 80px);
}

/* Personal brand — portrait 'What is it' image sized to sit alongside the text */
.page--personal-brand #what-is-it .split__img img{
  aspect-ratio: 2 / 3;
  object-fit: cover;
  width: 100%;
  height: auto;
}
@media (min-width: 881px){
  .page--personal-brand #what-is-it .split__grid{
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    transform: translateX(clamp(-40px, -3vw, -16px));
  }
  .page--personal-brand #what-is-it .split__img{
    max-width: clamp(260px, 24vw, 340px);
    margin-left: auto;
    margin-right: clamp(56px, 6vw, 104px);
  }
  .page--personal-brand #what-is-it .split__text{
    margin-left: clamp(-56px, -4vw, -24px);
  }
}
@media (max-width: 880px){
  .page--personal-brand #what-is-it .split__img{
    max-width: 300px;
    margin: 0 auto;
  }
}

/* Thin mid-page CTA strip — no image, dark bg, white text */
.cta-strip{
  background: var(--ink);
  color: #fff;
  padding: clamp(48px, 5.5vw, 80px) 0;
  text-align: center;
}
.cta-strip p{
  max-width: 56ch;
  margin: 0 auto 22px;
  color: rgba(255,255,255,.92);
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.4;
  font-weight: 500;
}
.cta-strip .btn{ margin: 0 auto; }

/* ---------- Why Hunter Stills three-up ---------- */
.whys{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(24px, 4vw, 48px);
}
.why{
  padding: clamp(28px, 3.2vw, 40px) clamp(24px, 2.4vw, 32px);
  background: var(--white);
  border: 1px solid var(--mist);
}
.why h3{
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--ink);
  line-height: 1.2;
}
.why p{
  max-width: 36ch;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}
.why__num{
  display:block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--darkroom);
  margin: 0 0 14px;
}
@media (max-width: 860px){
  .whys{ grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   JUSTIFIED-ROWS GALLERY (Flickr-style)
   Both portrait and landscape stay big & punchy at row height.
   ============================================================ */
.section--gallery{ padding-top: clamp(60px, 7.5vw, 110px); padding-bottom: 0; }
.jgallery{
  width: 100%;
  padding: 0 32px clamp(60px, 7.5vw, 110px);
  background: var(--white);
}
.jrow{
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 8px;
}
.jrow:last-child{ margin-bottom: 0; }
.jtile{
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--mist);
  flex-shrink: 0;
  transition: transform var(--t-fast), filter var(--t-fast);
}
.jtile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-med);
}
.jtile:hover img{ transform: scale(1.02); }

@media (max-width: 640px){
  .jgallery{ padding-left: 12px; padding-right: 12px; }
}

/* Closing CTA — service page tweak (closer styles already exist on homepage) */

/* ============================================================
   PORTFOLIO PAGE
   ============================================================ */
.portfolio-intro{
  padding: clamp(96px, 12vw, 160px) 0 clamp(24px, 3vw, 40px);
}
.portfolio-intro .kicker{ margin-bottom: 18px; }
.portfolio-intro .heading--xl{
  max-width: 22ch;
  margin-bottom: 22px;
}
.portfolio-intro__lead{
  max-width: 60ch;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 clamp(24px, 3vw, 40px);
}

/* Filter pills */
.filter{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 4px;
}
.filter__pill{
  appearance: none;
  background: transparent;
  border: 1px solid #d9d6d1;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.filter__pill:hover{ border-color: var(--ink); }
.filter__pill.is-active{
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* Masonry grid via CSS columns */
.portfolio{
  padding: clamp(24px, 3vw, 40px) 0 clamp(72px, 9vw, 120px);
}
.masonry{
  column-count: 3;
  column-gap: 14px;
}
@media (max-width: 1100px){ .masonry{ column-count: 2; } }
@media (max-width: 640px){ .masonry{ column-count: 1; column-gap: 10px; } }

.tile{
  break-inside: avoid;
  margin: 0 0 14px;
  position: relative;
  overflow: hidden;
  background: var(--mist);
  cursor: zoom-in;
}
.tile img{
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--t-med) ease;
}
.tile:hover img{ transform: scale(1.03); }

.tile figcaption{
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 10px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--t-fast), transform var(--t-fast);
  pointer-events: none;
}
.tile:hover figcaption{
  opacity: 1;
  transform: translateY(0);
}

.tile.is-hidden{ display: none; }

.portfolio__count{
  margin-top: 24px;
  font-size: 13px;
  color: #7a7770;
  letter-spacing: .02em;
}

/* ============================================================
   CITY PAGES (Bristol / London)
   ============================================================ */
.page--city .services__head{
  max-width: 1000px;
}
.page--city .services__head .lede{
  margin-top: 16px;
}
/* Tighten the 'I grew up in…' split section */
.page--city #local-intro{
  padding-top: clamp(44px, 5.6vw, 72px);
  padding-bottom: clamp(44px, 5.6vw, 72px);
}
.page--city #local-intro .split__img img{
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  height: auto;
}
@media (min-width: 881px){
  .page--city #local-intro .split__grid{
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(20px, 2.4vw, 40px);
    justify-content: center;
    max-width: 1040px;
    margin: 0 auto;
  }
  .page--city #local-intro .split__img{
    max-width: clamp(320px, 30vw, 440px);
    margin-left: auto;
  }
  .page--city #local-intro .split__text{
    max-width: 44ch;
  }
}
/* Gallery breathing room on city pages */
.page--city .section--gallery{
  padding-top: clamp(56px, 6.5vw, 88px);
  padding-bottom: clamp(56px, 6.5vw, 88px);
}
/* City page heroes inherit the standard service-page hero layout.
   Extended left-side gradient scrim helps text legibility over busy images. */
.page--london .hero__scrim,
.page--bristol .hero__scrim{
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.10) 40%, rgba(0,0,0,.75) 100%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.20) 45%, transparent 70%);
}

/* Testimonials — three quotes on city pages */
.page--city .proof--quotes .quotes{
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 1024px){
  .page--city .proof--quotes .quotes{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .page--city .proof--quotes .quotes{ grid-template-columns: 1fr; }
}

/* About body — make inline links obviously clickable */
.about__body p a{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(17, 17, 17, 0.35);
  transition: color .15s ease, text-decoration-color .15s ease;
}
.about__body p a:hover,
.about__body p a:focus-visible{
  color: var(--darkroom);
  text-decoration-color: currentColor;
}

/* ============ HEADSHOTS — PRICING ============ */
.section--pricing{ background: var(--blush); }
.pricing__lede{
  margin: 16px 0 36px;
  max-width: 720px;
  color: var(--body);
  font-size: 18px;
}
.pricing__tiers{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  margin: 24px 0;
}
.pricing-tier{
  padding: clamp(24px, 2.4vw, 36px);
  border: 1px solid var(--mist);
  background: var(--white);
  display: flex;
  flex-direction: column;
}
.pricing-tier__title{
  font-size: 20px;
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--ink);
}
.pricing-tier__price{
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  color: var(--darkroom);
  margin: 0 0 20px;
  line-height: 1.1;
}
.pricing-tier__list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.pricing-tier__list li{
  padding: 10px 0;
  border-top: 1px solid var(--mist);
  color: var(--body);
  font-size: 14px;
  line-height: 1.5;
}
.pricing-tier__list li:first-child{
  border-top: none;
  padding-top: 0;
}
.pricing__note{
  margin-top: 24px;
  font-size: 13px;
  color: var(--grain);
}
@media (max-width: 880px){
  .pricing__tiers{ grid-template-columns: 1fr; }
}

/* ============ WHAT ELSE I DO (service pages) ============ */
.section--more-services{
  background: var(--blush);
  padding: clamp(56px, 6.5vw, 88px) 0;
}
.more-services__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 28px);
  margin-top: clamp(28px, 3vw, 44px);
}
@media (max-width: 1024px){ .more-services__grid{ grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 560px){ .more-services__grid{ grid-template-columns: 1fr; } }
.ms-card{
  display: block;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--t-fast);
}
.ms-card__img{
  margin: 0 0 14px;
  overflow: hidden;
  background: var(--mist);
  aspect-ratio: 4 / 5;
}
.ms-card__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-med);
}
.ms-card:hover .ms-card__img img{ transform: scale(1.04); }
.ms-card:hover{ color: var(--darkroom); }
.ms-card__title{
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 900;
  letter-spacing: -.015em;
  margin: 0;
  line-height: 1.2;
}