/* =========================================================================
   reskin.css — 2026 visual QA layer. Loaded AFTER site.css (the captured
   Webflow CSS). Content is untouched; this file only refines spacing,
   rhythm, cards, nav and footer to a consistent modern system.

   Spacing system: 8px base grid.
   --s-1 8 · --s-2 16 · --s-3 24 · --s-4 32 · --s-5 48 · --s-6 64 · --s-7 96
   Section rhythm: clamp(4.5rem, 9vw, 7.5rem) block padding.
   Radii: 10 (controls) · 16 (cards) · 24 (feature panels).
   ========================================================================= */

:root{
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px;
  --r-ctl:10px; --r-card:16px; --r-panel:24px;
  --sect-pad:clamp(4.5rem, 9vw, 7.5rem);
  --hairline:rgba(17,17,17,.08);
  --hairline-dark:rgba(255,255,255,.12);
  --shadow-card:0 1px 2px rgba(20,20,20,.05), 0 8px 24px -12px rgba(20,20,20,.12);
  --shadow-lift:0 2px 4px rgba(20,20,20,.06), 0 20px 44px -16px rgba(20,20,20,.22);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ── global rhythm ─────────────────────────────────────────────────────── */
.section{padding:var(--sect-pad) 5%;grid-row-gap:var(--s-5)}
.section-large{padding:var(--sect-pad) 5%}
.container,.container-hero{width:1200px;max-width:min(95%,1200px);grid-row-gap:var(--s-4)}
.container-large{max-width:1200px}
.title-row{margin-bottom:var(--s-5);grid-column-gap:var(--s-5);grid-row-gap:var(--s-3)}
.title-row .max-width-large{max-width:560px}
.heading-sub{letter-spacing:.14em;font-size:.8125rem;font-weight:600;margin-bottom:var(--s-2)}
.heading-h2{font-size:clamp(1.75rem,3.2vw,2.375rem);line-height:1.12;letter-spacing:-.02em}
.heading-h1,.heading-style-h1{font-size:clamp(2.375rem,5vw,3.25rem);line-height:1.08}
.text-size-regular{line-height:1.6}
.text-size-large{line-height:1.5}
.max-width-large p.text-size-regular{max-width:56ch}

/* ── nav: single slim minimal bar ──────────────────────────────────────── */
.nav_bar{padding:0 clamp(16px,4vw,40px);background:rgba(15,14,15,.78);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--hairline-dark)}
.nav_bar .container{max-width:min(100%,1200px)}
.nav_row{margin-top:0;min-height:72px;align-items:center}
.nav_logo{height:30px;width:auto}
.nav_links{grid-column-gap:.25rem}
.nav_link{font-size:.9375rem;padding:.5rem .875rem;opacity:.85;transition:opacity .2s var(--ease),color .2s var(--ease)}
.nav_link:hover{opacity:1}
.nav_link.w--current{opacity:1}
.nav_link.w--current div{position:relative}
.nav_link.w--current div::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--primary)}
.nav_right{align-items:center}
.nav_right-group{display:flex;align-items:center;gap:var(--s-3)}
.nav_phone{color:#fff;opacity:.85;font-size:.9375rem;font-weight:500;text-decoration:none;white-space:nowrap;transition:opacity .2s var(--ease)}
.nav_phone:hover{opacity:1}
.nav_bar .button.button-primary{padding:10px 22px;border-radius:999px;font-weight:500}
.nav_menu-button.w--open{background-color:var(--primary,#bf4330);color:#fff}
/* dropdown card */
.nav_dropdown-list.w--open{padding-top:14px}
.nav_dropdown-card{border-radius:var(--r-card);border:1px solid var(--hairline);
  box-shadow:var(--shadow-lift);padding:var(--s-4)}
.nav_dropdown-grid{grid-column-gap:var(--s-4)}
.nav_dropdown-link{border-radius:var(--r-ctl);padding:10px 12px;transition:background .18s var(--ease)}
.nav_dropdown-link:hover{background:var(--neutral-2, #ede5de)}
/* heroes sit closer under the slimmer bar */
.section.hero{padding-top:calc(72px + var(--s-7))}
.section.sub-hero,.sub-hero{height:auto;min-height:0;padding-top:calc(72px + var(--s-6));padding-bottom:var(--s-7)}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero_grid{grid-column-gap:var(--s-6);align-items:center}
.hero_content{grid-row-gap:var(--s-4)}
.hero-image{border-radius:var(--r-card);overflow:hidden}
.button-wrapper{grid-column-gap:var(--s-2);gap:var(--s-2)}

/* ── buttons ───────────────────────────────────────────────────────────── */
.button{border-radius:var(--r-ctl);padding:13px 26px;font-weight:500;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease)}
.button:hover{transform:translateY(-1px);box-shadow:0 6px 18px -8px rgba(191,67,48,.5)}
.button .icon-tiny{transition:transform .2s var(--ease)}
.button:hover .icon-tiny{transform:translateX(3px)}
.button-more{border-radius:var(--r-ctl);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.button-more:hover{transform:translateY(-1px)}

/* ── value-prop / category callouts ────────────────────────────────────── */
.vert-callout-wrapper{grid-row-gap:var(--s-2)}
.vert-callout{border-radius:var(--r-card);padding:var(--s-3);grid-column-gap:var(--s-3);
  border:1px solid transparent;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
a.vert-callout:hover{transform:translateY(-2px);box-shadow:var(--shadow-card);border-color:var(--hairline)}
.vert-callout .icon-wrapper{border-radius:12px}
.vert-callout-info{grid-row-gap:6px}
.vert-callout-info .heading-h3{font-size:1.125rem;font-weight:600;font-family:Lato,sans-serif}
.vert-callout-info p.text-size-regular{max-width:52ch}
.collection-list-2{grid-row-gap:var(--s-2);grid-column-gap:var(--s-2)}

/* ── service tiles (category pages) ────────────────────────────────────── */
.cms-category-list{grid-column-gap:var(--s-3);grid-row-gap:var(--s-3)}
.service-tile{border:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  border-radius:var(--r-card);background:#fff;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
.service-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.service-tile-info{padding:var(--s-3);grid-row-gap:var(--s-3);display:flex;flex-flow:column;justify-content:space-between;height:100%}
.tile-heading-wrapper{display:flex;flex-flow:column;gap:var(--s-1)}
.tile-heading-wrapper .text-size-large{font-weight:600;line-height:1.3}
.tile-heading-wrapper .text-size-small{color:#555;line-height:1.55}

/* ── pricing ───────────────────────────────────────────────────────────── */
.pricing-grid-large{grid-column-gap:var(--s-3);grid-row-gap:var(--s-3);align-items:start}
.pricing-card{border-radius:var(--r-panel);border:1px solid var(--hairline);
  padding:var(--s-4);grid-row-gap:var(--s-2);box-shadow:var(--shadow-card)}
.pricing-card.featured{border-color:rgba(191,67,48,.35);box-shadow:0 2px 4px rgba(191,67,48,.06),0 24px 48px -20px rgba(191,67,48,.25)}
.pricing-badge-wrapper{font-weight:600}
.pricing-table-divider{opacity:.6}
.list-feature{align-items:flex-start;grid-column-gap:12px}
.pricing-footer{padding-top:var(--s-2)}
.pricing-footer .button{width:100%;justify-content:center;text-align:center}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq_component{grid-column-gap:var(--s-6)}
.faq_accordion{border-bottom:1px solid var(--hairline)}
.faq_question{padding:var(--s-3) var(--s-1);cursor:pointer}
.faq_question .text-size-large{font-size:1.0625rem;font-weight:500;line-height:1.4}
.faq_arrow{transition:transform .25s var(--ease)}
.faq_accordion.w--open .faq_arrow{transform:rotate(180deg)}
.faq_content{padding:0 var(--s-1) var(--s-3)}
.faq_content p{max-width:64ch;line-height:1.65}

/* ── contact section + form ────────────────────────────────────────────── */
.contact_grid{grid-column-gap:var(--s-6);align-items:start}
.contact_details-card{border-radius:var(--r-card);row-gap:6px}
.contact_link{border-radius:var(--r-ctl);padding:12px;grid-column-gap:var(--s-2);
  transition:background .18s var(--ease)}
.contact_link:hover{background:var(--neutral-2,#ede5de)}
.contact-card{border-radius:var(--r-panel);padding:var(--s-4);box-shadow:var(--shadow-card)}
.form-heading{margin-bottom:var(--s-3)}
.field-split{grid-column-gap:var(--s-2)}
.form-column{row-gap:6px;margin-bottom:var(--s-2)}
.form-field-label{font-size:.875rem;font-weight:500}
.form-text-field,.form-text-area{border-radius:var(--r-ctl);border:1px solid var(--hairline);
  padding:12px 14px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.form-text-field:focus,.form-text-area:focus{border-color:var(--primary,#bf4330);
  box-shadow:0 0 0 3px rgba(191,67,48,.15);outline:none}
input.button-primary.w-button{border-radius:var(--r-ctl);padding:14px 26px;width:100%;
  font-weight:500;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
input.button-primary.w-button:hover{transform:translateY(-1px);box-shadow:0 6px 18px -8px rgba(191,67,48,.5)}

/* ── footer (new-school card) ──────────────────────────────────────────── */
.footer{padding:var(--s-2)}
.footer_card-dark.f-modern{border-radius:var(--r-panel);padding:clamp(2.5rem,6vw,4.5rem) 5%;
  align-items:stretch;background:#0f0e0f}
.f-modern .container{display:flex;flex-flow:column;gap:var(--s-6)}
.f-top{display:flex;flex-flow:column;gap:var(--s-4);max-width:640px}
.f-tagline{font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.15;letter-spacing:-.03em;margin:0}
.f-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);
  padding-top:var(--s-5);border-top:1px solid var(--hairline-dark)}
.f-col{display:flex;flex-flow:column;gap:var(--s-2);align-items:flex-start}
.f-col-title{font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.f-link{display:inline-flex;align-items:center;gap:10px;color:rgba(255,255,255,.85);
  font-size:.9375rem;text-decoration:none;transition:color .18s var(--ease)}
a.f-link:hover{color:#fff}
.f-static{cursor:default}
.f-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);
  padding-top:var(--s-4);border-top:1px solid var(--hairline-dark)}
.f-partners{display:flex;align-items:center;gap:var(--s-4)}
.f-partners .image{height:22px;width:auto;opacity:.8}

/* ── responsive ────────────────────────────────────────────────────────── */
@media screen and (max-width:991px){
  .nav_row{min-height:64px}
  .section.hero{padding-top:calc(64px + var(--s-6))}
  .section.sub-hero,.sub-hero{padding-top:calc(64px + var(--s-5))}
  .f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav_menu.nav-menu-open{top:64px}
}
@media screen and (max-width:767px){
  .title-row{margin-bottom:var(--s-4)}
  .contact-card{padding:var(--s-3)}
  .pricing-card{padding:var(--s-3)}
  /* re-assert Webflow's hide-mobile-landscape (overridden by .nav_right-group flex) */
  .nav_right-group.hide-mobile-landscape{display:none}
}
@media screen and (max-width:479px){
  .f-grid{grid-template-columns:1fr}
  .f-bottom{flex-flow:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .button,.vert-callout,.service-tile,.faq_arrow,.button .icon-tiny{transition:none}
}