Waimia.
Réserver un audit →
§ DS Studio · bac à sable token-driven

Édite un token. Vois tout changer.

À la manière d'ACSS : déplace un curseur ou choisis une couleur, et chaque bouton, card et section ci-dessous se repeint en direct via var(--token). Complémentaire au catalogue documentaire.

Rôle de cette page : personnaliser. Pour parcourir les composants sans quitter le studio : volet Catalogue ci-dessous (151 sections, 25 catégories). Pour la documentation complète : page Catalogue.

115 tokens · 196 classes · 151 sections cataloguées · verrou check:token-lock non-bloquant actif

Preview page
FIG · 0 · Impact d'un token

Clique un token dans l'éditeur. « Si tu changes --accent, ça impacte 229 fichiers. »

  • src/components/editorial/Callout.astro
  • src/components/editorial/Dingbat.astro
  • src/components/editorial/DropCap.astro
  • src/components/editorial/KeyMetric.astro
  • src/components/editorial/PullQuote.astro
  • src/components/editorial/Sidenote.astro
  • src/components/editorial/Timeline.astro
  • src/components/footer/Footer.astro
  • src/components/header/Header.astro
  • src/components/library/DsLocalNav.astro
  • src/components/motion/AtlasConnections.astro
  • src/components/motion/BootSplash.astro
  • src/components/sections/AboutStorySplit.astro
  • src/components/sections/AnnouncementBanner.astro
  • src/components/sections/ArchitectureDiagram.astro
  • src/components/sections/ArticleGrid.astro
  • src/components/sections/AsymmetricServices.astro
  • src/components/sections/BentoGrid.astro
  • src/components/sections/BookingEmbed.astro
  • src/components/sections/BrandedCallout.astro
  • src/components/sections/CaseCardGrid.astro
  • src/components/sections/CaseSplit.astro
  • src/components/sections/CaseSpotlight.astro
  • src/components/sections/CodeShowcase.astro
  • src/components/sections/ComparisonDuo.astro
  • src/components/sections/ComparisonPricingCallout.astro
  • src/components/sections/ComparisonTable.astro
  • src/components/sections/ContactForm.astro
  • src/components/sections/CourseCatalogTable.astro
  • src/components/sections/CtaBandSection.astro
  • src/components/sections/CtaFinal.astro
  • src/components/sections/CtaFormInline.astro
  • src/components/sections/CtaNewsletterFooter.astro
  • src/components/sections/CtaSplitVisual.astro
  • src/components/sections/DataTable.astro
  • src/components/sections/DecisionList.astro
  • src/components/sections/DiagnosticStages.astro
  • src/components/sections/EcosystemPartners.astro
  • src/components/sections/EditorialPreview.astro
  • src/components/sections/EditorialSplitGrid.astro
  • src/components/sections/EditorialTableBlock.astro
  • src/components/sections/EditorialWriteFeed.astro
  • src/components/sections/FeatureAccordion.astro
  • src/components/sections/FeatureComparisonGrid.astro
  • src/components/sections/FeatureGrid.astro
  • src/components/sections/FeatureSplitMedia.astro
  • src/components/sections/FeatureTabs.astro
  • src/components/sections/FeatureZigzag.astro
  • src/components/sections/HeroAtlas.astro
  • src/components/sections/HeroCentered.astro
  • src/components/sections/HeroFormInline.astro
  • src/components/sections/HeroHome.astro
  • src/components/sections/HeroHubStats.astro
  • src/components/sections/HeroLiquid.astro
  • src/components/sections/HeroOfferDetail.astro
  • src/components/sections/HeroSocialProof.astro
  • src/components/sections/HeroSplit.astro
  • src/components/sections/HeroTunnelStep.astro
  • src/components/sections/HowWeShip.astro
  • src/components/sections/InclusionsList.astro
  • src/components/sections/IntegrationsGrid.astro
  • src/components/sections/LogoWall.astro
  • src/components/sections/ManifestoAct.astro
  • src/components/sections/ManifestoBlock.astro
  • src/components/sections/ManifestoStatement.astro
  • src/components/sections/MarqueeBand.astro
  • src/components/sections/MaturityPyramid.astro
  • src/components/sections/MethodTimeline.astro
  • src/components/sections/MetricCalloutBand.astro
  • src/components/sections/MetricShift.astro
  • src/components/sections/NewsletterBand.astro
  • src/components/sections/OfferTierGrid.astro
  • src/components/sections/OperatingLayer.astro
  • src/components/sections/PainPoints.astro
  • src/components/sections/PersonaAttributesGrid.astro
  • src/components/sections/PricingCards.astro
  • src/components/sections/PricingSingleHighlight.astro
  • src/components/sections/PricingTable.astro
  • src/components/sections/PricingToggle.astro
  • src/components/sections/ProblemStatement.astro
  • src/components/sections/ProcessSteps.astro
  • src/components/sections/QuoteSpotlight.astro
  • src/components/sections/RelatedCardsBand.astro
  • src/components/sections/ResourceCardGrid.astro
  • src/components/sections/RoiBand.astro
  • src/components/sections/ServiceCatalogList.astro
  • src/components/sections/ServicesGrid.astro
  • src/components/sections/StatBlock.astro
  • src/components/sections/StatCounter.astro
  • src/components/sections/StatsBento.astro
  • src/components/sections/StepsHorizontal.astro
  • src/components/sections/TeamBioGrid.astro
  • src/components/sections/TeamCardGrid.astro
  • src/components/sections/TechCapabilitiesSpecs.astro
  • src/components/sections/TechIntegrationFlow.astro
  • src/components/sections/TechPositioningSplit.astro
  • src/components/sections/TechStackBand.astro
  • src/components/sections/TechWhenDual.astro
  • src/components/sections/TerminalMockupSection.astro
  • src/components/sections/TerminalTableSection.astro
  • src/components/sections/TestimonialBlock.astro
  • src/components/sections/TestimonialLogoMetric.astro
  • src/components/sections/TestimonialMetrics.astro
  • src/components/sections/TimelineHorizontal.astro
  • src/components/sections/TrustBadgesBand.astro
  • src/components/sections/TrustLegalSection.astro
  • src/components/sections/TunnelStepNav.astro
  • src/components/sections/UseCaseIndex.astro
  • src/components/sections/VersusCompetitors.astro
  • src/components/sections/WelcomeSection.astro
  • src/components/sections/WhyStalls.astro
  • src/components/sections/WorkflowTable.astro
  • src/components/svg/geometric/AuditMaturityTimeline.astro
  • src/components/svg/geometric/ConseilAuditDiagram.astro
  • src/components/svg/geometric/MethodeProcessDiagram.astro
  • src/components/svg/geometric/RevOpsFunnel.astro
  • src/components/svg/sumie/HeroSumie.astro
  • src/components/svg/sumie/MotifContent.astro
  • src/components/svg/sumie/MotifDialogue.astro
  • src/components/svg/sumie/MotifFlow.astro
  • src/components/svg/sumie/MotifGrowth.astro
  • src/components/svg/sumie/MotifLayers.astro
  • src/components/svg/sumie/MotifNetwork.astro
  • src/components/svg/sumie/PortraitSimon.astro
  • src/components/svg/sumie/SecteurFinance.astro
  • src/components/svg/sumie/SecteurIndustrie.astro
  • src/components/svg/sumie/SecteurServicesB2B.astro
  • src/components/templates/AuthorPageTemplate.astro
  • src/components/templates/CaseStudyTemplate.astro
  • src/components/templates/ConversionFunnelTemplate.astro
  • src/components/templates/CourseDetailTemplate.astro
  • src/components/templates/EssayTemplate.astro
  • src/components/templates/LeadMagnetTemplate.astro
  • src/components/templates/OffresDetailTemplate.astro
  • src/components/templates/SolutionsDetailTemplate.astro
  • src/components/templates/TechnologiesDetailTemplate.astro
  • src/components/templates/TunnelStepTemplate.astro
  • src/components/ui/atoms/ChapterLabel.astro
  • src/components/ui/atoms/CursorDot.astro
  • src/components/ui/atoms/FormErrors.astro
  • src/components/ui/atoms/Kicker.astro
  • src/components/ui/atoms/PillCTA.astro
  • src/components/ui/atoms/ProgressBar.astro
  • src/components/ui/atoms/ScrollProgress.astro
  • src/components/ui/atoms/SectionTransition.astro
  • src/components/ui/atoms/TerminalCTA.astro
  • src/components/ui/molecules/AsymmetricServiceRow.astro
  • src/components/ui/molecules/AuthorByline.astro
  • src/components/ui/molecules/AuthorCard.astro
  • src/components/ui/molecules/Breadcrumb.astro
  • src/components/ui/molecules/EditorialCaseCard.astro
  • src/components/ui/molecules/EditorialWriteRow.astro
  • src/components/ui/molecules/FitColumns.astro
  • src/components/ui/molecules/MastheadRow.astro
  • src/components/ui/molecules/PainPointInline.astro
  • src/components/ui/molecules/PricingTier.astro
  • src/components/ui/molecules/ProofBand.astro
  • src/components/ui/molecules/RelatedByCluster.astro
  • src/components/ui/molecules/RelatedCards.astro
  • src/components/ui/molecules/ServiceCatalogRow.astro
  • src/components/ui/molecules/ShareButtons.astro
  • src/components/ui/molecules/TableOfContents.astro
  • src/components/ui/molecules/TagPills.astro
  • src/components/ui/molecules/TaxonomyMenu.astro
  • src/components/ui/molecules/TechPillRow.astro
  • src/components/ui/molecules/TunnelNav.astro
  • src/components/ui/organisms/AtlasGrid.astro
  • src/components/ui/organisms/BookSession.astro
  • src/components/ui/organisms/FooterMarquee.astro
  • src/components/ui/organisms/Hero.astro
  • src/components/ui/organisms/ManifestoAccent.astro
  • src/components/ui/organisms/PersonaSwitcher.astro
  • src/components/ui/organisms/Stub.astro
  • src/layouts/Base.astro
  • src/pages/404.astro
  • src/pages/agence/about.astro
  • src/pages/agence/design-system.astro
  • src/pages/agence/ds-studio.astro
  • src/pages/agence/hero-lab.astro
  • src/pages/agence/methode.astro
  • src/pages/agence/prompts.astro
  • src/pages/cas/index.astro
  • src/pages/categories/[slug].astro
  • src/pages/commerce/[type]/[slug].astro
  • src/pages/commerce/index.astro
  • src/pages/compare/organisms.astro
  • src/pages/comparer/[slug].astro
  • src/pages/comparer/index.astro
  • src/pages/components/[type].astro
  • src/pages/contact.astro
  • src/pages/ecole/index.astro
  • src/pages/en/agence/about.astro
  • src/pages/en/agence/design-system.astro
  • src/pages/en/agence/methode.astro
  • src/pages/en/agence/prompts.astro
  • src/pages/en/cas/index.astro
  • src/pages/en/comparer/[slug].astro
  • src/pages/en/comparer/index.astro
  • src/pages/en/contact.astro
  • src/pages/en/manifesto.astro
  • src/pages/en/plan-du-site.astro
  • src/pages/en/ressources/index.astro
  • src/pages/en/solutions/index.astro
  • src/pages/en/technologies/index.astro
  • src/pages/glossaire/[slug].astro
  • src/pages/glossaire/index.astro
  • src/pages/manifesto.astro
  • src/pages/offres/audit-maturite-ia.astro
  • src/pages/offres/site-web-ia.astro
  • src/pages/plan-du-site.astro
  • src/pages/preview/[type].astro
  • src/pages/ressources/academy.astro
  • src/pages/ressources/categorie/[...slug].astro
  • src/pages/ressources/changelog.astro
  • src/pages/ressources/cookbooks/index.astro
  • src/pages/ressources/field-notes/[slug].astro
  • src/pages/ressources/index.astro
  • src/pages/ressources/livres-blancs/[...slug].astro
  • src/pages/ressources/livres-blancs/index.astro
  • src/pages/ressources/outils/index.astro
  • src/pages/ressources/personas/index.astro
  • src/pages/ressources/silo/[...slug].astro
  • src/pages/ressources/tag/[...slug].astro
  • src/pages/ressources/veille-ia/index.astro
  • src/pages/secteurs/index.astro
  • src/pages/solutions/index.astro
  • src/pages/technologies/index.astro
  • src/styles/global.css
  • src/styles/scroll-reveal.css

129 sections du catalogue utilisent --accent. Clique l'une d'elles : elle se charge dans l'aperçu du catalogue et hérite de tes overrides.

01 · Atomes · 25 variants rendus

Chaque variant de chaque atome, rendu et réactif au panneau LIVE.

Kicker · tone × size

§ Tone muted
tone="muted"
§ Tone accent
tone="accent"
§ Tone dim (on dark)
tone="dim"
§ Size 10
size={10}
§ Size 14
size={14}
§ Transform none
textTransform="none"

ChapterLabel · tone

II · 2.0 · Acte II · variant muted
tone="muted"
IV · 4.0 · Acte IV · variant dim
tone="dim"

Button · variant × size

PillCTA · variant

TerminalCTA · variant × size

Bi · contenu bilingue

Rendu côté FR

<Bi fr en />

Atomes comportementaux (catalogués)

CursorDot Curseur magnétique custom (suit la souris)
ScrollProgress Barre de progression de lecture (scroll global)
ProgressBar Barre de progression générique (valeur 0..1)
SectionTransition Transition inter-sections (hairline animée)
FormErrors Liste d'erreurs de formulaire (a11y live region)
02 · Molécules · 12 rendues

Variants principaux de chaque molécule, données de démo FR.

SectionHeader · tone

IIActe II · La méthode

StatRow · tone paper / ink

+312%
Trafic organique
6 sem.
Mise en ligne
0
Dépendance no-code
24/7
Disponibilité
< 1s
LCP médian
100
Score perf

TechPillRow · kind primary / open / neutral

Astro TypeScript Tailwind Vercel

PainPointInline · severity (4)

Le site ne convertit pas.

Tunnel repensé orienté preuve.

Dépendance à un no-code fermé.

Stack ouverte, code possédé.

SEO technique négligé.

Rendu statique + données structurées.

Pas d'analytics propre.

Mesure first-party respectueuse.

NewsletterSignup · card

NewsletterSignup · inline

RelatedCards

Méthode

Notre approche

Du diagnostic à la mise en ligne.

→ Cas

Étude de cas

Un site refait en 6 semaines.

→ Offre

Audit de maturité

Mesure où vous en êtes.

→

ProofBand

Témoignage
« L'équipe a livré un site qui convertit, sans dépendance. »
Direction · PME industrielle
Mesures
+48%
Leads qualifiés
6 sem.
Délai

PricingTier · highlight

§ 01

Starter

Site vitrine orienté preuve.

7 900 € HT · forfait
  • ✓ Jusqu'à 8 pages
  • ✓ SEO technique
  • ✓ Mise en ligne 4 sem.
Démarrer
Recommandé
§ 02

Standard

Tunnel de conversion complet.

14 900 € HT · forfait
  • ✓ Pages illimitées
  • ✓ Tunnel + CRM
  • ✓ A/B testing
Recommandé
§ 03

Custom

Plateforme sur-mesure.

Sur devis
  • ✓ Architecture dédiée
  • ✓ Intégrations API
  • ✓ Support prioritaire
Nous contacter

Breadcrumb

ShareButtons

TerminalMockup · tone ink / paper

waimia · studio ◉ live

$ édite --accent → tout se repeint

waimia · studio ◉ paper

$ tone paper

03 · Sections · 14 échantillon sur 151

Rendu inline (pas iframe) pour rester réactif au token LIVE. Aperçu tronqué en hauteur. Catalogue complet des 151 sections ci-dessous ↓

hero-split grand →
Démo Hero · Split layout

L'agent IA pioche, ne réinvente pas.

Le composable W6 expose 19 sections cataloguées. Chaque section atomique, testée, validée.

Voir le catalogue →Lire la doc
problems-grid grand →

Trois frictions qui tuent votre conversion

01
Site trop lent

FCP 4,2 s. Lighthouse 34.
−7 % de conversion par seconde.

WordPress avec 40 plugins : chaque visiteur attend. Chaque seconde perdue coûte 7 % de conversions. Sans IA, impossible d'automatiser les corrections.

02
Contenu stale

1 article en 6 semaines.
Vos concurrents en publient 8/sem avec IA.

Le brief, les relectures, le SEO, la mise en ligne : 6 semaines par article. Vos concurrents IA publient 8 articles/semaine optimisés Google et GEO.

03
Leads sans relance

3 200 leads collectés.
Jamais relancés dans l'heure.

Les prospects remplissent les formulaires. Ils attendent. La conversion est 7× plus probable dans l'heure, mais personne ne rappelle. Le pipeline dort.

stat-block grand →

Signal terrain

En cinq jours, nous avions un workflow déployé et un plan d'action validé par le comité.
Direction des opérations · Cabinet conseil B2B
  • 5 jpour cibler le levier
  • 4 sem.au premier workflow
  • 1interlocuteur unique
  • MesuréROI, jamais estimé
method-timeline grand →
Méthode · 4 étapes

Le processus en quatre temps

De l'audit initial au déploiement, chaque étape produit un livrable mesurable.

  1. 01
    Audit

    Cartographie stack, données, équipe, frictions.

  2. 02
    Diagnostic

    Priorisation des chantiers par ROI mesurable.

  3. 03
    Pilote

    Premier workflow en production sous 5 jours.

  4. 04
    Industrialisation

    Extension à 6-10 semaines après mesure.

feature-grid grand →
Démo · grille features

Trois piliers du DS Waimia

  • Tokens canoniques

    115 tokens CSS exposés à :root. Pioche, n'invente pas.

  • Composants atomiques

    114 composants en 7 couches Tier 1.

  • Anti-hallucination

    5 anti-patterns documentés avec commandes de détection.

pricing-table grand →
Tarifs · démo

Trois paliers

Activation €1,500
  • ▸ 1 workflow
  • ▸ Audit 5 jours
  • ▸ Formation 1 jour
Démarrer
Growth €5,000
  • ▸ 5-8 workflows
  • ▸ Système complet 6-10 sem.
  • ▸ Support 90j
Choisir
Sur-mesure Devis
  • ▸ Workflows illimités
  • ▸ Architecture dédiée
  • ▸ Support 12 mois
Discuter
faq-accordion grand →
FAQ · 3 questions

Questions fréquentes

Q.01 Combien de temps prend un projet ?

AI Activation · 1 semaine. Growth System · 6 à 10 semaines.

Q.02 Quels sont vos tarifs ?

AI Activation à partir de 1 500€. Growth System à partir de 5 000€.

Q.03 Compatible avec notre stack actuelle ?

Oui : HubSpot, Salesforce, Notion, Excel, GA4, etc.

testimonial-block grand →
Témoignages · démo

Ce que disent les clients

  • En 5 jours, on a câblé l'IA dans nos workflows. Premier ROI à 6 semaines.
    Marie L.
    COO · PME B2B Services
  • Méthodologie carrée. Mesure avant/après. On a su exactement ce qui marchait.
    Thomas R.
    CFO · ETI Industrie
comparison-table grand →

Comparatif tiers

CapacitéActivation 1 sem.Growth SystemSur-mesure
Audit complet◉◉◉
Workflows IA15-8illimité
Formation équipe◦◉◉
Support 90j◦◉◉
marquee-band grand →
proof-bar grand →
Preuves · démo design system
  • 118tokens canoniques
  • 19sections W6
  • 114composants atomic
  • 0hallucinations
services-grid grand →
FIG II · 2.0 · Acte II · La méthode
6 SERVICES · UNE COUCHE CONTINUE

Six services, appris en livrant, pas en PowerPoint.

FIG 2.01 30 min

Diagnostic 30 min

On identifie le levier métier avant la techno.

Connecteurs Audit · Cartographie · Stack mapping
→
FIG 2.02 +840 K€ pipe

Système d'acquisition

Pipeline reconnecté, qualification automatisée.

Connecteurs Google Ads · Meta · LinkedIn · GA4 · Landing
→
FIG 2.03 −35% manuel

CRM augmenté

Le CRM qui relance, qualifie et alerte, sans que vous touchiez rien.

Connecteurs HubSpot · Salesforce · Pipedrive · Outlook
→
FIG 2.04 Décide en 2 min

Lisibilité des données

Tableaux de bord temps réel : décidez en 2 minutes, pas en réunion.

Connecteurs GA4 · Search Console · SEO tools · Dashboards
→
FIG 2.05 +12h / sem

Tâches répétitives éliminées

Workflows qui tournent sans vous.

Connecteurs Workflows · Agents IA · Excel · Office
→
FIG 2.06 Souverain

Sur-mesure ETI

Architecture souveraine, quand les outils du marché butent sur votre périmètre.

Connecteurs Trust Center · Design System · Governance · VirtuoseOS
→
cta-final grand →
FIG V · 5.0 · Acte V · Passer à l'action

Stop le théâtre. Câbler.

45 minutes. On regarde. On audite. On chiffre. Si on n'a rien à vous proposer, on le dit. On ne relance pas.

● DISPONIBLE · RÉPONSE SOUS 24H

Câbler →bonjour@waimia.fr

Diagnostic gratuit · sans engagement · réponse sous 24h.

manifesto-block grand →
§ Manifeste · Viewport 01

On se méfie du théâtre IA. Le purple-glass, les cerveaux-circuits, les bento grids qui ne disent rien. On écrit en français, on lit la documentation Stripe, on livre du code le mardi et on mesure le pipeline le vendredi.

04 · Catalogue · 151 sections · 25 catégories

Toutes les sections du registry, par catégorie. Clique un type : son aperçu se charge ci-contre et hérite des tokens édités dans le panneau LIVE. Chaque type a aussi son rendu isolé (preview) et sa fiche technique (fiche) ; chaque catégorie a sa page dédiée.

About Sections 1
Banner Sections 1
Call-to-Action Sections 1
Comparison Sections 10
Contact Sections 2
Content Listing Sections 2
CTA Sections 9
FAQ Sections 4
Feature Sections 32
Gallery Sections 2
Hero Header Sections 31
Index Sections 3
Logo Sections 6
Manifesto Sections 3
Newsletter Sections 2
Pricing Sections 5
Process Sections 2
Stats Sections 8
Table Sections 3
Team Sections 1
Terminal Sections 3
Testimonial Sections 10
Timelines 7
Trust Sections 2
Utility Sections 1
04 bis · Atelier de section

Sélectionne un type dans le catalogue ci-dessus (ou ci-dessous le type courant), puis change son fond, sa variante ou ses textes : l'aperçu réagit en direct, sans rechargement. Le fond applique data-bg sur la section ; les composants ink-ready se repeignent instantanément.

Aperçu LIVE plein écran →

Les modifications de fond / variante / texte ne rechargent jamais ce cadre : elles manipulent directement son DOM.

05 · Doublons & dette (avant de figer le DS)
144 groupes de classes au corps identique
283 groupes de déclarations dupliqués dans les styles scoped (cross-fichiers)
11 tokens déclarés jamais consommés via var()
115 tokens dans le verrou (check:token-lock)

Verrou non-bloquant actif. Il passera bloquant via DS_TOKEN_LOCK_ENFORCE=1 quand le DS sera figé.

Tokens inutilisés (11)

--color-accent--color-accent-2--color-ink--color-ink-2--color-ink-3--color-muted--color-muted-2--color-paper--color-paper-2--color-paper-3--space-14

Classes au corps identique (144 groupes)

Corps CSS normalisé identique = candidates à la fusion avant de figer le DS.

  • .arr.case-row 
    color:var(--accent);font-family:var(--font-mono);font-size:var(--text-body-base);justify-self:end;opacity:0;transition:opacity var(--dur-hover), transform var(-…
  • .arr.case-row 
    opacity:1;transform:translateX(6px)
  • .arr.mega-link 
    color:var(--accent);flex:none;font-size:var(--text-body-sm)
  • .aside.sec-hd 
    color:var(--muted);font-size:clamp(13px, 1.3vw, 15px);line-height:var(--leading-relaxed);max-width:420px;text-wrap:pretty
  • .badge.k.mega-col-hd.mega-featured 
    color:var(--accent);font-family:var(--font-mono);font-size:var(--text-mono-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase
  • .bd.mega-featured 
    color:var(--muted);font-size:var(--text-ui);line-height:var(--leading-relaxed);max-width:280px
  • .blur-in.clip-up.hair-draw.hero-split.reveal.reveal-fade.reveal-stagger.reveal-up.row-lines.scale-in.w 
    clip-path:none !important;filter:none !important;opacity:1 !important;transform:none !important;transition:none !important;width:100% !important
  • .blur-in.in 
    filter:blur(0);opacity:1;transform:none
  • .book-lede.cases-client.home-typo.notes-row-text.qs-quote.sec-transition-phrase.social-proof__logo.sysarch-cap 
    font-family:var(--font-sans) !important;font-style:normal !important
  • .book-lede.home-typo.qs-quote.sysarch-cap 
    font-family:var(--font-display) !important;font-style:italic !important
  • .btn-ghost.btn-primary.is-active.page-pill-btn 
    background:var(--ink);color:var(--paper)
  • .btn-ghost.btn-primary.on-dark 
    background:var(--paper);color:var(--ink)
  • .btn-ghost.on-dark 
    border-color:var(--paper);color:var(--paper)
  • .btn-primary.on-dark 
    background:var(--accent);color:var(--paper)
  • .btn-spinner.marquee.track 
    animation:none
  • .btn.btn-link 
    box-shadow:0 12px 28px rgba(var(--ink-rgb), 0.10);transform:translateY(-1px)
  • .btn.case-body.editorial-body.lift.m-sheet.mega.mega-scrim.prose 
    transition:none !important
  • .btn.lift 
    box-shadow:none !important;transform:none !important
  • .btn.m-sheet-end 
    justify-content:center;width:100%
  • .burger.is-open 
    opacity:0
  • .burger.is-open 
    transform:translateY(-2.5px) rotate(-45deg)
  • .burger.is-open 
    transform:translateY(2.5px) rotate(45deg)
  • .caret.hdr-nav-item.hdr-nav-trigger.is-open 
    transform:rotate(180deg)
  • .caret.hdr-nav-trigger 
    display:inline-block;font-size:8px;opacity:0.55;transition:transform var(--dur-hover) var(--ease)
  • .case-body.editorial-body.prose 
    background-image:linear-gradient(var(--hairline-strong), var(--hairline-strong)), linear-gradient(var(--accent), var(--accent));background-position:0 100%, 100%…
  • .case-body.editorial-body.prose 
    background-position:0 100%, 0 100%;background-size:100% 1px, 100% 1px;color:var(--accent)
  • .case-row.client 
    font-family:var(--font-sans);font-size:clamp(22px, 2.8vw, 38px);font-weight:var(--fw-medium);letter-spacing:-0.018em;line-height:1.04
  • .case-row.client.dot.featured.hdr.m-sheet-acc-col.m-sheet-top.wm 
    color:var(--accent)
  • .case-row.client.e-title.editorial-cell.how-row.mega-featured.sec-hd.ttl.u-serif-accent.u-serif-accent-em 
    color:var(--accent);font-family:var(--font-display);font-style:italic;font-weight:var(--fw-regular)
  • .case-row.dur.sector 
    color:var(--muted);font-family:var(--font-mono);font-size:var(--text-eyebrow);letter-spacing:0.04em;text-transform:uppercase
  • .case-row.idx 
    color:var(--muted);font-family:var(--font-mono);font-size:var(--text-eyebrow);letter-spacing:var(--tracking-mono)
  • .case-row.impact 
    color:var(--ink-2);font-size:clamp(12px, 1.3vw, 14.5px);font-weight:var(--fw-medium)
  • .cases-client.home-typo.notes-row-text 
    font-weight:var(--fw-medium) !important
  • .cases-tbl.how-grid 
    border-top:1px solid var(--ink)
  • .cert.dot.trust-pill 
    background:var(--ink)
  • .clip-up.in 
    clip-path:inset(0 0 0 0)
  • .col-1.col-10.col-11.col-12.col-2.col-3.col-4.col-5.col-6.col-7.col-8.col-9.col-aside.col-full-bleed.col-prose.col-pull-left.col-pull-right 
    grid-column:1 / -1
  • .col-prose.col-pull-left.col-pull-right 
    grid-column:1 / span 8
  • .cols-2.cols-3.cols-4.cols-5.ec-grid 
    grid-template-columns:1fr
  • .cols-2.cols-3.cols-4.cols-5.ec-grid 
    grid-template-columns:repeat(2, 1fr)
  • .cols-3.ec-grid 
    grid-template-columns:repeat(3, 1fr)
  • .cols-4.ec-grid 
    grid-template-columns:repeat(4, 1fr)
  • .cols-5.ec-grid 
    grid-template-columns:repeat(5, 1fr)
  • .compliance.dot.trust-pill 
    background:#2aa876
  • .cta.hdr 
    align-items:center;background:var(--ink);border-radius:var(--radius-pill);color:var(--paper);display:inline-flex;font-size:var(--text-caption);font-weight:var(-…
  • .cta.hdr 
    background:var(--accent);box-shadow:var(--shadow-cta-hover);transform:translateY(-1px)
  • .cta.hdr-end.hdr-nav.page-pill-btn.page-pill-l.reveal-curtain 
    display:none
  • .cta.mega-featured 
    color:var(--accent);font-family:var(--font-mono);font-size:var(--text-eyebrow);letter-spacing:var(--tracking-mono);margin-top:6px
  • .desc.how-row 
    color:var(--muted);font-size:clamp(12px, 1.2vw, 14.5px);line-height:var(--leading-relaxed);text-wrap:pretty
  • .dot.trust-pill 
    background:var(--accent);border-radius:var(--radius-full);height:6px;width:6px
  • .e-body.editorial-cell 
    color:var(--muted);font-size:clamp(12px, 1.1vw, 13.5px);line-height:var(--leading-relaxed);text-wrap:pretty
  • .e-go.editorial-cell 
    color:var(--accent);font-family:var(--font-mono);font-size:var(--text-eyebrow);letter-spacing:0.1em;margin-top:var(--space-4)
  • .e-list.editorial-cell 
    align-items:center;color:var(--ink-2);display:flex;font-size:var(--text-caption);gap:var(--space-2)
  • .e-list.editorial-cell 
    border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:7px;list-style:none;margin-top:auto;padding-top:20px
  • .e-list.editorial-cell 
    color:var(--accent);content:"§";flex-shrink:0;font-family:var(--font-display);font-size:var(--text-ui);font-style:italic
  • .e-num.editorial-cell 
    color:var(--accent);font-family:var(--font-display);font-size:clamp(48px, 6vw, 88px);font-style:italic;letter-spacing:-0.03em;line-height:1
  • .e-tag.editorial-cell 
    color:var(--muted);font-family:var(--font-mono);font-size:var(--text-mono-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase
  • .e-title.editorial-cell 
    font-family:var(--font-sans);font-size:clamp(20px, 2.2vw, 30px);font-weight:var(--fw-medium);letter-spacing:-0.012em;line-height:var(--leading-h3);text-wrap:bal…
  • .e-title.editorial-cell.faq-accordion__arrow.faq-accordion__q.faq-accordion__q-label.home-typo 
    font-family:var(--font-sans) !important;font-weight:var(--fw-medium) !important
  • .ec-grid.editorial-cell 
    border-bottom:1px solid var(--hairline);border-right:1px solid var(--hairline)
  • .editorial-cell.sec-dark 
    background:rgba(var(--paper-rgb), 0.04)
  • .editorial-cell.sec-paper 
    background:var(--paper-2)
  • .flag.m-sheet-acc-col 
    background:rgba(var(--accent-rgb), 0.08);border-radius:var(--radius-pill);color:var(--accent);display:inline-block;font-family:var(--font-mono);font-size:var(--…
  • .flag.mega-link 
    background:rgba(var(--accent-rgb), 0.08);border-radius:var(--radius-pill);color:var(--accent);flex:none;font-family:var(--font-mono);font-size:var(--text-mono-x…
  • .g.m-sheet-acc-col 
    margin-bottom:0
  • .goal.mega-col-hd 
    font-size:var(--text-eyebrow)
  • .hair-draw.hdr-nav-trigger.in 
    width:100%
  • .hdr-nav-item.hdr-nav-trigger.is-open 
    background:rgba(var(--ink-rgb), 0.05);opacity:1
  • .hdr-nav-item.hdr-nav-trigger.row-lines 
    position:relative
  • .hdr-nav-trigger.is-active.page-pill-btn.page-pill-k 
    color:var(--accent);opacity:1
  • .hdr.is-scrolled 
    -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);background:rgba(var(--paper-rgb), 0.92);padding:10px 28px
  • .hdr.is-scrolled.wm 
    font-size:24px
  • .hdr.m-sheet-top.wm 
    color:var(--accent);font-style:italic
  • .hdr.wm 
    font-family:var(--font-display);font-size:28px;letter-spacing:-0.018em;transition:font-size var(--dur-base) var(--ease)
  • .home-typo.qs-quote 
    font-size:var(--text-h2-tight) !important
  • .how-row.m-sheet-acc-col 
    border-bottom:none
  • .how-row.num 
    color:var(--accent);font-family:var(--font-display);font-size:clamp(56px, 7vw, 96px);font-style:italic;letter-spacing:-0.026em;line-height:0.9
  • .how-row.ttl 
    font-family:var(--font-sans);font-size:clamp(22px, 2.5vw, 38px);font-weight:var(--fw-medium);letter-spacing:-0.015em;line-height:var(--leading-h3);text-wrap:bal…
  • .img.mega-featured 
    aspect-ratio:5/4;background:var(--paper-2);border:1px solid var(--hairline);margin-top:var(--space-2);overflow:hidden;position:relative
  • .img.mega-featured 
    height:100%;inset:0;object-fit:cover;position:absolute;width:100%
  • .in.is-visible.reveal-blur-clip 
    clip-path:inset(0 0 0 0);filter:blur(0);opacity:1;transform:translateY(0)
  • .in.is-visible.reveal-curtain 
    transform:scaleX(0)
  • .in.is-visible.reveal-mask-up.reveal-split-letter.s-char 
    opacity:1;transform:translateY(0)
  • .in.is-visible.reveal-stagger 
    transition-delay:660ms
  • .in.is-visible.reveal-stagger.row-lines 
    transition-delay:0ms
  • .in.is-visible.reveal-zoom-in 
    opacity:1;transform:scale(1)
  • .in.reveal-fade 
    opacity:1
  • .in.reveal-stagger 
    transition-delay:770ms
  • .in.reveal-stagger.reveal-up.scale-in 
    opacity:1;transform:none
  • .in.reveal-stagger.row-lines 
    transition-delay:110ms
  • .in.reveal-stagger.row-lines 
    transition-delay:330ms
  • .in.reveal-stagger.row-lines 
    transition-delay:440ms
  • .in.reveal-stagger.row-lines 
    transition-delay:550ms
  • .in.reveal-stagger.row-lines 
    transition-delay:var(--dur-trim)
  • .in.row-lines 
    transform:scaleX(1)
  • .is-open.m-sheet 
    transform:translateY(0)
  • .is-open.m-sheet-acc.m-sheet-acc-body 
    max-height:2200px
  • .is-open.m-sheet-acc.m-sheet-acc-head.plus 
    color:var(--accent);transform:rotate(45deg)
  • .is-open.mega 
    opacity:1;pointer-events:auto;transform:translateY(0)
  • .is-open.mega-scrim 
    opacity:1;pointer-events:auto
  • .is-visible.page-pill 
    opacity:1;pointer-events:auto;transform:none
  • .is-visible.reveal-stagger 
    transition-delay:120ms
  • .is-visible.reveal-stagger 
    transition-delay:180ms
  • .is-visible.reveal-stagger 
    transition-delay:240ms
  • .is-visible.reveal-stagger 
    transition-delay:300ms
  • .is-visible.reveal-stagger 
    transition-delay:360ms
  • .is-visible.reveal-stagger 
    transition-delay:420ms
  • .is-visible.reveal-stagger 
    transition-delay:480ms
  • .is-visible.reveal-stagger 
    transition-delay:540ms
  • .is-visible.reveal-stagger 
    transition-delay:600ms
  • .is-visible.reveal-stagger 
    transition-delay:60ms
  • .is-visible.reveal.reveal-stagger 
    filter:blur(0);opacity:1;transform:translateY(0)
  • .item.marquee 
    color:var(--ink);font-family:var(--font-display);font-size:clamp(22px, 2.4vw, 32px);font-style:italic;letter-spacing:-0.01em;padding:0 26px
  • .k.m-sheet-acc-col 
    color:var(--accent);font-family:var(--font-mono);font-size:var(--text-mono-xs);letter-spacing:var(--tracking-caps);margin-bottom:6px;text-transform:uppercase
  • .lang-toggle.on 
    color:var(--ink);font-weight:var(--fw-medium)
  • .lang-toggle.sep 
    opacity:0.35
  • .m-sheet-acc-col.q 
    border-left:2px solid var(--accent);color:var(--ink);font-family:var(--font-display);font-size:var(--text-body-sm);font-style:italic;line-height:var(--leading-l…
  • .m-sheet-acc-col.t 
    font-family:var(--font-sans);font-size:20px;font-weight:var(--fw-medium);letter-spacing:-0.008em;margin-bottom:10px
  • .m-sheet-acc-col.t 
    font-size:26px;margin-bottom:var(--space-1)
  • .m-sheet-acc-head.num 
    color:var(--muted);font-family:var(--font-mono);font-size:var(--text-mono-xs);letter-spacing:0.16em
  • .m-sheet-acc-head.plus 
    color:var(--muted);font-family:var(--font-mono);font-size:var(--text-body-base);transition:transform var(--dur-hover) var(--ease)
  • .m-sheet-acc-head.ttl 
    flex:1;font-family:var(--font-sans);font-size:clamp(30px, 6vw, 42px);font-weight:var(--fw-medium);letter-spacing:-0.018em;line-height:var(--leading-h2);padding-…
  • .m-sheet-top.wm 
    font-family:var(--font-display);font-size:26px
  • .marquee.sep 
    color:var(--muted);font-size:22px;font-style:normal;padding:0 var(--space-1)
  • .marquee.track 
    animation:slide 95s linear infinite;display:inline-flex
  • .mega-bottom.mega-col-footer 
    border-bottom-color:var(--accent);color:var(--accent)
  • .mega-col-hd.t 
    font-family:var(--font-sans);font-size:22px;font-weight:var(--fw-medium);letter-spacing:-0.01em;line-height:var(--leading-h3)
  • .mega-col.mega-col-hd 
    border-bottom:none;gap:var(--space-2);margin-bottom:var(--space-3);padding-bottom:0
  • .mega-col.mega-col-hd.t 
    font-size:34px;letter-spacing:-0.02em;line-height:1
  • .mega-col.mega-link 
    align-items:baseline;border-bottom-color:var(--hairline);display:flex;gap:10px;padding:11px 0
  • .mega-col.mega-link 
    border-bottom-color:transparent
  • .mega-col.mega-link 
    border-bottom-color:var(--hairline)
  • .mega-featured.ttl 
    color:var(--ink);font-family:var(--font-sans);font-size:38px;font-weight:var(--fw-medium);letter-spacing:-0.018em;line-height:1
  • .mega-link.sub 
    color:var(--muted);display:block;font-size:var(--text-eyebrow);font-weight:var(--fw-regular);line-height:var(--leading-lede);margin-top:3px
  • .mega-link.t 
    display:block;font-size:var(--text-body-sm);font-weight:450;letter-spacing:var(--tracking-body)
  • .n.sec-hd 
    align-items:center;color:var(--accent);display:flex;font-family:var(--font-mono);font-size:var(--text-mono-xs);gap:14px;letter-spacing:var(--tracking-caps);marg…
  • .on-dark.signature-grid 
    background-image:linear-gradient(to right, rgba(var(--accent-rgb), 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--accent-rgb), 0.1) 1px, tran…
  • .page-pill-btn.page-pill-k 
    color:inherit;font-weight:var(--fw-medium);opacity:0.7
  • .page-pill-btn.page-pill-l 
    color:inherit
  • .reveal-split-letter.s-char 
    display:inline-block;opacity:0;transform:translateY(105%);transition:opacity 520ms var(--ease-out, var(--ease-out)), transform 520ms var(--ease-out, var(--ease-…
  • .reveal.reveal-blur-clip.reveal-curtain.reveal-mask-up.reveal-split-letter.reveal-stagger.reveal-zoom-in.s-char 
    clip-path:none;filter:none;opacity:1;transform:none;transition:none
  • .roman.sec-hd 
    color:var(--accent);font-family:var(--font-display);font-size:clamp(22px, 2.4vw, 36px);font-style:italic;letter-spacing:-0.02em;line-height:1
  • .start-1.start-2.start-3.start-4.start-5.start-6.start-7.start-8 
    grid-column-start:auto
  • .u-serif.u-serif-em 
    font-family:var(--font-display);font-style:italic;font-weight:var(--fw-regular)