/* WordPress-specific additions. The approved-layout styles live in theme.css (generated, do not hand-edit).
   Loaded after theme.css. New blocks' extra rules and form styles are appended here. */

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto; margin: 0; overflow: visible;
	position: fixed; left: 8px; top: 8px; z-index: 100000;
	padding: 12px 16px; background: var(--ivory-50); color: var(--charcoal-800);
	border: 1.5px solid var(--copper-500); border-radius: var(--radius-sm); font-weight: 600;
}

/* keep the sticky header below the WordPress admin bar */
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nav { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .nav { top: 0; } }

/* ===== ota/hero ===== */
/* The layout styles the headline by tag (.hx h1); the block lets the editor choose the level, so the same
   declarations are also attached to a class. Values are the final cascaded ones from the approved layout. */
.hx .hx__title{ font-family:var(--font-serif); font-size:clamp(2.4rem,4.4vw,3.9rem); line-height:1.0; font-weight:650; letter-spacing:-0.035em; margin:22px 0 0; text-wrap:balance; }
.hx .hx__title em{ font-style:normal; font-weight:inherit; color:var(--text-accent-on-dark); }
/* seating diagram colours are editable through custom properties; fallbacks are the design values */
.hub__ring{ stroke:var(--ota-ring, rgba(247,243,234,0.22)); }
.hub__trace{ stroke:var(--ota-trace, var(--copper-on-dark)); }
.hub__seat circle{ fill:var(--ota-seat-bg, var(--charcoal-900)); stroke:var(--ota-seat-border, rgba(247,243,234,0.34)); }

/* ===== ota/service-rail ===== */
/* Rail, node and dotted-leader colours are editable through custom properties (set on the <ol>); fallbacks are the design values. */
.srail::before{ background:var(--ota-rail, var(--border-line)); }
.srail::after{ background:var(--ota-rail-fill, var(--copper-500)); }
.srail__node{ border-color:var(--ota-node-border, var(--border-line)); background:var(--ota-node-bg, var(--ivory-100)); color:var(--ota-node-letter, var(--ink-400)); }
.srail__dots{ border-bottom-color:var(--ota-dots, var(--border-line)); }
@keyframes node-on{ to{ background:var(--ota-node-on-bg, var(--copper-500)); border-color:var(--ota-node-on-border, var(--copper-500)); color:var(--ota-node-on-color, var(--ivory-50)); } }
@media (prefers-reduced-motion: reduce){
	.srail__node{ background:var(--ota-node-on-bg, var(--copper-500)); border-color:var(--ota-node-on-border, var(--copper-500)); color:var(--ota-node-on-color, var(--ivory-50)); animation:none !important; }
}

/* The layout stacks every top-level section above the paper-grain overlay with `body > *`. WordPress wraps the
   sections in <main>, so the same rule is applied one level down to reproduce identical stacking/compositing. */
main > * { position: relative; z-index: 2; }

/* The layout keeps service names unshrinkable (flex:none), so a long name overflows a 320px screen.
   Allow it to shrink and wrap on screens narrower than 360px (360px and up match the layout exactly). */
@media (max-width: 359px) { .srail__name { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow-wrap: break-word; } }

/* ===== ota/positioning ===== */
.pos__cta{ margin-top:clamp(1.5rem,3vw,2.25rem); }

/* ===== ota/network-tabs ===== */
/* spacing the layout set with inline styles is expressed here so it survives when the kicker/headline is hidden */
.net .kicker ~ .net__title{ margin-top:0.9rem; }
.net .net__title ~ .lead, .net .kicker ~ .lead{ margin-top:1.1rem; }
.net__cta{ margin-top:1.75rem; }
.net__facts li::before{ color:var(--ota-fact-arrow, var(--copper-500)); }
.tab{ color:var(--ota-tab-color, var(--ink-400)); }
.tab:hover, .tab[aria-selected="true"]{ color:var(--ota-tab-active-color, var(--charcoal-800)); }

/* ===== ota/client-pathways ===== */
/* stage chip colours are editable through custom properties (set on .cases); fallbacks are the design values */
.cstage__i{ border-color:var(--ota-stage-off-border, var(--border-hairline)); color:var(--ota-stage-off-color, var(--ink-400)); }
.cstage__i b{ background:var(--ota-stage-off-badge, var(--stone-200)); color:var(--ota-stage-off-badge-color, var(--ink-500)); }
.cstage__i.is-on{ border-color:var(--ota-stage-on-border, var(--copper-200)); background:var(--ota-stage-on-bg, var(--copper-050)); color:var(--ota-stage-on-color, var(--charcoal-800)); }
.cstage__i.is-on b{ background:var(--ota-stage-on-badge, var(--copper-500)); color:var(--ota-stage-on-badge-color, #fff); }
.cases__cta{ margin-top:1.5rem; }

/* ===== ota/founder-letter ===== */
.letter--first{ margin-top:1.5rem; }
.letter__lead{ margin-top:1.25rem; }
.letter__btn{ margin-top:1.5rem; }

/* ===== ota/consultation ===== */
.consult .kicker ~ .consult__title{ margin-top:0.9rem; }
.consult .consult__title ~ .consult__lead, .consult .kicker ~ .consult__lead{ margin-top:1.1rem; }
.consult__cta{ margin-top:1.75rem; }
.consult__form{ min-width:0; }
.consult__form--missing{ background:var(--ivory-50); color:var(--ink-500); border:1px dashed var(--taupe-400); border-radius:var(--radius-lg); padding:1.5rem; }
.offer li::before{ color:var(--ota-offer-arrow, var(--copper-on-dark)); }

/* ===== footer column headings ===== */
/* The layout styles these as .foot h4. They are h3 here so the heading order never skips a level;
   the declarations are the layout's final cascaded values for .foot h4. */
.foot .foot__title{ font-family:var(--sans); font-weight:600; font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--copper); margin:1.33em 0 0.9rem; }

/* ===== Contact Form 7 inside .consult__form (the form element carries the layout's .form class) ===== */
.wpcf7{ min-width:0; }
.wpcf7 .hidden-fields-container{ display:none; }
.wpcf7 .screen-reader-response{ position:absolute; overflow:hidden; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; width:1px; margin:-1px; padding:0; border:0; word-wrap:normal !important; }
.wpcf7-form-control-wrap{ display:block; min-width:0; }
.wpcf7-form-control-wrap textarea, .wpcf7-form-control-wrap select, .wpcf7-form-control-wrap input:not([type="checkbox"]){ display:block; }
.checks .wpcf7-form-control-wrap, .checks .wpcf7-checkbox, .checks .wpcf7-list-item{ display:contents; }
.form [hidden]{ display:none !important; }
.form.submitting .btn{ opacity:.7; pointer-events:none; }
.wpcf7-spinner{ display:none; }
.wpcf7-not-valid-tip{ display:block; margin-top:4px; font-size:0.78rem; font-weight:500; color:var(--critical); }
.wpcf7 form .wpcf7-response-output{ grid-column:1/-1; margin:0; padding:0.65rem 0.9rem; border:1px solid var(--border-line); border-radius:var(--radius-sm); font-size:0.85rem; line-height:1.45; }
.wpcf7 form .wpcf7-response-output:empty{ display:none; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output{ border-color:var(--critical); background:var(--critical-bg); color:var(--critical); }
.wpcf7 form.sent .wpcf7-response-output{ border-color:var(--positive); background:var(--positive-bg); color:var(--positive); }
.wpcf7 form.ota-done .wpcf7-response-output{ display:none; }
/* editable form colours: custom properties set on .consult__form by the block; fallbacks are the design values */
.consult__form .form{ background:var(--ota-form-bg, var(--ivory-50)); color:var(--ota-form-color, var(--charcoal-800)); box-shadow:inset 0 0 0 1px var(--ota-form-border, transparent); }
.field label, .field legend{ color:var(--ota-form-label, var(--charcoal-800)); }
.field input[type="text"], .field input[type="email"], .field select, .field textarea{ background:var(--ota-form-input-bg, #fff); border-color:var(--ota-form-input-border, var(--border-line)); color:var(--ota-form-color, var(--charcoal-800)); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--ota-form-focus, var(--copper-500)); box-shadow:0 0 0 3px color-mix(in srgb, var(--ota-form-focus, #B85F33) 45%, transparent); }
.field input.wpcf7-not-valid, .field select.wpcf7-not-valid, .field textarea.wpcf7-not-valid{ border-color:var(--critical); }
.form .btn--copper:not(:hover):not(:focus-visible){ background:var(--ota-form-btn-bg, var(--copper-500)); border-color:var(--ota-form-btn-bg, var(--copper-500)); color:var(--ota-form-btn-color, #fff); }

/* ===== 404 page ===== */
.err404{ min-height:60vh; display:flex; align-items:center; }
.err404 .wrap{ width:100%; }
.err404 .kicker{ display:block; margin-bottom:0.9rem; }
.err404 .lead{ margin-top:1.1rem; max-width:52ch; }
.err404__cta{ margin-top:1.75rem; }