/* ──────────────────────────────────────────────────────────────────────────
NEW: Contact page styles → move into wp-content/themes/cyber72-light/style.css
Pairs with tokens.css. Only classes prefixed with .ct- / .ir- / .form- /
.map- / .faq- / .next- are new; everything else (.sec, .box, .btn, .pill,
.tag, .mono, .display, .h-eyebrow, .dot, .grid-bg) comes from tokens.css.
────────────────────────────────────────────────────────────────────────── */
/* NEW: breadcrumb (path-style, used on every secondary page) -------------- */
.breadcrumb {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .04em;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
color: var(--ink-dim);
margin-bottom: 18px;
}
.breadcrumb a { color: var(--ink-dim); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { color: var(--ink-mute); }
.breadcrumb .here { color: var(--green-dim); }
/* NEW: IR top-strip (slim banner above hero) ------------------------------ */
.ir-strip {
background: #2a0c10;
color: #ffd7da;
border-bottom: 1px solid #4a161c;
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: .03em;
}
html[data-theme="light"] .ir-strip { background: #2a0c10; color: #ffd7da; }
.ir-strip-inner {
display: flex; align-items: center; gap: 18px;
padding: 9px 28px;
max-width: var(--container-max);
margin: 0 auto;
}
.ir-strip .ir-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #ff5566;
box-shadow: 0 0 0 0 rgba(255,85,102,.6);
animation: irPulse 1.6s ease-out infinite;
flex-shrink: 0;
}
@keyframes irPulse {
0% { box-shadow: 0 0 0 0 rgba(255,85,102,.65); }
70% { box-shadow: 0 0 0 10px rgba(255,85,102,0); }
100% { box-shadow: 0 0 0 0 rgba(255,85,102,0); }
}
.ir-strip .label { color: #ff8a93; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
.ir-strip a { color: #fff; border-bottom: 1px dashed rgba(255,255,255,.35); }
.ir-strip a:hover { border-bottom-color: #fff; }
.ir-strip .grow { flex: 1; }
.ir-strip .sla { color: #ffb8be; font-size: 11.5px; }
/* The inner wrappers are transparent, so contrast tooling walks past the strip
and mis-reads the page background behind the white/pink text (a false low-
contrast flag). Paint the same dark-red on them - visually identical - so the
contrast is computed against the real background. */
.ir-strip-inner,
.ir-strip .grow { background-color: inherit; }
@media (prefers-reduced-motion: reduce) { .ir-strip .ir-dot { animation: none; } }
/* NEW: Hero ---------------------------------------------------------------- */
.ct-hero { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; }
.ct-hero-inner {
display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px;
align-items: end;
padding: 56px 28px 64px;
}
.ct-hero h1 {
font-family: var(--font-display); font-weight: 600;
font-size: 88px; line-height: .96; letter-spacing: -.025em;
margin: 6px 0 22px;
text-wrap: balance;
}
.ct-hero .lead {
font-size: 18px; line-height: 1.5; color: var(--ink-dim);
max-width: 540px; margin: 0 0 32px;
}
.ct-hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.ct-hero-side {
border: 1px solid var(--line-2);
background: var(--panel);
box-shadow: var(--shadow-card);
padding: 18px 22px;
display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
align-items: baseline;
font-size: 13px;
}
html[data-theme="dark"] .ct-hero-side { background: rgba(15,19,20,.6); }
.ct-hero-side dt { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); letter-spacing: .08em; text-transform: uppercase; }
.ct-hero-side dd { margin: 0; color: var(--ink); }
.ct-hero-side dd.green { color: var(--green-dim); font-family: var(--font-mono); }
/* NEW: IR alt CTA (red button variant) ------------------------------------ */
.btn-ir {
display: inline-flex; align-items: center; gap: 10px;
padding: 10px 14px;
border-radius: var(--radius-xs);
font-family: var(--font-mono);
font-weight: 600; font-size: 13px;
background: transparent;
color: var(--red);
border: 1px solid var(--red);
cursor: pointer;
transition: background .15s, color .15s, box-shadow .15s, transform .08s;
}
.btn-ir:hover { background: var(--red); color: #fff; box-shadow: 0 0 0 3px rgba(198,56,66,.2); }
.btn-ir:active { transform: translateY(1px); }
.btn-ir .ir-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: irPulse 1.6s ease-out infinite; }
.btn-ir:hover .ir-dot { background: #fff; box-shadow: none; animation: none; }
/* NEW: 2-col main grid (form / info stack) -------------------------------- */
.ct-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 36px;
padding: 56px 28px 72px;
align-items: start;
}
.ct-info-stack { display: flex; flex-direction: column; gap: 18px; position: sticky; top: calc(var(--nav-h) + 16px); }
/* NEW: panel-head reused in many places ---------------------------------- */
.panel-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--line-2);
background: var(--bg-2);
font-family: var(--font-mono); font-size: 11.5px;
color: var(--ink);
}
html[data-theme="dark"] .panel-head { background: #0a0d0e; }
.panel-head .id { color: var(--green-dim); letter-spacing: .04em; }
.panel-head .id::before { content: "● "; }
.panel-head .qq { color: var(--ink-mute); }
.panel-head .right { color: var(--ink-mute); font-size: 11px; letter-spacing: .04em; }
/* NEW: IR emergency card -------------------------------------------------- */
.ir-card {
border: 1px solid var(--red);
background: linear-gradient(180deg, rgba(198,56,66,.06), rgba(198,56,66,.02));
box-shadow: 0 0 0 1px rgba(198,56,66,.04), 0 12px 30px -18px rgba(198,56,66,.18);
overflow: hidden;
position: relative;
}
html[data-theme="dark"] .ir-card {
background: linear-gradient(180deg, rgba(255,85,102,.05), transparent);
box-shadow: 0 0 0 1px rgba(255,85,102,.18);
}
.ir-card .panel-head { background: rgba(198,56,66,.07); border-bottom-color: rgba(198,56,66,.3); color: var(--red); }
.ir-card .panel-head .id { color: var(--red); }
.ir-card-body { padding: 20px 22px 22px; }
.ir-card .eyebrow {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
text-transform: uppercase; color: var(--red);
display: flex; align-items: center; gap: 10px;
margin-bottom: 12px;
}
.ir-card .eyebrow .ir-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: irPulse 1.6s ease-out infinite; }
.ir-card .ir-title {
font-family: var(--font-display); font-weight: 600;
font-size: 26px; line-height: 1.1; letter-spacing: -.015em;
margin: 0 0 8px;
}
.ir-card .ir-sub { color: var(--ink-dim); font-size: 13.5px; line-height: 1.5; margin: 0 0 18px; }
.ir-tel {
display: flex; align-items: baseline; gap: 8px;
font-family: var(--font-mono); font-weight: 600;
font-size: 26px; letter-spacing: -.005em;
color: var(--ink);
text-decoration: none;
margin-bottom: 6px;
}
.ir-tel:hover { color: var(--red); }
.ir-tel small { font-size: 11px; color: var(--ink-mute); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.ir-mail {
display: inline-block;
font-family: var(--font-mono); font-size: 13px;
color: var(--ink); border-bottom: 1px dashed var(--line-2);
padding-bottom: 1px;
}
.ir-mail:hover { color: var(--red); border-bottom-color: var(--red); }
.ir-meta {
margin-top: 18px; padding-top: 14px;
border-top: 1px dashed rgba(198,56,66,.3);
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
font-size: 12px;
}
.ir-meta dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 4px; }
.ir-meta dd { margin: 0; color: var(--ink); font-size: 13px; }
/* NEW: Direct contact card ------------------------------------------------ */
.direct-card { border: 1px solid var(--line-2); background: var(--panel); box-shadow: var(--shadow-card); }
html[data-theme="dark"] .direct-card { background: rgba(15,19,20,.6); }
.direct-body { padding: 18px 22px 20px; }
.direct-body h3 {
font-family: var(--font-display); font-weight: 600;
font-size: 18px; letter-spacing: -.01em; line-height: 1.2;
margin: 0 0 4px;
}
.direct-body .sub { color: var(--ink-dim); font-size: 13px; margin: 0 0 14px; line-height: 1.5; }
.direct-mail {
font-family: var(--font-mono); font-size: 17px; color: var(--ink);
border-bottom: 1px dashed var(--line-2);
display: inline-block; padding-bottom: 1px;
}
.direct-mail:hover { color: var(--green-dim); border-bottom-color: var(--green-dim); }
.direct-foot {
margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
display: flex; flex-wrap: wrap; gap: 8px 14px;
font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-dim);
}
.direct-foot a { color: var(--ink-dim); border-bottom: 1px dashed transparent; }
.direct-foot a:hover { color: var(--ink); border-bottom-color: var(--line-2); }
/* NEW: Offices ------------------------------------------------------------- */
.offices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.office {
border: 1px solid var(--line-2); background: var(--panel);
padding: 16px 18px 16px;
box-shadow: var(--shadow-card);
}
html[data-theme="dark"] .office { background: rgba(15,19,20,.6); }
.office .o-head { display: flex; align-items: center; justify-content: space-between; }
.office .o-name {
font-family: var(--font-display); font-weight: 600;
font-size: 16px; letter-spacing: -.005em;
}
.office .o-flag {
font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: .12em; color: var(--ink-mute); text-transform: uppercase;
}
.office .o-addr { color: var(--ink-dim); font-size: 12.5px; line-height: 1.5; margin: 8px 0 12px; }
.office .o-clock {
font-family: var(--font-mono);
font-size: 22px; letter-spacing: .02em;
color: var(--green-dim);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.office .o-meta {
margin-top: 4px; display: flex; gap: 10px; align-items: center;
font-family: var(--font-mono); font-size: 10.5px;
color: var(--ink-mute); letter-spacing: .04em;
}
.office .o-meta .open { color: var(--green-dim); }
.office .o-meta .closed { color: var(--amber); }
/* NEW: Trust pills row ---------------------------------------------------- */
.trust-row {
display: flex; flex-wrap: wrap; gap: 8px;
padding: 16px 18px;
border: 1px dashed var(--line-2);
background: transparent;
}
.trust-row .label {
font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute);
margin-right: 6px;
}
/* NEW: SOC status sub-bar ------------------------------------------------- */
.soc-status {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
padding: 10px 14px;
border-top: 1px dashed var(--line);
font-family: var(--font-mono); font-size: 11.5px;
color: var(--ink-dim); letter-spacing: .03em;
}
.soc-status .stat { display: inline-flex; align-items: baseline; gap: 6px; }
.soc-status .stat b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.soc-status .sep { color: var(--ink-mute); }
/* NEW: Form panel --------------------------------------------------------- */
.form-panel { border: 1px solid var(--line-2); background: var(--panel); box-shadow: var(--shadow-card); }
html[data-theme="dark"] .form-panel { background: rgba(15,19,20,.5); }
.form-body { padding: 26px 28px 28px; }
.form-head {
display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
padding: 28px 28px 22px;
border-bottom: 1px dashed var(--line);
}
.form-head h2 {
font-family: var(--font-display); font-weight: 600;
font-size: 36px; line-height: 1.02; letter-spacing: -.02em;
margin: 6px 0 0; text-wrap: balance;
}
.form-head .step-of {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
text-transform: uppercase; color: var(--ink-mute);
white-space: nowrap;
}
/* NEW: form fields (mono-labelled .box style) ----------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field-lbl {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim);
display: flex; align-items: center; gap: 6px;
}
.field-lbl .req { color: var(--red); }
.field-lbl .opt { color: var(--ink-mute); font-size: 10.5px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.field-input,
.field-select,
.field-textarea {
appearance: none; -webkit-appearance: none;
width: 100%;
border: 1px solid var(--line-2);
background: var(--bg);
border-radius: var(--radius-xs);
padding: 10px 12px;
font-family: var(--font-mono);
font-size: 13.5px;
color: var(--ink);
outline: 0;
transition: border-color .15s, box-shadow .15s, background .15s;
}
html[data-theme="dark"] .field-input,
html[data-theme="dark"] .field-select,
html[data-theme="dark"] .field-textarea { background: #0a0d0e; }
.field-input::placeholder, .field-textarea::placeholder { color: var(--ink-mute); }
.field-input:hover, .field-select:hover, .field-textarea:hover { border-color: var(--ink-mute); }
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
border-color: var(--green-dim);
box-shadow: 0 0 0 3px rgba(10,138,85,.18);
}
html[data-theme="dark"] .field-input:focus,
html[data-theme="dark"] .field-select:focus,
html[data-theme="dark"] .field-textarea:focus { box-shadow: 0 0 0 3px rgba(0,255,156,.18); }
.field-textarea { min-height: 130px; resize: vertical; line-height: 1.5; font-family: var(--font-mono); }
.field-select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
html[data-theme="dark"] .field-select {
background-image: url("data:image/svg+xml;utf8,");
}
.field.error .field-input,
.field.error .field-select,
.field.error .field-textarea { border-color: var(--red); }
.field.error .field-input:focus,
.field.error .field-select:focus,
.field.error .field-textarea:focus { box-shadow: 0 0 0 3px rgba(198,56,66,.16); }
.field-err {
font-family: var(--font-mono); font-size: 11px; color: var(--red);
letter-spacing: .04em;
display: none;
}
.field.error .field-err { display: block; }
/* (Phone / country-code prefix styles removed — replaced by intl-tel-input;
see .iti block at the bottom of this file and assets/js/phone-input.js.) */
/* severity radio group (conditional) -------------------------------------- */
.sev-row { display: flex; flex-direction: column; gap: 6px; }
.sev-row.hidden { display: none; }
.sev-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sev-opt {
position: relative;
border: 1px solid var(--line-2);
background: var(--bg);
padding: 10px 12px;
cursor: pointer;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .04em;
color: var(--ink);
display: flex; flex-direction: column; gap: 4px;
transition: border-color .15s, background .15s, color .15s;
border-radius: var(--radius-xs);
}
html[data-theme="dark"] .sev-opt { background: #0a0d0e; }
.sev-opt input { position: absolute; opacity: 0; pointer-events: none; }
.sev-opt .sev-tag { font-weight: 600; font-size: 11px; letter-spacing: .12em; }
.sev-opt .sev-lbl { font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .06em; }
.sev-opt:hover { border-color: var(--ink-dim); }
.sev-opt[data-sev="1"] .sev-tag { color: var(--red); }
.sev-opt[data-sev="2"] .sev-tag { color: var(--amber); }
.sev-opt[data-sev="3"] .sev-tag { color: var(--blue); }
.sev-opt[data-sev="4"] .sev-tag { color: var(--ink-dim); }
.sev-opt:has(input:checked) {
border-color: var(--ink);
background: var(--ink);
color: var(--bg);
}
.sev-opt:has(input:checked) .sev-lbl { color: rgba(255,255,255,.7); }
.sev-opt:has(input:checked) .sev-tag { color: currentColor; }
html[data-theme="dark"] .sev-opt:has(input:checked) {
background: var(--green);
border-color: var(--green-dim);
color: #001a10;
}
html[data-theme="dark"] .sev-opt:has(input:checked) .sev-lbl { color: rgba(0,26,16,.7); }
/* (Design-only `.field-consent` rules removed — that class is on the ,
not on the wrapper, so the selectors here never bound. The real consent
styling lives in the .form-body .wpcf7-acceptance block below.) */
/* form footer with submit ------------------------------------------------- */
.form-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
margin-top: 22px; padding-top: 18px;
border-top: 1px dashed var(--line);
}
.form-foot .meta {
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute); letter-spacing: .04em;
display: flex; align-items: center; gap: 10px;
}
.form-foot .meta .dot.ok { animation: none; }
/* form success state ------------------------------------------------------ */
.form-success {
display: none;
padding: 36px 28px;
text-align: left;
}
.form-success.on { display: block; }
.form-panel.submitted .form-body,
.form-panel.submitted .form-head { display: none; }
.form-success-eyebrow {
font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
text-transform: uppercase; color: var(--green-dim);
display: flex; align-items: center; gap: 10px;
margin-bottom: 14px;
}
.form-success h3 {
font-family: var(--font-display); font-weight: 600;
font-size: 32px; line-height: 1.05; letter-spacing: -.015em;
margin: 0 0 12px;
}
.form-success p { color: var(--ink-dim); font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; max-width: 540px; }
.form-success .id-row {
font-family: var(--font-mono); font-size: 12.5px;
color: var(--ink); padding: 12px 14px;
border: 1px dashed var(--line-2);
background: var(--bg-2);
display: inline-flex; gap: 12px; align-items: center;
margin-bottom: 18px;
}
html[data-theme="dark"] .form-success .id-row { background: #0a0d0e; }
.form-success .id-row .qq { color: var(--ink-mute); }
.form-success .next {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
padding-top: 18px; border-top: 1px dashed var(--line);
}
.form-success .next .step { padding: 12px 0; }
.form-success .next .step .n {
font-family: var(--font-mono); font-size: 11px; color: var(--green-dim);
letter-spacing: .12em;
}
.form-success .next .step .ttl {
font-family: var(--font-display); font-weight: 600;
font-size: 15px; margin-top: 6px;
}
.form-success .next .step .sub {
color: var(--ink-dim); font-size: 12.5px; line-height: 1.5; margin-top: 4px;
}
/* NEW: Map block ---------------------------------------------------------- */
.map-block {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--bg-2);
}
html[data-theme="dark"] .map-block { background: #06080a; }
.map-inner { padding: 36px 28px 24px; }
.map-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
margin-bottom: 18px; flex-wrap: wrap;
}
.map-head h2 {
font-family: var(--font-display); font-weight: 600;
font-size: 32px; letter-spacing: -.015em; margin: 0;
}
.map-head .qq {
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute); letter-spacing: .04em;
}
.map-canvas {
position: relative;
border: 1px solid var(--line-2);
background: var(--panel);
aspect-ratio: 2.4 / 1;
min-height: 280px;
overflow: hidden;
}
html[data-theme="dark"] .map-canvas { background: #08100c; }
.map-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-canvas iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.offices.offices-single { grid-template-columns: 1fr; }
.map-pin {
position: absolute;
transform: translate(-50%, -100%);
display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.map-pin .pin-dot {
width: 12px; height: 12px; border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 0 rgba(10,138,85,.5);
animation: pulseLt 2s infinite;
}
html[data-theme="dark"] .map-pin .pin-dot { animation: pulseDk 2s infinite; }
.map-pin .pin-card {
background: var(--panel);
border: 1px solid var(--line-2);
padding: 8px 12px;
font-family: var(--font-mono);
font-size: 11px;
white-space: nowrap;
color: var(--ink);
letter-spacing: .04em;
box-shadow: var(--shadow-card);
}
.map-pin .pin-card b { color: var(--ink); font-weight: 600; letter-spacing: .06em; }
.map-pin .pin-card .qq { color: var(--ink-mute); }
.map-attribution {
margin-top: 10px;
font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute);
letter-spacing: .04em;
}
/* NEW: What happens next -------------------------------------------------- */
.next-block { padding: 64px 28px 56px; border-bottom: 1px solid var(--line); }
.next-head {
display: flex; align-items: flex-end; justify-content: space-between; gap: 22px;
margin-bottom: 32px; flex-wrap: wrap;
}
.next-head h2 {
font-family: var(--font-display); font-weight: 600;
font-size: 44px; letter-spacing: -.02em; margin: 8px 0 0;
}
.next-head .lead {
color: var(--ink-dim); font-size: 15px; max-width: 380px; line-height: 1.55; margin: 0;
}
.next-list {
list-style: none; margin: 0; padding: 0; /* reset defaults — kills the left indent before step 01 */
display: grid; grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.next-step {
padding: 24px 22px 22px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
position: relative;
background: var(--panel);
min-height: 200px;
display: flex; flex-direction: column;
}
html[data-theme="dark"] .next-step { background: rgba(15,19,20,.4); }
.next-step .n {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: .12em; color: var(--green-dim);
}
.next-step h3 {
font-family: var(--font-display); font-weight: 600;
font-size: 19px; line-height: 1.2; margin: 12px 0 8px; letter-spacing: -.01em;
}
.next-step p { color: var(--ink-dim); font-size: 13.5px; line-height: 1.55; margin: 0; }
.next-step .when {
margin-top: auto; padding-top: 14px;
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute); letter-spacing: .04em;
}
/* NEW: FAQ accordion ------------------------------------------------------ */
.faq-block { padding: 64px 28px 80px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .faq-block { background: #06080a; }
.faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; }
.faq-side h2 {
font-family: var(--font-display); font-weight: 600;
font-size: 44px; letter-spacing: -.02em; margin: 8px 0 14px;
}
.faq-side .sub { color: var(--ink-dim); font-size: 15px; line-height: 1.55; max-width: 340px; margin: 0 0 18px; }
.faq-side .mailto { font-family: var(--font-mono); font-size: 13px; border-bottom: 1px dashed var(--line-2); color: var(--ink); }
.faq-side .mailto:hover { color: var(--green-dim); border-bottom-color: var(--green-dim); }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
appearance: none; border: 0; background: transparent;
width: 100%; text-align: left;
display: flex; align-items: center; justify-content: space-between; gap: 18px;
padding: 18px 4px;
cursor: pointer;
font-family: var(--font-display); font-weight: 600;
font-size: 18px; letter-spacing: -.005em;
color: var(--ink);
}
.faq-q:hover { color: var(--green-dim); }
.faq-q .plus {
font-family: var(--font-mono);
font-size: 18px; color: var(--ink-dim);
width: 24px; text-align: center;
transition: transform .15s, color .15s;
flex-shrink: 0;
}
.faq-q[aria-expanded="true"] .plus { transform: rotate(45deg); color: var(--green-dim); }
.faq-q .id {
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute); letter-spacing: .08em;
margin-right: 12px; font-weight: 500;
}
.faq-a {
display: none;
padding: 0 4px 22px;
color: var(--ink-dim); font-size: 14.5px; line-height: 1.6;
max-width: 720px;
}
.faq-q[aria-expanded="true"] + .faq-a { display: block; }
/* NEW: Sticky mobile IR button -------------------------------------------- */
.ir-sticky {
position: fixed; left: 12px; right: 12px; bottom: 12px;
z-index: 80;
display: none; /* desktop hidden */
align-items: center; justify-content: center; gap: 10px;
padding: 14px 16px;
background: var(--red);
color: #fff;
font-family: var(--font-mono); font-weight: 600; font-size: 14px; letter-spacing: .04em;
border-radius: var(--radius-xs);
box-shadow: 0 12px 30px -10px rgba(198,56,66,.55);
text-decoration: none;
}
.ir-sticky:hover { background: #b22d36; }
.ir-sticky .ir-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: irPulse 1.6s ease-out infinite; }
.ir-sticky .arr { margin-left: auto; }
/* NEW: Theme toggle in nav ------------------------------------------------ */
.theme-toggle {
appearance: none; border: 1px solid var(--line-2);
background: transparent;
font-family: var(--font-mono); font-size: 11.5px;
color: var(--ink-dim); letter-spacing: .04em;
padding: 6px 10px;
cursor: pointer;
border-radius: var(--radius-xs);
transition: border-color .15s, color .15s;
}
.theme-toggle:hover { border-color: var(--green-dim); color: var(--green-dim); }
.theme-toggle .glyph { display: inline-block; width: 12px; text-align: center; margin-right: 4px; }
/* NEW: Mobile -------------------------------------------------------------- */
@media (max-width: 1024px) {
.ct-hero-inner { grid-template-columns: 1fr; gap: 24px; padding: 40px 18px 48px; }
.ct-hero h1 { font-size: 62px; }
.ct-grid { grid-template-columns: 1fr; gap: 28px; padding: 36px 18px 56px; }
.ct-info-stack { position: static; }
.next-list { grid-template-columns: repeat(2, 1fr); }
.faq-grid { grid-template-columns: 1fr; gap: 28px; }
.faq-side h2, .next-head h2 { font-size: 32px; }
}
@media (max-width: 640px) {
.ct-hero h1 { font-size: 44px; }
.ct-hero .lead { font-size: 16px; }
.ct-hero-side { grid-template-columns: 1fr; }
.ct-hero-side dt, .ct-hero-side dd { display: inline; }
.form-head { padding: 22px 20px 18px; }
.form-head h2 { font-size: 26px; }
.form-body { padding: 20px 20px 22px; }
.form-grid { grid-template-columns: 1fr; gap: 14px; }
.offices { grid-template-columns: 1fr; }
.next-list { grid-template-columns: 1fr; }
.next-step { min-height: 0; }
.ir-card-body { padding: 16px 18px 18px; }
.ir-tel { font-size: 22px; }
.ir-strip-inner { padding: 9px 18px; gap: 12px; flex-wrap: wrap; }
.ir-strip .grow { flex: 1 1 100%; order: 5; }
.ir-strip .sla { display: none; }
.ir-sticky { display: flex; }
body { padding-bottom: 72px; } /* room for sticky */
.map-canvas { aspect-ratio: 4 / 3; min-height: 0; }
.sev-group { grid-template-columns: repeat(2, 1fr); }
.form-success .next { grid-template-columns: 1fr; }
}
/* NEW: A11y — focus-visible everywhere ------------------------------------ */
.btn:focus-visible,
.btn-ir:focus-visible,
.faq-q:focus-visible,
.theme-toggle:focus-visible,
.cy-burger:focus-visible {
outline: 2px solid var(--green);
outline-offset: 2px;
}
/* NEW: nav burger/mobile menu intentionally omitted here —
the cyber72-light theme ships its own mobile menu (header.php + .mobile-nav). */
/* ═══════════════════════════════════════════════════════════════════════
Contact Form 7 integration — map CF7 markup onto the design field styles.
Form is rendered via cyber72_engagement_form() (functions.php), autop off.
═══════════════════════════════════════════════════════════════════════ */
.form-body .wpcf7,
.form-body .wpcf7-form { margin: 0; }
.form-body .wpcf7-form-control-wrap { display: block; }
/* phone row — handled by intl-tel-input now; see .iti block at the bottom of this file */
/* severity radio cards (CF7 .wpcf7-radio replaces the design .sev-group grid) */
/* CF7 wraps the control in .wpcf7-form-control-wrap, so the design's own
.sev-group grid would trap the whole checkbox in one cell — neutralize it
here and let the 4-up grid live on the actual control (.wpcf7-checkbox). */
.form-body .sev-group { display: block; }
.form-body .sev-group .wpcf7-form-control-wrap { display: block; }
.form-body .sev-group .wpcf7-radio,
.form-body .sev-group .wpcf7-checkbox { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.form-body .sev-group .wpcf7-list-item { margin: 0; }
.form-body .sev-group .wpcf7-list-item > label {
display: flex; align-items: center; justify-content: center; gap: 6px;
text-align: center; cursor: pointer;
border: 1px solid var(--line-2); border-radius: var(--radius-xs);
background: var(--bg); padding: 10px 8px;
transition: border-color .15s, background .15s;
}
html[data-theme="dark"] .form-body .sev-group .wpcf7-list-item > label { background: #0a0d0e; }
.form-body .sev-group .wpcf7-list-item > label:hover { border-color: var(--ink-dim); }
.form-body .sev-group input[type="radio"],
.form-body .sev-group input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.form-body .sev-group .wpcf7-list-item-label { font-weight: 600; font-size: 11px; letter-spacing: .04em; }
.form-body .sev-group .wpcf7-list-item:nth-child(1) .wpcf7-list-item-label { color: var(--red); }
.form-body .sev-group .wpcf7-list-item:nth-child(2) .wpcf7-list-item-label { color: var(--amber); }
.form-body .sev-group .wpcf7-list-item:nth-child(3) .wpcf7-list-item-label { color: var(--blue); }
.form-body .sev-group .wpcf7-list-item:nth-child(4) .wpcf7-list-item-label { color: var(--ink-dim); }
.form-body .sev-group .wpcf7-list-item > label:has(input:checked) { border-color: var(--ink); background: var(--ink); }
.form-body .sev-group .wpcf7-list-item > label:has(input:checked) .wpcf7-list-item-label { color: var(--bg); }
html[data-theme="dark"] .form-body .sev-group .wpcf7-list-item > label:has(input:checked) { background: var(--green); border-color: var(--green-dim); }
html[data-theme="dark"] .form-body .sev-group .wpcf7-list-item > label:has(input:checked) .wpcf7-list-item-label { color: #001a10; }
/* ── Consent (CF7 [acceptance]) ─────────────────────────────────────────────
Custom checkbox + visibly clickable links. The native control is removed
via appearance:none, then a 18×18 chip is drawn with a sharp checkmark
on :checked. Privacy / Terms links use the brand green with a solid
underline (not the previous dashed line that looked decorative). */
.form-body .wpcf7-acceptance,
.wpcf7-acceptance { display: block; }
.form-body .wpcf7-acceptance .wpcf7-list-item,
.wpcf7-acceptance .wpcf7-list-item { margin: 0; display: block; }
.form-body .wpcf7-acceptance label,
.wpcf7-acceptance label {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
padding: 14px 16px;
border: 1px solid var(--line-2);
background: var(--bg);
border-radius: var(--radius-xs);
transition: border-color .15s ease, background-color .15s ease;
}
.form-body .wpcf7-acceptance label:hover,
.wpcf7-acceptance label:hover { border-color: var(--ink-dim); background: var(--bg-2); }
.form-body .wpcf7-acceptance label:has(input:checked),
.wpcf7-acceptance label:has(input:checked) { border-color: var(--green-dim); background: var(--bg); }
.form-body .wpcf7-acceptance label:focus-within,
.wpcf7-acceptance label:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.form-body .wpcf7-acceptance .wpcf7-list-item-label,
.wpcf7-acceptance .wpcf7-list-item-label {
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--ink-dim);
line-height: 1.55;
letter-spacing: .01em;
}
/* Custom checkbox — 18×18 chip with a clean checkmark on :checked. */
.form-body .wpcf7-acceptance input[type="checkbox"],
.wpcf7-acceptance input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
flex: 0 0 18px;
margin: 1px 0 0;
border: 1.5px solid var(--line-2);
background: var(--bg);
border-radius: var(--radius-xs);
cursor: pointer;
position: relative;
transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.form-body .wpcf7-acceptance input[type="checkbox"]:hover,
.wpcf7-acceptance input[type="checkbox"]:hover { border-color: var(--ink); }
.form-body .wpcf7-acceptance input[type="checkbox"]:checked,
.wpcf7-acceptance input[type="checkbox"]:checked {
background: var(--green);
border-color: var(--green-dim);
}
.form-body .wpcf7-acceptance input[type="checkbox"]:checked::after,
.wpcf7-acceptance input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 5px;
top: 1px;
width: 5px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.form-body .wpcf7-acceptance input[type="checkbox"]:focus-visible,
.wpcf7-acceptance input[type="checkbox"]:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(10, 138, 85, .25);
}
/* Visibly clickable links — brand green with a solid 1.5px underline. */
.form-body .wpcf7-acceptance a,
.wpcf7-acceptance a {
color: var(--green-dim);
font-weight: 500;
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
text-decoration-color: var(--green-dim);
border-bottom: 0;
}
.form-body .wpcf7-acceptance a:hover,
.wpcf7-acceptance a:hover {
color: var(--ink);
text-decoration-color: var(--ink);
}
.form-body .wpcf7-acceptance a:focus-visible,
.wpcf7-acceptance a:focus-visible {
outline: 2px solid var(--green);
outline-offset: 3px;
border-radius: 2px;
}
/* validation states */
.form-body .wpcf7-not-valid { border-color: var(--red) !important; }
.form-body .wpcf7-not-valid-tip {
display: block; margin-top: 4px;
font-family: var(--font-mono); font-size: 11px; color: var(--red); letter-spacing: .04em;
}
.form-body .sev-group .wpcf7-not-valid-tip,
.form-body .wpcf7-acceptance .wpcf7-not-valid-tip { margin-top: 8px; }
/* CF7 response bar — shown on pages without the custom success panel (e.g. services) */
.wpcf7 .wpcf7-response-output {
margin: 16px 0 0; padding: 10px 14px;
border: 1px solid var(--line-2); border-radius: var(--radius-xs);
font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output { border-color: var(--red); color: var(--red); }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--green-dim); color: var(--green-dim); }
/* submit: keep CF7 from stretching it; .btn styling already applies */
.form-body .wpcf7-form .form-foot input[type="submit"] { width: auto; }
.form-body .wpcf7-spinner { margin: 0 0 0 12px; }
@media (max-width: 640px) {
.form-body .sev-group .wpcf7-radio,
.form-body .sev-group .wpcf7-checkbox { grid-template-columns: repeat(2, 1fr); }
}
/* ── Engagement form embedded on single service pages ───────────────────── */
.svc-engage { border-bottom: 1px solid var(--line); }
.svc-engage-inner { padding: 80px 28px; max-width: 900px; }
.svc-engage-title { font-size: 44px; margin: 14px 0 10px; }
.svc-engage-sub { font-size: 16px; margin: 0; max-width: 680px; line-height: 1.55; }
.svc-engage .form-panel { margin-top: 24px; }
@media (max-width: 640px) {
.svc-engage-inner { padding: 56px 20px; }
.svc-engage-title { font-size: 32px; }
}
/* ── Start WordPress Security — standalone order form page ───────────────── */
.sws-wrap { max-width: 760px; margin: 0 auto; padding: 56px 28px 84px; }
.sws-head { margin-bottom: 26px; }
.sws-head .h-eyebrow { margin: 0 0 12px; }
.sws-title {
font-size: 60px; line-height: .98; letter-spacing: -.025em;
margin: 0 0 16px; text-wrap: balance;
}
.sws-lead { font-size: 17px; line-height: 1.55; color: var(--ink-dim); max-width: 600px; margin: 0; }
.sws-page .form-panel { margin-top: 8px; }
.sws-page .form-head .h-eyebrow { margin: 0 0 8px; }
@media (max-width: 640px) {
.sws-wrap { padding: 36px 18px 64px; }
.sws-title { font-size: 40px; }
.sws-lead { font-size: 15px; }
}
/* ── Contact channel picker (Phone / Telegram / WhatsApp / Signal) ──────────
Backed by [radio contact_channel default:1 ...] — radio guarantees exactly
one selection (Phone call pre-checked, the group can never be empty).
Selectors are prefixed with `.form-body` to win specificity over CF7
defaults. The icon sits LEFT of the label via label::before (the flex
container), vertically centred with a small gap. */
.form-body .channel-group,
.channel-group { width: 100%; }
.form-body .channel-group .wpcf7-form-control-wrap,
.channel-group .wpcf7-form-control-wrap { display: block; }
.form-body .channel-group .wpcf7-radio,
.channel-group .wpcf7-radio {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin: 0;
padding: 0;
}
.form-body .channel-group .wpcf7-list-item,
.channel-group .wpcf7-list-item {
position: relative;
display: block;
margin: 0;
padding: 0;
border: 1px solid var(--line-2);
background: var(--bg);
border-radius: var(--radius-xs);
color: var(--ink);
transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .1s ease;
}
.form-body .channel-group .wpcf7-list-item:hover,
.channel-group .wpcf7-list-item:hover {
border-color: var(--ink);
background: var(--bg-2);
}
.form-body .channel-group .wpcf7-list-item:active,
.channel-group .wpcf7-list-item:active { transform: translateY(1px); }
/* The