:root{--ink:#101419;--paper:#f4f0e8;--warm:#d9c9b2;--accent:#d69a4a;--sea:#4e8797;--line:rgba(16,20,25,.14);--shell:min(1180px,calc(100% - 40px));--shadow:0 24px 70px rgba(0,0,0,.16)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#f8f6f1;font-family:"DM Sans",sans-serif;line-height:1.6}img,video{display:block;width:100%}a{color:inherit;text-decoration:none}.shell{width:var(--shell);margin-inline:auto}.section{padding:110px 0}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;font-weight:700;color:var(--sea);margin:0 0 18px}.skip-link{position:fixed;left:12px;top:-50px;background:#fff;padding:10px 14px;z-index:999}.skip-link:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.site-header{position:fixed;inset:0 0 auto;z-index:100;color:#fff;transition:.3s}.site-header.is-scrolled{background:rgba(16,20,25,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.12)}.header-inner{height:88px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand-copy{display:flex;flex-direction:column;line-height:1.18}.brand-copy strong{font-family:"Manrope";font-size:1.08rem}.brand-copy span{font-size:.72rem;letter-spacing:.1em}.site-nav{display:flex;align-items:center;gap:28px;font-size:.9rem;font-weight:600}.site-nav a:not(.button){opacity:.88}.site-nav a:hover{opacity:1}.nav-toggle{display:none;background:none;border:0}.nav-toggle span:not(.sr-only){display:block;width:26px;height:2px;background:#fff;margin:5px}
.button{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#111;border:0;padding:14px 22px;border-radius:999px;font-weight:700;cursor:pointer;transition:.2s}.button:hover{transform:translateY(-2px)}.button-small{padding:10px 17px}.button-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.hero{min-height:840px;height:100vh;position:relative;color:#fff;display:grid;align-items:end;overflow:hidden}.hero-slides,.hero-slide{position:absolute;inset:0}.hero-slide{opacity:0;transition:opacity 1.4s}.hero-slide.is-active{opacity:1}.hero-slide img,.project-hero>img{height:100%;object-fit:cover}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,15,.82) 0%,rgba(8,12,15,.36) 60%,rgba(8,12,15,.2)),linear-gradient(0deg,rgba(0,0,0,.52),transparent 55%)}.hero-content{position:relative;z-index:2;padding-bottom:92px}.hero h1,.project-hero h1{font-family:"Manrope";font-size:clamp(3.2rem,7vw,6.8rem);line-height:.98;letter-spacing:-.055em;margin:0;max-width:940px}.hero-intro{font-size:1.2rem;max-width:700px;margin:28px 0}.hero-actions{display:flex;gap:14px;flex-wrap:wrap}.hero-proof{display:flex;gap:36px;margin-top:48px;flex-wrap:wrap}.hero-proof span{display:flex;flex-direction:column;font-size:.82rem;opacity:.85}.hero-proof strong{font-size:1.35rem;color:#fff}.hero-dots{position:absolute;z-index:4;right:35px;bottom:36px;display:flex;gap:8px}.hero-dots button{width:42px;height:4px;border:0;background:rgba(255,255,255,.36);padding:0}.hero-dots button.is-active{background:#fff}
.intro{background:var(--paper)}.intro-grid,.comparison-grid,.about-grid,.ask-grid,.video-grid,.project-overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}.intro h2,.section-heading h2,.comparison-copy h2,.process-intro h2,.about-copy h2,.ask-section h2,.video-copy h2,.story-heading h2,.project-overview h2{font-family:"Manrope";font-size:clamp(2.2rem,4.5vw,4.2rem);line-height:1.04;letter-spacing:-.045em;margin:0}.intro-copy{font-size:1.06rem}.text-link{font-weight:700;border-bottom:1px solid var(--ink);padding-bottom:5px;display:inline-flex;gap:10px;margin-top:10px}
.work-section{background:#11161b;color:#fff}.section-heading{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:42px}.section-heading>p{max-width:410px;color:#bfc7cc}.editorial-grid{display:grid;grid-template-columns:1.35fr 1fr;grid-auto-rows:360px;gap:18px}.project-card{position:relative;overflow:hidden;border-radius:4px;color:#fff;background:#242b30}.project-card img{height:100%;object-fit:cover;transition:.65s}.project-card:hover img{transform:scale(1.035)}.project-card-feature{grid-row:span 2}.project-card-wide{grid-column:span 2}.project-card-overlay{position:absolute;inset:0;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(0deg,rgba(0,0,0,.82),transparent 65%)}.project-card-overlay p{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em}.project-card-overlay h3{font-family:"Manrope";font-size:clamp(1.45rem,3vw,2.7rem);line-height:1.08;max-width:720px;margin:5px 0 15px}.coming-card{display:grid;place-items:center;background:linear-gradient(135deg,#26333a,#14191d)}.coming-copy{padding:38px}.coming-copy h3{font-family:"Manrope";font-size:2rem;line-height:1.15}
.comparison-section{background:#fff}.before-after{position:relative;aspect-ratio:4/3;overflow:hidden;box-shadow:var(--shadow);touch-action:none}.before-after img{position:absolute;inset:0;height:100%;object-fit:cover}.before-wrap{position:absolute;inset:0;width:50%;overflow:hidden}.before-image{width:200%!important;max-width:none}.comparison-handle{position:absolute;left:50%;top:0;bottom:0;width:3px;background:#fff;border:0;padding:0;cursor:ew-resize}.comparison-handle:after{content:"";position:absolute;width:46px;height:46px;border-radius:50%;background:#fff;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 5px 20px rgba(0,0,0,.25)}.comparison-handle span{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%)}.image-label{position:absolute;top:18px;background:rgba(0,0,0,.7);color:#fff;padding:6px 10px;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em}.image-label-before{left:18px}.image-label-after{right:18px}.check-list{padding:0;list-style:none;margin:28px 0}.check-list li{padding:10px 0;border-bottom:1px solid var(--line)}
.video-feature{background:var(--paper)}.video-grid{align-items:center}.video-grid video,.project-video video{border-radius:4px;box-shadow:var(--shadow);max-height:650px;object-fit:cover}
.services-section{background:#fff}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}.service-grid article{padding:34px;background:#fff;min-height:290px}.service-grid span{font-family:"Manrope";font-size:1.1rem;color:var(--accent)}.service-grid h3{font-family:"Manrope";font-size:1.35rem;line-height:1.15;margin:60px 0 14px}
.process-section{background:#172027;color:#fff}.process-intro{max-width:850px}.process-steps{margin-top:60px}.process-steps article{display:grid;grid-template-columns:100px 1fr;gap:20px;padding:30px 0;border-top:1px solid rgba(255,255,255,.16)}.process-steps article>span{font-family:"Manrope";font-size:2.5rem;color:var(--accent)}.process-steps h3{font-family:"Manrope";font-size:1.6rem;margin:0 0 5px}.process-steps p{margin:0;color:#bec8ce;max-width:650px}
.about-section{background:var(--paper)}.about-image-wrap{position:relative}.about-image-wrap img{height:690px;object-fit:cover}.about-badge{position:absolute;right:-25px;bottom:35px;background:var(--accent);width:170px;height:170px;border-radius:50%;display:grid;place-content:center;text-align:center}.about-badge strong{font-family:"Manrope";font-size:2.8rem;line-height:1}.about-badge span{font-size:.72rem;max-width:110px}.about-copy blockquote{font-family:"Manrope";font-size:1.5rem;line-height:1.35;border-left:4px solid var(--accent);padding-left:22px;margin:35px 0}
.ask-section{background:#0f1418;color:#fff}.contact-row{display:flex;gap:25px;flex-wrap:wrap;margin-top:30px}.contact-row a{font-size:1.4rem;font-weight:700}.question-form{display:grid;gap:16px;background:#fff;color:var(--ink);padding:32px}.question-form label{display:grid;gap:6px;font-weight:700;font-size:.86rem}.question-form input,.question-form textarea{width:100%;border:1px solid #cbd0d3;padding:13px;font:inherit}.form-note{font-size:.78rem;color:#687078}
.site-footer{background:#090d10;color:#aeb7bd;padding:55px 0}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}.site-footer strong{font-family:"Manrope";font-size:1.2rem;color:#fff}.site-footer a{color:#fff}
.project-hero{height:82vh;min-height:650px;position:relative;color:#fff}.project-hero-copy{position:absolute;left:50%;bottom:75px;transform:translateX(-50%);z-index:2}.project-hero-copy p:not(.eyebrow){max-width:720px;font-size:1.15rem}.project-overview{background:var(--paper)}.project-facts{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}.project-facts li{display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid var(--line)}.project-facts span{color:#697177}.project-story{background:#fff}.project-story:nth-of-type(even){background:#f2efe8}.story-heading{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:end;margin-bottom:42px}.story-heading>p{color:#60686d}.story-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.story-image{margin:0;background:#ece9e2}.story-image-wide{grid-column:span 2}.story-image img{aspect-ratio:4/3;object-fit:cover}.story-image-wide img{aspect-ratio:16/8.8}.story-image figcaption{padding:12px 14px;font-size:.84rem;color:#566067}.project-video{background:#11161b;color:#fff}.video-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}.video-pair video{height:650px}.project-next{background:var(--accent)}.project-next a{display:grid;grid-template-columns:140px 1fr 70px;align-items:center;border-top:1px solid rgba(0,0,0,.25);padding:30px 0}.project-next strong{font-family:"Manrope";font-size:clamp(1.8rem,4vw,4rem)}.project-next b{font-size:3rem;text-align:right}
@media(max-width:900px){.site-nav{display:none;position:absolute;top:88px;left:0;right:0;background:#111820;padding:25px;flex-direction:column;align-items:stretch}.site-nav.is-open{display:flex}.nav-toggle{display:block}.intro-grid,.comparison-grid,.about-grid,.ask-grid,.video-grid,.project-overview-grid,.story-heading{grid-template-columns:1fr;gap:35px}.editorial-grid{grid-template-columns:1fr;grid-auto-rows:430px}.project-card-feature{grid-row:auto}.project-card-wide{grid-column:auto}.service-grid{grid-template-columns:1fr 1fr}.about-image-wrap img{height:520px}.video-pair{grid-template-columns:1fr}.video-pair video{height:auto}.footer-grid{grid-template-columns:1fr}.section{padding:80px 0}}
@media(max-width:600px){:root{--shell:calc(100% - 28px)}.header-inner{height:76px}.brand-mark{width:58px}.brand-copy strong{font-size:.94rem}.brand-copy span{font-size:.62rem}.site-nav{top:76px}.hero{min-height:720px}.hero-content{padding-bottom:55px}.hero h1,.project-hero h1{font-size:3.1rem}.hero-proof{gap:18px}.section{padding:65px 0}.section-heading{display:block}.editorial-grid{grid-auto-rows:360px}.service-grid{grid-template-columns:1fr}.story-gallery{grid-template-columns:1fr}.story-image-wide{grid-column:auto}.story-image-wide img{aspect-ratio:4/3}.project-next a{grid-template-columns:1fr 45px}.project-next a span{display:none}.about-badge{right:10px;width:140px;height:140px}}

/* V4.1 official-logo header */
.brand-logo-wrap{
  position:relative;
  display:block;
  width:112px;
  height:58px;
  flex:0 0 auto;
  overflow:hidden;
}
.brand-wave,.brand-logo-fallback{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}
.brand-logo-fallback{display:none}
.brand-logo-wrap.logo-fallback .brand-wave{display:none}
.brand-logo-wrap.logo-fallback .brand-logo-fallback{display:block}

/* V4.1 before/after: both images stay full size and aligned */
.before-wrap{
  position:absolute;
  inset:0;
  width:100%;
  overflow:hidden;
  clip-path:inset(0 50% 0 0);
}
.before-image{
  width:100%!important;
  max-width:100%;
  height:100%;
  object-fit:cover;
}

/* Make project links unambiguous */
.project-card{cursor:pointer}
.project-card-overlay span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  width:max-content;
  border-bottom:1px solid rgba(255,255,255,.65);
  padding-bottom:4px;
}
@media(max-width:600px){
  .brand-logo-wrap{width:84px;height:48px}
}


/* =========================================================
   VERSION 4.2 — HEADER REFINEMENT
   Keeps the animated MSK logo at its current approved size.
   Places the tagline directly beneath the company name.
   Aligns, enlarges, and adds restrained color to navigation.
   ========================================================= */

.header-inner{
  display:grid;
  grid-template-columns:minmax(330px,auto) 1fr;
  align-items:center;
  column-gap:40px;
}

.brand{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}

.brand-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
  line-height:1;
  white-space:nowrap;
}

.brand-copy strong{
  display:block;
  font-family:"Manrope",sans-serif;
  font-size:1.28rem;
  line-height:1.05;
  letter-spacing:-0.025em;
}

.brand-copy span{
  display:block;
  margin-top:2px;
  font-size:.78rem;
  line-height:1.1;
  letter-spacing:.095em;
  color:#d7edf2;
}

.site-nav{
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:30px;
  min-height:48px;
  font-size:1.08rem;
  line-height:1;
  font-weight:700;
}

.site-nav a:not(.button){
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 2px;
  color:#9ed6e2;
  opacity:1;
  white-space:nowrap;
  transition:color .22s ease, transform .22s ease;
}

.site-nav a:not(.button)::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:5px;
  width:0;
  height:2px;
  background:#e8ad5e;
  transform:translateX(-50%);
  transition:width .22s ease;
}

.site-nav a:not(.button):hover,
.site-nav a:not(.button):focus-visible{
  color:#f2bd75;
  transform:translateY(-1px);
}

.site-nav a:not(.button):hover::after,
.site-nav a:not(.button):focus-visible::after{
  width:100%;
}

.site-nav .button-small{
  min-height:42px;
  padding:11px 19px;
  color:#15191d;
  background:#e2a557;
  border:1px solid rgba(255,255,255,.15);
}

@media(max-width:1050px){
  .header-inner{
    grid-template-columns:minmax(290px,auto) 1fr;
    column-gap:22px;
  }
  .site-nav{
    gap:20px;
    font-size:1rem;
  }
}

@media(max-width:900px){
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .site-nav{
    justify-self:auto;
    align-items:stretch;
    min-height:0;
    font-size:1.05rem;
    line-height:1.2;
  }
  .site-nav a:not(.button){
    min-height:46px;
    justify-content:flex-start;
    padding:0 4px;
  }
  .site-nav a:not(.button)::after{
    left:4px;
    transform:none;
  }
}

@media(max-width:600px){
  .brand{
    gap:10px;
  }
  .brand-copy strong{
    font-size:1rem;
  }
  .brand-copy span{
    font-size:.62rem;
    letter-spacing:.07em;
  }
}


/* =========================================================
   VERSION 4.3 — BRAND GROUP 30% LARGER
   Enlarges the entire upper-left brand group while preserving
   the approved header layout and navigation styling.
   ========================================================= */

.brand-logo-wrap{
  width:146px;   /* approximately 30% larger than 112px */
  height:75px;   /* approximately 30% larger than 58px */
}

.brand{
  gap:21px;      /* approximately 30% larger than 16px */
}

.brand-copy{
  gap:5px;
}

.brand-copy strong{
  font-size:1.66rem;  /* approximately 30% larger than 1.28rem */
}

.brand-copy span{
  font-size:1.01rem;  /* approximately 30% larger than .78rem */
  letter-spacing:.095em;
}

.header-inner{
  grid-template-columns:minmax(430px,auto) 1fr;
  min-height:104px;
}

.site-header.is-scrolled .header-inner{
  min-height:96px;
}

@media(max-width:1150px){
  .header-inner{
    grid-template-columns:minmax(380px,auto) 1fr;
    column-gap:24px;
  }
  .brand-logo-wrap{
    width:132px;
    height:68px;
  }
  .brand-copy strong{
    font-size:1.5rem;
  }
  .brand-copy span{
    font-size:.91rem;
  }
}

@media(max-width:900px){
  .header-inner{
    min-height:88px;
  }
  .brand-logo-wrap{
    width:109px;
    height:62px;
  }
  .brand-copy strong{
    font-size:1.2rem;
  }
  .brand-copy span{
    font-size:.74rem;
  }
}

@media(max-width:600px){
  .brand-logo-wrap{
    width:92px;
    height:54px;
  }
  .brand-copy strong{
    font-size:1.05rem;
  }
  .brand-copy span{
    font-size:.64rem;
  }
}


/* =========================================================
   VERSION 4.4 — ANIMATED LOGO HOVER ZOOM
   The moving-wave logo enlarges to approximately 2x while
   hovered or keyboard-focused. The video continues playing.
   ========================================================= */

.site-header,
.header-inner,
.brand{
  overflow:visible;
}

.brand{
  position:relative;
  z-index:5;
}

.brand-logo-wrap{
  position:relative;
  z-index:10;
  transform:scale(1);
  transform-origin:left center;
  transition:
    transform .34s cubic-bezier(.2,.75,.25,1),
    filter .34s ease;
  will-change:transform;
}

.brand:hover .brand-logo-wrap,
.brand:focus-visible .brand-logo-wrap,
.brand:focus-within .brand-logo-wrap{
  transform:scale(2);
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.35));
  z-index:50;
}

/* Keep the company name readable while the logo expands over the hero. */
.brand-copy{
  position:relative;
  z-index:20;
}

/* Prevent the enlarged logo from interfering with link clicks. */
.brand-logo-wrap video,
.brand-logo-wrap img{
  pointer-events:none;
}

/* Touch devices do not have a dependable hover state. */
@media(hover:none){
  .brand:hover .brand-logo-wrap,
  .brand:focus-visible .brand-logo-wrap,
  .brand:focus-within .brand-logo-wrap{
    transform:scale(1);
    filter:none;
  }
}

/* Use a gentler enlargement on narrower desktop/tablet layouts. */
@media(hover:hover) and (max-width:1100px){
  .brand:hover .brand-logo-wrap,
  .brand:focus-visible .brand-logo-wrap,
  .brand:focus-within .brand-logo-wrap{
    transform:scale(1.55);
  }
}


/* =========================================================
   VERSION 4.5 — BEFORE/AFTER IMAGE RATIO FIX
   Both bathroom images are native portrait images at 3:4.
   The comparison frame now uses the same 3:4 ratio so neither
   image is enlarged or cropped disproportionately.
   ========================================================= */

.before-after{
  aspect-ratio:3 / 4;
  max-width:620px;
  width:100%;
  justify-self:center;
}

.before-after .after-image,
.before-after .before-image{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  object-position:center center;
}

.before-wrap{
  inset:0;
  width:100%;
  height:100%;
}

@media(max-width:900px){
  .before-after{
    max-width:560px;
  }
}

@media(max-width:600px){
  .before-after{
    max-width:100%;
  }
}

.project-hero h1 {
  font-size: clamp(2.4rem, 4.6vw, 4.8rem);
  line-height: 1.10;
  letter-spacing: -0.025em;
  max-width: 760px;
  color: var(--paper);
}


.garage-hero-title {
  font-size: clamp(2.2rem, 4vw, 4.2rem) !important;
  max-width: 950px !important;letter-spacing: 0;
word-spacing: 0.08em;
}

.project-hero h1 .hero-second-line {
  display: block;
  margin-top: 0.30em;
}

.contact-actions {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.contact-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: .2s;
}

.contact-action:hover {
  background: #fff;
  color: #101419;
  transform: translateY(-2px);
}


.portfolio-cta .coming-copy h3 {
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 10px 0 18px;
}

.portfolio-cta .coming-copy span {
  font-size: 1rem;
  line-height: 1.4;
  max-width: 600px;
  display: block;
}


.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.video-card {
  margin: 0;
}

.video-card-feature {
  grid-column: 1 / -1;
}

.video-card video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #101419;
  border-radius: 4px;
}

.video-card figcaption {
  margin-top: 9px;
  font-size: .9rem;
  line-height: 1.4;
}

@media (max-width: 700px) {
  .video-grid {
    grid-template-columns: 1fr;
  }

  .video-card-feature {
    grid-column: auto;
  }
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 800px) {
  .site-header {
    transition: transform 0.3s ease;
  }

  .site-header.is-hidden {
    transform: translateY(-110%);
  }
}

@media (max-width: 900px) {
  .site-header.is-hidden .site-nav {
    display: none !important;
  }
}
/* Tap enlargement for animated logo */
.brand.is-enlarged .brand-logo-wrap {
  transform: scale(2.3) !important;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.35)) !important;
  position: relative;
  z-index: 200;
}

/* =========================================================
   LOCAL RESOURCES
   ========================================================= */

.local-resources-section {
  background: #f7f8f9;
  padding: 78px 0 48px;
}

.local-resources-heading {
  max-width: 720px;
  margin-bottom: 32px;
}

.local-resources-heading h2 {
  margin-bottom: 12px;
}

.local-resources-heading > p:last-child {
  max-width: 650px;
  color: #5e6872;
}


/* RESOURCE CARD GRID */

.local-resources-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}


/* INDIVIDUAL CARDS */

.resource-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100%;
  padding: 26px;
  background: #ffffff;
  border: 1px solid #dde3e8;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(17, 43, 68, 0.07);
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(17, 43, 68, 0.12);
  border-color: #244f79;
}


/* FEATURED EARTHQUAKE CARD */

.resource-card-featured {
  border: 2px solid #244f79;
}


.resource-badge {
  display: inline-block;
  align-self: flex-start;
  width: auto;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #173e66;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* ICON SIZE — THIS FIXES THE GIANT IMAGES */

.resource-icon {
  display: block;
  width: 118px;
  height: 118px;
  max-width: 118px;
  object-fit: contain;
  margin: 0 0 20px 0;
}


/* CARD TEXT */

.resource-card-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.resource-card h3 {
  margin: 0 0 10px;
  font-size: 1.25rem;
  line-height: 1.22;
  color: #173e66;
}

.resource-card p {
  margin: 0 0 18px;
  color: #5e6872;
  line-height: 1.55;
}

.resource-link {
  margin-top: auto;
  color: #175a96;
  font-weight: 700;
}


/* BUILDING DEPARTMENT CARD */

.resource-card-wide {
  grid-column: span 2;
  flex-direction: row;
  gap: 22px;
  align-items: center;
}

.resource-card-wide .resource-icon {
  flex: 0 0 118px;
  margin-bottom: 0;
}


/* SAFETY / REGIONAL AWARENESS CALLOUT */

.local-resources-callout {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 24px;
  padding: 24px 28px;
  background: #edf4f9;
  border-radius: 16px;
  border: 1px solid #dbe6ef;
}

.resource-callout-icon {
  display: block;
  width: 78px;
  height: 78px;
  max-width: 78px;
  flex: 0 0 78px;
  object-fit: contain;
}

.local-resources-callout h3 {
  margin: 0 0 7px;
  color: #173e66;
}

.local-resources-callout p {
  margin: 0;
  max-width: 760px;
  color: #5e6872;
  line-height: 1.55;
}


/* TABLET */

@media (max-width: 1000px) {
  .local-resources-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* PHONE */

@media (max-width: 640px) {
  .local-resources-grid {
    grid-template-columns: 1fr;
  }

  .resource-card,
  .resource-card-wide {
    grid-column: auto;
  }

  .resource-card-wide {
    flex-direction: column;
    align-items: flex-start;
  }

  .resource-icon {
    width: 96px;
    height: 96px;
    max-width: 96px;
  }

 .local-resources-callout {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.local-resources-callout .resource-callout-icon {
  align-self: flex-start;
  margin-left: 0;
}
 .resource-callout-icon {
  width: 60px;
  height: 60px;
  max-width: 60px;
  min-width: 60px;
  flex: 0 0 60px;
}
}


/* Local Resources heading refinement */
.local-resources-heading {
  display: block;
  max-width: 720px;
  margin-bottom: 28px;
}

.local-resources-heading .eyebrow {
  margin: 0 0 8px;
  color: var(--sea);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
}

.local-resources-heading h2 {
  margin: 0 0 10px;
  font-size: clamp(2.35rem, 3.6vw, 3.35rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.local-resources-heading > p:last-child {
  margin: 0;
  max-width: 620px;
  color: #5e6872;
  font-size: 1rem;
  line-height: 1.55;
}
	
	/* Force Local Resources shield to proper size */
.local-resources-callout .resource-callout-icon {
  display: block;
  width: 78px !important;
  height: 78px !important;
  max-width: 78px !important;
  min-width: 78px;
  flex: 0 0 78px;
  object-fit: contain;
}
	
	.local-resources-callout {
  display: flex;
  align-items: center;
  gap: 22px;
}

/* =========================================================
   LIVE SOUTHERN CALIFORNIA EARTHQUAKE FEED
   ========================================================= */

.earthquake-feed {
  margin-top: 24px;
  padding: 32px;
  background: #ffffff;
  border: 1px solid #dbe3e8;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(17, 43, 68, 0.08);
}

.earthquake-feed[hidden] {
  display: none;
}

.earthquake-feed-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.earthquake-feed-header .eyebrow {
  margin-bottom: 7px;
}

.earthquake-feed-header h3 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: #173e66;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 1.1;
}

.earthquake-close {
  appearance: none;
  border: 1px solid #cbd6df;
  background: #ffffff;
  color: #173e66;
  border-radius: 999px;
  padding: 8px 15px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.earthquake-close:hover {
  background: #edf4f9;
}

.earthquake-feed-status {
  margin: 16px 0;
  color: #5e6872;
}

.earthquake-list {
  border-top: 1px solid #dbe3e8;
}

.earthquake-item {
  display: grid;
  grid-template-columns: 115px 1fr;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid #dbe3e8;
}

.earthquake-mag {
  border-right: 1px solid #dbe3e8;
  padding-right: 20px;
}

.earthquake-mag strong {
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: 2.6rem;
  line-height: 1;
  color: #173e66;
}

.earthquake-mag span {
  display: block;
  margin-top: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7580;
}

.earthquake-details h4 {
  margin: 0 0 7px;
  color: #18222b;
  font-size: 1.05rem;
}

.earthquake-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  color: #66717a;
  font-size: 0.88rem;
}

.earthquake-feed-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 18px;
  color: #68737d;
  font-size: 0.78rem;
}

.earthquake-source {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.earthquake-source a {
  width: max-content;
  color: #68737d;
  font-size: 0.74rem;
  text-decoration: underline;
  text-decoration-color: rgba(104, 115, 125, 0.45);
  text-underline-offset: 3px;
}

.earthquake-source a:hover {
  color: #175a96;
}

@media (max-width: 640px) {
  .earthquake-feed {
    padding: 22px 18px;
  }

  .earthquake-item {
    grid-template-columns: 80px 1fr;
    gap: 16px;
  }

  .earthquake-mag {
    padding-right: 12px;
  }

  .earthquake-mag strong {
    font-size: 2rem;
  }
}

/* =========================================================
   SAN CLEMENTE WEATHER FEED
   ========================================================= */

.weather-feed {
  margin-top: 24px;
  padding: 32px;
  background: #ffffff;
  border: 1px solid #dbe3e8;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(17, 43, 68, 0.08);
}

.weather-feed[hidden] {
  display: none;
}

.weather-feed-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.weather-feed-header .eyebrow {
  margin-bottom: 7px;
}

.weather-feed-header h3 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: #173e66;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 1.1;
}

.weather-close {
  appearance: none;
  border: 1px solid #cbd6df;
  background: #ffffff;
  color: #173e66;
  border-radius: 999px;
  padding: 8px 15px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.weather-close:hover {
  background: #edf4f9;
}

.weather-feed-status {
  margin: 16px 0;
  color: #5e6872;
}


/* CURRENT WEATHER */

.weather-current {
  margin-bottom: 24px;
}

.weather-current-main {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 24px;
  background: #edf4f9;
  border-radius: 14px;
}

.weather-current-temp {
  font-family: "Manrope", sans-serif;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  color: #173e66;
}

.weather-current-copy h4 {
  margin: 0 0 8px;
  color: #173e66;
  font-size: 1.35rem;
}

.weather-current-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: #65717b;
  font-size: 0.9rem;
}


/* FORECAST */

.weather-forecast {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 30px;
}

.weather-forecast-item {
  padding: 16px 14px;
  background: #f7f9fa;
  border: 1px solid #e0e6ea;
  border-radius: 12px;
}

.weather-forecast-name {
  margin-bottom: 8px;
  color: #173e66;
  font-weight: 700;
}

.weather-forecast-temp {
  margin-bottom: 6px;
  font-family: "Manrope", sans-serif;
  font-size: 1.45rem;
  color: #18222b;
}

.weather-forecast-condition {
  color: #65717b;
  font-size: 0.82rem;
  line-height: 1.4;
}


/* RADAR */

.weather-radar {
  margin-top: 6px;
  padding-top: 26px;
  border-top: 1px solid #dbe3e8;
}

.weather-radar-heading {
  margin-bottom: 14px;
}

.weather-radar-heading h4 {
  margin: 0 0 5px;
  color: #173e66;
  font-size: 1.25rem;
}

.weather-radar-heading p {
  margin: 0;
  color: #65717b;
}

.weather-radar-image {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #dbe3e8;
  background: #eef3f6;
}

.weather-radar-image img {
  display: block;
  width: 100%;
  height: auto;
}

.weather-radar-note {
  margin: 10px 0 0;
  color: #68737d;
  font-size: 0.78rem;
}


/* FOOTER / SOURCE */

.weather-feed-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #dbe3e8;
  color: #68737d;
  font-size: 0.78rem;
}

.weather-source {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.weather-source a {
  width: max-content;
  color: #68737d;
  font-size: 0.74rem;
  text-decoration: underline;
  text-decoration-color: rgba(104, 115, 125, 0.45);
  text-underline-offset: 3px;
}

.weather-source a:hover {
  color: #175a96;
}


/* TABLET */

@media (max-width: 900px) {
  .weather-forecast {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* PHONE */

@media (max-width: 640px) {
  .weather-feed {
    padding: 22px 18px;
  }

  .weather-current-main {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .weather-forecast {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   SAN CLEMENTE SURF CONDITIONS
   ========================================================= */

.surf-feed {
  margin-top: 24px;
  padding: 32px;
  background: #ffffff;
  border: 1px solid #dbe3e8;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(17, 43, 68, 0.08);
}

.surf-feed[hidden] {
  display: none;
}

.surf-feed-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.surf-feed-header .eyebrow {
  margin-bottom: 7px;
}

.surf-feed-header h3 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: #173e66;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 1.1;
}

.surf-close {
  appearance: none;
  border: 1px solid #cbd6df;
  background: #ffffff;
  color: #173e66;
  border-radius: 999px;
  padding: 8px 15px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.surf-close:hover {
  background: #edf4f9;
}

.surf-feed-status {
  margin: 16px 0;
  color: #5e6872;
}


/* CURRENT BUOY CONDITIONS */

.surf-current {
  margin-bottom: 28px;
}

.surf-current-heading {
  margin-bottom: 14px;
}

.surf-current-heading h4 {
  margin: 0 0 5px;
  color: #173e66;
  font-size: 1.25rem;
}

.surf-current-heading p {
  margin: 0;
  color: #65717b;
}

.surf-buoy-widget {
  overflow: hidden;
  background: #f7f9fa;
  border: 1px solid #dbe3e8;
  border-radius: 14px;
}

.surf-buoy-widget iframe {
  display: block;
  width: 100%;
  height: 520px;
  border: 0;
}


/* WAVE HEIGHT MAP */

.surf-wave-map {
  margin-top: 6px;
  padding-top: 26px;
  border-top: 1px solid #dbe3e8;
}

.surf-wave-map-heading {
  margin-bottom: 14px;
}

.surf-wave-map-heading h4 {
  margin: 0 0 5px;
  color: #173e66;
  font-size: 1.25rem;
}

.surf-wave-map-heading p {
  margin: 0;
  color: #65717b;
}

.surf-wave-map-image {
  overflow: hidden;
  background: #eef3f6;
  border: 1px solid #dbe3e8;
  border-radius: 14px;
}

.surf-wave-embed iframe {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
}

.surf-wave-map-note {
  margin: 10px 0 0;
  color: #68737d;
  font-size: 0.78rem;
}


/* SURF FOOTER / NOAA SOURCES */

.surf-feed-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #dbe3e8;
  color: #68737d;
  font-size: 0.78rem;
}

.surf-source {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.surf-source a {
  width: max-content;
  color: #68737d;
  font-size: 0.74rem;
  text-decoration: underline;
  text-decoration-color: rgba(104, 115, 125, 0.45);
  text-underline-offset: 3px;
}

.surf-source a:hover {
  color: #175a96;
}


/* TABLET */

@media (max-width: 900px) {
  .surf-wave-embed iframe {
    height: 600px;
  }
}


/* PHONE */

@media (max-width: 640px) {
  .surf-feed {
    padding: 22px 18px;
  }

  .surf-buoy-widget iframe {
    height: 360px;
  }

  .surf-wave-embed iframe {
    height: 500px;
  }
}

/* =========================================================
   SOUTHERN CALIFORNIA CDIP WAVE NOWCAST
   ========================================================= */

.surf-wave-map-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #dfeaf1;
}

.surf-wave-map-stack img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.surf-wave-base {
  z-index: 1;
}

.surf-wave-overlay {
  z-index: 2;
}

.surf-wave-map-link {
  display: block;
}

.surf-wave-map-link:hover .surf-wave-overlay {
  opacity: 0.94;
}

@media (max-width: 640px) {
  .surf-wave-map-stack {
    aspect-ratio: 4 / 3;
  }
}

/* =========================================================
   SURF MAP LOCATION MARKER + WAVE HEIGHT LEGEND
   ========================================================= */

.surf-location-marker {
  position: absolute;
  left: 86.8%;
top: 56.2%;
  z-index: 4;
 display: flex;
flex-direction: row-reverse;
align-items: center;
gap: 6px;
transform: translate(-6px, -50%);
  pointer-events: none;
}

.surf-location-label {
  margin-bottom: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #173e66;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.surf-location-dot {
  display: block;
  width: 11px;
  height: 11px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #d69a4a;
  box-shadow: 0 0 0 2px #173e66;
}


/* WAVE HEIGHT LEGEND */

.surf-wave-legend {
  margin-top: 14px;
}

.surf-wave-legend-title {
  margin-bottom: 6px;
  color: #173e66;
  font-size: 0.8rem;
  font-weight: 700;
}

.surf-wave-legend-bar {
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      #071a8c 0%,
      #073cc7 12%,
      #006be6 24%,
      #00a9e8 36%,
      #00cfa6 48%,
      #6bd34d 60%,
      #d6df39 70%,
      #f7b733 78%,
      #ef6c32 86%,
      #dc3545 92%,
      #9b2fae 100%
    );
}

.surf-wave-legend-values {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 5px;
  color: #68737d;
  font-size: 0.68rem;
}

@media (max-width: 640px) {
  .surf-location-marker {
   left: 86.8%;
top: 56.2%;
transform: translate(-6px, -50%);
  }

  .surf-location-label {
    font-size: 0.64rem;
    padding: 3px 6px;
  }

  .surf-wave-legend-values {
    font-size: 0.6rem;
  }
}

/* =========================================================
   LOCAL FISH REPORT
   ========================================================= */

.fish-feed {
  margin-top: 24px;
  padding: 32px;
  background: #ffffff;
  border: 1px solid #dbe3e8;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(17, 43, 68, 0.08);
}

.fish-feed[hidden] {
  display: none;
}

.fish-feed-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.fish-feed-header .eyebrow {
  margin-bottom: 7px;
}

.fish-feed-header h3 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: #173e66;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 1.1;
}

.fish-close {
  appearance: none;
  border: 1px solid #cbd6df;
  background: #ffffff;
  color: #173e66;
  border-radius: 999px;
  padding: 8px 15px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.fish-close:hover {
  background: #edf4f9;
}

.fish-feed-status {
  margin: 16px 0;
  color: #5e6872;
}


/* INTRO */

.fish-report-intro {
  margin-bottom: 24px;
  padding: 22px 24px;
  background: #edf4f9;
  border-radius: 14px;
}

.fish-report-intro h4 {
  margin: 0 0 7px;
  color: #173e66;
  font-size: 1.2rem;
}

.fish-report-intro p {
  margin: 0;
  color: #5e6872;
  line-height: 1.55;
}


/* SOURCE CARDS */

.fish-source-grid {
  display: grid;
grid-template-columns: 1fr;
  gap: 18px;
}

.fish-source-card {
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: 24px;
  background: #f8fafb;
  border: 1px solid #dbe3e8;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.fish-source-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(17, 43, 68, 0.1);
  border-color: #244f79;
}

.fish-source-label {
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #173e66;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fish-source-card h4 {
  margin: 0 0 10px;
  color: #173e66;
  font-size: 1.2rem;
}

.fish-source-card p {
  margin: 0 0 18px;
  color: #5e6872;
  line-height: 1.55;
}

.fish-source-link {
  margin-top: auto;
  color: #175a96;
  font-weight: 700;
}


/* SPECIES NOTE */

.fish-species-note {
  margin-top: 20px;
  padding: 18px 20px;
  background: #f7f9fa;
  border: 1px solid #e0e6ea;
  border-radius: 12px;
}

.fish-species-note strong {
  display: block;
  margin-bottom: 6px;
  color: #173e66;
}

.fish-species-note p {
  margin: 0;
  color: #68737d;
  line-height: 1.5;
}


/* FOOTER */

.fish-feed-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #dbe3e8;
  color: #68737d;
  font-size: 0.78rem;
}

.fish-source {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fish-source a {
  width: max-content;
  color: #68737d;
  font-size: 0.74rem;
  text-decoration: underline;
  text-decoration-color: rgba(104, 115, 125, 0.45);
  text-underline-offset: 3px;
}

.fish-source a:hover {
  color: #175a96;
}


/* PHONE */

@media (max-width: 640px) {
  .fish-feed {
    padding: 22px 18px;
  }

  .fish-source-grid {
    grid-template-columns: 1fr;
  }

  .fish-source-card {
    min-height: 0;
  }
	.resource-card {
  min-height: 0;
  padding: 22px;
}

.resource-card-copy {
  flex: 0 1 auto;
}

.resource-link {
  margin-top: 16px;
}

.resource-icon {
  margin-bottom: 16px;
}
}

/* =========================================================
   BUILDING FOR EARTHQUAKE COUNTRY
   ========================================================= */

.earthquake-building-section {
  background: #111820;
  color: #ffffff;
}

.earthquake-building-heading {
  max-width: 820px;
  margin-bottom: 38px;
}

.earthquake-building-heading .eyebrow {
  color: #9ed6e2;
  margin-bottom: 10px;
}

.earthquake-building-heading h2 {
  margin: 0 0 16px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: #ffffff;
}

.earthquake-building-heading > p:last-child {
  margin: 0;
  max-width: 760px;
  color: #c2ccd2;
  font-size: 1.02rem;
  line-height: 1.6;
}


/* VIDEO CARDS */

.earthquake-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.earthquake-video-card {
  overflow: hidden;
  background: #172027;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
}

.earthquake-video-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(
      135deg,
      #26333a,
      #111820
    );
  color: #9ed6e2;
  font-weight: 700;
  letter-spacing: .04em;
}

.earthquake-video-copy {
  padding: 24px;
}

.earthquake-video-label {
  margin: 0 0 8px;
  color: #e2a557;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.earthquake-video-card h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 1.35rem;
  line-height: 1.2;
}

.earthquake-video-card p {
  margin: 0;
  color: #c2ccd2;
  line-height: 1.55;
}


/* MSK NOTE */

.earthquake-building-note {
  margin-top: 24px;
  padding: 22px 24px;
  border-left: 4px solid #e2a557;
  background: rgba(255,255,255,.05);
}

.earthquake-building-note p {
  margin: 0;
  max-width: 860px;
  color: #d7e0e5;
  font-family: "Manrope", sans-serif;
  font-size: 1.08rem;
  line-height: 1.5;
}


/* TABLET / PHONE */

@media (max-width: 800px) {
  .earthquake-video-grid {
    grid-template-columns: 1fr;
  }
}

.earthquake-video-embed {
  aspect-ratio: 16 / 9;
  background: #111820;
}

.earthquake-video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 640px) {
  .earthquake-building-heading h2 {
    font-size: 2.3rem;
  }

  .earthquake-video-copy {
    padding: 20px;
  }

  .earthquake-building-note {
    padding: 18px;
  }
}

/* =========================================================
   CONTRACTOR RESOURCES PAGE
   ========================================================= */

.contractor-resources-hero {
  background: #111820;
  color: #ffffff;
  padding-top: 150px;
  padding-bottom: 90px;
}

.contractor-resources-intro {
  max-width: 880px;
}

.contractor-resources-intro .eyebrow {
  color: #9ed6e2;
  margin-bottom: 12px;
}

.contractor-resources-intro h1 {
  margin: 0 0 22px;
  max-width: 900px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(3rem, 6vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: #ffffff;
}

.contractor-resources-lead {
  margin: 0;
  max-width: 760px;
  color: #c6d0d6;
  font-size: 1.1rem;
  line-height: 1.65;
}


/* DISCLAIMER */

.contractor-resources-disclaimer {
  margin-top: 34px;
  max-width: 900px;
  padding: 20px 22px;
  border-left: 4px solid #e2a557;
  background: rgba(255,255,255,.05);
}

.contractor-resources-disclaimer strong {
  display: block;
  margin-bottom: 5px;
  color: #ffffff;
}

.contractor-resources-disclaimer p {
  margin: 0;
  color: #c6d0d6;
  line-height: 1.55;
}


/* CATEGORY SECTION */

.contractor-resource-categories {
  background: #f4f0e8;
}

.contractor-resources-heading {
  align-items: end;
}

.contractor-resources-heading > p {
  color: #5f6870;
}


/* CATEGORY GRID */

.contractor-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.contractor-resource-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 22px;
  min-height: 250px;
  padding: 28px;
  background: #ffffff;
  border: 1px solid rgba(16,20,25,.12);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(16,20,25,.05);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.contractor-resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(16,20,25,.1);
  border-color: #4e8797;
}

.contractor-resource-card-wide {
  grid-column: 1 / -1;
}

.contractor-resource-number {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;
  font-family: "Manrope", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #d69a4a;
}

.contractor-resource-card h3 {
  margin: 0 0 12px;
  font-family: "Manrope", sans-serif;
  font-size: 1.55rem;
  line-height: 1.15;
  color: #173e66;
}

.contractor-resource-card p {
  margin: 0 0 18px;
  color: #5e6872;
  line-height: 1.55;
}

.contractor-resource-link {
  display: inline-flex;
  margin-top: auto;
  color: #175a96;
  font-weight: 700;
}


/* DETAIL SECTIONS */

.contractor-resource-detail {
  background: #ffffff;
  border-top: 1px solid rgba(16,20,25,.1);
}

.contractor-resource-detail:nth-of-type(even) {
  background: #f7f8f9;
}

.contractor-detail-grid {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) 1.1fr;
  gap: 70px;
  align-items: start;
}

.contractor-detail-grid h2 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #173e66;
}

.contractor-detail-grid > div:last-child > p {
  margin: 0 0 18px;
  color: #5e6872;
  font-size: 1rem;
  line-height: 1.65;
  max-width: 680px;
}

.contractor-coming {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: #edf4f9;
  color: #175a96;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
}


/* TABLET */

@media (max-width: 900px) {
  .contractor-resources-hero {
    padding-top: 130px;
  }

  .contractor-resource-grid {
    grid-template-columns: 1fr;
  }

  .contractor-resource-card-wide {
    grid-column: auto;
  }

  .contractor-detail-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}


/* PHONE */

@media (max-width: 640px) {
  .contractor-resources-hero {
    padding-top: 110px;
    padding-bottom: 70px;
  }

  .contractor-resources-intro h1 {
    font-size: 2.7rem;
  }

  .contractor-resource-card {
    grid-template-columns: 48px 1fr;
    gap: 16px;
    min-height: 0;
    padding: 22px 18px;
  }

  .contractor-resource-number {
    font-size: 1.1rem;
  }

  .contractor-resource-card h3 {
    font-size: 1.28rem;
  }

  .contractor-resources-disclaimer {
    padding: 18px;
  }
}

/* =========================================================
   CONTRACTOR RESOURCES — SEISMIC SYSTEMS
   ========================================================= */

.contractor-resource-detail.seismic-resource-section {
  background: #111820;
  color: #ffffff;
}
.contractor-resource-detail.seismic-resource-section .contractor-detail-grid h2 {
  color: #ffffff;
}

.contractor-resource-detail.seismic-resource-section .eyebrow {
  color: #9ed6e2;
}


.seismic-resource-intro {
  margin-bottom: 34px;
}

.seismic-resource-intro h2 {
  color: #ffffff;
}

.seismic-resource-intro > div:last-child p {
  color: #c5cfd5;
}

.seismic-resource-intro > div:last-child p + p {
  margin-top: 12px;
}


/* VIDEO GRID */

.seismic-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 28px;
}

.seismic-video-card {
  overflow: hidden;
  background: #172027;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
}

.seismic-video-embed {
  aspect-ratio: 16 / 9;
  background: #0f1418;
}

.seismic-video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.seismic-video-copy {
  padding: 24px;
}

.seismic-resource-label {
  margin: 0 0 8px;
  color: #e2a557;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.seismic-video-copy h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 1.35rem;
  line-height: 1.2;
}

.seismic-video-copy p {
  margin: 0;
  color: #c5cfd5;
  line-height: 1.55;
}


/* REFERENCE CARDS */

.seismic-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.seismic-reference-card {
  padding: 22px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
}

.seismic-reference-card > span {
  display: block;
  margin-bottom: 14px;
  color: #e2a557;
  font-family: "Manrope", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
}

.seismic-reference-card h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 1.2rem;
  line-height: 1.2;
}

.seismic-reference-card p {
  margin: 0 0 14px;
  color: #c5cfd5;
  line-height: 1.5;
}

.seismic-reference-card strong {
  color: #9ed6e2;
  font-size: .78rem;
  font-weight: 700;
}


/* TABLET */

@media (max-width: 900px) {
  .seismic-video-grid {
    grid-template-columns: 1fr;
  }

  .seismic-reference-grid {
    grid-template-columns: 1fr;
  }
}


/* PHONE */

@media (max-width: 640px) {
  .seismic-video-copy {
    padding: 20px;
  }

  .seismic-reference-card {
    padding: 18px;
  }
}

/* =========================================================
   SEISMIC RESOURCE LINKS
   ========================================================= */

.seismic-resource-links {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.seismic-resource-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  color: #dce8ee;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.seismic-resource-links a:hover {
  background: rgba(255,255,255,.10);
  border-color: #9ed6e2;
  transform: translateY(-2px);
  color: #ffffff;
}

.seismic-resource-links a::after {
  content: "↗";
  flex: 0 0 auto;
  color: #e2a557;
  font-size: .95rem;
}

/* =========================================================
   CONTRACTOR CATALOG LIBRARY
   ========================================================= */

.contractor-catalog-library {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.contractor-catalog-heading {
  max-width: 760px;
  margin-bottom: 20px;
}

.contractor-catalog-heading h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 1.7rem;
  line-height: 1.15;
}

.contractor-catalog-heading p:last-child {
  margin: 0;
  color: #c5cfd5;
  line-height: 1.55;
}


/* CATALOG CARDS */

.contractor-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.contractor-catalog-card {
  display: flex;
  flex-direction: column;
  min-height: 245px;
  padding: 24px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.contractor-catalog-card:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.09);
  border-color: #9ed6e2;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

.contractor-catalog-card > span {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(158,214,226,.12);
  color: #9ed6e2;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.contractor-catalog-card h4 {
  margin: 0 0 10px;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 1.22rem;
  line-height: 1.2;
}

.contractor-catalog-card p {
  margin: 0 0 18px;
  color: #c5cfd5;
  line-height: 1.55;
}

.contractor-catalog-card strong {
  margin-top: auto;
  color: #e2a557;
  font-size: .84rem;
  font-weight: 700;
}


/* TABLET */

@media (max-width: 900px) {
  .contractor-catalog-grid {
    grid-template-columns: 1fr;
  }
}


/* PHONE */

@media (max-width: 640px) {
  .contractor-catalog-card {
    min-height: 0;
    padding: 20px;
  }

  .contractor-catalog-heading h3 {
    font-size: 1.45rem;
  }
}

/* =========================================================
   CONTRACTOR RESOURCES — STRUCTURAL LOADS
   ========================================================= */

.structural-resource-section {
  background: #f7f8f9;
}

.structural-resource-intro {
  margin-bottom: 34px;
}

.structural-resource-intro > div:last-child p {
  color: #5e6872;
}

.structural-resource-intro > div:last-child p + p {
  margin-top: 12px;
}


/* STRUCTURAL REFERENCE CARDS */

.structural-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.structural-reference-card {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #dbe3e8;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(17, 43, 68, 0.05);
}

.structural-reference-card > span {
  display: block;
  margin-bottom: 14px;
  color: #d69a4a;
  font-family: "Manrope", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
}

.structural-reference-card h3 {
  margin: 0 0 10px;
  color: #173e66;
  font-family: "Manrope", sans-serif;
  font-size: 1.25rem;
  line-height: 1.2;
}

.structural-reference-card p {
  margin: 0 0 16px;
  color: #5e6872;
  line-height: 1.55;
}

.structural-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.structural-topic-list span {
  display: inline-block;
  padding: 6px 9px;
  border-radius: 999px;
  background: #edf4f9;
  color: #175a96;
  font-size: 0.72rem;
  font-weight: 700;
}


/* WORKED EXAMPLE */

.structural-example {
  margin-top: 24px;
  padding: 26px;
  background: #111820;
  border-radius: 16px;
  color: #ffffff;
}

.structural-example-heading {
  margin-bottom: 18px;
}

.structural-example-heading h3 {
  margin: 0;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 1.65rem;
  line-height: 1.15;
}

.structural-example-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.structural-example-grid > div {
  padding: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
}

.structural-example-grid span {
  display: block;
  margin-bottom: 6px;
  color: #aebbc4;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.structural-example-grid strong {
  display: block;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 1.45rem;
}

.structural-example-note {
  margin: 18px 0 0;
  color: #bfcbd2;
  font-size: .82rem;
  line-height: 1.5;
}


/* TABLET */

@media (max-width: 900px) {
  .structural-reference-grid {
    grid-template-columns: 1fr;
  }

  .structural-example-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* PHONE */

@media (max-width: 640px) {
  .structural-reference-card {
    padding: 20px;
  }

  .structural-example {
    padding: 20px;
  }

  .structural-example-grid {
    grid-template-columns: 1fr;
  }
}
/* STRUCTURAL LOAD EXPLAINER */

.structural-load-explainer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.structural-load-explainer-item {
  padding: 16px;
  background: rgba(255,255,255,.045);
  border-radius: 10px;
}

.structural-load-explainer-item h4 {
  margin: 0 0 7px;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: .95rem;
}

.structural-load-explainer-item p {
  margin: 0;
  color: #bfcbd2;
  font-size: .8rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .structural-load-explainer {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   STRUCTURAL REFERENCE LIBRARY
   ========================================================= */

.structural-library {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid #dbe3e8;
}

.structural-library-heading {
  max-width: 760px;
  margin-bottom: 20px;
}

.structural-library-heading h3 {
  margin: 0 0 10px;
  color: #173e66;
  font-family: "Manrope", sans-serif;
  font-size: 1.7rem;
  line-height: 1.15;
}

.structural-library-heading p:last-child {
  margin: 0;
  color: #5e6872;
  line-height: 1.55;
}


/* REFERENCE CARDS */

.structural-library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.structural-library-card {
  display: flex;
  flex-direction: column;
  min-height: 235px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #dbe3e8;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(17, 43, 68, 0.05);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.structural-library-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(17, 43, 68, 0.10);
  border-color: #4e8797;
}

.structural-library-card > span {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #edf4f9;
  color: #175a96;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.structural-library-card h4 {
  margin: 0 0 10px;
  color: #173e66;
  font-family: "Manrope", sans-serif;
  font-size: 1.22rem;
  line-height: 1.2;
}

.structural-library-card p {
  margin: 0 0 18px;
  color: #5e6872;
  line-height: 1.55;
}

.structural-library-card strong {
  margin-top: auto;
  color: #d69a4a;
  font-size: .84rem;
  font-weight: 700;
}


/* TABLET */

@media (max-width: 900px) {
  .structural-library-grid {
    grid-template-columns: 1fr;
  }
}


/* PHONE */

@media (max-width: 640px) {
  .structural-library-card {
    min-height: 0;
    padding: 20px;
  }

  .structural-library-heading h3 {
    font-size: 1.45rem;
  }
}

/* =========================================================
   STRUCTURAL LOADS — VIDEO CARDS
   ========================================================= */

.structural-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 28px 0 24px;
}

.structural-video-card {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #dbe3e8;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(17, 43, 68, 0.05);
}

.structural-video-embed {
  aspect-ratio: 16 / 9;
  background: #111820;
}

.structural-video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.structural-video-copy {
  padding: 24px;
}

.structural-video-label {
  margin: 0 0 8px;
  color: #d69a4a;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.structural-video-copy h3 {
  margin: 0 0 10px;
  color: #173e66;
  font-family: "Manrope", sans-serif;
  font-size: 1.35rem;
  line-height: 1.2;
}

.structural-video-copy p {
  margin: 0;
  color: #5e6872;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .structural-video-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .structural-video-copy {
    padding: 20px;
  }
}

/* =========================================================
   CONTRACTOR RESOURCES — CONCRETE & ANCHORING
   ========================================================= */

.concrete-resource-section {
  background: #f4f0e8;
}

.concrete-resource-intro {
  margin-bottom: 34px;
}

.concrete-resource-intro > div:last-child p {
  color: #5e6872;
}

.concrete-resource-intro > div:last-child p + p {
  margin-top: 12px;
}


/* VIDEO GRID */

.concrete-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 28px;
}

.concrete-video-card {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #dbe3e8;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(17, 43, 68, 0.05);
}

.concrete-video-embed {
  aspect-ratio: 16 / 9;
  background: #111820;
}

.concrete-video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.concrete-video-copy {
  padding: 24px;
}

.concrete-video-label {
  margin: 0 0 8px;
  color: #d69a4a;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.concrete-video-copy h3 {
  margin: 0 0 10px;
  color: #173e66;
  font-family: "Manrope", sans-serif;
  font-size: 1.35rem;
  line-height: 1.2;
}

.concrete-video-copy p {
  margin: 0;
  color: #5e6872;
  line-height: 1.55;
}


/* REFERENCE CARDS */

.concrete-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.concrete-reference-card {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #dbe3e8;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(17, 43, 68, 0.05);
}

.concrete-reference-card > span {
  display: block;
  margin-bottom: 14px;
  color: #d69a4a;
  font-family: "Manrope", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
}

.concrete-reference-card h3 {
  margin: 0 0 10px;
  color: #173e66;
  font-family: "Manrope", sans-serif;
  font-size: 1.22rem;
  line-height: 1.2;
}

.concrete-reference-card p {
  margin: 0 0 16px;
  color: #5e6872;
  line-height: 1.55;
}

.concrete-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.concrete-topic-list span {
  display: inline-block;
  padding: 6px 9px;
  border-radius: 999px;
  background: #edf4f9;
  color: #175a96;
  font-size: .72rem;
  font-weight: 700;
}


/* FIELD NOTE */

.concrete-field-note {
  margin-top: 24px;
  padding: 24px 26px;
  background: #111820;
  border-radius: 16px;
  color: #ffffff;
}

.concrete-field-note h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 1.55rem;
  line-height: 1.15;
}

.concrete-field-note p:last-child {
  margin: 0;
  max-width: 840px;
  color: #c5cfd5;
  line-height: 1.6;
}


/* TABLET */

@media (max-width: 900px) {
  .concrete-video-grid {
    grid-template-columns: 1fr;
  }

  .concrete-reference-grid {
    grid-template-columns: 1fr;
  }
}


/* PHONE */

@media (max-width: 640px) {
  .concrete-video-copy {
    padding: 20px;
  }

  .concrete-reference-card {
    padding: 20px;
  }

  .concrete-field-note {
    padding: 20px;
  }
}

/* =========================================================
   CONCRETE & ANCHORING REFERENCE LIBRARY
   ========================================================= */

.concrete-library {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid #dbe3e8;
}

.concrete-library-heading {
  max-width: 760px;
  margin-bottom: 20px;
}

.concrete-library-heading h3 {
  margin: 0 0 10px;
  color: #173e66;
  font-family: "Manrope", sans-serif;
  font-size: 1.7rem;
  line-height: 1.15;
}

.concrete-library-heading p:last-child {
  margin: 0;
  color: #5e6872;
  line-height: 1.55;
}


/* LIBRARY GRID */

.concrete-library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.concrete-library-card {
  display: flex;
  flex-direction: column;
  min-height: 235px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #dbe3e8;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(17, 43, 68, 0.05);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.concrete-library-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(17, 43, 68, 0.10);
  border-color: #4e8797;
}

.concrete-library-card-wide {
  grid-column: 1 / -1;
}


/* LABEL */

.concrete-library-card > span {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #edf4f9;
  color: #175a96;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}


/* CARD TEXT */

.concrete-library-card h4 {
  margin: 0 0 10px;
  color: #173e66;
  font-family: "Manrope", sans-serif;
  font-size: 1.22rem;
  line-height: 1.2;
}

.concrete-library-card p {
  margin: 0 0 18px;
  color: #5e6872;
  line-height: 1.55;
}

.concrete-library-card strong {
  margin-top: auto;
  color: #d69a4a;
  font-size: .84rem;
  font-weight: 700;
}


/* TABLET */

@media (max-width: 900px) {
  .concrete-library-grid {
    grid-template-columns: 1fr;
  }

  .concrete-library-card-wide {
    grid-column: auto;
  }
}


/* PHONE */

@media (max-width: 640px) {
  .concrete-library-card {
    min-height: 0;
    padding: 20px;
  }

  .concrete-library-heading h3 {
    font-size: 1.45rem;
  }
}

/* =========================================================
   CONTRACTOR RESOURCES — DECK CONSTRUCTION
   ========================================================= */

.deck-resource-section {
  background: #ffffff;
}

.deck-resource-intro {
  margin-bottom: 34px;
}

.deck-resource-intro > div:last-child p {
  color: #5e6872;
}

.deck-resource-intro > div:last-child p + p {
  margin-top: 12px;
}


/* FEATURED DECK PLANNER */

.deck-planner-feature {
  display: block;
  margin-top: 28px;
  padding: 28px;
  background: #111820;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  color: #ffffff;
  text-decoration: none;
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.deck-planner-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(17,43,68,.18);
}

.deck-resource-label {
  margin: 0 0 8px;
  color: #e2a557;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.deck-planner-feature h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 1.7rem;
  line-height: 1.15;
}

.deck-planner-feature p {
  margin: 0 0 18px;
  max-width: 820px;
  color: #c5cfd5;
  line-height: 1.6;
}

.deck-planner-feature strong {
  color: #9ed6e2;
  font-size: .9rem;
}


/* DECK TOPIC CARDS */

.deck-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.deck-reference-card {
  padding: 24px;
  background: #f7f9fa;
  border: 1px solid #dbe3e8;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(17,43,68,.04);
}

.deck-reference-card > span {
  display: block;
  margin-bottom: 14px;
  color: #d69a4a;
  font-family: "Manrope", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
}

.deck-reference-card h3 {
  margin: 0 0 10px;
  color: #173e66;
  font-family: "Manrope", sans-serif;
  font-size: 1.2rem;
  line-height: 1.2;
}

.deck-reference-card p {
  margin: 0;
  color: #5e6872;
  line-height: 1.55;
}


/* DECK REFERENCE LIBRARY */

.deck-library {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid #dbe3e8;
}

.deck-library-heading {
  max-width: 760px;
  margin-bottom: 20px;
}

.deck-library-heading h3 {
  margin: 0;
  color: #173e66;
  font-family: "Manrope", sans-serif;
  font-size: 1.65rem;
  line-height: 1.15;
}

.deck-library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.deck-library-card {
  display: flex;
  flex-direction: column;
  min-height: 230px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #dbe3e8;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(17,43,68,.05);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.deck-library-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(17,43,68,.10);
  border-color: #4e8797;
}

.deck-library-card > span {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #edf4f9;
  color: #175a96;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.deck-library-card h4 {
  margin: 0 0 10px;
  color: #173e66;
  font-family: "Manrope", sans-serif;
  font-size: 1.22rem;
  line-height: 1.2;
}

.deck-library-card p {
  margin: 0 0 18px;
  color: #5e6872;
  line-height: 1.55;
}

.deck-library-card strong {
  margin-top: auto;
  color: #d69a4a;
  font-size: .84rem;
  font-weight: 700;
}


/* TABLET */

@media (max-width: 900px) {
  .deck-reference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deck-library-grid {
    grid-template-columns: 1fr;
  }
}


/* PHONE */

@media (max-width: 640px) {
  .deck-planner-feature {
    padding: 22px;
  }

  .deck-reference-grid {
    grid-template-columns: 1fr;
  }

  .deck-reference-card {
    padding: 20px;
  }

  .deck-library-card {
    min-height: 0;
    padding: 20px;
  }
}

/* =========================================================
   COMPACT MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 900px) {

  .site-nav {
    top: 100%;
    left: 0;
    right: 0;

    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    gap: 10px;

    padding: 10px 14px;

    background: rgba(17, 24, 32, 0.98);

    overflow-x: auto;
    overflow-y: hidden;

    white-space: nowrap;

    min-height: 58px;

    box-shadow: 0 8px 18px rgba(0,0,0,.18);

    -webkit-overflow-scrolling: touch;
  }


  .site-nav.is-open {
    display: flex;
  }


  .site-nav a:not(.button) {
    flex: 0 0 auto;

    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 8px;

    font-size: .86rem;
    line-height: 1;

    white-space: nowrap;
  }


  .site-nav .button-small {
    flex: 0 0 auto;

    min-height: 38px;

    padding: 8px 14px;

    font-size: .86rem;

    white-space: nowrap;
  }


  .site-nav a:not(.button)::after {
    bottom: 0;
  }

}