/* ==========================================================================
   Associated Konsultants — site stylesheet
   First written 27 Aug 2026 for the Insights pages. This is the seed of the
   full site's CSS: every other page will be built on these tokens.
   ========================================================================== */

:root {
  /* Brand. #057DC1 measures 4.46:1 on white — below WCAG AA for body text —
     so it is reserved for the logo and display type. #0569A3 (5.91:1) is the
     UI blue and carries every link, button and small text. */
  --brand:        #057DC1;
  --brand-ui:     #0569A3;
  --brand-ui-dk:  #045481;
  --brand-light:  #9FD2F2;

  --ink:          #1a1a1a;
  --ink-soft:     #4a4a4a;
  --rule:         #dfe3e6;
  --paper:        #ffffff;
  --paper-tint:   #f6f8fa;

  /* Pale blue surfaces, drawn from the brand. Checked against WCAG AA:
     on #eef5fb, body ink is 15.8:1, secondary 8.1:1, links 5.4:1. */
  --surface:      #eef5fb;
  --surface-soft: #f4f9fd;
  --surface-line: #d3e4f2;

  /* Dark blue, for the footer. White on #0b3c61 is 11.5:1. */
  --navy:        #0b3c61;
  --navy-ink:    #cfe4f3;

  --serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --measure: 34rem;   /* ~68 characters — the readable line length */
  --wide:    62rem;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.65;
}

/* ---------- links ---------- */

a { color: var(--brand-ui); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover, a:focus { color: var(--brand-ui-dk); }
a:focus-visible { outline: 3px solid var(--brand-light); outline-offset: 2px; }

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

.wrap    { width: 100%; max-width: var(--wide);    margin: 0 auto; padding: 0 1.25rem; }
.measure { width: 100%; max-width: var(--measure); margin: 0 auto; }

.skip {
  position: absolute; left: -9999px;
  background: var(--paper); color: var(--brand-ui); padding: .75rem 1rem; z-index: 10;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- header ---------- */

.site-head {
  border-bottom: 3px solid var(--brand);
  padding: 1.15rem 0;
  font-family: var(--sans);
  background: var(--paper);
}
.site-head .wrap {
  display: flex; flex-wrap: wrap; gap: .8rem 1.4rem;
  align-items: center; justify-content: space-between;
}
@media (min-width: 62rem) {
  .site-head .wrap { flex-wrap: nowrap; }
  .site-nav { flex: 0 1 auto; flex-wrap: nowrap; justify-content: center; margin: 0 auto; }
  .site-nav a { white-space: nowrap; padding: .35rem .45rem; }
}

.brand-lockup { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-lockup img { width: 54px; height: auto; display: block; flex: none; }

.wordmark {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--brand-ui);
  line-height: 1.15;
}
.wordmark span {
  display: block; font-size: .66rem; font-weight: 400; letter-spacing: .085em;
  color: var(--ink-soft); text-transform: none; margin-top: .12rem;
}

.site-nav { display: flex; flex-wrap: wrap; gap: .25rem .2rem; font-size: .89rem; }
.site-nav a {
  color: var(--ink-soft); text-decoration: none;
  padding: .35rem .55rem; border-radius: 3px;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover { color: var(--brand-ui); background: var(--surface-soft); }

/* The page you are on: bold, brand colored, and underscored by a brand rule.
   Three signals, so it reads at a glance and does not rely on color alone. */
.site-nav a[aria-current="page"] {
  color: var(--brand-ui); font-weight: 700;
  background: var(--surface); border-bottom-color: var(--brand);
}

.head-badge { flex: none; display: block; }
.head-badge img { width: 124px; height: auto; display: block; }
@media (max-width: 61rem) { .head-badge { display: none; } }

/* ---------- type ---------- */

h1, h2, h3 { font-family: var(--sans); line-height: 1.2; color: var(--ink); }
h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); letter-spacing: -.015em; margin: 0 0 .6rem; }
h2 { font-size: clamp(1.25rem, 3vw, 1.5rem); margin: 2.6rem 0 .7rem; }
h3 { font-size: 1.1rem; margin: 2rem 0 .5rem; }

p { margin: 0 0 1.15rem; }
strong { font-weight: 700; }

.lede { font-size: 1.22rem; color: var(--ink-soft); }

.meta {
  font-family: var(--sans); font-size: .82rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 1.4rem;
}

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

/* ---------- article ---------- */

.article { padding: 3rem 0 1rem; }
.article h2:first-of-type { margin-top: 2rem; }

.endnote {
  font-family: var(--sans); font-size: .95rem; color: var(--ink-soft);
  border-left: 3px solid var(--brand-light); padding: .1rem 0 .1rem 1rem; margin: 2rem 0 0;
}

/* ---------- index cards ---------- */

.card {
  border-top: 1px solid var(--rule);
  padding: 1.9rem 0;
}
.card:last-of-type { border-bottom: 1px solid var(--rule); }
.card h2 { margin: .2rem 0 .6rem; font-size: clamp(1.3rem, 3.2vw, 1.7rem); }
.card h2 a { color: var(--ink); text-decoration: none; }
.card h2 a:hover { color: var(--brand-ui); text-decoration: underline; }
.card p { margin-bottom: .8rem; }
.more { font-family: var(--sans); font-weight: 600; font-size: .95rem; text-decoration: none; }
.more:hover { text-decoration: underline; }

.talks { font-family: var(--sans); font-size: .97rem; }
.talks dt { font-weight: 700; margin-top: 1.4rem; }
.talks dd { margin: .2rem 0 0; color: var(--ink-soft); }

/* ---------- call to action ---------- */

.cta {
  background: linear-gradient(180deg, var(--surface-soft), var(--surface));
  border-top: 1px solid var(--surface-line); margin-top: 0; padding: 3rem 0;
}
.cta h2 { margin-top: 0; }

/* The closing block's column is wider than the reading measure, but the prose inside it is
   held to the measure so sentences stay readable. Only the contact line uses the extra width
   — it is a single line of metadata, not something anyone reads left to right at length, and
   at 34rem it wrapped. Everything keeps the same left edge. */
.cta .measure   { max-width: 46rem; }
.cta .measure p { max-width: var(--measure); }
.cta .measure p.cta-note { max-width: none; }   /* must out-rank the rule above */

.button {
  display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 1rem;
  background: var(--brand-ui); color: #fff; text-decoration: none;
  padding: .8rem 1.5rem; border-radius: 3px;
}
.button:hover, .button:focus { background: var(--brand-ui-dk); color: #fff; }

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

.site-foot {
  margin-top: 0; padding: 1.9rem 0 2rem;
  background: var(--navy); color: var(--navy-ink);
  font-family: var(--sans); font-size: .86rem; line-height: 1.5;
  text-align: center;
}
.site-foot a { color: #ffffff; text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.site-foot p { margin: .3rem 0; }
.site-foot ul {
  list-style: none; margin: 0 0 .55rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .25rem 1.15rem; justify-content: center;
}
.site-foot .fine {
  color: #9dc2dd; margin-top: .55rem;
  /* One line on a phone, with real headroom rather than a hairline fit. The first attempt
     was calibrated by measuring in a headless browser, whose fallback font is narrower than
     the system faces a real phone uses — so it fit here and wrapped on the device. This is
     sized for a font about 10% wider than measured, and the line also reclaims part of the
     wrap's side padding, which buys roughly 20px more than the text needs.
     nowrap is deliberately NOT used: it does not prevent wrapping so much as convert it
     into the whole page scrolling sideways. */
  font-size: clamp(.6rem, 2.6vw, .8rem);
}
@media (max-width: 30rem) {
  .site-foot .fine { margin-left: -.75rem; margin-right: -.75rem; }
}

@media print {
  .site-head, .site-nav, .cta, .site-foot { display: none; }
  body { font-size: 11pt; }
}

/* ==========================================================================
   Homepage components — added 28 Aug 2026
   ========================================================================== */

/* ---------- hero ---------- */

.hero {
  padding: 3.4rem 0 3rem;
  background:
    radial-gradient(60rem 26rem at 78% -10%, rgba(159,210,242,.34), transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 55%, var(--paper) 100%);
  border-bottom: 1px solid var(--surface-line);
  position: relative; overflow: hidden;
}
/* A faint grid, drawn in CSS — the "technology" texture of the old site
   without the stock artwork, and with no image to download. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(5,125,193,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5,125,193,.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(70% 60% at 70% 10%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(70% 60% at 70% 10%, #000 0%, transparent 72%);
}
.hero .wrap { position: relative; }
.hero-grid { display: grid; gap: 2.2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 56rem) {
  .hero-grid { grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: 3rem; }
}
.hero h1 { font-size: clamp(2rem, 4.6vw, 3rem); margin-bottom: 1.1rem;
           text-wrap: balance; }
.hero .lede { font-size: 1.2rem; }
.hero-portrait {
  max-width: 340px; width: 100%; height: auto;   /* height:auto — without it the
     width/height attributes squash the image when CSS resizes it */
  display: block; border-radius: 5px;
  box-shadow: 0 1px 2px rgba(9,52,84,.10), 0 8px 24px rgba(9,52,84,.10);
}
.hero-credits {
  font-family: var(--sans); font-size: .84rem; color: var(--ink-soft);
  margin-top: .8rem; line-height: 1.5; max-width: 320px;
}
.cta-note { font-family: var(--sans); font-size: .9rem; color: var(--ink-soft); margin-top: .7rem; }

/* Narrow screens: the phone, email and location stack one per line rather than wrapping
   mid-sentence, and the separators — which only exist to divide items on one line —
   are removed. */
@media (max-width: 40rem) {
  .cta-note { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
  .cta-note .sep { display: none; }
}

/* ---------- credentials band ---------- */

.creds { background: var(--paper); border-bottom: 1px solid var(--surface-line); padding: 1rem 0; }
.creds ul {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: .5rem 1.6rem; justify-content: center;
  font-family: var(--sans); font-size: .87rem; color: var(--ink-soft);
}
.creds a { color: var(--brand-ui); text-decoration: none; }
.creds a:hover { text-decoration: underline; }

/* ---------- generic section ---------- */

.section { padding: 3.4rem 0; }
.section + .section { border-top: 1px solid var(--rule); }

/* Tinted bands, applied in the markup, give the page rhythm without rules
   everywhere. A tinted section drops the divider it would otherwise inherit. */
.section.tint {
  background: var(--surface-soft);
  border-top: 1px solid var(--surface-line);
  border-bottom: 1px solid var(--surface-line);
}
.section.tint + .section { border-top: 0; }
.section h2 { margin-top: 0; }
.section-lead { font-size: 1.15rem; color: var(--ink-soft); max-width: var(--measure); }

/* ---------- client path ---------- */

.path { list-style: none; counter-reset: step; margin: 1.6rem 0 0; padding: 0; max-width: 44rem; }
.path li {
  counter-increment: step; position: relative;
  padding: .95rem 1rem .95rem 3.4rem;
  background: var(--paper); border: 1px solid var(--surface-line);
  border-radius: 4px; margin-bottom: .5rem;
  font-family: var(--sans); font-size: .98rem;
}
.path li::before {
  content: counter(step); position: absolute; left: .75rem; top: .85rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--brand-ui); color: #fff;
  font-size: .9rem; font-weight: 700; display: grid; place-items: center;
}
.path b { font-weight: 700; }
.path span { display: block; color: var(--ink-soft); font-size: .9rem; }
.path .paid::before { background: var(--ink); }

/* ---------- three-up ---------- */

.three { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 1.6rem; }
@media (min-width: 52rem) { .three { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; } }
.three h3 { margin-top: 0; }
.three p:last-child { margin-bottom: 0; }

/* ---------- two-up ---------- */

.two { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 1.4rem; }
@media (min-width: 48rem) { .two { grid-template-columns: repeat(2, 1fr); gap: 2.4rem; } }
.study {
  background: var(--paper); border: 1px solid var(--surface-line);
  border-top: 3px solid var(--brand-ui); border-radius: 4px;
  padding: 1.2rem 1.3rem 1.1rem;
}
.study h3 { margin-top: 0; font-size: 1.15rem; }
.study .meta { margin-bottom: .7rem; }

/* ---------- pull quote ---------- */

blockquote.quote {
  margin: 2rem 0 0; padding: 0 0 0 1.4rem; border-left: 3px solid var(--brand-light);
  max-width: var(--measure);
}
blockquote.quote p { font-size: 1.08rem; }
blockquote.quote cite { font-family: var(--sans); font-style: normal; font-weight: 600; font-size: .92rem; }
blockquote.quote cite span { display: block; font-weight: 400; color: var(--ink-soft); }

/* ---------- client logos ---------- */

.clients {
  list-style: none; margin: 2.2rem 0 0; padding: 0;
  display: grid; gap: 2rem 2.4rem;
  grid-template-columns: repeat(2, 1fr); align-items: center;
}
.clients li {
  background: var(--paper); border: 1px solid var(--surface-line); border-radius: 4px;
  padding: 1rem .9rem; display: grid; place-items: center; min-height: 118px;
}
@media (min-width: 40rem) { .clients { grid-template-columns: repeat(4, 1fr); } }
.clients img {
  max-width: 100%; max-height: 78px; width: auto; height: auto;
  display: block; margin: 0 auto;
}
@media (min-width: 40rem) { .clients img { max-height: 92px; } }


/* ---------- offers ---------- */

.offer { border-top: 1px solid var(--rule); padding: 1.3rem 0; max-width: 44rem; }
.offer:last-of-type { border-bottom: 1px solid var(--rule); }
.offer h3 { margin: 0 0 .4rem; font-size: 1.08rem; }
.offer p { margin: 0; }
.offer p + p { margin-top: .5rem; }

/* ---------- FAQ ---------- */

.faq { max-width: var(--measure); margin-top: 1.4rem; }
.faq dt { font-family: var(--sans); font-weight: 700; margin-top: 1.5rem; }
.faq dd { margin: .35rem 0 0; }

/* ---------- misc ---------- */

.note { font-family: var(--sans); font-size: .92rem; color: var(--ink-soft); }
.center { text-align: center; }
.measure-wide { width: 100%; max-width: 46rem; }

/* Available to a screen reader, invisible on screen. Carries the "(opens in a new tab)"
   note the build appends to every off-site link. */
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Off-site text links carry a small arrow, so the change of tab is announced visually
   as well. Links wrapping an image (the BBB seal) are excluded — the marker would sit
   on top of the artwork. */
a[target="_blank"]:not(:has(img))::after {
  content: "\2197";                 /* ↗ */
  font-family: var(--sans);
  font-size: .78em;
  line-height: 1;
  margin-left: .18em;
  vertical-align: .12em;
  text-decoration: none;
  opacity: .75;
}
/* Left-aligned reading column, for prose inside a flush-left section. */
.prose { max-width: var(--measure); }

/* ---------- interior pages ---------- */

/* Sub-heading that opens a block within a section. */
.rule-head {
  margin: 2.8rem 0 1rem;
  padding-top: 1rem;
  border-top: 2px solid var(--brand-light);
  font-size: 1.22rem;
}
.section > .wrap > .rule-head:first-of-type { margin-top: 2rem; }

/* Named specialist: portrait beside the paragraphs. */
.specialist { display: grid; gap: 1.4rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 46rem) {
  .specialist { grid-template-columns: 170px minmax(0, 1fr); gap: 1.8rem; }
}
.specialist img {
  width: 170px; max-width: 100%; height: auto; display: block;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(9, 52, 84, .10), 0 6px 18px rgba(9, 52, 84, .10);
}
.specialist p:last-child { margin-bottom: 0; }

/* Four scope categories. */
.scope { display: grid; gap: 1.6rem 2rem; grid-template-columns: 1fr; margin: 2rem 0 0; }
@media (min-width: 44rem) { .scope { grid-template-columns: repeat(2, 1fr); } }
.scope h4 {
  font-family: var(--sans); font-size: 1rem; font-weight: 700;
  color: var(--brand-ui-dk); margin: 0 0 .4rem; line-height: 1.3;
}
.scope p { margin: 0; }

/* A single line that carries the weight of the block above it. */
.pull {
  font-family: var(--sans); font-size: 1.08rem; font-weight: 600;
  color: var(--ink); max-width: var(--measure);
  margin: 1.8rem 0 0; padding-left: 1rem;
  border-left: 3px solid var(--brand);
}

/* ---------- contact and about ---------- */

/* Phone numbers and the email address, set large enough to read across a room and to be
   an obvious tap target on a phone. */
.contact-lines {
  font-family: var(--sans); font-size: clamp(1rem, 4.8vw, 1.25rem); font-weight: 600;
  line-height: 1.5; margin-bottom: 1.2rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
  /* Last-resort guard: the email address must never push the page sideways. */
  overflow-wrap: anywhere;
}
.contact-lines .tel { display: inline-flex; align-items: baseline; gap: .55rem; }
.contact-lines a { text-decoration: none; }
.contact-lines a:hover { text-decoration: underline; }
.contact-lines .tel-label {
  font-weight: 400; font-size: .82rem; color: var(--ink-soft);
  letter-spacing: .06em; text-transform: uppercase;
}

/* On a phone the two numbers cannot sit side by side, so they stack — and the toll-free
   number goes on top, because a visitor out of state is the one most likely to be reading
   this on a phone. Source order keeps the Tucson number first, which is what the wider
   layout shows: a local number is a local-search signal and a toll-free one is not. */
.contact-lines .tel-free { order: -1; }
@media (min-width: 34rem) {
  .contact-lines {
    flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .4rem 2rem;
  }
  .contact-lines .tel-free { order: 0; }
}

/* The at-a-glance facts table on the about page. */
.facts {
  margin: 1.6rem 0 0; padding: 0;
  font-family: var(--sans); font-size: .97rem;
  max-width: 46rem;
}
.facts dt {
  font-weight: 700; color: var(--ink);
  border-top: 1px solid var(--rule); padding-top: .75rem; margin-top: .75rem;
}
.facts dd { margin: .2rem 0 0; color: var(--ink-soft); }
@media (min-width: 40rem) {
  .facts { display: grid; grid-template-columns: 13rem minmax(0, 1fr); column-gap: 1.5rem; }
  .facts dt { grid-column: 1; }
  .facts dd { grid-column: 2; border-top: 1px solid var(--rule); padding-top: .75rem;
              margin-top: .75rem; }
}

/* A named local client on the Tucson page: heading, one line of context, then the quote. */
.local { border-top: 2px solid var(--brand-light); padding-top: 1.4rem; margin-top: 1.8rem; }
.local h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
.local > p { max-width: var(--measure); }
.local blockquote.quote { margin-bottom: 0; }

/* ---------- photograph pair ---------- */

/* Two frames side by side, sharing one caption. height:auto is not optional — the width and
   height attributes on the images would otherwise fight the CSS width and distort them. */
.photos { margin: 2rem 0 0; }
.photos img {
  width: 100%; height: auto; display: block;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(9, 52, 84, .10), 0 8px 24px rgba(9, 52, 84, .10);
}
@media (min-width: 46rem) {
  /* Column widths are the two frames' aspect ratios — 1600x1067 and 1600x1214 — so both
     images finish at the same height without cropping either one. */
  .photos { display: grid; grid-template-columns: 1.5fr 1.318fr; gap: 1.2rem; align-items: start; }
  .photos figcaption { grid-column: 1 / -1; }
}
.photos img + img { margin-top: 1.2rem; }
@media (min-width: 46rem) { .photos img + img { margin-top: 0; } }
.photos figcaption {
  font-family: var(--sans); font-size: .84rem; color: var(--ink-soft);
  margin-top: .9rem;
}

/* ---------- case studies ---------- */

.case { border-top: 2px solid var(--brand-light); padding: 1.6rem 0 .6rem; }
.case:first-of-type { margin-top: 1.6rem; }
.case h3 { margin: 0 0 1rem; font-size: clamp(1.2rem, 2.6vw, 1.45rem); }
.case .meta { margin-bottom: .5rem; }

/* Two or three headline numbers, pulled out of the prose. */
.stats {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: grid; gap: 1rem;
  /* auto-fit, not a viewport media query: this block now lives inside the reading column,
     so it has to respond to the space it is given rather than to the window. */
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  max-width: 44rem;
}
.stats li {
  background: var(--paper);
  border: 1px solid var(--surface-line);
  border-left: 3px solid var(--brand);
  border-radius: 3px;
  padding: .9rem 1rem;
}
.stats b {
  display: block; font-family: var(--sans); font-weight: 700;
  font-size: 1.12rem; line-height: 1.25; color: var(--ink);
}
.stats span {
  display: block; font-family: var(--sans); font-size: .84rem;
  color: var(--ink-soft); margin-top: .3rem;
}

/* ---------- vendor list ---------- */

/* Names, not logos. The claim under this grid — "none of them pays us anything" — has to be
   exactly true of every entry, so the grid is a precise list rather than decoration. Set in
   the sans face at a size that reads as a reference table. */
.vendors {
  list-style: none; margin: 1.8rem 0 0; padding: 0;
  display: grid; gap: .55rem;
  grid-template-columns: repeat(2, 1fr);
  font-family: var(--sans); font-size: .97rem;
}
@media (min-width: 34rem) { .vendors { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 52rem) { .vendors { grid-template-columns: repeat(4, 1fr); } }
.vendors li {
  background: var(--surface-soft);
  border: 1px solid var(--surface-line);
  border-radius: 3px;
  padding: .6rem .8rem;
  color: var(--ink);
}

/* ---------- booking page ---------- */

/* The Bookings calendar, framed. Given a generous fixed height so the visitor scrolls the
   page rather than a small window inside it — taller on narrow screens, where the calendar
   stacks. The tinted background means an empty frame reads as "still loading" rather than
   as a hole in the page. */
/* The booking section breaks out of the site's 62rem measure. Microsoft's page has its own
   responsive breakpoint: given less width than it wants it drops to the stacked phone layout,
   calendar above times, which needs a long vertical scroll. Wider than that breakpoint it lays
   the two side by side and fits without scrolling. 76rem clears it with room to spare. */
.wrap-wide { max-width: 76rem; }

.book-frame {
  width: 100%; height: 2000px;
  margin: 0 auto;
  background: var(--surface-soft);
  border: 1px solid var(--surface-line);
  border-radius: 4px;
  overflow: hidden;
}
.book-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 46rem) { .book-frame { height: 2350px; } }

.book-fallback { margin-top: 1rem; text-align: center; }

/* Header, wide screens — placed last so it wins over the base .site-nav rules. */
@media (min-width: 62rem) {
  .site-head .wrap { flex-wrap: nowrap; }
  .site-nav { flex: 0 1 auto; flex-wrap: nowrap; justify-content: center; margin: 0 auto; }
  .site-nav a { white-space: nowrap; padding: .35rem .42rem; }
  .brand-lockup .wordmark { white-space: nowrap; }
}