@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#152231;--muted:#5f6873;--cream:#fff8f2;--paper:#fffdfb;--peach:#ff8b68;--peach2:#ffd4c7;--coral:#f66e4d;--navy:#172a3b;--line:#e8ddd5;--green:#cfded4;--blue:#cbdbe8;--radius:22px;--shadow:0 20px 60px rgba(34,28,24,.10)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:'DM Sans',Arial,sans-serif;line-height:1.6}body.menu-open{overflow:hidden}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Manrope',Arial,sans-serif;line-height:1.08;letter-spacing:-.045em}h1{font-size:clamp(3.3rem,7vw,7rem);margin-bottom:1.45rem}h2{font-size:clamp(2.3rem,5vw,4.7rem);margin-bottom:1.2rem}h3{font-size:1.45rem}em{font-family:Georgia,serif;font-weight:400;color:var(--coral)}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.container{width:min(1180px,calc(100% - 40px));margin:auto}.narrow{max-width:900px}.section{padding:110px 0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip-link{position:fixed;left:20px;top:-80px;background:var(--ink);color:white;padding:12px 18px;z-index:999}.skip-link:focus{top:15px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:999px;padding:15px 24px;background:var(--ink);color:white;font-weight:700;cursor:pointer;transition:.25s;font:inherit}.button:hover{transform:translateY(-2px);background:var(--coral);box-shadow:0 10px 28px rgba(246,110,77,.25)}.button-small{padding:11px 18px}.button-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}.button-light{background:white;color:var(--ink)}.text-link{font-weight:700;border-bottom:1px solid var(--ink);padding-bottom:5px}.text-link span{margin-left:8px}.site-header{height:82px;display:flex;align-items:center;position:sticky;top:0;z-index:50;background:rgba(255,253,251,.88);backdrop-filter:blur(16px);border-bottom:1px solid rgba(232,221,213,.65)}.nav-wrap{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font:800 1.35rem 'Manrope';letter-spacing:-.04em}.site-nav{display:flex;align-items:center;gap:28px;font-size:.93rem;font-weight:600}.site-nav>a:not(.button):hover{color:var(--coral)}.menu-toggle{display:none;background:none;border:0;padding:5px}.menu-toggle span:not(.sr-only){display:block;width:26px;height:2px;background:var(--ink);margin:5px}.hero{background:var(--cream);padding-top:75px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:50px}.eyebrow,.section-number{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.eyebrow{display:flex;align-items:center;gap:10px}.eyebrow span{width:34px;height:2px;background:var(--peach)}.lead{font-size:1.2rem;max-width:650px;color:var(--muted)}.hero-actions{display:flex;gap:25px;align-items:center;margin:32px 0 55px}.hero-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;border-top:1px solid var(--line);padding-top:22px}.hero-proof strong,.hero-proof span{display:block}.hero-proof strong{font-size:.92rem}.hero-proof span{font-size:.76rem;color:var(--muted)}.hero-visual{position:relative}.hero-visual img{width:100%;filter:drop-shadow(0 25px 30px rgba(48,34,25,.12))}.float-card{position:absolute;background:white;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:14px;padding:12px 17px;font-weight:700;font-size:.82rem}.float-one{left:-12px;bottom:18%;}.float-two{right:4px;top:12%;}.pulse{display:inline-block;width:8px;height:8px;background:#57b67a;border-radius:50%;margin-right:7px}.client-strip{background:var(--navy);color:white;text-align:center;padding:22px 0}.client-strip p{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;opacity:.65;margin-bottom:12px}.marquee{display:flex;align-items:center;justify-content:center;gap:33px;font:600 .86rem 'Manrope';letter-spacing:.12em}.marquee i{color:var(--peach);font-style:normal}.intro{text-align:center}.intro h2 span{color:#84909b}.intro>div>p:not(.section-number){font-size:1.18rem;color:var(--muted);max-width:720px;margin:25px auto 30px}.section-number{color:var(--coral);margin-bottom:18px}.services,.pricing,.faq{background:var(--cream)}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:55px}.section-head>p{max-width:420px;color:var(--muted)}.service-grid,.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.service-card{position:relative;background:white;border:1px solid var(--line);border-radius:var(--radius);padding:34px;transition:.3s}.service-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}.service-card.featured{background:var(--navy);color:white}.service-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--peach2);color:var(--ink);font-weight:800;margin-bottom:50px}.service-card p{color:var(--muted)}.featured p{color:#bbc6cf}.service-card ul,.price-card ul{list-style:none;padding:0;margin:25px 0}.service-card li,.price-card li{padding:9px 0;border-bottom:1px solid var(--line);font-size:.91rem}.featured li{border-color:rgba(255,255,255,.15)}.service-card li:before,.price-card li:before{content:'✓';color:var(--coral);margin-right:9px;font-weight:800}.service-card>a{font-weight:700;color:var(--coral)}.card-label{position:absolute;right:20px;top:20px;background:var(--peach);color:var(--ink);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;border-radius:999px;padding:5px 9px}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px 25px}.project-wide{grid-column:1/-1}.project-image{position:relative;border-radius:var(--radius);overflow:hidden;padding:35px}.project-image.peach{background:#f9c7b5}.project-image.blue{background:var(--blue)}.project-image.green{background:var(--green)}.project-image img{width:100%;transition:.5s}.project:hover img{transform:scale(1.025)}.project-image>span{position:absolute;top:18px;left:18px;background:white;padding:7px 12px;border-radius:999px;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.project-meta{display:grid;grid-template-columns:1fr 1fr;gap:25px;padding-top:18px}.project-meta.stacked{display:block}.project-meta p{color:var(--muted);font-size:.9rem}.project-meta h3{font-size:1.8rem}.process{background:var(--navy);color:white}.process .section-head>p{color:#bac4cd}.process-list{border-top:1px solid rgba(255,255,255,.2)}.process-step{display:grid;grid-template-columns:80px 1fr 1.3fr;gap:30px;align-items:center;padding:28px 0;border-bottom:1px solid rgba(255,255,255,.2)}.process-step>span{color:var(--peach);font-weight:800}.process-step h3,.process-step p{margin:0}.process-step p{color:#bac4cd}.price-card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:32px;position:relative}.price-card.popular{border:2px solid var(--coral);transform:translateY(-10px)}.popular-label{position:absolute;top:-14px;right:25px;background:var(--coral);color:white;border-radius:999px;padding:6px 13px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.package{font-weight:800;color:var(--coral);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem}.price{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin-top:30px}.price span,.price strong{display:block}.price span{font-size:.75rem;color:var(--muted)}.price strong{font:800 2.25rem 'Manrope';letter-spacing:-.06em}.price-card .button{width:100%;margin-top:15px}.pricing-note{text-align:center;color:var(--muted);margin:35px auto 0;max-width:800px}.care{padding-top:0;background:var(--cream)}.care-box{background:var(--coral);color:white;border-radius:30px;padding:60px;display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.care-box em{color:var(--ink)}.care-plans{display:grid;gap:14px}.care-plans article{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);padding:22px;border-radius:18px}.care-plans span,.care-plans strong{display:block}.care-plans strong{font:700 1.8rem 'Manrope'}.care-plans small{font-size:.75rem}.care-plans p{margin:6px 0 0;font-size:.85rem}.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}.about-art{background:var(--peach2);border-radius:var(--radius);overflow:hidden}.about-copy>p:not(.section-number){color:var(--muted)}.signature{font:italic 1.4rem Georgia;margin-top:30px}.signature span{display:block;font:500 .75rem 'DM Sans';font-style:normal;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:6px}.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.accordion article{border-bottom:1px solid var(--line)}.accordion button{width:100%;display:flex;justify-content:space-between;text-align:left;padding:22px 0;background:none;border:0;color:var(--ink);font:700 1.05rem 'Manrope';cursor:pointer}.accordion button span{font-size:1.5rem;color:var(--coral);transition:.2s}.answer{display:grid;grid-template-rows:0fr;transition:.3s}.answer p{overflow:hidden;color:var(--muted);margin:0}.accordion article.open .answer{grid-template-rows:1fr}.accordion article.open .answer p{padding-bottom:22px}.accordion article.open button span{transform:rotate(45deg)}.contact{background:var(--peach2)}.contact-box{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px}.contact-copy{padding-top:30px}.contact-copy>p:not(.section-number){color:#5d5957;font-size:1.08rem}.contact-points{display:grid;gap:8px;margin:30px 0}.email-link{font-weight:800;border-bottom:1px solid}.contact-form{background:white;padding:35px;border-radius:var(--radius);box-shadow:var(--shadow)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.contact-form label{display:grid;gap:7px;font-size:.79rem;font-weight:700;margin-bottom:15px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:#fffdfa;padding:13px;font:inherit;color:var(--ink)}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:2px solid var(--peach);border-color:transparent}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:flex-start}.check input{width:auto;margin-top:4px}.form-status{margin:12px 0 0;font-size:.85rem}.form-status.success{color:#278050}.form-status.error{color:#b2342d}.footer{background:#101e2a;color:white;padding:70px 0 20px}.brand-light img{filter:none}.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:50px;padding-bottom:55px}.footer-top h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--peach)}.footer-top a:not(.brand){display:block;color:#c0cad2;margin:8px 0;font-size:.9rem}.footer-top p{color:#a3afb8;max-width:330px;font-size:.9rem}.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:20px;display:flex;justify-content:space-between;color:#8f9ca6;font-size:.8rem}.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.site-nav{position:fixed;inset:82px 0 auto;background:var(--paper);padding:30px 20px;display:none;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}.site-nav.open{display:flex}.menu-toggle{display:block}.hero-grid,.about-grid,.faq-grid,.contact-box{grid-template-columns:1fr}.hero-copy{order:1}.hero-visual{max-width:650px;margin:auto}.section-head{display:block}.section-head>p{max-width:650px}.service-grid,.price-grid{grid-template-columns:1fr}.price-card.popular{transform:none}.care-box{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr 1fr}.project-meta{grid-template-columns:1fr}.contact-box{gap:30px}}@media(max-width:620px){.container{width:min(100% - 28px,1180px)}.section{padding:75px 0}.hero{padding-top:45px}.hero-proof{grid-template-columns:1fr}.hero-actions{align-items:flex-start;flex-direction:column;margin-bottom:35px}.float-card{display:none}.marquee{gap:12px;flex-wrap:wrap}.marquee span{font-size:.67rem}.project-grid{grid-template-columns:1fr}.project-wide{grid-column:auto}.project-image{padding:15px}.process-step{grid-template-columns:40px 1fr}.process-step p{grid-column:2}.care-box{padding:35px 24px}.form-row{grid-template-columns:1fr}.contact-form{padding:24px}.footer-top{grid-template-columns:1fr}.footer-bottom{display:grid;gap:10px}h1{font-size:3.15rem}.section-head{margin-bottom:35px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}*{animation:none!important;transition:none!important}}
/* Multi-page additions */
.site-nav a.active{color:var(--coral)}.page-hero{background:var(--cream);padding:105px 0 85px}.page-hero .container{max-width:1000px;margin-left:max(20px,calc((100% - 1180px)/2))}.page-hero h1{max-width:950px}.page-hero .lead{max-width:790px}.split{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}.split.reverse>div:first-child{order:2}.detail-service.alt{background:var(--cream)}.detail-card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:35px;box-shadow:var(--shadow)}.detail-card.dark{background:var(--navy);color:white}.detail-card ul{list-style:none;margin:0;padding:0}.detail-card li{padding:12px 0;border-bottom:1px solid var(--line)}.detail-card.dark li{border-color:rgba(255,255,255,.15)}.detail-card li:before{content:'✓';color:var(--coral);margin-right:10px;font-weight:800}.home-process{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.home-process span{border-top:1px solid rgba(255,255,255,.25);padding-top:16px;color:#d2d9de;font-weight:600;font-size:.85rem}.cta-art{max-height:330px;overflow:hidden;border-radius:20px}.cta-art img{width:100%;margin-top:-60px}@media(max-width:900px){.split{grid-template-columns:1fr;gap:35px}.split.reverse>div:first-child{order:initial}.home-process{grid-template-columns:repeat(3,1fr)}}@media(max-width:620px){.page-hero{padding:70px 0 60px}.home-process{grid-template-columns:1fr 1fr}.cta-art{display:none}}
/* WebLychee-inspired homepage sequence, with original WebPeachy content */
.section-action{text-align:center;margin-top:42px}.section-action.left{text-align:left}.testimonials{background:var(--cream)}.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.testimonial-card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:32px;display:flex;min-height:310px;flex-direction:column;justify-content:space-between}.testimonial-card.accent{background:var(--peach2)}.quote-mark{font:400 4rem Georgia;color:var(--coral);line-height:.7}.testimonial-card>p{font-size:1.05rem}.testimonial-card strong,.testimonial-card span{display:block}.testimonial-card span{font-size:.78rem;color:var(--muted);margin-top:4px}.home-final{background:var(--paper)}.final-cta{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center;background:var(--peach2);border-radius:30px;padding:60px}.final-cta h2{max-width:850px}.final-cta p:not(.section-number){max-width:720px}.home-about .about-art{max-height:570px}@media(max-width:900px){.testimonial-grid{grid-template-columns:1fr}.testimonial-card{min-height:auto}.final-cta{grid-template-columns:1fr;padding:40px}.section-action.left{text-align:center}}@media(max-width:620px){.final-cta{padding:30px 22px}}
/* =========================================================
   WEBPEACHY DESIGN SYSTEM V2
   Editorial, restrained, sharper, and more compact
   ========================================================= */
:root{
  --ink:#17202a;
  --muted:#66707a;
  --cream:#f6f4ef;
  --paper:#fcfbf8;
  --peach:#e47c5d;
  --peach2:#ead8cf;
  --coral:#c95f43;
  --navy:#1c2933;
  --line:#d9d6cf;
  --green:#ccd6cf;
  --blue:#cbd4da;
  --radius:3px;
  --shadow:0 10px 28px rgba(23,32,42,.07)
}

body{font-size:15px;line-height:1.65;background:var(--paper)}
h1,h2,h3{letter-spacing:-.025em;line-height:1.14}
h1{font-size:clamp(2.6rem,5vw,4.85rem);max-width:900px;margin-bottom:1.25rem}
h2{font-size:clamp(2rem,3.7vw,3.45rem);margin-bottom:1rem}
h3{font-size:1.22rem;letter-spacing:-.02em}
em{font-family:inherit;font-style:normal;font-weight:inherit;color:var(--coral)}
.section{padding:88px 0}
.container{width:min(1140px,calc(100% - 48px))}
.lead{font-size:1.06rem;line-height:1.7;max-width:700px}
.eyebrow,.section-number{font-size:.7rem;letter-spacing:.17em}

.button{border-radius:2px;padding:13px 20px;font-size:.84rem;letter-spacing:.01em;box-shadow:none}
.button:hover{transform:none;box-shadow:none;background:var(--coral)}
.button-small{padding:10px 15px}
.button-ghost{border-color:#8e918f}
.text-link{font-size:.86rem;padding-bottom:3px}

.site-header{height:72px;background:rgba(252,251,248,.96);backdrop-filter:blur(10px)}
.brand{font-size:1.18rem;gap:9px}
.brand img{width:32px;height:32px;border-radius:0}
.site-nav{gap:23px;font-size:.82rem}

.hero{padding:80px 0 75px;background:#f3f0ea}
.hero-grid{grid-template-columns:1.02fr .98fr;gap:65px}
.hero-actions{margin:27px 0 43px}
.hero-proof{padding-top:19px;gap:14px}
.hero-proof strong{font-size:.8rem}
.hero-proof span{font-size:.7rem}
.hero-visual img{filter:none;border:1px solid var(--line)}
.float-card{display:none}
.client-strip{padding:18px 0}
.client-strip p{margin-bottom:8px}
.marquee{gap:28px;font-size:.76rem}

.about-grid{gap:70px}
.about-art{border-radius:0;border:1px solid var(--line)}
.about-art img{filter:saturate(.72)}
.section-head{margin-bottom:42px;align-items:flex-end}
.section-head>p{font-size:.92rem}

.service-grid,.price-grid{gap:1px;background:var(--line);border:1px solid var(--line)}
.service-card,.price-card{border:0;border-radius:0;padding:29px;background:var(--paper);box-shadow:none}
.service-card:hover{transform:none;box-shadow:none;background:#f7f3ed}
.service-card.featured{background:var(--navy)}
.service-icon{width:auto;height:auto;display:block;background:none;border-radius:0;margin-bottom:45px;font-size:.7rem;letter-spacing:.14em;color:var(--coral)}
.card-label,.popular-label{border-radius:0}
.service-card li,.price-card li{padding:7px 0;font-size:.82rem}
.service-card p{font-size:.9rem}

.project-grid{gap:48px 24px}
.project-image{border-radius:0;padding:24px;border:1px solid rgba(23,32,42,.1)}
.project-image>span{top:12px;left:12px;border-radius:0;padding:5px 8px;font-size:.59rem}
.project-meta{padding-top:14px;gap:18px}
.project-meta h3{font-size:1.4rem;margin-bottom:.5rem}
.project-meta p{font-size:.82rem}
.project:hover img{transform:none}

.process-step{grid-template-columns:65px 1fr 1.4fr;padding:22px 0}
.process-step h3{font-size:1.05rem}
.process-step p{font-size:.87rem}

.testimonial-grid{gap:1px;background:var(--line);border:1px solid var(--line)}
.testimonial-card{border:0;border-radius:0;padding:28px;min-height:255px}
.testimonial-card.accent{background:#eee5df}
.quote-mark{font-size:2.7rem}
.testimonial-card>p{font-size:.92rem}

.page-hero{padding:80px 0 65px;background:#f3f0ea;border-bottom:1px solid var(--line)}
.page-hero .container{max-width:940px}
.split{gap:65px}
.detail-card{border-radius:0;padding:30px;box-shadow:none}
.detail-card li{padding:9px 0;font-size:.88rem}

.price-card.popular{transform:none;border:0;background:#f2ece7}
.price{padding:16px 0;margin-top:23px}
.price strong{font-size:1.8rem;letter-spacing:-.035em}
.popular-label{top:0;right:0;font-size:.59rem;padding:5px 9px}

.care-box{border-radius:0;padding:48px;border:1px solid rgba(23,32,42,.18)}
.care-plans{gap:1px;background:rgba(255,255,255,.32)}
.care-plans article{border-radius:0;border:0;padding:19px;background:rgba(255,255,255,.10)}
.care-plans strong{font-size:1.45rem}
.final-cta{border-radius:0;padding:48px;border:1px solid var(--line);background:#e8ddd6}
.contact-form{border-radius:0;padding:30px;box-shadow:none;border:1px solid var(--line)}
.contact-form input,.contact-form select,.contact-form textarea{border-radius:1px;background:white;padding:11px}
.accordion button{font-size:.95rem;padding:18px 0}
.footer{padding-top:58px}
.footer-top{gap:40px;padding-bottom:42px}

@media(max-width:900px){
  .site-nav{inset:72px 0 auto;border-radius:0}
  .hero-grid{gap:42px}
  .service-grid,.price-grid,.testimonial-grid{gap:1px}
}
@media(max-width:620px){
  .container{width:min(100% - 30px,1140px)}
  .section{padding:64px 0}
  .hero{padding:55px 0}
  h1{font-size:2.55rem}
  h2{font-size:2rem}
  .lead{font-size:.98rem}
  .service-card,.price-card{padding:24px}
  .project-image{padding:12px}
  .care-box,.final-cta{padding:28px 22px}
}

/* =========================================================
   WEBPEACHY COLOR THEME V3
   Peach + aubergine + warm ivory + muted sage
   ========================================================= */
:root{
  --ink:#30243a;
  --muted:#6f6574;
  --cream:#f8f1e8;
  --paper:#fffaf4;
  --peach:#ef8f72;
  --peach2:#f4c8b8;
  --coral:#d96f53;
  --navy:#30243a;
  --line:#ded2c8;
  --green:#cbd8c8;
  --blue:#d9d6e5;
  --radius:3px;
  --shadow:0 10px 28px rgba(48,36,58,.07)
}

body{color:var(--ink);background:var(--paper)}
.site-header{background:rgba(255,250,244,.96);border-bottom-color:var(--line)}
.site-nav a.active,.site-nav>a:not(.button):hover{color:var(--coral)}
.hero,.page-hero{background:#f8f1e8}
.hero-visual img{border-color:#d5c6bc}
.client-strip,.process,.footer,.service-card.featured,.detail-card.dark{background:#30243a}
.client-strip,.process,.footer{color:#fffaf4}
.marquee i,.process-step>span{color:var(--peach)}
.intro h2 span{color:#84778c}
.services,.pricing,.faq,.testimonials{background:#f8f1e8}
.section-number,.package,.service-card>a{color:var(--coral)}
.service-grid,.price-grid,.testimonial-grid{background:#ded2c8;border-color:#ded2c8}
.service-card,.price-card,.testimonial-card{background:#fffaf4}
.service-card:hover{background:#f5ece4}
.service-card.featured p,.process-step p,.process .section-head>p{color:#d8cedd}
.service-card.featured li,.process-step{border-color:rgba(255,250,244,.16)}
.service-icon{color:var(--coral)}
.card-label,.popular-label{background:var(--peach);color:#30243a}
.project-image.peach{background:#efb39e}
.project-image.blue{background:#d9d6e5}
.project-image.green{background:#cbd8c8}
.project-image>span{background:#fffaf4;color:#30243a}
.testimonial-card.accent{background:#eadfcd}
.quote-mark{color:var(--coral)}
.price-card.popular{background:#eee3d8}
.care-box{background:#d96f53;color:#fffaf4;border-color:#bd5c44}
.care-box em{color:#30243a}
.care-plans article{background:rgba(255,250,244,.12)}
.final-cta{background:#cbd8c8;border-color:#b5c5b2}
.contact{background:#f4c8b8}
.contact-form{background:#fffaf4;border-color:#d7c8bd}
.contact-form input,.contact-form select,.contact-form textarea{background:#fffdf9;border-color:#d8ccc3;color:#30243a}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline-color:var(--peach)}
.button{background:#30243a;color:#fffaf4}
.button:hover{background:#d96f53;color:#fffaf4}
.button-ghost{background:transparent;color:#30243a;border-color:#76687d}
.button-ghost:hover{background:#30243a;color:#fffaf4;border-color:#30243a}
.button-light{background:#fffaf4;color:#30243a}
.button-light:hover{background:#cbd8c8;color:#30243a}
.text-link{border-color:#30243a}
.footer-top h3{color:#ef8f72}
.footer-top a:not(.brand){color:#d8cedd}
.footer-top p,.footer-bottom{color:#bcb0c2}
.footer-bottom{border-color:rgba(255,250,244,.14)}
.accordion button{color:#30243a}
.accordion button span{color:#d96f53}
.about-art{background:#f4c8b8;border-color:#d9b4a7}
.detail-service.alt{background:#f8f1e8}
.detail-card{background:#fffaf4;border-color:#ded2c8}
.logo-theme-note{color:#6f6574}

/* =========================================================
   WEBPEACHY COLOR THEME V4
   Bright white + peach + charcoal + deep teal
   ========================================================= */
:root{
  --ink:#202629;
  --muted:#667076;
  --cream:#ffffff;
  --paper:#ffffff;
  --peach:#f28c6f;
  --peach2:#ffe0d5;
  --coral:#df684b;
  --navy:#123c42;
  --line:#dfe4e5;
  --green:#cfe2dc;
  --blue:#dbe7ec;
  --radius:3px;
  --shadow:0 10px 28px rgba(24,42,45,.07)
}

html,body{background:#fff;color:#202629}
.site-header{background:rgba(255,255,255,.96);border-bottom-color:#dfe4e5}
.site-nav a.active,.site-nav>a:not(.button):hover{color:#df684b}

.hero{background:#fff;border-bottom:1px solid #dfe4e5}
.page-hero{background:#fff;border-bottom:1px solid #dfe4e5}
.hero-visual img{border-color:#dfe4e5;background:#ffe0d5}

.client-strip,.process,.footer,.service-card.featured,.detail-card.dark{background:#123c42}
.client-strip,.process,.footer{color:#fff}
.marquee i,.process-step>span{color:#f28c6f}
.process-step,.service-card.featured li{border-color:rgba(255,255,255,.17)}
.process-step p,.process .section-head>p,.service-card.featured p{color:#c9d8da}

.home-about,.work,.detail-service,.about{background:#fff}
.services,.pricing,.faq,.testimonials,.detail-service.alt{background:#f5f7f7}
.home-final{background:#fff}

.section-number,.package,.service-card>a{color:#df684b}
.service-grid,.price-grid,.testimonial-grid{background:#dfe4e5;border-color:#dfe4e5}
.service-card,.price-card,.testimonial-card{background:#fff}
.service-card:hover{background:#fff8f5}
.service-icon{color:#df684b}
.card-label,.popular-label{background:#f28c6f;color:#202629}

.project-image.peach{background:#ffc7b4}
.project-image.blue{background:#dbe7ec}
.project-image.green{background:#cfe2dc}
.project-image>span{background:#fff;color:#202629}
.project-meta p{color:#667076}

.testimonial-card.accent{background:#ffe0d5}
.quote-mark{color:#df684b}
.price-card.popular{background:#fff3ef}

.care-box{background:#f28c6f;color:#202629;border-color:#e8795c}
.care-box em{color:#123c42}
.care-plans{background:rgba(255,255,255,.32)}
.care-plans article{background:rgba(255,255,255,.24);color:#202629}
.final-cta{background:#dbe7ec;border-color:#c5d6dd;color:#202629}

.contact{background:#ffe0d5}
.contact-form{background:#fff;border-color:#d9dfe0}
.contact-form input,.contact-form select,.contact-form textarea{background:#fff;border-color:#d5dcde;color:#202629}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline-color:#f28c6f}

.button{background:#123c42;color:#fff}
.button:hover{background:#df684b;color:#fff}
.button-ghost{background:#fff;color:#123c42;border-color:#123c42}
.button-ghost:hover{background:#123c42;color:#fff;border-color:#123c42}
.button-light{background:#fff;color:#123c42}
.button-light:hover{background:#202629;color:#fff}
.text-link{border-color:#123c42;color:#123c42}

.about-art{background:#ffe0d5;border-color:#f0c4b5}
.detail-card{background:#fff;border-color:#dfe4e5}
.accordion button{color:#202629}
.accordion button span{color:#df684b}
.footer-top h3{color:#f28c6f}
.footer-top a:not(.brand){color:#d4e1e2}
.footer-top p,.footer-bottom{color:#aebfc1}
.footer-bottom{border-color:rgba(255,255,255,.15)}

@media(max-width:900px){
  .site-nav{background:#fff;border-bottom-color:#dfe4e5}
}

/* =========================================================
   WEBPEACHY COLOR THEME V5
   User-provided peach and teal palette + white
   ========================================================= */
:root{
  --ink:#2c2e35;
  --muted:#656a70;
  --cream:#ffffff;
  --paper:#ffffff;
  --peach:#fdad86;
  --peach2:#fed6c3;
  --coral:#e98965;
  --navy:#20a590;
  --line:#e2e7e6;
  --green:#6fcfbf;
  --blue:#42b5b1;
  --radius:3px;
  --shadow:0 10px 28px rgba(44,46,53,.07)
}
html,body{background:#fff;color:#2c2e35}
.site-header{background:rgba(255,255,255,.97);border-color:#e2e7e6}
.site-nav a.active,.site-nav>a:not(.button):hover{color:#20a590}
.hero,.page-hero{background:#fff;border-color:#e2e7e6}
.hero-visual img{background:#feebe4;border-color:#fed6c3}
.client-strip,.process,.footer,.service-card.featured,.detail-card.dark{background:#20a590}
.client-strip,.process,.footer{color:#fff}
.marquee i,.process-step>span{color:#fed6c3}
.process-step,.service-card.featured li{border-color:rgba(255,255,255,.24)}
.process-step p,.process .section-head>p,.service-card.featured p{color:#e8fffa}
.home-about,.work,.detail-service,.about,.home-final{background:#fff}
.services,.pricing,.faq,.testimonials,.detail-service.alt{background:#f6fbfa}
.section-number,.package,.service-card>a{color:#20a590}
.service-grid,.price-grid,.testimonial-grid{background:#d8e8e5;border-color:#d8e8e5}
.service-card,.price-card,.testimonial-card{background:#fff}
.service-card:hover{background:#feebe4}
.service-icon{color:#20a590}
.card-label,.popular-label{background:#fdad86;color:#2c2e35}
.project-image.peach{background:#fed6c3}
.project-image.blue{background:#42b5b1}
.project-image.green{background:#6fcfbf}
.project-image>span{background:#fff;color:#2c2e35}
.testimonial-card.accent{background:#feebe4}
.quote-mark{color:#fdad86}
.price-card.popular{background:#feebe4}
.care-box{background:#fdad86;color:#2c2e35;border-color:#e89570}
.care-box em{color:#0b7668}
.care-plans{background:rgba(255,255,255,.30)}
.care-plans article{background:rgba(255,255,255,.22);color:#2c2e35}
.final-cta{background:#6fcfbf;border-color:#53bba9;color:#2c2e35}
.contact{background:#fed6c3}
.contact-form{background:#fff;border-color:#e2e7e6}
.contact-form input,.contact-form select,.contact-form textarea{background:#fff;border-color:#d7dfde;color:#2c2e35}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline-color:#42b5b1}
.button{background:#20a590;color:#fff}
.button:hover{background:#2c2e35;color:#fff}
.button-ghost{background:#fff;color:#168b7a;border-color:#20a590}
.button-ghost:hover{background:#20a590;color:#fff;border-color:#20a590}
.button-light{background:#fff;color:#168b7a}
.button-light:hover{background:#2c2e35;color:#fff}
.text-link{border-color:#168b7a;color:#168b7a}
.about-art{background:#fed6c3;border-color:#efc2ad}
.detail-card{background:#fff;border-color:#e2e7e6}
.accordion button{color:#2c2e35}
.accordion button span{color:#20a590}
.footer-top h3{color:#fed6c3}
.footer-top a:not(.brand){color:#effffb}
.footer-top p,.footer-bottom{color:#d3f4ed}
.footer-bottom{border-color:rgba(255,255,255,.22)}
@media(max-width:900px){.site-nav{background:#fff;border-color:#e2e7e6}}


/* =========================================================
   CREATIVE PARTNERS COLLAGE SECTION
   Original WebPeachy adaptation using local portfolio assets
   ========================================================= */
.creative-partners{
  position:relative;
  min-height:610px;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  background:#173d3a;
  padding:80px 24px;
}
.creative-collage{position:absolute;inset:-150px -90px;transform:rotate(-13deg) scale(1.08);z-index:-3}
.collage-tile{position:absolute;width:36%;height:295px;overflow:hidden;background:#fff;border:8px solid #fff;box-shadow:0 18px 45px rgba(0,0,0,.28)}
.collage-tile img{width:100%;height:100%;object-fit:cover}
.tile-1{left:-2%;top:2%}.tile-2{left:34%;top:-3%}.tile-3{right:-4%;top:2%}
.tile-4{left:-8%;top:48%}.tile-5{left:28%;top:43%}.tile-6{right:-8%;top:47%}
.tile-7{left:8%;top:88%}.tile-8{right:10%;top:86%}
.creative-overlay{position:absolute;inset:0;background:rgba(9,22,25,.57);z-index:-2}
.creative-partners-card{
  width:min(800px,calc(100% - 20px));
  text-align:center;
  background:#fff;
  color:#2c2e35;
  border:1px solid rgba(255,255,255,.65);
  padding:58px 70px;
  box-shadow:0 22px 70px rgba(0,0,0,.28);
}
.creative-partners-card .section-number{color:#20a590;margin-bottom:14px}
.creative-partners-card h2{font-size:clamp(2rem,3.4vw,3rem);max-width:680px;margin:0 auto 20px}
.creative-partners-card p:not(.section-number){max-width:650px;margin:0 auto 28px;color:#656a70;font-size:1rem;line-height:1.7}
.creative-partners-card .button{background:#fdad86;color:#2c2e35}
.creative-partners-card .button:hover{background:#20a590;color:#fff}
@media(max-width:900px){
  .creative-partners{min-height:560px}
  .creative-collage{inset:-80px -170px;transform:rotate(-11deg) scale(1.15)}
  .collage-tile{width:48%;height:245px}
  .creative-partners-card{padding:46px 42px}
}
@media(max-width:620px){
  .creative-partners{min-height:520px;padding:55px 15px}
  .creative-collage{inset:-35px -280px;transform:rotate(-10deg) scale(1.08)}
  .collage-tile{width:62%;height:205px;border-width:5px}
  .creative-partners-card{padding:35px 22px}
  .creative-partners-card h2{font-size:1.85rem}
  .creative-partners-card p:not(.section-number){font-size:.92rem}
}

/* =========================================================
   WEBPEACHY CONTRAST THEME V7
   Dark blue-green contrast with restrained light accents
   ========================================================= */
:root{
  --ink:#20282b;
  --muted:#626d70;
  --cream:#ffffff;
  --paper:#ffffff;
  --peach:#fdad86;
  --peach2:#fed6c3;
  --coral:#e88762;
  --navy:#0b3f46;
  --line:#d9e0e1;
  --green:#397c79;
  --blue:#155e63;
  --radius:3px;
  --shadow:0 10px 28px rgba(11,63,70,.10)
}

/* Primary contrast surfaces */
.client-strip,
.process,
.footer,
.service-card.featured,
.detail-card.dark{background:#0b3f46;color:#fff}

.creative-partners{background:#082f35}
.creative-overlay{background:rgba(3,24,28,.70)}

/* Calmer section rhythm: white, soft gray, then dark */
.services,.pricing,.faq,.detail-service.alt{background:#f2f5f5}
.testimonials{background:#0b3f46;color:#fff}
.testimonials .section-head>p{color:#bdd0d1}
.testimonials .section-number{color:#fdad86}
.testimonials h2{color:#fff}
.testimonial-grid{background:#276269;border-color:#276269}
.testimonial-card{background:#fff;color:#20282b}
.testimonial-card.accent{background:#fed6c3;color:#20282b}

/* Darker blue-green controls and accents */
.button{background:#0b3f46;color:#fff}
.button:hover{background:#155e63;color:#fff}
.button-ghost{color:#0b3f46;border-color:#0b3f46}
.button-ghost:hover{background:#0b3f46;color:#fff;border-color:#0b3f46}
.button-light{color:#0b3f46}
.text-link{color:#0b3f46;border-color:#0b3f46}
.site-nav a.active,.site-nav>a:not(.button):hover{color:#155e63}
.section-number,.package,.service-card>a{color:#155e63}
.service-icon,.accordion button span{color:#155e63}

/* Reduce large pastel fields */
.contact{background:#f2f5f5}
.contact-box{border-top:4px solid #fdad86}
.care-box{background:#155e63;color:#fff;border-color:#0b3f46}
.care-box em{color:#fed6c3}
.care-plans article{background:rgba(255,255,255,.10);color:#fff}
.final-cta{background:#0b3f46;color:#fff;border-color:#0b3f46}
.final-cta .section-number{color:#fdad86}
.final-cta h2,.final-cta p{color:#fff}
.final-cta em{color:#fdad86}
.final-cta .button{background:#fdad86;color:#20282b}
.final-cta .button:hover{background:#fff;color:#0b3f46}

/* Keep palette colors in smaller, controlled areas */
.project-image.blue{background:#155e63}
.project-image.green{background:#397c79}
.project-image.peach{background:#fed6c3}
.card-label,.popular-label{background:#fdad86;color:#20282b}
.quote-mark{color:#e88762}

/* Improve text contrast on dark sections */
.process h2,.process h3,.footer h3,.detail-card.dark h3,.service-card.featured h3{color:#fff}
.process-step p,.process .section-head>p,.service-card.featured p{color:#c9d9da}
.footer-top a:not(.brand){color:#e2eeee}
.footer-top p,.footer-bottom{color:#aec4c6}
.marquee i,.process-step>span{color:#fdad86}

/* Creative card stays bright against the dark collage */
.creative-partners-card .section-number{color:#155e63}
.creative-partners-card .button{background:#fdad86;color:#20282b}
.creative-partners-card .button:hover{background:#0b3f46;color:#fff}

/* =========================================================
   WEBPEACHY DARK PEACH THEME V8
   Richer burnt peach paired with dark blue-green
   ========================================================= */
:root{
  --peach:#d97858;
  --peach2:#efb39d;
  --coral:#bd5b40;
}

/* Dark peach accents */
.card-label,.popular-label,
.creative-partners-card .button,
.final-cta .button{background:#d97858;color:#fff}

.creative-partners-card .button:hover,
.final-cta .button:hover{background:#0b3f46;color:#fff}

.marquee i,.process-step>span,
.testimonials .section-number,
.final-cta .section-number{color:#efb39d}

.project-image.peach,
.testimonial-card.accent{background:#efb39d}

.care-box{background:#bd5b40;color:#fff;border-color:#99462f}
.care-box em{color:#fff}
.care-plans article{color:#fff;background:rgba(255,255,255,.10)}

.contact-box{border-top-color:#d97858}
.quote-mark{color:#bd5b40}

/* Peach-focused interactive states */
.button.peach-button{background:#d97858;color:#fff}
.button.peach-button:hover{background:#bd5b40;color:#fff}

/* Improve visibility of peach details on dark blue-green */
.process em,.testimonials em,.final-cta em{color:#efb39d}
.footer-top h3{color:#efb39d}

/* Softer pale peach remains limited to supporting surfaces */
.about-art{background:#efb39d;border-color:#d9967d}


/* =========================================================
   WEBPEACHY LOGO + SOURCE PEACH THEME V9
   Peach sampled from the supplied logo artwork
   ========================================================= */
:root{--peach:#fa8564;--peach2:#fbb39e;--coral:#db6748}
.brand img{width:42px;height:42px;object-fit:contain;border-radius:0}
.footer .brand img{width:46px;height:46px}
.card-label,.popular-label,.creative-partners-card .button,.final-cta .button{background:#fa8564;color:#20282b}
.creative-partners-card .button:hover,.final-cta .button:hover{background:#0b3f46;color:#fff}
.project-image.peach,.testimonial-card.accent,.about-art{background:#fbb39e}
.contact-box{border-top-color:#fa8564}
.quote-mark{color:#db6748}
.process em,.testimonials em,.final-cta em,.footer-top h3{color:#fbb39e}
.care-box{background:#db6748;border-color:#b64d32}
@media(max-width:620px){.brand img{width:36px;height:36px}}


/* =========================================================
   WEBPEACHY PATTERNS + GRADIENTS V10
   Subtle depth using the logo peach and dark blue-green
   ========================================================= */

/* Hero: white base with restrained peach glow and fine grid */
.hero {
  background-color: #ffffff;
  background-image:
    linear-gradient(rgba(11,63,70,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,63,70,.035) 1px, transparent 1px),
    radial-gradient(circle at 88% 18%, rgba(250,133,100,.22), transparent 28%),
    radial-gradient(circle at 72% 86%, rgba(21,94,99,.10), transparent 25%);
  background-size: 38px 38px, 38px 38px, auto, auto;
}

/* Page headers: softer diagonal peach wash */
.page-hero {
  background-color: #ffffff;
  background-image:
    linear-gradient(120deg, transparent 0 58%, rgba(251,179,158,.28) 58% 76%, transparent 76%),
    linear-gradient(90deg, rgba(11,63,70,.03) 1px, transparent 1px);
  background-size: auto, 46px 100%;
}

/* Services and pricing: neutral dotted pattern, intentionally low contrast */
.services,
.pricing {
  background-color: #f2f5f5;
  background-image: radial-gradient(circle, rgba(11,63,70,.09) 1px, transparent 1.4px);
  background-size: 22px 22px;
}

/* Dark process: layered blue-green gradient with diagonal line pattern */
.process {
  background-color: #0b3f46;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 24px),
    radial-gradient(circle at 12% 18%, rgba(250,133,100,.18), transparent 24%),
    linear-gradient(130deg, #082f35 0%, #0b3f46 48%, #155e63 100%);
}

/* Testimonials: dark surface with subtle offset rings */
.testimonials {
  background-color: #0b3f46;
  background-image:
    radial-gradient(circle at 92% 10%, transparent 0 72px, rgba(251,179,158,.12) 73px 75px, transparent 76px 112px, rgba(251,179,158,.07) 113px 115px, transparent 116px),
    radial-gradient(circle at 5% 92%, rgba(21,94,99,.95), transparent 32%),
    linear-gradient(145deg, #0b3f46, #082f35);
}

/* Creative collage: deepen edges and introduce a dark color wash */
.creative-partners::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,24,28,.36), transparent 22%, transparent 78%, rgba(3,24,28,.36)),
    radial-gradient(circle at center, transparent 20%, rgba(3,24,28,.30) 100%);
}

/* Final CTA: dark gradient plus small cross pattern */
.final-cta {
  background-color: #0b3f46;
  background-image:
    linear-gradient(45deg, transparent 46%, rgba(255,255,255,.055) 47% 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, rgba(255,255,255,.055) 47% 53%, transparent 54%),
    linear-gradient(125deg, #082f35 0%, #0b3f46 55%, #155e63 100%);
  background-size: 22px 22px, 22px 22px, auto;
}

/* Care panel: richer peach gradient with quiet diagonal texture */
.care-box {
  background-color: #db6748;
  background-image:
    repeating-linear-gradient(125deg, rgba(255,255,255,.055) 0 1px, transparent 1px 18px),
    linear-gradient(120deg, #b64d32 0%, #db6748 58%, #fa8564 100%);
}

/* Contact section: less flat, with a localized peach glow */
.contact {
  background-color: #f2f5f5;
  background-image:
    radial-gradient(circle at 8% 16%, rgba(250,133,100,.20), transparent 24%),
    linear-gradient(90deg, rgba(11,63,70,.035) 1px, transparent 1px);
  background-size: auto, 44px 100%;
}

/* Footer: dark gradient with understated horizontal lines */
.footer {
  background-color: #082f35;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 28px),
    linear-gradient(120deg, #062a30 0%, #0b3f46 58%, #155e63 100%);
}

/* Keep cards crisp and readable over patterned sections */
.service-card,
.price-card,
.testimonial-card,
.contact-form,
.detail-card {
  background-image: none;
}

@media (max-width: 620px) {
  .hero {
    background-size: 28px 28px, 28px 28px, auto, auto;
    background-image:
      linear-gradient(rgba(11,63,70,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(11,63,70,.025) 1px, transparent 1px),
      radial-gradient(circle at 92% 12%, rgba(250,133,100,.17), transparent 24%),
      radial-gradient(circle at 70% 90%, rgba(21,94,99,.07), transparent 22%);
  }
  .page-hero {
    background-image: linear-gradient(135deg, #fff 0 72%, rgba(251,179,158,.24) 72% 100%);
  }
  .testimonials {
    background-image: linear-gradient(145deg, #0b3f46, #082f35);
  }
}

.footer-top > div:first-child > p {
  margin-top: 24px;
}

.footer-top > div:last-child > a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   WEBPEACHY NO-GRID BACKGROUNDS V11
   Removes grid and linear texture patterns
   ========================================================= */
.hero{
  background-color:#fff;
  background-image:
    radial-gradient(circle at 88% 18%,rgba(250,133,100,.22),transparent 28%),
    radial-gradient(circle at 72% 86%,rgba(21,94,99,.10),transparent 25%);
  background-size:auto;
}
.page-hero{
  background-color:#fff;
  background-image:
    linear-gradient(120deg,transparent 0 58%,rgba(251,179,158,.28) 58% 76%,transparent 76%);
  background-size:auto;
}
.contact{
  background-color:#f2f5f5;
  background-image:radial-gradient(circle at 8% 16%,rgba(250,133,100,.20),transparent 24%);
  background-size:auto;
}
.footer{
  background-color:#082f35;
  background-image:linear-gradient(120deg,#062a30 0%,#0b3f46 58%,#155e63 100%);
}
@media(max-width:620px){
  .hero{
    background-image:
      radial-gradient(circle at 92% 12%,rgba(250,133,100,.17),transparent 24%),
      radial-gradient(circle at 70% 90%,rgba(21,94,99,.07),transparent 22%);
    background-size:auto;
  }
}


/* =========================================================
   RESPONSIVE DEVICE MOCKUP + INTERACTIONS V12
   ========================================================= */
.hero-device-stage{--mx:0px;--my:0px;position:relative;min-height:500px;perspective:1200px;isolation:isolate}
.hero-device-stage>img{display:none}
.mockup-accent{position:absolute;pointer-events:none;z-index:-1;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.accent-disc{width:210px;height:210px;border-radius:50%;left:7%;bottom:12%;background:linear-gradient(145deg,#fbb39e,#fa8564);opacity:.75}
.accent-lines{width:190px;height:150px;right:1%;top:11%;opacity:.5;background:repeating-linear-gradient(145deg,transparent 0 11px,#db6748 12px 14px,transparent 15px 23px);clip-path:polygon(20% 0,100% 0,80% 100%,0 100%)}
.device{position:absolute;background:#121719;border:2px solid #293235;box-shadow:0 23px 42px rgba(11,31,34,.25);transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s ease;will-change:transform}
.device-screen{position:absolute;overflow:hidden;background:#fff}
.device-screen img{display:block;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top;transform:translateY(0);transition:transform 2.8s cubic-bezier(.2,.7,.2,1)}
.device-camera{position:absolute;width:4px;height:4px;border-radius:50%;background:#697477;left:50%;top:7px;z-index:3}
.device-laptop{width:68%;height:315px;left:18%;top:105px;background:transparent;border:0;box-shadow:none;z-index:2;transform:translate3d(calc(var(--mx)*.35),calc(var(--my)*.35),0)}
.laptop-lid{position:absolute;inset:0 0 27px;background:#151a1c;border:3px solid #2b3234;border-radius:11px 11px 3px 3px;box-shadow:0 21px 30px rgba(0,0,0,.24)}
.laptop-lid .device-screen{inset:15px 13px 12px}
.laptop-base{position:absolute;left:-7%;right:-7%;bottom:14px;height:16px;background:linear-gradient(#495052,#202628);clip-path:polygon(4% 0,96% 0,100% 60%,94% 100%,6% 100%,0 60%);filter:drop-shadow(0 10px 7px rgba(0,0,0,.25))}
.laptop-base span{display:block;width:22%;height:3px;background:#72797a;margin:auto;border-radius:0 0 5px 5px}
.device-tablet{width:27%;height:330px;left:0;top:34px;border-radius:13px;z-index:3;transform:translate3d(calc(var(--mx)*-.65),calc(var(--my)*-.55),0) rotate(-1deg)}
.device-tablet .device-screen{inset:20px 8px 18px;border-radius:3px}
.device-phone{width:17%;height:235px;right:1%;top:185px;border-radius:17px;z-index:4;transform:translate3d(calc(var(--mx)*.75),calc(var(--my)*-.7),0) rotate(1deg)}
.device-phone .device-screen{inset:17px 6px 18px;border-radius:3px}
.phone-speaker{position:absolute;width:28%;height:3px;border-radius:2px;background:#616a6c;top:8px;left:36%}
.phone-home{position:absolute;width:9px;height:9px;border:1px solid #6c7475;border-radius:50%;bottom:4px;left:calc(50% - 5px)}
.mockup-hint{position:absolute;right:8%;bottom:4px;margin:0;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#626d70;opacity:.75}
.hero-device-stage:hover .device-screen img{transform:translateY(-24%)}
.hero-device-stage:hover .device-laptop{transform:translate3d(calc(var(--mx)*.35),calc(var(--my)*.35 - 8px),25px)}
.hero-device-stage:hover .device-tablet{transform:translate3d(calc(var(--mx)*-.65 - 5px),calc(var(--my)*-.55 - 12px),45px) rotate(-2deg)}
.hero-device-stage:hover .device-phone{transform:translate3d(calc(var(--mx)*.75 + 7px),calc(var(--my)*-.7 - 14px),60px) rotate(2deg)}
.hero-device-stage:hover .device{box-shadow:0 30px 54px rgba(5,31,34,.32)}
.hero-device-stage:hover .accent-disc{transform:translate(-8px,7px) scale(1.04)}
.hero-device-stage:hover .accent-lines{transform:translate(9px,-8px)}

/* Creative Website Partner hover enhancements */
.creative-partners{--cx:0px;--cy:0px}
.creative-partners-card{transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s ease,border-color .55s ease;transform:translate3d(calc(var(--cx)*.12),calc(var(--cy)*.12),0)}
.creative-partners:hover .creative-partners-card{transform:translate3d(calc(var(--cx)*.12),calc(var(--cy)*.12 - 8px),35px);box-shadow:0 32px 85px rgba(0,0,0,.38);border-color:#fbb39e}
.collage-tile{transition:transform .85s cubic-bezier(.2,.8,.2,1),filter .6s ease,opacity .6s ease}
.creative-partners:hover .collage-tile{filter:saturate(.9) contrast(1.04);opacity:.95}
.creative-partners:hover .tile-1{transform:translate(-12px,-5px) scale(1.025)}
.creative-partners:hover .tile-2{transform:translate(5px,-15px) scale(1.02)}
.creative-partners:hover .tile-3{transform:translate(14px,-7px) scale(1.03)}
.creative-partners:hover .tile-4{transform:translate(-14px,9px) scale(1.02)}
.creative-partners:hover .tile-5{transform:translate(3px,12px) scale(1.035)}
.creative-partners:hover .tile-6{transform:translate(16px,6px) scale(1.02)}
.creative-partners-card .button{transition:transform .25s ease,background .25s ease,color .25s ease}
.creative-partners-card .button:hover{transform:translateY(-3px)}
@media(max-width:900px){.hero-device-stage{min-height:450px}.device-laptop{width:70%;left:17%;height:280px}.device-tablet{height:295px}.device-phone{height:210px;top:170px}.mockup-hint{display:none}}
@media(max-width:620px){.hero-device-stage{min-height:360px;margin-top:20px}.device-laptop{width:72%;left:16%;top:80px;height:230px}.laptop-lid{bottom:23px}.device-tablet{width:28%;height:235px;top:24px}.device-phone{width:18%;height:170px;top:135px}.accent-disc{width:145px;height:145px}.accent-lines{width:120px;height:100px}.hero-device-stage:hover .device-screen img{transform:translateY(-15%)}}
@media(prefers-reduced-motion:reduce){.device,.device-screen img,.mockup-accent,.creative-partners-card,.collage-tile{transition:none!important;transform:none!important}}


/* =========================================================
   WEBSITE STATISTICS V13
   Replaces the former partnership marquee
   ========================================================= */
.website-stats{position:relative;overflow:hidden;padding:78px 0 70px;background:#f2f5f5;color:#20282b;border-bottom:1px solid #d9e0e1;isolation:isolate}
.stats-texture{position:absolute;inset:0;z-index:-1;opacity:.42;background-image:radial-gradient(circle,rgba(21,94,99,.20) 0 1.2px,transparent 1.8px);background-size:13px 13px;mask-image:radial-gradient(ellipse 48% 60% at 50% 55%,#000 0 45%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse 48% 60% at 50% 55%,#000 0 45%,transparent 78%);transform:rotate(-4deg) scale(1.1)}
.stats-intro{text-align:center;max-width:720px;margin:0 auto 48px}
.stats-intro .section-number{color:#155e63;margin-bottom:12px}
.stats-intro h2{font-size:clamp(1.9rem,3.4vw,3rem);margin-bottom:14px}
.stats-intro>p:last-child{max-width:620px;margin:auto;color:#626d70}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(11,63,70,.22);border-bottom:1px solid rgba(11,63,70,.22)}
.stat-item{padding:42px 36px 33px;min-height:260px;border-right:1px solid rgba(11,63,70,.22);transition:background .3s ease,transform .3s ease}
.stat-item:last-child{border-right:0}
.stat-item:hover{background:rgba(255,255,255,.78);transform:translateY(-5px)}
.stat-item strong{display:block;font-size:clamp(3.25rem,6vw,5.6rem);font-weight:500;line-height:.95;letter-spacing:-.065em;color:#0b3f46;margin-bottom:22px}
.stat-item strong::after{content:'';display:block;width:42px;height:4px;background:#fa8564;margin-top:18px}
.stat-item h3{font-size:1rem;line-height:1.35;max-width:260px;margin-bottom:18px;font-weight:600}
.stat-item p{font-size:.72rem;line-height:1.45;color:#626d70;max-width:280px;margin:0}
.stat-item p a{color:#155e63;text-decoration:underline;text-underline-offset:3px}
@media(max-width:800px){.stats-grid{grid-template-columns:1fr}.stat-item{min-height:auto;border-right:0;border-bottom:1px solid rgba(11,63,70,.22);padding:32px 20px}.stat-item:last-child{border-bottom:0}.stat-item h3,.stat-item p{max-width:560px}.stats-texture{mask-image:radial-gradient(ellipse 80% 48% at 50% 48%,#000,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 80% 48% at 50% 48%,#000,transparent 80%)}}
@media(max-width:620px){.website-stats{padding:58px 0}.stats-intro{margin-bottom:34px}.stat-item strong{font-size:3.6rem}}


/* COMPACT STATS + PROCESS TIMELINE V14 */
.website-stats{padding:42px 0 38px}
.stats-intro{max-width:660px;margin:0 auto 25px}
.stats-intro .section-number{margin-bottom:7px}
.stats-intro h2{font-size:clamp(1.55rem,2.6vw,2.35rem);margin-bottom:8px}
.stats-intro>p:last-child{font-size:.88rem;line-height:1.5}
.stats-grid{max-width:1050px;margin:auto}
.stat-item{padding:24px 28px 20px;min-height:185px}
.stat-item strong{font-size:clamp(2.65rem,4.6vw,4.15rem);margin-bottom:13px}
.stat-item strong::after{width:31px;height:3px;margin-top:10px}
.stat-item h3{font-size:.88rem;margin-bottom:10px}
.stat-item p{font-size:.64rem}
.stats-texture{opacity:.24;background-size:15px 15px}
.process-timeline-section{padding:72px 0}
.process-timeline-section .section-head{margin-bottom:38px}
.process-timeline{position:relative;display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:14px;padding-top:24px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#fa8564 transparent}
.timeline-track{position:absolute;left:4%;right:4%;top:41px;height:2px;background:rgba(255,255,255,.22)}
.timeline-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,#fa8564,#fbb39e);transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.process-timeline.is-visible .timeline-track span{width:100%}
.timeline-step{position:relative;z-index:1;min-width:0;padding:0 8px 18px;scroll-snap-align:start;outline:none;transition:transform .3s ease}
.timeline-dot{display:grid;place-items:center;width:36px;height:36px;margin:0 0 21px;background:#0b3f46;border:2px solid #fa8564;color:#fbb39e;font-size:.68rem;font-weight:800;box-shadow:0 0 0 6px #0b3f46;transition:background .25s,color .25s,transform .25s}
.timeline-step h3{font-size:.93rem;color:#fff;margin-bottom:9px}
.timeline-step p{font-size:.76rem;line-height:1.5;color:#c9d9da}
.timeline-step:hover,.timeline-step:focus{transform:translateY(-6px)}
.timeline-step:hover .timeline-dot,.timeline-step:focus .timeline-dot{background:#fa8564;color:#20282b;transform:scale(1.1)}
@media(max-width:800px){.website-stats{padding:36px 0}.stat-item{padding:20px;min-height:auto}.process-timeline{grid-template-columns:repeat(6,210px);padding-bottom:14px}.timeline-track{left:18px;right:auto;width:1110px}.process-timeline-section{padding:58px 0}}
@media(max-width:620px){.website-stats{padding:31px 0}.stats-intro{margin-bottom:20px}.stats-intro h2{font-size:1.65rem}.stat-item strong{font-size:2.85rem}.process-timeline-section{padding:50px 0}.process-timeline-section .section-head{margin-bottom:25px}}


/* SERVICES ENGAGEMENT SECTION V15 */
.service-engagement{padding:82px 0;background:#f2f5f5;position:relative;overflow:hidden}
.service-engagement::before{content:'';position:absolute;width:360px;height:360px;border-radius:50%;right:-170px;top:-170px;background:radial-gradient(circle,#fbb39e 0,#fa8564 42%,transparent 43%);opacity:.18;pointer-events:none}
.engagement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.engagement-card{background:#fff;border:1px solid #d9e0e1;padding:34px 30px;min-height:315px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.engagement-card:hover{transform:translateY(-7px);box-shadow:0 18px 38px rgba(11,63,70,.12);border-color:#fa8564}
.engagement-card.featured{background:#0b3f46;color:#fff;border-color:#0b3f46}
.engagement-card>span{display:inline-grid;place-items:center;width:34px;height:34px;background:#fbb39e;color:#20282b;font-size:.7rem;font-weight:800;margin-bottom:25px}
.engagement-card.featured>span{background:#fa8564}
.engagement-card h3{font-size:1.25rem;margin-bottom:20px}
.engagement-card.featured h3{color:#fff}
.engagement-card ul{list-style:none;margin:0;padding:0}
.engagement-card li{position:relative;padding:12px 0 12px 19px;border-top:1px solid #e3e8e8;color:#626d70;font-size:.86rem;line-height:1.45}
.engagement-card li::before{content:'+';position:absolute;left:0;color:#db6748;font-weight:800}
.engagement-card.featured li{border-color:rgba(255,255,255,.16);color:#d3e0e1}
.engagement-card.featured li::before{color:#fbb39e}
.engagement-note{margin-top:20px;background:#fbb39e;padding:28px 30px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:25px}
.engagement-note strong{font-size:1rem;color:#20282b}
.engagement-note p{margin:0;color:#4e5558;font-size:.83rem;line-height:1.5}
.engagement-note>div{display:flex;gap:10px;white-space:nowrap}
.engagement-note .button{padding:11px 17px;font-size:.72rem}
@media(max-width:900px){.engagement-grid{grid-template-columns:1fr}.engagement-card{min-height:auto}.engagement-note{grid-template-columns:1fr}.engagement-note>div{white-space:normal;flex-wrap:wrap}}
@media(max-width:620px){.service-engagement{padding:58px 0}.engagement-card{padding:27px 22px}.engagement-note{padding:24px 22px}}


/* BUTTON CONTRAST + CONTENT REFINEMENTS V16 */
.button,
a.button,
button.button{background:#0b3f46;color:#fff!important;border-color:#0b3f46}
.button:link,.button:visited,a.button:link,a.button:visited{color:#fff!important}
.button:hover,.button:focus-visible,a.button:hover,a.button:focus-visible{background:#155e63;color:#fff!important;border-color:#155e63}
.button span,.button:hover span,.button:focus-visible span{color:inherit!important}
.site-nav .button,.site-nav .button:link,.site-nav .button:visited{color:#fff!important}
.site-nav .button.active{background:#fa8564;color:#20282b!important;border-color:#fa8564}
.button-light,.button-light:link,.button-light:visited{background:#fff;color:#0b3f46!important;border-color:#fff}
.button-light:hover,.button-light:focus-visible{background:#fbb39e;color:#20282b!important;border-color:#fbb39e}
.button-ghost,.button-ghost:link,.button-ghost:visited{background:transparent;color:#0b3f46!important;border-color:#0b3f46}
.button-ghost:hover,.button-ghost:focus-visible{background:#0b3f46;color:#fff!important}
.creative-partners-card .button,.creative-partners-card .button:link,.creative-partners-card .button:visited,
.final-cta .button,.final-cta .button:link,.final-cta .button:visited{background:#fa8564;color:#20282b!important;border-color:#fa8564}
.creative-partners-card .button:hover,.creative-partners-card .button:focus-visible,
.final-cta .button:hover,.final-cta .button:focus-visible{background:#fff;color:#0b3f46!important;border-color:#fff}
.care-box .button,.care-box .button:link,.care-box .button:visited{background:#0b3f46;color:#fff!important;border-color:#0b3f46}
.care-box .button:hover,.care-box .button:focus-visible{background:#fff;color:#0b3f46!important;border-color:#fff}

/* PROCESS CTA BUTTON FIX V17 */
.process .section-action .button.button-light,
.process .section-action .button.button-light:link,
.process .section-action .button.button-light:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 22px;
  background: #fa8564 !important;
  color: #20282b !important;
  border: 2px solid #fa8564 !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-text-fill-color: #20282b;
  font-weight: 800;
  line-height: 1.2;
  text-shadow: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.process .section-action .button.button-light:hover,
.process .section-action .button.button-light:focus-visible {
  background: #ffffff !important;
  color: #0b3f46 !important;
  border-color: #ffffff !important;
  -webkit-text-fill-color: #0b3f46;
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(0,0,0,.25);
}


/* TIMELINE MOVED TO SERVICES V18 */
/* The Services page owns the detailed process. The homepage no longer repeats it. */
.service-engagement{display:none}
.services-page .process-timeline-section{margin-top:0}
.process-timeline-section .section-action{display:none}

/* =========================================================
   FINAL UNIFIED BUTTON SYSTEM V19
   This block intentionally overrides all earlier button rules.
   ========================================================= */
:where(a.button,button.button,input.button) {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 12px 21px !important;
  border: 2px solid #0b3f46 !important;
  border-radius: 3px !important;
  background-color: #0b3f46 !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  font-style: normal !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  white-space: normal !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(11,63,70,.15) !important;
  transform: none !important;
  transition: background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease !important;
}
:where(a.button,button.button,input.button):link,
:where(a.button,button.button,input.button):visited {
  background-color: #0b3f46 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
:where(a.button,button.button,input.button):hover,
:where(a.button,button.button,input.button):focus-visible {
  background-color: #155e63 !important;
  border-color: #155e63 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(11,63,70,.24) !important;
  transform: translateY(-2px) !important;
  outline: none !important;
}
:where(a.button,button.button,input.button):focus-visible {
  outline: 3px solid #fbb39e !important;
  outline-offset: 3px !important;
}
:where(a.button,button.button,input.button):active {
  transform: translateY(0) !important;
  box-shadow: 0 5px 12px rgba(11,63,70,.18) !important;
}
:where(a.button,button.button,input.button)[disabled],
:where(a.button,button.button,input.button).disabled {
  background-color: #9ba8aa !important;
  border-color: #9ba8aa !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: .7 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
:where(a.button,button.button) *,
:where(a.button,button.button):link *,
:where(a.button,button.button):visited *,
:where(a.button,button.button):hover *,
:where(a.button,button.button):focus-visible * {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Compact navigation CTA */
.site-nav :where(a.button,button.button).button-small {
  min-height: 40px !important;
  padding: 9px 16px !important;
  font-size: .75rem !important;
}
.site-nav :where(a.button,button.button).active {
  background-color: #fa8564 !important;
  border-color: #fa8564 !important;
  color: #20282b !important;
  -webkit-text-fill-color: #20282b !important;
}
.site-nav :where(a.button,button.button).active:hover,
.site-nav :where(a.button,button.button).active:focus-visible {
  background-color: #fbb39e !important;
  border-color: #fbb39e !important;
}

/* Outline variant */
:where(a.button,button.button).button-ghost,
:where(a.button,button.button).button-ghost:link,
:where(a.button,button.button).button-ghost:visited {
  background-color: transparent !important;
  border-color: #0b3f46 !important;
  color: #0b3f46 !important;
  -webkit-text-fill-color: #0b3f46 !important;
  box-shadow: none !important;
}
:where(a.button,button.button).button-ghost:hover,
:where(a.button,button.button).button-ghost:focus-visible {
  background-color: #0b3f46 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Light variant on dark surfaces */
:where(a.button,button.button).button-light,
:where(a.button,button.button).button-light:link,
:where(a.button,button.button).button-light:visited {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #0b3f46 !important;
  -webkit-text-fill-color: #0b3f46 !important;
}
:where(a.button,button.button).button-light:hover,
:where(a.button,button.button).button-light:focus-visible {
  background-color: #fbb39e !important;
  border-color: #fbb39e !important;
  color: #20282b !important;
  -webkit-text-fill-color: #20282b !important;
}

/* Peach CTA buttons */
.creative-partners-card :where(a.button,button.button),
.final-cta :where(a.button,button.button) {
  background-color: #fa8564 !important;
  border-color: #fa8564 !important;
  color: #20282b !important;
  -webkit-text-fill-color: #20282b !important;
}
.creative-partners-card :where(a.button,button.button):hover,
.creative-partners-card :where(a.button,button.button):focus-visible,
.final-cta :where(a.button,button.button):hover,
.final-cta :where(a.button,button.button):focus-visible {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #0b3f46 !important;
  -webkit-text-fill-color: #0b3f46 !important;
}

/* Form buttons stay readable while stretching only where designed */
.contact-form :where(button.button,input.button) {
  width: 100% !important;
}

@media (max-width: 620px) {
  :where(a.button,button.button,input.button) {
    min-height: 44px !important;
    padding: 11px 17px !important;
    font-size: .78rem !important;
  }
  .site-nav :where(a.button,button.button).button-small {
    width: 100% !important;
  }
}


/* =========================================================
   SPONDYLUS RESPONSIVE PROJECT MOCKUP V21
   Clean device composition with live responsive content.
   ========================================================= */
.project-case-study{grid-column:1/-1}
.project-showcase-mockup{position:relative;min-height:610px;padding:36px 28px 28px;background:transparent;overflow:hidden;isolation:isolate;perspective:1400px}
.project-showcase-mockup::before{content:'';position:absolute;width:330px;height:330px;border-radius:50%;left:8%;bottom:6%;background:linear-gradient(145deg,#fbb39e,#fa8564);opacity:.58;z-index:-2}
.project-showcase-mockup::after{content:'';position:absolute;inset:12% 4% 9% 18%;background:radial-gradient(circle at 75% 35%,rgba(21,94,99,.14),transparent 33%),radial-gradient(circle at 30% 78%,rgba(250,133,100,.15),transparent 30%);z-index:-3}
.project-device{position:absolute;background:#111719;border:2px solid #293436;box-shadow:0 28px 60px rgba(11,63,70,.22);transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s ease;overflow:hidden}
.project-live-screen{position:absolute;overflow:hidden;background:#fff}
.project-live-screen iframe{display:block;width:100%;height:100%;border:0;background:#fff;pointer-events:none}
.project-showcase-mockup:hover iframe,.project-showcase-mockup:focus-within iframe{pointer-events:auto}
.project-desktop{width:64%;height:430px;right:5%;top:72px;border-radius:10px;z-index:2}
.project-desktop .project-live-screen{inset:30px 8px 8px}
.project-browser-bar{position:absolute;left:0;right:0;top:0;height:30px;display:flex;align-items:center;gap:6px;padding:0 10px;background:#172225;color:#c9d9da;z-index:2}
.project-browser-bar>span{width:7px;height:7px;border-radius:50%;background:#fa8564}.project-browser-bar>span:nth-child(2){background:#fbb39e}.project-browser-bar>span:nth-child(3){background:#397c79}
.project-browser-bar small{margin-left:8px;font-size:.6rem;letter-spacing:.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-tablet{width:25%;height:390px;left:5%;top:36px;border-radius:14px;z-index:3}
.project-tablet .project-live-screen{inset:15px 8px}
.project-mobile{width:15%;height:300px;left:25%;bottom:28px;border-radius:18px;z-index:4}
.project-mobile .project-live-screen{inset:18px 6px 14px;border-radius:4px}
.project-mobile-speaker{position:absolute;top:8px;left:38%;width:24%;height:3px;border-radius:3px;background:#647174;z-index:2}
.project-frame-fallback{position:absolute;right:12px;bottom:12px;z-index:5;padding:8px 11px;background:#fa8564;color:#20282b;font-size:.68rem;font-weight:800;opacity:0;transform:translateY(5px);transition:.25s}
.project-live-screen:hover .project-frame-fallback{opacity:1;transform:none}
.project-interaction-hint{position:absolute;right:6%;bottom:24px;margin:0;color:#626d70;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.project-showcase-mockup:hover .project-desktop{transform:translate3d(5px,-8px,25px);box-shadow:0 36px 75px rgba(11,63,70,.28)}
.project-showcase-mockup:hover .project-tablet{transform:translate3d(-7px,-12px,45px) rotate(-1.2deg)}
.project-showcase-mockup:hover .project-mobile{transform:translate3d(8px,-15px,65px) rotate(1.5deg)}
.project-case-study .project-meta{border-top:1px solid #d9e0e1;padding-top:25px}
@media(max-width:900px){.project-showcase-mockup{min-height:520px}.project-desktop{width:68%;height:365px}.project-tablet{height:325px}.project-mobile{height:245px}.project-interaction-hint{display:none}}
@media(max-width:620px){.project-showcase-mockup{min-height:400px;padding:18px 0}.project-desktop{width:76%;height:285px;right:0;top:55px}.project-tablet{width:28%;height:250px;left:0;top:25px}.project-mobile{width:18%;height:185px;left:20%;bottom:15px}.project-showcase-mockup::before{width:190px;height:190px}.project-case-study .project-meta{padding-top:18px}}
@media(prefers-reduced-motion:reduce){.project-device{transition:none!important}.project-showcase-mockup:hover .project-device{transform:none!important}}

/* =========================================================
   RESPONSIVE PRICING CARDS V27
   ========================================================= */
.pricing .price-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  align-items:stretch !important;
  gap:18px !important;
  background:transparent !important;
  border:0 !important;
}
.pricing .price-card{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  width:100% !important;
  height:100% !important;
  padding:30px 28px !important;
  border:1px solid #d9e0e1 !important;
  background:#fff !important;
  overflow-wrap:anywhere !important;
}
.pricing .price-card.popular{
  background:#fff5f1 !important;
  border-color:#fa8564 !important;
  transform:none !important;
}
.pricing .price-card h3{
  min-height:2.7em;
  margin-bottom:0 !important;
  font-size:clamp(1.05rem,1.6vw,1.28rem) !important;
  line-height:1.25 !important;
}
.pricing .price{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  gap:8px 16px !important;
  width:100% !important;
  padding:18px 0 !important;
  margin:20px 0 4px !important;
}
.pricing .price span{
  flex:1 1 90px !important;
  font-size:.72rem !important;
  white-space:normal !important;
}
.pricing .price strong{
  flex:0 0 auto !important;
  max-width:100% !important;
  font-size:clamp(1.8rem,3vw,2.45rem) !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.pricing .price-card ul{
  flex:1 1 auto !important;
  width:100% !important;
  margin:12px 0 26px !important;
  padding:0 !important;
}
.pricing .price-card li{
  overflow-wrap:anywhere !important;
}
.pricing .price-card>.button{
  width:100% !important;
  margin-top:auto !important;
}
.pricing .popular-label{
  top:0 !important;
  right:0 !important;
  max-width:55% !important;
  padding:6px 10px !important;
  font-size:.62rem !important;
  line-height:1.2 !important;
  text-align:center !important;
  white-space:normal !important;
}
.pricing-note{
  max-width:900px !important;
  margin:28px auto 0 !important;
  padding:0 16px !important;
  text-align:center !important;
}

@media (max-width: 980px){
  .pricing .price-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .pricing .price-card:last-child{
    grid-column:1 / -1 !important;
    width:min(100%,560px) !important;
    justify-self:center !important;
  }
}

@media (max-width: 680px){
  .pricing .price-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
  }
  .pricing .price-card,
  .pricing .price-card:last-child{
    grid-column:auto !important;
    width:100% !important;
    max-width:none !important;
    padding:25px 21px !important;
  }
  .pricing .price-card h3{
    min-height:0 !important;
  }
  .pricing .price{
    align-items:center !important;
  }
  .pricing .price strong{
    font-size:2rem !important;
  }
}

@media (max-width: 390px){
  .pricing .price{
    display:block !important;
  }
  .pricing .price span,
  .pricing .price strong{
    display:block !important;
  }
  .pricing .price strong{
    margin-top:7px !important;
  }
  .pricing .popular-label{
    position:static !important;
    display:inline-block !important;
    max-width:100% !important;
    margin:0 0 16px auto !important;
  }
}


/* =========================================================
   RESPONSIVE MAINTENANCE & WEBSITE CARE V28
   ========================================================= */
.care{background:#fff;padding:88px 0}
.care-heading{max-width:720px;margin:0 auto 38px;text-align:center}
.care-heading .section-number{color:#155e63}
.care-heading>p:last-child{max-width:620px;margin:0 auto;color:#626d70}
.care-pricing-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;max-width:940px;margin:0 auto;background:transparent!important}
.care-plan-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:34px;background:#0b3f46;color:#fff;border:1px solid #0b3f46;overflow:hidden}
.care-plan-card.featured{background:#155e63;border-color:#fa8564}
.care-plan-top{padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.18)}
.care-plan-name{display:block;margin-bottom:15px;color:#fbb39e;font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.care-plan-card strong{display:block;margin-bottom:12px;color:#fff;font-size:clamp(2rem,4vw,3rem);line-height:1;letter-spacing:-.05em}
.care-plan-card strong small{font-size:.72rem;font-weight:600;letter-spacing:0;color:#c9d9da}
.care-plan-card p{color:#c9d9da;font-size:.88rem;line-height:1.55}
.care-plan-card ul{flex:1 1 auto;list-style:none;margin:22px 0 28px;padding:0}
.care-plan-card li{position:relative;padding:10px 0 10px 21px;border-bottom:1px solid rgba(255,255,255,.13);color:#e4eeee;font-size:.84rem;line-height:1.4;overflow-wrap:anywhere}
.care-plan-card li::before{content:'✓';position:absolute;left:0;color:#fa8564;font-weight:900}
.care-plan-card>.button{width:100%!important;margin-top:auto!important}
.care-plan-card.featured>.button{background:#fa8564!important;border-color:#fa8564!important;color:#20282b!important;-webkit-text-fill-color:#20282b!important}
.care-plan-card.featured>.button:hover,.care-plan-card.featured>.button:focus-visible{background:#fff!important;border-color:#fff!important;color:#0b3f46!important;-webkit-text-fill-color:#0b3f46!important}
.care-badge{position:absolute;right:0;top:0;padding:7px 11px;background:#fa8564;color:#20282b;font-size:.61rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.care-note{max-width:850px;margin:24px auto 0;text-align:center;color:#626d70;font-size:.76rem;line-height:1.55}
@media(max-width:760px){.care{padding:66px 0}.care-pricing-grid{grid-template-columns:minmax(0,1fr)!important;max-width:560px}.care-plan-card{padding:29px 25px}}
@media(max-width:430px){.care{padding:54px 0}.care-heading{text-align:left;margin-bottom:28px}.care-heading>p:last-child{margin:0}.care-plan-card{padding:25px 20px}.care-badge{position:static;display:inline-block;align-self:flex-start;margin:-4px 0 18px}.care-plan-card strong{font-size:2.25rem}}

/* =========================================================
   WEBSITE CARE CARD CONTRAST FIX V29
   Explicitly separates the light and featured care-card themes.
   ========================================================= */
.care-pricing-grid .care-plan-card:not(.featured) {
  background: #ffffff !important;
  border: 1px solid #d9e0e1 !important;
  color: #20282b !important;
  box-shadow: 0 14px 34px rgba(11, 63, 70, .09) !important;
}
.care-pricing-grid .care-plan-card:not(.featured) .care-plan-top {
  border-bottom-color: #d9e0e1 !important;
}
.care-pricing-grid .care-plan-card:not(.featured) .care-plan-name {
  color: #db6748 !important;
  -webkit-text-fill-color: #db6748 !important;
}
.care-pricing-grid .care-plan-card:not(.featured) strong,
.care-pricing-grid .care-plan-card:not(.featured) strong small,
.care-pricing-grid .care-plan-card:not(.featured) h3 {
  color: #0b3f46 !important;
  -webkit-text-fill-color: #0b3f46 !important;
  opacity: 1 !important;
}
.care-pricing-grid .care-plan-card:not(.featured) p {
  color: #626d70 !important;
  -webkit-text-fill-color: #626d70 !important;
  opacity: 1 !important;
}
.care-pricing-grid .care-plan-card:not(.featured) li {
  color: #394548 !important;
  -webkit-text-fill-color: #394548 !important;
  border-bottom-color: #e3e8e8 !important;
  opacity: 1 !important;
}
.care-pricing-grid .care-plan-card:not(.featured) li::before {
  color: #db6748 !important;
  -webkit-text-fill-color: #db6748 !important;
}
.care-pricing-grid .care-plan-card:not(.featured) > .button,
.care-pricing-grid .care-plan-card:not(.featured) > .button:link,
.care-pricing-grid .care-plan-card:not(.featured) > .button:visited {
  background: #0b3f46 !important;
  border-color: #0b3f46 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.care-pricing-grid .care-plan-card:not(.featured) > .button:hover,
.care-pricing-grid .care-plan-card:not(.featured) > .button:focus-visible {
  background: #155e63 !important;
  border-color: #155e63 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.care-pricing-grid .care-plan-card.featured {
  background: #155e63 !important;
  border-color: #fa8564 !important;
  color: #ffffff !important;
  box-shadow: 0 18px 40px rgba(11, 63, 70, .20) !important;
}
.care-pricing-grid .care-plan-card.featured .care-plan-name {
  color: #fbb39e !important;
  -webkit-text-fill-color: #fbb39e !important;
}
.care-pricing-grid .care-plan-card.featured strong,
.care-pricing-grid .care-plan-card.featured h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}
.care-pricing-grid .care-plan-card.featured strong small,
.care-pricing-grid .care-plan-card.featured p {
  color: #d8e6e7 !important;
  -webkit-text-fill-color: #d8e6e7 !important;
  opacity: 1 !important;
}
.care-pricing-grid .care-plan-card.featured li {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}
.care-pricing-grid .care-plan-card.featured li::before {
  color: #fa8564 !important;
  -webkit-text-fill-color: #fa8564 !important;
}

/* Keep both cards aligned and prevent text from being clipped. */
.care-pricing-grid .care-plan-card {
  min-height: 100% !important;
  overflow: visible !important;
}
.care-pricing-grid .care-plan-card .care-plan-top,
.care-pricing-grid .care-plan-card ul,
.care-pricing-grid .care-plan-card li {
  visibility: visible !important;
  opacity: 1 !important;
}

/* =========================================================
   INTERACTIVE PRICING CARDS V30
   Hover, focus, and touch-safe responsive behavior
   ========================================================= */
.pricing .price-grid,
.care-pricing-grid {
  perspective: 1200px;
}

.pricing .price-card,
.care-pricing-grid .care-plan-card {
  transform: translateY(0) scale(1);
  transform-origin: center;
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    box-shadow .32s ease,
    border-color .32s ease,
    background-color .32s ease,
    opacity .32s ease !important;
  will-change: transform;
}

/* Main website pricing cards */
@media (hover:hover) and (pointer:fine) {
  .pricing .price-grid:hover .price-card:not(:hover),
  .pricing .price-grid:focus-within .price-card:not(:focus-within) {
    opacity: .76;
    transform: scale(.985);
  }

  .pricing .price-card:hover,
  .pricing .price-card:focus-within {
    z-index: 3;
    opacity: 1;
    transform: translateY(-10px) scale(1.015) !important;
    border-color: #fa8564 !important;
    box-shadow: 0 24px 52px rgba(11,63,70,.18) !important;
  }

  .pricing .price-card:hover .price strong,
  .pricing .price-card:focus-within .price strong {
    color: #db6748 !important;
    -webkit-text-fill-color: #db6748 !important;
  }

  .pricing .price-card:hover > .button,
  .pricing .price-card:focus-within > .button {
    transform: translateY(-2px) !important;
  }

  /* Website care cards */
  .care-pricing-grid:hover .care-plan-card:not(:hover),
  .care-pricing-grid:focus-within .care-plan-card:not(:focus-within) {
    opacity: .78;
    transform: scale(.985);
  }

  .care-pricing-grid .care-plan-card:hover,
  .care-pricing-grid .care-plan-card:focus-within {
    z-index: 3;
    opacity: 1;
    transform: translateY(-10px) scale(1.015) !important;
    border-color: #fa8564 !important;
    box-shadow: 0 26px 56px rgba(11,63,70,.25) !important;
  }

  .care-pricing-grid .care-plan-card:hover .care-plan-name,
  .care-pricing-grid .care-plan-card:focus-within .care-plan-name {
    letter-spacing: .15em;
  }

  .care-pricing-grid .care-plan-card:hover > .button,
  .care-pricing-grid .care-plan-card:focus-within > .button {
    transform: translateY(-2px) !important;
  }
}

/* Keyboard users receive the same emphasis without relying on hover. */
.pricing .price-card:focus-within,
.care-pricing-grid .care-plan-card:focus-within {
  outline: 3px solid rgba(250,133,100,.42);
  outline-offset: 4px;
}

/* Touch devices use a restrained pressed state and no sticky hover effect. */
@media (hover:none), (pointer:coarse) {
  .pricing .price-card,
  .care-pricing-grid .care-plan-card {
    transform: none !important;
    opacity: 1 !important;
  }

  .pricing .price-card:active,
  .care-pricing-grid .care-plan-card:active {
    transform: scale(.99) !important;
    border-color: #fa8564 !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pricing .price-card,
  .care-pricing-grid .care-plan-card {
    transition: none !important;
    transform: none !important;
  }
}


/* STATIC EDITORIAL PROJECT MOCKUP V31 */
.template-project-mockup{position:relative;min-height:650px;background:transparent;overflow:hidden;isolation:isolate}
.template-project-mockup::before{content:'';position:absolute;inset:6% 0 4%;background:linear-gradient(135deg,rgba(251,179,158,.32),rgba(250,133,100,.13));z-index:-2}
.template-page,.template-monitor{position:absolute;transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s ease}
.template-page{overflow:hidden;background:#fff;box-shadow:0 18px 36px rgba(11,63,70,.2)}
.template-page-left{left:4%;bottom:-8%;width:34%;height:67%;transform:rotate(-.5deg)}
.template-page-center{left:39%;top:-7%;width:29%;height:92%}
.template-scroll{position:absolute;inset:0;overflow:hidden;background:#fff}
.template-scroll img{display:block;width:100%;height:auto;transform:translateY(0);transition:transform 5.8s cubic-bezier(.18,.72,.2,1);will-change:transform}
.template-monitor{right:3%;top:26%;width:36%;height:48%;z-index:3}
.monitor-screen{position:absolute;inset:0 0 14%;padding:4.5% 4.2% 8%;border-radius:10px;background:linear-gradient(135deg,#3a3f42,#111719 40%);box-shadow:0 22px 44px rgba(11,63,70,.25)}
.monitor-screen .template-scroll{inset:7% 5% 12%}
.monitor-neck{position:absolute;left:43%;bottom:4%;width:14%;height:13%;background:linear-gradient(90deg,#888,#d7d9da 48%,#777);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.monitor-foot{position:absolute;left:28%;bottom:0;width:44%;height:5%;background:linear-gradient(#d9dbdc,#777);border-radius:50% 50% 15% 15%}
.template-title{position:absolute;right:8%;top:9%;text-align:center;color:#20282b}.template-title strong{display:block;font-size:clamp(1.25rem,2.5vw,2rem)}.template-title span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.14em;color:#155e63}
.template-hint{position:absolute;right:7%;bottom:7%;margin:0;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#626d70}
@media(hover:hover) and (pointer:fine){.template-project-mockup:hover .template-scroll img{transform:translateY(calc(-100% + 100% / 3.8))}.template-project-mockup:hover .template-page-left{transform:translateY(-8px) rotate(-1deg)}.template-project-mockup:hover .template-page-center{transform:translateY(8px)}.template-project-mockup:hover .template-monitor{transform:translateY(-10px) scale(1.015)}}
@media(max-width:900px){.template-project-mockup{min-height:560px}.template-page-left{width:36%}.template-page-center{left:38%;width:31%}.template-monitor{width:39%;right:0}.template-title{right:5%}}
@media(max-width:620px){.template-project-mockup{min-height:420px}.template-page-left{left:0;width:39%;height:60%}.template-page-center{left:36%;width:34%;height:84%}.template-monitor{right:-4%;top:32%;width:43%;height:43%}.template-title{top:6%;right:1%}.template-title strong{font-size:1rem}.template-title span,.template-hint{display:none}}
@media(prefers-reduced-motion:reduce){.template-scroll img,.template-page,.template-monitor{transition:none!important}.template-project-mockup:hover .template-scroll img{transform:none!important}}
/* SOURCE-FAITHFUL SPONDYLUS MOCKUP V32 */
.template-scroll img{transition-duration:7.5s!important}
@media(hover:hover) and (pointer:fine){.template-project-mockup:hover .template-scroll img{transform:translateY(calc(-100% + 24%))!important}}


/* V33-V35 retained Spondylus screenshot behavior */
.template-scroll img{display:block!important;width:100%!important;height:auto!important;transform:translateY(0)!important;transition:transform 50s linear!important;will-change:transform}
.template-page-center{container-type:size}
@media(hover:hover) and (pointer:fine){
 .template-page-center .template-scroll img{transform:translateY(calc(-100% + 100cqh))!important}
 .template-project-mockup:hover .template-page-center .template-scroll img{transform:translateY(0)!important}
 .template-page-left,.monitor-screen .template-scroll{container-type:size}
 .template-project-mockup:hover .template-page-left .template-scroll img,
 .template-project-mockup:hover .template-monitor .template-scroll img{transform:translateY(calc(-100% + 100cqh))!important}
}

/* V36: supplied hero mockup image, background retained */
.hero-image-mockup{position:relative;min-height:500px;display:flex;align-items:center;justify-content:center;overflow:visible}
.hero-image-mockup>img{display:block;width:100%;height:auto;max-height:540px;object-fit:contain;border:0!important;background:transparent!important;filter:none!important}
.hero-image-mockup .mockup-hint{right:8%;bottom:2%;background:rgba(255,255,255,.72);padding:5px 8px}
@media(max-width:900px){.hero-image-mockup{min-height:420px}.hero-image-mockup>img{max-height:460px}}
@media(max-width:620px){.hero-image-mockup{min-height:300px;margin-top:20px}.hero-image-mockup>img{max-height:340px}.hero-image-mockup .mockup-hint{display:none}}


/* V37: larger homepage hero mockup */
.hero-grid {
  grid-template-columns: minmax(0,.88fr) minmax(560px,1.12fr) !important;
  gap: 24px !important;
}
.hero-image-mockup {
  width: 128% !important;
  max-width: none !important;
  min-height: 570px !important;
  margin-left: -8% !important;
  margin-right: -20% !important;
}
.hero-image-mockup > img {
  width: 100% !important;
  max-width: none !important;
  max-height: 650px !important;
}
@media (max-width:1100px) {
  .hero-grid {
    grid-template-columns: minmax(0,.95fr) minmax(470px,1.05fr) !important;
  }
  .hero-image-mockup {
    width: 118% !important;
    min-height: 500px !important;
    margin-left: -5% !important;
    margin-right: -13% !important;
  }
  .hero-image-mockup > img { max-height: 570px !important; }
}
@media (max-width:900px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 34px !important; }
  .hero-image-mockup {
    width: min(112%,820px) !important;
    min-height: 430px !important;
    margin: 0 -6% !important;
    justify-self: center !important;
  }
  .hero-image-mockup > img { max-height: 520px !important; }
}
@media (max-width:620px) {
  .hero-image-mockup {
    width: 112% !important;
    min-height: 320px !important;
    margin: 12px -6% 0 !important;
  }
  .hero-image-mockup > img { max-height: 390px !important; }
}


/* V38: transparent WebP hero asset and standardized image naming */
.hero-image-mockup {
  width: 138% !important;
  min-height: 590px !important;
  margin-left: -10% !important;
  margin-right: -28% !important;
  background: transparent !important;
}
.hero-image-mockup > img {
  width: 100% !important;
  max-width: none !important;
  max-height: 690px !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  filter: none !important;
}
@media(max-width:1100px){
 .hero-image-mockup{width:126% !important;min-height:520px !important;margin-left:-7% !important;margin-right:-19% !important}
 .hero-image-mockup>img{max-height:610px !important}
}
@media(max-width:900px){
 .hero-image-mockup{width:min(118%,840px) !important;min-height:440px !important;margin:0 -9% !important}
 .hero-image-mockup>img{max-height:540px !important}
}
@media(max-width:620px){
 .hero-image-mockup{width:116% !important;min-height:320px !important;margin:12px -8% 0 !important}
 .hero-image-mockup>img{max-height:400px !important}
}


/* V39: remove hero preview label and raise transparent hero artwork */
.hero-image-mockup {
  transform: translateY(-72px) !important;
  margin-bottom: -72px !important;
}
.hero-image-mockup .mockup-hint {
  display: none !important;
}
@media (max-width:1100px) {
  .hero-image-mockup {
    transform: translateY(-56px) !important;
    margin-bottom: -56px !important;
  }
}
@media (max-width:900px) {
  .hero-image-mockup {
    transform: translateY(-38px) !important;
    margin-bottom: -38px !important;
  }
}
@media (max-width:620px) {
  .hero-image-mockup {
    transform: translateY(-24px) !important;
    margin-bottom: -24px !important;
  }
}


/* V40: Worldtech responsive content inside the transparent hero mockup */
.hero-mockup {
  position: relative !important;
  transform: translateY(-118px) !important;
  margin-bottom: -118px !important;
  aspect-ratio: 2000 / 1414;
  min-height: 0 !important;
}
.hero-mockup > .hero-device-frame {
  position: relative;
  z-index: 3;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  pointer-events: none;
}
.hero-mockup-screen {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  background: #fff;
}
.hero-mockup-screen img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(0);
  transition: transform 50s linear;
  will-change: transform;
}
.hero-mockup-screen-laptop {
  left: 38.3%;
  top: 29.7%;
  width: 50.4%;
  height: 43.7%;
}
.hero-mockup-screen-tablet {
  left: 15.2%;
  top: 20.3%;
  width: 28.4%;
  height: 54.8%;
}
.hero-mockup-screen-phone {
  left: 8.7%;
  top: 50.8%;
  width: 11.7%;
  height: 27.4%;
}
@media (hover:hover) and (pointer:fine) {
  .hero-mockup:hover .hero-mockup-screen img {
    transform: translateY(calc(-100% + 100cqh));
  }
  .hero-mockup-screen {
    container-type: size;
  }
}
@media (max-width:1100px) {
  .hero-mockup {
    transform: translateY(-92px) !important;
    margin-bottom: -92px !important;
  }
}
@media (max-width:900px) {
  .hero-mockup {
    transform: translateY(-62px) !important;
    margin-bottom: -62px !important;
  }
}
@media (max-width:620px) {
  .hero-mockup {
    transform: translateY(-38px) !important;
    margin-bottom: -38px !important;
  }
}
@media (prefers-reduced-motion:reduce) {
  .hero-mockup-screen img {
    transition: none !important;
    transform: translateY(0) !important;
  }
}


/* V41: visible and reliable Worldtech hero auto-scroll */
.hero-mockup > .hero-device-frame {
  z-index: 2 !important;
}
.hero-mockup-screen {
  z-index: 4 !important;
  pointer-events: none;
  container-type: size;
}
.hero-mockup-screen img {
  transform: translate3d(0,0,0) !important;
  transition: none !important;
}
.hero-mockup-screen.is-scrolling img {
  transform: translate3d(0,calc(-1px * var(--worldtech-scroll-distance,0)),0) !important;
  transition: transform 50s linear !important;
}
.hero-mockup-screen.is-returning img {
  transform: translate3d(0,0,0) !important;
  transition: transform 2.4s ease-out !important;
}

/* Keep screenshots inside the visible display glass, above white placeholders. */
.hero-mockup-screen-laptop {
  left: 40.05% !important;
  top: 31.15% !important;
  width: 47.05% !important;
  height: 39.7% !important;
}
.hero-mockup-screen-tablet {
  left: 16.15% !important;
  top: 21.65% !important;
  width: 26.15% !important;
  height: 50.6% !important;
}
.hero-mockup-screen-phone {
  left: 9.35% !important;
  top: 52.5% !important;
  width: 10.35% !important;
  height: 23.5% !important;
}

/* Disable the earlier CSS-only hover transform. */
@media (hover:hover) and (pointer:fine) {
  .hero-mockup:hover .hero-mockup-screen img {
    transform: translate3d(0,0,0) !important;
  }
  .hero-mockup:hover .hero-mockup-screen.is-scrolling img {
    transform: translate3d(0,calc(-1px * var(--worldtech-scroll-distance,0)),0) !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .hero-mockup-screen.is-scrolling img,
  .hero-mockup-screen.is-returning img {
    transform: translate3d(0,0,0) !important;
    transition: none !important;
  }
}


/* V44: PSD-extracted devices and green leaves with exact smart-object screen bounds */
.hero-mockup {
  aspect-ratio: 3024 / 1419 !important;
  transform: translateY(-124px) !important;
  margin-bottom: -124px !important;
}
.hero-mockup > .hero-device-frame {
  z-index: 5 !important;
  width:100% !important;
  height:auto !important;
}
.hero-mockup-screen {
  z-index: 3 !important;
  overflow:hidden !important;
  background:#fff !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.hero-mockup-screen::after { content:none !important; display:none !important; }
/* PSD screen layer 20: 1440x900 at (2145,1180), relative to crop origin (895,820). */
.hero-mockup-screen-laptop {
  left:41.336% !important;
  top:25.370% !important;
  width:47.619% !important;
  height:63.425% !important;
}
/* PSD screen layer 14: 778x1038 at (1517,970). */
.hero-mockup-screen-tablet {
  left:20.569% !important;
  top:10.571% !important;
  width:25.728% !important;
  height:73.150% !important;
}
/* PSD screen layer 23: 300x534 at (1336,1593). */
.hero-mockup-screen-phone {
  left:14.583% !important;
  top:54.475% !important;
  width:9.921% !important;
  height:37.632% !important;
}
.hero-mockup-screen img { width:100% !important; height:auto !important; max-width:none !important; }
@media(max-width:1100px){.hero-mockup{transform:translateY(-96px) !important;margin-bottom:-96px !important}}
@media(max-width:900px){.hero-mockup{transform:translateY(-64px) !important;margin-bottom:-64px !important}}
@media(max-width:620px){.hero-mockup{transform:translateY(-38px) !important;margin-bottom:-38px !important}}


/* V45: transparent PSD screen openings with scrolling pages behind the bezels */
.hero-mockup > .hero-device-frame {
  position: relative !important;
  z-index: 5 !important;
  pointer-events: none !important;
}
.hero-mockup-screen {
  z-index: 4 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
}
.hero-mockup-screen::after {
  content: none !important;
  display: none !important;
}

/* Exact transparent openings in the 3081 x 1610 PSD-derived frame. */
.hero-mockup-screen-laptop {
  left: 40.6362% !important;
  top: 22.4845% !important;
  width: 46.5758% !important;
  height: 55.5901% !important;
  border-radius: 0 !important;
}
.hero-mockup-screen-tablet {
  left: 20.2532% !important;
  top: 9.4410% !important;
  width: 25.0893% !important;
  height: 64.1615% !important;
  border-radius: 0 !important;
}
.hero-mockup-screen-phone {
  left: 14.3784% !important;
  top: 48.1366% !important;
  width: 9.5748% !important;
  height: 32.8571% !important;
  border-radius: 8px !important;
}
.hero-mockup-screen img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}


/* V48: true layered PSD devices, no improvised composite bezels */
.hero-layered-mockup{position:relative!important;width:110%!important;max-width:none!important;aspect-ratio:3081/1610;transform:translateY(-124px)!important;margin-left:-10%!important;margin-right:-28%!important;margin-bottom:-124px!important}
.hero-mockup-decor{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;z-index:1!important;border:0!important;background:transparent!important;pointer-events:none}
.hero-mockup-device{position:absolute}.hero-mockup-device-frame{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:fill!important;z-index:3!important;border:0!important;background:transparent!important;pointer-events:none}
.hero-mockup-device .hero-mockup-screen{position:absolute!important;overflow:hidden!important;background:#fff!important;z-index:2!important;border:0!important;box-shadow:none!important}
.hero-mockup-device .hero-mockup-screen img{display:block!important;width:100%!important;min-width:100%!important;max-width:none!important;height:auto!important;transform:translate3d(0,0,0);transition:none}
.hero-mockup-device .hero-mockup-screen.is-scrolling img{transform:translate3d(0,calc(-1px * var(--worldtech-scroll-distance,0)),0)!important;transition:transform 50s linear!important}
.hero-mockup-device .hero-mockup-screen.is-returning img{transform:translate3d(0,0,0)!important;transition:transform 2.4s ease-out!important}
.hero-mockup-device-tablet{left:17.4%;top:4.2%;width:31%;height:79.6%;z-index:2}.hero-mockup-device-tablet .hero-mockup-screen{left:9.34%;top:6.71%;width:81.11%;height:80.64%}
.hero-mockup-device-laptop{left:28.4%;top:17.4%;width:71.6%;height:82.6%;z-index:4}.hero-mockup-device-laptop .hero-mockup-screen{left:17.01%;top:6.24%;width:65.15%;height:67.24%}
.hero-mockup-device-phone{left:10.6%;top:45.6%;width:14.35%;height:47.08%;z-index:5}.hero-mockup-device-phone .hero-mockup-screen{left:15.16%;top:11.87%;width:66.74%;height:69.79%;border-radius:8px!important}
@media(max-width:1100px){.hero-layered-mockup{transform:translateY(-96px)!important;margin-bottom:-96px!important}}@media(max-width:900px){.hero-layered-mockup{width:100%!important;transform:translateY(-64px)!important;margin:0 -9% -64px!important}}@media(max-width:620px){.hero-layered-mockup{width:100%!important;transform:translateY(-38px)!important;margin:12px -8% -38px!important}}@media(prefers-reduced-motion:reduce){.hero-mockup-device .hero-mockup-screen img{transition:none!important;transform:none!important}}


/* V49: aligned PSD decor, taller phone display, and automatic continuous scrolling */
.hero-mockup-decor{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  object-position:0 0!important;
}
/* Correct phone group to its exact PSD location on the 3081 x 1610 canvas. */
.hero-mockup-device-phone{
  left:12.2363%!important;
  top:42.6087%!important;
  width:14.3459%!important;
  height:47.0807%!important;
}
/* Use more of the original phone display, while retaining speaker and home-button areas. */
.hero-mockup-device-phone .hero-mockup-screen{
  left:14.48%!important;
  top:10.55%!important;
  width:67.87%!important;
  height:73.22%!important;
  border-radius:7px!important;
}
/* Scroll automatically. Each leg takes exactly 50 seconds. */
.hero-mockup-device .hero-mockup-screen img{
  animation:worldtech-auto-scroll 100s linear infinite alternate!important;
  animation-play-state:running!important;
  transition:none!important;
}
@keyframes worldtech-auto-scroll{
  0%,3%{transform:translate3d(0,0,0)}
  50%,53%{transform:translate3d(0,calc(-1px * var(--worldtech-scroll-distance,0)),0)}
  100%{transform:translate3d(0,0,0)}
}
/* Older hover classes must not stop or replace automatic movement. */
.hero-mockup-device .hero-mockup-screen.is-scrolling img,
.hero-mockup-device .hero-mockup-screen.is-returning img{
  animation:worldtech-auto-scroll 100s linear infinite alternate!important;
  transition:none!important;
}
@media(prefers-reduced-motion:reduce){
  .hero-mockup-device .hero-mockup-screen img,
  .hero-mockup-device .hero-mockup-screen.is-scrolling img,
  .hero-mockup-device .hero-mockup-screen.is-returning img{
    animation:none!important;
    transform:none!important;
  }
}


/* V50: JavaScript owns Worldtech autoplay; WebP assets remain purely visual. */
.hero-mockup-device .hero-mockup-screen img,
.hero-mockup-device .hero-mockup-screen.is-scrolling img,
.hero-mockup-device .hero-mockup-screen.is-returning img {
  animation: none !important;
  transition: none !important;
  transform: translate3d(0,0,0);
  will-change: transform;
}


/* V51: remove laptop left gap and let JavaScript control every transform */
.hero-mockup-device-laptop .hero-mockup-screen{
  left:16.70%!important;
  top:6.24%!important;
  width:65.65%!important;
  height:67.24%!important;
}
.hero-mockup-device-tablet .hero-mockup-screen,
.hero-mockup-device-laptop .hero-mockup-screen,
.hero-mockup-device-phone .hero-mockup-screen{
  container-type:normal!important;
}
.hero-mockup-device .hero-mockup-screen img,
.hero-mockup-device .hero-mockup-screen.is-scrolling img,
.hero-mockup-device .hero-mockup-screen.is-returning img{
  animation:none!important;
  transition:none!important;
  transform:translate3d(0,0,0);
}

/* V52: supplied transparent laptop-and-phone PNG for concept project cards */
.project-auto-mockup{position:relative!important;aspect-ratio:2000/1414;padding:0!important;overflow:visible!important;background:transparent!important;border:0!important;isolation:isolate}
.project-auto-mockup>span{z-index:8!important;top:12px!important;left:12px!important}
.project-mockup-frame{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:fill!important;z-index:5!important;background:transparent!important;border:0!important;pointer-events:none;transform:none!important}
.project-mockup-screen{position:absolute;overflow:hidden;background:#fff;z-index:3}
.project-mockup-laptop{left:18.35%;top:17.11%;width:59.95%;height:52.76%}
.project-mockup-phone{left:73.60%;top:52.12%;width:13.55%;height:40.38%;border-radius:10px}
.project-mockup-screen img{display:block!important;max-width:none!important;height:auto!important;transition:none!important;will-change:transform}
.project-mockup-laptop img{width:125%!important;margin-left:-12.5%}.project-mockup-phone img{width:390%!important;margin-left:-145%}
.project:hover .project-auto-mockup img{transform:none}@media(max-width:620px){.project-auto-mockup{width:108%;margin-left:-4%}.project-mockup-phone{border-radius:6px}}@media(prefers-reduced-motion:reduce){.project-mockup-screen img{transform:none!important}}


/* V53: close laptop right-edge gap and extend phone content behind the notch */
.project-mockup-laptop{
  left:18.25%!important;
  top:17.11%!important;
  width:60.25%!important;
  height:52.76%!important;
}
.project-mockup-phone{
  left:73.55%!important;
  top:49.85%!important;
  width:13.70%!important;
  height:42.85%!important;
  border-radius:10px!important;
}
/* The phone artwork fills the complete display and runs underneath the foreground notch. */
.project-mockup-phone img{
  width:390%!important;
  min-width:390%!important;
  margin-left:-145%!important;
  margin-top:0!important;
}
.project-mockup-frame{
  z-index:6!important;
}
.project-mockup-screen{
  z-index:3!important;
}
@media(max-width:620px){
  .project-mockup-phone{border-radius:6px!important}
}


/* V55: temporary Spondylus project card, original section layout retained */
.project-real-screens .project-mockup-screen img{
  display:block!important;
  width:100%!important;
  min-width:100%!important;
  max-width:none!important;
  height:auto!important;
  margin:0!important;
  object-fit:initial!important;
}

html,
body {
  overflow-x: clip;
}

.hero-layered-mockup {
  overflow: hidden !important;
}

.hero-copy h1 .hero-accent {
  color: var(--coral);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hero-copy .hero-actions {
  margin-top: auto;
}

@media (min-width: 901px) {
  .hero-copy .hero-actions {
    transform: translateY(25px);
  }
}

.hero-grid > .hero-proof {
  grid-column: 2;
  margin-top: -140px;
}

@media (max-width: 900px) {
  .hero-copy {
    order: 1;
  }

  .hero-visual {
    order: 2;
  }

  .hero-grid > .hero-proof {
    order: 3;
    grid-column: 1;
    margin-top: 0;
  }
}




/* V69 contact form honeypot */
.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;border:0!important}