/* ===============================================================
   AG POLISH v2 (2026-10-02)
   Layer on top of the live page. v2 = AI Slop Knight pass:
   editorial left-aligned grid, numbered sections, content on the
   page instead of in cards, no icon salad, no decorative sheen/grain.
=============================================================== */

/* ---------- Fixes ---------- */

/* Header Contact was black on black over the dark chapter */
.nav--over-dark .nav-cta-full {
    color: var(--hero-text);
    border-color: var(--hero-border);
}
.nav--over-dark .nav-cta-full:hover {
    color: #fff;
    border-color: var(--ag-gold);
}

.ag-nw { white-space: nowrap; }

/* Boxed phrases in headlines flow inline, so a trailing period
   can never drop onto a line by itself */
.s-heading .phil-bracket,
.phil-heading .phil-bracket {
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: inherit;
}

/* ---------- Grid ----------
   One left edge for everything below the hero: the gutter.
   (--ag-c kept as a hook; 0 = flush left.) */
:root {
    --ag-g: clamp(20px, 5vw, 88px);
    --ag-c: 0px;
    --ag-read: 36rem;
}

/* Header: wordmark on the left edge, links after it, Contact right */
.nav { padding-left: var(--ag-g); padding-right: var(--ag-g); }
@media (min-width: 771px) {
    .nav { justify-content: flex-start; }
    .nav-brand {
        position: relative;
        left: auto;
        transform: none;
        order: -1;
        margin-right: clamp(2rem, 4vw, 4rem);
    }
    .nav-right { margin-left: auto; }
}

.philosophy, .consulting, .s-section, .contact {
    padding-left: var(--ag-g);
    padding-right: var(--ag-g);
}
.contact { align-items: stretch; }

/* Everything left-aligned */
.phil-statement, .phil-body, .phil-closing, .phil-proof,
.disciplines, .disciplines-heading,
.consulting-label, .consulting-statement, .consulting-sub, .consulting-body,
.consulting-services, .consulting-services-heading, .consulting-closing, .consulting-proof,
.s-label, .s-statement, .s-sub, .s-body, .s-transition, .s-services, .s-services-heading,
.s-closing, .s-proof,
.contact-qualifier, .contact-punchline, .site-footer, .footer-legal {
    text-align: left;
}

/* Headlines: on the gutter, poster scale, narrow measure */
.phil-statement, .consulting-statement, .s-statement {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 54rem;
}
.phil-statement {
    min-height: 0;
    align-items: flex-start;
    padding: clamp(5rem, 14vh, 10rem) 0 clamp(3rem, 8vh, 6rem);
    max-width: none;
}
.phil-heading, .consulting-heading, .s-heading { max-width: none; }

/* Reading column */
.phil-body, .phil-closing, .phil-proof, .disciplines,
.consulting-sub, .consulting-body, .consulting-services, .consulting-closing, .consulting-proof,
.s-sub, .s-body, .s-transition, .s-services, .s-closing, .s-proof, .alc-grid,
.contact-qualifier, .contact-punchline, .contact-cta, .site-footer {
    margin-left: var(--ag-c);
    margin-right: 0;
}
.phil-body, .phil-closing, .phil-proof,
.consulting-sub, .consulting-body, .consulting-closing, .consulting-proof,
.s-sub, .s-body, .s-transition, .s-closing, .s-proof,
.contact-qualifier, .contact-punchline, .site-footer {
    max-width: var(--ag-read);
}
.disciplines, .s-services, .alc-grid, .consulting-services {
    max-width: none;
    width: auto;
}
.phil-body { margin-bottom: clamp(5rem, 4rem + 4vw, 8rem); }
.s-statement, .consulting-statement { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Body copy: upright reads as a voice; light italic read as filler */
.phil-body p, .s-sub p, .consulting-sub p, .consulting-closing p, .s-closing p,
.contact-qualifier p, .s-transition {
    font-style: normal;
}
.s-body { border-left: 0; padding-left: 0; }

/* Section labels: number + name on the gutter, one thin rule */
.s-label, .consulting-label {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    gap: 1.1em;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border-subtle);
    margin-bottom: clamp(3rem, 6vw, 5rem);
}
.s-label::after, .consulting-label::after { content: none; }
.s-label::before, .consulting-label::before {
    flex: none;
    height: auto;
    background: none;
    color: var(--text-tertiary);
    font: inherit;
    letter-spacing: 0.2em;
    padding-right: 1.4em;
    border-right: 1px solid var(--border-subtle);
}
#consulting .consulting-label::before { content: '01'; }
#traffic .s-label::before { content: '02'; }
#conversion .s-label::before { content: '03'; }
#systems .s-label::before { content: '04'; }
#alacarte .s-label::before { content: '05'; }
#conversion.dark-active .s-label { border-top-color: rgba(250, 246, 241, 0.12); }
#conversion.dark-active .s-label::before { color: rgba(250, 246, 241, 0.45); }

/* Small headings inside a section sit on the reading column, left */
.s-services-heading, .consulting-services-heading { text-align: left; }
.consulting-services-heading::after { margin-left: 0 !important; left: 0 !important; transform-origin: left !important; }

/* Consulting list: plain left list with a short rule marker */
.consulting-list { display: block; text-align: left; }
.consulting-list li { padding-left: 1.6em; }
.consulting-list li::before { width: 0.8em; height: 1px; top: 0.9em; background: var(--accent); }

/* ---------- Content on the page, not in cards ---------- */
.s-grid, .alc-grid {
    background: none;
    gap: 0 clamp(2rem, 4vw, 4rem);
    counter-reset: agn;
}
.s-card, .alc-item {
    background: none !important;
    box-shadow: none !important;
    padding: 1.4rem 0 clamp(2.4rem, 4vw, 3.4rem);
    border-top: 1px solid var(--border-subtle);
    counter-increment: agn;
}
.s-card::before { height: 1px; opacity: 1; transition: transform 0.5s var(--ease-arc); }
#conversion.dark-active .s-card { border-top-color: rgba(250, 246, 241, 0.12); }

/* Index numbers replace the icons */
.s-card-number { display: none; }
.s-card-name::before, .alc-name::before {
    content: counter(agn, decimal-leading-zero);
    display: block;
    margin-bottom: 1.1rem;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    color: var(--text-tertiary);
}
#conversion.dark-active .s-card-name::before { color: rgba(250, 246, 241, 0.45); }
.s-card-rule, .alc-rule { display: none; }
.s-card-name, .alc-name { margin-bottom: 0.8rem; letter-spacing: 0.08em; }

.s-card-desc, .alc-desc, .consulting-service-desc {
    font-style: normal;
    font-weight: 400;
    font-size: clamp(0.98rem, 1.5vw, 1.06rem);
    line-height: 1.7;
    letter-spacing: 0.01em;
}

/* Consulting services: rows with a rule, no icon, no side bar */
.consulting-services { counter-reset: agn; }
.consulting-service {
    border-left: 0 !important;
    border-top: 1px solid var(--border-subtle);
    padding: 1.4rem 0 1.8rem !important;
    margin-bottom: 0 !important;
    display: block !important;
    counter-increment: agn;
}
.consulting-service::before { content: none !important; }
.consulting-service-name::before {
    content: counter(agn, decimal-leading-zero) '\00a0\00a0\00a0';
    color: var(--text-tertiary);
    font-size: 0.85em;
}

/* Taglines: same face, quieter. They close a section; they don't shout */
.s-tagline, .consulting-tagline {
    font-family: 'Cinzel', serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: clamp(1.05rem, 2vw, 1.3rem) !important;
    letter-spacing: 0.06em !important;
    line-height: 1.55 !important;
    color: var(--text-primary) !important;
}
.s-closing p + .s-tagline { margin-top: 2rem; }
#conversion.dark-active .s-tagline { color: var(--hero-text) !important; }

/* Discipline rows light up as they pass the middle of the screen */
.discipline-number { transition: color 0.6s var(--ease-arc), transform 0.6s var(--ease-entrance); }
.discipline.ag-focus .discipline-number { color: var(--ag-gold-deep); }
.discipline.ag-focus::before { transform: scaleY(1); }
.disciplines-heading { margin-left: 0; }

/* ---------- Backgrounds: dial material ----------
   One faint engine-turned engraving in the paper; a pool of light
   lifts it as you scroll. Dark chapter: fine sunray-brushed dial. */
#philosophy, #consulting, .s-section, #contact { position: relative; overflow-x: clip; }

.ag-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    --ag-lx: 30%;
    --ag-ly: 30%;
}
.ag-bg > span { position: absolute; inset: 0; }
.ag-bg-engrave {
    background-image: url('/ag-guilloche.svg');
    background-size: 320px 64px;
    opacity: 0.016;
}
.ag-bg-glint {
    background-image: url('/ag-guilloche.svg');
    background-size: 320px 64px;
    opacity: 0.075;
    -webkit-mask-image: radial-gradient(ellipse 560px 420px at var(--ag-lx) var(--ag-ly), #000 0%, rgba(0,0,0,0.45) 45%, transparent 100%);
    mask-image: radial-gradient(ellipse 560px 420px at var(--ag-lx) var(--ag-ly), #000 0%, rgba(0,0,0,0.45) 45%, transparent 100%);
}
.ag-bg-light {
    background: radial-gradient(ellipse 760px 560px at var(--ag-lx) var(--ag-ly), rgba(255, 252, 245, 0.75), rgba(255, 250, 240, 0) 70%);
}

.ag-bg-sun, .ag-bg-vignette { opacity: 0; transition: opacity 0.9s var(--ease-arc); }
#conversion.dark-active .ag-bg-sun,
#conversion.dark-active .ag-bg-vignette { opacity: 1; }
#conversion .ag-bg-engrave, #conversion .ag-bg-glint, #conversion .ag-bg-light { transition: opacity 0.9s var(--ease-arc); }
#conversion.dark-active .ag-bg-engrave,
#conversion.dark-active .ag-bg-glint,
#conversion.dark-active .ag-bg-light { opacity: 0; }

.ag-bg-sun {
    background:
        repeating-conic-gradient(from 0deg at 50% calc(var(--ag-ly) - 700px),
            rgba(255, 236, 205, 0.022) 0deg 0.12deg,
            rgba(0, 0, 0, 0) 0.12deg 0.3deg),
        radial-gradient(1400px 1100px at 50% calc(var(--ag-ly) - 700px), #2B2219 0%, #1B1815 55%, #151311 100%);
}
.ag-bg-vignette {
    background: radial-gradient(1500px 900px at 50% var(--ag-ly), transparent 50%, rgba(0, 0, 0, 0.4) 100%);
}

/* ---------- CTAs ---------- */
/* Restrained: a thin frame, fills on hover. An instruction, not an ad */
.section-cta, .contact-cta {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--text-primary);
    padding: 1.05em 2.4em;
    font-size: 0.86rem;
    letter-spacing: 0.14em;
}
.contact-cta { padding: 1.2em 2.8em; font-size: 0.95rem; }
.section-cta::after { display: none; }
.section-cta:hover, .contact-cta:hover {
    background: var(--text-primary);
    color: var(--void);
}
#conversion.dark-active .section-cta {
    background: transparent;
    color: var(--hero-text);
    border-color: rgba(250, 246, 241, 0.5);
}
#conversion.dark-active .section-cta:hover {
    background: var(--hero-text);
    color: var(--void-dark);
}

.contact-cta-arrow {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.35s var(--ease-arc), opacity 0.35s var(--ease-arc);
}
.contact-cta { gap: 0; }
.contact-cta:hover .contact-cta-arrow { max-width: 1.4em; opacity: 1; margin-left: 0.6em; }

/* ---------- Left edge everywhere below the hero ---------- */
.footer-legal { justify-content: flex-start; flex-wrap: wrap; }
.mobile-overlay { align-items: flex-start; justify-content: center; padding-left: var(--ag-g); padding-right: var(--ag-g); }
.mobile-menu-links, .mobile-menu-ctas { align-items: flex-start; text-align: left; }

/* ===============================================================
   v3: section shapes + type scale
=============================================================== */

/* ---------- Type scale: one loud line per section, the rest quiet ---------- */
.s-heading, .consulting-heading {
    font-size: clamp(2rem, 5.4vw, 5.2rem);
    line-height: 1.1;
    letter-spacing: 0.03em;
}
#contact .s-heading { font-size: clamp(2.6rem, 9vw, 8.5rem); line-height: 1.02; }
.phil-heading { line-height: 1.12; letter-spacing: 0.03em; }
.s-sub p, .consulting-sub p {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    letter-spacing: 0.01em;
    line-height: 1.65;
    color: var(--text-secondary);
}
.s-body p, .contact-qualifier p, .phil-body p, .consulting-body > p {
    font-size: clamp(1.02rem, 1.4vw, 1.12rem);
    letter-spacing: 0.01em;
    line-height: 1.7;
}
.s-body-line + .s-body-line { margin-top: 0.9em; }

/* ---------- Consulting: two-column spread, headline holds while you read ---------- */
@media (min-width: 1100px) {
    #consulting {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        column-gap: clamp(3rem, 6vw, 7rem);
        align-items: start;
        overflow: clip;
    }
    #consulting > .ag-bg { grid-area: 1 / 1 / -1 / -1; }
    #consulting .consulting-label { grid-column: 1 / -1; }
    #consulting .consulting-statement {
        grid-column: 1;
        grid-row: 2 / span 4;
        position: sticky;
        top: 140px;
        align-self: start;
    }
    #consulting .consulting-sub,
    #consulting .consulting-body,
    #consulting .consulting-services,
    #consulting .consulting-closing { grid-column: 2; max-width: none; }
    #consulting .consulting-sub { padding-top: 0.6rem; }
}

/* ---------- Conversion: services vs products as one table ---------- */
.ag-mx-head, .ag-mx-row {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
}
.ag-mx-head { padding-bottom: 0.9rem; }
.ag-mx-head .s-services-heading { margin: 0; }
.ag-mx-row {
    padding: 1.5rem 0 1.7rem;
    border-top: 1px solid var(--border-subtle);
    counter-increment: agn;
}
.ag-mx { counter-reset: agn; }
.ag-mx-row .s-card-name::before {
    content: counter(agn, decimal-leading-zero);
    display: block;
    margin-bottom: 0.6rem;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    color: var(--text-tertiary);
}
.ag-mx-row .s-card-desc { margin: 0; }
#conversion.dark-active .ag-mx-row { border-top-color: rgba(250, 246, 241, 0.12); }
#conversion.dark-active .ag-mx-row .s-card-name::before { color: rgba(250, 246, 241, 0.45); }
#conversion.dark-active .ag-mx-row .s-card-name { color: var(--hero-text); }
#conversion.dark-active .ag-mx-row .s-card-desc { color: rgba(250, 246, 241, 0.72); }
@media (max-width: 760px) {
    .ag-mx-head { display: none; }
    .ag-mx-row { grid-template-columns: 1fr; row-gap: 0.9rem; }
    .ag-mx-row .s-card-desc::before {
        content: attr(data-col);
        display: block;
        margin-bottom: 0.25rem;
        font-family: 'Cinzel', serif;
        font-size: 0.68rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--text-tertiary);
    }
    #conversion.dark-active .ag-mx-row .s-card-desc::before { color: rgba(250, 246, 241, 0.45); }
}

/* ---------- A La Carte: an index, not a wall of boxes ---------- */
.alc-grid { display: block; }
.alc-item {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
    column-gap: clamp(1.5rem, 4vw, 4rem);
    align-items: baseline;
    padding: 1.4rem 0 1.6rem;
}
.alc-name { margin: 0; }
.alc-desc { margin: 0; max-width: 40rem; }
@media (max-width: 760px) {
    .alc-item { grid-template-columns: 1fr; row-gap: 0.6rem; }
}

/* ---------- Systems: the long argument set in two columns ---------- */
@media (min-width: 1100px) {
    #systems .s-body { max-width: 62rem; columns: 2; column-gap: clamp(2.5rem, 4vw, 4rem); }
    #systems .s-body-line { break-inside: avoid; }
}

/* ===============================================================
   v4: containers, icon tiles, explanatory graphics
=============================================================== */
:root {
    --ag-card-bg: rgba(255, 255, 255, 0.55);
    --ag-card-line: rgba(10, 10, 10, 0.09);
    --ag-dk-card: rgba(255, 255, 255, 0.035);
    --ag-dk-line: rgba(250, 246, 241, 0.1);
}

/* ---------- Icon tiles ---------- */
.ag-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px;
    height: 46px;
    margin-bottom: 1.1rem;
    border: 1px solid rgba(122, 92, 56, 0.32);
    border-radius: 3px;
    background: rgba(122, 92, 56, 0.045);
    color: var(--accent);
    transition: background 0.3s var(--ease-arc), border-color 0.3s var(--ease-arc), color 0.3s var(--ease-arc);
}
.ag-tile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ag-glyph * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ag-tile.ag-pre .ag-glyph * { stroke-dashoffset: 1; }
.s-card:hover .ag-tile, .alc-item:hover .ag-tile, .consulting-service:hover .ag-tile,
.discipline:hover .ag-tile, .discipline.ag-focus .ag-tile {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--ag-gold-light);
}
#conversion.dark-active .ag-tile { border-color: rgba(201, 163, 106, 0.4); background: rgba(201, 163, 106, 0.06); color: var(--ag-gold); }

/* ---------- Containers ---------- */
.s-card, .alc-item, .consulting-service, .discipline {
    position: relative;
    background: var(--ag-card-bg) !important;
    border: 1px solid var(--ag-card-line) !important;
    border-radius: 4px;
    padding: clamp(1.4rem, 2.4vw, 2rem) !important;
    transition: opacity 0.7s var(--ease-entrance), transform 0.7s var(--ease-entrance),
                border-color 0.3s var(--ease-arc), box-shadow 0.3s var(--ease-arc);
}
.s-card:hover, .alc-item:hover, .consulting-service:hover, .discipline:hover {
    border-color: rgba(122, 92, 56, 0.4) !important;
    box-shadow: 0 14px 40px -24px rgba(42, 24, 16, 0.35) !important;
}
#conversion.dark-active .s-card { background: var(--ag-dk-card) !important; border-color: var(--ag-dk-line) !important; }

/* icons replace the small index numbers on cards */
.s-card-name::before, .alc-name::before, .consulting-service-name::before { content: none !important; }

.s-grid { gap: 16px !important; }

/* A La Carte: 4-up grid of cards */
.alc-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.alc-item { display: flex !important; flex-direction: column; align-items: flex-start; }
.alc-name { margin: 0 0 0.7rem; }
@media (max-width: 1180px) { .alc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .alc-grid { grid-template-columns: 1fr; } }

/* Consulting services: tile left, text right */
.consulting-services .consulting-service {
    display: flex !important;
    gap: 1.2rem;
    align-items: flex-start;
    margin-bottom: 12px !important;
    border-top: 1px solid var(--ag-card-line) !important;
}
.consulting-service .ag-tile { margin-bottom: 0; }

/* Consulting focus areas as tags */
.consulting-list { display: flex; flex-wrap: wrap; gap: 8px; }
.consulting-list li {
    padding: 0.45em 1em;
    border: 1px solid rgba(122, 92, 56, 0.3);
    border-radius: 999px;
    font-size: 0.95rem;
    line-height: 1.3;
    background: var(--ag-card-bg);
}
.consulting-list li::before { content: none; }

/* ---------- Disciplines: four steps of one system ---------- */
.disciplines-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    position: relative;
}
.discipline {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    overflow: visible;
}
.discipline:first-child { border-top: 1px solid var(--ag-card-line) !important; }
.discipline::before { content: none !important; }
.discipline-number {
    position: absolute;
    top: 1.3rem;
    right: 1.4rem;
    min-width: 0;
    font-size: 0.8rem !important;
    letter-spacing: 0.2em !important;
    color: var(--text-tertiary) !important;
    transform: none !important;
}
.discipline.ag-focus .discipline-number { color: var(--ag-gold-deep) !important; }
.discipline-name { font-size: clamp(1.2rem, 1.8vw, 1.5rem) !important; }
.ag-track {
    position: absolute;
    left: 0; right: 0; top: -1px;
    height: 2px;
    z-index: 2;
    pointer-events: none;
}
.ag-track i {
    display: block;
    height: 100%;
    background: var(--ag-gold);
    transform-origin: left;
    transform: scaleX(var(--p, 0));
}
@media (max-width: 960px) {
    .disciplines-grid { grid-template-columns: 1fr; padding-left: 18px; }
    .ag-track { left: 0; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: var(--ag-card-line); }
    .ag-track i { height: 100%; width: 100%; transform-origin: top; transform: scaleY(var(--p, 0)); }
}

/* ---------- Conversion table in a container ---------- */
.ag-mx {
    border: 1px solid var(--ag-card-line);
    border-radius: 4px;
    background: var(--ag-card-bg);
    padding: 0 clamp(1.2rem, 2.4vw, 2rem);
}
.ag-mx-head { padding-top: 1.3rem; }
.ag-mx-row .s-card-name::before { content: none; }
.ag-mx-row .ag-tile { display: flex; margin-bottom: 0.8rem; }
.ag-mx-row { align-items: start; }
#conversion.dark-active .ag-mx { background: var(--ag-dk-card); border-color: var(--ag-dk-line); }

/* ---------- Figures ---------- */
.ag-fig {
    position: relative;
    margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
    padding: clamp(1.2rem, 2.5vw, 2rem);
    max-width: 64rem;
    border: 1px solid var(--ag-card-line);
    border-radius: 4px;
    background: var(--ag-card-bg);
}
.ag-fig svg { display: block; width: 100%; height: auto; }
#conversion.dark-active .ag-fig { background: var(--ag-dk-card); border-color: var(--ag-dk-line); }

/* Leak (Philosophy) */
.ag-leak { padding-top: 3.2rem; }
.ag-leak-canvas { display: block; width: 100%; height: 230px; }
.ag-leak-labels span {
    position: absolute;
    top: 1.3rem;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.ag-leak-labels .ag-leak-mid { color: var(--accent); opacity: var(--ag-mid, 0.35); }

/* Flow (Traffic) */
.ag-flow--tall { display: none !important; }
@media (max-width: 700px) {
    .ag-flow--wide { display: none !important; }
    .ag-flow--tall { display: block !important; }
}
.ag-wires use { fill: none; stroke: rgba(122, 92, 56, 0.45); stroke-width: 1.3; }
.ag-node rect { fill: #FBF8F4; stroke: rgba(10, 10, 10, 0.18); stroke-width: 1; }
.ag-node text {
    font-family: 'Cinzel', serif;
    font-size: 15px;
    letter-spacing: 0.1em;
    text-anchor: middle;
    fill: var(--text-primary);
}
.ag-node--key rect { stroke: var(--accent); stroke-width: 1.4; }
.ag-node--end rect { fill: var(--text-primary); stroke: var(--text-primary); }
.ag-node--end text { fill: var(--ag-gold-light); }
.ag-dot { fill: var(--accent); }

/* Funnel (Conversion) */
.ag-funnel text { font-family: 'Cinzel', serif; font-size: 18px; letter-spacing: 0.12em; fill: var(--text-primary); }
.ag-fbar { fill: rgba(122, 92, 56, 0.14); stroke: rgba(122, 92, 56, 0.5); stroke-width: 1; }
#conversion.dark-active .ag-funnel text { fill: var(--hero-text); }
#conversion.dark-active .ag-fbar { fill: rgba(201, 163, 106, 0.16); stroke: rgba(201, 163, 106, 0.55); }

/* Network (Systems) */
.ag-net { padding-top: 3.2rem; }
.ag-net-captions span {
    position: absolute;
    top: 1.3rem;
    left: clamp(1.2rem, 2.5vw, 2rem);
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.ag-net-a { color: var(--text-tertiary); opacity: calc(1 - var(--p, 0)); }
.ag-net-b { color: var(--accent); opacity: var(--p, 0); }
.ag-net line { stroke: rgba(10, 10, 10, 0.28); stroke-width: 1.2; }
.ag-net-b-lines line { stroke: var(--accent); stroke-width: 1.4; }
.ag-net-nodes circle { fill: #FBF8F4; stroke: var(--text-primary); stroke-width: 1.3; }
.ag-net-hub { fill: var(--accent); }

/* 21 seats (Contact) */
.ag-slots {
    display: grid;
    grid-template-columns: repeat(7, 26px);
    gap: 8px;
    margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.ag-slots span {
    width: 26px;
    height: 26px;
    border: 1px solid rgba(10, 10, 10, 0.45);
    border-radius: 2px;
    transform: scale(0.2);
    opacity: 0;
    transition: transform 0.5s var(--ease-entrance), opacity 0.5s var(--ease-entrance);
    transition-delay: calc(var(--i, 0) * 35ms);
}
.ag-slots.in span { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .ag-tile.ag-pre .ag-glyph * { stroke-dashoffset: 0; }
    .ag-slots span { transform: none; opacity: 1; transition: none; }
}
.ag-flow--tall .ag-node text { font-size: 13px; letter-spacing: 0.06em; }
.ag-net-captions .ag-net-b { left: auto; right: clamp(1.2rem, 2.5vw, 2rem); }