/* Marketing page styles, layered on site.css. */

/* ---- Carried over from the live homepage ---- */
.lime-text { color: var(--zest-600); }
.yuzu-card:hover { transform: translateY(-5px); }
.layout-calm .yuzu-card:hover,
.layout-calm .vision-step:hover { transform: none; }

@media (min-width: 768px) {
    header .hero-title { font-size: clamp(1.75rem, calc(5.46875vw - 14px), 3.5rem); }
}

.svc-pulse { animation: svcPulse 2.5s ease-in-out infinite; }
.svc-flow  { stroke-dasharray: 8 4; animation: svcFlow 1.5s linear infinite; }
.svc-grow  { animation: svcGrow 2s ease-in-out infinite alternate; }
@keyframes svcPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.05); }
}
@keyframes svcFlow { to { stroke-dashoffset: -24; } }
@keyframes svcGrow {
    from { transform: scaleY(0.7); transform-origin: bottom; }
    to   { transform: scaleY(1); transform-origin: bottom; }
}

.vision-step { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.vision-step:hover { transform: translateY(-5px); }
.vision-letter {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--carbon-500);
    color: var(--paper-100);
    font-weight: 800;
    font-size: 1.1rem;
}
.vision-arrow { display: none; }
@media (min-width: 768px) {
    .vision-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: -1.6rem;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        width: 2rem;
        height: 2rem;
        border-radius: var(--radius-full);
        background: var(--paper-100);
        color: var(--kumquat-700);
        font-weight: 800;
        box-shadow: var(--shadow-md);
    }
}

/* ---- Service accents for the v2 slugs ---- */
.mega-item[href*="business-intelligence"] { --svc-accent: var(--svc-delivery); }
.mega-item[href*="web-apps"] { --svc-accent: var(--svc-mvp-to); }
.mega-item[href*="training"] { --svc-accent: var(--svc-enablement); }

/* ---- Dossierly showcase ----
   Dossierly's own brand (from yuzu_crm src/styles/tokens.css): graphite surface,
   indigo action colour, Nunito ExtraBold wordmark with the paper-plane mark. */
:root {
    --dly-graphite-900: #111827;
    --dly-graphite-700: #1f2937;
    --dly-graphite-300: #9ca3af;
    --dly-indigo-50: #eef2ff;
    --dly-indigo-300: #a5b4fc;
    --dly-indigo-500: #6366f1;
    --dly-indigo-600: #4f46e5;
}

.dly-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-family: "Nunito", var(--font-sans);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--dly-graphite-900);
}
.dly-logo svg { width: 0.95em; height: 0.95em; transform: translateY(0.06em); }
.dly-logo-plane { fill: var(--dly-graphite-900); }
.dly-logo-fold { stroke: var(--dly-indigo-500); }
.dly-logo--inverted { color: var(--paper-100); }
.dly-logo--inverted .dly-logo-plane { fill: var(--paper-100); }
.dly-logo--inverted .dly-logo-fold { stroke: var(--dly-indigo-300); }
.dly-logo--xl { font-size: clamp(2.5rem, 5vw, 3.75rem); }

.dly-tagline {
    display: block;
    margin-top: var(--space-3);
    max-width: 44rem;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--carbon-700);
}
.dly-explore {
    list-style: none;
    margin-left: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.dly-explore a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-full);
    background: var(--dly-indigo-50);
    color: var(--dly-indigo-600);
    font-weight: 700;
    text-decoration: none;
}
.dly-explore a:hover { background: var(--dly-indigo-500); color: #fff; }

.dly-kicker {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--dly-indigo-500);
}
.dly-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-full);
    background: var(--dly-indigo-500);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--duration-fast) ease, transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.dly-btn:hover { background: var(--dly-indigo-600); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.dossierly-section {
    position: relative;
    overflow: hidden;
    background: var(--dly-graphite-900);
    color: var(--paper-100);
}
/* Soft indigo glow behind the product shots. */
.dossierly-section::before {
    content: "";
    position: absolute;
    right: -10%;
    top: 10%;
    width: 60%;
    height: 80%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--dly-indigo-500) 35%, transparent), transparent);
    pointer-events: none;
}
.dossierly-showcase {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;
}
@media (min-width: 1024px) {
    .dossierly-showcase { grid-template-columns: 5fr 6fr; }
}
.dossierly-kicker {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--dly-indigo-300);
}
.dossierly-title { margin: var(--space-4) 0 0; }
.dossierly-lead {
    margin: var(--space-5) 0 0;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--paper-300);
}
.dossierly-proof {
    margin: var(--space-4) 0 0;
    line-height: 1.6;
    color: var(--dly-graphite-300);
}
.dossierly-chips {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.dossierly-chips li {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: var(--dly-graphite-700);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--paper-200);
}
.dossierly-actions {
    margin-top: var(--space-8);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.dossierly-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 1.4rem;
    border-radius: var(--radius-full);
    background: var(--dly-indigo-500);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.dossierly-cta:hover { background: var(--dly-indigo-600); transform: translateY(-2px); }
.dossierly-cta--ghost {
    background: transparent;
    color: var(--paper-100);
    box-shadow: inset 0 0 0 1px var(--dly-graphite-700);
}
.dossierly-cta--ghost:hover { background: var(--dly-graphite-700); }

/* Two real screens from dossierly.ca, the dashboard in front of the client portal. */
.dossierly-visual {
    position: relative;
    min-width: 0;
    padding: 12% 0 0 10%;
}
.dly-shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}
.dly-shot--back {
    position: absolute;
    top: 0;
    left: 0;
    width: 78%;
    opacity: 0.55;
    box-shadow: var(--shadow-lg);
}
.dly-shot--front {
    position: relative;
    box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.06);
}
@media (max-width: 640px) {
    .dossierly-visual { padding: 0; }
    .dly-shot--back { display: none; }
}

/* Dossierly page gallery */
.dly-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}
@media (min-width: 900px) {
    .dly-gallery { grid-template-columns: repeat(2, 1fr); }
}
.dly-figure { margin: 0; }
.dly-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
}
.dly-figure figcaption {
    margin-top: var(--space-4);
    color: var(--carbon-400);
    line-height: 1.55;
}
.dly-figure figcaption strong {
    display: block;
    color: var(--dly-graphite-900);
    font-weight: 700;
}

/* ---- Engagement models (no pricing) ---- */
.engage { margin: 0; }
.engage-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    max-width: 56rem;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .engage-grid { grid-template-columns: 1fr 1fr; }
}
.engage-card {
    background: var(--paper-100);
    border: 1px solid var(--paper-500);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
}
.engage-card--featured { border: 2px solid var(--yuzu-400); }
.engage-icon { font-size: 1.75rem; }
.engage-card h3 {
    margin: var(--space-3) 0 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--carbon-900);
}
.engage-card p {
    margin: var(--space-2) 0 0;
    color: var(--carbon-500);
    line-height: 1.6;
}
.engage-card ul {
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-2);
}
.engage-card li {
    color: var(--carbon-600);
    font-size: 0.95rem;
}
.engage-card li::before { content: "🍋 "; }
.engage-cta {
    margin-top: var(--space-10);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
}
.engage-note { margin: 0; color: var(--carbon-400); }
/* Yuzu primary button, per the handbook: Yuzu fill, radius-lg, 2px lift with shadow-lg on hover. */
.yuzu-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 1rem 2rem;
    border-radius: var(--radius-lg);
    background: var(--yuzu-500);
    color: var(--carbon-900);
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background var(--duration-fast) ease;
}
.yuzu-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); background: var(--yuzu-400); }
.yuzu-btn:focus-visible { outline: 3px solid var(--yuzu-700); outline-offset: 3px; }

/* ---- Service pages ---- */
@media (min-width: 768px) {
    .squeeze-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
    .squeeze-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.svc-hero { position: relative; }
.svc-eyebrow--web { color: var(--kumquat-700); }
.svc-eyebrow--ai { color: var(--zest-700); }
.svc-eyebrow--train { color: var(--svc-grapefruit-ink); }
.svc-hero-fruit { display: none; }
@media (min-width: 1100px) {
    .svc-hero-fruit {
        display: block;
        position: absolute;
        right: 0;
        top: 50%;
        width: 260px;
        height: 260px;
        transform: translateY(-50%);
    }
}
.svc-intro-actions {
    margin-top: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.svc-layers {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-16);
}
@media (min-width: 768px) {
    .svc-layers { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
    .svc-layers.svc-layers--2 { grid-template-columns: repeat(2, 1fr); }
}
/* The two AI tracks carry the page, so they read larger than the foundations. */
.svc-tracks .svc-layer h3 { font-size: 1.375rem; }
.svc-tracks .svc-layer p { font-size: 1rem; }
.svc-tracks .svc-layer li { font-size: 0.95rem; }
.svc-layer h3 { margin: var(--space-3) 0 0; font-size: 1.125rem; font-weight: 800; color: var(--carbon-900); }
.svc-layer p { margin: var(--space-2) 0 0; color: var(--carbon-500); font-size: 0.95rem; line-height: 1.6; }
.svc-layer ul { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.svc-layer li { color: var(--carbon-600); font-size: 0.9rem; }
.svc-layer li::before { content: "⚡ "; }
.svc-layer-icon { font-size: 1.75rem; }

.svc-size {
    margin-bottom: var(--space-16);
}
.svc-size-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 768px) {
    .svc-size-grid { grid-template-columns: repeat(3, 1fr); }
}
.svc-size-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--paper-500);
    background: var(--paper-100);
    padding: var(--space-5) var(--space-6);
}
.svc-size-card h3 {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--yuzu-700);
}
.svc-size-card p { margin: var(--space-2) 0 0; color: var(--carbon-600); line-height: 1.55; }

.svc-cta {
    margin: var(--space-16) 0 var(--space-4);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    background: var(--carbon-900);
    color: var(--paper-100);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: center;
    justify-content: space-between;
}
.svc-cta h2 { margin: 0; font-size: 1.5rem; font-weight: 800; }
.svc-cta p { margin: var(--space-2) 0 0; color: var(--carbon-200); max-width: 36rem; line-height: 1.6; }

/* ---- Our Recipes: four service cards ----
   Follows the handbook: paper cards, shadow-only elevation (no strokes),
   radius-2xl, Yuzu as the single focal colour, 2px hover lift. */
.recipes-section { background: var(--paper-200); }
.recipes-accent { color: var(--yuzu-600); }
.recipes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
@media (min-width: 900px) {
    .recipes-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Each service keeps its menu colour: --svc-accent for tints, --svc-ink for text. */
/* One fruit per service: yuzu = BI, orange = Web Apps, lime = AI, grapefruit = Training. */
:root { --svc-grapefruit-ink: #b23a48; }
.recipe-card,
.orchard-item,
.track-card { --svc-accent: var(--svc-delivery); --svc-ink: var(--yuzu-700); --fruit: url("../assets/fruits/yuzu.svg"); }
.recipe-card--web,
.orchard-item.orchard-item--web,
.track-card--web { --svc-accent: var(--svc-mvp-to); --svc-ink: var(--kumquat-700); --fruit: url("../assets/fruits/orange.svg"); }
.recipe-card--ai,
.orchard-item.orchard-item--ai,
.track-card--ai { --svc-accent: var(--svc-ai-from); --svc-ink: var(--zest-700); --fruit: url("../assets/fruits/lime.svg"); }
.recipe-card--train,
.orchard-item.orchard-item--train,
.track-card--train { --svc-accent: var(--svc-enablement); --svc-ink: var(--svc-grapefruit-ink); --fruit: url("../assets/fruits/grapefruit.svg"); }

.recipe-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: var(--space-8);
    background: var(--paper-100);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}
.recipe-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* The service's fruit, tucked in the corner. */
.recipe-slice {
    position: absolute;
    top: -56px;
    right: -56px;
    width: 170px;
    height: 170px;
    background: var(--fruit) center / contain no-repeat;
    pointer-events: none;
}

.recipe-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.recipe-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--svc-accent) 11%, var(--paper-100));
    border: 1px solid color-mix(in srgb, var(--svc-accent) 22%, var(--paper-500));
    font-size: 1.4rem;
}
.recipe-kicker {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--carbon-400);
}
.recipe-num {
    margin-right: var(--space-2);
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--svc-ink);
}
.recipe-title {
    position: relative;
    margin: var(--space-5) 0 0;
    font-size: var(--text-h3);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--carbon-900);
}
.recipe-promise {
    margin: var(--space-1) 0 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--svc-ink);
}
.recipe-desc {
    margin: var(--space-3) 0 0;
    max-width: 34rem;
    color: var(--carbon-400);
    line-height: 1.6;
}
.recipe-glass {
    margin-top: var(--space-6);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--paper-300);
}
.recipe-glass-label {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--carbon-400);
}
.recipe-glass ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-2);
}
.recipe-glass li {
    position: relative;
    padding-left: var(--space-6);
    font-weight: 600;
    color: var(--carbon-700);
    line-height: 1.5;
}
/* Bullets: a small slice of the service's fruit. */
.recipe-glass li::before {
    background: var(--fruit) center / contain no-repeat;
}
.recipe-glass li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em;
    width: 1rem;
    height: 1rem;
}
.recipe-foot {
    margin-top: auto;
    padding-top: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;
}
.recipe-stack {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.recipe-stack li {
    padding: 2px 10px;
    border-radius: var(--radius-full);
    background: var(--paper-300);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--carbon-500);
}
.recipe-link {
    font-weight: 700;
    color: var(--carbon-900);
    text-decoration: none;
    white-space: nowrap;
}
.recipe-link span { color: var(--svc-ink); display: inline-block; transition: transform var(--duration-fast) ease; }
/* The whole card is clickable through the recipe link. */
.recipe-link::after { content: ""; position: absolute; inset: 0; }
.recipe-card:hover .recipe-link span { transform: translateX(3px); }
.recipe-link:focus-visible { outline: none; }
.recipe-card:has(.recipe-link:focus-visible) { outline: 3px solid var(--svc-accent); outline-offset: 3px; }
@media (max-width: 640px) {
    .recipe-card { padding: var(--space-6); }
    .recipe-slice { top: -46px; right: -46px; width: 110px; height: 110px; }
    .recipe-kicker { padding-right: var(--space-10); }
}

/* ---- Who we work with: one accordion panel per company size ---- */
.orchard {
    display: grid;
    gap: var(--space-4);
    interpolate-size: allow-keywords;
}
.orchard-panel {
    background: var(--paper-100);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    transition: background var(--duration-fast) ease,
                box-shadow var(--duration-normal) ease,
                transform var(--duration-fast) ease;
}
.orchard-panel[open] { box-shadow: var(--shadow-lg); }
/* Collapsed panels turn pale green on hover or keyboard focus, so the whole card reads as clickable. */
.orchard-panel:not([open]):hover,
.orchard-panel:not([open]):has(.orchard-summary:focus-visible) {
    background: var(--zest-100);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.orchard-panel:not([open]):hover .orchard-icon { background: var(--paper-100); }
.orchard-panel:not([open]):hover .orchard-chevron { background: var(--zest-200); }
.orchard-summary {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius-2xl);
}
.orchard-summary::-webkit-details-marker { display: none; }
.orchard-summary:focus-visible { outline: 3px solid var(--yuzu-400); outline-offset: 2px; }
.orchard-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    background: var(--zest-50);
    font-size: 1.5rem;
}
.orchard-heading { flex: 1; min-width: 0; display: grid; gap: 2px; }
.orchard-kicker {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--zest-700);
}
.orchard-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--carbon-900);
}
.orchard-sub { color: var(--carbon-400); font-size: var(--text-sm); }
.orchard-chevron {
    flex-shrink: 0;
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    background: var(--paper-300);
    transition: transform var(--duration-normal) ease, background var(--duration-fast) ease;
}
.orchard-chevron::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2.5px solid var(--carbon-500);
    border-bottom: 2.5px solid var(--carbon-500);
    transform: translate(-50%, -50%) rotate(45deg);
}

.orchard-panel[open] .orchard-chevron { transform: rotate(180deg); background: var(--yuzu-500); }
.orchard-panel[open] .orchard-chevron::before { border-color: var(--carbon-900); }

/* Smooth open/close where ::details-content is supported; elsewhere it simply snaps. */
.orchard-panel::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.3s ease-in-out, content-visibility 0.3s allow-discrete;
}
.orchard-panel[open]::details-content { block-size: auto; }

.orchard-body { padding: 0 var(--space-6) var(--space-6); }
.orchard-grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
@media (min-width: 768px) {
    .orchard-grid { grid-template-columns: repeat(2, 1fr); }
}
.orchard-item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    align-items: start;
    align-content: start;
    height: 100%;
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--paper-300);
    text-decoration: none;
    transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background var(--duration-fast) ease;
}
.orchard-item:hover {
    transform: translateY(-2px);
    background: var(--paper-100);
    box-shadow: var(--shadow-lg);
}
/* Service icon as the indicator, same badge as the menu; the fruit stays on the branding surfaces. */
.orchard-svc-icon {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--svc-accent) 11%, var(--paper-100));
    border: 1px solid color-mix(in srgb, var(--svc-accent) 22%, var(--paper-500));
    font-size: 1.15rem;
}
.orchard-item-label,
.orchard-item-text { grid-column: 2; }
.orchard-item-label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--svc-ink);
}
.orchard-item-label::after { content: " →"; color: var(--svc-ink); opacity: 0; transition: opacity var(--duration-fast) ease; }
.orchard-item:hover .orchard-item-label::after { opacity: 1; }
.orchard-item-text { color: var(--carbon-700); line-height: 1.55; }
@media (max-width: 640px) {
    .orchard-summary { padding: var(--space-4); gap: var(--space-3); }
    .orchard-icon { width: 2.75rem; height: 2.75rem; font-size: 1.3rem; }
    .orchard-name { font-size: 1.1rem; }
    .orchard-body { padding: 0 var(--space-4) var(--space-4); }
}

/* ---- Track record: team experience in numbers ----
   Each figure carries the colour of the service it belongs to (same tokens as the menu). */
.track-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}
@media (min-width: 640px) {
    .track-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .track-grid { grid-template-columns: repeat(3, 1fr); }
}
.track-card {
    position: relative;
    overflow: hidden;
    padding: var(--space-6);
    background: var(--paper-100);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}
.track-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
/* Quarter slice of the service's fruit, bottom-right. */
.track-card::after {
    content: "";
    position: absolute;
    right: -48px;
    bottom: -48px;
    width: 110px;
    height: 110px;
    background: var(--fruit) center / contain no-repeat;
    pointer-events: none;
}
.track-tag {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--svc-ink);
}
.track-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--svc-accent) 11%, var(--paper-100));
    border: 1px solid color-mix(in srgb, var(--svc-accent) 22%, var(--paper-500));
    font-size: 1.05rem;
}
.track-value {
    margin: var(--space-5) 0 0;
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--carbon-900);
}
.track-unit { font-size: 0.5em; font-weight: 700; letter-spacing: 0; color: var(--carbon-400); }
.track-label {
    margin: var(--space-3) 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--carbon-900);
}
.track-sub {
    position: relative;
    margin: var(--space-1) 0 0;
    max-width: 22rem;
    padding-right: var(--space-10);
    color: var(--carbon-400);
    font-size: var(--text-sm);
    line-height: 1.55;
}

/* ---- Common questions: intro + contact card on the left, grouped accordion on the right ---- */
.faq-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: start;
}
@media (min-width: 1024px) {
    .faq-layout { grid-template-columns: 5fr 7fr; gap: var(--space-16); }
    .faq-intro { position: sticky; top: 7rem; }
}
.faq-title {
    margin: var(--space-3) 0 0;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--carbon-900);
}
.faq-lead {
    margin: var(--space-3) 0 0;
    max-width: 26rem;
    color: var(--carbon-400);
    font-size: 1.125rem;
    line-height: 1.6;
}
.faq-ask {
    margin-top: var(--space-8);
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    background: var(--zest-50);
}
.faq-ask-title { margin: 0; font-weight: 700; font-size: 1.1rem; color: var(--carbon-900); }
.faq-ask-text { margin: var(--space-2) 0 0; color: var(--carbon-500); line-height: 1.6; }
.faq-ask-actions {
    margin-top: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}
.faq-ask-mail { font-weight: 600; color: var(--zest-800); text-decoration: none; }
.faq-ask-mail:hover { text-decoration: underline; }

.faq-groups { display: grid; gap: var(--space-10); }
.faq-group { display: grid; gap: var(--space-3); }
.faq-group-label {
    margin: 0 0 var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--carbon-400);
}
.faq-q {
    background: var(--paper-100);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    interpolate-size: allow-keywords;
    transition: background var(--duration-fast) ease, box-shadow var(--duration-normal) ease, transform var(--duration-fast) ease;
}
.faq-q[open] { box-shadow: var(--shadow-lg); }
.faq-q:not([open]):hover,
.faq-q:not([open]):has(summary:focus-visible) {
    background: var(--zest-100);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.faq-q summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius-xl);
}
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary:focus-visible { outline: 3px solid var(--yuzu-400); outline-offset: 2px; }
.faq-q-text { font-weight: 700; font-size: 1.05rem; color: var(--carbon-900); line-height: 1.4; }
.faq-chevron {
    flex-shrink: 0;
    position: relative;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: var(--paper-300);
    transition: transform var(--duration-normal) ease, background var(--duration-fast) ease;
}
.faq-chevron::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2.5px solid var(--carbon-500);
    border-bottom: 2.5px solid var(--carbon-500);
    transform: translate(-50%, -50%) rotate(45deg);
}
.faq-q:not([open]):hover .faq-chevron { background: var(--zest-200); }
.faq-q[open] .faq-chevron { transform: rotate(180deg); background: var(--yuzu-500); }
.faq-q[open] .faq-chevron::before { border-color: var(--carbon-900); }
.faq-q::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.3s ease-in-out, content-visibility 0.3s allow-discrete;
}
.faq-q[open]::details-content { block-size: auto; }
.faq-a { padding: 0 var(--space-6) var(--space-6); }
.faq-a p { margin: 0; max-width: 40rem; color: var(--carbon-500); line-height: 1.7; }
.faq-a a { color: var(--yuzu-800); font-weight: 600; text-decoration: underline; text-decoration-color: var(--yuzu-300); text-underline-offset: 3px; }
.faq-a a:hover { text-decoration-color: var(--yuzu-600); }
@media (max-width: 640px) {
    .faq-q summary { padding: var(--space-4) var(--space-5); }
    .faq-a { padding: 0 var(--space-5) var(--space-5); }
}

/* Keeps the keyboard focus ring visible on the dark closing band. */
.svc-cta .yuzu-btn:focus-visible { outline-color: var(--yuzu-300); }

/* ---- Service page examples: the problem and outcome first, then the screen ---- */
.ex { margin-bottom: var(--space-16); }
.ex-copy {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}
.ex-meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
}
.ex-tag { letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--carbon-500); }
.ex-badge {
    padding: 2px 10px;
    border-radius: var(--radius-full);
    background: var(--paper-300);
    color: var(--carbon-400);
}
.ex-badge--live { background: var(--zest-100); color: var(--zest-800); }
.ex-title {
    margin: var(--space-3) 0 0;
    font-size: var(--text-h3);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--carbon-900);
}
.ex-link { display: inline-block; margin-top: var(--space-3); font-weight: 700; color: var(--carbon-900); text-decoration: none; }
.ex-link span { color: var(--yuzu-600); }
.ex-link:hover { text-decoration: underline; text-decoration-color: var(--yuzu-400); text-underline-offset: 3px; }
.ex-shot { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--shadow-lg); }
.ex-programs { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 900px) {
    .ex-programs { grid-template-columns: repeat(2, 1fr); }
}
.ex-visual .mock-body { min-height: 0; overflow-x: auto; }
/* No side-stroke tiles inside the mocks. */
.ex-visual .pbi-kpi { border-left: 0; }
/* The live CSS points at undefined --info tones, which leaves these bars invisible. */
.ex-visual .funnel-row .f-bar { background: linear-gradient(90deg, var(--yuzu-300), var(--yuzu-500)); color: var(--carbon-900); }
@media (max-width: 640px) {
    .ex-visual .pbi-kpi-row:not(.pbi-kpi-row--exec) { grid-template-columns: repeat(2, 1fr); }
}
.ex-visual .mock-titlebar .text-gray-400 { color: var(--carbon-200); }

/* ---- Service pages: proof first ---- */
.proof { margin-bottom: var(--space-16); }
.proof-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 640px) {
    .proof-grid { grid-template-columns: repeat(3, 1fr); }
}
.proof-item {
    padding: var(--space-6);
    background: var(--paper-100);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
}
.proof-value { margin: 0; font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--carbon-900); }
.proof-unit { font-size: 0.5em; font-weight: 700; letter-spacing: 0; color: var(--carbon-400); }
.proof-label { margin: var(--space-2) 0 0; font-weight: 600; color: var(--carbon-500); }
.proof-note { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--carbon-400); }
.ex-note { margin: var(--space-1) 0 var(--space-8); font-size: var(--text-sm); color: var(--carbon-400); }
.ex-copy { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.ex-link { margin-top: 0; }
.ex-embed { display: block; width: 100%; height: 520px; border: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-xl); background: var(--paper-300); }
.svc-cta h2 { margin: 0; }

/* ---- Language switcher ---- */
.lang-switch { display: flex; align-items: center; gap: 2px; background: var(--paper-300); border-radius: var(--radius-full); padding: 3px; }
.lang-switch.hidden { display: none; }
@media (min-width: 640px) {
    .lang-switch.hidden.sm\:flex { display: flex; }
    .lang-switch.sm\:hidden { display: none; }
}
.lang-switch-btn { padding: 6px 12px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; color: var(--carbon-400); text-decoration: none; transition: color var(--duration-fast) ease; }
.lang-switch-btn:hover { color: var(--carbon-900); }
.lang-switch-btn.active { background: var(--carbon-900); color: var(--paper-100); }