/* NAAL About page sections — reproduces About.html reference exactly */
/* Reference Wrap is content-box: max-width 1240 applies to the CONTENT, so the
   element measures 1304 with its 32px padding. Under Elementor global
   border-box, 1240 left only 1176 of content and shifted every band 32px right. */
.ab-wrap{max-width:1304px;margin:0 auto;padding-left:32px;padding-right:32px;box-sizing:border-box}
.ab-eyebrow{font-family:var(--naal-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9C7734;margin:0 0 18px}
.ab-eyebrow.dark{color:#DBC28C}
/* Team */
.ab-team{background:#0E3B36;color:#fff}
.ab-team .ab-wrap{padding-top:112px;padding-bottom:112px}
.ab-team-head{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;align-items:end;margin-bottom:48px}
.ab-team-head h2{font-family:var(--naal-serif);font-weight:500;font-size:clamp(34px,4.4vw,56px);line-height:1.05;letter-spacing:-.015em;margin:18px 0 0}
.ab-team-head p{font-size:17px;line-height:1.6;color:rgba(255,255,255,.72);margin:0}
.ab-team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ab-person{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#0A2C28}
.ab-person img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 900ms cubic-bezier(.2,0,0,1)}
.ab-person:hover img{transform:scale(1.05)}
.ab-person .ab-meta{position:absolute;left:20px;bottom:20px;right:20px;pointer-events:none}
.ab-person .ab-name{font-family:var(--naal-serif);font-weight:500;font-size:22px;color:#fff}
.ab-person .ab-role{font-size:14px;color:#DBC28C}
/* BigWord */
.ab-big{padding-top:120px;padding-bottom:40px;text-align:center}
.ab-big .ab-word{font-family:var(--naal-serif);font-weight:600;font-size:clamp(64px,18vw,260px);line-height:.92;letter-spacing:-.02em;color:#161616;margin:24px 0}
.ab-big p{font-size:19px;line-height:1.6;color:#5A5954;max-width:640px;margin:0 auto}
/* Values */
.ab-values{background:#F7F5F2}
.ab-values .ab-wrap{padding-top:112px;padding-bottom:112px}
.ab-values-head{max-width:640px;margin-bottom:48px}
.ab-values-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}
.ab-values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ab-value{background:#fff;border:1px solid #EFEDE9;border-radius:16px;padding:32px;height:100%;box-sizing:border-box}
.ab-value .ab-ic{width:48px;height:48px;border-radius:12px;background:#F6EFDF;display:flex;align-items:center;justify-content:center;color:#9C7734;margin-bottom:20px}
.ab-value h3{font-family:var(--naal-serif);font-weight:500;font-size:22px;margin:0 0 10px}
.ab-value p{font-size:15px;line-height:1.55;color:#5A5954;margin:0}
/* Story */
.ab-story .ab-wrap{padding-top:112px;padding-bottom:112px}
.ab-story-img{border-radius:24px;aspect-ratio:21/9;background:#F7F5F2;margin-bottom:56px;overflow:hidden}
.ab-story-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 900ms cubic-bezier(.2,0,0,1)}
.ab-story-img:hover img{transform:scale(1.05)}
.ab-story-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:start}
.ab-story-grid h2{font-family:var(--naal-serif);font-weight:500;font-size:clamp(30px,3.6vw,46px);line-height:1.08;letter-spacing:-.015em;margin:18px 0 0}
.ab-story-grid p{font-size:18px;line-height:1.6;color:#5A5954;margin:0 0 16px}
.ab-arrow{display:inline-flex;align-items:center;gap:8px;color:#0E3B36;font-weight:500;text-decoration:none;margin-top:16px}
.ab-arrow svg{transition:transform 320ms cubic-bezier(0.2,0,0,1)}
.ab-arrow:hover svg{transform:translateX(5px)}
/* Reference site.css has exactly ONE breakpoint and it only ever rewrites
   grid-template-columns - gaps are never touched:
     @media(max-width:860px){.grid2{1fr} .grid3{1fr} .grid4{1fr 1fr}}
   grid3 (the team grid) collapses to a SINGLE column, and there is no 520px
   breakpoint at all. The previous rules invented both a 2-column team grid
   and a 520px step, and shrank the grid2 gap from 56 to 28. */
@media (max-width:860px){
  .ab-team-head,.ab-story-grid{grid-template-columns:1fr}
  .ab-team-grid{grid-template-columns:1fr}
  .ab-values-grid{grid-template-columns:1fr 1fr}
}



/* ---------- About hero ----------
   Measured against About.html at 1536px. */

/* Reference h1: max-width 1000, centred; the italic word uses the 400 italic
   face (the only italic in the reference webfont) - 500 italic renders wider. */
/* The reference h1 is display:inline-block, not block. That is load-bearing:
   an inline-block sits in a line box, so the parent's strut reserves descender
   space BELOW it that a block h1 never creates. The gap to the lede is 26px
   plus that residue - 0.5px at 1024, 3.15px at 390 - and as a block the hero
   came up short at every width under 1280, shifting the whole page up.
   Centring comes from the parent's text-align:center, so the auto margins
   compute to 0 exactly as they do in the reference. */
#about-hero h1{display:inline-block;max-width:1000px;margin-left:auto;margin-right:auto}
/* font-weight not forced: fonts.css declares italic at 400 only. */

/* Reference lede: max-width 660, centred. */
/* The theme gives every <p> a 0.9rem bottom margin; the reference lede has
   none, which was making the hero 14.4px taller than the reference. */
#about-hero .elementor-widget-text-editor p{max-width:660px;margin-left:auto;margin-right:auto;margin-bottom:0}


/* ---------- Eyebrow specificity ----------
   Every eyebrow is a <p class="ab-eyebrow">, and the per-band paragraph rules
   (.ab-team-head p 17px, .ab-big p 19px, ...) are MORE specific than
   .ab-eyebrow, so the eyebrows were rendering at each band's body size
   instead of 12px. p.ab-eyebrow ties on specificity and wins on order.

   The reference Eyebrow is an inline-flex inside a block, so it sits in a
   24.8px line box and carries no bottom margin - the 18px gap comes from the
   heading's margin-top alone. */
p.ab-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  line-height:1.55;
  letter-spacing:.14em;
  margin:0;
}


/* Reference .ab-value h3 has no explicit line-height and inherits the body
   1.55 (34.1px at 22px). The theme's h1-h6 reset of 1.2 shortened it to
   26.4px, which made every value card 7.6px shorter than the reference. */
.ab-value h3{line-height:1.55}

/* ---------- Display font stack ----------
   Elementor appends only ", Sans-serif" after a family name and exposes no
   fallback-list control, so the hero h1 and the CTA heading were rendering
   with the wrong fallback stack. Point them at the design-system token
   (tokens/typography.css --font-display). The family stays editable in
   Elementor; only the fallback tail is corrected here. */
#about-hero h1{font-family:var(--naal-serif)}
/* Hero eyebrow: the widget carries .naal-eyebrow for its box; the family needs
   an id-scoped rule because Elementor's per-widget CSS is (0,4,0). */
#about-hero .naal-eyebrow .elementor-heading-title{font-family:var(--naal-mono)}

/* The per-band paragraph rules (.ab-big p, .ab-story-grid p) are (0,2,0) and
   were also overriding the eyebrow's COLOUR and max-width, not just its size -
   'Our reason for being' and 'Our story' rendered body-grey instead of gold.
   The dark variant is re-stated at (0,3,0) so it still wins on the team band. */
p.ab-eyebrow{color:#9C7734;max-width:none}
p.ab-eyebrow.dark{color:#DBC28C}