/* ==========================================================================
   Praajna Consulting
   Paper, ink, and a rule. Three typefaces, four colours, no decoration that
   is not doing a job.
   ========================================================================== */

/* Fonts are served from this origin, not from Google.
   Three reasons: it is faster (no extra DNS, TLS and round trip), it removes a
   third party from every page load, and the privacy statement on this site
   claims no third-party requests, which has to be true. */

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/bodoni-moda-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0100-024F, U+0300-036F, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2122, U+2212;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/bodoni-moda-latin-wght-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0100-024F, U+0300-036F, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2122, U+2212;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/archivo-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0100-024F, U+0300-036F, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2122, U+2212;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/spectral-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0300-036F, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2122, U+2212;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/spectral-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0300-036F, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2122, U+2212;
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/spectral-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0300-036F, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2122, U+2212;
}

:root {
  /* White, not paper. The only tints are for hover and selection, and they
     are grey rather than cream so nothing reads as off-white. */
  --paper:      #FFFFFF;
  --paper-warm: #F2F2F0;
  --card:       #FFFFFF;
  --ink:        #000000;
  --ink-soft:   #33322F;
  --muted:      #6B6A66;
  --faint:      #A3A29D;
  --rule:       #DCDBD7;
  --rule-soft:  #EBEAE7;
  --indigo:     #1E3A5F;
  --red:        #B03A26;
  --rubric:     #7C0000;   /* the maroon of the invocation, sampled from it */
  --green:      #2F5D3A;

  --display: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --prose:   'Spectral', Georgia, 'Times New Roman', serif;
  --ui:      'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --shell: 1120px;
  --radius: 3px;
}

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

/* Several components below set an explicit display, which would otherwise beat
   the browser's own rule for [hidden]. Without this, toggling `hidden` from
   JavaScript quietly does nothing. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--prose);
  font-size: 16.5px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body > * { position: relative; z-index: 1; }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 2.5px; text-decoration-thickness: .5px; text-decoration-color: var(--faint); }
a:hover { text-decoration-color: var(--ink); }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ------------------------------- invocation -------------------------------- */

/* The strip that heads every page, ruled like the frame of a pecha folio: a
   heavy line outside, a light one inside, closed at both ends, with a margin
   mark standing in each. The rules are drawn rather than shipped, so the frame
   stays a hairline on a phone and does not thicken with the image. */

.invocation {
  background: var(--paper);
  padding: 7px 14px 8px;
}

.invocation__frame {
  position: relative;
  max-width: 1680px;
  margin: 0 auto;
  padding: 7px 30px 8px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--rubric);
  /* Outer rule on all four sides. */
  border: 1.5px solid var(--rubric);
}

/* The inner rule, held 3px off the outer one. Drawn as a box rather than four
   borders so the corners close properly. */
.invocation__frame::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid var(--rubric);
  pointer-events: none;
}

.invocation__frame picture { display: block; flex: 1; min-width: 0; }

.invocation__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2600 / 46;
}

.invocation__mark {
  flex: none;
  width: 13px;
  height: 13px;
  display: block;
}

@media (max-width: 760px) {
  /* Small and running: the same single line, thinner rules, tighter margins,
     and the marks come down with it. */
  .invocation { padding: 5px 8px 6px; }
  .invocation__frame {
    padding: 5px 12px 6px;
    gap: 8px;
    border-width: 1px;
  }
  .invocation__frame::before { inset: 2px; border-width: .5px; }
  .invocation__mark { width: 8px; height: 8px; }
}

/* --------------------------------- ribbon ---------------------------------- */

/* A hairline strip between the invocation and the masthead. It has to be thin
   enough that it reads as a rule with words on it rather than a navigation bar,
   because the page below it is doing the talking. */
/* Ink, not paper. The strip reads as a band across the top of the page rather
   than as a rule with words on it, and it echoes the black panel beside the
   opening line and the privacy statement further down. */
.ribbon {
  background: var(--ink);
  border-bottom: none;
}
.ribbon__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 34px;
}
.ribbon__links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ribbon__links a,
.ribbon__cta {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  /* Not pure white: at 11px, full white on black glares and the letterforms
     bloom. Held back far enough to read as quiet, close enough to be legible. */
  color: rgba(255, 255, 255, .62);
  padding: 9px 0;
  border-bottom: 1px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.ribbon__links a:hover,
.ribbon__cta:hover { color: var(--paper); border-bottom-color: rgba(255, 255, 255, .5); }
/* The page you are on is stated, not highlighted. */
.ribbon__links a[aria-current="page"] { color: var(--paper); border-bottom-color: rgba(255, 255, 255, .55); }
.ribbon__cta { color: var(--paper); font-weight: 600; letter-spacing: .05em; }

/* On a phone the strip scrolls sideways rather than wrapping to two lines,
   which would double the height of the thing that is meant to be thin.
   The call to action is dropped here rather than squeezed: sharing the row it
   was clipping the last link, and the hero's own button is one scroll away. */
@media (max-width: 700px) {
  .ribbon__inner { padding: 0 20px; }
  .ribbon__cta { display: none; }
  .ribbon__links {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .ribbon__links::-webkit-scrollbar { display: none; }
  .ribbon__links a { font-size: 10.5px; letter-spacing: .06em; white-space: nowrap; }
}

/* -------------------------------- masthead -------------------------------- */

.masthead {
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
.masthead__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 20px 28px 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.masthead__mark { display: block; text-decoration: none; }
.masthead__mark img { display: block; height: 44px; width: auto; }
.masthead__meta {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .015em;
  color: var(--muted);
  text-align: right;
  line-height: 1.5;
  padding-bottom: 3px;
}
.masthead__rule { height: 3px; border-top: 1px solid var(--ink); border-bottom: 3px solid var(--ink); }

/* ------------------------------- typography ------------------------------- */

h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; letter-spacing: -.005em; margin: 0; }

.title {
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  line-height: 1.08;
  font-weight: 500;
}
.title em { font-style: italic; font-weight: 400; }

.standfirst {
  font-size: 1.06rem;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 14px 0 0;
}

.eyebrow {
  font-family: var(--ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

.step-no {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--ink);
  width: 19px; height: 19px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  flex: none;
}

.prose h2 { font-size: 1.42rem; margin: 2.4em 0 .5em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.08rem; font-family: var(--ui); font-weight: 600; letter-spacing: .01em; margin: 1.8em 0 .35em; }
.prose p { margin: 0 0 1em; max-width: 68ch; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.15em; max-width: 66ch; }
.prose li { margin-bottom: .5em; }
.prose strong { font-weight: 600; }

.mono {
  font-family: var(--ui);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --------------------------------- layout --------------------------------- */

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 28px; }

.page { padding: 46px 0 90px; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 56px;
  align-items: start;
  margin-top: 40px;
}

.rail { position: sticky; top: 26px; }

hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; }

/* ------------------------------ service list ------------------------------ */

.services { border-top: 1px solid var(--ink); margin: 0; padding: 0; list-style: none; }

.service {
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.service input { position: absolute; opacity: 0; pointer-events: none; }

.service label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 0 16px;
  align-items: baseline;
  padding: 20px 14px 20px 12px;
  cursor: pointer;
  transition: background .14s ease;
  margin: 0 -12px;
}
.service label:hover { background: var(--paper-warm); }

.service__tick {
  width: 11px; height: 11px;
  border: 1px solid var(--faint);
  border-radius: 50%;
  align-self: center;
  justify-self: center;
  transition: all .14s ease;
}
.service input:checked + label .service__tick { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--card); }
.service input:checked + label { background: var(--paper-warm); }
.service input:focus-visible + label { outline: 2px solid var(--indigo); outline-offset: -2px; }

.service__name { font-family: var(--display); font-size: 1.24rem; font-weight: 500; line-height: 1.25; }
.service__price { font-family: var(--ui); font-size: 1.02rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.service__dur { font-family: var(--ui); font-size: 11px; letter-spacing: .01em; color: var(--muted); display: block; margin-top: 3px; font-weight: 500; }
.service__summary { grid-column: 2 / 4; font-size: .93rem; color: var(--ink-soft); margin-top: 7px; max-width: 62ch; line-height: 1.55; }
.service__note { grid-column: 2 / 4; font-family: var(--ui); font-size: 11px; color: var(--muted); margin-top: 6px; letter-spacing: .02em; }

.service__covers { grid-column: 2 / 4; margin: 12px 0 2px; display: none; }
.service input:checked + label .service__covers { display: block; }
.service__covers > span {
  display: block;
  font-size: .89rem;
  color: var(--ink-soft);
  padding-left: 15px;
  position: relative;
  margin-bottom: 4px;
  line-height: 1.5;
}
.service__covers > span::before {
  content: '';
  position: absolute; left: 0; top: .62em;
  width: 6px; height: 1px; background: var(--faint);
}

/* -------------------------------- calendar -------------------------------- */

/* Capped so it reads as a calendar rather than a spreadsheet. */
.cal { margin-top: 6px; max-width: 540px; }
.cal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--rule);
}
.cal__month { font-family: var(--display); font-size: 1.15rem; font-weight: 500; }
.cal__nav { display: flex; gap: 4px; }
.cal__nav button {
  font-family: var(--ui); font-size: 15px; line-height: 1;
  width: 30px; height: 30px;
  background: none; border: 1px solid var(--rule); border-radius: var(--radius);
  cursor: pointer; color: var(--ink);
}
.cal__nav button:hover:not(:disabled) { border-color: var(--ink); }
.cal__nav button:disabled { opacity: .3; cursor: default; }

.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__dow {
  font-family: var(--ui); font-size: 10px; font-weight: 600; letter-spacing: .015em; color: var(--faint); text-align: center; padding: 4px 0 8px;
}
.cal__day {
  aspect-ratio: 1 / .74;
  border: 1px solid transparent;
  background: none;
  font-family: var(--ui); font-size: 14px; font-variant-numeric: tabular-nums;
  color: var(--ink); cursor: pointer;
  border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: all .12s ease;
}
.cal__day[data-state='empty'] { visibility: hidden; }
.cal__day[data-state='none'] { color: var(--faint); cursor: default; }
.cal__day[data-state='open']:hover { background: var(--paper-warm); border-color: var(--rule); }
.cal__day[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.cal__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink); opacity: .45; }
.cal__day[aria-pressed='true'] .cal__dot { background: var(--paper); opacity: .8; }
.cal__day[data-state='none'] .cal__dot { visibility: hidden; }

/* ---------------------------------- slots --------------------------------- */

.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 7px;
  margin-top: 18px;
  max-width: 660px;
}

.slot {
  font-family: var(--ui);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 9px 6px 8px;
  cursor: pointer;
  text-align: center;
  transition: all .12s ease;
  color: var(--ink);
}
.slot:hover { border-color: var(--ink); }
.slot[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.slot__local { display: block; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.slot__ist { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.slot[aria-pressed='true'] .slot__ist { color: rgba(255,255,255,.7); }

.tzbar {
  font-family: var(--ui); font-size: 12px; color: var(--muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule-soft);
}
.tzbar select {
  font-family: var(--ui); font-size: 12px; color: var(--ink);
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 3px 6px; max-width: 240px;
}

/* ---------------------------------- forms --------------------------------- */

.field { margin-bottom: 17px; }
.field--half { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

label.lbl, .lbl {
  display: block;
  font-family: var(--ui); font-size: 11px; font-weight: 600;
  letter-spacing: .015em; color: var(--muted);
  margin-bottom: 6px;
}
.lbl .opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--faint); }

input[type='text'], input[type='email'], input[type='tel'], input[type='date'], input[type='time'], select, textarea {
  width: 100%;
  font-family: var(--ui);
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 10px 11px;
  transition: border-color .12s ease;
}
textarea { font-family: var(--prose); font-size: 15.5px; line-height: 1.55; resize: vertical; min-height: 96px; }
input:hover, select:hover, textarea:hover { border-color: var(--faint); }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(30,58,95,.09); }
input[aria-invalid='true'], textarea[aria-invalid='true'] { border-color: var(--red); }
input::placeholder, textarea::placeholder { color: var(--faint); }

.hint { font-family: var(--ui); font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; }

.chart {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px 17px 4px;
  margin-bottom: 12px;
  background: var(--card);
}
.chart__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 13px;
}
.chart__no { font-family: var(--display); font-size: 1rem; font-weight: 600; }
.chart__opt { font-family: var(--ui); font-size: 11px; color: var(--faint); }

.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; cursor: pointer; }
.check input { margin: 3px 0 0; width: 15px; height: 15px; flex: none; accent-color: var(--ink); }
.check span { font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }

/* --------------------------------- buttons -------------------------------- */

.btn {
  font-family: var(--ui);
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
  padding: 13px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  cursor: pointer;
  transition: opacity .12s ease, transform .06s ease;
}
.btn:hover:not(:disabled) { opacity: .87; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .32; cursor: not-allowed; }
.btn--wide { width: 100%; }
.btn--ghost { background: none; color: var(--ink); border-color: var(--rule); font-weight: 500; }
.btn--ghost:hover:not(:disabled) { border-color: var(--ink); opacity: 1; }
.btn--link {
  background: none; border: 0; padding: 0;
  font-family: var(--ui); font-size: 12.5px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.btn--link:hover { color: var(--ink); }

/* ------------------------------ summary rail ------------------------------ */

.summary {
  background: var(--card);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
}
.summary__body { padding: 20px 21px; }
.summary__title {
  font-family: var(--ui); font-size: 10.5px; font-weight: 600;
  letter-spacing: .02em; color: var(--muted);
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.summary__row { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 11px; font-size: .92rem; }
.summary__row .k { font-family: var(--ui); font-size: 11px; letter-spacing: .01em; color: var(--muted); flex: none; padding-top: 3px; }
.summary__row .v { margin: 0; text-align: right; }
.summary__when { display: block; font-family: var(--display); font-size: 1.02rem; line-height: 1.3; }
.summary__ist { display: block; font-family: var(--ui); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
.summary__total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--ink); margin-top: 16px; padding-top: 14px;
}
.summary__total .lbl { margin: 0; }
.summary__amount { font-family: var(--display); font-size: 1.62rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.summary__gst { font-family: var(--ui); font-size: 10.5px; color: var(--muted); text-align: right; margin-top: 1px; }
.summary__empty { color: var(--faint); font-size: .9rem; font-style: italic; }

.hold {
  font-family: var(--ui); font-size: 11.5px;
  border-top: 1px solid var(--rule); padding: 11px 21px;
  color: var(--muted); display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.hold strong { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }

.assurance {
  list-style: none; margin: 16px 0 0; padding: 0;
  font-family: var(--ui); font-size: 11.5px; color: var(--muted); line-height: 1.5;
}
.assurance li { padding-left: 16px; position: relative; margin-bottom: 6px; }
.assurance li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 7px; height: 4px;
  border-left: 1.5px solid var(--green); border-bottom: 1.5px solid var(--green);
  transform: rotate(-45deg);
}

/* ------------------------------- office note -------------------------------
   The standing note from the office, set as a letter rather than as marketing
   copy: a hairline box, prose face, no icons.
   -------------------------------------------------------------------------- */

.officenote {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 22px 0 20px;
  margin: 30px 0 0;
  max-width: 74ch;
  column-gap: 42px;
}
.officenote p { margin: 0 0 .85em; font-size: 1.0rem; line-height: 1.62; color: var(--ink-soft); }
.officenote p:last-child { margin-bottom: 0; }
.officenote p:first-child { color: var(--ink); }
.officenote__sign {
  font-family: var(--ui) !important;
  font-size: 12.5px !important;
  color: var(--muted) !important;
  border-top: 1px solid var(--rule-soft);
  padding-top: 13px;
  margin-top: 16px !important;
}

/* ------------------------------- region switch -----------------------------
   Two books of business. International is the default; India is opt-in, and
   the note under it says why.
   -------------------------------------------------------------------------- */

.regionbar { margin: 34px 0 6px; }

.regionbar__switch {
  display: inline-flex;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}
.regionbar__switch button {
  font-family: var(--ui); font-size: 13px; font-weight: 500;
  padding: 9px 18px;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  border-right: 1px solid var(--rule);
}
.regionbar__switch button:last-child { border-right: 0; }
.regionbar__switch button:hover { background: var(--paper-warm); }
.regionbar__switch button[aria-checked='true'] { background: var(--ink); color: var(--paper); font-weight: 600; }
.regionbar__switch button[aria-checked='true']:hover { background: var(--ink); }

.regionbar__note {
  font-family: var(--ui); font-size: 12px; color: var(--muted);
  margin: 10px 0 0; max-width: 58ch; line-height: 1.5;
}
.regionbar__note strong { color: var(--ink); font-weight: 600; }

.paypalslot { margin-top: 12px; min-height: 0; }
.paypalslot paypal-button { display: block; width: 100%; }

/* ------------------------------ next available ---------------------------- */

.nextup { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; flex-wrap: wrap; }
.nextup__btn {
  font-family: var(--ui); font-size: 13.5px; font-weight: 500;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--radius);
  padding: 9px 15px; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.nextup__btn:hover { background: var(--ink); color: var(--paper); }
.nextup__hint {
  font-family: var(--ui); font-size: 10.5px; letter-spacing: .02em; color: var(--faint);
}

.waitlist {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--card); padding: 18px 19px 20px; margin-top: 22px;
}

/* ------------------------------ inverted band -----------------------------
   Used for the privacy statement. The whole page turns over: paper becomes
   ink. It is the only place on the site that does this, which is the point.
   -------------------------------------------------------------------------- */

.invert {
  background: var(--ink);
  color: var(--paper);
  margin-top: 0;
  position: relative;
  overflow: hidden;
}

/* An azimuthal equidistant grid, the projection a planisphere is drawn on:
   concentric almucantars every ten degrees of altitude, azimuths every fifteen,
   and the ecliptic riding across as it does from Bengaluru. Real geometry, not
   a decorative spiral, and 8 KB of vector rather than a picture. It is set at
   six per cent so it is felt rather than seen. */
.invert__grid {
  position: absolute;
  top: 50%;
  right: -12%;
  width: min(760px, 62%);
  height: auto;
  transform: translateY(-50%);
  opacity: .06;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.invert__inner { position: relative; z-index: 1; }

@media (max-width: 760px) {
  .invert__grid { right: -30%; width: 92%; opacity: .05; }
}
.invert__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 92px 28px 96px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.invert__claim {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.9rem, 7.4vw, 5.4rem);
  line-height: .96;
  letter-spacing: -.02em;
  margin: 0;
}
.invert__claim em { font-style: italic; font-weight: 400; }

.invert__seal {
  margin-top: 44px;
  width: 92px; height: 92px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(255,255,255,.6);
}
.invert__seal svg { width: 30px; height: 30px; }

.invert__body { padding-top: 12px; }
.invert__body p {
  font-size: 1.14rem;
  line-height: 1.62;
  color: rgba(255,255,255,.86);
  margin: 0 0 1.15em;
  max-width: 46ch;
}
.invert__body p:first-child { color: var(--paper); }
.invert__body strong { color: var(--paper); font-weight: 500; }

.invert__list { list-style: none; margin: 28px 0 0; padding: 0; max-width: 46ch; }
.invert__list li {
  border-top: 1px solid rgba(255,255,255,.16);
  padding: 13px 0 13px 0;
  font-family: var(--ui);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.74);
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 12px;
}
/* A drawn rule rather than a dash character: it sits on the cap line instead of
   the x-height, and it is not a piece of punctuation pretending to be a bullet. */
.invert__list li::before {
  content: '';
  width: 15px;
  height: 1px;
  background: rgba(255,255,255,.4);
  margin-top: .62em;
}
.invert__list li strong { display: block; color: var(--paper); font-weight: 600; margin-bottom: 1px; letter-spacing: .01em; }

.invert__more {
  display: inline-block;
  margin-top: 30px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.45);
  padding-bottom: 3px;
}
.invert__more:hover { border-bottom-color: var(--paper); }

.invert--hero .invert__inner { padding-top: 104px; padding-bottom: 104px; }

@media (max-width: 900px) {
  .invert__inner { grid-template-columns: 1fr; gap: 34px; padding: 62px 28px 66px; }
  .invert__seal { margin-top: 26px; width: 72px; height: 72px; }
  .invert__body { padding-top: 0; }
  .invert__body p { font-size: 1.05rem; }
}
@media (max-width: 620px) {
  .invert__inner { padding-left: 20px; padding-right: 20px; }
}

/* -------------------------------- notices --------------------------------- */

.notice {
  font-family: var(--ui); font-size: 12.5px; line-height: 1.5;
  border-left: 2px solid var(--muted);
  background: var(--paper-warm);
  padding: 11px 14px;
  margin: 16px 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.notice--error { border-left-color: var(--red); color: var(--red); background: rgba(176,58,38,.05); }
.notice--good { border-left-color: var(--green); }
.notice[hidden] { display: none; }

/* --------------------------------- panels --------------------------------- */

.panel { border-top: 1px solid var(--rule); padding-top: 22px; margin-top: 34px; }

details.disclose { border-bottom: 1px solid var(--rule-soft); }
details.disclose summary {
  font-family: var(--ui); font-size: 12.5px; font-weight: 500;
  padding: 12px 0; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
details.disclose summary::-webkit-details-marker { display: none; }
details.disclose summary::after { content: '+'; font-size: 15px; color: var(--muted); }
details.disclose[open] summary::after { content: '\2212'; }
details.disclose .disclose__body { padding-bottom: 16px; font-size: .91rem; color: var(--ink-soft); }
details.disclose ul { margin: 0; padding-left: 1.1em; }
details.disclose li { margin-bottom: .45em; }

/* --------------------------------- footer --------------------------------- */

.foot {
  border-top: 1px solid var(--ink);
  margin-top: 70px;
  background: var(--paper);
}
.foot__inner {
  max-width: var(--shell); margin: 0 auto; padding: 34px 28px 44px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 36px;
  font-family: var(--ui); font-size: 12.5px; color: var(--muted); line-height: 1.65;
}
.foot__inner h4 {
  font-family: var(--ui); font-size: 10.5px; font-weight: 600;
  letter-spacing: .02em; color: var(--ink);
  margin: 0 0 10px;
}
.foot__inner a { color: var(--muted); text-decoration-color: var(--rule); }
.foot__inner a:hover { color: var(--ink); }
.foot__links { list-style: none; margin: 0; padding: 0; }
.foot__links li { margin-bottom: 5px; }
.foot__legal {
  max-width: var(--shell); margin: 0 auto; padding: 0 28px 34px;
  font-family: var(--ui); font-size: 11px; color: var(--faint);
  border-top: 1px solid var(--rule-soft); padding-top: 16px;
  display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between;
}
.foot address { font-style: normal; }

/* ------------------------------ confirmation ------------------------------ */

.receipt {
  border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--card); padding: 30px 32px; max-width: 620px;
}
.receipt__ref {
  font-family: var(--ui); font-size: 21px; font-weight: 600;
  letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.receipt dl { display: grid; grid-template-columns: 128px 1fr; gap: 9px 18px; margin: 24px 0 0; font-size: .95rem; }
.receipt dt { font-family: var(--ui); font-size: 11px; letter-spacing: .01em; color: var(--muted); padding-top: 3px; }
.receipt dd { margin: 0; }

/* -------------------------------- responsive ------------------------------ */

@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr.
     A grid column defaults to min-content, so the auto-fill slot grid inside
     refused to shrink and pushed the whole page to 643px on a 390px phone.
     Saturday and Sunday sat off-screen with nothing to suggest scrolling, the
     fourth slot in each row was clipped, and the time zone line was cut off
     mid-sentence. The desktop rule already had this; the mobile one lost it. */
  .split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail { position: static; margin-top: 34px; }
  .foot__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .shell, .masthead__inner, .foot__inner, .foot__legal { padding-left: 20px; padding-right: 20px; }
  .service label { grid-template-columns: 20px minmax(0, 1fr); }
  .service__price { grid-column: 2; text-align: left; margin-top: 6px; }
  .service__summary, .service__covers, .service__note { grid-column: 2 / -1; }
  .field--half { grid-template-columns: 1fr; gap: 0; }
  .slots { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .foot__inner { grid-template-columns: 1fr; gap: 26px; }
  .masthead__meta { font-size: 10px; }
  .masthead__mark img { height: 30px; }
  .receipt { padding: 22px 20px; }
  .receipt dl { grid-template-columns: 1fr; gap: 2px 0; }
  .receipt dd { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  body::before, .masthead__meta, .foot__links { display: none; }
  body { background: #fff; }
}


/* ============================== division heads ============================= */

.division {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin: 34px 0 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--ink);
}
.division:first-child { margin-top: 0; }
.division__name { font-family: var(--display); font-size: 1.18rem; font-weight: 600; }
.division__blurb { font-family: var(--ui); font-size: 12px; color: var(--muted); }

.services + .division { margin-top: 40px; }

/* ================================ waitlist ================================= */

.waitcta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  padding: 14px 17px;
  margin-top: 20px;
}
.waitcta p { margin: 0; font-family: var(--ui); font-size: 12.5px; color: var(--muted); max-width: 52ch; line-height: 1.5; }
.waitcta strong { color: var(--ink); font-weight: 600; display: block; margin-bottom: 2px; font-size: 13px; }

@media (max-width: 900px) {
  .intro__grid { grid-template-columns: 1fr; gap: 26px; }
  .intro__lead { max-width: none; }
}


/* ================================== hero ===================================
   White, with the initiative panel bleeding off the right edge. The panel is
   the same black as the privacy statement below it, so the two run together
   down the right side of the page with no seam.
   ========================================================================== */

.hero {
  position: relative;
  background: var(--paper);
  /* No rule at the foot: what sits below is the privacy statement in the same
     black as the panel, so a grey hairline would only show as a seam. */
}

.hero__body {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 92px 28px 88px;
  /* Room for the panel, so nothing ever runs under it. */
  padding-right: calc(42% + 44px);
}

.hero__line {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.5vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -.018em;
  margin: 0 0 30px;
  max-width: 20ch;
}
.hero__line em {
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
}

.hero__lead {
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 1.05em;
}

/* The panel. Full height of the section, flush to the right edge. The line is
   set live rather than shipped as a picture: same face, sharp at any density,
   and it costs nothing to load. */
.hero__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42%;
  /* Ink, so it runs on into the privacy statement below with no seam. */
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 22px;
}
/* The seal is capped rather than filling the panel: at full bleed the engraving
   overwhelms the headline beside it, and the black margin is what makes it read
   as one field of ink rather than a picture pasted on. */
.hero__seal {
  display: block;
  width: 100%;
  max-width: 640px;
}
.hero__seal img {
  display: block;
  width: 100%;
  height: auto;
}

/* The way in.
   No button, no circle: a label and an arrow sitting on one ruled line, the way
   a field is ruled. At rest the rule is grey and the arrow is muted. On hover
   an ink rule draws itself the full width and the arrow drops out through the
   floor while the next one arrives at the ceiling, which is the only motion in
   the piece and the reason it holds the eye. */

.way {
  display: inline-flex;
  align-items: flex-end;
  gap: 20px;
  margin-top: 40px;
  padding: 0 2px 9px;
  position: relative;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .012em;
}

/* Two rules on the same baseline: one resting, one that draws across. */
.way::before,
.way::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
}
.way::before { right: 0; background: var(--rule); }
.way::after {
  width: 0;
  background: var(--ink);
  transition: width .5s cubic-bezier(.22,.61,.36,1);
}
.way:hover::after,
.way:focus-visible::after { width: 100%; }

.way__label { display: block; }

/* A rectangular window, so the arrows are clipped by the line rather than by a
   shape of their own. */
.way__disc {
  flex: none;
  display: block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  margin-bottom: 1px;
}
.way__arrows {
  display: block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.way__arrows svg {
  display: block;
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: color .3s ease;
}
.way:hover .way__arrows,
.way:focus-visible .way__arrows { transform: translateY(-16px); }
.way:hover .way__arrows svg,
.way:focus-visible .way__arrows svg { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .way::after, .way__arrows, .way__arrows svg { transition: none; }
}

/* The privacy statement continues the panel's black, edge to edge. */
.hero + .invert { border-top: 0; }

@media (max-width: 980px) {
  .hero__body { padding-right: calc(38% + 30px); }
  .hero__panel { width: 38%; padding: 20px; }
}

@media (max-width: 760px) {
  /* The panel drops below the copy and becomes the lead-in to the privacy
     statement, which keeps the black continuous on a narrow screen too. The
     seal is sized to the width here rather than cropped to a fixed strip. */
  .hero__body { padding: 56px 24px 46px; }
  .hero__seal { max-width: 74vw; }
  .hero__panel {
    position: static;
    width: 100%;
    height: auto;
    padding: 4px 24px 44px;
    bottom: auto;
  }
  .way { margin-top: 32px; gap: 16px; }
}

/* ========================= blur on hover, privacy ==========================
   Look at any part of the privacy statement and it obscures itself. It is a
   joke that is also the point, and it costs nothing when a pointer is absent.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .invert .blurable {
    transition: filter .28s ease, opacity .28s ease;
    will-change: filter;
  }
  .invert .blurable:hover {
    filter: blur(5px);
    opacity: .82;
  }
  .invert__claim.blurable:hover { filter: blur(7px); }
  /* Links have to stay usable, so they resist. */
  .invert .blurable a:hover { filter: none; }
}

/* ====================== peppered constellations ============================ */


/* ============================== policies page ============================== */

.policynav {
  display: flex; flex-wrap: wrap; gap: 0 26px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 13px 0;
  margin: 34px 0 0;
  font-family: var(--ui); font-size: 12.5px;
}
.policynav a { color: var(--muted); text-decoration: none; }
.policynav a:hover { color: var(--ink); }
.policynav a[aria-current='true'] { color: var(--ink); font-weight: 600; }

.policysection { padding-top: 52px; scroll-margin-top: 20px; }
.policysection__title { font-family: var(--display); font-size: 1.9rem; font-weight: 500; margin: 0; }
.policysection__lead { color: var(--muted); margin: 8px 0 26px; max-width: 60ch; }

.railnote {
  font-family: var(--ui);
  font-size: 11px;
  color: var(--faint);
  line-height: 1.5;
  margin: 16px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--rule-soft);
}


/* ------------------------- the field that is wanted ----------------------- */

/* When someone presses pay with something missing, the page takes them to the
   field and marks it. The mark clears the moment they type, so it is a pointer
   rather than a telling-off. */
.is-wanted {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}
input.is-wanted, select.is-wanted, textarea.is-wanted {
  border-color: var(--red);
}


/* ------------------------------ paying overlay ---------------------------- */

/* Up while a payment is in flight. Deliberately plain: this is not the moment
   for a flourish, it is the moment to say clearly that something is happening
   and that pressing things again would be a bad idea. */

.paying {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(2px);
}
.paying__card {
  max-width: 340px;
  padding: 0 28px;
  text-align: center;
}
.paying__spinner {
  width: 26px;
  height: 26px;
  margin: 0 auto 20px;
  border: 1.5px solid var(--rule);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: paying-turn .9s linear infinite;
}
@keyframes paying-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .paying__spinner { animation-duration: 3s; }
}
.paying__line {
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.25;
  margin: 0 0 10px;
}
.paying__detail {
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* Nothing behind the overlay accepts input while it is up. */
body.is-paying { overflow: hidden; }
body.is-paying .shell input,
body.is-paying .shell select,
body.is-paying .shell textarea,
body.is-paying .shell button { pointer-events: none; }

/* An undertaking stated as a heading alone, with no sentence beneath it. The
   heading's bottom margin exists only to part it from that sentence. */
.invert__list li.is-bare strong { margin-bottom: 0; }

/* ------------------------- moving your own booking ------------------------- */

/* Scoped to the manage panel so it cannot disturb the booking page's own
   calendar, which uses the same class names with a different structure. */
#move-days {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  -ms-overflow-style: none;
  scrollbar-width: thin;
}
#move-days .cal__day {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 92px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  background: var(--paper);
  cursor: pointer;
  font-family: var(--ui);
  transition: border-color .15s ease, background .15s ease;
}
#move-days .cal__day:hover { border-color: var(--ink); }
#move-days .cal__day.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
#move-days .cal__date { font-size: 12.5px; letter-spacing: .02em; }
#move-days .cal__n { font-size: 10.5px; color: var(--muted); }
#move-days .cal__day.is-on .cal__n { color: rgba(255, 255, 255, .7); }

#move-slots { display: flex; flex-wrap: wrap; gap: 8px; }
#move-slots .slot {
  font-family: var(--ui);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  padding: 9px 14px;
  border: 1px solid var(--rule);
  background: var(--paper);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
#move-slots .slot:hover { border-color: var(--ink); }
#move-slots .slot.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

#move-said { margin-top: 18px; }