/* Inflo Partners site system. Generated pages (execution/inflo/site_build.py)
   link this file; the header lives in inflo_nav.py and is inlined per page.
   Dark plum-black sections alternate with cream ones, the way an institutional
   site alternates its base and its paper.

   Purple: #420061 is THE Inflo purple (sampled from the logo). It is the header,
   every primary button and every purple surface. Purple TEXT on the dark
   sections uses a lavender tint of it, because #420061 type vanishes on black. */

@font-face {
    font-family: 'Neue Montreal Logo';
    src: url('/assets/fonts/ppneuemontreal-italic.otf') format('opentype');
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Neue Montreal Logo';
    src: url('/assets/fonts/ppneuemontreal-semibolditalic.otf') format('opentype');
    font-weight: 600; font-style: italic; font-display: swap;
}

:root {
    --ink: #09060d;
    --ink-2: #110b18;
    --ink-3: #1a1224;
    --cream: #f6f2ec;
    --cream-2: #ece5da;
    --plum: #420061;
    --plum-hover: #54077a;
    --plum-deep: #33004c;
    --lav: #cdb0ea;      /* purple type on dark */
    --lav-2: #a97bd0;    /* borders, focus rings on dark */

    --on-dark: #f3eef8;
    --on-dark-2: #bdb5c9;
    --on-dark-3: #8a8297;
    --on-light: #18111f;
    --on-light-2: #4f4659;
    --on-light-3: #81788a;

    --line-dark: rgba(255,255,255,0.09);
    --line-light: rgba(24,17,31,0.13);

    --sans: 'General Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --mono: 'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --logo: 'Neue Montreal Logo', 'General Sans', sans-serif;

    --wrap: 1240px;
    --gutter: clamp(16px, 4vw, 40px);
    --header: 68px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--sans);
    background: var(--ink);
    color: var(--on-dark-2);
    font-size: 17px;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: rgba(66,0,97,0.45); color: #fff; }
:target { scroll-margin-top: calc(var(--header) + 16px); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Sections ── */
.sec { position: relative; padding: clamp(80px, 11vw, 140px) 0; }
.sec.tight { padding: clamp(60px, 8vw, 96px) 0; }
.sec.light { background: var(--cream); color: var(--on-light-2); }
.sec.paper { background: var(--cream-2); color: var(--on-light-2); }
.sec.raised { background: var(--ink-2); }
.sec.plum { background: var(--plum); color: #eadcf5; }
.sec + .sec.raised, .sec.raised + .sec { border-top: 1px solid var(--line-dark); }

/* ── Type ── */
/* The eyebrow is set in the logo's own italic, sentence case, the way the
   wordmark reads. Small mono numerals stay for 01 / 02 counters only. */
.eyebrow {
    display: inline-block;
    font-family: var(--logo); font-style: italic; font-weight: 400;
    font-size: 18px; letter-spacing: -0.005em; line-height: 1.3;
    color: var(--lav);
}
.light .eyebrow, .paper .eyebrow { color: var(--plum); }
.plum .eyebrow { color: #e9d5ff; }

h1, h2, h3, h4 { font-family: var(--sans); color: var(--on-dark); font-weight: 400; letter-spacing: -0.025em; }
/* Word binding in headings; JS relaxes a bind when it would cost a line. */
.nb { white-space: nowrap; }
.h1 { text-wrap: balance; }
p, .lede, li { text-wrap: pretty; }
.light :is(h1,h2,h3,h4), .paper :is(h1,h2,h3,h4) { color: var(--on-light); }
.plum :is(h1,h2,h3,h4) { color: #fff; }

.h1 { font-size: clamp(42px, 6.4vw, 88px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 400; }
.h2 { font-size: clamp(32px, 3.75vw, 50px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 400; }
.h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; }
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--on-dark-2); max-width: 680px; font-weight: 300; }
.light .lede, .paper .lede { color: var(--on-light-2); }
.plum .lede { color: #eadcf5; }
.sec-head { display: grid; gap: 20px; margin-bottom: clamp(44px, 6vw, 72px); }
.sec-head.split { grid-template-columns: 1.2fr .8fr; align-items: end; gap: 40px; }
@media (max-width: 860px) { .sec-head.split { grid-template-columns: 1fr; gap: 20px; } }
.muted { color: var(--on-dark-3); }
.light .muted, .paper .muted { color: var(--on-light-3); }
.num { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--lav); }
.light .num, .paper .num { color: var(--plum); }

/* Placeholder for a number still being pulled. Visible on purpose. */
.ph { background: rgba(250,204,21,0.16); outline: 1px dashed rgba(250,204,21,0.8); padding: 0 6px; border-radius: 4px; color: inherit; font-family: var(--mono); font-size: 0.8em; }
.stats .v .ph { font-size: 15px; line-height: 1.5; letter-spacing: 0; display: inline-block; }

/* ── Buttons ── */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 24px; border-radius: 10px; font-family: var(--sans);
    font-size: 15.5px; font-weight: 500; text-decoration: none; cursor: pointer;
    border: 1px solid transparent; transition: background .2s, border-color .2s, transform .2s, color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--plum); color: #fff; border-color: rgba(255,255,255,0.08); }
.btn-primary:hover { background: var(--plum-hover); }
.btn-ghost { border-color: rgba(255,255,255,0.2); color: var(--on-dark); }
.btn-ghost:hover { border-color: var(--lav-2); background: rgba(66,0,97,0.25); }
.light .btn-primary, .paper .btn-primary { border-color: transparent; }
.light .btn-ghost, .paper .btn-ghost { border-color: var(--line-light); color: var(--on-light); }
.light .btn-ghost:hover, .paper .btn-ghost:hover { border-color: var(--plum); background: rgba(66,0,97,0.06); }
.plum .btn-primary { background: #fff; color: var(--plum); }
.plum .btn-primary:hover { background: #f3e8ff; }
.plum .btn-ghost { border-color: rgba(255,255,255,0.35); color: #fff; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; color: var(--lav); }
.light .link-arrow, .paper .link-arrow { color: var(--plum); }
.link-arrow svg { transition: transform .2s; }
.link-arrow:hover svg { transform: translateX(3px); }

/* ── Hero ── */
.hero { position: relative; padding: calc(var(--header) + clamp(64px, 9vw, 120px)) 0 clamp(64px, 8vw, 104px); overflow: hidden; isolation: isolate; }
.hero::before {
    /* Vertical hairlines, Inflo's version of an architectural texture. */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: repeating-linear-gradient(90deg, rgba(205,176,234,0.09) 0 1px, transparent 1px 88px);
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 80% 20%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse 70% 80% at 80% 20%, #000 0%, transparent 70%);
}
.hero::after {
    content: ""; position: absolute; z-index: -1; width: 900px; height: 900px; right: -300px; top: -380px;
    background: radial-gradient(circle, rgba(66,0,97,0.6) 0%, transparent 62%);
}
/* The homepage hero is centred (the only centred block on the site). */
.hero.home-hero { text-align: center; }
.hero.home-hero .hero-grid > div { display: flex; flex-direction: column; align-items: center; }
.hero .eyebrow { margin-bottom: 26px; }
.hero h1 { max-width: 1180px; }
.hero.home-hero h1 { max-width: 1240px; font-size: clamp(40px, 5.4vw, 76px); }
/* "new [word]" stays together on the last line; the slot follows the word's width. */
/* Clip only above and below (for the slide); sideways the outgoing word may overhang. */
.hero.home-hero .rotator { clip-path: inset(-0.14em -400px -0.3em -0.1em); }
.hero .lede { margin-top: 28px; }
.hero.home-hero .lede { margin-left: auto; margin-right: auto; }
.hero .btns { margin-top: 40px; }
.hero.home-hero .btns { justify-content: center; }
.hero.home-hero .logos .label { text-align: center; margin-left: auto; margin-right: auto; }
.hero.home-hero::before { -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 10%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 70% 80% at 50% 10%, #000 0%, transparent 70%); }
.hero.home-hero::after { right: auto; left: 50%; transform: translateX(-50%); top: -520px; }

/* Inline rotator: "new" and the rotating word stay on one line. Every word
   sits in the same grid cell, so the box is as wide as the longest word and as
   tall as the line, and nothing is clipped. The clip only trims the slide
   motion, with room left for ascenders and descenders. */
.hero .keep { white-space: nowrap; }
.rotator { display: inline-grid; vertical-align: baseline; clip-path: inset(-0.14em -0.08em -0.26em -0.04em); }
.rotator span { justify-self: start; }
.rotator span {
    grid-area: 1 / 1; white-space: nowrap;
    font-family: var(--logo); font-style: italic; font-weight: 400; letter-spacing: -0.02em;
    color: var(--lav); padding-right: .1em;
    opacity: 0; transform: translateY(.5em);
    transition: transform .6s cubic-bezier(.2,.7,.1,1), opacity .4s;
}
.rotator span.on { opacity: 1; transform: none; }
.rotator span.off { opacity: 0; transform: translateY(-.5em); }
.rotator .sizer { visibility: hidden; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rotator span { transition: none; } }

.page-hero { padding: calc(var(--header) + clamp(56px, 8vw, 104px)) 0 clamp(56px, 7vw, 88px); }
.page-hero .h1 { font-size: clamp(40px, 5.6vw, 76px); max-width: 1000px; }
.crumbs { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 26px; }
.crumbs a { text-decoration: none; color: var(--on-dark-3); }
.crumbs a:hover { color: var(--on-dark); }

/* The IP letters from the logo, set into the headline at the type's own size. */
.hero-grid { display: block; }
.h1-mark { display: inline-block; height: .76em; width: auto; vertical-align: -0.01em; margin: 0 .02em; }

/* ── Logo strip ── */
.logos { margin-top: clamp(56px, 7vw, 88px); padding-top: 28px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 44px; }
.logos .label { font-family: var(--logo); font-style: italic; font-size: 16px; color: var(--on-dark-3); margin-right: 8px; }

/* ── Stat bar ── */
.stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border-top: 1px solid var(--line-light); }
.stats > div { padding: 32px 24px 8px; text-align: center; }
.stats > div + div { border-left: 1px solid var(--line-light); }
.stats .v { font-size: clamp(30px, 3.6vw, 56px); white-space: nowrap; line-height: 1; letter-spacing: -0.045em; font-weight: 300; color: var(--on-light); }
.stats .l { margin: 14px auto 0; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-light-3); max-width: 26ch; }
:not(.light):not(.paper) > .wrap > .stats { border-color: var(--line-dark); }
:not(.light):not(.paper) > .wrap > .stats .v { color: var(--on-dark); }
:not(.light):not(.paper) > .wrap > .stats > div + div { border-color: var(--line-dark); }
@media (max-width: 760px) {
    .stats { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .stats > div { padding: 24px 12px 20px !important; border-left: none !important; border-bottom: 1px solid var(--line-light); }
    .stats > div:nth-child(2n) { border-left: 1px solid var(--line-light) !important; }
}

/* ── Pillars (service architecture) ── */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.pillar { padding: 40px 32px 44px; display: flex; flex-direction: column; gap: 18px; transition: background .25s; }
.pillar + .pillar { border-left: 1px solid var(--line-dark); }
.pillar:hover { background: rgba(66,0,97,0.18); }
.pillar p { color: var(--on-dark-2); }
.pillar ul { list-style: none; display: grid; gap: 0; margin-top: 4px; }
.pillar li { padding: 11px 0; border-top: 1px solid var(--line-dark); font-size: 15px; color: var(--on-dark); }
.pillar .link-arrow { margin-top: auto; padding-top: 8px; }
@media (max-width: 900px) {
    .pillars { grid-template-columns: 1fr; }
    .pillar { padding: 32px 0; }
    .pillar + .pillar { border-left: none; border-top: 1px solid var(--line-dark); }
}

/* ── Numbered grid (perspective, how we work) ── */
.ngrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line-light); }
.ngrid > div { padding: 36px 40px 40px 0; border-bottom: 1px solid var(--line-light); }
.ngrid > div:nth-child(2n) { padding-left: 40px; padding-right: 0; border-left: 1px solid var(--line-light); }
.ngrid h3 { margin: 14px 0 10px; }
.ngrid.dark { border-color: var(--line-dark); }
.ngrid.dark > div { border-color: var(--line-dark); }
.ngrid.stack { grid-template-columns: 1fr; }
.ngrid.stack > div, .ngrid.stack > div:nth-child(2n) { padding: 28px 0; border-left: none; }
@media (max-width: 760px) {
    .ngrid { grid-template-columns: 1fr; }
    .ngrid > div, .ngrid > div:nth-child(2n) { padding: 28px 0; border-left: none; }
}

/* ── Scoreboard diagram ── */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: clamp(44px, 6vw, 64px); }
.board > div { position: relative; padding: 24px; border: 1px solid var(--line-light); border-radius: 14px; background: rgba(255,255,255,0.5); transition: border-color .4s, background .4s; }
.board .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-light-3); }
.board .t { margin-top: 10px; font-size: 22px; font-weight: 500; color: var(--on-light); letter-spacing: -0.02em; }
.board .check { position: absolute; top: 18px; right: 18px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-light); display: grid; place-items: center; color: #fff; transition: background .35s, border-color .35s, transform .35s; }
.board .check svg { width: 14px; height: 14px; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s; }
.board > div.on { border-color: var(--plum); background: #fff; }
.board > div.on .check { background: var(--plum); border-color: var(--plum); transform: scale(1.06); }
.board > div.on .check svg { opacity: 1; transform: scale(1); }
@media (max-width: 760px) { .board { grid-template-columns: 1fr; } }

/* ── Cards ── */
.cards { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; border: 1px solid var(--line-light); border-radius: 18px; overflow: hidden; background: #fff; text-decoration: none; transition: transform .25s, box-shadow .25s; }
a.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(24,17,31,0.1); }
.card .media { aspect-ratio: 16 / 10; background: var(--cream-2); overflow: hidden; }
.card .media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.card.case .media { aspect-ratio: 4 / 3; }
.card .body { padding: 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card .tag { font-family: var(--logo); font-style: italic; font-size: 15px; color: var(--plum); }
.card h3 { color: var(--on-light); }
.card .result { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-light); font-weight: 500; color: var(--on-light); }
.dark-cards .card { background: var(--ink-2); border-color: var(--line-dark); }
.dark-cards .card h3, .dark-cards .card .result { color: var(--on-dark); }
.dark-cards .card .tag { color: var(--lav); }
.dark-cards .card .result { border-color: var(--line-dark); }
.dark-cards a.card:hover { box-shadow: 0 18px 40px rgba(0,0,0,0.4); border-color: var(--lav-2); }

/* Portfolio tiles: same media band, same copy block height, link on the same line. */
.card.pf .body { padding: 26px 28px 24px; }
.card.pf p { min-height: 6.4em; }
.card.pf .foot-link { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-light); }
.card.pf .link-arrow.muted { color: var(--on-light-3); font-weight: 400; }

/* A wordmark where a partner has no mark: the name in the brand italic. */
/* Script wordmark: generous line box and side padding so the J swash and the
   accent on León are never clipped by the plate. */
.wordmark { font-family: 'Pinyon Script', 'Neue Montreal Logo', cursive; font-weight: 400; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.5; padding: 0 .3em; max-width: 100%; text-align: center; line-height: 1; letter-spacing: 0; color: #f3eef8; white-space: nowrap; padding-right: .08em; }
/* The hero tile is a fixed 300px square; keep the script small enough to sit inside it. */
.case-mark .wordmark { font-size: 40px; padding: 0 .2em; max-width: none; }
@media (max-width: 860px) { .case-mark:has(.wordmark) { width: auto; aspect-ratio: auto; padding: 12px 18px; } .case-mark .wordmark { font-size: 30px; } }

/* Sub-sector grid: five cards in a 3-wide grid, so the last row of two is
   centred instead of leaving a hole at the end. Same card size either way. */
.cards.subs { display: grid; grid-template-columns: repeat(6, 1fr); }
.cards.subs > .card { grid-column: span 2; }
.cards.subs > .card:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
@media (max-width: 860px) { .cards.subs { grid-template-columns: 1fr; } .cards.subs > .card, .cards.subs > .card:nth-last-child(2):nth-child(3n + 1) { grid-column: auto; } }

/* Logo plate: a client or portfolio mark on a dark field, used for proof. */
.plate { display: grid; place-items: center; min-height: 150px; padding: 32px; background: var(--ink); border-bottom: 1px solid var(--line-light); }
/* Every mark renders as a white silhouette, so a dark logo on a transparent PNG
   (Momentum) reads the same as a white one, and the row stays one colour. */
.plate img { max-height: 54px; max-width: 220px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; }
.plate .plate-lg { display: inline-flex; align-items: center; gap: 14px; }
.plate .plate-lg b { font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: #f3eef8; white-space: nowrap; }
/* A photo on a plate: the whole picture, no crop, no silhouette filter. */
.plate.photo { padding: 0; }
.plate.photo img { max-height: none; max-width: none; width: auto; object-fit: contain; filter: none; opacity: 1; }

/* Sector cards (hub + homepage) */
.sector-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.sector-card { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 300px; padding: 36px; border: 1px solid var(--line-dark); border-radius: 20px; text-decoration: none; background: var(--ink-2); overflow: hidden; transition: border-color .25s, transform .25s; }
.sector-card::after { content: ""; position: absolute; inset: auto -20% -60% auto; width: 420px; height: 420px; background: radial-gradient(circle, rgba(66,0,97,0.55), transparent 65%); opacity: .6; transition: opacity .3s; }
.sector-card:hover { border-color: var(--lav-2); transform: translateY(-3px); }
.sector-card:hover::after { opacity: 1; }
.sector-card h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 400; }
.sector-card p { color: var(--on-dark-2); max-width: 460px; }
.sector-card .link-arrow { margin-top: auto; position: relative; z-index: 1; }
.sector-card .chips { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; }
.chip { font-size: 12.5px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line-dark); color: var(--on-dark-2); }
.raised .sector-card { background: var(--ink); }
.light .sector-card { background: #fff; border-color: var(--line-light); }
.light .sector-card::after { opacity: .14; }
.light .sector-card:hover { border-color: var(--plum); box-shadow: 0 18px 40px rgba(24,17,31,0.08); }
.light .sector-card:hover::after { opacity: .3; }
.light .sector-card h3 { color: var(--on-light); }
.light .sector-card p { color: var(--on-light-2); }
.light .chip { border-color: var(--line-light); color: var(--on-light-2); }
@media (max-width: 860px) { .sector-cards { grid-template-columns: 1fr; } .sector-card { padding: 28px 24px; min-height: 0; } }

/* ── Rows: challenges, sub-services, engagements ── */
.rows { border-top: 1px solid var(--line-dark); }
.row { display: grid; grid-template-columns: 80px 1fr 1.25fr; gap: 32px; padding: 36px 0; border-bottom: 1px solid var(--line-dark); }
.row .num { padding-top: 6px; }
.row h3 { margin-bottom: 10px; }
.row blockquote { font-family: var(--logo); font-style: italic; font-weight: 400; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.35; color: var(--lav); letter-spacing: -0.01em; }
.row ul { list-style: none; margin-top: 14px; display: grid; gap: 8px; }
.row li { display: flex; gap: 10px; font-size: 15px; color: var(--on-dark); }
.row li::before { content: "+"; font-family: var(--mono); color: var(--lav); }
.light .rows, .light .row, .paper .rows, .paper .row { border-color: var(--line-light); }
.light .row blockquote, .paper .row blockquote { color: var(--plum); }
.light .row li, .paper .row li { color: var(--on-light); }
.light .row li::before, .paper .row li::before { color: var(--plum); }
@media (max-width: 860px) {
    .row { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
    .row .num { padding-top: 0; }
}

.eng { display: grid; grid-template-columns: 220px 1fr 220px; gap: 28px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line-dark); }
.eng .tag { font-family: var(--logo); font-style: italic; font-size: 15px; color: var(--on-dark-3); }
.eng .line { font-size: clamp(18px, 1.6vw, 21px); color: var(--on-dark); letter-spacing: -0.01em; }
.eng .metric { text-align: right; font-weight: 500; color: var(--lav); }
@media (max-width: 860px) { .eng { grid-template-columns: 1fr; gap: 6px; } .eng .metric { text-align: left; } }

/* ── Pull quote ── */
.pull { font-family: var(--logo); font-style: italic; font-weight: 400; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.15; letter-spacing: -0.02em; color: var(--plum); max-width: 980px; }
.pull::before { content: "\201C"; }
.pull::after { content: "\201D"; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
/* The right column starts level with the headline, not with the eyebrow above it
   (eyebrow line + its 20px gap). Same for the FAQ list beside its heading. */
@media (min-width: 861px) {
    .split > .prose, .split > .lede, .split > div:last-child:not(.rv-heading) { padding-top: 46px; }
    .split > div:first-child { padding-top: 0; }
    .faq-split > .faq { margin-top: 46px; }
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.prose p + p { margin-top: 18px; }
.prose p { font-size: 18px; }

/* Channel fit */
.fit { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 16px; }
.fit > div { padding: 28px; border-radius: 16px; background: #fff; border: 1px solid var(--line-light); }
.fit .k { font-family: var(--logo); font-style: italic; font-size: 17px; color: var(--plum); margin-bottom: 10px; }
@media (max-width: 760px) { .fit { grid-template-columns: 1fr; } }

/* Tiers */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tier { padding: 36px; border-radius: 20px; border: 1px solid var(--line-light); background: #fff; display: flex; flex-direction: column; gap: 14px; }
.tier ul { margin-top: auto; }
.tier.feature { background: var(--plum); border-color: var(--plum); color: #eadcf5; }
.tier.feature h3 { color: #fff; }
.tier .time { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--plum); }
.tier.feature .time { color: #e9d5ff; }
.tier ul { list-style: none; display: grid; gap: 0; margin-top: 6px; }
.tier li { padding: 11px 0; border-top: 1px solid var(--line-light); font-size: 15px; color: var(--on-light); }
.tier.feature li { border-color: rgba(255,255,255,0.18); color: #fff; }
@media (max-width: 760px) { .tiers { grid-template-columns: 1fr; } .tier { padding: 28px 24px; } }

/* Process */
.steps { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); border-top: 1px solid var(--line-dark); }
.steps > div { padding: 32px 28px 8px 0; position: relative; }
.steps > div + div { padding-left: 28px; border-left: 1px solid var(--line-dark); }
.steps h3 { margin: 16px 0 10px; font-size: 21px; }
.steps p { font-size: 15.5px; }
@media (max-width: 900px) {
    .steps { grid-template-columns: 1fr; }
    .steps > div, .steps > div + div { padding: 26px 0; border-left: none; border-bottom: 1px solid var(--line-dark); }
}

/* Founder */
.founder { display: grid; grid-template-columns: 380px 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.portrait { aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: linear-gradient(160deg, var(--plum), var(--ink) 85%); display: grid; place-items: center; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.portrait .mono { font-family: var(--logo); font-style: italic; font-weight: 600; font-size: 120px; color: rgba(255,255,255,0.9); letter-spacing: -0.04em; }
.sig { margin-top: 28px; display: flex; flex-direction: column; gap: 2px; }
.sig b { color: var(--on-light); font-weight: 500; font-size: 18px; }
.sig span { font-family: var(--logo); font-style: italic; font-size: 15px; color: var(--on-light-3); }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; } .portrait { max-width: 320px; } }

/* Team */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.team > div { padding: 28px; border-radius: 16px; border: 1px solid var(--line-light); background: #fff; }
.team b { display: block; color: var(--on-light); font-weight: 500; font-size: 19px; }
.team .role { display: block; margin: 4px 0 12px; font-family: var(--logo); font-style: italic; font-size: 15px; color: var(--plum); }

/* FAQ */
.faq { border-top: 1px solid var(--line-dark); }
.faq details { border-bottom: 1px solid var(--line-dark); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 26px 0; font-size: clamp(18px, 1.6vw, 21px); font-weight: 400; color: var(--on-dark); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 20px; color: var(--lav); transition: transform .2s; flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 28px; max-width: 760px; }
.faq summary:focus-visible { outline: 2px solid var(--lav-2); outline-offset: 4px; }
.light .faq, .light .faq details { border-color: var(--line-light); }
.light .faq summary { color: var(--on-light); }
.light .faq summary::after { color: var(--plum); }
.light .faq details p { color: var(--on-light-2); }
.light .faq summary:focus-visible { outline-color: var(--plum); }
.faq-split { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: clamp(32px, 6vw, 88px); }
@media (max-width: 860px) { .faq-split { grid-template-columns: 1fr; } }

/* Closing CTA */
.closer { text-align: left; }
.closer .h2 { font-size: clamp(36px, 4vw, 54px); }
.closer .lede { margin-top: 22px; }
.closer .btns { margin-top: 36px; }

/* "What you walk away with" list on the purple band */
.own-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; border-top: 1px solid rgba(255,255,255,0.2); }
.own-list li { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 17px; }
.own-list li::before { content: "+"; font-family: var(--mono); color: #e9d5ff; }
@media (max-width: 760px) { .own-list { grid-template-columns: 1fr; } }
.tl .when { font-family: var(--logo); font-style: italic; font-size: 16px; color: var(--lav); }

/* Footer */
.foot { background: var(--ink); border-top: 1px solid var(--line-dark); padding: 80px 0 40px; font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.foot-grid img { height: 28px; width: auto; margin-bottom: 18px; }
.foot-grid h4 { font-family: var(--logo); font-style: italic; font-weight: 400; font-size: 15px; color: var(--on-dark-3); margin-bottom: 16px; }
.foot-grid ul { list-style: none; display: grid; gap: 10px; }
.foot-grid a { text-decoration: none; color: var(--on-dark-2); }
.foot-grid a:hover { color: var(--on-dark); }
.foot-tag { max-width: 320px; color: var(--on-dark-2); }
.foot-base { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--on-dark-3); }
.foot-base a { color: var(--on-dark-3); text-decoration: none; margin-left: 18px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } }

/* Reveal: everything settles down into place from above, on load (.ld, staggered
   by sibling order) and on scroll (.rv). Same motion, two triggers. */
@keyframes fadeDown { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
.ld { animation: fadeDown .85s cubic-bezier(.2,.7,.1,1) both; }
.ld ~ .ld { animation-delay: .1s; }
.ld ~ .ld ~ .ld { animation-delay: .2s; }
.ld ~ .ld ~ .ld ~ .ld { animation-delay: .3s; }
.ld ~ .ld ~ .ld ~ .ld ~ .ld { animation-delay: .4s; }
.ld ~ .ld ~ .ld ~ .ld ~ .ld ~ .ld { animation-delay: .5s; }
@media (prefers-reduced-motion: reduce) { .ld { animation: none; } }
.rv { opacity: 0; transform: translateY(-18px); transition: opacity .7s ease, transform .7s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ── Booking + confirmation pages ── */
.cal-shell { background: #fff; border-radius: 18px; border: 1px solid var(--line-light); overflow: hidden; min-height: 720px; }
.cal-shell iframe { display: block; width: 100%; height: 720px; border: 0; }
.cal-fallback { margin-top: 18px; font-size: 14px; color: var(--on-light-3); }
.cal-fallback a { color: var(--plum); }
.next-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.next-step { padding: 32px; border-radius: 18px; background: #fff; border: 1px solid var(--line-light); display: flex; flex-direction: column; gap: 12px; }
.next-step h3 { color: var(--on-light); }
.next-step p { color: var(--on-light-2); font-size: 16px; }
.mail-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.mail-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 9px; border: 1px solid var(--line-light); background: var(--cream); color: var(--on-light); text-decoration: none; font-size: 14px; font-weight: 500; }
.mail-btn:hover { border-color: var(--plum); }
.mail-btn svg { width: 16px; height: 16px; }
.cal-shot { margin-top: 14px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-light); }
@media (max-width: 900px) { .next-steps { grid-template-columns: 1fr; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-mask { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee-row { display: flex; align-items: center; gap: 20px; padding: 0 10px; }
.marquee-row img { height: clamp(200px, 28vw, 380px); width: auto; border-radius: 12px; border: 1px solid var(--line-dark); }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ── Logo marquee (hero) ── */
.logos { display: block; }
.logos .label { display: block; margin: 0 0 18px; text-wrap: balance; max-width: 40ch; }
.logos .marquee-track { animation-duration: 36s; }
.logos .marquee-row { gap: clamp(36px, 5vw, 72px); padding: 0 clamp(18px, 2.5vw, 36px); }
.logos .lg { display: inline-flex; align-items: center; gap: 12px; opacity: .7; }
.logos .lg b { font-weight: 500; font-size: 17px; letter-spacing: -0.01em; color: #d9d2e3; white-space: nowrap; }
.logos .marquee-row img { width: auto; border: 0; border-radius: 0; object-fit: contain; filter: grayscale(1) brightness(1.7); }

/* ── FAQ open/close: the answer settles down into place ── */
.faq .ans { overflow: hidden; }
.faq .ans p { padding: 0 0 28px; max-width: 760px; }
.faq details p { padding: 0; }

/* ── Case study pages ── */
/* Case study hero: text left, the mark in a tile on the right. On phones the
   tile shrinks and sits top right beside the breadcrumb row. */
.case-hero { display: grid; grid-template-columns: 1fr 300px; gap: clamp(32px, 5vw, 72px); align-items: center; }
.case-mark { aspect-ratio: 1; display: grid; place-items: center; padding: 32px; border: 1px solid var(--line-dark); border-radius: 22px; background: radial-gradient(circle at 30% 20%, rgba(66,0,97,0.65), rgba(17,11,24,0.6) 70%); }
.case-mark img { max-height: 96px; max-width: 220px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .95; }
.case-mark .plate-lg { display: grid; justify-items: center; gap: 16px; }
.case-mark .plate-lg b { font-weight: 500; font-size: 24px; color: #f3eef8; white-space: nowrap; }
.case-mark.photo { padding: 0; overflow: hidden; }
.case-mark.photo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center 12%; filter: none; opacity: 1; border-radius: 22px; }
@media (max-width: 860px) {
    .case-hero { grid-template-columns: 1fr; gap: 22px; }
    .case-mark { order: -1; width: 96px; padding: 16px; border-radius: 18px; justify-self: start; }
    .case-mark img { max-height: 44px; max-width: 64px; }
    .case-mark .plate-lg { gap: 0; }
    .case-mark .plate-lg b { display: none; }
    .case-mark.photo img { border-radius: 18px; }
}

/* At a glance: three equal cells; the purple panel sits on whichever one the
   pointer is over and rests on the result. */
.glance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.glance > div { position: relative; padding: 36px 32px 40px; border-radius: 18px; border: 1px solid var(--line-light); background: #fff; transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease; cursor: default; }
.glance .k { margin: 16px 0 12px; font-family: var(--logo); font-style: italic; font-size: 22px; color: var(--plum); transition: color .35s; }
.glance p { font-size: 18px; color: var(--on-light); transition: color .35s; }
.glance > div.on { background: var(--plum); border-color: var(--plum); color: #fff; transform: translateY(-4px); box-shadow: 0 24px 50px rgba(66,0,97,0.28); }
.glance > div.on .num, .glance > div.on .k { color: #e9d5ff; }
.glance > div.on p { color: #fff; }
@media (max-width: 900px) {
    .glance { grid-template-columns: 1fr; }
    .glance > div { padding: 28px 24px; }
}
.outcomes { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; border-top: 1px solid var(--line-light); }
.outcomes li { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line-light); color: var(--on-light); font-size: 17px; }
.outcomes li::before { content: "+"; font-family: var(--mono); color: var(--plum); }
@media (max-width: 760px) { .outcomes { grid-template-columns: 1fr; } }

/* ── Mobile pass ── */
@media (max-width: 520px) {
    .h1 { font-size: clamp(36px, 11vw, 46px); }
    .page-hero .h1 { font-size: clamp(34px, 10vw, 44px); }
    .h2 { font-size: clamp(26px, 7.7vw, 32px); }
    .hero { padding-top: calc(var(--header) + 44px); }
    .btns .btn { width: 100%; }
    .stats { grid-template-columns: 1fr; border-top: 1px solid var(--line-light); }
    .stats > div, .stats > div:nth-child(2n) { padding: 30px 0 28px !important; border-left: none !important; text-align: center; }
    .stats .v { font-size: 44px; }
    .stats .l { margin: 12px auto 0; padding: 0; max-width: 24ch; }
    .h1 { line-height: 1.1; }
    .h1-mark { height: .72em; margin: 0 .05em; }
    .hero .eyebrow { margin-bottom: 14px; font-size: 17px; }
    .hero.home-hero .h1 { font-size: 36px; }
    .page-hero .eyebrow { margin-bottom: 0; }
    .page-hero .h1 { margin-top: 14px !important; }
    .crumbs { font-size: 11px; letter-spacing: .08em; margin-bottom: 18px; }
    .faq-split { gap: 28px; }
    .sec-head { margin-bottom: 36px; }
    .closer .h2 { font-size: 32px; }
    .logos .label { text-align: center; margin-left: auto; margin-right: auto; }
    .pillar, .next-step, .tier, .card .body, .sector-card { padding-left: 20px; padding-right: 20px; }
    .board > div { padding: 18px; }
    .founder .portrait { max-width: 100%; }
}

/* ══ Polish pass (2026-10-12) ═══════════════════════════════════════════════
   Small details applied once here so every page carries them the same way:
   a hairline before each eyebrow, buttons and arrow links that answer the
   pointer, grids that settle in one item after another, boxes with a shared
   hover, lit logo plates, a paper grain over the whole page, and the hero
   drifting back as you scroll. Nothing changes colour, type or layout. */

/* Eyebrow: a short rule leads every section label. */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .55; flex: none; }

/* Buttons: the arrow nudges, the primary gets a soft plum glow, a press on touch. */
.btn { transition: background .2s, border-color .2s, transform .2s, color .2s, box-shadow .25s; }
.btn svg { transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn-primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 28px -8px rgba(66,0,97,.75); }
.light .btn-primary, .paper .btn-primary { box-shadow: 0 1px 2px rgba(24,17,31,.08); }
.light .btn-primary:hover, .paper .btn-primary:hover { box-shadow: 0 12px 28px -8px rgba(66,0,97,.55); }
.plum .btn-primary { box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.plum .btn-primary:hover { box-shadow: 0 12px 28px -8px rgba(0,0,0,.5); }
.btn:focus-visible, .link-arrow:focus-visible, a.card:focus-visible, .sector-card:focus-visible { outline: 2px solid var(--lav-2); outline-offset: 3px; }
.light :is(.btn, .link-arrow, a.card, .sector-card):focus-visible, .paper :is(.btn, .link-arrow, a.card):focus-visible { outline-color: var(--plum); }

/* Arrow links: an underline sweeps in from the left, stopping short of the arrow. */
.link-arrow { position: relative; }
.link-arrow::after { content: ""; position: absolute; left: 0; right: 22px; bottom: -3px; height: 1px; background: currentColor; opacity: .7; transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.7,.1,1); }
.link-arrow.muted::after { display: none; }
.link-arrow:hover::after, a.card:hover .link-arrow::after, .sector-card:hover .link-arrow::after, .pillar:hover .link-arrow::after { transform: scaleX(1); }
a.card:hover .link-arrow svg, .sector-card:hover .link-arrow svg, .pillar:hover .link-arrow svg { transform: translateX(3px); }

/* Grids settle in one item after another. The container itself reveals at
   once; each child runs the same fadeDown with a small delay by position.
   The animation only fills backwards, so once it ends the element's own
   hover transforms apply again. */
:is(.pillars, .ngrid, .steps, .cards, .fit, .own-list, .outcomes, .stats).rv { transition-duration: 0s; transform: none; }
:is(.pillars, .ngrid, .steps, .cards, .fit, .own-list, .outcomes, .stats).rv.in > * { animation: fadeDown .65s cubic-bezier(.2,.7,.1,1) backwards; }
:is(.pillars, .ngrid, .steps, .cards, .fit, .own-list, .outcomes, .stats).rv.in > :nth-child(2) { animation-delay: .08s; }
:is(.pillars, .ngrid, .steps, .cards, .fit, .own-list, .outcomes, .stats).rv.in > :nth-child(3) { animation-delay: .16s; }
:is(.pillars, .ngrid, .steps, .cards, .fit, .own-list, .outcomes, .stats).rv.in > :nth-child(4) { animation-delay: .24s; }
:is(.pillars, .ngrid, .steps, .cards, .fit, .own-list, .outcomes, .stats).rv.in > :nth-child(5) { animation-delay: .32s; }
:is(.pillars, .ngrid, .steps, .cards, .fit, .own-list, .outcomes, .stats).rv.in > :nth-child(6) { animation-delay: .40s; }
:is(.pillars, .ngrid, .steps, .cards, .fit, .own-list, .outcomes, .stats).rv.in > :nth-child(7) { animation-delay: .48s; }
:is(.pillars, .ngrid, .steps, .cards, .fit, .own-list, .outcomes, .stats).rv.in > :nth-child(n + 8) { animation-delay: .56s; }
/* Grids whose children carry .rv themselves (sector cards, tiers, case and portfolio cards). */
:is(.sector-cards, .tiers, .cards) > .rv:nth-child(2) { transition-delay: .08s; }
:is(.sector-cards, .tiers, .cards) > .rv:nth-child(3) { transition-delay: .16s; }
:is(.sector-cards, .tiers, .cards) > .rv:nth-child(4) { transition-delay: .24s; }
:is(.sector-cards, .tiers, .cards) > .rv:nth-child(5) { transition-delay: .32s; }
:is(.sector-cards, .tiers, .cards) > .rv:nth-child(n + 6) { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
    :is(.pillars, .ngrid, .steps, .cards, .fit, .own-list, .outcomes, .stats).rv.in > * { animation: none; }
    :is(.sector-cards, .tiers, .cards) > .rv { transition-delay: 0s; }
}

/* Boxes: one resting depth and one hover for every bordered panel. */
.fit > div, .tier:not(.feature), .next-step, .board > div, .glance > div, .card { box-shadow: 0 1px 2px rgba(24,17,31,.04); }
.fit > div, .tier:not(.feature), .next-step { transition: border-color .25s, box-shadow .25s; }
.fit > div:hover, .tier:not(.feature):hover, .next-step:hover { border-color: rgba(66,0,97,.35); box-shadow: 0 10px 30px -14px rgba(24,17,31,.18); }
.card { transition: transform .25s, box-shadow .25s, border-color .25s; }
.card:hover { border-color: rgba(66,0,97,.3); }
.dark-cards .card { box-shadow: none; }
.dark-cards .card:hover { border-color: var(--lav-2); }
.chip { transition: border-color .25s, color .25s; }
.sector-card:hover .chip { border-color: rgba(205,176,234,.45); }
.light .sector-card:hover .chip { border-color: rgba(66,0,97,.35); }
.tier.feature { background: radial-gradient(ellipse 90% 70% at 100% 0%, rgba(255,255,255,.1), transparent 60%), var(--plum); }

/* Numbered items: the counter brightens under the pointer. */
.num { transition: color .25s; }
.ngrid > div:hover .num, .steps > div:hover .num, .row:hover .num, .pillar:hover .num { color: var(--on-dark); }
.light :is(.ngrid > div, .steps > div, .row):hover .num, .paper :is(.ngrid > div, .steps > div, .row):hover .num { color: var(--on-light); }

/* FAQ: the question answers the pointer. */
.faq summary { transition: color .2s; }
.faq summary:hover { color: var(--lav); }
.light .faq summary:hover { color: var(--plum); }

/* Hero logos: the strip pauses under the pointer and the mark you are on comes forward. */
.logos .marquee-track:hover { animation-play-state: paused; }
.logos .lg { transition: opacity .25s; }
.logos .marquee-track:hover .lg { opacity: .45; }
.logos .marquee-track:hover .lg:hover { opacity: 1; }

/* Hero drifts back and softens as the page scrolls (JS sets --py and --p). */
.hero > .wrap { translate: 0 calc(var(--py, 0px) * .22); opacity: calc(1 - var(--p, 0) * .5); }
.hero::after { translate: 0 calc(var(--py, 0px) * .4); }
@media (prefers-reduced-motion: reduce) { .hero > .wrap, .hero::after { translate: none; opacity: 1; } }

/* A fine paper grain over the whole page. */
body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; }

/* Footer: the mark, faint, in the corner. */
.foot { position: relative; overflow: hidden; }
.foot::before { content: ""; position: absolute; right: -70px; bottom: -90px; width: 380px; height: 380px; background: url(/images/inflo-mark.png) center / contain no-repeat; opacity: .05; filter: grayscale(1) brightness(2); pointer-events: none; }
.foot .wrap { position: relative; }
@media (max-width: 520px) { .foot::before { width: 240px; height: 240px; right: -50px; bottom: -60px; } }

/* Touch: a press instead of a hover. */
@media (hover: none) {
    a.card:active, .sector-card:active { transform: scale(.985); transition-duration: .1s; }
    .btn:active { transform: scale(.98); }
}