/* Landing components for Bluerendr: white page, black panels, blue accent.
   Every colour, radius, shadow and duration comes from tokens.css. */

/* --- top bar ---------------------------------------------------------------- */
.nav-wrap {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  background: var(--white);
  transition: box-shadow var(--t), border-color var(--t), background-color var(--t);
}

.navbar {
  pointer-events: auto;
  width: 100%;
  max-width: 1520px;
  margin-inline: auto;
  padding: var(--s-2xs) var(--s-xl);
  background: var(--white);
  border-bottom: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: var(--s-l);
  transition: box-shadow var(--t), border-color var(--t), padding var(--t), background-color var(--t);
}

.navbar.is-stuck {
  padding-block: var(--s-3xs);
  border-bottom-color: var(--n-04);
  background: #ffffffeb;
  backdrop-filter: blur(10px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2xs);
  min-width: 140px;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: var(--h6);
  font-weight: 600;
  letter-spacing: -0.03em;
  transition: opacity var(--t);
}

.brand:hover { opacity: 0.8; }

.brand__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
}

.brand__mark img { display: block; width: 100%; height: 100%; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--s-4xs);
  margin-left: auto;
}

.navbar-link {
  display: flex;
  align-items: center;
  padding: var(--s-4xs) var(--s-2xs);
  margin-right: calc(-1 * var(--s-2xs));
  border-radius: var(--s-xl);
  color: var(--ink-soft);
  font-size: var(--body-s);
  font-weight: 500;
  transition: color var(--t), background-color var(--t);
}

.navbar-link:last-child { margin-right: 0; }
.navbar-link:hover { color: var(--accent); background: var(--accent-soft); }
.navbar-link.is-active { color: var(--accent); }

.nav-cta {
  display: flex;
  align-items: center;
  gap: var(--s-s);
}

/* With no phone number set the slot is empty, and an empty slot still took
   the bar's gap, which held the menu 32px short of the picture's edge. */
.nav-cta:not(:has(*)) { display: none; }

/* The last link's own padding is pulled back so its TEXT ends where the
   banner picture ends, not its hover pill. */
.nav-menu { margin-right: calc(-1 * var(--s-2xs)); }

.nav-cta .button { height: 42px; }

.nav-phone {
  color: var(--ink-soft);
  font-size: var(--body-s);
  font-weight: 500;
  white-space: nowrap;
}

.nav-phone:hover { color: var(--accent); }

.nav-burger {
  display: none;
  width: 44px;
  height: 38px;
  border: 1px solid var(--n-04);
  border-radius: var(--s-xl);
  background: var(--white);
  cursor: pointer;
}

.nav-burger span,
.nav-burger span::before,
.nav-burger span::after {
  display: block;
  width: 16px;
  height: 1.5px;
  margin-inline: auto;
  background: var(--ink);
  transition: transform var(--t), opacity var(--t-fast);
}

.nav-burger span::before,
.nav-burger span::after {
  content: '';
  position: relative;
}

.nav-burger span::before { top: -5px; }
.nav-burger span::after { top: 3.5px; }
.nav-burger[aria-expanded='true'] span { transform: rotate(45deg); }
.nav-burger[aria-expanded='true'] span::before { opacity: 0; }
.nav-burger[aria-expanded='true'] span::after { transform: rotate(-90deg) translateX(3.5px); }

/* --- hero ------------------------------------------------------------------ */
.hero-section {
  position: relative;
  /* the top bar is fixed and about 60px tall; this clears it and leaves a
     breath, nothing more */
  padding-top: calc(60px + var(--s-xl));
  padding-bottom: 0;
}

.hero-wrap {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  /* the marquee carries 24px of its own padding on top of this */
  gap: var(--s-m);
  width: 100%;
}

/* The banner runs wider than the rest of the page: the side padding drops
   so the text gets room and the picture gets width. */
.hero-section .container {
  max-width: 1520px;
  padding-inline: var(--s-xl);
}

/* Text on the left, the picture on the right, the two centred on each other.
   The picture is shown whole at its own shape, never cropped, so it takes
   the wider column. */
.hero {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--s-2xl);
  align-items: center;
  width: 100%;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-m);
}

/* Sized so "Software that runs the business," fits the column on one row:
   the clause is about 16.5em wide in Sora, and the column is about 2.9vw
   short of half the banner. */
.hero-text h1 { font-size: clamp(2rem, 2.7vw, 2.7rem); }
.hero-text h1 .lead { white-space: nowrap; }

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2xs);
}

.hero-ui {
  position: relative;
  width: 100%;
}

.hero-photo {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* a large, clean radius with a soft ambient shadow, the way Apple frames a
     product shot: no rim, no border, the curve itself is the edge */
  border-radius: 32px;
  background: var(--panel);
  box-shadow: 0 30px 60px -20px #0b1a3a40, 0 10px 24px -12px #0b1a3a26;
}

/* Taller than the picture's own 2.36:1: the frame is 7:4 and the picture
   fills it, so a little of each dark side is trimmed and the laptop and
   rocket stay whole in the middle. */
.hero-photo { aspect-ratio: 7 / 4; }

.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-open {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3xs);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--n-08);
  flex: none;
}

.dot[data-state='open'] {
  background: var(--ok);
  box-shadow: 0 0 0 3px #1e7f4f2b;
}

/* --- logo marquee ---------------------------------------------------------- */
.marquee {
  width: 100%;
  overflow: hidden;
  padding-block: var(--s-m);
  /* Safari wanted the prefix until 15.4 and still honours it. Without one of
     the two the strip loses its soft edges and the text ends abruptly. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee__track {
  display: flex;
  gap: var(--s-3xl);
  width: max-content;
  animation: marquee 36s linear infinite;
  /* iOS Safari sometimes never starts an animation on an element it has not
     promoted to its own layer. Asking for the layer up front avoids a strip
     that simply sits still on a phone while it scrolls everywhere else. */
  will-change: transform;
  transform: translateZ(0);
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3xs);
  color: var(--n-08);
  font-family: var(--font-heading);
  font-size: var(--body);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.marquee__item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.6;
}

@keyframes marquee {
  /* Both ends stated. A keyframe set with only a `to` leans on the element's
     current transform as its start, which is no longer zero now that the track
     is promoted with translateZ. */
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* With motion turned off the strip must still be readable. Freezing it mid-run
   left a clipped row of half-sentences, which is what "not working" looks like
   to anyone with Reduce Motion on, and it is on by default for a lot of people. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  /* One claim per line. Wrapping them into columns let a long claim sit half
     off the right of a phone screen, because each item is an inline-flex row
     whose text will not shrink below its own width. A single column cannot
     overflow however long the sentence is. */
  .marquee__track {
    width: auto;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3xs);
    animation: none;
    transform: none;
    will-change: auto;
  }
  /* nowrap is there so the scrolling row never breaks a claim across lines.
     Stationary and wrapping, it is what pushed the longer claims off the
     right of a phone screen instead. */
  .marquee__item {
    white-space: normal;
    max-width: 100%;
  }
}

/* --- numbered steps -------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-3xs);
  width: 100%;
  padding: var(--s-3xs);
  border-radius: var(--s-m);
  background: var(--bg-02);
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--s-3xs);
  padding: var(--s-l);
  border-radius: var(--s-s);
  background: var(--white);
  border: 1px solid var(--n-04);
  transition: box-shadow var(--t-slow), border-color var(--t);
}

.step:hover {
  box-shadow: var(--shadow-card-soft);
  border-color: var(--accent-soft);
}

.step__num {
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: var(--body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.step p { color: var(--muted); }

/* --- dark pillar panel ----------------------------------------------------- */
/* Four cards, so an explicit 2x2: auto-fit lands on three across and leaves
   one stranded on its own row. */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-l);
  width: 100%;
}

.pillar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-l);
  min-height: 240px;
  padding: var(--s-xl);
  border-radius: var(--s-m);
  background: #ffffff0d;
  border: 1px solid #ffffff1a;
  box-shadow: var(--shadow-panel);
  transition: background-color var(--t), transform var(--t-slow);
}

.pillar:hover {
  background: #ffffff1a;
  transform: translateY(-4px);
}

.pillar__index {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-heading);
  font-size: var(--body-s);
  font-weight: 600;
}

.pillar p { color: var(--white-80); }

/* --- principles (numbered tag rows) ---------------------------------------- */
.principles {
  display: flex;
  flex-direction: column;
  gap: var(--s-3xs);
  width: 100%;
  padding: var(--s-3xs);
  border-radius: var(--s-m);
  background: var(--bg-02);
}

.principle {
  display: flex;
  align-items: flex-start;
  gap: var(--s-s);
  padding: var(--s-l);
  border-radius: var(--s-s);
  background: var(--white);
  border: 1px solid var(--n-04);
  transition: box-shadow var(--t), border-color var(--t);
}

.principle:hover {
  box-shadow: var(--shadow-card-soft);
  border-color: var(--accent-soft);
}

.principle__label {
  font-family: var(--font-heading);
  font-size: var(--h6);
  font-weight: 600;
  letter-spacing: -0.02em;
  min-width: 200px;
}

.principle p { color: var(--muted); flex: 1; }

@media (max-width: 767px) {
  .principle { flex-direction: column; gap: var(--s-2xs); }
}

/* ---------------------------------------------------------------------------
   SERVICES WE OFFER (brief section 3).
   Structure lifted from the template's Success Stories block: a tinted rounded
   container holding a 2-up grid of cards, each card a 3:2 thumbnail with the
   wordmark centred over a dark overlay, a pill badge at bottom-right, and the
   title plus description underneath. Per-card colour comes from --accent.
   --------------------------------------------------------------------------- */
.case-study-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3xs);
  width: 100%;
  padding: var(--s-3xs);
  border-radius: var(--s-m);
  background: var(--bg-02);
}

/* An odd number of services would leave the last card alone in one column, so
   it takes the whole row instead and reads as deliberate. */
.case-study-list > .case-study:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.case-study-list > .case-study:last-child:nth-child(odd) .thumbnail-wrap {
  aspect-ratio: 3 / 1.1;
}

.case-study {
  display: flex;
  flex-direction: column;
  gap: var(--s-3xs);
  height: 100%;
  padding: var(--s-3xs);
  border-radius: var(--s-s);
  background: var(--white);
  border: 1px solid var(--n-04);
  transition: box-shadow var(--t-slow), border-color var(--t), transform var(--t-slow);
}

.case-study:hover {
  box-shadow: var(--shadow-card);
  border-color: var(--accent-soft);
  transform: translateY(-3px);
}

.thumbnail-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  border-radius: var(--s-xs);
  overflow: clip;
}

.thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.case-study:hover .thumbnail { transform: scale(1.04); }

/* the generated stand-in when a service has no picture yet: the accent tint
   with a dark block carrying nothing but a quiet grid, so it reads as a panel
   and not as a missing image */
.thumbnail--generated {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 80% 0%, #ffffffb3 0%, transparent 60%),
    var(--accent);
  transition: transform var(--t-slow);
}

.thumbnail--generated::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  top: 22%;
  bottom: 22%;
  border-radius: var(--s-2xs);
  background:
    linear-gradient(90deg, #ffffff12 1px, transparent 1px) 0 0 / 14% 100%,
    linear-gradient(0deg, #ffffff12 1px, transparent 1px) 0 0 / 100% 25%,
    var(--panel);
  box-shadow: 0 18px 36px #0b1a3a33;
  transition: transform var(--t-slow);
}

.case-study:hover .thumbnail--generated { transform: scale(1.02); }
.case-study:hover .thumbnail--generated::after { transform: translateY(-4px); }

.badge {
  position: absolute;
  z-index: 2;
  left: 16px;
  top: 16px;
  padding: 0.3rem 0.7rem;
  border-radius: var(--s-xl);
  background: var(--white);
  color: var(--accent-deep);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: var(--shadow-card-soft);
}

.case-study-text {
  display: flex;
  flex-direction: column;
  gap: var(--s-3xs);
  padding: var(--s-s);
}

.case-study-text p { color: var(--muted); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4xs);
  list-style: none;
  margin: var(--s-4xs) 0 0;
  padding: 0;
}

.chips li {
  padding: var(--s-4xs) var(--s-2xs);
  border-radius: var(--s-xl);
  border: 1px solid var(--n-05);
  color: var(--muted);
  font-size: var(--body-s);
  transition: border-color var(--t), background-color var(--t);
}

.case-study:hover .chips li {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--n-05));
  background: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--ink);
}

@media (max-width: 767px) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .case-study-list { grid-template-columns: 1fr; }
}

/* --- testimonial slider ---------------------------------------------------- */
/* The aggregate strip under the "What clients say" heading: star average,
   review count and a line of context, on one row until the phone breaks it. */
.review-bar {
  padding: 0 0 var(--s-l);
}

.review-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2xs) var(--s-s);
}

/* The elevated pill. White on the cream page so it is spotted at a glance,
   and the same rounded shape as the floating navbar so it reads as native. */
.review-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3xs);
  padding: 0.8rem 1.5rem;
  background: var(--white);
  border-radius: 999px;
  box-shadow: var(--shadow-card-soft);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.25s var(--ease-out-quart), box-shadow 0.25s var(--ease-out-quart);
}

a.review-pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.review-pill .stars {
  margin: 0;
  font-size: 1rem;
}

.review-pill__score {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1;
}

.review-pill__meta {
  font-size: 0.95rem;
  color: var(--muted);
}

@media (max-width: 520px) {
  .review-pill {
    padding: 0.7rem 1.1rem;
    gap: 0.4rem;
  }
  .review-pill .stars { font-size: 0.85rem; letter-spacing: 0.1em; }
  .review-pill__score { font-size: 1.1rem; }
  .review-pill__meta { font-size: 0.85rem; }
}

/* A pasted widget brings its own look, so this only gives it the same width and
   left-aligns it: the section itself is centred, which would centre the
   widget's own text too. */
.reviews-embed {
  width: 100%;
  text-align: left;
}

.testimonials {
  position: relative;
  width: 100%;
  padding: var(--s-3xs);
  border-radius: var(--s-m);
  background: var(--bg-02);
  overflow: hidden;
}

/* pan-y keeps the page scrolling vertically while horizontal drags are ours */
.testimonial-viewport { overflow: hidden; touch-action: pan-y; }

.testimonial-track {
  display: flex;
  transition: transform var(--t-slow) var(--ease-out-quart);
}

.testimonial {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-l);
  padding: var(--s-xl);
  border-radius: var(--s-s);
  background: var(--white);
  border: 1px solid var(--n-04);
}

.quote-mark {
  font-family: var(--font-heading);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--accent-deep);
}

/* Same gold as the quote mark above it, which sits on this same panel. */
.stars {
  margin: var(--s-2xs) 0;
  font-size: 1rem;
  letter-spacing: 0.16em;
  color: var(--star);
}

.testimonial blockquote {
  margin: 0;
  font-size: var(--body-l);
  line-height: var(--lh-l);
  color: var(--muted);
}

.testimonial-profile {
  display: flex;
  align-items: center;
  gap: var(--s-2xs);
}

.testimonial-profile .avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-heading);
}

.slider-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2xs);
  padding: var(--s-2xs) var(--s-s) var(--s-4xs);
}

.slider-dots { display: flex; gap: var(--s-4xs); }

.slider-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--n-06);
  cursor: pointer;
  transition: background-color var(--t), width var(--t);
}

.slider-dot.is-on {
  width: 22px;
  border-radius: var(--s-xl);
  background: var(--accent);
}

.slider-arrows { display: flex; gap: var(--s-4xs); }

.slider-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--n-05);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t);
}

.slider-arrow:hover {
  background: var(--white);
  border-color: var(--accent);
  color: var(--accent);
}

/* --- careers, and the application page --------------------------------------- */
.careers-layout {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2xl);
  width: 100%;
}

.careers-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-m);
  width: 48%;
}

.careers-points {
  display: flex;
  flex-direction: column;
  gap: var(--s-2xs);
  width: 46%;
}

.careers-point {
  padding: var(--s-s) var(--s-m);
  border-radius: var(--s-m);
  background: var(--bg-02);
  border: 1px solid var(--n-04);
}

.careers-point p { margin-top: var(--s-4xs); }

/* the /apply page */
/* the floating navbar sits over the top of the page, so clear it */
.apply-section { padding-top: calc(var(--s-5xl) + var(--s-2xl)); }

.apply-layout {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2xl);
  width: 100%;
}

.apply-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-m);
  width: 42%;
  position: sticky;
  top: var(--s-5xl);
  align-self: flex-start;
}

.apply-intro a { color: var(--accent); text-decoration: underline; }

.apply-card {
  width: 54%;
  padding: var(--s-l);
  border-radius: var(--s-l);
  background: var(--white);
  border: 1px solid var(--n-04);
  box-shadow: var(--shadow-card-soft);
}

.apply-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-4xs);
  margin-bottom: var(--s-s);
}

.apply-field label { font-size: var(--body-s); color: var(--muted); }

.apply-field input,
.apply-field textarea {
  width: 100%;
  padding: var(--s-3xs) var(--s-s);
  border: 1px solid var(--n-05);
  border-radius: var(--s-m);
  background: var(--white);
  font: inherit;
  color: var(--ink);
  transition: border-color var(--t), box-shadow var(--t);
}

.apply-field textarea {
  border-radius: var(--s-s);
  resize: vertical;
  min-height: 7rem;
}

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

/* --- the payment modal ----------------------------------------------------- */
.pay-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--s-s);
  background: #1a1a1acc;
  backdrop-filter: blur(4px);
  animation: pay-fade var(--t) var(--ease-out-quart);
}

/* Stripe's form is its own white card, so the sheet is white too and sits
   flush around it. Anything else reads as a card inside a card. */
.pay-modal__sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  max-height: min(84vh, 780px);
  border-radius: var(--s-m);
  background: var(--white);
  box-shadow: 0 24px 70px #00000047;
  overflow: hidden;
  animation: pay-rise var(--t-slow) var(--ease-out-quart);
}

/* a slim bar holding only the close button, so it never covers Stripe's
   own TEST MODE ribbon */
.pay-modal__head {
  display: flex;
  justify-content: flex-end;
  padding: var(--s-3xs) var(--s-3xs) 0;
}

.pay-modal__close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #00000008;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--t), color var(--t);
}

.pay-modal__close:hover { background: #0000000f; color: var(--ink); }

.pay-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--s-3xs) var(--s-3xs);
}

@keyframes pay-fade { from { opacity: 0; } }
@keyframes pay-rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } }

@media (max-width: 560px) {
  .pay-modal { padding: 0; place-items: end stretch; }
  .pay-modal__sheet {
    width: 100%;
    max-height: 94vh;
    border-radius: var(--s-m) var(--s-m) 0 0;
  }
}

.amount-wrap { position: relative; }

.amount-wrap .amount-sign {
  position: absolute;
  left: var(--s-s);
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
}

.amount-wrap input { padding-left: calc(var(--s-s) + 0.85em); font-size: var(--body-l); }

.apply-note { margin-top: var(--s-3xs); color: var(--muted); min-height: 1.2em; }
.apply-note.is-bad { color: var(--bad); }

.apply-done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2xs);
}

@media (max-width: 991px) {
  .careers-layout,
  .apply-layout { flex-direction: column; }
  .careers-intro,
  .careers-points,
  .apply-intro,
  .apply-card { width: 100%; }
  .apply-intro { position: static; }
  .apply-card { padding: var(--s-m); }
}

/* --- gallery --------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-3xs);
  width: 100%;
  padding: var(--s-3xs);
  border-radius: var(--s-m);
  background: var(--bg-02);
}

.gallery__item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--s-xs);
  overflow: clip;
  cursor: zoom-in;
  background: var(--bg-03);
}

.gallery__item:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

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

.gallery__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-l) var(--s-2xs) var(--s-2xs);
  background: linear-gradient(transparent, var(--overlay-03));
  color: var(--white);
  font-size: var(--body-s);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t), transform var(--t);
}

.gallery__item:hover .gallery__cap {
  opacity: 1;
  transform: none;
}

.gallery__tag {
  display: inline-block;
  margin-bottom: var(--s-4xs);
  padding: 1px 8px;
  border-radius: var(--s-xl);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.72rem;
}

.empty-note {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  padding: var(--s-3xl) var(--s-s);
  border: 1px dashed var(--n-05);
  border-radius: var(--s-xs);
  color: var(--muted);
  text-align: center;
  font-size: var(--body-s);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--s-l);
  background: var(--overlay-03);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t);
}

.lightbox.is-open { opacity: 1; pointer-events: auto; }

.lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 84vh;
  border-radius: var(--s-s);
  transform: scale(0.97);
  transition: transform var(--t);
}

.lightbox.is-open img { transform: scale(1); }

.lightbox__close {
  position: absolute;
  top: var(--s-s);
  right: var(--s-s);
  width: 44px;
  height: 44px;
  border: 1px solid var(--white-20);
  border-radius: 50%;
  background: var(--white-10);
  color: var(--white);
  font-size: 20px;
  cursor: pointer;
  transition: background-color var(--t), transform var(--t);
}

.lightbox__close:hover { background: var(--white-20); transform: rotate(90deg); }

/* --- hours and slots ------------------------------------------------------- */
.hours-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: var(--s-3xs);
  width: 100%;
  padding: var(--s-3xs);
  border-radius: var(--s-m);
  background: var(--bg-02);
}

.hours-card,
.slots-card {
  padding: var(--s-l);
  border-radius: var(--s-s);
  background: var(--white);
  border: 1px solid var(--n-04);
}

.hours {
  list-style: none;
  margin: var(--s-s) 0 0;
  padding: 0;
}

.hours li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-s);
  padding: var(--s-2xs) var(--s-3xs);
  border-bottom: 1px solid var(--n-04);
  font-size: var(--body);
}

.hours li:last-child { border-bottom: 0; }

.hours li[data-today='true'] {
  background: var(--accent-soft);
  border-radius: var(--s-3xs);
  border-bottom-color: transparent;
}

.hours li[data-today='true'] .hours__day::after {
  content: 'today';
  margin-left: var(--s-3xs);
  padding: 1px 7px;
  border-radius: var(--s-xl);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.68rem;
  vertical-align: 2px;
}

.hours__value { color: var(--muted); font-variant-numeric: tabular-nums; }
.hours li[data-closed='true'] .hours__value { color: var(--n-08); }

.slot-day {
  padding: var(--s-2xs) 0;
  border-bottom: 1px solid var(--n-04);
}

.slot-day:last-child { border-bottom: 0; }

.slot-day__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3xs);
  font-size: var(--body-s);
  color: var(--muted);
}

.slot-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4xs);
  margin-top: var(--s-3xs);
}

.slot-pill {
  padding: var(--s-4xs) var(--s-2xs);
  border-radius: var(--s-xl);
  border: 1px solid var(--accent);
  color: var(--accent-deep);
  font-size: var(--body-s);
  font-variant-numeric: tabular-nums;
}

.slot-pill[data-bookable='false'] {
  border-color: var(--n-05);
  color: var(--n-08);
  text-decoration: line-through;
}

@media (max-width: 991px) {
  .hours-layout { grid-template-columns: 1fr; }
}

/* --- service area pills ---------------------------------------------------- */
.cities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4xs);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.cities li {
  padding: var(--s-4xs) var(--s-2xs);
  border-radius: var(--s-xl);
  border: 1px solid var(--n-05);
  background: var(--white-40);
  color: var(--muted);
  font-size: var(--body-s);
  transition: background-color var(--t), color var(--t), border-color var(--t);
}

.cities li:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

/* --- closing panel --------------------------------------------------------- */
/* --- footer ---------------------------------------------------------------- */
.footer {
  width: 100%;
  margin-top: var(--s-xl);
  padding: var(--s-3xl) 0 var(--s-2xl);
  border-top: 1px solid var(--n-04);
  background: var(--bg-02);
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: var(--s-3xl);
  width: 100%;
}

.footer-info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-l);
  width: 100%;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--s-s);
  max-width: 320px;
}

.footer-nav-block {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-xl);
}

.footer-nav-menu {
  display: flex;
  flex-direction: column;
  gap: var(--s-4xs);
}

.footer-nav-menu a,
.footer-nav-menu span {
  padding: var(--s-4xs) 0;
  color: var(--muted);
  font-size: var(--body);
  transition: color var(--t), padding-left var(--t);
}

.footer-nav-menu a:hover {
  color: var(--accent);
  padding-left: var(--s-4xs);
}

.footer-copyrights {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2xs) var(--s-s);
  width: 100%;
  padding-top: var(--s-s);
  border-top: 1px solid var(--n-05);
  color: var(--muted);
  font-size: var(--body-s);
}

@media (max-width: 991px) {
  .footer-info { flex-direction: column; }
  .footer-nav-block { justify-content: flex-start; flex-wrap: wrap; }
}

/* --- responsive hero / nav ------------------------------------------------- */
@media (max-width: 991px) {
  /* one column: the text, then the picture; the headline wraps freely again */
  .hero-text h1 { font-size: var(--h1); }
  .hero-text h1 .lead { white-space: normal; }
  .hero-section .container { padding-inline: var(--container-pad); }
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--s-xl); }
  .hero-photo { border-radius: 22px; }
}

@media (max-width: 767px) {
  /* the card wraps onto more lines down here, so the panel needs to be deeper
     and the card tucked closer into the corner to stay inside it */
  /* The gallery's auto-fill tracks have a 220px floor, and at this width only
     one of them fits. The first photo spans two columns, so the grid invents a
     second track and becomes 448px wide inside a 327px column, which the
     section then clips: the photos ran off the right of the screen.
     Two fluid columns instead, and minmax(0,1fr) lets them shrink below the
     220px floor rather than forcing the overflow back. */
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .navbar {
    flex-wrap: wrap;
    column-gap: var(--s-3xs);
    row-gap: 0;
    padding-inline: var(--s-xs);
    border-bottom-color: var(--n-04);
  }

  .brand { min-width: 0; margin-right: auto; }
  .nav-burger { display: block; }
  .nav-phone { display: none; }

  .nav-menu {
    order: 4;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-height: 0;
    margin: 0;
    padding-block: 0;
    overflow: hidden;
    transition: max-height var(--t-slow) var(--ease-out-quart), padding var(--t), margin-top var(--t);
  }

  .nav-menu.is-open {
    max-height: 360px;
    margin-top: var(--s-3xs);
    padding-block: var(--s-3xs);
    border-top: 1px solid var(--n-04);
  }

  .navbar-link { padding-block: var(--s-3xs); font-size: var(--body); }

  .nav-cta { order: 3; }
  .nav-cta .button { height: 38px; padding-left: var(--s-2xs); font-size: var(--body-s); }
  .nav-cta .button .button__icon { width: 26px; height: 26px; }
  .hero-section { padding-top: var(--s-3xl); }
}

/* The permission tick on the review page. Laid out as a row so the box sits
   beside the sentence rather than above it. */
.apply-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3xs);
  margin: var(--s-s) 0;
  font-size: var(--body-s);
  line-height: var(--lh-s, 1.5);
  color: var(--muted);
  cursor: pointer;
}

.apply-consent input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.1rem 0 0;
  flex: none;
}

/* The honeypot on the apply and review forms. Taken out of the page rather
   than hidden with display:none, because some bots skip anything that is
   explicitly hidden and the whole point is that they fill it in. aria-hidden
   and tabindex="-1" on the markup keep it away from screen readers and the
   tab order, so nobody who is really filling the form can reach it. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A running offer. Photo beside the words on a wide screen, stacked on a
   phone, and nothing at all on the page when no promo is live. */
.promo-band { padding-top: 0; }

.promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-m);
  align-items: center;
  padding: var(--s-m);
  border-radius: var(--s-m);
  background: var(--bg-02);
  box-shadow: var(--shadow-card-soft);
}

.promo__photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--s-s);
}

.promo__text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.promo__text h2 { margin: 0; }
.promo__text p { margin: 0; }

/* No photo on the promo, so the words take the whole band rather than
   leaving an empty column beside them. */
.promo:not(:has(.promo__photo)) { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 760px) {
  .promo { grid-template-columns: minmax(0, 1fr); }
  .promo__photo img { max-height: 220px; }
}

/* The two legal links beside the copyright line. Quiet on purpose: they have
   to be findable, not prominent. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-s);
}

.footer-legal a {
  color: inherit;
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-legal a:hover { opacity: 1; }

/* Prices on a city page. A list rather than a table: it has to read on a
   phone, where a table either squashes or scrolls sideways. */
.price-list {
  list-style: none;
  margin: var(--s-s) 0 var(--s-s);
  padding: 0;
  max-width: 44rem;
}

.price-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-s);
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--overlay-01);
}

.price-list__row:last-child { border-bottom: 0; }
.price-list__what { color: var(--ink-soft); }
.price-list__amount { font-family: var(--font-heading); font-size: 19px; white-space: nowrap; }

/* The questions. Collapsed by default so the page is not a wall of text, but
   every answer is in the HTML whether or not anyone opens one, which is what
   a crawler and an assistant read. */
.faq { max-width: 48rem; }

.faq__item {
  border-bottom: 1px solid var(--overlay-01);
  padding: 0.95rem 0;
}

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

.faq__q {
  font-family: var(--font-heading);
  font-size: 17px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--s-s);
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: '+'; opacity: 0.5; }
.faq__item[open] .faq__q::after { content: '\2212'; }
.faq__a { margin: 0.6rem 0 0; color: var(--ink-soft); line-height: var(--lh-m); }

/* --- the four facts ------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3xs);
  width: 100%;
  padding: var(--s-3xs);
  border-radius: var(--s-m);
  background: var(--bg-02);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-3xs);
  padding: var(--s-m) var(--s-l);
  border-radius: var(--s-s);
  background: var(--white);
  border: 1px solid var(--n-04);
}

.stat__value {
  font-family: var(--font-heading);
  font-size: var(--h2);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
}

.stat__label {
  color: var(--muted);
  font-size: var(--body-s);
}

@media (max-width: 991px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- the portfolio ---------------------------------------------------------- */
.work-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-m);
  width: 100%;
}

/* an odd count: the first card takes the whole row, as the lead project */
.work-list > .work:first-child:nth-last-child(odd) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
}

.work-list > .work:first-child:nth-last-child(odd) .work__thumb { aspect-ratio: auto; min-height: 360px; }

.work {
  display: flex;
  flex-direction: column;
  border-radius: var(--s-m);
  background: var(--white);
  border: 1px solid var(--n-04);
  overflow: clip;
  transition: box-shadow var(--t-slow), border-color var(--t), transform var(--t-slow);
}

.work:hover {
  box-shadow: var(--shadow-card);
  border-color: var(--accent-soft);
  transform: translateY(-3px);
}

.work__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: clip;
  background: var(--tint);
}

.work__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.work:hover .work__img { transform: scale(1.03); }

/* no picture yet: the accent tint, a dark block, and the initial in blue */
.work__panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(70% 60% at 85% 0%, #ffffffb3 0%, transparent 60%),
    var(--tint);
}

.work__panel span {
  display: grid;
  place-items: center;
  width: 38%;
  aspect-ratio: 1;
  border-radius: var(--s-s);
  background: var(--panel);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  box-shadow: 0 24px 48px #0b1a3a40;
  transition: transform var(--t-slow);
}

.work:hover .work__panel span { transform: translateY(-4px) rotate(-2deg); }

.work__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2xs);
  padding: var(--s-m) var(--s-l) var(--s-l);
}

.work__text p { color: var(--muted); }

.work__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.work__tags li {
  padding: 0.2rem 0.6rem;
  border-radius: var(--s-xl);
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.work__link {
  margin-top: var(--s-3xs);
  color: var(--accent);
  font-weight: 600;
  transition: color var(--t), padding-left var(--t);
}

.work__link:hover { color: var(--accent-deep); padding-left: var(--s-4xs); }

@media (max-width: 991px) {
  .work-list { grid-template-columns: minmax(0, 1fr); }
  .work-list > .work:first-child:nth-last-child(odd) { grid-template-columns: minmax(0, 1fr); }
  .work-list > .work:first-child:nth-last-child(odd) .work__thumb { aspect-ratio: 16 / 10; min-height: 0; }
}

/* --- closing band ------------------------------------------------------------- */
.closing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2xl);
  width: 100%;
  padding: var(--s-3xl) var(--s-2xl);
  border-radius: var(--s-l);
  background:
    radial-gradient(60% 80% at 100% 0%, #ffffff2e 0%, transparent 60%),
    var(--accent);
  color: var(--on-accent);
}

.closing__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-s);
  max-width: 680px;
}

.closing__text p { color: #ffffffd9; }
.closing .button { flex: none; }

@media (max-width: 991px) {
  .closing { flex-direction: column; align-items: flex-start; padding: var(--s-2xl) var(--s-m); }
}



/* --- our services: black, headline left, list right ------------------------- */
.services-dark {
  background: var(--panel);
  color: var(--white);
  --fg: var(--white);
  --fg-muted: var(--white-80);
  padding-block: var(--s-5xl);
  margin-block: var(--s-l);
}

.services-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--s-3xl) var(--s-5xl);
  width: 100%;
  align-items: start;
}

.services-left {
  position: sticky;
  top: calc(var(--s-5xl) + var(--s-l));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-xl);
}

.services-eyebrow {
  color: var(--white-60);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.services-left h2 {
  font-size: clamp(2.5rem, 4.6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
  max-width: 11ch;
}

.service-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3xl);
}

.service-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2xs);
}

.service-row__name {
  color: var(--accent-bright);
  font-size: clamp(1.5rem, 2.3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.service-row__blurb {
  color: var(--white);
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.services-dark .empty-note { color: var(--white-60); border-color: var(--white-20); }

@media (max-width: 991px) {
  .services-dark { padding-block: var(--s-3xl); margin-block: var(--s-m); }
  .services-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-2xl); }
  .services-left { position: static; }
  .services-left h2 { max-width: none; }
  .service-list { gap: var(--s-2xl); }
}

/* The process header's line fits on one row; the 600px measure the other
   centred headers use broke it after "two". */
#process .section-header { max-width: 880px; }