/* A-Goal Initiative — About Us redesign — coded template */

.agoal-about{
  --terracotta:#D14622; --terracotta-deep:#A8351A; --navy:#1B2A41; --navy-deep:#0F1B2C;
  --ochre:#D89B3C; --cream:#FBF3E7; --cream-2:#F3E7D6; --paper:#FFFCF7; --charcoal:#2A241F;
  --serif:'Playfair Display',serif; --sans:'Plus Jakarta Sans',sans-serif;
  font-family:var(--sans); color:var(--charcoal); background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
.agoal-about *{box-sizing:border-box;}
.agoal-about img{max-width:100%;display:block;}
.agoal-about a{color:inherit;text-decoration:none;}
.agoal-about .wrap{max-width:1180px;margin-inline:auto;padding-inline:32px;}
@media (max-width:900px){ .agoal-about .wrap{padding-inline:20px;} }
.agoal-about h1,.agoal-about h2,.agoal-about h3,.agoal-about blockquote{font-family:'Playfair Display',serif!important;}
.agoal-about p,.agoal-about span,.agoal-about a,.agoal-about div{font-family:'Plus Jakarta Sans',sans-serif;}
.agoal-about h1 .accent,.agoal-about h2 .accent{font-family:'Playfair Display',serif!important;color:var(--terracotta);font-style:italic;}
.agoal-about blockquote{margin:0!important;border:none!important;padding:0!important;}

[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
[data-reveal].in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ [data-reveal]{opacity:1!important;transform:none!important;} }

.aa-eyebrow{display:flex;align-items:center;gap:14px;}
.aa-eyebrow .rule{height:1px;width:36px;background:var(--terracotta);opacity:.5;}
.aa-eyebrow span{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--terracotta-deep);}

/* Hero */
.aa-hero{background:var(--cream-2);}
.aa-hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-block:96px;}
@media (max-width:900px){ .aa-hero .wrap{grid-template-columns:1fr;} }
.aa-hero h1{font-family:var(--serif);color:var(--navy);line-height:1.05;margin-top:12px;font-size:clamp(34px,4.6vw,60px);font-weight:700;}
.aa-hero p{margin-top:20px;max-width:34rem;font-size:18px;line-height:1.625;color:rgba(42,36,31,.75);}
.aa-hero-img{position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(155deg,var(--navy),var(--navy-deep));box-shadow:0 20px 25px -5px rgba(27,42,65,.1),0 8px 10px -6px rgba(27,42,65,.1);aspect-ratio:4/3;}

/* Simple But Vital Goal */
.aa-goal{background:var(--cream);padding-block:112px;}
.aa-goal .grid{display:grid;grid-template-columns:.62fr 1.38fr;gap:80px;align-items:start;}
@media (max-width:900px){ .aa-goal .grid{grid-template-columns:1fr;} }
.aa-goal-sticky{position:sticky;top:112px;}
@media (max-width:900px){ .aa-goal-sticky{position:static;top:auto;} }
.aa-goal-img{margin-top:32px;overflow:hidden;box-shadow:0 24px 40px -28px rgba(27,42,65,.45);border-radius:18px;background:var(--cream-2);aspect-ratio:1/1;position:relative;}
.aa-goal-statement{font-family:var(--serif);font-size:38px;line-height:1.25;color:var(--navy);max-width:38rem;font-weight:700;margin:0;}

/* Mission / Vision */
.aa-mv{background:var(--navy);padding-block:112px;color:var(--cream);}
.aa-mv .grid{display:grid;grid-template-columns:1fr 1fr;}
@media (max-width:700px){ .aa-mv .grid{grid-template-columns:1fr;gap:40px;} }
.aa-mv .col{padding-right:64px;}
.aa-mv .col.vision{padding-right:0;padding-left:64px;border-left:1px solid rgba(251,243,231,.16);}
@media (max-width:700px){ .aa-mv .col{padding:0!important;border:none!important;} }
.aa-mv .aa-eyebrow .rule{background:var(--ochre);}
.aa-mv .col:first-child .aa-eyebrow span{color:#E2724F;}
.aa-mv .col.vision .aa-eyebrow span{color:var(--ochre);}
.aa-mv .col.vision .aa-eyebrow .rule{opacity:1;}
.aa-mv p.statement{margin-top:28px;font-family:var(--serif);font-size:32px;line-height:1.35;color:var(--cream);font-weight:700;}

/* Driving Transformative Changes */
.aa-driving{background:var(--cream-2);padding-block:112px;}
.aa-driving .grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
@media (max-width:900px){ .aa-driving .grid{grid-template-columns:1fr;} }
.aa-driving-img-wrap{position:relative;}
.aa-driving-img{overflow:hidden;box-shadow:0 24px 40px -28px rgba(27,42,65,.45);border-radius:18px;background:var(--paper);aspect-ratio:4/5;position:relative;}
.aa-driving-img-frame{position:absolute;inset:-14px;border:1px solid rgba(209,70,34,.35);border-radius:26px;pointer-events:none;}
.aa-driving-text{display:flex;flex-direction:column;gap:24px;margin-top:32px;max-width:32rem;}
.aa-driving-text p{font-size:19px;line-height:1.8;color:rgba(42,36,31,.86);margin:0;}
.aa-driving-rule{height:1px;background:rgba(42,36,31,.12);}

/* Our Story */
.aa-story{background:var(--cream);padding-block:112px;}
.aa-story-head{text-align:center;}
.aa-story h2{margin-top:32px;margin-inline:auto;max-width:46rem;text-align:center;font-family:var(--serif);font-size:44px;line-height:1.15;font-weight:700;color:var(--navy);}
.aa-story-img{margin-top:56px;overflow:hidden;box-shadow:0 24px 40px -28px rgba(27,42,65,.45);border-radius:18px;background:var(--cream-2);aspect-ratio:21/9;position:relative;}
.aa-story-cols{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:56px;}
@media (max-width:800px){ .aa-story-cols{grid-template-columns:1fr;} }
.aa-story-cols .col{display:flex;flex-direction:column;gap:24px;}
.aa-story-cols p{font-size:17px;line-height:1.9;color:rgba(42,36,31,.78);margin:0;}

/* Pull quote band */
.aa-pullquote{background:var(--navy);padding-block:96px;}
.aa-pullquote blockquote{margin-inline:auto;max-width:52rem;text-align:center;font-family:var(--serif);font-size:36px;line-height:1.35;font-style:italic;color:var(--cream);}

/* Team */
.aa-team{background:var(--cream);padding-block:112px;}
.aa-team-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.aa-team-head h2{font-family:var(--serif);font-size:36px;line-height:1.15;font-weight:700;color:var(--navy);text-align:right;}
.aa-team-rule{height:1px;background:rgba(42,36,31,.12);margin-block:48px;}
.aa-team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}
@media (max-width:800px){ .aa-team-grid{grid-template-columns:1fr;} }
.aa-team-card{display:flex;flex-direction:column;gap:24px;}
.aa-team-photo{display:flex;aspect-ratio:4/5;align-items:center;justify-content:center;border-radius:18px;background:var(--navy);overflow:hidden;}
.aa-team-photo img{width:100%;height:100%;object-fit:cover;}
.aa-team-photo span{font-family:var(--serif);font-size:56px;line-height:1;font-weight:700;color:rgba(216,155,60,.9);}
.aa-team-card h3{font-family:var(--serif);font-size:22px;line-height:1.3;font-weight:700;color:var(--navy);margin:0;}
.aa-team-card .role{margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta);}
.aa-team-card .note{margin-top:12px;font-size:11px;color:rgba(42,36,31,.45);font-style:italic;}



/* ---------- PREMIUM PASS ---------- */
/* Optical tightening on display type. Playfair at large sizes sets loose by
   default; negative tracking and balanced wrapping stop ragged headlines. */
.agoal-about h1,.agoal-about h2,.aa-goal-statement{letter-spacing:-.012em;text-wrap:balance;}
.agoal-about p{text-wrap:pretty;}
.aa-hero h1{text-wrap:balance;}
.aa-hero p{line-height:1.7;}

/* Fluid display sizes so headings don't jump between breakpoints. */
.aa-goal-statement{font-size:clamp(26px,3.2vw,38px);line-height:1.28;}
.aa-story h2{font-size:clamp(28px,3.6vw,44px);line-height:1.18;}
.aa-mv p.statement{font-size:clamp(24px,2.6vw,32px);}

/* Lead line, lifted out of the two columns so Our Story opens rather than
   dropping the reader straight into a wall of body copy. */
.aa-story-lead{margin:52px auto 0;max-width:44rem;text-align:center;font-family:'Playfair Display',serif!important;font-size:clamp(21px,2.3vw,27px);line-height:1.45;color:var(--navy);font-weight:700;}
.aa-story-cols{margin-top:48px;}

/* Pull quote band — the stylesheet already defined this but nothing used it.
   It also gives the page an ending now the team section is hidden. */
.aa-pullquote{background:var(--navy);padding-block:104px;}
.aa-pullquote .wrap{text-align:center;}
.aa-pullquote .mark{display:block;font-family:'Playfair Display',serif!important;font-size:72px;line-height:1;color:var(--ochre);opacity:.5;margin-bottom:-20px;}
.aa-pullquote blockquote{margin-inline:auto!important;max-width:46rem;font-family:'Playfair Display',serif!important;font-size:clamp(24px,3vw,36px);line-height:1.4;font-style:italic;color:var(--cream);}
.aa-pullquote .attrib{margin-top:28px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(251,243,231,.5);}

/* Breathing room scales down on small screens; 112px bands are desktop rhythm. */
@media (max-width:900px){
  .aa-hero .wrap{padding-block:64px;gap:36px;}
  .aa-goal,.aa-mv,.aa-driving,.aa-story{padding-block:64px;}
  .aa-pullquote{padding-block:64px;}
  .aa-goal .grid{gap:40px;}
  .aa-driving .grid{gap:48px;}
  .aa-driving-img-frame{inset:-8px;}
}
@media (max-width:800px){ .aa-story-cols{gap:28px;margin-top:36px;} }
@media (max-width:700px){ .aa-story-img{aspect-ratio:16/10;} }

/* Hero and goal images now come from the media library, so their sizing lives here
   rather than in inline style attributes on the tag. */
.aa-hero-img img,
.aa-goal-img img{width:100%!important;height:100%!important;object-fit:cover!important;display:block;}


/* ============================================================================
   SEPTEMBER 2026 REWORK — matches the client's approved About Us layout.

   What changed against the previous build, and why each rule is here:
     - Our Simple But Vital Goal: the sticky image column and the single large
       display sentence are gone. The section is now one centred measure of
       ordinary body copy carrying the client's full three-paragraph text.
     - Mission / Vision: was a navy band split by a hairline. Now two white
       cards on the warm band, so the dark band can move down to Our Story.
     - Driving Transformative Changes: image and copy swap sides (copy left),
       and the offset frame around the photo is dropped.
     - Our Story: was a cream section with a centred display headline and two
       columns. Now a navy section, one centred measure, with the photograph
       and the pull quote sitting inline in the middle of the reading.
     - The standalone pull-quote band that used to close the page is retired;
       its job is done by the inline quote inside Our Story.

   These rules are appended rather than edited into the block above so the
   original build stays readable, and the cascade puts these last.
   ============================================================================ */

/* The eyebrow rules (short dashes) are dropped throughout. */
.agoal-about .aa-eyebrow .rule{display:none;}

/* One shared reading measure. Both Our Goal and Our Story sit in this column,
   centred in the 1116px container, which is what puts their left edge in from
   the section edge rather than flush with it. */
.agoal-about .aa-measure{max-width:46rem;margin-inline:auto;}

/* One shared body-copy style, so the three prose sections set identically. */
.agoal-about .aa-prose{margin-top:26px;display:flex;flex-direction:column;gap:22px;}
.agoal-about .aa-prose p{margin:0;font-size:17px;line-height:1.72;color:rgba(42,36,31,.8);}

/* --- Our Simple But Vital Goal ------------------------------------------- */
.agoal-about .aa-goal{background:var(--cream);padding-block:112px;}

/* --- Mission / Vision ----------------------------------------------------- */
.agoal-about .aa-mv{background:var(--cream-2);padding-block:96px;color:var(--charcoal);}
.agoal-about .aa-mv .grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch;}
@media (max-width:700px){ .agoal-about .aa-mv .grid{grid-template-columns:1fr;gap:20px;} }
.agoal-about .aa-mv-card{background:var(--paper);border-radius:18px;padding:32px;box-shadow:0 18px 32px -28px rgba(27,42,65,.35);}
.agoal-about .aa-mv-card .aa-eyebrow span{color:var(--terracotta);}
.agoal-about .aa-mv-card.vision .aa-eyebrow span{color:var(--ochre);}
.agoal-about .aa-mv p.statement{margin:20px 0 0;font-family:var(--serif);font-size:clamp(21px,2.2vw,24px);line-height:1.32;font-weight:700;color:var(--navy);}

/* --- Driving Transformative Changes --------------------------------------- */
.agoal-about .aa-driving{background:var(--cream);padding-block:96px;}
.agoal-about .aa-driving .grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
@media (max-width:900px){ .agoal-about .aa-driving .grid{grid-template-columns:1fr;gap:40px;} }
/* Copy first in the source, so it also reads first on a narrow screen. */
.agoal-about .aa-driving-copy{order:1;}
.agoal-about .aa-driving-img{order:2;overflow:hidden;border-radius:18px;background:var(--cream-2);aspect-ratio:4/3;box-shadow:0 24px 40px -28px rgba(27,42,65,.45);}
.agoal-about .aa-driving-img img{width:100%!important;height:100%!important;object-fit:cover!important;display:block;}

/* --- Our Story ------------------------------------------------------------ */
.agoal-about .aa-story{background:var(--navy);padding-block:112px;}
.agoal-about .aa-story .aa-eyebrow span{color:var(--ochre);}
.agoal-about .aa-story .aa-prose p{color:rgba(251,243,231,.8);}
/* This frame now holds an infographic rather than a photograph. A fixed ratio
   plus object-fit:cover would crop its edges and cut the text off, so the image
   sets its own height and is never cropped. Revert to aspect-ratio:16/9 with
   object-fit:cover if a photograph ever goes back in here. */
.agoal-about .aa-story-img{margin-top:48px;overflow:hidden;border-radius:18px;background:var(--navy-deep);box-shadow:0 24px 40px -28px rgba(0,0,0,.5);}
.agoal-about .aa-story-img img{width:100%!important;height:auto!important;object-fit:contain!important;display:block;}
.agoal-about .aa-story-quote{margin:56px 0 0!important;padding:4px 0 4px 28px!important;border-left:3px solid var(--ochre)!important;font-family:'Playfair Display',serif!important;font-size:clamp(22px,2.4vw,28px);line-height:1.42;font-style:italic;font-weight:400;color:var(--cream);}

/* --- Small screens -------------------------------------------------------- */
@media (max-width:900px){
  .agoal-about .aa-goal,
  .agoal-about .aa-story{padding-block:64px;}
  .agoal-about .aa-mv,
  .agoal-about .aa-driving{padding-block:56px;}
  .agoal-about .aa-story-img{margin-top:36px;}
  .agoal-about .aa-story-quote{margin-top:40px!important;padding-left:20px!important;}
  .agoal-about .aa-mv-card{padding:26px;}
}