/* ===========================================================================
   about-us-v2.css — page-unique styles for the clean-room /about-us-v2/ build
   (WP6 About Us, Figma frame 813:147230, 1440x7175).

   Purpose: the NEW About Us sections only —
     - au-nav      : the transparent "Naked" nav (white logo/links/phone, cream CTA)
                     floating over the team photo. The reusable transparent-over-photo
                     nav treatment comes from home-v2.css (.v2nav*); au-specific colour
                     overrides + hooks live here.
     - au-team     : page-unique team intro + 3 alternating team-profile cards over two
                     stacked full-bleed background photos.
     - au-commitment: page-unique commitment intro over a topographic-map bg + a reused
                     basic-text-and-image instance (the same component as op-maincontent).
     - au-approach : reuses the our-approach band (.v2approach from home-v2.css); only an
                     au-* routing hook + a >1440 block are added here.

   Reuse note: the reused components (.v2approach our-approach band, the transparent
   nav treatment) come from home-v2.css, which is loaded ahead of this file via the
   clean-room allow-list — do NOT redefine them here, only override/hook.

   >1440 RULE (LESSONS L5): full-bleed BACKGROUNDS, content centred <=1440. It lives
   here as ONE `@media (min-width:1441px)` block scoped under `.au-page` (mirrors the
   `.op-page` / `.bt-page` blocks). The nav's wide-screen behaviour is PARKED for Hugo
   (H1) — do NOT cap it here.

   New page-unique classes are namespaced `au*` (.aunav, .auteam, .auteam__card,
   .aucommit, .auapproach).
   =========================================================================== */

/* Page base font — set up-front so reused components (e.g. the .v2btn--gold label)
   do not fall back to Times New Roman. Mirrors body.home-v2 / body.best-time-v2 /
   body.our-process-v2; the op-approach gate caught this exact missing base. */
body.about-us-v2 {
  font-family: "Roboto Flex", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Sections inserted by au-* section workers, in page order. */

/* ===== au-nav: global-nav-bar NAKED variant (desktop instance I817:111809;817:114953,
   Naked master 211:378 · tablet Naked 753:102376 · mobile Naked 708:71798). TRANSPARENT nav
   floating OVER the team section's top photo (homepage-hero "naked" treatment) — NOT the white
   .btnav bar. Structure is identical to .btnav (logo left · centred links with gold chevrons ·
   phone + gold CTA right · burger world below 1280); only the COLOURS differ:
     - bar:    TRANSPARENT, position:absolute over the team photo, NO bottom border (Naked).
     - logo:   WHITE (the SVG ships black → recoloured via the path fill, same as .v2nav).
     - links:  WHITE @0.9 text (#ffffff@.9), GOLD chevrons (Vector nodes, --c-gold).
     - phone:  WHITE @0.9 text, GOLD phone icon.
     - CTA:    GOLD bg (#b19f70 / --c-gold), CREAM label (#f9f5f2) — spec ov colour.
     - burger/mob phone (below 1280): WHITE burger bars + GOLD phone icon (Naked tab/mob masters).
   Geometry mirrors .btnav exactly (desktop 82px, sub-1280 64px, centred links gap32, chevron
   gap10, contact gap24, CTA pad 13/26). FLUID per the Cardinal Rule. PARKED for Hugo above 1440
   (H1) — no wide-screen cap. */
.aunav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  height: 64px; display: flex; align-items: center;
  padding: 0 20px 0 24px;                /* Hugo: logo x24 left · right group ends 20px from edge */
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.3);   /* Hugo: naked-nav 1px white @30% stroke (the line under the header) */
}
.aunav__logo { display: flex; align-items: center; color: #fff; }
.aunav__logo svg, .aunav__logo img { height: 16px; width: auto; }   /* mobile/tablet logo h16 */
.aunav__logo svg path { fill: #fff; fill-opacity: 1; }              /* logo SVG ships black → white over the photo */
.aunav__links, .aunav__contact { display: none; }   /* burger world below 1280 */
.aunav__mob { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.aunav__mobphone { display: flex; align-items: center; }
.aunav__mobphone .ic { width: 24px; height: 24px; color: var(--c-gold); }   /* #ic-phone is a STROKE icon -> colour via currentColor (Paul 2026-06-15) */
.aunav__burger {
  width: 28px; height: 20px; display: flex; flex-direction: column; justify-content: space-between;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.aunav__burger span { display: block; height: 2px; width: 100%; background: #fff; }   /* WHITE burger over the photo */

/* Light state whenever the page is scrolled at all — Naked ONLY at scroll position 0,
   eased crossfade both ways, identical to the homepage rule (Hugo amendment v2 2026-07-31,
   js/home-v2.js setupScrollNav). Mirrors the Light component 211:179 exactly as .btnav
   builds it: white bar, black/90 text+logo+burger, rgba(0,0,0,.07) rule; the CTA is gold
   in both variants. 300ms ease-in-out = the shared nav easing. */
.aunav { transition: background-color .3s ease-in-out, border-color .3s ease-in-out; }
.aunav__logo svg path { transition: fill .3s ease-in-out; }
.aunav__burger span { transition: background-color .3s ease-in-out; }
.aunav__links a, .aunav__links a span, .aunav__phone { transition: color .3s ease-in-out; }
.aunav.is-light { background: #fff; border-bottom-color: rgba(0,0,0,.07); }
.aunav.is-light .aunav__logo svg path { fill: #000; }
.aunav.is-light .aunav__burger span { background: #000; }
.aunav.is-light .aunav__links a { color: rgba(0,0,0,.9); }
.aunav.is-light .aunav__links a span { color: rgba(0,0,0,.9); }
.aunav.is-light .aunav__phone { color: rgba(0,0,0,.9); }
@media (prefers-reduced-motion: reduce) {
  .aunav, .aunav__logo svg path, .aunav__burger span, .aunav__links a, .aunav__links a span, .aunav__phone { transition: none !important; }
}

/* ===== TABLET (768-1279): same naked layout, bar 64px, logo + gold phone + white burger ===== */
@media (min-width: 768px) {
  .aunav { padding: 0 20px 0 24px; height: 64px; }
}

/* ===== DESKTOP (>=1280): transparent bar 82px, centred white links, white phone + gold CTA ===== */
@media (min-width: 1280px) {
  .aunav {
    height: 82px;
    padding: 0 18px 0 34px;              /* Hugo: logo x34 left · contact ends x1422 = 18 right */
    justify-content: space-between;      /* logo left · contact right (links are absolute-centred) */
  }
  .aunav__logo svg, .aunav__logo img { height: 17px; }   /* desktop logo h17 */
  .aunav__mob { display: none; }
  /* Hugo centres the Navigation Links frame on the BAR (x450.5 w539 → centre 720 = bar centre),
     independent of the logo/contact group widths. Absolute-centre on the bar = exact + fluid. */
  .aunav__links {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 32px;
  }
  .aunav__links a {
    display: inline-flex; align-items: center; gap: 10px;   /* Hugo text→chevron gap = 10px */
    color: var(--c-gold);                                   /* the bare &#9662; chevron renders GOLD */
    font-family: "Roboto Flex", sans-serif; font-weight: 400;
    font-size: 12px; line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase;
  }
  /* link TEXT is white @0.9; cancel the trailing letter-spacing advance (lesson 15) so a chevron
     sits at Hugo's gap and the link width matches; harmless on the no-chevron links. */
  .aunav__links a span { display: inline; color: rgba(255,255,255,0.9); margin-right: -1.44px; }
  .aunav__contact { display: flex; align-items: center; gap: 24px; }
  .aunav__phone {
    display: flex; align-items: center; gap: 8px;
    color: rgba(255,255,255,0.9); font-family: "Roboto Flex", sans-serif; font-weight: 400;
    font-size: 12px; line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase;
  }
  .aunav__phone .ic { width: 16px; height: 16px; color: var(--c-gold); }   /* #ic-phone is a STROKE icon -> colour via currentColor (Paul 2026-06-15) */
  .aunav__cta {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-gold); color: #f9f5f2;             /* CREAM label per spec ov colour */
    padding: 13px 26px; font-family: "Roboto Flex", sans-serif; font-weight: 400;
    font-size: 12px; line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase;
  }
  /* CTA width = pad26 + text86 + pad26 = 138 (Hugo); cancel the trailing ls advance (lesson 15). */
  .aunav__cta span { margin-right: -1.44px; }
}

/* About Us team-card link RESTORED (Hugo QA 2026-07-31 item 4: removed 2026-07-21 when it
   had nowhere to go — the bio pages now exist). Design: "SEE FULL BIO >>" gold caps
   text-link with the 14x10 double-arrow (team-profile node large-buttons instance). */
.auteam__biolink {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  color: #b19f70; text-decoration: none;
  font-family: "Roboto Flex", sans-serif; font-weight: 400;
  font-size: 12px; line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase;
}
.auteam__biolink svg { width: 14px; height: 10px; flex: none; fill: none; stroke: #b19f70; stroke-width: 1.4px; }
.auteam__biolink:hover { color: #f9f5f2; }
.auteam__biolink:hover svg { stroke: #f9f5f2; }

/* ===================================================================================
   au-team — team intro + 3 alternating team-profile cards over 2 full-bleed bg photos.
   PAGE-UNIQUE (Figma team-page 817:111809; intro+cards Group I817:111809;817:115304, 1232x2500).
   No tablet/mobile component → DESKTOP gates against the page instance; TABLET/MOBILE are
   ADAPTED (fluid single-column stack), visual-UNVERIFIED (L2).

   BACKGROUND (L14/L16): the section is dark teal #0f1d1f. Two stacked shutterstock photos
   (818:112893 top, 818:112896 bottom) are each a very FAINT luminosity wash — node opacity 0.15
   + blendMode LUMINOSITY over the teal — with a vertical teal gradient vignette so they fade out
   at the top/bottom edges and meet seamlessly. Built as ONE inset:0 background-image div (NOT
   child <img>/<div> layers): photo (luminosity 0.15) UNDER a teal vignette gradient. background-
   size:cover so the bg runs full-bleed edge-to-edge at all widths (L5). Text is white/cream over
   the dark teal.

   DESKTOP layout = the homepage-COLLAGE pattern (L13): the 1232 content band (.auteam__inner,
   centred <=1440) is a position:relative aspect-ratio box; the intro + 3 cards are positioned in %
   (left/top/width as % of the 1232x2500 band) so they scale with it and pass responsive.js. The
   band is capped at 1232 and centred >=1280, so there is no fluid scaling distortion across the
   desktop range — the % positions just keep it robust. Card image side alternates (paul img-L /
   Jon img-R / Carina img-L). measure.js gates each text element's LEFT-X against the spec (root =
   .auteam__inner, origin = the Group origin so the spec x offsets resolve exactly at 1232).

   MOBILE-FIRST base + @768 = the ADAPTED stack (no Figma node): each card is a single column,
   photo-over-text; the intro sits on top. Fluid, UNVERIFIED. @1280 = the desktop collage. Source
   order: tablet block BEFORE desktop (L7).
   =================================================================================== */
.auteam {
  position: relative; isolation: isolate; overflow: hidden;
  box-sizing: border-box; background-color: #0f1d1f;
}
/* ONE inset:0 bg div (L14): the FAINT photo (Figma node opacity 0.15 + LUMINOSITY blend over the
   teal). Render the photo layer at opacity .15 + mix-blend-mode:luminosity over the solid teal
   section (op-getintouch precedent, L16). background-size:cover → full-bleed at all widths (L5). */
/* REBUILT to the node numbers (Hugo QA 2026-07-31 item 3 — the old single cover-sized layer
   scaled the dunes across the whole tall section, so tile 1 sprawled behind the profiles and
   tile 2 arrived early). Node 817:111809 (1440x3038): two 2420x1382 tiles at x-490 (centred,
   490 overhang each side = width 168.06% of the section), tile 1 at y-144 (top-anchored,
   margin-top -10% of width = -144/1440), tile 2 at y1656 = 3038-1382 (exactly bottom-anchored).
   Each tile keeps its own fade (the node's gradient fill sits on each photo RECT), done as a
   mask so the photo dissolves into the teal at its own edges; fixed aspect-ratio 2420/1382
   replaces cover-scaling so the geometry holds at every section height. */
.auteam__bgtile {
  position: absolute; left: 0; right: 0;
  aspect-ratio: 1440 / 1382;   /* the tile's VISIBLE box: full section width, node height 1382@1440 */
  z-index: 0; pointer-events: none;
  /* the 2420-wide image bleeds ±490 INSIDE the box via background sizing (168.06% = 2420/1440),
     so the box itself never exceeds the section and the responsive gate stays clean */
  background: url('../../img/v2/auteam-bg.webp') center / 168.06% auto no-repeat;
  opacity: 0.15; mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.auteam__bgtile--top { top: 0; margin-top: -10%; }   /* node y-144 = -10% of the 1440 width */
.auteam__bgtile--bottom { bottom: 0; }               /* node y1656 = flush with the 3038 bottom */

/* content band */
.auteam__inner {
  position: relative; z-index: 1; box-sizing: border-box;
  width: 100%; max-width: 1232px; margin: 0 auto;
}

/* shared text bits */
.auteam__introtitle {
  margin: 0; font-family: "Bebas Neue", sans-serif; font-weight: 400; color: #fff;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
}
.auteam__introdesc {
  margin: 0; font-family: "Roboto Flex", sans-serif; font-weight: 300; color: rgba(255,255,255,0.8);
}
.auteam__role {
  display: block; font-family: "Roboto Flex", sans-serif; font-weight: 400;
  font-size: 12px; line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase;
  color: #b19f70;
}
.auteam__name {
  margin: 0; font-family: "Bebas Neue", sans-serif; font-weight: 400;
  font-size: 42px; line-height: 42px; letter-spacing: 0; color: #f9f5f2;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
}
.auteam__bio {
  margin: 0; font-family: "Roboto Flex", sans-serif; font-weight: 300;
  font-size: 16px; line-height: 26px; letter-spacing: 0; color: #f9f5f2;
}
.auteam__btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer;
  color: #f9f5f2;
}
.auteam__btntxt {
  font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 14px; line-height: 24px;
  letter-spacing: 1.68px; text-transform: uppercase; color: #f9f5f2;
  text-box-trim: trim-both; text-box-edge: cap alphabetic; margin-right: -1.68px;   /* L15 */
}
.auteam__btnarrow { display: inline-flex; color: #f9f5f2; }
.auteam__photo {
  background-repeat: no-repeat; background-position: center; background-size: cover;
  background-color: #15292c;
}
.auteam__photo--paul   { background-image: url('../../img/v2/auteam-paul.webp'); }
.auteam__photo--jon    { background-image: url('../../img/v2/auteam-jon.webp'); }
.auteam__photo--carina { background-image: url('../../img/v2/auteam-carina.webp'); }

/* ===== MOBILE-FIRST base (<768) = ADAPTED single-column stack (no Figma node, UNVERIFIED) ===== */
.auteam__inner { padding: 96px 24px 64px; display: flex; flex-direction: column; gap: 56px; }
.auteam__intro { display: flex; flex-direction: column; gap: 24px; }
.auteam__introtitle { font-size: 48px; line-height: 46px; }
.auteam__introdesc { font-size: 16px; line-height: 28px; }
.auteam__card { display: flex; flex-direction: column; gap: 24px; }
.auteam__photo { width: 100%; aspect-ratio: 1/1; }
.auteam__text { display: flex; flex-direction: column; gap: 16px; }

/* ===== TABLET (>=768) = same ADAPTED stack, roomier (no Figma node, UNVERIFIED) ===== */
@media (min-width: 768px) {
  .auteam__inner { padding: 120px 64px 96px; gap: 80px; }
  .auteam__introtitle { font-size: 60px; line-height: 56px; }
  .auteam__intro { max-width: 640px; }
  .auteam__card { flex-direction: row; align-items: center; gap: 48px; }
  .auteam__card--jon { flex-direction: row-reverse; }   /* alternate image side on tablet */
  .auteam__photo { flex: 0 0 46%; width: auto; }
  .auteam__text { flex: 1 1 0; min-width: 0; }
}

/* ===== DESKTOP (>=1280) = the art-directed COLLAGE (gated). Content band 1232x2500, centred.
   intro + 3 cards positioned in % of the band (left/top/width). measure gates text LEFT-X. ===== */
@media (min-width: 1280px) {
  /* clear the floating nav: Figma team Group sits at y8908 = 282px below page top (82 nav + 200 gap); 256 bottom = design section height 3038 */
  .auteam { padding-top: 282px; padding-bottom: 256px; }
  .auteam__inner {
    display: block; padding: 0; gap: 0;
    position: relative; width: 1232px; max-width: 1232px;
    aspect-ratio: 1232 / 2500;
  }
  .auteam__inner > * { position: absolute; }

  /* intro: Group x732 y0 w500 (Title Bebas 72/66, Desc Roboto 300 18/30) */
  .auteam__intro { left: 59.4156%; top: 0; width: 40.5844%; display: block; gap: 0; max-width: none; }
  .auteam__introtitle { font-size: 72px; line-height: 66px; }
  .auteam__introdesc { font-size: 18px; line-height: 30px; margin-top: 24px; }   /* y156 - title cap ~ gap */

  /* cards: each is a full-band absolute layer; photo + text positioned in % inside it. We anchor the
     CARD at top:0/left:0 spanning the band and place its children absolutely so each data-key text x
     resolves against the band (the measure root). */
  .auteam__card { left: 0; top: 0; width: 100%; height: 100%; display: block; gap: 0; }
  /* Each card is a FULL-BAND transparent layer, so the last one in the DOM (carina) sat over
     the whole collage and swallowed every click aimed at the cards above it: "see full bio"
     on paul and jon did nothing, carina's worked. The layers must not take pointer events at
     all; their real content does. Fixed 2026-08-14 (Paul), gate: tools/shot/_deadlinks.js. */
  .auteam__card { pointer-events: none; }
  .auteam__card .auteam__text,
  .auteam__card .auteam__photo { pointer-events: auto; }
  .auteam__card .auteam__text { position: absolute; display: block; width: 25.974%; /* 320/1232 */ }
  .auteam__card .auteam__photo { position: absolute; }
  .auteam__role { margin: 0; }
  .auteam__name { font-size: 42px; line-height: 42px; margin: 8px 0 0; }
  .auteam__bio  { margin: 19px 0 0; }            /* role y..name y..bio y from spec */
  .auteam__btn  { margin-top: 16px; }

  /* paul — image LEFT (slot 0,440 600x600) / text RIGHT (x664 y789) */
  .auteam__photo--paul { left: 0; top: 17.6%; width: 48.7013%; aspect-ratio: 1/1; }        /* 440/2500 */
  .auteam__text--paul  { left: 53.8961%; top: 31.56%; }                                    /* 664/1232 ; 789/2500 */

  /* jon — text LEFT (x422 y1482) / image RIGHT (slot 806,1307 426x426) */
  .auteam__text--jon   { left: 34.2532%; top: 59.28%; }                                    /* 422/1232 ; 1482/2500 */
  .auteam__photo--jon  { left: 65.4221%; top: 52.28%; width: 34.5779%; aspect-ratio: 1/1; }/* 806/1232 ; 1307/2500 ; 426/1232 */

  /* carina — image LEFT (slot 174,2000 500x500) / text RIGHT (x738 y2249) */
  .auteam__photo--carina { left: 14.1234%; top: 80%; width: 40.5844%; aspect-ratio: 1/1; } /* 174/1232 ; 2000/2500 ; 500/1232 */
  .auteam__text--carina  { left: 59.9026%; top: 89.96%; }                                  /* 738/1232 ; 2249/2500 */
}

/* ===================================================================================
   au-commitment (818:111514): OUR COMMITMENT. Two stacked parts over a faint topographic
   background (818:111858, frame opacity 0.05 -> tile @0.06 over white, op-maincontent
   precedent, Q-AU-E). Part 1 = commitment intro (heading + paragraph + static gold button)
   centred 900-wide. Part 2 = a basic-text-and-image instance (817:111743), the SAME
   component as op-maincontent — REBUILT here as `aucommit*` classes (About Us does NOT load
   our-process-v2.css, so the op* classes are unreachable; same method, new classes). Image
   LEFT (664 square + bottom-gradient caption) / text RIGHT (Title 464). FLUID (Cardinal
   Rule): desktop two-column flex (bases 664 + gap 104 + 464 = 1232 = content); tab/mob stack
   image-on-top (the Image-first masters 754:109576 / 708:56526). The intro-over-topo part is
   page-unique (adapt tab/mob, UNVERIFIED); the BTI Title/Description gate by node NAME.
   =================================================================================== */
.aucommit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
}
/* Faint topographic texture, full-bleed, behind everything (Figma frame opacity 0.05). */
.aucommit__topo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../../img/v2/aucommit-topo.webp');
  background-repeat: repeat;
  background-size: 1440px auto;
  background-position: center top;
  opacity: 0.02;
  pointer-events: none;
}
.aucommit__inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

/* ---- Part 1: commitment intro (813:164346), centred column ---- */
.aucommit__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40px;             /* Container VERTICAL gap 56 desktop; tighter sub-desktop */
}
.aucommit__heading {
  margin: 0;
  width: 100%;
  max-width: 900px;
  text-align: center;       /* full-width centred-TEXT box, x = the box left (L4), not shrink-wrap */
  font-family: "Roboto Flex", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 2.16px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .9);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.aucommit__para {
  margin: 0;
  max-width: 900px;
  font-family: "Roboto Flex", sans-serif;
  font-weight: 300;
  color: rgba(0, 0, 0, .9);
}
.aucommit__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;            /* text -> arrow breathing room (2026-08-14) */
  box-sizing: border-box;
  padding: 18px 26px;   /* text sits at pad-left 26 → matches the Figma button-text x */
  background: #b19f70;
  text-decoration: none;
}
.aucommit__btntxt {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: #f9f5f2;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
/* The arrow used to be absolute at right:16px inside a 26px right padding, so it overlapped
   the last letter of the label (Paul, 2026-08-14: "bad spacing between text and glyph").
   It is now a normal flex child with a 12px gap, and the button keeps its 26px padding on
   both sides. The Figma box width of 176 no longer applies: the label is the real CTA
   ("plan your safari"), not Hugo's "find out more" placeholder. */
.aucommit__btnarrow {
  display: inline-flex;
  align-items: center;
  color: #f9f5f2;
}

/* ---- Part 2: basic-text-and-image (817:111743) ---- */
.aucommit__block {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.aucommit__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  flex: none;
  box-shadow: 0 0 50px rgba(0, 0, 0, .04);
  overflow: hidden;
}
.aucommit__photo {
  position: absolute;
  inset: 0;
  background-image: url('../../img/v2/aucommit-img-mobile.webp')   /* 700px, 76KB; the 1328px file from 768 up (2026-08-16 sweep) */;
  background-size: cover;
  background-position: center;
}
/* image-caption: bottom gradient overlay (548:52292), gold pin + white@.8 12/16 text */
.aucommit__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
}
.aucommit__caption-pin { display: inline-flex; flex: none; }
.aucommit__caption-txt {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .8);
}
.aucommit__text {
  display: flex;
  flex-direction: column;
  gap: 56px;          /* Container2 VERTICAL gap 56 (title -> description) */
  width: 100%;
  min-width: 0;
}
.aucommit__title {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(0, 0, 0, .8);   /* tab/mob Image-first masters: Title #000@.8; desktop overrides to .9 */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.aucommit__desc {
  margin: 0;
  font-family: "Roboto Flex", sans-serif;
  font-weight: 300;
  color: rgba(0, 0, 0, .9);
}

/* base = mobile (<768): pad 24, intro paragraph 18/28, stacked image-on-top, Title Bebas 40/38 */
.aucommit__inner { padding-top: 64px; padding-bottom: 64px; }
.aucommit__intro { gap: 32px; margin: 0 24px; }
.aucommit__para  { font-size: 18px; line-height: 28px; }   /* desktop 26/40; smaller on phone */
.aucommit__block { gap: 40px; margin: 56px 24px 0; }
.aucommit__title { font-size: 40px; line-height: 38px; }
.aucommit__desc  { font-size: 16px; line-height: 28px; }   /* master 16/28 sub-desktop */

/* tablet (>=768): roomier, image still on top (adapted from 754:109576 image-first) */
@media (min-width: 768px) {
  .aucommit__inner { padding-top: 104px; padding-bottom: 104px; }
  .aucommit__intro { gap: 40px; margin: 0 128px; }
  .aucommit__para  { font-size: 22px; line-height: 34px; }
  .aucommit__block { gap: 56px; margin: 80px 128px 0; max-width: 768px; margin-left: auto; margin-right: auto; }
  .aucommit__media { max-width: 768px; }
  .aucommit__text  { gap: 56px; max-width: 768px; }
  .aucommit__title { font-size: 40px; line-height: 38px; }
  .aucommit__desc  { font-size: 16px; line-height: 28px; }
}

/* desktop (>=1280): intro 900-wide centred (Container pad 200 top); BTI two-column row
   (square photo 664 LEFT | text 464 RIGHT, gap 104), bases sum to 1232 = 1440 - 2*104. */
@media (min-width: 1280px) {
  .aucommit__inner { padding-top: 200px; padding-bottom: 200px; }
  .aucommit__intro { gap: 56px; margin: 0 auto; max-width: 900px; }
  .aucommit__para  { font-size: 26px; line-height: 40px; }
  .aucommit__block {
    flex-direction: row;
    align-items: center;
    gap: 104px;
    margin: 200px 104px 0;
    max-width: none;
  }
  .aucommit__media {
    order: 1;
    flex: 0 1 664px;
    width: 664px;
    max-width: 664px;
  }
  .aucommit__text {
    order: 2;
    flex: 1 1 464px;
    max-width: 464px;
    gap: 56px;
  }
  .aucommit__title { font-size: 36px; line-height: 40px; color: rgba(0, 0, 0, .9); }   /* desktop Title Bebas 36/40, #000@.9 */
  .aucommit__desc  { font-size: 18px; line-height: 30px; }
}

/* >1440 RULE (LESSONS L5): full-bleed BACKGROUND (the teal + photo on the width:100% section is
   already edge-to-edge), CONTENT centred <=1440 — the .auteam__inner band is max-width 1232,
   margin auto, so it stays centred. The nav is parked for Hugo (H1). Confirm block for symmetry. */
@media (min-width: 1441px) {
  .au-page .auteam__inner { margin-left: auto; margin-right: auto; }
  /* au-commitment: topo bg is on the full-width section (inset:0) -> already full-bleed.
     CONTENT centred: .aucommit__inner is max-width 1440 + margin auto, so the intro (900,
     centred) and the BTI band (1232 = 1440 - 2*104) stay centred above 1440. Confirm. */
  .au-page .aucommit__inner { margin-left: auto; margin-right: auto; }
  /* au-approach (.v2approach .auapproach): cream/sand bg full-bleed (background on the section).
     The text + square-image block is a flex ROW whose text column (flex:1 1 464px) grows unbounded
     above 1440, pulling text far-left and the image far-right. Pin the CONTENT row to a centred
     1440 column by growing the section's side padding symmetrically: available inner width =
     1440 - 2*104 = 1232 = text 464 + gap 104 + image 664 (exact), so the columns stop growing and
     the row sits centred; the bg (on the section, width:100%) stays EDGE-TO-EDGE. The square image
     is CONTENT: it stays inside the centred column, it does NOT bleed. Mirrors the op-approach /
     btapproach L5 fix. */
  .au-page .auapproach {
    padding-left: calc((100% - 1440px) / 2 + 104px);
    padding-right: calc((100% - 1440px) / 2 + 104px);
  }
}

@media (min-width: 768px) {
  .aucommit__photo { background-image: url('../../img/v2/aucommit-img-desktop.webp'); }
}