/* ==========================================================================
   DMK Accountants Ltd - dmk.com.cy
   Static rebuild, 2026. No frameworks, no external requests.
   ========================================================================== */

/* --- Fonts --------------------------------------------------------------
   Self-hosted variable font (latin subset). Deliberately NOT Google Fonts:
   the origin makes zero third-party requests, so no visitor IP is shared
   with a US host. One file covers the whole 400-700 weight range.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/merriweather-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  --navy:        #0b1f3a;
  --navy-deep:   #071528;
  --navy-soft:   #13304f;
  --brand:       #345ec2;
  --brand-light: #4f7fe0;
  --brand-pale:  #eaf0fb;
  --ink:         #16202e;
  --body:        #48576b;
  /* Darkened from #6b7a8d, which was 4.38:1 on white and 4.12:1 on --bg-alt,
     both under the 4.5:1 AA floor for small text. Now 5.02 / 4.72. */
  --muted:       #647082;
  --line:        #e2e8f0;
  --bg:          #ffffff;
  --bg-alt:      #f6f8fb;

  --serif: 'Merriweather', Georgia, 'Times New Roman', serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1140px;
  --gut: 24px;
  --radius: 6px;
  --shadow-sm: 0 1px 3px rgba(11, 31, 58, .08);
  --shadow-md: 0 6px 24px rgba(11, 31, 58, .10);
  --shadow-lg: 0 18px 48px rgba(11, 31, 58, .14);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-light); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 .6em;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); letter-spacing: -.015em; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
h4 { font-size: 1.16rem; }
p  { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .5em; }

/* Visible keyboard focus, site-wide */
:focus-visible {
  outline: 3px solid var(--brand-light);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand); color: #fff; padding: 12px 20px; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* --- Layout helpers ----------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.section { padding: clamp(56px, 9vw, 104px) 0; }
.section--alt { background: var(--bg-alt); }
.section--navy { background: var(--navy); color: #c3d2e6; }
.section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }

.lead { font-size: 1.16rem; line-height: 1.7; color: var(--body); }
.section--navy .lead { color: #c3d2e6; }

.eyebrow {
  font-family: var(--sans);
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 .9rem;
}
.section--navy .eyebrow { color: var(--brand-light); }

.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p:last-child { margin-bottom: 0; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  padding: 14px 30px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-light); border-color: var(--brand-light); color: #fff; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn--outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn--outline:hover { background: var(--brand); color: #fff; }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 31, 58, .97);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 78px; gap: 20px;
}
.brand { display: flex; align-items: center; }
.brand img { height: 44px; width: auto; }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  padding: 10px; margin-right: -10px;
  color: #fff;
}
.nav-toggle svg { display: block; }

.nav ul {
  list-style: none; display: flex; align-items: center; gap: 4px;
  margin: 0; padding: 0;
}
.nav li { margin: 0; }
.nav a {
  display: block;
  font-size: .93rem; font-weight: 600; letter-spacing: .01em;
  color: #cfdcee; padding: 10px 15px; border-radius: var(--radius);
  transition: color .16s ease, background .16s ease;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav a[aria-current="page"] { color: #fff; background: rgba(79,127,224,.28); }
.nav .nav-cta { margin-left: 10px; }
.nav .nav-cta a {
  background: var(--brand); color: #fff; padding: 11px 22px;
}
.nav .nav-cta a:hover { background: var(--brand-light); }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--navy-deep) center/cover no-repeat;
  color: #fff;
  padding: clamp(80px, 13vw, 152px) 0;
  overflow: hidden;
}
/* The scrim exists to make white text legible, not to hide the photograph.
   It is heavy on the left, where the copy sits, and nearly clear on the right so
   the artwork actually reads. The first draft ran .94 -> .42 across the whole
   width and drowned the image completely. Narrow screens get a flat, stronger
   version instead, because there the text spans the full width (see below). */
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(7,21,40,.93) 0%,
    rgba(7,21,40,.89) 32%,
    rgba(7,21,40,.68) 60%,
    rgba(7,21,40,.26) 82%,
    rgba(7,21,40,.12) 100%);
}

/* Hero artwork lives HERE, not in a style="" attribute on the section.
   The CSP is `style-src 'self'` with no 'unsafe-inline', which blocks inline style
   attributes outright — so an inline background-image renders nothing on the real
   server while looking fine in a local preview that sends no CSP. Keep every
   background in this stylesheet; do not reintroduce style="" to the markup. */
.hero--home     { background-image: url('../img/hero.jpg');
                  /* The lettering sits low in the frame, so a plain `center`
                     crop cuts it off on a short hero. Bias the crop downward. */
                  background-position: 50% 68%; }
.hero--services { background-image: url('../img/services.jpg'); }
.hero--about    { background-image: url('../img/office.jpg'); }
.hero--city     { background-image: url('../img/buildings.jpg'); }
.hero .wrap { position: relative; z-index: 1; }
.hero-inner { max-width: 720px; }
.hero h1 { color: #fff; margin-bottom: .5em; }
/* White, not the #c9d8ec used elsewhere on navy: over a photograph the muted tone
   measured 3.27:1 where the second line reached the bright bokeh. The measure is
   also tightened from 38em so the copy stays inside the scrim's dark end. */
.hero p { font-size: clamp(1.05rem, 2vw, 1.24rem); color: #fff; max-width: 31em; }
/* `.hero p` is (0,1,1) and beats a bare `.eyebrow`/`.breadcrumb` at (0,1,0), which
   would flatten both to the body colour. Two-class selectors restore them. */
.hero .eyebrow { font-size: .78rem; color: var(--brand-light); }
.hero .breadcrumb { font-size: .85rem; color: #93aac9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Links inside hero copy. Without this they take the global `a{color:var(--brand)}`,
   which is a mid blue on a dark navy photograph - the contact page's phone number
   was rendering that way. The breadcrumb is excluded because it sets its own tone. */
.hero-inner > p:not(.breadcrumb) a {
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.45);
}
.hero-inner > p:not(.breadcrumb) a:hover { border-bottom-color: #fff; }

/* Compact hero for inner pages */
.hero--page { padding: clamp(64px, 9vw, 104px) 0; }
.hero--page h1 { margin-bottom: .35em; }
.hero--page p { margin-bottom: 0; }

.breadcrumb {
  font-size: .85rem; color: #93aac9; margin: 0 0 1.1rem;
}
.breadcrumb a { color: #93aac9; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { margin: 0 .5em; opacity: .6; }

/* --- Trust bar ---------------------------------------------------------- */
.trustbar { background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.trustbar-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
}
.trustbar-item {
  background: var(--bg-alt); padding: 30px 26px; text-align: center;
}
.trustbar-item strong {
  display: block; font-family: var(--serif); font-size: 1.9rem; color: var(--brand); line-height: 1.1;
}
.trustbar-item span { display: block; font-size: .9rem; color: var(--muted); margin-top: 6px; }

/* --- Generic grids ------------------------------------------------------ */
.grid { display: grid; gap: 28px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* --- Feature (why trust us) --------------------------------------------- */
.feature { text-align: left; }
.feature-icon {
  width: 54px; height: 54px; border-radius: var(--radius);
  background: var(--brand-pale); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.feature-icon svg { width: 27px; height: 27px; }
.feature h3 { margin-bottom: .45em; }
.feature p:last-child { margin-bottom: 0; }

/* --- Service cards ------------------------------------------------------ */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px; box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  display: flex; flex-direction: column;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: #cfd9e6; }
.card-icon {
  width: 48px; height: 48px; border-radius: var(--radius);
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.card-icon svg { width: 24px; height: 24px; }
.card h2, .card h3 { font-size: 1.28rem; margin-bottom: .5em; }
.card p { font-size: .97rem; }
.card ul { font-size: .95rem; padding-left: 0; list-style: none; margin-bottom: 1.3em; }
.card ul li {
  position: relative; padding-left: 26px; margin-bottom: .55em; color: var(--body);
}
.card ul li::before {
  content: ''; position: absolute; left: 4px; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand-light);
}
.card .card-foot { margin-top: auto; padding-top: 6px; }
.card-link { font-weight: 600; font-size: .95rem; display: inline-flex; align-items: center; gap: 7px; }
.card-link svg { width: 15px; height: 15px; transition: transform .18s ease; }
.card-link:hover svg { transform: translateX(3px); }

/* --- Service detail blocks (services page) ------------------------------ */
.svc {
  display: grid; grid-template-columns: 56px 1fr; gap: 0 24px;
  padding: 40px 0; border-top: 1px solid var(--line);
}
.svc:first-of-type { border-top: 0; padding-top: 0; }
.svc-num {
  font-family: var(--serif); font-size: 1rem; font-weight: 700;
  color: var(--brand); padding-top: .35em;
}
/* h2 for document structure (they sit directly under the page h1), but sized as
   subsections so the page does not read as five competing headlines. */
.svc h2 { font-size: clamp(1.3rem, 2.3vw, 1.66rem); margin-bottom: .5em; }
.svc-body > p:last-child, .svc-body > ul:last-child { margin-bottom: 0; }
.checklist { list-style: none; padding-left: 0; }
.checklist li { position: relative; padding-left: 30px; }
.checklist li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23345ec2' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* --- Split (image + text) ----------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 68px); align-items: center; }
.split--reverse .split-media { order: 2; }
.split-media img { border-radius: var(--radius); box-shadow: var(--shadow-md); width: 100%; }
.split-body > *:last-child { margin-bottom: 0; }

/* --- Partners ----------------------------------------------------------- */
.partner {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 32px; box-shadow: var(--shadow-sm);
}
.partner-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.monogram {
  flex: 0 0 62px; width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--navy-soft) 100%);
  color: #fff; font-family: var(--serif); font-weight: 700; font-size: 1.28rem;
  display: flex; align-items: center; justify-content: center; letter-spacing: .01em;
}
.partner-head h2 { margin: 0 0 2px; font-size: 1.22rem; }
.partner-head .creds { font-size: .87rem; color: var(--brand); font-weight: 600; letter-spacing: .02em; }
.partner p { font-size: .97rem; }
.partner p:last-child { margin-bottom: 0; }

/* --- Stat / advantage list (why cyprus) --------------------------------- */
.adv {
  display: grid; grid-template-columns: 44px 1fr; gap: 0 18px;
  padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.12);
}
.adv:last-child { border-bottom: 0; }
.adv-icon {
  width: 44px; height: 44px; border-radius: var(--radius);
  background: rgba(79,127,224,.20); color: #8fb3f2;
  display: flex; align-items: center; justify-content: center;
}
.adv-icon svg { width: 22px; height: 22px; }
.adv h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin-bottom: .35em; }
.adv p { margin-bottom: 0; font-size: .97rem; }

/* --- Contact ------------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(34px, 5vw, 64px); align-items: start; }

.contact-list { list-style: none; padding: 0; margin: 0 0 32px; }
.contact-list li {
  display: grid; grid-template-columns: 42px 1fr; gap: 0 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line); margin: 0;
}
.contact-list li:first-child { padding-top: 0; }
.contact-ico {
  width: 42px; height: 42px; border-radius: var(--radius);
  background: var(--brand-pale); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.contact-ico svg { width: 20px; height: 20px; }
.contact-list dt {
  font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2px;
}
.contact-list dd { margin: 0; font-size: 1.02rem; color: var(--ink); font-weight: 500; }
.contact-list dd a { color: var(--ink); }
.contact-list dd a:hover { color: var(--brand); }

/* --- Form --------------------------------------------------------------- */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(28px, 4vw, 42px); box-shadow: var(--shadow-md);
}
.field { margin-bottom: 20px; }
.field label {
  display: block; font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: 7px;
}
.field .req { color: #c0392b; }
.field input, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: 13px 15px; border: 1px solid #cbd5e1; border-radius: var(--radius);
  background: #fff; transition: border-color .16s ease, box-shadow .16s ease;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(52,94,194,.16);
}
.field textarea { min-height: 148px; resize: vertical; }
.field-hint { font-size: .84rem; color: var(--muted); margin: 7px 0 0; }
/* Honeypot - hidden from humans, visible to naive bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-consent { font-size: .86rem; color: var(--muted); margin: 0 0 22px; }
.form-note {
  padding: 14px 18px; border-radius: var(--radius); margin-bottom: 24px; font-size: .95rem;
}
.form-note--ok  { background: #eaf7ef; border: 1px solid #b7e0c6; color: #1e6b3a; }
.form-note--err { background: #fdecea; border: 1px solid #f5c2bd; color: #96271b; }

/* --- Map ---------------------------------------------------------------- */
.map-embed {
  border: 0; width: 100%; height: 420px; display: block; filter: grayscale(.25);
}

/* --- CTA band ----------------------------------------------------------- */
.cta-band {
  background: linear-gradient(120deg, var(--brand) 0%, var(--navy-soft) 100%);
  color: #fff; text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #dbe6f8; max-width: 40em; margin-left: auto; margin-right: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--navy-deep); color: #91a6c2; font-size: .95rem; }
.footer-main { padding: clamp(48px, 7vw, 76px) 0 44px; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 36px;
}
.footer-logo img { height: 52px; width: auto; margin-bottom: 18px; }
.footer-about p { font-size: .93rem; line-height: 1.7; margin-bottom: 0; }
.site-footer h2 {
  color: #fff; font-family: var(--sans); font-size: .8rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; margin-bottom: 18px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: #91a6c2; }
.site-footer a:hover { color: #fff; }
.footer-contact li {
  display: grid; grid-template-columns: 20px 1fr; gap: 0 11px; align-items: start;
  line-height: 1.6;
}
.footer-contact svg { width: 15px; height: 15px; margin-top: .34em; color: var(--brand-light); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 22px 0; font-size: .87rem;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
}
.footer-bottom p { margin: 0; }

/* --- DBSpectrum credit -----------------------------------------------------
   Canonical studio credit from the dbspectrum-credit skill. Do NOT "tidy" the
   doubled .dbs-credit__wm class or swap --dbs-ink back to currentColor: both
   are specificity/paint defences against host footer link rules, and both fail
   silently (the credit still renders, just in the wrong colours).
   -------------------------------------------------------------------------- */
.dbs-credit-wrap {
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.dbs-credit {
  --dbs-ink: rgba(255,255,255,.9);
  --dbs-ink-hi: #fff;
  --dbs-wm: #fff;
  --dbs-wm-size: .87rem;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px;
}
.dbs-credit.dbs-credit { text-decoration: none; }
.dbs-credit__glyph {
  width: 26px; height: 24px; flex: 0 0 auto;
  overflow: visible; transition: filter .3s ease;
}
.dbs-credit .dbs-credit__prism { stroke: var(--dbs-ink); }
.dbs-credit .dbs-beam-stop { stop-color: var(--dbs-ink); }
.dbs-credit .dbs-credit__wm.dbs-credit__wm {
  font-weight: 800; font-size: var(--dbs-wm-size); letter-spacing: -.2px;
  color: var(--dbs-wm); line-height: 1.2; text-decoration: none;
}
.dbs-credit__prism, .dbs-credit__beam, .dbs-credit__ray {
  transition: transform .38s cubic-bezier(.22,1,.36,1), stroke .3s ease;
}
.dbs-credit:hover, .dbs-credit:focus-visible { --dbs-ink: var(--dbs-ink-hi); }
.dbs-credit:hover .dbs-credit__glyph,
.dbs-credit:focus-visible .dbs-credit__glyph {
  filter: drop-shadow(0 0 4px rgba(167,139,250,.8)) drop-shadow(0 0 11px rgba(34,211,238,.45));
}
.dbs-credit:hover .dbs-ray--cyan,
.dbs-credit:focus-visible .dbs-ray--cyan { transform: translate(2.4px,-.7px); }
.dbs-credit:hover .dbs-ray--violet,
.dbs-credit:focus-visible .dbs-ray--violet { transform: translate(2.8px,0); }
.dbs-credit:hover .dbs-ray--blue,
.dbs-credit:focus-visible .dbs-ray--blue { transform: translate(2.4px,.7px); }
.dbs-credit:hover .dbs-credit__beam,
.dbs-credit:focus-visible .dbs-credit__beam { transform: translateX(-1.6px); }
@media (prefers-reduced-motion: reduce) {
  .dbs-credit__prism, .dbs-credit__beam, .dbs-credit__ray, .dbs-credit__glyph { transition: none; }
  .dbs-credit:hover .dbs-ray--cyan, .dbs-credit:focus-visible .dbs-ray--cyan,
  .dbs-credit:hover .dbs-ray--violet, .dbs-credit:focus-visible .dbs-ray--violet,
  .dbs-credit:hover .dbs-ray--blue, .dbs-credit:focus-visible .dbs-ray--blue,
  .dbs-credit:hover .dbs-credit__beam, .dbs-credit:focus-visible .dbs-credit__beam { transform: none; }
}

/* --- Legal / content pages ---------------------------------------------- */
.prose { max-width: 760px; }
.prose--wide { max-width: 820px; }
.prose h2 { margin-top: 1.8em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.5em; }

/* --- 404 / thank-you ---------------------------------------------------- */
.error-page { text-align: center; padding: clamp(70px, 12vw, 130px) 0; }
.error-lead { max-width: 34em; margin: 0 auto 32px; }
.error-icon { margin: 0 auto 24px; width: 64px; height: 64px; }
.error-icon svg { width: 32px; height: 32px; }
.error-code {
  font-family: var(--serif); font-size: clamp(4rem, 14vw, 8rem); font-weight: 700;
  color: var(--brand-pale); line-height: 1; margin: 0 0 .1em;
}

/* ==========================================================================
   Responsive - the old site shipped `responsive-off.css`; this replaces it.
   ========================================================================== */
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  body { font-size: 16px; }

  /* The copy now spans the full width, so the left-weighted scrim would leave
     text sitting over the bright bokeh on the right. Go flat and a little
     stronger: the image still reads, the text stays legible. */
  .hero::after {
    background: linear-gradient(180deg, rgba(7,21,40,.86) 0%, rgba(7,21,40,.78) 55%, rgba(7,21,40,.84) 100%);
  }

  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 78px 0 auto; z-index: 99;
    background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.1);
    max-height: calc(100vh - 78px); overflow-y: auto;
    display: none; box-shadow: var(--shadow-lg);
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--gut) 22px; }
  .nav a { padding: 14px 12px; font-size: 1rem; border-radius: var(--radius); }
  .nav .nav-cta { margin: 12px 0 0; }
  .nav .nav-cta a { text-align: center; padding: 15px 22px; }

  .split, .split--reverse .split-media { grid-template-columns: 1fr; order: 0; }
  .split-media { margin-bottom: 4px; }
  .grid--2 { grid-template-columns: 1fr; }
  .hero-actions .btn, .cta-actions .btn { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 640px) {
  :root { --gut: 20px; }
  .grid--3 { grid-template-columns: 1fr; }
  .trustbar-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .svc { grid-template-columns: 1fr; gap: 0; }
  .svc-num { padding-top: 0; margin-bottom: .4em; }
  .map-embed { height: 320px; }
}

/* --- Motion / print ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .site-header, .nav-toggle, .cta-band, .hero-actions, .map-embed, .form-card { display: none; }
  body { font-size: 11pt; color: #000; }
  .hero { background: none; color: #000; padding: 0 0 20pt; }
  .hero::after { display: none; }
  .hero h1, .hero p { color: #000; }
  .site-footer { background: none; color: #000; border-top: 1pt solid #999; }
  .site-footer h4, .site-footer a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}