/* Contact page additions: same tokens and components as the approved pages */
.crumbs{font-size:.875rem; color:var(--muted); display:flex; gap:8px; align-items:center; margin-bottom:28px}
.crumbs a{text-decoration:none; color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{color:var(--faint)}
.c-hero h1{font-size:clamp(2.5rem, 6vw, 4.5rem); letter-spacing:-0.045em; line-height:1; font-weight:600}
.c-hero h1 .l2{display:block; color:var(--violet-ink)}
.c-hero .note{margin-top:14px; font-size:.875rem; color:var(--muted)}

/* Hero contact card */
.reach{margin:0; padding:28px; border-radius:var(--r-lg); background:var(--console-bg); color:var(--console-ink); border:1px solid var(--console-line); box-shadow:0 40px 80px -40px rgba(30,20,90,.55), 0 0 0 6px color-mix(in srgb, var(--violet) 7%, transparent); position:relative; overflow:hidden; display:grid; gap:6px; animation:rise .9s .2s cubic-bezier(.2,.7,.2,1) both}
.reach::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; background:radial-gradient(60% 40% at 85% 0%, rgba(66,214,207,.16), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(174,159,247,.12), transparent 70%)}
.reach > *{position:relative; z-index:1}
.reach .lbl{font-family:var(--mono); font-size:.75rem; color:var(--console-teal); margin-bottom:6px}
.way{display:grid; grid-template-columns:44px minmax(0,1fr) 18px; gap:14px; align-items:center; padding:16px; border-radius:14px; text-decoration:none; color:inherit; border:1px solid transparent; transition:background-color .2s, border-color .2s}
.way:hover{background:var(--console-raised); border-color:var(--console-line)}
.way:focus-visible{outline:2px solid var(--console-teal); outline-offset:2px}
.way .ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--console-raised); border:1px solid var(--console-line); color:var(--console-teal)}
.way .ic .icon{width:20px; height:20px}
.way b{display:block; font-size:1rem; font-weight:600}
.way span.d{display:block; font-size:.875rem; color:var(--console-muted); margin-top:2px}
.way .go{width:16px; height:16px; color:var(--console-muted)}
.reach hr{border:0; border-top:1px solid var(--console-line); margin:8px 0}
.reach address{font-style:normal; font-size:.9375rem; line-height:1.5; color:var(--console-ink); padding:4px 16px 8px}
.reach address small{display:block; font-size:.75rem; color:var(--console-muted); margin-bottom:4px}

/* Form + process */
.fx{display:grid; grid-template-columns:minmax(0,1fr); gap:24px; margin-top:48px; align-items:start}
@media (min-width:1000px){ .fx{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:40px} }
.form-card{padding:28px; border-radius:var(--r-lg); background:var(--raised); border:1px solid var(--line); box-shadow:var(--shadow)}
@media (min-width:700px){ .form-card{padding:36px} }
.preview-flag{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:12px; background:#FFF6E5; border:1px solid #F1D9A6; color:#7A4B00; font-size:.875rem; line-height:1.45; margin-bottom:24px}
.preview-flag .icon{width:18px; height:18px; flex:none; margin-top:1px}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .preview-flag{background:#2B2210; border-color:#5A4316; color:#F4D58D} }
:root[data-theme="dark"] .preview-flag{background:#2B2210; border-color:#5A4316; color:#F4D58D}
.fgrid{display:grid; grid-template-columns:minmax(0,1fr); gap:18px}
@media (min-width:640px){ .fgrid{grid-template-columns:repeat(2, minmax(0,1fr))} .fgrid .full{grid-column:1 / -1} }
.field{display:grid; gap:7px}
.field label{font-size:.875rem; font-weight:600; color:var(--ink)}
.field label .opt{font-weight:400; color:var(--faint)}
.field input,.field select,.field textarea{font:inherit; font-size:1rem; width:100%; min-width:0; padding:12px 14px; border-radius:12px; border:1px solid var(--line-strong); background:var(--paper); color:var(--ink); transition:border-color .15s, box-shadow .15s}
.field textarea{min-height:140px; resize:vertical; line-height:1.5}
.field select{appearance:none; -webkit-appearance:none; padding-right:40px; background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position:calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent)}
.field [aria-invalid="true"]{border-color:#C2410C}
.field .err{font-size:.8125rem; color:#C2410C; min-height:0}
.field .err:empty{display:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .field .err{color:#FDBA74} :root:not([data-theme="light"]) .field [aria-invalid="true"]{border-color:#FDBA74} }
:root[data-theme="dark"] .field .err{color:#FDBA74}
.hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden}
.f-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-top:24px}
.f-foot p{font-size:.8125rem; color:var(--muted); max-width:34em}
.f-foot p a{color:var(--violet-ink)}
.f-status{margin-top:16px; padding:0; font-size:.9375rem; font-weight:500; color:var(--teal-ink)}
.f-status:empty{display:none}
.f-status.ok{padding:14px 16px; border-radius:12px; background:var(--teal-soft); border:1px solid color-mix(in srgb, var(--teal) 40%, var(--line))}
.f-status.bad{padding:14px 16px; border-radius:12px; color:#9A3412; background:#FFF1E8; border:1px solid #F5C9AE}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .f-status.bad{color:#FDBA74; background:#2A1A10; border-color:#5B341C} }

.next{display:grid; gap:14px}
@media (min-width:1000px){ .next{position:sticky; top:96px} }
.next h3{font-size:1.375rem; letter-spacing:-0.03em}
.next > p{color:var(--muted); font-size:.9688rem}
.steps-v{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:0; position:relative}
.steps-v::before{content:""; position:absolute; left:19px; top:20px; bottom:20px; width:2px; background:linear-gradient(var(--violet), var(--teal)); opacity:.35}
.steps-v li{position:relative; display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; padding:12px 0}
.steps-v .n{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-family:var(--mono); font-size:.8125rem; background:var(--raised); border:1px solid var(--line); color:var(--teal-ink); position:relative; z-index:1}
.steps-v b{display:block; font-size:1.0625rem; letter-spacing:-0.015em; margin-top:2px}
.steps-v p{color:var(--muted); font-size:.9375rem; margin-top:4px}
.prep{padding:20px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); display:grid; gap:10px}
.prep b{font-size:.9375rem}
.prep ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.prep li{display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; font-size:.9375rem; color:var(--muted)}
.prep li .icon{width:16px; height:16px; color:var(--teal-ink); margin-top:3px}

/* Office */
.base{display:grid; grid-template-columns:minmax(0,1fr); gap:24px; margin-top:40px}
@media (min-width:960px){ .base{grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:48px; align-items:center} }
.base-copy{display:grid; gap:16px}
.base-copy p{color:var(--muted); font-size:1.0625rem; max-width:38em}
.office{padding:28px; border-radius:var(--r-lg); background:var(--raised); border:1px solid var(--line); display:grid; gap:18px}
.office .lbl{font-family:var(--mono); font-size:.75rem; color:var(--teal-ink)}
.office address{font-style:normal; font-size:1.25rem; line-height:1.45; font-weight:500; letter-spacing:-0.01em}
.office dl{margin:0; display:grid; gap:0}
.office dl div{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:14px; padding:12px 0; border-top:1px solid var(--line)}
.office dt{color:var(--muted); font-size:.875rem}
.office dd{margin:0; font-weight:500}
.office dd a{color:inherit; text-decoration:none}
.office dd a:hover{text-decoration:underline}
@media (prefers-reduced-motion: reduce){ .reach{animation:none} }

/* Direct contact options shown while the enquiry form is switched off */
.form-card.direct{display:grid; gap:20px}
.form-card.direct .preview-flag{margin:0}
.direct-list{display:grid; gap:12px}
.direct-list .way{background:var(--paper)}