/* ==========================================================================
   SMS — System Management Services Sdn. Bhd.
   Shared stylesheet — design tokens + component styles
   ========================================================================== */

:root {
  --navy: #0F1B4C;
  --navy-2: #16245F;
  --navy-deep: #0A1238;
  --green: #1E8C3A;
  --green-2: #25A546;
  --paper: #F6F3EB;
  --paper-2: #EDE8DA;
  --ink: #0B1020;
  --fog: #E6E8EE;
  --line: rgba(11,16,32,.10);
  --line-on-navy: rgba(255,255,255,.14);
  --muted: #5C6478;
  --muted-on-navy: #B7BDD2;

  --pad: 96px;       /* section vertical pad */
  --gutter: 80px;    /* horizontal gutter desktop */
  --maxw: 1320px;

  --display: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --body: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
[data-density="compact"]  { --pad: 72px; }
[data-density="spacious"] { --pad: 128px; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--green); color: white; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 1100px){ .wrap { padding: 0 40px; } }
@media (max-width: 600px){ .wrap { padding: 0 20px; } :root { --pad: 64px; --gutter: 20px; } }

/* Type system */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.eyebrow.on-navy { color: var(--muted-on-navy); }
.display-1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(48px, 7.6vw, 116px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
.display-2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(40px, 5.4vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
.display-3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.lede {
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.5;
  color: #2A3142;
  text-wrap: pretty;
}
.lede.on-navy { color: var(--muted-on-navy); }
p { line-height: 1.55; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn .arr { font-family: var(--mono); font-weight: 500; }
.btn-primary { background: var(--green); color: white; }
.btn-primary:hover { background: var(--green-2); }
.btn-primary:disabled { opacity: .7; cursor: default; transform: none; }
.btn-secondary { background: transparent; color: var(--ink); border-color: rgba(11,16,32,.25); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-secondary.on-navy { color: white; border-color: rgba(255,255,255,.4); }
.btn-secondary.on-navy:hover { border-color: white; background: rgba(255,255,255,.05); }
.btn-ghost { background: transparent; padding: 0; height: auto; }

/* Surfaces */
.surface-navy { background: var(--navy); color: white; }
.surface-navy-deep { background: var(--navy-deep); color: white; }
.surface-paper-2 { background: var(--paper-2); }
.surface-fog { background: var(--fog); }

section { padding: var(--pad) 0; }

/* Grid utilities */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }
@media (max-width: 900px){
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-12 { grid-template-columns: repeat(6, 1fr); }
}
/* Mobile (< 768px): every grid-12 column (counters, footer, contact layout, etc.)
   stacks to full width, regardless of whatever "span N" was set for desktop —
   matching by specific span values was missing several (span 2, 3, 6...) and
   left those columns rendering at partial width instead of stretching full-bleed. */
@media (max-width: 767px){
  .grid-12 { grid-template-columns: 1fr; }
  .grid-12 > * { grid-column: 1 / -1 !important; }
}

/* Header */
.nav-root {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,243,235,.85);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 32px; }
.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-link {
  padding: 10px 14px; border-radius: 999px;
  font-size: 14px; color: #2A3142;
  transition: background .15s ease, color .15s ease;
  cursor: pointer;
  background: transparent; border: 0;
  font-family: var(--body);
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-link:hover { background: rgba(11,16,32,.06); color: var(--ink); }
.nav-link.active { background: var(--ink); color: white; }
.nav-link .caret { font-size: 10px; opacity: .6; }
.nav-end { display: flex; align-items: center; gap: 8px; }
/* Shown only inside the mobile drawer (see the mobile nav block below). */
.nav-drawer-cta { display: none; }
.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; cursor: pointer; align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }

/* Wordmark */
.wordmark { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--display); font-weight: 800; letter-spacing: -0.04em; cursor: pointer; }
.wordmark img { height: 48px; width: auto; display: block; }
.wordmark.on-navy img { filter: brightness(0) invert(1); height: 56px; }

/* Dropdown */
.dropdown {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(-6px);
  background: white; color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 30px 60px -20px rgba(15,27,76,.25), 0 12px 24px -16px rgba(15,27,76,.18);
  min-width: 520px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.nav-link-wrap { position: relative; }
.nav-link-wrap:hover .dropdown,
.dropdown.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dropdown-item { padding: 12px 14px; border-radius: 12px; cursor: pointer; display: flex; align-items: baseline; gap: 14px; }
.dropdown-item:hover { background: var(--paper-2); }
.dropdown-item .num { font-family: var(--mono); font-size: 11px; color: var(--muted); min-width: 26px; }
.dropdown-item .label { font-size: 14px; font-weight: 500; }

/* Stripe placeholder */
.stripes {
  background-image: repeating-linear-gradient(135deg, rgba(11,16,32,.06) 0 8px, transparent 8px 16px);
  border: 1px dashed rgba(11,16,32,.2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  border-radius: 8px;
  padding: 12px;
}
.stripes.on-navy {
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 8px, transparent 8px 16px);
  border-color: rgba(255,255,255,.2);
  color: var(--muted-on-navy);
}

/* Page transitions */
.page-enter { animation: pageIn .35s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Pill / tag */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(30,140,58,.10);
  color: var(--green);
  border: 1px solid rgba(30,140,58,.22);
}
.tag.on-navy { background: rgba(37,165,70,.16); color: #6FE08C; border-color: rgba(37,165,70,.4); }
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Footer reset for hr */
hr.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
hr.rule.on-navy { border-top-color: var(--line-on-navy); }

/* Service cards (used multiple places) */
.svc-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px;
  display: flex; flex-direction: column;
  min-height: 320px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
}
.svc-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -24px rgba(15,27,76,.25); border-color: rgba(15,27,76,.2); }
.svc-card .num { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .14em; }
.svc-card .title {
  font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1.05; letter-spacing: -.02em;
  margin: 18px 0 10px; text-wrap: balance;
}
.svc-card .desc { color: #3A4258; font-size: 15px; line-height: 1.55; flex: 1; }
.svc-card .more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 13px; color: var(--green); font-weight: 500; }
.svc-card .more .arr { font-family: var(--mono); }
.svc-card.dark { background: var(--navy); color: white; border-color: var(--line-on-navy); }
.svc-card.dark .num { color: var(--muted-on-navy); }
.svc-card.dark .desc { color: var(--muted-on-navy); }
.svc-card.dark .more { color: var(--green-2); }

/* Accordion */
.acc-row { border-top: 1px solid var(--line); }
.acc-row:last-child { border-bottom: 1px solid var(--line); }
.acc-btn {
  width: 100%;
  background: transparent; border: 0;
  padding: 24px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  cursor: pointer; text-align: left;
  font-family: var(--display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
}
.acc-btn:hover { color: var(--green); }
.acc-icon { font-family: var(--mono); font-size: 18px; color: var(--muted); transition: transform .2s; flex-shrink: 0; }
.acc-row.open .acc-icon { transform: rotate(45deg); color: var(--green); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc-row.open .acc-body { max-height: 600px; }
.acc-body-inner { padding: 0 0 28px 0; max-width: 720px; color: #3A4258; line-height: 1.6; font-size: 16px; }

/* Counter card */
.counter-card {
  border-top: 1px solid var(--line-on-navy);
  padding-top: 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.counter-num {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(56px, 7vw, 110px);
  line-height: 0.92;
  letter-spacing: -.04em;
  font-feature-settings: "tnum" 1, "ss01" 1;
}
.counter-num .plus { color: var(--green-2); margin-left: 4px; }
.counter-label { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-on-navy); }

/* Marquee partner bar */
.partners {
  display: flex; flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.partner-cell {
  flex: 1 1 calc(100%/7);
  min-width: 140px;
  padding: 28px 16px;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  color: #2A3142;
  letter-spacing: -.01em;
  transition: background .15s, color .15s;
  cursor: default;
}
.partner-cell:last-child { border-right: 0; }
.partner-cell:hover { background: white; color: var(--ink); }
@media (max-width: 900px){ .partner-cell { flex: 1 1 50%; border-bottom: 1px solid var(--line); } }

/* Form */
.field {
  display: flex; flex-direction: column; gap: 6px;
}
.field label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  font: 400 15px/1.4 var(--body);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(30,140,58,.12);
}
.field.on-navy label { color: var(--muted-on-navy); }
.field.on-navy input, .field.on-navy textarea, .field.on-navy select {
  background: rgba(255,255,255,.06); border-color: var(--line-on-navy); color: white;
}
.field.on-navy input::placeholder, .field.on-navy textarea::placeholder { color: var(--muted-on-navy); }
.form-success {
  display: none; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 20px 0;
}
.form-success .eyebrow { color: var(--green); }

/* Article card */
.article-card {
  background: white; border-radius: 22px; border: 1px solid var(--line); overflow: hidden;
  display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s;
  cursor: pointer;
}
.article-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -24px rgba(15,27,76,.2); }
.article-card .thumb { aspect-ratio: 16/10; }
.article-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-card .body { padding: 22px 24px 26px; }
.article-card .meta { display: flex; gap: 12px; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.article-card h3 { font-family: var(--display); font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 10px; text-wrap: balance; }
.article-card p { color: #3A4258; font-size: 14px; line-height: 1.55; margin: 0; }

/* Article body content (individual post page) */
.article-content { max-width: 720px; font-size: 17px; line-height: 1.7; color: #2A3142; }
.article-content h2 { font-family: var(--display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.02em; margin: 44px 0 16px; color: var(--navy); }
.article-content h3 { font-family: var(--display); font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; letter-spacing: -.015em; margin: 32px 0 12px; color: var(--navy); }
.article-content p { margin: 0 0 20px; }
.article-content ul, .article-content ol { margin: 0 0 20px; padding-left: 22px; }
.article-content li { margin-bottom: 8px; }
.article-content a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.article-content strong { color: var(--navy); }
.article-content blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--green); color: var(--muted); font-style: italic; }

/* Numbered list block */
.ol-block { display: flex; flex-direction: column; gap: 0; }
.ol-block .row { display: grid; grid-template-columns: 80px 1fr auto; gap: 24px; align-items: baseline; padding: 28px 0; border-top: 1px solid var(--line); }
.ol-block .row:last-child { border-bottom: 1px solid var(--line); }
/* Cloud Partners only. Its first column carries "01 · Category" rather than a
   bare number, and a single long word such as "Cybersecurity" is wider than
   the 80px column above — with nowhere to wrap it spilled into the partner
   name beside it. A fixed width keeps the names aligned down the page (each
   row is its own grid, so a content-sized column would make them ragged), and
   overflow-wrap catches anything longer still. Declared before the 900px
   media query below so the mobile stacking continues to win. */
/* The third column is a proportion of the row rather than "auto". Sized to
   its contents, every row's description column started at a different place —
   all of them ended flush right, so short descriptions began further in than
   long ones and the column read as ragged, or right-aligned. A proportional
   track is the same width on every row, so the descriptions share one left
   edge while still scaling with the window. */
.partner-list .row { grid-template-columns: 170px 1fr 1.2fr; gap: 32px; }
.partner-list .num { overflow-wrap: anywhere; }
.partner-list .desc { text-align: left; max-width: none; }
.ol-block .num { font-family: var(--mono); font-size: 13px; color: var(--muted); letter-spacing: .12em; }
.ol-block .title { font-family: var(--display); font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: -.02em; }
.ol-block .desc { color: #3A4258; font-size: 15px; line-height: 1.55; max-width: 520px; }
.ol-block .row:hover .title { color: var(--green); }
/* Marks a list title that links out (partner websites). Inherits the title's
   colour — including the green row hover — so the only cue is the smaller,
   lighter-weight glyph. */
.ol-block .title .ext-arrow { font-size: .72em; font-weight: 400; margin-left: .3em; vertical-align: .12em; }
@media (max-width: 900px){
  .ol-block .row { grid-template-columns: 1fr; gap: 8px; }
  .ol-block .desc { width: auto !important; max-width: none; }
}

/* Hero variants */
.hero-shell { position: relative; padding: clamp(80px, 12vw, 168px) 0 clamp(64px, 8vw, 120px); overflow: hidden; }
.hero-shell.dark { background: var(--navy); color: white; }
.hero-shell .grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 80%);
}
.hero-shell.light .grid-bg {
  background-image:
    linear-gradient(rgba(11,16,32,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,16,32,.05) 1px, transparent 1px);
}
.hero-shell .blob {
  position: absolute; right: -10%; top: -10%;
  width: 60vmax; height: 60vmax;
  background: radial-gradient(closest-side, rgba(30,140,58,.30), transparent 70%);
  pointer-events: none; filter: blur(10px);
}

/* Mobile nav — hamburger up to 899px. The full horizontal nav plus the
   "Schedule a meeting" button needs ~880px; between 768 and 899 the button
   was pushed past the right edge and every page scrolled sideways. */
@media (max-width: 899px){
  .nav-toggle { display: inline-flex; }
  .nav-end { display: none; }
  /* Height is an explicit viewport-relative calc, not "bottom: 0", because .nav-root's
     backdrop-filter makes it the containing block for this fixed-position element —
     "bottom: 0" would resolve against .nav-root's own (short) box, not the real viewport,
     collapsing the open menu down to a sliver instead of covering the screen. */
  .nav-links { position: fixed; top: 72px; left: 0; right: 0; height: calc(100vh - 72px); height: calc(100dvh - 72px);
    background: var(--paper);
    flex-direction: column; align-items: stretch; gap: 4px; padding: 16px 20px; overflow-y: auto;
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
  .nav-links.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .nav-link { width: 100%; }
  .nav-link-wrap { width: 100%; }
  .nav-drawer-cta { display: inline-flex; justify-content: center; margin-top: 16px; }
  /* 44px drawer rows. These live here rather than in the 767px touch-target
     block at the end of the file so tablets get them too — the drawer is in
     use all the way up to 899px. Scoped to .nav-links, so the footer's
     compact .nav-link list is untouched. .nav-link is already a centred
     inline-flex box; .dropdown-item needs align-items overridden because its
     baseline alignment would pin the text to the top of the taller row. */
  .nav-links .nav-link { min-height: 44px; }
  .nav-links .dropdown-item { min-height: 44px; align-items: center; }
  /* Inline, full-width list inside the menu. The hover and open states repeat
     the reset because ".nav-link-wrap:hover .dropdown" outranks a bare
     ".dropdown", and phones keep :hover after a tap. Without this, the desktop
     translateX(-50%) slid the panel half its width off the left edge. */
  .dropdown,
  .nav-link-wrap:hover .dropdown,
  .nav-link-wrap.open .dropdown {
    position: static; transform: none; opacity: 1; pointer-events: auto;
    box-shadow: none; border: none; background: transparent; border-radius: 0;
    min-width: 0; grid-template-columns: 1fr; padding: 4px 0 4px 14px;
  }
  .dropdown, .nav-link-wrap:hover .dropdown { display: none; }
  .nav-link-wrap.open .dropdown, .nav-link-wrap.open:hover .dropdown { display: grid; }
}

/* Form grid — 2 cols desktop, 1 col mobile */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 767px) { .form-grid { grid-template-columns: 1fr; } }

/* Homepage hero (Option C): cream, with an optional photo shown raw on the
   right. The scrim holds full cream strength across the copy column, then
   fades to nothing by 82% so the photo is untouched where the people are. */
.hero-shell.has-image { background-size: cover; background-position: right center; background-repeat: no-repeat; }
.hero-shell .hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  /* Eased rather than linear: a flat stop followed by a straight ramp reads as a hard
     vertical edge wherever something dark in the photo meets it. */
  background: linear-gradient(90deg, var(--paper) 0%, var(--paper) 46%,
    rgba(246,243,235,.9) 56%, rgba(246,243,235,.6) 66%,
    rgba(246,243,235,.25) 75%, rgba(246,243,235,0) 82%);
}
@media (max-width: 767px) {
  /* Text spans the full width on phones, so a side fade would leave it over the photo. */
  .hero-shell .hero-scrim { background: rgba(246,243,235,.9); }
}

/* EDR / XDR / MDR comparison (Cybersecurity page). A real table on desktop;
   under 1040px the same content is shown as stacked blocks, one per product,
   inside the same card. Styled to match the capability cards above it. */
.compare-card { background: white; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }

.compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.compare-table th, .compare-table td {
  padding: 20px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line);
}
.compare-table tbody tr:last-child > * { border-bottom: none; }  /* tbody only: the header row is also a last-child */
.compare-table tr > * + * { border-left: 1px solid var(--line); }
.compare-table thead th { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--navy); }
.compare-table tbody th { font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--navy); width: 22%; }
.compare-table td { color: #3A4258; font-size: 14px; line-height: 1.55; }

.compare-stack { display: none; }
.compare-block { padding: 22px 24px; }
.compare-block + .compare-block { border-top: 1px solid var(--line); }
.compare-block h3 { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--navy); margin: 0; }
.compare-block dl { margin: 0; }
.compare-block dt { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--green); text-transform: uppercase; margin-top: 16px; }
.compare-block dd { margin: 6px 0 0; color: #3A4258; font-size: 14px; line-height: 1.55; }

@media (max-width: 1039px) {
  .compare-table { display: none; }
  .compare-stack { display: block; }
}

/* ---------- Meeting booking (calendar + slots) ---------- */
.cal { margin-top: 18px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.cal-title { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--navy); }
.cal-nav {
  width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line);
  background: white; color: var(--navy); cursor: pointer; font-size: 15px; line-height: 1;
}
.cal-nav:hover:not(:disabled) { border-color: var(--navy); }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.cal-dow > div { text-align: center; padding: 4px 0; }
.cal-day {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 10px; background: white;
  font-size: 14px; color: var(--navy); cursor: pointer; font-family: inherit;
}
.cal-day:hover:not(:disabled) { border-color: var(--green); }
.cal-day:disabled { background: var(--paper-2); color: var(--muted); opacity: .55; cursor: default; border-color: transparent; }
.cal-day.selected { background: var(--navy); color: white; border-color: var(--navy); }
.cal-day.empty { border: 0; background: none; cursor: default; }

.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 16px; }
.slot-btn {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: white;
  color: var(--navy); font-size: 14px; font-family: inherit; cursor: pointer; text-align: center;
}
.slot-btn:hover { border-color: var(--green); }
.slot-btn.selected { background: var(--green); border-color: var(--green); color: white; }
.slot-empty { color: var(--muted); font-size: 14px; margin-top: 14px; }
.booking-error { margin-top: 16px; color: #9A2A20; background: #FCEBEA; border-radius: 12px; padding: 12px 16px; font-size: 14px; }
@media (max-width: 600px) { .slot-grid { grid-template-columns: 1fr 1fr; } .slot-btn { padding: 12px 8px; font-size: 13px; min-height: 44px; } }

/* Booking confirmation — its own block, not .form-success (which is display:none
   by default and only revealed by the other form's script). */
.booking-confirmed { padding: 8px 0; }
.booking-confirmed[hidden] { display: none; }
.booking-confirmed .eyebrow { color: var(--green); }
.booking-confirmed h2 {
  font-family: var(--display); font-size: clamp(26px, 3vw, 36px); font-weight: 600;
  letter-spacing: -.02em; color: var(--navy); margin: 14px 0 0;
}
.booking-confirmed p { color: #2A3142; font-size: 17px; line-height: 1.7; margin: 16px 0 0; max-width: 560px; }
.booking-confirmed .when { color: var(--navy); font-weight: 600; }

/* ---------- Landing pages (/events/<slug>) ---------- */
.landing-poster { padding: 0; }
.landing-poster img { width: 100%; max-height: 480px; object-fit: cover; display: block; }
.landing-body { margin-top: 28px; font-size: 17px; line-height: 1.7; color: #2A3142; }
.landing-body h2 { font-family: var(--display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.02em; margin: 40px 0 14px; color: var(--navy); }
.landing-body h3 { font-family: var(--display); font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; margin: 30px 0 12px; color: var(--navy); }
.landing-body h4 { font-family: var(--display); font-size: 18px; font-weight: 600; margin: 24px 0 10px; color: var(--navy); }
.landing-body p { margin: 0 0 18px; }
.landing-body ul, .landing-body ol { margin: 0 0 18px; padding-left: 22px; }
.landing-body li { margin-bottom: 8px; }
.landing-body a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.landing-body strong { color: var(--navy); }
.landing-body blockquote { margin: 24px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--green); color: var(--muted); font-style: italic; }

/* ---------- Touch targets & form labels below 768px ----------
   44px is the Apple/Android minimum for anything tapped. Phones only —
   desktop sizing is untouched. */
@media (max-width: 767px) {
  /* Drawer menu rows are handled in the mobile nav block above, at 899px,
     so tablets get 44px rows as well. */

  /* Month navigation arrows: 38 → 44 */
  .cal-nav { width: 44px; height: 44px; }

  /* Calendar cells: 34×34 → 34×44. The square aspect-ratio has to go, since
     it is what ties the height to the narrow column width. Seven columns in
     the card leave only 277px at 375px, so 44px across is not reachable. */
  .cal-day { aspect-ratio: auto; min-height: 44px; }

  /* "All partners →" / "See full partner list →" sit at bare text height
     because .btn-ghost zeroes the button's padding and height. */
  .btn-ghost { min-height: 44px; }

  /* Form field labels: 11px → 13px. Decorative labels (.eyebrow,
     .counter-label, .cal-dow, .compare-block dt) stay at 11px by design. */
  .field label { font-size: 13px; letter-spacing: .1em; }
}

/* ---------- Support Commitment banner (service pages) ----------
   Text beside the "Full details" button on a desktop, stacked on a phone.
   Previously laid out inline on the element, which meant the two columns
   survived onto narrow screens: the button kept its width, the text column
   was squeezed to about 90px at 375px, and every line broke after one word. */
.support-banner {
  background: var(--paper-2);
  border-radius: 24px;
  padding: clamp(28px, 3vw, 44px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
}
@media (max-width: 767px) {
  .support-banner { grid-template-columns: 1fr; gap: 24px; }
  /* Button on its own line, sized to its text rather than stretched. */
  .support-banner .btn { justify-self: start; }
}