/* ==========================================================================
   About — layout taken from the approved mockup (about_webpage)
   ========================================================================== */

.about-page{ background:var(--navy); }

/* ---------- header: navy bar with a cream tab behind the logo ------------- */

.about-page .site-header{
  background:var(--navy);
  position:relative;
}
.about-page .header-inner{ height:88px; position:relative; z-index:3; }

/* the cream tab, angled on its right edge exactly as drawn in the mockup */
.about-page .header-tab{
  position:absolute;
  left:0; top:0;
  width:min(465px, 46vw);
  height:118px;
  background:var(--cream);
  clip-path:polygon(0 0, 86% 0, 100% 78%, 90% 100%, 0 100%);
  z-index:1;
}
.about-page .brand-name{ color:var(--navy-ink); }
.about-page .nav-link{ color:var(--white); }
.about-page .nav-link:hover{ color:var(--gold); }
.about-page .nav-link.is-active{ color:var(--white); }
.about-page .burger span{ background:var(--white); }
.about-page .header-cta{ padding:11px 20px; letter-spacing:.1em; }

/* ---------- hero ---------------------------------------------------------- */

.about-hero{
  position:relative;
  background:var(--navy);
  overflow-x:clip;
  padding-block:24px 46px;
  min-height:479px;
}
.about-hero-inner{
  display:grid;
  grid-template-columns:minmax(0,40%) minmax(0,60%);
  align-items:center;
  gap:72px;
}
.about-hero-art{
  position:relative;
  z-index:1;
  margin-right:calc((100vw - min(100vw, var(--shell))) / -2 - var(--gutter));
  margin-block:-18px;
}
.about-hero-art img{ width:100%; height:auto; }

.about-hero-inner{ position:relative; z-index:2; }
.about-hero-copy{ max-width:100%; padding-right:10px; }

.about-hero h1{
  font-size:clamp(40px,4.3vw,62px);
  line-height:1.06;
  color:var(--white);
}
.rule-diamond.wide{ width:min(400px,100%); }
.about-hero .rule-diamond{ margin:24px 0 22px; }

.about-lead{
  margin:0 0 26px;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(24px,2.1vw,31px);
  line-height:1.32;
  color:var(--gold-bright);
}
.about-body{
  margin:0;
  font-size:15.5px;
  line-height:1.72;
  color:var(--white);
  max-width:100%;
}

/* ---------- vision / values / ambition ----------------------------------- */

.pillars{
  position:relative;
  background:var(--cream);
  padding-block:43px 19px;
  overflow:hidden;
}

.pillars-shell{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1210px;
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px;
}

.pillar{
  position:relative;
  border:1px solid rgba(201,138,56,.55);
  border-radius:10px;
  background:var(--cream);
  padding:50px 22px 26px;
  text-align:center;
  min-height:280px;
}
.pillar-icon{
  position:absolute;
  top:-32px; left:50%;
  transform:translateX(-50%);
  width:72px; height:72px;
}
.pillar h2{
  margin:0;
  font-family:var(--display);
  font-weight:500;
  font-size:24px;
  letter-spacing:.02em;
  color:var(--navy-ink);
}
.rule-diamond.narrow{ width:118px; }
.pillar .rule-diamond{ margin:11px auto 15px; }
.pillar p{
  margin:0;
  font-size:13px;
  line-height:1.72;
  color:var(--navy-ink);
}

/* ---------- closing band -------------------------------------------------- */

.about-closing{ padding-block:52px 58px; }
.about-closing-inner{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
  padding-inline:calc(var(--gutter) + 216px);
}
.about-closing-copy{ max-width:620px; }
.about-closing h2{
  margin:0;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(24px,2.2vw,32px);
  line-height:1.25;
  color:var(--gold-bright);
}
.about-closing .rule-diamond{ width:545px; max-width:100%; margin:18px 0 16px; }
.about-closing p{
  margin:0;
  font-size:15px;
  line-height:1.68;
  color:var(--white);
}
.about-closing .btn-gold{ flex:0 0 auto; padding:17px 30px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1240px){
  .about-closing-inner{ padding-inline:calc(var(--gutter) + 60px); }
  .about-hero-art{ top:0; }
}

@media (max-width:980px){
  .about-page .header-tab{ width:min(360px,64vw); height:88px; }
  .about-hero{ padding-block:0 44px; min-height:0; }
  .about-hero-inner{ grid-template-columns:1fr; gap:24px; }
  .about-hero-art{ order:-1; margin:0 calc(var(--gutter)*-1); }
  .about-hero-copy{ max-width:none; padding-top:0; }
  .rule-diamond.wide{ width:280px; }
  .pillars{ padding-block:70px 48px; }
  .pillars-shell{ grid-template-columns:1fr; gap:70px; max-width:620px; }
  .about-closing-inner{
    flex-direction:column; align-items:flex-start; gap:30px;
    padding-inline:var(--gutter);
  }
  .about-closing .rule-diamond{ width:300px; }
}

@media (max-width:620px){
  .about-hero h1{ font-size:38px; }
  .about-lead{ font-size:23px; }
  .about-lead br, .about-body br, .about-closing p br{ display:none; }
  .pillar p br{ display:none; }
  .pillar{ padding:52px 20px 30px; }
}