/*
 * Veya site-wide finishing layer.
 *
 * Loaded after each page's own styles. It does not replace page art direction;
 * it normalizes rhythm, hierarchy, gutters, navigation and end-of-page cadence
 * across the two Veya design families and the React service page.
 */

:root{
  --veya-gutter:clamp(20px,4vw,48px);
  --veya-section:clamp(84px,7.5vw,112px);
  --veya-section-tight:clamp(64px,5.6vw,84px);
  --veya-editorial-section:clamp(76px,6.5vw,98px);
  --veya-editorial-tight:clamp(56px,4.8vw,72px);
  --veya-head-gap:clamp(34px,3.8vw,50px);
  --veya-grid-gap:clamp(20px,2.7vw,36px);
  --veya-card-pad:clamp(20px,2.3vw,28px);
}

html{scroll-padding-top:72px}
main,section{min-width:0}
img,video,iframe{max-width:100%}
:where(h1,h2,h3){text-wrap:balance}
main[id],section[id]{scroll-margin-top:72px}

/* ── Shared site navigation ─────────────────────────────────────────────── */
header.nav{
  min-height:56px;
  border-bottom:1px solid var(--line,rgba(38,13,0,.14));
  background:color-mix(in srgb,var(--bg,var(--paper,#F5F3E2)) 94%,transparent);
  box-shadow:0 1px 0 rgba(38,13,0,.025);
  backdrop-filter:saturate(1.35) blur(10px);
  -webkit-backdrop-filter:saturate(1.35) blur(10px);
}
header.nav .container.row{
  width:100%;
  max-width:1240px;
  height:56px;
  margin-inline:auto;
  padding-inline:var(--veya-gutter);
}
.navpill{gap:clamp(14px,2vw,26px)}
.navright{gap:10px}
.navpill .brand .wordmark{width:72px}
.navpill .navlink,.navpill .navmenu>summary{
  line-height:1;
  letter-spacing:-.01em;
}
.navmenu-panel{
  top:calc(100% + 12px);
  background:var(--surface,var(--panel,#FFFDF4));
  border-color:var(--line,rgba(38,13,0,.15));
  box-shadow:0 18px 45px -28px rgba(38,13,0,.48);
}
.toggle{
  min-height:34px;
  background:var(--surface,var(--panel,#FFFDF4));
  color:var(--ink-soft,var(--soft,var(--ink,#260D00)));
  border-color:var(--line-strong,var(--line,rgba(38,13,0,.2)));
}

/* ── Core Veya pages: overview, About, Resources and the service pages ─── */
html:has(.shead){
  --sec:var(--veya-section);
  --container:1240px;
  --content:1120px;
  --measure:780px;
  --fs-hero:clamp(3rem,6vw,4.75rem);
  --fs-h2:clamp(2.15rem,4.15vw,3.2rem);
  --fs-h3:clamp(1.3rem,2vw,1.65rem);
  --fs-lead:clamp(1.05rem,1.5vw,1.2rem);
}
html:has(.shead) .container,
html:has(.shead) .content{
  padding-inline:var(--veya-gutter);
}
html:has(.shead) section:not(.hero):not(.band):not(.tight){
  padding-block:var(--veya-section);
}
html:has(.shead) section.tight{padding-block:var(--veya-section-tight)}
html:has(.shead) .hero{
  padding-top:clamp(64px,6.8vw,92px);
  padding-bottom:clamp(54px,5.8vw,78px);
}
html:has(.shead) .hero .eyebrow{margin-bottom:14px}
html:has(.shead) .hero h1{
  margin-bottom:22px;
  line-height:1;
  letter-spacing:-.042em;
}
html:has(.shead) .hero .lead{max-width:54ch;line-height:1.5}
html:has(.shead) .hero .cta-row{margin-top:28px}
html:has(.shead) h2{letter-spacing:-.03em}
html:has(.shead) .lead{line-height:1.5}
html:has(.shead) .eyebrow{letter-spacing:.15em}

html:has(.shead) .shead{
  max-width:var(--measure);
  margin-bottom:var(--veya-head-gap);
}
html:has(.shead) .shead .eyebrow{margin-bottom:13px}
html:has(.shead) .shead h2{margin-bottom:16px}
html:has(.shead) .shead .lead{max-width:58ch;margin-bottom:0}

/* Many original pages put 48px on both the section head and the component
   immediately after it. Collapse that double-gap into one intentional beat. */
html:has(.shead) .shead + :is(.cols,.steps,.incl,.tiles,.pgrid,.faq,.grid){margin-top:0}
html:has(.shead) .cols{gap:var(--veya-grid-gap)}
html:has(.shead) .steps{margin-top:0}
html:has(.shead) .step{
  gap:clamp(22px,3vw,40px);
  padding-block:clamp(32px,3.2vw,44px);
}
html:has(.shead) .incl,
html:has(.shead) .tiles{gap:clamp(12px,1.6vw,20px)}
html:has(.shead) .item,
html:has(.shead) .tile,
html:has(.shead) .pcard{padding:var(--veya-card-pad)}
html:has(.shead) .tile,
html:has(.shead) .item,
html:has(.shead) .pcard,
html:has(.shead) .calc,
html:has(.shead) .intpanel{border-radius:8px}
html:has(.shead) .textlink,
html:has(.shead) .text-link{line-height:1.35}

/* Keep major internal groups from stacking arbitrary margins on top of the
   section rhythm. These are used repeatedly across the core service pages. */
html:has(.shead) :is(.leakgrid,.offergrid,.proofgrid,.process,.intpanel){
  scroll-margin-top:84px;
}

/* ── Editorial/product pages ───────────────────────────────────────────── */
html:not(:has(.shead)):has(.wrap) .wrap{padding-inline:var(--veya-gutter)}
html:not(:has(.shead)):has(.wrap) section:not(.hero):not(.band):not(.tight){
  padding-block:var(--veya-editorial-section);
}
html:not(:has(.shead)):has(.wrap) section.tight{
  padding-block:var(--veya-editorial-tight);
}
html:not(:has(.shead)):has(.wrap) .head{
  gap:clamp(18px,3.2vw,48px);
  margin-bottom:var(--veya-head-gap);
}
html:not(:has(.shead)):has(.wrap) .head h2{
  max-width:17ch;
  line-height:1.03;
}
html:not(:has(.shead)):has(.wrap) .head .lead{
  max-width:52ch;
  line-height:1.55;
}
html:not(:has(.shead)):has(.wrap) .eyebrow{margin-bottom:15px}
html:not(:has(.shead)):has(.wrap) .num{margin-bottom:13px}
html:not(:has(.shead)):has(.wrap) :is(.two,.split,.three){gap:clamp(18px,3vw,42px)}

/* Guest Intent has many chapters; keep the hero generous but do not let the
   repeated sections grow to sales-page spacing. */
html:has(.demo):not(:has(.lift)) .hero{
  padding-top:clamp(112px,11vw,144px);
  padding-bottom:clamp(64px,6.5vw,86px);
}
html:has(.demo):not(:has(.lift)) .hero .wrap{gap:clamp(28px,4vw,54px)}

/* The overview funnel relies on its hero/lift overlap, so preserve that
   geometry and polish the content that follows it instead. */
html:has(.lift) .lift-in{padding:clamp(28px,3.6vw,48px)}
html:has(.lift) .pillar{padding-block:clamp(36px,3.7vw,50px)}
html:has(.lift) .book .head{margin-bottom:34px}
html:has(.lift) .close{padding-block:clamp(82px,7vw,104px)}

/* ── End-of-page cadence ───────────────────────────────────────────────── */
html:has(.shead) footer{
  padding:56px 0 30px;
  border-top:1px solid var(--line,rgba(38,13,0,.14));
}
html:has(.shead) footer .frow{gap:28px;align-items:flex-start}
html:has(.shead) footer .fn{line-height:1.55}
html:not(:has(.shead)):has(.wrap) footer{
  padding:28px 0 38px;
  line-height:1.5;
}
html:not(:has(.shead)):has(.wrap) footer .wrap{gap:12px 24px}

/* ── Responsive finishing ──────────────────────────────────────────────── */
@media(max-width:900px){
  :root{--veya-gutter:clamp(20px,4vw,32px)}
  header.nav .container.row{max-width:none}
  html:has(.shead){
    --fs-hero:clamp(2.8rem,7.2vw,4rem);
    --fs-h2:clamp(2.05rem,5.2vw,2.8rem);
  }
  html:has(.shead) .shead{max-width:720px}
  html:not(:has(.shead)):has(.wrap) .head{margin-bottom:36px}
}

@media(max-width:720px){
  :root{
    --veya-gutter:20px;
    --veya-section:72px;
    --veya-section-tight:56px;
    --veya-editorial-section:68px;
    --veya-editorial-tight:52px;
    --veya-head-gap:30px;
    --veya-grid-gap:26px;
    --veya-card-pad:20px;
  }
  html{scroll-padding-top:64px}
  main[id],section[id]{scroll-margin-top:64px}

  header.nav .container.row{height:52px;padding-inline:20px}
  .navpill{gap:11px}
  .navpill .brand .wordmark{width:58px}
  .navpill .navlink,.navpill .navmenu>summary{font-size:.79rem}
  .toggle{min-height:32px;padding:6px 10px}

  html:has(.shead){
    --sec:var(--veya-section);
    --fs-hero:clamp(2.6rem,12vw,3.35rem);
    --fs-h2:clamp(2rem,9.5vw,2.65rem);
    --fs-h3:1.3rem;
    --fs-lead:1.05rem;
  }
  html:has(.shead) .container,
  html:has(.shead) .content{padding-inline:20px}
  html:has(.shead) .hero{padding-top:56px;padding-bottom:50px}
  html:has(.shead) .hero h1{margin-bottom:18px;line-height:1.01}
  html:has(.shead) .hero .lead{line-height:1.52}
  html:has(.shead) .hero .cta-row{margin-top:24px}
  html:has(.shead) .shead{margin-bottom:var(--veya-head-gap)}
  html:has(.shead) .shead h2{margin-bottom:14px;line-height:1.04}
  html:has(.shead) .step{padding-block:28px}
  html:has(.shead) .cols{gap:26px}
  html:has(.shead) footer{padding:46px 0 26px}
  html:has(.shead) footer .frow{gap:20px}

  html:not(:has(.shead)):has(.wrap) .wrap{padding-inline:20px}
  html:not(:has(.shead)):has(.wrap) .head{gap:14px;margin-bottom:28px}
  html:not(:has(.shead)):has(.wrap) .head h2{max-width:20ch}
  html:not(:has(.shead)):has(.wrap) .eyebrow{margin-bottom:13px}
  html:not(:has(.shead)):has(.wrap) .num{margin-bottom:11px}
  html:not(:has(.shead)):has(.wrap) footer{padding:24px 0 32px}
  html:has(.demo):not(:has(.lift)) .hero{padding-top:104px;padding-bottom:62px}
}

@media(max-width:560px){
  html:has(.shead) .tiles{grid-template-columns:1fr}
  html:has(.shead) .tile{min-height:0}
  html:not(:has(.shead)):has(.wrap) :is(.two,.split,.three){gap:20px}
}

@media(max-width:380px){
  :root{--veya-gutter:16px}
  header.nav .container.row{padding-inline:16px}
  .navpill{gap:8px}
  .navpill .brand .wordmark{width:50px}
  .navpill .navlink,.navpill .navmenu>summary{font-size:.72rem}
  .toggle{padding-inline:8px}
  html:has(.shead) .container,
  html:has(.shead) .content,
  html:not(:has(.shead)):has(.wrap) .wrap{padding-inline:16px}
}

@media(prefers-reduced-motion:reduce){
  header.nav{backdrop-filter:none;-webkit-backdrop-filter:none}
}