/* Dental Barcino, Carrer de Borgonya 10, Nou Barris.
   ONE-PICTURE MONOGRAPH.

   The whole design problem here is that this clinic has exactly one verified
   photograph and no prices, no treatment list, no dentist's name and no
   founding year. The factual budget is a rating, an address, a telephone
   number and a split opening schedule. So the page is not a brochure with a
   thin photo section; it is a monograph with one plate at the front and
   confident type underneath.

   The palette is lifted out of that single photograph and nowhere else:
     brick    -> the ground             (#EFE4D9, sampled from #A6917B wall)
     vinyl    -> the accent             (#2C5578, sampled from #35526D glass)
     pavement -> the rule colour        (#C8C4C0)
   so the page reads as a colour echo of its only image.

   What is deliberately NOT here, because all of it would be padding:
   stock imagery, an icon row, a hand-drawn tooth, a map screenshot, a
   decorative gradient standing in for a picture, a second crop of g1.jpg.
   The right answer to one photograph is one enormous photograph. */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* light by design. Without this the date and select controls render in the
     browser's dark chrome on a sand page and the form looks like a different
     site's. */
  color-scheme: light;

  --bg: #EFE4D9;          /* brick dust. media.css reads --bg */
  --bg-2: #E8DCD0;        /* photo frame, confirmation panel. ink 12.11:1 */
  --bg-3: #F6EFE8;        /* input fills. ink 14.32:1, muted 6.81:1 */

  --ink: #241F1B;         /* 13.03:1 on the ground */
  --muted: #5A5149;       /* 6.19:1 on the ground, so it is body-legible */

  --accent: #2C5578;      /* the window vinyl. 6.26:1 on the ground, which is
                             why it is allowed on body-size links as well as
                             on headings and fills */
  --accent-deep: #22415C; /* pressed and hovered CTA. 8.48:1 on the ground */
  --accent-ink: #F7FAFC;  /* CTA label on the accent, 7.48:1 */
  --accent-soft: #D8E3EC; /* secondary text reversed out of the band, 6.02:1 */

  --line: #7E6F5E;        /* control boundaries. 3.88:1 on the ground and
                             4.26:1 on the input fill, so an empty input has a
                             perceivable edge. booking.css reads --line for the
                             textarea, which is why it is the strong one. */
  --rule: #C8C4C0;        /* pavement. decorative hairlines only */

  --r-s: 6px;
  --r-l: 12px;            /* the midpoint of the eight sites, on purpose: this
                             is the most ordinary business in the set and its
                             page should feel unremarkable in the good sense */

  --nav-h: 64px;
  --measure: 68ch;

  /* MOTION dial. A slow, small settle. With one image the page is mostly text
     and text that jumps reads as noise. */
  --ds-lift: 2px;
  --ds-dur: 0.24s;
}

/* booking.css loads AFTER this file and declares --bad on a bare :root inside
   a prefers-color-scheme block. Equal specificity, later file wins, so a
   visitor whose system is dark would get the salmon #FF9E8D at 1.59:1 on this
   sand. :root:root outranks it in both directions. */
:root:root { --bad: #B3261E; }   /* 5.22:1 on the ground */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Asap, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand b {
  font-family: Epilogue, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0;
}

p { margin: 0 0 1rem; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

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

img { max-width: 100%; }

.wrap {
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.measure { max-width: var(--measure); }

/* Reveal. The floor is site.js; motion.js takes over when it loads. */
.rv {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.65s var(--ds-ease, cubic-bezier(0.22, 0.75, 0.3, 1)),
              transform 0.65s var(--ds-ease, 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; }
}

/* The sprite glyphs always sit beside a word, never instead of one. */
.si { flex: none; fill: currentColor; }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 0.5rem;
  z-index: 60;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.7rem 1rem;
  border-radius: var(--r-s);
}

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.65rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-ink); }
.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--bg-3); color: var(--ink); }
/* site.js leaves an unconfirmed route reachable with aria-disabled rather than
   disabled, so a reader can still hear why it is not open yet. */
.btn[aria-disabled="true"] { color: var(--muted); cursor: default; }

/* ---------------------------------------------------------------- header -- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(130%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
@supports not (backdrop-filter: blur(2px)) {
  .site-head { background: var(--bg); }
}
.head-row {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  min-height: var(--nav-h);
  flex-wrap: wrap;
  padding-block: 0.5rem;
}
.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-decoration: none;
  color: var(--ink);
  margin-inline-end: auto;
}
.brand b { font-size: 1.05rem; letter-spacing: -0.005em; }
.brand span { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.04em; }

/* 44px targets with 8px between neighbours, which is the spacing half of the
   rule and the half that gets forgotten. */
.lang { display: flex; gap: 0.5rem; }
.lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--r-s);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--muted);
}
.lang a:hover { color: var(--ink); background: var(--bg-3); }
.lang a[aria-current="true"] {
  color: var(--accent-ink);
  background: var(--accent);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--r-s);
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}
.nav-cta:hover { background: var(--accent); color: var(--accent-ink); }

/* ---------------------------------------------- 1. the plate and the name --
   Family one. The photograph edge to edge, the name set beneath it on sand.
   It is used here and nowhere else on the page: not repeated, not re-cropped,
   not tinted, not duplicated into a gallery. */
.frontis {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.frontis-plate {
  margin: 0;
  width: 100%;
  background: var(--bg-2);
  /* the drift and parallax rules in media.css and motion.js key off .hero,
     .hero-photo, .hero-media and .band. This class matches none of them on
     purpose: a slow scale on the one frontage this page is about would be
     motion for its own sake. The image fades in once and then holds. */
}
.frontis-plate img {
  display: block;
  width: 100%;
  /* Tall enough that the band reads as a photograph of a shopfront rather than
     a decorative strip, short enough that the headline and the booking button
     are both still above the fold at 800px of viewport height. */
  height: clamp(250px, 46dvh, 520px);
  object-fit: cover;
  /* The vinyl sits about two fifths down the frame. The crop is pulled there so
     the lettering survives at every viewport width. The brick above and the
     pavement below are what get trimmed, in that order, and nothing is nudged
     to hide the air-conditioning unit: it is on the building. */
  object-position: 30% 45%;
}
.frontis-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2rem, 5vh, 3.25rem);
}
.frontis h1 {
  font-size: clamp(2.5rem, 2rem + 2.4vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 14ch;
}
.frontis-lede {
  margin-top: 1.1rem;
  font-size: var(--step-1, 1.15rem);
  color: var(--ink);
  max-width: 46ch;
}
.frontis-where {
  margin: 0 0 1.75rem;
  color: var(--muted);
  font-size: 0.95rem;
}
.frontis-where .dot { color: var(--rule); padding-inline: 0.5rem; }
.frontis-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ------------------------------------------------------ 2. the one figure --
   A single line of fact between the plate and the statement. The review count
   is not on the listing, so it is not on the page: the rating stands alone. */
.mark {
  border-block: 1px solid var(--rule);
}
.mark-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding-block: 1.1rem;
}
.mark-fig {
  font-family: Epilogue, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: var(--step-2, 1.4rem);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.mark-row p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* ------------------------------------------------ 3. the statement column --
   Family two. One narrow measure, nothing beside it. This is where the page
   says plainly that the clinic quotes, because nothing else on it can. */
.statement { padding-block: clamp(3.5rem, 10vh, 6.5rem); }
.statement h2 {
  font-size: var(--step-3, 1.9rem);
  line-height: 1.2;
  max-width: 20ch;
  margin-bottom: 1.4rem;
}
.statement .lead {
  font-size: var(--step-1, 1.15rem);
  color: var(--ink);
}
.statement p { color: var(--muted); }
.statement p strong { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------- 4. the hours in band --
   Family three. A horizontal band in the vinyl slate with the schedule
   reversed out. Mondays to Fridays are identical, so they are stated once
   rather than repeated down seven hairlined rows. The midday close and the
   16:30 reopening are the practical facts a neighbour actually uses. */
.hours-band {
  background: var(--accent);
  color: var(--accent-ink);
  padding-block: clamp(3rem, 9vh, 5rem);
}
.hours-band h2 {
  font-size: var(--step-3, 1.9rem);
  line-height: 1.2;
  margin-bottom: 1.75rem;
}
.hours-table {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 0.6rem 2rem;
  align-items: baseline;
  margin: 0 0 1.75rem;
  max-width: 44rem;
}
.hours-table dt {
  font-weight: 500;
  color: var(--accent-soft);
}
.hours-table dd {
  margin: 0;
  font-family: Epilogue, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: var(--step-2, 1.4rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.hours-table dd span { display: block; }
.hours-table .off dd,
.hours-table dt.off { color: var(--accent-soft); font-family: inherit; font-weight: 400; font-size: 1rem; }
.hours-note {
  color: var(--accent-soft);
  max-width: 54ch;
  margin: 0;
}
/* The number is read off the screen and dialled, so it never breaks across two
   lines. Verified on the English page, where the longer sentence pushed it. */
.hours-band a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* --------------------------------------------------- 5. where it is, told --
   Family four. Sand again, and the frontage is described in words because the
   reader has just looked at it. No map, no screenshot, no second photograph. */
.locate { padding-block: clamp(3.5rem, 10vh, 6.5rem); }
.locate h2 {
  font-size: var(--step-3, 1.9rem);
  line-height: 1.2;
  margin-bottom: 1.4rem;
}
.locate-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 3.5rem);
  align-items: start;
}
@media (max-width: 760px) {
  .locate-cols { grid-template-columns: 1fr; }
}
.addr {
  font-style: normal;
  font-family: Epilogue, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: var(--step-2, 1.4rem);
  line-height: 1.35;
  margin-bottom: 0.5rem;
}
.addr-sub { color: var(--muted); margin-bottom: 1.5rem; }
.locate p { color: var(--muted); }
.tel-big {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  font-family: Epilogue, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: var(--step-2, 1.4rem);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.1rem;
}
.tel-big:hover { color: var(--accent-deep); border-color: var(--accent-deep); }
.tel-note { margin-top: 1.25rem; }
.tel-label {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

/* -------------------------------------------------------- 6. the request --
   Family five. The form inset on sand: one panel, its own fill, the only
   boxed thing on the page. */
.book { padding-block: clamp(3.5rem, 10vh, 6.5rem) clamp(4rem, 12vh, 7rem); }
.book h2 {
  font-size: var(--step-3, 1.9rem);
  line-height: 1.2;
  margin-bottom: 1rem;
}
.book-intro { color: var(--muted); margin-bottom: 2rem; }
.book-inset {
  background: var(--bg-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  padding: clamp(1.25rem, 4vw, 2.25rem);
}

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.25rem;
  border-radius: var(--r-s);   /* booking.css textarea inherits this */
}
@media (max-width: 620px) {
  .form { grid-template-columns: 1fr; }
}
.field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}
.field input,
.field select {
  font: inherit;
  font-size: 1rem;
  min-height: 48px;
  padding: 0.6rem 0.8rem;
  background: #FFFDFB;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
}
.field select { cursor: pointer; }
.field .field-msg { margin: 0; }

.form-error, .form-ok {
  grid-column: 1 / -1;
  display: none;
  margin: 0;
  max-width: none;
  font-size: 0.95rem;
  line-height: 1.6;
}
.form-error {
  color: var(--bad);
  border-inline-start: 3px solid var(--bad);
  padding-inline-start: 0.8rem;
}
.form-error a { color: var(--bad); font-weight: 500; }
.form-ok {
  color: var(--ink);
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: 0.8rem;
}
.form-error.show, .form-ok.show { display: block; }

.book-note {
  grid-column: 1 / -1;
  margin: 0;
  max-width: none;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}
.book-result { border-radius: var(--r-l); margin-top: 1.5rem; }

/* ---------------------------------------------------------------- footer -- */
.site-foot {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 7vh, 4rem);
  font-size: 0.92rem;
  color: var(--muted);
}
.foot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 2rem;
}
.foot-brand { font-weight: 500; color: var(--ink); margin-bottom: 0.2rem; }
.site-foot address { font-style: normal; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.foot-links a:hover { border-bottom-color: currentColor; }
.demo-notes {
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  font-size: 0.85rem;
  line-height: 1.65;
}
.demo-notes p { margin: 0 0 0.5rem; max-width: 72ch; }

/* --------------------------------------------------------- the phone pass --
   Measured at 390x844 and again at 360x640 rather than assumed.

   The header CTA is dropped below 640px and that is a decision, not an
   oversight. Brand, three language links at their full 44px targets, and a
   booking button do not fit on one 390px row, and the alternative was a
   113px sticky header eating an eighth of every screen for the whole scroll.
   The hero's own booking button sits directly under the header, so nothing is
   lost except the second copy of it. */
@media (max-width: 640px) {
  .nav-cta { display: none; }
  .frontis-plate img { height: clamp(190px, 32dvh, 320px); }
  .frontis-copy { padding-block: clamp(1.5rem, 4vh, 2.5rem); }
}

/* Declared here rather than assumed. Every multi-column block above collapses
   at its own breakpoint; this is the floor under all of them. */
@media (max-width: 400px) {
  body { font-size: 1rem; }
  .head-row { gap: 0.5rem; }
  .brand b { font-size: 0.98rem; }
  .nav-cta { padding-inline: 0.75rem; }
  .frontis-actions .btn { flex: 1 1 100%; }
  .hours-table { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .hours-table dt { margin-top: 0.75rem; }
  .book-inset { padding: 1rem; }
}