@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ===== GENERATED by build-native.js. Do not edit. =====
   Sources, in order: aditi-pages/css/aditi-case-studies.css,
   aditi-cs-overrides.css, aditi-cs-map.css.
   Edit those, then re-run: node build-native.js
   ===================================================== */


/* ==========================================================================
   Aditi IT Software Solutions — Services page
   Built against references/branding-aditi/, NOT the current live site.

   PASTE THIS WHOLE FILE into Divi > Theme Options > General > Custom CSS.
   The @import above must stay on line 1 or the brand fonts will not load.
   --------------------------------------------------------------------------
   Palette      Navy #1D3461, Cyan #00B4D8 (guidelines/03-colors.md)
   Type         Montserrat headings, Inter body (guidelines/04-typography.md)
   Devices      Cyan accent bar, cyan underline rule, navy panel, dot grid
                (export/brand-guide.css + the logo's dot halo, which
                06-visual-style.md names as the only decorative device)
   Constraints  No gradients, no glassmorphism, no glows, no neon.
                Navy under 30% of page area. Cyan 10-20%.
                Never white text on cyan (fails AA at 2.7:1).
   Scope        Everything under .aditi. No container width: the Divi row
                already sets it.
   ========================================================================== */

.aditi {
  --navy:       #1D3461;
  --navy-deep:  #16274A;
  --cyan:       #00B4D8;
  --cyan-deep:  #0092AF;
  --black:      #1A1A2E;
  --mid:        #4A4A6A;
  --border:     #D4D4E0;
  --bg-light:   #F8F8FC;
  --white:      #FFFFFF;

  --head: 'Montserrat', Arial, Helvetica, sans-serif;
  --body: 'Inter', Arial, Helvetica, sans-serif;

  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--black);
  -webkit-font-smoothing: antialiased;

  /* Fills whatever width the Divi row gives it. Set the row to
     Width 100% / Max Width 1200px. No width is imposed here. */
  width: 100%;
}

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

/* --------------------------------------------------------------------------
   Divi cascade guards. IMPORTANT, do not simplify these selectors.

   Divi's Theme Customizer emits `#et-boc .et-l h1..h6 { color: <your blue> }`.
   That is an ID-level selector, so it beats ANY plain class rule of ours no
   matter where it sits in the file. Every heading colour we set therefore
   needs a matching `#et-boc .et-l` counterpart, or Divi's blue wins inside the
   builder and headings on dark panels render blue-on-navy and unreadable.
   -------------------------------------------------------------------------- */
.aditi h1, .aditi h2, .aditi h3, .aditi h4,
#et-boc .et-l .aditi h1, #et-boc .et-l .aditi h2,
#et-boc .et-l .aditi h3, #et-boc .et-l .aditi h4 {
  font-family: var(--head);
  color: var(--navy);
  margin: 0 0 12px;
  padding-bottom: 0;
}

.aditi h1 { font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.aditi h2 { font-size: 28px; font-weight: 600; line-height: 1.3;  letter-spacing: -.02em; }
.aditi h3 { font-size: 20px; font-weight: 600; line-height: 1.4; }
.aditi h4 { font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--black); }

.aditi p { margin: 0 0 14px; padding-bottom: 0; }
.aditi p:last-child { margin-bottom: 0; }
.aditi ul { margin: 0; padding: 0; list-style: none; }
.aditi li { margin: 0; }

.aditi a { color: var(--cyan-deep); text-decoration: none; transition: color .18s ease; }
.aditi a:hover { color: var(--navy); }
.aditi a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.aditi strong { font-weight: 600; color: var(--navy); }

/* ---------- rhythm. No horizontal padding: the Divi row supplies it ------ */

.aditi .sec { padding: 64px 0; }
.aditi .sec:first-child { padding-top: 0; }
.aditi .sec:last-child { padding-bottom: 0; }
.aditi .sec + .sec { border-top: 1px solid var(--border); }
.aditi .sec--plain + .sec--plain { border-top: 0; }

/* Full-bleed panels break the border rule, so cancel it around them */
.aditi .sec--panel { padding: 0; }
.aditi .sec--panel + .sec, .aditi .sec--panel { border-top: 0; }

.aditi .head { max-width: 44em; margin-bottom: 36px; }
.aditi .head p { font-size: 18px; line-height: 1.7; color: var(--mid); margin-bottom: 0; }
.aditi .head h2 { margin-bottom: 10px; }

/* Uppercase eyebrow label */
.aditi .kicker {
  display: block;
  font-family: var(--head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cyan-deep);
  margin-bottom: 14px;
}

/* Cyan underline rule under a heading. From brand-guide.css h1. */
.aditi .ruled { padding-bottom: 12px; border-bottom: 3px solid var(--cyan); display: inline-block; }

/* Cyan accent bar. From brand-guide.css .cover-accent. */
.aditi .bar { width: 6px; height: 64px; border-radius: 3px; background: var(--cyan); }

.aditi .lead { font-size: 18px; line-height: 1.7; color: var(--mid); }

/* ---------- buttons ------------------------------------------------------ */

/* Divi's customizer sets `body .et_pb_button { border-radius: 50px }` and the
   theme rounds anchors broadly, which turns these into pills. 06-visual-style.md
   calls for slightly rounded corners, not pill shapes, so pin the radius with
   the ID-level guard. */
.aditi .btn,
#et-boc .et-l .aditi .btn {
  display: inline-block;
  font-family: var(--head);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 15px 28px;
  border: 2px solid transparent;
  border-radius: 4px;
  text-align: center;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
/* Every modifier needs the ID-level guard too. Divi's customizer sets
   `body .et_pb_button { border-color: rgba(255,255,255,0) }`, i.e. TRANSPARENT,
   which erases the outline on any button that has no background fill. */
.aditi .btn--primary,
#et-boc .et-l .aditi .btn--primary { background: var(--navy); border-color: var(--navy); color: var(--white); }
.aditi .btn--primary:hover,
#et-boc .et-l .aditi .btn--primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--white); }

/* Outline button: navy border always visible, fills navy on hover. */
.aditi .btn--ghost,
#et-boc .et-l .aditi .btn--ghost { background: transparent; border-color: var(--navy); color: var(--navy); }
.aditi .btn--ghost:hover,
#et-boc .et-l .aditi .btn--ghost:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* On navy: white fill, navy label. Never white-on-cyan. */
.aditi .btn--onnavy,
#et-boc .et-l .aditi .btn--onnavy { background: var(--white); border-color: var(--white); color: var(--navy); }
.aditi .btn--onnavy:hover,
#et-boc .et-l .aditi .btn--onnavy:hover { background: var(--cyan); border-color: var(--cyan); color: var(--navy); }

/* Outline button on navy: the border must be white, not blue, to be visible. */
.aditi .btn--onnavy-line,
#et-boc .et-l .aditi .btn--onnavy-line { background: transparent; border-color: rgba(255,255,255,.55); color: var(--white); }
.aditi .btn--onnavy-line:hover,
#et-boc .et-l .aditi .btn--onnavy-line:hover { border-color: var(--white); background: rgba(255,255,255,.10); color: var(--white); }

.aditi .btns { display: flex; flex-wrap: wrap; gap: 12px; }

.aditi .textlink { font-family: var(--head); font-size: 14px; font-weight: 600; }
.aditi .textlink::after { content: ' \2192'; }

/* ---------- panels + dot grid --------------------------------------------- */
/* The dot grid is the logo's halo motif. 06-visual-style.md permits it as the
   only decorative device. Drawn with radial-gradient, but the result is a dot
   pattern, not a gradient fill. One declaration, recoloured per panel. */

.aditi .dots {
  background-image: radial-gradient(var(--dot) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  background-position: 0 0;
}

/* Light panel. The default surface: white is the brand's primary ground and
   navy is reserved for anchors (03-colors.md, 06-visual-style.md). */
.aditi .panel-light {
  --dot: rgba(29, 52, 97, .085);
  position: relative;
  overflow: hidden;
  background-color: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 56px 44px;
}
.aditi .panel-light .bar { margin-bottom: 26px; }

/* Navy panel. Used once, for the closing CTA, keeping navy well under the
   30% page-area limit. */
.aditi .navy {
  --dot: rgba(255, 255, 255, .10);
  position: relative;
  overflow: hidden;
  background-color: var(--navy);
  color: var(--white);
  padding: 56px 44px;
  border-radius: 6px;
}
.aditi .navy p { color: rgba(255,255,255,.82); }
.aditi .navy .kicker { color: var(--cyan); }
.aditi .navy .bar { margin-bottom: 26px; }

/* Heading colour on the navy panel needs the ID-level guard, see the note at
   the top of this file. Without the #et-boc pair, Divi renders these blue. */
.aditi .navy h1, .aditi .navy h2, .aditi .navy h3, .aditi .navy h4,
#et-boc .et-l .aditi .navy h1, #et-boc .et-l .aditi .navy h2,
#et-boc .et-l .aditi .navy h3, #et-boc .et-l .aditi .navy h4 { color: var(--white); }

/* Sized for a 1200px row. `ch` caps line length, not the block: the panel
   itself always fills 100% of whatever width the Divi row gives it. */
/* DEVIATION from guidelines/04-typography.md, which specifies H1 at 36px.
   36px reads undersized on a 1200px row, so the hero scales up to 50px on wide
   viewports, passes through the documented 36px at about 880px, and eases down
   on phones. Every other heading stays exactly on the documented scale.
   Replace with `font-size: 36px` if you want strict compliance. */
.aditi .hero h1 { max-width: 22ch; margin-bottom: 22px; font-size: clamp(30px, 4.1vw, 50px); line-height: 1.1; }
.aditi .hero .lead { font-size: 20px; max-width: 62ch; margin-bottom: 32px; }
.aditi .hero .btns { margin-bottom: 36px; }

.aditi .hero-facts {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 14px; color: var(--mid);
}
.aditi .hero-facts li { display: flex; align-items: center; gap: 9px; }
.aditi .hero-facts svg { color: var(--cyan-deep); flex: 0 0 auto; }

/* ---------- guarantee ----------------------------------------------------- */

.aditi .guarantee {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-left: 4px solid var(--cyan);
  border-radius: 0 6px 6px 0;
  padding: 32px 36px;
}
.aditi .guarantee .kicker { margin-bottom: 10px; }
.aditi .guarantee q {
  display: block;
  font-family: var(--head);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--navy);
  quotes: none;
}
.aditi .guarantee q::before, .aditi .guarantee q::after { content: ''; }
.aditi .guarantee .sig { font-size: 14px; color: var(--mid); margin-top: 16px; }

/* ---------- lanes (the three services) ------------------------------------ */

.aditi .lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.aditi .lane {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--cyan);
  border-radius: 6px;
  padding: 30px 28px;
  transition: border-color .18s ease, transform .18s ease;
}
.aditi .lane:hover { border-color: var(--navy); border-top-color: var(--cyan); transform: translateY(-2px); }

.aditi .lane-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-light);
  border-radius: 6px;
  color: var(--navy);
  margin-bottom: 20px;
}
.aditi .lane h3 { margin-bottom: 10px; }
.aditi .lane .lane-line { font-size: 15px; color: var(--mid); margin-bottom: 16px; }
.aditi .lane p { font-size: 15px; line-height: 1.65; color: var(--black); }
.aditi .lane .lane-foot {
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--mid);
}
.aditi .lane .lane-foot b { display: block; font-family: var(--head); font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--mid); margin-bottom: 5px; }

/* ---------- fears (2x2) ---------------------------------------------------- */

.aditi .fears { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.aditi .fear {
  display: grid; grid-template-columns: 40px 1fr; gap: 18px;
  padding: 26px 28px;
  background: var(--bg-light);
  border-radius: 6px;
}
.aditi .fear svg { color: var(--cyan-deep); margin-top: 2px; }
.aditi .fear h4 { margin-bottom: 6px; }
.aditi .fear p { font-size: 15px; line-height: 1.65; color: var(--mid); margin-bottom: 0; }

/* ---------- phases --------------------------------------------------------- */

.aditi .phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.aditi .phase { padding-top: 20px; border-top: 3px solid var(--navy); }
.aditi .phase:last-child { border-top-color: var(--cyan); }
.aditi .phase .n {
  font-family: var(--head); font-size: 12px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--cyan-deep);
  display: block; margin-bottom: 10px;
}
.aditi .phase h3 { font-size: 18px; margin-bottom: 8px; }
.aditi .phase p { font-size: 15px; line-height: 1.65; color: var(--mid); }

/* ---------- proof ---------------------------------------------------------- */

.aditi .proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
/* Fifth item in a two-column grid: span the row so it does not leave a ragged
   empty cell beside it. */
.aditi .proof-item--wide { grid-column: 1 / -1; }
.aditi .proof-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 24px 26px;
}
.aditi .proof-item .who {
  font-family: var(--head); font-size: 16px; font-weight: 600;
  color: var(--navy); margin-bottom: 4px;
}
.aditi .proof-item .what { font-size: 13px; color: var(--mid); margin-bottom: 12px; }
.aditi .proof-item p { font-size: 15px; line-height: 1.6; color: var(--black); margin-bottom: 0; }
.aditi .proof-item .stack {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
/* Technology tags. One rule for every card type: without it the spans render
   as a run-on line of plain text that is genuinely hard to read.

   Deliberately pill-shaped while buttons stay at 4px. The shape carries the
   meaning: rounded rectangle = something you click, pill = a passive label.
   Keeping them visually different stops a tag reading as a dead button. */
.aditi .stack span,
#et-boc .et-l .aditi .stack span {
  display: inline-block;
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--navy);
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 13px;
  white-space: nowrap;
}

/* Trailing action band under a grid. Reads as a deliberate closing element
   rather than a leftover strip: one surface, text left, action right, and no
   hairline of its own (the panel edge already separates it). */
.aditi .sec-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  margin-top: 24px;
  padding: 26px 30px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.aditi .sec-more .more-text { flex: 1 1 22em; }
.aditi .sec-more b {
  display: block;
  font-family: var(--head);
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 3px;
}
.aditi .sec-more p { font-size: 15px; line-height: 1.6; color: var(--mid); margin: 0; }
.aditi .sec-more .btn { flex: 0 0 auto; }

/* ---------- case study list (Tier 1) --------------------------------------- */

/* Two columns: at 20 entries a single stacked column runs to several screens. */
.aditi .cs-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.aditi .cs-item {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-left: 4px solid var(--cyan);
  border-radius: 0 6px 6px 0;
  padding: 26px 28px;
  transition: border-color .18s ease;
}
.aditi .cs-item:hover { border-color: var(--navy); border-left-color: var(--cyan); }
.aditi .cs-item .p-client,
#et-boc .et-l .aditi .cs-item .p-client { font-size: 17px; margin-bottom: 6px; }
.aditi .cs-item .cs-meta {
  font-family: var(--head); font-size: 12px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--cyan-deep);
  margin-bottom: 10px;
}
.aditi .cs-item h3 { font-size: 19px; line-height: 1.35; margin-bottom: 9px; }
.aditi .cs-item p { font-size: 15px; line-height: 1.65; color: var(--mid); margin-bottom: 14px; }
.aditi .cs-item .stack {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: auto; padding-top: 13px; border-top: 1px solid var(--border);
}
.aditi .cs-item .cs-action { margin-top: 14px; }

/* ---------- project grid (all delivered work) ------------------------------ */
/* 20 cards show by default; the rest are revealed by the See more button.
   Hiding is done with nth-child rather than a class per card, so the markup
   stays clean and every project remains in the DOM for search and for the
   language models that read this page (GEO, handover section 10A). */

.aditi .pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.aditi .pgrid .pcard:nth-child(n+21) { display: none; }
.aditi .pgrid.is-open .pcard:nth-child(n+21) { display: flex; }

.aditi .pcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: 0 6px 6px 0;
  padding: 22px 24px;
  transition: border-color .18s ease;
}
.aditi .pcard:hover { border-color: var(--navy); border-left-color: var(--cyan); }

/* The client line is the first thing read, so it carries the most weight. */
.aditi .pcard .p-client,
#et-boc .et-l .aditi .pcard .p-client {
  font-family: var(--head);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
  margin: 0 0 5px;
}
.aditi .pcard .p-meta {
  font-family: var(--head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cyan-deep);
  margin: 0 0 11px;
  line-height: 1.4;
}
.aditi .pcard h3 { font-size: 17px; line-height: 1.4; margin-bottom: 12px; }
.aditi .pcard .stack {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: auto; padding-top: 13px;
  border-top: 1px solid var(--border);
}
.aditi .pcard .p-action { margin-top: 14px; }
.aditi .btn--sm,
#et-boc .et-l .aditi .btn--sm { padding: 10px 18px; font-size: 13.5px; }

.aditi .pmore { margin-top: 26px; text-align: center; }
.aditi .pmore .btn { min-width: 15em; }
.aditi .pnote { font-size: 14px; color: var(--mid); margin-top: 18px; }

/* ---------- delivery record: filter pills + card grid ----------------------
   Replaces the 36-row table. A table was correct for density and wrong for
   reading: nobody scans 36 rows of four columns looking for the one that
   resembles their problem. The pills turn the section into a control, and the
   cards give each system enough room to be recognised at a glance.

   Deliberately lighter than .cs-item above it. Tier 1 is a story with a
   paragraph and a link; Tier 2 is four facts. If the two ever look alike the
   two-tier model stops communicating anything. */

.aditi .dfilter {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 30px; margin-bottom: 18px;
}
.aditi .dpill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--head); font-size: 13px; font-weight: 600;
  color: var(--mid); background: var(--white);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 14px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.aditi .dpill b {
  font-size: 11px; font-weight: 700; color: var(--mid);
  background: var(--bg-light); border-radius: 999px;
  min-width: 20px; padding: 2px 6px; text-align: center;
}
.aditi .dpill:hover { border-color: var(--navy); color: var(--navy); }
.aditi .dpill.is-on { background: var(--navy); border-color: var(--navy); color: var(--white); }
.aditi .dpill.is-on b { background: rgba(255,255,255,.18); color: var(--white); }

.aditi .dcount { font-size: 13px; color: var(--mid); margin: 0 0 20px; }

.aditi .dgrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.aditi .dcard {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 20px 20px 18px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.aditi .dcard:hover { border-color: var(--navy); box-shadow: 0 3px 14px rgba(29,52,97,.07); }
.aditi .dcard[hidden] { display: none; }

/* The domain bar is the only colour on the card, so it has to carry the whole
   grouping signal on its own. Full-bleed along the top edge, not inset. */
.aditi .dcard-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--dom, var(--cyan));
}
.aditi .dcard-domain {
  font-family: var(--head); font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--dom, var(--cyan-deep));
  margin: 4px 0 10px;
}
.aditi .dcard-client { font-size: 13px; color: var(--mid); margin-bottom: 5px; }
.aditi .dcard h3,
#et-boc .et-l .aditi .dcard h3 {
  font-family: var(--head); font-size: 15.5px; font-weight: 600; line-height: 1.35;
  color: var(--navy); margin: 0 0 14px;
}
.aditi .dcard-stack { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.aditi .dcard-stack span {
  font-size: 11px; color: var(--mid);
  background: var(--bg-light); border: 1px solid var(--border); border-radius: 4px;
  padding: 3px 7px;
}

/* Twelve domains, twelve accents. Mid-dark and desaturated on purpose: these
   sit next to navy and cyan, and a bright categorical palette would read as a
   dashboard rather than a delivery record. */
.aditi .dcard[data-domain="crm"]              { --dom: #556270; }
.aditi .dcard[data-domain="manufacturing"]    { --dom: #A34A3F; }
.aditi .dcard[data-domain="education"]        { --dom: #6A4C93; }
.aditi .dcard[data-domain="transport"]        { --dom: #0092AF; }
.aditi .dcard[data-domain="construction"]     { --dom: #8A6D3B; }
.aditi .dcard[data-domain="security"]         { --dom: #1D3461; }
.aditi .dcard[data-domain="electronics"]      { --dom: #3E6DA8; }
.aditi .dcard[data-domain="environment"]      { --dom: #4C7A34; }
.aditi .dcard[data-domain="finance"]          { --dom: #B5651D; }
.aditi .dcard[data-domain="public-sector"]    { --dom: #52607A; }
.aditi .dcard[data-domain="healthcare"]       { --dom: #2E7D6B; }
.aditi .dcard[data-domain="retail"]           { --dom: #9B4A6E; }

@media (max-width: 1000px) {
  .aditi .dgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .aditi .dgrid { grid-template-columns: 1fr; gap: 12px; }
  /* The pill row scrolls sideways rather than stacking into six lines and
     pushing the cards off the first screen. */
  .aditi .dfilter {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none;
  }
  .aditi .dfilter::-webkit-scrollbar { display: none; }
  .aditi .dpill { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .aditi .dcard, .aditi .dpill { transition: none; }
}
.aditi .table-note { font-size: 14px; color: var(--mid); margin-top: 14px; }

/* ---------- testimonial ----------------------------------------------------- */

/* Divi styles bare <blockquote> itself:
     blockquote { margin:20px 0 30px; border-left:5px solid; padding-left:20px }
     blockquote { border-color:#3550a0 }
   Reset all of it explicitly, with the ID-level guard, or the quote renders
   with Divi's blue bar and Divi's margins instead of ours. */
.aditi blockquote,
#et-boc .et-l .aditi blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  max-width: none;
  quotes: none;
}

.aditi .quote,
#et-boc .et-l .aditi .quote {
  display: block;
  width: 100%;
  max-width: none;
  background: var(--bg-light);
  border: 0;
  border-left: 4px solid var(--cyan);
  border-radius: 0 6px 6px 0;
  padding: 32px 36px;
}
.aditi .quote q {
  display: block; font-size: 21px; line-height: 1.55;
  color: var(--navy); font-style: italic; quotes: none;
}
.aditi .quote q::before, .aditi .quote q::after { content: ''; }
.aditi .quote .who { font-style: normal; font-size: 14px; color: var(--mid); margin-top: 18px; }
.aditi .quote .who b { display: block; font-family: var(--head); font-size: 15px; font-weight: 600; color: var(--navy); }

/* ---------- cta ------------------------------------------------------------- */

.aditi .cta-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; }
.aditi .cta-direct { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); font-size: 15px; }
.aditi .cta-direct li { margin-bottom: 8px; color: rgba(255,255,255,.82); }
.aditi .cta-direct a { color: var(--white); font-weight: 500; }
.aditi .cta-direct a:hover { color: var(--cyan); }

/* ---------- responsive ------------------------------------------------------ */

@media (max-width: 980px) {
  .aditi h1 { font-size: 34px; }
  .aditi h2 { font-size: 25px; }
  .aditi .sec { padding: 52px 0; }
  .aditi .navy, .aditi .panel-light { padding: 42px 30px; }
  .aditi .lanes { grid-template-columns: 1fr; }
  .aditi .phases { grid-template-columns: 1fr; gap: 22px; }
  .aditi .cta-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 700px) {
  .aditi h1 { font-size: 28px; }
  .aditi h2 { font-size: 22px; }
  .aditi h3 { font-size: 18px; }
  .aditi .sec { padding: 44px 0; }
  .aditi .head { margin-bottom: 28px; }
  .aditi .navy, .aditi .panel-light { padding: 30px 22px; border-radius: 4px; }
  .aditi .hero .lead { font-size: 17px; }
  .aditi .fears { grid-template-columns: 1fr; gap: 16px; }
  .aditi .proof { grid-template-columns: 1fr; }
  .aditi .guarantee { padding: 24px 22px; }
  .aditi .guarantee q { font-size: 17px; }
  .aditi .sec-more { padding: 22px 20px; }
  .aditi .sec-more .btn { width: 100%; }
  .aditi .cs-list { grid-template-columns: 1fr; gap: 14px; }
  .aditi .cs-item { padding: 22px 20px; }
  .aditi .cs-item .btn { width: 100%; }
  .aditi .pgrid { grid-template-columns: 1fr; gap: 14px; }
  .aditi .pcard { padding: 20px 18px; }
  .aditi .pmore .btn { width: 100%; }
  .aditi .quote { padding: 22px 20px; }
  .aditi .quote q { font-size: 18px; }
  .aditi .btn { display: block; text-align: center; }
  .aditi .btns { display: block; }
  .aditi .btns .btn + .btn { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .aditi *, .aditi *::before, .aditi *::after { transition-duration: .01ms !important; }
  .aditi .lane:hover { transform: none; }
}

/* ---- preview chrome only, not part of the deliverable ---- */
body { margin: 0; background: #fff; font-family: 'Inter', Arial, sans-serif; }
/* 1200px matches guidelines/06-visual-style.md: "Content area: max 1200px on
   desktop, centered". Set the Divi row to Width 100% / Max Width 1200px. */
.simnote {
  max-width: 1200px; margin: 0 auto; padding: 12px 30px;
  font-size: 12px; letter-spacing: .04em; color: #4A4A6A;
  border-bottom: 1px dashed #D4D4E0;
}
.simnote b { color: #1D3461; }
.simrow { max-width: 1200px; margin: 0 auto; padding: 48px 30px 80px; }


/* ==========================================================================
   Deliberate design changes to the case-studies page, made after extraction.

   aditi-pages/css/aditi-case-studies.css is a frozen snapshot; changes we
   decide on ourselves during the Divi conversion live here and load after it.
   Sibling of ../pilot-services/aditi-services-overrides.css.
   ========================================================================== */

/* Body text weight.

   Divi's style.min.css sets `body { font-weight: 500 }`. aditi-case-studies.css
   (like aditi-brand.css and aditi-home.css) never states a weight on `.aditi`,
   so under Divi every unstyled paragraph inherits 500 - visibly heavier, and
   just wide enough that a couple of card lines wrap early. Pin it to the normal
   400 the design was drawn at. Inert on the standalone page, which is already
   400.

   NOTE: the home and services pilots have the same latent issue; worth adding
   `font-weight: 400` to `.aditi` in aditi-brand.css / aditi-home.css too. */
.aditi { font-weight: 400; }

/* The head column keeps its bottom margin below 980px, where Divi zeroes a
   row's last column. `.ad-head-col` exists only in the Divi layout, so this is
   inert on the standalone page. */
@media (max-width: 980px) { .aditi .ad-head-col.et_pb_column { margin-bottom: 36px; } }
@media (max-width: 700px) { .aditi .ad-head-col.et_pb_column { margin-bottom: 28px; } }


/* ==========================================================================
   Native Divi modules, mapped onto the case-studies page design.

   Sibling of ../pilot-services/aditi-services-map.css. Same contract; this
   page is simpler. Two Code modules only: the 38 featured cards ({{cs-list}})
   and the delivery record ({{delivery}}: filter bar + count + 36-card grid,
   wired to case-studies.js). Everything else - hero, the three section
   headings, the closing CTA - is a real editable module.

   LOAD ORDER: aditi-case-studies.css, aditi-cs-overrides.css, then this.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Import-stability contract.

   The preview loads Divi's THEME stylesheet; the live site also has Theme
   Customizer CSS, generated per site and emitted at #page-container ID
   specificity, which the preview never sees. What it can move - section and
   row padding, the hero and CTA column boxes, the fonts, the button colours -
   is forced here with !important and an #page-container copy. The two Code
   modules are passed through by Divi untouched.
   -------------------------------------------------------------------------- */

/* 0a. Fonts. Montserrat headings, Inter body. The @import is dropped when
   Divi's static-CSS combiner moves this file down; STEPS.md enqueues the fonts
   as a separate <link>. This re-forces the family so the Customizer's site
   fonts cannot win. */
#page-container .aditi {
  --head: 'Montserrat', Arial, Helvetica, sans-serif;
  --body: 'Inter', Arial, Helvetica, sans-serif;
  font-family: var(--body) !important;
}
#page-container .aditi .et_pb_text .et_pb_text_inner { font-family: var(--body) !important; }
#page-container .aditi h1, #page-container .aditi h2,
#page-container .aditi h3, #page-container .aditi h4,
#page-container .aditi .et_pb_module_heading { font-family: var(--head) !important; }
#page-container .aditi .kicker .et_pb_text_inner,
#page-container .aditi .kicker .et_pb_text_inner p { font-family: var(--head) !important; }

/* 0b. The card grids (`.cs-list`, `.dgrid`) and the filter bar (`.dfilter`) are
   left entirely to aditi-case-studies.css. They are plain grids with simple
   `max-width` media queries and no nested at-rules, so Divi's static-CSS
   combiner keeps them intact - unlike the services page's subgrid, they need
   no flat restatement here. Restating them (mobile-first, with a min-width
   query to bring back the columns) is exactly what broke the layout: if the
   combiner reorders the query, the grid is stuck at one column.

   The one adjustment: the filter bar's coded 30px top margin collapses into
   the head block's 36px bottom margin on the standalone page but not across a
   Divi row boundary, so it is zeroed. */
.aditi .ad-delivery .dfilter { margin-top: 0; }

/* --------------------------------------------------------------------------
   1. Divi chrome removal, section + row padding.

   The `.ad-bare` columns are left as normal full-width 4_4 columns - they
   only ever hold one full-width Code module, so nothing is gained by
   collapsing them, and `display: contents` on a Divi column drops its box in
   ways that confused the layout on the real import. Divi's own
   `.et_pb_column_4_4 { width: 100% }` already makes them fill the row.
   -------------------------------------------------------------------------- */
.aditi .ad-bare.et_pb_column,
#page-container .aditi .ad-bare.et_pb_column {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  /* NOT `float: none`. Divi floats every column (`float: left`) and the row's
     clearfix depends on it; forcing it off dropped the column out of flow and
     disturbed the cards. A single floated 100% column fills the row fine. */
}

.aditi .ad-row.et_pb_row:not(.panel-light):not(.navy),
#page-container .aditi .ad-row.et_pb_row:not(.panel-light):not(.navy) {
  padding: 0 !important;
  /* Divi makes `.et_pb_row` a flex container, `flex-direction: row-reverse`
     above 981px. Block layout keeps a single full-width column from being
     parked against the right edge. Hero and CTA rows are excluded. */
  display: block !important;
}
.aditi .ad-row.et_pb_row { margin-left: auto; margin-right: auto; }

/* Only the CTA row is converted to a grid, so only its clearfix is killed. The
   hero is a single stacked column and keeps Divi's clearfix. */
.aditi .ad-cta.et_pb_row::before, .aditi .ad-cta.et_pb_row::after { content: none; }

.aditi.sec, #page-container .aditi.sec { padding: 64px 0 !important; }
.aditi.sec:first-of-type, #page-container .aditi.sec:first-of-type { padding-top: 0 !important; }
.aditi.sec:last-of-type, #page-container .aditi.sec:last-of-type { padding-bottom: 0 !important; }
.aditi.sec--panel, #page-container .aditi.sec--panel { padding: 0 !important; }
.aditi.sec + .aditi.sec { border-top: 1px solid var(--border); }
.aditi.sec--plain + .aditi.sec--plain { border-top: 0; }
.aditi.sec--panel + .aditi.sec { border-top: 0; }

/* --------------------------------------------------------------------------
   2. The two Code modules. Divi wraps the payload in
   .et_pb_code > .et_pb_code_inner and adds nothing; only the wrapper box.
   -------------------------------------------------------------------------- */
.aditi .et_pb_code.et_pb_module { margin: 0; }
.aditi .ad-cslist, .aditi .ad-delivery,
.aditi .ad-cslist .et_pb_code_inner, .aditi .ad-delivery .et_pb_code_inner { display: block; }

/* --------------------------------------------------------------------------
   3. Headings and the eyebrow.
   -------------------------------------------------------------------------- */
.aditi .ad-h .et_pb_module_heading { padding-bottom: 0; margin: 0 0 10px; }
.aditi .ad-hero-h .et_pb_module_heading { margin-bottom: 22px; }
.aditi .et_pb_text > .et_pb_text_inner > p:last-child { margin-bottom: 0; }

.aditi .kicker .et_pb_text_inner p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.aditi .kicker .et_pb_text_inner {
  font-family: var(--head);
  font-size: 12px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--cyan-deep);
}
.aditi .ad-head-col .kicker { margin-bottom: 14px; }

/* The pnote under the delivery grid. */
.aditi .ad-pnote .et_pb_text_inner { font-size: 14px; color: var(--mid); margin-top: 18px; }

/* --------------------------------------------------------------------------
   4. Buttons.
   -------------------------------------------------------------------------- */
.aditi .et_pb_button_module_wrapper { display: inline-block; margin: 0 12px 0 0; }
.aditi .et_pb_button_module_wrapper:last-child { margin-right: 0; }
.aditi .ad-btn.et_pb_button::after,
#et-boc .et-l .aditi .ad-btn.et_pb_button::after { display: none !important; content: none !important; }
.aditi .ad-btn.et_pb_button:hover { padding: 15px 28px; }
.aditi .ad-btn.et_pb_button {
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  line-height: 1 !important;   /* answers new/style.min.css `.et_pb_button { line-height: 1.7em !important }` */
  padding: 15px 28px;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   5. Hero. One column, stacked - no split on this page. The panel frame comes
   from `.panel-light` on the row.
   -------------------------------------------------------------------------- */
.aditi .ad-hero > .et_pb_column { width: 100% !important; margin: 0 !important; padding: 0 !important; }
.aditi .ad-hero .ad-facts { margin-top: 36px; }

/* Facts list. On this page `.hero-facts` is a plain flex row that wraps
   (aditi-case-studies.css), not the home page's one-per-line grid. The coded
   tick per <li> becomes a CSS ::before so the list stays plain editable text.
   --cyan-deep is #0092AF. */
.aditi .ad-facts .et_pb_text_inner ul {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  padding-top: 24px; margin: 0;
  border-top: 1px solid var(--border);
  font-size: 14px; color: var(--mid); list-style: none;
}
.aditi .ad-facts .et_pb_text_inner li { display: flex; align-items: center; gap: 9px; }
.aditi .ad-facts .et_pb_text_inner li::before {
  content: ''; flex: 0 0 auto; width: 16px; height: 16px;
  background: no-repeat center/16px 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m4 10.5 3.5 3.5L16 5.5' stroke='%230092AF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   6. Closing CTA. `.navy` + `.dots` on the row draw the panel; the 1_2 + 1_2
   columns are re-declared as the `.cta-grid` proportions.
   -------------------------------------------------------------------------- */
.aditi .ad-cta.et_pb_row {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 44px;
  align-items: center;
}
.aditi .ad-cta.et_pb_row > .et_pb_column {
  width: auto !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important;
}
.aditi .ad-cta .ad-cta-lead .et_pb_text_inner { color: rgba(255,255,255,.85); }
.aditi .ad-cta-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.aditi .ad-cta-actions .et_pb_button_module_wrapper { display: block; margin: 0; }
.aditi .ad-cta-actions .ad-btn { display: block; width: 100%; }

/* --------------------------------------------------------------------------
   7. Responsive.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .aditi .ad-cta.et_pb_row { grid-template-columns: 1fr; gap: 30px; }
  .aditi .ad-cta.et_pb_row > .et_pb_column { margin-bottom: 0 !important; }

  /* Divi adds `margin-bottom: 30px` to every non-last module in a column below
     980px; in the head, hero-copy and CTA-copy columns that stacks between the
     eyebrow, heading and intro line. Cleared, and the design's own gaps
     restated. */
  .aditi .ad-head-col .et_pb_module,
  .aditi .ad-hero-col .et_pb_module,
  .aditi .ad-cta-copy .et_pb_module { margin-bottom: 0; }
  .aditi .ad-head-col .kicker,
  .aditi .ad-hero-col .kicker,
  .aditi .ad-cta-copy .kicker { margin-bottom: 14px; }
  .aditi .ad-hero-col .ad-lead { margin-bottom: 32px; }
  .aditi .ad-hero-col .ad-facts { margin-top: 36px; }
  .aditi .ad-head-col .ad-h .et_pb_module_heading,
  .aditi .ad-hero-col .ad-h .et_pb_module_heading,
  .aditi .ad-cta-copy .ad-h .et_pb_module_heading { margin-bottom: 10px; }
  .aditi .ad-hero-col .ad-hero-h .et_pb_module_heading { margin-bottom: 22px; }
}
@media (max-width: 700px) {
  .aditi.sec, #page-container .aditi.sec { padding: 44px 0 !important; }
  .aditi.sec:first-of-type { padding-top: 0 !important; }
  .aditi.sec:last-of-type { padding-bottom: 0 !important; }
  /* Stack full width. `.ad-hero-col .et_pb_module { margin-bottom: 0 }` in the
     980px block would otherwise beat the wrapper's own margin, so the hero and
     CTA button wrappers are named at the same specificity here. */
  .aditi .et_pb_button_module_wrapper,
  .aditi .ad-hero-col .et_pb_button_module_wrapper,
  .aditi .ad-cta-copy .et_pb_button_module_wrapper { display: block; width: 100%; margin: 0 0 10px; }
  .aditi .et_pb_button_module_wrapper:last-child,
  .aditi .ad-hero-col .et_pb_button_module_wrapper:last-child { margin-bottom: 0; }
  .aditi .ad-btn.et_pb_button { display: block; width: 100%; }
}

/* --------------------------------------------------------------------------
   8. Visual Builder.
   -------------------------------------------------------------------------- */
/* (the .ad-bare columns are plain blocks now, nothing special for the builder) */

/* --------------------------------------------------------------------------
   9. Front-end ID guard for button colours (Customizer emits these at ID level).
   -------------------------------------------------------------------------- */
#page-container .aditi .btn--primary { background: var(--navy); border-color: var(--navy); color: var(--white); }
#page-container .aditi .btn--primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--white); }
#page-container .aditi .btn--ghost { background: transparent; border-color: var(--navy); color: var(--navy); }
#page-container .aditi .btn--ghost:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
#page-container .aditi .btn--onnavy { background: var(--white); border-color: var(--white); color: var(--navy); }
#page-container .aditi .btn--onnavy:hover { background: var(--cyan); border-color: var(--cyan); color: var(--navy); }
#page-container .aditi .btn--onnavy-line { background: transparent; border-color: rgba(255,255,255,.55); color: var(--white); }
#page-container .aditi .btn--onnavy-line:hover { border-color: var(--white); background: rgba(255,255,255,.10); color: var(--white); }
#page-container .aditi .btn { border-radius: 4px; line-height: 1; }