/* J-Roc Exteriors.
   Theme derived from the logo: slate #2C424F, red, hard angles, heavy condensed caps.
   Nothing here is rounded, because nothing in the mark is. */

/* ---------- fonts ---------- */
@font-face{font-family:Archivo;src:url(../fonts/archivo-400-800.woff2) format('woff2-variations');
  font-weight:400 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:Barlow;src:url(../fonts/barlow-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(../fonts/barlow-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url(../fonts/barlow-600.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  /* Straight off the mark */
  --slate:#2c424f;
  --slate-deep:#16232b;
  --ink:#1b2a33;
  --body:#41545f;
  --muted:#5f7683;
  --on-dark:#b0c1ca;
  --on-dark-dim:#8397a3;

  --red:#de0c09;
  --red-deep:#b00d0a;
  --red-wash:#fdeceb;

  --surface:#fff;
  --surface-soft:#f1f4f6;
  --rule:#d3dbe0;

  --gap:clamp(1rem,3vw,2rem);
  --wrap:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
  --header-h:78px;

  --display:Archivo,"Arial Narrow",Arial,sans-serif;
  --text:Barlow,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M0 5h15.2L11 .8 12 0l6 6-6 6-1-.8L15.2 7H0z'/%3E%3C/svg%3E");
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='square'%3E%3Cpath d='M4 12l5.5 5.5L20 7'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{margin:0;overflow-x:hidden;background:var(--surface);color:var(--body);
  font-family:var(--text);font-size:clamp(1rem,.96rem + .2vw,1.08rem);line-height:1.62;
  -webkit-font-smoothing:antialiased}
img,picture,svg,iframe{max-width:100%;height:auto;display:block}
svg[aria-hidden="true"]{width:1.1em;height:1.1em;flex:none}

h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0 0 .55em;
  line-height:1.06;letter-spacing:-.02em;font-weight:800;font-stretch:88%;text-wrap:balance}
h1{font-size:clamp(2rem,1.45rem + 2.6vw,3.35rem);text-transform:uppercase;letter-spacing:-.015em}
h2{font-size:clamp(1.7rem,1.25rem + 2.1vw,2.6rem)}
h3{font-size:clamp(1.15rem,1.04rem + .55vw,1.42rem);font-weight:700;font-stretch:92%;letter-spacing:-.01em}
p{margin:0 0 1.1em;text-wrap:pretty}
strong{font-weight:600;color:var(--ink)}
.dark strong,.hero strong,.cta-band strong{color:#fff}
a{color:var(--red-deep);text-underline-offset:3px}
a:hover{color:var(--red)}
main p a{display:inline-block;padding:.15rem 0}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
ul,ol{padding-left:1.15em}
.wrap{width:min(100% - 2*var(--gap),var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:#fff;padding:.75rem 1rem;border:2px solid var(--slate)}

/* Signage label. Used for kickers, eyebrows, buttons, nav. */
.kicker,.eyebrow,.btn,.nav a,.info h3,.stat span{
  font-family:var(--display);font-stretch:88%;letter-spacing:.06em;text-transform:uppercase}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:54px;padding:.9rem 1.6rem;border:2px solid transparent;
  font-size:.92rem;font-weight:700;text-decoration:none;cursor:pointer;
  transition:background .12s linear,color .12s linear,border-color .12s linear,transform .1s var(--ease)}
.btn:active{transform:scale(.96)}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:var(--red-deep);border-color:var(--red-deep);color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:#fff}
.btn-ghost:hover{background:#fff;color:var(--slate-deep)}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--slate)}
.btn-outline:hover{background:var(--slate);color:#fff}
.btn-sm{min-height:44px;padding:.55rem 1.1rem;font-size:.84rem}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:3px solid var(--slate);
  transition:box-shadow .25s var(--ease)}
.site-header.is-scrolled{box-shadow:0 6px 20px -12px rgba(22,35,43,.4)}
.site-header .wrap{display:flex;align-items:center;gap:1rem;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto;flex:none}
.brand img{width:88px;height:67px;object-fit:contain}
.brand-text{display:block;font-family:var(--display);font-size:.7rem;color:var(--muted);
  letter-spacing:.15em;text-transform:uppercase;font-weight:600;font-stretch:80%;
  border-left:1px solid var(--rule);padding-left:.75rem;line-height:1.45;white-space:nowrap}
@media (max-width:560px){.brand-text{display:none}}
@media (max-width:760px){.brand img{width:68px;height:52px}}
.site-footer .brand img{width:76px;height:58px}
.site-footer .brand-text{color:var(--on-dark-dim);border-left-color:rgba(255,255,255,.2)}

.nav ul{display:flex;gap:.1rem;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:.65rem .72rem;color:var(--slate);text-decoration:none;
  font-weight:600;font-size:.82rem;white-space:nowrap;border-bottom:3px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--rule)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--red)}
.nav-toggle{display:none;align-items:center;justify-content:center;gap:.55rem;min-height:46px;
  padding:0 1rem;border:2px solid var(--slate);background:#fff;cursor:pointer;
  font-family:var(--display);font-stretch:88%;font-weight:700;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.nav-toggle svg{width:20px;height:20px}
@media (max-width:1050px){
  .nav-toggle{display:inline-flex}
  .nav{position:absolute;inset:100% 0 auto;background:#fff;border-bottom:3px solid var(--slate);
    padding:0 var(--gap);display:grid;grid-template-rows:0fr;overflow:hidden;visibility:hidden;
    transition:grid-template-rows .32s var(--ease),visibility 0s linear .32s,border-bottom-color .32s}
  .nav[data-open="true"]{grid-template-rows:1fr;visibility:visible;
    transition:grid-template-rows .32s var(--ease),visibility 0s linear 0s}
  .nav ul{overflow:hidden;min-height:0;flex-direction:column;gap:0;padding:.25rem 0 1rem}
  .nav a{padding:.95rem .25rem;font-size:1rem;border-bottom:1px solid var(--rule)}
  .nav a[aria-current="page"]{border-bottom-color:var(--red)}
  .header-cta{display:none}
}

/* ---------- roofline: the chevron from the mark ---------- */
.roofline{height:14px;background:var(--slate-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 14 14 0l14 14z' fill='%23de0c09'/%3E%3C/svg%3E") repeat-x center/28px 14px}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;color:#fff;background:var(--slate-deep)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(15,25,32,.95) 0%,rgba(15,25,32,.86) 46%,rgba(15,25,32,.5) 100%)}
.hero-noimg::after{content:none}
.hero .wrap{padding:clamp(3.25rem,8vw,6.5rem) 0 clamp(2.75rem,6vw,5rem)}
.hero-inner{max-width:48rem}
.hero h1{color:#fff}
.hero p.lede{font-size:clamp(1.05rem,.98rem + .48vw,1.28rem);color:#dae3e8;max-width:36rem;line-height:1.7}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.15rem;
  padding:.5rem .9rem;background:var(--red);color:#fff;font-size:.72rem;font-weight:700}
.hero .actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}
.hero-trust{display:flex;flex-wrap:wrap;gap:.55rem 1.7rem;margin:2.1rem 0 0;padding:0;list-style:none;
  font-size:.9rem;color:#cfdae1;font-weight:500}
.hero-trust li{display:flex;align-items:center;gap:.5rem}
.hero-trust svg{width:16px;height:16px;color:#fff;flex:none}
.hero.compact .wrap{padding:clamp(2.5rem,5.5vw,4.25rem) 0}
.hero.compact .hero-inner{max-width:52rem}

@keyframes rise-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero .eyebrow{animation:rise-in .6s var(--ease) both}
.hero h1{animation:rise-in .6s var(--ease) .08s both}
.hero p.lede{animation:rise-in .6s var(--ease) .16s both}
.hero .actions{animation:rise-in .6s var(--ease) .24s both}
.hero .hero-trust{animation:rise-in .6s var(--ease) .32s both}

/* ---------- sections ---------- */
section{padding:clamp(3rem,6.5vw,5.25rem) 0}
.soft{background:var(--surface-soft)}
.dark{background:var(--slate-deep);color:var(--on-dark)}
.dark h2,.dark h3{color:#fff}
.section-head{max-width:44rem;margin-bottom:clamp(1.9rem,3.6vw,2.9rem)}
.section-head.center{margin-inline:auto;text-align:center}
.kicker{display:flex;align-items:center;gap:.6rem;font-size:.76rem;font-weight:700;
  color:var(--red);margin-bottom:.75rem}
.kicker::before{content:"";width:26px;height:3px;background:var(--red);flex:none}
.center .kicker{justify-content:center}
.dark .kicker{color:#fff}
.lede{font-size:1.08rem}

/* ---------- grids and cards ---------- */
.grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.card{background:#fff;border:1px solid var(--rule);display:flex;flex-direction:column;
  transition:border-color .12s linear,transform .22s var(--ease),box-shadow .22s var(--ease)}
.card:hover{border-color:var(--slate);transform:translateY(-5px);box-shadow:0 14px 28px -16px rgba(22,35,43,.32)}
.card>img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card-body{padding:1.3rem 1.35rem 1.4rem;display:flex;flex-direction:column;flex:1}
.card-body h3{margin-bottom:.4rem}
.card-body p{font-size:.96rem;margin-bottom:1.1rem}
.card-link{margin-top:auto;padding:.3rem 0;font-family:var(--display);font-stretch:88%;
  font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--red-deep);display:inline-flex;align-items:center;gap:.45rem}
.card-link::after{content:"";width:1.1em;height:.72em;background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;
  transition:transform .12s linear}
.card:hover .card-link::after{transform:translateX(3px)}

.split{display:grid;gap:clamp(1.6rem,3.6vw,3.25rem);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.split img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.stat{padding:1.4rem 1rem;text-align:center;border-left:1px solid rgba(255,255,255,.15)}
.stat:first-child{border-left:0}
.stat b{display:block;font-family:var(--display);font-stretch:82%;font-weight:800;
  font-size:clamp(2.2rem,1.5rem + 2.4vw,3.1rem);color:#fff;line-height:1;letter-spacing:-.02em}
.stat span{display:block;margin-top:.55rem;font-size:.74rem;color:var(--on-dark);
  font-weight:600;letter-spacing:.08em;line-height:1.4}
@media (max-width:640px){
  .stat{border-left:0;border-top:1px solid rgba(255,255,255,.15)}
  .stat:first-child{border-top:0}
}

.ticks{list-style:none;padding:0;margin:0;display:grid;gap:.65rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.ticks li{position:relative;padding-left:1.8rem;font-weight:500;color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:0;top:.4em;width:1.05rem;height:1.05rem;
  background:var(--red);
  -webkit-mask:var(--tick) center/.66rem no-repeat;mask:var(--tick) center/.66rem no-repeat}
.dark .ticks li{color:#e3ebef}
.dark .ticks li::before{background:#fff}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0}
.chips li{background:#fff;border:1px solid var(--rule);padding:.45rem .95rem;
  font-size:.88rem;font-weight:500;color:var(--slate)}
.dark .chips li{background:transparent;border-color:rgba(255,255,255,.2);color:#e3ebef}

/* service-area chips: swap the embedded map to that place on hover/focus/tap */
.area-chips li{padding:0}
.area-chips button{all:unset;box-sizing:border-box;cursor:pointer;display:block;
  background:#fff;border:1px solid var(--rule);padding:.45rem .95rem;
  font-size:.88rem;font-weight:500;color:var(--slate);
  transition:border-color .15s,background .15s,color .15s}
.area-chips button:hover,.area-chips button:focus-visible{
  border-color:var(--red);background:var(--red-wash);color:var(--red-deep)}
.area-chips button[aria-pressed="true"]{
  border-color:var(--red);background:var(--red);color:#fff}

/* ---------- testimonial: the badge keyline from the mark ---------- */
.quote{margin:0;max-width:44rem;background:#fff;border:2px solid var(--slate);
  padding:clamp(1.5rem,3vw,2.25rem)}
.quote blockquote{margin:0;font-family:var(--display);font-stretch:92%;font-weight:700;
  font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);color:var(--ink);line-height:1.3;letter-spacing:-.015em}
.quote .quote-stars{margin-top:1rem}
.quote figcaption{margin-top:.4rem;font-family:var(--display);font-stretch:88%;font-weight:600;
  color:var(--muted);font-size:.9rem;letter-spacing:.05em;text-transform:uppercase}

.testimonials{margin-top:1.75rem}
.testimonials .quote{max-width:none;min-height:260px;display:flex;flex-direction:column;justify-content:space-between}
.testimonials .quote blockquote{font-size:clamp(1.05rem,.98rem + .4vw,1.25rem);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;overflow:hidden}
.testimonials .quote-cta{align-items:center;justify-content:center;gap:.75rem;
  text-decoration:none;color:var(--ink);text-align:center;
  transition:border-color .15s,background .15s}
.testimonials .quote-cta:hover{border-color:var(--red);background:var(--red-wash)}
.testimonials .quote-cta svg{width:26px;height:26px;color:var(--red)}
.testimonials .quote-cta span{font-family:var(--display);font-stretch:88%;font-weight:700;
  font-size:.92rem;text-transform:uppercase;letter-spacing:.04em}

/* real Google rating: honestly rounded to whole/half stars, not a fake precise fill */
.rating{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  text-decoration:none;color:var(--ink);font-weight:700}
.rating:hover{color:var(--red-deep)}
.rating:hover .stars{opacity:.85}
.stars{display:inline-flex;gap:.1rem;color:var(--gold)}
.stars svg{width:var(--s,18px);height:var(--s,18px)}
.star-half{position:relative;display:inline-block;width:var(--s,18px);height:var(--s,18px)}
.star-half svg{position:absolute;inset:0;width:100%;height:100%}
.star-half svg:last-child{clip-path:inset(0 50% 0 0)}
.rating-count{font-weight:500;color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* ---------- faq: button + panel, not native <details> ----------
   <details> only animates the open direction reliably; the browser's own
   open/close state machine fights CSS transitions on close and on rapid
   toggling. A plain button + attribute-toggled panel (same technique as
   the mobile nav) transitions cleanly both ways and survives spam-clicks
   because every click is just one attribute write, not a native toggle. */
.faq{max-width:52rem;border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-q{margin:0}
.faq-q button{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;
  padding:1.15rem 3rem 1.15rem 0;position:relative;
  font-family:var(--display);font-stretch:92%;font-weight:700;font-size:1.02rem;color:var(--ink);
  transition:padding-bottom .25s var(--ease)}
.faq-q button[aria-expanded="true"]{padding-bottom:.8rem}
.faq-icon{position:absolute;right:.6rem;top:50%;width:16px;height:16px;transform:translateY(-50%)}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--red);
  transition:transform .25s var(--ease)}
.faq-icon::before{left:0;top:50%;width:100%;height:2px;margin-top:-1px}
.faq-icon::after{top:0;left:50%;width:2px;height:100%;margin-left:-1px}
.faq-q button[aria-expanded="true"] .faq-icon::after{transform:scaleY(0)}
/* height (not grid-template-rows) on purpose: animating grid-template-rows
   with fr units resolves the close direction in about a third of the
   declared duration in Chromium, regardless of the transition-duration set
   here -- it reads as a snap instead of a close. JS measures scrollHeight
   and drives this as a plain pixel value, which transitions symmetrically. */
.faq-a{max-width:46rem;overflow:hidden;height:0;transition:height .32s var(--ease)}
.faq-a>div{padding:0 3rem 1.4rem 0}
.faq-a p:last-child{margin-bottom:0}
/* no JS = no click handler = nothing could ever open these; show them
   open by default so the content stays reachable instead of vanishing */
html:not(.js) .faq-a{height:auto}
html:not(.js) .faq-icon{display:none}

/* ---------- cta band ---------- */
.cta-band{background:var(--red);color:#fff;text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:#fff;max-width:38rem;margin-inline:auto;font-size:1.06rem}
.cta-band .actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.75rem}
.cta-band .btn-primary{background:#fff;color:var(--red-deep);border-color:#fff}
.cta-band .btn-primary:hover{background:var(--slate-deep);border-color:var(--slate-deep);color:#fff}

/* ---------- form ---------- */
.form-card{background:#fff;border:2px solid var(--slate);padding:clamp(1.4rem,3vw,2.25rem)}
.field{margin-bottom:1.05rem}
.field label{display:block;font-family:var(--display);font-stretch:92%;font-weight:700;
  color:var(--ink);margin-bottom:.4rem;font-size:.88rem;letter-spacing:.03em;text-transform:uppercase}
.field .hint{font-weight:500;color:var(--muted);font-size:.82rem;text-transform:none;letter-spacing:0}
input,select,textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:1.5px solid var(--rule);padding:.8rem .85rem;min-height:50px;border-radius:0}
textarea{min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--slate);outline:2px solid var(--red);outline-offset:0}
.field-row{display:grid;gap:1.05rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.hp{position:absolute;left:-9999px}
.form-note{font-size:.86rem;color:var(--muted);margin-top:1rem;margin-bottom:0}

/* ---------- info blocks ---------- */
.info-grid{display:grid;gap:clamp(1.25rem,3vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.info h3{font-size:.76rem;letter-spacing:.11em;color:var(--red);margin-bottom:.85rem;font-weight:700}
.dark .info h3{color:#fff}
.info p,.info ul{margin:0 0 .5rem}
.info a{font-weight:600;text-decoration:none;display:inline-block;padding:.2rem 0}
.hours{list-style:none;padding:0;margin:0;font-size:.95rem}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;
  border-bottom:1px solid rgba(255,255,255,.13)}
.hours li:last-child{border:0}
.info-light .hours li{border-bottom-color:var(--rule)}
.hours .closed{color:var(--on-dark-dim)}
.info-light .hours .closed{color:var(--muted)}

.map{width:100%;aspect-ratio:16/10;border:1px solid var(--rule)}
.gallery{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%;border:1px solid var(--rule)}

/* ---------- footer ----------
   White, matching the logo's own background, rather than fighting the logo
   to sit on dark. .info-light on each block reuses the same light-bg
   variants already built for the contact page's info column. */
.site-footer{background:#fff;color:var(--body);
  padding:clamp(2.75rem,5.5vw,4.25rem) 0 0;font-size:.95rem;border-top:3px solid var(--red)}
.site-footer a{color:var(--red-deep)}
.site-footer .brand-text{color:var(--muted);border-left-color:var(--rule)}
.footer-nav{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.footer-nav a{text-decoration:none;display:inline-block;padding:.3rem 0;
  font-family:var(--display);font-stretch:92%;font-weight:600;font-size:.9rem;letter-spacing:.03em}
.footer-nav a:hover{text-decoration:underline;text-decoration-thickness:2px}
.footer-bottom{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--rule);
  padding:1.15rem 0 calc(1.15rem + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;
  gap:.4rem 1.5rem;justify-content:space-between;font-size:.85rem;color:var(--muted)}
.footer-bottom a{display:inline-block;padding:.25rem 0}
.social{display:flex;gap:.5rem;list-style:none;padding:0;margin:1rem 0 0}
.social a{display:grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--rule);transition:transform .15s var(--ease),border-color .15s}
.social a:hover{transform:translateY(-3px);border-color:var(--slate)}
.social svg{width:20px;height:20px}

/* ---------- mobile call bar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:0;
  border-top:3px solid var(--slate);background:#fff;padding-bottom:env(safe-area-inset-bottom)}
.callbar .btn{flex:1;min-height:56px;font-size:.86rem;padding-inline:.5rem;border-width:0}
.callbar .btn-outline{border-left:1px solid var(--rule)}
@media (max-width:760px){
  .callbar{display:flex}
  body{padding-bottom:60px}
  .faq-q button{font-size:.98rem;padding-right:2.5rem}
  .faq-a>div{padding-right:0}
}


/* ---------- motion: scroll reveals (progressive enhancement, gated on .js) ---------- */
.js .card,.js .split,.js .stats,.js .quote,.js .faq-item{
  opacity:0;transform:translateY(18px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .card.is-in,.js .split.is-in,.js .stats.is-in,.js .quote.is-in,.js .faq-item.is-in{
  opacity:1;transform:none}

.js .grid .card:nth-child(1){transition-delay:0ms}
.js .grid .card:nth-child(2){transition-delay:70ms}
.js .grid .card:nth-child(3){transition-delay:140ms}
.js .grid .card:nth-child(4){transition-delay:210ms}
.js .grid .card:nth-child(5){transition-delay:280ms}
.js .grid .card:nth-child(n+6){transition-delay:350ms}
.js .faq-item:nth-child(1){transition-delay:0ms}
.js .faq-item:nth-child(2){transition-delay:50ms}
.js .faq-item:nth-child(3){transition-delay:100ms}
.js .faq-item:nth-child(4){transition-delay:150ms}
.js .faq-item:nth-child(5){transition-delay:200ms}
.js .faq-item:nth-child(n+6){transition-delay:250ms}

/* the split image and its text column move independently for a bit more depth */
.js .split img{opacity:0;transform:translateX(26px) scale(.98);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .split.is-in img{opacity:1;transform:none}
.js .split>div:not(:has(img)){opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease) .1s,transform .5s var(--ease) .1s}
.js .split.is-in>div:not(:has(img)){opacity:1;transform:none}