/* Inquire2Esquire - tokens and shared rules, lifted out of the Claude
   Design bundle so a colour is one edit rather than nine hundred. */
:root {
    --navy:#002F4E; --navy2:#013F63; --steel:#3E6E90; --sky:#74A4C1;
    --bronze:#B9793F; --bronze2:#C18653;
    --cream:#FBF7EC; --paper:#FFFFFF;
    --ink:#17242E; --muted:#5C6B76; --dim:#6E7C87;
    --line:#E4DCCC; --line2:#DCE6EE; --skyfaint:#EAF1F7;
    --ok:#1E7A46; --ok-bg:#E9F3ED;
    --shadow:0 1px 2px rgba(0,32,60,.06), 0 8px 24px rgba(0,32,60,.06);
    --disp:'Spectral',Georgia,serif;
    --body:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  }
  * { box-sizing:border-box; }
  html, body { margin:0; padding:0; background:var(--cream); }
  body { color:var(--ink); font-family:var(--body); font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased; }
  /* 66ch was a cautious measure for a page of running text, and this is not
     one: most paragraphs here sit inside a bordered box that already sets
     their width, so the cap only left the right third of the box empty.
     78ch still breaks a line before it gets tiring. */
  p { max-width:78ch; }
  img { max-width:100%; }
  a { color:var(--steel); }
  a:hover { color:var(--navy); }
  a[aria-current="page"] { color:var(--ink) !important; border-bottom:2px solid var(--bronze); padding-bottom:2px; }
  :focus-visible { outline:3px solid var(--bronze); outline-offset:2px; }
  @keyframes i2e-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }

/* Hover states. The bundle carried these on a style-hover attribute,
   which no browser reads. They are real rules now, and the transitions
   they animate are still on the elements themselves. */
.hv1:hover { background:var(--navy2);transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,32,60,.22); }
.hv2:hover { background:var(--paper);border-color:var(--bronze);transform:translateY(-2px); }
.hv3:hover { transform:translateY(-3px);box-shadow:0 2px 4px rgba(0,32,60,.07), 0 18px 40px rgba(0,32,60,.11); }
.hv4:hover { transform:translateY(-3px);box-shadow:0 2px 4px rgba(0,32,60,.07), 0 18px 40px rgba(0,32,60,.11);border-color:var(--line2); }
.hv5:hover { background:var(--paper); }
.hv6:hover { color:var(--ink); }
.hv7:hover { color:#fff; }

/* The booking picker: who you are meeting, a month, and that day's times.
   Three panels on a desktop, stacked on a phone. The month grid is the point -
   it answers "which days are even open" without scrolling, which the old
   day-by-day list could not. */
.bk { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.05fr) minmax(0,.7fr);
  gap: 0; background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.bk-meta { padding: clamp(20px,3vw,28px); border-right: 1px solid var(--line); }
.bk-brand { font-family: var(--disp); font-weight: 700; font-size: 15px; color: var(--ink); }
.bk-brand span { color: var(--bronze); }
.bk-meta h3 { font-family: var(--disp); font-size: 1.5rem; font-weight: 600;
  margin: 10px 0 14px; letter-spacing: -.015em; }
.bk-meta p { color: var(--muted); font-size: 14px; margin: 16px 0 0; }
.bk-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.bk-facts li { color: var(--muted); font-size: 14px; display: flex; gap: 9px; align-items: baseline; }
.bk-ico { color: var(--bronze); font-size: 13px; }
.bk-when { color: var(--ink) !important; font-weight: 600; padding-top: 6px; }

.bk-cal { padding: clamp(20px,3vw,28px); border-right: 1px solid var(--line); }
.bk-calhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bk-calhead strong { font-family: var(--disp); font-size: 1.02rem; font-weight: 600; }
.bk-nav { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--cream); color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer; }
.bk-nav:hover:not(:disabled) { border-color: var(--bronze); }
.bk-nav:disabled { opacity: .35; cursor: default; }
.bk-dow, .bk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-dow { margin: 16px 0 6px; }
.bk-dow span { text-align: center; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim); font-weight: 600; }
.bk-day { aspect-ratio: 1; border-radius: 999px; border: 1px solid transparent;
  background: var(--cream); color: var(--ink); font: inherit; font-size: 14px;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease; }
.bk-day:hover:not(.off) { border-color: var(--bronze); }
.bk-day.off { background: transparent; color: var(--dim); opacity: .45; cursor: default; }
.bk-day.on { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.bk-pad { aspect-ratio: 1; }
.bk-tz { display: block; margin-top: 18px; font-size: 12.5px; color: var(--dim); }
.bk-tz select { display: block; width: 100%; margin-top: 6px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--cream);
  font: inherit; font-size: 13.5px; color: var(--ink); }

.bk-times { padding: clamp(20px,3vw,28px); min-width: 0; }
.bk-times h4 { font-family: var(--disp); font-size: .98rem; font-weight: 600; margin: 0 0 14px; }
.bk-slots { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; }
.bk-slot { padding: 11px 10px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--cream); color: var(--ink); font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, background .15s ease; }
.bk-slot:hover { border-color: var(--bronze); }
.bk-slot.sel { background: var(--ink); border-color: var(--ink); color: #fff; }
.bk-go { padding: 11px 10px; border-radius: 9px; border: 1px solid var(--navy);
  background: var(--navy); color: #fff; font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; }
.bk-go:hover { background: #16233f; }
.bk-none { color: var(--dim); font-size: 14px; margin: 0; }

/* The form step reuses the same shell so the panel does not jump about. */
.bk-form { grid-template-columns: minmax(0,.85fr) minmax(0,1.75fr); }
.bk-form .sched-form { padding: clamp(20px,3vw,28px); display: grid;
  grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.bk-form .sched-form label { display: grid; gap: 6px; font-size: 13px;
  color: var(--muted); font-weight: 500; }
.bk-form .sched-form .wide { grid-column: 1 / -1; }
.bk-form input, .bk-form select, .bk-form textarea { width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--cream); font: inherit; font-size: 14.5px; color: var(--ink); }
.bk-form textarea { resize: vertical; }
.bk-form .sched-go { grid-column: 1 / -1; padding: 12px 18px; border-radius: 10px;
  background: var(--navy); color: #fff; border: 1px solid var(--navy);
  font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.bk-form .sched-go:hover { background: #16233f; }
.bk-form .sched-go:disabled { opacity: .6; cursor: default; }
/* Shared with the /start chip bars, so the spacing is scoped to this panel
   rather than baked into the class. */
.linkish { background: none; border: 0; padding: 0; font: inherit;
  font-size: 13px; color: var(--bronze); cursor: pointer; text-align: left; }
.linkish:hover { text-decoration: underline; }
.bk-meta .linkish { margin-top: 18px; }

.sched-msg { grid-column: 1 / -1; color: #9b2c2c; font-size: 13.5px; margin: 0; }
.sched-done { text-align: center; padding: clamp(30px,6vw,54px) 20px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); }
.sched-done .tick { font-size: 34px; color: var(--bronze); line-height: 1; }
.sched-done h3 { font-family: var(--disp); font-size: 1.4rem; font-weight: 600; margin: 10px 0 6px; }
.sched-done .when { font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.sched-done p { color: var(--muted); font-size: 14.5px; margin: 0; }

@media (max-width: 980px) {
  .bk, .bk-form { grid-template-columns: 1fr; }
  .bk-meta, .bk-cal { border-right: 0; border-bottom: 1px solid var(--line); }
  .bk-slots { max-height: none; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .bk-go { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .bk-form .sched-form { grid-template-columns: 1fr; }
}

/* Shown only when live times cannot be fetched. It has to read as an offer,
   not as an error - a prospect who meets this should still leave a way to
   reach us, which is the whole reason the iframe is gone. */
.schedfail { background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(22px,4vw,30px); box-shadow: var(--shadow); text-align: center; }
.schedfail h3 { font-family: var(--disp); font-size: 1.25rem; font-weight: 600; margin: 0 0 8px; }
.schedfail p { color: var(--muted); margin: 0 auto 18px; max-width: 46ch; font-size: 14.5px; }
.schedfail-cta { display: inline-block; padding: 12px 22px; border-radius: 10px;
  background: var(--navy); color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; }
.schedfail-cta:hover { background: #16233f; }
.schedfail-alt { font-size: 13px; color: var(--dim); margin: 14px 0 0 !important; }
/* The embedded Bookings page. It does not resize to its own content, so the
   height is ours to choose: tall enough on a desktop to show the month, and
   on a phone bounded by the viewport so our nav and footer stay visible
   around it. A frame that is 1000px tall on a 700px screen is what made it
   read as "the whole page is now Microsoft". */
.schedframe { display: block; width: 100%; border: 1px solid var(--line);
  border-radius: 12px; background: #fff; color-scheme: light;
  height: min(1150px, max(640px, 88vh)); }
@media (max-width: 640px) { .schedfail { padding: 14px !important; } }

/* ── the scheduler ────────────────────────────────────────────────────────
   Ours, in front of Bookings. Styled from the same tokens as everything else,
   which is the entire reason for not using Microsoft's page in a frame. */
.sched { min-height: 120px; }
.sched-msg { color: var(--muted); font-size: 14.5px; margin: 0; padding: 18px 20px; }
.sched-tz { font-size: 12.5px; color: var(--dim); margin: 0; padding: 14px 20px 4px; }
.sched-day { padding: 10px 20px 14px; border-top: 1px solid var(--line); }
.sched-day:first-of-type { border-top: 0; }
.sched-day h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--ink); }
.sched-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.sched-slot {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 9px 14px; border-radius: 9px; background: var(--paper);
  border: 1px solid var(--line2); color: var(--steel);
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.sched-slot:hover { border-color: var(--bronze); color: var(--navy); transform: translateY(-1px); }
.sched-chosen {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 15px;
}
.linkish { background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
           font-size: 13.5px; color: var(--steel); text-decoration: underline; }
.sched-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 20px; }
.sched-form .wide, .sched-form .sched-go, .sched-form .sched-msg { grid-column: 1 / -1; }
.sched-form label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.sched-form label span { font-weight: 400; color: var(--dim); }
.sched-form input, .sched-form textarea {
  display: block; width: 100%; margin-top: 5px; font: inherit; font-size: 15px;
  padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line2);
  background: var(--paper); color: var(--ink);
}
.sched-form input:focus, .sched-form textarea:focus { outline: 2px solid var(--bronze); outline-offset: 1px; }
.sched-go {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 12px 22px; border-radius: 10px; border: 1px solid var(--navy);
  background: var(--navy); color: #fff;
}
.sched-go[disabled] { opacity: .6; cursor: default; }
.sched-done { text-align: center; padding: 34px 20px; }
.sched-done .tick {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--ok-bg); color: var(--ok); display: grid; place-items: center;
  font-size: 22px; font-weight: 700;
}
.sched-done h3 { margin: 0 0 6px; font-size: 1.2rem; }
.sched-done .when { font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.sched-done p { color: var(--muted); font-size: 14.5px; margin: 0 auto; max-width: 46ch; }
@media (max-width: 620px) { .sched-form { grid-template-columns: 1fr; } }


/* /start - the order form. Same tokens as everything else; the only new idea
   here is the chip, which is a checkbox that had to survive being tapped fifty
   times on a phone. */
.startwrap { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,.9fr);
  gap: clamp(18px,3vw,34px); align-items: start; margin: 8px 0 clamp(40px,6vw,64px); }
.startcol { display: grid; gap: clamp(14px,2vw,20px); min-width: 0; }
.startside { position: sticky; top: 86px; min-width: 0; }
.startcard { background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(20px,3vw,26px); box-shadow: var(--shadow); }
.startcard h2 { font-family: var(--disp); font-size: 1.2rem; font-weight: 600;
  margin: 0 0 6px; display: flex; align-items: baseline; gap: 10px; }
.stepno { font-family: var(--disp); color: var(--bronze); font-size: 1.15rem; font-weight: 600; }
.startnote { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.startsub { display: block; color: var(--muted); font-size: 13.5px; margin: 14px 0 6px; }
.startsub span { color: var(--dim); }
.startcard input[type=text], .startcard input[type=email] { width: 100%; box-sizing: border-box;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--cream);
  font: inherit; font-size: 15px; color: var(--ink); }
.startcard input:focus-visible { outline: 2px solid var(--bronze); outline-offset: 1px; }

.stepper { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stepper button { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--cream); font-size: 18px; line-height: 1; color: var(--ink); cursor: pointer; }
.stepper button:hover { border-color: var(--bronze); }
.stepper input { width: 76px; text-align: center; padding: 10px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--cream); font: inherit; font-size: 16px; color: var(--ink); }
.stepper-unit { color: var(--muted); font-size: 14px; }

.chipbar { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; flex-wrap: wrap; }
.chipcount { color: var(--dim); font-size: 13px; margin-left: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--cream); color: var(--muted); font: inherit; font-size: 13.5px;
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.chip:hover { border-color: var(--bronze); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
/* The interest chips on the booking form. A fieldset because it is one
   question with several answers, and a legend so a screen reader hears the
   question before the options rather than three unexplained buttons. */
.bk-int { border: 0; padding: 0; margin: 0; }
.bk-int legend { padding: 0; margin: 0 0 9px; font-size: 13px; font-weight: 600;
  color: var(--ink); display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; }
.bk-int .bk-hint { font-weight: 400; color: var(--dim); font-size: 12.5px; }
.bk-int .chip { font-size: 14px; padding: 7px 14px; }

.summary .sumrow { display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; color: var(--muted); }
.summary .sumrow b { color: var(--ink); white-space: nowrap; }
.summary .sumrow small { color: var(--dim); font-weight: 500; }
.sumtot { display: flex; justify-content: space-between; gap: 14px; padding: 14px 0 4px;
  font-family: var(--disp); font-size: 1.15rem; }
.sumtot b { font-weight: 600; }
.summeta { color: var(--dim); font-size: 12.5px; margin: 8px 0 0; }
.startgo { width: 100%; margin-top: 14px; padding: 13px 18px; border-radius: 10px;
  background: var(--navy); color: #fff; border: 1px solid var(--navy); font: inherit;
  font-weight: 600; font-size: 15px; cursor: pointer; }
.startgo:hover { background: #16233f; }
.startgo:disabled { opacity: .6; cursor: default; }

.startpaid { text-align: center; margin: 10px 0 clamp(40px,6vw,64px); }
.startpaid .tick { font-size: 34px; color: var(--bronze); line-height: 1; }
.startpaid h2 { font-family: var(--disp); justify-content: center; }

@media (max-width: 900px) {
  .startwrap { grid-template-columns: 1fr; }
  .startside { position: static; }
}



/* i2e-rise is defined in the bundle but never attached - Design ran it on route
   change, which a real page load does not have. Attaching it here keeps the
   entrance movement. The reduced-motion guard in the tokens above still wins. */
main > *, main { animation: i2e-rise .5s ease both; }
main > * { animation-delay: .04s; }

/* The tokens kill every animation outright when the device asks for reduced
   motion, which leaves the page snapping in. A slide is motion; a cross-fade is
   not, and it is the accepted middle ground - so the page still arrives softly
   for anyone who has that setting on, without moving anything across the
   screen. */
@media (prefers-reduced-motion: reduce) {
  @keyframes i2e-fade { from { opacity: 0; } to { opacity: 1; } }
  main > *, main { animation: i2e-fade .4s ease both !important; }
}

/* ── the mobile nav ───────────────────────────────────────────────────────
   Desktop is unchanged: the details and its panel are display:contents, so the
   links stay direct children of the nav's flex row and the hamburger is hidden.
   Below 820px the details becomes a real disclosure. Book a call is outside the
   collapse on purpose - it is what a visitor on a phone came to do. */
/* Desktop: the toggle and its button do not exist, and the panel dissolves so
   its children are ordinary members of the nav's flex row. */
.navtog { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* A ring drawn by the browser rather than by us - dark, not our bronze - was
   appearing around blocks that had been clicked. :focus-visible already gives
   keyboard users a proper indicator; this suppresses the default one for mouse
   focus only, so nothing is lost for anyone navigating by keyboard. */
:focus:not(:focus-visible) { outline: none; }
.mobbtn { display: none; }
.mobpanel { display: contents; }
/* Desktop: the panel's children are back in the nav's flex row, so the two
   buttons are ordered to the end to sit exactly where the design had them. */
nav [data-cta] { order: 9; }
/* ── the product switcher ──────────────────────────────────────────────
   The product word in the wordmark, opening the other two. A <details>, so
   it needs no script; the summary is restyled because a browser's own
   disclosure triangle beside a wordmark looks like a mistake. */
.markgroup { display: inline-flex; align-items: center; gap: 2px;
  margin-right: auto; padding-bottom: 4px; border-bottom: 2px solid var(--bronze); }
.markgroup > a { margin-right: 0 !important; }
/* The two cross-links. Without these the arrow inherits the page's default
   SVG size - which is the full 12px viewBox scaled to the line box, so it
   came out taller than the words beside it - and the anchors fall back to
   the site's blue underlined link style. */
.cross { color: var(--bronze) !important; font-weight: 600; font-size: 14.5px;
  text-decoration: none !important; white-space: nowrap;
  display: inline-flex; align-items: center; border-bottom: 0 !important; }
.cross:hover { text-decoration: underline !important; }
.cross .out { width: 9px; height: 9px; margin-left: 5px; opacity: .8;
  flex: 0 0 auto; }
.navsep { width: 1px; height: 18px; background: var(--line); flex: 0 0 auto; }
/* The bronze-ruled callout. The box is the measure there, so its paragraphs
   fill it and the box itself is capped instead - one decision about line
   length rather than two that disagree with each other. */
/* Measured against the Dialer, which is what this is copying: there the
   callout runs 1032px with 968px of text inside it. 940 was still
   leaving a hand’s width of empty box on the right. */
div[style*="border-left:3px solid var(--bronze)"] { max-width: 1080px; }
div[style*="border-left:3px solid var(--bronze)"] p { max-width: none; }
@media (max-width: 820px) { .navsep { display: none; } }
/* One rule under the mark, not two. On the home page the brand link points
   at the page you are on, so a[aria-current="page"] gave it a bronze border
   of its own - which sat a couple of pixels above the group's and read as a
   double underline. The group draws the line; the link inside it does not. */
.markgroup a[aria-current="page"] { border-bottom: 0 !important; padding-bottom: 0 !important; }
.switch { position: relative; margin-left: -2px; }
.switch > summary { list-style: none; cursor: pointer; display: inline-flex;
  align-items: center; gap: 3px; font-family: var(--disp); font-weight: 700;
  font-size: 18px; color: var(--bronze); letter-spacing: -.01em;
  padding: 3px 6px; border-radius: 8px; transition: background .15s; }
.switch > summary::-webkit-details-marker { display: none; }
.switch > summary::marker { content: ""; }
.switch > summary:hover { background: rgba(185,121,63,.10); }
.switch > summary em { font-style: normal; }
.chev { width: 11px; height: 11px; opacity: .75; transition: transform .18s; }
.switch[open] > summary .chev { transform: rotate(180deg); }
.switchpanel { position: absolute; top: calc(100% + 9px); left: 0; min-width: 266px;
  z-index: 60; background: var(--paper); border: 1px solid var(--line);
  border-radius: 13px; padding: 6px;
  box-shadow: 0 2px 6px rgba(0,32,60,.07), 0 18px 40px rgba(0,32,60,.14); }
.switchpanel a { display: block; padding: 9px 12px; border-radius: 9px;
  text-decoration: none; color: var(--ink); border-bottom: 0 !important; }
.switchpanel a:hover { background: var(--skyfaint); }
.switchpanel b { display: block; font-size: 14.5px; font-weight: 600; }
.switchpanel span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
/* Where you already are: named and marked rather than left off the list - a
   menu that hides your current place makes you look at the wordmark to find
   out where you are. */
.switchpanel a[aria-current] b { color: var(--bronze); }
.switchpanel a[aria-current] { background: rgba(185,121,63,.07); cursor: default; }
/* On a phone the panel anchors to the header row, not to the product word:
   the word is two thirds of the way across, so a 266px panel opened well off
   the right edge of the screen. */
@media (max-width: 1060px) {
  .switch { position: static; }
  .switchpanel { left: 20px; right: 20px; min-width: 0; width: auto; }
}

@media (max-width: 820px) {
  /* Book a call sits in the corner and the hamburger goes outboard of it, which
     is the order asked for and also the reachable one: the menu is the thing a
     thumb hunts for, the booking button is the thing it should not hit by
     accident. Both are ordered here rather than moved in the markup. */
  /* The design sets flex-wrap:wrap inline, and inline beats a plain rule - so
     without !important the bar stacked into three rows instead of one. */
  nav > div { flex-wrap: nowrap !important; gap: 6px !important; align-items: center; }
  .mobbtn { margin-left: auto; }
  /* The sheet is a two-column grid so the pair of buttons can share the top
     row; everything below spans both columns and reads as a plain list. */
  /* Closed until the box is ticked. This rule set display:grid unconditionally,
     which left the sheet permanently open on a phone. */
  .mobpanel { display: none !important; }
  .navtog:checked ~ .mobpanel { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; }
  .mobpanel > * { grid-column: 1 / -1; }
  .mobpanel [data-course], .mobpanel [data-cta] { grid-column: auto; }
  .mobpanel [data-course] { order: -2; }
  .mobpanel [data-cta] { order: -1; }
  /* Flex-centred rather than text-align, because these anchors carry
     display:inline-block inline and their own left/right padding - which is why
     the label sat off to one side of the button. */
  .mobpanel [data-course], .mobpanel [data-cta] {
    display: flex !important; align-items: center; justify-content: center;
    text-align: center !important; margin: 0 0 4px !important;
    padding: 12px 8px !important; font-size: 14.5px !important; line-height: 1.2;
  }

  .mobbtn {
    display: grid; place-items: center; list-style: none; cursor: pointer;
    width: 42px; height: 42px; border-radius: 11px;
    border: 1px solid var(--line); background: transparent;
    transition: background .18s ease, border-color .18s ease;
  }
  /* Open, it becomes a filled navy tile with a white cross, sitting directly
     above the sheet's top-right corner - so the way out is the most obvious
     thing on the screen rather than a faint outline in the bar. */
  .mobbtn { border-color: var(--navy); }
  .navtog:checked ~ .mobbtn { background: var(--navy); border-color: var(--navy); }
  .navtog:checked ~ .mobbtn path { stroke: #fff; }
    /* Real SVG strokes rather than CSS-drawn bars. The pseudo-element version
     depended on a <summary> honouring display:grid and on ::before/::after
     resolving inside it, and it came out as no bars at all. */
  .mobbtn svg { display: block; overflow: visible; }
  .mobbtn path {
    stroke: var(--navy); stroke-width: 2; stroke-linecap: round; fill: none;
    transform-origin: 12px 12px; transition: transform .2s ease, opacity .2s ease;
  }
  .navtog:checked ~ .mobbtn .b1 { transform: translateY(5px) rotate(45deg); }
  .navtog:checked ~ .mobbtn .b2 { opacity: 0; }
  .navtog:checked ~ .mobbtn .b3 { transform: translateY(-5px) rotate(-45deg); }

  /* Fixed, not absolute. Absolute meant the sheet lived inside the sticky nav
     and any ancestor with overflow could clip it - which is what made it
     invisible on a phone. Fixed to the viewport, it cannot be clipped by
     anything, and it spans the screen so the links are properly tappable. */
  .mobpanel {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: fixed; left: 10px; right: 10px; top: 68px; z-index: 60;
    max-height: calc(100vh - 84px); overflow-y: auto; padding: 8px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0,32,60,.10), 0 24px 60px rgba(0,32,60,.22);
  }
  .mobpanel > a { padding: 11px 12px; border-radius: 8px; font-size: 15px !important; }
  .mobpanel > a:hover { background: var(--cream); }
  /* The Pricing disclosure inside the sheet opens in place; a panel floating
     out of a panel on a 360px screen has nowhere to go. */
  .mobpanel .navmenu { width: 100%; }
  .mobpanel .navbtn { padding: 11px 12px; width: 100%; justify-content: space-between; }
  .mobpanel .navpanel {
    position: static; transform: none; min-width: 0; border: 0; box-shadow: none;
    padding: 0 0 0 12px; background: none;
  }
}

/* ── vertical rhythm ──────────────────────────────────────────────────────
   The bundle's spacing was set for a page whose hero art was hidden behind a
   preview toggle. With the art showing, the hero is as tall as a 440px
   illustration and every gap around it reads as a hole. */
header[style*="padding:clamp(34px"] { padding-top: clamp(18px, 2.5vw, 28px) !important; }

/* The hero art sets the row height, so trimming it closes the gap under the
   standfirst on every page at once - more effectively than touching margins. */
header img { max-width: 330px !important; }

/* And the first section no longer needs to clear a 440px illustration. */
main > section:first-of-type { margin-top: clamp(18px, 2.5vw, 30px) !important; }

/* The booking page exists to show a scheduler. Everything above it is
   throat-clearing, so the hero is trimmed hard and the art kept small enough
   not to set the row height - the calendar should be reachable without
   scrolling on a laptop. */
.page-book header[style*="padding:clamp(34px"] { padding: 14px 0 0 !important; }
.page-book header img { max-width: 220px !important; }
.page-book main > section:first-of-type { margin-top: clamp(14px, 2vw, 22px) !important; }
.page-book h1 { margin-top: 6px !important; }

/* ── the Pricing menu ─────────────────────────────────────────────────────
   A native <details>, so it opens on click and on keyboard, works on touch,
   and needs no JS. It behaves the same at every width - the earlier version
   opened on hover with a separate always-open layout below 900px, and that
   breakpoint fires on a scaled desktop display, which is how the panel ended
   up spilled across the nav bar on a 1291px screen. */
.navmenu { position: relative; }
.navbtn {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: 5px; font-size: 14.5px; font-weight: 500; color: var(--muted);
}
.navbtn::-webkit-details-marker { display: none; }
.navbtn span { font-size: 10px; transition: transform .15s ease; }
.navmenu[open] .navbtn { color: var(--ink); }
.navmenu[open] .navbtn span { transform: rotate(180deg); }
.navpanel {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  z-index: 30; min-width: 220px; padding: 6px; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,32,60,.07), 0 18px 40px rgba(0,32,60,.14);
}
.navitem { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; }
.navitem b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 600; }
.navitem span { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; }
.navitem:hover { background: var(--cream); }
/* Near the edge of a narrow screen a centred panel would overflow the page. */
@media (max-width: 560px) {
  .navpanel { left: 0; transform: none; }
}

/* The tokens mark the current page with ink-coloured text and a bronze rule,
   with an !important that also hits the navy call-to-action - so on /book the
   button's own label went dark on dark. It keeps its own colours; being the
   current page is already obvious from the page you are on. */
a[aria-current="page"][style*="background:var(--navy)"] {
  color: #fff !important; border-bottom: 0; padding-bottom: 0;
}

/* ── mobile ───────────────────────────────────────────────────────────────
   Every layout in this site is an inline style, because that is how the design
   bundle was authored. Inline wins over any selector, so the only way to
   reflow it is to out-rank it - hence the !important on the rules below. They
   are deliberately blunt: at phone widths every multi-column grid becomes one
   column, which is right for all of them. */
@media (max-width: 820px) {
  /* Only the CARD grids collapse. The first version of this collapsed every
     grid in main, which also hit the two-column rows that pair a marker or a
     step number with its text - so the bullet landed on one line and its label
     on the next. Those are `16px 1fr` and `clamp(...) 1fr`; the card grids are
     the ones built with repeat(), so that is what gets targeted. */
  main [style*="grid-template-columns:repeat("] { grid-template-columns: 1fr !important; }
  /* The figures strip is the exception - two across still reads on a phone,
     and one-per-row would push the page a screen taller for four numbers. */
  main [style*="minmax(150px"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* Belt and braces: whatever else changes, a marker stays beside its text. */
  main [style*="grid-template-columns:16px"] { grid-template-columns: 16px minmax(0,1fr) !important; }
  /* The hero grid is `minmax(0,1.15fr) minmax(0,.85fr)`; the earlier rule here
     looked for a bare `1.15fr` and so never matched, which is why the hero
     stayed two columns on a phone and the halves looked pinched. */
  header [style*="minmax(0,1.15fr)"], main [style*="minmax(0,1.15fr)"],
  header [style*="minmax(0,1.35fr)"], main [style*="minmax(0,1.35fr)"] {
    grid-template-columns: 1fr !important; align-items: start !important;
  }
  /* Art first, then the words ride up over its lower edge - the picture sits
     behind them by about a seventh of its height rather than being parked in a
     block underneath. The mask fades that bottom edge out, so the type is
     crossing empty cream by the time it reaches it and stays readable. */
  header [style*="minmax(0,1.15fr)"] > img,
  header [style*="minmax(0,1.35fr)"] > img {
    order: -1; max-width: 270px !important; margin: 0 auto !important;
    /* The grid, not the margin, was placing it: justify-self:start on the
       desktop rule kept deciding after margin:auto had had its say. */
    justify-self: center !important;
    position: relative; z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 95%);
    mask-image: linear-gradient(to bottom, #000 58%, transparent 95%);
  }
  header [style*="minmax(0,1.15fr)"] > div,
  header [style*="minmax(0,1.35fr)"] > div {
    position: relative; z-index: 1; margin-top: -15%;
    /* The block still rides up over the picture by the same amount; the words
       just start a little lower inside it, so the eyebrow is not pressed
       against the artwork. */
    padding-top: 14px;
  }
  main img[width="760"], main img[width="720"] { max-width: 240px; margin-inline: auto; }
  body { font-size: 16px; }
}

@media (max-width: 640px) {
  /* Type set for a 1140px column is too large once the column is 340px. */
  h1 { font-size: clamp(1.9rem, 8vw, 2.3rem) !important; }
  h2 { font-size: clamp(1.35rem, 6vw, 1.6rem) !important; }
  main [style*="padding:26px"], main [style*="padding:24px"] { padding: 18px !important; }
  main [style*="gap:26px"], main [style*="gap:24px"] { gap: 16px !important; }
  /* Buttons go full width so they are thumb-sized and stop sitting in a
     ragged row of two. */
  a[style*="border-radius:10px"][style*="padding:11px 22px"] {
    display: block !important; text-align: center; width: 100%;
  }
  a[style*="border-radius:10px"][style*="padding:11px 22px"] + a { margin-top: 10px; }
}

/* The nav carries seven links plus two buttons. On a narrow screen it wraps to
   a second row rather than being hidden behind a hamburger - fewer taps, and
   no JS on a site that otherwise needs none. */
@media (max-width: 900px) {
  nav > div { row-gap: 8px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  nav a[style*="font-size:14.5px"] { font-size: 13.5px !important; }
}

/* Wide content must scroll inside itself, never take the page with it. */
main table { min-width: 0 !important; }
@media (min-width: 641px) { main table { min-width: 620px !important; } }