/* Keywise Security Cyf. Colours are sampled from the logo: navy, teal and slate. */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --navy: #012240;
  --navy-deep: #011830;
  --navy-soft: #0a3157;
  --teal: #038ead;
  --teal-bright: #19b3cf;
  --teal-deep: #015071;
  --teal-ink: #02677f;
  --slate: #334151;
  --slate-soft: #5d6a77;
  --mist: #f3f6f8;
  --line: #dbe2e8;
  --white: #ffffff;
  --danger: #a32218;
  --danger-bg: #fdf0ee;
  --success: #17603f;
  --success-bg: #ecf7f1;

  --season-fg: #ffffff;
  --season-accent: var(--teal-bright);
  --season-glow: rgba(25, 179, 207, 0.2);
  --accent: var(--teal-bright);

  --font-head: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(1, 34, 64, 0.06), 0 10px 28px rgba(1, 34, 64, 0.09);
  --wrap: 1180px;
  --gutter: 20px;
}

/* Seasonal looks. Only the band beneath the header changes: it stays navy, with one colour for the occasion. */
[data-look="christmas"] { --season-accent: #d8b04a; --season-glow: rgba(216, 176, 74, 0.2); }
[data-look="new-year"] { --season-accent: #e0bd52; --season-glow: rgba(224, 189, 82, 0.2); }
[data-look="easter"] { --season-accent: #f2cf4a; --season-glow: rgba(242, 207, 74, 0.18); }
[data-look="halloween"] { --season-accent: #ec8a2f; --season-glow: rgba(236, 138, 47, 0.22); }
[data-look="st-patricks"] { --season-accent: #5cc08a; --season-glow: rgba(92, 192, 138, 0.2); }
[data-look="st-davids"] { --season-accent: #f5cf2e; --season-glow: rgba(245, 207, 46, 0.18); }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--slate);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; vertical-align: middle; }

h1, h2, h3 { font-family: var(--font-head); color: var(--navy); line-height: 1.18; margin: 0 0 0.6em; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5.2vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 700; }
h3, .h3 { font-size: 1.2rem; font-weight: 700; }

p, ul, ol { margin: 0 0 1.1em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--teal-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }

:focus-visible { outline: 3px solid var(--teal-bright); outline-offset: 2px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--white); color: var(--navy); padding: 10px 16px; border-radius: var(--radius); font-weight: 600; }
.skip:focus { top: 12px; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

/* ---- Buttons ---- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 48px; padding: 0.7em 1.35em;
  font-family: var(--font-head); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.2;
  text-decoration: none; text-align: center;
  border: 2px solid transparent; border-radius: 4px; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--teal-deep); color: var(--white); }
.btn-accent { background: var(--teal-bright); color: var(--navy-deep); }
.btn-accent:hover { background: #4fcbe2; color: var(--navy-deep); }
.btn-light { background: var(--white); color: var(--navy); }
.btn-light:hover { background: var(--mist); color: var(--navy); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.45); }
.btn-ghost:hover { border-color: var(--white); color: var(--white); background: rgba(255, 255, 255, 0.08); }
.btn-large { min-height: 54px; font-size: 1.02rem; padding: 0.8em 1.6em; }
.btn-block { display: flex; width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.link-arrow, .card-more { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; }
.link-arrow .icon, .card-more .icon { width: 1.1em; height: 1.1em; transition: transform 0.15s ease; }
.link-arrow:hover .icon, .card:hover .card-more .icon { transform: translateX(3px); }

/* ---- Top bar and header ---- */

.topbar { background: var(--navy-deep); color: #c9d6e2; font-size: 0.86rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; }
.topbar-note { display: none; align-items: center; gap: 0.5em; margin: 0; }
.topbar-note .icon { color: var(--teal-bright); }
.topbar-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; }
.topbar-phone, .topbar-login { display: inline-flex; align-items: center; gap: 0.45em; color: var(--white); text-decoration: none; font-weight: 600; min-height: 42px; }
.topbar-phone .icon { color: var(--teal-bright); }
.topbar-login { border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 0 0.9em; min-height: 30px; font-size: 0.82rem; }
.topbar-login:hover, .topbar-phone:hover { color: var(--teal-bright); border-color: var(--teal-bright); }
.topbar-login .icon { width: 1.05em; height: 1.05em; }

.site-header { background: var(--white); border-bottom: 1px solid var(--line); position: relative; z-index: 30; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; }
/* The logo, from the Logo screen in the back office. Its height is chosen there. It always keeps its shape, and a wide
   one is also held to the room the header has, so the menu and the contact button are never pushed out. */
.brand-logo { display: block; width: auto; height: auto; max-width: 100%; max-height: 40px; }
.logo-p-28 { max-height: 28px; }
.logo-p-32 { max-height: 32px; }
.logo-p-36 { max-height: 36px; }
.logo-p-40 { max-height: 40px; }
.logo-p-44 { max-height: 44px; }
.logo-p-48 { max-height: 48px; }
.logo-p-52 { max-height: 52px; }

.nav, .header-cta { display: none; }

.menu-button {
  display: inline-flex; align-items: center; gap: 0.5em; list-style: none; cursor: pointer;
  min-height: 46px; padding: 0 0.9em; border: 1px solid var(--line); border-radius: 4px;
  font-family: var(--font-head); font-weight: 700; font-size: 0.92rem; color: var(--navy);
}
.menu-button::-webkit-details-marker, .mobile-group > summary::-webkit-details-marker { display: none; }
.mobile-menu[open] .menu-button { background: var(--navy); color: var(--white); border-color: var(--navy); }
.mobile-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  padding: 8px var(--gutter) 20px; max-height: calc(100vh - 150px); overflow-y: auto;
}
.mobile-link, .mobile-group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5em; min-height: 52px;
  font-family: var(--font-head); font-weight: 700; color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--line); cursor: pointer; list-style: none;
}
.mobile-group > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(45deg); margin-right: 6px; transition: transform 0.15s ease; }
.mobile-group[open] > summary::after { transform: rotate(-135deg); }
.mobile-group ul { list-style: none; margin: 0; padding: 6px 0 10px; border-bottom: 1px solid var(--line); }
.mobile-group li a { display: flex; align-items: center; min-height: 44px; padding-left: 14px; color: var(--slate); text-decoration: none; border-left: 2px solid var(--line); }
.mobile-group li a[aria-current], .mobile-link[aria-current] { color: var(--teal-ink); }

@media (min-width: 700px) {
  .topbar-note { display: inline-flex; }
  .topbar-actions { width: auto; gap: 22px; }
  .logo-d-36 { max-height: 36px; }
  .logo-d-40 { max-height: 40px; }
  .logo-d-44 { max-height: 44px; }
  .logo-d-48 { max-height: 48px; }
  .logo-d-52 { max-height: 52px; }
  .logo-d-56 { max-height: 56px; }
  .logo-d-60 { max-height: 60px; }
  .logo-d-64 { max-height: 64px; }
  .logo-d-68 { max-height: 68px; }
  .logo-d-72 { max-height: 72px; }
}

@media (min-width: 1040px) {
  :root { --gutter: 32px; }
  .mobile-menu { display: none; }
  .site-header { position: sticky; top: 0; }
  .header-inner { min-height: 84px; }
  .nav { display: block; margin-left: auto; }
  .header-cta { display: inline-flex; white-space: nowrap; flex: none; padding-left: 1em; padding-right: 1em; font-size: 0.92rem; }
  .nav-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
  .nav-item { position: relative; }
  .nav-link {
    display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; padding: 0 0.5em; white-space: nowrap;
    background: none; border: 0; border-radius: 4px; cursor: pointer;
    font-family: var(--font-head); font-size: 0.93rem; font-weight: 600; color: var(--navy); text-decoration: none;
  }
  .has-sub > .nav-link::after { content: ""; width: 6px; height: 6px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: translateY(-2px) rotate(45deg); transition: transform 0.15s ease; }
  .nav-link:hover, .nav-link[aria-current], .nav-link.is-current, .nav-item.is-open > .nav-link,
  .nav:not(.is-enhanced) .nav-item:focus-within > .nav-link { color: var(--teal-ink); background: var(--mist); }
  .nav-item.is-open > .nav-link::after { transform: translateY(1px) rotate(-135deg); }
  .sub {
    position: absolute; left: 0; top: 100%; min-width: 290px; list-style: none; margin: 0; padding: 8px;
    background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--teal-bright); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
  }
  /* Without the menu's script, a list opens on hover and on keyboard focus. With it, exactly when the script opens it. */
  .nav:not(.is-enhanced) .has-sub:hover > .sub, .nav:not(.is-enhanced) .has-sub:focus-within > .sub,
  .nav.is-enhanced .has-sub.is-open > .sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  /* Visible, and so reachable with Tab, the moment it opens. On closing it fades out first, then hides. */
  /* A strip above the list, over the gap below its heading, so the pointer never crosses empty space on its way down. */
  .sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; }
  .sub a { display: block; padding: 9px 12px; border-radius: 4px; color: var(--slate); text-decoration: none; font-size: 0.95rem; }
  .sub a:hover, .sub a[aria-current] { background: var(--mist); color: var(--navy); }
}

/* ---- Hero ---- */

.eyebrow {
  display: flex; align-items: center; gap: 0.75em; margin: 0 0 1.1em;
  font-family: var(--font-head); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-bright);
}
.eyebrow::before { content: ""; flex: none; width: 34px; height: 8px; background: var(--teal-bright); clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }

.hero, .page-hero { position: relative; overflow: hidden; color: #d7e2ec; background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, #073a62 100%); }
.hero h1, .page-hero h1 { color: var(--white); }
.hero { padding: 56px 0 64px; }
.page-hero { padding: 44px 0 48px; }
.page-hero h1 { font-size: clamp(1.8rem, 4.4vw, 2.7rem); max-width: 22ch; }
.hero .wrap, .page-hero .wrap { position: relative; z-index: 1; }
.lede { font-size: 1.14rem; line-height: 1.6; max-width: 60ch; color: #d7e2ec; }
.page-hero .lede { margin-top: 0.4em; }

.hero-mark { position: absolute; right: -90px; top: -30px; width: 420px; height: auto; opacity: 0.9; pointer-events: none; }
.hero-mark-large { width: 620px; right: -160px; top: -40px; }
.hero-mark .k-stem { fill: rgba(255, 255, 255, 0.035); }
.hero-mark .k-band { fill: rgba(25, 179, 207, 0.16); }
.hero-mark .k-foot { fill: rgba(25, 179, 207, 0.1); }
.hero-mark .k-leg { fill: rgba(255, 255, 255, 0.05); }

.hero-grid { display: grid; gap: 40px; align-items: center; }
.hero-copy h1 { max-width: 16ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-actions .btn { flex: 1 1 220px; }

.pillars { list-style: none; margin: 0; padding: 26px 26px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius); background: rgba(1, 24, 48, 0.45); backdrop-filter: blur(2px); }
.pillars li { display: flex; align-items: center; gap: 16px; padding: 14px 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.05rem, 2.4vw, 1.4rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); }
.pillars li + li { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.pillars li::before { content: ""; flex: none; width: 44px; height: 12px; background: linear-gradient(90deg, var(--teal-deep), var(--teal-bright)); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
/* The smallest phones: a little less space between letters, so each line stays on one line. */
@media (max-width: 359px) {
  .pillars { padding: 22px 20px; }
  .pillars li { gap: 12px; letter-spacing: 0.1em; }
  .pillars li::before { width: 32px; }
}

.hero-photo-frame { border-radius: var(--radius); overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%); box-shadow: var(--shadow); }
.hero-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5em; list-style: none; margin: 0 0 1.2em; padding: 0; font-size: 0.88rem; }
.crumbs a { color: #b9c9d8; }
.crumbs li::after { content: "/"; margin-left: 0.5em; color: #6f8499; }

@media (min-width: 900px) {
  .hero { padding: 84px 0 92px; }
  .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: 64px; }
  .hero-actions .btn { flex: 0 0 auto; }
  .page-hero { padding: 60px 0 64px; }
}

/* ---- Facts strip ---- */

.facts { background: var(--white); border-bottom: 1px solid var(--line); }
.facts-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0 auto; padding-top: 10px; padding-bottom: 10px; }
.facts-list li { display: flex; flex-direction: column; gap: 2px; padding: 16px 14px 16px 16px; position: relative; }
.facts-list li::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 3px; background: var(--teal-bright); }
.facts-list strong { font-family: var(--font-head); font-weight: 800; font-size: 1.08rem; color: var(--navy); line-height: 1.25; }
.facts-list span { font-size: 0.9rem; color: var(--slate-soft); line-height: 1.4; }
@media (min-width: 900px) {
  .facts-list { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 14px; padding-bottom: 14px; }
  .facts-list li { padding: 20px 20px 20px 22px; }
  .facts-list strong { font-size: 1.2rem; }
}

/* ---- Sections ---- */

.section { padding: 52px 0; }
.section-tint { background: var(--mist); }
.section-head { max-width: 62ch; margin-bottom: 30px; }
.section-head p { color: var(--slate-soft); font-size: 1.08rem; }
@media (min-width: 900px) { .section { padding: 80px 0; } }

.split { display: grid; gap: 36px; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 72px; align-items: start; } }

.reasons { background: var(--mist); border-radius: var(--radius); padding: 26px 24px; border-top: 4px solid var(--teal-bright); }
.reasons ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.reasons li { display: flex; gap: 14px; align-items: flex-start; }
.reasons .icon { color: var(--teal); width: 1.4em; height: 1.4em; margin-top: 2px; }
.reasons strong { display: block; font-family: var(--font-head); color: var(--navy); }
.reasons span { display: block; font-size: 0.97rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
.card {
  display: flex; flex-direction: column; height: 100%; padding: 26px 24px 22px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--slate);
  position: relative; overflow: hidden; transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.card::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 56px; background: linear-gradient(90deg, var(--teal-deep), var(--teal-bright)); clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); transition: width 0.25s ease; }
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: #c5d2dc; color: var(--slate); }
.card:hover::before { width: 100%; }
.card-icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin-bottom: 18px; background: var(--navy); color: var(--teal-bright); border-radius: 4px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.card-icon .icon { width: 26px; height: 26px; }
.card h3 { margin-bottom: 0.45em; }
.card p { font-size: 0.98rem; flex: 1; }
.card-more { margin-top: 16px; color: var(--teal-ink); }

.feature { background: var(--navy); color: #d7e2ec; }
.feature h2 { color: var(--white); }
.feature a { color: var(--teal-bright); }
.feature-grid { display: grid; gap: 24px; align-items: center; }
.feature-mark { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); color: var(--teal-bright); }
.feature-icon { width: 44px; height: 44px; }
@media (min-width: 900px) { .feature-grid { grid-template-columns: 140px minmax(0, 62ch); gap: 40px; } .feature-mark { width: 120px; height: 120px; } .feature-icon { width: 60px; height: 60px; } }

.cta-band { background: linear-gradient(120deg, var(--teal-deep), #027895); color: var(--white); padding: 44px 0; }
.cta-band h2 { color: var(--white); margin-bottom: 0.25em; }
.cta-band p { color: #dff3f8; margin: 0; }
.cta-inner { display: grid; gap: 22px; align-items: center; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-actions .btn { flex: 1 1 200px; }
@media (min-width: 900px) { .cta-band { padding: 56px 0; } .cta-inner { grid-template-columns: 1fr auto; } .cta-actions .btn { flex: 0 0 auto; } }

/* ---- Content pages ---- */

.with-aside { display: grid; gap: 40px; }
@media (min-width: 980px) { .with-aside { grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: start; } .contact-card, .aside-stack { position: sticky; top: 108px; } }

.content { max-width: 68ch; }
.content-photo { display: block; width: 100%; border-radius: var(--radius); margin-bottom: 32px; aspect-ratio: 16 / 9; object-fit: cover; }
.block + .block { margin-top: 2.1em; }
.block h2 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); padding-left: 16px; border-left: 4px solid var(--teal-bright); }
.content ul { padding-left: 1.2em; }
.content li + li { margin-top: 0.35em; }

.nutshell { margin-top: 2.4em; padding: 24px; background: var(--mist); border-radius: var(--radius); border-left: 4px solid var(--navy); }
.nutshell h2 { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-ink); margin-bottom: 0.6em; }
.nutshell p { font-family: var(--font-head); font-weight: 600; font-size: 1.12rem; color: var(--navy); line-height: 1.45; }

.contact-card { background: var(--navy); color: #d7e2ec; border-radius: var(--radius); padding: 28px 24px; }
.contact-card h2 { color: var(--white); font-size: 1.25rem; }
.contact-card-phone { display: flex; align-items: center; gap: 0.5em; font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--white); text-decoration: none; }
.contact-card-phone .icon { color: var(--teal-bright); }
.contact-card-phone:hover { color: var(--teal-bright); }
.contact-card-note { font-size: 0.92rem; margin: 6px 0 20px; color: #b9c9d8; }
.contact-card-coverage { font-size: 0.9rem; line-height: 1.5; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.14); color: #b9c9d8; }
.aside-stack { display: grid; gap: 22px; }
.aside-stack .contact-card { position: static; }
.side-nav { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.side-nav h2 { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-ink); }
.side-nav ul { list-style: none; margin: 0; padding: 0; }
.side-nav li + li { border-top: 1px solid var(--line); }
.side-nav a { display: block; padding: 10px 0; text-decoration: none; color: var(--navy); font-weight: 600; }
.side-nav a:hover { color: var(--teal-ink); }

.contact-grid { display: grid; gap: 40px; }
@media (min-width: 980px) { .contact-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; } }
.ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ways li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ways .icon { color: var(--teal); width: 1.5em; height: 1.5em; margin-top: 3px; }
.way-label { display: block; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-family: var(--font-head); font-weight: 700; color: var(--slate-soft); }
.way-value { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--navy); text-decoration: none; overflow-wrap: anywhere; }
a.way-value:hover { color: var(--teal-ink); }
.way-note { display: block; font-size: 0.97rem; color: var(--slate); margin-top: 2px; }
.way-card { border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: var(--radius); padding: 20px 22px; }
.way-card + .way-card { margin-top: 16px; }
.way-card h2 { font-size: 1.1rem; margin-bottom: 0.5em; }
.way-card p { margin: 6px 0 0; font-size: 0.95rem; color: var(--slate); }
.way-big { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--navy); text-decoration: none; overflow-wrap: anywhere; }
.way-big .icon { color: var(--teal); flex: none; }
.way-big:hover { color: var(--teal-ink); }
.way-email { font-size: 1.02rem; font-weight: 700; }
.contact-ways .ways { margin-top: 10px; }
.faq + .faq { margin-top: 1.4em; }
.faq h3 { font-size: 1.08rem; margin-bottom: 0.35em; }
.study-client { color: var(--slate-soft); }

/* ---- Forms ---- */

.form-panel { background: var(--mist); border-radius: var(--radius); padding: 26px 20px; border-top: 4px solid var(--teal-bright); }
@media (min-width: 700px) { .form-panel { padding: 34px 32px; } }
.form-intro, .form-note { font-size: 0.97rem; color: var(--slate); }
.form { display: grid; gap: 20px; scroll-margin-top: 110px; }
.field { margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { display: block; font-family: var(--font-head); font-weight: 700; color: var(--navy); margin-bottom: 6px; padding: 0; font-size: 0.98rem; }
.optional { font-family: var(--font-body); font-weight: 400; color: var(--slate-soft); font-size: 0.88rem; }
.help { font-size: 0.9rem; color: var(--slate-soft); margin: -2px 0 8px; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  display: block; width: 100%; min-height: 50px; padding: 11px 14px;
  font: inherit; font-size: 1rem; color: var(--navy); background: var(--white);
  border: 1.5px solid #b9c5cf; border-radius: 4px; appearance: none; -webkit-appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--teal) 50%), linear-gradient(135deg, var(--teal) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(25, 179, 207, 0.45); outline-offset: 0; border-color: var(--teal); }
.has-error input, .has-error select, .has-error textarea { border-color: var(--danger); }
.error { color: var(--danger); font-weight: 600; font-size: 0.92rem; margin: 6px 0 0; }
.checks { display: grid; gap: 4px; }
@media (min-width: 560px) { .checks { grid-template-columns: 1fr 1fr; } }
.field .check, .check { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; margin: 0; cursor: pointer; font-family: var(--font-body); font-weight: 400; font-size: 1rem; color: var(--slate); }
.check input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--teal-deep); }
.choices { display: grid; gap: 10px; }
@media (min-width: 560px) { .choices { grid-template-columns: 1fr 1fr; } }
.field .choice, .choice { display: flex; align-items: center; gap: 12px; min-height: 54px; margin: 0; padding: 10px 14px; background: var(--white); border: 1.5px solid #b9c5cf; border-radius: 4px; cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--navy); }
.choice input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--teal-deep); }
.has-error .choice { border-color: var(--danger); }
/* The type of enquiry is chosen by following one of two links, drawn as large options. */
.enquiry { display: grid; gap: 20px; scroll-margin-top: 110px; }
.field-label { font-family: var(--font-head); font-weight: 700; color: var(--navy); margin: 0 0 6px; font-size: 0.98rem; }
a.choice, span.choice { text-decoration: none; }
a.choice::before, span.choice::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #7d8a96; background: var(--white); }
a.choice:hover { border-color: var(--teal-deep); color: var(--navy); }
.choice.is-on { border-color: var(--teal-deep); box-shadow: inset 0 0 0 1px var(--teal-deep); }
.choice.is-on::before { border-color: var(--teal-deep); background: radial-gradient(circle, var(--teal-deep) 0 42%, var(--white) 48%); }
.choices + .form-note { margin: 10px 0 0; }
.consent-check { background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; font-size: 0.95rem; }
.form-small { font-size: 0.88rem; color: var(--slate-soft); margin: 0; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.notice { display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px; border-radius: var(--radius); scroll-margin-top: 110px; }
.notice .icon { width: 1.6em; height: 1.6em; margin-top: 1px; }
.notice-success { background: var(--success-bg); color: var(--success); border: 1px solid #b9dfcb; }
.notice-error { background: var(--danger-bg); color: var(--danger); border: 1px solid #f0c4be; }
.notice p { margin: 0 0 0.4em; }

.banner-wrap { padding-top: 24px; }
.banner-wrap + .section { padding-top: 28px; }
.message { font-size: 1.1rem; }
.message .btn { margin-top: 8px; }
.inline-form { display: inline; }

/* ---- Footer ---- */

.site-footer { background: var(--navy-deep); color: #b9c9d8; font-size: 0.96rem; padding-top: 52px; }
.site-footer a { color: #dbe6ef; text-decoration: none; }
.site-footer a:hover { color: var(--teal-bright); text-decoration: underline; }
.footer-grid { display: grid; gap: 34px; padding-bottom: 40px; }
.footer-logo { display: block; width: auto; height: auto; max-width: min(230px, 100%); max-height: 60px; }
.footer-name { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; line-height: 1.2; color: var(--white); }
.footer-heading { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); margin-bottom: 1em; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-list a, .footer-fact { display: inline-flex; align-items: center; gap: 0.6em; min-height: 36px; }
.footer-list .icon { color: var(--teal-bright); }
.footer-address span { display: block; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1.2fr 1fr; gap: 48px; } }

.newsletter { display: grid; gap: 18px; padding-top: 30px; padding-bottom: 34px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.newsletter p { margin: 0; max-width: 46ch; }
.newsletter-form { display: grid; grid-template-columns: 1fr; gap: 10px; }
.newsletter-form input[type="email"] { border-color: transparent; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.86rem; line-height: 1.45; cursor: pointer; }
.consent input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--teal-bright); }
@media (min-width: 620px) { .newsletter-form { grid-template-columns: 1fr auto; } .consent { grid-column: 1 / -1; } }
@media (min-width: 1040px) { .newsletter { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } }

.footer-base { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; padding-bottom: 26px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.86rem; color: #8ea3b7; }
.footer-base p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .footer-base { flex-direction: row; justify-content: space-between; align-items: center; } }

/* ---- Phone action bar ---- */

.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); background: var(--navy-deep); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 18px rgba(1, 24, 48, 0.25); }
.action-bar a { display: flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 56px; padding: 0 8px; font-family: var(--font-head); font-weight: 700; font-size: 0.97rem; line-height: 1.2; text-align: center; text-decoration: none; }
.action-call { color: var(--white); }
.action-call .icon { color: var(--teal-bright); }
.action-quote { background: var(--teal-bright); color: var(--navy-deep); }
body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
@media (min-width: 1040px) { .action-bar { display: none; } body { padding-bottom: 0; } }
@media (min-width: 1200px) { .nav-link { padding: 0 0.8em; } .header-cta { padding-left: 1.4em; padding-right: 1.4em; font-size: inherit; } }

/* ---- Preview inside the back office: look but do not leave ---- */
.is-preview a { pointer-events: none; }
.is-preview .action-bar { position: static; }
.is-preview { padding-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

@media print {
  .topbar, .site-header, .action-bar, .site-footer, .cta-band, .season-band, .contact-card { display: none !important; }
  body { padding: 0; color: #000; }
  .hero, .page-hero { background: none; color: #000; padding: 0 0 12px; }
  .hero h1, .page-hero h1 { color: #000; }
}

/* ---- The seasonal band (24 October 2026): beneath the header of every page while an occasion is on. The greeting is
   real text and is shown once. The picture is any photograph or illustration chosen in the back office, cropped to the
   band around the point chosen there. Nothing here covers the menu, a form or a button. ---- */
.season-band {
  position: relative; overflow: hidden; isolation: isolate; color: var(--season-fg); border-bottom: 3px solid var(--season-accent);
  background: radial-gradient(ellipse 60% 140% at 88% 50%, var(--season-glow) 0%, transparent 70%), linear-gradient(90deg, #011426 0%, var(--navy-deep) 45%, #02254a 100%);
}
.season-band-inner { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-height: 104px; padding-top: 16px; padding-bottom: 16px; }
.season-greeting { margin: 0; max-width: 18ch; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.75rem, 8vw, 2.2rem); line-height: 1.05; letter-spacing: -0.01em; color: #ffffff; text-wrap: balance; }
.season-greeting::before { content: ""; display: block; width: 44px; height: 4px; margin-bottom: 10px; border-radius: 2px; background: var(--season-accent); }
.season-line { margin: 8px 0 0; max-width: 46ch; font-size: 0.95rem; line-height: 1.45; color: #dbe6ef; }
.season-mark { position: absolute; z-index: 1; right: -46px; top: 50%; translate: 0 -50%; width: 230px; height: auto; pointer-events: none; }
.season-mark .k-stem, .season-mark .k-leg { fill: rgba(255, 255, 255, 0.05); }
.season-mark .k-band, .season-mark .k-foot { fill: var(--season-accent); opacity: 0.2; }
.align-centre .season-band-inner { align-items: center; text-align: center; }
.align-centre .season-greeting::before { margin-left: auto; margin-right: auto; }
.align-centre .season-greeting { max-width: none; }
.align-right .season-band-inner { align-items: flex-end; text-align: right; }
.align-right .season-greeting::before { margin-left: auto; }
.align-right .season-mark { right: auto; left: -46px; }

.season-art { position: absolute; inset: 0; z-index: 0; }
.season-art picture, .season-art img { display: block; width: 100%; height: 100%; }
/* Scaled to fill the band without stretching. The chosen point stays in view however much is cropped. */
.season-art img { max-width: none; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
/* The edges fade into the band's own navy, so the picture has no hard rectangle round it. */
.season-art picture {
  --bx: 6%; --by: 14%; --inner: var(--bx);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--bx), #000 calc(100% - var(--bx)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--by), #000 calc(100% - var(--by)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 var(--bx), #000 calc(100% - var(--bx)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--by), #000 calc(100% - var(--by)), transparent 100%);
  mask-composite: intersect;
}
.bl-none .season-art picture { --bx: 0%; --by: 0%; -webkit-mask-image: none; mask-image: none; }
.bl-soft .season-art picture { --bx: 6%; --by: 14%; }
.bl-medium .season-art picture { --bx: 12%; --by: 26%; }
.bl-strong .season-art picture { --bx: 22%; --by: 40%; }
/* A shade on the greeting's side, so the words can be read over any picture. How strong is chosen in the back office. */
.season-art::after { content: ""; position: absolute; inset: 0; opacity: 0.8; background: linear-gradient(90deg, rgba(1, 20, 38, 0.95) 0%, rgba(1, 20, 38, 0.78) 38%, rgba(1, 20, 38, 0.2) 72%, rgba(1, 20, 38, 0.04) 100%); }
.align-right .season-art::after { background: linear-gradient(270deg, rgba(1, 20, 38, 0.95) 0%, rgba(1, 20, 38, 0.78) 38%, rgba(1, 20, 38, 0.2) 72%, rgba(1, 20, 38, 0.04) 100%); }
.align-centre .season-art::after { background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(1, 20, 38, 0.9) 0%, rgba(1, 20, 38, 0.5) 65%, rgba(1, 20, 38, 0.25) 100%); }
.ov-light .season-art::after { opacity: 0.55; }
.ov-medium .season-art::after { opacity: 0.8; }
.ov-strong .season-art::after { opacity: 1; }
/* On a phone the words run the full width of the band, so the shade covers all of it, more lightly, and the short band
   fades less at the top and bottom so the picture still shows. */
@media (max-width: 699px) {
  .season-art::after, .align-right .season-art::after, .align-centre .season-art::after { background: linear-gradient(180deg, rgba(1, 20, 38, 0.6) 0%, rgba(1, 20, 38, 0.8) 100%); }
  .bl-soft .season-art picture { --bx: 4%; --by: 8%; }
  .bl-medium .season-art picture { --bx: 7%; --by: 14%; }
  .bl-strong .season-art picture { --bx: 12%; --by: 22%; }
}
.has-art .season-band-inner { min-height: 150px; }
.has-art .season-greeting { text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45), 0 0 26px rgba(0, 0, 0, 0.4); }
.has-art .season-line { color: #eef3f7; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.fx-0 { --fx: 0%; }
.fx-5 { --fx: 5%; }
.fx-10 { --fx: 10%; }
.fx-15 { --fx: 15%; }
.fx-20 { --fx: 20%; }
.fx-25 { --fx: 25%; }
.fx-30 { --fx: 30%; }
.fx-35 { --fx: 35%; }
.fx-40 { --fx: 40%; }
.fx-45 { --fx: 45%; }
.fx-50 { --fx: 50%; }
.fx-55 { --fx: 55%; }
.fx-60 { --fx: 60%; }
.fx-65 { --fx: 65%; }
.fx-70 { --fx: 70%; }
.fx-75 { --fx: 75%; }
.fx-80 { --fx: 80%; }
.fx-85 { --fx: 85%; }
.fx-90 { --fx: 90%; }
.fx-95 { --fx: 95%; }
.fx-100 { --fx: 100%; }
.fy-0 { --fy: 0%; }
.fy-5 { --fy: 5%; }
.fy-10 { --fy: 10%; }
.fy-15 { --fy: 15%; }
.fy-20 { --fy: 20%; }
.fy-25 { --fy: 25%; }
.fy-30 { --fy: 30%; }
.fy-35 { --fy: 35%; }
.fy-40 { --fy: 40%; }
.fy-45 { --fy: 45%; }
.fy-50 { --fy: 50%; }
.fy-55 { --fy: 55%; }
.fy-60 { --fy: 60%; }
.fy-65 { --fy: 65%; }
.fy-70 { --fy: 70%; }
.fy-75 { --fy: 75%; }
.fy-80 { --fy: 80%; }
.fy-85 { --fy: 85%; }
.fy-90 { --fy: 90%; }
.fy-95 { --fy: 95%; }
.fy-100 { --fy: 100%; }

/* On wider screens the picture can cover one side of the band, fading into it on the inside, with the greeting on the
   band's own colours on the other side. */
@media (min-width: 700px) {
  .cover-right .season-art { left: 36%; }
  .cover-left .season-art { right: 36%; }
  .cover-right .season-art picture, .cover-left .season-art picture { --inner: 38%; }
  .cover-right .season-art picture {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--inner), #000 calc(100% - var(--bx)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--by), #000 calc(100% - var(--by)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--inner), #000 calc(100% - var(--bx)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--by), #000 calc(100% - var(--by)), transparent 100%);
  }
  .cover-left .season-art picture {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--inner), #000 calc(100% - var(--bx)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--by), #000 calc(100% - var(--by)), transparent 100%);
    mask-image: linear-gradient(to left, transparent 0, #000 var(--inner), #000 calc(100% - var(--bx)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--by), #000 calc(100% - var(--by)), transparent 100%);
  }
}

@media (min-width: 700px) {
  .season-band-inner { min-height: 132px; padding-top: 22px; padding-bottom: 22px; }
  .has-art .season-band-inner { min-height: 200px; }
  .season-greeting { font-size: clamp(2.4rem, 5.2vw, 3.2rem); }
  .season-line { font-size: 1.05rem; }
  .season-mark { width: 340px; right: 3%; }
  .align-right .season-mark { left: 3%; }
}
@media (min-width: 1040px) {
  .season-band-inner { min-height: 150px; }
  .has-art .season-band-inner { min-height: 240px; }
  .season-greeting { font-size: 3.6rem; }
  .season-greeting::before { width: 56px; }
}

/* The greeting is painted into the artwork: the picture is shown whole, with any short line beneath it. */
.season-band.has-words .season-art { position: relative; inset: auto; }
.season-band.has-words .season-art img { height: auto; object-fit: fill; }
.season-band.has-words .season-art::after { display: none; }
.season-band.has-words .season-art picture { -webkit-mask-image: none; mask-image: none; }
.season-band.has-words .season-band-inner { min-height: 0; padding-top: 10px; padding-bottom: 12px; }