/**
 * Exact Front-End Replacement — full design-system stylesheet, extracted
 * verbatim from the approved localhost design preview's assets/style.css
 * (v=20260823-18) on 2026-08-23. This REPLACES the earlier partial port —
 * the design source was substantially expanded (dedicated internal page
 * hero/section styles, Google Business Profile-specific classes, and
 * "vision-build" / "specialty-*" section systems used across the internal
 * pages) after the first build pass, so this file is a byte-for-byte copy
 * of the live design source rather than a hand-assembled subset.
 * Scoped to the public marketing layout only — see layouts/public.php.
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--navy:#092631;--navy2:#123845;--navy3:#1b4350;--gold:#eac78a;--paper:#f6f5f1;--white:#fff;--ink:#092631;--muted:#607076;--line:#d9ddda;--radius:22px;--shell:min(1160px,calc(100% - 48px))}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--white);font-family:'DM Sans',sans-serif}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Manrope',sans-serif;letter-spacing:-.045em}h1{font-size:clamp(54px,6.2vw,92px);line-height:.98;margin-bottom:30px}h2{font-size:clamp(38px,4.7vw,68px);line-height:1.03;margin-bottom:24px}h3{font-size:22px;line-height:1.1}.shell{width:var(--shell);margin-inline:auto}.section{padding:112px 0}.section-sm{padding:80px 0}.eyebrow{margin-bottom:24px;color:#ad7b29;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.eyebrow.light{color:var(--gold)}.lead{font-size:clamp(18px,2vw,24px);line-height:1.55}.muted{color:var(--muted);line-height:1.75}.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:50px;padding:0 24px;border:0;border-radius:999px;font-size:12px;font-weight:800;transition:.2s}.btn:hover{transform:translateY(-2px)}.btn-gold{background:var(--gold);color:var(--navy)}.btn-light{background:#fff;color:var(--navy)}.btn-dark{background:var(--navy);color:#fff}.btn-outline{border:1px solid rgba(255,255,255,.4);color:#fff}.site-header{position:absolute;z-index:20;top:0;left:50%;width:var(--shell);height:92px;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:28px;color:#fff}.logo{width:162px}.logo img{width:100%;height:58px;object-fit:contain;filter:brightness(0) invert(1)}.desktop-nav{display:flex;align-items:center;gap:8px;padding:7px;background:rgba(24,57,69,.68);border-radius:999px}.desktop-nav a{padding:11px 18px;border-radius:999px;font-size:12px;font-weight:600}.desktop-nav a:hover,.desktop-nav a[aria-current=page]{background:rgba(255,255,255,.11);color:var(--gold)}.header-cta{white-space:nowrap}.menu-button,.mobile-nav{display:none}.hero{position:relative;min-height:780px;padding:175px 0 95px;overflow:hidden;background:linear-gradient(180deg,var(--navy) 0%,#102f39 70%,#b7c4c1 100%);color:#fff}.hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:76px;align-items:center}.hero-copy{position:relative;z-index:2}.hero-copy>p:not(.eyebrow){max-width:570px;color:rgba(255,255,255,.76);font-size:17px;line-height:1.65}.hero-actions{display:flex;gap:14px;align-items:center;margin-top:32px}.hero-visual{position:relative;min-height:530px}.hero-visual>img{position:absolute;inset:35px 0 0;width:100%;height:470px;object-fit:cover;border-radius:24px}.float-card{position:absolute;z-index:2;min-width:185px;padding:23px;background:rgba(255,255,255,.95);border-radius:18px;color:var(--navy);box-shadow:0 18px 50px rgba(0,0,0,.13)}.float-card strong,.float-card small{display:block}.float-card strong{font-family:'Manrope';margin-top:8px}.float-one{top:0;right:-20px}.float-two{left:-30px;bottom:0;background:var(--gold)}.service-strip{position:relative;margin-top:-38px;z-index:3}.strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px;background:var(--navy2);border-radius:22px}.strip-card{min-height:180px;padding:30px;border-radius:15px;background:rgba(255,255,255,.035);color:#fff}.strip-card:hover{background:rgba(255,255,255,.07)}.icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--navy);font-weight:800}.strip-card h3{margin:22px 0 8px}.strip-card p{font-size:13px;color:#c9d2d3}.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.image-frame{position:relative}.image-frame img{width:100%;height:570px;object-fit:cover;border-radius:22px}.image-frame:after{content:'';position:absolute;inset:0;border-radius:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}.pill{display:inline-flex;padding:9px 16px;border:1px solid #e2d7c4;border-radius:999px;font-size:11px}.mission{display:grid;grid-template-columns:auto 1fr;gap:22px;margin:34px 0}.mission p{margin:0;color:var(--muted);line-height:1.7}.benefit-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 18px 16px 24px;border-radius:999px;background:var(--navy2);color:#fff;font-size:12px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:38px;padding-top:20px}.stat{padding-top:30px;border-top:1px solid var(--line)}.stat strong{font:700 clamp(42px,5vw,64px)/1 'Manrope'}.stat strong span{color:var(--gold)}.stat p{margin-top:18px;font-size:13px;line-height:1.5}.dark{background:var(--navy);color:#fff}.tint{background:var(--paper)}.section-heading{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:end;margin-bottom:55px}.section-heading>*{margin-bottom:0}.section-heading p{color:var(--muted);line-height:1.7}.dark .section-heading p{color:#bdc9cb}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{min-height:270px;padding:32px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}.card.dark-card{border:0;background:var(--navy2);color:#fff}.card h3{margin:45px 0 12px}.card p{margin-bottom:0;color:var(--muted);line-height:1.65;font-size:14px}.dark-card p{color:#bdc9cb}.visual-cards .card{min-height:380px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;border:0}.visual-cards .card:before{content:'';position:absolute;inset:0;background:linear-gradient(transparent 25%,rgba(9,38,49,.9));z-index:1}.visual-cards .card>*{position:relative;z-index:2}.visual-cards .card:nth-child(1){background:url('../images/boxbreaker/boxbreaker-studio.png') center/cover}.visual-cards .card:nth-child(2){background:url('../images/boxbreaker/social-media.jpg') center/cover}.visual-cards .card:nth-child(3){background:url('../images/boxbreaker/graphic-design.jpg') center/cover}.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.step{padding:30px;border-top:1px solid rgba(255,255,255,.24);border-right:1px solid rgba(255,255,255,.12)}.step b{color:var(--gold);font-size:12px}.step h3{margin:52px 0 10px}.step p{color:#b9c7ca;font-size:13px;line-height:1.65}.check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}.check{padding:19px 22px;border-radius:14px;background:#fff;border:1px solid var(--line);font-weight:600}.check:before{content:'\2713';display:inline-grid;place-items:center;width:28px;height:28px;margin-right:13px;border-radius:50%;background:var(--gold);font-size:12px}.showcase{display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:270px 270px;gap:16px}.showcase article{position:relative;overflow:hidden;border-radius:22px;background:var(--navy2)}.showcase article:first-child{grid-row:1/-1;background:url('../images/boxbreaker/boxbreaker-studio.png') center/cover}.showcase article:nth-child(2){background:url('../images/boxbreaker/graphic-design.jpg') center/cover}.showcase article:nth-child(3){background:url('../images/boxbreaker/social-media.jpg') center/cover}.showcase article:after{content:'Project showcase';position:absolute;left:22px;bottom:20px;padding:8px 13px;border-radius:999px;background:#fff;font-size:11px;font-weight:700}.cta{padding:95px 0;background:var(--gold)}.cta-inner{display:flex;align-items:end;justify-content:space-between;gap:50px}.cta h2{max-width:800px;margin-bottom:0}.page-hero{min-height:670px;padding:190px 0 90px;background:var(--navy);color:#fff}.page-hero .hero-grid{grid-template-columns:1.05fr .95fr}.page-hero h1{font-size:clamp(52px,6.5vw,92px)}.page-hero .hero-visual>img{inset:0;height:480px}.page-hero .hero-visual:after{content:'';position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,var(--navy));border-radius:0 0 22px 22px}.tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.tag{padding:10px 14px;border:1px solid rgba(255,255,255,.23);border-radius:999px;font-size:11px}.metric-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.metric{padding:30px;border-radius:18px;background:#fff}.metric strong{display:block;font:700 40px 'Manrope';color:var(--navy)}.metric span{color:var(--muted);font-size:12px}.platforms{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.platform{padding:34px 20px;border-radius:18px;background:var(--navy2);text-align:center}.platform i{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 22px;border-radius:50%;background:var(--gold);color:var(--navy);font-style:normal;font-weight:800}.form-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;align-items:start}.contact-card{padding:34px;border-radius:22px;background:var(--navy2);color:#fff}.contact-card a{display:block;margin:14px 0;color:#dbe4e5}.contact-card hr{border:0;border-top:1px solid rgba(255,255,255,.15);margin:28px 0}.form{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field{display:grid;gap:8px}.field.full{grid-column:1/-1}.field label{font-size:12px;font-weight:700}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:13px;background:#fff;padding:16px;color:var(--ink);outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#bd8b37;box-shadow:0 0 0 3px rgba(234,199,138,.24)}.field textarea{min-height:150px;resize:vertical}.form .btn{justify-self:start}.form-status{grid-column:1/-1;color:var(--muted);font-size:12px;line-height:1.5}.footer{position:relative;display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:60px;padding:70px max(24px,calc((100vw - 1160px)/2)) 110px;background:var(--navy);color:#fff}.footer .logo{display:block;margin-bottom:20px}.footer p{color:#9fb0b4;font-size:13px;line-height:1.7}.footer h3{margin-bottom:22px;color:var(--gold);font-size:11px;letter-spacing:.14em;text-transform:uppercase}.footer>div>a{display:block;margin:13px 0;font-size:13px}.copyright{position:absolute;left:max(24px,calc((100vw - 1160px)/2));bottom:26px;margin:0}
@media(max-width:1000px){.desktop-nav,.header-cta{display:none}.menu-button{display:grid;width:48px;height:48px;place-content:center;gap:7px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:transparent}.menu-button i{display:block;width:19px;height:2px;background:#fff}.mobile-nav{position:fixed;display:flex;flex-direction:column;inset:92px -24px auto;padding:35px 24px;background:var(--navy);opacity:0;visibility:hidden;transform:translateY(-12px);transition:.25s}.mobile-nav.open{opacity:1;visibility:visible;transform:none}.mobile-nav a{padding:15px;border-bottom:1px solid rgba(255,255,255,.1);font-weight:700}.mobile-nav a[aria-current=page]{color:var(--gold)}.mobile-project{margin-top:16px;background:var(--gold);color:var(--navy);border-radius:999px!important;text-align:center}.hero-grid,.page-hero .hero-grid,.split,.form-layout{grid-template-columns:1fr}.hero{padding-top:150px}.hero-copy{max-width:760px}.hero-visual{min-height:500px}.section-heading{grid-template-columns:1fr;gap:18px}.card-grid{grid-template-columns:1fr 1fr}.process{grid-template-columns:1fr 1fr}.footer{grid-template-columns:1.5fr 1fr}.stats{grid-template-columns:1fr 1fr}.page-hero{padding-bottom:70px}.showcase{grid-template-columns:1fr 1fr}.showcase article:first-child{grid-column:1/-1;grid-row:auto}.platforms{grid-template-columns:1fr 1fr}}
@media(max-width:640px){:root{--shell:min(100% - 30px,1160px)}.section{padding:76px 0}.site-header{height:82px}.logo{width:138px}.mobile-nav{inset:82px -15px auto;padding:25px 15px}.hero{min-height:0;padding:130px 0 70px}.hero h1{font-size:50px}.hero-grid{gap:30px}.hero-visual{min-height:380px}.hero-visual>img{height:340px}.float-one{right:0}.float-two{left:0}.service-strip{margin-top:-20px}.strip-grid,.card-grid,.visual-cards,.check-grid,.form,.metric-panel,.platforms{grid-template-columns:1fr}.split{gap:40px}.image-frame img{height:430px}.stats,.process{grid-template-columns:1fr}.step{border-right:0}.benefit-bar,.cta-inner{align-items:flex-start;flex-direction:column;border-radius:22px}.section-heading{margin-bottom:38px}.showcase{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,280px)}.showcase article:first-child{grid-column:auto}.page-hero{min-height:0;padding:140px 0 65px}.page-hero .hero-visual{display:none}.tag-row{margin-bottom:0}.form-layout{gap:38px}.field.full{grid-column:auto}.footer{grid-template-columns:1fr;gap:30px;padding-bottom:105px}.footer .copyright{bottom:25px}.cta{padding:70px 0}}
@media(prefers-reduced-motion:no-preference){.card,.strip-card,.btn{transition:transform .2s,background .2s,box-shadow .2s}.card:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(9,38,49,.1)}}

/* Internal pages inherit the approved homepage's viewport-wide architecture. */
:root{--navy:#061d2b;--navy2:#0c3440;--navy3:#123845;--gold:#eac78a;--red:#9f2319;--paper:#f6f5f1;--shell:calc(100% - 9vw)}
.shell{max-width:none}
.tpl-header{height:92px;background:var(--navy);color:#fff;display:flex;align-items:center;padding:0 4.5vw;gap:3vw;position:relative;z-index:20}
.tpl-logo{width:155px;height:48px;overflow:hidden;margin-right:auto;flex:0 0 155px}
.tpl-logo img{width:232px;max-width:none;transform:translate(-38px,-22px);filter:brightness(0) invert(1)}
.tpl-header .desktop-nav{display:flex;align-items:center;gap:0;background:#0b2636;border-radius:30px;padding:6px}
.tpl-header .desktop-nav a{font-size:.74rem;line-height:1.5;padding:11px 27px;border-radius:25px;font-weight:400}
.tpl-header .desktop-nav a:hover,.tpl-header .desktop-nav a[aria-current=page]{background:#123845;color:var(--gold)}

/* Google Business Profile */
.google-hero .hero-grid{align-items:center}
.google-search-card{position:absolute;inset:34px 0 0;background:#f7f6f2;border-radius:24px;padding:34px;color:var(--navy);box-shadow:0 24px 60px rgba(0,0,0,.22);overflow:hidden}
.google-searchbar{height:58px;border-radius:30px;background:#fff;box-shadow:0 6px 22px rgba(9,38,49,.1);display:flex;align-items:center;gap:13px;padding:0 20px;font-size:13px;color:#66777b}
.google-searchbar b{color:var(--red);font-size:17px}
.google-result{margin-top:25px;padding:26px;background:#fff;border-radius:18px;border:1px solid var(--line)}
.google-result small{color:#718186;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.google-result h3{margin:12px 0 7px;font-size:26px}.google-result p{margin:0;color:#718186;font-size:12px;line-height:1.6}
.google-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}.google-actions span{padding:12px 6px;border-radius:10px;background:#fff6e7;text-align:center;color:var(--navy);font-size:10px;font-weight:800}
.map-lines{position:absolute;right:-55px;bottom:-55px;width:265px;height:265px;border:52px solid #eac78a;border-radius:50%;opacity:.9}.map-pin{position:absolute;right:48px;bottom:62px;width:58px;height:58px;border-radius:50% 50% 50% 6px;background:var(--red);transform:rotate(-45deg);box-shadow:0 12px 25px rgba(159,35,25,.26)}.map-pin:after{content:'';position:absolute;inset:17px;border-radius:50%;background:#fff}
.profile-details{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.profile-detail{min-height:150px;padding:24px;border-radius:16px;background:#fff;border:1px solid var(--line)}.profile-detail b{display:block;width:34px;height:34px;border-radius:50%;background:var(--gold);display:grid;place-items:center;color:var(--navy);font-size:11px}.profile-detail span{display:block;margin-top:25px;font-size:13px;font-weight:700}
.google-service-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}.google-service{min-height:270px;padding:28px 24px;border-radius:18px;background:var(--navy2);color:#fff;display:flex;flex-direction:column}.google-service:first-child{grid-column:span 2;background:var(--gold);color:var(--navy)}.google-service:nth-child(2),.google-service:nth-child(3){grid-column:span 2}.google-service:nth-child(4){grid-column:2/span 2}.google-service:nth-child(5){grid-column:4/span 2}.google-service b{font-size:11px;color:var(--gold)}.google-service:first-child b{color:var(--red)}.google-service h3{margin:55px 0 15px}.google-service p{margin:0;color:#bdc9cb;font-size:13px;line-height:1.65}.google-service:first-child p{color:#4d5960}
.search-journey{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:55px}.search-journey article{position:relative;padding:34px 28px;border-top:1px solid rgba(255,255,255,.22);border-right:1px solid rgba(255,255,255,.1)}.search-journey b{color:var(--gold);font-size:12px}.search-journey h3{margin:44px 0 10px}.search-journey p{margin:0;color:#bdc9cb;font-size:13px;line-height:1.65}
.local-businesses{display:flex;flex-wrap:wrap;gap:10px}.local-businesses span{padding:12px 16px;border:1px solid #dfd8ca;border-radius:999px;background:#fff;font-size:12px;font-weight:700;color:#52666c}
.google-cta-actions{display:flex;gap:12px;flex-wrap:wrap}.google-cta-actions .btn-light{background:#fff;color:var(--navy)}
@media(max-width:1120px) and (min-width:981px){.tpl-header .desktop-nav a{padding:10px 16px;font-size:.68rem}.tpl-header{gap:1.8vw}}
@media(max-width:1000px){.google-service-grid{grid-template-columns:1fr 1fr}.google-service,.google-service:first-child,.google-service:nth-child(2),.google-service:nth-child(3),.google-service:nth-child(4),.google-service:nth-child(5){grid-column:auto}.search-journey{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.google-search-card{position:relative;inset:auto;min-height:420px;padding:22px}.profile-details,.google-service-grid,.search-journey{grid-template-columns:1fr}.google-actions{grid-template-columns:1fr}.google-actions span{padding:9px}.google-cta-actions{width:100%}.google-cta-actions .btn{width:100%}}
.quote-button{background:#fff;color:var(--ink);border-radius:30px;padding:14px 20px;font-size:.7rem;line-height:1.5;font-weight:700;display:flex;align-items:center;gap:15px;white-space:nowrap}
.quote-button span{font-size:.55rem}
.tpl-menu{display:none}
.page-hero{min-height:720px;padding:105px 0 100px;background:linear-gradient(180deg,var(--navy) 0%,#0a2b36 72%,#526b70 100%)}
.page-hero .hero-grid{grid-template-columns:.78fr 1.22fr;gap:5vw;align-items:center}
.page-hero .hero-copy{max-width:none}
.page-hero h1{font-size:clamp(3rem,4.35vw,5rem);max-width:700px}
.page-hero .hero-copy>p:not(.eyebrow){max-width:520px;font-size:.95rem}
.page-hero .hero-visual{min-height:535px}
.page-hero .hero-visual>img{inset:28px 0 0;height:500px}
.footer.tpl-footer{padding:70px 4.5vw 110px;grid-template-columns:1.35fr .75fr .85fr .9fr}
.footer-logo{display:block;width:235px;height:80px;overflow:hidden;margin-bottom:20px}
.footer-logo img{width:350px;max-width:none;transform:translate(-58px,-33px)}
.contact-card .btn-gold{color:var(--navy)}
.eyebrow:not(.light){color:var(--red)}
.card:nth-child(even) .icon,.strip-card:nth-child(even) .icon{background:var(--red);color:#fff}
.step:nth-child(even) b{color:var(--red)}
.check:nth-child(even):before{background:var(--red);color:#fff}
.platform:nth-child(even) i{background:var(--red);color:#fff}
.metric:nth-child(even) strong{color:var(--red)}
.pill{border-color:rgba(159,35,25,.3)}
.vision-build-intro{background:var(--gold)}
.vision-build-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:8vw;align-items:end}
.vision-build-grid h2{max-width:850px;margin-bottom:0}
.vision-build-lead{max-width:590px;padding-bottom:8px}
.vision-build-lead p{font-size:18px;line-height:1.75;margin-bottom:28px}
.vision-build-services{background:#fff}
.vision-build-service{display:grid;grid-template-columns:90px minmax(320px,.8fr) minmax(420px,1.2fr);gap:4vw;padding:105px 4.5vw;border-bottom:1px solid var(--line);align-items:start}
.vision-build-service:nth-child(even){background:var(--paper)}
.vision-build-number{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--gold);font:700 13px 'Manrope'}
.vision-build-service:nth-child(even) .vision-build-number{background:var(--red);color:#fff}
.vision-build-title h2{font-size:clamp(38px,4.2vw,66px);max-width:620px}
.vision-build-title .lead{max-width:500px;font-size:19px}
.vision-build-copy{max-width:760px;color:var(--muted);font-size:16px;line-height:1.8}
.vision-build-copy p{margin-bottom:22px}
.vision-build-manifesto{padding:25px 28px;border-left:4px solid var(--red);background:#fff6e7;color:var(--ink);font-family:'Manrope';font-weight:700;line-height:1.6}
.vision-build-close{margin-top:34px;color:var(--ink);font-size:19px}
.vision-build-close strong{color:var(--red)}
.vision-build-finale{background:linear-gradient(135deg,var(--navy),var(--navy3));color:#fff}
.vision-build-finale .shell{display:grid;grid-template-columns:1.05fr .65fr .4fr;gap:5vw;align-items:end}
.vision-build-finale h2{margin-bottom:0}
.vision-build-finale>div>p:not(.eyebrow){color:#bdc9cb;line-height:1.8;margin-bottom:0}
.vision-build-signoff{font-family:'Manrope';font-size:clamp(24px,2.8vw,42px);line-height:1.05}
.vision-build-signoff span,.vision-build-signoff strong{display:block}
.vision-build-signoff strong{color:var(--gold)}
.specialty-showcase{padding:30px 4.5vw 105px;background:#efefee;color:var(--ink);overflow:hidden}
.specialty-rail{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-top:1px solid #9aa0a0;border-bottom:1px solid #9aa0a0;font-size:11px}
.specialty-rail span{display:flex;align-items:center;gap:5px;padding:2px 9px 2px 3px;border-radius:999px;background:var(--navy);color:#fff}
.specialty-rail span b{display:grid;place-items:center;min-width:24px;height:20px;padding:0 5px;border:1px solid #a8afb0;border-radius:999px;background:#efefee;color:var(--navy);font-weight:500}
.specialty-rail>strong{font-size:10px;letter-spacing:.12em}
.specialty-heading{display:grid;grid-template-columns:minmax(600px,1.2fr) .8fr;gap:5vw;align-items:start;padding:52px 0 68px}
.specialty-heading h2{max-width:900px;margin:0;font-size:clamp(54px,6.2vw,94px);font-weight:500;line-height:.95;letter-spacing:-.065em}
.specialty-heading>p{max-width:190px;margin:18px 0 0;font-size:10px;font-weight:700;line-height:1.15}
.specialty-cards{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.specialty-card{display:flex;min-width:0;flex-direction:column;overflow:hidden;border-radius:20px;background:#fff;box-shadow:0 16px 45px rgba(6,29,43,.07)}
.specialty-image{height:270px;overflow:hidden;background:var(--navy)}
.specialty-image img{width:100%;height:100%;object-fit:cover}
.specialty-card:first-child .specialty-image img{object-position:68% center}
.specialty-card:nth-child(2) .specialty-image img{object-position:center 27%}
.specialty-card-body{display:flex;flex:1;flex-direction:column;padding:25px 25px 30px}
.specialty-meta{display:flex;align-items:center;gap:7px;margin-bottom:28px;font-size:10px}
.specialty-meta span{display:grid;place-items:center;width:27px;height:22px;border:1px solid #abb1b1;border-radius:999px}
.specialty-meta b{padding:5px 10px;border-radius:999px;background:var(--navy);color:#fff;font-weight:500}
.specialty-card:nth-child(2) .specialty-meta b{background:var(--red)}
.specialty-card:nth-child(3) .specialty-meta b{background:var(--gold);color:var(--navy)}
.specialty-card h3{min-height:58px;margin:0 0 14px;font-size:clamp(24px,2.15vw,34px)}
.specialty-card-body>p{color:var(--muted);font-size:13px;line-height:1.65}
.specialty-card-body .specialty-lead{min-height:58px;color:var(--ink);font-size:15px;font-weight:700}
.specialty-details{margin:5px 0 25px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.specialty-details summary{display:flex;align-items:center;justify-content:space-between;padding:15px 0;cursor:pointer;color:var(--ink);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;list-style:none}
.specialty-details summary::-webkit-details-marker{display:none}
.specialty-details summary span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--gold);font-size:15px;transition:transform .2s}
.specialty-card:nth-child(2) .specialty-details summary span{background:var(--red);color:#fff}
.specialty-details[open] summary span{transform:rotate(45deg)}
.specialty-details>div{padding:3px 0 12px}
.specialty-details p{color:var(--muted);font-size:13px;line-height:1.65}
.specialty-manifesto{padding:16px;border-left:3px solid var(--red);background:#fff6e7;color:var(--ink)!important;font-weight:700}
.specialty-card-body .specialty-close{margin-top:auto;padding-top:22px;color:var(--ink)}
.specialty-close strong{color:var(--red)}
.specialty-flow{display:grid;grid-template-columns:1fr 24px 1fr 24px 1fr;align-items:start;margin:0 7.5%}
.specialty-flow i{height:19px;border:1px solid var(--navy);border-top:0;border-radius:0 0 9px 9px}
.specialty-flow span{margin-top:-5px;text-align:center;font-size:17px}
.specialty-system{padding:18px;background:linear-gradient(145deg,#061d2b,#123845)}
.system-top{display:flex;align-items:center;gap:6px;height:31px;padding:0 10px;border-radius:9px 9px 0 0;background:#fff;color:var(--navy)}
.system-top span{width:6px;height:6px;border-radius:50%;background:var(--red)}
.system-top span:nth-child(2){background:var(--gold)}
.system-top span:nth-child(3){background:#aebec0}
.system-top b{margin-left:auto;font-size:8px;letter-spacing:.12em}
.system-grid{display:grid;grid-template-columns:48px 1fr;height:202px;border-radius:0 0 9px 9px;overflow:hidden;background:#f7f7f4}
.system-grid aside{display:grid;align-content:start;gap:13px;padding:18px 13px;background:#0b2636}
.system-grid aside i{height:7px;border-radius:6px;background:#71868a}
.system-grid aside i:first-child{background:var(--gold)}
.system-grid main{padding:20px}
.system-grid main>small{font-size:8px;font-weight:800;letter-spacing:.1em}
.system-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:17px}
.system-metrics b{padding:10px;border-radius:8px;background:#fff;font:700 20px 'Manrope';box-shadow:0 4px 12px rgba(6,29,43,.06)}
.system-metrics small{display:block;margin-top:5px;font:600 7px 'DM Sans';color:var(--muted)}
.system-chart{display:flex;align-items:end;gap:7px;height:75px;margin-top:9px;padding:8px 10px;border-radius:8px;background:#fff}
.system-chart i{width:16.6%;height:35%;border-radius:3px 3px 0 0;background:var(--red)}
.system-chart i:nth-child(2){height:58%;background:var(--gold)}.system-chart i:nth-child(3){height:43%}.system-chart i:nth-child(4){height:76%;background:var(--gold)}.system-chart i:nth-child(5){height:61%}.system-chart i:nth-child(6){height:91%;background:var(--gold)}
.specialty-reference{padding:30px 4.5vw 85px;background:#efefee;color:#111820;overflow:hidden}
.specialty-reference-rail{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-top:1px solid #979b9d;border-bottom:1px solid #979b9d;font-size:10px}
.specialty-reference-rail>span{display:flex;align-items:center;padding:2px 9px 2px 3px;border-radius:999px;background:#111820;color:#fff}
.specialty-reference-rail span b{display:grid;place-items:center;width:25px;height:20px;margin-right:5px;border:1px solid #8f9699;border-radius:999px;background:#efefee;color:#111820;font-weight:500}
.specialty-reference-rail>strong{font-size:9px;letter-spacing:.08em}
.specialty-reference-heading{display:flex;align-items:flex-start;padding:48px 0 70px}
.specialty-reference-heading h2{margin:0;font-family:'DM Sans',sans-serif;font-size:clamp(58px,6.2vw,94px);font-weight:400;line-height:.85;letter-spacing:-.065em}
.specialty-reference-heading>p{margin:18px 0 0 55px;font-size:10px;font-weight:700;line-height:1.05}
.specialty-reference-cards{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);gap:13px}
.specialty-reference-cards article{display:flex;min-width:0;height:230px;flex-direction:column;padding:18px 16px 15px;border-radius:15px;background:#fff}
.specialty-reference-icon{height:25px;font-size:19px;line-height:1}
.specialty-reference-cards h3{margin:0;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;line-height:1.05;letter-spacing:-.025em}
.specialty-reference-cards p{margin:auto 0 0;color:#697173;font-size:9px;line-height:1.15}
.specialty-reference-cards article:nth-child(2) .specialty-reference-icon,.specialty-reference-cards article:nth-child(5) .specialty-reference-icon{color:var(--red)}
.specialty-reference-cards article:nth-child(3) .specialty-reference-icon,.specialty-reference-cards article:nth-child(6) .specialty-reference-icon{color:#a66d16}
.specialty-reference-flow{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:13px;margin:0 4.2%}
.specialty-reference-flow i{height:16px;border:1px solid #111820;border-top:0;border-radius:0 0 8px 8px}
.specialty-reference-flow span{position:absolute;top:-8px;font-size:15px}
.specialty-reference-flow span:nth-of-type(1){left:16.25%}.specialty-reference-flow span:nth-of-type(2){left:32.95%}.specialty-reference-flow span:nth-of-type(3){left:49.7%}.specialty-reference-flow span:nth-of-type(4){left:66.45%}.specialty-reference-flow span:nth-of-type(5){left:83.15%}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.specialty-three{padding:105px 4.5vw;background:#fffdf4;color:var(--ink)}
.specialty-three-heading{display:flex;align-items:end;justify-content:space-between;gap:60px;margin-bottom:58px}
.specialty-three-heading>div{max-width:850px}
.specialty-three-heading h2{margin:0 0 18px;font-size:clamp(44px,4.7vw,70px)}
.specialty-three-heading>div>p:last-child{max-width:780px;margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.specialty-three-heading>.btn{flex:0 0 auto;margin-bottom:4px;padding-inline:34px}
.specialty-three-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.specialty-three-grid article{display:flex;min-height:430px;flex-direction:column;padding:34px 30px;border-radius:19px;background:#fff1cf}
.specialty-three-grid article:first-child{background:var(--navy);color:#fff}
.specialty-three-grid article:nth-child(3){background:#f7dfdb}
.specialty-three-icon{display:block;min-height:58px;font-size:31px;line-height:1;color:var(--red)}
.specialty-three-grid article:first-child .specialty-three-icon{color:var(--gold)}
.specialty-three-grid h3{max-width:340px;margin:12px 0 20px;font-size:clamp(28px,2.6vw,40px);line-height:1.05}
.specialty-three-grid p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.specialty-three-grid article:first-child p{color:#bdc9cb}
.specialty-three-grid article>a{align-self:flex-start;margin-top:auto;padding:12px 27px;border-radius:999px;background:var(--navy);color:#fff;font-size:11px;font-weight:800}
.specialty-three-grid article:first-child>a{background:var(--gold);color:var(--navy)}
.specialty-three-grid article:nth-child(3)>a{background:var(--red)}
.platform h3{color:#fff}
@media(max-width:980px){
:root{--shell:calc(100% - 10vw)}
.tpl-header{height:76px;padding:0 5vw}
.tpl-header .desktop-nav,.quote-button{display:none}
.tpl-menu{display:block;background:none;border:1px solid #ffffff44;color:#fff;padding:8px 11px;margin-left:auto}
.tpl-header .mobile-nav{inset:76px 0 auto;padding:25px 5vw;background:var(--navy)}
.page-hero{padding-top:75px}
.page-hero .hero-grid{grid-template-columns:1fr}
.page-hero .hero-visual{max-width:720px;width:100%;min-height:560px;margin:0}
.footer.tpl-footer{grid-template-columns:1fr 1fr}
.vision-build-grid,.vision-build-finale .shell{grid-template-columns:1fr;gap:35px}
.vision-build-service{grid-template-columns:70px 1fr;gap:30px}
.vision-build-copy{grid-column:2}
.specialty-heading{grid-template-columns:1fr;padding-bottom:48px}
.specialty-heading>p{margin-top:0}
.specialty-cards{grid-template-columns:1fr}
.specialty-card{display:grid;grid-template-columns:.8fr 1.2fr}
.specialty-image{height:100%;min-height:480px}
.specialty-card h3,.specialty-card-body .specialty-lead{min-height:0}
.specialty-flow{display:none}
.specialty-reference-heading{padding-bottom:48px}
.specialty-reference-cards{grid-template-columns:repeat(3,1fr)}
.specialty-reference-cards article{height:210px}
.specialty-reference-flow{display:none}
.specialty-three-heading{align-items:flex-start;flex-direction:column;gap:28px}
.specialty-three-grid{grid-template-columns:1fr}
.specialty-three-grid article{min-height:340px}
}
@media(max-width:640px){
:root{--shell:calc(100% - 14vw)}
.tpl-header{padding:0 4.5vw}
.tpl-logo{width:145px;height:44px;flex-basis:145px}
.tpl-logo img{width:218px;transform:translate(-36px,-20px)}
.tpl-header .tpl-menu{display:block;width:auto;height:auto;border:1px solid #ffffff44;border-radius:0;background:none;color:#fff;padding:8px 11px;line-height:1.5}
.tpl-header .mobile-nav{padding:25px 7vw}
.page-hero{padding:65px 0 72px}
.page-hero h1{font-size:clamp(2.35rem,10.5vw,3.05rem)}
.page-hero .hero-visual{display:block;min-height:420px;margin-top:22px}
.page-hero .hero-visual>img{height:380px}
.footer.tpl-footer{grid-template-columns:1fr;padding:65px 7vw 105px}
.vision-build-service{grid-template-columns:1fr;padding:75px 7vw;gap:24px}
.vision-build-copy{grid-column:auto}
.vision-build-number{width:52px;height:52px}
.vision-build-title h2{font-size:clamp(35px,10vw,48px)}
.vision-build-copy{font-size:15px}
.specialty-showcase{padding:24px 7vw 75px}
.specialty-heading{padding:40px 0 42px}
.specialty-heading h2{font-size:clamp(43px,13vw,61px)}
.specialty-card{display:flex}
.specialty-image{height:230px;min-height:0}
.specialty-card-body{padding:23px 20px 27px}
.specialty-reference{padding:24px 7vw 70px}
.specialty-reference-heading{display:block;padding:38px 0 42px}
.specialty-reference-heading h2{font-size:clamp(48px,14vw,66px);line-height:.9}
.specialty-reference-heading>p{margin:24px 0 0}
.specialty-reference-cards{grid-template-columns:1fr 1fr;gap:10px}
.specialty-reference-cards article{height:190px;padding:16px 14px}
.specialty-three{padding:75px 7vw}
.specialty-three-heading{margin-bottom:38px}
.specialty-three-heading h2{font-size:clamp(42px,12vw,58px)}
.specialty-three-grid{gap:14px}
.specialty-three-grid article{min-height:390px;padding:28px 24px}
}

/* Functional-only addition (not present in the static mockup, which has no
   error states to design): inline validation feedback for the real contact
   form. Zero visual effect unless a field actually fails validation. */
.field-error{display:block;margin-top:6px;color:#b3261e;font-size:11px;font-weight:600}

/* Asset-mismatch fix (task #144): the reference's own boxbreaker-global-
   logo.png is 2000x762 with a specific transform:translate() crop tuned to
   that exact size. The production logo file supplied for this project is
   2000x339 (much shorter), so reusing the reference's raw crop offsets cut
   through the middle of the mark instead of framing it, which is what was
   reported as a "garbled" header/footer logo. Since no reference-sized
   file is available, this switches the nav and footer marks to the same
   safe object-fit:contain pattern the reference itself already uses for
   `.logo img` elsewhere (no crop, no transform) so the full mark renders
   legibly at any source size. Colors/filter/box dimensions are untouched. */
.tpl-logo img{width:100%;height:100%;max-width:none;transform:none;object-fit:contain}
.footer-logo img{width:100%;height:100%;max-width:none;transform:none;object-fit:contain}

/* Homepage restoration (2026-08-24): home.php's markup/classnames were approved
   and built, but a matching stylesheet section was never authored — confirmed
      by searching every CSS file and design reference in the project (none
         define .tpl-hero, .service-ribbon, .about-template, .services-template,
            .process-template, .why-boxbreaker, .tpl-cta or their children). This block
               reconstructs only what home.php's existing, unmodified markup needs, reusing
                  the same design tokens, spacing scale, radius, button and card patterns
                     already established above (var(--navy)/var(--gold)/var(--paper), DM
                        Sans/Manrope, 999px pill buttons, 22px card radius, the footer's full-bleed
                           shell-padding technique) so it matches the rest of the approved site rather
                              than introducing a new visual direction. */
                              .section-pill{display:inline-flex;padding:9px 16px;margin-bottom:20px;border:1px solid #e2d7c4;border-radius:999px;font-size:11px;font-weight:700;color:var(--ink)}
                              .tpl-hero{position:relative;overflow:hidden;padding:190px max(24px,calc((100vw - 1160px)/2)) 100px;background:linear-gradient(180deg,var(--navy) 0%,#102f39 70%,var(--navy3) 100%);color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
                              .tpl-hero .hero-copy{position:relative;z-index:2;max-width:560px}
                              .tpl-hero .lime-label{margin-bottom:20px;color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
                              .tpl-hero h1{color:#fff}
                              .tpl-hero .hero-description{max-width:480px;margin-bottom:0;color:rgba(255,255,255,.76);font-size:16px;line-height:1.65}
                              .tpl-hero .hero-actions{margin-top:32px}
                              .lime-button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:999px;background:var(--gold);color:var(--navy);font-size:12px;font-weight:800;transition:.2s}
                              .lime-button:hover{transform:translateY(-2px)}
                              .play-button{display:grid;place-items:center;width:50px;height:50px;flex:0 0 50px;border-radius:50%;border:1px solid rgba(255,255,255,.35);color:#fff;transition:.2s}
                              .play-button:hover{background:rgba(255,255,255,.1)}
                              .hero-proof{display:flex;flex-wrap:wrap;align-items:center;gap:32px;margin-top:44px;padding-top:28px;border-top:1px solid rgba(255,255,255,.16)}
                              .hero-proof>div:first-child{display:flex;flex-direction:column}
                              .hero-proof .stars{margin-bottom:8px;color:var(--gold);font-size:13px;letter-spacing:2px}
                              .hero-proof>div:first-child strong{font:700 30px 'Manrope';margin-bottom:4px}
                              .hero-proof p{margin:0;color:rgba(255,255,255,.68);font-size:12px;line-height:1.5}
                              .proof-team small{display:block;margin-bottom:10px;color:rgba(255,255,255,.55);font-size:11px}
                              .proof-team>div{display:flex;align-items:center}
                              .proof-team i{display:grid;place-items:center;width:32px;height:32px;margin-left:-9px;border-radius:50%;border:2px solid var(--navy);background:var(--navy2);color:#fff;font-style:normal;font-size:12px;font-weight:700}
                              .proof-team i:first-child{margin-left:0}
                              .proof-team b{margin-left:8px;color:var(--gold);font-size:14px;font-weight:800}
                              .device-stage{position:relative;z-index:2;min-height:560px}
                              .hero-image-frame{position:absolute;inset:0;border-radius:24px;background-size:cover;background-position:center}
                              .float-status{position:absolute;top:26px;left:26px;z-index:3;display:flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;background:rgba(9,38,49,.85);backdrop-filter:blur(6px);color:#fff;font-size:11px;font-weight:600;white-space:nowrap}
                              .float-status i{color:var(--gold);font-style:normal}
                              .tpl-hero .float-web{top:26px;right:-18px;left:auto;bottom:auto}
                              .tpl-hero .float-web span{display:flex;align-items:center;gap:6px;margin-bottom:8px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.08em}
                              .tpl-hero .float-web span i{color:var(--gold);font-style:normal}
                              .tpl-hero .float-social{left:-22px;bottom:112px;top:auto;background:var(--gold)}
                              .tpl-hero .float-social span{display:block;margin-bottom:12px;font-size:10px;font-weight:800;letter-spacing:.08em}
                              .tpl-hero .float-social div{display:flex;gap:5px;margin-bottom:10px}
                              .tpl-hero .float-social div i{width:26px;height:26px;border-radius:50%;background:rgba(9,38,49,.15)}
                              .tpl-hero .float-social small{display:block;font-size:11px;font-weight:600}
                              .tpl-hero .float-design{left:26px;bottom:26px;top:auto}
                              .tpl-hero .float-design span{display:block;margin-bottom:8px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.08em}
                              .hero-fade{position:absolute;inset:auto 0 0;height:180px;background:linear-gradient(transparent,var(--navy));pointer-events:none;z-index:1}
                              .service-ribbon{position:relative;margin-top:-46px;z-index:3;padding:0 max(24px,calc((100vw - 1160px)/2));display:grid;grid-template-columns:.9fr 2.1fr;gap:14px;align-items:stretch}
                              .service-ribbon .process-card{display:flex;flex-direction:column;justify-content:flex-end;min-height:190px;padding:26px;border-radius:22px;overflow:hidden;position:relative;color:#fff}
                              .service-ribbon .process-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
                              .service-ribbon .process-card:before{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(9,38,49,.88));z-index:1}
                              .service-ribbon .process-card span,.service-ribbon .process-card small{position:relative;z-index:2;display:block}
                              .service-ribbon .process-card span{font:700 17px 'Manrope';margin-bottom:6px}
                              .service-ribbon .process-card small{font-size:11px;color:var(--gold);font-weight:700}
                              .ribbon-services{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px;background:var(--navy2);border-radius:22px}
                              .ribbon-services a{display:flex;gap:16px;padding:12px;border-radius:15px;color:#fff;transition:.2s}
                              .ribbon-services a:hover{background:rgba(255,255,255,.06)}
                              .ribbon-services a>i{display:grid;flex:0 0 44px;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--navy);font-style:normal;font-weight:800}
                              .ribbon-services h3{margin:0 0 6px;font-size:16px;line-height:1.15}
                              .ribbon-services p{margin:0;color:#c9d2d3;font-size:12px;line-height:1.5}
                              .about-template{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:112px max(24px,calc((100vw - 1160px)/2))}
                              .about-left{position:relative}
                              .about-left img{width:100%;height:520px;object-fit:cover;border-radius:22px}
                              .about-left .vision{position:absolute;left:-30px;bottom:-30px;max-width:290px;padding:26px;border-radius:18px;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.13)}
                              .about-left .vision>i{display:grid;place-items:center;width:36px;height:36px;margin-bottom:14px;border-radius:50%;background:var(--gold);color:var(--navy);font-style:normal}
                              .about-left .vision h3{margin:0 0 8px;font-size:17px}
                              .about-left .vision p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
                              .about-right .mission{margin:30px 0}
                              .about-right .mission>i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--gold);color:var(--navy);font-style:normal}
                              .about-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 18px 16px 24px;border-radius:999px;background:var(--navy2);color:#fff;font-size:12px}
                              .about-bar>span:first-child{display:grid;flex:0 0 30px;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--navy);font-weight:800}
                              .about-bar p{flex:1;margin:0}
                              .about-bar a{white-space:nowrap;font-weight:700;color:var(--gold)}
                              .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:38px;padding:0 max(24px,calc((100vw - 1160px)/2)) 100px}
                              .metrics article{padding-top:28px;border-top:1px solid var(--line)}
                              .metrics strong{display:block;font:700 clamp(40px,4.8vw,60px)/1 'Manrope';color:var(--navy)}
                              .metrics strong b{color:var(--gold)}
                              .metrics p{margin-top:16px;margin-bottom:0;color:var(--muted);font-size:13px;line-height:1.5}
                              .services-template{padding:112px max(24px,calc((100vw - 1160px)/2));background:var(--paper)}
                              .services-heading{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:end;margin-bottom:55px}
                              .services-heading p{color:var(--muted);line-height:1.7;margin-bottom:0}
                              .service-image-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
                              .service-image-grid a{position:relative;display:flex;min-height:340px;flex-direction:column;justify-content:flex-end;overflow:hidden;border-radius:20px;color:#fff}
                              .service-image-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
                              .service-image-grid a:before{content:'';position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(9,38,49,.9));z-index:1}
                              .service-image-grid a>div{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:22px}
                              .service-image-grid a>div>i{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;margin-right:auto;border-radius:50%;background:var(--gold);color:var(--navy);font-style:normal;font-weight:800}
                              .service-image-grid h3{margin:0;font-size:17px;line-height:1.2}
                              .service-image-grid span{font-size:16px;color:var(--gold)}
                              .process-template{padding:112px max(24px,calc((100vw - 1160px)/2));background:var(--navy);color:#fff}
                              .process-template>div:first-child{max-width:600px;margin-bottom:55px}
                              .process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
                              .process-steps article{padding:30px;border-top:1px solid rgba(255,255,255,.24);border-right:1px solid rgba(255,255,255,.12)}
                              .process-steps article:last-child{border-right:0}
                              .process-steps span{color:var(--gold);font-size:12px;font-weight:800}
                              .process-steps h3{margin:52px 0 10px}
                              .process-steps p{margin:0;color:#b9c7ca;font-size:13px;line-height:1.65}
                              .why-boxbreaker{padding:112px max(24px,calc((100vw - 1160px)/2))}
                              .why-heading{max-width:600px;margin-bottom:55px}
                              .why-heading p{margin-bottom:16px;color:#ad7b29;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
                              .why-heading h2{margin-bottom:0}
                              .why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
                              .why-grid article{padding:28px 22px;border:1px solid var(--line);border-radius:18px}
                              .why-grid i{display:block;margin-bottom:30px;font-style:normal;font-size:24px;color:var(--gold)}
                              .why-grid h3{margin:0;font-size:15px;line-height:1.3}
                              .tpl-cta{display:flex;align-items:end;justify-content:space-between;gap:50px;padding:95px max(24px,calc((100vw - 1160px)/2));background:var(--gold)}
                              .tpl-cta p{margin-bottom:8px;color:#7a5a1f;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
                              .tpl-cta h2{max-width:800px;margin-bottom:0;color:var(--navy)}
                              .tpl-cta>a{display:inline-flex;align-items:center;gap:14px;min-height:50px;padding:0 26px;border-radius:999px;background:var(--navy);color:#fff;font-size:12px;font-weight:800;white-space:nowrap}
                              @media(max-width:1000px){
                              .tpl-hero{grid-template-columns:1fr;padding-top:150px}
                              .device-stage{min-height:420px;margin-top:20px}
                              .service-ribbon{grid-template-columns:1fr;margin-top:-30px}
                              .about-template{grid-template-columns:1fr;gap:40px;padding:76px max(24px,calc((100vw - 1160px)/2))}
                              .about-left .vision{position:static;margin-top:20px;max-width:none}
                              .metrics{grid-template-columns:1fr 1fr;padding-bottom:76px}
                              .services-heading{grid-template-columns:1fr;gap:18px}
                              .service-image-grid{grid-template-columns:1fr 1fr}
                              .process-steps{grid-template-columns:1fr 1fr}
                              .why-grid{grid-template-columns:repeat(2,1fr)}
                              .tpl-cta{flex-direction:column;align-items:flex-start;padding:70px max(24px,calc((100vw - 1160px)/2))}
                              }
                              @media(max-width:640px){
                              .ribbon-services{grid-template-columns:1fr}
                              .service-image-grid{grid-template-columns:1fr}
                              .process-steps{grid-template-columns:1fr}
                              .process-steps article{border-right:0}
                              .why-grid{grid-template-columns:1fr}
                              .metrics{grid-template-columns:1fr}
                              }