/* Homepage opening and client story only. Existing lower sections retain shared styles. */
.opening-outcomes .dashboard-card { --depth: 0px; --rest-angle: -4deg; padding: 18px; background: linear-gradient(145deg, rgba(8,37,74,.84), rgba(2,17,40,.75)); border-color: rgba(59,170,255,.65); box-shadow: 0 16px 38px #000b203d, 0 0 28px #008cff26, inset 0 1px #ffffff20; transform: perspective(1000px) translate3d(var(--move-x,0px),var(--move-y,0px),var(--depth)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,var(--rest-angle))); animation: dashboard-drift 8s ease-in-out infinite alternate; }
.opening-outcomes .cash-card { width: 242px; min-height: 220px; --depth: 8px; }
.opening-outcomes .reconciled-card { width: 208px; min-height: 157px; margin-left: 30px; --depth: -12px; --rest-angle: -2deg; animation-duration: 10s; animation-delay: -4s; }
.opening-outcomes .ready-card { width: 222px; min-height: 154px; margin-left: 12px; --depth: 0px; --rest-angle: -5deg; animation-duration: 9s; animation-delay: -2s; }
.dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dashboard-heading h2 { margin: 0; color: #eaf5ff; font: 600 13px/1.2 Arial,sans-serif; letter-spacing: -.01em; }
.dashboard-heading small { color: #8badcb; font-size: 7px; white-space: nowrap; }
.opening-outcomes .cash-trend { margin-top: 15px; color: #53e4d1; font-size: 10px; }
.cash-trend span { color: #53e4d1; font-size: 14px; }
.cash-visual { display: block; width: 100%; height: auto; margin-top: 17px; overflow: visible; }
.cash-grid { fill: none; stroke: #9ddaff18; stroke-width: 1; }
.cash-line { fill: none; stroke: #58ddff; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px #14b8ff80); }
.cash-dot { fill: #d9faff; stroke: #3dcfff; stroke-width: 2; filter: drop-shadow(0 0 5px #38cfff); }
.cash-months { fill: #91aecb; font: 7px Arial,sans-serif; text-anchor: middle; letter-spacing: .5px; }
.reconciliation-visual { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.reconciliation-visual svg { width: 70px; height: 70px; flex: none; overflow: visible; }
.reconciliation-visual circle { fill: none; stroke-width: 5; }
.ring-track { stroke: #65b7ff22; }
.ring-value { stroke: #43dccc; stroke-dasharray: none; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; filter: drop-shadow(0 0 5px #38d9cf55); }
.opening-outcomes .reconciliation-visual strong { margin: 0 0 5px; font-size: 30px; font-weight: 500; letter-spacing: -.04em; }
.opening-outcomes .reconciliation-visual strong span { font-size: 16px; color: #c5d9ed; letter-spacing: 0; }
.reconciliation-visual small { font-size: 10px; }
.tax-ready-visual { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.tax-ready-visual svg { width: 60px; height: 60px; flex: none; fill: #0a315a; stroke: #6acbff; stroke-width: 1.5; }
.tax-ready-visual svg circle { fill: #103b4c; stroke: #4bddc8; }
.tax-ready-visual .ready-check { fill: none; stroke: #68edd8; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.opening-outcomes .tax-ready-visual strong { margin: 0 0 8px; font-size: 19px; font-weight: 500; line-height: 1.12; }
.tax-ready-visual small { font-size: 8px; white-space: nowrap; }
.tax-ready-visual small i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #53dcc1; margin-right: 3px; }
@keyframes dashboard-drift { from { translate: 0 -2px; } to { translate: 0 3px; } }
@media (prefers-reduced-motion: reduce) { .opening-outcomes .dashboard-card { animation: none; transform: none; } }
.ferendo-home .header { background: #031329; border-bottom-color: #ffffff0b; color: #fff; backdrop-filter: none; }
.ferendo-home .header .brand img { filter: grayscale(1) invert(1); mix-blend-mode: screen; }
.ferendo-home .header .nav-links a { color: #eef4ff; }
.ferendo-home .header .button { border-radius: 30px; background: #087bff; }
.ferendo-home .header .menu-button { background: #fff; }
.opening-hero { position: relative; min-height: 850px; background: #031329; overflow: hidden; color: #fff; }
.opening-photo { position: absolute; inset: 0; width: 100%; height: calc(100% + 64px); object-fit: cover; object-position: center top; transform: translateY(-64px) scale(1.012); transform-origin: center top; }
.opening-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,15,33,.72), rgba(2,15,33,.25) 42%, transparent 63%), linear-gradient(0deg, #031329, transparent 20%); }
.opening-inner { position: relative; max-width: 1320px; margin: auto; padding: 64px 32px 45px; }
.opening-copy { position: relative; z-index: 2; width: 57%; }
.opening-eyebrow { color: #a1c6ec; letter-spacing: .2em; font-size: 13px; margin-bottom: 28px; }
.opening-eyebrow::after { content: ''; display: block; width: 48px; height: 3px; background: #00a5ff; margin-top: 20px; }
.opening-copy h1 { font: 500 clamp(52px,6.1vw,86px)/.98 Georgia, 'Times New Roman', serif; letter-spacing: -.05em; max-width: 660px; }
.opening-copy h1 span { color: #009bff; }
.opening-description { max-width: 485px; font-size: 18px; line-height: 1.65; color: #e1e8f3; margin-top: 24px; }
.opening-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 28px; }
.opening-button, .story-button { display: inline-flex; align-items: center; gap: 24px; padding: 18px 26px; border-radius: 40px; background: #087bff; color: #fff; font-size: 15px; font-weight: 650; transition: background .25s, transform .25s; }
.opening-button:hover, .story-button:hover { background: #0065e3; transform: translateY(-2px); }
.opening-button span, .story-button span { font-size: 24px; line-height: 1; }
.opening-secondary { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; }
.opening-play { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #168eff; border-radius: 50%; font-size: 22px; }
.opening-proof { display: flex; gap: 25px; margin-top: 40px; color: #cad9ee; font-size: 10px; line-height: 1.7; letter-spacing: .13em; text-transform: uppercase; }
.opening-proof span + span { border-left: 1px solid #53769766; padding-left: 25px; }
.opening-outcomes { position: absolute; right: -6px; top: 68px; width: 242px; display: grid; gap: 17px; perspective: 1100px; filter: drop-shadow(0 24px 36px rgba(0,7,24,.46)); }
.opening-outcomes > div { --spot-x: 50%; --spot-y: 50%; --tilt-x: 0deg; --tilt-y: -6deg; position: relative; min-height: 166px; overflow: hidden; border: 1px solid rgba(38,178,255,.9); border-radius: 16px; padding: 20px; background: linear-gradient(145deg, rgba(11,50,98,.9), rgba(1,14,35,.79) 62%, rgba(2,35,79,.92)); box-shadow: 0 0 0 1px rgba(103,220,255,.1), 0 0 24px rgba(0,174,255,.32), 0 0 68px rgba(0,112,255,.16), 0 22px 46px rgba(0,7,24,.48), inset 0 1px rgba(255,255,255,.18), inset 18px 0 38px rgba(38,150,255,.05), inset 0 -34px 54px rgba(0,49,112,.18); backdrop-filter: blur(20px) saturate(1.28); transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(0); transform-style: preserve-3d; transition: transform .55s cubic-bezier(.16,1,.3,1), border-color .4s, box-shadow .4s; }
.opening-outcomes > div::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(210px circle at var(--spot-x) var(--spot-y), rgba(103,226,255,.38), rgba(10,118,255,.14) 34%, transparent 70%); opacity: .72; pointer-events: none; transition: opacity .35s; }
.opening-outcomes > div::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 12%, rgba(255,255,255,.09) 39%, transparent 55%), linear-gradient(90deg, #30d8ff, #0c71ff 55%, transparent) left top/72% 2px no-repeat; pointer-events: none; }
.opening-outcomes > div:nth-child(1) { width: 226px; min-height: 172px; }
.opening-outcomes > div:nth-child(2) { width: 208px; min-height: 154px; margin-left: 27px; }
.opening-outcomes > div:nth-child(3) { width: 222px; min-height: 164px; margin-left: 8px; }
.opening-outcomes > div:hover { border-color: #8ce7ff; box-shadow: 0 0 0 1px rgba(156,237,255,.22), 0 0 36px rgba(0,190,255,.48), 0 0 84px rgba(0,112,255,.24), 0 26px 60px rgba(0,7,24,.52), inset 0 1px rgba(255,255,255,.27), inset 0 -38px 58px rgba(0,96,202,.22); }
.opening-outcomes > div:hover::before { opacity: 1; }
.opening-outcomes > div > * { position: relative; z-index: 1; }
.opening-outcomes span { font-size: 9px; letter-spacing: .12em; color: #a0c9ed; }
.opening-outcomes strong { display: block; max-width: 180px; font-size: 19px; line-height: 1.12; margin: 12px 0; font-weight: 600; transform: translateZ(20px); text-shadow: 0 4px 14px rgba(0,0,0,.3); }
.opening-outcomes strong b { color: #18d6e7; font-weight: 650; }
.opening-outcomes small { color: #a5b8d0; font-size: 10px; }
.opening-outcomes .finance-value { margin: 11px 0 2px; max-width: none; color: #fff; font-size: 27px; letter-spacing: -.035em; }
.finance-card-foot { position: absolute; left: 20px; right: 14px; bottom: 13px; min-height: 64px; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.finance-card-foot small { width: 72px; padding-bottom: 5px; font-size: 8px; line-height: 1.35; text-transform: uppercase; letter-spacing: .06em; }
.finance-card-foot small b { display: block; color: #25dce9; font-size: 10px; margin-bottom: 2px; }
.finance-chart { position: static; flex: 0 0 auto; width: 92px; height: 62px; overflow: visible; transform: translateZ(28px); filter: drop-shadow(0 0 10px rgba(0,174,255,.45)); }
.finance-chart .chart-grid { fill: none; stroke: rgba(126,207,255,.16); stroke-width: 1; }
.finance-chart .chart-area { opacity: 1; }
.finance-chart .chart-line { fill: none; stroke: #4fe2ff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px #0ea5ff); }
.finance-chart circle { fill: #d7fbff; stroke: #27d6ff; stroke-width: 2; filter: drop-shadow(0 0 5px #1fcfff); }
.finance-chart rect { fill: #148dff; stroke: #56dfff; stroke-width: .5; filter: drop-shadow(0 0 4px rgba(27,184,255,.72)); }
.service-card { display: flex; flex-direction: column; }
.service-card > span { display: block; }
.financial-preview { margin-top: 12px; padding: 9px 10px 8px; border: 1px solid rgba(139,220,255,.4); border-radius: 9px; background: linear-gradient(125deg, rgba(227,250,255,.16), rgba(11,87,151,.24)); box-shadow: inset 0 1px rgba(255,255,255,.15), 0 0 16px rgba(11,172,255,.08); font-size: 8px; line-height: 1.25; }
.preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; padding-bottom: 6px; border-bottom: 1px solid rgba(150,221,255,.2); color: #e6f9ff; }
.preview-head b { font-size: 8px; font-weight: 700; }
.preview-head em { color: #8fd0ed; font-size: 6px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.financial-preview p { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 5px; color: #bdd3e7; }
.financial-preview p strong { margin: 0; color: #fff; font-size: 9px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.financial-preview .preview-total { padding-top: 5px; border-top: 1px solid rgba(150,221,255,.2); color: #a5e8ff; }
.financial-preview .preview-total strong { color: #3fe4dc; }
.payroll-preview { position: relative; background: linear-gradient(125deg, rgba(220,250,255,.22), rgba(10,86,148,.3)); }
.payroll-preview::after { content: ''; position: absolute; right: 10px; bottom: 11px; width: 29px; height: 14px; border-bottom: 1px solid rgba(144,220,255,.45); transform: rotate(-8deg); }
.financial-preview .payee { display: block; padding: 2px 0 4px; }
.financial-preview .payee span { display: block; color: #9cc8df; font-size: 6px; margin-bottom: 2px; }
.financial-preview .payee strong { font-size: 9px; }
.financial-preview .paycheck-total { align-items: center; padding: 5px 0; border-top: 1px solid rgba(150,221,255,.2); }
.financial-preview .paycheck-total strong { color: #fff; font-size: 13px; letter-spacing: -.035em; }
.client-story { position: relative; overflow: hidden; background: radial-gradient(circle at 13% 44%, rgba(45,129,255,.2), transparent 34%), linear-gradient(135deg, #f8fbff 0%, #deecff 48%, #f7faff 100%); color: #081d3c; padding: 90px 32px 60px; scroll-margin-top: 85px; }
.client-story::before { content: ''; position: absolute; width: 720px; height: 720px; left: -310px; top: -210px; border-radius: 50%; background: radial-gradient(circle, rgba(39,127,255,.17), rgba(39,127,255,0) 68%); pointer-events: none; }
.client-story::after { content: ''; position: absolute; width: 620px; height: 620px; right: -280px; bottom: -280px; border-radius: 50%; background: radial-gradient(circle, rgba(2,49,111,.1), rgba(2,49,111,0) 70%); pointer-events: none; }
.client-story-layout { max-width: 1360px; margin: auto; display: grid; grid-template-columns: .87fr 1fr 1.1fr; align-items: center; gap: 28px; }
.client-story-layout, .client-story-steps, .client-directory { position: relative; z-index: 1; }
.client-cloud-column { --cloud-x: 48%; --cloud-y: 42%; position: relative; grid-column: 3; grid-row: 1; min-width: 0; padding: 18px; overflow: hidden; border: 1px solid rgba(49,165,255,.62); border-radius: 30px; background: radial-gradient(420px circle at var(--cloud-x) var(--cloud-y), rgba(28,144,255,.34), transparent 65%), linear-gradient(145deg, rgba(7,40,82,.98), rgba(2,18,43,.97)); box-shadow: 0 34px 85px rgba(7,47,98,.28), 0 0 45px rgba(24,126,255,.12), inset 0 1px rgba(255,255,255,.16), inset 0 -50px 80px rgba(0,7,22,.25); backdrop-filter: blur(14px); }
.client-cloud-column::after { content: ''; position: absolute; inset: -40% -20%; background: linear-gradient(112deg, transparent 35%, rgba(103,204,255,.08) 47%, transparent 58%); transform: translateX(-28%); pointer-events: none; }
.client-cloud-note { position: relative; z-index: 3; color: #7fdcff; font: italic 23px Georgia, serif; margin: 0 0 0 25px; text-shadow: 0 0 24px rgba(48,174,255,.46); }
.client-cloud { height: 450px; position: relative; z-index: 2; isolation: isolate; perspective: 1100px; }
.client-cloud::before { content: ''; position: absolute; inset: 32px 3px; border-radius: 46%; border: 1px solid rgba(91,191,255,.18); background: radial-gradient(circle at 48% 44%, rgba(27,120,232,.2), rgba(5,38,80,.75) 55%, rgba(0,13,34,.92)); box-shadow: 0 26px 65px rgba(0,7,25,.48), 0 0 64px rgba(23,129,255,.18), inset 0 0 80px rgba(49,146,255,.13), inset 0 1px rgba(255,255,255,.11); transform: rotate(-8deg); }
.client-cloud::after { content: ''; position: absolute; inset: 75px 45px; border: 1px solid rgba(83,185,255,.18); border-radius: 50%; transform: rotate(18deg); box-shadow: 0 0 40px rgba(37,145,255,.09), inset 0 0 34px rgba(37,145,255,.07); pointer-events: none; }
.cloud-card { position: absolute; left: 50%; top: 50%; width: 118px; min-height: 98px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 12px; background: linear-gradient(145deg, rgba(255,255,255,1), rgba(231,243,255,.96)); color: #183963; border: 1px solid rgba(172,217,255,.9); border-radius: 16px; box-shadow: 0 19px 42px rgba(0,4,20,.36), 0 4px 12px rgba(0,24,58,.22), 0 0 22px rgba(65,168,255,.12), inset 0 1px #fff; font: inherit; cursor: pointer; transform-origin: center; text-align: center; backdrop-filter: blur(10px); transition: border-color .25s, box-shadow .25s, filter .25s; }
.cloud-card small { font-size: 9px; line-height: 1.25; }
.cloud-card.is-origin { border-color: #49c6ff; box-shadow: 0 22px 50px rgba(0,5,24,.42), 0 0 0 2px rgba(73,198,255,.28), 0 0 34px rgba(40,158,255,.34); }
.client-cloud:has(.cloud-card:hover) .cloud-card:not(:hover) { filter: brightness(.7) saturate(.65); }
.cloud-card:hover, .cloud-card:focus-visible { border-color: #57d5ff; box-shadow: 0 24px 52px rgba(0,5,24,.44), 0 0 0 3px rgba(59,190,255,.22), 0 0 38px rgba(36,163,255,.32); }
.cloud-card:focus-visible, .opening-button:focus-visible, .story-button:focus-visible { outline: 2px solid #2378ff; outline-offset: 5px; }
.ferendo-client-art { display: block; flex: none; background-repeat: no-repeat; pointer-events: none; --logo-height: 43px; }
.client-cloud-controls { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #9ebfe2; font-size: 10px; margin: 8px 12px 0; }
.client-cloud-toggle { background: transparent; border: 0; color: inherit; font: inherit; padding: 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.story-eyebrow { font-size: 10px; letter-spacing: .24em; color: #547096; margin-bottom: 20px; }
.client-story-copy { grid-column: 2; grid-row: 1; padding: 20px 10px; }
.client-story-copy h2 { font: 500 clamp(38px,3.8vw,55px)/1.03 Georgia, 'Times New Roman', serif; letter-spacing: -.05em; text-shadow: 0 1px #fff; }
.client-story-copy h2 span { color: #006dff; }
.client-story-copy > p:not(.story-eyebrow) { margin-top: 24px; font-size: 14px; line-height: 1.7; color: #3f526d; }
.story-button { background: #06285d; font-size: 12px; padding: 14px 18px; gap: 14px; margin-top: 25px; }
.client-story-photo { grid-column: 1; grid-row: 1; margin: 0; border: 1px solid #bcd5f3; border-radius: 14px; background: #f4f9ff; box-shadow: 0 24px 55px rgba(24,76,136,.16), -16px 16px 0 rgba(191,218,250,.35); overflow: hidden; transform: rotate(-2deg); }
.client-story-photo img { width: 100%; height: auto; }
.client-story-photo figcaption { padding: 24px; }
.client-story-photo figcaption span { display: block; font-size: 9px; letter-spacing: .2em; color: #4f6a90; margin-bottom: 12px; }
.client-story-photo figcaption strong { display: block; font: 500 24px/1.2 Georgia, serif; letter-spacing: -.025em; }
.client-story-steps { list-style: none; margin: 58px auto 0; max-width: 1320px; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid #cbdff5; border-radius: 14px; padding: 24px 0; background: rgba(255,255,255,.7); box-shadow: 0 18px 45px rgba(20,62,111,.07); }
.client-story-steps li { display: flex; gap: 14px; padding: 0 24px; }
.client-story-steps li + li { border-left: 1px solid #e1eaf5; }
.client-story-steps li > span { flex: none; width: 28px; height: 28px; display: grid; place-items: center; color: #1673ff; background: #ecf4ff; border-radius: 50%; font-size: 12px; }
.client-story-steps strong { font: 500 19px/1.2 Georgia, serif; }
.client-story-steps p { font-size: 11px; line-height: 1.55; color: #536b87; margin-top: 9px; }
.client-directory { max-width: 1320px; margin: 36px auto 0; color: #123f78; font-size: 16px; }
.client-directory summary { cursor: pointer; width: min(100%, 410px); min-height: 70px; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 2px solid #137cff; border-radius: 18px; background: rgba(255,255,255,.82); color: #07346d; box-shadow: 0 16px 34px rgba(18,86,170,.14), inset 0 1px #fff; font-weight: 750; letter-spacing: -.01em; list-style: none; transition: transform .25s, box-shadow .25s, background .25s; }
.client-directory summary::-webkit-details-marker { display: none; }
.client-directory summary:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 20px 42px rgba(18,86,170,.2), 0 0 0 5px rgba(19,124,255,.06); }
.client-directory summary span { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 50%; background: #087bff; color: #fff; font-size: 21px; transition: transform .25s; }
.client-directory[open] summary span { transform: rotate(45deg); }
.client-directory-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; padding: 20px 0; }
.directory-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px; min-height: 120px; border: 1px solid #e2eaf4; border-radius: 8px; background: #fff; color: #536b87; text-align: center; font: inherit; }
.directory-brand small { font-size: 10px; }
@media (min-width: 1700px) { .opening-photo { object-position: center 28%; } }
@media (max-width: 1100px) {
 .opening-copy { width: 63%; }
 .opening-outcomes { display: none; }
 .client-story-layout { grid-template-columns: 1fr 1fr; gap: 32px; }
 .client-story-photo { grid-column: 2; max-width: 360px; transform: none; }
 .client-story-copy { grid-column: 2; grid-row: 1; }
 .client-story-photo { grid-column: 1; grid-row: 1; }
 .client-cloud-column { grid-column: 1 / 3; grid-row: 2; }
 .client-story-copy h2 { font-size: 44px; }
 .client-story-steps li { padding: 0 14px; gap: 10px; }
}
@media (max-width: 680px) {
 .ferendo-home .header .nav-links { background: #031329; }
 .opening-hero { min-height: 980px; }
 .opening-inner { padding: 38px 24px 360px; }
 .opening-copy { width: 100%; }
 .opening-copy h1 { font-size: clamp(44px,10.7vw,67px); }
 .opening-eyebrow { font-size: 10px; margin-bottom: 22px; }
 .opening-description { font-size: 15px; max-width: 420px; }
 .opening-photo { object-fit: contain; object-position: center bottom; }
 .opening-shade { background: linear-gradient(180deg, #031329 0%, #031329 49%, transparent 76%, #031329 100%); }
 .opening-actions { gap: 16px; }
 .opening-button { padding: 16px 22px; font-size: 14px; }
 .opening-secondary { font-size: 12px; }
 .opening-proof { gap: 14px; margin-top: 25px; font-size: 8px; letter-spacing: .05em; }
 .opening-proof span + span { padding-left: 14px; }
 .client-story { padding: 56px 20px 36px; }
 .client-story-layout { display: flex; flex-direction: column; gap: 30px; align-items: stretch; }
 .client-story-copy { order: -1; }
 .client-story-copy h2 { font-size: 43px; max-width: 420px; }
 .client-cloud { height: 400px; }
 .cloud-card { width: 99px; min-height: 83px; padding: 9px; }
 .client-story-photo { max-width: 100%; }
 .client-story-photo { order: 0; }
 .client-cloud-column { order: 1; }
 .client-story-steps { grid-template-columns: 1fr 1fr; gap: 24px 0; margin-top: 36px; padding: 22px 0; }
 .client-story-steps li:nth-child(3) { border-left: 0; }
 .client-story-steps li { padding: 0 12px; }
 .client-story-steps strong { font-size: 17px; }
 .client-directory-grid { grid-template-columns: repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce) {
 .opening-button, .story-button { transition: none; }
 .finance-chart * { animation: none !important; }
 .opening-outcomes > div { transform: none; transition: none; }
 .client-cloud-toggle { display: none; }
}
.client-brand-dialog { width: min(420px, calc(100vw - 40px)); border: 1px solid #dce8f6; border-radius: 16px; padding: 36px; color: #102849; box-shadow: 0 20px 70px #001a3533; }
.client-brand-dialog::backdrop { background: #00142b80; }
.brand-dialog-close { position: absolute; top: 9px; right: 14px; background: none; border: 0; font-size: 26px; cursor: pointer; color: #3f5878; }
.brand-dialog-art { display: flex; justify-content: center; padding: 14px; }
.brand-dialog-art .ferendo-client-art { --logo-height: 75px; max-width: 200px; }
.client-brand-dialog h2 { font: 500 29px/1.15 Georgia,serif; margin-top: 15px; }
.client-brand-dialog p { font-size: 14px; color: #536b87; margin-top: 15px; }
.brand-dialog-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 15px; font-size: 13px; }
.brand-dialog-actions .story-button { margin-top: 0; }
@media (max-width: 680px) {
 .opening-inner { padding-bottom: 300px; }
 .opening-hero { min-height: 900px; }
 .opening-photo { top: auto; bottom: 0; height: 330px; object-fit: cover; object-position: 65% center; transform: none; }
}