/* ==========================================================================
   Unitask NV — corporate site styles
   Palette derived from the Miore visual identity (navy / light blue / ink)
   ========================================================================== */

:root {
  /* Brand */
  --navy:        #001E60;
  --navy-deep:   #00133C;
  --navy-soft:   #0A2E80;
  --sky:         #B8DBE7;
  --sky-soft:    #E4F1F6;
  --gold:        #C8A55B;
  --ink:         #1D1D1B;

  /* Neutrals */
  --white:       #FFFFFF;
  --paper:       #F7F8FA;
  --line:        #E3E7EE;
  --muted:       #5A6579;

  /* Type */
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --wrap: 1180px;
  --gutter: 24px;
  --radius: 4px;
  --section: clamp(72px, 9vw, 128px);

  --shadow-sm: 0 1px 2px rgba(0, 30, 96, .06), 0 4px 12px rgba(0, 30, 96, .05);
  --shadow-md: 0 12px 32px rgba(0, 30, 96, .10);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- Base --- */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* The header is sticky, so anything linked to by #id must leave room for it or
   its heading lands underneath. Applies to every in-page anchor on the site. */
[id] { scroll-margin-top: 100px; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--navy-soft); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  color: var(--navy);
}

h1 { font-size: clamp(2.6rem, 5.4vw, 4.15rem); }
h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }

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

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

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

/* ------------------------------------------------------------ Layout --- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(56px, 6vw, 84px); }
.section--paper { background: var(--paper); }
.section--navy { background: var(--navy); color: rgba(255,255,255,.82); }
.section--navy h2, .section--navy h3 { color: #fff; }

.grid { display: grid; gap: 28px; }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------- Carousel (phones) ---
   On phones a stack of tall cards buries the later ones. Below 720px a
   .carousel grid becomes a horizontal swipe lane with scroll-snap; above it,
   nothing applies and the normal .grid rules take over. No JS needed to swipe —
   the dots are progressive enhancement. */

.carousel-dots { display: none; }

@media (max-width: 719px) {
  .carousel {
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Bleed to the screen edges so the next card peeks in as an affordance. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .carousel::-webkit-scrollbar { display: none; }
  .carousel > * { scroll-snap-align: center; }

  .carousel-dots {
    display: flex; justify-content: center; gap: 8px;
    margin-top: 20px; padding: 0;
  }
  .carousel-dots button {
    width: 7px; height: 7px; padding: 0;
    border: 0; border-radius: 50%;
    background: var(--line); cursor: pointer;
    transition: background-color .2s var(--ease), transform .2s var(--ease);
  }
  .carousel-dots button[aria-current="true"] { background: var(--gold); transform: scale(1.35); }
  .section--navy .carousel-dots button { background: rgba(255,255,255,.28); }
  .section--navy .carousel-dots button[aria-current="true"] { background: var(--sky); }
}

/* Section heading block */
.lede { max-width: 62ch; }
.eyebrow {
  font-family: var(--body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}
.section--navy .eyebrow { color: var(--sky); }
.sub { color: var(--muted); font-size: 1.06rem; }
.section--navy .sub { color: rgba(255,255,255,.72); }

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

.btn {
  --btn-bg: var(--navy);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--body);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { color: var(--btn-fg); background: var(--navy-soft); border-color: var(--navy-soft); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn svg { flex: none; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--navy); border-color: var(--line); }
.btn--ghost:hover { --btn-fg: var(--navy); background: var(--paper); border-color: var(--navy); }

.btn--light { --btn-bg: #fff; --btn-fg: var(--navy); }
.btn--light:hover { --btn-fg: var(--navy); background: var(--sky-soft); border-color: var(--sky-soft); }

.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,.35); }
.btn--outline-light:hover { --btn-fg: var(--navy); background: #fff; border-color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .93rem; letter-spacing: .01em;
}
.link-arrow svg { transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------------ Header --- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 76px;
}

.logo { display: inline-flex; align-items: center; gap: 11px; color: var(--navy); }
.logo__mark { width: 30px; height: 30px; flex: none; }
/* Uppercase letterspaced sans, to match the geometry of the U mark. A high
   contrast serif fights the mark's even stroke weight; this sits with it. */
.logo__text {
  font-family: var(--body);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  line-height: 1;
  /* letter-spacing adds a trailing gap after the final letter; pull it back
     so the lockup stays optically centred against the mark. */
  margin-right: -.24em;
}
/* The gold full stop. Letterspacing would otherwise leave it floating a quarter
   of an em away from the K, so it is pulled back to sit tight to the word. */
.logo__text span {
  color: var(--gold);
  margin-left: -.17em;
  letter-spacing: 0;
}

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font-size: .93rem; font-weight: 500; color: var(--ink);
  padding-block: 6px; position: relative;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--gold); transform: scaleX(0);
  transition: transform .2s var(--ease); transform-origin: left;
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--navy); font-weight: 600; }

/* The nav link colour above is more specific than .btn, which would leave the
   "Work with us" button with dark text on a navy fill. Restore the button's own
   foreground, including when it is the current page. */
.nav a.btn,
.nav a.btn:hover,
.nav a.btn[aria-current="page"] { color: var(--btn-fg); }
.nav a.btn::after { display: none; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; padding: 0; place-items: center;
}
.nav-toggle span {
  display: block; width: 18px; height: 1.5px; background: var(--ink);
  position: relative; transition: background .2s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink);
  transition: transform .25s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: grid; }
  .nav {
    position: fixed; inset: 76px 0 auto; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 24px;
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 18px; justify-content: center; }
}

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

.hero {
  position: relative;
  background: linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 55%, #062A82 100%);
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(58% 74% at 82% 8%, rgba(184,219,231,.20), transparent 62%),
    radial-gradient(46% 60% at 6% 96%, rgba(200,165,91,.16), transparent 66%);
  pointer-events: none;
}
/* Hero texture: the U monogram on a half-drop, replacing what used to be a plain
   square grid. Same role, same subtlety, but the texture is now the brand rather
   than a generic graph paper any site could use. The radial mask fades it out
   behind the headline so type contrast is untouched. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath transform='translate(20 18) scale(1.5)' d='M7 5v12a9 9 0 0 0 18 0V5'/%3E%3Cpath transform='translate(100 98) scale(1.5)' d='M7 5v12a9 9 0 0 0 18 0V5'/%3E%3Cpath transform='translate(-60 98) scale(1.5)' d='M7 5v12a9 9 0 0 0 18 0V5'/%3E%3Cpath transform='translate(100 -62) scale(1.5)' d='M7 5v12a9 9 0 0 0 18 0V5'/%3E%3C/g%3E%3Cg fill='%23C8A55B' fill-opacity='0.42'%3E%3Ccircle cx='57.5' cy='25.5' r='4.5'/%3E%3Ccircle cx='137.5' cy='105.5' r='4.5'/%3E%3Ccircle cx='-22.5' cy='105.5' r='4.5'/%3E%3Ccircle cx='137.5' cy='-54.5' r='4.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 160px 160px;
  -webkit-mask-image: radial-gradient(70% 65% at 50% 40%, #000, transparent 78%);
  mask-image: radial-gradient(70% 65% at 50% 40%, #000, transparent 78%);
  opacity: .55; pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; padding-block: clamp(84px, 12vw, 150px); }
.hero h1 { color: #fff; max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--sky); }
.hero__lede {
  max-width: 58ch; font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  color: rgba(255,255,255,.8); margin-top: 8px;
}
.hero .btn-row { margin-top: 36px; }

.hero--page .hero__inner { padding-block: clamp(64px, 8vw, 104px); }
.hero--page h1 { max-width: 22ch; }

.crumb {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sky); font-weight: 600; margin-bottom: 16px;
}

/* Stat strip */
.stats {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid; gap: 0;
  /* minmax(0,1fr) not 1fr: a long label such as "Brands owned and operated"
     otherwise forces its column past its share and overflows narrow phones. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { padding: 30px 26px 34px; border-right: 1px solid rgba(255,255,255,.14); }
.stat:last-child { border-right: 0; }

/* A stat that links somewhere. Keeps the tile's look, adds an affordance. */
a.stat {
  display: block; color: inherit; text-decoration: none;
  transition: background-color .2s var(--ease);
}
a.stat:hover { background: rgba(255,255,255,.07); color: inherit; }
a.stat .stat__label::after {
  content: "→"; display: inline-block; margin-left: 7px;
  opacity: 0; transform: translateX(-3px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
a.stat:hover .stat__label { color: #fff; }
a.stat:hover .stat__label::after { opacity: 1; transform: none; }
@media (max-width: 859px) {
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.14); }
}
.stat__num {
  font-family: var(--display); font-size: clamp(2.1rem, 3.4vw, 2.7rem);
  line-height: 1; color: #fff; margin-bottom: 8px;
}
.stat__label { font-size: .84rem; color: rgba(255,255,255,.68); letter-spacing: .04em; }

/* -------------------------------------------------------------- Card --- */

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  height: 100%;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #C9D4E6; }
.card h3 { margin-bottom: .35em; }
.card p { color: var(--muted); font-size: .98rem; }

.card__icon {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 22px;
  background: var(--sky-soft); color: var(--navy);
}
.card__num {
  font-family: var(--display); font-size: 1.5rem; color: var(--gold);
  display: block; margin-bottom: 10px;
}

/* Feature list */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.ticks li { position: relative; padding-left: 30px; color: var(--muted); font-size: .99rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 15px; height: 8px; border-left: 1.6px solid var(--gold); border-bottom: 1.6px solid var(--gold);
  transform: rotate(-45deg);
}
.section--navy .ticks li { color: rgba(255,255,255,.78); }
.section--navy .ticks li::before { border-color: var(--sky); }

/* Split layout */
.split { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr .95fr; } }
@media (min-width: 900px) { .split--reverse > :first-child { order: 2; } }

.panel {
  background: linear-gradient(150deg, var(--navy) 0%, #072B7E 100%);
  color: #fff; border-radius: var(--radius);
  padding: clamp(32px, 4vw, 48px);
}
.panel h3 { color: #fff; }
.panel p { color: rgba(255,255,255,.76); }

/* ------------------------------------------------------------ Brands --- */

.brand-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: #fff; height: 100%;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.brand-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.brand-card__crest {
  background: var(--navy); padding: 40px 30px;
  display: grid; place-items: center; min-height: 200px;
}

/* Every brand logo renders inside an IDENTICAL box and scales to fit it, so the
   crests read as a set. The four logos have very different proportions (Miore
   1.6:1, Colibri 1:1, Orovi ~3.2:1, Firebird 5.3:1), so a shared box plus
   object-fit: contain is what makes them consistent — never per-brand widths. */
.brand-card__crest img {
  width: 100%; max-width: 230px;
  height: 150px;
  object-fit: contain;
}

.brand-card__crest--gold { background: linear-gradient(140deg, #14203A, #2A2415 120%); }

/* Orovi's logo is a gold wordmark supplied on a white background. Sitting it on
   a warm ivory crest and multiplying drops the white out, so no transparent
   version is needed. Replace with an SVG or transparent PNG when one exists. */
.brand-card__crest--ivory { background: #F2EEE5; }
.brand-card__crest--ivory img { mix-blend-mode: multiply; }

/* Colibri. The crest colour #080922 is sampled from the logo artwork itself, so
   the panel matches the brand's own blue rather than the Unitask navy.
   The supplied file is solid #080922 on transparency: brightness(0) crushes it
   to black and invert(1) lifts it to pure white, keeping the alpha channel — so
   it reads white on that blue without needing a separate white export. */
.brand-card__crest--colibri { background: #080922; overflow: hidden; }
.brand-card__crest--colibri img {
  filter: brightness(0) invert(1);
  /* The supplied square file is 97.2% ink across but only 47.7% down — over half
     of it is empty margin, which would render the mark far smaller than the
     others. `cover` scales it to fill the shared box by width and crops the
     surplus transparent margin off the top and bottom, so the mark matches the
     other logos without ever exceeding the box (a transform did exceed it, and
     clipped the wordmark on narrow phones). Switch back to `contain` if the
     asset is re-exported tightly cropped. */
  object-fit: cover;
}

.brand-card__crest--tobacco { background: linear-gradient(140deg, #241A11, #4A3418 130%); }
.brand-card__crest--ember { background: linear-gradient(140deg, #14100F, #331512 130%); }
.brand-card__body .brand-card__category {
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: -4px;
}
.brand-card__wordmark {
  font-family: var(--display); font-size: 2.5rem; color: #fff; letter-spacing: .16em;
  text-transform: uppercase; line-height: 1;
}
.brand-card__body { padding: 30px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.brand-card__body p { color: var(--muted); font-size: .98rem; }
.brand-card__meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px;
}
.tag {
  font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); background: var(--sky-soft); border-radius: 100px; padding: 6px 12px;
}

/* Marketplace strip */
.channels {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 40px;
}
.channel {
  font-family: var(--display); font-size: clamp(1.2rem, 2.1vw, 1.6rem);
  color: var(--navy); opacity: .55; letter-spacing: .04em;
  transition: opacity .2s var(--ease);
}
.channel:hover { opacity: 1; }
/* Reads as a continuation of the list, not as another brand name. */
.channel--more {
  font-family: var(--body); font-size: .95rem; font-style: italic;
  opacity: .5; letter-spacing: 0;
}
.section--navy .channel { color: #fff; opacity: .6; }

/* ------------------------------------------------------------- Steps --- */

.steps { display: grid; gap: 0; }
.step {
  display: grid; gap: 6px 28px; padding: 30px 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 800px) { .step { grid-template-columns: 210px 1fr; } }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__label {
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); padding-top: .45em;
}
.step h3 { margin-bottom: .3em; }
.step p { color: var(--muted); font-size: .99rem; max-width: 62ch; }

/* ------------------------------------------------------------- Quote --- */

.quote {
  font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.35; color: #fff; max-width: 24ch; margin: 0;
}
.quote__by { font-family: var(--body); font-size: .9rem; color: var(--sky); margin-top: 22px; letter-spacing: .04em; }

/* --------------------------------------------------------------- CTA --- */

.cta {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--navy-deep), var(--navy) 70%, #0A337F);
  color: #fff; text-align: center;
}
/* Same monogram as the hero, so the page opens and closes on the brand texture.
   The mask is the inverse of the hero's: clear through the middle where the
   centred copy and buttons sit, fading up toward the edges. */
.cta::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath transform='translate(20 18) scale(1.5)' d='M7 5v12a9 9 0 0 0 18 0V5'/%3E%3Cpath transform='translate(100 98) scale(1.5)' d='M7 5v12a9 9 0 0 0 18 0V5'/%3E%3Cpath transform='translate(-60 98) scale(1.5)' d='M7 5v12a9 9 0 0 0 18 0V5'/%3E%3Cpath transform='translate(100 -62) scale(1.5)' d='M7 5v12a9 9 0 0 0 18 0V5'/%3E%3C/g%3E%3Cg fill='%23C8A55B' fill-opacity='0.42'%3E%3Ccircle cx='57.5' cy='25.5' r='4.5'/%3E%3Ccircle cx='137.5' cy='105.5' r='4.5'/%3E%3Ccircle cx='-22.5' cy='105.5' r='4.5'/%3E%3Ccircle cx='137.5' cy='-54.5' r='4.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 160px 160px;
  -webkit-mask-image: radial-gradient(58% 72% at 50% 50%, transparent 18%, #000 88%);
  mask-image: radial-gradient(58% 72% at 50% 50%, transparent 18%, #000 88%);
  opacity: .5; pointer-events: none;
}
.cta .wrap { position: relative; z-index: 1; }
.cta h2 { color: #fff; margin-inline: auto; max-width: 18ch; }
.cta p { color: rgba(255,255,255,.76); max-width: 54ch; margin-inline: auto; }
.cta .btn-row { justify-content: center; margin-top: 32px; }

/* -------------------------------------------------------------- Form --- */

.form { display: grid; gap: 20px; }
@media (min-width: 700px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } }
.field { display: grid; gap: 7px; }
.field label { font-size: .86rem; font-weight: 600; color: var(--navy); letter-spacing: .02em; }
.field input, .field select, .field textarea {
  font: inherit; font-size: .98rem; color: var(--ink);
  padding: 13px 15px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  width: 100%;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0,30,96,.10);
}
.field__hint { font-size: .8rem; color: var(--muted); }
.form__note { font-size: .84rem; color: var(--muted); }
.form-status {
  display: none; padding: 14px 16px; border-radius: var(--radius);
  background: var(--sky-soft); border: 1px solid var(--sky); font-size: .93rem; color: var(--navy);
}
.form-status[data-visible="true"] { display: block; }

/* Callout — practical instructions inside a form flow */
.callout {
  border-left: 3px solid var(--gold);
  background: var(--sky-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: .94rem;
  color: var(--navy);
}
.callout strong { display: block; margin-bottom: 4px; }
.callout p { margin: 0; }
.callout p + p { margin-top: .6em; }

/* Contact detail list */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.contact-list__label {
  font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 6px;
}
.contact-list__value { font-size: 1.02rem; color: var(--ink); }
.contact-list__value a { font-weight: 500; }

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

.site-footer { background: var(--ink); color: rgba(255,255,255,.62); padding-block: 64px 30px; font-size: .93rem; }
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: #fff; }
.site-footer .logo { color: #fff; }
.footer-grid { display: grid; gap: 40px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer-grid h4 {
  font-family: var(--body); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; margin: 0 0 16px;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-blurb { max-width: 34ch; margin-top: 18px; }
.footer-bottom {
  margin-top: 52px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  font-size: .84rem; color: rgba(255,255,255,.48);
}

/* --------------------------------------------------------- Utilities --- */

.mt-0 { margin-top: 0; }
.mt-s { margin-top: 18px; }
.mt-m { margin-top: 34px; }
.mt-l { margin-top: 40px; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* Reveal on scroll */
[data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}