/* Omni Digital: one stylesheet, written for the work to lead.
   Type: Manrope for headlines, Source Sans 3 for everything else.
   Colour: the Omni Digital palette. Allports teal is the accent, Sherpa Blue the dark ground,
   Crete olive and Red Berry as the two supporting marks, Mercury and Mine Shaft for the greys.
   The layout is the same system as the sister company's site; the voice and the colours are not. */

/* The site sits on a dark ground now. Light is the exception, and it is kept for one job only:
   the plates a client's mark sits on, where a logo has to be shown the way its owner drew it.
   Two dark surfaces do the rest of the work. --paper is the page, --panel is anything raised off
   it (a testimonial, a step, a form field), and --paper-2 is the alternate band, a step down
   rather than up, so a section reads as recessed instead of as another card. */
:root {
    --paper: #00232B;       /* the page */
    --paper-2: #001A21;     /* the alternate band */
    --panel: #002E3A;       /* anything raised off the page */
    --plate: #FFFFFF;       /* the white a client's mark is shown on, and nothing else */
    --line: #0C4A58;
    --ink: #E8F1F3;
    --ink-2: #A8C0C6;
    --deep: #003E4B;        /* Sherpa Blue: the hero and the feature band */
    --deeper: #00141A;      /* the deepest step, for the footer and the consent bar */
    --sea: #0A6A7C;         /* hover on an accent fill */
    --accent: #007E97;      /* Allports: fills and borders. White on it is 4.7:1 */
    --accent-ink: #2CB4CC;  /* type set in the accent: 6.7:1 on the page, 4.8:1 on the brand band */
    --accent-bright: #2CB4CC;
    --mark: #B3C24E;        /* Crete lifted: the second mark, dark grounds only */
    --olive: #7A8A2E;
    --olive-light: #B3C24E;
    --rust: #971900;
    --rust-light: #E0623F;
    --display: "Manrope", system-ui, sans-serif;
    --body: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
    /* The small type that names things is set in a mono face: eyebrows, labels, the client above a
       project title, the figures in the footer. It reads as instrument rather than decoration, and
       it keeps a label visibly apart from prose instead of being the same face shrunk. */
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --gutter: clamp(20px, 4vw, 56px);
    --section: clamp(64px, 9vw, 128px);
    --max: 1360px;
    --measure: 40rem;
    --radius: 2px;
    /* The space above a thing you act on: a form's submit button, a row of links. One value everywhere. */
    --gap-action: 2rem;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.6 var(--body); font-feature-settings: "kern", "liga"; }
img, video, iframe { max-width: 100%; display: block; }
a { color: var(--accent-ink); text-decoration: none; transition: color 200ms var(--ease), text-decoration-color 200ms var(--ease); }
a:hover, a:focus-visible { color: #fff; }
/* Links inside running text are underlined so they read as links; navigation, tiles and buttons carry their own cues. */
p a, li a, address a, figcaption a, label a, .lead a { text-decoration: underline; text-decoration-color: rgba(44, 180, 204, 0.55); text-decoration-thickness: 1.5px; text-underline-offset: 0.15em; }
p a:hover, li a:hover, address a:hover, figcaption a:hover, label a:hover, .lead a:hover { text-decoration-color: currentColor; }
.nav a, .footer li a, .chips a, .tile, .btn, .service, .office .links a { text-decoration: none; }
::selection { background: var(--accent); color: #fff; }
.dark ::selection, .hero ::selection, .footer ::selection { background: #fff; color: var(--deep); }
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
.dark :focus-visible, .hero :focus-visible, .footer :focus-visible { outline-color: #fff; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: 1.04; font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1.12; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.25; }
h4, .footer__head { font-family: var(--mono); font-weight: 500; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.14em; }
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.2em; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: var(--section); }
.dark { background: var(--deep); color: #E6F0F2; }
.dark a { color: #fff; }
.dark a:hover { color: var(--accent-bright); }
.stone { background: var(--paper-2); }
.eyebrow { font: 500 0.78rem/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 1rem; }
/* A link inside an eyebrow is the eyebrow, not a body link: it takes the colour of the ground it sits on. */
.eyebrow a { color: inherit; }
.dark .eyebrow, .hero .eyebrow, .footer .eyebrow { color: var(--mark); }
.lead { font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.45; color: var(--ink-2); max-width: var(--measure); }
.dark .lead { color: #CFE0E4; }
.skip { position: absolute; top: -100px; left: 16px; z-index: 1000; padding: 12px 20px; background: var(--accent); color: #fff; font-weight: 600; }
.skip:focus { top: 16px; color: #fff; }

/* ------------------------------------------------------------- buttons */
.btn {
    display: inline-flex; align-items: center; gap: 0.6em;
    padding: 0.95em 1.6em; border: 2px solid var(--accent); border-radius: var(--radius);
    background: var(--accent); color: #fff; font: 600 1rem/1 var(--body); cursor: pointer;
    transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--sea); border-color: var(--sea); color: #fff; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: currentColor; }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dark .btn--ghost, .hero .btn--ghost { color: #fff; }
.dark .btn--ghost:hover, .hero .btn--ghost:hover, .hero .btn--ghost:focus-visible { background: #fff; color: var(--deep); border-color: #fff; }

/* -------------------------------------------------------------- header */
.header { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background 300ms var(--ease), box-shadow 300ms var(--ease); }
.header.is-solid, .header.is-open { background: rgba(0, 62, 75, 0.96); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); }
.header__bar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 76px; }
.header__logo { display: inline-flex; color: #fff; }
.header__logo svg { height: 34px; width: auto; }
.header__logo:hover { color: #fff; }
/* The lockup is the Omni wordmark with "digital" beneath it; the word takes the accent colour. */
.header__logo svg [data-part="digital"], .footer__logo svg [data-part="digital"] { fill: var(--accent-bright); font: 300 12.5px/1 var(--body); letter-spacing: 0.1em; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); }
.nav a { color: #fff; font-weight: 600; font-size: 1rem; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: var(--accent-bright); transition: right 250ms var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav .btn { padding: 0.7em 1.2em; }
.nav .btn::after { display: none; }
.burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 10px; }
.burger span { display: block; height: 2px; background: #fff; margin: 6px 0; transition: transform 250ms var(--ease), opacity 250ms; }
.is-open .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.is-open .burger span:nth-child(2) { opacity: 0; }
.is-open .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 900px) {
    .burger { display: block; }
    .nav { position: fixed; inset: 76px 0 0 0; background: var(--deep); flex-direction: column; justify-content: center; gap: 2rem; transform: translateY(-110%); transition: transform 350ms var(--ease); overflow-y: auto; padding: 2rem var(--gutter); overscroll-behavior: contain; }
    .is-open .nav { transform: none; }
    .nav a { font-family: var(--display); font-size: 2rem; font-weight: 700; }
    .nav a::after { display: none; }
}

/* ---------------------------------------------------------------- hero
   The homepage hero is a grid of cells drawn in the browser and lit under the reader's pointer:
   no file to download and nothing to fail. The words sit on it, held legible by a gradient rising
   from the bottom edge. Every other page has a text hero on the dark ground.
   The gradient on .hero__media is what shows before site.js runs, or if it never does, so the hero
   is never a flat rectangle: it is the same picture the grid rests on. */
.hero { position: relative; display: grid; align-items: end; min-height: 88vh; background: var(--deep); color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; background: radial-gradient(42% 58% at 78% 28%, #1E7480 0%, #06515F 40%, #00303B 74%, #00232B 100%); }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__grid { display: block; width: 100%; height: 100%; }
/* Two scrims, each doing a job. The lower one holds the headline legible. The upper one darkens the
   band the fixed header sits in, which the grid's resting light falls straight across. */
.hero__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0, 28, 35, 0.8) 0%, rgba(0, 28, 35, 0.34) 9%, rgba(0, 28, 35, 0) 18%),
                linear-gradient(to top, rgba(0, 62, 75, 0.96) 0%, rgba(0, 62, 75, 0.6) 40%, rgba(0, 62, 75, 0.1) 75%);
}
.hero__content { position: relative; padding: calc(76px + 12vh) 0 clamp(40px, 6vw, 88px); }
.hero__content h1 { max-width: 18ch; margin-bottom: 1rem; }
.hero .lead { color: #E6F0F2; max-width: 44rem; }
.hero .chip { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.hero .chip:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; color: #fff; }
.hero .chip[aria-current="page"] { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--deep); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; margin-top: 1.8rem; align-items: center; }
.hero--text { min-height: 0; padding: calc(76px + clamp(48px, 7vw, 96px)) 0 clamp(40px, 5vw, 64px); }
.hero--text + .section, .hero--text + .article { padding-top: clamp(40px, 5vw, 64px); }
.hero--text h1 { max-width: 20ch; margin-bottom: 1rem; }
@media (max-width: 700px) { .hero { min-height: 78vh; } .hero--text { min-height: 0; } }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.chip { display: inline-block; padding: 0.4em 0.9em; border: 1.5px solid var(--accent); border-radius: var(--radius); color: var(--accent-ink); font: 500 0.78rem/1.2 var(--mono); letter-spacing: 0.06em; }
.chip:hover, .chip[aria-current="page"] { background: var(--accent); color: #fff; }

/* ---------------------------------------------------------------- grids */
.grid { display: grid; gap: clamp(20px, 2.5vw, 36px) clamp(20px, 2vw, 28px); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }
.section__head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
.section__head p { margin: 0; }
.section__head h2 { max-width: 28ch; }
/* A line under a section heading, for saying something the heading cannot carry on its own.
   Qualified by its parent so it simply outweighs the "p { margin: 0 }" above rather than shouting
   over it: two classes beat one class and one element. */
.section__head .section__note { max-width: 40ch; margin-top: 0.7rem; color: var(--ink-2); font-size: 1rem; }

/* ---------------------------------------------------------------- tiles
   Every project is represented by its client's mark, shown whole on white in a 16:9 frame. */
.tile { display: block; }
.tile__link { display: block; color: inherit; }
.tile__link:hover, .tile__link:focus-visible { color: inherit; }
.tile__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--plate); border: 1px solid var(--line); transition: border-color 300ms var(--ease); }
.tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile__media--logo { padding: clamp(18px, 8%, 44px); }
.tile__media--logo img { position: static; width: 100%; height: 100%; object-fit: contain; }
.tile__client { display: block; margin-top: 1rem; font: 500 0.74rem/1.4 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent-ink); }
.tile h3 { margin: 1rem 0 0.35rem; transition: color 200ms var(--ease); }
/* Hovering a card does not scale it and does not wash it in colour. Two marks instead, because the
   plate is white and the page is not, and one colour cannot carry both: a bright ring, which reads
   against the dark ground outside the plate, and a rule drawn along the bottom in the deeper
   accent, which reads against the white inside it. The ring is a shadow rather than a thicker
   border so nothing reflows on hover. */
.tile__media::after, .logos a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 2;
    background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease); }
.tile__media, .logos a { transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.tile__link:hover .tile__media, .tile__link:focus-visible .tile__media,
.logos a:hover, .logos a:focus-visible { border-color: var(--accent-ink); box-shadow: 0 0 0 2px var(--accent-ink); }
.tile__link:hover .tile__media::after, .tile__link:focus-visible .tile__media::after { transform: scaleX(1); }
/* A chevron drawn from two borders rather than written as a character, so no screen reader has to
   announce an arrow that is only there to say the heading is a link. */
.tile h3::after { content: ""; display: inline-block; width: 0.38em; height: 0.38em; margin-left: 0.55em; vertical-align: 0.1em;
    border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateX(-0.35em) rotate(45deg);
    opacity: 0; transition: opacity 250ms var(--ease), transform 250ms var(--ease); }
.tile__link:hover h3::after, .tile__link:focus-visible h3::after { opacity: 1; transform: translateX(0) rotate(45deg); }
.tile__client + h3 { margin-top: 0.5rem; }
.tile__link:hover h3 { color: var(--accent-ink); }
.tile p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.tile .chip { display: inline-block; margin-top: 0.8rem; }
.tile--wide { grid-column: span 2; }
@media (max-width: 720px) { .tile--wide { grid-column: span 1; } }

/* ------------------------------------------------------------ services
   A numbered list of what we build, on the dark ground. */
.services { counter-reset: service; }
.service { position: relative; padding: 1.6rem 0; border-top: 1px solid rgba(255, 255, 255, 0.18); display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; color: inherit; }
.service::before { counter-increment: service; content: counter(service, decimal-leading-zero); font: 500 0.95rem/1.9 var(--mono); color: var(--mark); font-variant-numeric: tabular-nums; }
/* The row's own top rule redrawn in the accent, left to right. */
.service::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--accent-bright);
    transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease); }
.service:hover::after, .service:focus-visible::after { transform: scaleX(1); }
.service h3 { margin: 0 0 0.3rem; color: #fff; transition: color 200ms var(--ease); }
.service:hover h3, .service:focus-visible h3 { color: var(--accent-bright); }
.service p { margin: 0; color: #CFE0E4; }
.service:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }

/* ---------------------------------------------------------------- logos
   Client marks in a row, whole, on white cards. */
.logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
/* A mark is an anchor while it leads to a case study and a plain plate while it does not; both
   need the same box, so the shared rule names them together. */
.logos a, .logos .logo { position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(18px, 3vw, 36px); background: var(--plate); border: 1px solid var(--line); overflow: hidden; }
.logos a:hover::after, .logos a:focus-visible::after { transform: scaleX(1); }
.logos img { width: 100%; max-width: 180px; height: auto; aspect-ratio: 1; object-fit: contain; }
@media (max-width: 700px) { .logos { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------- quotes */
.quote { background: var(--panel); padding: clamp(24px, 3vw, 40px); border-top: 4px solid var(--accent); display: flex; flex-direction: column; gap: 1.2rem; height: 100%; }
.quote blockquote { margin: 0; font: 600 clamp(1.1rem, 1.4vw, 1.3rem)/1.45 var(--display); letter-spacing: -0.01em; }
.quote footer { margin-top: auto; display: flex; align-items: center; gap: 1rem; font-size: 0.95rem; color: var(--ink-2); }
.quote__logo { display: flex; align-items: center; justify-content: center; flex: none; height: 64px; min-width: 64px; max-width: 200px; padding: 8px 12px; background: var(--plate); border: 1px solid var(--line); }
.quote__logo img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.quote footer b { color: var(--ink); display: block; }
.quote--inline { max-width: 46rem; margin: 3rem auto; border-top: 0; border-left: 4px solid var(--accent); background: transparent; padding: 0 0 0 1.6rem; }

/* ------------------------------------------------------------- features */
.feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: center; gap: clamp(24px, 4vw, 64px); }
.feature--flip > *:first-child { order: 2; }
.feature--top { align-items: start; }
.feature__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__media--logo { background: var(--plate); padding: clamp(24px, 10%, 64px); }
.feature__media--logo img { object-fit: contain; }
.feature h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin-bottom: 0.8rem; }

/* ------------------------------------------------------------- article */
.article { padding-block: clamp(40px, 6vw, 80px); }
.article > * { max-width: var(--measure); margin-inline: auto; }
.article > .images, .article > .feature, .article > .steps { max-width: 1100px; }
.article h2 { margin-block: 2.4rem 0.8rem; font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.article h3 { margin-block: 2rem 0.6rem; }
.article h4 { margin-block: 1.6rem 0.4rem; }
/* The cookie table in the privacy notice. It scrolls inside its own box rather than pushing the
   page sideways on a phone, and the rules are horizontal only so it reads as a list, not a grid. */
.article table { width: 100%; border-collapse: collapse; margin-block: 1.4rem 2rem; font-size: 0.95rem; }
.article table th, .article table td { text-align: left; padding: 0.7rem 1rem 0.7rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.article table th { font: 600 0.78rem/1.3 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); border-bottom-width: 2px; }
.article table td code { font-size: 0.86rem; overflow-wrap: anywhere; }
.article code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; background: var(--paper-2); padding: 0.1em 0.35em; border-radius: var(--radius); }
.article > :first-child { margin-top: 0; }
.article a { text-decoration: underline; text-decoration-color: rgba(0, 126, 151, 0.4); text-underline-offset: 0.15em; }
/* A project opens with its client's mark, whole, on white. */
.article > .mark { display: flex; justify-content: center; padding: clamp(20px, 4vw, 40px); margin-bottom: clamp(28px, 4vw, 48px); background: var(--plate); border: 1px solid var(--line); }
.article > .mark img { max-height: 120px; width: auto; }
.images { display: grid; gap: 1rem; margin: 2.4rem auto; }
.images--2 { grid-template-columns: 1fr 1fr; } .images--3 { grid-template-columns: repeat(3, 1fr); }
.images figcaption { grid-column: 1 / -1; font-size: 0.95rem; color: var(--ink-2); }
.images--1 img { max-height: 75vh; width: auto; max-width: 100%; margin-inline: auto; border: 1px solid var(--line); }
.images--1 figcaption { text-align: center; }
@media (max-width: 640px) { .images--2, .images--3 { grid-template-columns: 1fr; } }
.article .feature { margin: 3rem auto; }
/* How we work: the stages as a numbered list, each a card. */
.steps { list-style: none; padding: 0; margin: 2rem auto 3rem; display: grid; gap: 1rem; counter-reset: step; }
.step { padding: clamp(20px, 3vw, 32px); background: var(--panel); border-left: 4px solid var(--accent); }
.step h3 { margin: 0 0 0.6rem; }
.step h3::before { counter-increment: step; content: counter(step, decimal-leading-zero) "  "; color: var(--accent); font-weight: 700; }
.step p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- forms */
.form label { display: block; font-weight: 600; margin: 1.2rem 0 0.4rem; }
.form input[type="text"], .form input[type="email"], .form textarea {
    width: 100%; padding: 0.9em 1em; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--panel); font: inherit; color: var(--ink);
}
.form input:focus, .form textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(0, 126, 151, 0.15); }
.form .check { display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 400; margin-top: 1.4rem; }
.form .check input { margin-top: 0.3em; width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.form .note { font-size: 0.95rem; color: var(--ink-2); margin: 0.6rem 0 0; }
.form .trap { position: absolute; left: -10000px; }
.form .btn { margin-top: var(--gap-action); }
.form ::placeholder { color: var(--ink-2); opacity: 0.8; }
.form .status { display: none; margin-top: 1.2rem; padding: 0.9rem 1.1rem; border: 2px solid var(--rust); font-weight: 600; }
.form .status.is-error { display: block; }
/* Once sent, the fields go and a solid panel takes their place, so there is no doubt it worked. */
.form .status.is-sent { display: block; margin: 0; padding: clamp(1.6rem, 3vw, 2.4rem); border: 0; background: var(--mark); color: var(--paper); font: 700 clamp(1.2rem, 1.7vw, 1.45rem)/1.4 var(--display); text-align: center; }
.form.is-sent > :not(.status) { display: none; }
/* Contact, while the enquiry form is out: the email address is the page's one action, so it is set
   as large as a heading and nothing competes with it. */
.contact { display: grid; grid-template-columns: 1.4fr 1fr; align-items: start; gap: clamp(28px, 5vw, 72px); }
@media (max-width: 800px) { .contact { grid-template-columns: 1fr; } }
.contact__main p { max-width: var(--measure); color: var(--ink-2); }
.contact__email { display: inline-block; margin: 0 0 1.6rem; font: 800 clamp(1.5rem, 3.4vw, 2.6rem)/1.15 var(--display); letter-spacing: -0.02em; color: var(--accent); overflow-wrap: anywhere; border-bottom: 3px solid rgba(0, 126, 151, 0.28); }
.contact__email:hover, .contact__email:focus-visible { color: var(--sea); border-bottom-color: currentColor; }
.contact__tel { display: inline-block; margin-top: 0.4rem; font: 700 clamp(1.3rem, 2.2vw, 1.8rem)/1.2 var(--display); color: var(--ink); }
.contact__tel:hover { color: var(--accent); }
.offices { display: grid; gap: 2rem; }
.office { background: var(--panel); padding: 1.6rem; border-top: 4px solid var(--accent); }
.office address { font-style: normal; margin: 0.6rem 0 1rem; color: var(--ink-2); }
.office .links a { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; margin-bottom: 0.5rem; }
.office .links svg { width: 20px; height: 20px; }
.office .tel { font: 700 1.5rem/1.2 var(--display); display: block; margin-top: 1rem; color: var(--ink); }
.office .mail { display: block; margin-top: 0.4rem; font-weight: 600; }

/* ---------------------------------------------------------------- CTA */
.cta { text-align: center; }
.cta h2 { max-width: 20ch; margin-inline: auto; }
.cta .hero__actions { justify-content: center; }
.cta .contact-line { margin-top: 1.6rem; color: #CFE0E4; }
.cta .contact-line a { font-weight: 600; }

/* -------------------------------------------------------------- footer */
.footer { background: var(--deeper); border-top: 1px solid rgba(255, 255, 255, 0.08); color: #CFE0E4; padding: var(--section) 0 2rem; font-size: 1rem; }
.footer a { color: #fff; }
.footer a:hover { color: var(--accent-bright); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h4, .footer__head { color: #fff; margin-bottom: 1rem; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 0.5rem; }
/* The footer lockup is the full mark with "digital" set beneath it, so a third of its height is
   the smaller word. At 40px the wordmark itself was only about 28px and read as an afterthought
   beside 18px body text. It scales with the viewport now and sits comfortably above the address. */
.footer__logo svg { height: clamp(58px, 6vw, 76px); width: auto; color: #fff; margin-bottom: 1.6rem; }
.footer address { font-style: normal; }
.badges { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: center; margin: 3rem 0 2rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.badges img { height: 72px; width: auto; }
/* The B Corp mark is supplied in near-black on transparent and all but disappears on the footer.
   B Lab's own guidance is to use the white mark on a dark ground, which is what this makes it.
   The Cyber Essentials badge is full colour by design and is left alone. */
.badges img[src*="bcorp"] { filter: brightness(0) invert(1); }
.badges a { display: inline-flex; }
.badges p { margin: 0; max-width: 34rem; font-size: 0.9rem; color: #9FB8BE; }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font: 400 0.82rem/1.6 var(--mono); color: #9FB8BE; }
.legal ul { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* ------------------------------------------------------------- consent
   Anchored to the foot of the window rather than covering the page: a visitor who has not decided
   yet can still read what they came for. Accept and refuse are the same size and the same distance
   away, because a refusal that is harder to reach than an acceptance is not a free choice. */
.consent {
    position: fixed; inset: auto 0 0 0; z-index: 200;
    background: var(--deeper); color: #E6F0F2;
    border-top: 2px solid var(--accent-bright);
    padding: clamp(18px, 2.4vw, 26px) 0;
    box-shadow: 0 -12px 40px rgba(0, 28, 35, 0.35);
}
.consent__inner { display: flex; flex-wrap: wrap; gap: 1.4rem var(--gap-action); align-items: center; justify-content: space-between; }
.consent h2 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.consent p { margin: 0; max-width: 62ch; font-size: 0.95rem; line-height: 1.5; color: #CFE0E4; }
.consent p a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); }
.consent__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.consent .btn { white-space: nowrap; }
.consent .btn--ghost { color: #fff; }
.consent .btn--ghost:hover, .consent .btn--ghost:focus-visible { background: #fff; color: var(--deep); border-color: #fff; }
@media (max-width: 700px) { .consent__actions { width: 100%; } .consent__actions .btn { flex: 1 1 auto; justify-content: center; } }

/* -------------------------------------------------------------- motion */
body.has-modal { overflow: hidden; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}