/* ═══════════════════════════════════════════════════════════════════════════
   LACCINO SURFACE SYSTEM
   The design language of the pricing cards and the homepage "Selected work"
   and "How we work" sections, applied to the nav and every page:

   - Editorial text is grouped with spacing and restrained rules, not a card
     behind every paragraph or list item.
   - Cards are reserved for plans, case studies and functional applications.
   - Filled form fields with a single indicator line that turns green on focus.
   - Depth from soft shadows on media, never from outlines.

   Loaded last on every page so it can retire the older ruled patterns in
   style.css without rewriting them. Tokens below are the only new values.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --sys-panel:        rgba(246, 245, 243, 0.30);   /* visible tile on green */
  --sys-panel-hover:  rgba(246, 245, 243, 0.40);
  --sys-panel-deep:   rgba(246, 245, 243, 0.24);   /* visible fields / subcards */
  --sys-panel-ink:    rgba(71, 156, 115, 0.11);    /* tile on the light panel */
  --sys-card-line:    rgba(246, 245, 243, 0.24);
  --sys-accent-soft:  var(--green-strong);         /* readable numeric / label foreground */
  --sys-accent-wash:  rgba(71, 156, 115, 0.2);
  --sys-radius:       12px;                        /* shared tile / field edge */
  --sys-radius-lg:    16px;                        /* large panels             */
  --sys-pill:         999px;
  --sys-shadow:       0 16px 32px -24px rgba(38, 80, 60, 0.52);
  --sys-shadow-low:   0 1px 2px rgba(38, 80, 60, 0.22);
  --sys-ease:         0.24s ease;
}

/* ── Navigation ─────────────────────────────────────────────────────────── */

/* No highlight on nav links. Hovering or focusing a link slides a ">" arrow
   in front of it (css/motion.css); nothing else changes. */
header .menu-segment { gap: 4px; }
header .header-nav-link:hover .header-nav-label,
header .nav-text-button:hover .header-nav-label { opacity: 1; }

/* White navigation and the light brand mark stay visible over the page. */
header.site-header .header-nav-link,
header.site-header .header-nav-label { color: var(--white); }
header.site-header .logo .logo-light,
header.site-header.is-scrolled:not(.menu-open):hover .logo .logo-light { display: block; filter: none; }
header.site-header .logo .logo-dark,
header.site-header.is-scrolled:not(.menu-open):hover .logo .logo-dark { display: none; }
header.site-header .hamburger .line { background: var(--white); }
header.site-header .header-submenu .header-nav-link,
header.site-header .header-submenu .header-nav-label { color: var(--deep); }

/* Preserve the original header typography and spacing without its banner. */
header.site-header,
header[data-shared-header] {
  padding: 12px;
  pointer-events: auto;
}

header.site-header .top-wrap,
header[data-shared-header] .top-wrap,
header.site-header.is-scrolled .top-wrap,
header[data-shared-header].is-scrolled .top-wrap {
  width: min(100%, 1896px);
  min-height: 82px;
  margin: 0 auto;
  padding: 6px 48px;
  align-items: center;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
}

header.site-header .top-wrap .menu-wrap,
header[data-shared-header] .top-wrap .menu-wrap {
  align-items: center;
}

header.site-header .top-wrap .menu-wrap .menu-item-logo,
header[data-shared-header] .top-wrap .menu-wrap .menu-item-logo {
  align-self: center;
}

/* Hidden past the middle of the page while scrolling down. The banner morphs
   away rather than sliding: it lifts, narrows, softens and fades together.
   The rule on the visible state times the return; the .is-hidden rule times
   the exit, which is a touch quicker so it never lingers over content. */
header.site-header .top-wrap,
header[data-shared-header] .top-wrap {
  transform-origin: 50% 0;
  transition:
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1),
    filter 0.8s cubic-bezier(0.33, 1, 0.68, 1),
    background-color 0.3s ease;
}

header.site-header.is-hidden,
header[data-shared-header].is-hidden { pointer-events: none; }

header.site-header.is-hidden .top-wrap,
header[data-shared-header].is-hidden .top-wrap {
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, -36px, 0) scale(0.965);
  transition:
    transform 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.55s cubic-bezier(0.65, 0, 0.35, 1) 0.05s,
    filter 0.6s cubic-bezier(0.65, 0, 0.35, 1),
    background-color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  header.site-header .top-wrap,
  header[data-shared-header] .top-wrap,
  header.site-header.is-hidden .top-wrap,
  header[data-shared-header].is-hidden .top-wrap {
    transform: none;
    filter: none;
    transition: opacity 0.3s ease;
  }
}

header.site-header.is-bottom .top-wrap,
header[data-shared-header].is-bottom .top-wrap {
  transform: none;
}

@media (min-width: 1280px) {
  header.site-header,
  header[data-shared-header] {
    padding: 16px 88px 0;
  }

  header.site-header .top-wrap,
  header[data-shared-header] .top-wrap,
  header.site-header.is-scrolled .top-wrap,
  header[data-shared-header].is-scrolled .top-wrap {
    padding-right: 96px;
    padding-left: 96px;
  }
}

@media (min-width: 1600px) {
  header.site-header .top-wrap,
  header[data-shared-header] .top-wrap,
  header.site-header.is-scrolled .top-wrap,
  header[data-shared-header].is-scrolled .top-wrap {
    padding-right: 140px;
    padding-left: 140px;
  }
}

@media (max-width: 1023px) {
  header.site-header,
  header[data-shared-header] { padding: 8px; }

  header.site-header .top-wrap,
  header[data-shared-header] .top-wrap,
  header.site-header.is-scrolled .top-wrap,
  header[data-shared-header].is-scrolled .top-wrap {
    min-height: 84px;
    padding: 10px 18px;
  }

}

/* Mobile menu: an open editorial list inside the menu surface. */
.modal-menu .inner-wrap { padding-top: 120px; }
.modal-menu nav { margin-bottom: 28px; }
.modal-menu .bottom-menu { display: flex; flex-direction: column; gap: 0; }
.modal-menu .bottom-menu li a,
.modal-menu .bottom-menu li button {
  min-height: 44px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(38, 80, 60, 0.2);
  border-radius: 0;
  background: transparent;
  background-image: none;
}
.modal-menu .bottom-menu li a span { display: inline-block; transition: transform 0.7s var(--motion-ease, ease); }
.modal-menu .bottom-menu li a span::before {
  content: '>';
  position: absolute;
  margin-left: -14px;
  opacity: 0;
  transition: opacity 0.7s var(--motion-ease, ease);
}
.modal-menu .bottom-menu .header-nav-home-marker { display: none; }
.modal-menu .bottom-menu li a:is(:hover, :focus-visible) span { transform: translateX(14px); }
.modal-menu .bottom-menu li a:is(:hover, :focus-visible) span::before { opacity: 1; }

/* Floating section menu: one pill holding pill buttons. */
.floating-scroll-menu .inner-wrap {
  gap: 4px;
  padding: 6px;
  border: 0;
  border-radius: var(--r-md);   /* matches the header card */
  box-shadow: 0 18px 40px -20px rgba(71, 156, 115, 0.55);
}
.floating-scroll-menu button { padding: 10px 16px; }
.floating-scroll-menu button span { display: inline-block; transition: transform 0.7s var(--motion-ease, ease); }
.floating-scroll-menu button span::before {
  content: '>';
  position: absolute;
  margin-left: -12px;
  opacity: 0;
  transition: opacity 0.7s var(--motion-ease, ease);
}
/* No pill or underline highlight: hover and the active section slide the
   same ">" arrow in front of the label, as in the header. */
.floating-scroll-menu button:hover span,
.floating-scroll-menu button.active span { background-image: none; transform: translateX(10px); }
.floating-scroll-menu button:hover span::before,
.floating-scroll-menu button.active span::before { opacity: 1; }
@media (max-width: 1023px) {
  .floating-scroll-menu .inner-wrap { padding: 6px; gap: 2px; }
}

/* ── Page structure ─────────────────────────────────────────────────────── */

.page-intro { border-bottom: 0; }

/* Capability and work pillars: open text lists with one structural rule.
   Media keeps the soft frame because it is a visual object, not text chrome. */
.pillar { border-top: 0; padding: 72px 0; }
.pillar:first-of-type { padding-top: 12px; }
.pillar .p-list { display: flex; flex-direction: column; gap: 0; }
.pillar .p-list li,
.pillar .p-list li:first-child {
  border: 0;
  border-top: 1px solid rgba(246, 245, 243, 0.24);
  padding: 18px 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.pillar .media { border-radius: 0; box-shadow: var(--sys-shadow); }

/* Generic text grids are open editorial columns. Purpose-built pricing and
   case-study components keep their own card treatment. */
.cards { gap: 24px 40px; background: none; border: 0; }
.cards .card {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(246, 245, 243, 0.24);
  border-radius: 0;
  padding: 28px 0 36px;
  color: var(--green-strong);
  box-shadow: none;
  transition: none;
}
.cards .card:hover {
  background: transparent;
  border-color: rgba(246, 245, 243, 0.24);
  box-shadow: none;
}
.cards .card .color-gray-light,
.cards .card .color-gray,
.cards .card .color-green,
.cards .card .js-scramble-text { color: var(--green-strong); }
.card .c-media { border-radius: 0; }

/* Numbered and supporting lists read as one sequence, not stacked cards. */
.stack-list { display: flex; flex-direction: column; gap: 0; }
.stack-list li {
  border: 0;
  border-top: 1px solid rgba(246, 245, 243, 0.24);
  padding: 22px 0;
  border-radius: 0;
  background: transparent;
  color: var(--green-strong);
  box-shadow: none;
}
.stack-list li .st-num { color: var(--green-strong); font-weight: 700; }
.stack-list li .color-gray-light,
.stack-list li .color-gray,
.stack-list li .color-green,
.stack-list li .js-scramble-text,
.pillar .p-list li .js-scramble-text { color: var(--green-strong); }

/* Featured work: shadowed frame, pill tags. */
.featured .f-media { border: 0; border-radius: 0; box-shadow: var(--sys-shadow); }
.featured .f-tags .tag {
  border: 0;
  padding: 7px 12px;
  border-radius: 0;
  background: rgba(246, 245, 243, 0.07);
}

/* Legal metadata stays plain text. */
.legal-doc .legal-updated {
  display: inline-block;
  padding: 0 0 8px;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid rgba(246, 245, 243, 0.24);
}

/* ── Forms ──────────────────────────────────────────────────────────────── */

/* Filled fields. The one remaining line is the input indicator under each
   field: it identifies the control, and turns green and thickens on focus. */
.field input,
.field select,
.field textarea {
  border: 0;
  border-bottom: 1px solid rgba(246, 245, 243, 0.4);
  border-radius: 0;
  background: var(--sys-panel-deep);
  transition: background-color var(--sys-ease), box-shadow var(--sys-ease), border-color var(--sys-ease);
}
.field input:hover,
.field select:hover,
.field textarea:hover { background: rgba(71, 156, 115, 0.3); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-bottom-color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
  background: rgba(71, 156, 115, 0.3);
}

.newsletter-form { border-top: 0; padding-top: 0; }

/* Contact details remain an open editorial column beside the form. */
.contact-aside {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.contact-aside .stack-list li { background: transparent; }

/* Contact page: each input group is one fully opaque functional card. The
   control itself stays open so there is no nested-box effect. */
body[data-page='contact'] .contact-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
  gap: clamp(48px, 6vw, 104px);
  max-width: 1540px;
  margin-inline: auto;
}
body[data-page='contact'] .contact-form-panel { min-width: 0; }
body[data-page='contact'] .contact-form-head {
  display: grid;
  grid-template-columns: minmax(120px, 0.32fr) minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  margin-bottom: 24px;
}
body[data-page='contact'] .contact-form-head > span,
body[data-page='contact'] .contact-aside__label {
  color: var(--deep, #0e2a1e);
  font-weight: 700;
  letter-spacing: 0.12em;
}
body[data-page='contact'] .contact-form-head p { max-width: 44ch; }
body[data-page='contact'] .contact-form-panel .form-row {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}
body[data-page='contact'] .contact-form-panel .field {
  grid-column: span 6;
  min-width: 0;
  min-height: 118px;
  margin: 0;
  padding: 18px 20px 16px;
  border-radius: 0;
  background: #e8e8e5;
  opacity: 1;
  box-shadow: none;
  transition: transform var(--sys-ease), background-color var(--sys-ease), box-shadow var(--sys-ease);
}
body[data-page='contact'] .contact-form-panel .field:nth-child(3) { grid-column: span 5; }
body[data-page='contact'] .contact-form-panel .field:nth-child(4) { grid-column: span 7; }
body[data-page='contact'] .contact-form-panel .field.full {
  grid-column: 1 / -1;
  min-height: 224px;
}
body[data-page='contact'] .contact-form-panel .field:hover,
body[data-page='contact'] .contact-form-panel .field:focus-within {
  background: #e8e8e5;
  box-shadow: var(--sys-shadow);
  transform: translate3d(0, -2px, 0);
}
body[data-page='contact'] .contact-form-panel .field label {
  margin-bottom: 10px;
  color: var(--green-strong);
}
body[data-page='contact'] .contact-form-panel .field input,
body[data-page='contact'] .contact-form-panel .field select,
body[data-page='contact'] .contact-form-panel .field textarea {
  min-height: 42px;
  padding: 6px 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--green-strong);
}
body[data-page='contact'] .contact-form-panel .field textarea {
  min-height: 150px;
  resize: vertical;
}
body[data-page='contact'] .contact-form-panel .field input:focus,
body[data-page='contact'] .contact-form-panel .field select:focus,
body[data-page='contact'] .contact-form-panel .field textarea:focus {
  background: transparent;
  box-shadow: none;
  outline: none;
}
body[data-page='contact'] .contact-form-panel > .button-frame { margin-top: 28px; }
body[data-page='contact'] .contact-aside { padding-top: 2px; }
body[data-page='contact'] .contact-prompt-list { margin-top: 26px; }
body[data-page='contact'] .contact-prompt-list li {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 22px 0;
}
body[data-page='contact'] .newsletter-form {
  margin-top: 28px;
  padding: 24px;
  border-radius: 0;
  background: #e8e8e5;
  color: var(--green-strong);
  opacity: 1;
}
body[data-page='contact'] .newsletter-form .color-gray-light,
body[data-page='contact'] .newsletter-form .color-green,
body[data-page='contact'] .newsletter-form .newsletter-consent {
  color: var(--green-strong);
}
body[data-page='contact'] .newsletter-form .field { margin: 20px 0 16px; }
body[data-page='contact'] .newsletter-form .field input {
  border-radius: 0;
  background: var(--white);
  color: var(--green-strong);
  opacity: 1;
}
.newsletter-consent,
.footer-newsletter__consent,
.career-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.4;
}
.newsletter-consent { margin: 0 0 18px; }
.newsletter-consent input,
.footer-newsletter__consent input,
.career-consent input {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 2px 0 0;
  accent-color: var(--green-strong);
}

@media (max-width: 960px) {
  body[data-page='contact'] .contact-grid { grid-template-columns: 1fr; gap: 56px; }
  body[data-page='contact'] .contact-aside { max-width: 720px; }
}
@media (max-width: 680px) {
  body[data-page='contact'] .contact-form-head { grid-template-columns: 1fr; gap: 10px; }
  body[data-page='contact'] .contact-form-panel .field,
  body[data-page='contact'] .contact-form-panel .field:nth-child(3),
  body[data-page='contact'] .contact-form-panel .field:nth-child(4) { grid-column: 1 / -1; }
}

/* Callback page: a separate, deliberately short route for people who want to
   speak to a team member instead of writing a full project brief. */
body[data-page='book'] .book-intro .lead { max-width: 38ch; }
body[data-page='book'] .book-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: clamp(48px, 7vw, 120px);
  max-width: 1380px;
  margin-inline: auto;
}
body[data-page='book'] .contact-form-head { margin-bottom: 24px; }
body[data-page='book'] .contact-form-head p { max-width: 36ch; margin-top: 12px; }
body[data-page='book'] .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
body[data-page='book'] .field {
  min-height: 112px;
  margin: 0;
  padding: 18px 20px 16px;
  background: #e8e8e5;
}
body[data-page='book'] .field.full { grid-column: 1 / -1; }
body[data-page='book'] .field--note { min-height: 150px; }
body[data-page='book'] .field label { margin-bottom: 10px; color: var(--green-strong); }
body[data-page='book'] .field input,
body[data-page='book'] .field select,
body[data-page='book'] .field textarea {
  min-height: 42px;
  padding: 6px 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--green-strong);
}
body[data-page='book'] .field textarea { min-height: 76px; resize: vertical; }
body[data-page='book'] .field-note { opacity: 0.68; }
body[data-page='book'] .sx-btn { margin-top: 24px; }
body[data-page='book'] .book-assurance { padding-top: 4px; }
body[data-page='book'] .book-assurance > span { color: var(--deep, #0e2a1e); font-weight: 700; letter-spacing: 0.12em; }
body[data-page='book'] .book-assurance p { max-width: 20ch; margin-top: 24px; }
@media (max-width: 820px) {
  body[data-page='book'] .book-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body[data-page='book'] .form-row { grid-template-columns: 1fr; }
  body[data-page='book'] .field.full { grid-column: auto; }
}

/* Legacy on-page call section remains compatible with older saved links. */
body[data-page='contact'] .page-intro__jump { margin-top: 30px; }
body[data-page='contact'] .call-section { scroll-margin-top: 110px; }
body[data-page='contact'] .call-head {
  max-width: 1540px;
  margin: 0 auto clamp(40px, 5vw, 72px);
}
body[data-page='contact'] .call-head .section-label { margin-bottom: 30px; }
body[data-page='contact'] .call-head .lead { max-width: 52ch; margin-top: 26px; }
body[data-page='contact'] .call-form .field.field--third { grid-column: span 4; }
body[data-page='contact'] .call-form .field.full { min-height: 176px; }
body[data-page='contact'] .call-form .field textarea { min-height: 104px; }
@media (max-width: 680px) {
  body[data-page='contact'] .call-form .field.field--third { grid-column: 1 / -1; }
}

/* ── Account and client portal ──────────────────────────────────────────── */

.auth-grid { gap: 16px; background: none; border: 0; }
.auth-panel { background: var(--sys-panel); border: 1px solid var(--sys-card-line); border-radius: 0; }
.auth-method-button {
  border: 0;
  border-radius: 0;
  background: var(--sys-panel-deep);
}
.auth-method-button:hover,
.auth-method-button:focus-visible { background: var(--sys-accent-wash); }
.auth-method-button__mark { border: 0; border-radius: 50%; background: rgba(246, 245, 243, 0.08); }

.client-portal { border: 1px solid var(--sys-card-line); border-radius: 0; background: var(--sys-panel); overflow: hidden; }
.portal-header { border-bottom: 0; }
.portal-stats { border-bottom: 0; gap: 12px; padding: 0 44px; }
.portal-stats article,
.portal-stats article:last-child,
.portal-stats article:nth-child(2n) {
  border-right: 0;
  border-radius: 0;
  background: var(--sys-panel-deep);
  padding: 24px 28px;
}
.portal-tabs { border-bottom: 0; gap: 6px; padding: 28px 44px 0; }
.portal-tabs button,
.portal-tabs button:last-child {
  border-right: 0;
  border-bottom: 0;
  min-height: 48px;
  border-radius: 0;
}
.portal-button,
.portal-mini-button { border-radius: 0; }
.portal-form { border: 0; border-radius: 0; background: var(--sys-panel-deep); }
.portal-empty { border-top: 0; }
.portal-card { border: 0; border-radius: 0; background: var(--sys-panel-deep); }
@media (max-width: 760px) {
  .portal-stats { padding: 0 20px; }
  .portal-tabs { padding: 20px 20px 0; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  header .header-nav-link,
  .floating-scroll-menu button,
  .cards .card,
  .field input, .field select, .field textarea,
  body[data-page='contact'] .contact-form-panel .field { transition: none; }
  body[data-page='contact'] .contact-form-panel .field:hover,
  body[data-page='contact'] .contact-form-panel .field:focus-within { transform: none; }
}

/* ── Accents: the 2026 palette ──────────────────────────────────────────────
   Leaf green stays the ground and the controls; near-white stays the cards
   and type. The other colours are used in small, consistent places:
     Burnt Orange  markers: nav arrows, section-label squares, filter arrows
     Sun Yellow    attention: the "Recommended" badge (portal counts too)
     Aqua / Sky    classification: live work vs concepts, project tags
   Contrast: orange is only used for marks (3.45:1 on near-white passes the
   3:1 bar for indicators), never for small text; yellow, aqua and sky carry
   dark green or near-black text, never white. */

/* Burnt Orange: markers */
header .header-nav-marker,
header .header-nav-label::before,
.floating-scroll-menu button span::before,
.wk__filter::before { color: var(--burnt-orange); }
.sx__eyebrow::before { background: var(--burnt-orange); }

/* Sun Yellow: the one plan we point people to */
.pr-blob--glow.sx-plan--featured .sx-plan__flag {
  background: var(--sun);
  color: var(--green-strong);   /* 5.8:1 on Sun Yellow */
}

/* Aqua and Sky: live client work and concepts are told apart at a glance */
.wk__kind::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--sky);
}
.wk__item[data-kind='live'] .wk__kind::before { background: var(--aqua); }

/* Project tags on the homepage work list alternate Aqua and Sky */
/* Section variants (.hx--deep / .sx--deep) set their own tag colour, so match
   their specificity or the ink loses to a pale green on the tint. */
.hw__tags li,
.hx--deep .hw__tags li,
.sx--deep .hw__tags li { background: var(--aqua); color: #10281e; }    /* 7.5:1 */
.hw__tags li:nth-child(2n),
.hx--deep .hw__tags li:nth-child(2n),
.sx--deep .hw__tags li:nth-child(2n) { background: var(--sky); }       /* 6.5:1 */

/* ── Careers: Sky Blue page identity ─────────────────────────────────────
   The page gets a clear blue character while the global header, footer,
   logo and controls remain Evergreen Leaf. Muted copy is derived from Leaf. */
body[data-page='careers'] .page-main { background: var(--sky); }
body[data-page='careers'] .page-intro {
  border-bottom-color: rgba(38, 80, 60, 0.24);
  background:
    radial-gradient(circle at 78% 26%, color-mix(in srgb, var(--aqua) 58%, transparent), transparent 34%),
    var(--sky);
}
body[data-page='careers'] .page-section { background: color-mix(in srgb, var(--sky) 78%, var(--white)); }
body[data-page='careers'] .page-section.alt { background: color-mix(in srgb, var(--aqua) 52%, var(--white)); }
body[data-page='careers'] .page-intro .eyebrow,
body[data-page='careers'] .page-intro h1,
body[data-page='careers'] .page-intro .lead,
body[data-page='careers'] .page-section .color-gray-light,
body[data-page='careers'] .page-section .color-gray,
body[data-page='careers'] .page-section .color-green,
body[data-page='careers'] .page-section .section-label { color: var(--green-strong); }
body[data-page='careers'] .page-intro .lead,
body[data-page='careers'] .legal-doc p { color: color-mix(in srgb, var(--green-strong) 82%, transparent); }
body[data-page='careers'] .notice-block {
  width: min(100%, 680px);
  padding: 24px 0;
  border-radius: 0;
  border-top: 1px solid rgba(38, 80, 60, 0.24);
  border-bottom: 1px solid rgba(38, 80, 60, 0.24);
  background: transparent;
}
body[data-page='careers'] .notice-block .link-arrow { color: var(--green-strong); }
body[data-page='careers'] .notice-block .link-arrow span {
  background-image: none;
}
body[data-page='careers'] .notice-block .icon-arrow path { fill: currentColor; }
body[data-page='careers'] .stack-list li {
  border-color: rgba(38, 80, 60, 0.14);
  background: transparent;
}

body[data-page='careers'] .careers-interest {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(44px, 7vw, 120px);
  align-items: start;
}
body[data-page='careers'] .careers-interest__intro {
  position: sticky;
  top: 136px;
}
body[data-page='careers'] .careers-interest__intro h2 {
  max-width: 12ch;
  margin: 22px 0;
  color: var(--green-strong);
}
body[data-page='careers'] .careers-interest__intro p {
  max-width: 40ch;
  color: color-mix(in srgb, var(--green-strong) 82%, transparent);
}
.career-form {
  min-width: 0;
  padding: clamp(24px, 4vw, 48px);
  background: var(--white);
  color: var(--green-strong);
}
.career-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.career-form .field {
  margin: 0;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--sky) 18%, var(--white));
}
.career-form .field--wide { grid-column: 1 / -1; }
.career-form .field label { color: var(--green-strong); }
.career-form .field input,
.career-form .field select,
.career-form .field textarea,
.career-form .field input:hover,
.career-form .field select:hover,
.career-form .field textarea:hover,
.career-form .field input:focus,
.career-form .field select:focus,
.career-form .field textarea:focus {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--green-strong);
}
.career-form .field textarea { min-height: 150px; resize: vertical; }
.career-consent { margin: 20px 0; color: var(--green-strong); }
.career-consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.career-submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  min-width: 240px;
  min-height: 56px;
  padding: 14px 18px;
  border: 0;
  border-radius: 0;
  background: var(--green);
  color: var(--white);
  cursor: pointer;
}
.career-submit:hover,
.career-submit:focus-visible { background: var(--sky); color: var(--green-strong); }
.career-submit:focus-visible { outline: 3px solid var(--green-strong); outline-offset: 3px; }
.career-submit:disabled { cursor: wait; opacity: 0.65; }
.career-form .form-status { color: var(--green-strong); }

@media (max-width: 900px) {
  body[data-page='careers'] .careers-interest { grid-template-columns: 1fr; }
  body[data-page='careers'] .careers-interest__intro { position: static; }
}
@media (max-width: 620px) {
  .career-form__grid { grid-template-columns: 1fr; }
  .career-form .field--wide { grid-column: auto; }
  .career-submit { width: 100%; }
}

/* Card surfaces are separated by colour, spacing and depth, without a drawn
   perimeter. Form controls and keyboard focus indicators keep their borders. */
.pillar .p-list li,
.pillar .p-list li:first-child,
.cards .card,
.stack-list li,
.contact-aside,
.auth-panel,
.client-portal,
.hx-stack__card,
.hw__row,
#process .sx-step,
#faq .sx-faq__item,
.pr-blob,
.pr-grid .pr-blob,
.pr-blob--glow.sx-plan--featured {
  border: 0;
}

.cards .card:hover,
.hw__row:hover,
#faq .sx-faq__item:hover,
#faq .sx-faq__item[open] {
  border-color: transparent;
}

/* Editorial accordions. Questions are separated by rules and whitespace,
   with no translucent tile, rounded box or hover fill. */
#faq .sx-faq__list,
.hq__grid .sx-faq__list { gap: 0; }
#faq .sx-faq__item,
.hq__grid .sx-faq__item {
  padding-inline: 0;
  border: 0;
  border-top: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: none;
}
#faq .sx-faq__item:last-child,
.hq__grid .sx-faq__item:last-child { border-bottom: 0; }
#faq .sx-faq__item:hover,
#faq .sx-faq__item[open],
#faq .sx-faq__item:target,
.hq__grid .sx-faq__item:hover,
.hq__grid .sx-faq__item[open] { background: transparent; }

/* Whitespace separates editorial content; controls keep their own affordance. */
.dotted-line,
.hero .bottom-wrap.dotted-line { background-image: none; }
.modal-menu .bottom-menu li a,
.modal-menu .bottom-menu li button,
footer .inner-wrap .info--cols > li,
footer .inner-wrap .info--cols > li:last-child,
.legal-doc .legal-updated,
body[data-page='careers'] .notice-block,
.review-aside__note,
.pr-grid .pr-blob .sx-plan__list,
.pr-svc__row,
.pr-svc__head,
.pr-footnote,
.pr-more__link,
.pr-pick__results,
.pr-pick__opt,
.fq .sx-faq__item {
  border: 0;
}
.modal-menu .bottom-menu { gap: 4px; }
header.site-header.menu-open .hamburger .line { background: var(--deep); }
header.site-header.menu-open .logo .logo-light { display: block; }
header.site-header.menu-open .logo .logo-dark { display: none; }
.pr-svc { row-gap: 32px; }
.floating-scroll-menu button { min-height: 44px; }
.career-submit { min-width: 0; min-height: 48px; gap: 12px; padding: 10px 16px; border-radius: 0; background: var(--leaf); color: var(--button-ink); font-weight: 400; }

@media (max-width: 479px) {
  footer .top-wrap { flex-direction: column; align-items: flex-start; }
  footer .top-wrap .button-frame { flex: none; width: fit-content; }
}

/* Mobile menu: the pages behind the desktop dropdowns, as a quiet second list. */
.modal-menu .menu-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin-top: 20px; }
.modal-menu .menu-more a { display: flex; align-items: center; min-height: 44px; }
.modal-menu .menu-more a span { opacity: 0.86; }
.modal-menu .menu-more a[aria-current='page'] span { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* ── Compact cards ─────────────────────────────────────────────────────────
   One pass over every card family: narrower grids, less padding and shorter
   media, so a card is no taller than its content needs. Touch targets stay
   at 44px or more and body copy stays at 15px or more. */

/* Editorial text cards (About, Capabilities, Products, Insights, Blog). */
.cards { gap: 16px 32px; max-width: 1160px; }
.cards .card { padding: 20px 0 24px; }
.card .status { margin-bottom: 14px; }
.card .c-title { margin-bottom: 12px; font-size: clamp(26px, 2.6vw, 40px); }
.cards .card > p:last-child { max-width: 46ch; }

/* Audience cards on the homepage. */
.aud__grid { max-width: 1180px; gap: var(--space-7) var(--space-6); }
.aud__card { gap: var(--space-3); padding: var(--space-4) 0; }
.aud__media { aspect-ratio: 16 / 9; }
.aud__tag { padding-top: var(--space-3); }

/* Process steps. */
#process .sx-steps__list { max-width: 1180px; margin-inline: auto; }
#process .sx-step { padding: var(--space-5) var(--space-5) var(--space-6); }
#process .sx-step::before { margin-bottom: var(--space-4); }

/* Nine header items need the room back on a laptop: a narrower logo column,
   tighter gaps and a slightly smaller label, so Sign in never clips. */
@media (min-width: 1024px) and (max-width: 1320px) {
  header .top-wrap .menu-wrap {
    grid-template-columns: minmax(64px, 6vw) repeat(9, minmax(max-content, 1fr));
    column-gap: clamp(10px, 1.1vw, 16px);
  }
  header .header-nav-label { font-size: 14px; }
}

/* Reference study, October 2026: inset navigation, readable groups and a
   shared content measure. */
header.site-header { padding: 16px 28px 0; }
header.site-header .top-wrap,
header.site-header.is-scrolled:not(.menu-open) .top-wrap {
  max-width: 1280px;
  min-height: 76px;
  padding: 10px 28px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--leaf);
}
/* Dark ink on the leaf card: 4.9:1, where white would be 3.2:1. */
header.site-header .header-nav-link,
header.site-header .header-nav-label { color: var(--button-ink); }
header.site-header .hamburger .line { background: var(--button-ink); }
header.site-header .top-wrap .menu-wrap {
  display: flex;
  gap: clamp(14px, 1.5vw, 24px);
  align-items: center;
}
header.site-header .top-wrap .menu-wrap .menu-item-logo { margin-right: auto; }
header.site-header .logo img { width: 28px; height: 44px; object-fit: contain; }
header.site-header .header-nav-label { font-size: 15px; text-transform: none; }
header.site-header .header-nav-link { min-height: 44px; display: flex; align-items: center; }
header.site-header .menu-segment--auth { order: 1; }
header.site-header .menu-segment--cta { order: 2; }
header.site-header .menu-segment--cta > .header-nav-link {
  padding: 0 18px;
  border-radius: var(--r-sm);
  background: var(--white);
}
header.site-header .menu-segment--cta .header-nav-label { color: var(--deep); }
header.site-header .header-submenu { padding: 12px; gap: 0; border-radius: var(--r-md); }
header.site-header .header-submenu .header-nav-link { padding: 10px 12px; border-radius: 0; }
header.site-header .header-submenu .header-nav-link:hover,
header.site-header .header-submenu .header-nav-link:focus-visible { background: var(--sys-panel-ink); }
header.site-header .header-nav-link:focus-visible { outline: 2px solid var(--button-ink); outline-offset: 4px; }
header.site-header .header-submenu .header-nav-link:focus-visible { outline-color: var(--deep); }
header.site-header.menu-open .hamburger .line { background: var(--button-ink); }
header.site-header.menu-open .logo .logo-light { display: block; }
header.site-header.menu-open .logo .logo-dark { display: none; }

.sx__inner, .hx__inner { max-width: 1200px; }
body[data-page='home'] .sx { padding-block: clamp(56px, 7vw, 100px); }
body[data-page='home'] .sx__title { text-transform: none; text-wrap: balance; line-height: 1.06; }
body[data-page='home'] :is(#work, #pricing) .sx__head { margin-inline: auto; text-align: center; align-items: center; }
body[data-page='home'] :is(#work, #pricing) .sx__lede { max-width: 52ch; }
body[data-page='home'] .hw__site-link { border-radius: 0; overflow: hidden; }
body[data-page='home'] #built-in-africa .sx-steps__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
body[data-page='home'] #built-in-africa .sx-step {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid rgba(246, 245, 243, .2);
  border-radius: 0;
  background: var(--sand);
  color: #10281e;
}
body[data-page='home'] #built-in-africa .sx-step:nth-child(2) { background: var(--sky); }
body[data-page='home'] #built-in-africa .sx-step:nth-child(3) { background: var(--aqua); }
body[data-page='home'] #built-in-africa .sx-step:nth-child(4) { background: var(--sun); }
body[data-page='home'] #built-in-africa .sx-step__title { color: inherit; }
body[data-page='home'] #built-in-africa .sx-step__body { color: inherit; max-width: 40ch; }
body[data-page='home'] #built-in-africa .sx-step::before { position: static; display: block; margin-bottom: 18px; color: inherit; }
body[data-page='home'] #built-in-africa .sx-step::after { display: none; }
body[data-page='home'] #process .sx-steps__list { gap: 16px; }
body[data-page='home'] #process .sx-step { background: var(--step-bg); border-radius: 0; padding: 28px; }
body[data-page='home'] .aud__grid { gap: 24px; }
body[data-page='home'] .aud__media { border-radius: 0; overflow: hidden; }
body[data-page='home'] #faq .sx__inner { max-width: 1000px; }
body[data-page='home'] #faq .sx-faq__item summary { padding-block: 24px; }
body[data-page='home'] #start .sx__inner { padding: clamp(24px, 5vw, 64px); background: var(--deep); border-radius: 0; }

@media (max-width: 1100px) and (min-width: 1024px) {
  header.site-header { padding-inline: 12px; }
  header.site-header .top-wrap { padding-inline: 16px; }
  header.site-header .top-wrap .menu-wrap { gap: 12px; }
  header.site-header .header-nav-label { font-size: 13px; }
}
@media (max-width: 1023px) {
  header.site-header { padding: 12px; }
  header.site-header .top-wrap,
  header.site-header.is-scrolled:not(.menu-open) .top-wrap { min-height: 64px; padding: 6px 18px; border-radius: var(--r-md); }
  header.site-header .top-wrap .menu-wrap { flex: 1; }
}
@media (max-width: 767px) {
  body[data-page='home'] #built-in-africa .sx-steps__list { grid-template-columns: 1fr; }
  body[data-page='home'] #start .sx__inner { border-radius: 0; }
}

/* Empty media slots stay visible and ready for replacement content. */
.media-placeholder { display: block; width: 100%; height: 100%; min-height: 160px; background: rgba(71, 156, 115, .12); }
.sections .section .lottie-container .media-placeholder { height: auto; aspect-ratio: 3 / 2; }

/* ── Carbon surfaces, homepage ─────────────────────────────────────────────
   Black carries the hero, the product panels, the "one studio" section and
   the contact card. Leaf green stays on the studio intro, the audience
   section and every primary button. */
body[data-page='home'] .hero { background: var(--carbon); }
body[data-page='home'] .hero::after { background: rgba(11, 12, 11, .8); }
body[data-page='home'] .sections .section .lottie-container { background: var(--carbon); }
body[data-page='home'] ._02 .inner-wrap { background: var(--carbon); }
body[data-page='home'] #start .sx__inner { background: var(--carbon); }
/* Type on the carbon contact card: white, with the eyebrow in leaf. */
body[data-page='home'] #start .hc__intro, body[data-page='home'] #start .sx__head :is(.sx__title, .sx__lede, .sx__lede a, p, a) { color: var(--white); }
body[data-page='home'] #start .sx__head .sx__eyebrow { color: var(--leaf); }