/*
Theme Name: Marxolt
Theme URI: https://marxolt.com/
Author: Sohail WEB Expert
Author URI: https://marxolt.com/
Description: Marxolt Studio — Web Development, SEO, Local SEO, Social Media Management and Branding Solutions. Customizer edition: every header, footer, colour, font, layout, hero, button and contact option is editable in Appearance > Customize. Separate WordPress pages: Home, About, Services, Work, LinkedIn Verification, Contact and Insights.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marxolt
Tags: black, teal, business, agency, portfolio, responsive
*/

:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#141414}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* MARXOLT STUDIO — design system. Palette: #141414 / pure white #FFFFFF + logo teal #00C8CF, neutral grey for secondary text only. Every light background is pure white; --o is kept as the light-surface token and is #fff. */
:root{--k:#141414;--w:#fff;--o:#fff;--teal:#00c8cf;--teal-d:#009aa1;--g:#8a8a8a;--g2:#d9d9d9;--g3:#1a1a1a;--pad:clamp(20px,4vw,64px);--container:1680px;--edge:max(var(--pad),calc((100vw - var(--container))/2));--ease:cubic-bezier(.19,1,.22,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:'Inter',system-ui,sans-serif;background:var(--w);color:var(--k);overflow-x:clip;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
::selection{background:var(--teal);color:var(--k)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.skip{position:fixed;left:8px;top:8px;background:var(--w);color:var(--k);padding:10px 14px;z-index:1001;white-space:nowrap;transform:translateY(-300%)}
.skip:focus{transform:none}
h1,h2,h3,h4,.d{font-family:'Archivo','Inter',sans-serif;letter-spacing:-.04em;line-height:.94;font-weight:800}
.h-xxl{font-size:clamp(2.6rem,9.2vw,10.5rem)}
.h-xl{font-size:clamp(2.3rem,7vw,7.5rem)}
.h-l{font-size:clamp(1.9rem,4.6vw,4.8rem)}
.h-m{font-size:clamp(1.4rem,2.6vw,2.6rem)}
.light{font-weight:400}
.label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.muted{color:var(--g)}
.lead{font-size:clamp(1.05rem,1.5vw,1.45rem);line-height:1.45;font-weight:300;max-width:46ch}
/* One shared container width: every section's content starts and ends at
   --edge, so the header pill, hero slider and all content edges line up. */
.wrap{padding-inline:var(--edge)}
section{position:relative}
/* Page-opening animation — quick, CSS-only, never blocks clicks.
   The new page is rendered first (see show()), then #main alone fades
   and rises in. There is no overlay, no pointer-events change, no GSAP
   dependency and no flag that can drop a tap: rapid taps re-render
   instantly and simply restart this animation on the latest page.
   It is deliberately unmistakable now — 0.7s, a 28px rise and a slight
   scale — because the previous 0.35s / 10px fade read as a flicker on
   a full-screen hero photo and was invisible whenever the GSAP CDN
   (which drives the split-heading and scroll-reveal motion) was slow
   or blocked. Opacity/transform never change hit-testing, so taps
   during the animation still land on the new page. With reduced
   motion the page just appears. */
#main.page-enter{animation:pageIn .7s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(28px) scale(.985)}to{opacity:1;transform:none}}
/* First-screen content rises in just after the page fade, staggered,
   so the entrance is visible on every page. CSS-only, so it plays even
   without GSAP. These animate wrappers GSAP never touches, so the two
   systems never fight over one element. */
#main.page-enter .hero-slider-content{animation:pageHeroIn .8s var(--ease) .1s both}
#main.page-enter .hero-slide-cap{animation:pageHeroIn .8s var(--ease) .18s both}
#main.page-enter .phero,#main.page-enter .lv-hero{animation:pageHeroIn .8s var(--ease) .08s both}
@keyframes pageHeroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#main.page-enter{animation:none}}
/* Page-opening wipe — the original full-screen black wipe, restored.
   It sweeps BOTTOM TO TOP: the panel rises in from below the screen,
   covers it, holds briefly with the MARXOLT STUDIO wordmark, then
   keeps rising off the top to reveal the page underneath. The new
   page is rendered first (see show()), then this panel sweeps over
   it. It is CSS-only, so it plays even when the GSAP CDN is blocked,
   and it is restarted on every navigation in show(). It NEVER blocks
   a tap: pointer-events is none at all times and there is no busy
   flag, so a menu tap during the wipe passes straight through the
   panel to the header / mobile menu underneath and still opens the
   tapped page. It sits above the header (z-index 200) so it reads
   as a true full-screen wipe, and it ends parked fully off-screen
   above the viewport. With reduced motion there is no wipe. */
#pageWipe{position:fixed;inset:0;z-index:200;background:#141414;pointer-events:none;transform:translateY(100%);visibility:hidden;display:flex;align-items:center;justify-content:center}
#pageWipe.wipe-play{visibility:visible;animation:pageWipe 1.6s var(--ease) both}
/* Wordmark centred on the wipe: MARXOLT in white, STUDIO in the site
   teal, matching the header lockup (bold word, light second word). It
   fades in once the panel has risen up from the bottom and covers the
   screen, holds while the panel is still, then fades out as the panel
   rises away off the top — so the text is only ever seen during the
   page opening, never after it. */
.wipe-word{font-family:'Archivo','Inter',sans-serif;font-weight:800;letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap;color:#fff;font-size:clamp(1.7rem,7.5vw,5.25rem);line-height:1;opacity:0}
.wipe-word span{color:var(--teal);font-weight:300}
#pageWipe.wipe-play .wipe-word{animation:wipeWord 1.6s var(--ease) both}
@keyframes pageWipe{0%{transform:translateY(100%);visibility:visible}25%{transform:translateY(0);visibility:visible}50%{transform:translateY(0);visibility:visible}100%{transform:translateY(-100%);visibility:hidden}}
@keyframes wipeWord{0%{opacity:0;transform:translateY(16px)}30%{opacity:1;transform:none}50%{opacity:1;transform:none}68%{opacity:0;transform:translateY(-12px)}100%{opacity:0;transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){#pageWipe.wipe-play{animation:none;visibility:hidden}#pageWipe.wipe-play .wipe-word{animation:none;opacity:0}}
.sec{padding-block:clamp(44px,6vw,88px)}
.dark{background:var(--k);color:var(--w)}
.soft{background:var(--o)}
.dark .muted{color:#9a9a9a}
hr.line{border:0;border-top:1px solid var(--g2)}
.dark hr.line{border-color:#2a2a2a}
/* split text */
.line-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line-in{display:block;will-change:transform}
/* header — floating, fully rounded white pill, pinned to the top; glassy once scrolled */
header.nav{position:fixed;top:14px;left:var(--edge);right:var(--edge);z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14.26px 8.91px 14.26px 25.74px;color:#141414;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid #141414;border-radius:999px;box-shadow:0 10px 28px rgba(0,0,0,.14);transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
header.nav.scrolled{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid #141414;box-shadow:0 12px 32px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.6)}
.logo{font-family:'Archivo';font-weight:700;letter-spacing:-.03em;font-size:1.14rem;text-transform:uppercase;white-space:nowrap;display:inline-flex;align-items:center;gap:13px}
.logo sup{font-size:.55em;font-weight:400;margin-left:1px}
.logo span{font-weight:300}
.logo img{height:43.56px;width:auto}
/* Brand lockup inside the pill: exact logo mark (black M + teal arrow) with wordmark */
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{height:32.32px;width:auto;display:block}
.brand-word{font-family:'Archivo';font-weight:700;letter-spacing:-.03em;font-size:1.14rem;text-transform:uppercase;white-space:nowrap;color:#141414}
.brand-word span{font-weight:300}
nav.center{display:flex;align-items:center;gap:clamp(14px,1.7vw,30px)}
nav.center a{font-family:'Archivo';font-size:calc(.78rem + 3px);letter-spacing:.1em;text-transform:uppercase;font-weight:700;position:relative;padding:8px 0;white-space:nowrap;color:#111}
.ul::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
nav.center a::after{content:"";position:absolute;left:0;bottom:2px;height:2px;width:100%;background:#141414;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.ul:hover::after,nav.center a:hover::after{transform:scaleX(1);transform-origin:left}
nav.center a.on::after{transform:scaleX(1);transform-origin:left;background:var(--teal-d)}
.ul{position:relative;display:inline-block}
.right{display:flex;align-items:center;gap:12px;flex:none}
.contact-pill{display:inline-flex;align-items:center;justify-content:center;background:#141414;color:#fff;font-family:'Archivo';font-size:.79rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;white-space:nowrap;padding:15.54px 27.72px;border-radius:999px;transition:background .3s,color .3s}
.contact-pill:hover{background:var(--teal-d);color:#fff}
.contact-pill:focus-visible{outline:2px solid var(--teal-d);outline-offset:3px}
@media (max-width:1400px){nav.center{gap:clamp(12px,1.4vw,22px)}nav.center a{font-size:calc(.72rem + 3px)}.contact-pill{padding:14.55px 23.76px}}
@media (max-width:1200px){nav.center,.contact-pill{display:none}header.nav .burger{display:block}}
@media (max-width:620px){header.nav{top:10px;padding:12.38px 7.92px 12.38px 17.82px}.brand img{height:26.62px}.brand-word{font-size:.97rem}}
.burger{display:none;width:39.6px;height:39.6px;position:relative;flex:none}
.burger i{position:absolute;left:7.92px;right:7.92px;height:1.5px;background:currentColor;transition:transform .5s var(--ease),top .5s var(--ease)}
.burger i:nth-child(1){top:14.85px}.burger i:nth-child(2){top:22.77px}
.burger.open i:nth-child(1){top:18.81px;transform:rotate(45deg)}.burger.open i:nth-child(2){top:18.81px;transform:rotate(-45deg)}
/* mobile menu */
.mobile{position:fixed;inset:0;z-index:95;background:var(--k);color:var(--w);padding:100px var(--edge) 40px;display:flex;flex-direction:column;justify-content:space-between;clip-path:circle(0 at 100% 0);visibility:hidden;transition:clip-path .9s var(--ease),visibility 0s .9s;overflow:auto}
.mobile.open{clip-path:circle(150% at 100% 0);visibility:visible;transition:clip-path .9s var(--ease)}
.mobile a{display:block;font-family:'Archivo';font-weight:700;text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(2rem,10vw,3.4rem);line-height:1.1;padding:4px 0}
.mobile .sub{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0 14px}
.mobile .sub a{font-size:.8rem;letter-spacing:.12em;font-weight:500;color:#9a9a9a}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;padding:18px 30px;border-radius:99px;border:1px solid currentColor;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;position:relative;overflow:hidden;isolation:isolate;transition:color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--k);transform:translateY(101%);border-radius:50% 50% 0 0;transition:transform .6s var(--ease),border-radius .6s var(--ease);z-index:-1}
.btn:hover{color:var(--w)}.btn:hover::before{transform:none;border-radius:0}
.btn.solid{background:var(--k);color:var(--w);border-color:var(--k)}
.btn.solid::before{background:var(--w)}.btn.solid:hover{color:var(--k)}
.dark .btn::before{background:var(--w)}.dark .btn:hover{color:var(--k)}
.dark .btn.solid{background:var(--w);color:var(--k);border-color:var(--w)}.dark .btn.solid::before{background:var(--k)}.dark .btn.solid:hover{color:var(--w)}
.mag{display:inline-block;will-change:transform}
/* cursor */
.cur{position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:999;transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease);display:none;align-items:center;justify-content:center;font-size:.6rem;color:#141414;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.cur.big{width:84px;height:84px}
@media (hover:hover) and (pointer:fine){.cur{display:flex}}
/* art */
.art{position:relative;overflow:hidden;background:var(--o);width:100%;height:100%}
.art svg,.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dark .art{background:#141414}
.mask-img{overflow:hidden;position:relative;height:100%}
.mask-img>.in{width:100%;height:100%;transform:scale(1.2);will-change:transform}
.par{height:120%;margin-top:-10%}
.r11{aspect-ratio:1}.r45{aspect-ratio:4/5}.r169{aspect-ratio:16/9}.r43{aspect-ratio:4/3}.r32{aspect-ratio:3/2}
/* hero */
/* hero — full-width, edge-to-edge, starting at the very top of the page
   so it runs underneath the floating header pill, which overlaps the
   slide image. No top clearance: the slider fills the viewport from y=0. */
.hero{min-height:100svh;padding:0;display:flex;flex-direction:column;justify-content:space-between;background:var(--k);color:var(--w);overflow:hidden}
.hero .top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hero h1{margin-block:clamp(16px,2.6vw,36px)}
.hero .row{display:grid;grid-template-columns:1fr 1.2fr;gap:5vw;align-items:end}
.hero .vis{aspect-ratio:21/9;border:1px solid #2a2a2a;position:relative;overflow:hidden;border-radius:clamp(36px,4.5vw,56px)}
.hero .vis .art img{object-position:50% 30%}
/* Large rounded corners must survive the reveal clip-path on .vis, so the
   radius is repeated on the inner layers that actually clip the photo. */
.hero .vis .in,.hero .vis .art{border-radius:inherit;overflow:hidden}
/* Rotating circular badge overlapping the hero image's top-right corner. */
.hero-vis-wrap{position:relative}
.hero-badge{position:absolute;top:-26px;right:-12px;z-index:6;width:clamp(108px,11.5vw,164px);aspect-ratio:1;border-radius:50%;background:#fff;color:#141414;border:1px solid #e2e2e2;box-shadow:0 16px 36px rgba(0,0,0,.35);pointer-events:none}
.hero-badge-ring{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 50%;animation:heroBadgeSpin 22s linear infinite}
.hero-badge-ring text{font-family:'Archivo',sans-serif;font-size:17.5px;font-weight:600;letter-spacing:2px;fill:#141414}
@keyframes heroBadgeSpin{to{transform:rotate(360deg)}}
.hero-badge-mark{position:absolute;left:50%;top:50%;width:38%;height:auto;transform:translate(-50%,-50%)}
@media (max-width:620px){.hero-badge{top:-16px;right:-4px;width:104px}}
#heroStage{flex:1;display:flex;flex-direction:column;min-width:0}
.hero-variant{flex:1;display:flex;flex-direction:column;min-width:0;animation:heroStageIn .6s var(--ease) both}
@keyframes heroStageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Hero slider — shared slide stack */
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .8s var(--ease),transform 1.4s var(--ease);pointer-events:none;margin:0}
.hero-slide.is-active{opacity:1;transform:scale(1);pointer-events:auto}
.hero-slide img{width:100%;height:100%;object-fit:cover;display:block}
.hero-slider-nav{display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.hero-nav-btn{width:52px;height:52px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.55);color:#fff;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);transition:background .3s,color .3s,border-color .3s}
.hero-nav-btn:hover{background:var(--teal);border-color:var(--teal);color:#141414}
.hero-nav-btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.hero-nav-btn svg{width:20px;height:20px;display:block}
.hero-dots{display:flex;gap:8px;align-items:center}
.hero-dot{width:10px;height:10px;padding:0;border-radius:50%;background:rgba(255,255,255,.45);transition:background .3s,transform .3s}
.hero-dot[aria-current="true"]{background:var(--teal);transform:scale(1.35)}
.hero-count{font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:.1em;font-size:.8rem;color:#fff;white-space:nowrap}
/* Hero slider: full-bleed slider, headline overlaid — square corners and
   no border, so the slide images run edge-to-edge across the viewport. */
.hero-slider{position:relative;flex:1;min-height:clamp(540px,74svh,780px);border-radius:0;overflow:hidden;border:0;background:#141414}
.hero-slider .hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.45) 52%,rgba(0,0,0,.08) 82%)}
.hero-slide-cap{position:absolute;z-index:2;top:160px;left:clamp(20px,2.6vw,30px);background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:99px;padding:9px 16px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.hero-slider-content{position:absolute;z-index:3;left:clamp(24px,4vw,56px);right:clamp(24px,4vw,56px);bottom:clamp(24px,4vw,48px);max-width:1020px}
/* The caption row above the headline holds only the left-hand label now:
   the service-list label was removed, and the row
   is pinned left so nothing can sit in the middle of the hero image. */
.hero-slider-content .top{justify-content:flex-start}
/* Hero headlines are exactly two lines: the wider caption area lets each
   of the two balanced lines sit on a single visual line at desktop sizes. */
.hero-slider-content h1{font-size:clamp(2.2rem,5vw,4.6rem);margin-block:14px}
.hero-slider-content .lead{font-size:1.05rem;max-width:52ch}
.hero-slider-content .ctas{margin-top:20px}
.hero-slider-content .hero-slider-nav{margin-top:20px}
.hero-slider-content .lead{color:#d9d9d9}
/* Per-slide hero content: one panel per slide, stacked in the same grid
   cell so the headline, supporting text and CTAs change together with the
   background image. Only the active panel is visible/focusable; the others
   are hidden but keep the content in the DOM. */
.hero-panels{display:grid;min-width:0}
.hero-panel{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none;transition:opacity .55s var(--ease),transform .55s var(--ease),visibility 0s .55s}
.hero-panel.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.hero-panel-label{margin-top:14px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--teal)}
.hero-slider .hero-badge{top:160px;right:22px}
@media (max-width:620px){
 .hero-slider{min-height:0;display:flex;flex-direction:column;justify-content:flex-end}
 .hero-slider-content{position:relative;left:auto;right:auto;bottom:auto;margin-top:340px;padding:24px 20px 28px}
 /* Fluid hero type on phones so each of the two headline lines still fits
    on one visual line instead of wrapping to a third. */
 .hero-slider-content h1{font-size:clamp(1.5rem,7vw,2.2rem)}
 .hero-slide-cap{top:192px;left:16px}
}
/* --- Mobile (phones): the phone layout, without touching desktop ---
   The hero badge used to sit on top of the "WEB DESIGN & DEVELOPMENT"
   pill on phones (the .hero-slider .hero-badge rule outranked the
   phone badge rule); on phones it now sits below the pill instead, so
   neither covers the other. Hero buttons stack full-width for a clear
   thumb target, dots are bigger, menu links get taller tap areas, and
   nothing on the page may force sideways scrolling. */
@media (max-width:620px){
 .hero-slider .hero-badge{top:252px;right:16px;width:88px}
 .hero-slide-cap{max-width:calc(100% - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .hero-slider-content .ctas .btn{flex:1 1 100%;justify-content:center}
 .hero-dot{width:12px;height:12px}
 .hero-nav-btn{width:48px;height:48px}
 .mobile a{padding:10px 0}
 .mobile .sub a{padding:6px 0}
 html,body{overflow-x:clip}
 .svc-body{padding:24px 22px}
 .badge-panel{border-radius:22px}
 .lv-visual .lv-mobile{flex-basis:clamp(104px,26%,150px)}
}
@media (max-width:380px){
 header.nav{padding:11px 7px 11px 14px;gap:8px}
 .brand{gap:8px}
 .brand img{height:24px}
 .brand-word{font-size:.86rem}
 .hero-slide-cap{font-size:.62rem;letter-spacing:.1em;padding:8px 12px;top:188px}
 .hero-slider .hero-badge{width:76px;top:244px;right:12px}
 .hero-slider-content{padding:20px 16px 24px}
}
.ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.scroll{display:flex;align-items:center;gap:14px;margin-top:30px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}
.scroll i{width:1px;height:46px;background:#333;position:relative;overflow:hidden}
.scroll i::after{content:"";position:absolute;left:0;top:-100%;width:1px;height:100%;background:var(--teal);animation:sc 2s var(--ease) infinite}
@keyframes sc{to{top:100%}}
.float{position:absolute;pointer-events:none;will-change:transform}
/* marquee */
.marq{overflow:hidden;white-space:nowrap;border-block:1px solid var(--g2);padding:22px 0}
.dark .marq{border-color:#2a2a2a}
.marq div{display:inline-flex;animation:mq 38s linear infinite}
.marq span{font-family:'Archivo';font-size:clamp(1.6rem,4vw,3.6rem);font-weight:700;letter-spacing:-.04em;padding-right:2.4rem}
.marq span:nth-child(even){font-weight:300;color:var(--teal-d)}
@keyframes mq{to{transform:translateX(-50%)}}
/* intro */
.intro{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.intro .a{grid-column:1/9}.intro .b{grid-column:8/13;margin-top:6vw}.intro .c{grid-column:2/7;margin-top:-2vw}
/* services overview — editorial list/cards */
.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2vw,32px);margin-top:clamp(28px,3.4vw,48px)}
.card{position:relative;display:block;perspective:1000px;transform-style:preserve-3d}
.card .tilt{transition:transform .4s var(--ease);transform-style:preserve-3d;will-change:transform;border-top:1px solid currentColor;padding-top:18px}
.card .num{font-family:'Archivo';font-size:clamp(3rem,6vw,6rem);font-weight:300;letter-spacing:-.05em;line-height:1}
.card .im{overflow:hidden;margin-block:18px}
.card .im .art{transition:transform 1.2s var(--ease)}
.card:hover .im .art{transform:scale(1.07)}
.card .meta{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.card h3{font-size:clamp(1.3rem,2.2vw,2.2rem)}
.card p{margin-top:10px;max-width:42ch;font-size:.95rem}
.card .go{display:inline-flex;gap:10px;margin-top:16px;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.arrow{display:inline-flex;align-items:center;justify-content:center;flex:none;vertical-align:-.12em;transition:transform .5s var(--ease)}
.arrow svg{width:1em;height:1em;display:block}
.arrow--back{margin-right:8px}
a:hover>.arrow,.card:hover .arrow,.btn:hover .arrow,.pj:hover .arrow{transform:translate(4px,-4px)}
.backlink{display:inline-flex;align-items:center;gap:8px}
.backlink:hover .arrow{transform:translate(-3px,0)}
.s1{grid-column:1/7}.s2{grid-column:8/13;margin-top:8vw}.s3{grid-column:2/6}.s4{grid-column:7/13;margin-top:4vw}.s5{grid-column:1/6}.s6{grid-column:7/12;margin-top:8vw}
/* projects */
.drag{display:flex;gap:clamp(18px,2vw,32px);overflow-x:auto;padding:0 var(--edge) 20px;cursor:grab;scrollbar-width:none;user-select:none;-webkit-overflow-scrolling:touch}
.drag::-webkit-scrollbar{display:none}
.drag.grab{cursor:grabbing}
.pj{flex:none;display:block;position:relative}
.pj .im{overflow:hidden;position:relative}
.pj .im .art{transition:transform 1.2s var(--ease)}
.pj:hover .im .art{transform:scale(1.06)}
.pj.l{width:min(78vw,820px)}.pj.p{width:min(62vw,430px)}.pj.s{width:min(70vw,560px)}
.pj .inf{display:grid;grid-template-columns:1fr auto;gap:8px 20px;padding-top:16px}
.pj h3{font-size:1.5rem}
.pj .tags{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.pj p{grid-column:1/-1;font-size:.9rem;max-width:52ch}
.pj .go{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.sample{display:inline-block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid currentColor;padding:3px 8px;border-radius:99px}
.prog{height:1px;background:#2a2a2a;margin:20px var(--edge) 0;position:relative}
.prog i{position:absolute;left:0;top:0;height:1px;background:var(--teal);width:20%}
/* principles */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--g2)}
.grid4>div{padding:28px 24px 60px 0;border-right:1px solid var(--g2);padding-left:24px}
.grid4>div:first-child{padding-left:0}.grid4>div:last-child{border-right:0}
.grid4 .n{font-family:'Archivo';font-size:.8rem;letter-spacing:.14em}
.grid4 h3{font-size:clamp(1.3rem,2vw,2rem);margin:36px 0 12px}
/* process */
.proc{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px;padding-top:28px}
.proc .track{position:absolute;left:0;right:0;top:0;height:1px;background:#2a2a2a}
.proc .track i{display:block;height:1px;background:var(--teal);width:0}
.proc .st{position:relative;opacity:.35;transition:opacity .6s}
.proc .st.on{opacity:1}
.proc .st::before{content:"";position:absolute;left:0;top:-45px;width:9px;height:9px;border-radius:50%;background:#141414;border:1px solid #fff;transition:background .5s}
.proc .st.on::before{background:var(--teal)}
.proc .st .big{font-family:'Archivo';font-size:clamp(3rem,6vw,6rem);font-weight:300;letter-spacing:-.05em}
.proc h3{font-size:1.6rem;margin:10px 0}
/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stats .big{font-family:'Archivo';font-size:clamp(3rem,8vw,8.5rem);font-weight:700;letter-spacing:-.06em;line-height:1}
.stats small{display:block;margin-top:10px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.ph{font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:#777;margin-top:30px}
/* testimonials */
.tcard{flex:none;width:min(84vw,460px);background:var(--w);color:var(--k);padding:36px;min-height:360px;display:flex;flex-direction:column;justify-content:space-between}
.tcard q{font-family:'Archivo';font-size:1.4rem;line-height:1.2;letter-spacing:-.03em;quotes:none}
.tcard .who{display:flex;gap:14px;align-items:center;margin-top:30px}
.tcard .av{width:46px;height:46px;border-radius:50%;background:var(--k);color:var(--w);display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:700}
.tcard small{display:block;font-size:.72rem;color:var(--g);letter-spacing:.08em;text-transform:uppercase}
/* --- final CTA panel: the last section on every page. A matte-black
   rounded panel on the page background: headline + short lead on the
   left, and an action column (primary button, direct email / WhatsApp
   rows, reply-time note) on the right, split by a hairline. A photo
   fades in from the panel's right edge behind everything. --- */
.cta2{padding-block:clamp(48px,6vw,88px)}
.cta2-panel{position:relative;overflow:hidden;background:var(--k);color:var(--w);border:1px solid #262626;border-radius:36px;padding:clamp(38px,4.6vw,68px);display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(36px,4.5vw,76px);align-items:center}
.cta2-panel::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--teal);z-index:3}
.cta2-bg{position:absolute;top:0;right:0;bottom:0;width:58%;opacity:.15;pointer-events:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 58%);mask-image:linear-gradient(to right,transparent,#000 58%)}
.cta2-main{position:relative;z-index:1;min-width:0}
.cta2-panel .label{color:#e2e2e2}
.cta2-h{font-size:clamp(2.35rem,4.6vw,4.35rem);font-weight:800;letter-spacing:-.035em;line-height:1.03;margin-top:22px}
.cta2-h .light{color:#aeaeae}
.cta2-lead{margin-top:22px;font-size:clamp(1rem,1.25vw,1.13rem);line-height:1.65;color:#cfcfcf;max-width:46ch}
.cta2-side{position:relative;z-index:1;min-width:0;border-left:1px solid #2b2b2b;padding-left:clamp(28px,3.4vw,56px)}
.cta2-btn{width:100%;justify-content:center;padding:20px 30px;font-size:.85rem}
.cta2-or{display:flex;align-items:center;gap:14px;margin-top:26px;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#8a8a8a}
.cta2-or::before,.cta2-or::after{content:"";flex:1;height:1px;background:#2b2b2b}
.cta2-links{display:grid;gap:10px;margin-top:18px}
.cta2-link{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid #2f2f2f;border-radius:18px;transition:border-color .3s,background .3s}
.cta2-link:hover{border-color:var(--teal);background:rgba(0,200,207,.07)}
.cta2-link:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.cta2-ic{width:42px;height:42px;flex:none;border-radius:50%;background:var(--teal);color:#141414;display:flex;align-items:center;justify-content:center}
.cta2-ic svg{width:20px;height:20px;display:block}
.cta2-link-txt{min-width:0}
.cta2-link-txt small{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#8a8a8a}
.cta2-link-txt b{display:block;font-family:'Archivo';font-weight:600;font-size:1rem;margin-top:2px;overflow-wrap:anywhere}
.cta2-note{display:flex;gap:10px;align-items:flex-start;margin-top:20px;font-size:.86rem;line-height:1.55;color:#9a9a9a}
.cta2-dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--teal);box-shadow:0 0 0 5px rgba(0,200,207,.16);margin-top:5px}
@media (max-width:900px){
 .cta2-panel{grid-template-columns:1fr;gap:34px;border-radius:28px}
 .cta2-side{border-left:0;border-top:1px solid #2b2b2b;padding-left:0;padding-top:30px}
 .cta2-bg{width:100%;opacity:.09}
}
/* footer */
footer{background:var(--k);color:var(--w);padding:80px 0 30px;border-top:1px solid #1d1d1d}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.fgrid h4{font-size:.72rem;letter-spacing:.2em;font-family:'Inter';font-weight:500;color:#8a8a8a;margin-bottom:18px}
.fgrid li{list-style:none;margin-bottom:8px}
.fgrid a{font-size:.95rem}
.fbig{font-family:'Archivo';font-weight:700;letter-spacing:-.07em;text-transform:uppercase;font-size:clamp(3rem,15.5vw,18rem);line-height:.8;margin-top:70px;white-space:nowrap;overflow:hidden;color:#fff}
.fbot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:34px;font-size:.78rem;color:#8a8a8a}
.top-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #333;padding:10px 18px;border-radius:99px;color:#fff;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.top-btn:hover .arrow{transform:translateY(-3px)}
.top-btn:hover{background:#fff;color:#141414}
/* inner pages */
.phero{padding:118px var(--edge) 36px}
.phero.dark{padding-bottom:44px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,90px);align-items:center}
.two.top{align-items:start}
.sticky{position:sticky;top:130px}
.list{list-style:none}
.list li{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-top:1px solid var(--g2);font-size:1.05rem}
.list li:last-child{border-bottom:1px solid var(--g2)}
.list li span:first-child{font-family:'Archivo';font-size:.8rem;letter-spacing:.1em;color:var(--g)}
.list li b{font-weight:500;flex:1}
.dark .list li{border-color:#2a2a2a}.dark .list li:last-child{border-color:#2a2a2a}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.chip{border:1px solid currentColor;border-radius:99px;padding:9px 18px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;transition:background .4s,color .4s}
button.chip:hover,.chip.on{background:var(--k);color:var(--w)}
.dark button.chip:hover,.dark .chip.on{background:var(--w);color:var(--k)}
.masonry{columns:3;column-gap:clamp(18px,2vw,32px);margin-top:32px}
.masonry .pj{width:100%;break-inside:avoid;margin-bottom:clamp(30px,4vw,56px)}
.pj .ov{position:absolute;inset:0;background:rgba(0,0,0,.72);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;opacity:0;transition:opacity .5s;font-size:.9rem}
.pj:hover .ov{opacity:1}
.svc-sec{display:grid;grid-template-columns:1fr 1fr;min-height:0;border-top:1px solid var(--g2);padding:clamp(48px,6vw,96px) var(--edge);margin-bottom:clamp(32px,4vw,64px);column-gap:clamp(24px,3vw,48px)}
/* Services-page pictures: one fixed 4/3 box for all 7 rows, so no picture
   (and no row) is taller than the others. The .art layer is absolutely
   filled, so a portrait source can never stretch the box. */
.svc-sec .svc-vis{position:relative;width:100%;height:auto;min-height:0;aspect-ratio:4/3;align-self:center;overflow:hidden}
.svc-sec .svc-vis .art{position:absolute;inset:0;width:100%;height:100%}
.svc-sec .svc-txt{padding:0;display:flex;flex-direction:column;justify-content:center;gap:16px}
.faq details{border-top:1px solid var(--g2);padding:22px 0}
.faq details:last-child{border-bottom:1px solid var(--g2)}
.faq summary{list-style:none;cursor:pointer;font-family:'Archivo';font-size:1.3rem;letter-spacing:-.02em;display:flex;justify-content:space-between;gap:20px}
.faq summary::after{content:"+";transition:transform .4s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding-top:14px;max-width:62ch;color:#444}
.notice{border:1px solid currentColor;padding:22px 26px;font-size:.92rem;max-width:760px}
/* forms */
form .f{position:relative;margin-bottom:26px}
form label{display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px}
form input,form select,form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid #141414;padding:12px 0;font:inherit;font-size:1.1rem;color:inherit;border-radius:0;outline:0}
form select{appearance:none;cursor:pointer}
form input:focus,form select:focus,form textarea:focus{border-bottom-width:2px}
form textarea{min-height:120px;resize:vertical}
.err{display:none;font-size:.78rem;margin-top:6px;font-weight:500}
.f.bad .err{display:block}.f.bad input,.f.bad select,.f.bad textarea{border-bottom-style:dashed}
.ok{display:none;padding:30px;border:1px solid #141414}
/* article */
.art-body{max-width:720px;margin-inline:auto;font-size:1.15rem;line-height:1.7}
.art-body p{margin-bottom:1.4em}.art-body h3{font-size:1.8rem;margin:2em 0 .6em;line-height:1}
.art-body blockquote{font-family:'Archivo';font-size:1.8rem;letter-spacing:-.03em;line-height:1.15;border-left:2px solid #141414;padding-left:24px;margin:1.6em 0}
.feat{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end}
.acard{display:block}
.acard .im{overflow:hidden;margin-bottom:16px}.acard .im .art{transition:transform 1.2s var(--ease)}.acard:hover .im .art{transform:scale(1.06)}
.acard h3{font-size:1.5rem;margin:8px 0}
.agrid{display:grid;grid-template-columns:repeat(2,1fr);gap:36px clamp(18px,3vw,50px);margin-top:32px}
.agrid .acard:nth-child(3n+1){grid-column:1/-1}
.agrid .acard:nth-child(3n+1) .im{aspect-ratio:21/9}
.nf{min-height:100svh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:30px}
/* stack steps */
.steps{counter-reset:s}
.steps .stp{display:grid;grid-template-columns:90px 1fr 1.4fr;gap:20px;padding:30px 0;border-top:1px solid var(--g2)}
.dark .steps .stp{border-color:#2a2a2a}
.steps .stp:last-child{border-bottom:1px solid var(--g2)}
.steps h4{font-size:1.5rem}
/* responsive */
@media (max-width:1000px){
 nav.center,.talk{display:none}.burger{display:block}

 .hero .row,.two,.feat,.svc-sec,.fgrid{grid-template-columns:1fr}
 .svc-sec .svc-vis{height:auto;min-height:0;aspect-ratio:4/3;align-self:stretch}
 .intro .a,.intro .b,.intro .c{grid-column:1/-1;margin-top:0}
 .svc-grid>*{grid-column:1/-1!important;margin-top:0!important}
 .grid4,.stats,.proc{grid-template-columns:1fr 1fr}
 .grid4>div{border-right:0;border-bottom:1px solid var(--g2);padding-left:0}.grid4 h3{margin-top:30px}
 .masonry{columns:2}.sticky{position:static}
 .steps .stp{grid-template-columns:50px 1fr}.steps .stp p{grid-column:2}
}
@media (max-width:620px){
 .masonry{columns:1}.agrid{grid-template-columns:1fr}.proc,.stats,.grid4{grid-template-columns:1fr}
 .btn{padding:16px 22px}.tcard{padding:26px}
 .hero{padding-top:0}.hero .vis{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}
.h-hero{font-size:clamp(2.1rem,7.1vw,8.8rem)}


:root{--r-lg:28px;--r-md:20px}
/* No separate max-width/margin on .wrap: --edge above already centres the
   1680px column, so a second centring here would double the inset. */
h1,h2,h3,h4,.d{font-weight:800}
.h-xxl{font-size:clamp(3rem,9.6vw,11rem);line-height:.94}
.h-xl{font-size:clamp(2.5rem,7.2vw,7.6rem);line-height:.96}
.h-l{font-size:clamp(2rem,4.8vw,5rem);line-height:.98}
.lead{font-weight:400}
.kicker{display:inline-flex;align-items:center;gap:10px}
.kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--teal);flex:none}
.rv-anim{animation:rvUp .8s var(--ease) both}
@keyframes rvUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
/* --- infinite text slide --- */
.textslide{background:#fff;overflow:hidden;padding:clamp(18px,2.4vw,32px) 0;border-block:1px solid #ececec}
.ts-row{overflow:hidden;white-space:nowrap}
.ts-row+.ts-row{margin-top:clamp(10px,1.5vw,20px)}
.ts-track{display:flex;width:max-content;animation:tsScroll 38s linear infinite}
.ts-row.rev .ts-track{animation-direction:reverse;animation-duration:46s}
.textslide:hover .ts-track{animation-play-state:paused}
.ts-group{display:inline-flex;align-items:center;gap:clamp(18px,3vw,44px);padding-right:clamp(18px,3vw,44px);flex:none}
.ts-word{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.045em;line-height:1;font-size:clamp(2.4rem,7vw,6.4rem);white-space:nowrap}
.ts-word.thin{font-weight:400;color:#9a9a9a}
.ts-img{flex:none;width:clamp(110px,14vw,220px);height:clamp(58px,7.5vw,112px);border-radius:18px;overflow:hidden;background:#fff}
.ts-img img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes tsScroll{to{transform:translateX(-50%)}}
/* --- decorative orb --- */
.orb{pointer-events:none;flex:none}
.orb svg{display:block;width:100%;height:auto;animation:orbFloat 7s ease-in-out infinite}
@keyframes orbFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(10deg)}}
/* --- about --- */
.about-modern{overflow:hidden}
.about-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-top:22px}
.about-h{font-size:clamp(2.6rem,6.4vw,6.8rem);max-width:14ch}
.about-orb{width:clamp(130px,17vw,250px);margin-top:-8px}
/* Balanced two-column row: the picture is no longer the tall 4/5 box.
   It now sits in a shorter 4/3 landscape frame beside the text, both
   sides vertically centred, so neither side towers over the other. */
.about-row{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,3.5vw,56px);margin-top:clamp(28px,3.4vw,48px);align-items:center}
.about-img{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:#fff;box-shadow:0 24px 48px rgba(20,20,20,.14);min-width:0}
.about-img::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--teal);z-index:1}
.about-img img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;display:block}
.about-txt{min-width:0}
.about-txt p:not(.lead){color:#444;line-height:1.65}
.about-txt .btn{margin-top:28px}
/* Stats are a full-width row under the picture + text (moved out of the
   text column in aboutModern), so all four figures get even room. */
.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.5vw,32px);margin-top:clamp(28px,3.4vw,44px);border-top:1px solid #e3e3e3;padding-top:clamp(20px,2.4vw,28px)}
.about-stats .num{font-family:'Archivo';font-weight:900;font-size:clamp(2rem,3.8vw,3.6rem);letter-spacing:-.05em;line-height:1}
.about-stats small{display:block;margin-top:8px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#777}
.about-note{grid-column:1/-1;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#999}
/* --- services --- */
.svc-modern{background:#141414;color:#fff;overflow:clip}
.svc-head{position:relative}
.svc-orb{position:absolute;right:0;top:0;width:clamp(120px,16vw,230px);opacity:.95}
.svc-h{font-size:clamp(3rem,9vw,9.5rem);margin-top:22px;max-width:12ch}
.svc-h .light{color:#8f8f8f}
.svc-intro{margin-top:20px;max-width:58ch;color:#bdbdbd;line-height:1.6;font-size:1.05rem}
.svc-cards{display:flex;flex-direction:column;gap:clamp(18px,2vw,28px);margin-top:clamp(32px,4vw,56px)}
.svc-card{position:relative;display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch;background:#141414;border:1px solid #262626;border-radius:24px;overflow:hidden;transition:transform .45s var(--ease),border-color .35s,box-shadow .45s var(--ease)}
.svc-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:2}
.svc-card:hover,.svc-card:focus-within{transform:translateY(-6px);border-color:var(--teal);box-shadow:0 24px 50px rgba(0,200,207,.12)}
.svc-card:hover::before,.svc-card:focus-within::before{transform:scaleX(1)}
/* Service pictures in natural colour only: no duotone, tint, overlay or filter.
   All 7 homepage pictures share one fixed 4/3 box: the <img> is absolutely
   filled with object-fit:cover, so the two portrait sources (marketing,
   profile) can no longer make their cards long/tall, and no picture is
   stretched or distorted. align-self:center stops the box stretching
   to match a taller text side. */
.svc-card-img{position:relative;display:block;overflow:hidden;background:#141414;flex:none;width:100%;height:auto;min-height:0;aspect-ratio:4/3;align-self:center}
.svc-card-img::after{content:none}
.svc-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;filter:none;transition:transform 1s var(--ease)}
.svc-card:hover .svc-card-img img{transform:scale(1.04)}
.svc-body{display:flex;flex-direction:column;flex:1;padding:clamp(26px,3vw,44px);justify-content:center}
.svc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.svc-num{font-family:'Archivo';font-weight:900;font-size:clamp(2rem,3vw,2.8rem);letter-spacing:-.04em;line-height:1;color:#fff;transition:color .3s}
.svc-card:hover .svc-num,.svc-card:focus-within .svc-num{color:var(--teal)}
.svc-arrow{width:46px;height:46px;flex:none;border-radius:50%;border:1px solid #333;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.15rem;transition:background .3s,color .3s,border-color .3s,transform .4s var(--ease)}
.svc-arrow svg{width:1em;height:1em;display:block}
.svc-card:hover .svc-arrow{ background:var(--teal);border-color:var(--teal);color:#141414;transform:translate(3px,-3px)}
.svc-body h3{font-size:clamp(1.35rem,1.9vw,1.75rem);line-height:1.08;margin-top:18px}
.svc-body h3 a:hover{color:var(--teal)}
.svc-body h3 a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.svc-desc{margin-top:12px;color:#bdbdbd;line-height:1.6;font-size:.98rem}
.svc-deliv-label{margin-top:22px;font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:#888}
.svc-deliv{list-style:none;margin-top:10px;padding-top:6px;border-top:1px solid #262626;flex:1}
.svc-deliv li{display:flex;gap:10px;padding:7px 0;font-size:.92rem;line-height:1.5;color:#d9d9d9}
.svc-deliv li::before{content:"\2726";color:var(--teal);flex:none}
.svc-cta{margin-top:24px;display:inline-flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 20px;border:1px solid #333;border-radius:99px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#fff;transition:background .3s,color .3s,border-color .3s}
.svc-cta:hover{background:var(--teal);border-color:var(--teal);color:#141414}
.svc-cta:hover .arrow{transform:translate(4px,-4px)}
.svc-cta:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.svc-all{display:flex;justify-content:center;margin-top:clamp(28px,3vw,40px)}
/* --- sticky stacking service cards (homepage Services section only) ---
   Each card sticks at the same top offset below the fixed header pill, so
   card 1 stays put while card 2 scrolls up over it and sticks in its
   place, then 3 over 2, and so on through all 7. Later cards paint above
   earlier ones (rising z-index). Once the last card is reached the whole
   section scrolls away normally. Sticky is off on narrow/short viewports,
   where the tall stacked cards would hide their own footers behind the
   next card — there the cards scroll normally. */
@media (min-width:761px) and (min-height:620px){
  /* Block layout (not flex column) so position:sticky is not affected by
     flex-item sizing, with the same gap as margin between cards. Sticky
     is positioning, not motion, so it is not gated on reduced motion. */
  .svc-cards{display:block}
  .svc-card{position:sticky;top:108px;margin-bottom:clamp(18px,2vw,28px)}
  .svc-card:last-child{margin-bottom:0}
  .svc-card:nth-child(1){z-index:1}
  .svc-card:nth-child(2){z-index:2;box-shadow:0 -18px 44px rgba(0,0,0,.5)}
  .svc-card:nth-child(3){z-index:3;box-shadow:0 -18px 44px rgba(0,0,0,.5)}
  .svc-card:nth-child(4){z-index:4;box-shadow:0 -18px 44px rgba(0,0,0,.5)}
  .svc-card:nth-child(5){z-index:5;box-shadow:0 -18px 44px rgba(0,0,0,.5)}
  .svc-card:nth-child(6){z-index:6;box-shadow:0 -18px 44px rgba(0,0,0,.5)}
  .svc-card:nth-child(7){z-index:7;box-shadow:0 -18px 44px rgba(0,0,0,.5)}
  .svc-card:hover,.svc-card:focus-within{transform:none}
}
/* Service-page rows: text on the left, natural-colour picture on the right, in every row. */
.svc-sec .svc-vis img{filter:none;object-position:50% 30%}
.svc-sec .art-natural img{filter:none;object-position:50% 30%}
/* --- LinkedIn verification badge --- */
.badge-panel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);background:#141414;border:1px solid #262626;border-radius:28px;padding:clamp(26px,3.4vw,52px);overflow:hidden;position:relative}
.badge-panel::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--teal)}
.badge-h{font-size:clamp(2rem,4.6vw,4.6rem);margin-top:20px}
.badge-h .light{color:#8f8f8f}
.badge-points{list-style:none;margin-top:clamp(22px,2.6vw,32px)}
.badge-points li{display:flex;align-items:center;gap:16px;padding:14px 0;border-top:1px solid #262626;font-family:'Archivo';font-weight:700;font-size:clamp(1.05rem,1.7vw,1.35rem);letter-spacing:-.02em;line-height:1.2}
.badge-points li:last-child{border-bottom:1px solid #262626}
.badge-check{width:36px;height:36px;flex:none;border-radius:50%;background:var(--teal);color:#141414;display:flex;align-items:center;justify-content:center}
.badge-check svg{width:18px;height:18px;display:block}
.badge-ctas{margin-top:clamp(22px,2.6vw,30px)}
.badge-disclaimer{margin-top:22px;padding-top:18px;border-top:1px solid #262626;font-size:.82rem;line-height:1.65;color:#9a9a9a;max-width:62ch}
/* --- LinkedIn verification: supplied phone mockup image --- */
.badge-visual{display:flex;align-items:flex-start;justify-content:center;min-width:0}
.linkedin-mockup{display:block;width:100%;max-width:500px;height:auto;border-radius:24px;box-shadow:0 24px 50px rgba(0,0,0,.55)}
@media (max-width:900px){.badge-panel{grid-template-columns:1fr}.badge-visual{margin-top:6px}.linkedin-mockup{max-width:440px}}
/* --- LinkedIn Verification page --- */
.lv-hero{background:var(--k);color:var(--w);padding:150px var(--edge) clamp(44px,6vw,88px)}
.lv-hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,64px);align-items:center;margin-top:28px}
.lv-h{font-size:clamp(2.3rem,5.2vw,5rem)}
.lv-hero .lead{margin-top:22px;color:#d9d9d9}
.lv-hero .badge-points{margin-top:clamp(20px,2.4vw,28px)}
.lv-hero .badge-points li{font-size:clamp(1rem,1.5vw,1.25rem)}
.lv-hero .badge-ctas{margin-top:clamp(22px,2.6vw,30px)}
/* Hero visual: only the phone mockup from the home verification
   section, large and centred in its column. */
.lv-visual{display:flex;align-items:center;justify-content:center;min-width:0}
.lv-visual img{width:100%;height:auto;border-radius:24px;border:1px solid #262626;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.lv-visual .lv-mobile{flex:0 1 460px;max-width:min(460px,88vw);min-width:0}
@media (max-width:900px){.lv-hero{padding-top:132px}.lv-hero-grid{grid-template-columns:1fr}.lv-visual{max-width:460px;margin-inline:auto}}
/* --- Satisfied Clients: three-row marquee (LinkedIn Verification page) ---
   Three horizontal rows of client pictures with names underneath, the
   33 clients split 7 / 13 / 13 across the rows (the live page's
   arrangement), with about six pictures visible per row at a time.
   The rows auto-slide continuously in
   alternating directions — rows 1 and 3 right to left, row 2 left to
   right (same keyframes, animation-direction:reverse) — in a seamless
   loop (track duplicated, -50% travel), CSS-only so it never depends
   on JS or a CDN, and pauses on hover / focus. No arrows, dots,
   counter or paging. The section clips its
   own overflow so the moving tracks can never widen the page. */
.lv-clients{background:#fff;overflow:hidden}
.lv-clients-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.lv-clients-h{font-size:clamp(2.2rem,5vw,4.6rem);margin-top:20px}
.lv-clients-rows{display:flex;flex-direction:column;gap:clamp(22px,3vw,36px);margin-top:clamp(28px,3.4vw,44px)}
.lv-clients-row{position:relative;overflow:hidden}
.lv-clients-row::before,.lv-clients-row::after{content:"";position:absolute;top:0;bottom:0;width:clamp(40px,8vw,130px);z-index:3;pointer-events:none}
.lv-clients-row::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.lv-clients-row::after{right:0;background:linear-gradient(-90deg,#fff,rgba(255,255,255,0))}
.lv-clients-track{display:flex;width:max-content;will-change:transform;animation:lvClientsScroll 44s linear infinite}
.lv-clients-row:nth-child(2) .lv-clients-track{animation-duration:52s;animation-direction:reverse}
.lv-clients-row:nth-child(3) .lv-clients-track{animation-duration:60s}
.lv-clients-row:hover .lv-clients-track,.lv-clients-row:focus-within .lv-clients-track{animation-play-state:paused}
.lv-clients-group{display:flex;gap:clamp(20px,2.6vw,36px);padding-right:clamp(20px,2.6vw,36px);flex:none}
.lv-client{flex:none;width:14vw;min-width:128px;margin:0;text-align:center}
.lv-client-img{display:block;width:11vw;min-width:104px;aspect-ratio:1;margin-inline:auto;border-radius:50%;overflow:hidden;background:#141414;border:3px solid var(--teal);box-shadow:0 14px 30px rgba(0,0,0,.16)}
.lv-client-img img{width:100%;height:100%;object-fit:cover;display:block}
.lv-client-img .lv-client-initial{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:800;font-size:2rem;color:#fff;background:#141414}
.lv-client figcaption{margin-top:12px;font-family:'Archivo',sans-serif;font-weight:700;font-size:.92rem;line-height:1.3;letter-spacing:-.01em;color:#141414;overflow-wrap:break-word}
@keyframes lvClientsScroll{to{transform:translateX(-50%)}}
@media (max-width:520px){.lv-clients-group{gap:18px;padding-right:18px}.lv-client{width:118px}.lv-client-img{width:92px}.lv-client figcaption{font-size:.8rem;margin-top:10px}.lv-clients-track{animation-duration:36s}.lv-clients-row:nth-child(2) .lv-clients-track{animation-duration:42s}.lv-clients-row:nth-child(3) .lv-clients-track{animation-duration:48s}}
@media (prefers-reduced-motion:reduce){.lv-clients-track{animation:none}}
/* --- project website pictures: one scroll-driven horizontal row --- */
.proj-sec{overflow:clip}
.proj-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hscroll-pin{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.4vh,26px)}
.hscroll-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
.hscroll-viewport::-webkit-scrollbar{display:none}
.hscroll-viewport.grab{cursor:grabbing}
.hscroll-track{display:flex;gap:clamp(16px,2vw,28px);width:max-content;will-change:transform;padding:4px var(--edge) 18px}
.hscroll-track .site-card{flex:0 0 clamp(300px,42vw,520px);scroll-snap-align:start}
.site-card{background:#fff;border:1px solid #e6e6e6;border-radius:22px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.08);transition:transform .4s var(--ease),box-shadow .4s}
.site-card:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(0,0,0,.14)}
.site-shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:#fff}
.site-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.site-card:hover .site-shot img{transform:scale(1.03)}
.site-chip{position:absolute;left:14px;bottom:14px;background:#141414;color:#fff;border-radius:99px;padding:6px 12px;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.site-meta{padding:20px 22px 24px;display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:start}
.site-meta h3{font-size:1.35rem}
.site-meta .tags{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#888;grid-column:1/-1}
.site-meta .sample{justify-self:end}
.hscroll-foot{display:flex;align-items:center;gap:clamp(16px,2.5vw,32px)}
.hscroll-count{font-family:'Archivo','Inter',sans-serif;font-weight:700;font-size:.85rem;letter-spacing:.08em;white-space:nowrap;color:#141414}
.hscroll-count b{color:var(--teal-d)}
.hscroll-progress{flex:1;height:2px;background:#e6e6e6;border-radius:99px;overflow:hidden}
.hscroll-fill{display:block;height:100%;width:100%;background:var(--teal);transform:scaleX(0);transform-origin:left center}
.hscroll .proj-nav{margin-top:0}
.hscroll.is-pinned{padding-block:0}
.hscroll.is-pinned .hscroll-pin{position:sticky;top:0;height:100svh;height:100dvh}
.hscroll.is-pinned .hscroll-viewport{overflow:hidden;scroll-snap-type:none}
.hscroll.is-pinned .hscroll-track .site-card{flex-basis:clamp(280px,34vw,460px)}
@media (max-width:760px){
 .hscroll-track .site-card,.hscroll.is-pinned .hscroll-track .site-card{flex-basis:82vw}
 .hscroll-count{display:none}
}
.proj-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:2px}
.proj-btn{width:52px;height:52px;border-radius:50%;border:1px solid #141414;display:flex;align-items:center;justify-content:center;font-size:1.3rem;transition:.3s;background:#fff}
.proj-btn:hover{background:#141414;color:#fff}
/* --- Work page: the same 12 website pictures as the home slider, as a large grid --- */
.work-sites{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-top:clamp(28px,3.4vw,44px)}
.work-sites .site-card{flex:none;width:100%;min-width:0}
.work-sites .site-shot img{filter:none}
.work-sites-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
/* Projects page only: the two headings in the screenshot, smaller and
   medium-weight so each fits on one line on desktop. The teal focusing
   word is kept; no other page's headings use these classes. */
.work-hero-h{font-size:clamp(1.9rem,3.8vw,3.25rem);font-weight:500;line-height:1.08;letter-spacing:-.03em}
.work-sub-h{font-size:clamp(1.55rem,2.7vw,2.45rem);font-weight:500;line-height:1.12;letter-spacing:-.03em}
.work-hero-h .light,.work-sub-h .light{font-weight:500}
@media (min-width:761px){
 .work-hero-h,.work-sub-h{white-space:nowrap}
 .work-pictures-head{flex-wrap:nowrap}
 .work-pictures-title{flex:1 1 auto;min-width:0}
}
@media (max-width:760px){.work-sites{grid-template-columns:minmax(0,1fr)}}
/* --- Social Media Design gallery (Projects page): supplied design grids --- */
/* Each grid is shown whole, at its natural aspect ratio, with colours
   preserved: no crop, no overlay and no filter, so no brand name or
   artwork inside a grid is covered or altered. Labels sit below the
   picture, never on top of it. */
.social-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-top:clamp(28px,3.4vw,44px)}
.ecom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-top:clamp(28px,3.4vw,44px)}
@media (max-width:1100px){.social-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.social-card,.ecom-card{background:#fff;border:1px solid #e6e6e6;border-radius:22px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.08);min-width:0}
.social-shot,.ecom-shot{background:#fff}
.social-shot img,.ecom-shot img{width:100%;height:auto;display:block;filter:none}
.social-meta,.ecom-meta{padding:20px 22px 24px;display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:start}
.social-meta h3,.ecom-meta h3{font-size:1.35rem}
.social-meta .tags,.ecom-meta .tags{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#888;grid-column:1/-1}
.social-meta .sample,.ecom-meta .sample{justify-self:end}
@media (max-width:760px){.social-grid,.ecom-grid{grid-template-columns:minmax(0,1fr)}}
/* --- FAQ --- */
.faq-sec{background:var(--o)}
.faq-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4vw,56px);align-items:start}
.faq-h{font-size:clamp(2.6rem,6vw,5.8rem);margin-top:20px}
.faq-h .light{color:#8a8a8a}
.faq-cta{background:#141414;color:#fff;border-radius:28px;padding:clamp(26px,3vw,40px);margin-top:clamp(24px,3vw,36px);max-width:460px}
.faq-cta h3{font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1.05}
.faq-cta p{margin-top:12px;color:#bdbdbd}
.faq-cta .btn{margin-top:24px;background:#fff;color:#141414;border-color:#fff}
.faq-cta .btn::before{background:var(--teal)}
.faq-cta .btn:hover{color:#141414}
.faq-list{display:flex;flex-direction:column;gap:16px}
.faq-card{background:#fff;border:1px solid #e8e8e8;border-radius:20px;overflow:hidden;transition:box-shadow .3s,border-color .3s}
.faq-card.open{border-color:#141414;box-shadow:0 18px 40px rgba(0,0,0,.08)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;text-align:left;padding:clamp(20px,2.4vw,28px);font-family:'Archivo';font-weight:700;font-size:clamp(1.05rem,1.8vw,1.45rem);letter-spacing:-.02em;line-height:1.25}
.faq-ic{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid #141414;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:400;transition:transform .4s var(--ease),background .3s,color .3s}
.faq-card.open .faq-ic{background:#141414;color:#fff;transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq-card.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 clamp(20px,2.4vw,28px) clamp(22px,2.6vw,30px);color:#555;line-height:1.65;max-width:62ch}
/* --- contact --- */
.contact-hero{padding-bottom:40px}
.contact-modern{display:grid;grid-template-columns:5fr 7fr;gap:clamp(20px,2.6vw,32px);padding-bottom:clamp(44px,5vw,72px);align-items:stretch}
.contact-left{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,32px);min-width:0}
.contact-top{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(16px,2vw,24px)}
.assist-card{background:#fff;border:1px solid #e6e6e6;border-radius:28px;padding:clamp(24px,2.6vw,36px)}
.assist-card h3{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.05}
.assist-card .sub{margin-top:10px;color:#777}
.assist-actions{margin-top:24px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.assist-actions .mail{font-size:.9rem;color:#555;overflow-wrap:anywhere}
.assist-actions .mail a{color:#141414;font-weight:600}
.avail-card{background:#fff;border:1px solid #e6e6e6;border-radius:28px;padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:16px}
.avail-ava{width:72px;height:72px;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 0 0 1px #e3e3e3;background:#141414;display:flex;align-items:center;justify-content:center}
.avail-ava img{width:100%;height:100%;object-fit:cover}
.avail-card p{font-size:1.05rem;line-height:1.45}
.projects-card{background:#141414;color:#fff;border-radius:28px;padding:clamp(24px,2.6vw,36px);overflow:hidden}
.projects-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.projects-head h3{font-size:clamp(1.5rem,2.4vw,2.1rem)}
.projects-head .btn{background:#fff;color:#141414;border-color:#fff}
.projects-head .btn::before{background:var(--teal)}
.collage{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px;margin-top:26px}
.collage div{border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:#1a1a1a}
.collage div:first-child{aspect-ratio:16/10}
.collage img{width:100%;height:100%;object-fit:cover;display:block}
.projects-card .note{margin-top:18px;color:#9a9a9a;font-size:.85rem}
.form-card{background:#141414;color:#fff;border-radius:28px;padding:clamp(26px,3.4vw,52px);min-width:0}
.form-card .resp{display:flex;align-items:center;gap:10px;font-size:.85rem;color:#bdbdbd}
.form-card .resp i{width:9px;height:9px;border-radius:50%;background:var(--teal);flex:none;box-shadow:0 0 0 5px rgba(0,200,207,.18)}
.form-card h2{font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.02;margin-top:18px;max-width:16ch}
.form-card form{margin-top:26px}
.form-card form label{color:#bdbdbd}
.form-card form input,.form-card form select,.form-card form textarea{color:#fff;border-bottom:1px solid #333}
.form-card form input::placeholder,.form-card form textarea::placeholder{color:#777}
.form-card form select option{color:#141414;background:#fff}
.form-card form input:focus,.form-card form select:focus,.form-card form textarea:focus{border-bottom-color:var(--teal)}
.form-card .err{color:#fff}
.form-card .f.bad input,.form-card .f.bad select,.form-card .f.bad textarea{border-bottom-color:var(--teal)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.form-card .news{display:flex!important;align-items:center;gap:12px;font-size:.95rem!important;letter-spacing:0!important;text-transform:none!important;color:#d9d9d9!important;cursor:pointer;margin:6px 0 26px}
.form-card .news input{width:20px!important;height:20px;flex:none;padding:0;border:0;accent-color:var(--teal);cursor:pointer}
.form-card .btn.submit{width:100%;justify-content:center;background:#fff;color:#141414;border-color:#fff;padding:19px 30px}
.form-card .btn.submit::before{background:var(--teal)}
.form-card .btn.submit:hover{color:#141414}
.form-card .ok{background:#111;border-color:#333;color:#fff}
/* --- Contact form redesign: large rounded card, floating labels, teal focus --- */
.contact-modern{align-items:start}
.assist-card,.avail-card{border-radius:32px;box-shadow:0 18px 40px rgba(0,0,0,.08)}
.assist-card{position:relative;overflow:hidden}
.assist-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--teal)}
.projects-card{border-radius:32px;box-shadow:0 24px 48px rgba(0,0,0,.28)}
.form-card{border-radius:36px;padding:clamp(32px,4vw,56px);border:1px solid #1c1c1c;box-shadow:0 32px 64px rgba(0,0,0,.28),0 4px 16px rgba(0,0,0,.18);position:relative;overflow:hidden}
.form-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--teal);z-index:1}
.form-card .resp{display:inline-flex;width:fit-content;background:rgba(0,200,207,.12);border:1px solid rgba(0,200,207,.4);border-radius:99px;padding:10px 18px;color:#d9d9d9}
.form-card h2{margin-top:22px;max-width:18ch}
.form-card form{margin-top:34px;display:flex;flex-direction:column;gap:22px}
.form-card form .f{margin-bottom:0}
.form-card .f-grid{gap:22px}
.form-card .float-field{position:relative}
.form-card .float-field input,.form-card .float-field select,.form-card .float-field textarea{width:100%;background:#161616;border:1px solid #2b2b2b;border-radius:18px;color:#fff;padding:30px 20px 12px;font-size:1.02rem;line-height:1.4;outline:0;transition:border-color .3s,box-shadow .3s,background .3s;appearance:none;-webkit-appearance:none}
.form-card .float-field textarea{min-height:150px;resize:vertical;padding-top:34px}
.form-card .float-field select{cursor:pointer;padding-right:52px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2300c8cf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 20px center;background-size:14px}
.form-card .float-field select option{color:#141414;background:#fff}
.form-card .float-field label{position:absolute;left:20px;top:23px;z-index:1;font-size:1rem;letter-spacing:.02em;text-transform:none;font-weight:500;color:#8f8f8f;pointer-events:none;transition:top .25s var(--ease),font-size .25s var(--ease),letter-spacing .25s var(--ease),color .25s}
.form-card .float-field input:focus+label,.form-card .float-field input:not(:placeholder-shown)+label,.form-card .float-field input:-webkit-autofill+label,.form-card .float-field textarea:focus+label,.form-card .float-field textarea:not(:placeholder-shown)+label,.form-card .float-field.is-select label{top:11px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#8f8f8f}
.form-card .float-field input:focus+label,.form-card .float-field textarea:focus+label,.form-card .float-field.is-select select:focus+label{color:var(--teal)}
.form-card .float-field input:focus,.form-card .float-field select:focus,.form-card .float-field textarea:focus{border-color:var(--teal);background:#1a1a1a;box-shadow:0 0 0 4px rgba(0,200,207,.18)}
.form-card .float-field input:hover,.form-card .float-field select:hover,.form-card .float-field textarea:hover{border-color:#4a4a4a}
.form-card .f.bad input,.form-card .f.bad select,.form-card .f.bad textarea{border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.14)}
.form-card .f.bad label{color:#fff}
.form-card .err{margin-top:8px;padding-left:4px;font-size:.82rem;color:#fff}
.form-card .field-hint{margin-top:-12px;padding-left:4px;font-size:.85rem;line-height:1.55;color:#9a9a9a}
.form-card .news{display:flex!important;align-items:center;gap:12px;font-size:.95rem!important;letter-spacing:0!important;text-transform:none!important;color:#d9d9d9!important;cursor:pointer;margin:0!important;background:#161616;border:1px solid #2b2b2b;border-radius:16px;padding:16px 18px;transition:border-color .3s}
.form-card .news:hover{border-color:var(--teal)}
.form-card .news input{width:22px!important;height:22px;flex:none;padding:0;border:0;accent-color:var(--teal);cursor:pointer}
.form-card .btn.submit{width:100%;justify-content:center;background:var(--teal);color:#141414;border:1px solid var(--teal);border-radius:999px;padding:21px 30px;font-size:.85rem;letter-spacing:.16em;font-weight:800;box-shadow:0 16px 34px rgba(0,200,207,.35);margin-top:6px;transition:transform .3s var(--ease),box-shadow .3s,background .3s}
.form-card .btn.submit::before{background:#fff}
.form-card .btn.submit:hover{color:#141414;transform:translateY(-2px);box-shadow:0 20px 40px rgba(0,200,207,.45)}
.form-card .btn.submit:focus-visible{outline:2px solid #fff;outline-offset:4px}
.form-card .ok{border-radius:20px;padding:32px}
/* Contact form heading OUTSIDE the dark box: the response-time pill and
   the "Tell Us About Your Project" heading sit in .form-head on the pure
   white page background above the box, so .form-card itself holds only
   the form fields and the Submit button. The pill keeps its teal tint
   but takes dark text now that it sits on white. */
.form-col{min-width:0}
.form-head{margin-bottom:clamp(22px,2.6vw,34px)}
.form-head .resp{display:inline-flex;align-items:center;gap:10px;width:fit-content;background:rgba(0,200,207,.12);border:1px solid rgba(0,200,207,.45);border-radius:99px;padding:10px 18px;font-size:.85rem;color:#141414}
.form-head .resp i{width:9px;height:9px;border-radius:50%;background:var(--teal);flex:none;box-shadow:0 0 0 5px rgba(0,200,207,.18)}
.form-head h2{font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.02;margin-top:18px;max-width:18ch;color:#141414}
.form-head + .form-card form{margin-top:0}
/* Contact details beside the form: icon-led rows in a soft-shadow card. */
.contact-details{background:#fff;border:1px solid #e6e6e6;border-radius:32px;box-shadow:0 18px 40px rgba(0,0,0,.08);overflow:hidden}
.cd-row{display:flex;align-items:center;gap:16px;padding:20px 24px;border-top:1px solid #eee;min-width:0}
.cd-row:first-child{border-top:0}
a.cd-row{transition:background .3s}
a.cd-row:hover{background:#f7f7f7}
.cd-icon{width:48px;height:48px;flex:none;border-radius:50%;background:var(--teal);color:#141414;display:flex;align-items:center;justify-content:center}
.cd-icon svg{width:22px;height:22px;display:block}
.cd-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.cd-label{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#888;font-weight:600}
.cd-value{font-weight:700;font-size:1.02rem;line-height:1.35;overflow-wrap:anywhere}
.cd-value.cd-plain{font-weight:400;color:#555}
.cd-value a{font-weight:600}
.cd-value a:first-child{margin-left:0!important}
.cd-arrow{margin-left:auto;flex:none;color:var(--teal-d);font-size:1.1rem;display:inline-flex}
.cd-arrow svg{width:1em;height:1em;display:block}
@media (max-width:520px){.cd-row{padding:16px 18px}.cd-icon{width:42px;height:42px}.cd-value{font-size:.95rem}}
/* --- pricing --- */
.pricing-sec{background:var(--o)}
.pricing-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.pricing-h{font-size:clamp(2.6rem,6vw,5.8rem);margin-top:20px}
.pricing-h .light{color:#8a8a8a}
.price-note{max-width:44ch;color:#555;line-height:1.6}
.price-tabs{display:inline-flex;gap:4px;background:#fff;border:1px solid #e3e3e3;border-radius:99px;padding:4px;margin-top:clamp(20px,2.4vw,28px)}
.price-tab{padding:12px 26px;border-radius:99px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;transition:.3s}
.price-tab.on{background:#141414;color:#fff}
.price-tab:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.price-save{display:none;margin:16px 0 0;font-size:.85rem;color:var(--teal-d);font-weight:600}
.pricing.yearly .price-save{display:block}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px);margin-top:clamp(22px,2.6vw,32px);align-items:stretch}
.price-card{background:#fff;border:1px solid #e6e6e6;border-radius:28px;padding:clamp(26px,3vw,38px);display:flex;flex-direction:column}
.price-card.dark{background:#141414;color:#fff;border-color:#141414}
.price-card h3{font-size:clamp(1.4rem,2vw,1.9rem);line-height:1.05}
.price-card .for{margin-top:10px;color:#777}
.price-card.dark .for{color:#bdbdbd}
.price-amt{font-family:'Archivo';font-weight:900;letter-spacing:-.04em;line-height:1;font-size:clamp(2.6rem,4.4vw,4rem);margin-top:24px}
.price-amt small{font-size:.32em;font-weight:500;letter-spacing:0;color:#777}
.price-card.dark .price-amt small{color:#bdbdbd}
.amt-y{display:none}
.pricing.yearly .amt-m{display:none}
.pricing.yearly .amt-y{display:inline}
.bill{margin-top:8px;font-size:.85rem;color:#777}
.price-card.dark .bill{color:#bdbdbd}
.bill-y{display:none}
.pricing.yearly .bill-m{display:none}
.pricing.yearly .bill-y{display:block}
.price-tag{display:inline-flex;align-self:flex-start;margin-top:16px;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid currentColor;padding:4px 10px;border-radius:99px}
.price-feats{list-style:none;margin-top:26px;border-top:1px solid #e6e6e6;padding-top:8px;flex:1}
.price-card.dark .price-feats{border-color:#262626}
.price-feats li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid #eee;font-size:.95rem;line-height:1.5}
.price-card.dark .price-feats li{border-color:#262626}
.price-feats li::before{content:"\2726";color:var(--teal);flex:none}
.price-card .btn{margin-top:28px;justify-content:center}
.price-card.dark .btn.solid{background:#fff;color:#141414;border-color:#fff}
.price-card.dark .btn.solid::before{background:var(--teal)}
.price-card.dark .btn.solid:hover{color:#141414}
.price-foot{margin-top:26px;font-size:.85rem;color:#777;max-width:70ch;line-height:1.6}
/* --- team --- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,28px);margin-top:clamp(26px,3vw,40px)}
.team-card{border-top:1px solid #141414;padding-top:20px}
.team-ava{aspect-ratio:1;border-radius:24px;background:#141414;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:900;font-size:clamp(2rem,3.4vw,3.2rem);letter-spacing:-.03em}
.team-card:nth-child(even) .team-ava{background:var(--teal);color:#141414}
.team-card h3{font-size:clamp(1.2rem,1.8vw,1.6rem);margin-top:18px;text-transform:none;letter-spacing:-.02em}
.team-card .role{margin-top:6px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#777}
.team-note{margin-top:28px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#999}
@media (max-width:1000px){.price-grid{grid-template-columns:1fr}.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.team-grid{grid-template-columns:1fr}.price-tabs{width:100%}.price-tab{flex:1;text-align:center}}
/* --- footer --- */
.foot-new{background:#141414;color:#fff;padding:clamp(36px,4vw,56px) var(--edge) 20px;border-top:1px solid #1d1d1d}
.foot-hero{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(10px,1.6vw,22px);font-family:'Archivo';font-weight:900;letter-spacing:-.045em;line-height:1.08;font-size:clamp(1.75rem,10vw,9.5rem);white-space:nowrap;overflow:visible;padding:.1em 0 clamp(24px,3vw,40px);border-bottom:1px solid #222;min-width:0}
.foot-hero>span:first-child{white-space:nowrap;flex:none;min-width:0}
.foot-hero .foot-arrow{display:inline-flex;align-items:center;justify-content:center;color:var(--teal);font-size:.72em;transition:transform .5s var(--ease);flex:none}
.foot-hero .foot-arrow svg{width:1em;height:1em;display:block}
.foot-hero:hover .foot-arrow{transform:translate(10px,-10px)}
.foot-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,4vw,56px);padding-top:clamp(26px,3vw,40px)}
.foot-logo img{height:52px;width:auto}
.foot-left>p{margin-top:20px;max-width:44ch;color:#9a9a9a;line-height:1.65}
.foot-left h4{font-family:'Inter';font-weight:600;font-size:.72rem;letter-spacing:.2em;color:#fff;margin:26px 0 12px}
.foot-contact{list-style:none;display:flex;flex-direction:column;gap:8px}
.foot-contact li{display:flex;gap:14px;font-size:.95rem;overflow-wrap:anywhere}
.foot-contact span{color:#8a8a8a;width:86px;flex:none}
.foot-contact a:hover{color:var(--teal)}
.foot-bottom{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:clamp(26px,3vw,38px);padding-top:20px;border-top:1px solid #222;font-size:.8rem;color:#8a8a8a}
.foot-bottom .spacer{flex:1}
.soc{display:flex;gap:10px;flex-wrap:wrap}
.soc a{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid #333;display:flex;align-items:center;justify-content:center;color:#fff;transition:.3s}
.soc a svg{width:19px;height:19px;display:block;flex:none}
.soc a:hover{background:var(--teal);border-color:var(--teal);color:#141414}
.soc a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.foot-links{display:flex;flex-direction:column}
.foot-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(14px,1.8vw,22px) 4px;border-bottom:1px solid #222;font-family:'Archivo';font-weight:600;letter-spacing:-.02em;font-size:clamp(1.4rem,2.6vw,2.1rem);transition:color .3s,padding-left .3s}
.foot-links a .foot-link-arrow{display:inline-flex;align-items:center;justify-content:center;color:var(--teal);opacity:0;transition:.3s;font-size:.8em;flex:none}
.foot-links a .foot-link-arrow svg{width:1em;height:1em;display:block}
.foot-links a:hover{padding-left:14px}
.foot-links a:hover .foot-link-arrow{opacity:1}
.foot-links a:first-child{border-top:1px solid #222}
.foot-wordmark{display:flex;justify-content:space-between;align-items:baseline;font-family:'Archivo','Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-weight:900;letter-spacing:0;line-height:1;text-transform:uppercase;color:#fff;font-size:clamp(3rem,15.5vw,18rem);white-space:nowrap;overflow:visible;max-width:100%;width:100%;margin-top:clamp(16px,2vw,26px);padding:0 0 .06em;font-kerning:normal;text-rendering:optimizeLegibility}
.foot-wordmark span{display:block;flex:0 1 auto;min-width:0}
.to-top-fab{--p:0;position:fixed;right:clamp(16px,2.5vw,28px);bottom:calc(clamp(16px,2.5vw,28px) + env(safe-area-inset-bottom,0px));z-index:120;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:#141414;color:var(--teal);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:background .3s,color .3s,transform .3s}
.to-top-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.to-top-ring .ring-bg{fill:none;stroke:#2e2e2e;stroke-width:2.5}
.to-top-ring .ring-fill{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:163.36;stroke-dashoffset:calc(163.36*(1 - var(--p,0)))}
.to-top-fab .to-top-arrow{position:relative;z-index:1;width:22px;height:22px;display:block}
.to-top-fab:hover{background:var(--teal);color:#141414;transform:translateY(-3px)}
.to-top-fab:hover .ring-fill{stroke:#141414}
.to-top-fab:hover .ring-bg{stroke:rgba(0,0,0,.25)}
.to-top-fab:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
@media (max-width:520px){.to-top-fab{width:50px;height:50px}}
#testimonials{scroll-margin-top:130px}
#faqs{scroll-margin-top:130px}
.pj .im,.acard .im,.svc-sec .svc-vis{border-radius:20px}
.tcard{border-radius:24px}
/* --- Testimonial marquee: two rows, opposite directions, pause on hover --- */
.testi-sec{overflow:hidden}
.rev-rows{display:flex;flex-direction:column;gap:18px;padding-inline:var(--edge)}
.rev-row{position:relative;overflow:hidden}
.rev-row::before,.rev-row::after{content:"";position:absolute;top:0;bottom:0;width:clamp(48px,9vw,150px);z-index:3;pointer-events:none}
.rev-row::before{left:0;background:linear-gradient(90deg,#141414,rgba(0,0,0,0))}
.rev-row::after{right:0;background:linear-gradient(-90deg,#141414,rgba(0,0,0,0))}
.rev-track{display:flex;width:max-content;will-change:transform}
.rev-track.rev-right{animation:revRight 96s linear infinite}
.rev-track.rev-left{animation:revLeft 108s linear infinite}
.rev-row:hover .rev-track,.rev-row:focus-within .rev-track{animation-play-state:paused}
.rev-group{display:flex;gap:18px;padding-right:18px;flex:none}
/* Review cards: white card, circular initial avatar, service label
   as the title line, then the review text. No source line, client
   name, date or star rating is shown — none was supplied for any
   review, so none is invented. */
.gcard{flex:none;width:min(84vw,400px);background:#fff;color:#202124;border:1px solid #dadce0;border-radius:20px;padding:24px;display:flex;flex-direction:column;box-shadow:0 4px 16px rgba(0,0,0,.16);text-align:left}
.gcard-top{display:flex;align-items:center;gap:12px;min-width:0}
.gcard .av{width:44px;height:44px;flex:none;border-radius:50%;background:#5f6368;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-weight:600;font-size:1.05rem;line-height:1}
.rev-group .gcard:nth-child(5n+1) .av{background:#4285f4}
.rev-group .gcard:nth-child(5n+2) .av{background:#ea4335}
.rev-group .gcard:nth-child(5n+3) .av{background:#f9ab00;color:#202124}
.rev-group .gcard:nth-child(5n+4) .av{background:#34a853}
.rev-group .gcard:nth-child(5n) .av{background:#009aa1}
.gcard-head{min-width:0;display:flex;flex-direction:column;gap:2px}
.gcard-name{font-family:'Inter',sans-serif;font-weight:600;font-size:.98rem;line-height:1.3;letter-spacing:0;color:#202124}
.gcard q{quotes:none;font-size:.94rem;line-height:1.6;color:#3c4043;margin-top:14px}
@keyframes revLeft{to{transform:translateX(-50%)}}
@keyframes revRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.testi-note{margin-top:24px}
@media (max-width:620px){.gcard{width:min(84vw,320px);padding:20px}.rev-rows{gap:14px}.rev-group{gap:14px;padding-right:14px}}
@media (prefers-reduced-motion:reduce){.rev-track{animation:none}}
.btn{font-weight:600}
@media (max-width:1100px){
 .faq-grid,.contact-modern,.foot-grid{grid-template-columns:1fr}
 .svc-orb{width:130px;opacity:.7}
 .about-row{grid-template-columns:1fr}
 .foot-links{margin-top:8px}
}
@media (max-width:760px){
 .contact-top{grid-template-columns:1fr}
 .f-grid{grid-template-columns:1fr}
 .about-stats{grid-template-columns:1fr 1fr}
 .about-orb{width:96px}
 .collage{grid-template-columns:1fr 1fr}
 .collage div:first-child{grid-column:1/-1}
 .site-card{flex-basis:84vw}
 .faq-cta{max-width:none}
 .foot-bottom .spacer{display:none}
 .svc-card{grid-template-columns:1fr}
 .svc-card-img{min-height:0;aspect-ratio:4/3;height:auto;align-self:stretch}
}
@media (max-width:520px){
 .ts-img{border-radius:12px}
 .form-card{padding:28px 20px;border-radius:28px}
}

/* --- tighter spacing: inner-page heroes and remaining inline gaps --- */
.phero[style*="min-height"]{min-height:62svh!important}
.grid4[style]{margin-top:36px!important}
[style*="padding-bottom:120px"]{padding-bottom:56px!important}

html,body{background:#fff}
/* Focusing word: one word in every heading in teal. Darker teal on light
   backgrounds for readability; bright logo teal on matte-black surfaces.
   Placed last so it wins over the grey .light spans inside headings. */
.focus{color:var(--teal-d)}
h1 .focus,h2 .focus,h3 .focus,h4 .focus,.faq-q .focus{color:var(--teal-d)}
.dark .focus,.hero .focus,.svc-modern .focus,.cta2-panel .focus,.badge-panel .focus,.form-card .focus,.projects-card .focus,.faq-cta .focus,.price-card.dark .focus,.testi-sec .focus,.foot-new .focus,.mobile .focus,.svc-card .focus{color:var(--teal)}
.light .focus{color:var(--teal-d)}
.dark .light .focus,.hero .light .focus,.svc-modern .light .focus,.cta2-panel .light .focus,.badge-panel .light .focus,.form-card .light .focus,.faq-cta .light .focus,.price-card.dark .light .focus,.svc-card .light .focus{color:var(--teal)}
/* --- Contact page redesign: hero, info cards, steps + form, closing CTA --- */
.contact-hero-new{background:var(--k);color:#fff;padding:158px var(--edge) 96px;overflow:hidden}
.contact-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,64px);align-items:center}
.contact-hero-h{font-size:clamp(2.7rem,6.4vw,6.2rem);margin-top:22px}
.contact-hero-h .ch-line{display:block}
.contact-hero-h .light{color:#bdbdbd}
.contact-hero-new .lead{margin-top:22px;color:#d9d9d9}
.contact-hero-ctas{margin-top:30px}
.contact-hero-ctas .btn.solid{background:#fff;color:#141414;border-color:#fff}
.contact-hero-ctas .btn.solid::before{background:var(--teal)}
.contact-hero-ctas .btn.solid:hover{color:#141414}
.contact-hero-note{display:flex;align-items:center;gap:10px;margin-top:26px;padding-top:22px;border-top:1px solid #2a2a2a;color:#9a9a9a;font-size:.9rem;line-height:1.6}
.contact-hero-note .dot,.contact-hero-badge .dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--teal);box-shadow:0 0 0 5px rgba(0,200,207,.18)}
.contact-hero-visual{position:relative;min-width:0}
.contact-hero-img{border-radius:32px;overflow:hidden;aspect-ratio:4/3;border:1px solid #2a2a2a;background:#1a1a1a}
.contact-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.contact-hero-badge{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;gap:12px;background:#fff;color:#141414;border-radius:20px;padding:16px 20px;box-shadow:0 18px 40px rgba(0,0,0,.35);max-width:calc(100% - 36px)}
.contact-hero-badge b{display:block;font-family:'Archivo';font-size:.98rem;letter-spacing:-.01em}
.contact-hero-badge small{display:block;color:#777;font-size:.8rem;margin-top:2px}
.contact-cards-sec{padding:0 var(--edge);margin-top:-52px;position:relative;z-index:2}
.contact-cards-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.ci-card{background:#fff;border:1px solid #e6e6e6;border-radius:28px;padding:28px 26px 30px;position:relative;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.08);transition:transform .4s var(--ease),border-color .3s,box-shadow .4s}
.ci-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.ci-card:hover{transform:translateY(-5px);border-color:#141414;box-shadow:0 26px 50px rgba(0,0,0,.12)}
.ci-card:hover::before{transform:scaleX(1)}
.ci-icon{width:54px;height:54px;border-radius:50%;background:var(--teal);color:#141414;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.ci-icon svg{width:24px;height:24px;display:block}
.ci-card h3{font-size:1.3rem}
.ci-value{margin-top:12px;font-weight:700;font-size:1.02rem;line-height:1.4;overflow-wrap:anywhere}
.ci-value a:hover{color:var(--teal-d)}
.ci-desc{margin-top:8px;color:#777;font-size:.92rem;line-height:1.6}
.contact-main{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,3vw,44px);padding-block:clamp(44px,5vw,72px);align-items:start}
.contact-side-sticky{position:sticky;top:130px}
.contact-side-h{font-size:clamp(2rem,3.6vw,3.4rem);margin-top:20px;max-width:14ch}
.contact-steps{list-style:none;margin-top:32px;border-top:1px solid #e3e3e3}
.contact-steps li{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid #e3e3e3}
.cs-num{font-family:'Archivo';font-weight:900;font-size:1.6rem;letter-spacing:-.03em;color:var(--teal-d)}
.contact-steps h3{font-size:1.2rem}
.contact-steps p{margin-top:6px;color:#555;line-height:1.6;font-size:.95rem}
.contact-talk{background:#141414;color:#fff;border-radius:28px;padding:clamp(24px,2.6vw,34px);margin-top:28px;position:relative;overflow:hidden}
.contact-talk::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--teal)}
.contact-talk h3{font-size:1.5rem}
.contact-talk p{margin-top:10px;color:#bdbdbd;line-height:1.6}
.contact-talk-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.contact-talk-btns .btn.solid{background:#fff;color:#141414;border-color:#fff}
.contact-talk-btns .btn.solid::before{background:var(--teal)}
.contact-talk-btns .btn.solid:hover{color:#141414}
.contact-work-link{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#fff}
.contact-work-link:hover{color:var(--teal)}

@media (max-width:1100px){
 .contact-main{grid-template-columns:1fr}
 .contact-side-sticky{position:static}
 .contact-cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .contact-hero-grid{grid-template-columns:1fr}
 .contact-hero-visual{max-width:640px}
}
@media (max-width:620px){
 .contact-hero-new{padding:132px var(--edge) 84px}
 .contact-cards-grid{grid-template-columns:minmax(0,1fr)}
 .contact-cards-sec{margin-top:-44px}
 .contact-hero-badge{left:12px;bottom:12px;padding:13px 16px}
 .contact-steps li{grid-template-columns:44px 1fr}
}

.cd-lead{margin-top:16px;color:#555;line-height:1.65;font-size:1rem;max-width:42ch}
.contact-details{margin-top:26px;position:relative}
.contact-details::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--teal);z-index:1}
.cd-text{flex:1}
.cd-desc{font-size:.86rem;color:#777;line-height:1.5}
.cd-row .arrow{margin-left:auto;color:var(--teal-d)}
.cd-avail{display:flex;align-items:flex-start;gap:10px;margin-top:20px;font-size:.9rem;line-height:1.6;color:#555}
.cd-avail .dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--teal);box-shadow:0 0 0 5px rgba(0,200,207,.18);margin-top:6px}
.cd-steps{margin-top:28px;padding-top:24px;border-top:1px solid #e3e3e3}
.cd-steps h3{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-family:'Inter';font-weight:600}
.cd-steps ol{list-style:none;margin-top:14px;display:grid;gap:12px}
.cd-steps li{display:flex;gap:12px;align-items:baseline;font-size:.95rem;color:#555;line-height:1.5}
.cd-steps .cs-num{font-size:1.05rem}
.cd-steps b{color:#141414;font-family:'Archivo';font-weight:700}
.cd-steps .contact-work-link{color:#141414;margin-top:18px}
.cd-steps .contact-work-link:hover{color:var(--teal-d)}
/* Matte black site-wide: --k is #141414, a soft dark grey-black, never pure black. */
/* --- Home page heading sizes (HOME PAGE ONLY) ---
   Main section headings on the home page are 56px at desktop
   (3.9vw at 1440px = 56px, capped at 3.5rem = 56px), down from
   about 66px and the larger display sizes. Medium headings
   (.h-m) are 35px at desktop (2.43vw at 1440px = 35px, capped
   at 2.1875rem = 35px). Scoped by the data-page="home" attribute
   that show() sets on #main, so no other page changes. Hero slide
   headings (.h-hero / .hero-slider-content h1) are deliberately
   NOT included here — they keep their exact original sizes. */
#main[data-page="home"] .h-l,#main[data-page="home"] .h-xl,#main[data-page="home"] .about-h,#main[data-page="home"] .svc-h,#main[data-page="home"] .badge-h,#main[data-page="home"] .pricing-h,#main[data-page="home"] .faq-h,#main[data-page="home"] .cta2-h{font-size:clamp(2rem,3.9vw,3.5rem)}
#main[data-page="home"] .h-m{font-size:clamp(1.4rem,2.43vw,2.1875rem)}