/* ==========================================================================
   Island Link Solutions — base stylesheet
   Ported 1:1 from src/theme/theme.js, src/theme/GlobalStyles.jsx and
   src/components/primitives.jsx. No design changes.

   TOKEN NAMING FOR SECTION AGENTS — camelCase tokens in theme.js become
   kebab-case here. Use these exact names:

     theme.color.navy         -> var(--il-navy)
     theme.color.teal         -> var(--il-teal)
     theme.color.orange       -> var(--il-orange)
     theme.color.ink          -> var(--il-ink)
     theme.color.muted        -> var(--il-muted)
     theme.color.bg           -> var(--il-bg)
     theme.color.white        -> var(--il-white)
     theme.color.line         -> var(--il-line)
     theme.color.headerLine   -> var(--il-header-line)
     theme.color.heroEyebrow  -> var(--il-hero-eyebrow)
     theme.color.heroText     -> var(--il-hero-text)
     theme.color.ctaText      -> var(--il-cta-text)
     theme.color.footerBg     -> var(--il-footer-bg)
     theme.color.footerText   -> var(--il-footer-text)
     theme.color.footerCopy   -> var(--il-footer-copy)
     theme.color.pillBorder   -> var(--il-pill-border)
     theme.color.iconBg       -> var(--il-icon-bg)
     theme.gradient.hero      -> var(--il-gradient-hero)
     theme.gradient.cta       -> var(--il-gradient-cta)
     theme.font.sans          -> var(--il-font-sans)
     theme.layout.maxWidth    -> var(--il-max-width)
     theme.layout.gutter      -> var(--il-gutter)
     theme.layout.gutterNarrow-> var(--il-gutter-narrow)

   Breakpoints are desktop-first max-width queries, kept as in theme.js:
     tablet = @media (max-width: 800px)
     phone  = @media (max-width: 480px)
   All responsive rules live in the two blocks at the bottom of this file.
   Section agents: append your own rules to those same two blocks, 800px
   first then 480px, so the cascade stays correct.

   Inter is loaded in index.html at weights 400, 700, 800, 900. Do not use a
   weight outside that set.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — theme.js
   -------------------------------------------------------------------------- */

:root {
  /* theme.color */
  --il-navy: #062d63;          /* headings, nav numerals, pill text */
  --il-teal: #0a9ca6;          /* service card numerals */
  --il-orange: #ff7a17;        /* primary button */
  --il-ink: #10243d;           /* body text */
  --il-muted: #607086;         /* secondary text */
  --il-bg: #f5f8fb;            /* "soft" alternating section background */
  --il-white: #ffffff;
  --il-line: #dbe5ee;          /* card + divider borders */

  /* one-off shades used inside the dark bands */
  --il-header-line: #edf1f5;
  --il-hero-eyebrow: #77d7dd;
  --il-hero-text: #d9e9f3;
  --il-cta-text: #d8e9f1;
  --il-footer-bg: #061e3d;
  --il-footer-text: #bdd0df;
  --il-footer-copy: #7893aa;
  --il-pill-border: #cbd9e4;
  --il-icon-bg: #e8f7f8;

  /* theme.gradient */
  --il-gradient-hero: linear-gradient(115deg, #052b60 0%, #063d75 60%, #087c91 125%);
  --il-gradient-cta: linear-gradient(115deg, #052b60, #087b90);

  /* theme.font */
  --il-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* theme.layout */
  --il-max-width: 1180px;
  --il-gutter: 28px;
  --il-gutter-narrow: 20px;
}

/* --------------------------------------------------------------------------
   2. Reset — GlobalStyles.jsx
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--il-white);
  color: var(--il-ink);
  font-family: var(--il-font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

/* a visible focus ring — the supplied file had none, and every interactive
   element here is either a link or a form control. */
:focus-visible {
  outline: 2px solid var(--il-teal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   3. Shared classes — primitives.jsx
   -------------------------------------------------------------------------- */

/* Wrap */
.wrap {
  max-width: var(--il-max-width);
  margin: auto;
  padding: 0 var(--il-gutter);
}

/* Section */
.section {
  padding: 88px 0;
  background: transparent;
}

.section--soft {
  background: var(--il-bg);
}

/* Eyebrow */
.eyebrow {
  font-size: 13px;
  letter-spacing: 2.6px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--il-teal);
}

.eyebrow--on-dark {
  color: var(--il-hero-eyebrow);
}

/* SectionHead */
.section-head {
  max-width: 730px;
  margin-bottom: 42px;
}

.section-head h2 {
  font-size: 42px;
  letter-spacing: -1.4px;
  margin: 8px 0 12px;
  color: var(--il-navy);
  line-height: 1.1;
}

.section-head p {
  color: var(--il-muted);
  line-height: 1.7;
  font-size: 17px;
}

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Card */
.card {
  border: 1px solid var(--il-line);
  border-radius: 10px;
  padding: 30px;
  background: var(--il-white);
}

.card h3 {
  color: var(--il-navy);
  font-size: 19px;
  margin: 0 0 10px;
}

.card p {
  color: var(--il-muted);
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}

/* Split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
  align-items: center;
}

/* Button — the orange pill. .btn--secondary is the outlined variant used on
   the dark hero band. Works on <a> and on <button type="submit">. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A button label wrapping is always wrong. "Contact Us" broke onto two lines
     in the phone header, making the button 64px tall and the header 89px. */
  white-space: nowrap;
  padding: 14px 21px;
  border-radius: 7px;
  font-weight: 800;
  font-size: 14px;
  background: var(--il-orange);
  color: var(--il-white);
  border: 1px solid transparent;
  transition: filter 0.18s ease, transform 0.12s ease;
}

.btn:hover {
  filter: brightness(1.07);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* must stay after .btn:hover — same specificity, source order decides */
.btn--secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
}

.btn--secondary:hover {
  filter: none;
  background: rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   4. Responsive — desktop-first max-width queries (theme.media)
   -------------------------------------------------------------------------- */

/* tablet */
@media (max-width: 800px) {
  .section-head h2 {
    font-size: 34px;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .split {
    grid-template-columns: 1fr;
    gap: 38px;
  }
}

/* phone */
@media (max-width: 480px) {
  .wrap {
    padding: 0 var(--il-gutter-narrow);
  }

  .section {
    padding: 66px 0;
  }

  .grid {
    gap: 12px;
  }
}

/* --------------------------------------------------------------------------
   5. Motion preferences — GlobalStyles.jsx
   -------------------------------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   chrome
   ========================================================================== */

/* ==========================================================================
   Header + Footer — ported from src/components/Header.jsx and Footer.jsx.
   Append the two media blocks at the bottom to the base stylesheet's own
   800px and 480px blocks (there are no 480px rules for this section).
   ========================================================================== */

/* --- Header: Bar ---------------------------------------------------------- */
.header-bar {
  border-bottom: 1px solid var(--il-header-line);
  background: var(--il-white);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* --- Header: Nav ---------------------------------------------------------- */
.header-nav {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- Header: Logo --------------------------------------------------------- */
.header-logo {
  width: 255px;
  max-height: 68px;
  object-fit: contain;
}

/* --- Header: Links -------------------------------------------------------- */
.header-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  font-weight: 700;
}

/* --- Header: Toggle ------------------------------------------------------- */
.header-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  margin-left: 14px;
  border-radius: 7px;
  border: 1px solid var(--il-line);
  color: var(--il-navy);
}

/* The React version swapped the burger path for an X in render. Both paths
   ship in the markup and the swap is driven off aria-expanded, so main.js
   only ever has to set that one attribute — no icon code, no inline style. */
.header-toggle[aria-expanded="false"] .header-icon-close { display: none; }
.header-toggle[aria-expanded="true"] .header-icon-open { display: none; }

/* --- Header: Drawer ------------------------------------------------------- */
/* Hidden outright above the tablet breakpoint, exactly as in Header.jsx —
   the desktop links are visible there, so the panel must never appear. */
.header-drawer {
  display: none;
}

/* --- Footer --------------------------------------------------------------- */
.footer-bar {
  background: var(--il-footer-bg);
  color: var(--il-footer-text);
  padding: 50px 0 28px;
}

.footer-cols {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: flex-start;
}

.footer-cols img {
  width: 235px;
  background: var(--il-white);
  border-radius: 5px;
  padding: 8px;
}

.footer-cols p {
  max-width: 450px;
  line-height: 1.6;
  font-size: 13px;
  margin-top: 14px;
}

.footer-cols a {
  color: var(--il-white);
  font-weight: 700;
}

/* Was inline style={{ color: 'white' }} in the supplied file, then a styled
   component. A class here for the same reason: style-src-attr 'none'. */
.footer-name {
  color: var(--il-white);
}

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 35px;
  padding-top: 20px;
  font-size: 12px;
  color: var(--il-footer-copy);
}

/* ==========================================================================
   chrome — tablet. These rules arrived from the port unwrapped, under a
   comment telling the integrator to merge them into the base sheet's 800px
   block. Concatenated raw they applied at EVERY width, which hid the desktop
   nav links and left the hamburger showing on a 1078px viewport.
   ========================================================================== */

/* TABLET — everything that makes the phone nav work must live HERE, not in the
   480px block below. The nav links are hidden from 800px down, so the hamburger
   that replaces them has to appear at the SAME breakpoint. When these two rules
   drifted apart on 2026-09-26 it left a dead zone from 481-800px with no
   navigation at all: links hidden, hamburger hidden, and a footer carrying one
   link. iPad portrait is 768px, so it landed squarely in the gap. */
@media (max-width: 800px) {
  .header-logo {
    width: 205px;
  }

  .header-links a:not([data-cta]) {
    display: none;
  }

  .header-toggle {
    display: inline-flex;
  }

  .header-drawer {
    display: block;
    border-top: 1px solid var(--il-header-line);
    background: var(--il-white);
    padding: 8px 0 18px;
  }

  /* main.js toggles the `hidden` property, so the closed state has to be
     spelled out here — an author `display: block` beats the UA rule for
     [hidden] and the panel would otherwise be stuck open. */
  .header-drawer[hidden] {
    display: none;
  }

  .header-drawer a {
    display: block;
    padding: 14px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--il-navy);
    border-bottom: 1px solid var(--il-header-line);
  }

  .header-drawer a:last-child {
    border-bottom: 0;
  }

  .footer-cols {
    display: block;
  }

  .footer-cols div + div {
    margin-top: 25px;
  }
}

/* PHONE — only sizing. Nothing here may control whether the nav exists. */
@media (max-width: 480px) {
  .header-logo {
    width: 150px;
  }

  .header-links {
    gap: 12px;
  }

  .header-bar .btn {
    padding: 11px 14px;
    font-size: 13px;
  }
}


/* ==========================================================================
   hero
   ========================================================================== */

/* --- Hero — Hero.jsx ----------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--il-gradient-hero);
  color: var(--il-white);
  padding: 92px 0 102px;
}

/* the oversized ring bleeding off the top-right corner */
.hero::after {
  content: '';
  position: absolute;
  width: 560px;
  height: 560px;
  border: 80px solid rgba(255, 255, 255, 0.045);
  border-radius: 50%;
  right: -160px;
  top: -170px;
  pointer-events: none;
}

.hero h1 {
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -2.4px;
  margin: 15px 0 22px;
  max-width: 800px;
}

.hero p {
  font-size: 20px;
  line-height: 1.6;
  color: var(--il-hero-text);
  max-width: 720px;
  margin: 0 0 34px;
}

.hero-actions {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
  position: relative; /* above the decorative ring */
  z-index: 1;
}

/* --- Stats — Stats.jsx --------------------------------------------------- */
/* The four-up band that overlaps the bottom of the hero by 38px. */

.stats-row {
  background: var(--il-white);
  box-shadow: 0 16px 40px rgba(8, 39, 73, 0.1);
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: -38px;
  position: relative;
  z-index: 3;
  list-style: none;
}

.stats-item {
  padding: 27px 25px;
  border-right: 1px solid var(--il-line);
}

.stats-item:last-child {
  border-right: 0;
}

.stats-item strong {
  display: block;
  color: var(--il-navy);
  font-size: 21px;
}

.stats-item span {
  font-size: 13px;
  color: var(--il-muted);
}

/* ---- append into the base stylesheet's existing tablet block ------------- */
/* tablet */
@media (max-width: 800px) {
  .hero {
    padding: 70px 0 80px;
  }

  .hero h1 {
    font-size: 46px;
  }

  .hero p {
    font-size: 17px;
  }

  .stats-row {
    grid-template-columns: 1fr 1fr;
  }

  /* two-up: drop the middle divider and rule off the top row */
  .stats-item:nth-child(2) {
    border-right: 0;
  }

  .stats-item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--il-line);
  }
}

/* ---- append into the base stylesheet's existing phone block -------------- */
/* phone */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 39px;
  }

  .stats-row {
    grid-template-columns: 1fr;
  }

  /* single column: stack with horizontal rules only */
  .stats-item {
    border-right: 0;
    border-bottom: 1px solid var(--il-line);
  }

  .stats-item:last-child {
    border-bottom: 0;
  }
}


/* ==========================================================================
   offer
   ========================================================================== */

/* --------------------------------------------------------------------------
   Services — ported from src/components/Services.jsx
   -------------------------------------------------------------------------- */

/* the card grid is a real list; strip the markers without touching the
   shared .grid class. */
.services-list {
  list-style: none;
}

/* styled.div `Numeral` in Services.jsx. No font-size was declared there, so it
   inherits the 16px body size — left undeclared here for the same result. */
.services-numeral {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--il-icon-bg);
  color: var(--il-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  margin-bottom: 22px;
}

/* --------------------------------------------------------------------------
   Our Network — ported from src/components/Network.jsx
   Network.jsx declared no styled-components of its own; it is Section $soft +
   the shared primitives, so the only addition is the list-marker reset.
   -------------------------------------------------------------------------- */

.network-list {
  list-style: none;
}

/* No responsive rules to append for either section: Numeral had no media
   queries, and every breakpoint behaviour these sections rely on (.section-head
   h2 -> 34px, .grid -> 1 column, .grid gap -> 12px, .section padding -> 66px 0)
   already lives in the base stylesheet's 800px and 480px blocks. */


/* ==========================================================================
   audience
   ========================================================================== */

/* ==========================================================================
   ForBrands — ported from src/components/ForBrands.jsx
   ========================================================================== */

/* BigCopy.
   NOTE for whoever assembles the page: the eyebrow is a <div class="eyebrow">,
   not a <p>, exactly as in the JSX. `.brands-copy p` (0,1,1) would otherwise
   beat `.eyebrow` (0,1,0) and repaint the eyebrow muted/17px. Do not swap the
   div for a <p>. Same applies to .retailers-card and .retailers-copy below. */
.brands-copy h2 {
  font-size: 43px;
  letter-spacing: -1.4px;
  color: var(--il-navy);
  margin: 10px 0 18px;
  line-height: 1.1;
}

.brands-copy p {
  color: var(--il-muted);
  font-size: 17px;
  line-height: 1.75;
}

/* Pills */
.brands-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
  list-style: none;
}

.brands-pill {
  padding: 9px 13px;
  border: 1px solid var(--il-pill-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: var(--il-navy);
  background: var(--il-white);
}

/* Process */
.brands-process {
  display: grid;
  gap: 12px;
  list-style: none;
}

.brands-step {
  display: flex;
  gap: 17px;
  align-items: flex-start;
  padding: 18px;
  background: var(--il-white);
  border: 1px solid var(--il-line);
  border-radius: 8px;
}

.brands-step b {
  color: var(--il-navy);
  display: block;
  margin: 2px 0 4px;
}

.brands-step span {
  color: var(--il-muted);
  font-size: 13px;
}

/* Num */
.brands-num {
  min-width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--il-navy);
  color: var(--il-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

/* ==========================================================================
   ForRetailers — ported from src/components/ForRetailers.jsx
   ========================================================================== */

/* FeatureCard = styled(Card). These two rules tie on specificity with
   `.card h3` / `.card p` in the base sheet, so they must stay AFTER it in
   source order — same as the styled-components class order they replace.
   margin-top:12px layers over `.card h3 { margin: 0 0 10px }`, leaving
   12px top / 10px bottom. */
.retailers-card h3 {
  font-size: 27px;
  margin-top: 12px;
  line-height: 1.2;
}

.retailers-card p {
  font-size: 15px;
}

/* BigCopy — identical to .brands-copy except for the p margin-bottom. */
.retailers-copy h2 {
  font-size: 43px;
  letter-spacing: -1.4px;
  color: var(--il-navy);
  margin: 10px 0 18px;
  line-height: 1.1;
}

.retailers-copy p {
  color: var(--il-muted);
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 26px;
}

/* --------------------------------------------------------------------------
   Responsive — append to the base sheet's existing blocks, 800px first.
   -------------------------------------------------------------------------- */

/* tablet */
@media (max-width: 800px) {
  .brands-copy h2 {
    font-size: 34px;
  }

  .retailers-copy h2 {
    font-size: 34px;
  }
}

/* phone — neither section adds rules at 480px. */


/* ==========================================================================
   contact
   ========================================================================== */

/* ==========================================================================
   Contact CTA + form
   Ported from src/components/ContactCTA.jsx and src/components/ContactForm.jsx
   ========================================================================== */

/* Band — the gradient card. */
/* Flex children default to `min-width: auto` and will not shrink below their
   content minimum — the same trap as the grid tracks above. Without this, the
   480px card plus the copy column needed 638px while the band offered 633px at
   an 801px viewport, and the card poked outside the band. Narrow window
   (801-809px) but a real overflow. */
.contact-band > * {
  min-width: 0;
}

.contact-band {
  background: var(--il-gradient-cta);
  color: var(--il-white);
  border-radius: 14px;
  padding: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

/* Scoped to .contact-band-copy, NOT `.contact-band h2/p`. See the note in
   behaviourNeeded: the React `Band p {}` descendant rule out-specifies the
   status paragraph's own class and paints it #d8e9f1 on a white form. */
.contact-band-copy h2 {
  font-size: 38px;
  margin: 0 0 9px;
  line-height: 1.15;
}

.contact-band-copy p {
  color: var(--il-cta-text);
  margin: 0;
  max-width: 650px;
  line-height: 1.6;
}

/* FormSlot */
.contact-form-slot {
  flex-shrink: 0;
}

/* GRID TRACKS MUST BE minmax(0, 1fr), NOT 1fr.
   A grid item defaults to `min-width: auto`, so a track sized `1fr` still
   refuses to shrink below its content's minimum. The <textarea> carries a
   default `cols` attribute worth roughly 300px, so every track here was
   forced to 300px inside a 259px card on a phone -- the fields visibly
   spilled past the card onto the band behind it. `width: 100%` on the
   controls did NOT help, because 100% resolved against the already-too-wide
   300px track, which is why the bug survived a CSS read.
   Caught on a real phone 2026-09-26; it does not reproduce at desktop widths. */

/* Form shell. Also worn by the thank-you panel — in React that was the same
   styled component rendered as a <div> (`<Form as="div">`). */
.contact-form {
  background: var(--il-white);
  border-radius: 12px;
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 480px;
}

/* LOAD-BEARING: `display: grid` above out-specifies the UA sheet's
   [hidden] { display: none }, so without this the thank-you panel would be
   visible on load and the form would stay visible after a successful send. */
.contact-form[hidden] {
  display: none;
}

/* Field */
.contact-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.contact-field > span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--il-muted);
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  min-width: 0;   /* see the grid note above — without this they assert their cols/size width */
  font: inherit;
  /* 16px, NOT 15px. iOS Safari zooms the whole page when a focused input is
     under 16px, and the visitor has to pinch back out to carry on. One pixel
     is the entire difference between that and a normal tap. */
  font-size: 16px;
  color: var(--il-ink);
  background: var(--il-white);
  border: 1px solid var(--il-line);
  border-radius: 7px;
  padding: 11px 12px;
  width: 100%;
}

.contact-field textarea {
  resize: vertical;
  min-height: 96px;
}

/* Out-specifies the base sheet's :focus-visible ring on purpose — the teal
   border + halo is the React focus treatment and is itself clearly visible. */
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: var(--il-teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 156, 166, 0.14);
}

/* Star — decorative only; every input already carries `required`, which is what
   a screen reader announces, so the asterisk is aria-hidden in the markup. */
.contact-star {
  color: var(--il-orange);
  font-weight: 800;
  margin-left: 3px;
}

/* Row */
.contact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

/* Honeypot — off-screen rather than display:none, so bots that skip hidden
   inputs still fill it in. Must not become display:none or visibility:hidden. */
.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Counter. main.js toggles .is-near past 90% of the 2000 ceiling. */
.contact-counter {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: right;
  margin-top: -2px;
  color: var(--il-muted);
}

.contact-counter.is-near {
  color: var(--il-orange);
}

/* Status line. main.js toggles .is-error. #b3261e is a literal in the React
   source, not a theme token — kept as a literal here for the same reason. */
.contact-note {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  color: var(--il-muted);
}

.contact-note.is-error {
  color: #b3261e;
}

/* Done */
.contact-done {
  text-align: center;
  padding: 18px 4px;
}

.contact-done strong {
  display: block;
  color: var(--il-navy);
  font-size: 19px;
  margin-bottom: 8px;
}

.contact-done p {
  color: var(--il-muted);
  font-size: 14px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Responsive — append into the base sheet's existing blocks, 800 then 480.
   -------------------------------------------------------------------------- */

/* tablet */
@media (max-width: 800px) {
  .contact-band {
    padding: 38px;
    display: block;
  }

  .contact-band-copy h2 {
    font-size: 30px;
  }

  .contact-form-slot {
    margin-top: 26px;
  }

  .contact-form {
    max-width: none;
  }
}

/* phone */
@media (max-width: 480px) {
  /* Padding trimmed 38 -> 18 (band) and 22 -> 16 (card). On a 375px screen the
     old values spent 120px of the width on whitespace and left a 200px content
     box, which is why everything inside felt cramped. Now roughly 287px. */
  .contact-band {
    padding: 12px;
  }

  .contact-form {
    padding: 12px;
  }

  .contact-row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Turnstile's normal widget is a 300px-wide iframe with a hard floor — CSS
     cannot shrink it, so it overflowed the card. main.js swaps in the compact
     size (150x140) below 480px; this just keeps it from being stretched. */
  .cf-turnstile {
    display: flex;
    justify-content: center;
  }

  /* `flexible` fills the container but still has Turnstile's 300px floor, so
     main.js only asks for it when the container can actually take it. This
     keeps the widget flush with the inputs when it is used. */
  .cf-turnstile[data-size="flexible"] {
    display: block;
  }
}


/* ==========================================================================
   skip link — visible only when focused by keyboard
   ========================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--il-navy);
  color: var(--il-white);
  font-size: 14px;
  font-weight: 800;
  border-radius: 0 0 7px 0;
}

.skip-link:focus {
  left: 0;
}