@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

* { box-sizing: border-box; }
html { background: var(--ink-950); }
body { margin: 0; min-width: 320px; color: var(--text-light); background: var(--ink-950); font: 400 16px/1.45 var(--font-body); }
button, input, select, textarea { font: inherit; }
button { cursor: default; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 20; padding: 12px 16px; background: var(--white-100); color: var(--text-dark); border-radius: 8px; }
.skip:focus { top: 16px; }
.site-header { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; width: min(100% - 48px, 1320px); min-height: 72px; margin: 0 auto; padding: 12px 16px 12px 18px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 999px; background: rgb(6 11 20 / 76%); box-shadow: 0 12px 42px rgb(0 0 0 / 18%); backdrop-filter: blur(16px); }
.brand { display: flex; min-height: 44px; align-items: center; gap: 9px; color: var(--white-100); font: 700 18px/1 var(--font-display); letter-spacing: -.03em; text-decoration: none; }
.brand img { display: block; width: 27px; height: 30px; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav a { display: inline-flex; min-height: 44px; align-items: center; color: var(--text-muted); font-size: 13px; text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--white-100); }
.header-cta, .button { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid rgb(34 213 245 / 38%); border-radius: var(--r-pill); padding: 0 18px; background: linear-gradient(180deg, rgb(255 255 255 / 13%), transparent 46%), var(--cta-fill); color: white; font-weight: 600; text-decoration: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / 24%), inset 0 -1px 0 rgb(34 213 245 / 18%), 0 9px 24px rgb(11 59 159 / 28%); transition: transform 180ms var(--e-out), border-color 180ms var(--e-out), box-shadow 320ms var(--e-out); }
.header-cta::after, .button::after { position: absolute; z-index: 0; top: -70%; left: -42%; width: 28%; height: 240%; pointer-events: none; background: linear-gradient(90deg, transparent, rgb(234 253 255 / 62%), transparent); transform: rotate(14deg) translateX(-220%); transition: transform 560ms var(--e-out); content: ""; }
.header-cta:hover, .header-cta:focus-visible, .button:hover, .button:focus-visible { transform: translateY(-2px); border-color: rgb(34 213 245 / 62%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 32%), inset 0 -1px 0 rgb(34 213 245 / 24%), 0 0 0 1px rgb(34 213 245 / 16%), 0 0 22px rgb(34 213 245 / 20%), 0 14px 34px rgb(11 59 159 / 38%); }
.header-cta:hover::after, .header-cta:focus-visible::after, .button:hover::after, .button:focus-visible::after { transform: rotate(14deg) translateX(620%); }
.header-cta:active, .button:active { transform: translateY(0) scale(.99); }
.header-cta { padding-inline: 15px; font-size: 13px; }
.header-cta[aria-disabled], .button[aria-disabled] { pointer-events: none; }
.menu-button { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid rgb(255 255 255 / 18%); border-radius: 50%; color: var(--white-100); background: transparent; }
.menu-button i, .menu-button::before, .menu-button::after { display: block; width: 16px; height: 1px; content: ""; background: currentColor; }
.menu-button::before { transform: translateY(-5px); }
.menu-button i { transform: translateY(0); }
.menu-button::after { transform: translateY(5px); }
button:disabled, [aria-disabled="true"] { opacity: .42; cursor: not-allowed; filter: saturate(.35); }
:is(#contact-page, #booking-page) { position: relative; min-height: calc(100svh - 72px); overflow: hidden; padding: calc(var(--header-h) + 24px) 24px 42px; }
:is(#contact-page, #booking-page)::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 18% 12%, rgb(23 95 234 / 25%), transparent 29%), radial-gradient(circle at 82% 75%, rgb(34 213 245 / 11%), transparent 27%); }
:is(#contact-page, #booking-page) > .shell { position: relative; display: grid; grid-template-columns: minmax(300px, .88fr) minmax(490px, 1.12fr); align-items: start; gap: clamp(42px, 7vw, 132px); width: min(100%, 1220px); margin: 0 auto; padding-inline: 0; }
.intro { align-self: center; padding: 36px 0 20px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--cyan-400); font: 500 11px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::before { width: 32px; height: 1px; content: ""; background: currentColor; }
h1 { max-width: 11ch; margin: 0; font: 500 clamp(46px, 5.1vw, 78px)/.99 var(--font-display); letter-spacing: -.055em; text-wrap: balance; }
.intro h1 em { color: var(--cyan-400); font-style: normal; }
.lede { max-width: 45ch; margin: 26px 0 0; color: var(--text-muted); font-size: 17px; line-height: 1.62; }
.assurance { display: grid; gap: 10px; margin: 34px 0 0; padding: 0; list-style: none; color: var(--text-muted); font-size: 14px; }
.assurance li { display: flex; gap: 10px; align-items: center; }
.assurance li::before { width: 7px; height: 7px; flex: 0 0 7px; content: ""; border: 1px solid var(--cyan-400); border-radius: 50%; box-shadow: 0 0 12px rgb(34 213 245 / 60%); }
.info-card { margin-top: 38px; padding: 20px 22px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 16px; background: rgb(255 255 255 / 4%); }
.info-card p { margin: 0; color: var(--text-muted); font-size: 13px; }
.info-card strong { display: block; margin-bottom: 6px; color: var(--white-100); font: 500 11px/1.2 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; }
.status { display: inline-flex; margin-top: 11px; padding: 5px 8px; border: 1px solid rgb(255 182 92 / 38%); border-radius: 6px; color: var(--signal); background: rgb(255 182 92 / 10%); font: 500 9px/1.1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.surface { min-width: 0; border: 1px solid rgb(255 255 255 / 70%); border-radius: 28px; background: var(--field-light); box-shadow: 0 26px 90px rgb(0 0 0 / 28%); color: var(--text-dark); }
.form-surface { padding: 30px; }
.surface-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.surface-head h2 { margin: 0; font: 500 25px/1.1 var(--font-display); letter-spacing: -.035em; }
.surface-head p { margin: 0; color: var(--text-dim); font: 500 10px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field--wide { grid-column: 1 / -1; }
.field label, .check-label { color: var(--text-dark); font-size: 12px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; min-height: 45px; padding: 11px 12px; border: 1px solid rgb(16 26 41 / 16%); border-radius: 10px; outline: none; color: var(--text-dark); background: rgb(255 255 255 / 68%); }
.field textarea { min-height: 82px; resize: none; }
.field input::placeholder, .field textarea::placeholder { color: #778598; }
.field--focus input { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgb(23 95 234 / 12%); }
.check-label { display: flex; min-height: 44px; align-items: center; gap: 10px; margin: 18px 0; color: var(--text-dim); font-size: 12px; font-weight: 400; line-height: 1.5; cursor: pointer; }
.check-label input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--blue-500); }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.form-foot small { max-width: 32ch; color: var(--text-dim); font-size: 11px; line-height: 1.45; }
.signal-art { position: absolute; z-index: 0; right: -8vw; bottom: -15vh; width: min(53vw, 720px); height: min(53vw, 720px); opacity: .35; pointer-events: none; }
.signal-art path { fill: none; stroke: var(--cyan-400); stroke-width: .75; }
.signal-art circle { fill: var(--cyan-400); }

/* Booking frame */
.booking-page { padding-top: 34px; }
.booking-shell { grid-template-columns: minmax(310px, .7fr) minmax(590px, 1.3fr); gap: clamp(35px, 5vw, 78px); max-width: 1300px; }
.booking-page .intro { padding-top: 22px; }
.booking-page h1 { max-width: 10ch; }
.steps { display: flex; gap: 7px; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; gap: 6px; width: 48px; color: var(--text-muted); font: 500 9px/1.1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.steps li::before { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgb(255 255 255 / 20%); border-radius: 50%; content: counter(step, decimal-leading-zero); counter-increment: step; }
.steps li.is-current { color: var(--cyan-400); }
.steps li.is-current::before { border-color: var(--cyan-400); background: rgb(34 213 245 / 12%); box-shadow: 0 0 18px rgb(34 213 245 / 18%); }
.booking-surface { padding: 24px; }
.booking-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 15px; border-bottom: 1px solid var(--line-light); }
.booking-top h2 { margin: 0; font: 500 24px/1.1 var(--font-display); letter-spacing: -.035em; }
.booking-top p { margin: 0; color: var(--text-dim); font-size: 12px; }
.progress { display: flex; gap: 5px; margin: 12px 0 0; }
.progress span { width: 24px; height: 3px; border-radius: 99px; background: rgb(16 26 41 / 14%); }
.progress span.is-done { background: var(--blue-500); }
.progress span.is-current { background: var(--cyan-400); }
.booking-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; padding-top: 19px; }
.selection-group { display: grid; gap: 11px; }
.choice-label { color: var(--text-dim); font: 500 10px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice { min-height: 50px; padding: 9px 11px; border: 1px solid rgb(16 26 41 / 14%); border-radius: 10px; color: var(--text-dim); background: rgb(255 255 255 / 52%); text-align: left; }
.choice strong { display: block; color: var(--text-dark); font-size: 12px; }
.choice small { display: block; margin-top: 2px; font-size: 10px; }
.choice.is-selected { border-color: var(--blue-500); background: rgb(23 95 234 / 7%); box-shadow: inset 0 0 0 1px rgb(23 95 234 / 8%); }
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.calendar-head strong { font: 500 16px/1 var(--font-display); }
.calendar-head button { width: 44px; height: 44px; border: 1px solid var(--line-light); border-radius: 8px; color: var(--text-dark); background: transparent; }
.week, .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 9px; text-align: center; }
.week { color: var(--text-dim); font: 500 9px/1 var(--font-mono); letter-spacing: .04em; }
.day { display: grid; min-width: 44px; min-height: 44px; place-items: center; border: 1px solid transparent; border-radius: 8px; color: var(--text-dim); background: transparent; font-size: 12px; }
.day.is-available { color: var(--text-dark); }
.day.is-selected { border-color: var(--blue-500); color: white; background: var(--blue-500); box-shadow: 0 4px 12px rgb(23 95 234 / 26%); }
.day.is-muted { opacity: .32; }
.times-panel { padding: 15px; border: 1px solid var(--line-light); border-radius: 14px; background: rgb(255 255 255 / 48%); }
.times-panel h3 { margin: 0 0 3px; font: 500 16px/1.2 var(--font-display); letter-spacing: -.02em; }
.times-panel p { margin: 0 0 13px; color: var(--text-dim); font-size: 11px; }
.time-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.time { min-height: 44px; border: 1px solid rgb(16 26 41 / 14%); border-radius: 8px; color: var(--text-dark); background: rgb(255 255 255 / 65%); font-size: 11px; }
.time.is-selected { border-color: var(--blue-500); color: white; background: var(--blue-500); }
.booking-summary { display: grid; gap: 8px; margin-top: 14px; padding: 12px; border-radius: 10px; background: var(--navy-800); color: var(--text-light); }
.booking-summary div { display: flex; justify-content: space-between; gap: 12px; color: var(--text-muted); font-size: 10px; }
.booking-summary strong { color: var(--white-100); font-weight: 500; }
.booking-continue { display: flex; justify-content: flex-end; margin-top: 14px; }
.booking-continue .button { min-height: 44px; font-size: 13px; }

/* Reusable service-page master */
.service-page { padding-top: 36px; }
.service-shell { display: grid; grid-template-columns: minmax(350px, .86fr) minmax(500px, 1.14fr); gap: clamp(40px, 7vw, 120px); width: min(100%, 1220px); margin: 0 auto; }
.service-page .intro { padding-top: 32px; }
.service-page h1 { max-width: 9ch; }
.service-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.service-meta li { padding: 7px 9px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 6px; color: var(--text-muted); font: 500 9px/1.1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.service-surface { padding: 26px; }
.service-surface > header { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 17px; border-bottom: 1px solid var(--line-light); }
.service-surface h2 { max-width: 15ch; margin: 0; font: 500 26px/1.08 var(--font-display); letter-spacing: -.035em; }
.section-code { padding-top: 3px; color: var(--blue-500); font: 500 10px/1.2 var(--font-mono); letter-spacing: .12em; }
.service-columns { display: grid; grid-template-columns: .95fr 1.05fr; gap: 24px; margin-top: 20px; }
.service-columns h3 { margin: 0 0 10px; color: var(--text-dark); font: 500 11px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.service-columns p { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.58; }
.deliverables { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.deliverables li { display: flex; align-items: flex-start; gap: 9px; color: var(--text-dark); font-size: 13px; }
.deliverables li::before { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; content: "↗"; border: 1px solid rgb(23 95 234 / 24%); border-radius: 50%; color: var(--blue-500); font-size: 10px; line-height: 14px; text-align: center; }
.method-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 23px; overflow: hidden; border: 1px solid var(--line-light); border-radius: 12px; background: var(--line-light); }
.method-strip div { min-height: 71px; padding: 11px; background: rgb(255 255 255 / 65%); }
.method-strip span { display: block; color: var(--blue-500); font: 500 9px/1.2 var(--font-mono); letter-spacing: .1em; }
.method-strip strong { display: block; margin-top: 5px; color: var(--text-dark); font-size: 11px; line-height: 1.2; }
.service-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.service-foot small { color: var(--text-dim); font-size: 11px; }

@media (max-width: 800px) {
  .site-header { width: calc(100% - 32px); min-height: 58px; padding: 9px 12px; }
  .site-nav { display: none; }
  .header-cta { display: none; }
  .menu-button { display: inline-flex; }
  :is(#contact-page, #booking-page) { min-height: calc(100svh - 58px); padding: calc(var(--header-h) + 16px) 16px 32px; }
  :is(#contact-page, #booking-page) > .shell { grid-template-columns: 1fr; gap: 24px; }
  .intro { padding: 14px 4px 0; }
  h1 { max-width: 12ch; font-size: clamp(42px, 12.4vw, 56px); }
  .lede { margin-top: 18px; font-size: 15px; }
  .assurance { margin-top: 23px; }
  .info-card { margin-top: 24px; }
  .surface { border-radius: 22px; }
  .form-surface { padding: 20px; }
  .form-grid { grid-template-columns: 1fr; gap: 13px; }
  .field--wide { grid-column: auto; }
  .field textarea { min-height: 94px; }
  .form-foot { align-items: stretch; flex-direction: column-reverse; }
  .button { width: 100%; }
  .booking-page { padding-top: 22px; }
  .booking-page .intro { padding-top: 8px; }
  .steps { margin-top: 24px; }
  .booking-surface { padding: 18px; }
  .booking-grid { grid-template-columns: 1fr; gap: 16px; }
  .booking-top { align-items: flex-start; flex-direction: column; }
  .service-page { padding-top: 22px; }
  .service-shell { grid-template-columns: 1fr; gap: 22px; }
  .service-page .intro { padding-top: 8px; }
  .service-columns { grid-template-columns: 1fr; gap: 18px; }
  .method-strip { grid-template-columns: 1fr 1fr; }
  .method-strip div { min-height: 63px; }
  .service-foot { align-items: stretch; flex-direction: column-reverse; }
  .calendar-head { margin-top: 14px; }
  .signal-art { right: -48vw; bottom: -5vh; width: 135vw; height: 135vw; }
}

@media (max-height: 650px) and (min-width: 801px) {
  .site-header { min-height: 56px; }
  :is(#contact-page, #booking-page) { padding-top: calc(var(--header-h) + 24px); padding-bottom: 18px; }
  .intro { padding-top: 12px; }
  h1 { font-size: clamp(40px, 4vw, 58px); }
  .lede { margin-top: 14px; font-size: 14px; }
  .assurance { margin-top: 18px; gap: 6px; font-size: 12px; }
  .info-card { margin-top: 18px; padding: 13px 15px; }
  .form-surface { padding: 20px; }
  .surface-head { margin-bottom: 14px; }
  .field textarea { min-height: 58px; }
  .check-label { margin: 11px 0; }
  .booking-page { padding-top: 14px; }
  .booking-page .intro { padding-top: 0; }
  .steps { margin-top: 18px; }
  .booking-surface { padding: 16px 18px; }
  .booking-grid { gap: 14px; padding-top: 12px; }
  .calendar-head { margin-top: 12px; }
  .times-panel { padding: 11px; }
  .booking-summary { margin-top: 9px; padding: 9px; }
  .booking-continue { margin-top: 9px; }
  .service-page { padding-top: 14px; }
  .service-page .intro { padding-top: 0; }
  .service-surface { padding: 18px; }
  .service-columns { margin-top: 14px; }
  .method-strip { margin-top: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .header-cta, .button, .header-cta::after, .button::after { transition: none; }
  .header-cta::after, .button::after { display: none; }
}

/* ============================================================================
   WORDPRESS PORT — STATE EXTENSIONS
   The approved contact/booking frames are single-state approval stills. They
   define .field--focus and the [aria-disabled] treatment, but no markup or
   styling exists for error, pending, success, or the completed booking step.
   Everything below extends that same vocabulary rather than introducing a new
   one, and stays inside the approved 180-320ms motion band with no spinners.
   ========================================================================== */

/* ---- Field error ---------------------------------------------------- */
.field--error input,
.field--error select,
.field--error textarea {
  border-color: #B4321F;
  box-shadow: 0 0 0 3px rgb(180 50 31 / 12%);
}
.field__error {
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 500;
  color: #B4321F;
}

/* ---- Form status / error summary ------------------------------------ */
.form-status {
  margin-bottom: 14px;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.45;
}
.form-status:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.form-status--pending { color: var(--text-dim);  background: rgb(23 95 234 / 7%);  box-shadow: inset 0 0 0 1px rgb(23 95 234 / 14%); }
.form-status--error   { color: #8C2617;          background: rgb(180 50 31 / 8%);  box-shadow: inset 0 0 0 1px rgb(180 50 31 / 22%); }
.form-status--success { color: #14532D;          background: rgb(22 121 62 / 9%);  box-shadow: inset 0 0 0 1px rgb(22 121 62 / 24%); }

/* ---- Busy ------------------------------------------------------------
   Opacity and cursor only. The spec forbids a loader, so there is no spinner
   and no indeterminate animation. */
.is-busy { opacity: .72; }
.is-busy button[type="submit"] { cursor: progress; }

/* ---- Honeypot --------------------------------------------------------
   Removed from view and from the accessibility tree without display:none,
   which some automated fillers skip. */
.proline-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Completed booking step -----------------------------------------
   `.steps li.is-done` is used in the approved markup but has no rule, so a
   completed step renders identically to a future one. */
.steps li.is-done { color: var(--blue-500); }
.steps li.is-done::before {
  border-color: var(--blue-500);
  background: rgb(23 95 234 / 10%);
  color: var(--blue-500);
}

@media (prefers-reduced-motion: reduce) {
  .field--error input,
  .field--error select,
  .field--error textarea { transition: none; }
}

/* ---- The hidden attribute must actually hide ---------------------------
   `[hidden]` sets display:none only at user-agent level, so any author
   `display:` rule silently defeats it. Several layout classes here set
   `display: grid`, which left step panels and the no-JavaScript fallback
   visible when they were meant to be hidden. This restores the attribute's
   meaning without weakening any layout rule. */
[hidden] { display: none !important; }

/* ---- Service links in the inner-page intro column ---------------------
   Contact and booking were crawl dead-ends and offered a visitor arriving from
   search no route onward. */
.intro__services { margin-top: 20px; }
.intro__services .mono {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.intro__services ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 2px; }
.intro__services a {
  display: flex; align-items: center; min-height: 44px;
  font-size: 12px; color: var(--text-muted); text-decoration: none;
  border-bottom: 1px solid var(--line-dark);
  transition: color var(--d-1) var(--e-out);
}
.intro__services a:hover { color: var(--cyan-400); }

/* The telephone number is a primary action on a phone, so it needs a real
   touch target rather than a line of text. */
.info-card a[href^="tel:"] {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; text-decoration: none;
  border-bottom: 1px solid currentColor;
}