/* Homsa Kingdom: "Clear Path" design. Accessibility-first, plain language.

   Colour rules: every colour below is either sampled from the logo (assets/img/logo-full.png,
   source logo.jpg) or calculated from those samples. Formulas are noted beside each derived value.
   "x% A on B" means x% of colour A mixed over colour B. */

:root {
  /* Sampled from the logo */
  --navy: #08174e;          /* logo background, middle */
  --navy-top: #0a206a;      /* logo background, top */
  --navy-bottom: #020f3a;   /* logo background, bottom */
  --red: #fd0625;           /* wing gradient, left */
  --orange-deep: #fe581c;   /* wing gradient */
  --accent: #ff8c17;        /* wing gradient, centre: buttons, highlights, text on navy (7.25:1) */
  --yellow: #fdc953;        /* wing gradient, right */
  --accent-ink: #b35434;    /* "EDUCATION" lettering: orange text on white (4.96:1) */
  --brand-gradient: linear-gradient(90deg, var(--red), var(--orange-deep), var(--accent), var(--yellow));
  --navy-gradient: linear-gradient(180deg, var(--navy-top), var(--navy-bottom));

  /* Calculated from the samples */
  --accent-soft: #fff1e3;   /* 12% accent on white */
  --bg: #ffffff;
  --bg-alt: #fffaf6;        /* 4% accent on white */
  --text: var(--navy);      /* 16.9:1 on white */
  --muted: #3e4a75;         /* 78% navy on white, 8.6:1 */
  --line: #d7dae3;          /* 16% navy on white, decorative dividers only */
  --border: #777f9e;        /* 55% navy on white, 3.95:1 for form fields and buttons */
  --error: #c00a2f;         /* 75% red on navy, 6.3:1 */

  --size: 18px;             /* set by the text-size control */
  --lh: 1.7;
  --ls: 0;
  --ws: 0;
  --font-head: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: 160ms;
  --slow: 280ms;
  interpolate-size: allow-keywords;
}

/* Lumina Global Thailand pages: Lumina's colours inside <main class="brand-lumina">.
   The Homsa Kingdom header and footer stay in Homsa colours.
   Values are the exact colours defined in brands/Lumina-AI-Brand-Guideline.pdf. Contrast is against white.
   Skipped in high contrast mode, so the black and white theme still applies. */
html:not(.contrast) .brand-lumina {
  --navy: #3e1f6b;          /* Lumina deep purple, headings and buttons (13:1) */
  --navy-top: #6b3fa0;      /* Lumina purple, button hover */
  --accent: #6b3fa0;        /* Lumina purple, highlights and focus ring (7.3:1) */
  --accent-ink: #6b3fa0;    /* purple text on white (7.3:1) */
  --accent-soft: #ede6f7;   /* Lumina lavender */
  --bg-alt: #f3edfa;        /* Lumina panel lavender */
  --text: #24202b;          /* Lumina body text */
  --muted: #6e6680;         /* Lumina muted text (5.4:1) */
  --line: #e4dcef;          /* Lumina panel border, decorative only */
  --border: #6e6680;        /* form fields and outline buttons (5.4:1) */
  --brand-gradient: linear-gradient(180deg, #c9b3e6, #6b3fa0);
  --navy-gradient: linear-gradient(135deg, #6b3fa0, #3e1f6b);
}
/* Purple buttons need white text (7.3:1), not the dark text used on Homsa orange */
html:not(.contrast) .brand-lumina .btn-accent { color: #ffffff; }
html:not(.contrast) .brand-lumina .btn-accent:hover { background: var(--navy); border-color: var(--navy); color: #ffffff; }
.brand-lumina .tagline { font-family: var(--font-head); font-style: italic; color: #ede6f7; margin: 10px 0 0; } /* Lumina lavender on the purple band (6:1 or more) */
html.contrast .brand-lumina .tagline { color: #ffffff; }

/* Preference classes set by the accessibility panel */
html.readable { --font-head: "Atkinson Hyperlegible", var(--font-body); --font-body: "Atkinson Hyperlegible", system-ui, sans-serif; --lh: 1.9; --ls: 0.02em; --ws: 0.08em; }
html.contrast {
  --bg: #ffffff; --bg-alt: #ffffff; --text: #000000; --muted: #000000; --navy: #000000;
  --line: #000000; --border: #000000; --accent-ink: #6b321f; /* 60% accent-ink on black */
  --navy-gradient: linear-gradient(#000000, #000000);
}
html.contrast .card, html.contrast .task, html.contrast details, html.contrast .panel, html.contrast .way { border-width: 2px; border-color: #000000; }
html.underline a { text-decoration: underline !important; }
html.calm *, html.calm *::before, html.calm *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }

/* Smooth page-to-page transitions (supported browsers only) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: var(--ease); }
html.calm::view-transition-old(root), html.calm::view-transition-new(root) { animation: none; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; font-size: var(--size); scroll-padding-top: 20px; }
body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: var(--lh); letter-spacing: var(--ls); word-spacing: var(--ws); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--navy); text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color var(--fast) var(--ease); }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 6px var(--navy); border-radius: 6px; }
main:focus, #form-result:focus, .error-summary:focus { outline: none; box-shadow: none; }
h1, h2, h3 { font-family: var(--font-head); color: var(--navy); line-height: 1.2; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; max-width: 68ch; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.lead { font-size: 1.15rem; color: var(--muted); }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 300; background: var(--navy); color: #ffffff; padding: 12px 18px; border-radius: 8px; font-weight: 700; }
.skip:focus { left: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 24px; border-radius: 10px; font: 700 1rem var(--font-body); letter-spacing: inherit; text-decoration: none; cursor: pointer; border: 2px solid var(--navy); transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-navy { background: var(--navy); color: #ffffff; }
.btn-navy:hover { background: var(--navy-top); border-color: var(--navy-top); color: #ffffff; }
.btn-plain { background: var(--bg); color: var(--navy); }
.btn-plain:hover { background: var(--accent-soft); color: var(--navy); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--navy); }
.btn-accent:hover { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
.btn svg { width: 22px; height: 22px; flex: none; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* ---------- Notices (offline, form results, feature problems) ---------- */
.notice { display: flex; gap: 12px; align-items: flex-start; border: 2px solid var(--navy); border-left-width: 6px; border-radius: 10px; background: var(--bg); padding: 14px 18px; margin: 14px 0 0; }
.notice p { margin: 0 0 .4em; }
.notice p:last-child { margin-bottom: 0; }
.notice svg { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.notice-error { border-color: var(--error); color: var(--text); }
.notice-error svg { color: var(--error); }
.notice-ok { border-color: var(--navy); }
.notice-info { border-color: var(--accent-ink); }
.notice strong { display: block; }
.notice textarea { width: 100%; min-height: 140px; margin-top: 8px; padding: 10px; border: 2px solid var(--border); border-radius: 8px; font: inherit; font-size: .9rem; color: var(--text); background: var(--bg-alt); }
.offline-bar { background: var(--accent); color: var(--navy); font-weight: 600; font-size: .92rem; }
.offline-bar .wrap { padding-top: 10px; padding-bottom: 10px; }
.offline-bar p { margin: 0; max-width: none; }

/* ---------- Top bar with live office status ---------- */
.status-bar { background: var(--navy-gradient); color: #ffffff; font-size: .85rem; position: relative; }
.status-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brand-gradient); }
html.contrast .status-bar::after { background: #000000; }
.status-bar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 6px 14px; flex-wrap: wrap; min-height: 44px; padding-top: 6px; padding-bottom: 9px; }
.status-bar p { margin: 0; max-width: none; }
.status-bar a { color: #ffffff; }
.status-bar a:hover { color: var(--yellow); }
.status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); flex: none; }
.dot.open { background: var(--yellow); }
.dot.closed { background: var(--red); }

/* ---------- Header ---------- */
.site-header { border-bottom: 2px solid var(--line); background: var(--bg); }
/* Logo, Free consultation and Accessibility on top, menu on its own row below.
   (One row would need about 1320px with the Free consultation button, wider than .wrap.)
   Flex wrapping means that when the top items do not fit (narrow screens or large text),
   the buttons move to the next line instead of overlapping the logo. */
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; min-height: 84px; padding-top: 10px; padding-bottom: 10px; }
.site-nav { order: 1; flex: 1 0 100%; border-top: 1px solid var(--line); padding-top: 8px; }
.a11y-toggle { flex: none; }
/* Always-visible way to start a conversation, like the Contact link but harder to miss */
.header-cta { flex: none; min-height: 48px; padding: 8px 18px; white-space: nowrap; }
.brand { flex: none; margin-right: auto; display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; padding: 6px 10px 6px 4px; margin-left: -4px; border-radius: 12px; transition: background-color var(--fast) var(--ease); }
.brand:hover { background: var(--bg-alt); }
.brand img { width: auto; height: 44px; transition: transform var(--slow) var(--ease); }
.brand:hover img { transform: translateY(-2px); }
.brand span { font-family: var(--font-head); font-weight: 600; font-size: 1.3rem; color: var(--navy); line-height: 1.1; }
.brand small { display: block; font-family: var(--font-body); font-size: .78rem; color: var(--muted); font-weight: 500; margin-top: 3px; }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.site-nav a { display: block; padding: 10px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: background-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.site-nav a:hover { background: var(--accent-soft); color: var(--navy); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); border-radius: 8px 8px 0 0; }

/* ---------- Accessibility panel ---------- */
.a11y-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px; border-radius: 10px; border: 2px solid var(--navy); background: var(--accent-soft); color: var(--navy); font: 700 .95rem var(--font-body); letter-spacing: inherit; cursor: pointer; transition: background-color var(--fast) var(--ease); }
.a11y-toggle:hover, .a11y-toggle[aria-expanded="true"] { background: var(--accent); }
.a11y-toggle svg { width: 24px; height: 24px; }
.panel { background: var(--bg-alt); border-bottom: 2px solid var(--line); animation: drop var(--slow) var(--ease); }
.panel .wrap { padding-top: 24px; padding-bottom: 24px; }
.panel h2 { font-size: 1.3rem; }
.a11y-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.a11y-opt { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.a11y-opt .label { font-weight: 700; display: block; margin-bottom: 10px; color: var(--navy); }
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; min-height: 44px; border-radius: 8px; border: 2px solid var(--border); background: var(--bg); color: var(--text); font: 700 1rem var(--font-body); cursor: pointer; transition: background-color var(--fast) var(--ease); }
.seg button[aria-pressed="true"] { background: var(--navy); color: #ffffff; border-color: var(--navy); }
.switch { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 44px; background: none; border: 0; padding: 0; font: 600 1rem var(--font-body); letter-spacing: inherit; color: var(--text); cursor: pointer; text-align: left; }
.switch .track { width: 52px; height: 30px; border-radius: 999px; background: var(--border); position: relative; flex: none; transition: background-color var(--fast) var(--ease); }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #ffffff; transition: left var(--fast) var(--ease); }
.switch[aria-checked="true"] .track { background: var(--navy); }
.switch[aria-checked="true"] .track::after { left: 25px; }

/* ---------- Page tools: back and read aloud ---------- */
.page-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.back, .listen { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px; border-radius: 999px; border: 2px solid var(--border); background: var(--bg); color: var(--navy); font: 600 .9rem var(--font-body); letter-spacing: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.back:hover, .listen:hover { border-color: var(--navy); background: var(--accent-soft); color: var(--navy); }
.back svg, .listen svg { width: 18px; height: 18px; }
.back svg { transition: transform var(--fast) var(--ease); }
.back:hover svg { transform: translateX(-3px); }
.listen[aria-pressed="true"] { background: var(--navy); color: #ffffff; border-color: var(--navy); }
.section-tools { margin-bottom: 16px; }
.section-tools .notice { margin: 10px 0 0; max-width: 640px; }

/* ---------- Sections ---------- */
section { padding: 70px 0; }
.alt { background: var(--bg-alt); border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.hero { padding: 64px 0 50px; background: linear-gradient(var(--bg-alt), var(--bg)); }
.page-hero { padding: 40px 0 50px; background: var(--bg-alt); border-bottom: 2px solid var(--line); }
.page-hero p { font-size: 1.12rem; color: var(--muted); }
.breadcrumb { font-size: .9rem; color: var(--muted); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--border); }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; transition: border-color var(--fast) var(--ease), box-shadow var(--slow) var(--ease); }
.card p { color: var(--muted); }
.card > :last-child { margin-bottom: 0; }
.card-link:hover { border-color: var(--border); box-shadow: 0 12px 30px -18px var(--navy); }
.ico { width: 52px; height: 52px; border-radius: 12px; background: var(--accent-soft); color: var(--navy); display: grid; place-items: center; flex: none; margin-bottom: 16px; }
.ico svg { width: 28px; height: 28px; }
.card-link { display: flex; flex-direction: column; }
.card-link ul { margin: 0 0 22px; padding-left: 22px; }
.card-link li { margin-bottom: 4px; }
.card-link .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Task picker ---------- */
.tasks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 30px 0 0; list-style: none; padding: 0; }
.task { width: 100%; height: 100%; display: flex; align-items: center; gap: 16px; min-height: 88px; padding: 18px 20px; background: var(--bg); border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; text-align: left; font: 700 1.05rem var(--font-body); color: var(--navy); letter-spacing: inherit; transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease); }
.task:hover { border-color: var(--border); transform: translateY(-2px); }
.task:active { transform: translateY(0); }
.task[aria-expanded="true"] { border-color: var(--navy); background: var(--accent-soft); box-shadow: inset 6px 0 0 var(--accent); transform: none; }
.task .ico { width: 48px; height: 48px; margin: 0; }
.task[aria-expanded="true"] .ico { background: var(--bg); }
.task .ico svg { width: 26px; height: 26px; }
.task small { display: block; font-weight: 400; color: var(--muted); font-size: .9rem; }
.answer { margin-top: 20px; border: 2px solid var(--navy); border-radius: var(--radius); padding: 30px; background: var(--bg); animation: rise var(--slow) var(--ease); }
.answer:focus { outline: none; box-shadow: 0 0 0 4px var(--accent); }
.answer h2 { font-size: 1.6rem; }
.answer-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; }
.answer ul { padding-left: 22px; margin: 0 0 1em; }
.answer li { margin-bottom: 6px; }
.note { font-size: .92rem; color: var(--muted); border-left: 4px solid var(--accent); padding-left: 14px; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; padding: 0; margin: 30px 0 0; counter-reset: s; }
.steps li { counter-increment: s; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.steps li::before { content: "Step " counter(s); display: inline-block; font-weight: 700; font-size: .85rem; background: var(--navy); color: #ffffff; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; }
.steps p { color: var(--muted); margin: 0; }

/* ---------- Service list (visa page) ---------- */
.service-list { list-style: none; margin: 0; padding: 0; }
.service-item { display: grid; grid-template-columns: 300px 1fr; gap: 12px 40px; padding: 30px 0; border-top: 2px solid var(--line); }
.service-item:last-child { border-bottom: 2px solid var(--line); }
.service-item h3 { margin: 0; }
.service-item p { color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tag { font-size: .8rem; font-weight: 700; background: var(--accent-soft); color: var(--navy); padding: 4px 12px; border-radius: 999px; }

/* ---------- Course pages: intake card, packages, weekly timetable (lumina.html) ---------- */
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 8px; }
.breadcrumb + .eyebrow { margin-top: 22px; }
.hero-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px 40px; align-items: center; }
.intake { background: var(--bg); border: 2px solid var(--navy); border-radius: var(--radius); padding: 28px; box-shadow: inset 6px 0 0 var(--accent); }
.intake h2 { font-size: 1.6rem; margin-bottom: .4em; }
.intake p { font-size: 1rem; color: var(--muted); }
.intake ul { padding-left: 20px; margin: 0 0 20px; }
.intake li { margin-bottom: 6px; }
.packages { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.package { display: flex; flex-direction: column; }
.package h3 { margin-bottom: .2em; }
.price { margin: 0 0 18px; color: var(--muted); font-weight: 600; }
.price strong { font-family: var(--font-head); font-size: 2.3rem; color: var(--navy); line-height: 1.1; margin-right: 4px; }
.facts { margin: 0 0 22px; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 9.5em 1fr; gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 700; color: var(--navy); font-size: .92rem; }
.facts dd { margin: 0; color: var(--muted); }
.package .btn { margin-top: auto; align-self: flex-start; }
.included { margin-top: 24px; }
.included ul { margin: 0; padding-left: 22px; }
.included li { margin-bottom: 4px; }
.table-wrap { overflow-x: auto; margin-top: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.timetable { width: 100%; border-collapse: collapse; }
.timetable th, .timetable td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.timetable thead th { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--bg-alt); }
.timetable tbody tr:last-child > * { border-bottom: 0; }
.timetable tbody th { color: var(--navy); white-space: nowrap; }
.timetable tr.today > * { background: var(--accent-soft); }
.timetable tr.today th { box-shadow: inset 6px 0 0 var(--accent); }
.today-tag { display: inline-block; margin-left: 8px; font-size: .75rem; font-weight: 700; background: var(--navy); color: #ffffff; padding: 2px 10px; border-radius: 999px; vertical-align: middle; }

/* ---------- FAQ ---------- */
.search { display: flex; gap: 10px; margin: 20px 0 24px; max-width: 640px; }
.search input { flex: 1; min-height: 54px; padding: 12px 16px; border: 2px solid var(--border); border-radius: 10px; font: inherit; color: var(--text); background: var(--bg); transition: border-color var(--fast) var(--ease); }
.search input:focus { border-color: var(--navy); }
details { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; background: var(--bg); transition: border-color var(--fast) var(--ease); }
details:hover, details[open] { border-color: var(--border); }
details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--slow) var(--ease), content-visibility var(--slow) allow-discrete; }
details[open]::details-content { block-size: auto; }
summary { cursor: pointer; padding: 18px 22px; font-weight: 700; color: var(--navy); list-style: none; display: flex; justify-content: space-between; gap: 14px; min-height: 56px; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "Show"; font-size: .85rem; font-weight: 600; color: var(--accent-ink); flex: none; }
details[open] summary::after { content: "Hide"; }
details p { padding: 0 22px 18px; margin: 0; color: var(--muted); }
mark { background: var(--accent-soft); color: inherit; padding: 0 2px; border-radius: 3px; box-shadow: inset 0 -2px 0 var(--accent); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--navy-gradient); color: #ffffff; border-radius: 20px; padding: 50px; display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--brand-gradient); }
.cta-band h2 { color: #ffffff; margin-bottom: .3em; }
.cta-band p { margin: 0; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 30px; align-items: start; }
.ways { display: grid; gap: 12px; }
.way { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 2px solid var(--line); border-radius: var(--radius); text-decoration: none; background: var(--bg); transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
a.way:hover { border-color: var(--navy); transform: translateX(3px); }
.way svg { width: 28px; height: 28px; color: var(--navy); flex: none; }
.way strong { display: block; color: var(--navy); }
.way span { color: var(--muted); font-size: .95rem; }
.field { margin-bottom: 18px; }
.field label, .field legend { display: block; font-weight: 700; margin-bottom: 6px; color: var(--navy); }
.field .hint { display: block; font-weight: 400; font-size: .9rem; color: var(--muted); }
.field .optional { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 10px 14px; border: 2px solid var(--border); border-radius: 10px; font: inherit; color: var(--text); background: var(--bg); transition: border-color var(--fast) var(--ease); }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); }
.field [aria-invalid="true"] { border-color: var(--error); border-width: 3px; }
.error { color: var(--error); font-weight: 600; font-size: .92rem; margin: 6px 0 0; }
fieldset.field { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.radios { display: flex; gap: 10px; flex-wrap: wrap; }
.radios label { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px; border: 2px solid var(--border); border-radius: 10px; cursor: pointer; font-weight: 600; color: var(--text); margin: 0; transition: background-color var(--fast) var(--ease); }
.radios input { width: 20px; height: 20px; accent-color: var(--navy); }
.radios label:has(input:checked) { border-color: var(--navy); background: var(--accent-soft); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.error-summary { margin: 0 0 20px; }
.error-summary ul { margin: 6px 0 0; padding-left: 20px; }
.error-summary a { color: var(--error); font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-gradient); color: #ffffff; padding: 60px 0 30px; font-size: .95rem; position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--brand-gradient); }
html.contrast .site-footer::before { background: #000000; }
.site-footer a { color: #ffffff; }
.site-footer a:hover { color: var(--yellow); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 30px; }
.footer-logo { display: inline-block; border-radius: 8px; margin-bottom: 14px; }
.footer-logo img { width: 230px; }
.site-footer h2 { color: var(--accent); font-family: var(--font-body); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .2); display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: .85rem; }
.footer-bottom p { margin: 0; }

/* ---------- Motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .tasks, .grid-3 { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .answer-grid, .contact-grid, .grid-2, .hero-split, .packages { grid-template-columns: 1fr; }
  .service-item { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  section { padding: 54px 0; }
  .tasks, .steps, .grid-3, .form-row, .footer-grid { grid-template-columns: 1fr; }
  .answer, .card, .intake { padding: 22px; }
  .facts div { grid-template-columns: 1fr; }
  .timetable th, .timetable td { padding: 12px 14px; }
  .cta-band { padding: 32px 24px; }
  .search { flex-direction: column; }
  .brand { gap: 10px; padding-right: 6px; min-width: 0; }
  .brand img { height: 28px; }
  .brand span { font-size: 1.05rem; white-space: nowrap; }
  .site-nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .site-nav li:last-child:nth-child(odd) { grid-column: 1 / -1; } /* an odd last item (Contact) fills the row */
  .site-nav a { padding: 10px 12px; text-align: center; border: 2px solid var(--line); border-radius: 10px; }
  .site-nav a[aria-current="page"] { border-color: var(--navy); background: var(--accent-soft); box-shadow: inset 0 -3px 0 var(--accent); border-radius: 10px; }
  .brand small { display: none; }
  .status-bar { font-size: .8rem; }
  .hide-sm { display: none; }
  .header-cta { display: none; } /* the Contact button in the menu is already large on phones */
  .a11y-toggle { width: 52px; height: 52px; padding: 0; justify-content: center; }
  .a11y-toggle svg { width: 28px; height: 28px; }
  .a11y-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}