/* ==========================================================================
   SONYA — fineline tattoo studio
   --------------------------------------------------------------------------
   Concept: a workshop, not a poster. Everything is rounded, the paper is warm,
   the photographs sit in soft frames like prints in a box, and the type does the
   work. Written mobile-first: the small screen is the default, the wide layout is
   the exception.

   Sections
     1. tokens
     2. reset
     3. type
     4. layout helpers
     5. header + navigation
     6. mobile sheet
     7. mobile action bar
     8. hero
     9. rail (horizontal work strip)
    10. cards, figures, plates
    11. portfolio grid + filters
    12. case study
    13. steps, principles, care, price rows
    14. forms
    15. footer
    16. lightbox, toast, curtain
    17. breakpoints
    18. reduced motion
   ========================================================================== */

/* ------------------------------------------------------------ 1. tokens -- */
:root {
  --ink: #0b0b0b;
  --ink-2: #1c1a18;
  --ink-3: #56514a;
  --ink-4: #8c857b;

  --cream: #faf8f4;
  --beige: #e8e2d6;
  --beige-2: #f1ece2;
  --clay: #b8724f;
  --clay-soft: rgba(184, 114, 79, 0.12);
  --ok: #4c7a5a;

  --line: rgba(11, 11, 11, 0.12);
  --line-2: rgba(11, 11, 11, 0.07);

  --display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --sans: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Rounded is the concept, not an afterthought. */
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  --pad: clamp(1rem, 4.2vw, 4rem);
  --bay: clamp(2.5rem, 5.5vw, 5rem);
  --max: 78rem;
  --header-h: 4.25rem;
  --bar-h: 4.5rem;

  --soft: 0 18px 44px rgba(11, 11, 11, 0.08);
  --soft-sm: 0 8px 22px rgba(11, 11, 11, 0.07);
  --lift: 0 26px 60px rgba(11, 11, 11, 0.13);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-2: cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.42, 0.64, 1);

  --d1: 0.16s;
  --d2: 0.32s;
  --d3: 0.6s;
  --d4: 1s;
}

/* ------------------------------------------------------------- 2. reset -- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  min-height: 100svh;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* The mobile action bar needs the room, or it covers the last line of text. */
body.has-bar {
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
}

body.locked {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  background: var(--beige);
  border-radius: var(--r);
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

::selection {
  background: var(--clay);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 400;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--cream);
  font-size: 0.75rem;
  transform: translateY(-250%);
  transition: transform var(--d2) var(--ease);
}

.skip:focus-visible {
  transform: none;
}

/* --------------------------------------------------------------- 3. type -- */
.d1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 1.5rem + 6.4vw, 5.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
}

.d2 {
  font-family: var(--display);
  font-size: clamp(1.95rem, 1.3rem + 3vw, 3.4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.d2 em,
.d1 em {
  font-style: italic;
  color: var(--clay);
}

.d3 {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  font-weight: 500;
  line-height: 1.2;
}

.lead {
  font-size: clamp(1.02rem, 0.97rem + 0.35vw, 1.22rem);
  line-height: 1.62;
  color: var(--ink-3);
  max-width: 48ch;
}

.note {
  color: var(--ink-4);
  font-size: 0.92rem;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.kicker::before {
  content: '';
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* A rounded numeral chip — one of the small things that makes the site read as
   a set of cards rather than a document. */
.num {
  display: inline-grid;
  place-items: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding-inline: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--cream);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.num--ghost {
  background: var(--beige);
  color: var(--ink-3);
}

/* -------------------------------------------------------- 4. layout bits -- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.bay {
  padding-block: var(--bay);
}

.bay--tight {
  padding-block: clamp(1.75rem, 4vw, 3.25rem);
}

.stack {
  display: grid;
  gap: 1.1rem;
}

.stack--lg {
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.head {
  display: grid;
  gap: 0.9rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.head p {
  max-width: 44ch;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Pills: the only button shape in the system. */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  /* 48px: comfortably above the 44px touch minimum everywhere. */
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: transparent;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  transition: background var(--d2) var(--ease), color var(--d2) var(--ease),
    border-color var(--d2) var(--ease), transform var(--d2) var(--spring);
}

.pill svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pill--fill {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.pill--soft {
  background: var(--beige-2);
  border-color: transparent;
}

.pill:active {
  transform: scale(0.97);
}

.pill--filter {
  min-height: 2.75rem;
  padding: 0.55rem 1.15rem;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pill--filter sup {
  font-size: 0.62em;
  opacity: 0.55;
}

.pill--filter[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

/* -------------------------------------------------------- 5. header/nav -- */
.head-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(250, 248, 244, 0.88);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d2) var(--ease-2);
}

.head-bar.stuck {
  border-bottom-color: var(--line-2);
}

.head-bar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
}

.logo b {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.logo span {
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-pill);
  background: var(--beige);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.nav {
  display: none;
  gap: 0.15rem;
  padding: 0.3rem;
  border-radius: var(--r-pill);
  background: var(--beige-2);
}

.nav a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.05rem;
  border-radius: var(--r-pill);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  transition: color var(--d2) var(--ease);
}

.nav a:hover {
  color: var(--ink);
}

.nav a[aria-current='page'] {
  color: var(--cream);
}

/* The pill that slides behind the active item. */
.nav__pill {
  position: absolute;
  z-index: 0;
  top: 0.3rem;
  left: 0;
  height: calc(100% - 0.6rem);
  border-radius: var(--r-pill);
  background: var(--ink);
  transition: transform var(--d3) var(--ease), width var(--d3) var(--ease);
  will-change: transform, width;
}

.head-bar__end {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.head-bar__cta {
  display: none;
}

.burger {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: var(--beige-2);
  transition: background var(--d2) var(--ease), transform var(--d2) var(--spring);
}

.burger:active {
  transform: scale(0.94);
}

.burger i {
  display: block;
  width: 1.1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--d2) var(--ease);
}

.burger[aria-expanded='true'] i:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.burger[aria-expanded='true'] i:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* ------------------------------------------------------- 6. mobile sheet -- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(var(--header-h) + 1.5rem) var(--pad)
    calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--cream);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  transform: translateY(-102%);
  visibility: hidden;
  transition: transform var(--d3) var(--ease), visibility var(--d3);
}

.sheet.open {
  transform: none;
  visibility: visible;
}

.sheet__list {
  display: grid;
  align-content: center;
  gap: 0.4rem;
}

.sheet__list a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 3.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--display);
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  line-height: 1.1;
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity var(--d2) var(--ease), transform var(--d2) var(--ease), color var(--d2);
}

.sheet.open .sheet__list a {
  opacity: 1;
  transform: none;
}

.sheet.open .sheet__list a:nth-child(1) { transition-delay: 0.06s; }
.sheet.open .sheet__list a:nth-child(2) { transition-delay: 0.11s; }
.sheet.open .sheet__list a:nth-child(3) { transition-delay: 0.16s; }
.sheet.open .sheet__list a:nth-child(4) { transition-delay: 0.21s; }
.sheet.open .sheet__list a:nth-child(5) { transition-delay: 0.26s; }
.sheet.open .sheet__list a:nth-child(6) { transition-delay: 0.31s; }

.sheet__list a i {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--clay);
}

.sheet__list a:active {
  color: var(--clay);
}

.sheet__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-2);
}

/* ------------------------------------------------- 7. mobile action bar -- */
/* The one piece of mobile composition that does not exist on the desktop: the
   two actions that matter are always within thumb reach. */
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 260;
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem var(--pad) calc(0.5rem + env(safe-area-inset-bottom));
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-top: 1px solid var(--line-2);
}

.action-bar .pill {
  flex: 1;
  min-height: 3.25rem;
}

.action-bar .pill--icon {
  flex: 0 0 3.5rem;
  padding: 0;
}

/* --------------------------------------------------------------- 8. hero -- */
.hero {
  padding-top: clamp(1rem, 2.5vw, 2rem);
}

.hero__grid {
  display: grid;
  /* An explicit track matters: the photograph pulls itself past the page
     padding with a negative margin, and an implicit auto column would grow to
     that overflow and drag the text column off the right edge with it. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

.hero__copy {
  display: grid;
  gap: clamp(1.1rem, 2.5vw, 1.75rem);
  align-content: center;
}

.hero h1 {
  animation: up var(--d4) var(--ease) both;
}

@keyframes up {
  from {
    opacity: 0;
    transform: translateY(0.5em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero__rating {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--ink-3);
}

.hero__rating b {
  display: inline-grid;
  place-items: center;
  min-width: 2.6rem;
  height: 1.7rem;
  padding-inline: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--clay-soft);
  color: var(--clay);
  font-weight: 700;
  font-size: 0.85rem;
}

.stars {
  color: var(--clay);
  letter-spacing: 0.1em;
}

/* The photograph in a soft frame, with a second smaller frame laid over it. */
.hero__art {
  position: relative;
  display: grid;
  gap: 0.75rem;
}

/* On a phone the work comes before the pitch: the photograph runs full bleed
   under the header, rounded only where it meets the text, so the first screen
   is a tattoo rather than a wall of copy floating on cream. */
.hero__art {
  order: -1;
  margin-inline: calc(var(--pad) * -1);
}

.hero__art img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-xl);
  box-shadow: var(--soft);
  animation: settle var(--d4) var(--ease) both;
}

@keyframes settle {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
  padding: 0.5rem 0.9rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--cream);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero__art img {
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  box-shadow: none;
  max-height: 62vh;
}

.hero__chip {
  margin-inline: var(--pad);
}

/* Marquee strip in a rounded container, not a full-bleed black bar. */
.strip {
  overflow: hidden;
  padding: 0.85rem 0;
  border-radius: var(--r-pill);
  background: var(--beige-2);
}

.strip__track {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  width: max-content;
  padding-left: 1.75rem;
  animation: run 38s linear infinite;
}

.strip__track span {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.strip__track b {
  color: var(--clay);
  font-weight: 400;
}

@keyframes run {
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------- 9. rail -- */
/* A horizontal strip of works that is dragged rather than scrolled by a bar.
   The whole point is that it feels like a physical box of prints. */
.rail {
  display: grid;
  gap: 1rem;
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.rail::-webkit-scrollbar {
  display: none;
}

.rail.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.rail > * {
  scroll-snap-align: start;
  flex: none;
}

.rail-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-4);
  font-size: 0.75rem;
}

.rail-hint::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}

/* ------------------------------------------------- 10. cards and plates -- */
.card {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--soft-sm);
  transition: transform var(--d2) var(--ease), box-shadow var(--d2) var(--ease);
}

.card h3 {
  font-family: var(--display);
  font-size: 1.25rem;
}

.card p {
  color: var(--ink-3);
  font-size: 0.93rem;
}

.cards-2,
.cards-3,
.cards-4 {
  display: grid;
  gap: clamp(0.75rem, 1.8vw, 1.25rem);
}

/* A work: rounded frame, caption underneath, never overlaid — the text stays
   readable on every device instead of disappearing until hover. */
.work {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  text-align: left;
  width: 100%;
}

.work__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--beige);
  aspect-ratio: 1 / 1;
}

.work__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform var(--d3) var(--ease);
}

.work:hover .work__frame img {
  transform: scale(1.05);
}

.work__tag {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: rgba(250, 248, 244, 0.92);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.work__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding-inline: 0.2rem;
}

.work__cap b {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 500;
}

.work__cap span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

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

.plate {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--beige);
  box-shadow: var(--soft);
}

.plate img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0;
}

/* Tiles linking to the other pages. */
.tile {
  position: relative;
  display: grid;
  gap: 0.4rem;
  align-content: end;
  min-height: 15rem;
  padding: 1.25rem;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--cream);
  isolation: isolate;
  transition: transform var(--d2) var(--ease);
}

.tile img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  opacity: 0.42;
  transition: transform var(--d4) var(--ease), opacity var(--d3) var(--ease);
}

.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(11, 11, 11, 0.9), rgba(11, 11, 11, 0.15));
}

.tile:hover img {
  transform: scale(1.06);
  opacity: 0.55;
}

.tile b {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
}

.tile span {
  font-size: 0.76rem;
  color: rgba(250, 248, 244, 0.72);
}

.tile__go {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(250, 248, 244, 0.16);
  backdrop-filter: blur(6px);
}

.tile__go svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--d2) var(--ease);
}

.tile:hover .tile__go svg {
  transform: translate(2px, -2px);
}

/* ----------------------------------------------------- 11. portfolio grid -- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: none;
}

.filters::-webkit-scrollbar {
  display: none;
}

.empty {
  padding: 2rem 0;
  color: var(--ink-4);
}

/* -------------------------------------------------------- 12. case study -- */
.case__hero {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.case__title {
  display: grid;
  gap: 0.75rem;
}

.case__facts {
  display: grid;
  gap: 0;
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--soft-sm);
}

.case__facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line-2);
}

.case__facts > div:last-child {
  border-bottom: 0;
}

.case__facts dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.case__facts dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.case__gallery {
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  grid-template-columns: repeat(2, 1fr);
}

.case__shot {
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--beige);
  aspect-ratio: 1 / 1;
}

.case__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* -------------------------------------- 13. steps / principles / prices -- */
.steps {
  display: grid;
  gap: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--soft-sm);
}

.step {
  position: relative;
  display: grid;
  gap: 0.4rem;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border-bottom: 1px solid var(--line-2);
}

.step:last-child {
  border-bottom: 0;
}

.step__n {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
}

.step p {
  color: var(--ink-3);
  font-size: 0.93rem;
}

/* A soft progress line that fills on scroll — the process page reads as a
   journey rather than a list. */
.step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 0;
  background: var(--clay);
  transition: width var(--d4) var(--ease);
}

.step.lit::before {
  width: 100%;
}

.price-list {
  display: grid;
  gap: 0.5rem;
}

.price {
  display: grid;
  gap: 0.35rem;
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--soft-sm);
  transition: transform var(--d2) var(--ease);
}

.price__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.price__top b {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 500;
}

.price__top span {
  font-weight: 700;
  color: var(--clay);
  white-space: nowrap;
}

.price p {
  color: var(--ink-3);
  font-size: 0.9rem;
}

.price__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.chip {
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-pill);
  background: var(--beige-2);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ----------------------------------------------------------- 14. forms -- */
.form {
  display: grid;
  gap: 0.9rem;
}

.field {
  position: relative;
}

.field input,
.field textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 1.3rem 1.1rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  resize: vertical;
  transition: border-color var(--d2) var(--ease), box-shadow var(--d2) var(--ease);
}

.field textarea {
  min-height: 7rem;
}

.field label {
  position: absolute;
  left: 1.15rem;
  top: 1.05rem;
  font-size: 0.9rem;
  color: var(--ink-4);
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--d2) var(--ease), color var(--d2) var(--ease);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 4px var(--clay-soft);
}

.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-0.75rem) scale(0.72);
  color: var(--clay);
}

.field--bad input,
.field--bad textarea {
  border-color: #c05a4a;
}

.form__msg {
  font-size: 0.85rem;
  color: #c05a4a;
}

.form__done {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--soft-sm);
}

.form__done svg {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  border-radius: 50%;
  background: var(--clay-soft);
  stroke: var(--clay);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.info-card {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--beige-2);
}

.info-card h3 {
  margin-bottom: 0.4rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.info-card a {
  border-bottom: 1px solid var(--line);
  transition: color var(--d2) var(--ease), border-color var(--d2) var(--ease);
}

.info-card a:hover {
  color: var(--clay);
  border-color: var(--clay);
}

.hours th {
  padding: 0.3rem 0;
  font-weight: 500;
  font-size: 0.78rem;
  text-align: left;
  color: var(--ink-4);
}

.hours td {
  padding: 0.3rem 0;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.hours .off td {
  color: var(--ink-4);
  font-weight: 400;
}

/* ---------------------------------------------------------- 15. footer -- */
.foot {
  margin-top: var(--bay);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--line-2);
}

.foot__in {
  display: grid;
  gap: 1.75rem;
}

.foot__logo {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: 0.12em;
}

.foot__col {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  font-size: 0.86rem;
  color: var(--ink-3);
}

.foot__col h3 {
  margin-bottom: 0.25rem;
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.foot__col a:hover {
  color: var(--clay);
}

.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  justify-content: space-between;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-2);
  font-size: 0.74rem;
  color: var(--ink-4);
}

/* --------------------------------------------- 16. lightbox / toast / page -- */
.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  border: 0;
  background: rgba(11, 11, 11, 0.96);
  color: var(--cream);
}

.lightbox[open] {
  display: grid;
  place-items: center;
}

.lightbox figure {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  max-width: min(54rem, 100%);
}

.lightbox img {
  max-height: 70svh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--r);
  animation: pop var(--d2) var(--ease) both;
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.lightbox figcaption {
  display: grid;
  gap: 0.2rem;
  justify-items: center;
  text-align: center;
}

.lightbox figcaption b {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 500;
}

.lightbox figcaption span {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
}

.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: rgba(250, 248, 244, 0.14);
  color: var(--cream);
  transition: background var(--d2) var(--ease), color var(--d2) var(--ease), transform var(--d2) var(--spring);
}

.lb-btn:hover {
  background: var(--cream);
  color: var(--ink);
}

.lb-btn:active {
  transform: scale(0.94);
}

.lb-btn svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lb-x { top: 0.9rem; right: 0.9rem; }
.lb-l { left: 0.6rem; top: 50%; transform: translateY(-50%); }
.lb-r { right: 0.6rem; top: 50%; transform: translateY(-50%); }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 350;
  padding: 0.8rem 1.3rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--cream);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0.75rem);
  transition: opacity var(--d2) var(--ease), transform var(--d2) var(--ease), visibility var(--d2);
}

.toast.on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* ------------------------------------------------------------ 17. reveal -- */
.reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity var(--d3) var(--ease), transform var(--d3) var(--ease);
  transition-delay: var(--delay, 0s);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------- 18. lines and quotes -- */
/* A heading that arrives one line at a time. The text stays real text: the spans
   are generated from one string, and aria-label keeps the original phrasing. */
[data-lines] {
  overflow: hidden;
}

[data-lines] .line {
  display: block;
  transform: none;
  transition: transform var(--d3) var(--ease);
}

/* Lines are only pushed down once JS has confirmed it will bring them back;
   reduced motion, no IntersectionObserver or a JS error leave the text visible. */
[data-lines].lines-ready:not(.in) .line {
  transform: translateY(110%);
}

[data-lines].in .line {
  transform: none;
}

[data-lines].in .line:nth-child(2) {
  transition-delay: 0.08s;
}

[data-lines].in .line:nth-child(3) {
  transition-delay: 0.16s;
}

[data-lines].in .line:nth-child(4) {
  transition-delay: 0.24s;
}

.quote {
  max-width: 30ch;
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.6rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.quote em {
  font-style: italic;
  color: var(--clay);
}

.quote-foot {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ------------------------------------------------- 19. case study extras -- */
.case__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.case__nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: 0.76rem;
  font-weight: 600;
  transition: background var(--d2) var(--ease), color var(--d2) var(--ease);
}

.case__nav a:hover {
  background: var(--ink);
  color: var(--cream);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  color: var(--ink-4);
}

.breadcrumb a:hover {
  color: var(--clay);
}

/* ------------------------------------------------- touch target discipline -- */
/* The spec asks for 44px on anything tappable. The pills and buttons already
   clear it comfortably; these three sets of links do not, because they are text
   links and padding them changes nothing visually. The result is a hit area a
   thumb can actually find. */
.breadcrumb a,
.foot__col a,
.info-card p > a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* The strip and the filter row are horizontally scrollable, so they are exempt
   from the row-height rule: their items are already 44px or more. */

/* -------------------------------------------------------- 20. breakpoints -- */
@media (min-width: 34rem) {
  .cards-2,
  .cards-4,
  .grid,
  .case__gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .rail {
    grid-auto-flow: column;
    grid-auto-columns: 15rem;
  }
}

@media (min-width: 48rem) {
  .head-bar__cta {
    display: inline-flex;
  }

  .burger {
    display: none;
  }

  .sheet {
    display: none;
  }

  /* The action bar is a phone-only device; the header already has the actions. */
  .action-bar {
    display: none;
  }

  body.has-bar {
    padding-bottom: 0;
  }

  .cards-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .rail {
    grid-auto-columns: 17rem;
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .step:nth-child(odd) {
    border-right: 1px solid var(--line-2);
  }
}

@media (min-width: 64rem) {
  .nav {
    display: flex;
    position: relative;
  }

  /* The case study pairs the story with the photograph: text left, frame and
     the facts table on the right. */
  .case__hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    /* The photo and the facts table are far taller than the text. Centring the
       story against them splits the leftover space instead of leaving one long
       gap under the call to action. */
    align-items: center;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  /* Back to a framed photograph beside the copy on a wide screen. */
  .hero__art {
    order: 0;
    margin-inline: 0;
  }

  .hero__art img {
    border-radius: var(--r-xl);
    box-shadow: var(--soft);
    max-height: none;
  }

  .hero__chip {
    margin-inline: 0;
  }

  .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .rail {
    grid-auto-columns: 19rem;
  }

  .split--2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .split--wide {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
  }

  .foot__in {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

@media (min-width: 80rem) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .cards-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .step:nth-child(odd) {
    border-right: 0;
  }

  .step:not(:last-child) {
    border-right: 1px solid var(--line-2);
  }

  .case__gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ----------------------------------------------------- 19. reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero h1,
  .hero__art img {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .strip__track {
    animation: none;
  }
}

@media print {
  .head-bar,
  .action-bar,
  .sheet,
  .lightbox,
  .toast {
    display: none !important;
  }
}


/* ------------------------------------------------------- 20. polish v11 -- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

::selection { background: var(--clay); color: var(--cream); }

html { scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

h1, h2, h3, .quote { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Lines inside a heading can be long on phones: let them wrap, never clip. */
[data-lines] { overflow: clip; overflow-clip-margin: 0.2em; padding-bottom: 0.08em; }

.rail img, .work img { -webkit-user-drag: none; user-select: none; }

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

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #b4483a; }

.form__done:focus { outline: none; }

/* Phone hit areas: at least 44px everywhere. */
.pill { min-height: 44px; }

/* Safe-area for notched phones under the floating action bar. */
.action-bar { padding-bottom: max(0.6rem, env(safe-area-inset-bottom)); }

/* Dark tiles: keep the photo readable behind the white type. */
.tile img { filter: saturate(0.95) brightness(1.08); }

@media (hover: hover) {
  .work__frame img { transition: transform var(--d3) var(--ease); }
  .work:hover .work__frame img { transform: scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
  .work:hover .work__frame img { transform: none; }
}