/* /about-us — hand-authored page styles (refactor Phase 1, 2026-07-05).
   Replaces the generated markup 1:1: every size, colour and offset below
   is measured from the original render at 1440/1200/1100/1024/810/390
   (Playwright probes + the generated page's own SSR CSS; QA gate:
   tools/qa_baseline.py compare). Breakpoints match the site's:
   <810 phone, 810–1199.98 tablet, >=1200 desktop.
   The hero keeps class yg-10bma76 — enhance.js mounts the og-ambient
   backdrop on it and main.css owns that band's gradient + grain. */

/* ---- fonts (verbatim from the original page's embedded CSS; files were
   already self-hosted). main.css declares no @font-face of its own, so
   the page carries the full set the shared nav/footer also use. ---- */
@font-face{font-family:"Cooper Hewitt Bold Italic";src:url("/assets/media/assets/nkYS5GLtI8UZeuhvRXx6KQt2so.woff2");font-style:normal;font-weight:712}
@font-face{font-family:"Cooper Hewitt Medium Italic";src:url("/assets/media/assets/CmwYO4gspavfqV41DaC9m6Kp9aY.woff2");font-style:normal;font-weight:708}
@font-face{font-family:"Source Sans Pro Bold";src:url("/assets/media/assets/mfJIi4ZsBj1zFYUodmv4QSL2jnU.woff2");font-display:swap;font-style:normal;font-weight:700}
@font-face{font-family:"Source Sans Pro Regular";src:url("/assets/media/assets/alL3C3eWkOZCVYCmuhkboeZkZk.woff2");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"Inter Variable";src:url("/assets/media/assets/7lw0VWkeXrGYJT05oB3DsFy8BaY.woff2");font-display:swap;font-style:normal;font-weight:400;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2070,U+2074-207E,U+2080-208E,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:700;font-display:swap;src:url(/assets/fonts/s/sourcesans3/v19/nwpDtKy2OAdR1K-IwhWudF-R3woAa8opPOrG97lwqF5JxCkSmg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- base ---- */
/* the generated pages ship a global border-box reset; the shared footer
   and injected pill nav are sized against it, so this page keeps it */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#fff;-webkit-font-smoothing:antialiased}
.au-page{position:relative;overflow:hidden}
.au-page figure{margin:0}
.au-page img{border:0}
.au-fig img,.au-card img,.au-mark img,.au-deco img,.au-cta-bg img{
  display:block;width:100%;height:100%;object-fit:cover}

/* ---- hero (ambient band: base gradient, grain and blobs come from
   main.css/enhance.js through the yg-10bma76 hook class) ---- */
.au-hero{position:relative;overflow:hidden;display:flex;align-items:center;
  justify-content:center;height:600px}
/* the stack is centered by absolute + translate(-50%,-50%) like the
   original — the fractional translate changes how the logo bitmap is
   pixel-snapped, so plain flex centering rasters it one pixel off */
.au-hero-stack{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);z-index:1;display:flex;
  flex-direction:column;align-items:center;gap:10px;overflow:hidden;
  width:min-content;max-width:100%}
/* will-change + the absolute inset-0 wrapper mirror the original logo
   markup exactly — the downscaled bitmap resamples identically only on
   the same composited-layer paint path */
.au-hero-logo{position:relative;width:322px;height:52px;will-change:transform}
.au-hero-title{margin:0;color:#fff;white-space:pre;
  font:normal 712 90px/1em "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}

/* ---- decorative absolutes: brand mark off the left edge, rotated
   geometric column on the right — both painted over the story bands,
   clipped by .au-page exactly like the original root ---- */
.au-mark{position:absolute;z-index:1;top:759px;left:-136px;
  width:396.553px;height:380px}
.au-deco{position:absolute;z-index:1;top:890px;right:0;
  width:166.446px;height:400px;transform:rotate(180deg)}

/* ---- shared type ----
   The original's entrance animation splits these blocks into
   character-by-character inline-block spans; that changes how Chromium
   positions every glyph (per-span 1/64px snapping, no cross-glyph
   kerning/ligatures), so the split structure is kept: .au-w = one word
   (nowrap), .au-c = one character (inline-block), .au-wu = the one word
   the original allows to break at its hyphen. */
.au-w{white-space:nowrap}
.au-c{display:inline-block}
.au-h1{margin:0;color:#000;text-align:center;white-space:pre-wrap;
  word-wrap:break-word;word-break:break-word;filter:contrast(1.5);
  font:normal 400 30px/1.1em "Inter Variable","Inter Variable Placeholder",sans-serif}
.au-h1-l{text-align:left}
.au-vh{font-variation-settings:"opsz" 32,"wght" 700}
.au-vs{font-variation-settings:"opsz" 14,"wght" 600}
/* the original's paragraph containers are z-index:1 like the decorative
   absolutes, and later in the DOM — so body copy paints OVER the brand
   mark where they overlap (visible at phone widths) */
.au-rich{margin-top:10px;position:relative;z-index:1}
.au-p{margin:0;color:#575757;text-align:left;white-space:pre-wrap;
  word-wrap:break-word;word-break:break-word;letter-spacing:-.03em;
  font:normal 400 18px/1.2em "Source Sans Pro Regular","Inter Variable",sans-serif}
.au-pc{text-align:center}
/* body copy runs bigger than the block's base size (the base size only
   sets the trailing blank line); blank <br> lines stay 22px on every
   breakpoint except intro3's tablet variant */
.au-p .au-t{font-size:22px;letter-spacing:-.03em;line-height:1.2em}
.au-p .au-b{font-size:22px;line-height:1.2em}
.au-big{font-size:22px;color:#000}
.au-red{color:#eb405a}
.au-bal{text-wrap:balance}

/* ---- intro band 1: Why We Exist ---- */
.au-i1{background:#fff;display:flex;align-items:center;justify-content:center;
  padding:100px}
.au-i1-col{flex:.4 0 0;max-width:422px}

/* ---- intro band 2: What We Do (text left, headdress photo right) ---- */
.au-i2{display:flex;align-items:center;justify-content:center;padding:100px}
.au-in{display:flex;align-items:center;gap:50px;flex:1 0 0;max-width:1200px}
.au-i2-col{flex:.7 0 0;max-width:391px}
.au-i2-fig{flex:1 0 0;height:337px}

/* ---- intro band 3: Our Focus (poster photo left, text right) ---- */
.au-i3{display:flex;align-items:center;justify-content:center;padding:100px}
.au-i3-fig{flex:1 0 0;height:400px}
.au-i3-fig img{object-position:50% 0}
.au-i3-col{flex:.6 0 0;max-width:356px}

/* ---- intro band 4: Our Principles + three cards ---- */
.au-i4{background:#fff;display:flex;flex-direction:column;align-items:center;
  gap:50px;padding:50px 100px 150px}
.au-i4-head{display:flex;flex-direction:column;align-items:center;gap:10px;
  width:100%}
.au-i4-head .au-h1{width:100%}
.au-quals{margin:0;width:100%;color:#717171;text-align:center;
  white-space:pre-wrap;word-wrap:break-word;word-break:break-word;
  letter-spacing:-.03em;
  font:normal 400 30px/1em "Inter Variable","Inter Variable Placeholder",sans-serif;
  font-variation-settings:"opsz" 32,"wght" 600;
  font-feature-settings:"cv01","cv05","cv09","cv11","ss03"}
.au-cards{display:flex;align-items:center;justify-content:center;gap:25px;
  width:100%;max-width:1200px}
.au-card{flex:1 0 0;border-radius:50px;aspect-ratio:.742002}
.au-card1{aspect-ratio:.744066}
.au-card img{border-radius:50px}

/* ---- statement band ---- */
.au-stmt{background:#323455;height:700px;padding:245px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;
  overflow:clip}
.au-stmt-p{margin:0;width:80%;color:#fff;text-align:center;
  white-space:pre-wrap;word-wrap:break-word;word-break:break-word;
  letter-spacing:-.03em;
  font:normal 400 30px/1.2em "Inter Variable","Inter Variable Placeholder",sans-serif;
  font-variation-settings:"opsz" 32,"wght" 600}
.au-stmt-p2{color:#8fb3c6}

/* ---- CTA band (the photo asset itself is the pink duotone) ---- */
.au-cta{position:relative;overflow:hidden;height:600px;padding:60px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px}
.au-cta-bg{position:absolute;inset:0}
.au-cta h1{position:relative;z-index:1;margin:0;max-width:100%;color:#343458;
  letter-spacing:-2px;text-align:center;white-space:pre-wrap;
  font:normal 712 50px/1.2em "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}
.au-cta h2{position:relative;z-index:1;margin:0;width:635px;max-width:100%;
  color:#343458;letter-spacing:-.5px;text-align:center;white-space:pre-wrap;
  font:normal 708 24px/1.5em "Cooper Hewitt Medium Italic","Inter Variable",Inter,sans-serif}
.au-pill{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:center;height:40px;padding:15px;border-radius:8px;
  background:#fff;text-decoration:none}
.au-pill p{margin:0;color:#323455;white-space:pre;will-change:transform;
  font:normal 712 14px/1em "Cooper Hewitt Bold Italic","Inter Variable",Inter,sans-serif}
/* faint darkening wash over the photo, under the z-indexed text */
.au-cta-ov{position:absolute;inset:0;background:rgba(0,0,0,.02)}

/* ---- tablet 810–1199.98 ---- */
@media (min-width:810px) and (max-width:1199.98px){
  .au-mark{top:721px;left:-117px;width:292.197px;height:280px}
  .au-deco{top:889px;width:124.835px;height:300px}
  .au-i1{padding:100px 50px 50px}
  .au-i1-col{flex:.5 0 0;max-width:none}
  .au-p .au-t{font-size:20px}
  .au-big{font-size:20px}
  .au-i3 .au-b{font-size:20px}
  .au-i2{padding:50px}
  .au-i2-in{flex-direction:column;align-items:flex-start}
  .au-i2-fig{order:-1;flex:none;width:100%;height:341px}
  /* the original keeps this column's 391px max-width on tablet/phone */
  .au-i2-col{flex:none;width:50%}
  .au-i3{padding:50px}
  .au-i3-fig{height:330px}
  .au-i3-col{flex:.65 0 0;max-width:none}
  .au-i4{padding:50px 50px 100px}
  .au-cards{gap:15px}
  /* height 355 < the 490px of vertical padding, so the padding wins —
     the original's border-box render is 490px tall */
  .au-stmt{height:355px}
  .au-stmt-p{width:100%}
}

/* ---- phone <810 ---- */
@media (max-width:809.98px){
  .au-hero-logo{width:186px;height:30px}
  .au-hero-title{font-size:50px}
  .au-mark{top:687px;left:-93px;width:208.712px;height:200px}
  .au-deco{top:893px;width:93.626px;height:225px}
  /* the two decorative isometric absolutes are placed with fixed desktop
     pixel offsets that no longer track the reflowed phone layout — they
     drift over the "Why We Exist" text (mark from the left, deco column
     from the right), sitting behind the copy and hurting legibility, and
     the deco squeezes "problem-solving" into an ugly mid-word wrap. They
     are purely decorative (alt=""), so drop them on phone. */
  .au-mark,.au-deco{display:none}
  .au-i1{flex-direction:column;padding:50px 30px 25px}
  /* full-width, left-aligned column so the copy has room (no more forced
     "problem-solving" break) and matches the left alignment of the
     "What We Do" / "Our Focus" sections below */
  .au-i1-col{flex:none;width:100%;max-width:none}
  .au-i1 .au-p{text-wrap:balance;text-align:left}
  .au-i1 .au-h1{text-align:left}
  /* "problem-solving" is the one word set as a break-anywhere unit (au-wu);
     its per-character inline-blocks were splitting mid-word ("p|roblem-…")
     on a narrow line. Keep it whole so it wraps as a single word instead. */
  .au-wu{white-space:nowrap}
  .au-p{font-size:16px}
  .au-p .au-t{font-size:18px}
  .au-big{font-size:18px}
  /* intro3's phone variant renders its body copy at the block's base
     size (16px) while the blank lines stay 22px */
  .au-i3 .au-t{font-size:16px}
  /* match the body text size: at 22px the blank-line break shared the
     last line of paragraph one and inflated it (26px vs 19px lines),
     leaving an uneven gap before "good at…". 16px keeps the run even. */
  .au-i3 .au-b{font-size:16px}
  .au-i2{padding:25px 30px}
  .au-i2-in{flex-direction:column;gap:25px;align-items:flex-start}
  .au-i2-fig{order:-1;flex:none;width:100%;height:200px}
  .au-i2-col{flex:none;width:100%}
  .au-i3{padding:25px 30px}
  .au-i3-in{flex-direction:column;gap:25px;align-items:flex-start}
  .au-i3-fig{flex:none;width:100%;height:200px}
  /* the original keeps this column's 356px max-width on phone */
  .au-i3-col{flex:none;width:100%}
  .au-i4{gap:25px;padding:25px}
  .au-quals{width:80%}
  .au-cards{flex-direction:column;gap:15px}
  /* stacked full-width, these portrait cards ballooned to ~950px tall on
     wide phones/tablets (a lot of dead space around the little text). Cap
     the width so they stay a sensible height and centre the column — the
     full artwork still shows (no crop). Narrow phones are already below
     the cap, so they are unaffected. */
  .au-card{flex:none;width:100%;max-width:420px}
  /* the desktop 700px fixed height left a ~500px navy void around the two
     short lines on phone — size to content with generous padding instead */
  .au-stmt{height:auto;padding:64px 30px;gap:12px}
  .au-stmt-p{width:100%}
  .au-cta h1{font-size:45px}
}