:root{font-family:Arial,Helvetica,sans-serif;color:#10254a;background:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.wrap{width:min(1160px,calc(100% - 44px));margin:auto}.top{background:#0c1830;color:white;font-size:13px;padding:9px 0}.top .wrap{display:flex;justify-content:space-between;gap:20px}.top a{text-decoration:underline;text-underline-offset:3px}header{background:white;position:sticky;top:0;z-index:10;box-shadow:0 2px 18px #0c183012}header .wrap{min-height:132px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:block;width:156px;height:122px;flex:none}.brand img{width:100%;height:100%;object-fit:contain}nav{display:flex;align-items:center;gap:22px;font-weight:700;font-size:16px}nav a:hover{color:#2776cb}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#df2531;color:white;font-weight:800;padding:16px 23px;border-radius:3px;line-height:1.1}.button:hover{background:#b61521;color:white}.button.blue{background:#2b77ca}.button.outline{background:transparent;color:#10254a;border:1px solid #9db2ca}.hero{background:#0b1932;color:white;overflow:hidden}.hero .wrap{min-height:620px;display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:5vw}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:13px;font-weight:800;color:#5c9ee8}.hero h1,.pagehero h1{font-size:clamp(43px,5.1vw,76px);letter-spacing:-.055em;line-height:1.05;margin:20px 0}.hero p{font-size:20px;line-height:1.55;color:#d6e2f1;max-width:590px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.hero-art{position:relative;padding:35px 0 35px 35px}.years-mark{min-height:430px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:0;background:transparent;padding:40px 24px;box-shadow:none}.years-number{font-size:clamp(110px,13vw,190px);font-weight:900;line-height:.85;letter-spacing:-.09em;color:#fff}.years-number span{font-size:.58em;color:#78b4f5;vertical-align:top;line-height:1}.years-mark strong{font-size:clamp(36px,5vw,70px);letter-spacing:.13em;color:#78b4f5;line-height:1.1}.years-mark small{font-size:15px;letter-spacing:.16em;font-weight:800;line-height:1.7;margin-top:28px;padding-top:18px;border-top:3px solid #e22c38;color:#fff}.strip{background:#eaf2fb;padding:26px 0}.strip .wrap{display:flex;justify-content:space-between;gap:22px;align-items:center}.strip strong{font-size:17px}.strip span{color:#46607d;font-size:15px}.section{padding:95px 0}.section h2{font-size:clamp(32px,3.5vw,50px);letter-spacing:-.045em;line-height:1.12;margin:14px 0 22px}.lead{font-size:19px;line-height:1.6;color:#4c6079;max-width:720px}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:40px}.card{border:1px solid #dce5ef;padding:38px;background:white;min-height:265px}.card.blue{background:#eaf3fd;border-color:#eaf3fd}.card .num{color:#2c78c9;font-weight:800;font-size:14px}.card h3{font-size:28px;letter-spacing:-.03em;margin:22px 0 13px}.card p{color:#52647a;line-height:1.6}.card a{font-weight:800;color:#156abd}.split{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}.light{background:#f4f7fa}.anniversary{max-width:460px;margin:auto;box-shadow:none}.list{display:grid;grid-template-columns:repeat(2,1fr);gap:15px 25px;padding:0;list-style:none;margin:30px 0}.list li{border-top:1px solid #cad8e6;padding-top:13px;font-weight:700}.banner{background:#2776ca;color:white;padding:55px 0}.banner .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px}.banner h2{font-size:34px;letter-spacing:-.04em;margin:0 0 9px}.banner p{margin:0;color:#e5f0fd}.banner .button{background:white;color:#10254a;white-space:nowrap}.pagehero{background:#0b1932;color:white;padding:105px 0}.pagehero p{max-width:660px;color:#d6e2f1;font-size:20px;line-height:1.6}.pagehero h1{max-width:820px}.detail{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:43px}.detail article{padding:27px 0;border-top:3px solid #2d7acc}.detail h3{font-size:23px;margin:14px 0}.detail p{line-height:1.65;color:#52647a}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.contact-grid a.link{color:#176cc0;text-decoration:underline;font-weight:800}.note{padding:30px;background:#eaf3fd;line-height:1.6}footer{background:#0c1830;color:white;padding:55px 0 27px}footer .wrap{display:flex;justify-content:space-between;gap:40px}footer img{width:165px}footer p{color:#bac9dc;line-height:1.6}footer a:hover{text-decoration:underline}.footlinks{display:flex;gap:50px}.footlinks div{display:flex;flex-direction:column;gap:12px;font-size:14px}.copyright{border-top:1px solid #32435d;margin-top:45px;padding-top:24px;color:#9eb0c8;font-size:13px}.mobile-call{display:none}@media(max-width:850px){header .wrap{min-height:114px;flex-wrap:wrap;padding:8px 0}.brand{width:126px;height:108px}nav{order:3;width:100%;overflow:auto;gap:24px;padding-bottom:10px;white-space:nowrap}.header-call{display:none}.hero .wrap{grid-template-columns:1fr;padding-top:65px}.hero-art{max-width:460px;padding:0 25px 50px 0}.years-mark{min-height:370px;box-shadow:none}.split,.contact-grid{grid-template-columns:1fr}.detail{grid-template-columns:1fr 1fr}.strip .wrap{flex-wrap:wrap}.section{padding:70px 0}}@media(max-width:600px){.top .wrap span:last-child{display:none}.hero h1,.pagehero h1{font-size:43px}.hero p,.pagehero p{font-size:18px}.hero .wrap{min-height:0}.cards,.detail{grid-template-columns:1fr}.card{min-height:0;padding:28px}.banner .wrap,footer .wrap{display:block}.banner .button{margin-top:22px}.footlinks{margin-top:30px;gap:35px}.list{grid-template-columns:1fr}.mobile-call{display:block;position:fixed;bottom:0;left:0;right:0;z-index:20;background:#df2531;color:white;text-align:center;padding:15px;font-weight:800;box-shadow:0 -3px 20px #0002}body{padding-bottom:52px}}

.years-mark .years-caption{font-size:clamp(18px,2vw,25px);font-weight:400;letter-spacing:-.025em;line-height:1.42;color:#fff;margin:27px 0 0;max-width:480px}.years-mark .since{white-space:nowrap;position:relative;display:inline-block}.years-mark .since:after{content:"";position:absolute;height:4px;left:2%;right:0;bottom:-8px;background:#e92b35;border-radius:50% 35% 45% 35%;transform:rotate(-2deg)}
/* Faint pipe drawings carry the mailer's visual treatment into navy sections. */
.hero,.pagehero,footer{position:relative;isolation:isolate}
.hero::before,.pagehero::before,footer::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url('/assets/pipe-blueprint-overlay.png');background-repeat:no-repeat;background-position:center;background-size:cover;opacity:.38}
footer::before{opacity:.24;background-position:center top}
.hero>.wrap,.pagehero>.wrap,footer>.wrap{position:relative;z-index:1}
@media(max-width:600px){.hero::before,.pagehero::before{background-size:auto 100%;background-position:62% center;opacity:.31}footer::before{opacity:.18}}
/* The approved anniversary artwork uses its original dark lettering. */
.hero{background:#f4f7fa;color:#10254a}
.hero h1{color:#10254a}
.hero p{color:#4c6079}
.hero::before{opacity:.38;filter:brightness(.52) saturate(.7)}
.hero .button.outline{color:#10254a;border-color:#9db2ca}
.hero-art{padding:24px 0;display:flex;align-items:center;justify-content:center}
.years-original{width:min(100%,540px);height:auto;object-fit:contain}
.anniversary{box-shadow:none}
@media(max-width:850px){.hero-art{padding:0 0 35px;max-width:560px;margin:auto}}
/* Let the pipe art read as pale blue linework on both light and navy surfaces. */
.hero::before,.pagehero::before,footer::before{background-image:none;background-color:#a3cfef;-webkit-mask-image:url('/assets/pipe-blueprint-overlay.png');mask-image:url('/assets/pipe-blueprint-overlay.png');-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:cover;mask-size:cover}
.hero::before{filter:none;opacity:.35}
.pagehero::before{opacity:.23}
footer::before{opacity:.15}
@media(max-width:600px){.hero::before,.pagehero::before{-webkit-mask-size:auto 100%;mask-size:auto 100%;-webkit-mask-position:62% center;mask-position:62% center}.hero::before{opacity:.31}.pagehero::before{opacity:.20}footer::before{opacity:.12}}
/* Navy header with the transparent logo intended for dark surfaces. */
header{background:#0c1830;color:#fff;box-shadow:0 2px 18px #050b1740}
header .wrap{min-height:150px}
header .brand{width:170px;height:142px;overflow:hidden}
header .brand img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
header nav a{color:#fff}
header nav a:hover,header nav a:focus-visible{color:#a9d5fa}
header .header-call,header .header-call:hover{color:#fff}
@media(max-width:850px){header .wrap{min-height:126px}header .brand{width:130px;height:109px}}
/* Set the header controls slightly below the logo's visual center. */
@media(min-width:851px){header nav,header .header-call{transform:translateY(35px)}}
@media(max-width:850px){header nav{padding-top:6px}}

/* Align the controls with the ALL STATES wordmark and enlarge header links. */
header nav,header .header-call{font-size:1.1rem}
@media(min-width:851px) and (max-width:1080px){header .wrap{flex-wrap:wrap;gap:8px 18px;padding-bottom:12px}header nav{order:3;width:100%;justify-content:center;transform:none}}
/* Compact mobile navigation and spacing. Desktop layout remains unchanged. */
.mobile-menu{display:none}
@media(max-width:850px){
  header .wrap{position:relative;min-height:0;flex-wrap:nowrap;gap:16px;padding:8px 0}
  header .wrap > nav{display:none}
  header .brand{width:130px;height:109px}
  .mobile-menu{display:block;margin-left:auto;color:#fff}
  .mobile-menu summary{display:flex;align-items:center;justify-content:center;min-height:44px;padding:11px 17px;border:1px solid #607895;border-radius:3px;cursor:pointer;font-size:1rem;font-weight:700;list-style:none}
  .mobile-menu summary::-webkit-details-marker{display:none}
  .mobile-menu[open] summary{background:#1a3254}
  .mobile-menu nav{display:flex;position:absolute;right:0;top:100%;z-index:30;width:min(320px,calc(100vw - 44px));flex-direction:column;align-items:stretch;gap:0;padding:7px 15px;background:#0c1830;border:1px solid #324a68;box-shadow:0 16px 30px #07101e45;overflow:visible;white-space:normal}
  .mobile-menu nav a{display:block;padding:14px 7px;border-bottom:1px solid #324a68;font-size:1rem;line-height:1.25}
  .mobile-menu nav a:last-child{border-bottom:0}
  .mobile-menu summary:focus-visible,.mobile-menu nav a:focus-visible{outline:2px solid #a9d5fa;outline-offset:3px}
  .hero .wrap{padding-top:50px}
  .hero-art{padding:0 0 25px;max-width:480px}
  .section{padding:65px 0}
  .pagehero{padding:75px 0}
}
@media(max-width:600px){
  .wrap{width:calc(100% - 36px)}
  .top{display:none}
  header .brand{width:116px;height:97px}
  .hero .wrap{padding-top:46px}
  .hero h1,.pagehero h1{font-size:clamp(2.35rem,10vw,2.8rem);line-height:1.07;letter-spacing:-.05em}
  .hero p,.pagehero p{font-size:1.0625rem;line-height:1.55}
  .hero .actions,.pagehero .actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:25px}
  .hero .actions .button,.pagehero .actions .button{width:100%;min-height:50px;text-align:center}
  .hero-art{padding:6px 0 22px;max-width:360px}
  .strip{display:none}
  .section{padding:54px 0}
  .section h2{font-size:clamp(1.9rem,8vw,2.4rem)}
  .cards{gap:15px;margin-top:27px}
  .card{padding:27px}
  .card h3{font-size:1.55rem;margin:16px 0 10px}
  .split{gap:24px}
  .anniversary{width:min(100%,360px)}
  .pagehero{padding:58px 0 64px}
  .detail{margin-top:28px}
  .banner{padding:44px 0}
  .banner h2{font-size:1.8rem}
  .banner .button{width:100%;min-height:50px;white-space:normal;text-align:center}
  footer{padding:45px 0 23px}
  footer img{width:150px}
  .footlinks{gap:20px}
  .footlinks div{min-width:0}
  .mobile-call{min-height:54px;padding:15px 18px calc(15px + env(safe-area-inset-bottom));line-height:1.2}
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
}
@media(max-width:360px){.footlinks{flex-direction:column;gap:27px}.hero-art{max-width:310px}}
@media(min-width:601px) and (max-width:850px){
  header .header-call{display:inline-flex;order:2;transform:none;padding:13px 16px;font-size:1rem}
  .mobile-menu{order:3;margin-left:0}
}
/* Slim fixed call bar on phones. */
@media(max-width:600px){.mobile-call{min-height:44px;padding:10px 14px max(10px,env(safe-area-inset-bottom));font-size:.95rem;white-space:nowrap}body{padding-bottom:calc(54px + env(safe-area-inset-bottom))}}
/* Keep the red tap target compact; the device safe area remains outside it. */
@media(max-width:600px){.mobile-call{display:flex;align-items:center;justify-content:center;bottom:env(safe-area-inset-bottom,0px);height:44px;min-height:44px;padding:0 14px;line-height:1.1;box-shadow:0 -2px 10px #0002}body{padding-bottom:calc(52px + env(safe-area-inset-bottom,0px))}}
/* Blue fixed call bar on phones. */
@media(max-width:600px){.mobile-call{background:#0c1830;color:#fff}.mobile-call:hover{background:#152b4c;color:#fff}}
/* Keep the experience section balanced without the repeated anniversary mark. */
.experience-copy{max-width:850px}
/* Center the small home hero line within the phone viewport. */
@media(max-width:600px){.hero .eyebrow{display:block;width:100%;text-align:center}}
/* Bring the homepage introduction closer to the header on larger screens. */
@media(min-width:851px){.hero .wrap{min-height:520px}}
/* Keep the company story readable beneath the About heading. */
.about-hero{padding:68px 0 76px}
.about-story{max-width:800px}
.about-story p{max-width:none;font-size:18px;line-height:1.55;margin:0 0 18px}
.about-story p:last-child{margin-bottom:0}
@media(max-width:600px){.about-hero{padding:52px 0 60px}.about-story p{font-size:1.0625rem}}
/* Pull the About logo and approach copy up beneath the story. */
.about-hero + .section{padding-top:18px}
/* Instagram links use a compact, recognizable mark. */
.instagram-link{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;color:inherit}
.instagram-icon{display:block;width:23px;height:23px;flex:none}
.instagram-link:focus-visible{outline:2px solid #a9d5fa;outline-offset:3px}
.top .instagram-link{width:22px;height:20px}
.top .instagram-icon{width:19px;height:19px}
.footlinks .instagram-link{width:30px;height:30px}
@media(max-width:850px){.mobile-menu nav .instagram-link{display:flex;align-items:center;width:100%;min-height:48px}}
/* Give Instagram a visible place among the main header controls. */
header .header-social{width:44px;height:44px;flex:none;border:1px solid #607895;border-radius:3px;color:#fff;background:#1a3254}
header .header-social:hover{background:#25466f;color:#fff}
header .header-social .instagram-icon{width:24px;height:24px}
@media(min-width:851px){header .header-social{transform:translateY(35px)}}
@media(max-width:850px){header .header-social{order:2}}
@media(max-width:600px){header .header-social{order:0}}