/* Final layout pass. Loaded last on every page.
   One consistent content width for header, hero and all sections,
   so nothing stretches edge to edge on wide screens. */

html[data-verba-page]{
  --vb-content-max:1680px;
  /* Wide layout: content spans the screen with generous side space, capped at 1680px. */
  --vb-page-gutter:max(clamp(20px,4.6vw,96px), calc((100vw - var(--vb-content-max)) / 2));
}
@media(max-width:360px){
  html[data-verba-page]{--vb-page-gutter:16px;}
}

/* ---------- Header ---------- */
html[data-verba-page] #top.hero .nav{
  padding:0 var(--vb-page-gutter)!important;
}
html[data-verba-page] :is(#top.hero,.launch-header) .site-nav{
  gap:clamp(18px,2.2vw,34px);
}
html[data-verba-page] :is(#top.hero,.launch-header) .logo{
  font-size:clamp(24px,1.9vw,29px);
}

/* ---------- Sections that set their own width: align to the same edge ---------- */
html[data-verba-page] #pillar-showcase .ps-inner,
html[data-verba-page] .aa-inner{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
  padding-inline:var(--vb-page-gutter)!important;
}
html[data-verba-page] #pillar-showcase .ps-header{padding-inline:0!important;}

/* Company details panel under the logo strip follows the same edge. */
html[data-verba-page="home"] .companies-strip .company-details{
  width:min(var(--vb-content-max),calc(100% - 2 * clamp(20px,4.6vw,96px)));
  margin-inline:auto;
}

/* ---------- Hero ---------- */
@media(min-width:761px){
  html[data-verba-page="home"] #top.hero .hero-main{
    width:min(100%,920px)!important;
    max-width:920px!important;
  }
  html[data-verba-page="home"] #top.hero h1{
    max-width:960px!important;
    font-size:clamp(58px,5.2vw,86px)!important;
    line-height:.94!important;
    letter-spacing:-.048em!important;
  }
  html[data-verba-page="home"] #top.hero .hero-kicker{
    margin-bottom:20px!important;
    font-size:12px!important;
    letter-spacing:.14em!important;
  }
  html[data-verba-page="home"] #top.hero .hero-actions{margin-top:32px!important;}
  html[data-verba-page="home"] #top.hero .hero-disciplines{gap:10px 12px!important;}
  html[data-verba-page="home"] #top.hero .hero-disciplines a{
    min-height:44px!important;
    padding:11px 18px!important;
    font-size:14px!important;
  }
}
/* Mid-size desktops: nudge the illustration right so the headline never touches it. */
@media(min-width:1181px) and (max-width:1560px){
  html[data-verba-page="home"] #top.hero .hero-art img{transform:translateX(4%);}
}
@media(min-width:761px) and (max-width:1180px){
  html[data-verba-page="home"] #top.hero .hero-main{width:min(100%,660px)!important;}
  html[data-verba-page="home"] #top.hero h1{font-size:clamp(50px,6vw,68px)!important;}
}
@media(max-width:760px){
  html[data-verba-page="home"] #top.hero h1{font-size:clamp(34px,9.4vw,48px)!important;line-height:1.02!important;letter-spacing:-.04em!important;}
  html[data-verba-page="home"] #top.hero h1 .hero-line{white-space:normal!important;text-wrap:balance;}
  html[data-verba-page="home"] #top.hero .hero-stage{padding-top:34px!important;}
  html[data-verba-page="home"] #top.hero .hero-kicker{font-size:11px!important;}
  html[data-verba-page="home"] #top.hero .hero-disciplines a{font-size:13.5px!important;}
}

/* ---------- Pillar showcase: calmer proportions inside the narrower width ---------- */
@media(min-width:900px){
  html[data-verba-page="home"] #pillar-showcase .ps-slide{
    height:clamp(620px,74vh,760px);
  }
}

/* ---------- Our Story panel: slightly calmer headline in the narrower width ---------- */
@media(min-width:961px){
  html[data-verba-page="home"] #story.om-story--panel #story-title{
    font-size:clamp(34px,3.9vw,64px);
  }
}

/* ---------- AI answered: balanced columns ---------- */
@media(min-width:1100px){
  html[data-verba-page="home"] .aa-inner{
    grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr);
    gap:clamp(48px,5vw,80px);
  }
}

/* An empty popover logo (before any company is opened) should not render. */
html[data-verba-page="home"] .company-popover__logo img:not([src]),
html[data-verba-page="home"] .company-popover__logo img[src=""]{visibility:hidden;}

/* Soften the painting's left edge so no seam shows against the page background. */
html[data-verba-page="home"] #top.hero .hero-art img{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%);
          mask-image:linear-gradient(to right,transparent 0,#000 14%);
}

/* Chips in the AI section: fit on one line more often. */
@media(min-width:900px){
  html[data-verba-page="home"] .aa-chip{font-size:.8rem!important;padding:8px 13px!important;}
}

/* Closing call to action matches the pill style of the header button. */
html[data-verba-page="home"] #contact .om-contact-primary{
  border-radius:999px!important;
  padding-inline:22px!important;
}

/* Small phones: keep the header on one line without clipping. */
@media(max-width:480px){
  html[data-verba-page] #top.hero .nav .nav-cta,
  html[data-verba-page] #top.hero .nav .nav-cta:last-child{
    padding:0 12px!important;font-size:0!important;gap:0!important;
  }
  html[data-verba-page] #top.hero .nav .nav-cta::before{
    content:"Let's talk";font-size:12px;font-weight:700;letter-spacing:.01em;
  }
  html[data-verba-page] #top.hero .nav .nav-cta::after{display:none!important;}
  html[data-verba-page] #top.hero .logo{font-size:22px!important;}
}

/* ---------- One header button style on every page (matches Home) ---------- */
html[data-verba-page]:not([data-verba-page="home"]) :is(#top.hero,.launch-header) .nav .nav-cta{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;
  min-height:46px!important;margin-left:8px!important;padding:0 18px!important;
  border:1px solid #153f35!important;border-radius:999px!important;
  background:#153f35!important;color:#fff!important;text-decoration:none!important;
  font-size:.84rem!important;font-weight:700!important;line-height:1!important;letter-spacing:.005em!important;white-space:nowrap!important;
  box-shadow:0 8px 18px rgba(21,63,53,.16)!important;
  transition:background-color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease!important;
}
html[data-verba-page]:not([data-verba-page="home"]) :is(#top.hero,.launch-header) .nav .nav-cta::after{
  content:"→";color:#d6f58b;font-size:1.08em;line-height:1;transition:transform .22s ease;
}
html[data-verba-page]:not([data-verba-page="home"]) :is(#top.hero,.launch-header) .nav .nav-cta:hover,
html[data-verba-page]:not([data-verba-page="home"]) :is(#top.hero,.launch-header) .nav .nav-cta:focus-visible{
  background:#08766d!important;border-color:#08766d!important;color:#fff!important;transform:translateY(-1px);outline:none;
}
html[data-verba-page]:not([data-verba-page="home"]) :is(#top.hero,.launch-header) .nav .nav-cta:hover::after{transform:translateX(3px);}
@media(max-width:480px){
  html[data-verba-page]:not([data-verba-page="home"]) :is(#top.hero,.launch-header) .nav .nav-cta{padding:0 12px!important;font-size:0!important;gap:0!important;min-height:40px!important;}
  html[data-verba-page]:not([data-verba-page="home"]) :is(#top.hero,.launch-header) .nav .nav-cta::before{content:"Let's talk";font-size:12px;font-weight:700;}
  html[data-verba-page]:not([data-verba-page="home"]) :is(#top.hero,.launch-header) .nav .nav-cta::after{display:none;}
}

/* ---------- Our Story: readable buttons on the dark banner and lime footer ---------- */
html[data-verba-page="our-story"] .cta .cta-primary,
html[data-verba-page="our-story"] .story-primary{
  display:inline-flex!important;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 24px!important;border-radius:999px!important;
  background:#153f35!important;color:#ffffff!important;border:1px solid #153f35!important;
  font-weight:700!important;text-decoration:none!important;
  transition:background-color .22s ease,transform .22s ease;
}
html[data-verba-page="our-story"] .cta .cta-primary:hover,
html[data-verba-page="our-story"] .story-primary:hover{background:#08766d!important;border-color:#08766d!important;transform:translateY(-1px);}
html[data-verba-page="our-story"] .cta .cta-primary:focus-visible,
html[data-verba-page="our-story"] .story-primary:focus-visible{outline:3px solid #15382f;outline-offset:3px;}
/* The mid-page banner sits on dark green, so its primary button is lime. */
html[data-verba-page="our-story"] .story-action .story-primary{
  background:#d6f58b!important;border-color:#d6f58b!important;color:#15382f!important;
}
html[data-verba-page="our-story"] .story-action .story-primary:hover{background:#c8ee6b!important;border-color:#c8ee6b!important;}
html[data-verba-page="our-story"] .cta .cta-secondary{
  display:inline-flex!important;align-items:center;min-height:48px;padding:0 22px!important;
  border-radius:999px!important;border:1px solid rgba(21,56,47,.4)!important;color:#15382f!important;
  font-weight:600!important;text-decoration:none!important;background:transparent!important;
}
html[data-verba-page="our-story"] .cta .cta-secondary:hover{background:rgba(21,56,47,.08)!important;}

html[data-verba-page="our-story"] .story-action-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}