/* NAAL Expertise page — reproduces Services.html reference */
/* Reference Wrap is content-box: 1240 of CONTENT plus 32px padding = 1304. */
.ex-wrap{max-width:1304px;margin:0 auto;padding-left:32px;padding-right:32px;box-sizing:border-box}
.ex-eyebrow{font-family:var(--naal-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9C7734;margin:0 0 18px}
.ex-eyebrow.dark{color:#DBC28C}
/* Accordion */
.ex-acc{padding-top:24px;padding-bottom:112px}
.ex-acc-list{border-top:1px solid #D9D9D6}
.ex-row{border-bottom:1px solid #D9D9D6;padding:34px 0;cursor:pointer}
.ex-row-head{display:flex;align-items:center;justify-content:space-between;gap:20px}
.ex-row-left{display:flex;align-items:center;gap:20px}
.ex-num{font-family:var(--naal-mono);font-size:14px;color:#9C7734}
.ex-ic{color:#9C7734;display:flex}
.ex-row h2{font-family:var(--naal-serif);font-weight:500;font-size:clamp(24px,3vw,38px);letter-spacing:-.01em;margin:0}
.ex-plus{color:#161616;display:flex;transition:transform 320ms cubic-bezier(0.2,0,0,1)}
.ex-row.open .ex-plus{transform:rotate(45deg)}
.ex-body{max-height:0;overflow:hidden;opacity:0;transition:max-height 420ms cubic-bezier(0.2,0,0,1),opacity 320ms ease}
.ex-row.open .ex-body{max-height:340px;opacity:1;margin-top:16px}
.ex-body-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding-left:60px}
.ex-body-grid p{font-size:17px;line-height:1.6;color:#5A5954;margin:0 0 20px}
.ex-tags{display:flex;flex-wrap:wrap;gap:8px}
.ex-tag{font-size:13px;padding:6px 13px;border-radius:999px;border:1px solid #D9D9D6;color:#5A5954}
.ex-media{border-radius:16px;aspect-ratio:4/3;overflow:hidden;background:#F7F5F2}
.ex-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 900ms cubic-bezier(0.2,0,0,1)}
.ex-media:hover img{transform:scale(1.05)}
/* Approach forest band */
.ex-why{background:#0E3B36;color:#fff}
.ex-why .ex-wrap{padding-top:112px;padding-bottom:112px}
.ex-why-head{max-width:640px;margin-bottom:48px}
.ex-why-head h2{font-family:var(--naal-serif);font-weight:500;font-size:clamp(32px,4vw,50px);line-height:1.06;letter-spacing:-.015em;margin:18px 0 0}
.ex-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ex-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:36px;height:100%;box-sizing:border-box}
.ex-card .ex-cic{color:#DBC28C;margin-bottom:20px;display:flex}
.ex-card h3{font-family:var(--naal-serif);font-weight:500;font-size:22px;color:#fff;margin:0 0 10px}
.ex-card p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.72);margin:0}
/* Reference site.css keeps .acc-row.open .acc-body at max-height:340px at EVERY
   width - it has no mobile override, so the panel clips harder once the grid
   stacks. The 900px step here was invented; removed to stay faithful (same
   deliberate clip already flagged for the 340px desktop value). */
@media (max-width:860px){.ex-body-grid{grid-template-columns:1fr}.ex-why-grid{grid-template-columns:1fr}}


/* ---------- Expertise hero ----------
   Measured against Services.html at 1536px. The hero section carries the
   shared #about-hero hook; expertise.css only loads on this page, so these
   values apply here alone. */

/* Reference h1: max-width 1020, centred; the italic phrase uses the 400
   italic face, the only italic in the reference webfont. */
/* Reference h1 is display:inline-block - load-bearing: the parent's line-box
   strut reserves descender space below it that a block h1 never creates, so as
   a block the hero came up short at every width below 1280. */
#about-hero h1{display:inline-block;max-width:1020px;margin-left:auto;margin-right:auto;font-family:var(--naal-serif)}
/* font-weight not forced: fonts.css declares italic at 400 only. */

/* Reference lede: max-width 640, centred, and no bottom margin (the theme
   gives every <p> 0.9rem the reference does not have). */
#about-hero .elementor-widget-text-editor p{max-width:640px;margin-left:auto;margin-right:auto;margin-bottom:0}


/* ---------- Heading line-heights ----------
   Neither heading sets a line-height in the reference, so both inherit the
   body 1.55. The theme's h1-h6 reset of 1.2 shortened the accordion row head
   by 13.3px each (4 rows = 53.2) and every Why card by 7.7px. */
.ex-row h2{line-height:1.55}
.ex-card h3{line-height:1.55}

/* ---------- Eyebrow box ----------
   The reference Eyebrow is an inline-flex inside a block, so it occupies a
   24.8px line box and carries no bottom margin - the 18px gap comes from the
   heading's margin-top alone. As a block <p> it measured 18.6px, leaving the
   Why header 6.2px short. */
p.ex-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  line-height:1.55;
  letter-spacing:.14em;
  margin:0;
}

/* Hero eyebrow: Elementor's per-widget CSS is (0,4,0), so the family needs an
   id-scoped rule to reach the design-system mono stack. */
#about-hero .naal-eyebrow .elementor-heading-title{font-family:var(--naal-mono)}