/* ============================================================
   at-site.css — the entire visual system
   ------------------------------------------------------------
   Elementor holds structure + text. Everything visual lives here.
   Colour roles:
     navy  = structure
     teal  = emphasis (label, key number, bullet dot, side bar, link)
     amber = numbers only
   ============================================================ */

:root {
  --n900:#0A1628; --n800:#14243D; --n700:#1E3A5F; --n600:#2A4E7A;
  --n500:#3E6BA8; --n400:#7FA8D4; --n200:#C7DCF0; --n100:#E4EEF8; --n50:#F2F7FC;

  --t900:#042F2E; --t800:#065F5B; --t700:#0B7C75; --t600:#0F9B91;
  --t500:#14B8A6; --t400:#2DD4BF; --t300:#5EEAD4; --t200:#99F6E4;
  --t100:#CCFBF1; --t50:#F0FDFA;

  --a700:#92400E; --a600:#B45309; --a500:#D97706; --a400:#F59E0B; --a100:#FEF3C7; --a50:#FFFBEB;

  --ink900:#0F172A; --ink800:#1E293B; --ink700:#334155; --ink600:#475569;
  --ink500:#64748B; --ink400:#94A3B8; --ink300:#CBD5E1; --ink200:#E2E8F0;
  --ink100:#F1F5F9; --ink50:#F8FAFC;

  --container:1140px;
  --pad-x:20px;
  --sec-y:88px;
  --sec-y-md:64px;
  --sec-y-sm:48px;
  --gap:20px;
  --gap-md:16px;
  --gap-sm:12px;
  --r:12px; --r-sm:8px; --r-lg:16px;
  --shadow:0 8px 24px rgba(15,23,42,.08);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   1 · Page frame
   ------------------------------------------------------------
   .at-band   lands on the Elementor SECTION   (css_classes)
   .at-cell   lands on the Elementor COLUMN    (css_classes)
   type and component classes land on WIDGETS   (_css_classes)
   ============================================================ */

.elementor-widget { box-sizing: border-box; }
.elementor-widget h1, .elementor-widget h2, .elementor-widget h3,
.elementor-widget h4, .elementor-widget p, .elementor-widget figure,
.elementor-widget dl, .elementor-widget dd, .elementor-widget blockquote,
.elementor-widget ul { margin: 0; padding: 0; }
.elementor-widget ul { list-style: none; }
.elementor-widget:not(:last-child) { margin-bottom: 0; }

/* --- band = one section --- */
.at-band { padding: var(--sec-y) var(--pad-x); }
.at-band--tint { background: var(--ink50); }
.at-band--teal { background: var(--t50); }
.at-band--navy { background: var(--n900); color: #fff; }
.at-band--navy h1, .at-band--navy h2, .at-band--navy h3, .at-band--navy h4 { color: #fff; }
.at-band--navy p  { color: var(--t200); }
.at-band--navy .elementor-heading em,
.at-band--navy .elementor-heading strong { color: var(--t300); font-style: normal; }

/* Elementor puts its own 10px column padding; the band owns the gutter */
.at-band .elementor-column { padding: 0; }
/* a band that is really a card list needs no vertical padding */
.at-band--flush { padding-top: 0; padding-bottom: 0; }

/* a case study reads as one block, so consecutive cases share a rule
   instead of each one carrying its own air */
.at-band__case { padding-top: 0; }
.at-band__case + .at-band__case { border-top: 1px solid var(--ink200); padding-top: var(--sec-y); }
@media (max-width:1024px) { .at-band__case + .at-band__case { padding-top: var(--sec-y-md); } }

/* --- cell = one column --- */
.at-cell > .elementor-widget-container { height: 100%; }
.at-cell.at-card { background: #fff; border: 1px solid var(--ink200); border-radius: var(--r);
  padding: 26px; display: flex; flex-direction: column; gap: 12px; height: 100%; }
.at-cell.at-card--flat  { border-color: transparent; box-shadow: var(--shadow); }
.at-cell.at-card--navy  { background: var(--n50); border-color: var(--n200); }
.at-cell.at-card--teal  { background: var(--t50); border-color: var(--t100); }
.at-cell.at-card--amber { border-top: 3px solid var(--a500); }
.at-cell.at-card--nav   { border-top: 3px solid var(--n700); }
.at-cell.at-card--tealtop { border-top: 3px solid var(--t600); }
.at-cell.at-card__body { font-size: 13.5px; line-height: 1.85; color: var(--ink600); }
.at-cell.at-card__foot { border-top: 1px solid var(--ink200); padding-top: 10px; margin-top: auto; }

/* a split: both sides share the row, neither is favoured */
.at-cell.at-split--even { flex: 1 1 0; }
.at-cell.at-split--wide-right { flex: 1.6 1 0; }

/* timeline: the rail and the dot are drawn on the CELL, not on a
   wrapper, so each entry is one editable column */
.at-cell--tl {
  position: relative; border-right: 2px solid var(--t100); padding-right: 22px;
}
.at-cell--tl::before {
  content: ''; position: absolute; right: -8px; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--t700); border: 3px solid var(--t50);
}
.at-cell--tl:not(:last-child) { margin-bottom: 26px; }

/* steps: number column then text column */
.at-cell--step { position: relative; padding-right: 18px; }
.at-cell--step:not(:last-child) { margin-bottom: 26px; }
@media (max-width:767px) {
  .at-cell--tl { border-right: 0; border-left: 2px solid var(--t100); padding: 0 0 0 18px; }
  .at-cell--tl::before { right: auto; left: -8px; }
  .at-cell--tl:not(:last-child), .at-cell--step:not(:last-child) { margin-bottom: 20px; }
}

/* contact row: a square icon cell beside a text cell */
.at-cell--crowic { display: flex; align-items: flex-start; }
.at-cell--crowic .elementor-widget { flex: 0 0 36px; }
.at-cell--crowic .elementor-widget p { margin: 0; }

@media (max-width:1024px) {
  .at-band { padding: var(--sec-y-md) var(--pad-x); }
  :root { --gap: 16px; }
}
@media (max-width:767px) {
  .at-band { padding: var(--sec-y-sm) 16px; }
  :root { --gap: 12px; --pad-x: 16px; }
  .at-cell.at-card { padding: 20px; }
}

/* Elementor must not fight us */
.at-band .elementor-widget,
.at-band .elementor-widget-container { width: 100%; }
.at-band .elementor-widget:not(:last-child) { margin-bottom: 0; }
.at-band h1, .at-band h2, .at-band h3, .at-band h4 { margin: 0; }
.at-band p { margin: 0; }

/* ============================================================
   2 · Type
   ============================================================ */

.at-eyebrow {
  display: block; font-size: 12.5px; font-weight: 700; line-height: 1.6;
  color: var(--t700); margin-bottom: 8px;
}
.at-eyebrow--light { color: var(--t300); }
.at-eyebrow--muted { color: var(--ink500); }

.at-h1 { font-size: 48px; line-height: 1.38; font-weight: 800; color: var(--ink900); }
.at-h1 strong, .at-h1 em { color: var(--t700); font-style: normal; }
.at-band--navy .at-h1 { color: #fff; }
.at-band--navy .at-h1 em { color: var(--t300); }

.at-h2 { font-size: 34px; line-height: 1.42; font-weight: 800; color: var(--ink900); }
.at-h3 { font-size: 19px; line-height: 1.58; font-weight: 800; color: var(--ink900); }
.at-h4 { font-size: 16px; line-height: 1.6;  font-weight: 800; color: var(--ink900); }

.at-lede { font-size: 16.5px; line-height: 1.95; color: var(--ink600); max-width: 78ch; }
.at-body { font-size: 15px;   line-height: 1.9;  color: var(--ink600); }
.at-sm   { font-size: 13.5px; line-height: 1.85; color: var(--ink600); }
.at-xs   { font-size: 11.5px; line-height: 1.75; color: var(--ink500); }
.at-num  { font-size: 30px;   line-height: 1.25; font-weight: 800; color: var(--t700); }
.at-num--amber { color: var(--a600); }
.at-num--light { color: var(--t300); }
.at-center { text-align: center; }

@media (max-width:1024px) { .at-h1 { font-size: 38px; } .at-h2 { font-size: 30px; } .at-num { font-size: 26px; } }
@media (max-width:767px) {
  .at-h1 { font-size: 29px; line-height: 1.45; }
  .at-h2 { font-size: 25px; }
  .at-h3 { font-size: 18px; }
  .at-lede { font-size: 14.5px; }
  .at-body { font-size: 14.5px; }
  .at-num { font-size: 24px; }
}

/* ============================================================
   3 · Layout
   ------------------------------------------------------------
   There are no grid classes any more. A grid is a section with N
   real Elementor columns, and Elementor's own flex does the rest.
   We only control the gap between columns and the width of a cell.
   ============================================================ */

/* gap comes from the section, so override Elementor's "no" */
.at-band > .elementor-container { gap: var(--gap); }
.at-band > .elementor-container > .elementor-column { min-width: 0; }

/* stacked flow inside a single column */
.at-cell.at-stack, .at-cell.at-flow { display: flex; flex-direction: column; gap: var(--gap); }

/* a column that should breathe more, e.g. the hero text side */
.at-cell.at-lead { display: flex; flex-direction: column; gap: 18px; }
.at-cell.at-tight { display: flex; flex-direction: column; gap: 8px; }

/* side by side, full width, the two sides of a split */
.at-cell.at-split { display: flex; flex-direction: column; gap: var(--gap); }

/* one cell kept narrow while the other grows - the proof / strip rows */
.at-band .elementor-column.at-cell--shrink { max-width: 190px; flex: 0 0 auto; }
@media (max-width:767px) { .at-band .elementor-column.at-cell--shrink { max-width: none; flex: 1 1 100%; } }

/* ============================================================
   4 · Card body flow
   ------------------------------------------------------------
   The card box itself is on the column (see .at-cell.at-card).
   This is only the rhythm of the widgets inside it.
   ============================================================ */

.at-cell.at-card > .elementor-widget-container { display: flex; flex-direction: column; gap: 12px; }
.at-cell.at-card .elementor-heading { margin: 0; }


/* ============================================================
   5 · Tag / chip / pill
   ------------------------------------------------------------
   A tag is a single text widget. Multiple tags in one widget get
   the at-tags class on that widget so the gap is applied once.
   ============================================================ */

.at-tag {
  display: inline-block; font-size: 11.5px; font-weight: 700; line-height: 1.7;
  padding: 4px 11px; border-radius: 100px; background: var(--t50);
  border: 1px solid var(--t100); color: var(--t800);
}
.at-tag--muted { background: #fff; border-color: var(--ink300); color: var(--ink600); }
.at-tag--amber { background: var(--a50); border-color: var(--a100); color: var(--a700); }
.at-tag--navy  { background: var(--n700); border-color: var(--n700); color: #fff; }
.at-tag + .at-tag { margin-inline-start: 6px; }
.at-tags .at-tag { margin-bottom: 4px; }

/* ============================================================
   6 · Bullets
   ============================================================ */

.at-list li {
  position: relative; padding-right: 18px; margin-bottom: 7px;
  font-size: 13.5px; line-height: 1.85; color: var(--ink600);
}
.at-list li:last-child { margin-bottom: 0; }
.at-list li::before {
  content: ''; position: absolute; right: 0; top: 11px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--t700);
}
.at-list--lg li { font-size: 14.5px; margin-bottom: 9px; }
.at-list--light li { color: var(--t200); }
.at-list--light li::before { background: var(--t300); }

/* ============================================================
   7 · Proof bar  — one column per number
   ============================================================ */

.at-proof-cell {
  background: var(--ink50); border: 1px solid var(--ink200); border-radius: var(--r);
  padding: 20px 16px; text-align: center; height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.at-cell--tight { padding: 0; }
.at-proof--navy .at-proof-cell { background: var(--n800); border-color: var(--n800); }
.at-proof--navy .at-num { color: var(--t300); }
.at-proof--navy .at-sm  { color: var(--n200); }

/* ============================================================
   8 · Callout
   ============================================================ */

.at-callout {
  background: var(--a50); border: 1px solid var(--a100); border-radius: 10px;
  padding: 20px 24px; font-size: 13.5px; line-height: 1.9; color: var(--ink700);
}
.at-callout strong { color: var(--n700); }
.at-callout--white { background: #fff; border-color: var(--ink200); }

/* ============================================================
   9 · Buttons
   ============================================================ */

.at-btnrow .elementor-button { margin-inline-end: 8px; margin-bottom: 8px; }
.at-btn .elementor-button,
a.at-btn {
  font-size: 14px; font-weight: 700; border-radius: 8px; padding: 13px 24px;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.at-btn--primary .elementor-button, a.at-btn--primary {
  background: var(--n700); color: #fff !important;
}
.at-btn--primary .elementor-button:hover, a.at-btn--primary:hover { background: var(--n800); }
.at-btn--ghost .elementor-button, a.at-btn--ghost {
  background: transparent; color: var(--n700) !important; border: 1.5px solid var(--n300);
}
.at-btn--ghost .elementor-button:hover, a.at-btn--ghost:hover { border-color: var(--n700); }
.at-btn--white .elementor-button, a.at-btn--white { background: #fff; color: var(--n700) !important; }
.at-band--navy .at-btn--ghost .elementor-button,
.at-band--navy a.at-btn--ghost { color: var(--t200) !important; border-color: rgba(94,234,212,.4); }

/* ============================================================
   10 · Photo
   ============================================================ */

.at-photo img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); }
.at-photo--flat img { border-radius: 0; }
.at-photo__cap { font-size: 11px; line-height: 1.8; color: var(--ink500); margin-top: 8px; text-align: center; }

.at-phbox {
  border: 1.5px dashed var(--ink300); border-radius: var(--r);
  background: repeating-linear-gradient(45deg,var(--ink50),var(--ink50) 9px,var(--ink100) 9px,var(--ink100) 18px);
  padding: 34px 20px; text-align: center; color: var(--ink500);
  font-size: 11.5px; font-weight: 700; line-height: 1.8;
}
.at-phbox small { display: block; font-weight: 500; color: var(--ink400); margin-top: 4px; font-size: 10.5px; }

/* ============================================================
   11 · Timeline  — one column per item, rail on the cell
   ============================================================ */

.at-tl {
  border-right: 2px solid var(--t100); padding-right: 22px;
  display: flex; flex-direction: column; gap: 26px;
}
.at-tl__item { position: relative; }
.at-tl__item::before {
  content: ''; position: absolute; right: -29px; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--t700); border: 3px solid var(--t50);
}
.at-tl__yr { font-size: 12.5px; font-weight: 800; color: var(--t700); line-height: 1.7; }

/* ============================================================
   12 · Key / value rows
   ============================================================ */

.at-kv { display: flex; flex-direction: column; }
.at-kv__row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--ink200);
  font-size: 12.5px; line-height: 1.7;
}
.at-kv__row:last-child { border-bottom: 0; }
.at-kv__k { color: var(--ink500); }
.at-kv__v { color: var(--t700); font-weight: 800; }
.at-kv--inline .at-kv__row { border: 0; padding: 0; flex-direction: column; gap: 1px; }
.at-kv--inline .at-kv__v { font-size: 14px; color: var(--t700); }

/* ============================================================
   13 · Steps  — one column per step
   ============================================================ */

.at-steps { display: grid; gap: 26px; }
.at-step { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.at-step__n { font-size: 26px; font-weight: 800; color: var(--t400); line-height: 1.1; }
.at-step__tags .at-tag { margin-bottom: 4px; }
@media (max-width:767px) { .at-step { grid-template-columns: 1fr; gap: 6px; } .at-step__n { font-size: 22px; } }

/* ============================================================
   14 · Quote
   ============================================================ */

.at-quote { text-align: center; }
.at-quote__t { font-size: 19px; line-height: 1.95; font-weight: 700; color: var(--n700); }
.at-quote__s { font-size: 12.5px; color: var(--ink500); margin-top: 12px; }
.at-band--navy .at-quote__t { color: #fff; }
@media (max-width:767px) { .at-quote__t { font-size: 16px; } }

/* ============================================================
   15 · Business card strip
   ============================================================ */

.at-cell--strip { background: var(--n900); border-radius: var(--r-lg); padding: 24px 26px; height: 100%; }
.at-cardstrip__name { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.5; }
.at-cardstrip__role { font-size: 12.5px; color: var(--t300); }
.at-cardstrip__k { font-size: 11px; color: var(--n400); line-height: 1.7; }
.at-cardstrip__v { font-size: 13px; font-weight: 800; color: #fff; line-height: 1.7; }

/* ============================================================
   16 · Contact rows
   ============================================================ */

.at-crow { display: flex; align-items: flex-start; gap: 13px; }
.at-crow__ic {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 9px;
  background: var(--n700); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.at-crow--teal .at-crow__ic { background: var(--t100); color: var(--t800); }
.at-crow__k { font-size: 12px; font-weight: 700; color: var(--ink600); line-height: 1.6; }
.at-crow__v { font-size: 14px; font-weight: 700; color: var(--t700); line-height: 1.6; }
.at-crow--todo .at-crow__v { color: var(--ink400); font-weight: 500; font-size: 13px; }

/* ============================================================
   18 · Header logo
   ------------------------------------------------------------
   The lockup ships as SVG so it is sharp at any zoom and never
   needs a retina file. Height is fixed by the flex row, so the
   proportions hold at every width.
   ============================================================ */

.at-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.at-logo img {
  height: 34px;
  width: auto;
  max-width: none;
  display: block;
}
.site-header .at-logo img,
.header-sticky .at-logo img { height: 34px; }

/* the mark alone, without the wordmark, on a very narrow header */
@media (max-width:400px) {
  .at-logo img { height: 30px; }
}

@media print {
  .at-logo img { height: 26px; }
}

/* ============================================================
   19 · Print
   ============================================================ */

@media print {
  .at-band { padding: 24px 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}