/* ==========================================================================
   Ramirez Rod — reinforcing steel
   Light system. White paper, steel greys, Mexican flag accents.
   Flag: green #006847 · white #ffffff · red #ce1126
   ========================================================================== */

:root{
  --paper:#ffffff;
  --paper-2:#f5f6f8;
  --paper-3:#eceef1;

  --line:#d9dde2;
  --line-soft:#e8ebee;

  --fg:#0d1013;
  --fg-dim:#39424e;
  --muted:#6d7684;

  /* flag */
  --green:#006847;
  --green-dk:#005137;
  --white:#ffffff;
  --red:#ce1126;
  --red-dk:#a60d1e;

  --accent:var(--green);

  --shell:min(1280px, 92vw);
  --nav-h:74px;

  /* One family across the whole site, as in the reference. Figtree is a
     geometric-humanist sans: same warm, round, wide feel. */
  --font:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;

  --radius:14px;      /* cards, tiles, inputs */
  --radius-sm:10px;
  --pill:999px;       /* buttons */

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--fg);
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,h4,.display{
  font-family:var(--font);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.02em;   /* a geometric sans wants slight negative tracking */
  margin:0;
  text-transform:none;
  text-wrap:balance;
}

h1{font-size:clamp(2.5rem,5.6vw,4.5rem)}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.45rem);font-weight:700;letter-spacing:-.01em}
h4{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}

p{margin:0 0 1.1em}

.shell{width:var(--shell);margin-inline:auto}

/* flag stripe — reusable 3-band rule */
.flag{
  display:block;
  height:4px;
  width:56px;
  border:1px solid var(--line);
  background:linear-gradient(90deg,
    var(--green) 0 33.333%,
    var(--white) 33.333% 66.666%,
    var(--red) 66.666% 100%);
}

.eyebrow{
  font-family:var(--font);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.01em;
  text-transform:none;
  color:var(--green);
  display:flex;
  align-items:center;
  gap:.85rem;
  margin:0 0 1.25rem;
}
.eyebrow::before{
  content:"";
  flex:none;
  width:22px;height:3px;border-radius:2px;
  background:var(--green);
}

.lede{
  font-size:clamp(1.05rem,1.5vw,1.28rem);
  color:var(--fg-dim);
  max-width:62ch;
}

.muted{color:var(--muted)}

/* --------------------------------------------------------------- buttons */
.btn{
  --bg:var(--green);
  --fg-btn:#fff;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding:.95rem 2rem;
  border-radius:var(--pill);
  background:var(--bg);
  color:var(--fg-btn);
  font-family:var(--font);
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:.01em;
  text-transform:none;
  text-decoration:none;
  border:0;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn span{position:relative;z-index:1}
.btn::after{
  content:"";
  position:absolute;inset:0;
  background:var(--red);
  transform:translateY(101%);
  transition:transform .42s var(--ease-out);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(0,0,0,.45)}
.btn:hover::after{transform:translateY(0)}

.btn--ghost{
  --bg:transparent;
  --fg-btn:var(--fg);
  border:1.5px solid var(--fg);
}
.btn--ghost::after{background:var(--fg)}
.btn--ghost:hover{color:#fff}

/* ------------------------------------------------------------------- nav */
.nav{
  position:fixed;inset:0 0 auto;
  height:var(--nav-h);
  z-index:80;
  display:flex;align-items:center;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav.is-stuck{
  background:rgba(255,255,255,.97);
  border-bottom-color:var(--line);
  box-shadow:0 1px 16px -8px rgba(0,0,0,.3);
}
.nav__inner{
  width:var(--shell);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}

/* animated logo lockup */
.brand{display:flex;align-items:center;gap:.85rem;text-decoration:none}
.brand__mark{
  position:relative;
  width:42px;height:42px;
  flex:none;
  display:grid;place-items:center;
}
.brand__mark img{
  width:30px;height:30px;
  object-fit:contain;
  transition:transform .6s var(--ease-out);
}
.brand__ring{
  position:absolute;inset:0;
  width:100%;height:100%;
  transform:rotate(-90deg);
  overflow:visible;
}
.brand__ring circle{
  fill:none;
  stroke:var(--green);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-dasharray:126;
  stroke-dashoffset:126;
  animation:ring-draw 1.5s var(--ease-out) .25s forwards;
}
@keyframes ring-draw{to{stroke-dashoffset:32}}
.brand:hover .brand__mark img{transform:rotate(-8deg) scale(1.08)}
.brand:hover .brand__ring{animation:ring-spin 2.6s linear infinite}
@keyframes ring-spin{to{transform:rotate(270deg)}}

.brand__word{
  font-family:var(--font);
  font-weight:700;
  font-size:1.3rem;
  letter-spacing:.16em;
  text-transform:uppercase;   /* the logo lockup keeps its caps */
  line-height:1;
  display:flex;
  overflow:hidden;
}
.brand__word span{
  display:inline-block;
  animation:letter-rise .7s var(--ease-out) backwards;
}

/* ROD — Mexican flag. The white letter carries a hairline so it reads on paper. */
.mx-g{color:var(--green)}
.mx-w{
  color:var(--white);
  -webkit-text-stroke:.75px var(--fg);
  paint-order:stroke fill;
}
.mx-r{color:var(--red)}

@keyframes letter-rise{
  from{transform:translateY(105%);opacity:0}
  to{transform:translateY(0);opacity:1}
}

.nav__links{display:flex;align-items:center;gap:2.1rem;list-style:none;margin:0;padding:0}
.nav__links a{
  font-family:var(--font);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.01em;
  text-transform:none;
  text-decoration:none;
  color:var(--fg-dim);
  position:relative;
  padding-block:.35rem;
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:2px;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--fg)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

.nav__cta{padding:.7rem 1.3rem;font-size:.95rem}

.nav__burger{
  display:none;
  width:44px;height:44px;
  border-radius:var(--radius-sm);
  background:none;border:1px solid var(--line);
  cursor:pointer;padding:0;place-items:center;
}
.nav__burger i{display:block;width:18px;height:2px;background:var(--fg);position:relative;transition:background .2s}
.nav__burger i::before,.nav__burger i::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--fg);
  transition:transform .35s var(--ease-out);
}
.nav__burger i::before{top:-6px}
.nav__burger i::after{top:6px}
.nav.is-open .nav__burger i{background:transparent}
.nav.is-open .nav__burger i::before{transform:translateY(6px) rotate(45deg)}
.nav.is-open .nav__burger i::after{transform:translateY(-6px) rotate(-45deg)}

/* --------------------------------------------------------------- reveals */
[data-reveal]{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{opacity:1;transform:none}

[data-reveal="mask"]{
  opacity:1;transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-reveal="mask"].is-in{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal],[data-reveal="mask"]{opacity:1;transform:none;clip-path:none;transition:none}
  .brand__ring circle{animation:none;stroke-dashoffset:32}
  .brand__word span{animation:none}
}

/* ==================================================================== HERO
   Static full-viewport opener. The image sits behind a white wash so the
   type reads as paper, with a light parallax drift on scroll.            */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:flex-end;
  padding-block:var(--nav-h) clamp(3.5rem,8vh,6rem);
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{position:absolute;inset:-6% 0 0;z-index:-2;will-change:transform}
.hero__bg img{
  width:100%;height:112%;
  object-fit:cover;object-position:50% 45%;
}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to right, rgba(255,255,255,.97) 0%, rgba(255,255,255,.88) 28%, rgba(255,255,255,.15) 64%, rgba(255,255,255,0) 100%),
    linear-gradient(to top, rgba(255,255,255,.96) 0%, rgba(255,255,255,.28) 30%, rgba(255,255,255,0) 60%);
}
.hero__content{position:relative;width:var(--shell);margin-inline:auto}
.hero h1{margin:0 0 1.5rem;max-width:14ch}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line > span{display:block;animation:line-up 1.05s var(--ease-out) backwards}
@keyframes line-up{from{transform:translateY(102%)}to{transform:translateY(0)}}
.hero h1 em{font-style:normal;color:var(--green)}
.hero__meta{display:flex;flex-wrap:wrap;gap:1rem 2.6rem;align-items:center;margin-top:2.2rem}

.hero__scroll{
  position:absolute;z-index:2;
  left:max(4vw,2rem);
  bottom:clamp(1.4rem,3vh,2.2rem);
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--font);
  font-size:.82rem;letter-spacing:.01em;text-transform:none;
  color:var(--muted);
}
.hero__scroll i{
  display:block;width:52px;height:2px;
  background:linear-gradient(90deg,var(--green),transparent);
  animation:scroll-pulse 2.2s var(--ease) infinite;
}
@keyframes scroll-pulse{
  0%{transform:scaleX(0);transform-origin:left}
  45%{transform:scaleX(1);transform-origin:left}
  55%{transform:scaleX(1);transform-origin:right}
  100%{transform:scaleX(0);transform-origin:right}
}


/* Playback progress under the cover video. Driven by the video's own
   currentTime, so it fills once per loop and restarts with it. */
.hero__progress{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  height:3px;
  background:rgba(13,16,19,.10);
  pointer-events:none;
}
.hero__progress i{
  display:block;height:100%;width:100%;
  transform-origin:left center;
  transform:scaleX(var(--vp,0));
  background:linear-gradient(90deg,
    var(--green) 0 38%,
    var(--white) 46% 54%,
    var(--red) 62% 100%);
}
@media (prefers-reduced-motion:reduce){
  .hero__progress i{transition:none}
}

/* ------------------------------------------------------- section framing */
.section{padding-block:clamp(6rem,13vh,10rem);position:relative}
.section--tight{padding-block:clamp(4rem,8vh,6rem)}
.section--panel{background:var(--paper-2);border-block:1px solid var(--line-soft)}

.section__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:end;
  margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
.section__head h2{max-width:16ch}

/* ------------------------------------------------------------- stat band */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1.25rem;
}
.stat{
  padding:clamp(2rem,3.6vw,3rem) clamp(1.2rem,2vw,1.8rem);
  background:var(--paper-2);
  border-radius:var(--radius);
  text-align:center;
  position:relative;overflow:hidden;
}
.stat::before{
  content:"";
  position:absolute;left:0;top:0;
  width:100%;height:4px;
  background:var(--green);
  transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease-out);
}
.stat:nth-child(2)::before{background:var(--red)}
.stat:nth-child(3)::before{background:var(--green)}
.stat.is-in::before{transform:scaleX(1)}
.stat__n{
  font-family:var(--font);
  font-weight:700;
  font-weight:800;
  font-size:clamp(2.4rem,4.4vw,3.4rem);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--green);
  font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;justify-content:center;gap:.05em;
}
.stat__n small{font-size:.55em;color:var(--green)}
.stat__l{
  margin-top:.6rem;
  font-family:var(--font);
  font-weight:500;
  font-size:.98rem;letter-spacing:0;text-transform:none;
  color:var(--fg-dim);
}

/* -------------------------------------------------------------- services */
.svc{display:grid;gap:1.25rem;background:none;border:0}
.svc--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.svc__item{
  background:var(--paper-2);
  border-radius:var(--radius);
  padding:clamp(1.8rem,3vw,2.6rem);
  position:relative;overflow:hidden;
  transition:transform .45s var(--ease-out), box-shadow .4s var(--ease);
  min-height:280px;
  display:flex;flex-direction:column;
}
.svc__item:hover{transform:translateY(-4px);box-shadow:0 22px 44px -30px rgba(13,16,19,.35)}
.svc__num{
  font-family:var(--font);
  font-weight:700;
  font-size:.85rem;letter-spacing:0;
  color:var(--red);
  margin-bottom:auto;
}
.svc__item h3{margin:2.2rem 0 .8rem;color:var(--green)}
.svc__item p{color:var(--muted);margin:0;font-size:.98rem}
.svc__icon{
  position:absolute;right:-14px;bottom:-14px;
  width:130px;height:130px;
  opacity:.1;
  transition:opacity .5s var(--ease), transform .6s var(--ease-out);
  pointer-events:none;
}
.svc__item:hover .svc__icon{opacity:.22;transform:translate(-8px,-8px) rotate(-6deg)}

/* -------------------------------------------------------------- coverage */
.cover__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:1.1rem;background:none;
  border:0;
}
.region{
  background:var(--paper-2);
  border-radius:var(--radius);
  padding:clamp(1.5rem,2.6vw,2rem);
  position:relative;overflow:hidden;
}
.region__bar{height:4px;background:var(--line-soft);margin-bottom:1.3rem;overflow:hidden}
.region__bar i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,
    var(--green) 0 33.333%,
    #fff 33.333% 66.666%,
    var(--red) 66.666% 100%);
  border-block:1px solid var(--line);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease-out) var(--d,0ms);
}
.region.is-in .region__bar i{transform:scaleX(1)}
.region h3{font-size:1.35rem;margin-bottom:.45rem;color:var(--green)}
.region p{margin:0;font-size:.93rem;color:var(--muted)}
.region__states{
  margin-top:1rem;
  font-family:var(--font);
  font-size:.85rem;letter-spacing:.01em;text-transform:none;
  color:var(--fg-dim);
}

/* ------------------------------------------------------------- portfolio */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.5rem}
.filters button{
  background:transparent;
  border:1px solid var(--line);
  color:var(--muted);
  font-family:var(--font);
  font-size:.95rem;letter-spacing:.01em;text-transform:none;
  padding:.6rem 1.3rem;
  border-radius:var(--pill);
  cursor:pointer;
  transition:all .3s var(--ease);
}
.filters button:hover{color:var(--fg);border-color:var(--fg)}
.filters button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.5rem}

/* Image on top, label bar underneath on white — as in the reference, rather
   than type sitting over the photo. */
.card{
  position:relative;
  display:flex;flex-direction:column;
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  transition:transform .5s var(--ease-out), box-shadow .4s var(--ease);
}
.card.is-hidden{display:none}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(13,16,19,.4)}
.card__media{position:relative;overflow:hidden}
.card img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .9s var(--ease-out);
}
.card:hover img{transform:scale(1.05)}
.card__body{
  padding:1.25rem 1.4rem 1.5rem;
  background:var(--paper);
  color:var(--fg);
  display:flex;flex-direction:column;gap:.3rem;
  flex:1;
}
.card__tag{
  font-family:var(--font);
  font-weight:600;
  font-size:.85rem;letter-spacing:0;text-transform:none;
  color:var(--muted);
}
.card__body h3{
  font-size:1.25rem;margin:0;color:var(--green);
  display:flex;align-items:center;gap:.5rem;
}
/* the reference marks each card with a small round arrow */
.card__body h3::after{
  content:"";
  flex:none;width:20px;height:20px;border-radius:50%;
  background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/11px no-repeat;
  transition:transform .35s var(--ease-out);
}
.card:hover .card__body h3::after{transform:translateX(3px)}
.card__body p{margin:0;font-size:.93rem;color:var(--fg-dim)}
.card--wide{grid-column:span 2}
.card--wide img{aspect-ratio:16/9}
@media (max-width:720px){.card--wide{grid-column:span 1}.card--wide img{aspect-ratio:4/3}}

/* ------------------------------------------------------------------ page */
.page-head{
  padding-block:calc(var(--nav-h) + clamp(4rem,10vh,7rem)) clamp(3rem,6vh,5rem);
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}
.page-head::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,104,71,.06),transparent 70%);
  pointer-events:none;
}
.page-head__inner{position:relative}

.split{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}

.figure{position:relative;overflow:hidden;border:1px solid var(--line-soft);border-radius:var(--radius)}
.figure img{width:100%}
.figure figcaption{
  padding:.85rem 1rem;
  background:var(--paper-2);
  font-size:.86rem;color:var(--muted);
  border-top:1px solid var(--line);
}

.rule-list{list-style:none;margin:0;padding:0}
.rule-list li{
  padding:1.15rem 0;
  border-bottom:1px solid var(--line-soft);
  display:flex;gap:1.1rem;align-items:flex-start;
}
.rule-list li::before{
  content:"";flex:none;
  width:9px;height:9px;margin-top:.55rem;
  background:var(--green);
  transform:rotate(45deg);
}
.rule-list li:nth-child(even)::before{background:var(--red)}
.rule-list strong{
  display:block;
  font-family:var(--font);
  font-size:1.22rem;letter-spacing:.04em;text-transform:none;
  margin-bottom:.15rem;
}
.rule-list span{color:var(--muted);font-size:.96rem}

/* ------------------------------------------------------------------ form */
.form{display:grid;gap:1.3rem}
.field{display:flex;flex-direction:column;gap:.55rem}
.field--row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.3rem}
.field label{
  font-family:var(--font);
  font-size:.9rem;letter-spacing:.01em;text-transform:none;
  color:var(--fg-dim);
}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--fg);
  font-family:inherit;font-size:1rem;
  border-radius:var(--radius-sm);
  padding:.95rem 1.05rem;
  width:100%;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{resize:vertical;min-height:150px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(0,104,71,.14);
}
.field input::placeholder,.field textarea::placeholder{color:#9aa2ae}

.form__note{font-size:.88rem;color:var(--muted);margin:0}

.contact-card{background:var(--paper-2);border:0;border-radius:var(--radius);padding:clamp(1.6rem,3vw,2.4rem)}
.contact-card dl{margin:0;display:grid;gap:1.4rem}
.contact-card dt{
  font-family:var(--font);
  font-size:.82rem;letter-spacing:.01em;text-transform:none;
  color:var(--green);margin-bottom:.3rem;
}
.contact-card dd{margin:0;font-size:1.05rem}
.contact-card a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .3s}
.contact-card a:hover{border-color:var(--green)}

/* ------------------------------------------------------------------- CTA */
.cta{
  position:relative;overflow:hidden;
  border-top:1px solid var(--line);
  background:var(--paper-2);
  text-align:center;
  padding-block:clamp(5rem,12vh,9rem);
}
.cta::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,
    var(--green) 0 33.333%,
    #fff 33.333% 66.666%,
    var(--red) 66.666% 100%);
}
.cta__inner{position:relative}
.cta h2{margin-bottom:1.2rem}
.cta .lede{margin-inline:auto;margin-bottom:2.4rem}
.cta__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ---------------------------------------------------------------- footer */
.footer{border-top:1px solid var(--line);padding-block:clamp(3rem,6vh,4.5rem) 2rem;background:var(--paper)}
.footer__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:2.5rem;
  padding-bottom:2.8rem;
  border-bottom:1px solid var(--line-soft);
}
.footer h4{font-size:1rem;letter-spacing:0;color:var(--muted);margin-bottom:1.1rem}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.footer a{color:var(--fg-dim);text-decoration:none;font-size:.97rem;transition:color .3s var(--ease)}
.footer a:hover{color:var(--green)}
.footer__bottom{
  padding-top:1.8rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.86rem;color:var(--muted);
}

/* --------------------------------------------------------------- lightbox */
.lb{
  position:fixed;inset:0;z-index:120;
  background:rgba(255,255,255,.97);
  display:grid;place-items:center;
  padding:clamp(1rem,4vw,3rem);
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s;
}
.lb.is-open{opacity:1;visibility:visible}
.lb img{max-width:100%;max-height:82svh;object-fit:contain;border:1px solid var(--line)}
.lb__cap{margin-top:1rem;text-align:center;color:var(--muted);font-size:.95rem}
.lb__close{
  position:absolute;top:1.5rem;right:1.5rem;
  width:46px;height:46px;
  background:none;border:1px solid var(--line);color:var(--fg);
  font-size:1.4rem;cursor:pointer;line-height:1;
}
.lb__close:hover{border-color:var(--red);color:var(--red)}

/* ------------------------------------------------------------ responsive */
@media (max-width:900px){
  .section__head{grid-template-columns:1fr}
  .nav__links{
    position:fixed;inset:var(--nav-h) 0 auto;
    flex-direction:column;align-items:flex-start;gap:0;
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:1rem max(4vw,1.5rem) 2rem;
    transform:translateY(-12px);
    opacity:0;visibility:hidden;
    transition:all .35s var(--ease-out);
  }
  .nav.is-open .nav__links{transform:none;opacity:1;visibility:visible}
  .nav__links li{width:100%;border-bottom:1px solid var(--line-soft)}
  .nav__links a{display:block;padding:1rem 0;font-size:1.15rem}
  .nav__burger{display:grid}
  .nav__cta{display:none}
  .hero__scrim{
    background:linear-gradient(to top, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 36%, rgba(255,255,255,.25) 64%, rgba(255,255,255,0) 100%);
  }
}

@media (max-width:560px){
  body{font-size:16px}
  .stats{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr}
}

/* ============================================================ ADDITIONS
   Cover video, breadcrumbs, response promise, FAQ, map, sticky mobile CTA.
   ===================================================================== */

/* the hero now carries video rather than a still */
.hero__bg video,
.hero__bg img{
  width:100%;height:112%;
  object-fit:cover;object-position:50% 45%;
  display:block;
}

/* -------------------------------------------------------- breadcrumbs */
.crumbs{
  padding-top:calc(var(--nav-h) + 1.1rem);
  padding-bottom:.2rem;
  background:var(--paper);
}
.crumbs ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  font-family:var(--font);
  font-size:.88rem;letter-spacing:.01em;text-transform:none;
  color:var(--muted);
}
.crumbs li+li::before{content:"/";margin-right:.55rem;color:var(--line)}
.crumbs a{color:var(--muted);text-decoration:none;transition:color .25s var(--ease)}
.crumbs a:hover{color:var(--green)}
.crumbs [aria-current]{color:var(--fg)}
/* page heads already clear the fixed nav; don't double up under crumbs */
.crumbs + .page-head{padding-top:clamp(1.5rem,4vh,2.5rem)}

/* --------------------------------------------------- response promise */
.promise{
  display:block;                 /* not flex: the text and <strong> must flow
                                    as one sentence, not as separate items */
  margin:1.6rem 0 0;
  padding:.85rem 1.15rem;
  background:rgba(0,104,71,.07);
  border-left:3px solid var(--green);
  border-radius:var(--radius-sm);
  font-size:.97rem;color:var(--fg-dim);
  max-width:56ch;
}
.promise strong{color:var(--fg)}
.promise a{color:var(--green);font-weight:600}
.promise__dot{
  display:inline-block;vertical-align:middle;
  width:9px;height:9px;margin:-2px .55rem 0 0;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px rgba(0,104,71,.16);
}
@media (prefers-reduced-motion:no-preference){
  .promise__dot{animation:pulse 2.6s var(--ease) infinite}
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(0,104,71,.16)}
  50%{box-shadow:0 0 0 7px rgba(0,104,71,.05)}
}

/* ---------------------------------------------------------------- FAQ */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line);background:var(--paper)}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.35rem 1.2rem 1.35rem 0;
  cursor:pointer;list-style:none;
  font-family:var(--font);
  font-weight:600;font-size:clamp(1.1rem,1.7vw,1.4rem);
  letter-spacing:.02em;text-transform:none;
  transition:color .25s var(--ease);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--green)}
.faq__item summary:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.faq__item summary i{
  flex:none;position:relative;width:16px;height:16px;
}
.faq__item summary i::before,
.faq__item summary i::after{
  content:"";position:absolute;left:0;top:7px;
  width:16px;height:2px;background:var(--green);
  transition:transform .3s var(--ease-out);
}
.faq__item summary i::after{transform:rotate(90deg)}
.faq__item[open] summary i::after{transform:rotate(0)}
.faq__item[open] summary{color:var(--green)}
.faq__a{padding:0 3rem 1.5rem 0}
.faq__a p{margin:0;color:var(--muted);max-width:74ch}

/* ---------------------------------------------------------------- map */
.mapcard{margin-top:1.5rem;border:1px solid var(--line);overflow:hidden}
.mapcard iframe{filter:grayscale(.25)}
.mapcard__foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;
  padding:1rem 1.1rem;
  background:var(--paper-2);border-top:1px solid var(--line);
}
.mapcard__foot strong{
  display:block;
  font-family:var(--font);
  font-size:.82rem;letter-spacing:.01em;text-transform:none;
  color:var(--green);
}
.mapcard__foot span{font-size:.95rem}

/* --------------------------------------------- sticky CTA (phones only) */
.mobile-cta{display:none}
@media (max-width:760px){
  .mobile-cta{
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    display:grid;grid-template-columns:auto 1fr;gap:1px;
    background:var(--line);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobile-cta a{
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    padding:1rem 1.2rem;
    background:var(--paper);
    color:var(--fg);text-decoration:none;
    font-family:var(--font);
    font-weight:700;font-size:1.02rem;
    letter-spacing:.01em;text-transform:none;
  }
  .mobile-cta a svg{width:18px;height:18px;fill:var(--green)}
  .mobile-cta__primary{background:var(--green)!important;color:#fff!important}
  /* keep the footer clear of the bar */
  .footer{padding-bottom:calc(4.6rem + env(safe-area-inset-bottom))}
}

/* ============================================================ LOGO INTRO
   First visit to the home page only. White ground, the mark pops in, the
   wordmark slides out from behind it, then the whole lockup flies to the
   nav position and hands off to the real header underneath.
   Built from a clone of the actual nav brand, so it matches exactly. */
.intro{
  position:fixed;inset:0;z-index:200;
  background:var(--paper);
  display:grid;place-items:center;
  opacity:1;
  transition:opacity .5s var(--ease);
}
.intro.is-out{opacity:0;pointer-events:none}

.intro__lockup{
  display:flex;align-items:center;gap:1.1rem;
  transform-origin:top left;
  will-change:transform;
  text-decoration:none;
}
/* flight to the corner */
.intro__lockup.is-fly{
  transition:transform .85s cubic-bezier(.65,0,.35,1);
}

/* the mark: pops in */
.intro__lockup .brand__mark{
  width:104px;height:104px;
  opacity:0;transform:scale(.72);
  transition:opacity .5s var(--ease-out), transform .7s cubic-bezier(.34,1.56,.64,1);
}
.intro__lockup .brand__mark img{width:76px;height:76px}
.intro.is-mark .brand__mark{opacity:1;transform:scale(1)}

/* the ring draws with the mark rather than on page load */
.intro__lockup .brand__ring circle{animation:none;stroke-dashoffset:126;stroke-width:2.2}
.intro.is-mark .brand__ring circle{animation:ring-draw 1s var(--ease-out) .15s forwards}

/* the wordmark: letters slide out from behind the mark */
.intro__lockup .brand__word{
  font-size:clamp(1.9rem,5vw,3.1rem);
  overflow:hidden;
}
.intro__lockup .brand__word span{
  animation:none;
  opacity:0;
  transform:translateX(-2.2em);
  transition:opacity .45s var(--ease-out), transform .6s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.intro.is-word .brand__word span{opacity:1;transform:translateX(0)}

@media (prefers-reduced-motion:reduce){
  .intro{display:none}
}