@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-home.css,
   aditi-home-overrides.css, aditi-native-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. */
/* Sized for the full locked positioning sentence, 140 characters, set as the
   H1 on 25-Aug-2026. The previous clamp topped out at 50px against a 22ch
   measure, which was right for the 52-character short form and ran the long
   one to seven lines, taller than the hero figure beside it. */
.aditi .hero h1 { max-width: 30ch; margin-bottom: 22px; font-size: clamp(26px, 3.3vw, 38px); line-height: 1.18; }
.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;
  /* start, not stretch. Stretching made the frame as tall as the whole copy
     column, which left a large empty area above the figure. */
  align-items: start;
}

/* 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;      /* figure stands on the base of the frame */
  justify-content: center;
  /* Small gap above so the head is not jammed against the edge, none below so
     the figure meets the floor. The frame height follows the image. */
  padding: 18px 20px 0;
  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: 100%;
  height: auto;
  /* The source is only 349x377. Rendering it wider upscales and softens it. */
  max-width: 349px;
  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: 26px; }
.aditi .logowall img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1100px;
  margin: 0 auto;
}

/* 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; }

/* The guarantee carries a financial consequence, so it gets a seal rather than
   a handshake: a stamp reads as something you can hold us to, a handshake reads
   as goodwill. Same mark on the homepage and the services page, and it echoes
   the seals already used on the certificate pages. Decorative, so aria-hidden —
   the sentence beside it already says everything. */
.aditi .guarantee-head { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
.aditi .guarantee-head .kicker { margin-bottom: 0; }
.aditi .g-seal { flex: 0 0 auto; line-height: 0; }
@media (max-width: 700px) {
  .aditi .g-seal svg { width: 36px; height: 36px; }
}

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

/* ---------- tag blocks: domains and technologies ---------------------------
   Sixteen domains and fifteen technologies. As label-and-description rows this
   ran to half a screen and stopped being scannable, so each entry is a tag and
   the whole set reads at a glance. Each block runs full width rather than
   sitting in a half column, which would force the tags into a narrow ragged
   stack. */

.aditi .tagblocks { display: flex; flex-direction: column; gap: 30px; margin-top: 36px; }

.aditi .tagblock-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--head);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--mid);
  margin: 0 0 16px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
/* The count doubles as evidence for the stat strip below. */
.aditi .tagblock-label span {
  font-size: 11px;
  color: var(--cyan-deep);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  letter-spacing: .04em;
}

.aditi .taglist { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.aditi .taglist li,
#et-boc .et-l .aditi .taglist li {
  margin: 0;
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--navy);
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 15px;
  white-space: nowrap;
}

.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;
    margin-top: 10px;
  }
  .aditi .lanes--home > .lane .lane-foot { margin-top: 0; }
}

/* Four cards from 27-Aug-2026, when Offer B was added in position 2. Two by
   two rather than four across: four across leaves each card 282px inside the
   1200px Divi row, too narrow for the 19px headings, and the pairing puts the
   two AI offers on one row, which is where a visitor compares them.
   Below 981px the responsive block further down already drops to one column. */
@media (min-width: 981px) {
  .aditi .lanes--home { grid-template-columns: repeat(2, 1fr); }

  @supports (grid-template-rows: subgrid) {
    /* Two rows of cards now, so the four-row track list repeats twice. */
    .aditi .lanes--home { grid-template-rows: repeat(2, auto auto 1fr auto); }
    /* row-gap stays 0 above, or the subgrid spaces each card's own internals
       by the same amount. The gap between the two rows of cards rides on the
       second row's top margin instead. */
    .aditi .lanes--home > .lane:nth-child(n+3) { margin-top: 34px; }
  }
}

/* ---------- 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; }

.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. */
.aditi .tcard .avatar--initials {
  background: var(--navy); color: var(--white); border-color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--head); font-size: 15px; font-weight: 600;
  letter-spacing: .02em;
}
.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;
}
.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; padding: 14px 16px 0; }
  .aditi .hero-media img { max-width: 280px; }
  .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 .taglist li { font-size: 13px; padding: 6px 12px; }
  .aditi .tagblocks { gap: 24px; }
  .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; }
}

/* ---- 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 home page, made after extraction.

   WHY THIS FILE EXISTS
   aditi-pages/css/aditi-home.css is GENERATED. sync-wp-pages.js deletes and
   rewrites the whole css folder from the WordPress export every time it runs.
   Anything edited there is silently lost on the next sync.

   So changes we decide on ourselves live here instead, and load after the
   generated file. Nothing in here is a Divi concern, which is why it is not in
   aditi-divi-bridge.css: these rules should apply wherever the page is served.

   Keep each change commented with who asked for it and why, so a future reader
   can tell a deliberate decision from an accident.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero facts: one per line.

   Dhanashri, reviewing the pilot, 01-Sep-2026.

   The generated rule is `repeat(auto-fit, minmax(240px, 1fr))`, which fills the
   row whenever the container is wide enough. In the hero that produced two
   columns, so the three items read as 2 + 1 with "Accelerate Cloud Application
   Development" sitting beside "Develop Custom Software" and one item stranded
   on the second row. Ragged, and it reads as a mistake rather than a list.

   A single column keeps them as a list, one below the other, at every width.
   Row gap, padding and the top border are inherited from the generated rule
   and deliberately left alone.
   -------------------------------------------------------------------------- */
.aditi .hero-facts { grid-template-columns: 1fr; }


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

   THE BRIEF
   Vikas rejected the Code-module version: marketing cannot edit HTML. He wants
   the first approach, real Divi modules with drag-and-drop editing, and the
   exact UI. This file is what makes those two compatible.

   HOW IT DIFFERS FROM THE BRIDGE VERSION
   The bridge kept the original markup and erased Divi's wrappers, so exactness
   was guaranteed by construction. Native modules cannot do that: Divi decides
   the DOM. So this file maps each module's real DOM onto the original design,
   reusing the values from aditi-home.css rather than inventing new ones.

   Exactness here is engineered and then verified against _preview/original.html,
   not guaranteed. That is the honest cost of drag-and-drop editing.

   LOAD ORDER
   aditi-home.css, then aditi-home-overrides.css, then this file.
   build-native.js concatenates them in that order.

   THE CASCADE TRAP, READ BEFORE ADDING A RESET
   Every design rule in aditi-home.css is `.aditi .something`, specificity
   0,2,0. This file loads last, so any 0,2,0 reset of ours beats the design on
   a tie. That is how `.aditi .et_pb_column { padding: 0 }` silently flattened
   the hero and CTA panels once already. Resets below are therefore either
   scoped to `.ad-bare`, or carry `:not()` guards naming the design classes
   they must not touch. check-native-css.js fails the build if a new one slips
   through.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Divi chrome removal.

   `ad-bare` marks a wrapper that exists only because Divi requires it. These
   never carry design, so erasing their boxes is always safe.
   -------------------------------------------------------------------------- */
body:not(.et-fb) .aditi .ad-bare.et_pb_column,
body:not(.et-fb) .aditi .ad-bare.et_pb_image,
body:not(.et-fb) .aditi .ad-bare .et_pb_image_wrap {
  display: contents;
}

.aditi.et_pb_section { padding: 0; }
/*
 * No blanket `.et_pb_module { margin-bottom: 0 }`.
 *
 * Divi already sets exactly that, so it bought nothing, and at 0,2,0 it beat
 * `.aditi .kicker { margin-bottom: 14px }` at the same specificity because this
 * file loads last. Every kicker on the page lost its 14px gap, which measured
 * as the navy CTA panel coming out 14px short.
 */

/*
 * No blanket `margin-bottom: 0` on columns.
 *
 * Divi sets no bottom margin on a column at desktop width, so the reset bought
 * nothing, and it cost something: a column can carry a design class, and
 * `.aditi .head { margin-bottom: 36px }` is the same 0,2,0 specificity. This
 * file loads last, so the reset won and every section heading lost the 36px
 * gap beneath it.
 *
 * Divi's only column margin is in its mobile block, where it is !important;
 * that is handled in the responsive section at the foot of this file.
 */

/*
 * Rows carry the page's own spacing, EXCEPT the two that are panels. Those get
 * their padding from `.aditi .panel-light` and `.aditi .navy` in the base file,
 * and a blanket reset here would beat both on a tie. Hence the guards.
 */
/*
 * Every `:not()` adds its argument's specificity, so this selector is 0,5,0 and
 * beats any plain 0,3,0 rule of ours. That is how `.ad-sec-more`'s own
 * `padding: 26px 30px` was silently reset to zero, which collapsed the grey
 * "see more" strips from 107px tall to 54px and pulled their text 30px left.
 * Measured, not guessed: shoot.js reported it.
 *
 * Any row that sets its own padding has to be excluded here as well as
 * declaring it.
 */
.aditi .ad-row.et_pb_row:not(.panel-light):not(.navy):not(.ad-sec-more) { padding: 0; }

/*
 * Width is NOT set here, deliberately.
 *
 * Divi gives every row `width: 80%; max-width: 1080px` from Theme Customizer >
 * Layout, and that IS the site's content width. An earlier version forced
 * `width: 100%` here, meaning to "match the site". It did the opposite: it
 * threw away the site's gutter and made this the one page whose rows run wider
 * than every other page's. Leaving the width alone is what actually matches,
 * and it keeps matching if the setting is ever changed.
 */
.aditi .ad-row.et_pb_row { margin: 0 auto; }

/*
 * Divi clears its floated columns with `.et_pb_row::after`. Inside a grid or
 * flex container that pseudo-element becomes a phantom item and opens an empty
 * track, so it has to go, BUT ONLY on the rows we actually convert.
 *
 * An earlier version removed it from every row. The rows we do NOT convert,
 * the guarantee panel and the logo wall, still contain a floated Divi column,
 * and without the clearfix their row collapsed to zero height and the sections
 * below it rode up over them. Listing the converted rows explicitly is verbose,
 * and that is the point: adding a new grid row means adding it here too, and
 * forgetting shows up as a phantom track rather than a silent collapse.
 */
.aditi .ad-hero.et_pb_row::before, .aditi .ad-hero.et_pb_row::after,
.aditi .ad-tagblocks.et_pb_row::before, .aditi .ad-tagblocks.et_pb_row::after,
.aditi .ad-stats.et_pb_row::before, .aditi .ad-stats.et_pb_row::after,
.aditi .ad-trust-grid.et_pb_row::before, .aditi .ad-trust-grid.et_pb_row::after,
.aditi .ad-tlist.et_pb_row::before, .aditi .ad-tlist.et_pb_row::after,
.aditi .ad-sec-more.et_pb_row::before, .aditi .ad-sec-more.et_pb_row::after,
.aditi .ad-cta.et_pb_row::before, .aditi .ad-cta.et_pb_row::after { content: none; }

/* Section rhythm. `.aditi` and `.sec` land on the same element here, and a
   descendant selector cannot match an element against itself, so the base
   file's `.aditi .sec` rules never fire. Restated, values copied from
   aditi-home.css lines 85 to 92. */
.aditi.sec { padding: 64px 0; }
.aditi.sec:first-of-type { padding-top: 0; }
.aditi.sec:last-of-type { padding-bottom: 0; }
.aditi.sec + .aditi.sec { border-top: 1px solid var(--border); }
.aditi.sec--plain + .aditi.sec--plain { border-top: 0; }
.aditi.sec--panel { padding: 0; }
.aditi.sec--panel + .aditi.sec { border-top: 0; }

/* --------------------------------------------------------------------------
   2. Headings and body text.

   The Heading module renders a real <h2>, so `.aditi h2` in the base file
   already styles it. Only Divi's own padding needs cancelling.
   -------------------------------------------------------------------------- */
.aditi .ad-h .et_pb_module_heading { padding-bottom: 0; margin: 0 0 12px; }
.aditi .ad-h:last-child .et_pb_module_heading { margin-bottom: 0; }

/* A Text module wraps its content in .et_pb_text_inner, which would otherwise
   sit between a design class and the paragraph it styles. */
.aditi .et_pb_text > .et_pb_text_inner > p:last-child { margin-bottom: 0; }

/*
 * Nothing is set on .et_pb_text_inner here on purpose.
 *
 * The module wrapper carries `.lead`, so `.aditi .lead` and the hero-specific
 * `.aditi .hero .lead { font-size: 20px }` already apply to it and the inner
 * div inherits. Setting font-size on the inner instead beat that inheritance
 * and pinned the hero lead at 18px, which measured 10px short over three lines.
 */

/* Section head block. In the original `.head` wraps kicker and h2 together. */
/*
 * The 44em measure belongs on the COLUMN, not the row.
 *
 * It was on the row, with `margin-left: 0` to keep the text left-aligned. That
 * cancelled Divi's `.et_pb_row { margin: auto }`, so every section heading
 * left-aligned against the full-width section while every other row stayed
 * centred in the 1080px column. On screen the headings ran to the very edge of
 * the window and nothing lined up with anything.
 *
 * The row now keeps Divi's normal centred width, and the column carries the
 * measure, which is where `.aditi .head` had it in the original. That rule in
 * aditi-home.css already supplies max-width and the 36px bottom margin, so
 * only the kicker spacing is added here.
 */
.aditi .ad-head-col .kicker { margin-bottom: 14px; }

/* --------------------------------------------------------------------------
   3. The cyan accent bar: deliberately NOT drawn.

   The original markup has <span class="bar"></span> and aditi-home.css line 115
   sizes it 6x64. A span is inline, and width and height do not apply to an
   inline element, so it measures 0x0 and the bar has never rendered on the live
   site. Verified in the browser, not assumed.

   Drawing it here would have been a 90px difference in the hero against the
   page Vikas asked us to match, so it stays undrawn.

   To fix the original design instead, one line in aditi-home-overrides.css:
       .aditi .bar { display: block; }
   That shows the bar on BOTH sides and keeps them identical. It is a visible
   change to the live page, so it is Vikas's call, not ours.
   -------------------------------------------------------------------------- */

/*
 * The kicker is a <span> in the original, carrying margin-bottom:14px. Here it
 * is a Text module whose text WordPress wraps in a <p>, and `.aditi p` adds its
 * own 14px, so the gap under every kicker came out doubled. The paragraph is
 * flattened; the module keeps the single 14px from `.aditi .kicker`.
 */
.aditi .kicker .et_pb_text_inner p {
  margin: 0;
  /* Inherit, do not re-declare. Inside a section head this paragraph also
     matches `.aditi .head p`, which is 18px/1.7 meant for the note under the
     heading. That rule targets the <p> directly and so beats anything the
     kicker sets on the wrapper above it, rendering the kicker at 18px. */
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* The kicker class lands on the module wrapper; the text sits one level in, so
   the type rules have to reach it. */
.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);
}

/* --------------------------------------------------------------------------
   4. Buttons.

   The Button module puts our classes on the <a>, so `.aditi .btn` and every
   modifier in the base file already apply. Divi adds a wrapper, a pill radius
   and an arrow glyph on hover; all three are cancelled here.
   -------------------------------------------------------------------------- */
.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; }
/*
 * Pinned on the button element itself, at 0,3,0.
 *
 * `.aditi .btn` in the base file sets line-height 1 and the padding, but Divi
 * gives the anchor several classes of its own and the value that actually won
 * was 1.7 inherited from the row, making every button 11px taller than the
 * original. Stating it here removes the ambiguity entirely.
 */
.aditi .ad-btn.et_pb_button {
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  line-height: 1;
  padding: 15px 28px;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   5. Hero.

   The original split is 1.08fr / .92fr. Divi's nearest column pair is 1_2 +
   1_2, so the row is re-declared as the original grid. The columns then sit in
   the exact proportions the design was drawn at.
   -------------------------------------------------------------------------- */
.aditi .ad-hero.et_pb_row {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 44px;
  align-items: start;
}
.aditi .ad-hero > .et_pb_column { width: auto; margin: 0; float: none; }
.aditi .ad-hero .et_pb_button_module_wrapper { margin-bottom: 0; }

/* `.hero .btns` carries margin-bottom:36px in the original. The buttons are
   separate modules here, so the gap goes above the facts list instead. */
.aditi .ad-hero .ad-facts { margin-top: 36px; }

/* The image module is display:contents, so the <img> becomes the flex child
   that `.aditi .hero-media` expects. That rule already makes this column a
   flex container, so nothing is repeated here. */

/* Facts list. The check mark was an inline <svg> per item; as a background it
   leaves the list as plain editable text. Colour is --cyan-deep, #0092AF. */
.aditi .ad-facts .et_pb_text_inner ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px 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 {
  position: relative;
  padding-left: 25px;
  line-height: 1.45;
}
.aditi .ad-facts .et_pb_text_inner li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  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. Guarantee.

   The seal was an inline <svg>. As a background on the kicker's pseudo-element
   it renders identically and the kicker stays a plain Text module.
   -------------------------------------------------------------------------- */
.aditi .ad-guarantee.et_pb_column { display: block; }
.aditi .ad-seal-head .et_pb_text_inner {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 12px;
}
.aditi .ad-seal-head .et_pb_text_inner::before {
  content: '';
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  background: no-repeat center/44px 44px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' width='44' height='44' fill='none'%3E%3Cpath d='M40.20 22.00 A4.05 4.05 0 0 1 38.40 29.90 A4.05 4.05 0 0 1 33.35 36.23 A4.05 4.05 0 0 1 26.05 39.74 A4.05 4.05 0 0 1 17.95 39.74 A4.05 4.05 0 0 1 10.65 36.23 A4.05 4.05 0 0 1 5.60 29.90 A4.05 4.05 0 0 1 3.80 22.00 A4.05 4.05 0 0 1 5.60 14.10 A4.05 4.05 0 0 1 10.65 7.77 A4.05 4.05 0 0 1 17.95 4.26 A4.05 4.05 0 0 1 26.05 4.26 A4.05 4.05 0 0 1 33.35 7.77 A4.05 4.05 0 0 1 38.40 14.10 A4.05 4.05 0 0 1 40.20 22.00 Z' fill='%231D3461'/%3E%3Ccircle cx='22' cy='22' r='13.6' stroke='%23FFFFFF' stroke-width='1.1' stroke-opacity='.55'/%3E%3Cpath d='M16.4 22.3l4.2 4.2 7.4-8.3' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.aditi .ad-quote .et_pb_text_inner {
  font-family: var(--head);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--navy);
}
.aditi .ad-sig .et_pb_text_inner { font-size: 14px; color: var(--mid); margin-top: 16px; }

/* --------------------------------------------------------------------------
   7. Lane cards, built from the Call To Action module.

   CTA is the only stock Divi module with a title, a rich-text body AND a button
   in one module. That matters: the card has to be a single grid item, and a
   Blurb plus a separate Button module would be two.

   Divi's DOM:
     .et_pb_cta
       .et_pb_promo_description  >  h2.et_pb_module_header  +  div (content)
       a.et_pb_promo_button
   -------------------------------------------------------------------------- */
/*
 * All four cards in ONE grid, on the column, not split across two rows.
 *
 * The original lays the four out in a single grid, so every card takes the
 * height of the tallest. Two separate Divi rows can only equalise within each
 * row, and the cards kept measuring short against the original however the
 * internal spacing was adjusted. The 34px row-gap is the gap the original puts
 * between its two rows of cards.
 */
.aditi .ad-lanes.et_pb_column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
  row-gap: 34px;
  /*
   * Equal rows, not just equal cards within a row.
   *
   * The original uses one subgrid across all four cards, so every card takes the
   * height of the tallest of the four. A plain grid sizes each row on its own
   * content, which left the second pair 25px shorter than the first. 1fr on the
   * auto rows makes both rows the height of the taller, which is the same
   * result the subgrid produces.
   */
  grid-auto-rows: 1fr;
}

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

/*
 * The divider above the button.
 *
 * The original card ends with `.lane-foot`, a full-width block carrying
 * `border-top: 1px solid var(--border)` and 22px of padding above the button.
 * A CTA has no such wrapper: its button is a direct child of the card. So the
 * rule goes on the bottom edge of the description instead, which flex:1 pushes
 * to the same place, and the button carries the 22px below it.
 *
 * Without this the cards were 37px shorter than the originals and had no line
 * above "Know more".
 */
.aditi .ad-lane .et_pb_promo_description {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  /* The original body paragraph carries margin-bottom:14px above the divider.
     Our last-child rule zeroes that margin, so the gap moves here. */
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.aditi .ad-lane .et_pb_module_header {
  font-family: var(--head);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
  margin: 0 0 6px;
  padding: 0;
}
.aditi .ad-lane .lane-line { font-size: 15px; color: var(--mid); margin: 0 0 14px; }
.aditi .ad-lane p { font-size: 15px; line-height: 1.65; color: var(--black); margin: 0 0 14px; }
.aditi .ad-lane p:last-child { margin-bottom: 0; }

/* The button is the card's foot: pushed down, with the divider above it. */
/* margin-top:auto pins the button to the foot, so the divider above it lands
   at the same height in all four cards even when the copy runs to a different
   number of lines. */
.aditi .ad-lane .et_pb_promo_button.et_pb_button {
  align-self: flex-start;
  margin: 22px 0 0;
  /* Values copied from `.aditi .btn--sm` in aditi-home.css line 719, which the
     original card button uses. 11px/20px/14px was a guess and measured 2px too
     tall and 13px too narrow. */
  padding: 10px 18px;
  font-family: var(--head);
  font-size: 13.5px;
  /* The promo button carries none of our btn classes, so nothing else sets
     its line-height and it inherited 1.7 from the row, 11px too tall. */
  line-height: 1;
  font-weight: 600;
  line-height: 1;
  background: transparent;
  border: 2px solid var(--navy);
  border-radius: 4px;
  color: var(--navy);
}
.aditi .ad-lane .et_pb_promo_button.et_pb_button:hover {
  background: var(--navy);
  color: var(--white);
  padding: 10px 18px;
}
.aditi .ad-lane .et_pb_promo_button::after { display: none !important; content: none !important; }

/* --------------------------------------------------------------------------
   8. Tag blocks.
   -------------------------------------------------------------------------- */
.aditi .ad-tagblocks.et_pb_row { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 36px; }
.aditi .ad-tagblocks > .et_pb_column { width: auto; margin: 0; float: none; }

/* --------------------------------------------------------------------------
   9. Stat strip.

   One bordered strip divided into equal cells. The 1px grid gap over a
   border-coloured background draws the dividers, so no cell carries a border of
   its own and nothing doubles up at the joins.
   -------------------------------------------------------------------------- */
.aditi .ad-stats.et_pb_row {
  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 .ad-stats > .et_pb_column { width: auto; margin: 0; float: none; }
.aditi .ad-stat.et_pb_blurb { background: var(--white); padding: 28px 26px; height: 100%; }
.aditi .ad-stat .et_pb_module_header {
  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;
  margin: 0;
  padding: 0;
}
.aditi .ad-stat .et_pb_blurb_description {
  display: block;
  font-family: var(--head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mid);
  margin-top: 6px;
}
.aditi .ad-stat .et_pb_blurb_content { max-width: none; text-align: left; }

/* --------------------------------------------------------------------------
   10. Logo wall. Stacked, capped, centred.
   -------------------------------------------------------------------------- */
/* `.aditi .logowall` in the base file already sets flex, column and the 26px
   gap on this element. Restating them here would only risk drift. */

/* --------------------------------------------------------------------------
   11. Trust cards, from the Blurb module.
   -------------------------------------------------------------------------- */
.aditi .ad-trust-grid.et_pb_row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.aditi .ad-trust-grid > .et_pb_column { width: auto; margin: 0; float: none; }

.aditi .ad-trust.et_pb_blurb {
  height: 100%;
  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 .ad-trust .et_pb_blurb_content { max-width: none; text-align: left; }
.aditi .ad-trust .et_pb_module_header {
  font-family: var(--head);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy);
  margin: 0 0 8px;
  padding: 0;
}
.aditi .ad-trust .et_pb_blurb_description { font-size: 15px; line-height: 1.65; color: var(--mid); }

/* --------------------------------------------------------------------------
   12. Testimonials, from the Testimonial module.

   Divi's DOM puts the portrait FIRST and the author and role after the quote:

     .et_pb_testimonial
       .et_pb_testimonial_portrait
       .et_pb_testimonial_description
         .et_pb_testimonial_description_inner   (the quote)
         .et_pb_testimonial_author
         .et_pb_testimonial_meta

   The design needs quote first, then a footer of portrait + name + role. Making
   the description wrapper display:contents lifts its three children up to be
   grid items alongside the portrait, so named grid areas can place all four in
   the original order without touching the markup.
   -------------------------------------------------------------------------- */
.aditi .ad-tlist.et_pb_row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.aditi .ad-tlist > .et_pb_column { width: auto; margin: 0; float: none; }

/*
 * Divi's testimonial.css sets `line-height: 1.5` on the card, which beats the
 * 1.6 the page inherits from `.aditi` and made every quote sit tighter than the
 * original. Restored explicitly.
 */
.aditi .ad-tcard.et_pb_testimonial {
  line-height: 1.6;
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-areas:
    'quote quote'
    'face  name'
    'face  role';
  align-content: start;
  column-gap: 13px;
  height: 100%;
  margin: 0;
  padding: 26px 30px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-left: 4px solid var(--cyan);
  border-radius: 0 6px 6px 0;
}
.aditi .ad-tcard::before { content: none; }
.aditi .ad-tcard .et_pb_testimonial_description { display: contents; }

.aditi .ad-tcard .et_pb_testimonial_description_inner {
  grid-area: quote;
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy);
  font-style: italic;
  margin-bottom: auto;
  padding-bottom: 20px;
}
.aditi .ad-tcard .et_pb_testimonial_portrait {
  grid-area: face;
  align-self: center;
  width: 52px;
  height: 52px;
  min-height: 52px;
  margin: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background-size: cover;
  background-position: center;
}
.aditi .ad-tcard .et_pb_testimonial_portrait::before { content: none; }
.aditi .ad-tcard .et_pb_testimonial_author {
  grid-area: name;
  align-self: end;
  font-family: var(--head);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
}
.aditi .ad-tcard .et_pb_testimonial_meta {
  grid-area: role;
  align-self: start;
  font-size: 13.5px;
  color: var(--mid);
  line-height: 1.4;
  padding: 0;
}

/* --------------------------------------------------------------------------
   13. "See more" strip.
   -------------------------------------------------------------------------- */
.aditi .ad-sec-more.et_pb_row {
  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 .ad-sec-more > .et_pb_column { width: auto; margin: 0; float: none; }
.aditi .ad-more-text { flex: 1 1 22em; }
.aditi .ad-more-action { flex: 0 0 auto; }
.aditi .ad-more-b .et_pb_text_inner b {
  display: block;
  font-family: var(--head);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 4px;
}
.aditi .ad-more-p .et_pb_text_inner { font-size: 15px; line-height: 1.6; color: var(--mid); }

/* --------------------------------------------------------------------------
   14. Closing CTA.
   -------------------------------------------------------------------------- */
.aditi .ad-cta.et_pb_row {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 44px;
  align-items: center;
}
.aditi .ad-cta > .et_pb_column { width: auto; margin: 0; float: none; }
.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%; }

/* --------------------------------------------------------------------------
   15. Responsive.

   Divi stacks its columns below 980px on its own, but every row above was
   re-declared as a grid, so Divi's stacking no longer applies to them. Each one
   is returned to a single column here.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  /*
   * Divi stacks columns below 980px with
   *   .et_pb_column { width:100% !important; margin-right:0 !important;
   *                   margin-bottom:30px }
   * The !important beats anything we write without it, and the 30px lands on
   * every column, including the grid items in the rows below, adding a gap the
   * design does not have. Our own spacing comes from the grid gaps, so the
   * margin is cleared here, with !important, because nothing else can.
   *
   * Listed per column rather than applied to every column. A blanket reset also
   * hits the section-heading columns, which carry `.head` and its 36px bottom
   * margin, and stripped that gap on mobile only. These are exactly the columns
   * sitting inside a row we converted to grid or flex, where the grid gap
   * already provides the spacing.
   */
  .aditi .ad-bare.et_pb_column,
  .aditi .ad-hero-copy, .aditi .ad-hero-media,
  .aditi .ad-cta-copy, .aditi .ad-cta-actions,
  .aditi .ad-more-text, .aditi .ad-more-action { margin-bottom: 0 !important; }

  .aditi .ad-hero.et_pb_row,
  .aditi .ad-cta.et_pb_row { grid-template-columns: 1fr; gap: 32px; }
  /* The lanes grid lives on the COLUMN, not the row. This rule still said
     .et_pb_row after that move, so it matched nothing and the four cards
     stayed two-up at 390px, 152px too narrow and 392px too tall. */
  .aditi .ad-lanes.et_pb_column { grid-template-columns: 1fr; row-gap: 24px; }
  .aditi .ad-trust-grid.et_pb_row,
  .aditi .ad-tlist.et_pb_row { grid-template-columns: 1fr; }
  .aditi .ad-stats.et_pb_row { grid-template-columns: repeat(2, 1fr); }
  .aditi .ad-tagblocks.et_pb_row { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  /*
   * aditi-home.css has a whole max-width:700px block that this file did not
   * mirror. Anything it targets by a design class still applies. Anything we
   * re-declared onto a Divi wrapper kept its DESKTOP value on phones, which is
   * why the cards, the stat cells and the "see more" strips all measured too
   * tall at 390px. Values copied from aditi-home.css lines 962 to 996.
   */
  .aditi.sec { padding: 44px 0; }
  .aditi .ad-stats.et_pb_row { grid-template-columns: 1fr; }
  .aditi .ad-stat.et_pb_blurb { padding: 22px 20px; }
  .aditi .ad-stat .et_pb_module_header { font-size: 30px; }
  .aditi .ad-tcard.et_pb_testimonial { padding: 22px 20px; }
  .aditi .ad-sec-more.et_pb_row { padding: 22px 20px; }
  .aditi .ad-lane.et_pb_promo { padding: 22px 20px; }

  .aditi .ad-seal-head .et_pb_text_inner::before { flex-basis: 36px; width: 36px; height: 36px; background-size: 36px 36px; }

  /*
   * `.aditi .btn { display: block }` fills the container on phones, and
   * `.sec-more .btn` is pinned to 100%. The card's button is a promo button
   * carrying none of our btn classes, so it needs saying separately.
   */
  .aditi .et_pb_button_module_wrapper { display: block; margin: 0 0 12px; }
  .aditi .ad-btn.et_pb_button { display: block; width: 100%; }
  .aditi .ad-lane .et_pb_promo_button.et_pb_button {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   16. Visual Builder.

   Unlike the bridge version, nothing here depends on erasing module boxes, so
   the builder view is close to the live page. Only the ad-bare wrappers behave
   differently, and those hold no design.
   -------------------------------------------------------------------------- */
body.et-fb .aditi .ad-bare.et_pb_column { display: block; }

/* --------------------------------------------------------------------------
   17. Front-end ID guard for button colours.

   Divi's Theme Customizer emits its button colours under `#page-container`,
   which is an ID and therefore beats every plain class rule of ours no matter
   what order the files load in. aditi-home.css already carries `#et-boc .et-l`
   pairs for exactly this reason, but `#et-boc` only exists INSIDE the Visual
   Builder. On the live page the wrapper is `#page-container`, and nothing was
   guarding that.

   The symptom was the ghost button in the hero rendering with white text on a
   white ground, so "View our work" was invisible while its navy border showed
   correctly: border-color came from us, colour came from Divi.

   Values are the same as the base file's, restated at ID level, not new.
   -------------------------------------------------------------------------- */
#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); }

/* The card button carries none of our btn classes, so it needs its own pair. */
#page-container .aditi .ad-lane .et_pb_promo_button.et_pb_button {
  background: transparent;
  border: 2px solid var(--navy);
  border-radius: 4px;
  color: var(--navy);
}
#page-container .aditi .ad-lane .et_pb_promo_button.et_pb_button:hover {
  background: var(--navy);
  color: var(--white);
}

/*
 * Divi rounds every button to a pill and gives it line-height 1.7em, both at
 * ID level from the customizer, so both need answering here. The line-height
 * was measured making every button 11px taller than the original.
 */
#page-container .aditi .btn,
#page-container .aditi .ad-lane .et_pb_promo_button.et_pb_button {
  border-radius: 4px;
  line-height: 1;
}