/* Boundary Park Medical Centre, preview build.
   Not the clinic's site. Built by VEDA NINE from public information so the
   clinic can see what a real site would look like before commissioning one.

   Palette sampled from the clinic's own signage (the crimson wordmark above
   the door): #8C2A55, which measures 8.1:1 on white and clears AAA for body
   text, so the brand colour can carry words instead of only decoration.

   No external fonts, no CDNs, no analytics. The whole thing is three files, so
   it opens from a folder or from a link with identical results. */

:root {
  --brand: #8c2a55;
  --brand-deep: #6e1f42;
  --brand-wash: #fbf3f6;
  --ink: #1b1b1f;
  --ink-2: #4a4a55;
  --line: #e2ded9;
  --paper: #ffffff;
  --shell: #faf8f5;
  --ok: #1f6b4a;
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brand-deep); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- preview flag
   Deliberately loud and deliberately unremovable-looking. This page names a
   real clinic, and anyone who lands on it must know in one glance that the
   clinic did not publish it. */
.preview {
  background: #1b1b1f;
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 9px 16px;
}
.preview b { color: #ffd9e6; }

/* ---------------------------------------------------------------- utility bar */
.util {
  background: var(--shell);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.util .wrap { display: flex; gap: 26px; align-items: center; padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap; }
.util span { color: var(--ink-2); }
.util b { color: var(--ink); }
.util .spacer { flex: 1; }
.util .open { color: var(--ok); font-weight: 700; }
/* "Are you taking new patients?" is the question this clinic is asked more than
   any other. Answering it only in a section halfway down the page means every
   visitor who does not scroll still phones to ask. It goes in the top bar, in
   the hero, in the FAQ and in the booking flow. */
.util .flagged { color: var(--brand-deep); }
.util .flagged b { color: var(--brand-deep); }
.hero-note {
  border-left: 4px solid var(--brand);
  background: var(--brand-wash);
  padding: 12px 16px;
  border-radius: 0 5px 5px 0;
  font-size: 15.5px;
  margin: 0 0 22px;
  max-width: 52ch;
}

/* ---------------------------------------------------------------- masthead */
header.mast { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 20; }
header.mast .wrap { display: flex; align-items: center; gap: 28px; padding-top: 16px; padding-bottom: 16px; }
.logo { text-decoration: none; display: block; line-height: 1.05; }
.logo .l1 { font-family: var(--serif); font-size: 15px; letter-spacing: 0.06em; color: var(--brand); display: block; }
.logo .l2 { font-family: var(--serif); font-size: 27px; letter-spacing: 0.07em; color: var(--brand); display: block; text-transform: uppercase; }
nav.main { margin-left: auto; display: flex; gap: 22px; align-items: center; }
nav.main a { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; }
nav.main a:hover { color: var(--brand); }

.btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 11px 20px;
  border-radius: 4px;
  border: 1px solid var(--brand);
  cursor: pointer;
}
.btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn.ghost { background: transparent; color: var(--brand-deep); }
.btn.ghost:hover { background: var(--brand-wash); }
.btn.big { font-size: 17px; padding: 15px 26px; }

/* ---------------------------------------------------------------- hero */
.hero { background: var(--shell); border-bottom: 1px solid var(--line); }
.hero .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; padding-top: 56px; padding-bottom: 56px; }
.hero h1 { font-family: var(--serif); font-size: 44px; line-height: 1.14; margin: 0 0 16px; letter-spacing: -0.01em; }
.hero p.lede { font-size: 19px; color: var(--ink-2); margin: 0 0 26px; max-width: 46ch; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.hero .facts { display: flex; gap: 26px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
.hero .facts b { display: block; color: var(--ink); font-size: 17px; }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 22px 24px; }
.panel h3 { margin: 0 0 14px; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); }
table.hours { width: 100%; border-collapse: collapse; font-size: 15px; }
table.hours td { padding: 6px 0; border-bottom: 1px solid var(--line); }
table.hours tr:last-child td { border-bottom: none; }
table.hours td:last-child { text-align: right; color: var(--ink-2); }
table.hours tr.today td { font-weight: 700; color: var(--ink); }

/* ---------------------------------------------------------------- sections */
section.band { padding: 62px 0; border-bottom: 1px solid var(--line); }
section.band.tint { background: var(--shell); }
.kicker { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); font-weight: 700; margin-bottom: 10px; }
h2.sec { font-family: var(--serif); font-size: 32px; margin: 0 0 12px; letter-spacing: -0.01em; }
p.sub { font-size: 18px; color: var(--ink-2); margin: 0 0 30px; max-width: 62ch; }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.svc { border: 1px solid var(--line); border-radius: 6px; padding: 20px 22px; background: var(--paper); }
.svc h3 { margin: 0 0 7px; font-size: 18px; }
.svc p { margin: 0; font-size: 15px; color: var(--ink-2); }

.doc { border: 1px solid var(--line); border-radius: 6px; background: var(--paper); overflow: hidden; }
.doc .av { height: 132px; background: var(--brand-wash); display: flex; align-items: center; justify-content: center;
           font-family: var(--serif); font-size: 34px; color: var(--brand); letter-spacing: 0.04em; }
.doc .db { padding: 16px 18px 20px; }
.doc h3 { margin: 0 0 4px; font-size: 19px; }
.doc .role { font-size: 14px; color: var(--brand); font-weight: 700; margin-bottom: 8px; }
.doc p { margin: 0; font-size: 15px; color: var(--ink-2); }

.notice { border-left: 4px solid var(--brand); background: var(--brand-wash); padding: 18px 22px; border-radius: 0 5px 5px 0; }
.notice h3 { margin: 0 0 6px; font-size: 18px; }
.notice p { margin: 0 0 8px; font-size: 16px; }
.notice p:last-child { margin-bottom: 0; }

.steps { counter-reset: s; display: grid; gap: 14px; }
.step { display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: start; }
.step .n { counter-increment: s; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff;
           display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.step .n::before { content: counter(s); }
.step h3 { margin: 4px 0 4px; font-size: 18px; }
.step p { margin: 0; font-size: 15px; color: var(--ink-2); }

details.faq { border-bottom: 1px solid var(--line); padding: 15px 0; }
details.faq summary { cursor: pointer; font-weight: 700; font-size: 17px; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::before { content: "+"; color: var(--brand); font-weight: 700; margin-right: 10px; }
details.faq[open] summary::before { content: "\2013"; }
details.faq p { margin: 10px 0 0 24px; color: var(--ink-2); font-size: 16px; }

.cta-band { background: var(--brand); color: #fff; padding: 46px 0; }
.cta-band .wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.cta-band h2 { font-family: var(--serif); font-size: 30px; margin: 0; }
.cta-band p { margin: 6px 0 0; opacity: 0.9; }
.cta-band .btn { background: #fff; color: var(--brand-deep); border-color: #fff; margin-left: auto; }

footer.foot { background: #1b1b1f; color: #cfcbd4; padding: 46px 0 28px; font-size: 15px; }
footer.foot a { color: #fff; }
footer.foot .grid4 { gap: 32px; }
footer.foot h4 { color: #fff; font-size: 14px; letter-spacing: 0.09em; text-transform: uppercase; margin: 0 0 12px; }
footer.foot ul { list-style: none; margin: 0; padding: 0; }
footer.foot li { margin-bottom: 7px; }
footer.foot .fine { border-top: 1px solid #33333c; margin-top: 30px; padding-top: 18px; font-size: 13px; color: #8d8a95; }

/* ---------------------------------------------------------------- booking */
.book-shell { background: var(--shell); min-height: 100vh; padding: 30px 0 70px; }
.book-card { max-width: 760px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line);
             border-radius: 8px; overflow: hidden; }
.book-head { padding: 18px 26px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; }
.book-head .logo .l2 { font-size: 21px; }
.book-head .phone { margin-left: auto; font-size: 14px; color: var(--ink-2); }
.book-head .phone b { color: var(--ink); display: block; font-size: 16px; }

.crumbs { display: flex; gap: 6px; align-items: center; padding: 12px 26px; background: var(--shell);
          border-bottom: 1px solid var(--line); font-size: 12.5px; flex-wrap: wrap; }
.crumbs span { color: #9a96a1; }
.crumbs span.done { color: var(--ink-2); }
.crumbs span.now { color: #fff; background: var(--brand); padding: 3px 10px; border-radius: 20px; font-weight: 700; }
.crumbs i { color: #c9c4cf; font-style: normal; }

.stage { padding: 30px 26px 34px; }
.stage h2 { font-family: var(--serif); font-size: 27px; margin: 0 0 6px; }
.stage p.hint { margin: 0 0 22px; color: var(--ink-2); font-size: 16px; }

.opts { display: grid; gap: 10px; }
.opt { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 6px;
       padding: 14px 18px; background: var(--paper); cursor: pointer; text-align: left; font: inherit; width: 100%;
       /* Some options are real links (call the clinic, the registry) and some are
          buttons. They must look identical, or the "Call the clinic" choice reads
          as a stray hyperlink beside a proper option. */
       text-decoration: none; color: inherit; }
.opt:hover { border-color: var(--brand); background: var(--brand-wash); }
.opt > span:not(.ic):not(.chev) { display: block; }
.opt .t { display: block; font-weight: 700; font-size: 16.5px; }
.opt .d { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.opt .chev { margin-left: auto; color: var(--brand); font-weight: 700; }
.opt .ic { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-wash); color: var(--brand);
           display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex: 0 0 auto; }
.opts.two { grid-template-columns: 1fr 1fr; }

.search { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; font: inherit;
          margin-bottom: 14px; }

.cal { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-head b { font-size: 17px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-grid .dow { font-size: 11.5px; color: var(--ink-2); letter-spacing: 0.06em; padding-bottom: 6px; }
.cal-grid .d { padding: 9px 0; border-radius: 5px; font-size: 15px; border: 1px solid transparent; }
.cal-grid .d.off { color: #c4c0ca; }
.cal-grid .d.free { border-color: var(--line); cursor: pointer; font-weight: 600; }
.cal-grid .d.free:hover { border-color: var(--brand); background: var(--brand-wash); }
.cal-grid .d.pick { background: var(--brand); color: #fff; font-weight: 700; }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.slots .lab { grid-column: 1 / -1; font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase;
              color: var(--ink-2); margin-top: 6px; }
.slot { border: 1px solid var(--line); border-radius: 5px; padding: 10px 6px; text-align: center; font-weight: 600;
        font-size: 15px; cursor: pointer; background: var(--paper); font-family: inherit; }
.slot:hover { border-color: var(--brand); background: var(--brand-wash); }
.slot.gone { color: #c4c0ca; text-decoration: line-through; cursor: default; }
.slot.gone:hover { border-color: var(--line); background: var(--paper); }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form .full { grid-column: 1 / -1; }
.form label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 5px; }
.form input, .form select, .form textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 5px; font: inherit; background: #fff;
}
.form .req { color: var(--brand); }
.form .help { font-size: 13px; color: var(--ink-2); margin-top: 4px; }

.summary { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-bottom: 20px; }
.summary .row { display: flex; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.summary .row:last-child { border-bottom: none; }
.summary .row span { color: var(--ink-2); width: 190px; flex: 0 0 auto; }
.summary .row b { font-weight: 700; }

.done-mark { width: 62px; height: 62px; border-radius: 50%; background: var(--ok); color: #fff;
             display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 18px; }
.centered { text-align: center; }

.msg { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-top: 6px; }
.msg .mh { background: var(--shell); border-bottom: 1px solid var(--line); padding: 12px 18px; font-size: 14px; }
.msg .mh b { display: block; font-size: 15.5px; }
.msg .mb { padding: 18px; font-size: 15.5px; }
.phone-frame { max-width: 330px; margin: 0 auto; border: 10px solid #1b1b1f; border-radius: 26px; overflow: hidden;
               background: #fff; }
.phone-frame .sms { padding: 16px; }
.phone-frame .bub { background: #ece9f0; border-radius: 16px; padding: 12px 14px; font-size: 15px; }

.desk { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; font-size: 14.5px; }
.desk .dr { display: grid; grid-template-columns: 78px 1fr 130px 96px; gap: 12px; padding: 10px 14px;
            border-bottom: 1px solid var(--line); align-items: center; }
.desk .dr:last-child { border-bottom: none; }
.desk .dr.h { background: var(--shell); font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em;
              text-transform: uppercase; color: var(--ink-2); }
.desk .dr.new { background: #f2fbf6; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.tag.online { background: #e6f4ec; color: var(--ok); }
.tag.phone { background: #efedf2; color: var(--ink-2); }

.back { background: none; border: none; color: var(--ink-2); font: inherit; cursor: pointer; padding: 0;
        margin-bottom: 16px; font-size: 14.5px; }
.back:hover { color: var(--brand); }

@media (max-width: 900px) {
  .hero .wrap, .grid3, .grid2, .grid4, .cal, .form, .opts.two { grid-template-columns: 1fr; }
  nav.main { display: none; }
  .hero h1 { font-size: 34px; }
  /* The clinic day sheet is four fixed columns and cannot usefully collapse: a
     time, a patient, a doctor and how it was booked only mean something on one
     line. Measured at 375px it ran ~70px past the viewport, which on a phone is
     the whole page sliding sideways. It scrolls inside its own box instead. */
  .desk-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .desk { min-width: 520px; }
  .book-shell { padding-left: 12px; padding-right: 12px; }
  .stage { padding: 24px 18px 26px; }
  .book-head, .crumbs { padding-left: 18px; padding-right: 18px; }
  .stage h2 { font-size: 23px; }
  .util .wrap { gap: 10px 18px; }
  .hero .wrap { padding-top: 36px; padding-bottom: 36px; }
  section.band { padding: 44px 0; }
}

@media (max-width: 380px) {
  /* At 320px (an SE-sized phone) the masthead's Book button ran 21px past the
     edge, which slides the whole page sideways. Measured, not guessed. */
  header.mast .wrap { flex-wrap: wrap; gap: 12px; }
  header.mast .btn { font-size: 14px; padding: 10px 14px; }
  .logo .l2 { font-size: 23px; }
  .hero h1 { font-size: 29px; }
  .btn.big { font-size: 16px; padding: 13px 18px; }
  h2.sec { font-size: 27px; }
}