/* Components for the multi-page site. Built on the tokens and patterns in site.css. */

/* Page hero */
.page-hero{position:relative;isolation:isolate;padding:168px 0 92px;border-bottom:1px solid var(--stroke);overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 38% 60% at 86% 18%,rgba(255,39,159,.15),transparent 70%),radial-gradient(ellipse 34% 55% at 96% 82%,rgba(33,195,245,.15),transparent 70%),radial-gradient(ellipse 30% 50% at 68% 62%,rgba(140,242,60,.08),transparent 70%),radial-gradient(ellipse 30% 45% at 72% 10%,rgba(152,72,255,.12),transparent 70%)}
.page-hero h1{font:900 clamp(46px,6.2vw,96px)/.99 var(--display);letter-spacing:-.055em;text-transform:uppercase;margin:20px 0 0;max-width:14ch}
.page-hero .lead{max-width:610px;color:#c7c9d1;font-size:17px;line-height:1.72;margin:28px 0 0}
.page-hero .lead + .lead{font-size:15px;color:var(--muted);margin-top:16px}
.page-hero .hero-buttons{margin-top:34px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:0;list-style:none;font-size:12px;font-weight:600;color:#8d909b}
.crumbs a{color:#c7c9d1;transition:color .2s}.crumbs a:hover{color:#fff}
.crumbs li+li::before{content:'/';margin-right:10px;color:#4d505a}

/* Service page hero with image */
.svc-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.svc-hero h1{max-width:12ch}
.svc-hero-media{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--stroke);aspect-ratio:1.18;background:#15171d;box-shadow:0 40px 90px -40px var(--accent)}
.svc-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.svc-hero-media::after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#090a0dcc)}
.svc-hero-media .number-chip{top:18px;left:18px}
.svc-hero-tag{position:absolute;left:22px;bottom:20px;z-index:1;display:flex;align-items:center;gap:10px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:#e6e7ec}
.svc-hero-tag i{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.accent-type{color:var(--accent)}

/* What's included */
.inc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.inc-card{border:1px solid var(--stroke);border-radius:20px;background:#111319;padding:32px 32px 30px;transition:transform .3s,border-color .3s}
.inc-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 55%,#333)}
.inc-card .inc-num{font:800 13px var(--display);letter-spacing:.14em;color:var(--accent)}
.inc-card h3{font:800 clamp(20px,1.8vw,25px)/1.15 var(--display);letter-spacing:-.03em;margin:14px 0 10px}
.inc-card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.72}

/* Packages that include a service */

/* FAQ */
.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.faq-layout .section-heading{display:block;margin:0;position:sticky;top:110px}
.faq-layout .heading-aside{margin-top:20px;justify-self:start}
.faq-list{display:grid;gap:12px}
.faq-item{border:1px solid var(--stroke);border-radius:18px;background:#111319;transition:border-color .3s,background .3s}
.faq-item[open]{border-color:color-mix(in srgb,var(--accent,#21c3f5) 50%,#333);background:#13151c}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 24px 22px 26px;font:800 17px/1.35 var(--display);letter-spacing:-.02em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';flex:none;width:32px;height:32px;border-radius:50%;border:1px solid #ffffff33;display:grid;place-items:center;font:400 20px/1 var(--font);color:#fff;transition:transform .3s,background .3s}
.faq-item[open] summary::after{transform:rotate(45deg);background:#ffffff14}
.faq-item p{margin:0;padding:0 26px 24px;color:var(--muted);font-size:15px;line-height:1.75}

/* Related services, page CTAs */
.section-cta-link{margin-top:36px;display:flex;justify-content:center}

/* Contact page */
.contact-page{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:start}
.contact-card{border:1px solid #ffffff28;border-radius:24px;background:#101217;box-shadow:0 32px 100px -40px #000}
.contact-card .inquiry-wrap{padding:40px 42px 42px}
.contact-card .inquiry-wrap form{margin-top:0}
.contact-aside{display:grid;gap:18px}
.aside-card{border:1px solid var(--stroke);border-radius:20px;background:#111319;padding:28px}
.aside-card h2{font:800 15px var(--display);text-transform:uppercase;letter-spacing:.08em;margin:0 0 18px}
.aside-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.aside-steps li{display:grid;grid-template-columns:14px 1fr;gap:14px;align-items:start}
.aside-steps i{width:12px;height:12px;border-radius:50%;background:var(--step);margin-top:5px;box-shadow:0 0 0 5px color-mix(in srgb,var(--step) 14%,transparent)}
.aside-steps b{display:block;font:800 15px var(--display);letter-spacing:-.01em}
.aside-steps span{display:block;color:var(--muted);font-size:13.5px;line-height:1.6;margin-top:2px}
.aside-card p{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.7}

/* 404 */
.notfound{min-height:72vh;display:flex;align-items:center}

/* Responsive */
@media(max-width:1100px){.svc-hero{gap:40px}.faq-layout{grid-template-columns:1fr;gap:30px}.faq-layout .section-heading{position:static}}
@media(max-width:950px){.svc-hero{grid-template-columns:1fr}.svc-hero-media{max-width:640px;aspect-ratio:1.5}.contact-page{grid-template-columns:1fr}}
@media(max-width:700px){.page-hero{padding:132px 0 64px}.page-hero h1{font-size:clamp(40px,10.5vw,60px)}.page-hero .lead{font-size:15.5px}.inc-grid{grid-template-columns:1fr}.inc-card{padding:26px}.faq-item summary{font-size:16px;padding:18px 18px 18px 20px}.faq-item p{padding:0 20px 20px}.contact-card .inquiry-wrap{padding:24px}}

/* Additions */
.page-hero .eyebrow{margin:30px 0 0}
.services-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:950px){.services-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.services-grid.three{grid-template-columns:1fr}}

/* Page hero artwork (reuses the homepage .ha-* card, chip, orbit and glow styles) */
.page-art{position:absolute;inset:0;z-index:-1;pointer-events:none}
.page-stage{--w:min(500px,37vw);position:absolute;right:5%;top:56%;width:var(--w);height:var(--w);font-size:calc(var(--w)/40);transform:translateY(-50%);font-family:var(--font);color:#f4f4f7}
.page-stage .ha-x{left:50%;top:50%;width:10.5em;height:auto}
.page-stage .ha-glow{width:24em;height:24em}
.page-stage .ha-chip{white-space:nowrap}
.pa-pkg{width:13.5em;border-top:.22em solid var(--a)}
.pa-pkg .ha-float{padding:1.1em 1.2em 1.2em}
.pa-pkg small{display:block;font:800 .8em var(--display);letter-spacing:.28em;text-transform:uppercase;color:var(--a)}
.pa-pkg b{display:flex;align-items:baseline;gap:.3em;font:800 2.6em/1.1 var(--display);letter-spacing:-.02em;margin:.3em 0 .25em}
.pa-pkg b em{font:700 .3em var(--font);font-style:normal;letter-spacing:.14em;color:#a9acb6}
.pa-pkg span{display:inline-block;font-size:.8em;font-weight:700;padding:.35em .8em;border-radius:2em;color:var(--a);border:1px solid color-mix(in srgb,var(--a) 45%,transparent);background:color-mix(in srgb,var(--a) 8%,transparent)}
.pa-mail{width:16em}
.pa-mail p{margin:.9em 0 0;font-size:.9em;line-height:1.5;color:#c7c9d1}
@media(max-width:1200px){.page-stage{--w:min(430px,36vw);right:3%}}
@media(max-width:1000px){.page-art{display:none}}

/* Service quick-view dialog */
.detail-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.svc-discover:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}

/* Keep growing (step 2) */
.plan-kicker{margin:0 0 6px;font-size:12px;font-weight:600;color:var(--muted)}

/* Package flip cards */
.pkg-flip{perspective:1800px;display:flex;transition:transform .35s}
.pkg-flip:hover{transform:translateY(-6px)}
.pkg-flip-inner{position:relative;display:grid;flex:1;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.75,.2,1)}
.pkg-flip.is-flipped .pkg-flip-inner{transform:rotateY(180deg)}
.pkg-face{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.pkg-face:hover{transform:none}
.pkg-back,.pkg-back:hover{transform:rotateY(180deg)}
.pkg-back{border-style:dashed;border-top-style:solid}
.pkg-flip-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:1px dashed rgba(255,255,255,.24);background:transparent;color:#c4c6d0;border-radius:100px;padding:10px 16px;font:700 12.5px/1.3 var(--font);transition:border-color .25s,color .25s,background .25s}
.pkg-flip-btn em{font-style:normal;color:var(--next)}
.pkg-flip-btn:hover{border-color:var(--next);color:#fff;background:rgba(255,255,255,.03)}
.pkg-flip-back{display:flex;align-items:center;justify-content:center;gap:8px;border:0;background:transparent;color:#aeb0bd;font:700 12.5px var(--font);padding:4px}
.pkg-flip-back:hover{color:#fff}
.pkg-flip-btn svg,.pkg-flip-back svg{flex:none;width:15px;height:15px}
@media(prefers-reduced-motion:reduce){.pkg-flip-inner{transition:none}}

/* Content update: home service groups, heading bands, about values grid, contact details */
.heading-band .section-heading:last-child{margin-bottom:0}
.heading-band .section-heading h2{font-size:clamp(34px,3.6vw,54px)}
.inc-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.page-hero h1.h1-long{max-width:18ch;font-size:clamp(42px,4.4vw,80px)}
.contact-info{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.contact-info li{border:1px solid var(--stroke);border-radius:18px;background:#111319;padding:24px 26px;display:grid;gap:8px}
.contact-info small{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.contact-info a,.contact-info span{font:800 18px var(--display);color:#fff;text-decoration:none;overflow-wrap:anywhere}
.contact-info a:hover{color:var(--green)}
@media(max-width:950px){.inc-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-info{grid-template-columns:1fr}}
@media(max-width:700px){.inc-grid.three{grid-template-columns:1fr}.page-hero h1.h1-long{font-size:clamp(34px,9vw,52px)}}
@media(min-width:701px){.hero .hero-sub{max-width:540px}}
@media(min-width:951px) and (max-width:1599px){.hero .hero-sub{max-width:min(540px,46vw)}}
/* Gradient words: the tight letter-spacing pushed the last letter past the gradient, slicing its edge (e.g. the S in BRANDS).
   Extra padding gives the gradient room; the negative margin keeps the layout unchanged. */
.gradient-type{padding-right:.09em;margin-right:-.09em}
/* Filter rows keep scrolling sideways on phones, but without a visible scrollbar */
.filter-list{scrollbar-width:none;-ms-overflow-style:none}
.filter-list::-webkit-scrollbar{display:none}
/* Phones: the hero starts higher */
@media(max-width:700px){
.filter-list{padding-bottom:0}
.hero-inner{padding-top:108px;padding-bottom:96px}
.hero{min-height:0}
}
/* Phones: card rows marked .swipe-row (Home "Why choose", About "What we do" and "Why work with us") become
   swipeable carousels (the next card peeks in from the right) with dots below */
.swipe-dots{display:none}
@media(max-width:700px){
div.swipe-row{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-right:-18px;padding-right:18px;scrollbar-width:none}
.swipe-row::-webkit-scrollbar{display:none}
.swipe-row>*{flex:0 0 80%;scroll-snap-align:start}
.swipe-row>*:hover,.swipe-row>*:focus-visible{transform:none}
.swipe-dots{display:flex;justify-content:center;gap:10px;margin-top:22px}
.swipe-dots button{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:8px;background:rgba(255,255,255,.25);transition:width .3s,background .3s}
.swipe-dots button::before{content:"";position:absolute;inset:-12px -5px}
.swipe-dots button[aria-current="true"]{width:26px;background:linear-gradient(90deg,var(--green),var(--pink),var(--cyan))}
}
/* Section headings on every page (wider screens): the intro text on the right starts level with the first line of
   the headline, and every intro starts at the same left edge (short ones fill the column instead of hugging the right) */
@media(min-width:701px){
.section-heading{align-items:start}
.section-heading>.heading-aside,.section-heading>.heading-right{margin-top:44px;width:100%;max-width:400px}
.faq-layout .section-heading>.heading-aside{margin-top:20px}
}
/* Package cards: a short summary on the card; the full contents open in a "See everything included" dialog */
.pkg-ai-line{display:flex;gap:9px;align-items:flex-start;margin:0;padding:11px 14px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:12px;background:color-mix(in srgb,var(--accent) 6%,transparent);font-size:13.5px;line-height:1.5;font-weight:600;color:#ecd9e3}
.pkg-ai-line b{color:var(--accent);font-weight:800}
.pkg-more{display:inline-flex;align-items:center;gap:8px;margin:18px 0 6px;padding:0 0 3px;border:0;border-bottom:1px solid color-mix(in srgb,var(--accent) 65%,transparent);background:none;color:#fff;font:700 13px var(--font);cursor:pointer;transition:color .25s,gap .25s}
.pkg-more:hover,.pkg-more:focus-visible{color:var(--accent);gap:12px}
.pkg-more svg{width:14px;height:14px}
.pkg-dialog{--accent:#21c3f5;max-height:min(90vh,1000px);width:min(1000px,calc(100vw - 30px));margin:auto;padding:0;border:1px solid #ffffff28;border-top:3px solid var(--accent);border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,#101217) 0%,#101217 32%);color:#fff;box-shadow:0 32px 150px #000b;overflow:auto}
.pkg-dialog::backdrop{background:#020305ce;backdrop-filter:blur(7px)}
.pkg-dialog{scrollbar-width:thin;scrollbar-color:#ffffff40 transparent}
.pkg-dialog .pkg-top{padding:34px 38px 24px}
.pkg-dialog .pkg-top .eyebrow{margin:0 0 10px}
.pkg-dialog .pkg-top h2{margin:0 0 14px;font:900 clamp(32px,4vw,46px)/1 var(--display);letter-spacing:-.04em;text-transform:uppercase;color:var(--accent)}
.pkg-dialog .pkg-tag,.pkg-dialog .pkg-meta{min-height:0}
.pkg-dialog .pkg-tag{margin:12px 0 16px}
.pkg-dialog-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px 34px;padding:26px 38px 8px;align-items:start}
.pkg-dialog-grid h4{margin:0 0 14px;font:800 11px var(--display);letter-spacing:.24em;text-transform:uppercase;color:#b4b5c0}
.pkg-dialog .pkg-ai h4{color:var(--accent);margin-bottom:12px}
.pkg-dialog-foot{display:flex;flex-wrap:wrap;gap:12px;padding:20px 38px 34px}
@media(max-width:760px){.pkg-dialog .pkg-top{padding:28px 22px 20px}.pkg-dialog-grid{grid-template-columns:1fr;padding:22px 22px 4px}.pkg-dialog-foot{padding:16px 22px 26px}.pkg-dialog-foot .btn{width:100%}}
/* Package flip cards: the front sets the card height and the monthly-plan back fits inside it
   (compact spacing; it scrolls only if it ever runs longer), so the front has no empty gap */
.pkg-back{position:absolute;inset:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ffffff40 transparent}
.pkg-back .pkg-top{padding-bottom:18px}
.pkg-back .pkg-tag{min-height:48px;margin:10px 0 14px}
.pkg-back .pkg-body{padding-top:20px}
.pkg-back .pkg-list{gap:9px;margin-bottom:18px}
.pkg-back .pkg-ai{padding:13px 16px}
.pkg-back .pkg-meta{min-height:0}
/* AI boxes on package and plan cards use the card colour (as on the flyers) instead of always pink; tighter on the plan side */
.pkg-ai{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.pkg-ai h4{color:var(--accent)}
.pkg-ai li::marker{color:var(--accent)}
.pkg-back .pkg-ai ul{gap:6px;font-size:13px}
/* Inquiry form opened from a package or plan button: a summary of the choice replaces the two dropdowns */
.pkg-choice{display:none;grid-column:1/-1;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--accent,#fff) 50%,transparent);border-left:3px solid var(--accent,#fff);border-radius:14px;background:color-mix(in srgb,var(--accent,#fff) 7%,#15171d)}
#inquiryForm.pkg-locked .pkg-choice{display:flex}
#inquiryForm.pkg-locked .pkg-field,#inquiryForm.pkg-locked .plan-field{display:none}
.pkg-choice p{margin:0}
.pkg-choice-kicker{font:800 10.5px var(--display);letter-spacing:.22em;text-transform:uppercase;color:#b4b5c0}
.pkg-choice-main{margin-top:6px!important;font-size:16px;color:#e8e9ee}
.pkg-choice-main b{font:800 18px var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--accent,#fff)}
.pkg-choice-plan{margin-top:4px!important;font-size:14px;font-weight:600;color:#d6d8df}
/* About page: project collage in the hero, "what we do" picture cards, numbers band, story with photo, why us */
.about-story{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about-story .eyebrow{margin:0}
.about-story h2{margin:16px 0 26px;font:900 clamp(40px,4.4vw,66px)/1.035 var(--display);letter-spacing:-.05em;text-transform:uppercase}
.about-story p:not(.eyebrow){margin:0 0 18px;color:#c7c9d1;font-size:16px;line-height:1.8}
.about-story-media{margin:0;border:1px solid var(--stroke);border-radius:22px;overflow:hidden}
.about-story-media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.about-why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.about-values{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:34px}
.about-values span{font:800 11px var(--display);letter-spacing:.24em;text-transform:uppercase;color:#b4b5c0}
.about-values ul{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.about-values li{padding:8px 15px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:30px;background:color-mix(in srgb,var(--c) 7%,transparent);color:var(--c);font-size:13px;font-weight:700}
@media(max-width:950px){.about-story{grid-template-columns:1fr;gap:34px}.about-why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.about-story h2{font-size:clamp(35px,8.2vw,48px)}.about-why{grid-template-columns:1fr}}
/* About "What we do": editorial rows (number, big title, text + service links, tilted photo that straightens on hover) */
.caps{border-top:1px solid var(--stroke)}
.cap{--accent:#fff;position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.1fr) 230px;align-items:center;gap:20px 40px;padding:36px 24px 36px 20px;border-bottom:1px solid var(--stroke);transition:background .4s}
.cap::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.cap:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%)}
.cap:hover::before{transform:scaleY(1)}
.cap-num{align-self:start;margin-top:10px;font:800 14px var(--display);letter-spacing:.14em;color:var(--accent)}
.cap-title{margin:0;font:900 clamp(32px,3.6vw,54px)/.98 var(--display);letter-spacing:-.045em;text-transform:uppercase;color:#f4f4f7;transition:color .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.cap:hover .cap-title{color:var(--accent);transform:translateX(8px)}
.cap-text p{margin:0 0 16px;color:#c7c9d1;font-size:15.5px;line-height:1.7}
.cap-text ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cap-text li{padding:7px 13px;border:1px solid rgba(255,255,255,.16);border-radius:30px;font-size:12.5px;font-weight:700;color:#e6e7ec;transition:border-color .3s,background .3s}
.cap:hover .cap-text li{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.cap-media{margin:0;width:230px;aspect-ratio:3/2;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);transform:rotate(-4deg);box-shadow:0 18px 40px -18px #000,0 0 0 0 transparent;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.cap:nth-child(even) .cap-media{transform:rotate(4deg)}
.cap:hover .cap-media{transform:rotate(0) scale(1.06);box-shadow:0 22px 50px -18px color-mix(in srgb,var(--accent) 70%,transparent)}
.cap-media img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:1100px){.cap{grid-template-columns:52px minmax(0,1fr) minmax(0,1.2fr) 180px;gap:18px 28px}.cap-media{width:180px}}
@media(max-width:950px){.cap{grid-template-columns:44px minmax(0,1fr) 150px;grid-template-areas:'num title media' '. text text';padding:30px 8px 30px 14px}.cap-num{grid-area:num}.cap-title{grid-area:title}.cap-media{grid-area:media;width:150px}.cap-text{grid-area:text}}
@media(max-width:700px){.cap{grid-template-columns:28px minmax(0,1fr) 80px;gap:14px 12px;padding:26px 4px 26px 10px}.cap-title{font-size:clamp(22px,6.4vw,30px)}.cap-media{width:80px;border-radius:12px}.cap-num{margin-top:6px;font-size:12px}.cap-text p{font-size:14.5px;margin-bottom:12px}}
@media(max-width:370px){.cap{grid-template-columns:24px minmax(0,1fr) 66px;gap:12px 10px}.cap-title{font-size:20px}.cap-media{width:66px}}
/* Service pages "Keep exploring": every other service in a carousel; arrows on larger screens, swipe + dots on phones */
.svc-carousel{display:flex;gap:19px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 2px 30px;margin:-8px -2px -30px}
.svc-carousel::-webkit-scrollbar{display:none}
.svc-carousel>.service-card{flex:0 0 calc((100% - 38px)/3);scroll-snap-align:start}
.car-arrows{display:inline-flex;gap:10px;margin-left:22px;vertical-align:middle}
.car-btn{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;transition:background .25s,border-color .25s,opacity .25s}
.car-btn:hover:not(:disabled),.car-btn:focus-visible{background:#fff;color:#090a0d;border-color:#fff}
.car-btn:disabled{opacity:.3;cursor:default}
.car-btn svg{width:18px;height:18px}
@media(max-width:950px){.svc-carousel>.service-card{flex-basis:calc((100% - 19px)/2)}}
@media(max-width:700px){.svc-carousel{margin-bottom:0;padding-bottom:4px}.svc-carousel>.service-card{flex-basis:80%}.car-arrows{display:none}}
/* About hero: design mockups (social post, website, brand kit, AI-ready profile) around the X */
.page-stage.about-stage{--w:min(470px,34vw);right:4%;top:54%}
@media(max-width:1200px){.page-stage.about-stage{--w:min(390px,33vw);right:2%}.page-hero:has(.about-stage) .lead{max-width:520px}}
.about-stage .ha-social{left:0;top:2%}
.pa-reel{display:inline-flex;align-items:center;gap:.3em;color:#ff279f}
.pa-reel svg{width:1em!important;height:1em!important;fill:currentColor}
.pa-web{right:0;top:7%;width:15em;transform:rotate(4deg)}
.pa-browser{display:flex;align-items:center;gap:.35em;padding:0 0 .7em}
.pa-browser span{width:.55em;height:.55em;border-radius:50%;background:#ff5f57}
.pa-browser span:nth-child(2){background:#febc2e}
.pa-browser span:nth-child(3){background:#28c840}
.pa-browser em{flex:1;margin-left:.5em;padding:.25em .8em;border-radius:2em;background:rgba(255,255,255,.07);font-style:normal;font-size:.72em;color:#a9acb6}
.pa-site{position:relative;margin-bottom:.8em;padding:1em;border-radius:.7em;overflow:hidden;background:radial-gradient(circle at 85% 20%,rgba(33,195,245,.35),transparent 55%),linear-gradient(135deg,#0f2233,#1a1230)}
.pa-site b{display:block;font:800 1.15em/1.05 var(--display);letter-spacing:-.02em;text-transform:uppercase}
.pa-site i{display:block;width:75%;height:.42em;margin-top:.7em;border-radius:1em;background:rgba(255,255,255,.22)}
.pa-site i.s{width:52%;margin-top:.45em;background:rgba(255,255,255,.12)}
.pa-btn{display:inline-block;margin-top:.8em;padding:.35em .9em;border-radius:2em;background:#21c3f5;color:#061018;font-size:.72em;font-weight:800}
.pa-kit{left:3%;bottom:4%;width:14em;transform:rotate(3deg)}
.pa-kit-main{display:flex;align-items:center;gap:.8em;margin:.8em 0;padding:.8em;border:1px solid rgba(255,255,255,.14);border-radius:.7em;background:#0b0c10}
.pa-logo{display:grid;place-items:center;flex:none;width:2.8em;height:2.8em;border-radius:.6em;background:linear-gradient(135deg,#1a1230,#0d1a2a)}
.pa-logo img{width:1.9em;height:auto}
.pa-kit-main b{display:block;font:800 .95em/1.2 var(--display);letter-spacing:.12em}
.pa-kit-main small{font-size:.62em}
.pa-swatches{display:flex;align-items:center;gap:.4em}
.pa-swatches i{width:1.3em;height:1.3em;border-radius:.4em;background:var(--c);box-shadow:0 0 .8em -.2em var(--c)}
.pa-swatches b{margin-left:auto;font:800 1.1em var(--display);color:#fff}
.pa-ai{right:1%;bottom:0;width:14.2em;transform:rotate(-3deg)}
.pa-ai .ha-ic{background:linear-gradient(135deg,#9848ff,#21c3f5)}
.pa-ai-rows{display:grid;gap:.45em;margin:.8em 0;padding:0;list-style:none}
.pa-ai-rows li{display:flex;align-items:center;gap:.6em;padding:.45em .6em;border-radius:.5em;background:rgba(255,255,255,.05)}
.pa-ai-rows small{width:4.8em;font-size:.68em}
.pa-ai-rows i{flex:1;height:.4em;border-radius:1em;background:rgba(255,255,255,.18)}
.pa-ai-rows em{font-style:normal;font-size:.85em;font-weight:800;color:#8cf23c}
.pa-ai-tags{display:flex;flex-wrap:wrap;gap:.35em}
.pa-ai-tags span{padding:.3em .7em;border:1px solid rgba(152,72,255,.55);border-radius:2em;font-size:.62em;font-weight:700;color:#cdb8ff}
/* Phones: page heroes are tighter, and the packages start right after the Packages hero */
@media(max-width:700px){
.page-hero{padding:100px 0 36px}
.page-hero .eyebrow{margin-top:16px}
.page-hero h1{margin-top:12px}
.page-hero .lead{margin-top:16px;font-size:15px;line-height:1.65}
.packages-section{padding-top:34px}
}
/* FAQ: smooth open/close (site.js animates .faq-a), one answer at a time; the + turns into a filled x in the accent colour */
.faq-a{overflow:hidden}
.faq-item summary{transition:color .25s}
.faq-item summary:hover{color:color-mix(in srgb,var(--accent,#21c3f5) 70%,#fff)}
.faq-item summary::after{transition:transform .4s cubic-bezier(.2,.8,.2,1),background .3s,color .3s,border-color .3s}
.faq-item[open]:not(.is-closing) summary::after{transform:rotate(45deg);background:var(--accent,#21c3f5);border-color:var(--accent,#21c3f5);color:#090a0d}
.faq-item.is-closing{border-color:var(--stroke);background:#111319}
.faq-item.is-closing summary::after{transform:none;background:transparent}
/* Taps and clicks: no blue browser tap flash; buttons and cards press in slightly instead.
   Keyboard users keep the focus ring (:focus-visible); mouse/touch focus shows no outline. */
html{-webkit-tap-highlight-color:transparent}
:focus:not(:focus-visible){outline:none}
.btn:active,.filter-btn:active,.car-btn:active:not(:disabled),.pkg-flip-btn:active,.pkg-flip-back:active,.menu-btn:active,.dialog-close:active,.swipe-dots button:active,.faq-item summary:active::after{transform:scale(.94)}
.filter-btn,.car-btn,.pkg-flip-btn,.pkg-flip-back,.menu-btn,.dialog-close{transition-property:color,border-color,background,opacity,transform;transition-duration:.25s,.25s,.25s,.25s,.15s}
.service-card:active,.work-card:active{transform:scale(.985)}
.pkg-more:active,.text-link:active,.svc-discover:active{opacity:.7}
/* About on phones: the hero already introduces TENXVYB, so "What we do" shows just its small label before the rows */
@media(max-width:700px){
.about-what{padding-top:46px}
.about-what .section-heading{margin-bottom:16px}
.about-what .section-heading h2,.about-what .section-heading .heading-aside{display:none}
}
/* Service pages on phones: one intro paragraph is enough under the big headline (the second shows on larger screens) */
@media(max-width:700px){.svc-hero .lead-extra{display:none}}
/* Mobile menu: dim layer behind the open menu (below the header); tapping it closes the menu */
.menu-scrim{position:fixed;inset:0;z-index:39;background:rgba(5,6,8,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
.menu-scrim.show{opacity:1;pointer-events:auto}
@media(min-width:951px){.menu-scrim{display:none}}
/* Big display headings: their tight letter-spacing also squeezed the gaps between words ("IDEAS THAT" read as one word).
   Widen only the word gaps; the letters stay tight. */
.hero h1,.page-hero h1,.section-heading h2,.colors-intro h2,.contact-layout h2,.about-story h2,.cap-title,.detail-copy h2,.inquiry-wrap h2,.pkg-dialog .pkg-top h2{word-spacing:.14em}