/* DIAZ General Contractor LLC — styles
   Implemented from the Claude Design project (v2). The design expressed
   everything as inline styles plus JS width checks; here it is classes, CSS
   custom properties and media queries, so hover/focus states and breakpoints
   are real CSS and correct before JS runs. */

/* ---------------------------------------------------------------- tokens -- */
:root {
  --ink: #1c1b18;
  --paper: #f1eee7;
  --card: #fbf9f4;
  --brick: #b3261e;
  --deep: #9a2019;
  --on-accent: #f7f3ec;
  --muted: #4a463f;
  --muted-2: #5e5a52;
  --dark-muted: #bdb6a8;
  --line: #d6d0c4;
  --line-2: #e2ddd2;
  /* Darkened from the design's #BDB6A8, which was 2.02:1 on white — a form
     control's boundary is a UI component under WCAG 1.4.11 and needs 3.0.
     #8c8578 is 3.66:1 and stays in the same warm-grey family. */
  --field-line: #8c8578;

  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Focus ring colour. No single value clears 3.0 on every surface this site
     has, so dark/brick areas override it. Audited per surface. */
  --ring: var(--ink);

  --wrap: 1240px;
  --gut: 20px;
}

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

html {
  scroll-behavior: smooth;
  /* The sticky header would otherwise cover the heading of a jumped-to section. */
  scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(56px, 9vw, 120px);
  line-height: 0.88;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(44px, 6vw, 80px);
}

h3 {
  font-size: 34px;
  line-height: 1;
}

p {
  margin: 0;
}

a {
  color: var(--deep);
  text-decoration: none;
}

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

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

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

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

.on-dark {
  --ring: var(--on-accent);
}

.on-dark-brick {
  --ring: var(--on-accent);
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  font-weight: 600;
  /* When revealed this sits over the first banner — brick while the promo shows,
     ink once dismissed. The root ink ring is 2.63:1 and 1.00:1 against those, so
     both the ring and a border come from --on-accent: 5.91:1 and 15.57:1. */
  --ring: var(--on-accent);
  border: 2px solid var(--on-accent);
}

.skip:focus {
  left: 0;
}

.eyebrow {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--deep);
  margin-bottom: 20px;
}

.lede {
  font-size: clamp(17px, 1.6vw, 20px);
  max-width: 520px;
  margin: 28px 0 36px;
  color: var(--muted);
  text-wrap: pretty;
}

.prose {
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 560px;
  margin-bottom: 18px;
  text-wrap: pretty;
}

.note {
  font-size: 13px;
  color: var(--muted-2);
  line-height: 1.4;
}

/* A phone number split across two lines is unreadable. Solved here rather than
   with U+2011 non-breaking hyphens in the markup, because those do not paste
   cleanly into a dialer — and the number existing to be dialled is the point. */
.tel {
  white-space: nowrap;
}

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 24px;
  font-weight: 600;
  font-size: 17px;
  border: 0;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s, color 0.15s;
}

.btn-sm {
  padding: 9px 14px;
  font-size: 14px;
}

.btn-block {
  width: 100%;
  padding: 18px;
}

.btn-brick {
  background: var(--brick);
  color: var(--on-accent);
}

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

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

.btn-dark:hover {
  background: var(--brick);
  color: var(--on-accent);
}

.btn-ghost {
  border: 2px solid var(--ink);
  padding: 15px 22px;
  color: var(--ink);
}

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

.btn-light {
  background: var(--on-accent);
  color: var(--ink);
}

.btn-light:hover {
  background: var(--ink);
  color: var(--on-accent);
}

.btn-outline {
  border: 2px solid var(--on-accent);
  padding: 13px 20px;
  color: var(--on-accent);
}

.btn-outline:hover {
  background: var(--on-accent);
  color: var(--ink);
}

/* ----------------------------------------------------------------- promo -- */
.promo {
  background: var(--brick);
  color: var(--on-accent);
}

.promo[hidden] {
  display: none;
}

.promo-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.promo-msg {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  flex: 1 1 300px;
  font-size: 15px;
  font-weight: 500;
}

.promo-tag {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1.5px solid var(--on-accent);
  padding: 3px 8px;
}

.promo-act {
  display: flex;
  align-items: center;
  gap: 8px;
}

.promo-x {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  color: var(--on-accent);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.promo-x:hover {
  background: rgb(0 0 0 / 0.18);
}

/* ----------------------------------------------------------------- strip -- */
.strip {
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.strip-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.strip-long,
.strip-short {
  text-transform: uppercase;
}

.strip-mail {
  color: var(--paper);
}

.strip-mail:hover {
  color: var(--dark-muted);
}

.strip-short {
  display: none;
}

@media (width < 1240px) {
  .strip-long {
    display: none;
  }
  .strip-short {
    display: inline;
  }
  .strip-mail {
    display: none;
  }
}

/* ---------------------------------------------------------------- header -- */
.head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.head-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
  /* Required for WCAG 1.4.10 at 320px. Removing the brand's `nowrap` was not
     enough on its own: `.head-act` is a fixed 72px select plus a 64px-min
     summary plus gaps, so brand + controls still exceed the 280px of content
     box. Wrapping lets the controls drop to a second line instead of forcing
     the page to scroll sideways — which at 320px could put the Menu button
     off-screen and make the nav unreachable. Preferred over hiding the brand
     name, which would cost the business its own name on the smallest phones. */
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}

.brand-mark {
  background: var(--brick);
  color: var(--on-accent);
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  /* Top-heavy on purpose: the roof eats the top 25% of the box, so the
     letters need clearing below it. At 28px that leaves ~2px between the
     gable's underside and the cap height. */
  padding: 0.5em 0.3em 0.18em;
  letter-spacing: 0.02em;
  /* The house silhouette from the brand identity: flat base, vertical
     shoulders to a quarter of the height, then a peak. Purely visual - the
     text inside is untouched and still read normally. */
  clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 100%, 0 100%);
}

.brand-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* Deliberately NOT white-space: nowrap. It floored this element at its
     min-content width (~173px with the brand mark), which overflowed a 320px
     viewport and could push the Menu button off-screen — WCAG 1.4.10. The
     <br/> in the markup already decides where the name breaks. */
}

.head-act {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-weight: 500;
  font-size: 15px;
}

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

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

.lang {
  position: relative;
  display: flex;
  align-items: center;
}

.lang select {
  appearance: none;
  height: 44px;
  width: 72px;
  border: 2px solid var(--ink);
  background: transparent;
  padding: 0 26px 0 12px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border-radius: 0;
}

.lang::after {
  content: "▼";
  position: absolute;
  right: 10px;
  font-size: 10px;
  pointer-events: none;
}

/* ----------------------------------------------------------- mobile menu -- */
.menu {
  display: none;
}

.menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 64px;
  padding: 0 12px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
}

.menu-btn::-webkit-details-marker {
  display: none;
}

.menu-shut {
  display: none;
}

.menu[open] .menu-open {
  display: none;
}

.menu[open] .menu-shut {
  display: inline;
}

.menu-nav {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.menu-nav a {
  padding: 16px var(--gut);
  border-bottom: 1px solid var(--line-2);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
}

.menu-nav a:last-child {
  border-bottom: 0;
}

.menu-nav a:hover {
  background: var(--card);
  color: var(--deep);
}

@media (width < 1080px) {
  .nav,
  .head-call {
    display: none;
  }
  .menu {
    display: block;
  }
}

/* ------------------------------------------------------------------ hero -- */
.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: end;
  padding-top: clamp(40px, 7vw, 96px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cta .btn {
  flex: 1 1 160px;
}

.hero-media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 620px;
  width: 100%;
}

.hero-badge {
  position: absolute;
  right: 16px;
  top: 16px;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 16px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
}

@media (width < 760px) {
  .hero-media {
    aspect-ratio: 4 / 3;
  }
}

/* ------------------------------------------------- image placeholders ----- */
/* Every .slot is a photo the customer has not supplied yet. The note is real
   text, not an aria-label on an empty box, so it reads the same to a screen
   reader as it looks on screen. Replacing one means swapping the whole .slot
   for <img src alt width height>; see plan.md for sizes. */
.slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: repeating-linear-gradient(
    135deg,
    var(--line-2) 0 10px,
    var(--card) 10px 20px
  );
  border: 1px dashed var(--field-line);
}

.slot-note {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted-2);
  max-width: 22ch;
}

/* Slots that are their own grid/flow box rather than filling a positioned
   parent need to create their own aspect instead of stretching to inset:0. */
.slot-sq,
.slot-card {
  position: relative;
  inset: auto;
}

.slot-sq {
  aspect-ratio: 1 / 1;
}

.slot-card {
  aspect-ratio: 3 / 2;
}

/* --------------------------------------------------------------- credits -- */
.creds {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.creds-in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1px;
  background: var(--line);
  padding: 0;
}

.cred {
  padding: 24px var(--gut);
  background: var(--paper);
}

.cred-t {
  font-family: var(--display);
  font-weight: 800;
  font-size: 40px;
  text-transform: uppercase;
  line-height: 1;
}

.cred-d {
  color: var(--muted-2);
  margin-top: 6px;
  font-size: 15px;
}

/* -------------------------------------------------------------- sections -- */
.sect {
  padding-top: clamp(64px, 9vw, 120px);
  padding-bottom: clamp(64px, 9vw, 120px);
}

.sect-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 48px;
}

.sect-sub {
  max-width: 420px;
  color: var(--muted);
}

.on-dark .sect-sub {
  color: var(--dark-muted);
}

/* ----------------------------------------------------------------- cards -- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 24px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.card-body {
  padding: 28px 24px 32px;
}

.card h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}

.card-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--deep);
}

.svc {
  list-style: none;
  margin: 0;
  padding: 0;
}

.svc li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line-2);
  font-weight: 500;
}

.svc-arrow {
  color: var(--deep);
}

/* ------------------------------------------------------------------ work -- */
.work {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(64px, 9vw, 120px) 0;
}

.grid4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

.ba-block {
  margin-bottom: 16px;
}

.ba {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: #2a2925;
}

.ba-layer {
  position: absolute;
  inset: 0;
}

/* --ba is set by app.js from the range input; 50% is the no-JS resting state. */
.ba-before {
  clip-path: inset(0 calc(100% - var(--ba, 50%)) 0 0);
}

.ba-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba, 50%);
  width: 3px;
  margin-left: -1.5px;
  background: var(--on-accent);
  pointer-events: none;
}

.ba-grip {
  position: absolute;
  top: 50%;
  left: var(--ba, 50%);
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  background: var(--brick);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  pointer-events: none;
  /* Against the dark section the brick disc is only 2.6:1, so the ring is what
     makes the control's position discernible (WCAG 1.4.11). */
  outline: 2px solid var(--on-accent);
}

.ba-tag {
  position: absolute;
  top: 16px;
  padding: 6px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

.ba-tag-b {
  left: 16px;
  background: var(--ink);
  color: var(--paper);
}

.ba-tag-a {
  right: 16px;
  background: var(--brick);
  color: var(--on-accent);
}

.ba-ctl {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0 8px;
}

.ba-label {
  font-size: 14px;
  color: var(--dark-muted);
  white-space: nowrap;
}

#ba-range {
  flex: 1;
  height: 32px;
  cursor: ew-resize;
  background: transparent;
  appearance: none;
}

/* The design used accent-color:#B3261E, which is 2.6:1 on this section's dark
   background — below the 3.0 a control needs. Styled explicitly so the thumb
   carries a paper ring and the track is visible. */
#ba-range::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--dark-muted);
}

#ba-range::-moz-range-track {
  height: 4px;
  background: var(--dark-muted);
}

#ba-range::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border: 2px solid var(--on-accent);
  border-radius: 50%;
  background: var(--brick);
}

#ba-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 2px solid var(--on-accent);
  border-radius: 50%;
  background: var(--brick);
}

@media (width < 760px) {
  .ba {
    aspect-ratio: 4 / 3;
  }
  .ba-ctl {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

/* ----------------------------------------------------------------- about -- */
.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.about-media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 480px;
  width: 100%;
}

.about h2 {
  margin-bottom: 28px;
}

/* ------------------------------------------------------------------ area -- */
.area {
  border-top: 2px solid var(--ink);
}

.area-in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  padding-top: clamp(64px, 9vw, 120px);
  padding-bottom: clamp(64px, 9vw, 120px);
}

.area h2 {
  margin-bottom: 20px;
}

.area .sect-sub {
  margin-bottom: 28px;
}

.cities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}

.cities li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-weight: 500;
  font-size: 16px;
}

.map-fig {
  margin: 0;
}

.map {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  border: 2px solid var(--ink);
  background: var(--card);
}

/* Group opacity, not per-shape fill-opacity: the discs overlap each other and
   the blob, and per-shape alpha would compound into darker patches. */
.map-area {
  opacity: 0.14;
}

.map-area path {
  fill: var(--brick);
  stroke: var(--brick);
}

.map-city {
  opacity: 0.38;
}

.map-city circle {
  fill: var(--brick);
  stroke: var(--deep);
  stroke-width: 1.5;
}

.map-dot circle {
  fill: var(--ink);
}

.map-label text {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--ink);
  text-anchor: middle;
}

.map-chrome {
  fill: var(--muted-2);
  stroke: var(--muted-2);
}

.map-north,
.map-bar {
  stroke-width: 2;
}

.map-north {
  fill: var(--muted-2);
}

.map-bar {
  fill: none;
}

.map-north-label,
.map-bar-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  fill: var(--muted-2);
  stroke: none;
  text-anchor: middle;
}

.map-cap {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted-2);
}

/* --------------------------------------------------------------- contact -- */
.contact {
  background: var(--brick);
  color: var(--on-accent);
  padding: clamp(64px, 9vw, 120px) 0;
}

.contact-in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 6vw, 80px);
}

.contact h2 {
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.88;
  margin-bottom: 28px;
}

.contact-sub {
  font-size: 18px;
  margin-bottom: 36px;
  max-width: 460px;
}

.contact-tel {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1;
  color: var(--on-accent);
  margin-bottom: 20px;
}

.contact-tel:hover {
  color: var(--on-accent);
  /* clamp(44px…) display type is large text, so 3.92:1 clears the 3.0 it needs. */
  opacity: 0.75;
}

.contact-mail:hover {
  color: var(--on-accent);
  /* 20px/600 is NOT large text under WCAG (large = 18pt, or 14pt bold), so this
     needs 4.5:1. Composited over brick, 0.75 gives 3.92:1 and 0.85 gives 4.64. */
  opacity: 0.85;
}

.contact-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.contact-mail {
  font-size: 20px;
  font-weight: 600;
  color: var(--on-accent);
  border-bottom: 2px solid var(--on-accent);
}

/* ------------------------------------------------------------------ form -- */
.form {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(24px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* The form sits on brick; its own surface is paper, so the ring reverts. */
  --ring: var(--ink);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}

.field input,
.field select,
.field textarea {
  padding: 14px;
  border: 1px solid var(--field-line);
  background: #fff;
  font-size: 16px;
  font-weight: 400;
  border-radius: 0;
}

.field textarea {
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--ink);
}

.photos {
  gap: 10px;
}

.field-label {
  font-weight: 600;
  font-size: 14px;
}

.drop {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  border: 2px dashed var(--field-line);
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--muted);
}

.drop:hover {
  border-color: var(--brick);
  color: var(--deep);
}

/* Visually hidden but still focusable, so the label is keyboard-reachable. */
.drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.drop:focus-within {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

.thumbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}

.thumbs li {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--line-2);
}

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

.thumb-x {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 26px;
  height: 26px;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.thumb-x:hover {
  background: var(--brick);
}

/* ---------------------------------------------------------------- footer -- */
.foot {
  background: var(--ink);
  color: var(--dark-muted);
  padding: 40px 0;
}

.foot-in {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  justify-content: space-between;
  font-size: 14px;
}

.foot strong {
  color: var(--paper);
  font-weight: 600;
}

.foot a {
  color: var(--paper);
  /* The footer's body text is --dark-muted, so colour alone separates this link
     at 1.74:1 where F73 wants 3.0 — and no colour in the palette clears it
     against that text. The underline is the fix, not the colour. */
  text-decoration: underline;
}

/* Was --dark-muted, which is the footer's own body colour: hovering made the
   link visually vanish (1.00:1 against the surrounding text). */
.foot a:hover {
  color: var(--on-accent);
}

/* ------------------------------------------------------------ sticky bar -- */
.sticky {
  display: none;
}

@media (width < 760px) {
  .sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-top: 2px solid var(--ink);
  }

  .sticky a {
    text-align: center;
    padding: 16px 8px;
    font-weight: 600;
  }

  /* Each cell is a different surface, so each sets its own ring colour. */
  .sticky-call {
    background: var(--brick);
    color: var(--on-accent);
    --ring: var(--on-accent);
  }

  .sticky-text {
    background: var(--paper);
    color: var(--ink);
    --ring: var(--ink);
  }

  .sticky-est {
    background: var(--ink);
    color: var(--paper);
    --ring: var(--on-accent);
  }

  /* Clear the bar so it never covers the footer's last line. */
  .foot {
    padding-bottom: 96px;
  }
}

/* The before/after drag surface. The input covers the whole photo so the image
   itself is draggable; a range input's track accepts a press anywhere along it
   and continues as a drag, so this needs no pointer handlers. touch-action is
   pan-y deliberately: without it a full-height overlay would swallow vertical
   swipes and the page would stop scrolling on mobile. */
.ba-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
  touch-action: pan-y;
}
.ba-input::-webkit-slider-runnable-track,
.ba-input::-moz-range-track {
  background: transparent;
  border: 0;
}
/* Transparent, but sized: the thumb is the grab target, and .ba-grip is what
   the eye follows. 48px matches the grip and clears the 44px touch minimum. */
.ba-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 0;
  cursor: ew-resize;
}
.ba-input::-moz-range-thumb {
  width: 48px;
  height: 48px;
  background: transparent;
  border: 0;
  cursor: ew-resize;
}
/* The control is invisible, so focus has to land somewhere visible (WCAG 2.4.7).
   Inset so the ring is not clipped by the container's overflow:hidden. */
.ba-input:focus-visible {
  outline: 3px solid var(--on-accent);
  outline-offset: -3px;
}