/* Shared layout rules load after the page styles so every page uses the same
   gutters and can shrink below its content's natural width. */
:root{--page-gutter:clamp(24px,4vw,64px);--phone-gutter:clamp(24px,5vw,32px)}
html{width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;min-width:0}
main,main section,main article,main form,.footer-grid>div{min-width:0}
main :is(h1,h2,h3,h4,p,li),.footer :is(p,a,h2),.quote-check span{overflow-wrap:anywhere}
main :is(input,select,textarea),.footer input{min-width:0;max-width:100%}
main img{max-width:100%;object-fit:contain}
.pill,.white-pill{max-width:100%;white-space:normal;text-align:center;line-height:1.3}
.service-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.service-card,.about-copy,.social-copy,.website-copy,.service-detail-hero-copy,.service-story-copy,.service-steps{min-width:0;max-width:100%}
.social-section{grid-template-columns:minmax(0,48fr) minmax(0,52fr)}
.websites{grid-template-columns:minmax(0,55fr) minmax(0,45fr)}
.dashboard-illustration,.social-illustration,.about-illustration{max-width:100%;background-position:center;background-size:contain}
.footer-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr) minmax(0,1.05fr) minmax(0,.88fr)}
.quote-field,.quote-services,.quote-results,.quote-result-stage,.quote-result-card,.appointment-panel,.custom-package-section{min-width:0}
.quote-services{margin:0;max-width:100%}
.quote-check input,.custom-package-toggle input{flex:none}
.quote-check span,.custom-package-toggle span{min-width:0;overflow-wrap:anywhere}
.quote-package-service{grid-template-columns:minmax(0,.4fr) minmax(0,.6fr)}
.quote-budget-trigger,.quote-budget-option,.quote-other-package,.quote-custom-package,.appointment-submit{overflow-wrap:anywhere}
.service-detail-hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
.service-detail-story{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.contact-side-art{right:0}

@media(max-width:1279px){
  body[data-page] .site-header{height:130px;min-height:130px;--header-edge-space:var(--page-gutter)}
  body[data-page] .site-header .contact-strip{height:42px;font-size:16px;align-items:center}
  body[data-page] .site-header .strip-right{gap:24px}
  body[data-page] .site-header .nav-row{height:88px}
  body[data-page] .site-header .brand{width:140px;height:48px;flex:0 0 140px}
  body[data-page] .site-header .menu-toggle{display:flex;flex:none;flex-direction:column;justify-content:center;gap:6px;width:40px;height:40px;border:0;background:transparent}
  body[data-page] .site-header .menu-toggle span{display:block;width:100%;height:3px;background:#fff;border-radius:2px}
  body[data-page] .site-header .primary-nav{display:none;position:absolute;top:130px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:16px var(--page-gutter) 24px;background:#101a36;font-size:22px;white-space:normal;max-height:calc(100dvh - 130px);overflow-y:auto}
  body[data-page] .site-header .primary-nav.open{display:flex}
  body[data-page] .site-header .primary-nav a{padding:12px 8px;overflow-wrap:anywhere}
  body[data-page] .site-header .primary-nav .nav-contact{min-width:0;width:100%;height:auto;min-height:56px;margin:12px 0 0;font-size:22px}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .service-card,.service-card:nth-child(n){min-height:0;padding:32px}
}

@media(max-width:1100px){
  .services,.about,.social-section,.websites,.testimonials,.results-section,
  body[data-page] .services-overview,body[data-page] .services-testimonials,
  .projects-gallery,.contact-content,.about-detail-page .about-story,
  .about-detail-page .team-section{padding-inline:var(--page-gutter)}
  .social-section,.websites{grid-template-columns:minmax(0,1fr);gap:32px}
  .social-copy,.website-copy{width:100%;padding:0}
  .about-illustration,.social-illustration,.dashboard-illustration{width:100%;max-width:650px;height:auto;aspect-ratio:4/3;margin-inline:auto;background-position:center;background-size:contain;justify-self:center}
  .dashboard-illustration{max-width:520px;aspect-ratio:4/5;margin-top:10px}
  .contact-wave{height:auto;min-height:560px;padding-inline:var(--page-gutter)}
  .contact-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;width:100%;max-width:900px}
  .contact-form input,.contact-form input:nth-of-type(2){width:100%}
  .contact-form button{grid-column:1/-1;width:min(100%,300px);justify-self:center;max-width:100%;padding:16px 20px;height:auto;min-height:64px;font-size:22px;line-height:1.35}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:42px}
  body[data-page] .footer{padding-inline:var(--page-gutter)}
  .quote-section,.pricing-sections,body[data-page="prices"] .quote-section,
  body[data-page="prices"] .pricing-sections,body[data-page="prices"] .pricing-market-picker{padding-inline:var(--page-gutter)}
  .quote-shell{padding:32px;max-width:100%}
  .quote-result-stage{grid-template-columns:minmax(0,1fr);gap:24px}
  .quote-actions{flex-wrap:wrap}
  .service-detail-hero-inner{width:calc(100% - 2 * var(--page-gutter));grid-template-columns:minmax(0,1fr);max-width:750px;gap:36px;padding-top:165px}
  .service-detail-story{width:calc(100% - 2 * var(--page-gutter));grid-template-columns:minmax(0,1fr);max-width:750px;gap:36px}
  .service-mockup{width:calc(100% - 40px);max-width:580px;margin-inline:auto;height:330px}
  .about-detail-page .about-story,.about-detail-page .mission-vision{height:auto;min-height:0;max-height:none}
  .mission-vision{width:calc(100% - 2 * var(--page-gutter));left:0}
  body[data-page="services"] .services-card-grid{padding:0}
}

@media(max-width:900px){
  .contact-content{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;min-height:0;padding-bottom:85px}
  .contact-copy{width:100%;padding:40px 0 0}
  .contact-copy blockquote,.contact-methods{width:100%;margin-left:0}
  .contact-copy h2{margin-bottom:32px}
  .contact-copy blockquote{margin-bottom:40px}
  .contact-methods{margin-bottom:0}
  .contact-space-art,.contact-side-art{display:none}
  .contact-page-form{position:relative;top:auto;left:auto;right:auto;width:100%;max-width:650px;min-height:0;margin-inline:auto;padding:32px;gap:20px}
  .contact-page-form button{width:100%;min-width:0;max-width:100%;padding:14px 20px;height:auto;min-height:60px;line-height:1.35}
  .results-panel{grid-template-columns:minmax(0,1fr);padding:28px;gap:20px}
  .results-intro{display:flex;padding:0;gap:0}
  .results-intro h2{margin-bottom:24px}
  .results-consultation{align-self:flex-start}
  .result-card{padding:28px 20px}
}

@media(max-width:700px){
  :root{--page-gutter:var(--phone-gutter)}
  body[data-page] .site-header{height:0;min-height:0;background:transparent;pointer-events:none}
  body[data-page] .site-header .contact-strip{display:none}
  body[data-page] .site-header .nav-row{height:82px;padding-inline:var(--page-gutter);pointer-events:auto}
  body[data-page] .site-header .brand{width:130px;height:48px;flex-basis:130px}
  body[data-page] .site-header .menu-toggle{width:34px;height:34px}
  body[data-page] .site-header .primary-nav{top:82px;pointer-events:auto;max-height:calc(100dvh - 82px)}
  .intro{padding-inline:var(--page-gutter)}
  .intro h1{font-size:clamp(28px,7.5vw,38px);max-width:100%;line-height:1.2}
  .intro p{max-width:100%;font-size:17px;line-height:1.5}
  .services h2,.projects h2,.about h2,.social-copy h2,.website-copy h2,.testimonials h2{font-size:clamp(25px,7vw,36px)!important;line-height:1.3}
  .service-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .service-card,.service-card:nth-child(n){padding:26px 24px;border-width:3px}
  .service-card h3{font-size:clamp(24px,7vw,32px);line-height:1.3}
  .service-card p,.about-copy p:not(.eyebrow),.social-copy>p,.website-copy>p:not(.eyebrow){font-size:19px;line-height:1.7}
  .eyebrow,.website-copy .eyebrow{font-size:19px;line-height:1.5}
  .growth-icon{width:58px;height:58px;margin-bottom:22px}
  .about,.social-section,.websites{gap:24px}
  .about-copy{width:100%}
  .about-illustration,.social-illustration{max-width:440px;aspect-ratio:4/3}
  .dashboard-illustration{max-width:380px;aspect-ratio:4/5}
  .website-copy li{font-size:19px;line-height:1.5;padding-left:32px;margin-bottom:18px}
  .website-copy li::before{font-size:24px}
  .website-copy ul{margin-bottom:32px}
  .website-copy .white-pill{width:100%;min-width:0;height:auto;min-height:64px;padding:16px 20px;font-size:19px}
  .benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;row-gap:24px}
  .benefits-grid p{font-size:17px;line-height:1.5}
  .contact-form{grid-template-columns:minmax(0,1fr);gap:16px}
  .contact-form button{width:100%;grid-column:auto}
  .contact-form input,.contact-form input:nth-of-type(2){font-size:16px;padding-inline:18px}
  .contact-wave{min-height:0;padding-top:90px;padding-bottom:90px}
  .contact-wave h2{font-size:clamp(26px,7vw,36px);line-height:1.3}
  .testimonial-card{min-height:0;padding:26px 20px;gap:28px}
  .testimonial-card>p{font-size:19px;line-height:1.6}
  .testimonial-author{font-size:20px;gap:14px}
  .avatar{width:64px;height:64px;flex:none}
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:38px}
  .footer-about p{max-width:100%;font-size:19px;line-height:1.7}
  .footer-menu a,.footer-contact a{font-size:20px;line-height:1.5}
  .footer h2{font-size:27px}
  .footer-newsletter input{font-size:16px}
  .footer-newsletter button{font-size:22px;height:auto;min-height:64px;padding:14px}
  .floating-actions{right:16px;gap:12px;max-width:calc(100% - 32px)}
  .language-button{width:104px;height:64px;font-size:19px}
  .language-menu{width:104px;bottom:69px}
  .back-to-top{width:40px;height:40px;margin-bottom:12px;flex:none}
  .results-section{padding-inline:var(--page-gutter)}
  .results-panel{padding:24px 18px;border-radius:24px}
  .results-intro h2{font-size:clamp(28px,8vw,38px)}
  .results-consultation{width:100%;font-size:12px}
  .results-consultation>span:first-child{min-width:0;flex:1;padding:16px 12px;overflow-wrap:anywhere;text-align:center}
  .results-cta-arrow{width:44px;height:44px}
  .result-card{padding:26px 16px}
  .result-card h3{font-size:19px;min-height:0}
  .result-card p{font-size:16px;line-height:1.7}
  body[data-page="services"] .services-detail-card,body[data-page="services"] .services-detail-card:nth-child(n){padding:26px 22px}
  .services-heading h2,.feedback-heading h2,.projects-gallery-heading h2,.contact-copy h2{font-size:clamp(26px,7.2vw,36px);line-height:1.3}
  .services-subtitle{font-size:18px;line-height:1.5}
  .services-testimonials .testimonial-card{min-height:0;padding:26px 20px}
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .project-card{min-height:0;padding:12px 0}
  .project-image{min-width:0;min-height:0;width:min(100%,110px);height:auto;aspect-ratio:1}
  .project-info h3{font-size:20px;line-height:1.3}
  .project-info p{font-size:15px;line-height:1.4}
  .contact-page-form{padding:28px 20px}
  .contact-copy blockquote{padding:24px 20px;font-size:18px;line-height:1.6}
  .contact-methods a{font-size:19px;overflow-wrap:anywhere}
  .contact-page-form input,.contact-page-form textarea{font-size:16px}
  .about-detail-page .team-heading h2,.story-copy h2{font-size:clamp(26px,7vw,34px);line-height:1.3}
  .team-heading>span{display:block;overflow-wrap:anywhere}
  .about-detail-page .team-card-copy{padding:18px 0 0}
  .value-card{padding:24px 20px}
  .value-card p{font-size:19px;line-height:1.6}
  .service-detail-hero-inner{padding-top:125px;padding-bottom:100px;gap:32px}
  .service-detail-hero h1{font-size:clamp(30px,8vw,45px);line-height:1.2}
  .service-detail-hero-copy>p:last-child{font-size:18px;line-height:1.65}
  .service-back-link{margin-bottom:26px;line-height:1.5}
  .service-mockup{height:clamp(200px,55vw,300px)}
  .service-story-copy h2{font-size:clamp(26px,7vw,36px);line-height:1.3}
  .service-step{padding:24px 20px 24px 58px}
  .service-step-number{left:18px;font-size:21px}
  .service-price-link{width:100%;padding:16px 20px;font-size:19px}
  .quote-section,body[data-page="prices"] .quote-section,body[data-page="prices"] .pricing-market-picker,body[data-page="prices"] .pricing-sections{padding-inline:var(--page-gutter)}
  .quote-shell,body[data-page="prices"] .quote-shell{width:100%;padding:28px 18px;border-radius:22px}
  .quote-shell h2{font-size:clamp(25px,7vw,34px);line-height:1.25}
  .quote-shell>p,.quote-heading p{font-size:17px;line-height:1.6}
  .quote-form-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .quote-field{font-size:16px}
  .quote-field input{font-size:16px;padding:14px 12px}
  .quote-services{padding:16px 12px}
  .quote-services legend{max-width:100%;font-size:17px;overflow-wrap:anywhere}
  .quote-check{display:flex;align-items:flex-start;margin:0 0 14px;font-size:16px;line-height:1.5}
  .quote-check input{margin-top:3px;width:19px;height:19px}
  .quote-budget{max-width:100%}
  .quote-budget-trigger{font-size:16px;padding:14px 12px;line-height:1.45}
  .quote-budget-trigger::after{flex:none}
  .quote-budget-option{font-size:16px;min-height:44px}
  .quote-actions{flex-direction:column;align-items:stretch;gap:14px}
  .quote-submit,.quote-open{width:100%;min-width:0;min-height:62px;height:auto;padding:16px;font-size:20px}
  .quote-submit-hint{max-width:100%;padding:0;text-align:center;font-size:15px;line-height:1.5}
  .quote-result-stage,.quote-result-layout{grid-template-columns:minmax(0,1fr);gap:24px}
  .quote-result-card{padding:22px 16px}
  .quote-result-card h3{font-size:23px}
  .quote-package-service{grid-template-columns:minmax(0,1fr);gap:8px;padding-block:14px}
  .quote-package-service h4,.quote-result-card li{font-size:16px;line-height:1.5}
  .quote-result-card ul{grid-template-columns:minmax(0,1fr)}
  .appointment-panel{padding:24px 18px}
  .appointment-field input,.appointment-field select,.appointment-field textarea{font-size:16px;min-width:0}
  .appointment-submit{min-width:0;font-size:19px;height:auto;min-height:56px;padding:14px}
  .custom-package-section{padding:18px 12px}
  .custom-package-form,.custom-package-result ul{grid-template-columns:minmax(0,1fr)}
  .custom-package-field,.custom-package-toggle{font-size:16px;line-height:1.4}
  .custom-package-submit{font-size:19px;padding:14px;min-height:56px;height:auto}
  .custom-package-result{padding:16px 12px}
}

@media(prefers-reduced-motion:reduce){
  .motion-reveal{opacity:1;transform:none}
}

/* Keep the service cards compact on larger screens while preserving all
   existing content and the mobile layout. */
@media (min-width:1101px){
  body[data-page="services"] .services-overview{padding-top:2.8vw;padding-bottom:1.5vw}
  body[data-page="services"] .services-heading{margin-bottom:3.5vw}
  body[data-page="services"] .services-card-grid{gap:2.5vw}
  body[data-page="services"] .services-detail-card,
  body[data-page="services"] .services-detail-card:nth-child(n){min-height:0;padding:2.4vw 2.3vw 2vw}
  body[data-page="services"] .services-detail-card>img{width:3.2vw;height:3.2vw;margin-bottom:1vw}
  body[data-page="services"] .services-detail-card h3{font-size:1.15vw;margin-bottom:.7vw}
  body[data-page="services"] .services-detail-card p{font-size:1vw;line-height:1.6;margin-bottom:.7vw}
}

@media (max-width:1100px) and (min-width:701px){
  body[data-page="services"] .services-overview{padding:52px 24px 60px}
  body[data-page="services"] .services-heading{margin-bottom:42px}
  body[data-page="services"] .services-card-grid{gap:24px}
  body[data-page="services"] .services-detail-card,
  body[data-page="services"] .services-detail-card:nth-child(n){min-height:320px;padding:30px}
  body[data-page="services"] .services-detail-card>img{width:54px;height:54px;margin-bottom:16px}
  body[data-page="services"] .services-detail-card h3{font-size:24px;margin-bottom:12px}
  body[data-page="services"] .services-detail-card p{font-size:19px;line-height:1.6;margin-bottom:14px}
}

@media (max-width:700px){
  body[data-page="services"] .services-overview{padding-top:30px;padding-bottom:60px}
  body[data-page="services"] .services-heading{margin-bottom:30px}
  body[data-page="services"] .services-card-grid{gap:20px}
  body[data-page="services"] .services-detail-card,
  body[data-page="services"] .services-detail-card:nth-child(n){padding:24px}
  body[data-page="services"] .services-detail-card>img{width:46px;height:46px;margin-bottom:14px}
  body[data-page="services"] .services-detail-card h3{font-size:17px}
  body[data-page="services"] .services-detail-card p{font-size:15px;line-height:1.75;margin-bottom:14px}
}

body[data-page="services"] .services-detail-card h3{word-break:normal;overflow-wrap:normal;hyphens:none}