/* To The Bone Tattoo Studio, Pg. de Valldaura - site stylesheet.
   The only stylesheet written by hand for this site. ds.css, booking.css and
   media.css are shared and load AFTER this file, so anything that has to win
   against them is written at a higher specificity and says why in a comment.

   Design read: a walk-in-friendly first presence for a combined tattoo and
   piercing studio, with a warm, hand-pinned signwriting language, leaning
   toward a deep green shopfront ground with gold block lettering.

   The ground is the colour of their own shopfront frame. The gold is the
   outlined block TATTOO in their own window. The pink neon script from that
   same window is deliberately NOT used as a colour here: salmon error text
   beside a pink accent is confusable, and the pink is more powerful left
   glowing inside the photographs.

   LAYOUT IDEA: pinned sheets. Panels of visibly unequal width sit at small
   offsets from one another, the way the flash sheets are pinned on the cork
   board in their window. Nothing on this page is three equal cards.

   COLOUR DISCIPLINE. Three sites in this set carry a green or a teal. This is
   the only one where green is the GROUND. There is no pale green panel here
   and the gold never drifts toward olive. There is no lavender anywhere: the
   lilac in the photo set is an artist's sleeve and a machine grip, not a
   wall. */

/* ---------------------------------------------------------------- tokens --
   :root would lose to booking.css and ds.css, which load later and declare on
   :root themselves. html:root is one specificity step higher, so these values
   hold wherever they have to. */
html:root {
  /* Palette. Measured, not estimated. Nothing here is pure black or pure
     white; the darkest value on the page is the CTA label on the gold. */
  --ground: #12352A;       /* deepened shopfront green */
  --panel: #173B2F;        /* the pinned sheet, one step up from the ground */
  --deep: #0E2C23;         /* recessed wells: inputs, photo frames */
  --ink: #F1EBDD;          /* warm bone, 11.26:1 on the ground */
  --muted: #A9BCB0;        /* 6.70:1 on the ground, so it is body-legible */
  --accent: #E8B23F;       /* the gold of their own window, 6.93:1 */
  --accent-ink: #123028;   /* CTA label on the gold, 7.35:1 */

  --bg-2: #0E2C23;         /* read by media.css for photo frames */
  --bg-3: #0E2C23;         /* read by booking.css for input fills */
  --line: #5A8A76;         /* real component boundaries: 3.40:1 on ground */
  --line-soft: #2B5245;    /* decorative hairlines only, never a boundary */

  /* Error text. booking.css sets --bad to #b3261e on a bare :root and swaps
     it to salmon only under prefers-color-scheme: dark. This page is dark
     whatever the system setting is, so the light default would put error text
     at 2.05:1 on this ground for every visitor whose phone is in light mode.
     Pinned here at a specificity that beats a bare :root inside a media
     query. #FF9E8D is 6.71:1 on the ground and 6.18:1 on a panel. */
  --bad: #FF9E8D;

  /* One corner radius system, two steps, held everywhere. By a distance the
     roundest system in this set, which is the fastest way to tell this page
     apart from the other tattoo studios at a glance. */
  --r-s: 14px;
  --r-m: 24px;

  /* Measured, not assumed: .head-row is pinned to a 70px minimum below, so
     this number is true by construction rather than by estimate. The hero
     subtracts it to fill exactly one screen and ds.css uses it to keep a
     focused control from landing under the sticky header. */
  --nav-h: 70px;
  --wrap: 72rem;

  /* Interaction dials, read by ds.css. The quickest settle in the set: this
     is the one page allowed to feel like a person rather than a document. */
  --ds-lift: 3px;
  --ds-dur: 0.18s;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  /* Nothing on this page may cause a sideways scroll at 360px. */
  overflow-x: hidden;
}

h1, h2, h3, .display {
  font-family: "Gabarito", "Manrope", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
}

p { margin: 0; }

a { color: var(--accent); }

img { max-width: 100%; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 3rem);
}

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

/* Icons from assets/social.svg. Always beside a word, never instead of one. */
.si {
  flex: none;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* ---------------------------------------------------------------- reveal --
   The floor under motion.js. If Motion never loads this transition is what
   reveals the page; ds.css switches it off when motion.js takes over. The
   rise is 20px, the largest in the set, and it is justified as welcome: the
   pinned panels come up from below with a little energy. */
.rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.42s cubic-bezier(0.22, 0.75, 0.3, 1),
              transform 0.42s cubic-bezier(0.22, 0.75, 0.3, 1);
}
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--r-s);
  border: 1px solid transparent;
  font: inherit;
  font-family: "Gabarito", "Manrope", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

/* ------------------------------------------------------------------ head -- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ground);
  border-bottom: 1px solid var(--line-soft);
}

/* nowrap is load bearing, not a preference. The header is sticky and the hero
   below it is sized as calc(100dvh - var(--nav-h)); if this row ever wrapped
   to two lines the header would grow past 70px and the hero would no longer
   be exactly one screen. So the row is pinned to one line and the brand is
   the thing that gives way. */
.head-row {
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.6rem;
  flex-wrap: nowrap;
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-decoration: none;
  color: var(--ink);
  margin-inline-end: auto;
  padding-block: 0.15rem;
  min-width: 0;
}
.brand b,
.brand span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand b {
  font-family: "Gabarito", "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.brand span {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.head-nav {
  display: flex;
  gap: 0.25rem;
}
.head-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.7rem;
  border-radius: var(--r-s);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
}
.head-nav a:hover { color: var(--accent); }

.lang {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-s);
}
.lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 11px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.lang a[aria-current="true"] {
  background: var(--panel);
  color: var(--ink);
  font-weight: 700;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: var(--r-s);
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  text-decoration: none;
  font-family: "Gabarito", "Manrope", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
}

/* The header is four things in a row and all four do not fit on a phone, so
   they go in order of what is replaceable.

   First the section links: each one is a section of this same page, reachable
   by scrolling.

   Then the header CTA, below 560px. The language switcher is the one thing
   that cannot be got at any other way, so it is the one thing that stays at
   every width. Losing the header CTA on a phone costs nothing, because the
   hero is sized to exactly one screen and its own "pedir consulta" button is
   therefore on that first screen by construction rather than by luck. */
@media (max-width: 860px) {
  .head-nav { display: none; }
}
@media (max-width: 560px) {
  .nav-cta { display: none; }
}
@media (max-width: 380px) {
  .brand b { font-size: 1.05rem; }
}

/* ------------------------------------------------------------------ hero --
   FAMILY 1. Headline and CTA on flat green, with the shopfront photograph as
   a full-bleed band directly beneath. Type never sits over the photograph:
   the signage in that window is the whole point of the frame and covering it
   would be perverse. Four text elements, headline on two lines at the
   narrowest width, booking CTA above the fold. */
.hero {
  min-height: calc(100dvh - var(--nav-h));
  display: grid;
  grid-template-rows: 1fr auto;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.15rem;
  padding-block: clamp(1.75rem, 5vh, 4rem);
}

.hero h1 {
  font-size: clamp(2.5rem, 2rem + 2.6vw, 4.25rem);
  line-height: 1.06;
  max-width: 14ch;
}

.hero-lede {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  color: var(--ink);
  max-width: 46ch;
}

.hero-where {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  color: var(--muted);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-where span { position: relative; }
.hero-where span + span::before {
  content: "";
  position: absolute;
  inset-inline-start: -0.75rem;
  top: 0.55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.35rem;
}

/* The band is full bleed and clamped, so the hero is exactly one screen tall
   at every size rather than approximately one screen tall. */
.hero-band {
  height: clamp(190px, 34vh, 460px);
  overflow: hidden;
  background: var(--deep);
}
.hero-band img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The shopfront sign sits left of centre and low in the frame, and it is the
     one thing in this photograph that has to survive every crop: it is what
     tells the viewer whose shop this is. On a narrow crop the horizontal
     anchor keeps the lettering in shot, on a wide one the vertical anchor
     does. Both were measured against the rendered page and then looked at:
     at 62% the gold TATTOO was sliced off the bottom at 1280. */
  object-position: 33% 78%;
}

/* --------------------------------------------------------------- orient --
   A short strip of the three facts somebody standing outside the shop
   actually wants. Not cards: a rule-separated row. */
.orient {
  border-block: 1px solid var(--line-soft);
  background: var(--panel);
}
.orient-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 1.25rem 2.5rem;
  align-items: start;
  padding-block: 1.6rem;
}
.fact { display: flex; flex-direction: column; gap: 0.15rem; }
.fact .k {
  font-family: "Gabarito", "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
}
.fact .v { color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.orient-note { color: var(--muted); font-size: 0.95rem; max-width: 46ch; }
.orient-note b { color: var(--ink); font-weight: 700; }

@media (max-width: 900px) {
  .orient-row { grid-template-columns: 1fr 1fr; }
  .orient-note { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .orient-row { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* -------------------------------------------------------------- sections -- */
.sec { padding-block: clamp(3.25rem, 8vw, 6rem); }

.sec-head { max-width: 60ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.sec-head h2 {
  font-size: var(--step-3, clamp(1.5rem, 1.32rem + 0.9vw, 2.1rem));
  margin-bottom: 0.7rem;
}
.sec-head p { color: var(--muted); max-width: 60ch; }

/* There is no .eyebrow class on this page on purpose. The only small
   letter-spaced labels here are .track-kind, which is the pinned label the
   design direction asks for on the two service tracks, and the ledger column
   headings. Neither is a section eyebrow and no section is numbered. */

/* --------------------------------------------------------------- tracks --
   FAMILY 2. THE STRUCTURAL REQUIREMENT OF THIS PAGE. The Maps category is
   "Tienda de piercings y tatuajes", so the service list is two tracks side by
   side and not one column with a piercing footnote. The widths are unequal on
   purpose and the second sheet is pinned a little lower than the first, the
   way paper sits on a cork board.

   .service-cards is the hook motion.js staggers on. Its two children arrive
   in sequence, which is the one place this page is allowed a little energy.
   It is a container class, not a claim that these are cards. */
.tracks {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}

.track {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
/* The offset. Small, and only on the wide layout where there is a second
   sheet to be offset from. */
.track + .track { margin-top: clamp(1.5rem, 4vw, 3rem); }

/* The pin. A real element rather than a decorative SVG: a gold disc with a
   ring, which is a pin head and not an illustration. */
.track::before {
  content: "";
  position: absolute;
  top: -9px;
  inset-inline-start: clamp(1.5rem, 3vw, 2.25rem);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--ground);
}

.track-kind {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.track h3 {
  font-size: 1.5rem;
  margin-bottom: 0.6rem;
}
.track > p {
  color: var(--muted);
  font-size: 0.98rem;
  max-width: 44ch;
  margin-bottom: 1.3rem;
}

.track ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.track li {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding-block: 0.55rem;
  border-top: 1px solid var(--line-soft);
}
.track li:first-child { border-top: 0; padding-top: 0; }
.track li .nm { font-weight: 500; }
.track li .nm b {
  display: block;
  font-family: "Gabarito", "Manrope", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
}
.track li .nm span {
  display: block;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.quote-note {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: 1.1rem 1.25rem;
  border: 1px dashed var(--line);
  border-radius: var(--r-s);
  color: var(--ink);
  font-size: 0.98rem;
  max-width: 68ch;
}

/* Two tracks become two stacked blocks below 640px, and the offset is
   dropped: a vertical stagger between stacked blocks is just a wrong margin. */
@media (max-width: 860px) {
  .tracks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .tracks { grid-template-columns: 1fr; }
  .track + .track { margin-top: 0; }
}

/* -------------------------------------------------------------- process --
   FAMILY 3. Two pinned photographs of unequal shape beside a short column of
   text. Neither frame shows any signage, so neither the alt text nor the
   caption claims anything beyond what is in the frame. */
.process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
.process-body { grid-column: span 1; }
.process-body h2 {
  font-size: var(--step-3, clamp(1.5rem, 1.32rem + 0.9vw, 2.1rem));
  margin-bottom: 0.8rem;
}
.process-body p { color: var(--muted); margin-bottom: 0.9rem; }
.process-body p:last-child { margin-bottom: 0; }
.process-body p strong { color: var(--ink); font-weight: 700; }

.pinned {
  margin: 0;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--deep);
  border: 1px solid var(--line-soft);
}
.pinned img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pinned.is-wide { aspect-ratio: 16 / 9; margin-top: clamp(1rem, 3vw, 2.5rem); }
/* g3 is 675x1200. Shown at its own 9:16 it stood nearly 600px tall beside a
   180px landscape frame and stopped reading as a pinned sheet, so it is
   cropped to 3:4 here. The subject sits in the middle of the frame and
   survives the crop; it was looked at afterwards, not assumed. */
.pinned.is-tall { aspect-ratio: 3 / 4; }

@media (max-width: 860px) {
  .process-grid { grid-template-columns: 1fr 1fr; }
  .process-body { grid-column: 1 / -1; }
  .pinned.is-wide { margin-top: 0; }
}
@media (max-width: 560px) {
  .process-grid { grid-template-columns: 1fr; }
  .pinned.is-tall { aspect-ratio: 4 / 5; }
}

/* --------------------------------------------------------------- ledger --
   FAMILY 4. The split-hours ledger. This shop shuts for three hours in the
   middle of every day and opens Saturday mornings only, and that is the fact
   most likely to send somebody to a locked door, so it gets a whole section
   and two columns rather than one run-on line per day. */
.ledger-wrap {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.ledger {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
}
.ledger-head,
.ledger-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 1fr) 1fr 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.75rem clamp(1rem, 2.5vw, 1.5rem);
}
.ledger-head {
  background: var(--deep);
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.ledger-row + .ledger-row { border-top: 1px solid var(--line-soft); }
.ledger-row .day {
  font-family: "Gabarito", "Manrope", system-ui, sans-serif;
  font-weight: 600;
}
.ledger-row .slot { font-variant-numeric: tabular-nums; }
.ledger-row .slot.off { color: var(--muted); }
.ledger-row.is-off .day { color: var(--muted); }

.ledger-side p { color: var(--muted); margin-bottom: 0.9rem; }
.ledger-side p:last-child { margin-bottom: 0; }
.ledger-side .big {
  font-family: "Gabarito", "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 0.8rem;
}

@media (max-width: 860px) {
  .ledger-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .ledger-head,
  .ledger-row { grid-template-columns: 1fr 1fr; gap: 0.35rem 0.6rem; }
  .ledger-head .day,
  .ledger-row .day { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- piece --
   FAMILY 5. One finished piece, shown alone and large. No grid, no siblings,
   nothing beside it competing for the eye. */
.piece {
  margin: 0 auto;
  max-width: 34rem;
  width: 100%;
}
.piece img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-m);
  border: 1px solid var(--line-soft);
  background: var(--deep);
}
.piece figcaption {
  margin-top: 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------- visit --
   FAMILY 6. The interior photograph runs full bleed and the address sits
   beside it in a pinned sheet that overlaps the band on a wide screen. */
.visit { padding-block: 0; }
.visit-grid { display: grid; grid-template-columns: minmax(0, 1fr); }

.visit-band {
  height: clamp(240px, 44vh, 540px);
  overflow: hidden;
  background: var(--deep);
}
.visit-band img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.visit-copy {
  padding-block: clamp(2.5rem, 7vw, 5rem);
  padding-inline: clamp(1.15rem, 4vw, 3rem);
}
.visit-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  max-width: 34rem;
}

/* Wide: the photograph keeps its full bleed off the right edge of the page and
   the address sits beside it rather than under it. The left column has to line
   up with the .wrap gutter every other section uses, and it is not inside a
   .wrap, so the gutter is computed: half the leftover outside the 72rem
   measure, plus the same inline padding. max() holds it at the plain gutter
   once the viewport is narrower than the measure, where that sum goes
   negative. */
@media (min-width: 900px) {
  .visit-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
  .visit-band {
    grid-column: 2;
    grid-row: 1;
    height: clamp(420px, 66vh, 680px);
    border-start-start-radius: var(--r-m);
    border-end-start-radius: var(--r-m);
  }
  .visit-copy {
    grid-column: 1;
    grid-row: 1;
    padding-inline-start: max(
      clamp(1.15rem, 4vw, 3rem),
      calc((100% * 2 - var(--wrap)) / 2 + clamp(1.15rem, 4vw, 3rem))
    );
    padding-inline-end: clamp(1.5rem, 3vw, 3.5rem);
  }
  .visit-card { max-width: none; }
}
.visit-card h2 {
  font-size: var(--step-3, clamp(1.5rem, 1.32rem + 0.9vw, 2.1rem));
  margin-bottom: 0.9rem;
}
.addr {
  font-style: normal;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.1rem;
}
.addr .street {
  font-family: "Gabarito", "Manrope", system-ui, sans-serif;
  font-weight: 600;
}
.addr p { color: var(--muted); font-size: 0.95rem; margin-top: 0.4rem; }

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-list li { display: flex; flex-direction: column; }
.contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  color: var(--accent);
  font-weight: 500;
}
/* site.js strips the href from anything the studio has not confirmed, rather
   than pointing it somewhere dead. An element that is no longer a link must
   not still be painted like one, at any size, anywhere on the page. */
[data-tel]:not([href]),
[data-instagram]:not([href]),
[data-wa-chat]:not([href]),
[data-maps]:not([href]) {
  color: var(--ink);
  text-decoration: none;
  cursor: default;
}
.contact-list .aside {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
  padding-inline-start: 1.6rem;
}

/* ----------------------------------------------------------------- book --
   FAMILY 7. The form. Two columns on a wide screen, one on a narrow one. */
.book { background: var(--panel); border-top: 1px solid var(--line-soft); }
.book-grid {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.book-aside h2 {
  font-size: var(--step-3, clamp(1.5rem, 1.32rem + 0.9vw, 2.1rem));
  margin-bottom: 0.8rem;
}
.book-aside p { color: var(--muted); margin-bottom: 1.1rem; }
.tel-big {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  font-family: "Gabarito", "Manrope", system-ui, sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.tel-big:hover { text-decoration: underline; }

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  background: var(--deep);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-m);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.field input,
.field select {
  font: inherit;
  font-size: 1rem;
  min-height: 48px;
  padding: 0.6rem 0.8rem;
  background: var(--ground);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  width: 100%;
}
/* booking.css styles the textarea and inherits its radius from here. */
.form textarea { border-radius: var(--r-s); }
.field input::placeholder { color: var(--muted); }
/* The native date and time pickers render their own glyphs, which are dark on
   a dark field by default in Chrome. */
.field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.75); }

.field-hint {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.form-error,
.form-ok {
  display: none;
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.98rem;
}
.form-error.show { display: block; color: var(--bad); }
.form-ok.show { display: block; color: var(--ink); }
.form-error a { color: var(--bad); font-weight: 700; }

.book-note {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}

.book-result { border-radius: var(--r-m); }

@media (max-width: 900px) {
  .book-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------- foot -- */
.site-foot {
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
  font-size: 0.95rem;
}
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 1.75rem;
}
.foot-brand {
  font-family: "Gabarito", "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}
.site-foot address { font-style: normal; color: var(--muted); }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 1.25rem; }
.foot-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--accent);
}
.demo-notes {
  border-top: 1px solid var(--line-soft);
  padding-top: 1.25rem;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 78ch;
}

/* ------------------------------------------------------------ narrowest --
   Checked at 360px: no element wider than the viewport, no horizontal
   scroll, every target still 44px. */
@media (max-width: 380px) {
  body { font-size: 1rem; }
  .track { padding: 1.25rem; }
  .track::before { inset-inline-start: 1.25rem; }
  .tel-big { font-size: 1.25rem; }
}