/* Typography and usability refinements */
html{scroll-padding-top:98px;max-width:100%;overflow-x:clip}
body{width:100%;max-width:100%;overflow-x:clip}
.site-header img,.section img,.section video,.section svg{max-width:100%;height:auto}
.site-header,.section,.impact-strip,.portfolio-grid,.portfolio-card,.service-list,.service,.proof,.about,.faq,footer{min-width:0}
.section,.impact-strip,.proof,footer{width:100%}
.hero-copy,.hero-visual,.services-title,.section-heading>div,.manifesto>*{min-width:0}
.service>div,.about-copy,.faq-heading,.faq-list{min-width:0}
.service h3,.service p,.about-copy p,footer p{overflow-wrap:anywhere}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
.section[id]{scroll-margin-top:98px}
.heading-line{display:block;color:inherit}
.section h2 .heading-line.accent{color:var(--red)}
.hero h1,.section h2{line-height:.97;text-wrap:balance;overflow-wrap:normal;word-break:normal}
.hero h1{font-size:clamp(3.55rem,6.5vw,6.8rem)}
.services-title h2{font-size:clamp(2.75rem,4.4vw,4rem);line-height:.99;letter-spacing:-.05em}
.section-index,.eyebrow{font-size:.75rem;line-height:1.45}
.visual-label{font-size:.75rem}
.impact-kicker{font-size:.75rem}
nav a:focus-visible,.button:focus-visible,.text-link:focus-visible,.about-links a:focus-visible,footer a:focus-visible{outline:2px solid var(--red);outline-offset:5px}

/* Corrected title scale: deliberate lines, comfortable leading and no mid-word breaks. */
.manifesto .manifesto-title{
  max-width:18ch;
  font-size:clamp(2.55rem,3.8vw,4.15rem);
  line-height:1.1;
  letter-spacing:-.035em;
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.proof .section-heading .testimonial-title{
  width:100%;
  max-width:none;
  font-size:clamp(2.25rem,4.1vw,3.65rem);
  line-height:1.14;
  letter-spacing:-.03em;
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.testimonial-title .heading-line{white-space:nowrap}

/* Consistent section-title hierarchy across services, projects, about and FAQ. */
.services-title h2{font-size:clamp(2.45rem,4vw,3.8rem);line-height:1.08;letter-spacing:-.04em}
.cases .section-heading h2{font-size:clamp(2.4rem,4.2vw,4.15rem);line-height:1.09;letter-spacing:-.04em}
.about-copy h2{font-size:clamp(2.8rem,5vw,5rem);line-height:1.06;letter-spacing:-.045em}
.faq-heading h2{font-size:clamp(2.4rem,4.15vw,4rem);line-height:1.09;letter-spacing:-.04em}

/* WhatsApp CTAs: one alignment, spacing and focus system across header and floating action. */
.nav-cta,
.whatsapp-wrap .whatsapp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:12px 20px;
  border-radius:8px;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
  transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease;
}
.nav-cta{padding-inline:24px}
.nav-cta:hover,
.whatsapp-wrap .whatsapp:hover{transform:translateY(-2px)}
.nav-cta:focus-visible,
.whatsapp-wrap .whatsapp:focus-visible{
  outline:3px solid rgba(242,13,25,.55);
  outline-offset:4px;
}
.nav-cta span,
.whatsapp-wrap .whatsapp svg{flex:0 0 auto}
.whatsapp-wrap .whatsapp{box-shadow:0 14px 38px rgba(0,0,0,.4)}
.hero-actions .button,.final-cta .button{justify-content:center;gap:12px;max-width:100%;text-align:center}

/* FAQ */
.faq{display:grid;grid-template-columns:.82fr 1.18fr;gap:90px;border-top:1px solid var(--line)}
.faq-heading{position:sticky;top:120px;align-self:start}
.faq-heading h2{font-size:clamp(2.8rem,4.7vw,4.8rem)}
.faq-heading>p:last-child{max-width:500px;margin:28px 0 0;color:#999}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px 0;color:#f1efeb;font-size:1.05rem;font-weight:700;cursor:pointer}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;border:1px solid #393939;color:var(--red);font-size:1.25rem;transition:transform .22s,border-color .22s}
.faq-list details[open] summary span{transform:rotate(45deg);border-color:var(--red)}
.faq-list details p{max-width:680px;margin:-4px 48px 25px 0;color:#aaa;line-height:1.65}
.faq-list summary:focus-visible{outline:2px solid var(--red);outline-offset:6px}

@media(max-width:1100px) and (min-width:981px){
  .site-header{padding-inline:24px}
  nav{gap:18px}
  .hero{gap:48px}
  .manifesto{grid-template-columns:.28fr 1.3fr .68fr;gap:32px}
  .section-heading{gap:42px}
  .services{grid-template-columns:.72fr 1.28fr;gap:60px}
  .services-title h2{font-size:clamp(2.65rem,4.1vw,3.2rem)}
}
@media(max-width:980px){
  html{scroll-padding-top:86px}
  .section[id]{scroll-margin-top:86px}
  .site-header{height:72px;padding-inline:22px}
  .site-header nav{display:none;position:absolute;top:72px;left:0;right:0;max-height:calc(100vh - 72px);overflow-y:auto;padding:14px 22px 22px;background:rgba(10,10,10,.98);border-bottom:1px solid var(--line);box-shadow:0 22px 50px rgba(0,0,0,.45)}
  .site-header nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .site-header nav.open>a,.site-header nav.open>a:not(.nav-cta){display:flex;width:100%;justify-content:space-between;padding:15px 0;border-bottom:1px solid #242424}
  .site-header nav.open .nav-cta{justify-content:center;margin-top:14px;padding:14px 18px;border:0}
  .menu-toggle{display:block;cursor:pointer}
  .menu-toggle span{display:block;width:24px;height:2px;margin:6px;background:#fff}
  .section{padding:104px clamp(20px,4vw,28px)}
  .hero{min-height:auto;padding-top:120px;grid-template-columns:minmax(0,1fr);gap:58px}
  .hero-copy{max-width:760px}
  .hero-visual{width:min(100%,580px);margin-inline:auto}
  .manifesto{grid-template-columns:minmax(0,1fr);gap:30px}
  .manifesto-side{margin-top:0;max-width:680px}
  .section-heading{grid-template-columns:minmax(0,1fr);gap:26px;margin-bottom:54px}
  .section-heading>p{max-width:680px}
  .services{grid-template-columns:minmax(0,1fr);gap:56px}
  .services-title{position:static}
  .video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about{grid-template-columns:minmax(0,1fr);gap:58px}
  .about-copy{max-width:760px}
  footer{grid-template-columns:1fr 1fr;gap:24px;padding-inline:22px}
  footer>.brand{grid-column:1/-1}
  footer p{text-align:left}
  .services-title h2{font-size:clamp(2.5rem,6.5vw,3.8rem)}
  .faq{grid-template-columns:1fr;gap:50px}
  .faq-heading{position:static}
}
@media(max-width:680px){
  html{scroll-padding-top:78px}
  .section[id]{scroll-margin-top:78px}
  .section{padding:82px 18px}
  .hero{padding-top:108px;gap:46px}
  .hero h1{font-size:clamp(2.65rem,13vw,4rem);line-height:1.01}
  .hero-lead{font-size:1rem;line-height:1.62}
  .hero-actions{width:100%;gap:14px;margin:34px 0;align-items:stretch;flex-direction:column}
  .hero-actions .button{width:100%;padding:15px 18px;white-space:normal}
  .hero-actions .text-link{align-self:flex-start}
  .hero-cutout{min-height:clamp(430px,135vw,570px)}
  .hero-cutout img{max-height:clamp(420px,132vw,555px)}
  .visual-label{left:14px;right:14px;bottom:14px;font-size:.64rem;letter-spacing:.08em}
  .section h2,.services-title h2,.faq-heading h2,.about-copy h2{font-size:clamp(2.15rem,9.5vw,2.9rem);line-height:1.1;letter-spacing:-.035em}
  .eyebrow{letter-spacing:.11em}
  .faq{gap:38px}
  .faq-list summary{padding:21px 0;font-size:1rem}
  .faq-list details p{margin-right:0}
  .manifesto .manifesto-title,.proof .section-heading .testimonial-title{max-width:none;font-size:clamp(2.05rem,9vw,2.75rem);line-height:1.14;letter-spacing:-.025em}
  .testimonial-title .heading-line{white-space:normal}
  .service{grid-template-columns:30px minmax(0,1fr);gap:13px;padding:25px 0}
  .service-icon{display:none}
  .service h3{font-size:1.25rem;line-height:1.2}
  .video-grid{grid-template-columns:minmax(0,1fr)}
  .video-card{width:100%;max-width:500px;margin-inline:auto}
  .video-meta{flex-direction:column;gap:4px;padding:15px 2px}
  .about{gap:42px}
  .authority-panel{min-height:420px;padding:26px}
  .about-links{flex-direction:column;align-items:flex-start;gap:17px}
  .final-cta{padding:86px 18px}
  .final-cta h2{font-size:clamp(2.35rem,10vw,3.15rem);line-height:1.08}
  .final-cta .button{width:100%;white-space:normal;padding:15px 18px}
  footer{grid-template-columns:minmax(0,1fr);gap:14px;text-align:center}
  footer>.brand{grid-column:auto}
  footer p,footer p:last-child{text-align:center}
  .nav-cta{width:100%;padding:13px 18px}
  .whatsapp-wrap .whatsapp{padding:12px 16px}
  .whatsapp-wrap .whatsapp span{display:inline}
}

@media(max-width:440px){
  .site-header{padding-inline:16px}
  .brand{font-size:1.18rem}
  .section{padding-inline:16px}
  .hero h1{font-size:clamp(2.35rem,12.5vw,3.1rem)}
  .eyebrow,.section-index{font-size:.68rem;letter-spacing:.09em}
  .impact-strip{padding-inline:16px}
  .portfolio-filters{grid-template-columns:minmax(0,1fr)}
  .portfolio-card,.portfolio-card.featured{padding:20px;min-height:285px}
  .portfolio-card h3{font-size:1.4rem;line-height:1.12}
  .choice-grid.two,.choice-grid.three{grid-template-columns:minmax(0,1fr)}
  .lead-form{padding:20px 16px}
  .lead-head{gap:12px}
  .lead-head h2{font-size:1.5rem;line-height:1.08}
  .lead-actions{gap:7px;flex-wrap:wrap}
  .lead-actions button{min-width:0;padding-inline:13px}
  .whatsapp-wrap{right:12px;bottom:12px}
}