/* ============ DESIGN TOKENS ============ */
:root{
--color-purple-base:#6D28D9;
--color-purple-bright:#8B5CF6;
--color-purple-deep:#4C1D95;
--color-purple-soft:#EDE9FE;
--color-navy-deep:#0E0B1F;
--color-navy-base:#1E1B4B;
--color-navy-soft:#312E81;
--color-cream:#FBF8F4;
--color-bone:#F1EDE6;
--color-paper:#FFFFFF;
--color-ink:#0E0B1F;
--color-ink-muted:#4A4458;
--color-chalk:#FAF7F2;
--color-chalk-muted:#B5B0CC;
--color-line:rgba(14,11,31,.10);
--color-line-strong:rgba(14,11,31,.18);
--color-line-dark:rgba(250,247,242,.12);
--display:'Fraunces',Georgia,serif;
--sans:'Geist','Geist Sans',-apple-system,sans-serif;
--mono:'Geist Mono',ui-monospace,monospace;
--type-display-xl:clamp(3rem,7vw,6rem);
--type-display-lg:clamp(2.25rem,4.6vw,4rem);
--type-display-md:clamp(1.6rem,3vw,2.4rem);
--type-body-lg:1.18rem;
--type-body-base:1rem;
--type-kicker:.72rem;
--leading-display:.98;
--leading-headline:1.08;
--leading-body:1.55;
--container:1320px;
--gutter:clamp(1.25rem,3.5vw,2.5rem);
--ease:cubic-bezier(.16,1,.3,1);
}
/* Mobile spacing tokens — scoped to max-width:600px */
@media (max-width: 600px) {
:root {
--mobile-section-pad-y: 2.5rem;
--mobile-section-pad-x: 1.25rem;
--mobile-section-gap: 1rem;
--mobile-block-gap: 1rem;
--mobile-text-block-gap: 0.6rem;
--mobile-heading-margin-bottom: 0.5rem;
--mobile-eyebrow-margin-bottom: 0.5rem;
--mobile-cta-margin-top: 1.5rem;
--mobile-leading-body: 1.5;
--mobile-leading-display: 1.05;
}
/* Apply tokens to common site classes */
section, .section, [class*="section"] {
padding-top: var(--mobile-section-pad-y);
padding-bottom: var(--mobile-section-pad-y);
padding-left: var(--mobile-section-pad-x);
padding-right: var(--mobile-section-pad-x);
}
.lead, p.lead, .section__lead {
line-height: var(--mobile-leading-body);
margin-bottom: var(--mobile-text-block-gap);
}
h1, h2, h3 {
line-height: var(--mobile-leading-display);
margin-bottom: var(--mobile-heading-margin-bottom);
}
}
/* Mobile per-section overrides — scoped to max-width:600px */
@media (max-width: 600px) {
/* 1. Testimonials — tighten header gap and card-to-card gap */
.testimonials{padding-top:var(--mobile-section-pad-y);padding-bottom:var(--mobile-section-pad-y);padding-left:var(--mobile-section-pad-x);padding-right:var(--mobile-section-pad-x)}
.testimonials__header--centred{margin-bottom:1.25rem}
.testimonials__grid{gap:var(--mobile-block-gap)}
.testimonials__intro{margin-bottom:var(--mobile-text-block-gap)}
/* 2. Cleaning Services — service-card padding + min-height + gap */
.card-srv{padding:1.25rem;min-height:0;gap:.85rem}
/* 4. Built for the floor (proof-anchor) — tighten stage gap, copy gap, body text */
.proof-anchor__stage{gap:var(--mobile-block-gap)}
.proof-anchor__copy{gap:var(--mobile-text-block-gap)}
.proof-anchor__body{font-size:1rem;line-height:var(--mobile-leading-body)}
.proof-anchor__circle-wrap{margin:0}
/* 5. T3 Methodology — collapse head grid, tighten step layout */
.methodology__head{grid-template-columns:1fr;gap:var(--mobile-block-gap);margin-bottom:var(--mobile-block-gap)}
.methodology__lead{margin-top:.75rem;font-size:1rem;line-height:var(--mobile-leading-body)}
.methodology__steps{gap:1rem}
.method-step{padding:1rem 0 1rem 1rem}
.method-step__num{font-size:2.75rem;line-height:1}
.method-step__title{font-size:1.25rem;margin-top:.3rem}
.method-step__body{font-size:.95rem;margin-top:.5rem}
.methodology__foot{margin-top:1.5rem}
/* 7. Service Area — tighten inner grid + suburb tags */
.area__inner{gap:var(--mobile-block-gap)}
.area__suburbs{gap:.3rem .4rem;margin-top:1rem}
/* 8. Ready for a Cleaner Standard — override generous padding + intro typography */
/* Phase 4 adds form-first order rules separately; Phase 3 covers padding + typography only */
section.block.final{padding-top:var(--mobile-section-pad-y);padding-bottom:var(--mobile-section-pad-y);padding-left:var(--mobile-section-pad-x);padding-right:var(--mobile-section-pad-x)}
.final__inner{gap:var(--mobile-block-gap)}
.final h2{font-size:clamp(1.4rem,7vw,1.85rem)}
.final__sub{margin-top:.75rem;font-size:1rem;line-height:var(--mobile-leading-body)}
.final__contact{margin-top:1.25rem}
}
/* Phase 4: Ready for a Cleaner Standard — form-first on mobile */
@media (max-width: 600px) {
.final__inner > .form { order: -1; }
.final__inner > div { margin-top: var(--mobile-block-gap); }
}
/* Targeted fix-brief overrides — addresses GAP_CLASS_B/D/E from diagnostic 2026-05-18 */
@media (max-width: 600px) {
/* B-fix: Testimonial cards internal (actual class .testimonial, not .testimonial-card) */
.testimonial {
padding: 1.25rem;
margin-bottom: 1rem;
}
.testimonial__quote {
font-size: 1rem;
line-height: 1.4;
margin-bottom: 0.75rem;
}
.testimonial__attr,
.testimonial__name,
.testimonial__org {
font-size: 0.85rem;
line-height: 1.3;
}
.testimonial__attr {
margin-top: 0.5rem;
}
.testimonial__quote-mark {
font-size: 4rem;
}
/* B-fix: Cleaning Services grid gap (.hairline-grid) */
.hairline-grid {
gap: 1rem;
}
/* B-fix: Clean My Biz Position paragraph rhythm (actual class .positioning__*) */
.positioning__body p,
.positioning__lead p {
margin-block: var(--mobile-text-block-gap);
line-height: var(--mobile-leading-body);
}
.positioning__inner {
gap: var(--mobile-block-gap);
}
.positioning__media {
margin-block: var(--mobile-block-gap);
}
/* B-fix: Results case study cards internal */
.case {
gap: 0;
}
.case__card {
padding: 1.25rem;
gap: 0.75rem;
margin-inline: 0;
margin-top: -20px;
}
.case__title {
font-size: 1.25rem;
line-height: 1.2;
margin-bottom: 0.25rem;
}
.case__quote {
font-size: 0.95rem;
line-height: 1.5;
}
.case__meta {
gap: 0.75rem;
padding-top: 0.5rem;
font-size: 0.68rem;
}
.case__top {
gap: 0.5rem;
}
/* B-fix: Servicing Melbourne area inner gap + image constraint */
.area__inner {
gap: 1rem;
}
.area__inner img,
.area__media img,
.area img {
max-height: 240px;
object-fit: cover;
width: 100%;
}
.area__suburbs {
gap: 0.4rem 0.4rem;
}
.area__suburb,
.area__tag {
padding: 0.35rem 0.65rem;
font-size: 0.78rem;
}
/* D-fix: Built for the floor proof-anchor tighter */
.proof-anchor__stage {
gap: 0.75rem;
}
.proof-anchor__badges {
margin-top: 1rem;
gap: 0.5rem;
}
/* D-fix: T3 Methodology aggressive reductions */
.method-step__num {
font-size: 2rem;
line-height: 1;
margin-bottom: 0.5rem;
}
.method-step {
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
.method-step__label {
font-size: 0.78rem;
margin-bottom: 0.25rem;
}
.method-step__title {
font-size: 1.15rem;
line-height: 1.2;
margin-top: 0.3rem;
}
.method-step__body {
font-size: 0.95rem;
line-height: var(--mobile-leading-body);
margin-top: 0.5rem;
}
.method-step + .method-step {
border-top: 1px solid var(--color-line-dark);
margin-top: 0.5rem;
padding-top: 1.25rem;
}
/* TUNE: Sticky-nav scroll-margin for #contact-form on mobile */
#contact-form {
scroll-margin-top: 4.5rem;
}
}
/* ============= REUSABLE MODAL COMPONENT ============= */
.modal{
position:fixed; inset:0; z-index:200;
background:rgba(10,10,10,.85);
display:none;
align-items:center; justify-content:center;
padding:1rem;
}
.modal.is-open{ display:flex }
.modal__body{
background:var(--color-cream);
color:var(--color-ink);
border-radius:8px;
max-width:600px; width:100%;
max-height:90vh; overflow-y:auto;
position:relative;
padding:1.5rem;
}
.modal__close{
position:absolute; top:.75rem; right:.75rem;
width:32px; height:32px;
background:rgba(10,10,10,.85);
color:var(--color-cream);
border:0; border-radius:50%;
cursor:pointer;
display:flex; align-items:center; justify-content:center;
font-size:1.1rem; line-height:1;
}
.modal__close::before{ content:"×" }
.modal__image{
width:100%; height:auto; max-height:50vh;
object-fit:cover;
border-radius:6px;
margin-bottom:1rem;
}
.modal__title{
font-family:var(--display); font-size:1.4rem;
line-height:1.2; margin:0 0 .75rem;
color:var(--color-ink);
}
.modal__body-text{
font-size:.95rem; line-height:1.5;
color:var(--color-ink-muted);
margin:0;
}
body.modal-open{ overflow:hidden }
/* ============= STRUCTURAL RESTRUCTURE — mobile-only overrides ============= */
.t3-carousel{ display:none }
.testimonials__carousel{ display:none }
.cases-mobile-strip{ display:none }
.area__suburbs-mobile-strip{ display:none }
.services-mobile{ display:none }
@media (max-width:600px){
/* === T3 Methodology — hide desktop steps, show mobile carousel === */
.steps.steps--pulse{ display:none }
.t3-carousel{ display:block }
.t3-carousel__row{
display:flex; gap:1rem;
overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
padding:0 calc(50vw - 140px);
scrollbar-width:none;
}
.t3-carousel__row::-webkit-scrollbar{ display:none }
.t3-carousel__card{
flex:0 0 280px;
scroll-snap-align:center;
padding:1.25rem;
background:rgba(155,123,255,.08);
border:1px solid rgba(155,123,255,.20);
border-radius:8px;
}
.t3-carousel__num{
font-family:var(--display);
font-size:1.75rem; font-weight:600;
color:var(--color-purple-bright);
line-height:1; margin-bottom:.5rem;
}
.t3-carousel__label{
font-family:var(--mono);
font-size:.75rem; letter-spacing:.05em;
color:var(--color-chalk-muted);
text-transform:uppercase;
margin-bottom:.5rem;
}
.t3-carousel__title{
font-family:var(--display);
font-size:1.05rem; line-height:1.25;
color:var(--color-chalk);
margin:0;
}
.t3-carousel__pager{
display:flex; gap:.5rem;
justify-content:center; margin-top:1.25rem;
}
.t3-carousel__dot{
width:8px; height:8px; border-radius:50%;
background:rgba(196,181,253,.3); border:0;
cursor:pointer; padding:0;
transition:background .25s var(--ease), transform .25s var(--ease);
}
.t3-carousel__dot.is-active{
background:var(--color-purple-bright);
transform:scale(1.25);
}
/* === Testimonials — hide desktop grid, show mobile carousel === */
.testimonials__grid{ display:none }
.testimonials__carousel{ display:block }
.testimonials__row{
display:flex; gap:1rem;
overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
padding:0 calc(50vw - 160px);
scrollbar-width:none;
}
.testimonials__row::-webkit-scrollbar{ display:none }
.testimonials__row .testimonial-card{
flex:0 0 320px;
scroll-snap-align:center;
padding:1.25rem;
margin-bottom:0;
}
.testimonials__pager{
display:flex; gap:.5rem;
justify-content:center; margin-top:1.25rem;
}
.testimonials__dot{
width:8px; height:8px; border-radius:50%;
background:rgba(196,181,253,.3); border:0;
cursor:pointer; padding:0;
transition:background .25s var(--ease), transform .25s var(--ease);
}
.testimonials__dot.is-active{
background:var(--color-purple-base);
transform:scale(1.25);
}
/* === Case Studies — hide desktop cards, show mobile image strip === */
.case{ display:none }
.cases-mobile-strip{ display:block; padding-bottom:.5rem }
.cases-strip__row{
display:flex; gap:.75rem;
overflow-x:auto; scroll-snap-type:x proximity; scroll-behavior:smooth;
padding:0 1rem;
scrollbar-width:none;
}
.cases-strip__row::-webkit-scrollbar{ display:none }
.cases-strip__card{
flex:0 0 240px;
scroll-snap-align:start;
background:none; border:0; padding:0; cursor:pointer;
text-align:left;
position:relative;
}
.cases-strip__card img{
width:100%; height:160px; object-fit:cover;
border-radius:6px; display:block;
}
.cases-strip__title{
font-family:var(--display); font-size:.95rem;
line-height:1.2; color:var(--color-ink);
margin-top:.5rem;
}
.cases-strip__tag{
font-family:var(--mono); font-size:.68rem;
color:var(--color-purple-deep);
letter-spacing:.08em; text-transform:uppercase;
margin-top:.25rem;
}
/* === Servicing Melbourne — hide desktop tag wrap, show horizontal strip; cap image === */
.area__suburbs{ display:none }
.area__suburbs-mobile-strip{ display:block; margin:1rem 0 }
.area__suburbs-strip__row{
display:flex; gap:.5rem;
overflow-x:auto;
padding:0 1rem;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.area__suburbs-strip__row::-webkit-scrollbar{ display:none }
.area__suburbs-strip__tag{
flex:0 0 auto;
padding:.4rem .75rem;
background:rgba(196,181,253,.15);
color:var(--color-purple-deep);
font-family:var(--mono); font-size:.78rem;
border-radius:4px;
white-space:nowrap;
}
.area__inner img,
.area__media img,
.area img{
max-height:160px;
width:100%; object-fit:cover;
}
/* === Position section — merge paragraphs + shrink image === */
.positioning__body p{
margin-block:.4rem;
line-height:var(--mobile-leading-body);
}
.positioning__body p:first-child{ margin-top:0 }
.positioning__body p:last-child{ margin-bottom:0 }
.positioning__media img,
.positioning__img{
max-height:180px;
width:auto;
object-fit:contain;
margin:0 auto;
display:block;
}
/* === Built for the floor — 2×2 trust badge grid === */
.proof-anchor__badges{
display:grid;
grid-template-columns:1fr 1fr;
gap:.5rem;
margin-top:1rem;
}
.proof-anchor__badge{
padding:.6rem;
font-size:.85rem;
text-align:center;
}
.proof-anchor__badge svg,
.proof-anchor__badge img{
width:22px; height:22px;
margin-bottom:.25rem;
}
.proof-anchor__image img,
.proof-anchor__media img,
.proof-anchor__img{
max-height:200px;
width:100%; object-fit:cover;
}
/* === Cleaning Services — hide desktop grid, show mobile accordion === */
.hairline-grid.hairline-grid--bone.grid-3{ display:none }
.services-mobile{
display:flex; flex-direction:column;
border-top:1px solid var(--color-line);
}
.service-row{ border-bottom:1px solid var(--color-line) }
.service-row__bar{
width:100%; display:flex; align-items:center; gap:1rem;
padding:1rem 0;
background:none; border:0; cursor:pointer; color:inherit; text-align:left;
}
.service-row__num{
flex-shrink:0; font-family:var(--mono);
font-size:.85rem; color:var(--color-purple-deep);
width:32px;
}
.service-row__name{
flex:1;
font-family:var(--display); font-size:1.05rem;
color:var(--color-ink); line-height:1.2;
}
.service-row__chev{
width:24px; height:24px; flex-shrink:0;
position:relative;
border:1px solid var(--color-line-strong);
color:var(--color-ink);
transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.service-row__chev::before,
.service-row__chev::after{
content:""; position:absolute; left:50%; top:50%;
transform:translate(-50%,-50%); background:currentColor;
}
.service-row__chev::before{ width:11px; height:1.5px }
.service-row__chev::after{ width:1.5px; height:11px; transition:transform .3s var(--ease) }
.service-row.is-open .service-row__chev{
background:var(--color-purple-deep);
border-color:var(--color-purple-deep);
color:var(--color-cream);
}
.service-row.is-open .service-row__chev::after{ transform:translate(-50%,-50%) rotate(90deg) }
.service-row__panel{
max-height:0; overflow:hidden;
transition:max-height .35s var(--ease), padding .3s var(--ease);
padding:0 0 0 calc(32px + 1rem);
}
.service-row.is-open .service-row__panel{
max-height:360px; padding-bottom:1.25rem;
}
.service-row__tag{
font-family:var(--mono); font-size:.7rem;
color:var(--color-purple-deep);
letter-spacing:.05em; text-transform:uppercase;
margin-bottom:.5rem;
}
.service-row__desc{
color:var(--color-ink-muted); line-height:1.5;
font-size:.95rem; margin:0 0 .85rem;
}
.service-row__link{
display:inline-flex; align-items:center; gap:.4rem;
font-size:.85rem; color:var(--color-purple-deep);
font-weight:500; text-decoration:none;
border-bottom:1px solid currentColor; padding-bottom:1px;
}
}
/* ============= CAT A FIXES — post-restructure bug fixes ============= */
@media (max-width:600px){
/* Bug 4: Testimonials dual-render — defensive hide of desktop grid */
.testimonials__grid,
.testimonials__list,
section.testimonials .testimonials__grid { display:none !important }
/* Bug 5a: Servicing Melbourne — restore skyline image, cap at 160px */
.area__photo,
.area__photo-frame { display:block !important }
.area__photo-img,
.area__inner img,
.area__photo img {
display:block !important;
max-height:160px;
width:100%;
object-fit:cover;
}
/* Bug 5b: Servicing Melbourne — hide desktop suburb list, force strip nowrap */
.area__suburbs,
.area__suburbs--desktop { display:none !important }
.area__suburbs-mobile-strip { display:block }
.area__suburbs-strip__row {
flex-wrap:nowrap;
overflow-x:auto;
}
/* Bug 1: Position section — center image below text, larger size */
.positioning__media {
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:1rem 0 0;
}
.positioning__media img,
.positioning__img {
max-width:240px;
max-height:220px;
width:auto;
height:auto;
object-fit:contain;
margin:0 auto;
border-radius:6px;
}
/* Bug 2: Cleaning Services accordion — image inside expanded panel */
.service-row__image {
width:100%;
max-height:200px;
object-fit:cover;
border-radius:6px;
margin-bottom:0.85rem;
display:block;
}
.service-row.is-open .service-row__panel {
max-height:560px;
padding-bottom:1.25rem;
}
/* Bug 3: gaps — apply tightened section padding to all sections */
main > section,
main > .section,
body > section {
padding-top:var(--mobile-section-pad-y);
padding-bottom:var(--mobile-section-pad-y);
}
/* Bug 3: new mobile container margins tightened */
.t3-carousel { margin:1rem 0 }
.t3-carousel__pager { margin-top:1rem }
.testimonials__carousel { margin:1rem 0 }
.testimonials__pager { margin-top:1rem }
.cases-mobile-strip { margin:1rem 0 }
.area__suburbs-mobile-strip { margin:0.75rem 0 }
.services-mobile { margin:1rem 0 }
/* Bug 3: eyebrow + heading internal stack tightening */
.eyebrow,
.section-eyebrow,
.kicker { margin-bottom:0.4rem }
h2, .section-title { margin-bottom:0.75rem }
}
/* ============= WORKSTREAM 11 — Cat A + Cat B fixes (2026-05-19) ============= */
@media (max-width:600px){
/* Phase 2: Position section pastel background restoration */
section[data-screen-label="02 Positioning"] {
background: #F3F1FB !important;
}
/* Phase 3: Cleaning Services top compaction */
section[data-screen-label="03 Services"] .section-head--centred .kicker {
margin-bottom: 0.3rem;
}
section[data-screen-label="03 Services"] .section-head--centred h2 {
margin-bottom: 0.5rem;
}
section[data-screen-label="03 Services"] .section-head--centred .lead,
section[data-screen-label="03 Services"] .section-head__lead--narrow {
margin-bottom: 1rem;
}
section[data-screen-label="03 Services"] .services-mobile {
margin-top: 0.75rem;
}
/* Phase 4: Cleaning Services expanded panel centering */
.service-row.is-open .service-row__panel {
text-align: center;
}
.service-row__image {
margin-left: auto;
margin-right: auto;
display: block;
}
.service-row__tag,
.service-row__desc {
text-align: center;
}
.service-row__link {
margin: 0 auto;
justify-content: center;
}
/* Phase 5: Industries top compaction */
section[data-screen-label="05 Industries"] .section-head .kicker {
margin-bottom: 0.3rem;
}
section[data-screen-label="05 Industries"] .section-head h2 {
margin-bottom: 0.5rem;
}
section[data-screen-label="05 Industries"] .section-head .lead {
margin-bottom: 1rem;
}
section[data-screen-label="05 Industries"] .industries-mobile {
margin-top: 0.75rem;
}
/* Phase 6: Testimonial company logos on mobile carousel */
.testimonials__row .testimonial-card__logo {
display: flex;
justify-content: center;
margin-bottom: 0.75rem;
}
.testimonials__row .testimonial-card__logo img {
max-height: 40px;
width: auto;
object-fit: contain;
display: block;
}
/* Phase 7: Case Studies cascade fix — defensive !important wins over later base rule at line 1341 */
.case {
display: none !important;
}
/* Phase 8: Sticky banner safe-area for iOS home indicator */
.sticky-cta {
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
}
/* T3 Methodology — earlier editorial design (mobile), COMPACTED to ~one phone screen.
Each stage is a horizontal band: italic numeral on the LEFT (vertically centred, reduced
size), with the mono label + description stacked to its RIGHT. The flat DOM (no wrapper
around label+features) makes a 2-column grid the clean way to get that row layout.
Line, node dots and gliding ball stay a desktop feature (hidden here); the dim->active
highlight and reduced-motion calm state are unchanged. */
.t3-methodology {
padding: 2rem 1.25rem;
background: var(--color-navy-deep);
color: var(--color-chalk);
}
.t3-rings {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
max-width: 100%;
}
.t3-line, .t3-ball, .t3-ring-mark { display: none; }
.t3-ring {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
column-gap: 0.95rem;
align-items: center;
padding: 0;
}
.t3-ring + .t3-ring {
border-top: 1px solid var(--color-line-dark);
padding-top: 0.9rem;
margin-top: 0.9rem;
}
.t3-ring-num {
grid-column: 1;
grid-row: 1 / span 2;
align-self: center;
margin: 0;
font-family: var(--display);
font-weight: 400;
font-style: italic;
font-size: clamp(2.2rem, 11vw, 3rem);
line-height: 1;
letter-spacing: -.04em;
color: var(--color-purple-deep);
opacity: .5;
transition: color .4s var(--ease), opacity .4s var(--ease);
}
.t3-ring.is-active .t3-ring-num { color: var(--color-purple-bright); opacity: 1; }
.t3-ring-label {
grid-column: 2;
grid-row: 1;
align-self: end;
font-family: var(--mono);
font-size: .72rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--color-purple-bright);
font-weight: 500;
margin: 0 0 .25rem;
opacity: .4;
transition: opacity .4s var(--ease);
}
.t3-ring.is-active .t3-ring-label { opacity: 1; }
/* Always visible (no max-height collapse) so the loop causes no layout shift. */
.t3-ring-features {
grid-column: 2;
grid-row: 2;
align-self: start;
margin: 0;
font-size: 0.9rem;
line-height: 1.45;
color: var(--color-chalk-muted);
opacity: .4;
transition: opacity .4s var(--ease);
}
.t3-ring.is-active .t3-ring-features { opacity: 1; }
/* Phase 11: Servicing Melbourne SVG map */
.melbourne-map-wrap {
margin: 1rem 0;
}
.melbourne-map {
width: 100%;
height: auto;
max-width: 400px;
margin: 0 auto;
display: block;
}
.melbourne-map__bay {
fill: rgba(155,123,255,.18);
}
.melbourne-map__land {
fill: rgba(250,247,242,.6);
stroke: var(--color-purple-deep);
stroke-width: 1.5;
}
.melbourne-map__suburb circle {
fill: var(--color-purple-base);
stroke: var(--color-cream);
stroke-width: 1.5;
}
.melbourne-map__suburb text {
font-family: var(--mono);
font-size: 8px;
fill: var(--color-ink);
font-weight: 500;
}
.melbourne-map__cbd circle {
fill: var(--color-purple-deep);
}
.melbourne-map__cbd text {
font-weight: 700;
font-size: 9px;
}
}
/* T3 Methodology — earlier editorial design (≥601px). Big italic serif numerals sitting above
a thin horizontal line with small octagon node dots; open columns with hairline dividers (no
cards, no circle rings). The connecting line + gliding orb are positioned by JS
(initT3Methodology) from the live node-dot centres, so they track at any width. */
@media (min-width:601px){
.t3-methodology {
padding: 5rem 2rem;
background: var(--color-navy-deep);
color: var(--color-chalk);
}
.t3-rings {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
max-width: 1100px;
margin: 0 auto;
}
/* Thin connector through the node dots; JS sets left/top/width. */
.t3-line {
position: absolute;
height: 1px;
background: linear-gradient(90deg, rgba(109,40,217,.22) 0%, rgba(139,92,246,.45) 50%, rgba(176,132,232,.22) 100%);
z-index: 1;
pointer-events: none;
}
/* Gliding accent orb that travels between the node dots; JS sets left/top + opacity. */
.t3-ball {
position: absolute;
width: 22px;
height: 22px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #E8D5FF 0%, #B084E8 50%, #8B5CF6 100%);
box-shadow: 0 0 30px 7px rgba(176,132,232,.7), 0 0 12px 2px rgba(255,255,255,.4) inset;
transform: translate(-50%, -50%);
transition: left .6s cubic-bezier(.65,.05,.35,1), top .6s cubic-bezier(.65,.05,.35,1);
opacity: 0;
z-index: 5;
pointer-events: none;
}
/* Open columns, hairline divider between (no card border/background/glow). */
.t3-ring {
position: relative;
z-index: 2;
text-align: left;
padding: 0 2rem 0 0;
}
.t3-ring + .t3-ring {
padding-left: 2.5rem;
border-left: 1px solid var(--color-line-dark);
}
/* Big italic serif numeral; emphasis lives here + on the dot + text, not on a card. */
.t3-ring-num {
font-family: var(--display);
font-weight: 400;
font-style: italic;
font-size: clamp(4rem, 6vw, 5.5rem);
line-height: 1;
letter-spacing: -.04em;
color: var(--color-purple-deep);
opacity: .45;
transform-origin: left center;
transition: color .35s var(--ease), opacity .35s var(--ease), transform .35s var(--ease), filter .35s var(--ease);
}
.t3-ring.is-active .t3-ring-num {
color: #E8D5FF;
opacity: 1;
transform: scale(1.08);
filter: drop-shadow(0 0 28px rgba(176,132,232,.7));
}
/* Small octagon node dot on the line (replaces the old 56px circle ring). */
.t3-ring-mark {
position: absolute;
left: 0;
top: 75px;
width: 12px;
height: 12px;
border: 0;
border-radius: 0;
background: var(--color-purple-base);
clip-path: polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
transform: scale(.9);
z-index: 3;
transition: background .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.t3-ring.is-active .t3-ring-mark {
background: #FFFFFF;
box-shadow: 0 0 14px rgba(255,255,255,.95), 0 0 28px rgba(176,132,232,.85);
transform: scale(1.25);
}
.t3-ring-label {
font-family: var(--mono);
font-size: .82rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--color-purple-bright);
font-weight: 500;
margin-top: 1.5rem;
opacity: .35;
transition: opacity .35s var(--ease);
}
.t3-ring.is-active .t3-ring-label { opacity: 1; }
/* Always visible (no max-height collapse) so the loop causes no layout shift. */
.t3-ring-features {
margin-top: 1rem;
font-size: 1.02rem;
line-height: 1.6;
color: var(--color-chalk-muted);
max-width: 36ch;
opacity: .3;
transition: opacity .35s var(--ease);
}
.t3-ring.is-active .t3-ring-features { opacity: 1; }
}
/* Reduced motion: no gliding orb, no transitions; JS lights all three stages (calm final). */
@media (prefers-reduced-motion: reduce){
.t3-ball { display: none !important; }
.t3-ring, .t3-ring-mark, .t3-ring-num, .t3-ring-label, .t3-ring-features { transition: none !important; }
.t3-ring.is-active .t3-ring-num, .t3-ring.is-active .t3-ring-mark { transform: none !important; filter: none !important; }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
#contact-form{scroll-margin-top:5rem}
body{background:var(--color-cream);color:var(--color-ink);font-family:var(--sans);font-size:var(--type-body-base);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--color-purple-base);color:var(--color-cream)}
.container{width:100%;max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:var(--leading-headline);margin:0}
h1{font-size:var(--type-display-xl);line-height:var(--leading-display)}
h2{font-size:var(--type-display-lg)}
h3{font-size:var(--type-display-md)}
.lead{font-size:var(--type-body-lg);color:var(--color-ink-muted);max-width:60ch;line-height:1.5}
.lead--dark{color:var(--color-chalk-muted)}
.kicker{font-family:var(--mono);font-size:var(--type-kicker);letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--color-purple-base);display:inline-flex;align-items:center;gap:.6rem}
.kicker--dark{color:var(--color-purple-bright)}
.kicker .dot{width:6px;height:6px;background:currentColor;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.btn{display:inline-flex;align-items:center;gap:.65rem;height:56px;padding:0 1.75rem;border-radius:2px;font-family:var(--sans);font-weight:500;font-size:1rem;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);white-space:nowrap}
.btn .arrow{transition:transform .3s var(--ease);display:inline-flex}
.btn:hover .arrow{transform:translateX(4px)}
.btn--primary{background:var(--color-purple-base);color:var(--color-cream)}
.btn--primary:hover{background:var(--color-purple-deep)}
.btn--ink{background:var(--color-navy-deep);color:var(--color-cream)}
.btn--ink:hover{background:var(--color-purple-deep)}
.btn--secondary{background:transparent;color:var(--color-ink);border:1.5px solid var(--color-ink)}
.btn--secondary:hover{background:var(--color-ink);color:var(--color-cream)}
.btn--secondary-dark{background:transparent;color:var(--color-chalk);border:1.5px solid var(--color-chalk)}
.btn--secondary-dark:hover{background:var(--color-chalk);color:var(--color-navy-deep)}
.btn--sm{height:44px;padding:0 1.25rem;font-size:.9rem}
.tlink{display:inline-flex;align-items:center;gap:.5rem;color:var(--color-purple-deep);font-weight:500;border-bottom:1px solid currentColor;padding-bottom:3px;transition:color .2s var(--ease),gap .2s var(--ease)}
.tlink--dark{color:var(--color-purple-bright)}
.tlink:hover{gap:.85rem}
/* NAV */
.nav{position:fixed;inset:0 0 auto 0;height:92px;z-index:100;background:var(--color-cream);border-bottom:1px solid var(--color-line);transition:background .3s var(--ease)}
.nav.is-scrolled{background:rgba(250,247,242,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav__inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.brand{display:flex;align-items:center}
.brand__lockup{height:56px;width:auto;display:block}
.brand__lockup--lg{height:72px}
@media (max-width:520px){.brand__lockup{height:44px}}
.nav__links{display:flex;gap:2rem;align-items:center}
.nav__link{font-size:.92rem;color:var(--color-ink);font-weight:500;position:relative;padding:6px 0;transition:color .2s var(--ease)}
.nav__link:hover{color:var(--color-purple-deep)}
.nav__link.is-active::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);width:8px;height:8px;background:var(--color-purple-base);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.nav__right{display:flex;align-items:center;gap:1.25rem}
.nav__phone{font-family:var(--mono);font-size:.85rem;color:var(--color-ink);font-weight:500;display:inline-flex;align-items:center;gap:.5rem}
.nav__menu{display:none;width:44px;height:44px;align-items:center;justify-content:center}
@media (max-width:1080px){.nav__links,.nav__phone{display:none}.nav__right .btn{display:none}.nav__menu{display:inline-flex}}
.mobile-nav{position:fixed;top:0;left:0;right:0;height:70vh;background:var(--color-navy-deep);color:var(--color-chalk);z-index:200;display:flex;flex-direction:column;transform:translateY(-100%);transition:transform .4s var(--ease);overflow:hidden;padding:1.5rem var(--gutter) 2rem}
.mobile-nav.is-open{transform:translateY(0)!important}
/* FAQ mobile stack (D3) */
@media (max-width:780px){
.faq-page-grid{grid-template-columns:1fr!important;gap:1.5rem!important}
.faq-page-grid nav{position:static!important;top:auto!important;flex-direction:row!important;flex-wrap:wrap!important;overflow-x:auto;padding-bottom:.5rem}
.faq-page-grid nav a{border-bottom:0!important;border-right:1px solid var(--color-line);padding:.5rem .75rem!important;white-space:nowrap}
}
/* Methodology mobile overflow (D5) */
@media (max-width:780px){
.phase__intro,.phase__schematic,.phase__dash{max-width:calc(100vw - 32px)}
.phase .container{padding-inline:16px}
}
/* Trust bar mobile stack (D-B2) */
@media (max-width:780px){
.trust__inner{flex-direction:column;align-items:stretch;overflow-x:visible;gap:.25rem;padding:1rem var(--gutter)}
.trust__item{padding:.5rem 0;justify-content:flex-start}
.trust__item + .trust__item{border-left:0;border-top:1px solid var(--color-line)}
}
/* Hero H1/H2 italic phrase clamp (D4) */
@media (max-width:480px){
.page-head h1,.hero h1{font-size:clamp(1.85rem,8vw,2.6rem)!important;max-width:none}
.block h2{font-size:clamp(1.6rem,6.5vw,2.1rem)}
.block h2 .grad-text,.page-head h1 .grad-text{word-break:break-word;overflow-wrap:anywhere}
}
.mobile-nav__inner{display:flex;flex-direction:column;height:100%;width:100%}
.mobile-nav__top{display:flex;justify-content:space-between;align-items:center;height:64px}
.mobile-nav__list{margin-top:2rem;display:flex;flex-direction:column;gap:1.1rem;overflow-y:auto;flex:1}
.mobile-nav__list a{font-family:var(--display);font-size:1.85rem;font-weight:500;letter-spacing:-.02em;color:var(--color-chalk)}
.mobile-nav__list a.is-active{color:var(--color-purple-bright)}
/* Mega-4 T2: invert the dark logo to white on the dark mobile nav overlay (no white asset needed) */
.brand__lockup--invert{filter:brightness(0) invert(1)}
.mobile-nav__foot{margin-top:1rem;padding-top:1.25rem;border-top:1px solid var(--color-line-dark);display:flex;flex-direction:column;gap:.5rem}
/* PAGE HEADER (for non-home) */
.page-head{background:var(--color-navy-deep);color:var(--color-chalk);position:relative;overflow:hidden;padding-top:calc(92px + 4rem);padding-bottom:4rem}
.page-head::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 60% at 100% 0%, rgba(124,80,214,.32) 0%, transparent 60%),radial-gradient(70% 60% at 0% 110%, rgba(76,29,149,.22) 0%, transparent 60%)}
.page-head__inner{position:relative;z-index:1}
.page-head .crumbs{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-chalk-muted);margin-bottom:1.25rem}
.page-head .crumbs a{color:var(--color-chalk-muted)}
.page-head .crumbs a:hover{color:var(--color-purple-bright)}
.page-head h1{color:var(--color-chalk);font-weight:500;max-width:18ch}
.page-head h1 .accent{color:var(--color-purple-bright);font-style:italic}
.page-head__sub{margin-top:1.5rem;color:var(--color-chalk-muted);font-size:1.18rem;line-height:1.55;max-width:60ch}
.page-head__meta{margin-top:2rem;display:flex;gap:2.5rem;flex-wrap:wrap;font-family:var(--mono);font-size:.78rem;color:var(--color-chalk-muted)}
.page-head__meta strong{display:block;color:var(--color-chalk);font-weight:500;font-size:1rem;font-family:var(--sans);margin-bottom:2px}
/* SECTIONS */
/* mega12: tighter vertical rhythm. desktop 48px t+b, tablet ~36px, mobile ~32px.
Hero (separate .hero rule) and final CTA (override below) keep their generous padding. */
section.block{padding:clamp(2rem,3.5vw,3rem) 0}
section.block--dark{background:var(--color-navy-deep);color:var(--color-chalk);position:relative;overflow:hidden}
section.block--bone{background:var(--color-bone)}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;margin-bottom:3.5rem}
.section-head--centred{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;margin-bottom:3rem}
.section-head--centred .kicker{justify-content:center}
.section-head--centred h2{margin-top:1.25rem}
.section-head__lead--narrow{max-width:600px;margin:0 auto}
@media (max-width:780px){.section-head{grid-template-columns:1fr;gap:1.25rem;margin-bottom:2.5rem}}
.section-head h2{max-width:14ch}
.section-head h2 .accent{color:var(--color-purple-deep);font-style:italic}
.section-head--dark h2{color:var(--color-chalk)}
.section-head--dark h2 .accent{color:var(--color-purple-bright)}
/* HERO (homepage) */
/* mega13.9: min-height:90vh removed. Hero is now content-sized, so zooming the browser
down (which inflates vh) no longer stretches the hero into an empty band. */
.hero{position:relative;background:var(--color-navy-deep);color:var(--color-chalk);padding-top:calc(92px + 48px);padding-bottom:4rem;display:flex;align-items:stretch;overflow:hidden}
@media (max-width:1024px){.hero{padding-top:calc(92px + 36px)}}
@media (max-width:767px){.hero{padding-top:calc(92px + 32px);padding-bottom:3rem}}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 60% at 100% 0%, rgba(124,80,214,.34) 0%, transparent 60%),radial-gradient(70% 60% at 10% 110%, rgba(76,29,149,.22) 0%, transparent 60%)}
.hero__inner{position:relative;z-index:1;width:100%;max-width:var(--container);margin:0 auto;padding-inline:var(--gutter);display:grid;grid-template-columns:1.35fr 1fr;gap:4rem;align-items:end}
@media (max-width:960px){.hero__inner{grid-template-columns:1fr;gap:3rem}}
.hero h1{margin-top:1.4rem;color:var(--color-chalk)}
.hero h1 .accent{color:var(--color-purple-bright);font-style:italic}
.hero__sub{margin-top:1.6rem;color:var(--color-chalk-muted);max-width:560px;font-size:1.18rem;line-height:1.55}
.hero__ctas{margin-top:2.25rem;display:flex;gap:1rem;flex-wrap:wrap}
.hero__meta{display:none}
.hero__meta strong{color:var(--color-chalk);font-weight:500;display:block;font-size:1rem;letter-spacing:0;margin-bottom:2px;font-family:var(--sans)}
.hero__visual{position:relative;align-self:end;aspect-ratio:4/5;max-width:480px;justify-self:end;width:100%}
.hero__visual .frame{position:absolute;inset:0;background:linear-gradient(160deg,#1E1B4B 0%,#312E81 60%,#4C1D95 100%);border:1px solid var(--color-line-dark);overflow:hidden}
.hero__visual .frame::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%, rgba(139,92,246,.35), transparent 50%);pointer-events:none;z-index:2;mix-blend-mode:screen;opacity:.55}
.hero__visual .hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;z-index:1;display:block}
.hero__visual{filter:drop-shadow(0 0 60px rgba(139,92,246,.28)) drop-shadow(0 20px 40px rgba(76,29,149,.35))}
.hero__visual .placeholder{position:absolute;inset:1.25rem;border:1px dashed rgba(250,247,242,.3);display:flex;flex-direction:column;justify-content:space-between;padding:1.5rem}
.hero__visual .placeholder small{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,247,242,.5)}
.hero__visual .placeholder p{font-size:.85rem;color:var(--color-chalk-muted);max-width:240px}
.octa-corner{position:absolute;width:64px;height:64px;background:var(--color-purple-base);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.octa-corner.tl{top:-22px;left:-22px}
.octa-corner.br{bottom:-22px;right:-22px;background:var(--color-purple-deep)}
/* TRUST */
.trust{background:var(--color-cream);border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line)}
.trust__inner{max-width:var(--container);margin:0 auto;padding:1.25rem var(--gutter);display:flex;align-items:center;overflow-x:auto;scrollbar-width:none}
.trust__inner::-webkit-scrollbar{display:none}
.trust__item{display:flex;align-items:center;gap:.7rem;padding:.4rem 1.5rem;flex-shrink:0;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-ink);font-weight:500}
.trust__item + .trust__item{border-left:1px solid var(--color-line)}
.trust__check{width:18px;height:18px;flex-shrink:0;background:var(--color-purple-base);color:var(--color-cream);display:inline-flex;align-items:center;justify-content:center;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.trust__check svg{width:11px;height:11px;stroke-width:3}
/* GRID PATTERNS (services, industries, pillars) */
.hairline-grid{display:grid;border-top:1px solid var(--color-line);border-left:1px solid var(--color-line)}
.hairline-grid > *{border-right:1px solid var(--color-line);border-bottom:1px solid var(--color-line);background:var(--color-cream);transition:background .3s var(--ease)}
.hairline-grid--bone > *{background:var(--color-bone)}
.hairline-grid > *:hover{background:var(--color-paper)}
.hairline-grid--bone > *:hover{background:var(--color-cream)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1000px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}}
.card-srv{padding:2rem;display:flex;flex-direction:column;gap:1.1rem;min-height:280px}
.card-srv__top{display:flex;justify-content:space-between;align-items:flex-start}
.card-srv__icon{width:56px;height:56px;background:rgba(109,40,217,.1);color:var(--color-purple-deep);display:flex;align-items:center;justify-content:center;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);transition:background .3s var(--ease),color .3s var(--ease)}
.card-srv:hover .card-srv__icon{background:var(--color-purple-base);color:var(--color-cream)}
.card-srv__icon svg{width:24px;height:24px;stroke-width:1.5}
.card-srv__num{font-family:var(--mono);font-size:.82rem;color:var(--color-ink-muted);letter-spacing:.05em}
.card-srv__title{font-family:var(--display);font-size:1.5rem;font-weight:500;letter-spacing:-.015em;line-height:1.15}
.card-srv__desc{font-size:.95rem;color:var(--color-ink-muted);line-height:1.55;flex-grow:1}
.card-srv__link{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--color-purple-deep);font-weight:500}
.card-srv:hover .card-srv__link .arrow{transform:translateX(4px)}
.card-srv__link .arrow{transition:transform .25s var(--ease)}
/* In-development status line for industry index cards (D7) */
.card-srv__fig{
display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
font-family:var(--mono);font-size:.66rem;font-weight:500;
letter-spacing:.18em;text-transform:uppercase;
color:var(--color-ink-muted);
padding:.32rem .55rem .32rem .5rem;
border:1px solid var(--color-line-strong);
background:rgba(14,11,31,.02);
border-radius:1px;
margin-top:-.35rem;
}
.card-srv__fig-tick{
width:6px;height:6px;background:var(--color-purple-bright);
clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
flex-shrink:0;
}
.card-srv--wip:hover .card-srv__fig{border-color:var(--color-purple-deep);color:var(--color-purple-deep)}
.card-srv--wip:hover .card-srv__fig-tick{background:var(--color-purple-deep)}
/* ============ READY CTA (pre-footer) ============ */
/* Standardised to Group A pale-purple #F3F1FB so it flows seamlessly with the
Service Area section above. Layout flipped to image-LEFT + text-RIGHT via
flex-direction:row-reverse — DOM order keeps text first for screen readers. */
.ready{background:#F3F1FB;color:var(--color-ink);position:relative;overflow:hidden}
.ready::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 40%,rgba(196,181,253,.22) 0%,transparent 55%);pointer-events:none}
.ready__inner{display:flex;flex-direction:row-reverse;gap:4rem;align-items:center;position:relative}
.ready__left{flex:1 1 0;min-width:0}
@media (max-width:980px){.ready__inner{flex-direction:column;gap:3rem}.ready__left{flex:1 1 auto}.ready__frame{height:280px}}
.ready__title{font-family:var(--display);font-size:clamp(2.4rem,5vw,4rem);font-weight:500;letter-spacing:-.02em;line-height:1.05;margin-top:1.25rem;max-width:14ch}
.ready__copy{font-size:var(--type-body-lg);line-height:1.55;color:var(--color-ink-muted);margin:1.75rem 0 2.25rem;max-width:46ch}
.ready__ctas{display:flex;flex-wrap:wrap;gap:1rem}
.ready__right{position:relative;flex:0 0 560px;max-width:560px;width:100%}
@media (max-width:1200px){.ready__right{flex:0 0 480px;max-width:480px}}
@media (max-width:980px){.ready__right{flex:1 1 auto;max-width:480px;margin:0 auto}}
.ready__halo{position:absolute;inset:-14% -10%;border-radius:50%;z-index:0;background:radial-gradient(circle at 50% 45%,rgba(196,181,253,.55) 0%,rgba(250,247,242,.65) 45%,transparent 75%);filter:blur(28px)}
.ready__frame{position:relative;width:100%;height:380px;overflow:hidden;border-radius:12px;background:linear-gradient(160deg,#EDE6FE 0%,#D8C8FB 60%,#C4B5FD 100%);z-index:1}
.ready__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;z-index:2}
.ready__placard{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:1.25rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(76,29,149,.55);z-index:1;background:repeating-linear-gradient(45deg,transparent 0,transparent 22px,rgba(76,29,149,.06) 22px,rgba(76,29,149,.06) 23px)}
.ready__placard::after{content:"";position:absolute;inset:16px;border:1px dashed rgba(76,29,149,.22);border-radius:14px;pointer-events:none}
.ready__placard-tag{align-self:flex-start;background:rgba(76,29,149,.12);padding:.3rem .55rem;letter-spacing:.06em;text-transform:none;font-size:.66rem;border-radius:3px}
.ready__placard-meta{align-self:flex-end;opacity:.7}
/* ============ DEMANDING SPACES (diagonal photo row) ============ */
.demanding{background:var(--color-navy-deep);color:var(--color-chalk);position:relative;overflow:hidden}
.demanding::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse at 50% 30%,rgba(109,40,217,.18) 0%,transparent 65%);
}
.demanding__head{text-align:center;max-width:62rem;margin:0 auto 2.5rem;position:relative}
.demanding__title{font-family:var(--display);font-size:clamp(2rem,4.4vw,3.6rem);font-weight:500;letter-spacing:-.02em;line-height:1.08;margin:1.25rem auto 0;max-width:18ch;color:var(--color-chalk)}
.demanding__sub{color:var(--color-chalk-muted);font-size:var(--type-body-lg);line-height:1.55;max-width:54ch;margin:1.5rem auto 0}
.demanding__row{
display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(1.25rem,2.5vw,2rem);
position:relative;padding:0;
}
@media (max-width:820px){.demanding__row{grid-template-columns:1fr;gap:1.5rem}.diag{height:380px;max-width:360px;margin:0 auto;width:100%}}
.diag{
position:relative;height:clamp(360px,32vw,440px);
filter:
drop-shadow(0 0 1px rgba(167,139,250,.55))
drop-shadow(0 0 22px rgba(139,92,246,.28))
drop-shadow(0 22px 36px rgba(0,0,0,.45));
transition:filter .4s var(--ease);
}
.diag:hover{
filter:
drop-shadow(0 0 1.5px rgba(196,181,253,.85))
drop-shadow(0 0 32px rgba(139,92,246,.5))
drop-shadow(0 28px 44px rgba(0,0,0,.5));
}
.diag__mask{
position:absolute;inset:0;overflow:hidden;
clip-path:polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
background:linear-gradient(135deg,#1c1432 0%,#2a1d4a 100%);
}
/* mega13.13: switched from skewX(-15deg) + counter-skewed image to a clip-path
parallelogram on the mask. The image now fills the mask's full rectangular
bounding box (no skew, no scale overshoot), and the clip-path crops it to the
parallelogram. Geometry-pure — no asymmetric corner gaps possible. Hover lift
uses a subtle uniform scale instead of a skewed scale. */
.diag__img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center;display:block;
transform-origin:center;
z-index:2;
transition:transform .5s var(--ease);
}
.diag[data-cat="industrial"] .diag__img{object-position:center 30%}
.diag[data-cat="retail"] .diag__img{object-position:center 30%}
.diag:hover .diag__img{transform:scale(1.04)}
.diag.is-empty .diag__mask{background:#F3F1FB}
.diag__placard{
position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
padding:1.5rem 2.25rem;
clip-path:polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.55);z-index:1;
background:repeating-linear-gradient(45deg,transparent 0,transparent 22px,rgba(255,255,255,.04) 22px,rgba(255,255,255,.04) 23px);
}
.diag__placard-tag{align-self:flex-start;background:rgba(109,40,217,.32);padding:.32rem .6rem;letter-spacing:.06em;text-transform:none;font-size:.66rem;color:#E9D5FF}
.diag__placard-meta{align-self:flex-end;opacity:.7}
.demanding__labels{
display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(1.25rem,2.5vw,2rem);
margin-top:1.5rem;
font-family:var(--mono);font-size:.82rem;letter-spacing:.28em;text-transform:uppercase;
color:var(--color-chalk-muted);font-weight:600;
text-align:center;
}
.demanding__labels span:not(.demanding__dot){color:#C4B5FD}
.demanding__dot{display:none}
@media (max-width:820px){
/* mega13.13: clip-path geometry is breakpoint-agnostic — no per-width scale
correction needed. Image fills the rectangular bounding box at all widths
and the clip-path crops cleanly. */
.diag:hover .diag__img{transform:scale(1.04)}
.demanding__labels{grid-template-columns:1fr;gap:.75rem;font-size:.72rem;letter-spacing:.22em}
}
/* Section padding override: equalise top + bottom for the demanding band */
section.block.demanding{padding:clamp(2.5rem,5vw,5rem) 0}
/* Section 3 mobile — Demanding spaces as horizontal swipe carousel */
.demanding__pager{display:none}
@media (max-width:600px){
.demanding__row{
display:flex;
grid-template-columns:none;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
gap:1rem;
padding-left:calc((100vw - min(85vw, 360px)) / 2);
padding-right:calc((100vw - min(85vw, 360px)) / 2);
scrollbar-width:none;
-ms-overflow-style:none;
}
.demanding__row::-webkit-scrollbar{display:none}
.demanding .diag{
flex:0 0 min(85vw, 360px);
height:auto;
width:auto;
max-width:none;
margin:0;
aspect-ratio:4/3;
scroll-snap-align:center;
scroll-snap-stop:always;
}
.demanding__labels{display:none}
.demanding__pager{
display:flex;
justify-content:center;
gap:.6rem;
margin-top:1.5rem;
}
.demanding__pager-dot{
width:8px;height:8px;border-radius:50%;
background:rgba(196,181,253,.3);
border:0;padding:0;cursor:pointer;
transition:background .25s var(--ease),transform .25s var(--ease);
}
.demanding__pager-dot.is-active{
background:var(--color-purple-bright);
transform:scale(1.25);
}
}
.hotspots__inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
@media (max-width:980px){.hotspots__inner{grid-template-columns:1fr;gap:3rem}}
.hotspots__col h2{max-width:14ch}
.hotspots__col--right{display:flex;flex-direction:column;gap:1.5rem;position:sticky;top:6rem}
@media (max-width:980px){.hotspots__col--right{position:static}}
/* mega11.6 alternating pattern: image-left + text-right at desktop. Mobile order unchanged. */
@media (min-width:981px){
.hotspots__inner--reverse > .hotspots__col--left{order:2}
.hotspots__inner--reverse > .hotspots__col--right{order:1}
}
.hotspots__list{margin-top:2.5rem;border-top:1px solid var(--color-line)}
.hs-item{border-bottom:1px solid var(--color-line);transition:background .25s var(--ease)}
.hs-item.is-hover .hs-item__title{color:var(--color-purple-deep)}
.hs-item__bar{
width:100%;display:flex;align-items:center;gap:1rem;padding:1.15rem 0;
background:none;border:0;cursor:pointer;color:inherit;text-align:left;
}
.hs-item__num{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--color-purple-deep);font-weight:500;min-width:2.4rem}
.hs-item__title{font-family:var(--display);font-size:1.45rem;font-weight:500;letter-spacing:-.015em;flex:1;line-height:1.15;transition:color .2s var(--ease)}
.hs-item.is-open .hs-item__title{color:var(--color-purple-deep)}
.hs-item__chev{
width:28px;height:28px;border:1px solid var(--color-line-strong);position:relative;flex-shrink:0;
transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);color:var(--color-ink);
}
.hs-item__chev::before,.hs-item__chev::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:currentColor}
.hs-item__chev::before{width:11px;height:1.5px}
.hs-item__chev::after{width:1.5px;height:11px;transition:transform .3s var(--ease)}
.hs-item.is-open .hs-item__chev{background:var(--color-purple-deep);border-color:var(--color-purple-deep);color:var(--color-cream)}
.hs-item.is-open .hs-item__chev::after{transform:translate(-50%,-50%) rotate(90deg)}
.hs-item__panel{max-height:0;overflow:hidden;transition:max-height .4s var(--ease),padding .35s var(--ease);padding:0 0 0 calc(2.4rem + 1rem)}
.hs-item.is-open .hs-item__panel{max-height:240px;padding-bottom:1.5rem}
.hs-item__svc{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-purple-deep);font-weight:500;margin-bottom:.55rem}
.hs-item__line{color:var(--color-ink-muted);line-height:1.55;margin:0 0 1rem;max-width:48ch;font-size:.97rem}
.hs-item__link{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--color-purple-deep);font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.hs-item__link .arrow{transition:transform .25s var(--ease)}
.hs-item__link:hover .arrow{transform:translateX(4px)}
/* Section 1 mobile — Option C hybrid: hide intro+list, show toggle, photo first */
.hotspots__mobile-toggle{display:none}
@media (max-width:980px){
.hotspots__inner{gap:1.5rem}
.hotspots__col--right{order:1}
.hotspots__col--left{order:2}
.hotspots__col-intro{display:none}
.hotspots__list{margin-top:0;border-top:0;max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.hotspots.is-list-expanded .hotspots__list{max-height:2400px}
.hotspots__mobile-toggle{
display:flex;align-items:center;justify-content:space-between;
width:100%;padding:1.15rem 0;
background:none;border:0;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);
cursor:pointer;
font-family:var(--sans);font-size:.95rem;font-weight:500;
color:var(--color-ink);text-align:left;
transition:color .25s var(--ease),border-color .25s var(--ease);
}
.hotspots.is-list-expanded .hotspots__mobile-toggle{
color:var(--color-purple-deep);
border-bottom-color:var(--color-purple-deep);
}
.hotspots__mobile-toggle-chev{
width:24px;height:24px;position:relative;flex-shrink:0;
border:1px solid var(--color-line-strong);
color:var(--color-ink);
transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.hotspots__mobile-toggle-chev::before,
.hotspots__mobile-toggle-chev::after{
content:"";position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);background:currentColor;
}
.hotspots__mobile-toggle-chev::before{width:11px;height:1.5px}
.hotspots__mobile-toggle-chev::after{width:1.5px;height:11px;transition:transform .3s var(--ease)}
.hotspots.is-list-expanded .hotspots__mobile-toggle-chev{
background:var(--color-purple-deep);
border-color:var(--color-purple-deep);
color:var(--color-cream);
}
.hotspots.is-list-expanded .hotspots__mobile-toggle-chev::after{
transform:translate(-50%,-50%) rotate(90deg);
}
}
/* Section 2 mobile — Industries as compact rows with tap-to-expand */
.industries-mobile{display:none}
@media (max-width:600px){
.industries-grid{display:none}
.industries-mobile{display:flex;flex-direction:column;border-top:1px solid var(--color-line)}
.ind-row{border-bottom:1px solid var(--color-line)}
.ind-row__bar{
width:100%;display:flex;align-items:center;gap:1rem;
padding:1rem 0;
background:none;border:0;cursor:pointer;color:inherit;text-align:left;
transition:color .25s var(--ease);
}
.ind-row__icon{
width:44px;height:44px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
background:rgba(109,40,217,.12);color:var(--color-purple-deep);
clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
}
.ind-row__icon svg{width:22px;height:22px;stroke-width:1.5}
.ind-row__name{
flex:1;
font-family:var(--display);font-size:1.1rem;font-weight:500;letter-spacing:-.01em;
color:var(--color-ink);line-height:1.2;
transition:color .25s var(--ease);
}
.ind-row.is-open .ind-row__name{color:var(--color-purple-deep)}
.ind-row__chev{
width:24px;height:24px;position:relative;flex-shrink:0;
border:1px solid var(--color-line-strong);
color:var(--color-ink);
transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.ind-row__chev::before,
.ind-row__chev::after{
content:"";position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);background:currentColor;
}
.ind-row__chev::before{width:11px;height:1.5px}
.ind-row__chev::after{width:1.5px;height:11px;transition:transform .3s var(--ease)}
.ind-row.is-open .ind-row__chev{
background:var(--color-purple-deep);
border-color:var(--color-purple-deep);
color:var(--color-cream);
}
.ind-row.is-open .ind-row__chev::after{transform:translate(-50%,-50%) rotate(90deg)}
.ind-row__panel{
max-height:0;overflow:hidden;
transition:max-height .35s var(--ease),padding .3s var(--ease);
padding:0 0 0 calc(44px + 1rem);
}
.ind-row.is-open .ind-row__panel{max-height:280px;padding-bottom:1.25rem}
.ind-row__why{
color:var(--color-ink-muted);line-height:1.5;margin:0 0 .85rem;
font-size:.95rem;
}
.ind-row__link{
display:inline-flex;align-items:center;gap:.4rem;
font-size:.85rem;color:var(--color-purple-deep);font-weight:500;
text-decoration:none;
border-bottom:1px solid currentColor;padding-bottom:1px;
}
.ind-row__link .arrow{display:inline-flex;transition:transform .25s var(--ease)}
.ind-row__link:hover .arrow{transform:translateX(4px)}
}
.hotspots__photo{
position:relative;aspect-ratio:4/3;width:100%;overflow:hidden;
background:linear-gradient(135deg,#cfc9c0 0%,#a39a8e 100%);
border:1px solid var(--color-line-strong);
}
.hotspots__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
.hotspots__placard{
position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
padding:1.25rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
text-transform:uppercase;color:rgba(255,255,255,.72);z-index:0;
background:repeating-linear-gradient(45deg,transparent 0,transparent 22px,rgba(255,255,255,.04) 22px,rgba(255,255,255,.04) 23px);
}
.hotspots__placard::after{content:"";position:absolute;inset:18px;border:1px dashed rgba(255,255,255,.18);pointer-events:none}
.hotspots__placard-tag{align-self:flex-start;background:rgba(14,11,31,.32);padding:.3rem .55rem;letter-spacing:.06em;text-transform:none;font-size:.66rem}
.hotspots__placard-meta{align-self:flex-end;opacity:.7}
.hs-spot{
position:absolute;transform:translate(-50%,-50%);
width:56px;height:56px;z-index:3;cursor:pointer;
background:none;border:0;padding:0;
display:inline-flex;align-items:center;justify-content:center;
}
@media (max-width:980px){.hs-spot{width:44px;height:44px}}
@media (max-width:600px){.hs-spot{width:36px;height:36px}}
.hs-spot::after{content:"";position:absolute;inset:-8px;min-width:44px;min-height:44px}
.hs-spot__inner{
position:relative;z-index:3;width:100%;height:100%;
background:#6D28D9;color:#fff;
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
display:inline-flex;align-items:center;justify-content:center;
box-shadow:0 8px 22px rgba(14,11,31,.4);
transition:transform .25s var(--ease),background .25s var(--ease);
animation:hsIdlePulse 2s ease-in-out infinite;
}
.hs-spot__inner svg{width:42%;height:42%;stroke-width:1.8}
.hs-spot__pulse{
position:absolute;inset:0;z-index:1;
background:#6D28D9;opacity:.32;
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
animation:hsRingPulse 2.4s ease-in-out infinite;
}
.hs-spot__halo{
position:absolute;inset:-6px;z-index:0;border-radius:50%;
background:radial-gradient(circle,rgba(109,40,217,.55) 0%,rgba(109,40,217,0) 65%);
filter:blur(12px);opacity:0;transition:opacity .3s var(--ease);
pointer-events:none;
}
@keyframes hsIdlePulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.06)}
}
@keyframes hsRingPulse{
0%{transform:scale(.85);opacity:.45}
60%{opacity:0}
100%{transform:scale(1.5);opacity:0}
}
.hs-spot:hover .hs-spot__inner{transform:scale(1.1);background:#7C3AED}
.hs-spot:hover .hs-spot__halo{opacity:1}
.hs-spot.is-active .hs-spot__inner{
background:linear-gradient(135deg,#6D28D9 0%,#2563EB 100%);transform:scale(1.08);
animation:none;
box-shadow:0 8px 22px rgba(14,11,31,.4),0 0 12px 2px rgba(139,92,246,.45),0 0 0 2px rgba(196,181,253,.55);
}
.hs-spot.is-active .hs-spot__pulse{animation:none;opacity:0}
.hs-spot.is-active .hs-spot__halo{opacity:1}
@media (prefers-reduced-motion:reduce){
.hs-spot__inner,.hs-spot__pulse{animation:none}
}
/* === Photo-led variant (homepage Services grid) === */
.card-srv--photo{padding:0;gap:0;min-height:0;overflow:hidden;position:relative}
.card-srv__media{
position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
background:linear-gradient(135deg,#cfc9c0 0%,#b7afa4 55%,#9a9286 100%);
border-bottom:1px solid var(--color-line);
}
.card-srv__img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;
transition:transform .55s var(--ease),filter .35s var(--ease);
}
.card-srv--photo:hover .card-srv__img{transform:scale(1.04)}
.card-srv__placard{
position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
padding:1rem 1.1rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;
font-size:.6rem;font-weight:500;color:rgba(255,255,255,.78);z-index:0;
background:
repeating-linear-gradient(45deg,transparent 0,transparent 18px,rgba(255,255,255,.05) 18px,rgba(255,255,255,.05) 19px),
linear-gradient(135deg,#9c948700 0%,#76695900 100%);
}
.card-srv__placard::after{
content:"";position:absolute;inset:14px;border:1px dashed rgba(255,255,255,.18);pointer-events:none;
}
.card-srv__placard-tag{align-self:flex-start;background:rgba(14,11,31,.32);padding:.28rem .55rem;border-radius:2px;letter-spacing:.08em;text-transform:none;font-size:.62rem}
.card-srv__placard-meta{align-self:flex-end;opacity:.7}
.card-srv--photo .card-srv__num{
position:absolute;top:.85rem;right:.85rem;z-index:2;
font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;font-weight:600;
padding:.34rem .58rem;color:var(--color-chalk);
background:rgba(14,11,31,.42);
-webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);
border:1px solid rgba(250,247,242,.18);
}
.card-srv__body{padding:1.4rem 1.6rem 1.6rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.card-srv__cat{
font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--color-purple-deep);font-weight:500;
}
.card-srv--photo .card-srv__title{font-size:1.3rem;line-height:1.18;letter-spacing:-.012em;margin-top:.1rem}
.card-srv__line{font-size:.92rem;color:var(--color-ink-muted);line-height:1.5;margin:0;flex-grow:1}
.card-srv--photo .card-srv__link{margin-top:.55rem;font-size:.8rem}
@media (prefers-reduced-motion:reduce){.card-srv__img{transition:none}.card-srv--photo:hover .card-srv__img{transform:none}}
.card-ind{padding:1.6rem;min-height:160px;display:flex;flex-direction:column;gap:.8rem;overflow:hidden}
.card-ind__icon{width:36px;height:36px;background:rgba(109,40,217,.12);color:var(--color-purple-deep);display:flex;align-items:center;justify-content:center;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.card-ind__icon svg{width:18px;height:18px;stroke-width:1.5}
.card-ind__name{font-family:var(--display);font-size:1.15rem;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.card-ind__why{font-size:.84rem;color:var(--color-ink-muted);line-height:1.45;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s var(--ease),opacity .35s var(--ease)}
.card-ind:hover .card-ind__why{max-height:80px;opacity:1}
.pillar{padding:2.25rem 2rem;display:flex;flex-direction:column;gap:1rem;min-height:240px}
.pillar__num{font-family:var(--mono);font-size:.78rem;color:var(--color-purple-deep);letter-spacing:.12em}
.pillar__title{font-family:var(--display);font-size:1.35rem;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.pillar__body{color:var(--color-ink-muted);line-height:1.6;font-size:.96rem}
/* T3 STEPS */
.steps{display:grid;grid-template-columns:repeat(3,1fr);position:relative}
@media (max-width:880px){.steps{grid-template-columns:1fr}}
.steps::before{content:"";position:absolute;left:0;right:0;top:80px;height:1px;background:var(--color-line-dark)}
@media (max-width:880px){.steps::before{display:none}}
/* T3 pulse — mega13.5: single state machine (data-t3-phase) drives orb + numbers + dots + text together.
Replaces prior 3-independent-CSS-animation system whose stagger delays drifted across cycles.
JS sets data-t3-phase="0|1|2" on .steps--pulse every 2200ms; CSS responds with transitions. */
.steps--pulse{--t3-dur:6.6s}
.steps--pulse::before{background:linear-gradient(90deg,rgba(109,40,217,.22) 0%,rgba(139,92,246,.45) 50%,rgba(176,132,232,.22) 100%);height:1px}
/* Sweep trail removed: it was the main drift contributor and the orb+state changes carry the rhythm. */
.steps__pulse{display:none}
/* Orb — position driven by data-t3-phase, smooth-transitioned via CSS */
.steps__orb{position:absolute;top:69px;left:0;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#E8D5FF 0%,#B084E8 50%,#8B5CF6 100%);box-shadow:0 0 32px 8px rgba(176,132,232,.7),0 0 12px 2px rgba(255,255,255,.4) inset;pointer-events:none;z-index:3;transition:left .6s cubic-bezier(.65,.05,.35,1), transform .25s ease, opacity .25s ease;will-change:left}
@media (max-width:880px){.steps__pulse,.steps__orb{display:none}}
/* Inactive baseline — every element starts dim, transitions to active when its phase fires */
.steps--pulse .step__num{transition:color .35s ease, opacity .35s ease, transform .35s ease, filter .35s ease}
.steps--pulse .step__node{transition:background .25s ease, box-shadow .25s ease, transform .25s ease}
.steps--pulse .step__label,
.steps--pulse .step__title,
.steps--pulse .step__body{transition:opacity .35s ease}
.steps--pulse .step__num{opacity:.45;color:var(--color-purple-deep)}
.steps--pulse .step__node{background:var(--color-purple-base);box-shadow:none;transform:scale(.9)}
.steps--pulse .step__label,
.steps--pulse .step__title,
.steps--pulse .step__body{opacity:.25}
/* Active phase: orb position + active step's num + node + text all flip on the SAME DOM mutation,
so they cannot drift relative to each other regardless of frame timing. */
.steps--pulse[data-t3-phase="0"] .step--01 .step__num,
.steps--pulse[data-t3-phase="1"] .step--02 .step__num,
.steps--pulse[data-t3-phase="2"] .step--03 .step__num{
opacity:1;color:#E8D5FF;transform:scale(1.08);
filter:drop-shadow(0 0 28px rgba(176,132,232,.7));
}
.steps--pulse[data-t3-phase="0"] .step--01 .step__node,
.steps--pulse[data-t3-phase="1"] .step--02 .step__node,
.steps--pulse[data-t3-phase="2"] .step--03 .step__node{
background:#FFFFFF;
box-shadow:0 0 14px rgba(255,255,255,.95),0 0 28px rgba(176,132,232,.85);
transform:scale(1.25);
}
.steps--pulse[data-t3-phase="0"] .step--01 .step__label,
.steps--pulse[data-t3-phase="0"] .step--01 .step__title,
.steps--pulse[data-t3-phase="0"] .step--01 .step__body,
.steps--pulse[data-t3-phase="1"] .step--02 .step__label,
.steps--pulse[data-t3-phase="1"] .step--02 .step__title,
.steps--pulse[data-t3-phase="1"] .step--02 .step__body,
.steps--pulse[data-t3-phase="2"] .step--03 .step__label,
.steps--pulse[data-t3-phase="2"] .step--03 .step__title,
.steps--pulse[data-t3-phase="2"] .step--03 .step__body{opacity:1}
/* Orb position bound to phase — same selector layer as everything else; impossible to drift. */
.steps--pulse[data-t3-phase="0"] .steps__orb{left:0%}
.steps--pulse[data-t3-phase="1"] .steps__orb{left:33.33%}
.steps--pulse[data-t3-phase="2"] .steps__orb{left:66.66%}
/* Reduced-motion / no-IO fallback: data-t3-phase="all" shows everything active; orb hidden. */
.steps--pulse[data-t3-phase="all"] .step__num{opacity:1;color:var(--color-purple-bright)}
.steps--pulse[data-t3-phase="all"] .step__label,
.steps--pulse[data-t3-phase="all"] .step__title,
.steps--pulse[data-t3-phase="all"] .step__body{opacity:1}
.steps--pulse[data-t3-phase="all"] .steps__orb{display:none}
.step{padding:0 2rem 0 0;position:relative}
.step + .step{padding-left:2.5rem;border-left:1px solid var(--color-line-dark)}
@media (max-width:880px){.step + .step{padding-left:0;border-left:0;border-top:1px solid var(--color-line-dark);padding-top:2rem;margin-top:2rem}.step{padding:0}}
.step__num{font-family:var(--display);font-weight:400;font-size:5.5rem;line-height:1;color:var(--color-purple-bright);opacity:.85;letter-spacing:-.04em;font-style:italic}
.step__node{position:absolute;left:0;top:75px;width:12px;height:12px;background:var(--color-purple-bright);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
@media (max-width:880px){.step__node{display:none}}
.step__label{font-family:var(--mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--color-purple-bright);font-weight:500;margin-top:1.5rem}
.step__title{font-family:var(--display);font-size:1.7rem;font-weight:500;letter-spacing:-.015em;color:var(--color-chalk);margin-top:.6rem}
.step__body{margin-top:1rem;color:var(--color-chalk-muted);line-height:1.6;max-width:36ch}
/* CASE STUDIES */
.cases__list{display:flex;flex-direction:column;gap:6rem}
.case{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center}
@media (max-width:880px){.case{grid-template-columns:1fr}}
.case__img{aspect-ratio:5/4;background:linear-gradient(160deg,#312E81,#4C1D95);position:relative;overflow:hidden;border:1px solid var(--color-line);clip-path:polygon(0 0,calc(100% - 60px) 0,100% 60px,100% 100%,0 100%)}
.case__img--alt{background:linear-gradient(140deg,#1E1B4B,#312E81 60%,#6D28D9)}
.case__img--placeholder{background:var(--color-bone);border:1px dashed var(--color-line-strong);clip-path:none}
.case__img--photo{background:var(--color-navy-deep)}
.case__img--photo img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.case__img .placeholder-tag{position:absolute;inset:1.25rem;border:1px dashed rgba(250,247,242,.25);display:flex;align-items:flex-end;padding:1.25rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,247,242,.5)}
.case__img--placeholder .placeholder-tag{border-color:var(--color-line-strong);color:var(--color-ink-muted)}
.case__card{background:var(--color-cream);border:1px solid var(--color-line);padding:clamp(1.75rem,3.5vw,3rem);margin-left:-80px;align-self:center;position:relative;z-index:2;display:flex;flex-direction:column;gap:1.25rem}
@media (max-width:880px){.case__card{margin-left:0;margin-top:-30px;margin-inline:1rem}}
.case--reverse{direction:rtl}
.case--reverse > *{direction:ltr}
.case--reverse .case__card{margin-left:0;margin-right:-80px}
@media (max-width:880px){.case--reverse .case__card{margin-right:0;margin-left:0;margin-inline:1rem}}
.case__top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.case__client{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-ink-muted)}
.case__logo{font-family:var(--display);font-weight:600;font-size:.9rem;letter-spacing:-.01em;color:var(--color-purple-deep);border:1px solid var(--color-line-strong);padding:.4rem .7rem}
.case__title{font-family:var(--display);font-size:1.7rem;font-weight:500;letter-spacing:-.015em;line-height:1.15}
.case__quote{color:var(--color-ink-muted);line-height:1.6;font-size:1.02rem}
.case__meta{display:flex;gap:1.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-muted);padding-top:.75rem;border-top:1px solid var(--color-line)}
.case__meta strong{color:var(--color-purple-deep);font-weight:600}
.case__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.5rem}
.case__cta-note{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-ink-muted)}
/* ============ TESTIMONIALS (Mega-5 T7) ============ */
.testimonial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;align-items:stretch}
@media (max-width:980px){.testimonial-grid{grid-template-columns:1fr;gap:1.25rem}}
.testimonial{
position:relative;margin:0;
padding:2.25rem 1.75rem 1.75rem;
background:var(--color-cream);
border:1px solid var(--color-line);
display:flex;flex-direction:column;gap:1.5rem;
min-height:340px;
}
.testimonial__quote-mark{
position:absolute;top:.4rem;left:1.2rem;
font-family:var(--display);font-size:5rem;line-height:1;
color:var(--color-purple-base);opacity:.28;
pointer-events:none;user-select:none;
}
.testimonial__quote{
margin:0;font-family:var(--display);font-size:1.15rem;line-height:1.55;
color:var(--color-ink);font-weight:400;font-style:italic;letter-spacing:-.005em;
flex:1;
}
.testimonial__attr{
display:flex;flex-direction:column;gap:.15rem;
padding-top:1rem;border-top:1px solid var(--color-line);
font-family:var(--sans);font-style:normal;
}
.testimonial__name{font-weight:600;color:var(--color-ink)}
.testimonial__org{font-size:.86rem;color:var(--color-ink-muted)}
/* Expanded lead layout for /testimonials page */
.testimonial-stack{display:flex;flex-direction:column;gap:1.5rem;max-width:780px}
.testimonial--lead{padding:2.75rem 2.25rem 2rem;min-height:0}
.testimonial--lead .testimonial__quote{font-size:1.3rem;line-height:1.55}
.testimonial--lead .testimonial__quote-mark{font-size:6.5rem;top:.2rem;left:1.5rem}
/* ============ THANKS (Mega-5 T3) ============ */
.thanks__grid{display:grid;grid-template-columns:7fr 5fr;gap:3.5rem;align-items:start}
@media (max-width:980px){.thanks__grid{grid-template-columns:1fr;gap:2.5rem}}
.thanks__steps{list-style:none;padding:0;margin:2rem 0 0;display:flex;flex-direction:column;gap:1.25rem}
.thanks__steps li{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:start;padding:1.25rem 0;border-top:1px solid var(--color-line)}
.thanks__steps li:last-child{border-bottom:1px solid var(--color-line)}
.thanks__step-num{font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;font-weight:600;color:var(--color-purple-deep);padding-top:.1rem}
.thanks__steps p{margin:0;color:var(--color-ink-muted);line-height:1.6;font-size:1.02rem}
.thanks__panel{padding:1.75rem;border:1px solid var(--color-line);background:rgba(14,11,31,.02);border-radius:1px}
.thanks__panel h3{margin:0;font-family:var(--display);font-size:1.5rem;font-weight:500;letter-spacing:-.015em}
.thanks__rows{display:flex;flex-direction:column;margin-top:1.25rem}
.thanks__rows .contact-row{padding:.85rem 0;border-bottom:1px solid var(--color-line)}
.thanks__rows .contact-row:last-child{border-bottom:0}
/* ============ INLINE FORM VALIDATION (Mega-5 T6) ============ */
.field--error label{color:#B91C1C}
.field--error input,
.field--error select,
.field--error textarea{border-bottom-color:#B91C1C}
.field__error{color:#B91C1C;font-size:.82rem;line-height:1.4;margin-top:.4rem;font-family:var(--sans)}
/* ============ STICKY ANCHOR NAV (Mega-8) ============ */
.anchor-nav{
position:sticky;top:92px;z-index:80;
background:var(--color-navy-deep);color:var(--color-chalk);
border-bottom:1px solid rgba(255,255,255,.12);
}
.anchor-nav__inner{
display:flex;align-items:center;justify-content:space-between;
min-height:60px;padding-block:.5rem;
}
.anchor-nav__list{
list-style:none;margin:0;padding:0;
display:flex;align-items:center;gap:2rem;flex-wrap:wrap;
}
.anchor-nav__link{
font-family:var(--sans);font-size:.875rem;letter-spacing:.02em;
color:rgba(250,247,242,.7);text-decoration:none;
padding:.5rem 0;position:relative;
transition:color .15s var(--ease);
}
.anchor-nav__link:hover,
.anchor-nav__link:focus-visible{color:var(--color-chalk)}
.anchor-nav__link::after{
content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
background:var(--color-purple-bright);opacity:0;transform:scaleX(.6);
transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.anchor-nav__link:hover::after,
.anchor-nav__link:focus-visible::after,
.anchor-nav__link.is-active::after{opacity:1;transform:scaleX(1)}
.anchor-nav__link.is-active{color:var(--color-chalk)}
/* Mobile trigger + dropdown (hidden at desktop) */
.anchor-nav__trigger,
.anchor-nav__dropdown{display:none}
@media (max-width:1023px){
.anchor-nav{top:80px}
.anchor-nav__inner{min-height:52px;flex-direction:row}
.anchor-nav__list{display:none}
.anchor-nav__trigger{
display:flex;align-items:center;gap:.6rem;width:100%;
background:transparent;border:0;cursor:pointer;color:var(--color-chalk);
font-family:var(--sans);text-align:left;padding:.4rem 0;
}
.anchor-nav__trigger-eyebrow{
font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--color-chalk-muted);font-weight:500;
}
.anchor-nav__trigger-current{font-size:.95rem;color:var(--color-chalk);flex:1}
.anchor-nav__trigger-chev{
width:12px;height:12px;border-right:1.5px solid var(--color-chalk);border-bottom:1.5px solid var(--color-chalk);
transform:rotate(45deg);margin-top:-4px;transition:transform .2s var(--ease);
}
.anchor-nav__trigger[aria-expanded="true"] .anchor-nav__trigger-chev{transform:rotate(225deg);margin-top:4px}
.anchor-nav__dropdown{
display:flex;flex-direction:column;
position:absolute;left:0;right:0;top:100%;
background:var(--color-navy-deep);
border-top:1px solid rgba(255,255,255,.12);
box-shadow:0 16px 32px -16px rgba(0,0,0,.5);
z-index:81;
}
.anchor-nav__dropdown[hidden]{display:none}
.anchor-nav__row{
display:flex;align-items:center;min-height:44px;
padding:.5rem 1rem;color:var(--color-chalk);text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.08);font-size:1rem;
}
.anchor-nav__row:last-child{border-bottom:0}
.anchor-nav__row:hover,
.anchor-nav__row:focus-visible,
.anchor-nav__row.is-active{background:rgba(139,92,246,.12);color:var(--color-purple-bright)}
}
@media (prefers-reduced-motion:reduce){
.anchor-nav__link::after{transition:none}
}
/* ============ MEGAMENU (Mega-6 / Mega-6_2 density + click-only pass) ============ */
/* Trigger active states (click-open + page-active) */
.nav__links a[data-mega]{position:relative;display:inline-flex;align-items:center;gap:.25rem}
.nav__links a[data-mega].is-mega-open{color:var(--color-purple-deep)}
.nav__links a[data-mega].is-mega-open::after{
/* mega6_2: thinner underline, subtle is enough */
content:"";position:absolute;left:0;right:0;bottom:-30px;height:1px;
background:var(--color-purple-base);
}
/* mega6_2: chevron-down affordance on every trigger that owns a megamenu */
.nav__links a[data-mega] .nav__chev{
display:inline-flex;align-items:center;justify-content:center;
width:12px;height:12px;margin-left:4px;color:currentColor;
transition:transform 150ms var(--ease,ease);
}
.nav__links a[data-mega] .nav__chev svg{width:12px;height:12px;display:block}
.nav__links a[data-mega][aria-expanded="true"] .nav__chev{transform:rotate(180deg)}
/* Panel (full-width white sheet under the nav) */
.mega-nav{
position:fixed;top:92px;left:0;right:0;z-index:99;
background:var(--color-paper);
border-top:1px solid var(--color-line);
/* mega6_2: softer drop shadow */
box-shadow:0 8px 24px rgba(0,0,0,.08);
/* mega6_2: cap at 60vh so the panel never dominates a 13in laptop viewport */
max-height:60vh;overflow-y:auto;
}
.mega-nav[hidden]{display:none}
.mega-nav__inner{
max-width:var(--container);margin:0 auto;
/* mega6_2: tighter vertical padding, 2rem top/bottom (was 3.5rem) */
padding:2rem var(--gutter);
/* mega6_2: 24px inter-column gap (was 3rem / 48px) */
display:grid;gap:24px;
}
.mega-nav__inner--cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mega-nav__inner--cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mega-nav__inner--cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1280px){
.mega-nav__inner--cols-2,.mega-nav__inner--cols-3,.mega-nav__inner--cols-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
}
@media (max-width:1080px){
.mega-nav{display:none!important}
}
.mega-nav__column{display:flex;flex-direction:column;gap:1rem}
.mega-nav__column + .mega-nav__column{position:relative}
@media (min-width:1281px){
.mega-nav__inner > .mega-nav__column + .mega-nav__column::before{
content:"";position:absolute;left:-1.5rem;top:0;bottom:0;width:1px;background:var(--color-line);
}
}
.mega-nav__eyebrow{
/* mega6_2: 0.75rem (was 0.8rem / 0.72rem). Uppercase + tracking preserved. */
font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--color-ink-muted);font-weight:500;margin-bottom:.25rem;
}
.mega-nav__feature-card{
display:grid;grid-template-columns:auto 1fr;gap:.85rem;
padding:1rem;border:1px solid var(--color-line);
background:var(--color-cream);
text-decoration:none;color:inherit;
transition:border-color .2s var(--ease),background .2s var(--ease);
}
.mega-nav__feature-card:hover,
.mega-nav__feature-card:focus-visible{
border-color:var(--color-purple-base);
background:rgba(109,40,217,.04);
}
.mega-nav__feature-icon{
/* mega6_2: 28px container (was 36px); inner SVG scales proportionally */
width:28px;height:28px;flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;
color:var(--color-purple-base);
background:rgba(109,40,217,.08);
clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
}
.mega-nav__feature-icon svg{width:14px;height:14px}
.mega-nav__feature-body{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.mega-nav__feature-title{font-family:var(--display);font-size:.95rem;font-weight:500;letter-spacing:-.01em;color:var(--color-ink);line-height:1.25}
.mega-nav__feature-tag{font-size:.86rem;color:var(--color-ink-muted);line-height:1.45}
.mega-nav__feature-link{font-family:var(--sans);font-size:.78rem;color:var(--color-purple-deep);font-weight:500;display:inline-flex;align-items:center;gap:.4rem;margin-top:.25rem}
.mega-nav__feature-link .arrow{transition:transform .2s var(--ease);display:inline-flex}
.mega-nav__feature-card:hover .mega-nav__feature-link .arrow{transform:translateX(3px)}
.mega-nav__feature-link .arrow svg{width:14px;height:14px}
.mega-nav__link-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.mega-nav__link{
/* mega6_2: 0.9rem (was 1rem) */
display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;
padding:.2rem 0;color:var(--color-ink);text-decoration:none;
font-size:.95rem;line-height:1.4;
transition:color .15s var(--ease);
}
.mega-nav__link:hover,
.mega-nav__link:focus-visible{color:var(--color-purple-deep)}
.mega-nav__link-wip{
font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:lowercase;
color:var(--color-ink-muted);font-weight:500;margin-left:.4rem;
}
.mega-nav__text{display:flex;flex-direction:column;gap:.35rem;font-size:.9rem;color:var(--color-ink-muted);line-height:1.5}
.mega-nav__text p{margin:0}
.mega-nav__text p:first-child{color:var(--color-ink);font-weight:500}
/* mega6_2: "Coming next" summary column (collapsed In Development list) */
.mega-nav__summary{display:flex;flex-direction:column;gap:.6rem;font-size:.9rem;color:var(--color-ink-muted);line-height:1.5}
.mega-nav__summary p{margin:0;color:var(--color-ink-muted)}
.mega-nav__summary p:first-child{color:var(--color-ink);font-weight:500}
.mega-nav__summary-link{
display:inline-flex;align-items:center;gap:.4rem;font-family:var(--sans);font-size:.85rem;font-weight:500;
color:var(--color-purple-deep);text-decoration:none;
}
.mega-nav__summary-link .arrow svg{width:14px;height:14px;transition:transform .2s var(--ease,ease)}
.mega-nav__summary-link:hover .arrow svg,
.mega-nav__summary-link:focus-visible .arrow svg{transform:translateX(3px)}
/* Open-state lift for the nav itself so the panel-edge merges cleanly */
.nav.is-mega-open{box-shadow:none}
/* Mobile drawer accordion (Mega-6, mobile) */
.mobile-nav__home{
display:block;font-family:var(--display);font-size:1.85rem;font-weight:500;
letter-spacing:-.02em;color:var(--color-chalk);text-decoration:none;
padding:.25rem 0 1rem;border-bottom:1px solid var(--color-line-dark);
}
.mobile-nav__section{border-bottom:1px solid var(--color-line-dark);padding:0}
.mobile-nav__section-trigger{
display:flex;align-items:center;justify-content:space-between;width:100%;
background:transparent;border:0;cursor:pointer;
padding:1.1rem 0;
font-family:var(--display);font-size:1.65rem;font-weight:500;letter-spacing:-.015em;
color:var(--color-chalk);text-align:left;
}
.mobile-nav__section-icon{
width:18px;height:18px;flex-shrink:0;position:relative;color:var(--color-chalk-muted);
}
.mobile-nav__section-icon::before,
.mobile-nav__section-icon::after{
content:"";position:absolute;left:50%;top:50%;background:currentColor;
}
.mobile-nav__section-icon::before{width:14px;height:1.5px;transform:translate(-50%,-50%)}
.mobile-nav__section-icon::after{width:1.5px;height:14px;transform:translate(-50%,-50%);transition:transform .25s var(--ease)}
.mobile-nav__section.is-open .mobile-nav__section-icon::after{transform:translate(-50%,-50%) scaleY(0)}
.mobile-nav__section-panel{
max-height:0;overflow:hidden;transition:max-height .35s ease-out;
padding:0 0 0 0;
}
.mobile-nav__section.is-open .mobile-nav__section-panel{
max-height:1200px;padding-bottom:1.25rem;
}
.mobile-nav__section-overview{
display:inline-block;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--color-purple-bright);padding:.5rem 0 1rem;text-decoration:none;
}
.mobile-nav__section-panel .mega-nav__column{gap:.85rem;padding:.25rem 0 1rem}
.mobile-nav__section-panel .mega-nav__eyebrow{color:var(--color-chalk-muted)}
.mobile-nav__section-panel .mega-nav__feature-card{
background:rgba(250,247,242,.05);border-color:var(--color-line-dark);color:var(--color-chalk);
}
.mobile-nav__section-panel .mega-nav__feature-card:hover{background:rgba(250,247,242,.08);border-color:var(--color-purple-bright)}
.mobile-nav__section-panel .mega-nav__feature-title{color:var(--color-chalk)}
.mobile-nav__section-panel .mega-nav__feature-tag{color:var(--color-chalk-muted)}
.mobile-nav__section-panel .mega-nav__feature-link{color:var(--color-purple-bright)}
.mobile-nav__section-panel .mega-nav__feature-icon{background:rgba(139,92,246,.15);color:var(--color-purple-bright)}
.mobile-nav__section-panel .mega-nav__link{color:var(--color-chalk);padding:.35rem 0;font-size:1rem}
.mobile-nav__section-panel .mega-nav__link:hover,
.mobile-nav__section-panel .mega-nav__link:focus-visible{color:var(--color-purple-bright)}
.mobile-nav__section-panel .mega-nav__link-wip{color:var(--color-chalk-muted)}
.mobile-nav__section-panel .mega-nav__text{color:var(--color-chalk-muted)}
.mobile-nav__section-panel .mega-nav__text p:first-child{color:var(--color-chalk)}
/* STATS */
.stats{background:var(--color-navy-deep);color:var(--color-chalk);position:relative;overflow:hidden;padding:5rem 0}
.stats__inner{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr)}
@media (max-width:780px){.stats__inner{grid-template-columns:repeat(2,1fr);gap:2.5rem 0}}
.stat{padding:0 2rem}
.stat + .stat{border-left:1px solid var(--color-line-dark)}
@media (max-width:780px){.stat + .stat{border-left:none}.stat:nth-child(2n){border-left:1px solid var(--color-line-dark)}}
.stat__num{font-family:var(--display);font-weight:500;font-size:clamp(3rem,5vw,4.5rem);line-height:1;letter-spacing:-.03em;color:var(--color-chalk)}
.stat__num em{font-style:italic;font-weight:400;color:var(--color-purple-bright)}
.stat__label{margin-top:1rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-chalk-muted)}
/* AREA */
.area__inner{display:grid;grid-template-columns:5fr 7fr;gap:5rem;align-items:center}
@media (max-width:880px){.area__inner{grid-template-columns:1fr;gap:3rem}}
.area__suburbs{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.4rem .5rem}
.area__suburbs span{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;padding:.35rem .65rem;border:1px solid var(--color-line);color:var(--color-ink-muted);background:var(--color-cream)}
/* AREA PHOTO (mega13.8: real twilight asset wired in; placeholder card chrome stripped)
mega13.10: slot grew from 4:3 landscape (560x420) to a taller portrait crop
(column-constrained 560px wide, fixed 700px tall). object-fit:cover crops the
landscape source to fit; Eureka Tower stays roughly centred via object-position:center. */
.area__photo{position:relative;max-width:560px;width:100%;margin:0 auto;display:flex;align-items:center;justify-content:center}
.area__photo-frame{
position:relative;z-index:1;width:100%;max-width:560px;height:700px;border-radius:12px;overflow:hidden;
background:#F3F1FB;
}
.area__photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;z-index:1}
/* Silent fallback when asset missing: pale-purple block, no chrome */
.area__photo-frame.is-empty{background:#F3F1FB}
@media (min-width:768px) and (max-width:1279px){
.area__photo-frame{height:600px}
}
@media (max-width:767px){
.area__photo-frame{height:500px}
}
/* mega13.8: legacy placard / fig / halo overlays no longer rendered in markup; legacy rules removed. */
/* PHASE SCHEMATIC */
.phase__top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:3rem;align-items:start}
@media (max-width:880px){.phase__top{grid-template-columns:1fr;gap:2rem}}
.phase__intro{display:flex;flex-direction:column}
.phase__schematic{margin:0;display:flex;flex-direction:column;gap:.85rem}
.phase__schematic svg{width:100%;height:auto;display:block;border:1px solid rgba(232,217,169,.18)}
.phase__schematic-cap{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,238,217,.6);text-align:left}
/* PHASE 02 DASHBOARD */
.phase__dash{margin:0;display:flex;flex-direction:column;gap:1rem;background:var(--color-cream);border:1px solid var(--color-line);padding:1.4rem 1.4rem 1.25rem;border-radius:4px;box-shadow:0 1px 0 rgba(14,11,31,.04)}
.phase__dash-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-ink-muted);padding-bottom:.85rem;border-bottom:1px solid var(--color-line)}
.phase__dash-live{display:inline-flex;align-items:center;gap:.55rem;color:var(--color-ink)}
.phase__dash-dot{width:8px;height:8px;border-radius:50%;background:#6D28D9;box-shadow:0 0 0 0 rgba(109,40,217,.5);animation:dashPulse 1.8s ease-in-out infinite}
@keyframes dashPulse{0%,100%{box-shadow:0 0 0 0 rgba(109,40,217,.55)}50%{box-shadow:0 0 0 6px rgba(109,40,217,0)}}
.phase__dash-id{color:rgba(14,11,31,.4)}
.phase__dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.phase__tile{padding:1rem;background:#fff;border:1px solid var(--color-line);display:flex;flex-direction:column;gap:.4rem;min-height:96px}
.phase__tile-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-ink-muted)}
.phase__tile-row{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.phase__tile-num{font-family:var(--display);font-weight:500;font-size:1.95rem;line-height:1;letter-spacing:-.015em;color:var(--color-ink)}
.phase__tile-num em{font-style:normal;color:#6D28D9}
.phase__tile-num--mono{font-family:var(--mono);font-size:.95rem;letter-spacing:.04em;color:var(--color-ink)}
.phase__tile-den{font-family:var(--mono);font-size:.7rem;font-weight:500;color:var(--color-ink-muted);letter-spacing:.04em;margin-left:.1rem}
.phase__tile-trend{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;padding:.2rem .4rem;border-radius:2px}
.phase__tile-trend--up{color:#15803d;background:rgba(21,128,61,.08)}
.phase__tile-trend--down{color:#6D28D9;background:rgba(109,40,217,.08)}
.phase__tile-check{color:#6D28D9;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:rgba(109,40,217,.1)}
.phase__tile-foot{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(14,11,31,.4);margin-top:auto}
.phase__dash-chart{padding:.85rem 0 .25rem}
.phase__chart-label{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-muted);margin-bottom:.4rem}
.phase__chart-scale{color:rgba(14,11,31,.35)}
.phase__dash-chart svg{width:100%;height:auto;display:block}
/* Diagrammatic / illustrative treatment (methodology revision) */
.phase__dash--diagram{
background:
repeating-linear-gradient(45deg, rgba(109,40,217,.025) 0 1px, transparent 1px 8px),
var(--color-cream);
border:1px dashed var(--color-line-strong);
border-radius:1px;
box-shadow:none;
position:relative;
}
.phase__dash--diagram::before,
.phase__dash--diagram::after{
content:"";position:absolute;width:14px;height:14px;
border:1px solid rgba(14,11,31,.35);pointer-events:none;
}
.phase__dash--diagram::before{top:8px;left:8px;border-right:0;border-bottom:0}
.phase__dash--diagram::after{top:8px;right:8px;border-left:0;border-bottom:0}
.phase__dash--diagram .phase__tile{
background:rgba(255,255,255,.55);
border:1px solid var(--color-line);
box-shadow:none;
}
.phase__dash-live--static{color:rgba(14,11,31,.6);letter-spacing:.22em;font-weight:500}
.phase__dash-note{
font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;
color:rgba(14,11,31,.5);line-height:1.5;margin:.5rem 0 0;text-transform:none;
}
.faq__list{border-top:1px solid var(--color-line)}
.faq-item{border-bottom:1px solid var(--color-line)}
.faq-item__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.6rem 0;text-align:left;font-family:var(--display);font-size:1.25rem;font-weight:500;letter-spacing:-.01em;color:var(--color-ink);transition:color .25s var(--ease);cursor:pointer;list-style:none}
.faq-item__q::-webkit-details-marker{display:none}
.faq-item__q:hover{color:var(--color-purple-deep)}
.faq-item__icon{width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-line-strong);transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);position:relative}
.faq-item__icon::before,.faq-item__icon::after{content:"";position:absolute;background:currentColor}
.faq-item__icon::before{width:12px;height:1.5px}
.faq-item__icon::after{width:1.5px;height:12px;transition:transform .25s var(--ease)}
.faq-item[open] .faq-item__icon{background:var(--color-purple-deep);color:var(--color-cream);border-color:var(--color-purple-deep)}
.faq-item[open] .faq-item__icon::after{transform:rotate(90deg)}
.faq-item__a{padding:0 0 1.6rem 0;color:var(--color-ink-muted);line-height:1.65;max-width:60ch}
.faq-cat{margin-top:3rem}
.faq-cat__label{font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--color-purple-base);margin-bottom:.5rem}
.faq-cat__title{font-family:var(--display);font-size:1.7rem;font-weight:500;letter-spacing:-.015em;margin-bottom:1.5rem;max-width:24ch}
/* FORM */
.final{background:var(--color-navy-deep);color:var(--color-chalk);position:relative;overflow:hidden}
/* mega12: preserve generous spacing on the final CTA, override the slimmed-down .block padding. */
section.block.final{padding:clamp(4rem,10vw,10rem) 0}
.final::before{content:"";position:absolute;right:-200px;bottom:-200px;width:600px;height:600px;border:1px solid rgba(139,92,246,.12);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);pointer-events:none}
.final__inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
@media (max-width:880px){.final__inner{grid-template-columns:1fr;gap:3rem}}
.final h2{color:var(--color-chalk);max-width:14ch}
.final h2 .accent{color:var(--color-purple-bright);font-style:italic}
.final__sub{margin-top:1.5rem;color:var(--color-chalk-muted);font-size:1.15rem;line-height:1.55;max-width:42ch}
.final__contact{margin-top:3rem;display:flex;flex-direction:column;gap:0}
.contact-row{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-top:1px solid var(--color-line-dark)}
.contact-row:last-child{border-bottom:1px solid var(--color-line-dark)}
.contact-row__label{font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-chalk-muted);min-width:80px}
.contact-row__val{font-family:var(--display);font-size:1.2rem;color:var(--color-chalk);font-weight:500;letter-spacing:-.01em}
.form{display:flex;flex-direction:column;gap:1.25rem}
.field{display:flex;flex-direction:column;gap:.5rem}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media (max-width:540px){.field--row{grid-template-columns:1fr}}
.field label{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-chalk-muted);font-weight:500}
.field input,.field select,.field textarea{height:48px;border:none;border-bottom:1.5px solid var(--color-line-dark);background:transparent;color:var(--color-chalk);font-family:var(--sans);font-size:1rem;padding:0 0 0 4px;transition:border-color .25s var(--ease)}
.field textarea{height:96px;padding-top:.6rem;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 4px center;padding-right:24px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--color-purple-bright);border-bottom-width:2.5px}
.field input::placeholder,.field textarea::placeholder{color:var(--color-ink-muted);opacity:.8}
.field option{color:var(--color-ink);background:var(--color-cream)}
.field--check{flex-direction:row;align-items:flex-start;gap:.7rem;font-size:.85rem;color:var(--color-chalk-muted);line-height:1.5;margin-top:.25rem}
.field--check input{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--color-purple-base)}
.field--check label{font-family:var(--sans);font-size:.85rem;letter-spacing:0;text-transform:none;color:var(--color-chalk-muted);font-weight:400}
.form__or{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--color-chalk-muted);margin-top:.5rem}
.form__or a{color:var(--color-purple-bright);text-decoration:underline;text-underline-offset:3px}
.form__privacy{font-size:.74rem;color:var(--color-chalk-muted);line-height:1.5;margin-top:.5rem}
/* FOOTER */
.footer{background:#08061A;color:var(--color-chalk);position:relative;overflow:hidden;padding:5rem 0 2rem}
.footer__octa{position:absolute;right:-220px;bottom:-180px;width:560px;height:560px;border:1px solid rgba(139,92,246,.08);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);pointer-events:none}
/* Mega-7: 4-column footer-mirrors-nav (lite). New .footer__grid replaces .footer__top. */
.footer__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3rem;position:relative;z-index:1}
@media (max-width:1023px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem}}
@media (max-width:480px){.footer__grid{grid-template-columns:1fr;gap:2rem}}
.footer__col-head{
font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
font-weight:500;color:var(--color-chalk-muted);margin:0 0 1.25rem;
}
.footer__col-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}
.footer__col-list a{font-size:.92rem;color:rgba(250,247,242,.85);text-decoration:none;transition:color .15s var(--ease)}
.footer__col-list a:hover,.footer__col-list a:focus-visible{color:var(--color-chalk);text-decoration:underline;text-underline-offset:3px}
.footer__muted{font-size:.92rem;color:var(--color-chalk-muted)}
.footer__cta{margin-top:1.25rem;align-self:flex-start}
.footer__col--contact{display:flex;flex-direction:column}
/* Bottom strip (copyright + ABN), separated by hairline */
.footer__strip{
margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);
display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
position:relative;z-index:1;
}
.footer__strip-left{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.footer__strip-logo{height:24px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.85}
.footer__copy,.footer__abn{font-size:.78rem;color:var(--color-chalk-muted);letter-spacing:.02em}
@media (max-width:480px){.footer__strip{flex-direction:column;align-items:flex-start;gap:.5rem}}
/* Legacy footer styles (kept inert; .footer__top, .footer__brand, .footer__lockup-*, .footer__bottom,
.footer__legal, .footer__contact, .footer__social) — no markup uses them after Mega 7 footer rewrite. */
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem;position:relative;z-index:1}
@media (max-width:880px){.footer__top{grid-template-columns:1fr 1fr;gap:2.5rem}}
@media (max-width:520px){.footer__top{grid-template-columns:1fr}}
.footer__brand{display:flex;flex-direction:column;gap:1rem}
.footer__lockup{display:flex;align-items:center;gap:.95rem}
.footer__lockup--full{display:block}
.footer__lockup-full{display:block;width:100%;height:auto;max-width:460px;max-height:170px;object-fit:contain}
@media (max-width:880px){.footer__lockup-full{max-width:360px;max-height:140px}}
.footer__lockup-mark{width:60px;height:60px;display:block;flex-shrink:0}
.footer__lockup-text{display:flex;flex-direction:column;gap:.15rem;line-height:1.05}
.footer__lockup-wordmark{font-family:var(--sans);font-weight:700;font-size:1.4rem;letter-spacing:.04em;color:var(--color-chalk)}
.footer__lockup-tag{font-family:var(--display);font-style:italic;font-weight:400;font-size:.92rem;color:var(--color-chalk);letter-spacing:.005em;line-height:1.2}
.footer__tagline{display:none}
.footer__tag-line{margin-top:1rem;font-family:var(--display);font-style:italic;font-weight:400;font-size:1.05rem;color:var(--color-chalk-muted);letter-spacing:.005em}
.footer__phone{margin-top:.5rem;font-family:var(--display);font-size:1.4rem;font-weight:500;color:var(--color-purple-bright);letter-spacing:-.01em}
.footer__col h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--color-chalk-muted);margin:0 0 1.25rem}
.footer__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}
.footer__col a{font-size:.92rem;color:var(--color-chalk);transition:color .2s var(--ease)}
.footer__col a:hover{color:var(--color-purple-bright)}
.footer__contact{font-size:.92rem;color:var(--color-chalk);line-height:1.6;display:flex;flex-direction:column;gap:.65rem}
.footer__contact .muted{color:var(--color-chalk-muted)}
.footer__bottom{margin-top:4rem;padding-top:1.75rem;border-top:1px solid var(--color-line-dark);display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;position:relative;z-index:1;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-chalk-muted)}
.footer__legal{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer__legal a:hover{color:var(--color-chalk)}
.footer__social{display:flex;gap:.75rem}
.footer__social a{width:36px;height:36px;border:1px solid var(--color-line-dark);display:inline-flex;align-items:center;justify-content:center;transition:background .25s var(--ease),border-color .25s var(--ease)}
.footer__social a:hover{background:var(--color-purple-deep);border-color:var(--color-purple-deep)}
.footer__social svg{width:16px;height:16px}
/* STICKY MOBILE CTA */
.sticky-cta{
display:none;
position:fixed;bottom:0;left:0;right:0;z-index:80;
height:44px;
align-items:center;justify-content:center;gap:.65rem;
background:var(--color-purple-base);color:var(--color-cream);
font-family:var(--sans);font-weight:500;font-size:.9rem;
text-decoration:none;
border-radius:2px 2px 0 0;
transform:translateY(110%);
transition:transform .35s var(--ease),background .25s var(--ease);
}
.sticky-cta:hover{background:var(--color-purple-deep)}
.sticky-cta .arrow{display:inline-flex;transition:transform .3s var(--ease)}
.sticky-cta:hover .arrow{transform:translateX(4px)}
.sticky-cta.is-visible{transform:translateY(0)}
@media (max-width:780px){.sticky-cta{display:flex}}
/* REVEAL */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
.skip{position:absolute;left:-9999px;top:1rem;background:var(--color-navy-deep);color:var(--color-cream);padding:.75rem 1rem;z-index:300;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.skip:focus{left:1rem}
/* POSITIONING SECTION (home) — mega11.4: text stack + image right */
.positioning__inner{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
@media (max-width:1279px) and (min-width:881px){.positioning__inner{grid-template-columns:6fr 4fr;gap:2.5rem}}
@media (max-width:880px){.positioning__inner{grid-template-columns:1fr;gap:2rem}}
.positioning__lead{display:flex;flex-direction:column;gap:1.5rem}
.positioning__lead h2 em{font-style:italic;color:var(--color-purple-deep);font-weight:500}
.positioning__body{display:flex;flex-direction:column;gap:1.5rem;margin-top:.5rem}
.positioning__body p{font-size:1.1rem;line-height:1.65;color:var(--color-ink-muted)}
.positioning__media{margin:0;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--color-bone);position:relative}
.positioning__media--empty{background:var(--color-bone);border:1px dashed var(--color-line-strong)}
.positioning__img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:880px){.positioning__media{order:2;max-width:480px;justify-self:start}}
/* PROSE */
.prose{max-width:68ch}
/* ============ FOCUS-VISIBLE (a11y, project-wide) ============ */
/* Every interactive element gets a visible focus ring on keyboard focus.
Mouse focus stays clean. Form fields keep their custom purple-underline focus (defined elsewhere). */
.btn:focus-visible,
.tlink:focus-visible,
.nav__link:focus-visible,
.nav__phone:focus-visible,
.nav__menu:focus-visible,
.sticky-cta:focus-visible,
.hs-spot:focus-visible,
.hs-item__bar:focus-visible,
.faq-item__q:focus-visible,
.variant-switch button:focus-visible,
.crumbs a:focus-visible,
.footer__legal a:focus-visible,
.footer__col a:focus-visible,
.footer__contact a:focus-visible,
.mobile-nav__list a:focus-visible,
.faq-page-grid nav a:focus-visible,
[data-faq-nav] a:focus-visible,
.brand:focus-visible,
.card-srv:focus-visible,
.card-ind:focus-visible{
outline:2px solid var(--color-purple-bright);
outline-offset:2px;
border-radius:2px;
}
/* Dark-surface variants need a brighter ring */
.block--dark .btn:focus-visible,
.block--dark .tlink:focus-visible,
.block--dark a:focus-visible,
.page-head a:focus-visible,
.mobile-nav__list a:focus-visible{
outline-color:#A78BFA;
}
/* FAQ category nav: keyboard focus parity with hover (replaces inline onmouseover) */
.faq-page-grid [data-faq-nav] a,
.faq-page-grid nav a{transition:color .2s var(--ease)}
.faq-page-grid [data-faq-nav] a:hover,
.faq-page-grid [data-faq-nav] a:focus-visible,
.faq-page-grid nav a:hover,
.faq-page-grid nav a:focus-visible{color:var(--color-purple-deep)}
/* SR-only utility (used by route announcer) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.prose p{font-size:1.08rem;line-height:1.7;color:var(--color-ink-muted);margin:0 0 1.25rem}
.prose p strong{color:var(--color-ink);font-weight:600}
.prose h3{font-size:1.6rem;margin:2.5rem 0 1rem;color:var(--color-ink)}
.prose ul{margin:0 0 1.5rem;padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:1.75rem;margin-bottom:.65rem;color:var(--color-ink-muted);line-height:1.6}
.prose ul li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;background:var(--color-purple-base);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
/* Legal/long-form prose (Privacy, Terms) */
.prose--legal h2{
font-family:var(--display);font-size:1.55rem;font-weight:500;letter-spacing:-.015em;line-height:1.2;
color:var(--color-ink);margin:3rem 0 1rem;padding-top:1.25rem;
border-top:1px solid var(--color-line);
}
.prose--legal h2:first-of-type{margin-top:2rem}
.prose--legal a{color:var(--color-purple-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose--legal a:hover{color:var(--color-purple-base)}
.prose__address{
font-style:normal;font-size:1.02rem;line-height:1.7;color:var(--color-ink);
padding:1.25rem 1.4rem;border:1px solid var(--color-line-strong);
background:rgba(14,11,31,.02);border-radius:1px;margin:0 0 2rem;
display:inline-block;
}
.prose__address strong{font-weight:600}
.prose__back{margin:2.5rem 0 3rem}
.prose__status{
display:inline-flex;align-items:center;gap:.6rem;
margin-top:3rem;padding:.5rem .75rem;
font-family:var(--mono);font-size:.68rem;font-weight:500;
letter-spacing:.18em;color:var(--color-ink-muted);
border:1px solid var(--color-line-strong);background:rgba(14,11,31,.02);
border-radius:1px;
}
.prose__status-tick{
width:6px;height:6px;background:var(--color-purple-bright);
clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
flex-shrink:0;
}
/* TWO-COL split content (services detail) */
.split{display:grid;grid-template-columns:5fr 7fr;gap:4rem;align-items:start}
@media (max-width:960px){.split{grid-template-columns:1fr;gap:2.5rem}}
.split__sticky{position:sticky;top:120px}
/* COMING SOON STUB */
.stub{padding:6rem 0;text-align:center}
.stub__inner{max-width:560px;margin:0 auto}
.stub__icon{width:80px;height:80px;margin:0 auto 2rem;background:rgba(109,40,217,.1);color:var(--color-purple-deep);display:flex;align-items:center;justify-content:center;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.stub__icon svg{width:32px;height:32px;stroke-width:1.5}
.stub h2{margin-bottom:1rem}
.stub p{color:var(--color-ink-muted);font-size:1.1rem;line-height:1.6;margin:0 0 2rem}
.stub__ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
/* VALUES (about) */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--color-line-dark);border-left:1px solid var(--color-line-dark)}
@media (max-width:780px){.values{grid-template-columns:repeat(2,1fr)}}
.value{padding:2rem;border-right:1px solid var(--color-line-dark);border-bottom:1px solid var(--color-line-dark);min-height:220px;display:flex;flex-direction:column;gap:1rem}
.value__num{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;color:var(--color-purple-bright)}
.value__name{font-family:var(--display);font-size:1.6rem;font-weight:500;color:var(--color-chalk);font-style:italic}
.value__body{color:var(--color-chalk-muted);font-size:.94rem;line-height:1.55}
/* Hex-quadrant icon (decomposes the brand octagon across the 4 tiles) */
.value__hex{width:42px;height:42px;display:block;flex-shrink:0;margin-bottom:.25rem}
.value__hex-quad{fill:rgba(139,92,246,.18);stroke:rgba(139,92,246,.4);stroke-width:1}
.value__hex-quad.is-filled{fill:var(--color-purple-bright);stroke:var(--color-purple-base)}
/* Keep attribution from rendering italic (default UA style) */
.testimonial__name{font-style:normal}
/* ============ STATS BANNER (Mega-7, homepage) ============ */
/* mega8: replaced by .proof-anchor (4 evidence cards floating around site photo).
stats-banner CSS retained inert in case operator reverts. */
.stats-banner{
background:var(--color-navy-deep);color:var(--color-chalk);
padding:clamp(56px,8vw,100px) 0;position:relative;
}
.stats-banner__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;align-items:start}
@media (max-width:767px){.stats-banner__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 2rem}}
@media (max-width:480px){.stats-banner__grid{grid-template-columns:1fr;gap:1.75rem}}
.stats-banner__col{
padding:0 clamp(1rem,2.5vw,2rem);
display:flex;flex-direction:column;gap:.75rem;align-items:flex-start;
min-height:160px;
}
@media (min-width:768px){
.stats-banner__col + .stats-banner__col{border-left:1px solid rgba(255,255,255,.12)}
}
.stats-banner__numeral{
font-family:var(--display);font-style:italic;font-weight:500;
font-size:clamp(2.75rem,5.5vw,4.25rem);line-height:1;letter-spacing:-.02em;
color:var(--color-chalk);
background:linear-gradient(120deg,#FAF7F2 0%,#C4B5FD 60%,#8B5CF6 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stats-banner__icon{
width:48px;height:48px;display:flex;align-items:center;justify-content:center;
color:var(--color-purple-bright);
}
.stats-banner__icon svg{width:40px;height:40px;stroke-width:1.5}
.stats-banner__label{
font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
font-weight:500;color:var(--color-chalk);
}
.stats-banner__clarifier{
font-size:.92rem;line-height:1.5;color:var(--color-chalk-muted);max-width:24ch;
}
/* ============ PROOF ANCHOR (mega13.1: revert to pale-purple section; circle fill) ============ */
/* Hotfix: proof-anchor follows the dark hero per the "cream follows dark navy" rule — flipped from #F3F1FB to cream. */
.proof-anchor{
background:#FBF8F4;color:var(--color-ink);
padding:48px 0;position:relative;overflow:hidden;
}
.proof-anchor__inner{position:relative;z-index:1}
.proof-anchor__stage{
position:relative;width:100%;
display:grid;grid-template-columns:1fr 1fr;gap:64px;
/* mega13.6: belt-and-braces vertical centring. align-items on the grid centres each
child in its track; align-self on each child defeats any inherited stretch; the copy
column's own internal flex column also justify-content:centres so if its track ever
stretches it still reads centred against the circle. */
align-items:center;
}
/* mega13.4: figure left, copy right. DOM order stays title-then-figure for SR/SEO (title announced first);
grid-column placement visually flips columns.
mega13.6: explicit align-self:center pins the vertical alignment regardless of cascade.
mega13.7: explicit grid-row:1 on BOTH children. Without it, the default grid-auto-flow:row
(sparse) refuses to backtrack — when item 1 declares grid-column:2 (row1col2), item 2 with
grid-column:1 gets pushed to row2col1 instead of row1col1, producing vertical stacking. */
.proof-anchor__copy{grid-column:2;grid-row:1;align-self:center}
.proof-anchor__circle-wrap{grid-column:1;grid-row:1;align-self:center}
/* LEFT: title + body */
.proof-anchor__copy{display:flex;flex-direction:column;gap:24px;justify-content:center}
.proof-anchor__title{
margin:0;font-family:var(--display);
font-size:56px;font-weight:500;line-height:1.05;letter-spacing:-.02em;
color:#15102e;max-width:480px;
}
.proof-anchor__title em{font-style:italic;font-weight:500}
.proof-anchor__body{
margin:0;font-size:17px;line-height:1.6;color:#555555;
max-width:460px;
}
/* RIGHT: circle + perimeter pills */
.proof-anchor__circle-wrap{
position:relative;width:480px;height:480px;margin:0 auto;
}
.proof-anchor__figure{
margin:0;width:100%;height:100%;border-radius:50%;
overflow:hidden;position:relative;
/* mega13.2: asset now ships with baked-in #F3F1FB fill; container background removed. */
background:transparent;border:0;box-shadow:none;
}
.proof-anchor__img{
width:100%;height:100%;
object-fit:cover;object-position:center top;
display:block;background:transparent;
}
.proof-anchor__feather{
/* mega13.1: feather overlay removed (was for dark-bg fade). Element kept as no-op so DOM is unaffected. */
display:none;
}
/* PILL */
.proof-pill{
position:absolute;z-index:2;
background:#FFFFFF;color:#15102e;
border-radius:32px;padding:10px 18px;
box-shadow:0 8px 24px rgba(0,0,0,.25);
display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
}
.proof-pill__icon{
width:32px;height:32px;border-radius:50%;flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;
}
.proof-pill__icon svg{width:16px;height:16px;display:block}
.proof-pill__label{font-family:var(--sans);font-size:14px;font-weight:500;line-height:1;color:#15102e}
/* Accent ramps */
.proof-pill--amber .proof-pill__icon{background:#FAEEDA;color:#BA7517}
.proof-pill--teal .proof-pill__icon{background:#E1F5EE;color:#0F6E56}
.proof-pill--coral .proof-pill__icon{background:#FAECE7;color:#D85A30}
.proof-pill--purple .proof-pill__icon{background:#EEEDFE;color:#534AB7}
/* Desktop (≥1280): pills float over the circle's perimeter, ~50% in / 50% out.
mega13.14: top pills shifted further out + up to clear the two-figure walkthrough
image's heads. Bottom pills unchanged (no overlap concern at lower-body crop). */
@media (min-width:1280px){
.proof-pill--tl{top:8%;left:-22%}
.proof-pill--tr{top:8%;right:-22%}
.proof-pill--bl{bottom:14%;left:-10%}
.proof-pill--br{bottom:22%;right:-8%}
}
/* Tablet (768–1279): 50/50 stays, circle 360px, pills slightly smaller */
@media (min-width:768px) and (max-width:1279px){
.proof-anchor{padding:36px 0}
.proof-anchor__stage{gap:40px}
.proof-anchor__title{font-size:42px}
.proof-anchor__circle-wrap{width:360px;height:360px}
.proof-pill{padding:8px 14px;gap:8px}
.proof-pill__icon{width:28px;height:28px}
.proof-pill__icon svg{width:15px;height:15px}
.proof-pill__label{font-size:13px}
/* mega13.14: top pills shifted to match desktop logic for head-clearance on the
two-figure image; bottom pills unchanged. */
.proof-pill--tl{top:8%;left:-22%}
.proof-pill--tr{top:8%;right:-22%}
.proof-pill--bl{bottom:14%;left:-12%}
.proof-pill--br{bottom:22%;right:-10%}
}
/* Mobile (≤767): single column. Title + body, then circle, then pills 2x2 grid below. */
@media (max-width:767px){
.proof-anchor{padding:32px 0}
.proof-anchor__stage{
display:flex;flex-direction:column;gap:24px;align-items:stretch;
}
.proof-anchor__title{font-size:32px;max-width:none}
.proof-anchor__body{font-size:16px;max-width:none}
.proof-anchor__circle-wrap{
width:240px;height:240px;margin:8px auto 16px;
}
/* Pills lose absolute positioning, render as 2x2 grid below the circle. */
.proof-anchor__circle-wrap{
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:240px auto auto;
gap:12px;
width:100%;height:auto;max-width:360px;
}
.proof-anchor__figure{
grid-row:1;grid-column:1 / -1;justify-self:center;
width:240px;height:240px;
}
.proof-pill{
position:relative;top:auto;left:auto;right:auto;bottom:auto;
justify-content:flex-start;width:100%;white-space:normal;
}
.proof-pill__label{font-size:13px;line-height:1.2}
.proof-pill--tl{grid-row:2;grid-column:1}
.proof-pill--tr{grid-row:2;grid-column:2}
.proof-pill--bl{grid-row:3;grid-column:1}
.proof-pill--br{grid-row:3;grid-column:2}
/* Harden mobile bounds:
- Defeat align-self:center bleeding in from desktop (stretches copy + wrap full-width).
- Cap title font-size relative to viewport so long words can't push the column wider than the gutter.
- Make the round figure responsive to ultra-narrow viewports.
- Belt-and-braces overflow guard on the section. */
.proof-anchor{max-width:100%}
.proof-anchor__copy,
.proof-anchor__circle-wrap{align-self:stretch}
.proof-anchor__title{font-size:clamp(24px,7.5vw,32px);word-wrap:break-word;overflow-wrap:anywhere}
.proof-anchor__figure{width:min(240px,80vw);height:min(240px,80vw)}
.proof-anchor__circle-wrap{grid-template-rows:min(240px,80vw) auto auto}
}
/* TIMELINE */
.timeline{position:relative;padding-left:2rem;border-left:1px solid var(--color-line)}
.timeline__item{position:relative;padding:1.25rem 0 1.25rem 1rem;border-bottom:1px solid var(--color-line)}
.timeline__item:last-child{border-bottom:none}
.timeline__item::before{content:"";position:absolute;left:-2.4rem;top:1.7rem;width:10px;height:10px;background:var(--color-purple-base);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.timeline__year{font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;color:var(--color-purple-deep);font-weight:500}
.timeline__title{font-family:var(--display);font-size:1.25rem;font-weight:500;margin-top:.25rem}
.timeline__body{color:var(--color-ink-muted);margin-top:.4rem;font-size:.96rem;line-height:1.55}
/* ============ SABER CONNECTOR LINES ============ */
.saber-gap{display:flex;justify-content:center;align-items:center;padding:0;line-height:0}
.saber-gap--cream{background:var(--color-cream)}
.saber-gap--bone{background:var(--color-bone)}
.saber-gap--dark{background:var(--color-navy-deep)}
/* mega13.14: lavender variant matches .proof-anchor (#F3F1FB) so the saber between
the proof-anchor and any adjacent lavender section disappears into the band. */
.saber-gap--lavender{background:#F3F1FB}
.saber{
width:2px;height:48px;display:block;
background:linear-gradient(to bottom,var(--color-purple-bright) 0%,var(--color-purple-deep) 100%);
box-shadow:0 0 12px rgba(139,92,246,.7),0 0 24px rgba(139,92,246,.35),0 0 48px rgba(139,92,246,.15);
transform:scaleY(0);transform-origin:top;
transition:transform 600ms cubic-bezier(.65,0,.35,1);
animation:saberPulse 2.5s ease-in-out infinite alternate;
}
.saber.is-in{transform:scaleY(1)}
@keyframes saberPulse{
0%{box-shadow:0 0 12px rgba(139,92,246,.7),0 0 24px rgba(139,92,246,.35),0 0 48px rgba(139,92,246,.15)}
100%{box-shadow:0 0 16px rgba(139,92,246,1),0 0 32px rgba(139,92,246,.55),0 0 64px rgba(139,92,246,.25)}
}
@media (max-width:768px){.saber{height:32px}}
@media (prefers-reduced-motion:reduce){
.saber{transform:scaleY(1);opacity:0;animation:none;transition:opacity 600ms ease}
.saber.is-in{opacity:1}
}
/* ============ METHODOLOGY (scroll-pinned) ============ */
.methodology-pin{position:relative;height:300vh;background:var(--color-navy-deep)}
.methodology-pin .methodology{
position:sticky;top:50%;transform:translateY(-50%);
padding:clamp(3rem,6vw,5rem) 0;
min-height:auto;
}
.methodology__head{display:grid;grid-template-columns:5fr 7fr;gap:4rem;align-items:start;margin-bottom:3.5rem}
@media (max-width:980px){.methodology__head{grid-template-columns:1fr;gap:2.5rem}}
.methodology__head h2{max-width:14ch;color:var(--color-chalk)}
.methodology__head h2 .accent{color:var(--color-purple-bright);font-style:italic}
.methodology__lead{margin-top:1.5rem;color:var(--color-chalk-muted);font-size:1.1rem;line-height:1.55;max-width:42ch}
/* Steps stacked vertically for scrollytelling */
.methodology__steps{display:flex;flex-direction:column;position:relative}
.method-step{
display:grid;grid-template-columns:auto 1fr;gap:1.75rem;align-items:start;
padding:1.25rem 0 1.25rem 1.5rem;
border-left:4px solid transparent;
opacity:.4;
transition:opacity 400ms ease-out,border-color 400ms ease-out,color 400ms ease-out;
position:relative;
}
.method-step.is-active{opacity:1;border-left-color:var(--color-purple-base)}
.method-step__num{
font-family:var(--display);font-weight:400;font-style:italic;
font-size:4.25rem;line-height:1;letter-spacing:-.04em;
color:var(--color-purple-bright);
transform:scale(1);transform-origin:left center;
transition:transform 400ms ease-out,color 400ms ease-out;
position:relative;display:inline-flex;align-items:center;gap:.7rem;
min-width:5.5rem;
}
.method-step.is-active .method-step__num{transform:scale(1.05);color:var(--color-purple-bright)}
.method-step__pulse{
width:10px;height:10px;background:var(--color-purple-bright);
clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
opacity:0;transform:scale(.6);
transition:opacity 400ms ease-out;
}
.method-step.is-active .method-step__pulse{opacity:1;animation:dotPulse 1.6s ease-in-out infinite alternate}
@keyframes dotPulse{
0%{box-shadow:0 0 0 0 rgba(139,92,246,.6);transform:scale(.85)}
100%{box-shadow:0 0 0 8px rgba(139,92,246,0);transform:scale(1.1)}
}
.method-step__content{padding-top:.4rem}
.method-step__label{font-family:var(--mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--color-purple-bright);font-weight:500}
.method-step__title{font-family:var(--display);font-size:1.55rem;font-weight:500;letter-spacing:-.015em;color:var(--color-chalk-muted);margin-top:.4rem;transition:color 400ms ease-out}
.method-step.is-active .method-step__title{color:var(--color-chalk)}
.method-step__body{margin-top:.6rem;color:var(--color-chalk-muted);line-height:1.55;max-width:54ch;font-size:.96rem}
/* Connector saber between steps */
.method-saber{
width:2px;height:36px;margin-left:calc(1.5rem + 5.5rem / 2 - 1px);
background:linear-gradient(to bottom,rgba(139,92,246,.18),rgba(76,29,149,.18));
position:relative;transition:background 400ms ease-out,box-shadow 400ms ease-out;
}
.method-saber.is-lit{
background:linear-gradient(to bottom,var(--color-purple-bright),var(--color-purple-deep));
box-shadow:0 0 8px rgba(139,92,246,.7),0 0 18px rgba(139,92,246,.35);
}
.methodology__foot{margin-top:3rem}
/* PLACARD */
.placard{
position:relative;width:100%;max-width:480px;justify-self:end;
aspect-ratio:4/3;
background:var(--color-bone);
border:1px solid rgba(250,247,242,.15);
padding:12px;
}
.placard::before{
content:"";position:absolute;inset:12px;border:1px solid rgba(14,11,31,.15);pointer-events:none;
}
.placard__kicker{
position:absolute;top:18px;left:24px;z-index:2;
font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
color:var(--color-ink-muted);font-weight:500;
}
.placard__corner{
position:absolute;width:8px;height:8px;border:0 solid var(--color-purple-deep);z-index:2;
}
.placard__corner--tl{top:18px;left:18px;border-top-width:1.5px;border-left-width:1.5px}
.placard__corner--tr{top:18px;right:18px;border-top-width:1.5px;border-right-width:1.5px}
.placard__corner--bl{bottom:18px;left:18px;border-bottom-width:1.5px;border-left-width:1.5px}
.placard__corner--br{bottom:18px;right:18px;border-bottom-width:1.5px;border-right-width:1.5px}
.placard__inner{
position:absolute;inset:46px 26px 26px 26px;
display:flex;flex-direction:column;gap:.6rem;overflow:hidden;
}
.placard__prompt-head{
font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--color-purple-deep);font-weight:600;
}
.placard__prompt-body{
font-family:var(--sans);font-size:13px;line-height:1.5;
color:var(--color-ink-muted);
overflow:hidden;
}
@media (max-width:980px){.placard{max-width:520px;justify-self:start}.placard__prompt-body{font-size:12px;line-height:1.45}}
/* Mobile: disable pin */
@media (max-width:768px){
.methodology-pin{height:auto}
.methodology-pin .methodology{position:static;transform:none;top:auto}
.method-step{opacity:1;border-left-color:var(--color-line-dark);margin-bottom:.5rem}
.method-step.is-active{border-left-color:var(--color-purple-base)}
.method-step__title{color:var(--color-chalk)}
.method-saber{margin-left:1.5rem}
}
@media (prefers-reduced-motion:reduce){
.methodology-pin{height:auto}
.methodology-pin .methodology{position:static;transform:none;top:auto}
.method-step{opacity:1;border-left-color:var(--color-line-dark)}
.method-step.is-active{border-left-color:var(--color-purple-base)}
.method-step__title{color:var(--color-chalk)}
.method-step__num{transform:none!important}
}
/* ============ GRADIENT TYPOGRAPHY ============ */
.grad-text{
background:linear-gradient(95deg,#6D28D9 0%,#8B5CF6 45%,#A78BFA 75%,#67E8F9 100%);
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
font-style:italic;
padding-left:0.22em;
padding-right:0.18em;
margin-left:-0.18em;
margin-right:-0.14em;
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
}
.section-head h2,.positioning__lead h2{overflow:visible}
.grad-text em{font-style:italic}
.block--dark .grad-text,.hero .grad-text,.final .grad-text,.stats .grad-text{
background:linear-gradient(95deg,#8B5CF6 0%,#A78BFA 40%,#C4B5FD 70%,#67E8F9 100%);
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){.grad-text{color:var(--color-purple-deep)}}
/* ============ SERVICE ICON UPGRADE ============ */
.card-srv__icon--lg{width:64px;height:64px;position:relative;overflow:visible}
.card-srv__icon--lg svg{width:36px;height:36px;stroke-width:1.4}
.card-srv__icon--lg::before{
content:"";position:absolute;inset:-6px;
background:radial-gradient(circle,rgba(139,92,246,.45),transparent 70%);
opacity:0;transition:opacity .35s var(--ease);
clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
z-index:-1;
}
.card-srv:hover .card-srv__icon--lg::before{opacity:1}
/* ============ HEX ORBITAL WIDGET (Difference) ============ */
.diff__orbital{display:none}
body.variant-b .diff__grid,body.variant-c .diff__grid{display:none}
body.variant-b .diff__orbital,body.variant-c .diff__orbital{display:block}
.orbital{position:relative;margin-top:2rem}
.orbital__stage{
position:relative;width:100%;max-width:720px;margin:0 auto;
aspect-ratio:1;
}
.orbital__lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.orbital__core{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:180px;height:180px;display:flex;align-items:center;justify-content:center;
z-index:3;
}
.orbital__core-hex{
width:180px;height:180px;
background:linear-gradient(160deg,#6D28D9 0%,#4C1D95 100%);
clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:.35rem;
box-shadow:0 0 60px rgba(139,92,246,.5),inset 0 0 40px rgba(139,92,246,.3);
position:relative;z-index:2;
}
.orbital__core-glyph{
font-family:var(--display);font-style:italic;font-weight:500;
font-size:2.6rem;letter-spacing:-.02em;color:var(--color-chalk);
}
.orbital__core-label{
font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;
text-transform:uppercase;color:rgba(250,247,242,.7);
}
.orbital__core-pulse{
position:absolute;inset:0;width:180px;height:180px;
border:1.5px solid rgba(139,92,246,.6);
clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
animation:orbPulse 3s ease-out infinite;z-index:1;
}
.orbital__core-pulse--2{animation-delay:1.5s}
@keyframes orbPulse{
0%{transform:scale(.95);opacity:.8}
100%{transform:scale(1.6);opacity:0}
}
.orb-node{
position:absolute;transform:translate(-50%,-50%);
width:130px;display:flex;flex-direction:column;align-items:center;gap:.6rem;
text-align:center;opacity:0;
animation:orbNodeIn .7s var(--ease) forwards;
z-index:2;
}
.diff__orbital.is-in .orb-node{}
@keyframes orbNodeIn{
0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.orb-node__hex{
width:56px;height:56px;
background:rgba(255,255,255,.85);
border:1px solid rgba(109,40,217,.25);
clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
display:flex;align-items:center;justify-content:center;
color:var(--color-purple-deep);
box-shadow:0 4px 20px rgba(76,29,149,.18);
transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.orb-node__hex svg{width:24px;height:24px;stroke-width:1.5}
.orb-node:hover .orb-node__hex{transform:scale(1.1);box-shadow:0 6px 30px rgba(139,92,246,.5)}
.orb-node__label{
font-family:var(--display);font-size:.95rem;font-weight:500;line-height:1.2;
color:var(--color-ink);max-width:130px;
}
.orb-node__body{
font-family:var(--sans);font-size:.74rem;color:var(--color-ink-muted);line-height:1.4;
max-width:130px;opacity:0;max-height:0;overflow:hidden;
transition:opacity .3s var(--ease),max-height .3s var(--ease);
}
.orb-node:hover .orb-node__body{opacity:1;max-height:80px;margin-top:.2rem}
.orbital__legend{display:none}
@media (max-width:780px){
.orbital__stage{display:none}
.orbital__legend{display:grid;grid-template-columns:1fr;gap:1rem;border-top:1px solid var(--color-line);padding-top:1.5rem}
.orbital__legend-item{display:flex;align-items:baseline;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--color-line)}
.orbital__legend-num{font-family:var(--mono);font-size:.78rem;color:var(--color-purple-deep)}
.orbital__legend-text{font-family:var(--display);font-size:1.05rem;color:var(--color-ink)}
}
/* ============ VARIANT SWITCHER ============ */
.variant-switch{
position:fixed;top:104px;right:var(--gutter);z-index:90;
background:var(--color-navy-deep);color:var(--color-chalk);
border:1px solid var(--color-line-dark);padding:6px;display:flex;gap:2px;
font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.variant-switch button{
padding:6px 10px;color:var(--color-chalk-muted);background:transparent;border:none;
cursor:pointer;font:inherit;letter-spacing:inherit;transition:background .2s,color .2s;
}
.variant-switch button.is-active{background:var(--color-purple-base);color:var(--color-chalk)}
.variant-switch button:hover:not(.is-active){color:var(--color-chalk)}
.variant-switch__label{padding:6px 8px;color:var(--color-chalk-muted);align-self:center}
@media (max-width:780px){.variant-switch{top:auto;bottom:80px;right:12px}}
/* ============ VARIANT C — STAT GRADIENT + CASE LIFT ============ */
body.variant-c .stat__num{
background:linear-gradient(95deg,#A78BFA 0%,#C4B5FD 60%,#67E8F9 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
body.variant-c .case.is-in{animation:caseLift .8s var(--ease) backwards}
@keyframes caseLift{
0%{transform:translateY(40px);opacity:0}
100%{transform:translateY(0);opacity:1}
}
/* SECTION TITLE shorthand */
.kicker-row{display:flex;align-items:center;gap:.7rem;margin-bottom:1.25rem}
/* ============ TESTIMONIALS (homepage rebuild) ============ */
.testimonials{
background-color:#F3F1FB;
padding:56px 0;
margin-bottom:0;border-bottom:none;
}
.testimonials .container{max-width:1240px;margin:0 auto;padding:0 1.5rem}
.testimonials__header--centred{max-width:720px;margin:0 auto 32px;text-align:center}
.testimonials__header--centred .eyebrow{
display:inline-flex;align-items:center;gap:.55rem;
font-family:var(--mono,'Geist Mono',monospace);
font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--color-purple-deep,#5B3FB8);
margin:0 0 16px;font-weight:500;
}
.testimonials__header--centred .eyebrow .dot{
width:.5rem;height:.5rem;border-radius:50%;
background:var(--color-purple-base,#6D28D9);display:inline-block;
}
.testimonials__header--centred h2{
margin:0 0 20px;
font-family:var(--display,'Fraunces',serif);
font-size:clamp(2rem, 3.6vw, 2.85rem);
line-height:1.1;letter-spacing:-.02em;
color:#15102e;font-weight:500;
}
.testimonials__header--centred h2 em{font-style:italic}
.testimonials__intro{
font-family:var(--sans,'Geist',sans-serif);
font-size:1.0625rem;line-height:1.6;opacity:.85;margin:0;color:#15102e;
}
.testimonials__grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
max-width:1200px;margin:0 auto;
}
.testimonial-card{
background-color:#EDE9F8;
border-radius:16px;
padding:32px 28px;
display:flex;flex-direction:column;gap:20px;
position:relative;
}
.testimonial-card__stars{
display:flex;justify-content:center;gap:4px;
color:#F5A623;font-size:1.125rem;line-height:1;
}
.testimonial-card__quote{
font-family:var(--display,'Fraunces',serif);
font-style:italic;font-size:1.0625rem;line-height:1.55;
color:#15102e;margin:0;
}
.testimonial-card__mark{
font-family:var(--display,'Fraunces',serif);
font-size:3.5rem;line-height:.8;
color:#5B3FB8;margin-right:4px;vertical-align:-0.4em;font-weight:700;
}
.testimonial-card__footer{
display:flex;justify-content:space-between;align-items:center;
margin-top:auto;padding-top:16px;gap:16px;
border-top:1px solid rgba(91,63,184,.15);
}
.testimonial-card__attribution{flex:1;min-width:0}
.testimonial-card__name{
font-family:var(--sans,'Geist',sans-serif);
font-weight:600;color:#15102e;margin:0 0 2px;font-size:1rem;
}
.testimonial-card__org{
font-family:var(--sans,'Geist',sans-serif);
font-size:.875rem;color:#5B5470;margin:0;
}
.testimonial-card__logo{
flex-shrink:0;width:56px;height:56px;
display:flex;align-items:center;justify-content:center;
}
.testimonial-card__logo img{
max-width:56px;max-height:56px;object-fit:contain;display:block;
}
@media (max-width:980px){
.testimonials{padding:40px 0}
.testimonials__header--centred{margin-bottom:32px}
.testimonials__grid{grid-template-columns:1fr;gap:20px}
.testimonial-card{padding:28px 24px}
}