/* ==================================================
   CROSS PLATFORM — Main Stylesheet
   Fonts: Teachers (headings) | Neue Montreal (body)
   Colors: Blue #1679BD | Red #D81F09 | Black #000 | Silk #E9E9E9
   ================================================== */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Teachers:ital,wght@0,400..800;1,400..800&display=swap');

@font-face {
    font-family: 'Neue Montreal';
    font-weight: 300;
    font-style: normal;
    src: url('../fonts/neue-montreal/NeueMontreal-Light.otf') format('opentype');
}
@font-face {
    font-family: 'Neue Montreal';
    font-weight: 400;
    font-style: normal;
    src: url('../fonts/neue-montreal/NeueMontreal-Regular.otf') format('opentype');
}
@font-face {
    font-family: 'Neue Montreal';
    font-weight: 500;
    font-style: normal;
    src: url('../fonts/neue-montreal/NeueMontreal-Medium.otf') format('opentype');
}
@font-face {
    font-family: 'Neue Montreal';
    font-weight: 700;
    font-style: normal;
    src: url('../fonts/neue-montreal/NeueMontreal-Bold.otf') format('opentype');
}
@font-face {
    font-family: 'Neue Montreal';
    font-weight: 400;
    font-style: italic;
    src: url('../fonts/neue-montreal/NeueMontreal-Italic.otf') format('opentype');
}

/* ── Variables ── */
:root {
    --cp-blue:  #1D6FE0;
    --cp-red:   #E0301D;
    --cp-black: #0A0A0A;
    --cp-silk:  #F2F1FA;
    --cp-white: #ffffff;
}

/* ── Base ── */
.theme-demos { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: var(--cp-silk) !important;
    color: var(--cp-black);
    font-family: 'Neue Montreal', sans-serif;
    font-weight: 400;
    padding-top: 80px;
}

/* Pages where the hero sits flush behind a transparent navbar */
body.has-hero-nav {
    padding-top: 0;
}

/* ── Item 4 · §6 sticky sub-nav bar — the scrolled header state ──
   At the top of the page the navbar is transparent and the three elements
   float over the hero (the current layout). Once the hero is scrolled past,
   JS adds .cp-navbar--scrolled and the header consolidates into the §6 bar:
   a full-width ~52px surface with --glass-tint + the one blur recipe and a
   hairline bottom border, so nothing in the header ever overlaps page content.
   The surface lives on a ::before layer whose OPACITY fades in (450ms
   --ease-out) — backdrop-filter is constant, never animated (v2 §8). Padding
   and the logo transition on the same curve. */
.cp-navbar {
    transition: padding var(--dur-toggle) var(--ease-out);
}

.cp-navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-tint);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--color-border);
    opacity: 0;                       /* hero state: no bar */
    transition: opacity var(--dur-toggle) var(--ease-out);
    pointer-events: none;
    z-index: -1;                      /* behind the header content, above the page */
}

/* raise specificity over the base .cp-navbar padding (equal-specificity, later
   in source) so the bar actually compacts to ~52px */
.cp-navbar.cp-navbar--scrolled { padding: 4px 0; }
.cp-navbar--scrolled::before { opacity: 1; }

/* the CP mark scales to fit the bar height (transform only — no layout jump) */
.cp-navbar-brand img {
    transition: transform var(--dur-toggle) var(--ease-out);
    transform-origin: left center;
}
.cp-navbar--scrolled .cp-navbar-brand img { transform: scale(0.82); }

/* Glass ration (§6/§9): the bar is the ONE glass element, so the nav pill and
   the book-a-call CTA drop their own frost while scrolled — a viewport then
   shows at most two glass surfaces (the bar + the closing-CTA pill). The active
   link keeps its solid-white inner pill (§6). */
.cp-navbar--scrolled .cp-nav-links {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: transparent;
}
.cp-navbar--scrolled .btn-book-call {
    background: var(--color-dark);
    color: var(--color-text-inverse);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: transparent;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Teachers', sans-serif !important;
    font-weight: 700;
}

p, a, li, span, label, input, textarea, button {
    font-family: 'Neue Montreal', sans-serif;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

/* ── Navbar ── */
.cp-navbar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
    padding: 12px 0;
}

.cp-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cp-navbar-brand img {
    height: 46px;
    width: auto;
    display: block;
}

/* ── Floating pill nav ── */
.cp-nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 5px 8px 5px 5px;
    gap: 2px;
    background: #ffffff;
    border-radius: 52px;
    box-shadow: 0px 22px 81px 0px rgba(0,0,0,0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.cp-nav-links li { display: flex; }

.cp-nav-links a {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: 'Neue Montreal', sans-serif;
    font-weight: 400;
    color: var(--cp-black);
    padding: 7px 12px;
    border-radius: 34px;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out);
}

.cp-nav-links a:hover { background: rgba(0,0,0,0.04); }

.cp-nav-links a.active {
    background: #f9f7ff;
    padding: 7px 16px;
    font-weight: 500;
    color: var(--cp-black);
}

.btn-book-call {
    font-size: 15px;
    font-family: 'Neue Montreal', sans-serif;
    font-weight: 400;
    color: var(--cp-black);
    border: none;
    border-radius: 32px;
    padding: 10px 24px;
    background: #ffffff;
    transition: background var(--dur-fast) var(--ease-out);
    white-space: nowrap;
    cursor: pointer;
}

.btn-book-call:hover { background: var(--cp-silk); }

.cp-navbar-toggler {
    display: none;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.cp-navbar-toggler span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--cp-black);
    transition: all 0.3s;
    border-radius: 2px;
}

.cp-navbar-toggler.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cp-navbar-toggler.open span:nth-child(2) { opacity: 0; }
.cp-navbar-toggler.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.cp-mobile-menu {
    display: none;
    position: fixed;
    top: 70px; left: 0;
    width: 100%;
    background: rgba(233,233,233,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 999;
    padding: 10px 20px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.cp-mobile-menu.open { display: block; }

.cp-mobile-menu ul {
    list-style: none;
    margin: 0; padding: 0;
}

.cp-mobile-menu ul li {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.cp-mobile-menu ul li a {
    display: block;
    padding: 14px 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--cp-black);
}

.cp-mobile-menu .btn-book-call {
    display: block;
    text-align: center;
    margin-top: 16px;
}

/* ── Shared Section Styles ── */
.cp-section { padding: 80px 0; }
.cp-section-sm { padding: 50px 0; }

.section-label {
    font-family: 'Neue Montreal', sans-serif !important;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--cp-black);
    margin-bottom: 30px;
    display: block;
}

/* ── Circular Arrow Button (§7.1 black circle: white ↗, 52px, opacity hover) ── */
.circle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    background: var(--color-dark);
    color: #fff;
    font-size: 21px; /* arrow ~40% of diameter */
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
}

.circle-btn:hover { opacity: 0.85; }

.circle-btn-lg {
    width: 72px;
    height: 72px;
    min-width: 72px;
}

/* ── Hero Section (Home) ── */
.hero-section {
    padding: 40px 0 0;
}

.hero-headline-wrap {
    display: flex;
    flex-direction: column;
    gap: 28px;
    justify-content: flex-end;
    min-height: 460px;
    padding-bottom: 0;
}

.hero-headline {
    font-family: 'Teachers', sans-serif !important;
    font-weight: 400;
    font-size: clamp(3.5rem, 8vw, 7rem);
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--cp-black);
    margin: 0;
    letter-spacing: -0.04em;
    max-width: 1106px;
}

.hero-cta-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-hero-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-black);
    color: var(--cp-white);
    font-family: 'Neue Montreal', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 0.97;
    padding: 18px 28px;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out);
}

.btn-hero-call:hover {
    background: var(--cp-blue);
    color: var(--cp-white);
}

/* Hero projects strip (Figma Home, docs/cp-designs): a left-aligned row of
   landscape site cards that starts on the container edge and bleeds off the
   right of the viewport. Native horizontal scroll, no carousel library. */
.hero-projects-section {
    padding: 50px 0 0;
}

.hero-strip {
    /* Bleed to both viewport edges so drifting cards leave and enter at the
       screen edge, not the container's. The script starts the first card on
       the container's left edge. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
}
.hero-strip::-webkit-scrollbar { display: none; }
.hero-strip.is-dragging { cursor: grabbing; }
.hero-strip img { -webkit-user-drag: none; user-select: none; }

/* Two identical sets side by side: the script wraps position by one set
   width, so the loop has no seam. Spacing is a right margin on each card
   (not gap) so both halves are exactly the same width. */
.hero-strip-track,
.hero-strip-set {
    display: flex;
    width: max-content;
}

.hero-strip:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 4px;
}

/* ── Self-scrolling site card: a white frame inset around the screenshot on
   top and sides, flush at the bottom (Figma). The tall full-page screenshot
   drifts inside the viewport (motion2.js). Fail-visible: with no JS the shot
   rests at its top edge. ── */
.hero-carousel-card {
    flex: 0 0 auto;
    width: min(69vw, 1000px);
    /* Figma inset: ~3.4% of the card top, ~4.6% each side, flush bottom */
    padding: clamp(0.75rem, 2.4vw, 2.125rem) clamp(1rem, 3.2vw, 2.875rem) 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-none);
    margin-right: 2rem;
}

.scrolling-site-viewport {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    max-height: 64vh;
    overflow: hidden;
    background: var(--color-recessed);
}

/* The tall screenshot: full card width, natural height, driven on the y axis */
.scrolling-site-shot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    will-change: transform;
}

@media (max-width: 768px) {
    .hero-carousel-card { width: 84vw; margin-right: 1rem; }
}

/* ── Services Section ── */
.services-section {
    padding: 80px 0;
}

.services-heading {
    font-family: 'Teachers', sans-serif !important;
    font-weight: 700;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--cp-black);
    letter-spacing: -0.02em;
    margin-bottom: 40px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* ── Service Cards ── */
.service-card {
    background: var(--cp-white);
    height: 604px;
    padding: 50px 50px 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.service-card-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
}

.service-card-title {
    font-family: 'Teachers', sans-serif !important;
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.78px;
    color: var(--cp-black);
    margin: 0;
}

.service-card-desc {
    font-family: 'Neue Montreal', sans-serif;
    font-size: 15px;
    line-height: 1.29;
    color: var(--cp-black);
    margin: 0;
}

.service-card-illustration {
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
}

.service-card-illustration img {
    display: block;
    width: 243px;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom;
}

/* ── Works Section ── */
.works-section {
    padding: 80px 0;
}

.works-heading {
    font-family: 'Teachers', sans-serif !important;
    font-weight: 700;
    font-size: 80px;
    line-height: 0.89;
    text-transform: uppercase;
    color: var(--cp-black);
    letter-spacing: -3.2px;
    margin-bottom: 40px;
}

.works-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* ── Work Card ── */
.work-card {
    background: var(--cp-white);
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.work-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.10);
}

.work-card-img-wrap {
    display: block;
    height: 506px;
    overflow: hidden;
    background: #f9f7ff;
    flex-shrink: 0;
}

.work-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-reveal) var(--ease-out);
}

.work-card-img--placeholder {
    background: #ebebeb;
    height: 100%;
}

/* §7.3 image card: the image breathes inside its mask; the frame stays planted */
.work-card:hover .work-card-img {
    transform: scale(1.04);
}

.work-card-body {
    padding: 24px 34px 41px 51px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-grow: 1;
}

.work-card-info {
    flex: 1;
}

.work-card-title {
    font-family: 'Teachers', sans-serif !important;
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -1.04px;
    line-height: 0.89;
    color: var(--cp-black);
    margin: 0 0 8px;
}

.work-card-desc {
    font-size: 15px;
    color: var(--cp-black);
    margin: 0;
    line-height: 1.29;
    letter-spacing: -0.15px;
}

/* ── Testimonials Section ── */
.testimonials-section {
    padding: 80px 0;
}

.testimonials-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
    gap: 20px;
}

.testimonials-heading {
    font-family: 'Teachers', sans-serif !important;
    font-weight: 700;
    font-size: 80px;
    line-height: 0.89;
    text-transform: uppercase;
    color: var(--cp-black);
    letter-spacing: -3.2px;
    margin: 0;
}

.testimonials-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.testimonial-nav-btn {
    background: var(--color-dark);
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    font-size: 21px;
    transition: opacity var(--dur-fast) var(--ease-out);
}

.testimonial-nav-btn:hover { opacity: 0.85; }

/* ── Testimonial Cards ── */
.testimonial-card {
    background: var(--cp-white);
    border-radius: 0;
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 420px;
}

.testimonial-text {
    font-family: 'Teachers', sans-serif !important;
    font-size: 22px;
    line-height: 1.4;
    color: var(--cp-black);
    flex-grow: 1;
    margin: 0 0 48px;
}

.testimonial-author {
    margin-top: auto;
}

.testimonial-author-name {
    font-family: 'Teachers', sans-serif !important;
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 3px;
    color: var(--cp-black);
}

.testimonial-author-role {
    font-family: 'Neue Montreal', sans-serif;
    font-size: 13px;
    color: #888;
    margin: 0;
}

/* Owl overrides for testimonials */
.testimonials-section .owl-stage-outer { overflow: visible !important; }
.testimonials-section .owl-dots { display: none; }
.testimonials-section .owl-nav { display: none; }
.testimonials-section .container { overflow: hidden; }

/* ── FAQ Section ── */
.faq-section { padding: 80px 0; }

.faq-heading {
    font-size: 80px;
    font-weight: 700;
    font-family: 'Teachers', sans-serif;
    text-transform: uppercase;
    letter-spacing: -3.2px;
    line-height: 0.89;
    color: var(--cp-black);
    margin: 0 0 55px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* §7.3 FAQ row: 1px top/bottom hairlines */
.faq-item {
    background: #fff;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 34px 24px 59px;
    cursor: pointer;
    user-select: none;
    gap: 20px;
}

.faq-question-text {
    font-size: 20px;
    font-weight: 700;
    font-family: 'Neue Montreal', sans-serif;
    letter-spacing: -0.8px;
    color: var(--cp-black);
    margin: 0;
}

.faq-toggle {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background: var(--cp-black);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.faq-toggle svg {
    transition: transform var(--dur-fast) var(--ease-out);
}

.faq-item.open .faq-toggle svg {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 34px 0 59px;
    font-size: 19.5px;
    line-height: 1.345;
    font-family: 'Neue Montreal', sans-serif;
    color: var(--cp-black);
    transition: max-height var(--dur-toggle) var(--ease-inout), padding var(--dur-toggle) var(--ease-inout);
}

.faq-item.open .faq-answer {
    max-height: 600px;
    padding: 0 34px 40px 59px;
}

/* ── CTA Section ── */
.cta-section { padding: 120px 0 160px; }

.cta-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.cta-headline {
    font-family: 'Teachers', sans-serif;
    font-weight: 400;
    font-size: clamp(3.5rem, 8vw, 7rem);
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--cp-black);
    margin: 0;
    letter-spacing: -0.04em;
    text-align: center;
}

.cta-btn-col {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Closing CTA circle (§7.1 blue circle, §7.4) */
.cta-circle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-blue);
    color: #fff;
    font-size: 21px;
    transition: background var(--dur-fast) var(--ease-out);
}

.cta-circle-btn:hover { background: var(--color-blue-deep); }

/* ── About Hero ── */
.about-hero-section { padding: 0; margin-bottom: 80px; }

.about-hero-wrap {
    position: relative;
    height: 95vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.about-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 73%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 48px;
    gap: 36px;
}

.about-hero-overlay h1 {
    font-family: 'Teachers', sans-serif;
    font-weight: 700;
    font-size: 72px;
    line-height: 0.95;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    letter-spacing: -2.5px;
    max-width: 800px;
    animation: aboutHeroSlideUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

@keyframes aboutHeroSlideUp {
    from { opacity: 0; transform: translateY(36px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero scroll button: glass-dark ↓ circle (§7.1, §7.4) ── */
.about-scroll-btn {
    display: flex;
    justify-content: center;
    animation: scrollBounce 1.8s var(--ease-inout) infinite;
}

.about-scroll-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--glass-dark);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    font-size: 21px;
    transition: background var(--dur-fast) var(--ease-out);
}

.about-scroll-btn:hover .about-scroll-circle { background: rgba(10, 10, 10, 0.67); }

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(10px); }
}

/* ── Approach Section ── */
.approach-section { padding: 80px 0; position: relative; overflow: hidden; }

.approach-heading {
    font-size: 80px;
    font-weight: 700;
    font-family: 'Teachers', sans-serif;
    text-transform: uppercase;
    letter-spacing: -3.2px;
    line-height: 0.89;
    color: var(--cp-black);
    margin: 0 0 55px;
}

/* ── Approach grid wrapper ── */
.approach-grid-wrap {
    position: relative;
}

.approach-vector {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.9;
}

.approach-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* ── Approach Card ── */
.approach-card {
    position: relative;
    background: var(--cp-white);
    padding: 48px 44px 52px;
    transition: background var(--dur-fast) var(--ease-out);
}

.approach-icon-box {
    width: 53px;
    height: 53px;
    margin-bottom: 28px;
    flex-shrink: 0;
}

.approach-icon-box img {
    width: 53px;
    height: 53px;
    display: block;
}

.approach-card h4 {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Neue Montreal', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cp-black);
    margin: 0 0 16px;
    transition: color var(--dur-fast) var(--ease-out);
}

.approach-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin: 0;
    transition: color var(--dur-fast) var(--ease-out);
}

/* ── Card hover: white → blue ── */
.approach-card:hover { background: var(--cp-blue); }
.approach-card:hover h4 { color: #fff; }
.approach-card:hover p  { color: rgba(255,255,255,0.85); }

/* ── Card entrance animation (v2 §8.2 fail-visible: hidden only under html.js-reveal) ── */
.js-reveal .approach-card[data-animate] {
    opacity: 0;
    transform: translateY(40px);
    transition: background var(--dur-fast) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.js-reveal .approach-card[data-animate].in-view {
    opacity: 1;
    transform: translateY(0);
}

.js-reveal .approach-card[data-animate]:nth-child(2) { transition-delay: 0.1s; }
.js-reveal .approach-card[data-animate]:nth-child(3) { transition-delay: 0.2s; }
.js-reveal .approach-card[data-animate]:nth-child(4) { transition-delay: 0.3s; }

/* ── Creative Solutions (dark) ── */
/* ══ Mission & Vision ══ */
.mv-section {
    background: var(--cp-black);
    padding: 80px 0 80px;
}

.mv-header {
    margin-bottom: 48px;
}

.mv-badge {
    display: inline-flex;
    align-items: center;
    background: var(--cp-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 18px;
    border-radius: 24px;
    margin-bottom: 24px;
    font-family: 'Neue Montreal', sans-serif;
}

.mv-heading {
    font-family: 'Teachers', sans-serif;
    font-size: 80px;
    font-weight: 700;
    color: var(--cp-white);
    text-transform: uppercase;
    letter-spacing: -3.2px;
    line-height: 0.92;
    margin: 0;
}

.mv-image-wrap {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin-bottom: 20px;
}

.mv-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.mv-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 36px 48px;
    max-width: 480px;
}

.mv-image-overlay h3 {
    font-family: 'Teachers', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
    line-height: 1.3;
}

.mv-image-overlay p {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    margin: 0;
    line-height: 1.65;
}

.mv-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.mv-card {
    padding: 70px;
}

.mv-card--white { background: #fff; }
.mv-card--blue  { background: var(--cp-blue); }

.mv-pill {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 18px;
    border-radius: 24px;
    margin-bottom: 24px;
    font-family: 'Neue Montreal', sans-serif;
}

.mv-pill--blue { background: var(--cp-blue); color: #fff; }
.mv-pill--red  { background: #E84B3C; color: #fff; }

.mv-card h3 {
    font-family: 'Teachers', sans-serif;
    font-size: 36px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 16px;
}

.mv-card--white h3 { color: var(--cp-black); }
.mv-card--blue  h3 { color: #fff; }

.mv-card p {
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

.mv-card--white p { color: #555; }
.mv-card--blue  p { color: rgba(255,255,255,0.85); }

/* ── Team Section ── */
.team-section {
    padding: 80px 0;
}

.team-section-header {
    margin-bottom: 20px;
}

.team-section-title {
    font-family: 'Teachers', sans-serif !important;
    font-weight: 700;
    font-size: 80px;
    line-height: 0.89;
    text-transform: uppercase;
    color: var(--cp-black);
    margin: 0;
    letter-spacing: -3.2px;
}

.team-grid {
    display: flex;
    gap: 20px;
}

.team-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.team-card-photo {
    width: 100%;
    height: 388px;
    overflow: hidden;
    flex-shrink: 0;
}

.team-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.team-card:hover .team-card-photo img {
    transform: scale(1.06);
}

.team-card-info {
    background: #fff;
    border-bottom: 3px solid var(--cp-blue);
    padding: 32px;
}

.team-card-info h5 {
    font-family: 'Neue Montreal', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--cp-black);
    margin: 0 0 2px;
    letter-spacing: -0.15px;
}

.team-card-info p {
    font-family: 'Neue Montreal', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--cp-black);
    margin: 0;
    letter-spacing: -0.15px;
}

.team-card-placeholder {
    width: 100%;
    height: 388px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.team-card-placeholder i {
    font-size: 48px;
    color: #bbb;
}

/* ── Works Page ── */
body.page-works {
    background: #f9f7ff;
}

.works-hero-section {
    padding: 120px 0 40px;
}

.works-grid-section {
    padding: 40px 0 100px;
}

.works-page-headline {
    font-family: 'Teachers', sans-serif !important;
    font-weight: 700;
    font-size: 80px;
    line-height: 0.89;
    text-transform: uppercase;
    color: var(--cp-black);
    margin-bottom: 0;
    letter-spacing: -3.2px;
    max-width: 810px;
    animation: worksHeadlineSlideUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@keyframes worksHeadlineSlideUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Works Detail Page ── */
.work-detail-section { padding-top: 120px; }

.work-detail-header {
    display: flex;
    align-items: center;
    gap: 23px;
    margin-bottom: 40px;
}

.work-detail-title {
    font-family: 'Teachers', sans-serif !important;
    font-weight: 700;
    font-size: clamp(32px, 4.5vw, 72px);
    line-height: 0.89;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    color: var(--cp-black);
    margin: 0;
    flex: 1;
    word-break: break-word;
}

.work-meta-box {
    background: var(--cp-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 60px;
    min-width: 500px;
    height: 156px;
    flex-shrink: 0;
    gap: 24px;
}

.work-meta-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.work-meta-label {
    font-size: 16px;
    letter-spacing: -0.48px;
    line-height: 0.97;
    color: var(--cp-black);
    font-weight: 400;
}

.work-meta-value {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.6px;
    line-height: 0.97;
    color: var(--cp-black);
}

.work-meta-value a {
    color: var(--cp-black);
    text-decoration: underline;
}

.work-detail-cover-wrap {
    width: 100%;
    height: 658px;
    overflow: hidden;
    background: #ebebeb;
    margin-bottom: 60px;
}

.work-detail-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.work-description-section { padding: 60px 0 100px; }

.work-section-heading {
    font-family: 'Teachers', sans-serif !important;
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -1.04px;
    line-height: 1.29;
    color: var(--cp-black);
    margin: 0 0 8px;
}

.work-description-text {
    font-size: 15px;
    line-height: 1.29;
    letter-spacing: -0.15px;
    color: var(--cp-black);
    max-width: 470px;
    margin: 0;
}

.work-gallery-section { padding-bottom: 80px; }

.work-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 22px 30px;
}

.work-gallery-item { width: 100%; }

.work-gallery-item--half {
    flex: 0 0 calc(50% - 15px);
    width: calc(50% - 15px);
}

.work-gallery-img-wrap {
    width: 100%;
    height: 658px;
    overflow: hidden;
    background: #ebebeb;
}

.work-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Contact Page (2026-10 rebuild, v2 §7.3 contact info card + §7.4 brand block) ── */
.contact-hero { padding: var(--space-block) 0 var(--space-section); }

/* Intro column (headline, lead, card) beside the brand block, which
   stretches to the column's full height. */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-grid-gap);
    align-items: stretch;
}

.contact-headline { margin: 0 0 1.5rem; }

.contact-lead {
    font-size: var(--text-lead);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-text-muted);
    max-width: 34ch;
    margin: 0 0 var(--space-block);
}

/* §7.3 contact info card: one white sharp card, hairline frame, rows
   split by hairlines. Linked rows respond with the surface-card hover. */
.contact-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-none);
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: var(--space-card-pad);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out);
}
.contact-row + .contact-row { border-top: 1px solid var(--color-border); }
a.contact-row:hover { background: var(--color-recessed); color: var(--color-text); }
a.contact-row:focus-visible { outline: 2px solid var(--color-blue); outline-offset: -2px; }

.contact-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-icon);
    background: var(--color-dark);
    color: var(--color-text-inverse);
}
.contact-chip svg { width: 22px; height: 22px; }

.contact-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }

.contact-row-label {
    font-size: var(--text-small);
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text-muted);
}

.contact-row-value {
    font-size: var(--text-lead);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.contact-row-arrow {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    transition: transform var(--dur-fast) var(--ease-out);
}
a.contact-row:hover .contact-row-arrow { transform: translate(2px, -2px); }

/* §7.4 brand block: solid blue, sharp, decorative counterweight. The mark
   bleeds off the bottom-right edge. */
.contact-brand {
    position: relative;
    overflow: hidden;
    min-height: 26rem;
    margin: 0;
    background: var(--color-blue);
    border-radius: var(--radius-none);
}

.contact-brand-mark {
    position: absolute;
    right: -22%;
    bottom: -14%;
    width: 120%;
    aspect-ratio: 1067 / 713;   /* favicon.png */
    background: var(--color-blue-deep);
    -webkit-mask: url('../../images/favicon.png') center / contain no-repeat;
            mask: url('../../images/favicon.png') center / contain no-repeat;
}

/* The mark's own dot, re-coloured red at its measured spot in favicon.png */
.contact-brand-dot {
    position: absolute;
    left: 71.9%;
    top: 41.4%;
    width: 15.7%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-red);
    transform: translate(-50%, -50%);
}

/* §D.3 mono metadata on blue (white on #1D6FE0 holds 4.6:1) */
.contact-brand-meta {
    position: absolute;
    top: var(--space-card-pad);
    left: var(--space-card-pad);
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-inverse);
}

/* Act 2: the white band */
.contact-steps {
    background: var(--color-surface);
    padding: var(--space-section) 0;
}

.contact-price {
    font-size: var(--text-lead);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-text-muted);
    max-width: 44ch;
    margin: var(--space-block) 0 0;
}
.contact-price strong { font-weight: 600; color: var(--color-text); }

@media (max-width: 992px) {
    .contact-grid { grid-template-columns: minmax(0, 1fr); }
    .contact-brand { min-height: 0; aspect-ratio: 4 / 3; }
}

@media (max-width: 576px) {
    .contact-row { gap: 1rem; padding: 1.25rem; }
    .contact-row-value { font-size: var(--text-body); font-weight: 500; }
}

/* ── Footer ── */
.cp-footer {
    background-color: var(--cp-silk);
    padding: 36px 0;
}

.cp-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.cp-footer-logo img {
    height: 46px;
    width: auto;
    display: block;
}

.cp-footer-nav {
    display: flex;
    list-style: none;
    margin: 0; padding: 0;
    gap: 0;
}

.cp-footer-nav a {
    display: block;
    padding: 10px 20px;
    font-size: 15px;
    font-family: 'Neue Montreal', sans-serif;
    font-weight: 500;
    color: var(--cp-black);
    transition: color 0.2s;
    white-space: nowrap;
}

.cp-footer-nav a:hover { color: var(--cp-blue); }

.cp-footer-socials {
    display: flex;
    align-items: center;
    gap: 23px;
}

.cp-footer-socials a {
    color: var(--cp-black);
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.cp-footer-socials a:hover { color: var(--cp-blue); }

/* Scroll reveals: single canonical block lives in the §8 Motion section below
   (§8.2 fail-visible — hidden states only ever apply under html.js-reveal). */

/* ═══════════════════════════════════════════════════════
   Productized service pages
   (Designs gallery · Pricing · Process · Care plans · Intake)
═══════════════════════════════════════════════════════ */

:root {
    /* Borders do the work; shadows are retired per the approved design language */
    --cp-shadow-rest: none;
    --cp-shadow-lift: none;
    --cp-hairline: 1px solid rgba(10, 10, 10, 0.12);
}

/* ── Shared page hero ── */
.page-hero {
    padding: 84px 0 30px;
    position: relative;
    overflow: hidden;
}

.page-hero .container { position: relative; }

/* Giant outlined ghost word behind the headline */
.page-ghost {
    position: absolute;
    top: -58px;
    left: -6px;
    font-family: 'Teachers', sans-serif;
    font-weight: 800;
    font-size: 200px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -6px;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(9, 46, 71, 0.09);
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
}

@supports not (-webkit-text-stroke: 1px black) {
    .page-ghost { color: rgba(9, 46, 71, 0.05); }
}

.page-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--cp-blue);
    margin: 0 0 22px;
    position: relative;
}

.page-kicker::before {
    content: '';
    width: 34px;
    height: 2px;
    background: var(--cp-blue);
}

.page-headline {
    font-family: 'Teachers', sans-serif !important;
    font-weight: 800;
    font-size: clamp(3.5rem, 8vw, 7rem);
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--cp-black);
    letter-spacing: -0.04em;
    margin: 0 0 24px;
    text-wrap: balance;
    position: relative;
}

.page-lead {
    font-size: 0.85rem;
    line-height: 1.7;
    color: rgba(10, 10, 10, 0.65);
    max-width: 60ch;
    margin: 0;
    text-wrap: pretty;
    position: relative;
}

/* ── Shared buttons — one pill system, matching the nav/hero pills.
     Rule: primary = solid black pill, secondary = hairline pill,
     icon = solid circle with arrow. Nothing else. ── */
.btn-cp-solid,
.btn-cp-line,
.btn-cp-inverse {
    display: inline-block;
    font-family: 'Neue Montreal', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-decoration: none;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid var(--cp-black);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    cursor: pointer;
}

.btn-cp-solid,
.btn-cp-inverse { background: var(--cp-black); color: var(--cp-white); }
.btn-cp-solid:hover,
.btn-cp-inverse:hover { background: var(--cp-blue); border-color: var(--cp-blue); color: var(--cp-white); }

.btn-cp-line { background: transparent; color: var(--cp-black); border-color: rgba(10, 10, 10, 0.3); }
.btn-cp-line:hover { border-color: var(--cp-black); background: var(--cp-white); color: var(--cp-black); }

.btn-cp-solid:active,
.btn-cp-line:active,
.btn-cp-inverse:active { transform: translateY(1px) scale(0.98); }

.btn-cp-lg { padding: 13px 30px; font-size: 14px; }

/* Circular icon button — identical diameter everywhere it appears */
.btn-cp-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cp-blue);
    color: var(--cp-white);
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.btn-cp-circle:hover { background: var(--cp-black); color: var(--cp-white); transform: translateY(-2px); }
.btn-cp-circle:active { transform: translateY(0) scale(0.96); }
.btn-cp-circle--dark { background: var(--cp-black); }
.btn-cp-circle--dark:hover { background: var(--cp-blue); }

.btn-cp-solid:focus-visible,
.btn-cp-line:focus-visible,
.btn-cp-inverse:focus-visible { outline: 3px solid var(--cp-blue); outline-offset: 3px; }

/* ── Small-caps kicker (shared) ── */
.tier-kicker,
.page-cta-kicker {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 10px;
}

/* ── Designs gallery ── */
.tpl-section { padding: 30px 0 90px; }

.tpl-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 44px;
}

.tpl-filter-btn {
    font-family: 'Neue Montreal', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    background: transparent;
    color: var(--cp-black);
    border: 1px solid rgba(10, 10, 10, 0.3);
    border-radius: 999px;
    padding: 9px 20px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.tpl-filter-btn:hover { border-color: var(--cp-black); background: var(--cp-white); }
.tpl-filter-btn.active { background: var(--cp-black); color: var(--cp-white); }
.tpl-filter-btn:focus-visible { outline: 3px solid var(--cp-blue); outline-offset: 3px; }

.tpl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.tpl-card {
    background: var(--cp-white);
    display: flex;
    flex-direction: column;
    border: var(--cp-hairline);
    box-shadow: var(--cp-shadow-rest);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.tpl-card:hover { transform: translateY(-6px); box-shadow: var(--cp-shadow-lift); }

.tpl-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    text-decoration: none;
    position: relative;
}

.tpl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Flat tier-colored placeholder blocks with a subtle diagonal texture */
.tpl-thumb--starter  { background: var(--cp-blue); }
.tpl-thumb--standard { background: var(--cp-black); }
.tpl-thumb--premium  { background: var(--cp-red); }

.tpl-thumb--starter::after,
.tpl-thumb--standard::after,
.tpl-thumb--premium::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.05) 0px,
        rgba(255, 255, 255, 0.05) 2px,
        transparent 2px,
        transparent 14px
    );
}

.tpl-thumb-name {
    font-family: 'Teachers', sans-serif;
    font-weight: 800;
    font-size: 44px;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: var(--cp-white);
    position: relative;
    z-index: 1;
}

.tpl-body {
    padding: 30px 30px 34px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tpl-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.tpl-name {
    font-family: 'Teachers', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
    color: var(--cp-black);
}

.tpl-tier-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 5px 12px;
    border: 1.5px solid;
    white-space: nowrap;
}

.tpl-tier-badge--starter  { color: var(--cp-blue); border-color: var(--cp-blue); }
.tpl-tier-badge--standard { color: var(--cp-black); border-color: var(--cp-black); }
.tpl-tier-badge--premium  { color: var(--cp-red); border-color: var(--cp-red); }

.tpl-band {
    font-family: 'Teachers', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--cp-blue);
    margin: 0 0 14px;
    font-variant-numeric: tabular-nums;
}

.tpl-summary {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(10, 10, 10, 0.65);
    max-width: 60ch;
    margin: 0 0 18px;
}

.tpl-features {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
}

.tpl-features li {
    font-size: 0.85rem;
    color: var(--cp-black);
    padding: 7px 0 7px 22px;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.tpl-features li::before {
    content: '+';
    position: absolute;
    left: 0;
    color: var(--cp-blue);
    font-weight: 700;
}

.tpl-actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.tpl-soon {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #888;
    border: 1.5px dashed #aaa;
    padding: 10px 16px;
}

.tpl-empty { font-size: 0.85rem; color: rgba(10, 10, 10, 0.65); }
.tpl-empty a { color: var(--cp-blue); }

/* ── Shared bottom CTA: black panel, grain, blue wash ── */
.page-cta { padding: 50px 0 110px; }

.page-cta-panel {
    background: var(--cp-black);
    color: var(--cp-white);
    padding: 90px 72px;
    position: relative;
}

.page-cta-panel .page-cta-kicker { color: rgba(255, 255, 255, 0.55); }

.page-cta-headline {
    font-family: 'Teachers', sans-serif !important;
    font-weight: 800;
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    color: var(--cp-white);
    margin: 0 0 36px;
    text-wrap: balance;
    max-width: 900px;
}

.page-cta-panel .btn-cp-solid {
    background: var(--cp-white);
    color: var(--cp-black);
    border-color: var(--cp-white);
}

.page-cta-panel .btn-cp-solid:hover {
    background: var(--cp-blue);
    color: var(--cp-white);
    border-color: var(--cp-blue);
}


/* ── Pricing tiers ── */
.tier-section { padding: 30px 0 90px; }

.tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    align-items: stretch;
    margin-bottom: 26px;
}

.tier-card {
    background: var(--cp-white);
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
    position: relative;
    border: var(--cp-hairline);
    box-shadow: var(--cp-shadow-rest);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.tier-card:hover { transform: translateY(-6px); box-shadow: var(--cp-shadow-lift); }

/* Ghost index numeral per tier card */
.tier-index {
    position: absolute;
    top: 26px;
    right: 30px;
    font-family: 'Teachers', sans-serif;
    font-weight: 800;
    font-size: 64px;
    line-height: 1;
    letter-spacing: -2px;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(9, 46, 71, 0.12);
    pointer-events: none;
}

@supports not (-webkit-text-stroke: 1px black) {
    .tier-index { color: rgba(9, 46, 71, 0.07); }
}

/* Featured tier stays flat white; a blue hairline and the flag carry the emphasis */
.tier-card--featured { background: var(--cp-white); border: 1px solid var(--cp-blue); }

.tier-flag {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--cp-blue);
    color: var(--cp-white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 8px 16px;
}

.tier-band {
    font-family: 'Teachers', sans-serif;
    font-weight: 800;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    letter-spacing: -0.02em;
    color: var(--cp-black);
    margin: 0 0 12px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tier-summary {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(10, 10, 10, 0.65);
    max-width: 60ch;
}

.tier-band-sep { padding: 0 4px; color: var(--cp-blue); }

.tier-summary { margin: 0 0 22px; }

.tier-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.tier-features li {
    font-size: 0.85rem;
    color: var(--cp-black);
    padding: 8px 0 8px 22px;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.tier-features li::before {
    content: '+';
    position: absolute;
    left: 0;
    color: var(--cp-blue);
    font-weight: 700;
}

.tier-designs { font-size: 0.8rem; color: rgba(10, 10, 10, 0.55); margin: 0 0 24px; }
.tier-designs a { color: var(--cp-black); }

.tier-cta { margin-top: auto; text-align: center; }

/* ── Care plan strip (pricing page) ── */
.care-strip {
    background: var(--cp-white);
    padding: 40px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    border: var(--cp-hairline);
    border-left: 4px solid var(--cp-blue);
    box-shadow: var(--cp-shadow-rest);
}

.care-strip-title {
    font-family: 'Teachers', sans-serif;
    font-weight: 700;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin: 0 0 8px;
    color: var(--cp-black);
    font-variant-numeric: tabular-nums;
}

.care-strip-desc { font-size: 0.85rem; line-height: 1.6; color: rgba(10, 10, 10, 0.65); margin: 0; max-width: 60ch; }

/* ── Process steps ── */
.steps-section { padding: 30px 0 90px; }

.steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 36px;
    padding: 46px 28px;
    margin: 0 -28px;
    border-top: 1px solid rgba(0, 0, 0, 0.14);
    transition: background var(--dur-fast) var(--ease-out);
}

.step-row:hover { background: rgba(255, 255, 255, 0.75); }

.step-num {
    font-family: 'Teachers', sans-serif;
    font-weight: 800;
    font-size: 96px;
    line-height: 0.85;
    color: transparent;
    -webkit-text-stroke: 2px var(--cp-black);
    letter-spacing: -3px;
    transition: color var(--dur-fast) var(--ease-out), -webkit-text-stroke-color var(--dur-fast) var(--ease-out);
}

.step-row:hover .step-num { color: var(--cp-blue); -webkit-text-stroke-color: var(--cp-blue); }

.step-num--accent { -webkit-text-stroke-color: var(--cp-blue); }

@supports not (-webkit-text-stroke: 2px black) {
    .step-num { color: rgba(0, 0, 0, 0.18); }
    .step-num--accent { color: var(--cp-blue); }
}

.step-title {
    font-family: 'Teachers', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 10px;
    color: var(--cp-black);
}

.step-desc { font-size: 0.85rem; line-height: 1.7; color: rgba(10, 10, 10, 0.65); margin: 0; max-width: 60ch; }
.step-desc a { color: var(--cp-blue); text-decoration: underline; text-underline-offset: 3px; }

.steps-expect {
    background: var(--cp-black);
    color: var(--cp-white);
    padding: 44px 48px;
    margin-top: 30px;
}

.steps-expect-title {
    font-family: 'Teachers', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 12px;
    color: var(--cp-white);
}

.steps-expect-desc { font-size: 0.85rem; line-height: 1.7; color: rgba(255, 255, 255, 0.8); margin: 0; max-width: 60ch; }

/* ── Care plans page ── */
.care-section { padding: 30px 0 90px; }

.care-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    margin-bottom: 26px;
}

.care-card {
    background: var(--cp-white);
    padding: 40px 38px;
    border: var(--cp-hairline);
    box-shadow: var(--cp-shadow-rest);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.care-card:hover { transform: translateY(-6px); box-shadow: var(--cp-shadow-lift); }

.care-card-title {
    font-family: 'Teachers', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 12px;
    color: var(--cp-black);
}

.care-card-desc { font-size: 0.85rem; line-height: 1.7; color: rgba(10, 10, 10, 0.65); margin: 0; max-width: 60ch; }

.care-how {
    background: var(--cp-blue);
    color: var(--cp-white);
    padding: 44px 48px;
}

.care-how-title {
    font-family: 'Teachers', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 12px;
    color: var(--cp-white);
}

.care-how-desc { font-size: 0.85rem; line-height: 1.7; color: rgba(255, 255, 255, 0.88); margin: 0; max-width: 60ch; }

/* ── Home: productized sections ── */
.hero-sub {
    font-size: 0.85rem;
    line-height: 1.7;
    color: rgba(10, 10, 10, 0.65);
    max-width: 60ch;
    margin: 22px 0 34px;
    text-wrap: pretty;
}

.hero-cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

.home-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 44px;
}

.home-section-head .services-heading { margin: 0; }

.home-section-link {
    font-family: 'Teachers', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--cp-black);
    text-decoration: none;
    border-bottom: 2px solid var(--cp-blue);
    padding-bottom: 4px;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.home-section-link:hover { color: var(--cp-blue); }

.offer-section { padding: 90px 0 50px; }
.home-designs-section { padding: 50px 0; }
.how-strip-section { padding: 50px 0 90px; }

.tier-card--compact { padding: 38px 32px; }
.tier-card--compact .tier-summary { margin-bottom: 26px; }

.tpl-card--home { text-decoration: none; }
.tpl-card--home .tpl-body { padding: 24px 26px 28px; }
.tpl-card--home .tpl-band { margin-bottom: 0; }

/* Horizontal mini-steps */
.how-strip {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
    padding: 0;
    margin: 0;
    counter-reset: none;
}

.how-step {
    border-top: 2px solid var(--cp-black);
    padding-top: 18px;
    transition: border-color var(--dur-fast) var(--ease-out);
}

.how-step:hover { border-top-color: var(--cp-blue); }

.how-step-num {
    display: block;
    font-family: 'Teachers', sans-serif;
    font-weight: 800;
    font-size: 46px;
    line-height: 1;
    letter-spacing: -1.5px;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--cp-black);
    margin-bottom: 10px;
}

.how-step-num--accent { -webkit-text-stroke-color: var(--cp-blue); }

@supports not (-webkit-text-stroke: 1px black) {
    .how-step-num { color: rgba(0, 0, 0, 0.2); }
    .how-step-num--accent { color: var(--cp-blue); }
}

.how-step-label {
    font-family: 'Teachers', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cp-black);
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — token + override layer
   Source of truth: DESIGN_SYSTEM_v2.md (repo root).
   Later rules override the v1 styles above; do not edit above
   for look-and-feel — extend here, tracing every value to a token.
═══════════════════════════════════════════════════════════════ */

:root {
    /* Canvas & surfaces */
    --color-bg:           #F2F1FA;
    --color-surface:      #FFFFFF;
    --color-recessed:     #EBEAF5;
    --color-dark:         #0A0A0A;
    /* Text */
    --color-text:         #0F0F0F;
    --color-text-muted:   #4A4A4A;
    --color-text-inverse: #FFFFFF;
    /* Accents */
    --color-blue:         #1D6FE0;
    --color-blue-deep:    #1560C4;
    --color-red:          #E0301D;
    /* Structure */
    --color-border:       #E4E2EF;
    --color-border-dark:  #262626;
    /* Glass */
    --glass-light:        rgba(255, 255, 255, 0.64);
    --glass-tint:         rgba(242, 241, 250, 0.72);
    --glass-dark:         rgba(10, 10, 10, 0.55);
    --glass-border:       rgba(255, 255, 255, 0.45);
    --glass-blur:         blur(20px) saturate(1.4);
    /* Type scale — the only sizes that exist (§3.1: body 17px, nothing below 14px) */
    --font-sans:          'Teachers', 'Inter', system-ui, sans-serif;
    /* v2.1 §D: the mono micro-voice — §D inventory only (numerals, badges/tags,
       price lines, metadata); never nav, buttons, headlines, lead, or body */
    --font-mono:          'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    /* v2.1 §A: home hero headline ONLY — nothing else, on any page */
    --text-hero:          clamp(4.5rem, 11vw, 10rem);
    --text-display:       clamp(3.75rem, 8vw, 7rem);
    --text-h2:            clamp(2.25rem, 4vw, 3.25rem);
    /* Pinned in px: the theme sets html { font-size: 14px }, so rem values
       render 12.5% under spec (1.0625rem → 14.875px, not 17px). */
    --text-h3:            22px;   /* 1.375rem */
    --text-lead:          24px;   /* 1.5rem   */
    --text-body:          17px;   /* 1.0625rem */
    --text-small:         14px;   /* 0.875rem — nothing below 14px (§10) */
    /* Spacing */
    --space-section:      clamp(6rem, 10vw, 10rem);
    /* v2.1 §B: act breaks — the big one-idea pauses (closing CTA, dark-act edges) */
    --space-act:          clamp(9rem, 16vw, 16rem);
    --space-block:        3rem;
    --space-card-pad:     1.75rem;
    --space-grid-gap:     1.5rem;
    /* Radius */
    --radius-none:        0;
    --radius-pill:        999px;
    --radius-icon:        10px;
    /* Legacy aliases resolve to v2 tokens */
    --cp-blue:  var(--color-blue);
    --cp-red:   var(--color-red);
    --cp-black: var(--color-dark);
    --cp-silk:  var(--color-bg);
}

/* ── One family site-wide (§3): Teachers carries every role, display to caption ── */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans) !important; }

/* §3.3 rule 9: breaks are authored with <br>; balance is the sanctioned fallback
   so narrow viewports never orphan a single word within an authored segment */
.hero-headline, .cta-headline, .page-headline, .page-cta-headline { text-wrap: balance; }

body,
p, a, li, span, label, input, textarea, button {
    font-family: var(--font-sans);
}

body { color: var(--color-text); }

/* ── Floating layer: frosted nav (§6) ── */
.cp-nav-links {
    background: var(--glass-light);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: 0 1px 2px rgba(15, 15, 15, 0.04); /* the one sanctioned shadow */
}

.cp-nav-links a { font-size: var(--text-small); font-weight: 500; }
.cp-nav-links a.active { background: var(--color-surface); font-weight: 500; }

.btn-book-call {
    background: var(--glass-light);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: var(--color-text);
    font-size: var(--text-small);
    font-weight: 500;
    transition: background var(--dur-fast) var(--ease-out);
}

.btn-book-call:hover { background: rgba(255, 255, 255, 0.76); }

/* ── Display tier (§3.2): 600 never 700+, uppercase, 0.95, -0.022em.
   v2.1 §A: the home hero headline moved up to the hero tier (end of file);
   the closing CTA bookend and interior page headlines stay display. ── */
.cta-headline,
.page-headline {
    font-family: var(--font-sans) !important;
    font-size: var(--text-display);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.022em;
    text-transform: uppercase;
    color: var(--color-text);
}

/* ── h2 tier: section headings, 600 ── */
.services-heading,
.works-heading,
.testimonials-heading,
.faq-heading,
.page-cta-headline {
    font-family: var(--font-sans) !important;
    font-size: var(--text-h2);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.016em;
    text-transform: uppercase;
}

/* ── h3 tier: every card title, identical everywhere ── */
.tpl-name,
.work-card-title,
.care-card-title,
.care-strip-title,
.step-title,
.steps-expect-title,
.care-how-title,
.tier-card .tier-kicker {
    font-family: var(--font-sans) !important;
    font-size: var(--text-h3);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    color: inherit;
}

/* ── Lead tier: emphasis lines (price bands) ── */
.tier-band {
    font-family: var(--font-sans);
    font-size: var(--text-lead);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: inherit;
}

/* ── Body tier: all paragraph copy, identical everywhere ── */
.hero-sub,
.page-lead,
.tier-summary,
.tpl-summary,
.tpl-band,
.work-card-desc,
.testimonial-text,
.care-card-desc,
.care-strip-desc,
.step-desc,
.steps-expect-desc,
.care-how-desc,
.tier-features li,
.tpl-features li,
.tier-designs,
.tpl-empty {
    font-family: var(--font-sans) !important;
    font-size: var(--text-body);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.003em;
    color: var(--color-text-muted);
    max-width: 60ch;
}

.testimonial-text { text-transform: none; }

/* §10: truncation is an editing problem, not a styling tool — descriptions
   render in full and are given two full lines of space */
.work-card-desc { min-height: calc(2 * 1.55em); }

/* §7.3 FAQ row: question at body size / h3 weight, answer body-muted */
.faq-question-text {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: 700;
    letter-spacing: -0.003em;
}

.faq-answer {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: 1.55;
    color: var(--color-text-muted);
}

/* Names/roles stay at the small tier (nothing below 14px, §10) */
.testimonial-author-name { font-size: var(--text-small); color: var(--color-text); }
.testimonial-author-role { font-family: var(--font-sans); font-size: var(--text-small); color: var(--color-text-muted); }

/* ── Small tier: nav, buttons, badges, footer ── */
.home-section-link,
.how-step-label,
.tpl-tier-badge,
.tpl-soon,
.tier-flag,
.page-kicker,
.page-cta-kicker,
.tier-kicker {
    font-family: var(--font-sans);
    font-size: var(--text-small);
}

.home-section-link {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: none;
    padding-bottom: 0;
    color: var(--color-text);
    transition: color var(--dur-fast) var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: 0.4em; /* §7.1a text-link arrow gap */
}

.home-section-link:hover { color: var(--color-blue); }

/* ── Action layer: pills + 44px circles (§7.1), color/opacity feedback only ── */
.btn-cp-solid,
.btn-cp-line,
.btn-cp-inverse,
.btn-hero-call {
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: 0;
    padding: 0.875rem 2rem;
    min-height: 48px;
    border-radius: var(--radius-pill);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
    transform: none;
}

.btn-cp-solid, .btn-cp-inverse { background: var(--color-dark); border-color: var(--color-dark); color: var(--color-text-inverse); }
.btn-cp-solid:hover, .btn-cp-inverse:hover { background: var(--color-dark); border-color: var(--color-dark); opacity: 0.85; box-shadow: none; transform: none; }
.btn-hero-call:hover { opacity: 0.85; }

.btn-cp-line { border-color: var(--color-border); color: var(--color-text); }
.btn-cp-line:hover { background: var(--color-surface); border-color: var(--color-border-dark); color: var(--color-text); transform: none; box-shadow: none; }

.btn-cp-solid:active, .btn-cp-line:active, .btn-cp-inverse:active { transform: none; opacity: 0.75; }

.btn-cp-circle {
    width: 52px;
    height: 52px;
    font-size: 21px; /* arrow glyph ~40% of diameter */
    background: var(--color-blue);
    transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
    transform: none;
}

.btn-cp-circle:hover { background: var(--color-blue-deep); transform: none; }
.btn-cp-circle:active { transform: none; opacity: 0.85; }
.btn-cp-circle--dark { background: var(--color-dark); }
.btn-cp-circle--dark:hover { background: var(--color-dark); opacity: 0.85; }

/* ── §7.1a The arrow — one inline asset (<x-arrow />); directions are CSS
   rotations of the same drawing, sized by font-size of the host ── */
.cp-arrow {
    --cp-arrow-r: 0deg;
    display: inline-flex;
    flex: none;
    line-height: 0;
    transform: rotate(var(--cp-arrow-r));
    transition: transform var(--dur-fast) var(--ease-out);
}
.cp-arrow svg { width: 1em; height: 1em; display: block; }
.cp-arrow--right { --cp-arrow-r: 45deg; }
.cp-arrow--down  { --cp-arrow-r: 135deg; }
.cp-arrow--left  { --cp-arrow-r: 225deg; }

/* §7.3 arrow nudge: on circle-button hover the arrow translates 2px along its
   pointing direction (translate runs in the rotated frame, where ↗ is local) */
.btn-cp-circle:hover .cp-arrow,
.circle-btn:hover .cp-arrow,
.cta-circle-btn:hover .cp-arrow,
.testimonial-nav-btn:hover .cp-arrow,
.about-scroll-btn:hover .cp-arrow {
    transform: rotate(var(--cp-arrow-r)) translate(1.5px, -1.5px);
}

/* All circles conform to the 52px token */
.circle-btn, .circle-btn-lg { width: 52px; height: 52px; min-width: 52px; }

/* ── Content plane: opaque, sharp, hairline-bordered, no lift (§2, §7.3) ── */
.tpl-card,
.tier-card,
.care-card,
.care-strip,
.work-card {
    border: 1px solid var(--color-border);
    box-shadow: none;
    border-radius: var(--radius-none);
    transition: none;
}

.tpl-card:hover, .tier-card:hover, .care-card:hover, .work-card:hover { transform: none; box-shadow: none; }

.tier-card, .care-card { padding: var(--space-card-pad); }
.tpl-body { padding: var(--space-card-pad); }
.tier-grid, .tpl-grid, .care-grid { gap: var(--space-grid-gap); }

/* One blue-filled card per grid (§7.3): the featured tier */
.tier-card--featured {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-text-inverse);
}

.tier-card--featured .tier-kicker,
.tier-card--featured .tier-band { color: var(--color-text-inverse); }
.tier-card--featured .tier-summary,
.tier-card--featured .tier-features li { color: rgba(255, 255, 255, 0.82); }
.tier-card--featured .tier-features li { border-bottom-color: rgba(255, 255, 255, 0.22); }
.tier-card--featured .tier-features li::before { color: var(--color-text-inverse); }
.tier-card--featured .tier-designs { color: rgba(255, 255, 255, 0.75); }
.tier-card--featured .tier-designs a { color: var(--color-text-inverse); }
.tier-card--featured .btn-cp-line { border-color: rgba(255,255,255,0.45); color: var(--color-text-inverse); }
.tier-card--featured .btn-cp-line:hover { background: rgba(255,255,255,0.12); }

/* Badge pills (§7.2): red is the one counterpart badge per page */
.tier-flag {
    top: 14px;
    right: 14px;
    background: var(--color-red);
    border-radius: var(--radius-pill);
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.4rem 1rem;
}

.tpl-tier-badge { border-radius: var(--radius-pill); font-weight: 500; letter-spacing: 0.02em; }
.tpl-soon { border-radius: var(--radius-pill); }
.tpl-filter-btn { font-family: var(--font-sans); font-size: var(--text-small); font-weight: 500; border-color: var(--color-border); }
.tpl-filter-btn:hover { border-color: var(--color-border-dark); }

/* Ghost numerals retired (§9.5: hierarchy via scale + tracking only) */
.tier-index { display: none; }

/* §7.4 step list: the numeral is the design material — h2 size, weight 600,
   full text color; small uppercase label beneath; hairline top-rules.
   All five steps identical — no step is highlighted in a static list. */
.how-step { border-top: 1px solid var(--color-border); }

.how-step-num {
    font-family: var(--font-sans);
    font-size: var(--text-h2);
    font-weight: 600;
    color: var(--color-text);
    -webkit-text-stroke: 0;
    letter-spacing: -0.016em;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.how-step-num--accent { color: var(--color-text); -webkit-text-stroke: 0; }
.how-step-label { font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; }

/* Kickers: small tier, muted */
.page-kicker, .page-cta-kicker, .tier-kicker { font-weight: 500; letter-spacing: 0.02em; }
.page-kicker::before { background: var(--color-blue); }

/* ── Section rhythm (§4) ── */
.offer-section { padding: var(--space-section) 0 calc(var(--space-section) / 2); }
.home-designs-section { padding: calc(var(--space-section) / 2) 0; }
.how-strip-section { padding: calc(var(--space-section) / 2) 0 var(--space-section); }

/* ── Value-contrast cleanups ── */
.step-row:hover { background: var(--color-surface); }
.steps-expect, .page-cta-panel { background: var(--color-dark); }
.care-how { background: var(--color-blue); }

.tier-cta-circle { margin-top: auto; align-self: flex-start; }
.tier-cta { align-self: flex-start; width: auto; }

/* ── Home pricing section — Apple-calm (spec: DESIGN_SYSTEM_v2.md + pricing-section brief) ──
   Price as a statement: one price per tier, no ranges, no badges, no urgency devices.
   Hierarchy through size and space; the blue card is the section's single blue element. */
.offer-section { padding: var(--space-section) 0; }

.offer-section .home-section-head { align-items: baseline; margin-bottom: var(--space-block); }

.price-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-grid-gap);
    align-items: stretch;
}

.price-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border); /* §7.3: hairline is part of the anatomy */
    border-radius: var(--radius-none);
    padding: calc(var(--space-card-pad) * 1.6); /* pricing gets more air than other cards */
    display: flex;
    flex-direction: column;
    position: relative;
    transition: background-color var(--dur-fast) var(--ease-out);
}

/* §7.3 surface card hover: background eases to recessed; the frame never moves */
.price-card:not(.price-card--blue):hover { background: var(--color-recessed); }

/* Editorial stamp, not a sticker: plain white-on-blue text, no pill fill.
   Sits in the card's top padding zone — at 4-up column widths a stamp on
   the title's own line collides with the tier name. */
.price-card-stamp {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-inverse);
    line-height: 1.2;
}

.price-card-tier {
    font-size: var(--text-h3);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0 0 2.25rem;
}

.price-card-price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
}

.price-card-from {
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-text-muted);
    line-height: 1.2;
}

.price-card-amount {
    font-size: var(--text-lead);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.price-card-line {
    font-size: var(--text-body);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.003em;
    color: var(--color-text-muted);
    max-width: 50ch;
    margin: 0 0 2.25rem;
}

/* Quiet feature lines: no bullets, no checkmarks — hairlines between */
.price-card-features {
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
}

.price-card-features li {
    font-size: var(--text-body);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.003em;
    color: var(--color-text-muted);
    padding: 0.75rem 0;
}

.price-card-features li + li { border-top: 1px solid var(--color-border); }

/* Same black circle on every card, baseline-aligned across the row */
.price-card-cta { margin-top: auto; align-self: flex-end; }

/* The section's single blue element */
.price-card--blue { background: var(--color-blue); border-color: var(--color-blue); }
.price-card--blue .price-card-tier,
.price-card--blue .price-card-amount { color: var(--color-text-inverse); }
.price-card--blue .price-card-from { color: rgba(255, 255, 255, 0.7); }
.price-card--blue .price-card-line,
.price-card--blue .price-card-features li { color: rgba(255, 255, 255, 0.82); }
.price-card--blue .price-card-features li + li { border-top-color: rgba(255, 255, 255, 0.22); }

/* 4 → 2 → 1, same collapse rhythm as the team grid */
@media (max-width: 1200px) {
    .price-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .price-grid { grid-template-columns: 1fr; }
}

/* ── Template showcase cards (§7.3): real preview in a consistent mockup frame ── */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-grid-gap);
    align-items: stretch;
}

.showcase-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-none);
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

/* Item 2 (§7.3 edge-bleed anatomy): the preview image runs flush to the card's
   top/left/right edges — no chrome strip, no padding above or beside it. The
   card's own 1px hairline frames the image directly; a single hairline
   (border-bottom) divides the image from the text block below, which is the
   only region that carries --space-card-pad. */
.showcase-frame {
    display: block;
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}

.showcase-frame img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform var(--dur-reveal) var(--ease-out);
}

/* §7.3 image card hover: zoom 1 → 1.04 inside the mask */
.showcase-card:hover .showcase-frame img { transform: scale(1.04); }

.showcase-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: var(--space-card-pad);
}

.showcase-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.showcase-name {
    font-size: var(--text-h3);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: var(--color-text);
}

/* Tier as a small outlined badge: hairline border, no fill */
.showcase-badge {
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.75rem;
    white-space: nowrap;
}

.showcase-price { margin: 0; }

/* ── Terminal Custom card (consolidation Item 3): same anatomy as a design
   card; the preview area is a recessed panel (same 16:10 ratio) holding one
   oversized mono "?" — the absence of a real design is the emphasis. No badge,
   no blue, no red. A black 52px circle closes the body. ── */
.showcase-card--custom { justify-content: flex-start; }

/* Item 2: the recessed mark panel fills the same edge-bleed area flush — top,
   left and right — at the identical 16:10 ratio, so the Custom card stays
   uniform with its picture-bearing neighbours. */
.showcase-frame--custom .showcase-custom-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--color-recessed);
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    line-height: 1;
    color: var(--color-text-muted);
}

/* Body: title (h3, inherited) + one muted line + the terminal circle */
.showcase-custom-line {
    font-size: var(--text-body);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.003em;
    color: var(--color-text-muted);
    max-width: 40ch;
    margin: 0;
}

/* The circle is decorative here (the whole card is the anchor) — sits at the
   body's end, baseline-aligned like the other cards' price row occupies. */
.showcase-custom-cta {
    margin-top: auto;
    align-self: flex-start;
}

/* The custom body needs to grow so the circle can push to the bottom, keeping
   the card's height consistent with its picture-bearing neighbours. */
.showcase-card--custom .showcase-body { flex: 1; }

@media (max-width: 992px) {
    .showcase-grid { grid-template-columns: 1fr; }
}

/* ── §3.1 lead tier's job: paragraphs directly under display/h2 are lead, never body.
     Home audit: the hero standfirst is the only section-introducing paragraph. ── */
.hero-sub {
    font-size: var(--text-lead);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-text-muted);
    max-width: 44ch;
}

/* ── §2.2 Surface band rhythm (home): the surface shift IS the section break.
     hero lavender → pricing WHITE → designs lavender → process lavender →
     services WHITE → works (dark stage, §2.3) → testimonials WHITE →
     FAQ lavender → CTA/footer lavender.
     The services band completes the lavender → white → dark descent into
     the works stage; the how-strip returns to the canvas so the descent
     has its lavender step. ── */
.offer-section,
.svc-section,
.testimonials-section {
    background: var(--color-surface);
}

.offer-section,
.home-designs-section,
.how-strip-section,
.works-section,
.testimonials-section,
.faq-section {
    padding-top: var(--space-section);
    padding-bottom: var(--space-section);
}

/* §7.3: cards are surface + mandatory hairline on every band; the hairline
   (not a fill inversion) separates card from band */
.offer-section .price-card--blue { background: var(--color-blue); }
.offer-section .price-card--blue .price-card-features li + li { border-top-color: rgba(255, 255, 255, 0.22); }

.testimonials-section .testimonial-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: background-color var(--dur-fast) var(--ease-out);
}

.testimonials-section .testimonial-card:hover { background: var(--color-recessed); }

/* ── §2.3 Depth anchor: the works section is the page's one dark stage ── */
.works-section { background: var(--color-dark); }
.works-section .works-heading { color: var(--color-text-inverse); }
.works-section .work-card { border-color: var(--color-border-dark); }

/* ── §8 Motion: two named curves, three durations ── */
:root {
    --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:   180ms;
    --dur-reveal: 700ms;
    --dur-toggle: 450ms;
}

/* Reveals: 700ms decelerating, 24px rise, once. 70ms stagger on grid children (cap 6).
   §8.2 fail-visible: visible is the CSS default. html.js-reveal is added by the
   reveal script at init — without JS (or if it fails to run) nothing here applies
   and the page renders fully readable. */
@media (prefers-reduced-motion: no-preference) {
    .js-reveal [data-reveal] {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity var(--dur-reveal) var(--ease-out),
                    transform var(--dur-reveal) var(--ease-out);
    }

    .js-reveal [data-reveal].revealed {
        opacity: 1;
        transform: translateY(0);
    }

    .js-reveal [data-reveal][data-delay="1"] { transition-delay: 70ms; }
    .js-reveal [data-reveal][data-delay="2"] { transition-delay: 140ms; }
    .js-reveal [data-reveal][data-delay="3"] { transition-delay: 210ms; }
    .js-reveal [data-reveal][data-delay="4"] { transition-delay: 280ms; }
    .js-reveal [data-reveal][data-delay="5"] { transition-delay: 350ms; }

    .js-reveal [data-reveal-scale] {
        opacity: 0;
        transform: scale(0.96);
        transition: opacity var(--dur-reveal) var(--ease-out),
                    transform var(--dur-reveal) var(--ease-out);
    }

    .js-reveal [data-reveal-scale].revealed {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── §1 Red inventory — the exhaustive list, nothing beyond it ── */

/* 2. The display full stop: terminal period of display headlines only */
.accent-dot { color: var(--color-red); }

/* 5. Active nav indicator: 4px red dot inside the nav pill */
.cp-nav-links a.active::before {
    content: '';
    width: 4px;
    height: 4px;
    min-width: 4px;
    border-radius: 50%;
    background: var(--color-red);
    margin-right: 7px;
}

/* 4. One thin decorative stroke (≤2px), passing behind the showcase cards.
   Relocated from the retired tier grid (Item 3) to the showcase — now the
   page's pricing surface — so the page keeps exactly one red + one blue stroke. */
.home-designs-section { position: relative; overflow: hidden; }

.designs-stroke {
    position: absolute;
    inset: auto 0 clamp(2rem, 6vw, 6rem) 0;
    width: 100%;
    height: min(520px, 60%);
    pointer-events: none;
    z-index: 0;
}

.home-designs-section .container { position: relative; z-index: 1; }
/* The stroke passes behind the cards but must never cross text: cards are opaque */

/* ── Band-to-band rhythm fix: the how-strip is a thin band; full --space-section
     padding on both of its edges (plus the neighbours' own padding) stacked into
     a near-empty viewport between the templates section and the dark works stage.
     Halve the paddings at those shared boundaries so each transition totals
     ~--space-section instead of double. ── */
.home-designs-section { padding-bottom: calc(var(--space-section) / 2); }

.how-strip-section {
    padding-top: calc(var(--space-section) / 2);
    padding-bottom: calc(var(--space-section) / 2);
}

/* ── Works featured layout (home dark stage only): first project spans the full
     stage width, the remaining two share the row below — no orphan cards. ── */
.works-section .works-grid { gap: var(--space-grid-gap); }
.works-section .work-card { margin-bottom: 0; }
.works-section .works-grid .work-card:first-child { grid-column: 1 / -1; }
.works-section .works-grid .work-card:first-child .work-card-img-wrap { height: 620px; }

@media (max-width: 768px) {
    .works-section .works-grid .work-card:first-child .work-card-img-wrap { height: 340px; }
}

/* ══════════════════════════════════════════════════════════
   Services band (home) — white full-width band between the
   lavender process strip and the dark works stage (§2.2).
   Approach-card pattern (§7.3): icon chip → h3 title → body.
   White band → cards invert to recessed fill (§2.2 inversion).
══════════════════════════════════════════════════════════ */
.svc-section { padding: var(--space-section) 0; }

.svc-head { margin-bottom: var(--space-block); }

/* Badge pill (§7.2): blue fill, white text, always solid */
.svc-badge {
    display: inline-flex;
    align-items: center;
    background: var(--color-blue);
    color: var(--color-text-inverse);
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.2;
    border-radius: var(--radius-pill);
    padding: 0.4rem 1rem;
    margin-bottom: 1.5rem;
}

/* h2 tier (§3.2): 600, never 700; no red full stop below display tier */
.svc-heading {
    font-family: var(--font-sans) !important;
    font-size: var(--text-h2);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.016em;
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0 0 1.25rem;
}

/* §3.1: the paragraph introducing a section is lead, never body */
.svc-lead {
    font-size: var(--text-lead);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-text-muted);
    max-width: 44ch;
    margin: 0;
}

.svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-grid-gap);
    align-items: stretch;
}

.svc-card {
    background: var(--color-recessed);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-none);
    padding: var(--space-card-pad);
    display: flex;
    flex-direction: column;
    transition: background-color var(--dur-fast) var(--ease-out);
}

/* §7.3 surface hover: background eases one step; no lift, no scale, no shadow */
.svc-card:not(.svc-card--blue):hover { background: var(--color-bg); }

/* Icon chip: black circle ~48px, white glyph */
.svc-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: var(--color-dark);
    color: var(--color-text-inverse);
    margin-bottom: 1.5rem;
}

.svc-chip svg { width: 22px; height: 22px; }

.svc-title {
    font-family: var(--font-sans) !important;
    font-size: var(--text-h3);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0 0 0.75rem;
}

.svc-line {
    font-size: var(--text-body);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.003em;
    color: var(--color-text-muted);
    max-width: 60ch;
    margin: 0;
}

/* The one blue variant per grid (§7.3): the consultative/custom card
   carries the "act here" color; its chip inverts to white-on-blue */
.svc-card--blue { background: var(--color-blue); border-color: var(--color-blue); }
.svc-card--blue .svc-title { color: var(--color-text-inverse); }
.svc-card--blue .svc-line { color: rgba(255, 255, 255, 0.82); }
.svc-card--blue .svc-chip { background: var(--color-surface); color: var(--color-blue); }

/* 4 → 2 → 1, same collapse as the team grid */
@media (max-width: 1200px) {
    .svc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .svc-section { padding: 64px 0; }
    .svc-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   Closing CTA fork — glass pill (§6 Book-a-call spec) stacked
   under the blue circle. Hierarchy by material: solid blue =
   primary (preview flow), frost = ambient secondary (booking).
══════════════════════════════════════════════════════════ */
.cta-btn-col {
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
}

.btn-cta-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.875rem 2rem;
    background: var(--glass-light);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border); /* the light catching the pane — mandatory */
    border-radius: var(--radius-pill);
    color: var(--color-text);
    font-size: var(--text-small);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out);
}

/* §7.1 glass hover: fill opacity up a step; never blur changes */
.btn-cta-glass:hover { background: rgba(255, 255, 255, 0.76); color: var(--color-text); }

@media (max-width: 768px) {
    .cta-btn-col { align-items: center; }
}

/* Hero strip sizing lives with the carousel rules (§7.4 featured-slide spec). */

/* ══════════════════════════════════════════════════════════
   v2.1 §D — Mono micro-voice (JetBrains Mono, 400/500 only).
   Exhaustive inventory: process numerals · badges & tags ·
   metadata · price lines. Everything else stays Teachers —
   never nav, buttons, headlines, lead, body, FAQ, testimonials.
══════════════════════════════════════════════════════════ */

/* §D.1 Process numerals: family/weight/tracking only — size stays
   --text-h2 per v2 §7.4; the step label beneath stays Teachers */
.how-step-num {
    font-family: var(--font-mono);
    font-weight: 400;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* §D.2 Badges and tags: mono 500, small, +0.02em, uppercase —
   badge shape, fill, and color rules unchanged */
.showcase-badge,
.tpl-tier-badge,
.tpl-soon,
.price-card-stamp,
.tier-flag {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* §D.4 Price lines: mono 400 with tabular figures — sizes unchanged.
   (!important: .tpl-band sits in the body-tier block, which pins
   family with !important.) */
.price-card-from,
.price-card-amount,
.tier-band,
.tpl-band {
    font-family: var(--font-mono) !important;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* §D.3 Metadata (footer legal line, dates): no instances exist in the
   markup today — when one ships, it takes mono 400 via this hook. */
.cp-meta {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-small);
}

/* ══════════════════════════════════════════════════════════
   v2.1 §A — the hero tier. Usage inventory (exhaustive): the
   home hero headline. Nothing else, on any page. Weight stays
   600 (700 is a slab at this scale); tracking tightens one
   step past display; 0.92 leading stacks the lines as a
   sculptural block. Scaling lives in the clamp token only —
   no per-breakpoint overrides (v2 §3.3.7).
══════════════════════════════════════════════════════════ */
.hero-headline {
    font-family: var(--font-sans) !important;
    font-size: var(--text-hero);
    font-weight: 600;
    line-height: 0.92;
    letter-spacing: -0.026em;
    text-transform: uppercase;
    color: var(--color-text);
}

/* ── v2.1 §B.1–B.2 — the hero owns the first viewport: nav, headline,
   standfirst, CTA pair, nothing else. The carousel is the second beat,
   below the fold. Nothing sits closer than --space-block (3rem) to the
   headline block — the top padding clears the fixed 80px nav by 3rem,
   and the wrap gap keeps the standfirst 3rem off the headline. ── */
.hero-section {
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding: calc(80px + var(--space-block)) 0 var(--space-block);
}

.hero-headline-wrap {
    min-height: 0;
    justify-content: center;
    gap: var(--space-block);
}

/* The second beat keeps its own --space-block of air below the fold */
.hero-projects-section { padding: var(--space-block) 0 0; }

/* ── v2.1 §B.3 — the closing CTA is an act break: a one-idea viewport
   pause held by --space-act on both sides. ── */
.cta-section { padding: var(--space-act) 0; }

/* ══════════════════════════════════════════════════════════
   v2.1 §I — the hero artifact slot. Two asymmetric columns in
   the first viewport: headline block ~55%, artifact ~40%,
   top-aligned with the headline's cap height, never closer
   than --space-block on any side (the column gap enforces it).
   Mobile: single column, artifact below at full width — it
   may cross the fold.
══════════════════════════════════════════════════════════ */
/* The body's 80px padding already clears the fixed nav, so the section
   adds only the §B.2 --space-block air — the old calc(80px + 3rem) top
   padding double-counted the nav and pushed the artifact's caption past
   the fold. min-height nets out the body offset so the first viewport
   ends exactly at the fold. */
.hero-section {
    min-height: calc(100svh - 80px);
    padding: var(--space-block) 0;
}

/* Item 3 (§I restage): the artifact panel is the hero's OBJECT, not a sidebar.
   Two side-by-side columns — headline block LEFT (headline row + support row),
   panel RIGHT spanning both rows, top-aligned with the headline's cap height.
   The headline's first line runs 2–4rem behind the panel's top-left corner
   (--hero-overlap): the left column's negative right margin lets that one line
   extend into the panel column, and the headline sits z-above the panel at the
   overlap so every glyph stays legible (dark type over the white card corner —
   layering, not obscuring). The support block (standfirst + CTA) keeps the left
   column only, fully clear of the panel. Mobile stacks (below). */
.hero-layout {
    --hero-overlap: clamp(2rem, 2.4vw, 4rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(440px, 32vw, 520px);
    grid-template-areas:
        "headline artifact"
        "support  artifact";
    column-gap: 0;
    row-gap: var(--space-block);
    align-items: start;
    width: 100%;
    /* the query container for the §A cqi token is the full-width layout, so
       the tier tracks the whole hero rather than the narrow left column */
    container-type: inline-size;
}
.hero-headline {
    grid-area: headline;
    position: relative;
    z-index: 2;                                  /* legible over the panel corner */
    /* the one authored overlap: the negative margin lets the long first line
       run --hero-overlap past the column edge, over the panel's top-left corner
       (overflow visible; the panel sits z-below, so every glyph stays legible) */
    margin-right: calc(-1 * var(--hero-overlap));
}
.hero-headline-wrap { grid-area: support; }      /* support stays clear of the panel */
.hero-artifact {
    grid-area: artifact;
    position: relative;
    z-index: 1;
    align-self: start;                           /* panel top at the headline's cap */
}

@media (max-width: 992px) {
    .hero-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "headline"
            "support"
            "artifact";
        row-gap: var(--space-block);
    }
    /* Mobile: stacked as before, no overlap */
    .hero-headline { margin-right: 0; padding-right: 0; z-index: auto; }
    .hero-artifact { align-self: stretch; }
}

/* §A hero tier tracks its container (the full-width hero layout). With the panel
   now sharing the stage, the longest authored line "A REAL WEBSITE," (~8.7em)
   must hold on ONE line inside the left column + the --hero-overlap it borrows
   from the panel; 7cqi lands it there from the wide desktop down to ~390px
   mobile without orphaning. Scaling still lives only in the clamp() token
   (§3.3.7). The panel-as-object composition sets the tier's ceiling here. */
@supports (font-size: 1cqi) {
    :root { --text-hero: clamp(2.75rem, 7cqi, 6.5rem); }
}

/* ── §I the vignette panel — content plane: opaque sharp card,
   mandatory hairline, card padding. Never glass (it sits in the
   document flow); contains NO blue and NO red. Everything below
   is visible by CSS default (fail-visible) — only the typing
   indicator, a playback artifact, waits behind [hidden]. ── */
.agent-vignette {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-none);
    padding: var(--space-card-pad);
    display: flex;
    flex-direction: column;
    /* Item 3 (§I): FIXED height, ≤64vh — the panel's outer box never changes
       size as messages play, so the hero never re-centres and the headline
       never moves. The header and input rows are fixed; the thread (flex:1) is
       the only flexible area and scrolls internally. */
    height: min(64svh, 600px);
}

/* Header row: small mono tag over a hairline — the DEMO marker
   is required and always visible (§I) */
.vignette-head {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
}

.vignette-tag {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text);
}

/* The conversation: the panel scrolls its own content if needed —
   page scroll is never touched (§I) */
.vignette-thread {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* Item 2: the thread fills the fixed panel (height = panel minus the
       header and input rows) and is the only area that scrolls. As messages
       exceed the space the container auto-scrolls to the newest (smooth);
       the panel box itself never grows, so page layout never moves. On loop
       restart the playback timeline resets scrollTop to 0 with the fade. */
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* the panel is a staged object, not a widget */
}

.vignette-thread::-webkit-scrollbar { display: none; }

/* Message bubbles: --radius-icon (10px — the existing token; no new
   radius), --text-body, Teachers 400, max ~80% of panel width */
.vignette-msg {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.003em;
    border-radius: var(--radius-icon);
    padding: 0.75rem 1rem;
    max-width: 80%;
    margin: 0;
}

.vignette-msg--customer {
    background: var(--color-recessed);
    color: var(--color-text);
    align-self: flex-start;
}

/* Agent bubbles are dark, not blue (§I color rationing) */
.vignette-msg--agent {
    background: var(--color-dark);
    color: var(--color-text-inverse);
    align-self: flex-end;
}

/* Typing indicator: three 6px dots, muted — NEVER red (§E.4).
   Shown only by the playback timeline; static render never sees it. */
.vignette-typing {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    align-self: flex-end; /* precedes agent messages, so it sits on their side */
    padding: 0.75rem 1rem;
    background: var(--color-recessed);
    border-radius: var(--radius-icon);
}

.vignette-typing[hidden] { display: none; }

.vignette-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text-muted);
    animation: vignette-typing-pulse 900ms var(--ease-inout) infinite;
}

.vignette-typing span:nth-child(2) { animation-delay: 150ms; }
.vignette-typing span:nth-child(3) { animation-delay: 300ms; }

@keyframes vignette-typing-pulse {
    0%, 100% { opacity: 0.25; }
    40%      { opacity: 1; }
}

/* Input row: decorative only — hairline-top, muted ghost text, 40px
   dark circle (§I fixes 40px here; the 52px token stays button-only).
   Non-functional: no cursor:pointer anywhere in it. */
.vignette-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
    margin-top: 1.25rem;
}

.vignette-input-ghost {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: 400;
    color: var(--color-text-muted);
}

.vignette-input-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: var(--color-dark);
    color: var(--color-text-inverse);
    font-size: 16px; /* arrow ~40% of the 40px circle */
}

/* Caption: below the panel, outside it — mono metadata voice (§D.3) */
.vignette-caption {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0.875rem 0 0;
    position: relative; /* above the blue stroke */
    z-index: 1;
}

/* ── §I enrichment (consolidation Item 2) ── */

/* The hero lets the stroke bleed past the container edges (mirrors the
   existing .hero-projects-section overflow allowance). */
.hero-section .container { overflow: visible; }

.hero-artifact { position: relative; }

/* Item 4 (§7.5): the ONE blue stroke spans the whole hero layout — a single
   continuous path, not two arcs on the panel. position:relative on the layout
   is its containing block; overflow visible lets it enter from past the right
   viewport edge and resolve past the left margin. z-index 0 keeps it behind
   the panel and every text block; the path itself is routed through open space
   (never over a glyph). Fail-visible: fully drawn by CSS default; motion2.js
   stages the dashoffset and draws it in during the overture (~0.8s, 1200ms). */
.hero-layout { position: relative; }

.hero-stroke {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

/* Mobile: the hero stacks, so the desktop stroke corridor no longer exists —
   omit it (§7.5 "when in doubt, omit") rather than let it cross stacked text. */
@media (max-width: 992px) { .hero-stroke { display: none; } }

/* The panel, headline and support block all sit above the stroke — the panel
   is opaque, so the stroke shows only where it clears the panel box. */
.agent-vignette { position: relative; z-index: 1; }
.hero-headline-wrap { position: relative; z-index: 1; }

/* The price-quoting agent bubble stacks its attachment above the text */
.vignette-msg--has-attach {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Attachment chip: a real preview thumbnail — 10px radius (the existing
   --radius-icon; no new radius), ~180px, hairline framing. Sits on the dark
   agent bubble, so the hairline is --color-border-dark (§C dark-surface rule). */
.vignette-attach {
    display: block;
    width: 180px;
    max-width: 100%;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-icon);
    overflow: hidden;
}

.vignette-attach img {
    display: block;
    width: 100%;
    height: auto;
}

/* ══════════════════════════════════════════════════════════
   Consolidation Item 4 — "FROM PREVIEW TO LIVE" as instrument
   rows. Full-width ruled rows replace the floating numerals:
   mono numeral / step label (h3) / one-line description. The
   §F.2 scrub (motion2.js) lights each row's numeral + label as
   it crosses the midline; rows never move. Full-strength by
   default (fail-visible). The air inside the rows is the design.
══════════════════════════════════════════════════════════ */
.process-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.process-row {
    display: grid;
    grid-template-columns: auto 1fr auto; /* numeral / label / description */
    align-items: center;
    column-gap: 2.5rem;
    min-height: 7rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--color-border);
}

.process-row:last-child { border-bottom: 1px solid var(--color-border); }

/* §D.1 numeral: mono 400, h2 size, tabular — the instrument-panel look */
.process-row-num {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-h2);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-text);
}

/* Label at the h3 tier (Teachers 700, uppercase) */
.process-row-label {
    font-family: var(--font-sans);
    font-size: var(--text-h3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    line-height: 1.15;
    color: var(--color-text);
}

/* Description: body, muted, right-aligned */
.process-row-desc {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.003em;
    color: var(--color-text-muted);
    max-width: 40ch;
    text-align: right;
    justify-self: end;
}

/* Mobile: numeral + label share a line; description drops below; rules hold */
@media (max-width: 768px) {
    .process-row {
        grid-template-columns: auto 1fr;
        grid-template-areas: "num label" "desc desc";
        align-items: baseline;
        row-gap: 0.85rem;
        column-gap: 1.25rem;
        min-height: 0;
        padding: 1.75rem 0;
    }
    .process-row-num { grid-area: num; }
    .process-row-label { grid-area: label; }
    .process-row-desc {
        grid-area: desc;
        text-align: left;
        justify-self: start;
    }
}

/* ══════════════════════════════════════════════════════════
   Consolidation Item 5 — "BEYOND THE TEMPLATES" as a services
   index. Four full-width ruled rows (same construction as the
   process rows) replace the icon cards. The service NAMES carry
   the section at h2 scale — a sanctioned h2-tier use. Mono
   counter, §7.1a arrow at row-end. No icons, no blue (the
   viewport's blue ration is spent elsewhere). Rows reveal with
   the standard 70ms stagger (data-reveal in the layout).
══════════════════════════════════════════════════════════ */
.svc-index {
    display: flex;
    flex-direction: column;
}

.svc-row {
    display: grid;
    grid-template-columns: auto 1fr auto; /* counter / name+line / arrow */
    align-items: center;
    column-gap: 2.5rem;
    min-height: 7rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out);
}

.svc-row:last-child { border-bottom: 1px solid var(--color-border); }

/* §7.3 row hover: background eases to recessed; no lift, no blue */
.svc-row:hover { background: var(--color-recessed); color: var(--color-text); }

/* Mono counter (§D): small, tabular, top-aligned to the name's cap */
.svc-row-num {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    align-self: start;
    padding-top: 0.45rem;
}

.svc-row-main {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

/* The name IS the content: h2 tier (600, uppercase, -0.016em) */
.svc-row-name {
    font-family: var(--font-sans);
    font-size: var(--text-h2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.016em;
    line-height: 1;
    color: inherit;
}

.svc-row-line {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.003em;
    color: var(--color-text-muted);
}

/* §7.1a arrow at row-end — the one asset, currentColor, no blue */
.svc-row-arrow {
    font-size: 1.75rem;
    color: var(--color-text);
}

/* §7.3 arrow nudge: 2px along its pointing direction on row hover */
.svc-row:hover .svc-row-arrow {
    transform: rotate(var(--cp-arrow-r)) translate(1.5px, -1.5px);
}

@media (max-width: 768px) {
    .svc-row {
        column-gap: 1rem;
        min-height: 0;
        padding: 1.5rem 0;
    }
    .svc-row-arrow { font-size: 1.25rem; }
}

/* Item 5 mandates zero blue in this section ("the ration is spent elsewhere"):
   the section kicker keeps its badge shape and position, but drops the blue
   fill for the system's outlined badge treatment (hairline, no fill, muted —
   the same non-blue/non-red form the template tier badges use, §7.3/§D.2). */
.svc-section .svc-badge {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

/* ══════════════════════════════════════════════════════════
   Consolidation Item 6 — works grid + closing CTA.
══════════════════════════════════════════════════════════ */

/* Uniform 2-col grid: every project the same card + image ratio. Overrides the
   retired featured-first-card span (below in the file the first-child rule set
   grid-column:1/-1 and a 620px image — neutralised here so no card is special). */
.works-section .works-grid--uniform {
    grid-template-columns: repeat(2, 1fr);
}

.works-section .works-grid--uniform .work-card:first-child {
    grid-column: auto;
}

/* This override outweighs the mobile 1-col collapse (higher specificity), so it
   must restore it explicitly — otherwise the 2-col grid squeezes onto phones.
   Image ratio stays a uniform 4/3 at every width. */
@media (max-width: 768px) {
    .works-section .works-grid--uniform { grid-template-columns: 1fr; }
}

/* Identical image ratio on every card (replaces per-card fixed heights) */
.works-section .works-grid--uniform .work-card-img-wrap,
.works-section .works-grid--uniform .work-card:first-child .work-card-img-wrap {
    height: auto;
    aspect-ratio: 4 / 3;
}

/* Section closes with a right-aligned "All works" link; on the dark act the
   link inherits white via the works-section text color. */
.works-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-block);
}

.works-section .works-foot-link { color: var(--color-text-inverse); }
.works-section .works-foot-link:hover { color: var(--color-blue); }

/* Closing CTA as one centred horizontal unit (§7.1 hero-pair), never stacked:
   headline, then the glass pill + blue circle side by side, vertically centred. */
.cta-section .cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-block);
}

.cta-section .cta-btn-col {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* ── 2026-10 relaunch: single-column hero (artifact panel retired). The
   headline takes the full row; no overlap into a panel column. ── */
.hero-layout--solo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "headline"
        "support";
}
.hero-layout--solo .hero-headline { margin-right: 0; }
.hero-layout--solo .hero-sub { max-width: 40ch; }
/* The solo headline's longest authored line ("AS YOUR BRAND SHOULD.", ~11em)
   holds one line at 8.5cqi up to the 7rem cap. On phones the authored break
   is dropped so text-wrap: balance can set it larger than the 7cqi floor. */
.hero-layout--solo { --text-hero: clamp(3.25rem, 8.5cqi, 7rem); }
@media (max-width: 576px) {
    .hero-layout--solo .hero-headline br { display: none; }
}

/* Work detail: the meta box never shrinks, so a long client name squeezed the
   title to a letter-wide column. Stack title over meta at every width (the
   mobile layout already does). */
.work-detail-header { flex-direction: column; align-items: flex-start; }
.work-meta-box { width: 100%; min-width: 0; height: auto; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════════
   COLOUR PASS (2026-10-19, branch color-pass). Everything colour-related
   from this pass lives in this one block, plus markup tagged
   "COLOUR PASS" in index.blade.php and footer.blade.php. Delete the block
   (or switch back to main) to roll back.

   Source: CP-BRAND colour palette + colour wheel (blue = trust and
   technology, red = action and energy, black/white = clarity).
   Deliberately overrides v2/v2.1 rules pending owner sign-off:
   one-blue-per-viewport (§9.1), red never a fill or button (§10),
   lavender canvas (§1), decorative strokes (§7.5).
   ════════════════════════════════════════════════════════════════════ */

/* A. The real brand values (were #1D6FE0 / #E0301D / lavender #F2F1FA) */
:root {
    --color-bg:         #F4F4F4;   /* Silk White family, extended palette */
    --color-recessed:   #E9E9E9;   /* Silk White */
    --color-border:     #DEDEDE;
    --color-blue:       #1679BD;   /* Cross Blue (white text 4.7:1) */
    --color-blue-deep:  #116099;
    --color-blue-tint:  #E3F0FA;   /* lightest brand blue */
    --color-red:        #D81F09;   /* Cross Red (white text 5.1:1) */
    --color-red-deep:   #B5180A;
    --glass-tint:       rgba(244, 244, 244, 0.72);
}

/* G. Browser surfaces in brand colour */
::selection { background: var(--color-blue); color: var(--color-text-inverse); }
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 3px;
}

/* C. Red is the action colour: every WhatsApp pill */
.btn-hero-call,
.btn-book-call,
.cp-navbar--scrolled .btn-book-call,
.btn-cta-glass {
    background: var(--color-red);
    border-color: var(--color-red);
    color: var(--color-text-inverse);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
}
.btn-hero-call:hover,
.btn-book-call:hover,
.cp-navbar--scrolled .btn-book-call:hover,
.btn-cta-glass:hover {
    background: var(--color-red-deep);
    border-color: var(--color-red-deep);
    color: var(--color-text-inverse);
    opacity: 1;
}

/* The brand colour wheel straddles the hero/strip boundary: anchored in the
   strip section, pulled up by about half its size into the hero's empty lower
   right, and layered under both the hero copy and the strip cards. */
.hero-section .container,
.hero-projects-section .container { position: relative; z-index: 1; }
/* x clips the wheel at the viewport edge; y must be explicit, because the
   theme gives every section overflow: hidden, which would cut the wheel's
   upper half off at this section's top. */
.hero-projects-section { position: relative; overflow-x: clip; overflow-y: visible; }
.hero-wheel {
    --wheel: clamp(18rem, 34vw, 34rem);
    position: absolute;
    z-index: 0;
    right: -8vw;
    top: calc(var(--wheel) * -0.5);
    width: var(--wheel);
    aspect-ratio: 1;
    pointer-events: none;
}
/* Starts turned half a circle so blue (the 50% share) leads the visible arc */
.hero-wheel svg { width: 100%; height: 100%; display: block; transform: rotate(180deg); }
.hero-wheel-seg { fill: none; stroke-width: 56; }
.hero-wheel-seg--blue  { stroke: var(--color-blue); stroke-dasharray: 50 50; }
.hero-wheel-seg--red   { stroke: var(--color-red);  stroke-dasharray: 25 75; stroke-dashoffset: -50; }
.hero-wheel-seg--black { stroke: var(--color-dark); stroke-dasharray: 25 75; stroke-dashoffset: -75; }
@media (prefers-reduced-motion: no-preference) {
    .hero-wheel svg { animation: hero-wheel-turn 180s linear infinite; }
}
@keyframes hero-wheel-turn { from { transform: rotate(180deg); } to { transform: rotate(540deg); } }
@media (max-width: 768px) {
    .hero-wheel { --wheel: 62vw; right: -20vw; }
}

/* B. Services: a full Cross Blue band with the mark's blueprint */
.svc-section--brand {
    position: relative;
    overflow: hidden;
    background: var(--color-blue);
    color: var(--color-text-inverse);
}
.svc-section--brand .container { position: relative; z-index: 1; }
.svc-section--brand .svc-heading,
.svc-section--brand .svc-lead,
.svc-section--brand .svc-row,
.svc-section--brand .svc-row-num,
.svc-section--brand .svc-row-line,
.svc-section--brand .svc-row-arrow { color: var(--color-text-inverse); }
.svc-section--brand .svc-badge {
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--color-text-inverse);
}
.svc-section--brand .svc-row,
.svc-section--brand .svc-row:last-child { border-color: rgba(255, 255, 255, 0.28); }
.svc-section--brand .svc-row:hover { background: var(--color-blue-deep); color: var(--color-text-inverse); }
.svc-section--brand .svc-row:focus-visible { outline-color: var(--color-text-inverse); outline-offset: -2px; }

.svc-blueprint {
    position: absolute;
    top: 2rem;
    right: -6vw;
    width: min(58vw, 52rem);
    height: auto;
    pointer-events: none;
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 1;
}
.svc-blueprint * { vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.svc-blueprint.is-pending * { stroke-dashoffset: 1; }
.svc-blueprint.is-drawn * { stroke-dashoffset: 0; transition: stroke-dashoffset 1800ms var(--ease-out); }
.svc-blueprint.is-drawn circle { transition-delay: 300ms; }
.svc-blueprint.is-drawn rect { transition-delay: 600ms; }
@media (max-width: 768px) {
    .svc-blueprint { top: 1rem; right: -30vw; width: 110vw; }
}

/* E. Brand photo tags on the work cards */
.work-card-img-wrap { position: relative; }
.work-tag {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 1;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-small);
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text-inverse);
}
.work-tag--blue { background: var(--color-blue); }
.work-tag--red  { background: var(--color-red); }

/* D. Closing CTA: black band, the cropped mark bleeding off the right */
.cta-section--brand {
    position: relative;
    overflow: hidden;
    background: var(--color-dark);
}
.cta-section--brand .container { position: relative; z-index: 1; }
.cta-section--brand .cta-inner { align-items: flex-start; text-align: left; }
.cta-section--brand .cta-btn-col { justify-content: flex-start; }
.cta-section--brand .cta-headline { color: var(--color-text-inverse); }
.cta-supermark {
    position: absolute;
    right: -24vw;
    top: 50%;
    width: min(88vw, 80rem);
    height: auto;
    transform: translateY(-50%);
    color: var(--color-blue);
    pointer-events: none;
}
.cp-mark-dot { fill: var(--color-red); }
@media (max-width: 768px) {
    /* Behind the headline on phones, so it steps back for the white type */
    .cta-supermark { right: -60vw; top: auto; bottom: -12vw; width: 150vw; transform: none; opacity: 0.45; }
}

/* H. Footer: black, with the colour wheel unrolled into one rule */
.cp-footer {
    position: relative;
    background-color: var(--color-dark);
    padding-top: calc(36px + 6px);
}
.cp-footer-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    height: 6px;
}
.cp-footer-bar i { display: block; }
.cp-footer-bar i:nth-child(1) { flex: 2; background: var(--color-blue); }
.cp-footer-bar i:nth-child(2) { flex: 1; background: var(--color-red); }
.cp-footer-bar i:nth-child(3) { flex: 1; background: var(--color-bg); }
.cp-footer-nav a,
.cp-footer-socials a { color: var(--color-text-inverse); }
.cp-footer-nav a:hover,
.cp-footer-socials a:hover { color: var(--color-blue-tint); }

/* ════════════════════════════════════════════════════════════════════
   CARDS & NAV PASS (2026-10-19, branch color-pass, on top of COLOUR PASS).
   Cards lose their hairlines and float on a soft layered shadow that
   deepens on hover; project cards become full-image tiles; testimonials
   become a two-up quote carousel; the navbar becomes a white material bar
   and the WhatsApp pills get an icon chip and real depth.
   Overrides v2 §2 "zero shadows" and §7.3 "mandatory hairline".
   ════════════════════════════════════════════════════════════════════ */
:root {
    /* Layered, neutral-tinted elevation: a contact shadow plus a soft ambient one */
    --shadow-1: 0 1px 2px rgba(15, 15, 15, 0.04), 0 6px 16px -4px rgba(15, 15, 15, 0.07), 0 20px 40px -16px rgba(15, 15, 15, 0.12);
    --shadow-2: 0 2px 4px rgba(15, 15, 15, 0.05), 0 14px 28px -8px rgba(15, 15, 15, 0.12), 0 36px 64px -20px rgba(15, 15, 15, 0.22);
    --lift: -4px;
    --dur-lift: 450ms;
}

/* ── Elevated cards on light bands ── */
.hero-carousel-card,
.contact-card,
.faq-item,
.testimonials-section .testimonial-card {
    border: 0;
    box-shadow: var(--shadow-1);
}
.faq-item + .faq-item { margin-top: 0.75rem; }

/* ── Project tiles (Home on black, Work index on light) ── */
.works-grid--uniform {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-grid-gap);
}
.work-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #1a1a1a;
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-lift) var(--ease-out), box-shadow var(--dur-lift) var(--ease-out);
}
.work-tile:hover { color: var(--color-text-inverse); transform: translateY(var(--lift)); box-shadow: var(--shadow-2); }
.work-tile:active { transform: translateY(0) scale(0.99); transition-duration: 100ms; }
.works-section .work-tile { box-shadow: none; }
.works-section .work-tile:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 32px 64px -24px rgba(0, 0, 0, 0.9); }

.work-tile-media,
.work-tile-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.work-tile-media img {
    object-fit: cover;
    transition: transform 900ms var(--ease-out);
}
.work-tile:hover .work-tile-media img { transform: scale(1.04); }
/* Legibility scrim for the title, only over the bottom of the image */
.work-tile-media::after {
    content: '';
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.88), rgba(10, 10, 10, 0));
}

.work-tile-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--space-card-pad);
}
.work-tile-text { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.work-tile-title {
    font-family: var(--font-sans);
    font-size: var(--text-h3);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: -0.005em;
}
.work-tile-meta {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.82);
}
.work-tile-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 1.25rem;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.work-tile:hover .work-tile-arrow { background: var(--color-blue); color: var(--color-text-inverse); }

@media (max-width: 768px) {
    .works-grid--uniform { grid-template-columns: minmax(0, 1fr); }
    .work-tile { aspect-ratio: 4 / 3.4; }
}

/* ── Testimonials: white band, two-up quote cards ── */
.testimonials-section { background: var(--color-surface); }
/* The carousel runs out to the viewport edges (the section clips), so card
   shadows are never cut at the container's edge. */
.testimonials-section { overflow: hidden; }
.testimonials-section .container { overflow: visible; }
.testimonials-section .owl-stage-outer { padding: 1.5rem 0 3rem; overflow: visible !important; }
.testimonials-section .testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    margin: 0;
    padding: 2.5rem 2.5rem 2rem;
    background: var(--color-surface);
    transition: transform var(--dur-lift) var(--ease-out), box-shadow var(--dur-lift) var(--ease-out);
}
.testimonials-section .testimonial-card:hover {
    background: var(--color-surface);
    transform: translateY(var(--lift));
    box-shadow: var(--shadow-2);
}
.testimonials-section .owl-stage { display: flex; }
.testimonials-section .owl-item { display: flex; }

.testimonial-mark {
    font-family: var(--font-sans);
    font-size: 5rem;
    font-weight: 600;
    line-height: 0.6;
    height: 2.25rem;
    color: var(--color-blue);
}
.testimonials-section .testimonial-text {
    margin: 0 0 2.5rem;
    padding: 0;
    border: 0;
    font-family: var(--font-sans);
    font-size: var(--text-lead);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--color-text);
    flex-grow: 1;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-top: auto;
}
.testimonial-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-blue);
    color: var(--color-text-inverse);
    font-weight: 600;
}
.testimonial-author-name,
.testimonial-author-role { display: block; }
.testimonials-section .testimonial-author-name {
    font-size: var(--text-body);
    font-weight: 700;
    margin: 0;
}
.testimonials-section .testimonial-author-role {
    font-size: var(--text-small);
    color: var(--color-text-muted);
    margin: 0;
}
@media (max-width: 768px) {
    .testimonials-section .testimonial-card { padding: 2rem 1.5rem 1.5rem; }
    .testimonials-section .testimonial-text { font-size: var(--text-body); }
}

/* ── Navbar: a white material bar (Apple materials: translucent, blurred,
   bright edge, soft shadow at the scroll edge instead of a hard rule) ── */
.cp-navbar::before {
    background: rgba(255, 255, 255, 0.9);   /* stays white over the black and blue bands */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 0;
    box-shadow: 0 1px 0 rgba(15, 15, 15, 0.05), 0 10px 30px -18px rgba(15, 15, 15, 0.25);
}
.cp-nav-links {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-1);
}
.cp-nav-links a {
    color: var(--color-text);
    transition: background var(--dur-fast) var(--ease-out), transform 100ms var(--ease-out);
}
.cp-nav-links a:hover { background: rgba(15, 15, 15, 0.05); }
.cp-nav-links a:active { transform: scale(0.96); }
.cp-nav-links a.active { background: rgba(15, 15, 15, 0.06); }

@media (prefers-reduced-transparency: reduce) {
    .cp-navbar::before,
    .cp-nav-links { background: var(--color-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ── The WhatsApp action pill: red, an icon chip, a lit top edge and a
   red-tinted shadow; responds on press. ── */
.btn-hero-call,
.btn-book-call,
.cp-navbar .btn-book-call,
.cp-navbar--scrolled .btn-book-call,
.btn-cta-glass {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 48px;
    padding: 0.375rem 1.375rem 0.375rem 0.375rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-red);
    color: var(--color-text-inverse);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 500;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(120, 15, 5, 0.25), 0 10px 22px -10px rgba(216, 31, 9, 0.6);
    transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-lift) var(--ease-out), transform 100ms var(--ease-out);
}
.btn-hero-call:hover,
.btn-book-call:hover,
.cp-navbar .btn-book-call:hover,
.cp-navbar--scrolled .btn-book-call:hover,
.btn-cta-glass:hover {
    background: var(--color-red-deep);
    color: var(--color-text-inverse);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 4px rgba(120, 15, 5, 0.25), 0 16px 32px -12px rgba(216, 31, 9, 0.7);
}
.btn-hero-call:active,
.btn-book-call:active,
.btn-cta-glass:active { transform: scale(0.97); }

.cta-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-red);
}
.cta-chip svg { width: 18px; height: 18px; }

/* Nav size: compact, just "Chat" beside the chip (the label stays in aria-label) */
.cp-navbar .btn-book-call { min-height: 44px; gap: 0.5rem; padding: 0.3125rem 1.125rem 0.3125rem 0.3125rem; }
.cp-navbar .btn-book-call .cta-chip { width: 32px; height: 32px; }
.cp-navbar .btn-book-call .cta-chip svg { width: 16px; height: 16px; }
/* Bootstrap's d-lg-inline-block forces inline-block !important on desktop,
   which kills the flex gap between chip and label; restore flex there. */
@media (min-width: 992px) {
    .cp-navbar .btn-book-call.d-lg-inline-block { display: inline-flex !important; }
}
.cp-mobile-menu .btn-book-call { display: flex; justify-content: center; }
/* The scroll reveal's settled state (.revealed → transform: none) outranks a
   plain :hover, so the lift is restated at reveal specificity. */
.js-reveal .work-tile[data-reveal].revealed:hover { transform: translateY(var(--lift)); }
/* The mobile menu panel matches the white bar */
.cp-mobile-menu {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 18px 40px -24px rgba(15, 15, 15, 0.35);
}

/* ════════════════════════════════════════════════════════════════════
   ABOUT PASS (2026-10-19, branch color-pass). The Home colour, card and
   motion principles applied to About. New sections use .ab-* classes so
   none of the v1 about rules above interfere. Delete this block (plus
   about.blade.php changes) to roll back.
   ════════════════════════════════════════════════════════════════════ */

/* Shared brand tag (the CP-BRAND photo pill) */
.ab-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-small);
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text-inverse);
    white-space: nowrap;
}
.ab-tag--blue { background: var(--color-blue); }
.ab-tag--red  { background: var(--color-red); }

/* ── Hero: B&W photo, legibility scrim, brand value tags ── */
.ab-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 88svh;
    padding: 9rem 0 var(--space-section);
    overflow: hidden;
    background: var(--color-dark);
    color: var(--color-text-inverse);
}
.ab-hero-photo {
    position: absolute;
    /* 20% taller than the hero, anchored at the top, so the parallax drift
       never uncovers an edge */
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.1) brightness(0.62);
    will-change: transform;
}
/* Darkens only where the headline sits (bottom left), so the photo stays bright */
.ab-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(10, 10, 10, 0.82), rgba(10, 10, 10, 0) 62%),
        linear-gradient(to right, rgba(10, 10, 10, 0.4), rgba(10, 10, 10, 0) 55%),
        rgba(10, 10, 10, 0.22);
    pointer-events: none;
}
.ab-hero-inner { position: relative; z-index: 2; }
.ab-hero-title { color: var(--color-text-inverse); margin: 0 0 1.5rem; }
.ab-hero-lead {
    max-width: 38ch;
    margin: 0;
    font-size: var(--text-lead);
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--color-text-inverse);
}

.ab-hero-tags { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; list-style: none; }
.ab-hero-tags .ab-tag {
    position: absolute;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.55);
}
/* All four sit in the open band above the headline */
.ab-hero-tag-1 { top: 20%; right: 38%; }
.ab-hero-tag-2 { top: 27%; right: 10%; }
.ab-hero-tag-3 { top: 34%; right: 52%; }
.ab-hero-tag-4 { top: 37%; right: 24%; }
@media (prefers-reduced-motion: no-preference) {
    .ab-hero-tags .ab-tag { animation: ab-tag-drift 11s var(--ease-inout) infinite alternate; }
    .ab-hero-tag-2 { animation-delay: -3s !important; }
    .ab-hero-tag-3 { animation-delay: -6s !important; }
    .ab-hero-tag-4 { animation-delay: -8s !important; }
}
@keyframes ab-tag-drift { to { transform: translate(6px, -8px); } }
@media (max-width: 768px) {
    .ab-hero { min-height: 82svh; padding-top: 7rem; }
    .ab-hero-tag-1 { top: 14%; right: 42%; }
    .ab-hero-tag-2 { top: 20%; right: 6%; }
    .ab-hero-tag-3 { top: 27%; right: 52%; }
    .ab-hero-tag-4 { top: 32%; right: 12%; }
}

/* ── How we work: the CP mark as a vein ── */
.ab-flow {
    --flow: var(--color-blue);
    overflow: visible;   /* the theme's section overflow: hidden would disable the sticky mark on phones */
    background: var(--color-bg);
    padding: calc(80px + 2.5rem) 0 var(--space-section);
}
.ab-flow-title {
    margin: 0 0 var(--space-block);
    font-family: var(--font-sans) !important;
    font-size: var(--text-display);
    font-weight: 600;
    line-height: 0.92;
    letter-spacing: -0.026em;
    text-transform: uppercase;
    color: var(--color-text);
}
.ab-flow-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-block);
    align-items: center;
}
.ab-flow-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.75rem; }
.ab-flow-step { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }
.ab-flow-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--flow);
    color: var(--color-text-inverse);
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
}
.ab-flow-step h3 {
    margin: 0.35rem 0 0.4rem;
    font-size: var(--text-h3);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--color-text);
}
.ab-flow-step p { margin: 0; max-width: 44ch; font-size: var(--text-body); line-height: 1.55; color: var(--color-text-muted); }
.ab-word { display: inline-block; }

.ab-flow-art { position: relative; aspect-ratio: 268 / 180; }
.ab-flow-vessel,
.ab-flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The vessel: the mark itself, pale, so the flow reads as moving inside it */
.ab-flow-vessel { color: #E2E2E2; }
.ab-flow-vessel .cp-mark-dot { fill: #E2E2E2; }
.ab-flow-path {
    fill: none;
    stroke: var(--flow);
    stroke-width: 18;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Step nodes: valve rings on the vein, grey until the flow reaches them */
.ab-flow-node { fill: var(--color-surface); stroke: var(--flow); stroke-width: 4; }
.ab-flow.is-live .ab-flow-node { stroke: #C9C9C9; }
.ab-flow-dot { fill: var(--color-red); }

@media (max-width: 991px) {
    .ab-flow { padding-top: var(--space-section); }
    .ab-flow-grid { grid-template-columns: minmax(0, 1fr); }
    /* Phones: the mark sticks under the nav while the steps scroll beneath it,
       so the flow stays in view as each step lights up */
    .ab-flow-grid { align-items: start; }
    .ab-flow-art {
        order: -1;
        position: sticky;
        top: 64px;
        z-index: 1;
        width: 100%;
        max-width: 32rem;
        background: var(--color-bg);
        box-shadow: 0 0 0 1rem var(--color-bg);
    }
}

/* ── Who we are: full-bleed duotone photo, copy on top, cards overlapping ── */
.ab-who { padding: 0 0 var(--space-section); background: var(--color-dark); color: var(--color-text-inverse); }
.ab-who-media {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(88vh, 54rem);
    padding: var(--space-section) 0 calc(var(--space-section) + 4rem);
    overflow: hidden;
}
.ab-who-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05) brightness(0.8);
    transform-origin: 60% 50%;
}
/* Cross Blue duotone, then a dark fade where the copy sits */
.ab-who-media::before { content: ''; position: absolute; inset: 0; background: var(--color-blue); mix-blend-mode: color; opacity: 0.6; z-index: 1; }
.ab-who-media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        /* bottom: ends in the section's exact black so the photo dissolves into it */
        linear-gradient(to top, var(--color-dark) 0%, var(--color-dark) 6%, rgba(10, 10, 10, 0.75) 26%, rgba(10, 10, 10, 0) 58%),
        linear-gradient(to right, rgba(10, 10, 10, 0.85), rgba(10, 10, 10, 0.25) 60%, rgba(10, 10, 10, 0) 80%);
}
.ab-who-copy { position: relative; z-index: 2; }
.ab-who-heading { color: var(--color-text-inverse); margin-bottom: 1.5rem; }
.ab-who-lead { max-width: 46ch; margin: 0; font-size: var(--text-lead); line-height: 1.4; letter-spacing: -0.01em; color: var(--color-text-inverse); }
.ab-who-lead strong { font-weight: 600; }

/* The cards ride up over the photo's lower edge */
.ab-who-cards {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-grid-gap);
    margin-top: -5rem;
}
.ab-who-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 2.5rem;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
    transition: transform var(--dur-lift) var(--ease-out);
}
.ab-who-card:hover { transform: translateY(var(--lift)); }
.ab-who-card h3 { margin: 0; font-size: var(--text-h2); font-weight: 600; line-height: 1; text-transform: uppercase; letter-spacing: -0.016em; }
.ab-who-card p { margin: 0; font-size: var(--text-body); line-height: 1.55; color: var(--color-text-muted); }
.ab-who-card--blue { background: var(--color-blue); color: var(--color-text-inverse); }
.ab-who-card--blue p { color: var(--color-text-inverse); }
@media (max-width: 991px) {
    .ab-who-media { min-height: 0; padding: 7rem 0 calc(var(--space-block) + 4rem); }
    .ab-who-cards { grid-template-columns: minmax(0, 1fr); margin-top: -3rem; }
    .ab-who-card { padding: 2rem 1.5rem; }
}

/* ── Team: B&W portraits that colour in on hover ── */
.ab-team { padding: var(--space-section) 0; background: var(--color-surface); }
.ab-team .svc-heading { margin-bottom: var(--space-block); }
.ab-team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-grid-gap); }
.ab-member {
    margin: 0;
    background: var(--color-surface);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-lift) var(--ease-out), box-shadow var(--dur-lift) var(--ease-out);
}
.ab-member:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-2); }
.ab-member-photo { aspect-ratio: 4 / 4.4; overflow: hidden; background: var(--color-recessed); display: flex; align-items: center; justify-content: center; }
.ab-member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: filter 700ms var(--ease-out), transform 900ms var(--ease-out);
}
.ab-member:hover .ab-member-photo img { filter: grayscale(0); transform: scale(1.03); }
.ab-member-initial { font-size: var(--text-h2); font-weight: 600; color: var(--color-text-muted); }
.ab-member figcaption { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.25rem var(--space-card-pad) 1.5rem; }
.ab-member-name { font-size: var(--text-h3); font-weight: 700; color: var(--color-text); }
.ab-member-role { font-size: var(--text-small); color: var(--color-text-muted); }
@media (max-width: 991px) { .ab-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 576px) { .ab-team-grid { grid-template-columns: minmax(0, 1fr); } }
/* The reveal's settled transform outranks :hover; restate the lift */
.js-reveal .ab-member[data-reveal].revealed:hover,
.js-reveal .ab-who-card[data-reveal].revealed:hover { transform: translateY(var(--lift)); }

/* ── Closing CTA in Cross Blue, mark in black (CP-BRAND slide 13) ── */
.cta-section--blue { background: var(--color-blue); }
.cta-section--blue .cta-supermark { color: var(--color-dark); }
/* The red full stop vanishes on blue; this one goes white */
.cta-section--blue .cta-headline .accent-dot { color: var(--color-text-inverse); }
.cta-section--blue .cta-circle-btn { background: var(--color-surface); color: var(--color-blue); }
.cta-section--blue .cta-circle-btn:hover { background: var(--color-dark); color: var(--color-text-inverse); }

/* ════════════════════════════════════════════════════════════════════
   WORK PASS (2026-10-19, branch color-pass). Work index and project
   page in the Home/About language: oversized titles, the blueprint, a
   black grid band, full-bleed cover fading to black, a lifted facts card,
   the live site scrolling beside the story, and the blue closing band.
   ════════════════════════════════════════════════════════════════════ */
body.page-works { background: var(--color-bg); }

/* Tiles: the feature spans the row and runs wider; filtered tiles hide */
.work-tile[hidden] { display: none; }
.work-tile--span { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.work-tile--feature .work-tile-title { font-size: var(--text-h2); font-weight: 600; letter-spacing: -0.016em; }
@media (max-width: 768px) {
    .work-tile--span { aspect-ratio: 4 / 3.4; }
    .work-tile--feature .work-tile-title { font-size: var(--text-h3); }
}

/* Shared oversized page title (as How we work on About) */
.wk-hero-title,
.wk-cover-title {
    margin: 0;
    font-family: var(--font-sans) !important;
    font-size: var(--text-display);
    font-weight: 600;
    line-height: 0.92;
    letter-spacing: -0.026em;
    text-transform: uppercase;
}

/* ── Index hero: title + lead, the blueprint drawing in on the right ── */
.wk-hero {
    position: relative;
    overflow: hidden;
    padding: calc(80px + 4rem) 0 var(--space-section);
    background: var(--color-bg);
}
.wk-hero-inner { position: relative; z-index: 1; }
.wk-hero-title { color: var(--color-text); margin-bottom: 1.5rem; }
.wk-hero-lead { max-width: 40ch; margin: 0; font-size: var(--text-lead); line-height: 1.35; letter-spacing: -0.01em; color: var(--color-text-muted); }
.wk-hero-blueprint {
    top: 3rem;
    right: -8vw;
    width: min(56vw, 50rem);
    stroke: rgba(15, 15, 15, 0.14);
}
@media (max-width: 768px) {
    .wk-hero-blueprint { top: 4rem; right: -40vw; width: 120vw; }
}

/* ── Index grid on the black band ── */
.wk-grid-band { padding: var(--space-section) 0; background: var(--color-dark); }
.wk-grid-band .work-tile { box-shadow: none; }
.wk-grid-band .work-tile:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 32px 64px -24px rgba(0, 0, 0, 0.9); }
.wk-filters { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-bottom: var(--space-block); }
.wk-filter {
    min-height: 44px;
    padding: 0 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-inverse);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform 100ms var(--ease-out);
}
.wk-filter:hover { border-color: rgba(255, 255, 255, 0.6); }
.wk-filter:active { transform: scale(0.97); }
.wk-filter.is-active { background: var(--color-blue); border-color: var(--color-blue); }
.wk-filter:focus-visible { outline: 2px solid var(--color-text-inverse); outline-offset: 3px; }
.wk-empty { margin: 0; font-size: var(--text-lead); color: var(--color-text-inverse); }
.wk-empty a { text-decoration: underline; text-underline-offset: 4px; }

/* ── Project page: full-bleed cover fading into black ── */
.wk-cover {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 80svh;
    padding: 9rem 0 calc(var(--space-section) + 3rem);
    overflow: hidden;
    background: var(--color-dark);
    color: var(--color-text-inverse);
}
/* 20% taller than the cover so the parallax drift never shows an edge */
.wk-cover-img { position: absolute; top: 0; left: 0; width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.wk-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, var(--color-dark) 0%, var(--color-dark) 6%, rgba(10, 10, 10, 0.75) 30%, rgba(10, 10, 10, 0) 65%),
        linear-gradient(to bottom, rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0) 25%);
    pointer-events: none;
}
.wk-cover-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.wk-cover-title { color: var(--color-text-inverse); }
.wk-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    font-size: var(--text-small);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}
.wk-back:hover { color: var(--color-text-inverse); }
.wk-cover-tag { position: static; }

/* Project facts: a white card riding over the cover's lower edge */
.wk-facts-wrap { position: relative; z-index: 2; margin-top: -4.5rem; }
.wk-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1.5rem 2rem;
    margin: 0;
    padding: 2rem 2.5rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-2);
}
.wk-fact dt { margin: 0 0 0.35rem; font-family: var(--font-mono); font-size: var(--text-small); font-weight: 400; letter-spacing: 0.02em; color: var(--color-text-muted); }
.wk-fact dd { margin: 0; font-size: var(--text-body); font-weight: 600; line-height: 1.35; color: var(--color-text); }
/* A domain never breaks mid-word */
.wk-fact dd a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-blue); white-space: nowrap; }
.wk-fact dd a:hover { color: var(--color-blue-deep); }
@media (max-width: 768px) {
    .wk-cover { min-height: 70svh; padding-top: 7rem; }
    .wk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1.5rem; }
    .wk-fact dd { font-size: var(--text-body); }
}

/* The project: story beside the live site */
.wk-story { padding: var(--space-section) 0; }
/* A narrower text column beside a bigger window onto the live site */
.wk-story-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.wk-story-grid--solo { grid-template-columns: minmax(0, 1fr); }
.wk-story-lead { max-width: 30ch; margin: 0 0 1.25rem; font-size: var(--text-lead); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-text); }
.wk-story-body { max-width: 52ch; margin: 0 0 2rem; font-size: var(--text-body); line-height: 1.65; color: var(--color-text-muted); }
.wk-story-link { display: inline-flex; align-items: center; gap: 0.4rem; }
.wk-story-live .hero-carousel-card { width: 100%; margin: 0; box-shadow: var(--shadow-2); }
/* A taller window onto the live site than the Home strip uses */
.wk-story-live .scrolling-site-viewport { aspect-ratio: 4 / 3.4; max-height: none; }
@media (max-width: 991px) { .wk-story-grid { grid-template-columns: minmax(0, 1fr); } }

/* Gallery */
.wk-gallery { padding: 0 0 var(--space-section); }
.wk-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-grid-gap); }
.wk-gallery-item { margin: 0; overflow: hidden; box-shadow: var(--shadow-1); }
.wk-gallery-item--wide { grid-column: 1 / -1; }
.wk-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 768px) { .wk-gallery-grid { grid-template-columns: minmax(0, 1fr); } }

/* Next project */
.wk-next { padding: var(--space-section) 0; background: var(--color-surface); }
.wk-next-heading { margin-bottom: var(--space-block); }
/* Tiles can carry two service tags (brand red + digital blue) */
.work-tags { position: absolute; top: 1.25rem; left: 1.25rem; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.work-tags .work-tag { position: static; }

/* ── Case study (project page). Every block renders only when filled. ── */
.wk-cover-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* The challenge / The result: a label column beside one large statement */
.wk-statement { padding: var(--space-section) 0; background: var(--color-surface); }
.wk-statement-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
    gap: var(--space-block);
    align-items: baseline;
}
.wk-statement-label {
    margin: 0;
    font-size: var(--text-h3);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text);
}
.wk-statement-text {
    margin: 0;
    max-width: 34ch;
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--color-text);
}

/* Chapters: one per discipline, with its deliverables */
.wk-chapter { padding: var(--space-section) 0; background: var(--color-bg); }
.wk-chapter--digital { background: var(--color-surface); }
.wk-chapter-head { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom: var(--space-block); }
.wk-chapter-head .work-tag { position: static; font-family: var(--font-mono); }
.wk-chapter-head .svc-heading { margin: 0; }
.wk-chapter-text { max-width: 60ch; margin: 0; font-size: var(--text-lead); line-height: 1.4; letter-spacing: -0.01em; color: var(--color-text-muted); }
.wk-deliverables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-grid-gap); }
.wk-deliverable { margin: 0; background: var(--color-surface); box-shadow: var(--shadow-1); overflow: hidden; }
.wk-deliverable--wide { grid-column: 1 / -1; }
.wk-deliverable img { display: block; width: 100%; height: auto; }
.wk-deliverable figcaption {
    padding: 0.875rem var(--space-card-pad);
    font-family: var(--font-mono);
    font-size: var(--text-small);
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
}

/* The result and the client's words, on the page's black band */
.wk-result { padding: var(--space-section) 0; background: var(--color-dark); color: var(--color-text-inverse); }
.wk-result .wk-statement-label,
.wk-result .wk-statement-text { color: var(--color-text-inverse); }
.wk-result .wk-statement-grid + .wk-quote { margin-top: var(--space-section); }
.wk-quote { margin: 0; max-width: 52rem; }
.wk-quote blockquote {
    margin: 0 0 1.75rem;
    padding: 0;
    border: 0;
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--color-text-inverse);
}
.wk-quote figcaption { display: flex; flex-direction: column; gap: 0.25rem; font-size: var(--text-body); }
.wk-quote figcaption span { font-size: var(--text-small); color: rgba(255, 255, 255, 0.75); }

@media (max-width: 768px) {
    .wk-statement-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .wk-deliverables { grid-template-columns: minmax(0, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════
   CONTACT PASS (2026-10-19, branch color-pass). Contact in the Home/About/
   Work language: a silk stage with the mark as a drifting watermark, a
   WhatsApp-style chat card on the lift shadow, and an open steps row.
   Delete this block (plus contact.blade.php) to roll back.
   ════════════════════════════════════════════════════════════════════ */

/* ── Stage ── */
.ct-stage {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: calc(100svh - 80px);
    padding: 4rem 0 var(--space-section);
    background: var(--color-bg);
}
.ct-supermark {
    position: absolute;
    right: -18vw;
    bottom: -16vw;
    width: min(96vw, 86rem);
    height: auto;
    color: var(--color-recessed);   /* a watermark: silk on silk, the dot stays red */
    pointer-events: none;
    will-change: transform;
}
.ct-stage-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-block) var(--space-grid-gap);
    align-items: center;
}
.ct-title { margin: 0 0 1.5rem; }
.ct-lead {
    max-width: 31ch;
    margin: 0 0 2.5rem;
    font-size: var(--text-lead);
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--color-text-muted);
}
.ct-stage .ct-wa { min-height: 56px; font-size: var(--text-body); padding-right: 1.75rem; }
.ct-stage .ct-wa .cta-chip { width: 44px; height: 44px; }
.ct-email { margin: 2rem 0 0; font-size: var(--text-body); color: var(--color-text-muted); }
.ct-email a {
    color: var(--color-text);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-underline-offset: 0.25em;
    transition: text-decoration-color var(--dur-fast) var(--ease-out);
    overflow-wrap: anywhere;
}
.ct-email a:hover { color: var(--color-text); text-decoration-color: var(--color-blue); }

/* ── The chat card, in WhatsApp's own grammar (header with back and call
   icons, patterned wallpaper, tailed bubbles, green sent bubble with read
   ticks, pill composer and round send). The greens are WhatsApp's, used
   only inside this card so it reads as the app it opens. ── */
.ct-chat {
    --wa-out: #D9FDD3;
    --wa-green: #1DAA61;
    --wa-tick: #53BDEB;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 27rem;
    justify-self: end;
    overflow: hidden;
    border-radius: 22px;
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    box-shadow: var(--shadow-2);
    transition: transform var(--dur-lift) var(--ease-out), box-shadow var(--dur-lift) var(--ease-out);
}
.ct-chat:hover { color: var(--color-text); transform: translateY(var(--lift)); box-shadow: 0 4px 8px rgba(15, 15, 15, 0.06), 0 44px 80px -24px rgba(15, 15, 15, 0.3); }
.ct-chat:active { transform: scale(0.99); transition-duration: 100ms; }
.ct-chat svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ct-chat-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem 0.875rem 1rem;
    border-bottom: 1px solid var(--color-border);
}
.ct-chat-back { width: 18px; height: 18px; flex: 0 0 auto; color: var(--color-text-muted); }
.ct-chat-back, .ct-chat-back * { fill: currentColor; stroke: none; }
.ct-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-dark);
    color: var(--color-text-inverse);
}
.ct-avatar .cp-mark { width: 25px; height: auto; }
.ct-avatar .cp-mark, .ct-avatar .cp-mark * { stroke: none; }
.ct-avatar .cp-mark path { fill: currentColor; }
.ct-chat-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.2; }
.ct-chat-who strong { font-size: var(--text-body); font-weight: 600; }
.ct-chat-who span { font-size: var(--text-small); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-chat-tools { display: flex; gap: 1.1rem; color: var(--color-text); }
.ct-chat-tools svg { width: 21px; height: 21px; }

.ct-thread {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 18rem;
    justify-content: flex-end;
    padding: 1.25rem 1rem 1rem;
    background: var(--color-bg) url('../../images/chat-wallpaper.svg') 0 0 / 180px 180px;
}
.ct-day {
    align-self: center;
    margin-bottom: auto;
    padding: 0.3rem 0.75rem;
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: 0 1px 1px rgba(15, 15, 15, 0.06);
    font-size: var(--text-small);
    color: var(--color-text-muted);
}
.ct-msg {
    position: relative;
    display: block;
    max-width: 82%;
    padding: 0.5rem 0.75rem 0.4rem;
    border-radius: 10px;
    font-size: var(--text-body);
    line-height: 1.4;
    box-shadow: 0 1px 1px rgba(15, 15, 15, 0.07);
    transition: opacity 360ms var(--ease-out), transform 480ms cubic-bezier(0.34, 1.3, 0.64, 1);
}
/* Tails: a small corner wedge on the first bubble of each side */
.ct-msg::before {
    content: '';
    position: absolute;
    top: 0;
    width: 10px;
    height: 12px;
}
.ct-msg--out { align-self: flex-end; background: var(--wa-out); border-top-right-radius: 0; transform-origin: bottom right; }
.ct-msg--out::before { right: -8px; background: var(--wa-out); clip-path: polygon(0 0, 100% 0, 0 100%); }
.ct-msg--in  { align-self: flex-start; background: var(--color-surface); border-top-left-radius: 0; transform-origin: bottom left; }
.ct-msg--in::before { left: -8px; background: var(--color-surface); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.ct-msg.is-pending { opacity: 0; transform: translateY(8px) scale(0.94); }
.ct-msg-meta {
    float: right;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin: 0.45rem 0 -0.1rem 0.6rem;
    font-size: 12px;   /* decorative timestamp, aria-hidden with the thread */
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.ct-ticks { width: 17px; height: 10px; color: var(--wa-tick); }

.ct-typing {
    display: inline-flex;
    align-self: flex-start;
    gap: 4px;
    padding: 0.85rem 0.9rem;
    border-radius: 10px;
    border-top-left-radius: 0;
    background: var(--color-surface);
    box-shadow: 0 1px 1px rgba(15, 15, 15, 0.07);
}
.ct-typing[hidden] { display: none; }
.ct-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text-muted);
    animation: vignette-typing-pulse 900ms var(--ease-inout) infinite;
}
.ct-typing span:nth-child(2) { animation-delay: 150ms; }
.ct-typing span:nth-child(3) { animation-delay: 300ms; }

.ct-compose {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: var(--color-bg);
}
.ct-compose-bar {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0 0.9rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-muted);
}
.ct-compose-bar svg { flex: 0 0 auto; width: 20px; height: 20px; }
.ct-compose-field {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: var(--text-body);
}
.ct-chat.is-typing .ct-compose-field { color: var(--color-text); }
.ct-send {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--wa-green);
    color: var(--color-text-inverse);
    transition: transform var(--dur-lift) var(--ease-out);
}
.ct-send svg { width: 19px; height: 19px; transform: translateX(-1px); }
.ct-chat:hover .ct-send,
.ct-chat.is-typing .ct-send { transform: scale(1.08); }

/* ── How a project starts: open columns, Apple-style. Hierarchy from
   size, weight and space alone; a hairline above each step fills with
   blue as the row arrives (fully drawn by default). ── */
.ct-steps { padding: var(--space-section) 0; background: var(--color-surface); }
.ct-steps-heading { margin: 0 0 calc(var(--space-block) * 1.5); }
.ct-step-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3.5rem var(--space-block);
    margin: 0;
    padding: 0;
    list-style: none;
}
.ct-step {
    --fill: 1;
    position: relative;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}
.ct-step::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-blue);
    transform: scaleX(var(--fill));
    transform-origin: left center;
}
.ct-step-num {
    display: block;
    margin-bottom: 2.5rem;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    opacity: 0.55;
}
.ct-step h3 { margin: 0 0 0.75rem; font-size: var(--text-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
.ct-step p { margin: 0; max-width: 32ch; font-size: var(--text-body); line-height: 1.55; color: var(--color-text-muted); }

/* The price: one large statement, Apple's "From" pattern */
.ct-price {
    margin-top: var(--space-section);
    padding-top: var(--space-block);
    border-top: 1px solid var(--color-border);
}
.ct-price-label {
    margin: 0 0 1rem;
    font-family: var(--font-mono);
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.ct-price-figure {
    margin: 0;
    font-size: var(--text-display);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--color-text);
}
.ct-price-alt { color: var(--color-text-muted); font-weight: 400; opacity: 0.6; }
.ct-price-note { margin: 1.25rem 0 0; font-size: var(--text-body); color: var(--color-text-muted); }

@media (max-width: 991px) {
    .ct-stage { min-height: 0; padding-top: 3rem; }
    .ct-stage-grid { grid-template-columns: minmax(0, 1fr); }
    .ct-chat { justify-self: stretch; max-width: 30rem; }
    .ct-supermark { right: -50vw; bottom: auto; top: 30%; width: 150vw; }
    .ct-step-list { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .ct-step-num { margin-bottom: 1.25rem; }
}
@media (max-width: 576px) {
    .ct-thread { min-height: 15rem; }
    .ct-price-figure { font-size: clamp(2.75rem, 13vw, 3.75rem); }
    .ct-price-alt { display: block; }
}

/* Floating doodles on the stage: the wallpaper marks, a touch stronger.
   The span carries the scroll parallax (GSAP), the mark inside the drift. */
.ct-doodle { position: absolute; z-index: 0; width: var(--w); pointer-events: none; }
.ct-doodle .cp-mark { display: block; width: 100%; height: auto; color: rgba(15, 15, 15, 0.09); transform: rotate(var(--r)); }
.ct-doodle .cp-mark-dot { fill: rgba(15, 15, 15, 0.09); }
.ct-doodle:nth-of-type(3n) .cp-mark-dot { fill: var(--color-red); fill-opacity: 0.55; }
@media (prefers-reduced-motion: no-preference) {
    .ct-doodle .cp-mark { animation: ct-doodle-float 9s var(--ease-inout) infinite alternate; animation-delay: inherit; }
}
@keyframes ct-doodle-float { to { transform: rotate(calc(var(--r) + 8deg)) translate(6px, -10px); } }
@media (max-width: 991px) {
    .ct-doodle { width: calc(var(--w) * 0.7); }
    .ct-doodle:nth-of-type(n+5) { display: none; }
}
@media (max-width: 576px) {
    /* Phones: two doodles, in the open space right of the headline */
    .ct-doodle:nth-of-type(n+2):not(:nth-of-type(6)) { display: none; }
    .ct-doodle:nth-of-type(1) { left: auto !important; right: 7%; top: 3% !important; }
    .ct-doodle:nth-of-type(6) { left: auto !important; right: 24%; top: 7.5% !important; }
}