/* Okies Digital Studio
   One signature piece: the dead-navy hero with its line ribbon. Everything
   else stays quiet, and the booking page is a plain card form. */

:root {
  --paper: #f4f5f7;      /* cyc wall white */
  --white: #ffffff;
  --ink: #000000;
  --ink-2: #474d57;
  --line: #d3d7de;
  --field: #8a919c;      /* lightest field border that keeps 3:1 on white */
  --chroma: #0044cc;     /* chroma-key blue */
  --chroma-deep: #002e8f;
  --chroma-tint: #e8eefc;
  --alert: #b3261e;
  --alert-tint: #fbe9e7;

  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --gutter: 16px;
  --radius-lg: 28px;
  --radius: 14px;
  color-scheme: light;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
[hidden] { display: none !important; }
.nobr { white-space: nowrap; }

:focus-visible { outline: 3px solid var(--chroma); outline-offset: 3px; }

.wrap {
  width: min(1200px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 10;
  background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 10px;
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Draft notice, filled in by site.js while STUDIO.draft is true */
.draft {
  background: var(--ink);
  color: var(--white);
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 9px var(--gutter);
  text-align: center;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 52px;
  padding: 0 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); transition-duration: 0.08s; }
.btn[disabled]:hover { transform: none; }
.btn--sm { min-height: 44px; padding: 0 1.1rem; font-size: 0.9375rem; border-radius: 12px; }
.btn--block { width: 100%; }

.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: var(--chroma); }

.btn--chroma { background: var(--chroma); color: var(--white); }
.btn--chroma:hover { background: var(--chroma-deep); }

.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--white); }

.btn--paper { background: var(--white); color: var(--ink); }
.btn--paper:hover { background: var(--ink); color: var(--white); }

.btn--line { border-color: rgba(255, 255, 255, 0.75); color: var(--white); }
.btn--line:hover { background: rgba(255, 255, 255, 0.14); }

.btn[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- Header ---------- */

.top { padding: 14px 0; }

.top__bar {
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}
.brand__logo { width: auto; height: 52px; }
@media (min-width: 820px) {
  .brand__logo { height: 60px; }
}

.top__nav { display: none; gap: 26px; }
/* The underline draws in from the left on hover, and stays under the current page */
.top__nav a {
  padding-bottom: 3px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: color 0.2s ease, background-size 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.top__nav a:hover,
.top__nav a[aria-current='page'] { color: var(--ink); background-size: 100% 1.5px; }

@media (min-width: 820px) {
  .top { padding: 20px 0; }
  .top__nav { display: flex; }
}

/* ---------- Hero: dead navy, with the line ribbon (lines.js) ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;     /* the title sits just above the paragraph; the photo fills the top */
  gap: 28px;
  /* Fills the first screen below the header (80px on phones, 100px from
     820px), leaving its rounded bottom edge in view */
  min-height: calc(100vh - 96px);
  min-height: calc(100svh - 96px);
  padding: 64px 22px 24px;
  border-radius: 20px;
  color: var(--white);
  background:
    radial-gradient(80% 70% at 88% 12%, rgba(64, 82, 128, 0.28), transparent 70%),
    linear-gradient(165deg, #121a2c 0%, #0b1120 52%, #06080e 100%);
}

/* Lights coming up when the page opens */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #03050a;
  opacity: 0;
  pointer-events: none;
  animation: lights-up 1.2s cubic-bezier(0.3, 0, 0.2, 1) 0.15s both;
}
@keyframes lights-up {
  from { opacity: 0.9; }
  to { opacity: 0; }
}

.hero__lines {
  --clear-x: 50%;
  --clear-y: 50%;
  --clear-r: 0px;               /* lines.js sets these around the paragraph */
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle var(--clear-r) at var(--clear-x) var(--clear-y), rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.4) 60%, #000 100%);
          mask-image: radial-gradient(circle var(--clear-r) at var(--clear-x) var(--clear-y), rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.4) 60%, #000 100%);
}

/* Faint portfolio photos behind the lines (hero-photos.js), each filling the
   box and fading out towards the edges */
.hero__photos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 60% 46%, #000 0%, rgba(0, 0, 0, 0.6) 42%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 78% at 60% 46%, #000 0%, rgba(0, 0, 0, 0.6) 42%, transparent 100%);
}
.hero__photos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  transform-origin: center 35%;
  will-change: opacity, transform;   /* fade and zoom on the graphics chip */
  transition: opacity 1.8s ease;
  /* A slow push-in from 1 to 1.2 over the photo's whole time on screen:
     the 6 second hold, then the 1.8 second fade out (hero-photos.js) */
  animation: hero-zoom 7.8s linear forwards;
}
.hero__photos img.is-on { opacity: 0.35; }
@keyframes hero-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.2); }
}

.hero__title,
.hero__foot { position: relative; z-index: 1; }

.hero__title {
  font-size: clamp(2rem, 8vw, 5.25rem);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.hero__title span { display: block; }

.hero__foot { display: grid; gap: 24px; }

.hero__lead {
  max-width: 34em;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.94);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__actions .btn { flex: 1 1 14rem; white-space: nowrap; }
.hero :focus-visible { outline-color: var(--white); }

@media (min-width: 640px) {
  .hero { padding: 88px 44px 40px; border-radius: var(--radius-lg); }
}

@media (min-width: 960px) {
  .hero {
    min-height: min(calc(100svh - 120px), 960px);
    padding: 104px 64px 56px;
  }
  .hero__foot {
    grid-template-columns: minmax(0, 32rem) auto;
    justify-content: space-between;
    align-items: end;
  }
  .hero__lead { font-size: 1.25rem; }
  .hero__actions { flex-wrap: nowrap; }
  .hero__actions .btn { flex: none; min-height: 58px; padding: 0 1.75rem; font-size: 1.0625rem; }
}

/* ---------- Sections ---------- */

.section { padding-top: clamp(72px, 10vw, 128px); }
/* 60px more between the home page's Services, How booking works, From
   Ado-Ekiti and Get in touch sections, on every screen size */
#how,
#where,
#contact-us {
  padding-top: calc(clamp(72px, 10vw, 128px) + 60px);
  scroll-margin-top: -60px;      /* menu links still land the heading where they did */
}

.section__head {
  display: grid;
  gap: 12px;
  max-width: 44rem;
  margin-bottom: 32px;
}
.section__head p { color: var(--ink-2); }

h2 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 850;
  font-stretch: 118%;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Services */

.rate-group + .rate-group { margin-top: 56px; }
.rate-group h3 { font-size: 1.25rem; font-weight: 750; font-stretch: 108%; margin-bottom: 12px; }

.rates {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}

.rate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'main main' 'meta book';
  gap: 12px 16px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.rate:not(:has(.rate__meta)) { grid-template-areas: 'main book'; }
.rate__main { grid-area: main; }
.rate__name { font-size: 1.25rem; font-weight: 700; font-stretch: 108%; line-height: 1.25; }
.rate__name a { text-decoration-color: var(--line); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.rate__name a:hover { text-decoration-color: var(--ink); }
.rate__blurb { color: var(--ink-2); margin-top: 2px; }
.rate__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: baseline; }
.rate__len { color: var(--ink-2); }
.rate__price {
  font-size: 1.25rem;
  font-weight: 800;
  font-stretch: 112%;
  font-variant-numeric: tabular-nums;
}
.rate__book { grid-area: book; }

@media (min-width: 760px) {
  .rate {
    grid-template-columns: minmax(0, 1fr) 15rem auto;
    grid-template-areas: 'main meta book';
    gap: 24px;
    padding: 24px 0;
  }
  .rate__meta { justify-content: flex-end; }
}

.empty-note { color: var(--ink-2); padding: 20px 0; }

/* Recent work: photos on the inside of a slowly turning cylinder, so the
   nearest ones are at the edges. Geometry is in units of --c, the width of
   the card straight ahead; curve.js only turns the ring and fades the ends. */

.reel__head {
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}
.reel__head p { color: var(--ink-2); }
.reel__head .btn { margin-top: 10px; }

/* --c grows with the screen so the curve always reaches the edges at about
   60 degrees. Cards beyond that are close to the viewer and hugely stretched,
   so they must stay off screen; curve.js fades them out past 74 degrees. */
.reel__stage {
  --c: clamp(100px, 10.5vw, 260px);
  --r: calc(var(--c) * 3.2);              /* 18 cards with a small gap */
  position: relative;
  width: 100vw;
  height: calc(var(--c) * 2.5);
  margin: 28px calc(50% - 50vw) 0;
  overflow: hidden;
  perspective: calc(var(--r) * 1.3);      /* viewer just behind the axis */
}
.reel__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  transform: translateZ(var(--r)) rotateY(var(--rot, 0deg));
}
.reel__card {
  position: absolute;
  left: calc(var(--c) / -2);
  top: calc(var(--c) * -0.625);
  width: var(--c);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 14px;
  background: var(--tone, var(--line));   /* the photo's average colour until it loads */
  backface-visibility: hidden;
  transform: rotateY(var(--angle)) translateZ(calc(var(--r) * -1));
}
.reel__card img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; }
.reel__card img.is-ready { opacity: 1; }

.reel__toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 12px auto 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}
.reel__toggle:hover { border-color: var(--ink); }
.reel__toggle svg { width: 16px; height: 16px; }
.reel__toggle .icon-play,
.reel__toggle[aria-pressed='true'] .icon-pause { display: none; }
.reel__toggle[aria-pressed='true'] .icon-play { display: block; }

/* Pill link with the arrow in a circle */
.btn--pill {
  min-height: 52px;
  padding: 0 6px 0 1.4rem;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
}
.btn--pill:hover { border-color: var(--ink); }
.btn__circle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--chroma);
  color: var(--white);
}
.btn__circle svg { width: 16px; height: 16px; }

/* Steps: a real sequence, so they are numbered */

.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 36px;
  margin: 0;
  padding: 0;
}
.steps li {
  counter-increment: step;
  border-top: 2px solid var(--ink);
  padding-top: 20px;
}
.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: 18px;
  color: var(--chroma);
  font-size: 3.5rem;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 0.8;
}
.steps h3 { font-size: 1.25rem; font-weight: 750; font-stretch: 108%; line-height: 1.25; margin-bottom: 8px; }
.steps p { color: var(--ink-2); max-width: 30em; }

@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

/* Visit */

.visit { display: grid; gap: 48px; }
.visit h3 { font-size: 1.25rem; font-weight: 750; font-stretch: 108%; margin-bottom: 14px; }

.hours { margin: 0; border-top: 2px solid var(--ink); }
.hours div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.hours dt { font-weight: 600; }
.hours dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.hours .is-closed { color: var(--ink-2); }

.contact { list-style: none; margin: 0 0 28px; padding: 0; border-top: 2px solid var(--ink); }
.contact li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact span { display: block; color: var(--ink-2); font-size: 0.9375rem; }
.contact a { display: block; width: fit-content; font-weight: 600; text-underline-offset: 4px; overflow-wrap: anywhere; }
.contact__fallback { color: var(--ink-2); margin-bottom: 28px; }

@media (min-width: 860px) {
  .visit { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .visit .section__head { grid-column: 1 / -1; margin-bottom: 0; }
}

/* ---------- Footer ---------- */

.foot {
  margin-top: clamp(80px, 10vw, 128px);
  padding: 28px 0 40px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot a { text-underline-offset: 4px; }

/* ---------- Booking page: one card, one column ---------- */

.bk {
  width: min(480px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding: 24px 0 56px;
}
.bk__brand { display: flex; width: fit-content; margin: 0 auto 14px; }   /* centred over the card */
.bk__brand .brand__logo { height: 68px; }

.bk__card {
  padding: 26px 20px 28px;
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 12px 32px rgba(0, 0, 0, 0.06);
}
@media (min-width: 520px) {
  .bk { padding-top: 32px; }
  .bk__card { padding: 30px 28px 32px; }
}

.bk__head { margin-bottom: 24px; }
.bk__head h1,
.done h2 {
  font-size: clamp(1.75rem, 7vw, 2.125rem);
  font-weight: 800;
  font-stretch: 105%;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.bk__head p { margin-top: 6px; color: var(--ink-2); font-size: 0.9375rem; }

/* Fields */

.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field__label { font-weight: 650; font-size: 0.875rem; }
.field__label small { color: var(--ink-2); font-size: inherit; font-weight: 400; }

.input {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--field);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
}
.input:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.input[aria-invalid='true'] { border-color: var(--alert); box-shadow: inset 0 0 0 1px var(--alert); }
textarea.input { min-height: 104px; resize: vertical; }

select.input {
  appearance: none;
  padding-right: 38px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 5 7 9.5 11.5 5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 13px center / 14px;
  cursor: pointer;
}
select.input:disabled { background-color: var(--paper); color: var(--ink-2); cursor: not-allowed; }

/* iOS draws date inputs centred and shorter than the other fields */
.input[type='date'] { appearance: none; display: block; }
.input[type='date']::-webkit-date-and-time-value { text-align: left; }

.hint { color: var(--ink-2); font-size: 0.875rem; }
.err { color: var(--alert); font-size: 0.875rem; font-weight: 650; }

/* Price box and send */

.bk-price {
  margin-top: 6px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--white);
}
.bk-price__amount {
  font-size: 1.5rem;
  font-weight: 800;
  font-stretch: 110%;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.bk-price__meta { margin-top: 4px; font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, 0.82); }

.bk-note { margin: 18px 0; font-size: 0.875rem; font-weight: 600; line-height: 1.5; }
.bk .btn { border-radius: 12px; }

.status:empty { display: none; }
.status {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--alert-tint);
  color: #7a1a13;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}
.status a { color: inherit; }

.bk__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-top: 22px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.bk__links a { text-underline-offset: 4px; }

/* Honeypot: hidden from people, visible to form-filling bots */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Sent */

.done h2 { margin-bottom: 12px; }
.done h2:focus { outline: none; }
.done p { color: var(--ink-2); }
.done strong { color: var(--ink); }
.done__actions { display: grid; gap: 10px; margin-top: 24px; }

#book.is-done .bk__head,
#book.is-done .bk__fields { display: none; }

/* ---------- Work page: the photos on a turning ring ---------- */

.work-intro { padding-top: 24px; }
.work-intro > * { max-width: 46rem; }
.work-intro h1 {
  font-size: clamp(2.75rem, 10vw, 6rem);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
}
.work-intro p { color: var(--ink-2); font-size: 1.125rem; }

/* The track is tall so scrolling has room to turn the ring one photo at a
   time; the stage sticks to the screen meanwhile. work.js sets --count and
   --k (the ring's radius per card width, from the number of slots). */
.spin {
  --w: min(30vw, 46svh);                  /* width of the card in front */
  --g: 1;                                 /* gap, in card widths, added to the radius */
  position: relative;
  height: calc(100svh + (var(--count, 1) - 1) * 40svh);
  margin-top: 8px;
}
@media (max-width: 991px) {
  .spin { --w: min(70vw, 46svh); --g: 0.57; }
}
.spin__stage {
  --r: calc(var(--w) * (var(--k, 2.19) + var(--g)));
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  perspective: var(--r);
}
.spin__ring {
  position: absolute;
  left: 50%;
  top: 46%;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--r) * -1)) rotateY(var(--rot, 0deg));
}
.spin__card {
  position: absolute;
  left: calc(var(--w) / -2);
  top: 0;
  width: var(--w);
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--tone, var(--line));   /* the photo's average colour until it loads */
  box-shadow: 0 16px 36px -14px rgba(11, 17, 32, 0.35);
  cursor: pointer;
  backface-visibility: hidden;
  transform: rotateY(var(--angle)) translateZ(var(--r)) translateY(-50%);
}
/* Past 60 degrees the viewer sees a card from behind; turn it round so the
   photo never shows mirrored. It is edge-on at that moment, so the flip is unseen. */
.spin__card.is-back { transform: rotateY(var(--angle)) translateZ(var(--r)) rotateY(180deg) translateY(-50%); }
.spin__card img { width: 100%; height: auto; border-radius: 6px; }
/* Cards on the far side fade into the page, for depth */
.spin__card.is-back { opacity: 0.35; box-shadow: none; }
.spin__card:focus-visible { outline-offset: 6px; }

.spin__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(20px, 4svh);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}
.spin__arrow {
  display: grid;
  place-items: center;
  width: 64px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--chroma);
  color: var(--white);
  cursor: pointer;
}
.spin__arrow:hover { background: #1559e8; }
.spin__arrow svg { width: 20px; height: 20px; }
.spin__arrow[disabled] { opacity: 0.35; cursor: default; }
.spin__count {
  min-width: 5.5em;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.work-cta { padding-top: clamp(64px, 9vw, 112px); }
.work-cta h2 { margin-bottom: 14px; }
.work-cta p { color: var(--ink-2); max-width: 34em; }
.work-cta .hero__actions { margin-top: 28px; max-width: 32rem; }

/* Full-size viewer */
.viewer {
  width: 100vw;
  max-width: none;
  height: 100svh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
}
.viewer[open] { display: grid; place-items: center; }
.viewer::backdrop { background: rgba(0, 0, 0, 0.96); }
.viewer img {
  width: auto;
  height: auto;
  max-width: min(92vw, 1600px);
  max-height: calc(100svh - 136px);
  border-radius: 6px;
}
.viewer__count {
  position: fixed;
  left: 24px;
  top: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #c9ced6;
}
.viewer__btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  cursor: pointer;
}
.viewer__btn:hover { background: rgba(255, 255, 255, 0.26); }
.viewer__btn svg { width: 20px; height: 20px; }
.viewer__close { top: 16px; right: 16px; }
.viewer__prev { left: 16px; bottom: 16px; }
.viewer__next { right: 16px; bottom: 16px; }
@media (min-width: 760px) {
  .viewer__prev,
  .viewer__next { top: 50%; bottom: auto; transform: translateY(-50%); }
}

/* ---------- Service pages (built by tools/build-pages.mjs) ---------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding-top: 12px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.crumbs a { color: inherit; text-underline-offset: 4px; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

.svc-head { padding-top: 28px; }
.svc-head h1 {
  max-width: 14em;
  margin-bottom: 18px;
  font-size: clamp(2.5rem, 8vw, 4.75rem);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.svc-lead { max-width: 36em; color: var(--ink-2); font-size: 1.1875rem; }
.svc-price { margin-top: 14px; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.svc-head .hero__actions { max-width: 32rem; margin-top: 28px; }

.svc-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .svc-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
.svc-photos img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; background: var(--line); }
.svc-more,
.svc-cta { margin-top: 28px; }

.svc-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.svc-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-weight: 600;
  text-decoration: none;
}
.svc-links a:hover { border-color: var(--ink); }

/* Name-and-description lists: what we shoot, where we work */
.info-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}
.info-list li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.info-list h3 { margin-bottom: 4px; font-size: 1.1875rem; font-weight: 750; font-stretch: 108%; line-height: 1.3; }
.info-list p { max-width: 34em; color: var(--ink-2); }
@media (min-width: 860px) {
  .info-list { grid-template-columns: 1fr 1fr; column-gap: 48px; }
}

/* ---------- 404 ---------- */

.lost .hero { min-height: 0; }
.lost .hero__title { font-size: clamp(2.75rem, 11vw, 7rem); }

/* ---------- Preloader (home and work pages; site.js removes it) ---------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  background: var(--paper);
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
  /* Never block the page: gone after 4 seconds even if no script runs */
  animation: preloader-gone 0s linear 4s forwards;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader img { width: 92px; height: auto; animation: preloader-breathe 1.6s ease-in-out infinite; }
.preloader__spinner {
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--line);
  border-top-color: #0b1120;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes preloader-gone { to { opacity: 0; visibility: hidden; } }
@keyframes preloader-breathe { 50% { opacity: 0.6; transform: scale(0.96); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Motion ---------- */

/* Sections and list items fade up once as they scroll into view (site.js
   adds .reveal only to things below the first screen) */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--delay, 0ms),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Back to the top (site.js), shown once the hero is scrolled away */
.to-top {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 20;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #0b1120;
  color: var(--white);
  box-shadow: 0 8px 24px rgba(11, 17, 32, 0.28);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease, visibility 0s linear 0.3s;
}
.to-top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease, visibility 0s;
}
.to-top:hover { background: #1b2742; }
/* On phones the /work carousel's arrows run nearly edge to edge, so the
   button sits above them instead of on top of the next arrow */
@media (max-width: 600px) {
  body:has(.spin) .to-top { bottom: calc(max(20px, 4svh) + 58px); }
}
.to-top:active { transform: scale(0.94); }
.to-top svg { width: 20px; height: 20px; transition: transform 0.25s ease; }
.to-top:hover svg { transform: translateY(-2px); }

/* Small controls answer hover and press */
.reel__toggle,
.spin__arrow,
.viewer__btn,
.svc-links a,
.btn__circle { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.reel__toggle:active,
.spin__arrow:not([disabled]):active,
.viewer__btn:active { transform: scale(0.94); }
.viewer__prev:active,
.viewer__next:active { transform: scale(0.94); }
@media (min-width: 760px) {
  .viewer__prev:active,
  .viewer__next:active { transform: translateY(-50%) scale(0.94); }
}
.svc-links a:hover { transform: translateY(-1px); }
.btn--pill:hover .btn__circle { transform: translateX(3px); }
.rate__name a,
.foot a,
.contact a,
.crumbs a,
.bk__links a { transition: color 0.2s ease, text-decoration-color 0.2s ease; }
.input { transition: border-color 0.15s ease, box-shadow 0.15s ease; }

/* Things that appear in answer to the visitor fade in */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-4px); }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px); }
}
.err:not([hidden]),
.status:not(:empty),
.bk-price:not([hidden]) { animation: fade-in 0.25s ease; }
.done:not([hidden]) { animation: rise-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.viewer[open],
.viewer[open]::backdrop { animation: fade-in 0.25s ease; }

/* Our work: the heading and text rise in, then the controls; each photo on
   the ring fades in once loaded and brightens a little under the pointer.
   (Opacity goes on the photos, not the ring: on the ring it would flatten the 3D.) */
.work-intro > * { animation: rise-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.work-intro > :nth-child(2) { animation-delay: 0.12s; }
.spin__controls { animation: rise-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both; }
.spin__card img { opacity: 0; transition: opacity 0.6s ease, filter 0.3s ease; }
.spin__card img.is-ready { opacity: 1; }
.spin__card:not(.is-back):hover img { filter: brightness(1.08); }
.viewer img { transition: opacity 0.3s ease; }
.viewer img:not(.is-ready) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero::after { animation: none; opacity: 0; }
  .hero__photos img { transition: none; animation: none; }
  .btn,
  .to-top,
  .reel__toggle,
  .spin__arrow,
  .viewer__btn,
  .svc-links a,
  .btn__circle,
  .to-top svg,
  .viewer img { transition: none; }
  .btn:hover,
  .btn:active,
  .svc-links a:hover,
  .btn--pill:hover .btn__circle,
  .to-top:hover svg { transform: none; }
  .err:not([hidden]),
  .status:not(:empty),
  .bk-price:not([hidden]),
  .done:not([hidden]),
  .viewer[open],
  .viewer[open]::backdrop,
  .work-intro > *,
  .spin__controls { animation: none; }
  .spin__card img,
  .reel__card img { transition: none; }
  .preloader img,
  .preloader__spinner { animation: none; }
  .preloader { transition: none; }
}