/* ========================================================================== RIA Advisory — INDUSTRIES sub-pages (shared across industries/*) Loaded AFTER round3-final.css + round3v2.css, so header/nav/footer/.section/ .wrap/.kicker/.btn/.r3-cta/.r3-svct/.cert-seal2 all come free. 2026-08-03 v3 — v1 and v2 were both rejected as "basic / not modern". Root cause both times: ONE layout idea repeated down the page (v1 = 4 identical icon rows, v2 = 4 identical photo rows). A premium page needs RHYTHM — every band must differ in structure, background and density. v3 therefore alternates: photo hero → sticky subnav → asymmetric editorial (sticky left col) → interactive tabs (reusing the client-APPROVED .r3-svct switcher) → full-bleed photo outcome band → connected 3-step process → product grid → flip seals (client-APPROVED) → diagonal CTA. Reusing approved components is deliberate: it makes the subpage read as the same product as the homepage instead of a new template. RULES: clamp()/calc() need SPACES around +/- ; grid/flex text kids need min-width: 0 ; `js` sits on so reveal selectors are `.js [data-r]`. ========================================================================== */ /* ---------- Breadcrumb ---------------------------------------------------- */ .ind-crumb { background: var(--paper); border-bottom: 1px solid var(--line); padding-block: .8rem; } .ind-crumb nav { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--line-2); } .ind-crumb a { color: var(--slate); font-weight: 500; transition: color .25s; } .ind-crumb a:hover { color: var(--navy); } .ind-crumb .current { color: var(--ink); font-weight: 600; } /* ========================================================================== HERO — full-bleed photo, bottom-weighted, with glass fact cards sitting ON the image. Same device family as the homepage's own hero/industry panels. ========================================================================== */ .ind-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; min-height: min(90vh, 740px); display: flex; flex-direction: column; justify-content: flex-end; } .ind-hero__bg { position: absolute; inset: 0; z-index: 0; } .ind-hero__bg img { width: 100%; height: 100%; object-fit: cover; } /* Two stacked scrims: a directional one for text contrast on the left, and a bottom-up one so the glass cards always have something dark to sit against. */ .ind-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(102deg, rgba(8,14,28,.9) 0%, rgba(11,19,40,.66) 44%, rgba(12,22,48,.22) 100%), linear-gradient(0deg, rgba(6,11,24,.94) 0%, rgba(6,11,24,.3) 46%, rgba(6,11,24,.1) 100%); } /* A single warm accent glow keeps the photo from reading flat/grey. */ .ind-hero__glow { position: absolute; z-index: 1; right: -6%; top: -12%; width: 44vw; aspect-ratio: 1; background: radial-gradient(circle, rgba(247,148,31,.2), transparent 62%); pointer-events: none; } .ind-hero__in { position: relative; z-index: 2; width: 100%; padding-block: clamp(4rem, 3rem + 5vw, 7rem) clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); } .ind-hero__copy { max-width: 44rem; } .ind-hero .kicker { color: #9fd0f4; } .ind-hero .kicker__line { background: linear-gradient(90deg, rgba(159,208,244,.7), transparent); max-width: 90px; height: 2px; } .ind-hero h1 { color: #fff; font-size: clamp(2.3rem, 1.4rem + 3.9vw, 4rem); line-height: 1.06; letter-spacing: -.028em; margin: 1.1rem 0 1.2rem; } .ind-hero h1 .grad-text { background: linear-gradient(100deg, #8FD0FF 0%, #F7941F 118%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ind-hero__lead { color: #cbd9ee; font-size: clamp(1.02rem, .96rem + .4vw, 1.18rem); line-height: 1.66; max-width: 52ch; margin-bottom: 2rem; } .ind-hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; } .ind-hero__cta .btn--ghost { border-color: rgba(255,255,255,.42); color: #fff; background: rgba(255,255,255,.06); backdrop-filter: blur(6px); } .ind-hero__cta .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.16); } /* Glass fact cards — real, already-published facts only (no invented stats). */ .ind-hero__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: clamp(2.4rem, 1.8rem + 2.4vw, 4rem); } .ind-hero__facts > * { min-width: 0; } .ind-hero__fact { padding: 1rem 1.15rem; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(14px); transition: background .3s ease, transform .3s ease; } .ind-hero__fact:hover { background: rgba(255,255,255,.14); transform: translateY(-3px); } .ind-hero__fact b { display: block; font-family: var(--font-display, sans-serif); font-weight: 800; font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); line-height: 1.1; color: #fff; } .ind-hero__fact span { display: block; font-family: var(--font-mono, monospace); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: #9fd0f4; margin-top: .4rem; } @media (max-width: 860px) { .ind-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================== STICKY SUB-NAV — signals page depth and gives long-page orientation. `top` matches the site header's 78px so the two stack instead of overlap. ========================================================================== */ .ind-subnav { position: sticky; top: 78px; z-index: 90; background: rgba(255,255,255,.9); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); } .ind-subnav__in { display: flex; align-items: center; gap: 1.2rem; height: 56px; } .ind-subnav__label { font-family: var(--font-mono, monospace); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); font-weight: 600; white-space: nowrap; } .ind-subnav__links { display: flex; align-items: center; gap: .2rem; margin-left: auto; overflow-x: auto; } .ind-subnav__links a { position: relative; padding: .45rem .7rem; font-size: .85rem; font-weight: 600; color: var(--slate); white-space: nowrap; border-radius: 7px; transition: color .25s, background .25s; } .ind-subnav__links a:hover { color: var(--navy); background: var(--sky-tint); } .ind-subnav__links a.is-active { color: var(--navy); } .ind-subnav__links a.is-active::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: -1px; height: 2px; background: var(--orange); border-radius: 2px; } .ind-subnav .btn { padding: .55em 1.1em; font-size: .84rem; flex: none; } @media (max-width: 860px) { .ind-subnav { top: 68px; } .ind-subnav__label, .ind-subnav .btn { display: none; } .ind-subnav__links { margin-left: 0; } } /* ========================================================================== OVERVIEW — asymmetric editorial. Left column is STICKY (holds the argument in view while the proof scrolls past it); right is a hairline-separated list, not cards. Deliberately card-free so it contrasts with every other band on the page. ========================================================================== */ .ind-split { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(2rem, 1.2rem + 3.4vw, 4.5rem); align-items: start; } .ind-split > * { min-width: 0; } .ind-split__aside { position: sticky; top: 160px; } .ind-split__aside h2 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem); line-height: 1.1; margin-bottom: 1.1rem; } .ind-split__aside p { color: var(--slate); font-size: 1.02rem; line-height: 1.68; } .ind-split__quote { margin-top: 1.6rem; padding-left: 1.2rem; border-left: 3px solid var(--orange); font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 1.05rem; line-height: 1.45; color: var(--navy); } .ind-points { display: flex; flex-direction: column; } .ind-point { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 1.2rem; align-items: start; padding: clamp(1.3rem, 1rem + 1vw, 1.9rem) 0; border-top: 1px solid var(--line); } .ind-point:last-child { border-bottom: 1px solid var(--line); } .ind-point__ico { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--sky-tint); color: var(--navy); font-size: 1.15rem; transition: background .3s, color .3s; } .ind-point:hover .ind-point__ico { background: var(--navy); color: #fff; } .ind-point h3 { font-size: 1.08rem; margin-bottom: .4rem; } .ind-point p { color: var(--slate); font-size: .94rem; line-height: 1.6; } @media (max-width: 900px) { .ind-split { grid-template-columns: minmax(0, 1fr); } .ind-split__aside { position: static; } } /* ========================================================================== OUTCOME BAND — full-bleed photo + scrim. The page's one dark moment, and it is photographic (not a flat navy block), which is the treatment the client's own approved homepage already uses for .r3-cta / industry panels. ========================================================================== */ .ind-band { position: relative; overflow: hidden; isolation: isolate; color: #fff; } .ind-band__bg { position: absolute; inset: 0; z-index: 0; } .ind-band__bg img { width: 100%; height: 100%; object-fit: cover; } .ind-band__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,14,28,.94) 0%, rgba(11,19,40,.8) 50%, rgba(12,22,48,.6) 100%); } .ind-band > .wrap { position: relative; z-index: 1; } .ind-band .kicker { color: #9fd0f4; } .ind-band .kicker__line { background: rgba(255,255,255,.28); } .ind-band h2 { color: #fff; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem); max-width: 22ch; margin-bottom: 1rem; } .ind-band__lead { color: #cbd9ee; font-size: 1.02rem; line-height: 1.65; max-width: 56ch; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem); } .ind-out { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, .6rem + 1.4vw, 2rem); } .ind-out > * { min-width: 0; } .ind-out__item { position: relative; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.2); } .ind-out__item::before { content: ""; position: absolute; left: 0; top: -1px; width: 34%; height: 2px; background: linear-gradient(90deg, var(--orange), transparent); } .ind-out__ico { color: #9fd0f4; font-size: 1.2rem; margin-bottom: .8rem; } .ind-out__item h3 { color: #fff; font-size: 1.02rem; margin-bottom: .45rem; } .ind-out__item p { color: #b9cae4; font-size: .88rem; line-height: 1.55; } @media (max-width: 860px) { .ind-out { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .ind-out { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== APPROACH — 3 connected steps. Uses RIA's own Recognize/Innovate/Accelerate motto (the literal meaning of the company name), so the content is real rather than a generic invented "our process". No step NUMBERS — the client rejected 01/02-style numbering; the connector line carries the sequence. ========================================================================== */ .ind-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, .8rem + 1.6vw, 2.4rem); position: relative; } .ind-steps > * { min-width: 0; } /* Connector: sits behind the chips, inset so it never pokes out at the ends. */ .ind-steps::before { content: ""; position: absolute; top: 27px; left: 16%; right: 16%; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px); z-index: 0; } .ind-step { position: relative; z-index: 1; text-align: center; } .ind-step__ico { width: 56px; height: 56px; margin: 0 auto 1.1rem; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--line); color: var(--navy); font-size: 1.2rem; transition: border-color .35s ease, background .35s ease, color .35s ease, transform .35s ease; } .ind-step:hover .ind-step__ico { background: var(--navy); border-color: var(--navy); color: #fff; transform: translateY(-4px); } .ind-step h3 { font-size: 1.15rem; margin-bottom: .5rem; } .ind-step h3 em { font-style: normal; color: var(--orange); } .ind-step p { color: var(--slate); font-size: .93rem; line-height: 1.6; max-width: 34ch; margin-inline: auto; } @media (max-width: 760px) { .ind-steps { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .ind-steps::before { display: none; } } /* ========================================================================== PRODUCT CAROUSEL — SHARED by Option A and Option C. The client approved this component on Option C ("perfect thats what i want") and asked for it on Option A too, so it lives in this shared sheet rather than industries-c.css, and is named `ind-` not `oc-` (an `oc-` prefix would wrongly imply Option-C-only). It replaces the old static `.ind-prod` 4-up grid that Option A used to have. Three cards per view on desktop, two on tablet, one on mobile. The JS DERIVES that count by measuring slide width against view width rather than hard-coding it, so THESE MEDIA QUERIES ARE THE SINGLE SOURCE OF TRUTH — changing the per-view count is a CSS-only edit and the script (and its dot count) follows automatically. Paging translates by 100% of the view width, which is exactly one page whatever the per-view count, so identical maths serves the 3-up, 2-up and 1-up layouts alike. ========================================================================== */ .ind-car { position: relative; } .ind-car__view { overflow: hidden; } .ind-car__track { display: flex; align-items: stretch; transition: transform .55s cubic-bezier(.22,1,.36,1); } .ind-car__slide { flex: 0 0 33.3333%; min-width: 0; display: flex; } @media (max-width: 1100px) { .ind-car__slide { flex: 0 0 50%; } } @media (max-width: 820px) { .ind-car__slide { flex: 0 0 100%; } } /* The gutter is the card's own margin, NOT a track `gap` — a gap would throw off the percentage paging maths above. */ .ind-pcard { position: relative; overflow: hidden; display: flex; flex-direction: column; flex: 1; margin: .35rem .5rem; background: #fff; border: 1px solid var(--line); border-radius: 18px; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease; } .ind-pcard:hover { transform: translateY(-5px); border-color: var(--sky); box-shadow: 0 28px 52px -32px rgba(11,24,48,.34); } .ind-pcard__media { aspect-ratio: 16 / 9.6; overflow: hidden; flex: none; } .ind-pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1); } .ind-pcard:hover .ind-pcard__media img { transform: scale(1.05); } .ind-pcard__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.3rem, 1rem + 1vw, 1.8rem); } .ind-pcard__ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--sky-tint); color: var(--navy); font-size: 1.1rem; margin-bottom: .9rem; transition: background .3s ease, color .3s ease; } .ind-pcard:hover .ind-pcard__ico { background: var(--navy); color: #fff; } .ind-pcard h3 { font-size: 1.15rem; margin-bottom: .45rem; } .ind-pcard p { color: var(--slate); font-size: .92rem; line-height: 1.58; margin-bottom: 1.1rem; } .ind-pcard .arrow { margin-top: auto; font-size: .87rem; } .ind-car__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: clamp(1.1rem, .9rem + 1vw, 1.7rem); } .ind-car__btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line-2); color: var(--navy); font-size: .9rem; transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; } .ind-car__btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; transform: scale(1.06); } .ind-car__btn[disabled] { opacity: .35; cursor: not-allowed; } .ind-car__btn[disabled]:hover { background: #fff; color: var(--navy); border-color: var(--line-2); transform: none; } .ind-car__dots { display: flex; align-items: center; gap: .5rem; } .ind-car__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); transition: width .35s cubic-bezier(.22,1,.36,1), background .3s ease; } .ind-car__dot.is-active { width: 26px; border-radius: 6px; background: var(--orange); } /* ========================================================================== REUSED-COMPONENT ADJUSTMENTS — the approved homepage components are used as-is; these are the only two places their homepage-tuned assumptions don't fit a subpage. ========================================================================== */ /* The tab rail is tuned for the homepage's SEVEN services; with only four practices here it ends well short of the panel card. This column wrapper keeps .r3-svct a 2-column grid (JS still finds .r3-svct__tab/__panel at any depth) and lets a short helper card absorb the leftover height. */ .ind-tabcol { display: flex; flex-direction: column; gap: .8rem; } .ind-tabnote { margin-top: auto; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: 10px; padding: 1.1rem 1.2rem; } .ind-tabnote b { display: block; font-family: var(--font-display, sans-serif); font-weight: 800; font-size: .95rem; color: var(--ink); margin-bottom: .3rem; } .ind-tabnote p { color: var(--slate); font-size: .85rem; line-height: 1.5; margin-bottom: .7rem; } @media (max-width: 860px) { .ind-tabnote { display: none; } } /* ---------- Review-only option switcher ---------------------------------- Lets the client flip between whole-page design directions while choosing. REMOVE the .opt-switch markup from the pages once a direction is signed off — it is a review aid, not part of the site. */ .opt-switch { position: fixed; z-index: 200; left: 50%; bottom: 1.1rem; transform: translateX(-50%); display: flex; align-items: center; gap: .25rem; padding: .35rem; background: rgba(11,24,48,.93); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); border-radius: 40px; box-shadow: 0 22px 44px -20px rgba(11,24,48,.7); } .opt-switch__lbl { font-family: var(--font-mono, monospace); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: #9fd0f4; padding: 0 .5rem 0 .8rem; } .opt-switch a { padding: .45rem 1rem; border-radius: 30px; font-size: .82rem; font-weight: 600; color: #cddcf0; transition: background .25s, color .25s; white-space: nowrap; } .opt-switch a:hover { background: rgba(255,255,255,.12); color: #fff; } .opt-switch a.is-current { background: var(--orange); color: #241503; } @media print { .opt-switch { display: none; } } /* .cert-seal2-row is an 8-column grid on wide screens (the homepage shows 8 seals). This page shows 5, which would otherwise sit left-aligned in an 8-track grid with 3 empty columns. */ .ind-certs .cert-seal2-row { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; } @media (max-width: 860px) { .ind-certs .cert-seal2-row { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 460px; } } @media (max-width: 560px) { .ind-certs .cert-seal2-row { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 340px; } }