:root{--black:#000000;--purple:#B400FA;--tan:#C4B187;--gray:#9EA5A1;--pale:#D1D8E6;--white:#FFFFFF}
.about-page{background:var(--white);color:var(--black)}
.about-page .site-nav{position:relative;z-index:20}

/* ABOUT HERO */
.about-hero{position:relative;background:var(--black);color:var(--white);overflow:hidden;min-height:690px}
.about-hero::before{content:"";position:absolute;z-index:0;inset:82px 0 0 0;background:url('../images/About_Hero_Gears_NoText_Clean.png') calc(50% + 95px) center/contain no-repeat;pointer-events:none}
.about-hero .site-nav{position:relative;z-index:4}
.about-hero-inner{position:relative;z-index:2;min-height:575px;padding:50px 0 95px;display:flex;align-items:center}
.about-hero-copy{position:relative;z-index:3;width:min(52%,820px);max-width:820px}
.about-hero-copy h1,.about-copy h2{font:800 clamp(58px,6.2vw,102px)/.9 Montserrat,sans-serif;text-transform:uppercase;letter-spacing:-.045em;margin:12px 0 30px}
.about-hero-copy h1 span,.about-copy h2 span{color:var(--purple)}
.about-hero-copy .hero-subhead{font:900 clamp(18px,1.65vw,27px)/1.25 Roboto,sans-serif;margin:0 0 12px}
.about-hero-copy .hero-body{font:400 19px/1.55 Roboto,sans-serif;max-width:650px;margin:0}
.about-hero-visual{display:none}

/* ABOUT STORY */
.about-story{
  position:relative;
  background:#ffffff;
  padding:58px 0 72px;
  overflow:visible;
}
.about-story-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(500px,1.02fr) minmax(500px,.98fr);
  gap:18px;
  align-items:start;
}
.about-visual{
  position:relative;
  z-index:1;
  margin:-4px 0 0 -18px;
  pointer-events:none;
}
.about-visual img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  object-fit:contain;
}
.about-copy{
  position:relative;
  z-index:3;
  width:100%;
  max-width:none;
  margin:0;
  padding:0 0 0 8px;
}
.about-copy h2{
  font-size:clamp(43px,3.5vw,55px);
  line-height:.94;
  letter-spacing:-.04em;
  margin:6px 0 30px;
}
.about-copy h2 span{white-space:nowrap}
.story-copy{max-width:570px}
.story-copy p{
  font:400 17px/1.5 Roboto,sans-serif;
  margin:0 0 16px;
}
.story-copy .question{
  font:900 clamp(21px,1.7vw,27px)/1.22 Roboto,sans-serif;
  margin:4px 0 24px;
}
.story-copy .missing-pieces{
  font:900 19px/1.4 Roboto,sans-serif;
  margin-top:24px;
}
.story-copy .brand-line{
  font:900 clamp(20px,1.55vw,25px)/1.28 Roboto,sans-serif;
  margin:28px 0 30px;
  max-width:540px;
}
.about-page .site-footer{background:var(--white)}

@media(max-width:1000px) and (min-width:761px){
  .about-hero{min-height:620px}
  .about-hero::before{inset:76px 0 0 0;background-size:contain;background-position:calc(50% + 65px) center}
  .about-hero-inner{min-height:505px;padding:35px 0 75px}
  .about-hero-copy{width:53%;max-width:680px}

  .about-story{padding:52px 0 64px;overflow:visible}
  .about-story-grid{
    grid-template-columns:minmax(360px,.98fr) minmax(390px,1.02fr);
    gap:14px;
  }
  .about-visual{margin:0 -6px 0 -8px}
  .about-visual img{width:100%;height:auto;object-fit:contain}
  .about-copy{padding-left:6px}
  .about-copy h2{font-size:clamp(39px,4.4vw,49px)}
  .story-copy p{font-size:16px}
  .story-copy .question{font-size:22px}
}

/* PHONE: separate clean gear image above the copy. No text is embedded in this asset. */
@media(max-width:760px){
  .about-hero{min-height:auto}
  .about-hero::before{display:none}
  .about-hero-inner{min-height:0;display:flex;flex-direction:column;gap:0;padding:22px 0 58px}
  .about-hero-visual{display:flex;order:1;width:100%;min-height:0;aspect-ratio:1.24/1;margin:4px 0 20px;overflow:hidden;align-items:center;justify-content:center}
  .about-hero-visual img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
  .about-hero-copy{order:2;width:100%;max-width:none}
  .about-hero-copy h1{font-size:clamp(44px,13vw,62px)}
  .about-hero-copy .hero-subhead{font-size:19px}
  .about-hero-copy .hero-body{font-size:16px;max-width:520px}

  .about-story{padding:46px 0 56px;overflow:visible}
  .about-story-grid{display:flex;flex-direction:column;gap:24px}
  .about-copy{position:relative;width:100%;max-width:none;margin:0;order:1;padding:0}
  .about-copy h2{font-size:clamp(36px,10vw,50px);margin-bottom:24px}
  .about-copy h2 span{white-space:normal}
  .about-visual{
    position:relative;
    width:calc(100% + 18px);
    order:2;
    margin:0 -9px;
    display:flex;
    justify-content:center;
  }
  .about-visual img{
    display:block;
    width:100%;
    height:auto;
    max-width:none;
    object-fit:contain;
  }
  .story-copy p{font-size:16px}
  .story-copy .question{font-size:22px}
  .story-copy .brand-line{font-size:21px}
}


/* v66 — About hero fine tuning only */

/* Bring the About H1 back into proportion with the rest of the site. */
.about-page .about-hero h1,
.about-page .about-hero-title,
.about-page .hero h1 {
  font-size: clamp(4.25rem, 6.15vw, 7.25rem) !important;
  line-height: 0.94 !important;
}

/* Match the About hero purple rule to the newly refined Home rule. */
.about-page .about-hero .accent-rule,
.about-page .hero .accent-rule {
  height: 3px !important;
}

@media (max-width: 760px) {
  .about-page .about-hero h1,
  .about-page .about-hero-title,
  .about-page .hero h1 {
    font-size: clamp(3rem, 14vw, 4.6rem) !important;
  }

  .about-page .about-hero .accent-rule,
  .about-page .hero .accent-rule {
    height: 2px !important;
  }
}


/* v67 — Reduce About hero headline only.
   Kept the refined purple divider from v66 unchanged. */
@media (min-width: 761px) {
  .about-page .about-hero h1,
  .about-page .about-hero-title,
  .about-page .hero h1 {
    font-size: clamp(3.6rem, 5vw, 5.9rem) !important;
    line-height: 0.96 !important;
  }
}

@media (max-width: 760px) {
  .about-page .about-hero h1,
  .about-page .about-hero-title,
  .about-page .hero h1 {
    font-size: clamp(2.65rem, 12vw, 3.9rem) !important;
    line-height: 0.97 !important;
  }
}


/* v68 — Simplify the Why Faucet copy hierarchy.
   Headline and button remain unchanged. Body copy uses one size, weight and color. */
.about-page .about-story-copy p,
.about-page .about-story-copy p strong,
.about-page .about-story-copy strong,
.about-page .about-story-copy .story-question,
.about-page .about-story-copy .story-emphasis,
.about-page .why-faucet-copy p,
.about-page .why-faucet-copy p strong,
.about-page .why-faucet-copy strong,
.about-page .why-faucet-copy .story-question,
.about-page .why-faucet-copy .story-emphasis {
  font-size: inherit !important;
  font-weight: 400 !important;
  color: #000000 !important;
  line-height: inherit !important;
}

/* Preserve spacing as the hierarchy rather than typography. */
.about-page .about-story-copy p,
.about-page .why-faucet-copy p {
  margin-top: 0;
}


/* v69 — Correct selector fix for actual About story markup.
   All copy below the H2 uses the existing body-copy size, regular weight and black.
   Paragraph spacing is preserved; H2 and CTA are untouched. */
.about-page .about-story .story-copy p,
.about-page .about-story .story-copy .question,
.about-page .about-story .story-copy .missing-pieces,
.about-page .about-story .story-copy .brand-line {
  font-family: Roboto, sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #000000 !important;
}

/* Keep the existing paragraph spacing while removing typographic over-emphasis. */
.about-page .about-story .story-copy .question {
  margin: 4px 0 24px !important;
}
.about-page .about-story .story-copy .missing-pieces {
  margin-top: 24px !important;
}
.about-page .about-story .story-copy .brand-line {
  margin: 28px 0 30px !important;
  max-width: 540px;
}

@media (max-width: 1000px) {
  .about-page .about-story .story-copy p,
  .about-page .about-story .story-copy .question,
  .about-page .about-story .story-copy .missing-pieces,
  .about-page .about-story .story-copy .brand-line {
    font-size: 16px !important;
  }
}


/* v71 — About H1 matches Home H1 exactly */
@media (min-width: 1181px) {
  .about-page .about-hero-copy h1 {
    font-size: clamp(35px, 3.65vw, 68px) !important;
    line-height: 1.06 !important;
    letter-spacing: -1.5px !important;
  }
}
@media (max-width: 1180px) and (min-width: 1001px) {
  .about-page .about-hero-copy h1 {
    font-size: clamp(36px, 3.5vw, 48px) !important;
    line-height: 1.06 !important;
  }
}
@media (max-width: 1000px) {
  .about-page .about-hero-copy h1 {
    font-size: clamp(33px, 3.8vw, 46px) !important;
    line-height: 1.06 !important;
  }
}
@media (max-width: 760px) {
  .about-page .about-hero-copy h1 {
    font-size: clamp(30px, 8.2vw, 43px) !important;
  }
}
@media (max-width: 480px) {
  .about-page .about-hero-copy h1 {
    font-size: 31px !important;
  }
}

.about-page .about-hero .accent-rule {
  height: 3px !important;
}
@media (max-width: 760px) {
  .about-page .about-hero .accent-rule {
    height: 2px !important;
  }
}


/* v80 — Why Faucet secondary headline matched to site secondary-header scale */
.about-page .about-story .about-copy h2{
  font-family:Montserrat,sans-serif !important;
  font-size:clamp(46px,4.15vw,60px) !important;
  font-weight:800 !important;
  line-height:.96 !important;
  letter-spacing:-.035em !important;
  text-transform:uppercase !important;
  margin:6px 0 34px !important;
}

@media(max-width:1000px) and (min-width:761px){
  .about-page .about-story .about-copy h2{
    font-size:clamp(44px,5vw,54px) !important;
  }
}

@media(max-width:760px){
  .about-page .about-story .about-copy h2{
    font-size:clamp(36px,10vw,46px) !important;
    line-height:.98 !important;
    letter-spacing:-.03em !important;
    margin-bottom:24px !important;
  }
}