/* ========================================================================== agencies-v2.css — Bespoke redesign layer for /agencies -------------------------------------------------------------------------- Rides on the shared v2 layer plus the partner-family layer. Requires, in this order: • css/site-v2.css (tokens, chrome, nav overlay, .nm-final-cta) • css/partners-v2.css (the `pv-` partner-program vocabulary) • css/partner-cards.css (the JS-rendered .partner-card directory cards) • this file and . Everything is scoped under `.nm-v2` and uses `ag-` (agencies-v2) classes. /agencies deliberately REUSES the /partners primitives (.pv-section, .pv-head, .pv-card, .pv-bento, .pv-stats, .pv-proof, .pv-form-card, .pv-brands) so the two pages read as one program. Only the set pieces that are genuinely agency-specific live here: 1. Split hero + partner roster (.ag-hero, .ag-roster) 2. In-app placements (.ag-place) 3. How it works rail (.ag-rail) 4. Merchant-feature tabs (.ag-tabs) 5. Directory chrome (.ag-dir) 6. FAQ accordion (.ag-faq) Follows DESIGN-SYSTEM.md: type ≤600, sharp shell / curved interior, dark bands take their inter-section gap as transparent margin, one blue accent. ========================================================================== */ /* ========================================================================== 1. HERO — asymmetric dark split (copy left, partner roster right) -------------------------------------------------------------------------- /partners runs a centred hero; this one is split, so the two sibling pages do not open with the same shot. Keeps the same dark radial band, badge, type scale and button pair so it still reads as the same program. ========================================================================== */ .nm-v2 #Hero-section.ag-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: radial-gradient(120% 150% at 78% -20%, #1f2a52 0%, #12111c 58%); color: #f8f8fb; padding: 0; overflow: hidden; } /* Faint blueprint grid, fading out toward the bottom. Gives the flat band some depth without adding another colour. */ .nm-v2 .ag-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 7.2rem 7.2rem; -webkit-mask-image: radial-gradient(90% 70% at 60% 30%, #000 0%, transparent 78%); mask-image: radial-gradient(90% 70% at 60% 30%, #000 0%, transparent 78%); pointer-events: none; } .nm-v2 .ag-hero__inner { position: relative; z-index: 2; flex: 1 1 auto; width: 100%; display: grid; grid-template-columns: 1fr 1.02fr; align-items: center; gap: clamp(3.2rem, 5vw, 6.4rem); padding-top: clamp(12rem, 14vw, 15rem); padding-bottom: clamp(3rem, 5vw, 5rem); } .nm-v2 .ag-hero__badge { display: inline-flex; align-items: center; gap: 0.9rem; padding: 0.6rem 1.4rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.04); font-family: "PT Mono", monospace; font-size: 1.15rem; letter-spacing: 0.1em; text-transform: uppercase; color: #cdd6ea; margin-bottom: 2.6rem; } .nm-v2 .ag-hero__badge .pv-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0.4rem rgba(74, 222, 128, 0.16); } .nm-v2 .ag-hero__title.big-heading-n { font-family: var(--v2-display); font-weight: 300; font-size: clamp(3.6rem, 4.9vw, 5.8rem); line-height: 1.04; letter-spacing: -0.02em; color: #ffffff; margin: 0; text-transform: none; } .nm-v2 .ag-hero__lead { max-width: 48rem; margin: 2.4rem 0 0; font-size: var(--fs-lead); line-height: 1.6; color: #c4c8d4; font-weight: 400; } .nm-v2 .ag-hero__lead strong { color: #ffffff; font-weight: 500; } .nm-v2 .ag-hero__cta { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 3.4rem; } /* Reuse the shared hero button pair (same as /partners and the homepage). */ .nm-v2 .ag-hero__cta .main-btn, .nm-v2 .ag-hero__cta .secondary-btn { width: auto; min-width: 0; padding: 1.4rem 2.8rem; white-space: nowrap; font-family: "PT Mono", sans-serif; } .nm-v2 .ag-hero__cta .main-btn span, .nm-v2 .ag-hero__cta .secondary-btn span { white-space: nowrap; } .nm-v2 .ag-hero__cta .main-btn { background: #ffffff; color: var(--very-dark); } .nm-v2 .ag-hero__cta .secondary-btn { border: 1px solid rgba(255, 255, 255, 0.32); color: #ffffff; background: transparent; } .nm-v2 .ag-hero__cta .secondary-btn:hover { border-color: #ffffff; } /* Brand marquee reuses .pv-brands from partners-v2.css; only the top gap differs here because the split hero is taller. */ .nm-v2 .ag-hero .pv-brands { padding-bottom: clamp(3rem, 5vw, 4.5rem); } @media (max-width: 991px) { .nm-v2 .ag-hero__inner { grid-template-columns: 1fr; /* Once stacked, the grid is taller than the band's min-height, so let the rows sit together instead of having the free space pushed between them. */ align-content: center; padding-top: clamp(10rem, 18vw, 13rem); } .nm-v2 .ag-hero__lead { max-width: 56rem; } } /* ========================================================================== 2. PARTNER ROSTER — the hero's visual half -------------------------------------------------------------------------- A live column of agencies already in the program, drifting slowly upward and looping seamlessly. Every row is a real partner pulled from the directory further down the page, so the hero opens on proof rather than on a commission figure. Outer panel is sharp; every object nested inside it is curved, per DESIGN-SYSTEM.md → Border Radius ("sharp shell, curved interior"). ========================================================================== */ .nm-v2 .ag-roster { position: relative; display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.42); padding: clamp(2.2rem, 2.6vw, 2.8rem); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .nm-v2 .ag-roster__head { display: flex; align-items: center; gap: 1rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .nm-v2 .ag-roster__label { font-family: "PT Mono", monospace; font-size: 1.2rem; letter-spacing: 0.14em; text-transform: uppercase; color: #8e97ab; margin: 0; } /* Viewport: five rows tall, faded at both ends so the loop has no seam. */ .nm-v2 .ag-roster__view { position: relative; height: 33rem; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 11%, #000 89%, transparent); mask-image: linear-gradient(180deg, transparent, #000 11%, #000 89%, transparent); } .nm-v2 .ag-roster__track { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.4rem 0; animation: ag-roster-scroll 46s linear infinite; } .nm-v2 .ag-roster__view:hover .ag-roster__track { animation-play-state: paused; } @keyframes ag-roster-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } } .nm-v2 .ag-agency { display: flex; align-items: center; gap: 1.4rem; flex: 0 0 auto; padding: 1.1rem 1.4rem; border-radius: 1.2rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); transition: background 0.25s ease, border-color 0.25s ease; } .nm-v2 .ag-agency:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); } .nm-v2 .ag-agency__mark { flex: 0 0 auto; width: 3.8rem; height: 3.8rem; border-radius: 1rem; background: #ffffff; padding: 0.6rem; box-sizing: border-box; object-fit: contain; } .nm-v2 .ag-agency__body { min-width: 0; flex: 1 1 auto; } .nm-v2 .ag-agency__name { display: block; font-family: var(--v2-display); font-weight: 400; font-size: 1.7rem; line-height: 1.2; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nm-v2 .ag-agency__loc { display: block; margin-top: 0.2rem; font-size: 1.25rem; line-height: 1.3; color: #8e97ab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nm-v2 .ag-agency__tier { flex: 0 0 auto; padding: 0.4rem 1rem; border-radius: 999px; font-family: "PT Mono", monospace; font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .nm-v2 .ag-agency__tier--platinum { background: rgba(147, 178, 255, 0.16); color: #b9cbff; } .nm-v2 .ag-agency__tier--premier { background: rgba(255, 210, 122, 0.14); color: #ffd27a; } .nm-v2 .ag-agency__tier--plus { background: rgba(134, 239, 172, 0.12); color: #86efac; } .nm-v2 .ag-roster__foot { display: flex; align-items: center; gap: 1.6rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.12); } .nm-v2 .ag-roster__count { font-size: var(--fs-body-sm); color: #aeb5c7; margin: 0; } .nm-v2 .ag-roster__count b { color: #ffffff; font-weight: 500; } .nm-v2 .ag-roster__link { display: inline-flex; align-items: center; gap: 0.6rem; margin-left: auto; font-family: "PT Mono", monospace; font-size: 1.25rem; letter-spacing: 0.04em; color: #9db6ff; } .nm-v2 .ag-roster__link svg { width: 1.5rem; height: 1.5rem; transition: transform 0.25s ease; } .nm-v2 .ag-roster__link:hover svg { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .nm-v2 .ag-roster__track { animation: none; } .nm-v2 .ag-roster__view { height: auto; max-height: 33rem; -webkit-mask-image: none; mask-image: none; } } @media (max-width: 991px) { .nm-v2 .ag-roster { max-width: 56rem; } } @media (max-width: 479px) { .nm-v2 .ag-roster__view { height: 26rem; } .nm-v2 .ag-agency__tier { display: none; } } /* ========================================================================== 3. BENTO — "what you get". Reuses .pv-bento; only the extras are here. -------------------------------------------------------------------------- Two of the eight cells carry a visual instead of an icon (the tinted figure cell and the directory-preview cell) so the grid is not eight white text tiles. ========================================================================== */ .nm-v2 .ag-bento__feature { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 2.8rem; background: radial-gradient(120% 130% at 12% 8%, #1f2a52 0%, #12111c 62%); border: 1px solid rgba(255, 255, 255, 0.08); padding: clamp(2.8rem, 3vw, 3.6rem); } .nm-v2 .ag-bento__feature .pv-eyebrow { color: #ffd27a; } .nm-v2 .ag-bento__feature-title { font-family: var(--v2-display); font-weight: 300; font-size: clamp(2.4rem, 2.8vw, 3.2rem); line-height: 1.12; letter-spacing: -0.015em; color: #ffffff; margin: 0; } /* Nested inside the dark cell, so it curves. `overflow: hidden` is what makes the two figure tiles clip to the rounded shell instead of squaring off its corners (DESIGN-SYSTEM.md → Border Radius: never a sharp box inside a box). */ .nm-v2 .ag-bento__figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 1.6rem; overflow: hidden; } .nm-v2 .ag-bento__fig { background: rgba(255, 255, 255, 0.02); padding: clamp(2rem, 2.4vw, 2.6rem) 1.8rem; } .nm-v2 .ag-bento__fig-num { font-family: var(--v2-display); font-weight: 400; font-size: clamp(3.2rem, 3.8vw, 4.2rem); line-height: 1; letter-spacing: -0.02em; color: #ffd27a; } .nm-v2 .ag-bento__fig-label { margin-top: 1rem; font-size: var(--fs-body-sm); line-height: 1.4; color: #aeb5c7; } /* Plain cells */ .nm-v2 .ag-bento__cell { display: flex; flex-direction: column; background: #ffffff; border: 1px solid var(--v2-line); padding: clamp(2.4rem, 2.6vw, 3rem); box-shadow: 0 1px 2px rgba(18, 17, 28, 0.04); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .nm-v2 .ag-bento__cell:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(18, 17, 28, 0.10); border-color: #d3d8e4; } .nm-v2 .ag-bento__cell .pv-ico { width: 4.2rem; height: 4.2rem; border-radius: 1.2rem; margin-bottom: 1.8rem; } .nm-v2 .ag-bento__cell .pv-ico svg { width: 2.1rem; height: 2.1rem; } .nm-v2 .ag-bento__cell-title { font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h4); line-height: 1.2; color: var(--v2-ink); margin: 0 0 0.9rem; } .nm-v2 .ag-bento__cell-text { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--v2-muted); margin: 0; } /* The wide cell carries the live directory count as its visual. */ .nm-v2 .ag-bento__cell--wide { grid-column: span 2; flex-direction: row; align-items: center; gap: clamp(2rem, 3vw, 3.2rem); background: linear-gradient(120deg, #eef2fb 0%, #f7f8fc 62%); } .nm-v2 .ag-bento__cell--wide .ag-bento__body { flex: 1 1 auto; min-width: 0; } .nm-v2 .ag-bento__cell--wide > .pv-ico { width: 6rem; height: 6rem; border-radius: 1.6rem; margin: 0; background: #ffffff; box-shadow: 0 6px 20px rgba(18, 17, 28, 0.10); } .nm-v2 .ag-bento__cell--wide > .pv-ico svg { width: 2.8rem; height: 2.8rem; } .nm-v2 .ag-bento__faces { flex: 0 0 auto; display: flex; align-items: center; } .nm-v2 .ag-bento__faces img, .nm-v2 .ag-bento__faces span { width: 4.4rem; height: 4.4rem; border-radius: 50%; background: #ffffff; border: 2px solid #ffffff; box-shadow: 0 4px 14px rgba(18, 17, 28, 0.12); object-fit: contain; padding: 0.7rem; box-sizing: border-box; margin-left: -1.2rem; } .nm-v2 .ag-bento__faces img:first-child, .nm-v2 .ag-bento__faces span:first-child { margin-left: 0; } .nm-v2 .ag-bento__faces span { display: inline-flex; align-items: center; justify-content: center; padding: 0; font-family: "PT Mono", monospace; font-size: 1.2rem; color: var(--v2-blue); background: #e4ebfb; } .nm-v2 .ag-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(19rem, auto); gap: 2rem; } @media (max-width: 991px) { .nm-v2 .ag-bento { grid-template-columns: repeat(2, 1fr); } .nm-v2 .ag-bento__feature { grid-column: span 2; grid-row: auto; } .nm-v2 .ag-bento__cell--wide { grid-column: span 2; } } @media (max-width: 559px) { .nm-v2 .ag-bento { grid-template-columns: 1fr; } .nm-v2 .ag-bento__feature, .nm-v2 .ag-bento__cell--wide { grid-column: auto; } .nm-v2 .ag-bento__cell--wide { flex-direction: column; align-items: flex-start; } } /* ========================================================================== 4. PLACEMENTS — one wide product still, three numbered notes beneath -------------------------------------------------------------------------- Media-first section: the screenshot is the argument, the notes only annotate it. Deliberately NOT another card grid. ========================================================================== */ .nm-v2 .ag-place__frame { margin: 0; position: relative; background: linear-gradient(180deg, #eef1f8 0%, #f7f8fc 100%); border: 1px solid var(--v2-line); padding: clamp(1.6rem, 2.4vw, 3rem); box-shadow: 0 30px 80px rgba(18, 17, 28, 0.10); } .nm-v2 .ag-place__frame img { display: block; width: 100%; height: auto; border-radius: 0.8rem; } .nm-v2 .ag-place__notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 3vw, 3.2rem); margin-top: clamp(3.2rem, 4vw, 4.4rem); } .nm-v2 .ag-note { display: grid; grid-template-columns: auto 1fr; gap: 0 1.4rem; padding-top: 2rem; border-top: 2px solid var(--v2-ink); } .nm-v2 .ag-note__num { grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--v2-blue); color: #ffffff; font-family: "PT Mono", monospace; font-size: 1.3rem; } .nm-v2 .ag-note__title { font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h4); line-height: 1.2; color: var(--v2-ink); margin: 0.2rem 0 0.8rem; } .nm-v2 .ag-note__text { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--v2-muted); margin: 0; } @media (max-width: 767px) { .nm-v2 .ag-place__notes { grid-template-columns: 1fr; gap: 2.4rem; } } /* ========================================================================== 5. HOW IT WORKS — horizontal rail on a dark band -------------------------------------------------------------------------- Dark full-bleed band, so the inter-section gap is transparent MARGIN, not padding (DESIGN-SYSTEM.md → Section Padding & Vertical Rhythm). ========================================================================== */ .nm-v2 .ag-steps { background: radial-gradient(120% 160% at 50% -30%, #1f2a52 0%, #12111c 60%); color: #f2f4fa; padding: clamp(6rem, 9vw, 9rem) 0; margin: clamp(6rem, 10vw, 10rem) 0; } /* A coloured neighbour already paints the gap with its own bottom padding, so the band's transparent margin on that side would render as a white sliver between two bands. Drop it there, keep it against white sections. */ .nm-v2 .pv-section--wash + .ag-steps, .nm-v2 .pv-section--cream + .ag-steps { margin-top: 0; } .nm-v2 .ag-steps:has(+ .pv-section--wash), .nm-v2 .ag-steps:has(+ .pv-section--cream) { margin-bottom: 0; } .nm-v2 .ag-steps .pv-head .big-heading-n { color: #ffffff; } .nm-v2 .ag-steps .pv-head__sub { color: #b4bcd0; } .nm-v2 .ag-steps .pv-eyebrow { color: #9db6ff; } .nm-v2 .ag-rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(2rem, 3vw, 3.2rem); } /* The connecting line runs through the marker row. */ .nm-v2 .ag-rail::before { content: ""; position: absolute; top: 1.6rem; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.26) 12%, rgba(255, 255, 255, 0.26) 88%, rgba(255, 255, 255, 0.06)); } .nm-v2 .ag-step { position: relative; } .nm-v2 .ag-step__marker { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: #171730; border: 1px solid rgba(255, 210, 122, 0.45); box-shadow: 0 0 0 0.6rem rgba(18, 17, 28, 0.9); color: #ffd27a; font-family: "PT Mono", monospace; font-size: 1.3rem; margin-bottom: 2.6rem; } .nm-v2 .ag-step__title { font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h4); line-height: 1.2; color: #ffffff; margin: 0 0 0.9rem; } .nm-v2 .ag-step__text { font-size: var(--fs-body-sm); line-height: 1.55; color: #a7aec1; margin: 0; } /* Four columns get cramped before the single-column breakpoint. */ @media (max-width: 991px) and (min-width: 768px) { .nm-v2 .ag-rail { grid-template-columns: repeat(2, 1fr); row-gap: 4rem; } .nm-v2 .ag-rail::before { display: none; } } @media (max-width: 767px) { .nm-v2 .ag-rail { grid-template-columns: 1fr; gap: 3rem; } .nm-v2 .ag-rail::before { top: 0; bottom: 0; left: 1.6rem; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.26) 8%, rgba(255, 255, 255, 0.26) 92%, rgba(255, 255, 255, 0.06)); } .nm-v2 .ag-step__marker { margin-bottom: 1.4rem; } } /* ========================================================================== 6. MERCHANT FEATURES — vertical switcher + screenshot -------------------------------------------------------------------------- Restyles the Webflow tabs component already on the page (.w-tabs). Keeps its markup and JS; only the skin changes. ========================================================================== */ .nm-v2 .ag-tabs.w-tabs { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(3rem, 5vw, 6rem); align-items: stretch; } /* webflow.css gives .w-tabs a clearfix pair pinned to `grid-area: 1/1/2/2`. Harmless while the element is a block; once it becomes a grid they occupy the first cell and shove the menu and the panel onto different rows. */ .nm-v2 .ag-tabs.w-tabs::before, .nm-v2 .ag-tabs.w-tabs::after { display: none; } /* Stretch the switcher to the panel's height and centre the rows inside it, so the first hairline lines up with the top of the still instead of the list floating in the middle of an empty column. */ .nm-v2 .ag-tabs .w-tab-menu { display: flex; flex-direction: column; justify-content: center; border-top: 1px solid var(--v2-line); } .nm-v2 .ag-tabs .w-tab-content { align-self: center; } .nm-v2 .ag-tabs .ag-tab { display: block; width: 100%; text-align: left; /* Sized so four rows come close to the still's height; a short list beside a tall panel leaves the column looking half-empty. */ padding: 3.4rem 0; border-bottom: 1px solid var(--v2-line); background: transparent; text-decoration: none; transition: opacity 0.25s ease; } .nm-v2 .ag-tabs .ag-tab__title { font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.2; color: var(--v2-muted); transition: color 0.25s ease; } .nm-v2 .ag-tabs .ag-tab__text { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--v2-muted); margin-top: 0.8rem; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s ease, margin-top 0.35s ease; } .nm-v2 .ag-tabs .ag-tab.w--current .ag-tab__title { color: var(--v2-ink); } .nm-v2 .ag-tabs .ag-tab.w--current .ag-tab__text { max-height: 12rem; opacity: 1; } .nm-v2 .ag-tabs .ag-tab:hover .ag-tab__title { color: var(--v2-ink); } /* Active marker: a blue rule that replaces the hairline. */ .nm-v2 .ag-tabs .ag-tab.w--current { box-shadow: inset 0 -2px 0 var(--v2-blue); } .nm-v2 .ag-tabs .w-tab-content { width: 100%; } .nm-v2 .ag-tabs .ag-tabpane { background: linear-gradient(160deg, #eef2fb 0%, #f7f8fc 60%); border: 1px solid var(--v2-line); padding: clamp(2rem, 3vw, 3.6rem); box-shadow: 0 24px 60px rgba(18, 17, 28, 0.08); } /* Fill the panel width. The four stills have different aspect ratios, so the panel height changes per tab; the grid centres it, which reads as intended rather than as a jump. */ .nm-v2 .ag-tabs .ag-tabpane img { display: block; width: 100%; height: auto; border-radius: 0.8rem; } @media (max-width: 991px) { .nm-v2 .ag-tabs.w-tabs { grid-template-columns: 1fr; } .nm-v2 .ag-tabs .ag-tab__text { max-height: 12rem; opacity: 1; } } /* ========================================================================== 7. PROOF — one wide quote card beside two stacked stat cards (cream band) ========================================================================== */ .nm-v2 .ag-proof { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 2rem; align-items: stretch; } .nm-v2 .ag-proof__side { display: grid; grid-template-rows: 1fr 1fr; gap: 2rem; } /* The quote card carries the section's image. It bleeds to the card edges, so the padding is cancelled with negative margins rather than removed (the rest of the card still needs it). */ .nm-v2 .ag-quote__media { margin: calc(clamp(2.8rem, 3vw, 3.6rem) * -1) calc(clamp(2.8rem, 3vw, 3.6rem) * -1) clamp(2.8rem, 3vw, 3.4rem); aspect-ratio: 16 / 7; overflow: hidden; background: #eceff5; } .nm-v2 .ag-quote__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .nm-v2 .ag-quote { font-family: var(--v2-display); font-weight: 300; font-size: var(--fs-quote); line-height: 1.34; letter-spacing: -0.01em; color: var(--v2-ink); /* The global sheet gives

a left rule and inset padding. */ border: 0; padding: 0; margin: 0 0 2.8rem; } .nm-v2 .ag-quote__by { display: flex; align-items: center; gap: 1.2rem; margin-top: auto; padding-top: 2.4rem; border-top: 1px solid var(--v2-line); } .nm-v2 .ag-quote__avatar { width: 4.4rem; height: 4.4rem; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .nm-v2 .ag-quote__name { font-size: var(--fs-body); color: var(--v2-ink); font-weight: 500; } .nm-v2 .ag-quote__role { font-size: var(--fs-body-sm); color: var(--v2-muted); } @media (max-width: 860px) { .nm-v2 .ag-proof { grid-template-columns: 1fr; } } /* ========================================================================== 8. DIRECTORY — chrome around the JS-rendered .partner-card grid ========================================================================== */ .nm-v2 .ag-dir__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--v2-line); margin-bottom: clamp(3rem, 4vw, 4rem); } .nm-v2 .ag-dir__filters { display: flex; flex-wrap: wrap; gap: 1.6rem; } .nm-v2 .ag-dir__field { display: flex; flex-direction: column; gap: 0.7rem; } .nm-v2 .ag-dir__field label { font-size: 1.3rem; font-weight: 500; color: var(--v2-ink); } .nm-v2 .ag-dir__field select { appearance: none; min-width: 20rem; font-family: "Inter Tight", sans-serif; font-size: 1.45rem; color: var(--v2-ink); background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b606b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.4rem center; border: 1px solid var(--v2-line); border-radius: 999px; padding: 1.1rem 4rem 1.1rem 1.8rem; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .nm-v2 .ag-dir__field select:focus { outline: 0; border-color: var(--v2-blue-bright); box-shadow: 0 0 0 3px rgba(67, 128, 249, 0.14); } .nm-v2 .ag-dir__count { font-family: "PT Mono", monospace; font-size: 1.25rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--v2-muted); padding-bottom: 1.2rem; } .nm-v2 .ag-dir__empty { padding: 6rem 2rem; text-align: center; font-size: var(--fs-body-lg); color: var(--v2-muted); border: 1px dashed var(--v2-line); } /* v2 skin over the shared partner-cards.css component: sharp shell, curved interior, house type. */ .nm-v2 .partner-cards-grid { max-width: none; } .nm-v2 .partner-card { border-radius: 0; border-color: var(--v2-line); font-family: "Inter Tight", sans-serif; padding: clamp(2.4rem, 2.6vw, 2.8rem); } .nm-v2 .partner-card:hover { border-color: #d3d8e4; box-shadow: 0 18px 44px rgba(18, 17, 28, 0.10); transform: translateY(-4px); } .nm-v2 .partner-card__name { font-family: var(--v2-display); font-weight: 400; font-size: 1.9rem; color: var(--v2-ink); } .nm-v2 .partner-card__loc { font-size: 1.25rem; color: var(--v2-muted); } .nm-v2 .partner-card__logo { border-radius: 1rem; } .nm-v2 .partner-card__tier { font-weight: 500; } .nm-v2 .partner-card__desc { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--v2-muted); } .nm-v2 .partner-card__tag { font-weight: 400; } .nm-v2 .partner-card__visit { font-family: "PT Mono", monospace; font-size: 1.25rem; letter-spacing: 0.04em; color: var(--v2-blue); } .nm-v2 .partner-pagination { margin-top: clamp(3rem, 4vw, 4rem); } /* Featured strip above the grid: the four flagship partners. */ .nm-v2 .ag-dir__featured { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-bottom: clamp(3.2rem, 4vw, 4.4rem); } .nm-v2 .ag-feat { display: flex; align-items: center; gap: 1.4rem; padding: 1.8rem 2rem; background: linear-gradient(120deg, #eef2fb 0%, #f7f8fc 70%); border: 1px solid var(--v2-line); text-decoration: none; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease; } .nm-v2 .ag-feat:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(18, 17, 28, 0.10); } .nm-v2 .ag-feat img { width: 3.6rem; height: 3.6rem; border-radius: 0.9rem; background: #ffffff; padding: 0.5rem; box-sizing: border-box; object-fit: contain; flex: 0 0 auto; } .nm-v2 .ag-feat__name { display: block; font-family: var(--v2-display); font-weight: 400; font-size: 1.7rem; line-height: 1.2; color: var(--v2-ink); } .nm-v2 .ag-feat__loc { display: block; font-size: 1.25rem; color: var(--v2-muted); margin-top: 0.2rem; } @media (max-width: 991px) { .nm-v2 .ag-dir__featured { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 559px) { .nm-v2 .ag-dir__featured { grid-template-columns: 1fr; } } /* ========================================================================== 9. FAQ — two-column accordion ========================================================================== */ .nm-v2 .ag-faq { display: grid; grid-template-columns: 0.84fr 1.16fr; gap: clamp(3rem, 5vw, 6rem); align-items: start; } .nm-v2 .ag-faq__aside .big-heading-n { margin: 0 0 1.6rem; } .nm-v2 .ag-faq__copy { font-size: var(--fs-lead); line-height: 1.6; color: var(--v2-muted); margin: 0 0 2.4rem; } .nm-v2 .ag-faq__link { display: inline-flex; align-items: center; gap: 0.7rem; font-family: "PT Mono", monospace; font-size: 1.3rem; color: var(--v2-blue); } .nm-v2 .ag-faq__link svg { width: 1.6rem; height: 1.6rem; } .nm-v2 .ag-faq__list { border-top: 1px solid var(--v2-line); } .nm-v2 .ag-q { border-bottom: 1px solid var(--v2-line); } .nm-v2 .ag-q__btn { appearance: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: transparent; border: 0; cursor: pointer; text-align: left; padding: 2.4rem 0; font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h4); line-height: 1.3; color: var(--v2-ink); transition: color 0.2s ease; } .nm-v2 .ag-q__btn:hover { color: var(--v2-blue); } .nm-v2 .ag-q__sign { position: relative; flex: 0 0 auto; width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 1px solid #d5dae4; transition: background 0.25s ease, border-color 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); } .nm-v2 .ag-q__sign::before, .nm-v2 .ag-q__sign::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1.3rem; height: 1.5px; background: var(--v2-ink); transform: translate(-50%, -50%); transition: opacity 0.25s ease, background 0.25s ease; } .nm-v2 .ag-q__sign::after { transform: translate(-50%, -50%) rotate(90deg); } .nm-v2 .ag-q[open] .ag-q__sign { background: var(--v2-blue); border-color: var(--v2-blue); transform: rotate(90deg); } .nm-v2 .ag-q[open] .ag-q__sign::before, .nm-v2 .ag-q[open] .ag-q__sign::after { background: #ffffff; } .nm-v2 .ag-q[open] .ag-q__sign::after { opacity: 0; } .nm-v2 .ag-q__body { padding: 0 6rem 2.8rem 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--v2-muted); margin: 0; } /*
ships with a disclosure triangle in every engine. */ .nm-v2 .ag-q__btn::-webkit-details-marker { display: none; } .nm-v2 .ag-q__btn { list-style: none; } .nm-v2 .ag-q[open] .ag-q__body { animation: ag-q-open 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); } @keyframes ag-q-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .nm-v2 .ag-q[open] .ag-q__body { animation: none; } .nm-v2 .ag-q__sign { transition: none; } } @media (max-width: 860px) { .nm-v2 .ag-faq { grid-template-columns: 1fr; } .nm-v2 .ag-q__body { padding-right: 0; } } /* ========================================================================== 10. APPLY — reuses .pv-apply__* and .pv-form-card. Only the "or book a call" aside note and the success panel button need agency wiring. ========================================================================== */ .nm-v2 .ag-apply__note { margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid var(--v2-line); font-size: var(--fs-body-sm); line-height: 1.6; color: var(--v2-muted); } .nm-v2 .partner-form-success .white-btn.filled-bg { display: inline-flex; width: auto; background: var(--v2-ink); color: #ffffff; } /* ========================================================================== 11. RHYTHM GLUE -------------------------------------------------------------------------- The shared closing band takes its gap as a transparent margin-top, which is right after a white section but paints a white sliver after a coloured one. ========================================================================== */ .nm-v2 .pv-section--wash + .nm-final-cta, .nm-v2 .pv-section--cream + .nm-final-cta { margin-top: 0; } /* Scroll-reveal: sections fade up once as they enter. Gated on the JS class so a no-JS render shows everything immediately. */ .nm-v2.ag-anim .ag-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); } .nm-v2.ag-anim .ag-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .nm-v2.ag-anim .ag-reveal { opacity: 1; transform: none; transition: none; } }