/* Service landing: scoped to keep other service layouts intact. */
.web-design-page{--web-ink:#123c45;--web-muted:#45656c;--web-line:#d8e5e7;--web-paper:#f2f7f7}
.web-design-page :is(a,button,summary,[tabindex]):focus-visible{outline:3px solid #c8252a;outline-offset:4px}
.web-design-page :is(section[id],main[id]){scroll-margin-top:90px}
.web-skip{position:fixed;top:8px;left:16px;z-index:2000;padding:14px 22px;background:#fff;color:#094d5a;transform:translateY(-160%);border:2px solid #094d5a}
.web-skip:focus{transform:none}
.web-hero{background:#0a3540;color:#fff;padding:64px 0 56px}
.web-hero-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:48px;align-items:center}
.web-eyebrow{font-family:'Outfit',system-ui,sans-serif;font-size:12px;line-height:1.5;font-weight:700;letter-spacing:1.3px;color:#0e6475;margin:0 0 16px}
.web-hero .web-eyebrow,.web-dark .web-eyebrow,.web-contact .web-eyebrow{color:#9cdae3}
.web-hero h1{font-family:'Outfit',system-ui,sans-serif;font-size:clamp(32px,3.4vw,48px);line-height:1.12;font-weight:900;letter-spacing:-.7px;margin:0 0 24px}
.web-hero h1 em{font-style:normal;color:#7dd8e8}
.web-lead{font-size:18px;line-height:1.7;color:#d7e8eb;margin-bottom:28px;max-width:590px}
.web-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.web-design-page .btn-wa{color:#07341a;box-shadow:none;min-height:48px}
.web-design-page .btn-wa:hover{color:#07341a;background:#40e17b}
.web-design-page .nav-cta{color:#07341a!important}
.web-design-page .nav-cta svg{fill:#07341a}
.web-outline{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;border:1px solid #92bec5;padding:12px 19px;border-radius:10px;color:#fff;font-weight:700;font-size:15px;transition:background .18s,color .18s}
.web-outline:hover{background:#fff;color:#0a3540}
.web-personal{margin-top:20px;font-size:14px;line-height:1.6;color:#b8d2d7}
.web-showcase{min-width:0}
.web-browser{border-radius:12px;overflow:hidden;border:1px solid #557780;background:#fff}
.web-browser-bar{display:flex;gap:20px;align-items:center;padding:11px 16px;background:#e7eff0;color:#45656c;font-size:12px}
.web-browser-bar>span:first-child{font-size:10px;color:#708b91;letter-spacing:3px}
.web-browser img{display:block;width:100%;height:auto;aspect-ratio:960/667;object-fit:cover;object-position:top}
.web-showcase-label{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:16px 0 0;color:#c3d9dd}
.web-showcase-label a{color:#a7e1eb;font-weight:700}
.web-strip{background:#e9f3f4;border-bottom:1px solid #d8e5e7}
.web-strip .container{display:grid;grid-template-columns:repeat(4,1fr);padding-top:18px;padding-bottom:18px;gap:16px;font-weight:700;font-size:14px;color:#14515e}
.web-strip span::before{content:'✓';margin-right:8px}
.web-design-page .web-section-nav{position:static;background:#fff;border-bottom:1px solid var(--web-line);box-shadow:none;z-index:auto}
.web-section-nav .container{display:flex;gap:28px;overflow-x:auto;white-space:nowrap}
.web-section-nav a{display:inline-flex;align-items:center;min-height:56px;font-size:14px;font-weight:700;color:#45656c}
.web-section-nav a:hover{color:#0e6475;text-decoration:underline}
.web-section{padding:76px 0}
.web-section-heading{max-width:760px;margin-bottom:36px}
.web-section h2{font-family:'Outfit',system-ui,sans-serif;font-weight:800;font-size:clamp(27px,3vw,38px);line-height:1.17;letter-spacing:-.45px;color:var(--web-ink);margin:0 0 20px}
.web-section-heading>p:last-child{color:var(--web-muted);font-size:17px;line-height:1.75;max-width:690px}
.web-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.web-services article{border-top:2px solid #0e6475;padding:24px 0 0;display:flex;flex-direction:column;align-items:flex-start}
.web-number{color:#a42328;font-family:'Outfit',system-ui,sans-serif;font-size:15px;font-weight:700;margin-bottom:16px}
.web-section h3{font-family:'Outfit',system-ui,sans-serif;font-size:21px;font-weight:700;line-height:1.3;color:var(--web-ink);margin:0 0 14px}
.web-services p,.web-services li{font-size:16px;color:var(--web-muted);line-height:1.7}
.web-services ul{padding-left:18px;margin:20px 0 24px}
.web-services li{margin-bottom:8px}
.web-services article>a{margin-top:auto;color:#0e6475;font-size:15px;font-weight:700;padding:10px 0;min-height:44px}
.web-services article>a:hover{text-decoration:underline}
.web-soft{background:var(--web-paper)}
.web-portfolio-heading{display:flex;justify-content:space-between;gap:36px;align-items:flex-end;margin-bottom:32px}
.web-portfolio-heading>div:first-child{max-width:760px}
.web-portfolio-heading p:last-child{color:var(--web-muted);font-size:17px;line-height:1.7;max-width:650px}
.web-carousel-controls{display:flex;gap:10px;flex-shrink:0;padding-bottom:3px}
.web-carousel-controls[hidden]{display:none}
.web-carousel-controls button{width:48px;height:48px;background:#fff;border:1px solid #9bb9bf;border-radius:50%;color:#0a3540;font-size:23px;cursor:pointer;transition:background .18s}
.web-carousel-controls button:hover{background:#dcebed}
.web-carousel-controls button:disabled{opacity:.35;cursor:default}
.web-project-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#739ea7 #dce8ea;list-style:none;padding:4px 4px 20px;margin:0 -4px}
.web-project{min-width:0;scroll-snap-align:start;background:#fff;border:1px solid var(--web-line);border-radius:12px;overflow:hidden}
.web-project a{display:block;height:100%;color:var(--web-ink)}
.web-project-image{overflow:hidden;border-bottom:1px solid var(--web-line)}
.web-project-image img{width:100%;height:auto;aspect-ratio:960/667;object-fit:cover;object-position:top;display:block;transition:transform .25s}
@media(hover:hover){.web-project a:hover img{transform:scale(1.025)}}
.web-project-copy{padding:20px}
.web-project-copy p{font-size:12px;color:#526d73;margin-bottom:8px}
.web-project-copy h3{font-size:19px;display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}
.web-project-copy>span{font-size:13px;color:#45656c;overflow-wrap:anywhere}
.web-portfolio-bottom{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:18px;font-size:13px;line-height:1.6;color:#45656c}
.web-portfolio-bottom p{max-width:580px}
.web-portfolio-bottom>a{font-weight:700;color:#0e6475}
.web-visibility{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.web-visibility article{border:1px solid var(--web-line);border-radius:12px;padding:30px}
.web-tag{display:inline-block;font-family:'Outfit',system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;color:#0e6475;margin-bottom:18px}
.web-visibility p{color:var(--web-muted);line-height:1.75;margin-bottom:16px}
.web-visibility .web-example{margin:22px 0 0;padding-top:20px;border-top:1px solid var(--web-line);font-size:14px;color:#214f59}
.web-note{font-size:14px;line-height:1.7;max-width:850px;margin-top:24px;color:var(--web-muted)}
.web-note a{text-decoration:underline;color:#0e6475}
.web-dark,.web-contact{background:#0a3540;color:#fff}
.web-two-col{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.web-dark h2,.web-contact h2{color:#fff}
.web-dark p:not(.web-eyebrow),.web-contact p:not(.web-eyebrow){color:#d2e4e7;font-size:17px;line-height:1.75}
.web-dark .web-outline{margin-top:28px}
.web-quality-list{list-style:none;margin:0;padding:0}
.web-quality-list li{padding:0 0 22px;margin:0 0 22px;border-bottom:1px solid #365a64}
.web-quality-list li:last-child{margin-bottom:0;padding-bottom:0;border:0}
.web-quality-list strong{display:block;font-family:'Outfit',system-ui,sans-serif;font-size:19px;margin-bottom:8px;color:#fff}
.web-quality-list span{color:#c8dfe3;font-size:16px;line-height:1.6}
.web-process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;list-style:none;padding:0;margin:0}
.web-process li{padding-top:22px;border-top:1px solid #abc5cb}
.web-process li>span{display:block;color:#a42328;font-weight:700;margin-bottom:16px}
.web-process p{color:var(--web-muted);line-height:1.7}
.web-maintenance{margin-top:40px;padding:28px;background:var(--web-paper);display:flex;gap:30px;justify-content:space-between;align-items:center;border-radius:12px}
.web-maintenance p{max-width:760px;color:var(--web-muted);line-height:1.7}
.web-maintenance a{flex-shrink:0;font-weight:700;color:#0e6475;padding:12px 0}
.web-faq{max-width:860px}
.web-faq-list{margin-top:30px}
.web-faq-list details{border:1px solid var(--web-line);margin-bottom:12px;border-radius:10px;background:#fff;overflow:hidden}
.web-faq-list summary{font-size:17px;line-height:1.5;min-height:64px;padding:18px 22px;gap:24px}
.web-faq-list details>div{padding:0 22px 24px;color:var(--web-muted);line-height:1.75}
.web-contact{text-align:center}
.web-contact .web-actions{justify-content:center;margin-top:30px}
.web-contact p.web-contact-details{font-size:14px;margin:26px 0 0;color:#bad3d8}
.web-contact-details a{color:#d8edf1;text-decoration:underline;text-underline-offset:3px}
@media(max-width:1100px){.web-hero-grid{gap:28px}.web-hero h1{font-size:36px}.web-hero .web-actions{align-items:stretch}.web-services{gap:22px}.web-services h3{font-size:20px}.web-two-col{gap:40px}.web-maintenance{align-items:flex-start;flex-direction:column;gap:10px}}
@media(max-width:760px){.web-hero{padding:40px 0}.web-hero-grid{grid-template-columns:1fr;gap:32px}.web-hero h1{font-size:clamp(32px,6.3vw,42px);max-width:620px}.web-lead{font-size:17px}.web-showcase{max-width:580px}.web-showcase-label{padding-top:10px}.web-section{padding:48px 0}.web-services{grid-template-columns:1fr;gap:32px}.web-services article{padding-top:20px}.web-services ul{margin:12px 0}.web-services h3{font-size:22px}.web-services article>a{margin-top:0}.web-strip .container{grid-template-columns:1fr 1fr;font-size:13px;gap:12px}.web-project-track{grid-auto-columns:calc((100% - 24px)/2)}.web-visibility,.web-two-col{grid-template-columns:1fr;gap:24px}.web-process{grid-template-columns:1fr;gap:28px}.web-process li{position:relative;padding-left:44px}.web-process li>span{position:absolute;top:22px;left:0}.web-portfolio-heading{display:block}.web-carousel-controls{margin-top:22px}.web-portfolio-bottom{flex-direction:column;gap:12px}.web-visibility article{padding:24px}.web-section-nav .container{gap:24px}.web-section-heading{margin-bottom:28px}.web-dark .web-quality-list{margin-top:8px}}
@media(max-width:480px){.web-hero h1{font-size:33px}.web-eyebrow{font-size:11px;letter-spacing:1px}.web-actions{flex-direction:column;align-items:stretch}.web-actions>a{width:100%;font-size:15px}.web-strip .container{gap:12px 8px;font-size:12px}.web-project-track{grid-auto-columns:86%;gap:16px}.web-showcase-label{font-size:11px}.web-section h2{font-size:29px}.web-faq-list summary{padding:16px;font-size:16px}.web-faq-list details>div{padding:0 16px 20px}.web-contact .btn-wa{font-size:14px;padding:14px 12px}}
@media(prefers-reduced-motion:reduce){.web-design-page *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.web-design-page footer .footer-brand .logo{display:inline-flex;background:#fff;padding:8px 12px;border-radius:8px}

.web-pricing{border-top:1px solid #d8e5e7}
.web-price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.web-price-grid article{border:1px solid #c6dce1;border-radius:12px;padding:28px;display:flex;flex-direction:column;align-items:flex-start}
.web-price-grid .web-price{font-family:'Outfit',system-ui,sans-serif;font-size:36px;font-weight:800;line-height:1.3;color:#0e6475;margin:4px 0 20px}
.web-price-grid .web-price span{font-size:15px;font-weight:400}
.web-price-grid p:not(.web-price){color:#45656c;line-height:1.7;margin-bottom:20px}
.web-price-grid a{color:#0e6475;font-weight:700;margin-top:auto;padding:10px 0;min-height:44px}
@media(max-width:760px){.web-price-grid{grid-template-columns:1fr;gap:16px}.web-price-grid article{padding:24px}}

.web-annual-pack{display:grid;grid-template-columns:1fr auto;gap:20px 36px;align-items:center;border:2px solid #0e6475;border-radius:12px;padding:30px;margin-top:24px;background:#f2f8f9}
.web-annual-pack .web-eyebrow{margin-bottom:8px}
.web-annual-pack h3{font-size:24px}
.web-annual-pack p:not(.web-eyebrow){color:#45656c;line-height:1.7}
.web-annual-price{text-align:right}
.web-annual-price>p{white-space:nowrap;margin-bottom:16px}
.web-annual-price strong{font-family:'Outfit',system-ui,sans-serif;font-size:42px;color:#0e6475}
.web-annual-price>p>span{display:block;font-size:14px}
.web-annual-note{grid-column:1/-1;font-size:13px;border-top:1px solid #c5dce0;padding-top:16px}
@media(max-width:760px){.web-annual-pack{grid-template-columns:1fr;padding:24px;gap:16px}.web-annual-price{text-align:left}.web-annual-price>p>span{display:inline}.web-annual-price .btn-wa{width:100%}}

/* Make the annual billing period as visible as the price, in both languages. */
.web-annual-price .web-price-amount{margin:0 0 12px;display:flex;align-items:baseline;justify-content:flex-end;gap:10px;line-height:1.1}
.web-annual-price .web-price-amount strong{font-size:56px;line-height:1.1}
.web-annual-price .web-price-amount .web-price-tax{display:inline;font-size:18px;font-weight:700;color:#345b64}
.web-annual-price .web-year-label{display:block;background:#0e6475;color:#fff!important;font-family:'Outfit',system-ui,sans-serif;font-weight:800;font-size:32px;line-height:1.15;letter-spacing:.8px;text-align:center;border-radius:8px;padding:12px 24px;margin:0 0 10px}
.web-annual-price .web-annual-caption{font-size:13px;line-height:1.5;white-space:normal;margin:0 0 18px;max-width:290px}
.web-maintenance-benefits{grid-column:1/-1;border-top:1px solid #c5dce0;padding-top:28px;margin-top:8px}
.web-maintenance-benefits>h3{font-size:26px;max-width:760px}
.web-maintenance-benefits .web-benefits-intro{max-width:780px;margin-bottom:24px}
.web-maintenance-benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.web-maintenance-benefit-grid article{border-top:2px solid #0e6475;padding-top:18px}
.web-maintenance-benefit-grid h4{font-family:'Outfit',system-ui,sans-serif;font-size:19px;font-weight:700;line-height:1.35;color:#123c45;margin:0 0 12px}
.web-maintenance-benefit-grid p{font-size:15px;line-height:1.7}
@media(max-width:1000px){.web-annual-pack{grid-template-columns:1fr;gap:24px}.web-annual-price{text-align:left;max-width:340px}.web-annual-price .web-price-amount{justify-content:flex-start}.web-annual-price .web-annual-caption{max-width:none}.web-annual-price .btn-wa{width:100%}}
@media(max-width:760px){.web-annual-price{max-width:none;width:100%}.web-annual-price .web-price-amount strong{font-size:54px}.web-annual-price .web-year-label{font-size:32px;padding:14px 20px}.web-maintenance-benefit-grid{grid-template-columns:1fr;gap:24px}.web-maintenance-benefits>h3{font-size:25px}}
/* Lightweight header carousel. Native scroll remains available without JS. */
.web-hero-track{display:flex;list-style:none;margin:0;padding:0;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x pan-y}
.web-hero-track::-webkit-scrollbar{display:none}
.web-hero-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.web-hero-slide a{display:block}
.web-browser .web-hero-slide img{width:100%;height:auto;aspect-ratio:960/667;display:block}
.web-browser-bar #hero-project-domain{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.web-hero-controls{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}
.web-hero-controls[hidden]{display:none}
.web-hero-controls button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid #85b3bd;border-radius:8px;background:#164b58;color:#fff;font-family:inherit;font-size:20px;cursor:pointer}
.web-hero-controls button:hover{background:#246879}
.web-hero-controls .web-hero-pause{font-size:13px;font-weight:700;margin-left:8px;min-width:88px}
.web-hero-count{font-size:13px;color:#d7e8eb;min-width:42px;text-align:center;font-variant-numeric:tabular-nums}
@media(max-width:480px){.web-hero-controls{gap:8px}.web-showcase-label{flex-wrap:wrap}}