@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-testimonials.css,
   aditi-testimonials-overrides.css, aditi-testimonials-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; }

/* Hero with an image beside the copy. */
/* The accent bar and eyebrow sit ABOVE this grid, so both columns begin at the
   same line and the image frame is level with the headline by construction.
   The previous version pushed the image down with a hand-tuned margin, which
   only held while the bar and eyebrow kept their exact sizes. */
.aditi .hero-split {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 44px;
  align-items: stretch;
}

/* A frame for the portrait. The source is a cut-out on a transparent
   background, so unframed its lower edge just stops in mid-air and reads as a
   pasted cut-out. Sitting it flush to the bottom of a panel makes that edge the
   base of the frame instead, so the figure looks placed rather than cropped. */
.aditi .hero-media {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 340px;
  padding: 0 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-bottom: 3px solid var(--cyan);
  border-radius: 8px;
  overflow: hidden;
}
.aditi .hero-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 460px;
  margin: 0;
}

/* Logo walls. These are single wide images rather than individual logo files,
   so they are capped and centred and never allowed to overflow the row. */
.aditi .logowall { display: flex; flex-direction: column; gap: 30px; }
.aditi .logowall figure { margin: 0; }
.aditi .logowall img {
  display: block;
  width: 100%; height: auto;
  max-width: 1000px; margin: 0 auto;
}
.aditi .logowall figcaption {
  font-family: var(--head);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--mid);
  text-align: center;
  margin-top: 12px;
}

/* A grid, not flex-wrap. With flex, items of different lengths pack onto a row
   wherever they happen to fit, which put two items on one line and one on the
   next and read as broken. Grid columns keep every item on its own track and
   the rows aligned however long the labels are.

   auto-fit adapts to the container: the homepage list sits in a half-width
   column and lands on two columns, the full-width service page heroes on
   three. */
.aditi .hero-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 13px 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 14px; color: var(--mid);
}
.aditi .hero-facts li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.45; }
.aditi .hero-facts svg { color: var(--cyan-deep); flex: 0 0 auto; margin-top: 2px; }

/* ---------- 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);
}
/* Align the DELIVERED block across all three cards.
   `margin-top: auto` alone only bottom-aligns the footer, so when one card's
   footer copy runs to fewer lines its divider sits at a different height.
   Subgrid makes the three cards share one set of rows, so icon, title,
   strapline, body and footer each line up. The 1fr row is the body, which
   absorbs the slack. Falls back to flex where subgrid is unsupported.

   MUST stay after the `.aditi .lane { display: flex }` rule above. @supports
   adds no specificity, so if this block sits earlier the later `display: flex`
   overrides `display: grid` and the whole thing silently does nothing. */
/* Opt-out: `.lanes--home` cards have six children, not five, so the fixed
   five-row track list below would push the last one into an implicit row and
   break the card. Those cards fall back to flex. */
@supports (grid-template-rows: subgrid) {
  .aditi .lanes:not(.lanes--home) {
    grid-template-rows: auto auto auto 1fr auto;
    /* A subgrid inherits the parent's gap, which would push 24px between every
       element inside each card. There is one row of cards, so the parent's
       row-gap is doing no work. Spacing stays on the child margins. */
    row-gap: 0;
    column-gap: 24px;

  }
  .aditi .lanes:not(.lanes--home) > .lane {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;

  }
  .aditi .lanes:not(.lanes--home) > .lane .lane-foot { margin-top: 0; }
}

.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; }

/* Term-and-definition list inside a lane card, for copy written as
   "Label : description" pairs.

   The label sits on its own line rather than inline, and there is no rule
   between rows. A border on every row put seven hairlines in each card, which
   is what made the homepage read as cluttered. Spacing does that job instead. */
.aditi .deflist {
  display: flex; flex-direction: column; gap: 12px;
  margin: 0 0 4px; padding: 0; list-style: none;
}
.aditi .deflist li { font-size: 14.5px; line-height: 1.55; color: var(--mid); margin: 0; }
.aditi .deflist b {
  display: block;
  font-family: var(--head);
  font-size: 13.5px; font-weight: 600;
  color: var(--navy);
  margin-bottom: 1px;
}

/* Small label introducing the second list in a card. One hairline per card. */
.aditi .lane-label {
  font-family: var(--head);
  font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--mid);
  margin: 22px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.aditi .lanes--home .lane { padding: 28px 26px; }
.aditi .lanes--home .lane h3 { margin-bottom: 6px; font-size: 19px; }
.aditi .lanes--home .lane .lane-line { margin-bottom: 14px; color: var(--mid); font-size: 15px; }
.aditi .lanes--home .lane p { font-size: 15px; line-height: 1.65; }
.aditi .lanes--home .lane .lane-foot { margin-top: auto; padding-top: 22px; }

/* Four children per card here (title, strapline, body, action), so a four-row
   subgrid keeps the three cards aligned row for row. Kept separate from the
   five-row services rule above, which has an icon as its first child. */
@supports (grid-template-rows: subgrid) {
  .aditi .lanes--home { grid-template-rows: auto auto 1fr auto; row-gap: 0; column-gap: 24px; }
  .aditi .lanes--home > .lane {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .aditi .lanes--home > .lane .lane-foot { margin-top: 0; }
}

/* Supporting detail beneath the cards: domains and technologies side by side. */
.aditi .detail-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px 44px;
  margin-top: 34px;
}
.aditi .lane-label--top { margin-top: 0; }

/* ---------- stat strip ------------------------------------------------------ */
/* One bordered strip divided into equal cells. The 1px grid gap over a border
   coloured background draws the dividers, so there is no per-cell border to
   double up at the joins. Cyan top edge ties it to the cards above. */

.aditi .stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-top: 3px solid var(--cyan);
  border-radius: 6px;
  overflow: hidden;
}
.aditi .stats li { background: var(--white); padding: 28px 26px; }

.aditi .stats b,
#et-boc .et-l .aditi .stats b {
  display: block;
  font-family: var(--head);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.aditi .stats span {
  display: block;
  font-family: var(--head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mid);
  margin-top: 9px;
}

/* ---------- role / credential cards ----------------------------------------- */
/* Used where a claim is made about a role rather than a named person, which is
   what the homepage requires (naming_policy: assert the role, never a person). */

.aditi .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.aditi .trust {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: 0 6px 6px 0;
  padding: 24px 26px;
}
.aditi .trust h4,
#et-boc .et-l .aditi .trust h4 {
  font-size: 16px;
  color: var(--navy);
  margin-bottom: 8px;
}
.aditi .trust p { font-size: 15px; line-height: 1.65; color: var(--mid); margin: 0; }

/* ---------- 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 history table (Tier 2) -------------------------------- */
/* Divi styles bare tables (borders, striping, cell padding). Reset ours with
   the ID-level guard or Divi's treatment shows through. Pattern follows
   export/brand-guide.css: navy head, alternating bg-light rows. */

.aditi .table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  -webkit-overflow-scrolling: touch;
}

.aditi table.dtable,
#et-boc .et-l .aditi table.dtable {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  border: 0;
  margin: 0;
  font-size: 14.5px;
}

.aditi .dtable thead tr,
#et-boc .et-l .aditi .dtable thead tr { background: var(--navy); }

.aditi .dtable thead th,
#et-boc .et-l .aditi .dtable thead th {
  font-family: var(--head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
  text-align: left;
  padding: 12px 16px;
  border: 0;
  white-space: nowrap;
}

.aditi .dtable tbody td,
#et-boc .et-l .aditi .dtable tbody td {
  padding: 11px 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--black);
  vertical-align: top;
  line-height: 1.5;
}
.aditi .dtable tbody tr:last-child td { border-bottom: 0; }
.aditi .dtable tbody tr:nth-child(even) td { background: var(--bg-light); }

.aditi .dtable .c-client { font-weight: 500; color: var(--navy); min-width: 15em; }
.aditi .dtable .c-named { font-weight: 600; }
.aditi .dtable .c-domain { color: var(--mid); white-space: nowrap; }
.aditi .dtable .c-stack { color: var(--mid); font-size: 13.5px; }

.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); }

/* ---------- testimonials ---------------------------------------------------- */
/* Spec: page-restructure-spec-v1.md section 3.
   "Section one carries visual weight. Larger type, more spacing, one per row.
    Sections two and three are more compact, several per row."
   No star ratings and no stock photography: initials only. */

.aditi .tlist { display: grid; gap: 20px; }
.aditi .tlist--lead { grid-template-columns: 1fr; }
.aditi .tlist--compact,
.aditi .tlist--crm { grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* A section can carry a full-width lead card and the compact grid below it
   (Business systems: Sandeep Dhurka, then the CRM portraits). */
.aditi .tlist + .tlist { margin-top: 20px; }

.aditi .tcard {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-left: 4px solid var(--cyan);
  border-radius: 0 6px 6px 0;
  padding: 26px 30px;
}

.aditi .tcard q,
#et-boc .et-l .aditi .tcard q {
  display: block;
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy);
  font-style: italic;
  quotes: none;
}
.aditi .tcard q::before, .aditi .tcard q::after { content: ''; }

/* Section one: one per row, larger type, more room. */
.aditi .tlist--lead .tcard { padding: 32px 36px; }
.aditi .tlist--lead .tcard q { font-size: 21px; line-height: 1.55; }

.aditi .tcard .who {
  display: flex; align-items: center; gap: 13px;
  margin: auto 0 0; padding-top: 20px;
}
/* Real photograph. Divi sets its own border-radius and max-width on images,
   so pin ours with the ID-level guard or the portraits render square. */
.aditi .tcard .avatar,
#et-boc .et-l .aditi .tcard .avatar {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--bg-light);
  border: 1px solid var(--border);
  max-width: none;
}
/* Fallback where no photograph exists. Drawn as an inline <svg> (navy disc +
   white initials) rather than a styled <span>: the span's background was
   dropped on the Divi import and rendered as a bare grey ring. */
.aditi .tcard svg.avatar--initials,
#et-boc .et-l .aditi .tcard svg.avatar--initials {
  display: block; background: transparent; border-color: var(--navy);
  width: 52px; height: 52px;
}
.aditi .tcard .who-text { min-width: 0; }

/* ---- option 3: portrait card, attribution above the quote ---------------- */

.aditi .tcard--portrait {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--cyan);
  border-left: 1px solid var(--border);
  border-radius: 6px;
  padding: 24px 26px;
  margin-top:20px;
}
.aditi .tcard--portrait .t-head {
  display: flex; align-items: center; gap: 13px;
  margin: 0 0 18px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--border);
}
.aditi .tcard--portrait q,
#et-boc .et-l .aditi .tcard--portrait q {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--black);
  font-style: normal;
}

/* The name and role wrap to a different number of lines in each card, so the
   header heights differ and the dividing rules do not line up across the row.
   Subgrid makes the three cards share two rows: header, then quote.

   MUST stay after the `.aditi .tcard { display: flex }` rule above. @supports
   adds no specificity, so placed earlier the later `display: flex` would win
   and this would silently do nothing. */
@supports (grid-template-rows: subgrid) {
  .aditi .tlist--crm { grid-template-rows: auto 1fr; row-gap: 0; column-gap: 18px; }
  .aditi .tcard--portrait {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}
.aditi .tcard .who b,
#et-boc .et-l .aditi .tcard .who b {
  display: block;
  font-family: var(--head);
  font-size: 15px; font-weight: 600;
  color: var(--navy); line-height: 1.35;
}
.aditi .tcard .who span span,
.aditi .tcard .who-text > span { display: block; font-size: 13.5px; color: var(--mid); line-height: 1.4; }

/* ---------- 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 .trust-grid { grid-template-columns: 1fr; gap: 16px; }
  .aditi .stats { grid-template-columns: repeat(2, 1fr); }
  .aditi .hero-split { grid-template-columns: 1fr; gap: 28px; }
  .aditi .hero-media { order: -1; min-height: 260px; }
  .aditi .hero-media img { max-height: 300px; }
  .aditi .tlist--compact, .aditi .tlist--crm { grid-template-columns: repeat(2, 1fr); }
  .aditi h1 { font-size: 34px; }
  .aditi h2 { font-size: 25px; }
  .aditi .sec { padding: 52px 0; }
  .aditi .navy, .aditi .panel-light { padding: 42px 30px; }
  /* One column: there is nothing left to align across, so drop back to flex.
     Leaving subgrid on would make every card share one 5-row track list. */
  .aditi .lanes { grid-template-columns: 1fr; grid-template-rows: none; }
  .aditi .lane { display: flex; grid-row: auto; }
  .aditi .lane .lane-foot { margin-top: auto; }
  .aditi .phases { grid-template-columns: 1fr; gap: 22px; }
  .aditi .cta-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 700px) {
  .aditi .stats { grid-template-columns: 1fr; }
  .aditi .stats li { padding: 22px 20px; }
  .aditi .stats b { font-size: 30px; }
  .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 .tlist--compact, .aditi .tlist--crm { grid-template-columns: 1fr; grid-template-rows: none; }
  .aditi .tcard--portrait { display: flex; grid-row: auto; }
  .aditi .tcard, .aditi .tlist--lead .tcard { padding: 22px 20px; }
  .aditi .tlist--lead .tcard q { font-size: 18px; }
  .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; }
}


/* ==========================================================================
   Design decisions made after the testimonials page was extracted, kept out
   of aditi-testimonials-map.css so that file stays purely "Divi DOM -> design".

   LOAD ORDER: aditi-testimonials.css, this, aditi-testimonials-map.css.
   ========================================================================== */

/* Divi's reset gives `body { font-weight: 500 }`, which every unstyled
   paragraph inherits - quote lines wrap a line early. The coded page assumed
   the browser default of 400. */
.aditi { font-weight: 400; }

/* CRM portrait cards: equal height per row, header divider at a consistent
   height. The coded page does this with `@supports (grid-template-rows:
   subgrid)`, but Divi's static-CSS combiner can move that block out of effect
   on the import and subgrid then silently does nothing. Do it with plain
   flexbox instead:

   1. the `.tlist--crm` grid already stretches every card, and making each
      card a flex column whose quote grows (`flex: 1`) keeps the card bottoms
      level;
   2. the `.t-head` (avatar + name + role) is fixed to one height so the
      divider lands at the same place whether or not a role wraps to two
      lines - which is what was making the quotes start at different heights
      across a row.
   Nothing here needs subgrid or `display: contents` to survive. */
.aditi .ad-tlist-crm.et_pb_column {
  grid-template-rows: none;
  /* The coded row gap comes from `.tcard--portrait { margin-top: 20px }` while
     `row-gap` is 0. On the import that margin lands inside the Text-module
     wrapper and no gap shows between rows, so put the gap on the grid itself -
     it applies whichever element (the figure or its Text-module wrapper) ends
     up being the grid item - and zero the card margin so it is not doubled.
     The 20px above the group already comes from `.ad-cards-row-crm`. */
  row-gap: 20px;
}
/* No per-card margin - `:first-child` inside the Text-module wrapper matched
   EVERY card and pushed only the first card of each row down, breaking the
   row's top alignment. Row gap is `row-gap` above; the 20px above the whole
   group is folded into `.ad-cards-row-crm` in the map. */
.aditi .ad-tlist-crm .tcard--portrait { margin: 0; }
.aditi .ad-tlist-crm .tcard--portrait {
  display: flex;
  flex-direction: column;
  grid-row: auto;
}
.aditi .ad-tlist-crm .tcard--portrait > q,
#et-boc .et-l .aditi .ad-tlist-crm .tcard--portrait > q { flex: 1 1 auto; }
.aditi .ad-tlist-crm .tcard--portrait .t-head {
  align-items: center;
  flex: 0 0 auto;
}
/* Only while the cards are side by side (2-up / 3-up): border-box height for
   name (20) + a two-line role (38) + 18 padding + 1 border, so the divider is
   level across a row whether or not a role wrapped. Single column (phone) has
   nothing to line up with, so the head takes its natural height. */
@media (min-width: 701px) {
  .aditi .ad-tlist-crm .tcard--portrait .t-head { min-height: 82px; }
}


/* ==========================================================================
   Native Divi modules, mapped onto the testimonials page design.

   Sibling of ../pilot-certificates/aditi-testimonials-map.css. ZERO Code
   modules: every testimonial is a Text module holding one `.tcard` <figure>
   verbatim, collapsed to the grid item with display:contents (the same trick
   the certificates person cards use). The hero, four section heads, the
   closing reference band and the buttons are real editable modules.

   LOAD ORDER: aditi-testimonials.css, aditi-testimonials-overrides.css, then this.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Import-stability contract (fonts + the Customizer-movable boxes).
   -------------------------------------------------------------------------- */
#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,
#page-container .aditi .kicker .et_pb_text_inner,
#page-container .aditi .kicker .et_pb_text_inner p { font-family: var(--head) !important; }

/* --------------------------------------------------------------------------
   1. Divi chrome removal, section + row padding.
   -------------------------------------------------------------------------- */
.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;
}

.aditi .ad-row.et_pb_row:not(.ad-hero-panel),
#page-container .aditi .ad-row.et_pb_row:not(.ad-hero-panel) {
  padding: 0 !important;
  display: block !important;
}
.aditi .ad-row.et_pb_row { margin-left: auto; margin-right: auto; }

.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--panel + .aditi.sec { border-top: 0; }

@media (max-width: 980px) {
  .aditi.sec, #page-container .aditi.sec { padding: 52px 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; }
}
@media (max-width: 700px) {
  .aditi.sec, #page-container .aditi.sec { padding: 44px 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; }
}

/* --------------------------------------------------------------------------
   2. Headings and the eyebrow.
   -------------------------------------------------------------------------- */
.aditi .ad-h .et_pb_module_heading { padding-bottom: 0; margin: 0 0 10px; }
.aditi .head .ad-h .et_pb_module_heading { margin-bottom: 0; }
.aditi .ad-hero-h .et_pb_module_heading,
#et-boc .et-l .aditi .ad-hero-h .et_pb_module_heading {
  font-size: clamp(30px, 4.1vw, 50px); line-height: 1.1; font-weight: 700;
  max-width: 22ch; margin: 0 0 22px; color: var(--navy);
}

/* The eyebrow Text module holds `<span class="bar"></span><span
   class="kicker">` inline - one line box. `.bar` has no display rule in the
   base sheet and paints nothing on either side; left as-is. */
.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; }

/* `.head` bottom margin (36px, 28px at phone) - below 980px Divi zeroes the
   last column in a row, which is exactly the head column. */
.aditi .ad-head-row > .ad-head-col.et_pb_column,
#page-container .aditi .ad-head-row > .ad-head-col.et_pb_column { margin-bottom: 36px; }
@media (max-width: 700px) {
  .aditi .ad-head-row > .ad-head-col.et_pb_column,
  #page-container .aditi .ad-head-row > .ad-head-col.et_pb_column { margin-bottom: 28px; }
}

/* --------------------------------------------------------------------------
   3. 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;
  padding: 15px 28px;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   4. Hero. One stacked column, panel frame from `.panel-light` on the row.
   -------------------------------------------------------------------------- */
.aditi .ad-hero-panel.et_pb_row,
#page-container .aditi .ad-hero-panel.et_pb_row {
  padding: 56px 44px !important;
  margin-left: auto; margin-right: auto;
}
.aditi .ad-hero-panel > .ad-hero-col.et_pb_column {
  width: 100% !important; margin: 0 !important; padding: 0 !important;
}
/* Copy rhythm is all from the base sheet (`.kicker` 14px, `.hero h1` 22px,
   `.hero .lead` 32px). The one gap with no home is the 36px the coded
   `.hero .btns` flex row carried beneath it; the bare button wrappers here
   are inline-block (bottom margin does not extend the column), so it lands as
   padding on the copy column. */
.aditi .ad-hero-panel > .ad-hero-col.et_pb_column,
#page-container .aditi .ad-hero-panel > .ad-hero-col.et_pb_column { padding-bottom: 36px !important; }

@media (max-width: 980px) {
  .aditi .ad-hero-panel.et_pb_row,
  #page-container .aditi .ad-hero-panel.et_pb_row { padding: 42px 30px !important; }
  .aditi .ad-hero-col .et_pb_module { margin-bottom: 0 !important; }
  .aditi .ad-hero-col .ad-eyebrow { margin-bottom: 14px !important; }
}
@media (max-width: 700px) {
  .aditi .ad-hero-panel.et_pb_row,
  #page-container .aditi .ad-hero-panel.et_pb_row { padding: 30px 22px !important; }
  .aditi .ad-hero-col .et_pb_button_module_wrapper { display: block; width: 100%; margin: 0 0 10px !important; }
  .aditi .ad-hero-col .et_pb_button_module_wrapper:last-child { margin-bottom: 0 !important; }
  .aditi .ad-hero-col .ad-btn.et_pb_button { display: block; width: 100%; }
}

/* --------------------------------------------------------------------------
   5. Testimonial cards.

   The card list columns carry the real `tlist tlist--lead` / `tlist
   tlist--crm` classes, so every `.tlist*` rule in the base sheet (the grid,
   the per-list card padding, the 21px lead-card quote, the subgrid) applies
   with no restatement. Each `.ad-tcard` Text module then only needs its box
   removed with display:contents so the `.tcard` <figure> is the direct grid
   item - the certificates person-card fix; the card CSS is all descendant
   selectors so nothing breaks.
   -------------------------------------------------------------------------- */
.aditi .ad-tcard.et_pb_text,
.aditi .ad-tcard.et_pb_text > .et_pb_text_inner { display: contents; }

/* Divi may force `display: flex` on columns; keep the grid explicit at the
   same targeted specificity as the base `.tlist` rule so it cannot lose. */
.aditi .ad-tlist.et_pb_column { display: grid; }

/* The CRM subgrid is restated flat in aditi-testimonials-overrides.css - the
   base sheet builds it inside `@supports`, which Divi's static-CSS combiner
   can reorder past the point where it takes effect. It lives in the overrides
   file because check-native-css.js is media-query blind and would read a
   media-scoped override of a design value as a cascade clash. */

/* the CRM grid sits under Sandeep's lead card in section 4 - the coded page's
   `.tlist + .tlist { margin-top: 20px }` spans the row boundary here */
/* Gap above the CRM grid: 20px for the coded `.tlist + .tlist` gap under
   Sandeep's card, plus 20px the coded `.tcard--portrait` carried as its own
   margin-top (dropped per-card in the overrides so a row stays top-aligned). */
.aditi .ad-cards-row-crm { margin-top: 40px; }

/* --------------------------------------------------------------------------
   6. Closing reference band. `.ad-secmore` Text module holds `.sec-more`
   verbatim; it sits alone in its row so the coded `margin-top: 24px` is
   dropped.
   -------------------------------------------------------------------------- */
.aditi .ad-secmore .sec-more { margin-top: 0; }
.aditi .ad-secmore .et_pb_text_inner > .sec-more { display: flex; }

/* --------------------------------------------------------------------------
   7. Front-end ID guard for button colours.
   -------------------------------------------------------------------------- */
#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 { border-radius: 4px; line-height: 1; }