/* ============================================================ NOMERES — shared enhancement layer (motion + responsive) Loaded on every page. Progressive enhancement only: with JS off or reduced-motion on, everything stays visible. ============================================================ */ /* Self-hosted variable fonts. No request to Google's servers (GDPR hardening); files live in assets/fonts/. The weight axis covers every weight the site uses (Inter 300-700, Source Serif 4 300-600). */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/inter-latin-wght-normal.woff2') format('woff2'); } @font-face{ font-family:'Source Serif 4'; font-style:normal; font-weight:200 900; font-display:swap; src:url('fonts/source-serif-4-latin-wght-normal.woff2') format('woff2'); } :root{ --nm-navy:#0A0F2E; --nm-gold:#c5a47e; --nm-ease:cubic-bezier(.2,.7,.2,1); --nm-reveal-ease:cubic-bezier(.22,.68,.28,1); } /* keep stray decorative elements from causing sideways scroll on phones */ html,body{ overflow-x:clip; } /* ---------- Scroll reveal ---------------------------------- */ /* Elements are only ever hidden once JS has confirmed support and tagged them; nm-anim on gates the hidden state so a JS failure can never leave content invisible. */ @keyframes nmReveal{ from{ opacity:0; transform:translateY(32px); } to{ opacity:1; transform:none; } } /* Keyframe animation, not a transition: a transition is skipped when the hidden and visible states are set in the same frame (which happens for elements already on screen at load), so those elements would pop in with no motion. An animation always plays. */ html.nm-anim .nm-reveal{ opacity:0; will-change:opacity,transform; } html.nm-anim .nm-reveal.nm-in{ animation:nmReveal 1.32s var(--nm-reveal-ease) both; /* base reveal, slowed 10% */ } /* Services stack (the only [data-nm-stagger]) reveals 25% slower for a more deliberate cascade */ html.nm-anim [data-nm-stagger] > .nm-reveal.nm-in{ animation-duration:1.5s; } /* ---------- Card hover lift -------------------------------- */ .nm-card{ transition:transform .32s var(--nm-ease), box-shadow .32s ease, border-color .32s ease, background-color .32s ease; } .nm-card:hover{ transform:translateY(-5px); } .nm-card.nm-card-light:hover{ border-color:var(--nm-gold)!important; box-shadow:0 24px 48px -28px rgba(10,15,46,.45); } .nm-card.nm-card-dark:hover{ box-shadow:0 30px 60px -30px rgba(0,0,0,.7); } /* primary/secondary buttons get a subtle press + glow */ .nm-btn{ transition:transform .18s var(--nm-ease), box-shadow .28s ease, background-color .28s ease, border-color .28s ease, color .28s ease; } .nm-btn:hover{ transform:translateY(-2px); } .nm-btn-gold:hover{ box-shadow:0 16px 32px -14px rgba(197,164,126,.65); } /* ---------- Nav polish ------------------------------------- */ nav{ transition:padding .3s ease, background-color .3s ease, box-shadow .3s ease; } .nm-navinner{ transition:padding .3s ease; } nav.nm-scrolled .nm-navinner{ padding-top:9px!important; padding-bottom:9px!important; } nav.nm-scrolled{ box-shadow:0 10px 30px -18px rgba(0,0,0,.8); } /* ---------- Review form: optional fields disclosure --------- Native
so nothing required is ever hidden (a hidden required control makes the browser refuse to submit with an unfocusable-control error). Hides the default marker and swaps the + for a - when open. */ .nm-review-more > summary::-webkit-details-marker{ display:none; } .nm-review-more > summary::marker{ content:""; } .nm-review-more > summary:focus-visible{ outline:2px solid var(--nm-gold); outline-offset:3px; } /* +/- matches the FAQ accordion's language (nomeres.js swaps the same two glyphs there). */ .nm-review-more > summary .nm-review-more-sign::before{ content:"+"; } .nm-review-more[open] > summary .nm-review-more-sign::before{ content:"\2212"; } /* ---------- Nav note (what the Insight Report actually is) ---- Sits immediately left of the entry CTA on desktop, and inside the burger drawer above the CTA on mobile, so a visitor who never opens a page still learns what the offer is. Hidden by default; each layout opts in below. Measured: the sentence is 279px on one line at 11px, which does NOT fit the nav. Wrapped to 170px it is two lines and 28px tall, which clears the 40px button row. With the note the row needs 1018px of layout width, so the nav wraps to two rows below that; 1080 leaves a buffer for scrollbar width and font variance. Between 861 and 1079 the nav is genuinely too tight (only ~51px spare at 861), so the note hides and the hero line carries it. */ .nm-navnote{ display:none; } @media (min-width:1080px){ .nm-navnote{ display:block; flex:0 0 auto; width:170px; text-align:right; font-size:10.5px; line-height:1.35; letter-spacing:.01em; color:rgba(255,255,255,.46); } } /* animated gold underline on desktop nav links */ @media (min-width:861px){ .nm-navlink{ position:relative; } .nm-navlink::after{ content:""; position:absolute; left:0; bottom:-5px; height:1px; width:100%; background:var(--nm-gold); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--nm-ease); } .nm-navlink:hover::after{ transform:scaleX(1); } } /* ---------- Mobile nav (hamburger drawer) ----------------- */ .nm-burger{ display:none; width:42px; height:38px; align-items:center; justify-content:center; background:transparent; border:1px solid rgba(255,255,255,.22); cursor:pointer; padding:0; } .nm-burger span{ position:relative; width:18px; height:1.5px; background:#fff; display:block; transition:transform .3s var(--nm-ease), opacity .2s ease; } .nm-burger span::before,.nm-burger span::after{ content:""; position:absolute; left:0; width:18px; height:1.5px; background:#fff; transition:transform .3s var(--nm-ease), top .3s var(--nm-ease); } .nm-burger span::before{ top:-6px; } .nm-burger span::after{ top:6px; } nav.nm-open .nm-burger span{ background:transparent; } nav.nm-open .nm-burger span::before{ top:0; transform:rotate(45deg); } nav.nm-open .nm-burger span::after{ top:0; transform:rotate(-45deg); } @media (max-width:860px){ .nm-burger{ display:inline-flex; } /* Before JS wires the drawer, hide the raw desktop link row so the full menu doesn't flash on load / navigation (the class is added by enhanceNav). */ nav > div > div:not(.nm-navlinks){ max-height:0; opacity:0; overflow:hidden; pointer-events:none; } .nm-navlinks{ position:absolute; top:100%; left:0; right:0; flex-direction:column!important; align-items:stretch!important; gap:0!important; background:var(--nm-navy); padding:8px 22px 26px!important; max-height:0; overflow:hidden; opacity:0; pointer-events:none; transition:max-height .38s var(--nm-ease), opacity .28s ease; } /* Full-length drawer so it reaches the screen bottom instead of floating a hard edge over the (same-navy) content below it. */ nav.nm-open .nm-navlinks{ max-height:none; min-height:calc(100vh - 44px); opacity:1; pointer-events:auto; overflow-y:auto; } .nm-navlinks > a, .nm-navlinks .navdrop{ width:100%; padding:13px 2px!important; border-bottom:1px solid rgba(255,255,255,.07); font-size:15px!important; } .nm-navlinks > a:last-child{ border-bottom:none; margin-top:16px; text-align:center; border:1px solid var(--nm-gold)!important; padding:14px!important; } /* In the drawer the note explains the CTA that sits right under it. The last link above already draws a divider, so the note adds no border of its own. */ .nm-navnote{ display:block; width:100%; margin-top:20px; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.5); } .nm-navnote + a{ margin-top:10px!important; } /* Services submenu: collapsed by default, expands on tap (JS toggles .nm-sub-open) */ .nm-navlinks .navtoggle{ display:flex; align-items:center; justify-content:space-between; padding:13px 2px; font-size:15px!important; } .nm-navlinks .navmenu{ display:none!important; position:static!important; padding-top:0!important; } .nm-navlinks .navdrop.nm-sub-open .navmenu{ display:block!important; } .nm-navlinks .navdrop.nm-sub-open{ padding-bottom:6px!important; } .nm-navlinks .navmenu > div{ background:transparent!important; border:none!important; box-shadow:none!important; padding:2px 0 6px!important; } .nm-navlinks .navmenu a{ padding:9px 14px!important; font-size:14px!important; border-bottom:none!important; } } /* ---------- CashFlow "two ways" band divider -------------- Band is white now (it used to be a gold slab), so the rules use the standard hairline colour rather than a navy alpha that was tuned for gold. */ @media (min-width:721px){ .nm-twoway > div:nth-child(2){ border-left:1px solid #e6e3dd; padding-left:clamp(28px,5vw,64px); } } /* ---------- Split-fade image band (bleeds from edge, dissolves into navy) */ @media (max-width:720px){ /* when the band stacks, fade the image downward into the text instead of sideways */ .nm-splitfade-tint{ background:linear-gradient(180deg, rgba(10,15,46,0.12) 0%, rgba(10,15,46,0.45) 55%, rgba(10,15,46,1) 100%)!important; } } /* ---------- Responsive: stop content grids clipping -------- */ /* The design uses repeat(auto-fit,minmax(360-380px,1fr)); below ~430px the min column is wider than the viewport and content gets cut off. Collapse multi-column content grids to one column on small screens. */ @media (max-width:720px){ [style*="grid-template-columns"]:not([data-nm-keep]){ grid-template-columns:1fr!important; } [data-nm-keep2]{ grid-template-columns:1fr 1fr!important; } } /* ---------- Motion safety --------------------------------- */ @media (prefers-reduced-motion:reduce){ html.nm-anim .nm-reveal{ opacity:1!important; transform:none!important; animation:none!important; } .nm-card:hover,.nm-btn:hover{ transform:none; } *{ animation-duration:.001ms!important; animation-iteration-count:1!important; } } /* ============================================================ REFINEMENT LAYER — institutional restraint pass Benchmark: BlackRock / Goldman / McKinsey — calm, unified type, deliberate rhythm, presence on large screens. Overrides the inline clamp() values via !important. React serialises inline styles with spaces, so attribute selectors match "prop: value". ============================================================ */ /* ---- Unified, calmer type scale ---- */ section h1{ /* page hero headline */ font-size:clamp(29px, 4.35vw, 53px)!important; line-height:1.13!important; letter-spacing:-0.021em!important; } h2[style*="font-weight: 300"]{ /* light-weight serif section headings */ font-size:clamp(23px, 2.85vw, 37px)!important; line-height:1.22!important; letter-spacing:-0.018em!important; } section p[style*="font-size: 18px"]{ /* hero / lead paragraphs */ font-size:clamp(15.5px, 1.05vw, 17px)!important; line-height:1.72!important; } /* ---- Large screens: give the composition more presence ---- */ @media (min-width:1500px){ nav > div{ max-width:1400px!important; } [style*="max-width: 1240px"]{ max-width:1340px!important; } [style*="max-width: 1180px"]{ max-width:1280px!important; } } /* ============================================================ PRICING CONFIGURATOR ============================================================ */ .nm-cfg{ font-family:'Inter',sans-serif; } .nm-cfg-mbar{ display:none; } /* mobile-only sticky estimate bar (shown ≤600px) */ /* one framed instrument: cream "configure" side + navy "quote" side, meeting at a hairline */ .nm-cfg-grid{ display:grid; grid-template-columns:1.12fr 0.88fr; gap:0; align-items:stretch; border:1px solid #e4e0d8; box-shadow:0 34px 74px -46px rgba(10,15,46,0.36); } .nm-cfg-inputs{ padding:clamp(24px,3vw,42px); background:#faf8f4; } .nm-cfg-fs{ border:none; padding:0; margin:0 0 clamp(24px,2.6vw,34px); } .nm-cfg-fs:last-child{ margin-bottom:0; } .nm-cfg-legend{ font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#b08d5e; margin-bottom:15px; padding:0; } /* service checkbox cards */ .nm-cfg-svc{ display:flex; gap:15px; align-items:flex-start; background:#fff; border:1px solid #e6e3dd; padding:17px 18px; margin-bottom:10px; cursor:pointer; transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease; } .nm-cfg-svc:last-child{ margin-bottom:0; } .nm-cfg-svc:hover{ border-color:#cfc3ac; } .nm-cfg-svc:has(.nm-cfg-check:checked){ border-color:#c5a47e; background:#fdfbf7; box-shadow:inset 3px 0 0 #c5a47e; } /* custom square checkbox: navy fill + white tick when selected */ .nm-cfg-check{ appearance:none; -webkit-appearance:none; width:20px; height:20px; margin-top:2px; flex-shrink:0; border:1.5px solid #c7c1b6; background:#fff; cursor:pointer; position:relative; transition:border-color .18s ease, background-color .18s ease; } .nm-cfg-svc:hover .nm-cfg-check{ border-color:#b08d5e; } .nm-cfg-check:checked{ background:#0A0F2E; border-color:#0A0F2E; } .nm-cfg-check:checked::after{ content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg); } .nm-cfg-check:focus-visible{ outline:2px solid #c5a47e; outline-offset:2px; } .nm-cfg-svc-body{ display:flex; flex-direction:column; } .nm-cfg-svc-head{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:5px; } .nm-cfg-svc-name{ font-family:'Source Serif 4',serif; font-size:18px; font-weight:500; color:#0A0F2E; } .nm-cfg-tag{ font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#b08d5e; border:1px solid #e0d3ba; padding:3px 8px; } .nm-cfg-tag-flag{ background:#c5a47e; color:#0A0F2E; border-color:#c5a47e; } .nm-cfg-svc-desc{ font-size:13px; line-height:1.62; color:#5a6172; } /* per-card link out to the full service page (replaces the old expand-on-check list) */ .nm-cfg-more{ align-self:flex-start; margin-top:13px; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; letter-spacing:.02em; color:#b08d5e; transition:color .16s ease; } .nm-cfg-more:hover{ color:#0A0F2E; } .nm-cfg-more-arr{ transition:transform .18s var(--nm-ease); } .nm-cfg-more:hover .nm-cfg-more-arr{ transform:translateX(3px); } /* "Bookkeeping included" toggle on the Books & Insight card */ .nm-cfg-books{ display:flex; flex-direction:column; gap:6px; margin-top:14px; } .nm-cfg-books-toggle{ display:inline-flex; align-items:center; gap:10px; align-self:flex-start; background:none; border:none; padding:0; cursor:pointer; font-family:inherit; } .nm-cfg-books-track{ position:relative; width:38px; height:22px; flex-shrink:0; background:#d7d1c6; border-radius:22px; transition:background-color .2s ease; } .nm-cfg-books-knob{ position:absolute; top:2px; left:2px; width:18px; height:18px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(10,15,46,0.28); transition:transform .2s var(--nm-ease); } .nm-cfg-books-on .nm-cfg-books-track{ background:#c5a47e; } .nm-cfg-books-on .nm-cfg-books-knob{ transform:translateX(16px); } .nm-cfg-books-txt{ font-size:12.5px; font-weight:600; letter-spacing:.01em; color:#0A0F2E; } .nm-cfg-books-toggle:focus-visible{ outline:2px solid #c5a47e; outline-offset:3px; } .nm-cfg-books-help{ font-size:12px; line-height:1.5; color:#8a7f6b; font-style:italic; } .nm-cfg-more:focus-visible{ outline:2px solid #c5a47e; outline-offset:3px; } /* segmented control */ .nm-cfg-seg{ display:flex; border:1px solid #d8d3ca; background:#fff; } .nm-cfg-seg-item{ flex:1; position:relative; text-align:center; cursor:pointer; } .nm-cfg-seg-item:not(:last-child){ border-right:1px solid #e6e3dd; } .nm-cfg-seg-item input{ position:absolute; opacity:0; inset:0; cursor:pointer; } .nm-cfg-seg-item span{ display:block; padding:13px 6px; font-size:13px; font-weight:500; color:#5a6172; font-variant-numeric:tabular-nums; transition:background-color .18s ease, color .18s ease; } .nm-cfg-seg-item input:checked ~ span{ background:#0A0F2E; color:#fff; } .nm-cfg-seg-item:hover input:not(:checked) ~ span{ background:#f5f3ef; } .nm-cfg-seg-item input:focus-visible ~ span{ outline:2px solid #c5a47e; outline-offset:-2px; } /* entity stepper */ .nm-cfg-step{ display:inline-flex; align-items:stretch; border:1px solid #d8d3ca; background:#fff; } .nm-cfg-step-btn{ width:46px; background:#fff; border:none; cursor:pointer; font-size:20px; color:#0A0F2E; font-family:'Inter',sans-serif; transition:background-color .15s ease; } .nm-cfg-step-btn:hover{ background:#f5f3ef; } .nm-cfg-step-btn:disabled{ color:#c9c4ba; cursor:not-allowed; } .nm-cfg-ent{ min-width:64px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; color:#0A0F2E; font-variant-numeric:tabular-nums; border-left:1px solid #e6e3dd; border-right:1px solid #e6e3dd; } .nm-cfg-help{ font-size:12.5px; line-height:1.6; color:#8a909e; margin-top:12px; max-width:440px; } /* output: the navy "quote statement" side, full-bleed to the frame edge */ .nm-cfg-output{ background:#0A0F2E; background:linear-gradient(158deg,#111a44 0%,#0A0F2E 60%); display:flex; flex-direction:column; justify-content:center; } .nm-cfg-panel{ color:#fff; padding:clamp(28px,2.8vw,40px); width:100%; } .nm-cfg-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#c5a47e; margin-bottom:20px; } .nm-cfg-unbundled{ font-size:13px; color:rgba(255,255,255,0.42); text-decoration:line-through; font-variant-numeric:tabular-nums; margin-bottom:3px; } .nm-cfg-range{ font-family:'Source Serif 4',serif; font-size:clamp(30px,3.9vw,45px); font-weight:300; line-height:1.04; letter-spacing:-0.015em; color:#fff; font-variant-numeric:tabular-nums; } .nm-cfg-range .nm-cfg-per{ font-family:'Inter',sans-serif; font-size:14px; font-weight:400; color:rgba(255,255,255,0.5); letter-spacing:0; } .nm-cfg-range-invite{ font-family:'Source Serif 4',serif; font-size:20px; font-weight:300; line-height:1.4; color:rgba(255,255,255,0.9); } /* slim proportional composition bar, sits under the price */ .nm-cfg-stack{ display:flex; flex-direction:row; gap:2px; height:6px; margin-top:16px; } .nm-cfg-stack-block{ min-width:8px; transition:flex-grow .5s var(--nm-reveal-ease), background-color .3s ease; } .nm-cfg-stack-empty{ flex:1; border-top:1px dashed rgba(255,255,255,0.16); } .nm-cfg-note{ font-size:13px; line-height:1.6; color:#e2c79c; background:rgba(197,164,126,0.1); border-left:2px solid #c5a47e; padding:11px 14px; margin-top:18px; } .nm-cfg-receipt{ display:flex; flex-direction:column; gap:12px; margin:22px 0; padding:20px 0; border-top:1px solid rgba(255,255,255,0.12); border-bottom:1px solid rgba(255,255,255,0.12); } .nm-cfg-receipt:empty{ display:none; } .nm-cfg-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:13.5px; } .nm-cfg-row-label{ display:flex; align-items:center; gap:9px; color:rgba(255,255,255,0.8); } .nm-cfg-dot{ width:9px; height:9px; flex-shrink:0; } .nm-cfg-row-val{ color:rgba(255,255,255,0.62); white-space:nowrap; font-variant-numeric:tabular-nums; } .nm-cfg-row-bundle .nm-cfg-row-label,.nm-cfg-row-bundle .nm-cfg-row-val{ color:#e2c79c; font-weight:500; } .nm-cfg-estimate{ font-size:12px; line-height:1.6; color:rgba(255,255,255,0.5); margin-bottom:20px; } .nm-cfg-cta{ display:flex; align-items:center; justify-content:center; padding:15px; background:#c5a47e; color:#0A0F2E; font-size:14.5px; font-weight:600; letter-spacing:.02em; transition:transform .18s var(--nm-ease), box-shadow .28s ease; } .nm-cfg-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(197,164,126,.6); } .nm-cfg-email{ text-align:center; margin-top:16px; } .nm-cfg-email-toggle{ background:none; border:none; cursor:pointer; font-family:'Inter',sans-serif; font-size:13px; color:rgba(255,255,255,0.62); text-decoration:underline; text-underline-offset:3px; } .nm-cfg-email-toggle:hover{ color:#fff; } .nm-cfg-email-label{ display:block; font-size:12px; color:rgba(255,255,255,0.6); margin:14px 0 8px; text-align:left; } .nm-cfg-email-row{ display:flex; gap:8px; } .nm-cfg-email-row input{ flex:1; padding:11px 13px; font-family:'Inter',sans-serif; font-size:13.5px; color:#fff; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); outline:none; } .nm-cfg-email-row input:focus{ border-color:#c5a47e; } .nm-cfg-email-row button{ padding:11px 18px; background:#fff; color:#0A0F2E; border:none; cursor:pointer; font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600; } .nm-cfg-email-done{ font-size:13px; line-height:1.6; color:#e2c79c; text-align:left; margin-top:12px; } .nm-cfg-assure{ display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.1); } .nm-cfg-assure span{ position:relative; font-size:11.5px; letter-spacing:.02em; color:rgba(255,255,255,0.5); } .nm-cfg-assure span:not(:last-child)::after{ content:"·"; position:absolute; right:-9px; color:rgba(255,255,255,0.28); } /* configurator responsive */ @media (max-width:860px){ .nm-cfg-grid{ grid-template-columns:1fr; } .nm-cfg-output{ justify-content:flex-start; } } @media (prefers-reduced-motion:reduce){ .nm-cfg-stack-block,.nm-cfg-cta,.nm-cfg-more-arr{ transition:none; } } /* ============================================================ INDUSTRIES filter: chip bar on desktop, dropdown on mobile; plus the "Load more" pagination button. ============================================================ */ .nm-ind-selectwrap{ display:none; position:relative; max-width:520px; margin-bottom:16px; } .nm-ind-select{ width:100%; appearance:none; -webkit-appearance:none; font-family:'Inter',sans-serif; font-size:14px; font-weight:500; color:#0A0F2E; background:#fff; border:1px solid #d8d3ca; border-radius:0; padding:13px 42px 13px 16px; cursor:pointer; } .nm-ind-select:focus{ outline:none; border-color:#c5a47e; } .nm-ind-selectwrap::after{ content:""; position:absolute; right:17px; top:44%; width:8px; height:8px; border-right:1.5px solid #b08d5e; border-bottom:1.5px solid #b08d5e; transform:translateY(-50%) rotate(45deg); pointer-events:none; } .nm-ind-more{ cursor:pointer; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:.02em; color:#0A0F2E; background:#fff; border:1px solid #0A0F2E; padding:13px 32px; transition:background .18s ease, color .18s ease; } .nm-ind-more:hover{ background:#0A0F2E; color:#fff; } /* Comparison table: the mobile alternative-picker is desktop-hidden; all four columns show side by side at >600px. */ .nm-cmp-picker{ display:none; } /* ============================================================ MOBILE EXPERIENCE — purpose-built for phones, not scaled down. Desktop is the source of truth: every rule below lives inside a mobile media query, so nothing at >600px is affected. Inline styles are re-serialised with spaces at runtime, so attribute selectors match "prop: value". ============================================================ */ @media (max-width:600px){ /* ---- Header: minimal height ---- */ nav > div,nav .nm-navinner{ padding:10px 16px!important; } nav img{ height:29px!important; } /* ---- Industries: swap the chip row for a compact dropdown ---- */ .nm-ind-chips{ display:none!important; } .nm-ind-selectwrap{ display:block!important; } /* ---- Section rhythm: tighter top/bottom + slim side gutters ---- */ section:not([style*="display: grid"]){ padding-top:clamp(32px,7.5vw,44px)!important; padding-bottom:clamp(32px,7.5vw,44px)!important; padding-left:12px!important; padding-right:12px!important; } /* FAQ: questions read oversized on phones; trim both, keep every FAQ consistent */ .nm-faq-q{ font-size:14px!important; padding-top:17px!important; padding-bottom:17px!important; gap:16px!important; } .nm-faq-sign{ font-size:19px!important; } .nm-faq-a p{ font-size:12.5px!important; line-height:1.62!important; padding-bottom:19px!important; } /* hero: enough top to clear the fixed nav, then stay compact */ section:first-of-type:not([style*="display: grid"]){ padding-top:88px!important; padding-bottom:42px!important; } /* split-band inner text columns carry big desktop padding */ [style*="padding: clamp(56px, 7vw, 80px)"], [style*="padding: 56px 40px"]{ padding:40px 20px!important; } /* ---- Type: compact scale, hierarchy intact ---- */ section h1{ font-size:clamp(22px,6.3vw,28px)!important; line-height:1.17!important; margin-bottom:13px!important; } h2[style*="font-weight: 300"]{ font-size:clamp(18.5px,5.2vw,23px)!important; line-height:1.24!important; } [style*="font-size: clamp(40px, 5.5vw, 68px)"]{ font-size:30px!important; } [style*="font-size: 26px"]{ font-size:20px!important; } [style*="font-size: 22px"]{ font-size:17.5px!important; } [style*="font-size: 20px"]{ font-size:16.5px!important; } [style*="font-size: 17px"]{ font-size:15px!important; } [style*="font-size: 16.5px"]{ font-size:14.5px!important; } h3[style*="font-size: 16px"]{ font-size:14.5px!important; } /* leads + body copy: down a notch, tighter leading */ section p[style*="font-size: 18px"]{ font-size:14px!important; line-height:1.58!important; } section p[style*="font-size: 16px"]{ font-size:13.5px!important; line-height:1.58!important; } [style*="font-size: 15.5px"]{ font-size:13px!important; } [style*="font-size: 15px"]{ font-size:13px!important; line-height:1.6!important; } [style*="font-size: 14.5px"]{ font-size:13px!important; line-height:1.58!important; } [style*="font-size: 14px"]{ font-size:12.5px!important; line-height:1.58!important; } [style*="font-size: 13.5px"]{ font-size:12.5px!important; line-height:1.56!important; } [style*="font-size: 13px"]{ font-size:12px!important; } /* eyebrows: small-caps label */ [style*="letter-spacing: 0.22em"]{ font-size:10px!important; letter-spacing:.14em!important; } [style*="letter-spacing: 0.14em"]{ font-size:9.5px!important; } /* ---- Spacing: compress big desktop vertical margins ---- */ [style*="margin-bottom: 54px"],[style*="margin-bottom: 56px"], [style*="margin-bottom: 48px"],[style*="margin-bottom: 44px"], [style*="auto 54px"],[style*="auto 48px"],[style*="auto 46px"], [style*="auto 44px"],[style*="auto 40px"]{ margin-bottom:26px!important; } [style*="margin-bottom: 38px"],[style*="margin-bottom: 36px"], [style*="margin-bottom: 34px"]{ margin-bottom:20px!important; } [style*="margin-bottom: 26px"]{ margin-bottom:15px!important; } [style*="margin-top: 48px"],[style*="margin-top: 44px"], [style*="margin-top: 40px"]{ margin-top:26px!important; } [style*="gap: clamp(40px, 5vw, 64px)"]{ gap:26px!important; } /* ---- Buttons: comfortable tap target, never oversized ---- */ a[style*="display: inline-flex"][style*="align-items: center"]{ padding:12px 20px!important; font-size:13px!important; } .nm-btn{ padding:12px 20px!important; font-size:13px!important; } /* ---- Cards / feature blocks: trim generous desktop padding ---- */ [style*="padding: 36px 32px"],[style*="padding: 34px 30px"], [style*="padding: 34px 32px"],[style*="padding: 32px 30px"], [style*="padding: 32px 28px"]{ padding:19px 17px!important; } [style*="padding: 26px 26px 22px"]{ padding:18px 16px!important; } .nm-card{ padding:19px 17px!important; } /* graphic/chart panels + stack cards: slimmer so visuals use the width ---- */ [style*="padding: 28px 26px"],[style*="padding: 24px 26px"], [style*="padding: 30px 26px"],[style*="padding: 30px 30px 24px"], [style*="padding: 30px 30px 26px"]{ padding:16px 15px!important; } [style*="padding: 28px"]:not([style*="padding: 28px "]){ padding:16px!important; } /* Services stack: drop the staggered side indents that waste width on phones */ a[style*="margin: 0px 12px"],a[style*="margin: 0px 24px"]{ margin:0!important; } /* ---- Keep compact stat mini-grids two-up (blanket rule stacks them) ---- */ [style*="grid-template-columns: 1fr 1fr"][style*="gap"]:not(.nm-splitfade){ grid-template-columns:1fr 1fr!important; } /* ---- Ledger rows (date · description · amount) must stay horizontal ---- */ [style*="grid-template-columns: 54px 1fr auto"][style*="gap: 12px"]{ grid-template-columns:42px 1fr auto!important; } /* ---- Images: support the content, don't dominate the screen ---- */ .nm-splitfade > div,[style*="min-height: 360px"]{ min-height:186px!important; } /* ---- Footer: two compact columns instead of a tall stack ---- */ footer [style*="grid-template-columns"][style*="minmax(220px"]{ grid-template-columns:1fr 1fr!important; gap:22px 18px!important; padding-bottom:28px!important; } /* logo+tagline spans full width so the wide wordmark isn't squished by max-width:100% */ footer [style*="grid-template-columns"][style*="minmax(220px"] > div:first-child{ grid-column:1 / -1!important; } footer img{ max-width:none!important; height:30px!important; width:auto!important; } footer{ padding:36px 16px 28px!important; } /* ---- Pricing configurator: class-based, so needs its own compaction ---- */ .nm-cfg-inputs{ padding:15px 13px!important; } .nm-cfg-fs{ margin-bottom:17px!important; } .nm-cfg-legend{ font-size:10px!important; letter-spacing:.13em!important; margin-bottom:9px!important; } .nm-cfg-svc{ gap:10px!important; padding:12px 12px!important; margin-bottom:7px!important; } .nm-cfg-check{ width:17px!important; height:17px!important; margin-top:1px!important; } .nm-cfg-check:checked::after{ left:5px!important; top:2px!important; width:4px!important; height:8px!important; } .nm-cfg-svc-name{ font-size:15px!important; } .nm-cfg-svc-head{ gap:7px!important; margin-bottom:4px!important; } .nm-cfg-tag{ font-size:8px!important; padding:2px 6px!important; letter-spacing:.07em!important; } .nm-cfg-svc-desc{ font-size:11.5px!important; line-height:1.48!important; } .nm-cfg-more{ margin-top:8px!important; font-size:10.5px!important; } .nm-cfg-seg-item span{ padding:9px 4px!important; font-size:11.5px!important; } .nm-cfg-help{ font-size:10.5px!important; margin-top:8px!important; } .nm-cfg-step-btn{ width:40px!important; font-size:18px!important; } .nm-cfg-ent{ min-width:50px!important; font-size:14.5px!important; } .nm-cfg-panel{ padding:19px 15px!important; } .nm-cfg-eyebrow{ font-size:10px!important; letter-spacing:.15em!important; margin-bottom:12px!important; } .nm-cfg-range{ font-size:27px!important; } .nm-cfg-range .nm-cfg-per{ font-size:12px!important; } .nm-cfg-range-invite{ font-size:16px!important; } .nm-cfg-receipt{ margin:15px 0!important; padding:14px 0!important; gap:9px!important; } .nm-cfg-row{ font-size:12px!important; } .nm-cfg-note{ font-size:11.5px!important; padding:9px 12px!important; } .nm-cfg-estimate{ font-size:10.5px!important; margin-bottom:15px!important; } .nm-cfg-cta{ padding:13px!important; font-size:13px!important; } .nm-cfg-assure{ margin-top:16px!important; padding-top:13px!important; } .nm-cfg-assure span{ font-size:10px!important; } /* ---- Comparison: the 4-way table is too wide for a phone, so it becomes a focused 1-v-1 view. Only Nomeres + one chosen alternative show; a segmented control above swaps which alternative column is visible. ---- */ .nm-cmp-picker{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; } .nm-cmp-picker-lbl{ font-size:9.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#b08d5e; } /* each alternative is its own gold-outlined button; the active one fills navy with gold text, echoing the NOMERES column header */ .nm-cmp-seg{ display:flex; gap:6px; } .nm-cmp-opt{ flex:1; padding:8px 3px; cursor:pointer; background:transparent; border:1px solid #c5a47e; color:#0A0F2E; font-family:'Inter',sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.005em; line-height:1.15; transition:background .22s var(--nm-ease), color .22s var(--nm-ease), border-color .22s var(--nm-ease); } .nm-cmp-opt-on{ background:#0A0F2E; border-color:#0A0F2E; color:#c5a47e; } .nm-cmp-table{ min-width:0!important; width:100%!important; table-layout:fixed!important; } .nm-cmp-alt{ display:none!important; } .nm-cmp[data-alt="us"] .nm-cmp-us, .nm-cmp[data-alt="off"] .nm-cmp-off, .nm-cmp[data-alt="diy"] .nm-cmp-diy{ display:table-cell!important; } .nm-cmp-table th,.nm-cmp-table td{ padding:9px 9px!important; font-size:11px!important; line-height:1.45!important; } .nm-cmp-table tbody td:nth-child(2){ font-size:11.5px!important; } .nm-cmp-table thead th{ font-size:9px!important; letter-spacing:.05em!important; } .nm-cmp-table th:first-child,.nm-cmp-table td:first-child{ width:42%!important; } .nm-cmp-table th:nth-child(2),.nm-cmp-table td:nth-child(2){ width:29%!important; } .nm-cmp-alt{ width:29%!important; } /* sticky live-estimate bar: keeps the range in view while toggling inputs */ .nm-cfg-mbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; position:fixed; left:0; right:0; bottom:0; z-index:900; padding:9px 14px; background:rgba(10,15,46,0.97); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid rgba(197,164,126,0.35); transform:translateY(115%); transition:transform .32s var(--nm-ease); box-shadow:0 -10px 30px -12px rgba(0,0,0,0.5); } .nm-cfg-mbar.nm-cfg-mbar-on{ transform:translateY(0); } .nm-cfg-mbar-val{ font-family:'Source Serif 4',serif; font-size:17px; font-weight:400; color:#fff; font-variant-numeric:tabular-nums; line-height:1.15; } .nm-cfg-mbar-val small{ font-family:'Inter',sans-serif; font-size:10.5px; font-weight:400; color:rgba(255,255,255,0.55); } .nm-cfg-mbar-cta{ flex-shrink:0; display:inline-flex; align-items:center; padding:10px 16px; background:#c5a47e; color:#0A0F2E; font-size:12.5px; font-weight:600; letter-spacing:.01em; } } /* ---- Insights featured card: kill the empty space in the stat panel ---- */ @media (max-width:600px){ /* both featured panels drop the tall min-height so content fills them */ [style*="min-height: 300px"]{ min-height:0!important; } /* the blue stat panel: tighter padding + let the 2x2 grid fill the width */ [style*="background: rgb(26, 31, 74)"]{ padding:22px 14px!important; } [style*="background: rgb(26, 31, 74)"] [style*="max-width: 320px"]{ max-width:none!important; } } /* ---- CashFlow: two-ways band, ease the dark "questions" wall ---- */ @media (max-width:600px){ /* Divider between the stacked points. The old numeral/title rules here were dropped with the 01/02 markers and the inner wrapper div they targeted. */ .nm-twoway > div + div{ border-top:1px solid #e6e3dd; padding-top:22px!important; } /* "What it really answers": lighter cards + more room so it isn't a dark, squeezed wall */ [style*="155deg"]{ padding:16px 13px!important; } [style*="background: rgb(12, 19, 56)"]{ background:#161e49!important; padding:17px 16px!important; } [style*="background: rgb(12, 19, 56)"] p{ font-size:14px!important; line-height:1.42!important; } [style*="background: rgb(12, 19, 56)"] span{ font-size:26px!important; } /* Honest promise: a touch smaller so it doesn't dominate */ [style*="clamp(21px, 2.7vw, 30px)"]{ font-size:17px!important; line-height:1.46!important; } } /* ---- Smallest phones (≤380px): shave a little more ---- */ @media (max-width:380px){ section h1{ font-size:21px!important; } h2[style*="font-weight: 300"]{ font-size:17.5px!important; } section p[style*="font-size: 18px"]{ font-size:13.5px!important; } section:not([style*="display: grid"]){ padding-left:10px!important; padding-right:10px!important; } }