:root { --navy: #11314a; --dark-blue: #235C81; --medium-blue: #5492B6; --coral: #DB635D; --salmon: #F2847D; --cream: #FFF6E8; --gold-sand: #F6C893; --rule-cream: rgba(255, 246, 232, .35); --rule-navy: rgba(17, 49, 74, .14); --border-navy-soft: rgba(17, 49, 74, .25); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--cream); color: var(--navy); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .wrap { max-width: 880px; margin: 0 auto; padding: 0 28px; } .hero { position: relative; min-height: 600px; padding: 56px 0 88px; overflow: visible; color: var(--cream); background: radial-gradient(80% 60% at 75% 25%, rgba(84,146,182,.18) 0%, rgba(17,49,74,0) 65%), linear-gradient(180deg, var(--navy) 0%, var(--dark-blue) 100%); } .hero__bg { position: absolute; inset: 0; background-image: url('scubadev-fieldguide-diver.jpg'); background-size: cover; background-position: center 40%; background-repeat: no-repeat; z-index: 0; opacity: .85; filter: saturate(.85) hue-rotate(-8deg); mix-blend-mode: luminosity; } .hero__overlay { position: absolute; inset: 0; background: radial-gradient(120% 70% at 80% 20%, rgba(17,49,74,0) 0%, rgba(17,49,74,.55) 100%), linear-gradient(180deg, rgba(17,49,74,.20) 0%, rgba(17,49,74,.50) 60%, rgba(17,49,74,.85) 100%); z-index: 1; } .hero::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(255,246,232,.07) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, rgba(255,246,232,.07) 0 1px, transparent 1px 40px); z-index: 2; pointer-events: none; } .annotations { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .crosshair { position: absolute; width: 11px; height: 11px; opacity: .42; } .crosshair::before, .crosshair::after { content: ''; position: absolute; background: var(--cream); } .crosshair::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); } .crosshair::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); } .ch-1 { top: 12%; left: 16%; } .ch-2 { top: 22%; left: 70%; } .ch-3 { top: 38%; left: 8%; opacity: .3; } .ch-4 { top: 50%; left: 82%; } .ch-5 { top: 62%; left: 12%; } .ch-6 { top: 70%; left: 92%; opacity: .25; } .ch-7 { top: 84%; left: 22%; opacity: .35; } .ch-8 { top: 88%; left: 60%; opacity: .3; } .ch-9 { top: 80%; left: 78%; opacity: .25; } .coords { position: absolute; right: 20px; top: 220px; font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; color: var(--cream); opacity: .55; text-align: right; line-height: 2; } .tick-ruler { position: absolute; right: 12px; top: 80px; bottom: 80px; width: 8px; display: flex; flex-direction: column; justify-content: space-between; opacity: .35; } .tick-ruler i { display: block; height: 1px; background: var(--cream); width: 4px; align-self: flex-end; } .tick-ruler i:nth-child(5n+1) { width: 8px; } .hero__corner-tl, .hero__corner-tr { position: absolute; top: 24px; font-family: 'Source Code Pro', monospace; font-size: 9.5px; letter-spacing: .22em; color: var(--cream); opacity: .55; line-height: 1.7; text-transform: uppercase; z-index: 3; } .hero__corner-tl { left: 32px; text-align: left; } .hero__corner-tr { right: 32px; text-align: right; } .hero__corner-graphic { position: absolute; pointer-events: none; color: var(--gold-sand); opacity: .30; z-index: 2; } .hero__corner-graphic svg { display: block; width: 100%; height: auto; } .hero__corner-graphic--tl { top: -80px; left: -100px; width: 620px; } .hero__corner-graphic--br { bottom: -80px; right: -100px; width: 620px; } @media (max-width: 900px) { .hero__corner-graphic--tl { width: 460px; top: -60px; left: -70px; } .hero__corner-graphic--br { width: 460px; bottom: -60px; right: -70px; } } @media (max-width: 720px) { .hero__corner-graphic--tl { width: 320px; top: -30px; left: -50px; } .hero__corner-graphic--br { width: 320px; bottom: -30px; right: -50px; } } .surface-divider__corner { position: absolute; pointer-events: none; color: var(--medium-blue); opacity: .18; z-index: 0; } .surface-divider__corner svg { display: block; width: 100%; height: auto; } .surface-divider__corner--tl { top: -80px; left: -100px; width: 620px; } .surface-divider__corner--tr { top: -80px; right: -100px; width: 620px; } @media (max-width: 720px) { .surface-divider__corner--tl { width: 360px; top: -50px; left: -50px; } .surface-divider__corner--tr { width: 360px; top: -50px; right: -50px; } } .hero__inner { position: relative; z-index: 3; padding-top: 96px; } .field-eyebrow { font-family: 'Source Code Pro', monospace; font-size: 10.5px; letter-spacing: .22em; color: var(--cream); opacity: .8; text-transform: uppercase; margin-bottom: 28px; display: inline-flex; align-items: center; gap: 10px; } .field-eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--gold-sand); opacity: .9; } .hero__title { font-family: 'DM Sans', 'Inter', sans-serif; font-weight: 700; font-size: 52px; line-height: 1.04; letter-spacing: -.005em; max-width: 760px; margin-bottom: 22px; } .hero__title em { font-family: 'Bodoni Moda', serif; font-style: italic; font-weight: 500; color: var(--gold-sand); letter-spacing: -.01em; } .hero__subhead { font-size: 14.5px; line-height: 1.55; max-width: 520px; color: rgba(255,246,232,.8); margin-bottom: 36px; font-weight: 400; } .byline-pill-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .byline__chip { font-family: 'Source Code Pro', monospace; font-size: 9.5px; letter-spacing: .2em; color: var(--cream); opacity: .65; text-transform: uppercase; padding: 5px 10px; border: 1px solid rgba(255,246,232,.22); border-radius: 999px; } .byline { display: flex; align-items: center; gap: 12px; font-family: 'Inter', sans-serif; } .byline__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); display: grid; place-items: center; color: var(--coral); border: 1.5px solid rgba(255,246,232,.4); flex-shrink: 0; overflow: hidden; } .byline__avatar svg { width: 36px; height: 36px; transform: translateY(3px); } .byline__meta { font-size: 12px; line-height: 1.45; } .byline__meta strong { display: block; color: var(--cream); font-weight: 600; font-size: 13px; letter-spacing: .005em; margin-bottom: 1px; } .byline__meta span { color: rgba(255,246,232,.55); font-family: 'Source Code Pro', monospace; font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; } .wave-divider { position: relative; height: 120px; margin-top: -120px; z-index: 4; pointer-events: none; } .wave-divider svg { display: block; width: 100%; height: 100%; color: var(--cream); } .wave-divider svg path { fill: currentColor; } .wave-divider .crosshair { position: absolute; opacity: .35; } .wave-divider .wch-1 { top: 22px; left: 18%; opacity: .45; } .wave-divider .wch-2 { top: 34px; left: 50%; opacity: .35; } .wave-divider .wch-3 { top: 14px; left: 72%; opacity: .4; } .wave-divider--top-stats { position: absolute; top: 0; left: 0; right: 0; height: 120px; z-index: 6; pointer-events: none; } .wave-divider--top-stats svg { display: block; width: 100%; height: 100%; color: var(--cream); transform: scaleY(-1); transform-origin: center; } .wave-divider--top-stats svg path { fill: currentColor; } .wave-divider--top-rolematrix { position: absolute; top: -120px; left: 0; right: 0; height: 120px; z-index: 4; pointer-events: none; } .wave-divider--top-rolematrix svg { display: block; width: 100%; height: 100%; color: var(--cream); } .wave-divider--top-rolematrix svg path { fill: currentColor; } .wave-divider--top-skip { position: absolute; top: 0; left: 0; right: 0; height: 120px; z-index: 6; pointer-events: none; } .wave-divider--top-skip svg { display: block; width: 100%; height: 100%; color: var(--cream); transform: scaleY(-1); transform-origin: center; } .wave-divider--top-skip svg path { fill: currentColor; } .tools-bar { background: var(--cream); padding: 16px 0 4px; } .tools-bar__row { display: flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; } .tools-bar__label { font-family: 'Source Code Pro', monospace; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); opacity: .55; margin-right: 6px; } .tools-bar__btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(17,49,74,.05); border: 1px solid rgba(17,49,74,.13); font-size: 11.5px; color: var(--navy); font-weight: 500; cursor: pointer; transition: background .2s; } .tools-bar__btn:hover { background: rgba(17,49,74,.10); } .tools-bar__btn svg { width: 12px; height: 12px; } .tools-bar__btn--icon { padding: 6px 9px; } .wavy-hairline { background: var(--cream); padding: 14px 0 6px; position: relative; } .wavy-hairline__svg { display: block; width: 100%; height: 22px; overflow: visible; } .wavy-hairline__path { fill: none; stroke: var(--navy); stroke-width: 1; stroke-dasharray: 4 5; stroke-linecap: round; opacity: .3; animation: wavyDrift 9s linear infinite; } .wavy-hairline__x { stroke: var(--navy); stroke-width: 1.4; stroke-linecap: round; fill: none; opacity: .65; } @keyframes wavyDrift { from { stroke-dashoffset: 0; } to   { stroke-dashoffset: -90; } } @media (prefers-reduced-motion: reduce) { .wavy-hairline__path { animation: none; } } .summary { background: var(--cream); padding: 24px 0 8px; position: relative; overflow: hidden; } .summary__card { background: var(--cream); border: 1.5px solid var(--border-navy-soft); border-radius: 12px; padding: 38px 36px 28px; position: relative; box-shadow: 0 1px 0 rgba(17,49,74,.18) inset; } .summary__label { position: absolute; top: 14px; left: 28px; font-family: 'Source Code Pro', monospace; font-size: 9.5px; letter-spacing: .22em; color: rgba(17, 49, 74, .7); text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; } .summary__label::before { content: ''; width: 18px; height: 1px; background: rgba(17, 49, 74, .55); } .summary__footer { margin-top: 18px; border-top: 1px dashed rgba(17, 49, 74, .25); } .summary__toc { width: 100%; } .summary__toc-summary { list-style: none; cursor: pointer; padding: 14px 2px 12px; display: flex; align-items: center; justify-content: space-between; font-family: 'Source Code Pro', 'Inter', monospace; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(17, 49, 74, .75); transition: color .2s ease; } .summary__toc-summary::-webkit-details-marker { display: none; } .summary__toc-summary:hover { color: var(--navy); } .summary__toc-right { display: inline-flex; align-items: center; gap: 8px; } .summary__toc-right svg { width: 11px; height: 11px; transition: transform .35s cubic-bezier(.6,.05,.3,1); } .summary__toc[open] .summary__toc-right svg { transform: rotate(90deg); } .summary__toc-panel { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .45s cubic-bezier(.6,.05,.3,1), opacity .35s ease, padding .35s ease; padding: 0 2px; } .summary__toc[open] .summary__toc-panel { max-height: 600px; opacity: 1; padding: 4px 2px 14px; } .summary__toc-list { list-style: none; margin: 0; padding: 0; } .summary__toc-item { border-top: 1px dashed rgba(17, 49, 74, .25); } .summary__toc-item:first-child { border-top: 1px dashed rgba(17, 49, 74, .25); } .summary__toc-link { display: flex; align-items: baseline; gap: 14px; padding: 12px 4px; text-decoration: none; color: var(--navy); transition: background .2s ease, padding-left .2s ease; } .summary__toc-link:hover { background: rgba(17, 49, 74, .04); padding-left: 8px; } .summary__toc-num { font-family: 'Source Code Pro', monospace; font-size: 10px; letter-spacing: .18em; color: rgba(17, 49, 74, .55); flex-shrink: 0; width: 28px; } .summary__toc-title { font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.45; color: var(--navy); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .summary__toc-item a, .summary__toc-item > * { min-width: 0; } .summary__toc-item { white-space: nowrap; min-width: 0; } .summary__layout { display: grid; grid-template-columns: 170px 1fr; gap: 26px; align-items: start; } .summary__dropcap-wrap { width: 170px; height: 170px; position: relative; margin-top: -10px; } .summary__dropcap-wrap svg { display: block; width: 100%; height: 100%; } .summary__body p { font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.65; color: var(--navy); margin-bottom: 12px; } .summary__body p:last-child { margin-bottom: 0; } .toc-toggle { background: var(--cream); padding: 6px 0 28px; } .toc-toggle__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--rule-navy); border-bottom: 1px solid var(--rule-navy); padding: 11px 2px; } .toc-toggle__label, .toc-toggle__count { font-family: 'Source Code Pro', monospace; font-size: 9.5px; letter-spacing: .22em; color: var(--navy); opacity: .65; text-transform: uppercase; } .toc-toggle__count { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .toc-toggle__count svg { width: 11px; height: 11px; opacity: .8; } .surface-divider { background: var(--cream); padding: 12px 0 36px; text-align: center; position: relative; overflow: visible; } .surface-divider__inner { display: inline-flex; align-items: center; gap: 22px; position: relative; z-index: 1; } .surface-divider__title { font-family: 'Bodoni Moda', serif; font-style: italic; font-weight: 500; font-size: 22px; color: var(--navy); letter-spacing: -.005em; } .surface-divider svg { width: 18px; height: 18px; opacity: .5; color: var(--navy); } .intro { background: var(--cream); padding: 6px 0 60px; position: relative; } .intro > .wrap { position: relative; z-index: 1; } .summary > .wrap { position: relative; z-index: 1; } .intro__hairline { width: 100%; height: 22px; opacity: .25; margin-bottom: 18px; } .intro__hairline svg { display: block; width: 100%; height: 100%; } .intro__corner { position: absolute; pointer-events: none; color: var(--medium-blue); opacity: .15; z-index: 0; } .intro__corner svg { display: block; width: 100%; height: auto; } .intro__corner--tl { top: -80px; left: -100px; width: 620px; } .intro__corner--tr { top: -80px; right: -100px; width: 620px; } .intro__body { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; } .intro__layout { display: grid; grid-template-columns: 86px 1fr; gap: 18px; align-items: start; } .intro__dropcap { font-family: 'Bodoni Moda', Georgia, serif; font-weight: 400; font-style: normal; font-size: 64px; line-height: 1; color: var(--navy); text-align: center; letter-spacing: -.02em; border: 1px solid rgba(17,49,74,.45); border-radius: 4px; position: relative; width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } .intro__dropcap::before, .intro__dropcap::after { content: ''; position: absolute; width: 10px; height: 10px; border-color: var(--navy); border-style: solid; } .intro__dropcap::before { top: 6px; left: 6px; border-width: 1.5px 0 0 1.5px; } .intro__dropcap::after { top: 6px; right: 6px; border-width: 1.5px 1.5px 0 0; } .intro__dropcap > span.corner-bl, .intro__dropcap > span.corner-br { position: absolute; width: 10px; height: 10px; border-color: var(--navy); border-style: solid; } .intro__dropcap > span.corner-bl { bottom: 6px; left: 6px; border-width: 0 0 1.5px 1.5px; } .intro__dropcap > span.corner-br { bottom: 6px; right: 6px; border-width: 0 1.5px 1.5px 0; } .intro__body p { font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.75; color: var(--navy); margin-bottom: 14px; } .intro__figure { margin: 28px 0 16px; max-width: 100%; } .intro__figure img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 6px 24px rgba(17, 49, 74, .12), 0 1px 3px rgba(17, 49, 74, .08); } .intro__figure figcaption { font-family: 'Source Code Pro', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(17, 49, 74, .6); margin-top: 10px; text-align: center; } @media (max-width: 720px) { .wrap { padding: 0 20px; } .hero { padding: 48px 0 80px; min-height: 540px; } .hero__corner-tl, .hero__corner-tr, .coords, .tick-ruler { display: none; } .summary__card { padding: 44px 20px 22px; } .summary__layout { grid-template-columns: 80px 1fr; gap: 10px; } .summary__dropcap-wrap { width: 80px; height: 80px; } .intro__layout { grid-template-columns: 56px 1fr; } .intro__dropcap { font-size: 40px; } .intro__corner--tl { width: 360px; top: -50px; left: -50px; } .intro__corner--tr { width: 360px; top: -50px; right: -50px; } } .stats { position: relative; overflow: hidden; padding: 140px 0 144px; color: var(--cream); background-color: var(--navy); background: var(--navy); } .stats__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; opacity: 0.8; } .stats__overlay { position: absolute; inset: 0; background-color: #11314a; opacity: 0.6; z-index: 1; pointer-events: none; } .stats::before { content: ''; position: absolute; top: -30%; right: -10%; width: 60%; height: 160%; background: radial-gradient(ellipse, rgba(84,146,182,0.32), transparent 60%); filter: blur(40px); pointer-events: none; z-index: 1; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--navy) 18%, var(--navy) 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, var(--navy) 18%, var(--navy) 82%, transparent 100%); } .stats__bl-map { position: absolute; left: -40px; bottom: 80px; width: 360px; height: auto; opacity: 0.35; z-index: 1; pointer-events: none; color: #5492B6; } .stats__bl-map .bl-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .68; } .stats__bl-map .bl-dash { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 9 9; opacity: .78; } .stats__bl-map .bl-mark { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; opacity: .88; } .stats__bl-map .bl-route { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12 12; opacity: .78; animation: blMapRoute 6.5s linear infinite; } .stats__bl-map .bl-treasure-x { fill: none; stroke: #DB635D; stroke-width: 5; stroke-linecap: round; opacity: .85; } @keyframes blMapRoute { to { stroke-dashoffset: -240; } } .stats__inner { position: relative; z-index: 2; } .stats__head { margin-bottom: 44px; } .stats__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-sand); margin: 0 0 18px; } .stats__eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-sand); box-shadow: 0 0 0 4px rgba(246,200,147,0.22); } .stats__title { font-family: 'DM Sans', 'Inter', sans-serif; font-size: clamp(26px, 3vw, 40px); line-height: 1.18; font-weight: 600; letter-spacing: -0.02em; color: var(--cream); max-width: 820px; margin: 0; } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; list-style: none; margin: 0; padding: 0; } .stat { position: relative; padding: 4px 28px; color: var(--cream); } .stat:first-child { padding-left: 0; } .stat:last-child { padding-right: 0; } .stat + .stat::before { content: ''; position: absolute; top: 6px; bottom: 6px; left: 0; width: 1px; background: rgba(255, 246, 232, 0.18); } .stat__icon { width: 28px; height: 28px; color: var(--gold-sand); margin-bottom: 26px; display: block; } .stat__icon svg { width: 100%; height: 100%; display: block; } .stat__eyebrow { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-sand); margin: 0 0 14px; } .stat__num { font-family: 'DM Sans', 'Inter', sans-serif; font-weight: 700; font-size: clamp(48px, 5.4vw, 72px); line-height: 0.95; letter-spacing: -0.035em; color: var(--cream); margin: 0; } .stat__unit { font-size: 0.42em; color: var(--gold-sand); margin-left: 6px; letter-spacing: -0.01em; font-weight: 600; vertical-align: baseline; } .stat__label { color: rgba(255, 246, 232, 0.72); font-family: 'Inter', system-ui, sans-serif; font-size: 14px; line-height: 1.55; margin: 14px 0 0; max-width: 240px; } @media (max-width: 900px) { .stats { padding: 72px 0 80px; } .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 0; } .stat { padding: 4px 22px; } .stat:nth-child(2n+1) { padding-left: 0; } .stat:nth-child(2n) { padding-right: 0; } .stat:nth-child(2n+1)::before { display: none; } .stat:nth-child(n+3)::after { content: ''; position: absolute; top: -18px; left: 0; right: 0; height: 1px; background: rgba(255, 246, 232, 0.18); } .stat__num { font-size: clamp(44px, 9vw, 56px); } } @media (max-width: 560px) { .stats { padding: 60px 0 64px; } .stats__grid { grid-template-columns: 1fr; gap: 32px 0; } .stat, .stat:first-child, .stat:last-child { padding: 0; } .stat::before { display: none !important; } .stat + .stat { padding-top: 32px; } .stat + .stat::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255, 246, 232, 0.18); } .stat__num { font-size: 48px; } .stat__label { max-width: none; } } @media (max-width: 720px) { .stats__bl-map { width: 220px; left: -30px; bottom: 40px; } } .role-matrix { position: relative; overflow: visible; padding: 120px 0 128px; color: var(--navy); background-color: var(--cream); } .role-matrix::before { content: ""; position: absolute; inset: 0; opacity: 0.12; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E"); mix-blend-mode: multiply; z-index: 0; } .role-matrix .map-bg-deco, .when-frac .map-bg-deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; color: var(--medium-blue); opacity: 0.6; } .role-matrix::after { content: ''; position: absolute; top: -120px; left: -10%; width: 50%; height: calc(90% + 120px); background: radial-gradient(ellipse, rgba(219,99,93,0.16), transparent 60%); filter: blur(60px); pointer-events: none; z-index: 1; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--navy) 18%, var(--navy) 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, var(--navy) 18%, var(--navy) 82%, transparent 100%); } .role-matrix__inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 28px; } .role-card { position: relative; } .role-card__inner { } .role-card__inner::after { content: ''; display: block; clear: both; } .role-aside { float: right; width: 58%; margin: 0 0 24px 36px; position: relative; border-radius: 18px; background: linear-gradient(180deg, var(--dark-blue, #235C81) 0%, var(--navy) 100%); border: 1px solid rgba(255, 246, 232, 0.14); box-shadow: 0 24px 60px -20px rgba(17,49,74,0.35), inset 0 1px 0 rgba(255, 246, 232, 0.06); padding: 40px; overflow: hidden; color: var(--cream); } .role-aside::before { content: ''; position: absolute; inset: 0; border-radius: 18px; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(219, 99, 93, 0.18); } .role-intro__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--coral); margin: 0 0 18px; } .role-intro__eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(219,99,93,0.22); } .role-intro__title { font-family: 'DM Sans', 'Inter', sans-serif; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.16; font-weight: 600; letter-spacing: -0.02em; color: var(--navy); margin: 0 0 22px; } .role-intro__body { font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.7; color: rgba(17, 49, 74, 0.75); margin: 0 0 16px; } .role-intro__body:last-child { margin-bottom: 0; } .role-intro__body em { font-family: 'Bodoni Moda', 'DM Sans', serif; font-style: italic; color: var(--navy); font-weight: 500; } .role-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .role-row { position: relative; display: grid; grid-template-columns: 56px 1fr auto; gap: 18px; align-items: center; padding: 16px 18px; border-radius: 12px; background: rgba(17, 49, 74, 0.38); border: 1px solid rgba(255, 246, 232, 0.08); transition: background 240ms ease, border-color 240ms ease; } .role-row:hover { background: rgba(17, 49, 74, 0.55); } .role-row--spotlight { border-color: rgba(219, 99, 93, 0.55); box-shadow: 0 0 0 1px rgba(219, 99, 93, 0.35), 0 12px 32px -16px rgba(219, 99, 93, 0.35); background: rgba(35, 92, 129, 0.28); } .role-row__icon { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 246, 232, 0.07); color: rgba(255, 246, 232, 0.65); flex-shrink: 0; } .role-row--spotlight .role-row__icon { background: rgba(219, 99, 93, 0.18); color: var(--coral); } .role-row__icon svg { width: 44px; height: 44px; display: block; } .role-row__icon img { width: 44px !important; height: 44px !important; } .role-row__title { font-family: 'DM Sans', 'Inter', sans-serif; font-size: 16px; font-weight: 600; color: var(--cream); line-height: 1.25; letter-spacing: -0.01em; } .role-row__cats { display: grid; grid-template-columns: repeat(3, auto); gap: 22px; align-items: start; } .role-cat__label { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 9px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 246, 232, 0.42); margin: 0 0 6px; display: block; } .role-cat__dots { display: inline-flex; gap: 4px; } .role-cat__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 246, 232, 0.14); display: inline-block; } .role-cat__dot--high { background: var(--coral); } .role-cat__dot--med  { background: var(--gold-sand); } .role-cat__dot--low  { background: rgba(255, 246, 232, 0.32); } .role-legend { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255, 246, 232, 0.10); display: flex; flex-wrap: wrap; gap: 28px; justify-content: flex-start; } .role-legend__item { display: inline-flex; align-items: center; gap: 8px; font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 246, 232, 0.62); } .role-legend__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .role-legend__dot--high { background: var(--coral); } .role-legend__dot--med  { background: var(--gold-sand); } .role-legend__dot--low  { background: rgba(255, 246, 232, 0.32); } @media (max-width: 980px) { .role-aside { padding: 32px; } } @media (max-width: 720px) { .role-matrix { padding: 80px 0 88px; } .role-aside { padding: 24px 20px; border-radius: 14px; } .role-row { grid-template-columns: 44px 1fr; grid-template-areas: "icon title" "cats cats"; gap: 12px 14px; padding: 14px 14px; } .role-row__icon { grid-area: icon; width: 36px; height: 36px; } .role-row__title { grid-area: title; } .role-row__cats { grid-area: cats; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 4px; border-top: 1px solid rgba(255, 246, 232, 0.08); margin-top: 4px; } .role-cat { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } .role-cat__label { margin: 0; font-size: 8.5px; letter-spacing: .08em; white-space: nowrap; } .role-cat__dots { display: flex; gap: 3px; } .role-cat__dot { width: 6px; height: 6px; } .role-legend { justify-content: flex-start; gap: 18px; } .role-aside { float: none; width: 100%; margin: 24px 0 0; } .role-card__inner { display: flex; flex-direction: column; } .role-intro-flow--top    { order: 1; } .role-aside              { order: 2; } .role-intro-flow--bottom { order: 3; } .role-intro-flow--top    { margin: 0; } .role-aside              { margin: 24px 0; } .role-intro-flow--bottom { margin: 0; } } @media (max-width: 560px) { .role-cat__dots { gap: 2px; } .role-cat__dot { width: 5px; height: 5px; } .role-cat__label { font-size: 7.5px; } } .when-frac { position: relative; overflow: hidden; padding: 20px 0 128px; color: var(--navy); background-color: var(--cream); } .when-frac::before { content: ""; position: absolute; inset: 0; opacity: 0.12; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E"); mix-blend-mode: multiply; z-index: 0; } .when-frac::after { content: ''; position: absolute; top: -10%; right: -10%; width: 50%; height: 130%; background: radial-gradient(ellipse, rgba(84,146,182,0.18), transparent 60%); filter: blur(60px); pointer-events: none; z-index: 1; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--navy) 22%, var(--navy) 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, var(--navy) 22%, var(--navy) 78%, transparent 100%); } .when-frac__inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 28px; } .when-frac__card { position: relative; } .when-frac__head { max-width: 760px; margin: 0 0 44px; } .when-frac__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--coral); margin: 0 0 18px; } .when-frac__eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(219, 99, 93, 0.22); } .when-frac__title { font-family: 'DM Sans', 'Inter', sans-serif; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.16; font-weight: 600; letter-spacing: -0.02em; color: var(--navy); margin: 0 0 18px; } .when-frac__intro { font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.7; color: rgba(17, 49, 74, 0.75); margin: 0; } .when-frac__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .when-frac__col { position: relative; padding: 32px 30px 34px; border-radius: 14px; background: linear-gradient(180deg, #235C81, #11314a); border: 1px solid rgba(255, 246, 232, 0.10); box-shadow: 0 8px 24px -12px rgba(17, 49, 74, 0.35); color: var(--cream); transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease; display: flex; flex-direction: column; gap: 14px; overflow: hidden; } .when-frac__col::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 2px; background: var(--coral); border-radius: 0 0 2px 2px; opacity: 0.85; } .when-frac__col:hover { transform: translateY(-4px); border-color: rgba(255, 246, 232, 0.18); box-shadow: 0 16px 36px -14px rgba(17, 49, 74, 0.45); } .when-frac__col-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; } .when-frac__num { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 246, 232, 0.55); } .when-frac__icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--cream); flex-shrink: 0; } .when-frac__icon svg { width: 34px; height: 34px; display: block; } .when-frac__col-title { font-family: 'DM Sans', 'Inter', sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--cream); margin: 0; } .when-frac__col-title em { font-family: 'Bodoni Moda', 'DM Sans', serif; font-style: italic; font-weight: 500; color: var(--coral); } .when-frac__col-body { font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.7; color: rgba(255, 246, 232, 0.78); margin: 0; } .when-frac__col-body strong { color: var(--cream); font-weight: 600; } @media (max-width: 980px) { .when-frac__grid { grid-template-columns: 1fr; gap: 20px; max-width: 720px; } .when-frac__head { margin-bottom: 32px; } } @media (max-width: 720px) { .when-frac { padding: 80px 0 88px; } .when-frac__col { padding: 28px 24px 30px; } } .hctl-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .68; } .hctl-thin { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; opacity: .38; } .hctl-dash { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 9 9; opacity: .78; } .hctl-mark { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; opacity: .88; } .hctl-num { fill: currentColor; font: 700 16px 'Bodoni Moda', Georgia, serif; opacity: .75; } .hcbr-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .68; } .hcbr-thin { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; opacity: .38; } .hcbr-dash { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 9 9; opacity: .78; } .hcbr-mark { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; opacity: .88; } .hcbr-num { fill: currentColor; font: 700 16px 'Bodoni Moda', Georgia, serif; opacity: .75; } .hcbr-route { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12 12; opacity: .78; animation: hcbrRoute 8s linear infinite reverse; } @keyframes hcbrRoute { to { stroke-dashoffset: -240; } } .sdtl-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .68; } .sdtl-thin { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; opacity: .38; } .sdtl-dash { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 9 9; opacity: .78; } .sdtl-mark { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; opacity: .88; } .sdtl-num { fill: currentColor; font: 700 16px 'Bodoni Moda', Georgia, serif; opacity: .75; } .sdtr-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .68; } .sdtr-thin { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; opacity: .38; } .sdtr-dash { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 9 9; opacity: .78; } .sdtr-mark { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; opacity: .88; } .sdtr-num { fill: currentColor; font: 700 16px 'Bodoni Moda', Georgia, serif; opacity: .75; } .sdtr-route { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12 12; opacity: .78; animation: sdtrRoute 9s linear infinite; } @keyframes sdtrRoute { to { stroke-dashoffset: -240; } } .intro-tl-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .68; } .intro-tl-thin { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; opacity: .38; } .intro-tl-dash { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 9 9; opacity: .78; } .intro-tl-mark { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; opacity: .88; } .intro-tl-num { fill: currentColor; font: 700 16px 'Bodoni Moda', Georgia, serif; opacity: .75; } .intro-tr-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .68; } .intro-tr-thin { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; opacity: .38; } .intro-tr-dash { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 9 9; opacity: .78; } .intro-tr-mark { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; opacity: .88; } .intro-tr-num { fill: currentColor; font: 700 16px 'Bodoni Moda', Georgia, serif; opacity: .75; } .intro-tr-route { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12 12; opacity: .78; animation: introTrRoute 9s linear infinite; } @keyframes introTrRoute { to { stroke-dashoffset: -240; } } .rm-line { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; } .rm-thin { stroke-width: 0.8; opacity: 0.85; } .rm-dash { stroke-dasharray: 5 6; opacity: 0.9; } .rm-mark { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; } .rm-xmark { stroke: #DB635D; stroke-width: 2; stroke-linecap: round; fill: none; } .rm-arrow { fill: currentColor; } .rm-num { font-family: 'Bodoni Moda', 'Bodoni 72', Didot, serif; font-size: 11px; fill: #11314a; opacity: 0.7; } .wf-line { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; } .wf-thin { stroke-width: 0.8; opacity: 0.85; } .wf-dash { stroke-dasharray: 5 6; opacity: 0.9; } .wf-mark { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; } .wf-xmark { stroke: #DB635D; stroke-width: 2; stroke-linecap: round; fill: none; } .wf-arrow { fill: currentColor; } .wf-num { font-family: 'Bodoni Moda', 'Bodoni 72', Didot, serif; font-size: 11px; fill: #11314a; opacity: 0.7; } .pdf-cta-section { position: relative; background-color: var(--cream); padding: 64px 28px; border: 0; box-shadow: none; overflow: hidden; } .pdf-cta-section::before { content: ""; position: absolute; inset: 0; opacity: 0.12; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E"); mix-blend-mode: multiply; z-index: 0; } .pdf-cta-section > * { position: relative; z-index: 1; } .pdf-cta-section .map-bg-deco-pdf { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; color: var(--medium-blue); opacity: 0.22; } .pdf-cta-banner { position: relative; max-width: 1100px; margin: 0 auto; background: linear-gradient(135deg, #235C81, #11314a); border-radius: 20px; padding: 24px 28px 24px 28px; display: flex; align-items: center; gap: 28px; box-shadow: 0 18px 44px rgba(17, 49, 74, .22), 0 4px 10px rgba(17, 49, 74, .12); overflow: hidden; min-height: 148px; } .pdf-cta-banner .deco-coords { position: absolute; top: 24px; right: 24px; font-family: 'Source Code Pro', monospace; font-size: 10px; letter-spacing: .15em; color: var(--cream); opacity: .55; text-align: right; line-height: 1.45; pointer-events: none; } .pdf-cta-banner .deco-topo { position: absolute; top: -10px; right: -20px; width: 260px; height: 180px; opacity: .18; pointer-events: none; color: var(--medium-blue); } .pdf-cta-banner .book-thumb { flex: 0 0 auto; width: 90px; height: 124px; background: var(--cream); border: 1px solid rgba(17, 49, 74, .4); border-radius: 5px; transform: rotate(-3deg); box-shadow: 0 8px 20px rgba(0, 0, 0, .25); padding: 10px 8px 9px; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--navy); } .pdf-cta-banner .book-thumb .compass { width: 22px; height: 22px; color: var(--medium-blue); margin-bottom: 6px; } .pdf-cta-banner .book-thumb .b-eyebrow { font-family: 'Source Code Pro', monospace; font-size: 6px; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); opacity: .55; margin-bottom: 5px; line-height: 1.35; } .pdf-cta-banner .book-thumb .b-title { font-family: 'DM Sans', 'Inter', sans-serif; font-size: 12px; font-weight: 600; line-height: 1.15; color: var(--navy); } .pdf-cta-banner .book-thumb .b-title em { font-family: 'Bodoni Moda', serif; font-style: italic; font-weight: 500; color: var(--coral); } .pdf-cta-banner .copy { flex: 1; padding: 0 32px 0 40px; min-width: 0; color: var(--cream); } .pdf-cta-banner .copy .eyebrow { font-family: 'Source Code Pro', monospace; font-size: 10.5px; letter-spacing: .25em; text-transform: uppercase; color: var(--gold-sand); margin-bottom: 10px; display: inline-flex; align-items: center; gap: 10px; } .pdf-cta-banner .copy .eyebrow .sep { color: var(--gold-sand); opacity: .6; font-weight: 400; } .pdf-cta-banner .copy .title { font-family: 'DM Sans', 'Inter', sans-serif; font-size: 28px; font-weight: 600; line-height: 1.18; color: var(--cream); margin-bottom: 8px; letter-spacing: -.005em; } .pdf-cta-banner .copy .title em { font-family: 'Bodoni Moda', serif; font-style: italic; font-weight: 500; color: var(--cream); } .pdf-cta-banner .copy .subtitle { font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.5; color: var(--cream); opacity: .78; max-width: 440px; margin: 0; } .pdf-cta-banner .cta { flex: 0 0 auto; margin-right: 4px; display: inline-flex; align-items: center; gap: 8px; background: var(--coral); color: var(--cream); font-family: 'DM Sans', 'Inter', sans-serif; font-size: 14.5px; font-weight: 600; letter-spacing: .01em; padding: 15px 26px; border-radius: 999px; text-decoration: none; box-shadow: 0 8px 20px -4px rgba(219, 99, 93, .4); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; white-space: nowrap; } .pdf-cta-banner .cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -4px rgba(219, 99, 93, .5); background: #F2847D; } .pdf-cta-banner .cta .arrow { display: inline-block; transition: transform .2s ease; } .pdf-cta-banner .cta:hover .arrow { transform: translateX(3px); } @media (max-width: 720px) { .pdf-cta-section { padding: 44px 20px; } .pdf-cta-banner { flex-direction: column; align-items: center; text-align: center; padding: 28px 22px 26px; gap: 18px; min-height: 0; border-radius: 18px; } .pdf-cta-banner .deco-coords { display: none; } .pdf-cta-banner .deco-topo { width: 200px; height: 130px; top: -16px; right: -26px; } .pdf-cta-banner .copy { padding: 0; } .pdf-cta-banner .copy .eyebrow { justify-content: center; } .pdf-cta-banner .copy .title { font-size: 22px; } .pdf-cta-banner .copy .subtitle { font-size: 13px; margin: 0 auto; max-width: 100%; } .pdf-cta-banner .cta { margin-right: 0; width: 100%; justify-content: center; padding: 14px 22px; } } @media (max-width: 640px) { .pdf-cta-banner { padding: 18px 18px; gap: 16px; } .pdf-cta-banner .copy .title { font-size: 22px; } .pdf-cta-banner .copy .subtitle { font-size: 12.5px; } .pdf-cta-banner .book-thumb { transform: scale(.92); } } .pf-line { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; } .pf-thin { stroke-width: 0.8; opacity: 0.85; } .pf-dash { stroke-dasharray: 5 6; opacity: 0.95; } .pf-mark { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; } .pf-xmark { stroke: #DB635D; stroke-width: 2; stroke-linecap: round; fill: none; opacity: 0.9; } .pf-arrow { fill: currentColor; } .post-cta-wrap { position: relative; } .post-cta-wrap > .trail-zone { position: relative; } .post-cta-wrap .trail-zone > .trail-deco { position: absolute; top: 0; left: 0; width: 200px; height: 100%; pointer-events: none; z-index: 1; overflow: visible; } .post-cta-wrap .trail-zone > .trail-deco svg { width: 100%; height: 100%; display: block; } .post-cta-wrap .trail-zone > .trail-deco .trail-path { fill: none; stroke: #5492B6; stroke-opacity: 0.55; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 10; animation: trail-drift 14s linear infinite; } @keyframes trail-drift { from { stroke-dashoffset: 0; } to   { stroke-dashoffset: -200; } } .post-cta-wrap .trail-zone > .trail-deco .trail-end { stroke: #DB635D; stroke-opacity: 0.9; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: none; } .post-cta-wrap .trail-zone > * { position: relative; z-index: 1; } .post-cta-wrap .trail-zone > .trail-deco { z-index: 5; overflow: visible; } .post-cta-wrap, .post-cta-wrap > .trail-zone { overflow: visible; } @media (max-width: 720px) { .post-cta-wrap .trail-zone > .trail-deco { width: 80px; opacity: 0.7; } } .beats-fulltime { position: relative; background: #FFF6E8; padding: 110px 24px 120px; overflow: hidden; } .beats-fulltime__compass { position: absolute; right: 60px; top: 100px; left: auto; transform: none; width: 320px; height: 320px; pointer-events: none; z-index: 0; opacity: 0.55; color: #5492B6; } @media (min-width: 1280px) { .beats-fulltime__compass { right: calc((100vw - 1040px) / 2 - 40px); } } .beats-fulltime__compass svg { display: block; width: 100%; height: 100%; overflow: visible; } @media (max-width: 720px) { .beats-fulltime__compass { width: 180px; height: 180px; right: -50px; top: 60px; opacity: 0.35; } } .beats-fulltime::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply; background-image: radial-gradient(rgba(17,49,74,0.05) 1px, transparent 1px), radial-gradient(rgba(17,49,74,0.04) 1px, transparent 1px); background-size: 3px 3px, 7px 7px; background-position: 0 0, 1px 2px; } .beats-fulltime > * { position: relative; z-index: 1; } .beats-fulltime > .beats-fulltime__compass { z-index: 0; position: absolute; } .beats-fulltime__inner { max-width: 1040px; margin: 0 auto; } .beats-fulltime .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: "Source Code Pro", ui-monospace, monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #DB635D; margin-bottom: 22px; } .beats-fulltime .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #DB635D; display: inline-block; } .beats-fulltime .section-title { font-family: "DM Sans", system-ui, sans-serif; font-size: 44px; line-height: 1.12; font-weight: 600; color: #11314a; letter-spacing: -0.01em; margin: 0 0 22px; max-width: 780px; } .beats-fulltime .section-title em { font-family: "Bodoni Moda", "DM Serif Display", Georgia, serif; font-style: italic; font-weight: 500; color: #235C81; } .beats-fulltime .section-intro { font-family: "Inter", system-ui, sans-serif; font-size: 17px; line-height: 1.55; color: rgba(17, 49, 74, 0.75); margin: 0 0 56px; max-width: 720px; } .beats-fulltime__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(17, 49, 74, 0.10); } .beats-fulltime__row { display: grid; grid-template-columns: 56px minmax(220px, 32%) 1fr; column-gap: 36px; align-items: start; padding: 38px 0; border-bottom: 1px solid rgba(17, 49, 74, 0.10); } .beats-fulltime__num { width: 36px; height: 36px; border-radius: 50%; background: #DB635D; color: #FFF6E8; display: inline-flex; align-items: center; justify-content: center; font-family: "Source Code Pro", ui-monospace, monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; margin-top: 2px; } .beats-fulltime__title { font-family: "Source Code Pro", ui-monospace, monospace; font-size: 13.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #11314a; line-height: 1.5; margin: 4px 0 0; } .beats-fulltime__body { font-family: "Inter", system-ui, sans-serif; font-size: 15px; line-height: 1.65; color: rgba(17, 49, 74, 0.78); margin: 0; } @media (max-width: 720px) { .beats-fulltime { padding: 72px 20px 80px; } .beats-fulltime .section-title { font-size: 30px; } .beats-fulltime .section-intro { font-size: 15.5px; margin-bottom: 36px; } .beats-fulltime__row { grid-template-columns: 1fr; row-gap: 12px; padding: 28px 0; } .beats-fulltime__num { margin-top: 0; } .beats-fulltime__title { margin-top: 0; font-size: 12.5px; } .beats-fulltime__body { font-size: 14.5px; } } .wrong-answer { position: relative; background: #FFF6E8; padding: 80px 24px 100px; overflow: hidden; } .wrong-answer__card { max-width: 1180px; margin: 0 auto; background: linear-gradient(135deg, #235C81 0%, #11314a 100%); border-radius: 20px; padding: 56px 56px 64px; position: relative; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(17, 49, 74, 0.45); } .wrong-answer__grid { display: grid; grid-template-columns: 52% 48%; gap: 48px; align-items: start; position: relative; z-index: 2; } .wrong-answer__left { min-width: 0; } .wrong-answer .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'Source Code Pro', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #F6C893; margin-bottom: 18px; } .wrong-answer .eyebrow .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #DB635D; box-shadow: 0 0 0 4px rgba(219, 99, 93, 0.18); } .wrong-answer__title { font-family: 'DM Sans', sans-serif; font-size: 36px; font-weight: 600; line-height: 1.15; color: #FFF6E8; letter-spacing: -0.01em; margin: 0 0 18px; } .wrong-answer__intro { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.6; color: rgba(255, 246, 232, 0.72); margin: 0 0 36px; max-width: 460px; } .wrong-answer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; } .wrong-answer__row { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; } .wrong-answer__icon { width: 32px; height: 32px; color: #DB635D; margin-top: 2px; } .wrong-answer__icon svg { display: block; width: 100%; height: 100%; } .wrong-answer__num { font-family: 'Source Code Pro', monospace; font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 246, 232, 0.45); display: block; margin-bottom: 8px; } .wrong-answer__lead { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 600; line-height: 1.4; color: #FFF6E8; margin: 0 0 8px; } .wrong-answer__body { font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.65; color: rgba(255, 246, 232, 0.72); margin: 0; } .wrong-answer__chart { background: transparent; border: 0; border-radius: 0; padding: 28px 24px 32px; position: relative; } .wrong-answer__chart-title { font-family: 'Source Code Pro', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #FFF6E8; text-align: center; margin: 0 0 22px; } .wrong-answer__chart-svg { width: 100%; height: auto; display: block; } .wrong-answer__chart-x { position: absolute; bottom: 16px; right: 18px; width: 22px; height: 22px; color: #DB635D; opacity: 0.85; } @media (max-width: 900px) { .wrong-answer__card { padding: 44px 32px 52px; } .wrong-answer__grid { grid-template-columns: 1fr; gap: 36px; } .wrong-answer__title { font-size: 30px; } .wrong-answer__intro { font-size: 14.5px; } } @media (max-width: 720px) { .wrong-answer { padding: 64px 16px 80px; } .wrong-answer__card { padding: 36px 24px 44px; border-radius: 16px; } .wrong-answer__title { font-size: 26px; } .wrong-answer__row { grid-template-columns: 36px 1fr; gap: 14px; } .wrong-answer__icon { width: 26px; height: 26px; } .wrong-answer__lead { font-size: 15px; } .wrong-answer__body { font-size: 14px; } .wrong-answer__chart { padding: 22px 16px 26px; } } @media (max-width: 480px) { .wrong-answer { padding: 44px 12px 60px; } .wrong-answer__card { padding: 24px 16px 32px; } .wrong-answer__title { font-size: 23px; } } .wa-node { fill: rgba(255, 246, 232, 0.04); stroke: rgba(255, 246, 232, 0.55); stroke-width: 1; } .wa-node-fc { fill: rgba(219, 99, 93, 0.10); stroke: #DB635D; stroke-width: 1.5; } .wa-label { font-family: 'Source Code Pro', monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.1em; fill: #FFF6E8; text-anchor: middle; } .wa-label-dim { font-family: 'Source Code Pro', monospace; font-size: 8.5px; font-weight: 600; letter-spacing: 0.14em; fill: rgba(255, 246, 232, 0.55); text-anchor: middle; } .wa-label-coral { font-family: 'Source Code Pro', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; fill: #DB635D; text-anchor: middle; } .wa-branch { stroke: rgba(255, 246, 232, 0.4); stroke-width: 1; fill: none; } :root { --navy: #11314a; --blue: #235c81; --soft-blue: #5492B6; --cream: #FFF6E8; --paper: #FFF6E8; --coral: #DB635D; --salmon: #F2847D; --sand: #F6C893; --line: rgba(84, 146, 182, .55); --card: rgba(255, 246, 232, .86); --shadow: 0 18px 44px rgba(17, 49, 74, .10); --serif: 'Bodoni Moda', Georgia, serif; --sans: 'Inter', ui-sans-serif, system-ui, sans-serif; --mono: 'Source Code Pro', ui-monospace, monospace; --display: 'DM Sans', 'Inter', sans-serif; } .skip-page { position: relative; max-width: 100%; margin: 0 auto; overflow: hidden; background: radial-gradient(circle at 25% 18%, rgba(255,246,232,.55), transparent 24%), radial-gradient(circle at 80% 70%, rgba(255,246,232,.26), transparent 28%), var(--cream); } .skip-page::before { content: ""; position: absolute; inset: 0; opacity: .13; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode: multiply; } .skip-page .map-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--soft-blue); opacity: .48; z-index: 0; } .skip-page > .skip-diver-burst { position: absolute; top: -40px; right: 0; width: 380px; height: 380px; z-index: 0; pointer-events: none; background: radial-gradient(circle at 60% 40%, rgba(246,200,147,.55), rgba(246,200,147,.25) 38%, transparent 68%); filter: blur(8px); } .skip-page > .skip-diver { position: absolute; top: 24px; right: 60px; width: 240px; height: auto; z-index: 1; pointer-events: none; mix-blend-mode: multiply; transform: rotate(-2deg); } @media (max-width: 900px) { .skip-page > .skip-diver { width: 140px; right: 24px; top: 16px; } } .skip-page .hero-water { position: relative; height: 94px; background: linear-gradient(180deg, #235C81, #11314a); color: rgba(255,246,232,.35); z-index: 2; } .skip-page .hero-water::after { content: ""; position: absolute; left: -3%; right: -3%; bottom: -1px; height: 45px; background: var(--cream); clip-path: ellipse(58% 58% at 50% 100%); } .skip-page .coords { position: absolute; right: 64px; top: 34px; font: 700 12px/1.6 var(--mono); letter-spacing: .18em; color: rgba(255,246,232,.55); } .skip-page .section { position: relative; z-index: 1; padding: 42px 72px 44px; } .skip-page .section-head { max-width: 780px; margin: 0 0 36px; } .skip-page .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--coral); font-family: var(--mono); font-weight: 600; letter-spacing: .18em; font-size: 12px; text-transform: uppercase; margin-bottom: 22px; } .skip-page .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); display: inline-block; } .skip-page h1, .skip-page h2, .skip-page h3 { font-family: var(--display); margin: 0; font-weight: 600; } .skip-page h1 { max-width: 780px; font-size: 44px; line-height: 1.12; letter-spacing: -.01em; color: var(--navy); font-weight: 600; margin: 0 0 22px; } .skip-page h1 .skip-h1__tag { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--blue); display: inline; } .skip-page .intro { font-family: var(--sans); font-size: 17px; line-height: 1.55; color: rgba(17, 49, 74, 0.75); max-width: 720px; font-weight: 400; margin: 0; } .skip-page .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .skip-page .card { min-height: 235px; display: grid; grid-template-columns: 48px 1fr 90px; gap: 18px; padding: 34px 28px; border: 1px solid rgba(17, 49, 74, .12); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); } .skip-page .fail { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: var(--coral); color: var(--cream); box-shadow: 0 6px 12px rgba(219,99,93,.28); font-size: 30px; font-family: var(--display); font-weight: 700; line-height: 1; } .skip-page .num { font-family: var(--mono); color: var(--coral); font-size: 11px; letter-spacing: .16em; font-weight: 600; margin-bottom: 7px; } .skip-page .card h3 { font-family: var(--display); font-weight: 600; font-size: 25px; line-height: 1.05; letter-spacing: -.03em; margin-bottom: 16px; color: var(--navy); } .skip-page .card p { font-family: var(--sans); margin: 0; color: var(--blue); font-size: 13px; line-height: 1.65; font-weight: 500; } .skip-page .card .icon { align-self: center; justify-self: end; width: 78px; height: 78px; object-fit: contain; } .skip-page .callout { margin-top: 26px; min-height: 150px; display: grid; grid-template-columns: 145px 1fr 100px 1.1fr 190px; align-items: center; gap: 28px; padding: 26px 34px; border: 1px solid rgba(17,49,74,.16); border-radius: 14px; background: linear-gradient(180deg, rgba(84,146,182,.18), rgba(84,146,182,.08)); box-shadow: var(--shadow); } .skip-page .callout h3 { font-family: var(--display); font-size: 25px; margin-bottom: 8px; color: var(--navy); } .skip-page .callout p { font-family: var(--sans); margin: 0; font-size: 13px; line-height: 1.65; font-weight: 500; color: var(--blue); } .skip-page .divider-line { height: 78px; border-left: 2px dashed rgba(17,49,74,.2); } .skip-page .cta { justify-self: end; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 15px 26px; color: var(--cream); background: var(--coral); font-family: 'DM Sans', 'Inter', sans-serif; font-size: 14.5px; font-weight: 600; letter-spacing: .01em; text-decoration: none; box-shadow: 0 8px 20px -4px rgba(219,99,93,.4); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; cursor: pointer; } .skip-page .cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -4px rgba(219,99,93,.5); background: var(--salmon); } .skip-page .cta .arrow { display: inline-block; transition: transform .2s ease; } .skip-page .cta:hover .arrow { transform: translateX(3px); } .skip-page .wave-divider { position: relative; height: 48px; margin-top: 28px; } .skip-page .wave-divider svg { width: 100%; height: 100%; display: block; } .skip-page .numbers { padding-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 52px; } .skip-page h2 { font-family: var(--display); font-weight: 600; font-size: 42px; line-height: 1; letter-spacing: -.035em; margin-bottom: 20px; color: var(--navy); } .skip-page .subhead { font-family: var(--sans); color: var(--blue); font-weight: 600; margin-bottom: 24px; } .skip-page table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 12px; background: rgba(255,246,232,.76); box-shadow: var(--shadow); } .skip-page thead th { font-family: var(--mono); background: linear-gradient(180deg, #11314a, #235C81); color: var(--cream); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-align: left; padding: 22px 24px; border-bottom: 4px solid var(--coral); font-weight: 600; } .skip-page tbody td { font-family: var(--sans); padding: 22px 24px; border-bottom: 1px solid rgba(17,49,74,.10); color: var(--blue); font-size: 15px; line-height: 1.55; font-weight: 500; vertical-align: top; } .skip-page tbody tr:last-child td { border-bottom: 0; } .skip-page tbody td:first-child { font-family: var(--display); color: var(--navy); font-weight: 700; } .skip-page .highlight { color: var(--coral) !important; } .skip-page .field-note { font-family: var(--sans); padding-top: 58px; color: var(--blue); font-size: 13px; line-height: 1.55; font-weight: 500; } .skip-page .field-note h4 { font-family: var(--mono); margin: 18px 0 10px; font-size: 12px; color: var(--soft-blue); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; } .skip-page .compass { width: 142px; margin: 0 auto 12px; color: var(--soft-blue); opacity: .55; } @media (max-width: 900px) { .skip-page .section { padding: 34px 24px; } .skip-page .cards, .skip-page .numbers { grid-template-columns: 1fr; } .skip-page h1 { font-size: 30px; } .skip-page .intro { font-size: 15.5px; } .skip-page .card { grid-template-columns: 44px 1fr; } .skip-page .card .icon { grid-column: 2; justify-self: start; width: 58px; height: 58px; } .skip-page .callout { grid-template-columns: 1fr; gap: 18px; padding: 24px 22px; text-align: left; } .skip-page .callout .cta { justify-self: start; } .skip-page .divider-line { display: none; } .skip-page .cta { justify-self: start; } } @media (max-width: 768px) { .skip-page .callout { gap: 16px; padding: 22px 18px; grid-template-columns: 1fr; } } @media (max-width: 720px) { .skip-page table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } .skip-page tbody td, .skip-page thead th { padding: 14px 12px; font-size: 13px; } } .cream-flow { background: var(--cream); position: relative; } .cream-flow::before { content: ""; position: absolute; inset: 0; opacity: .13; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode: multiply; z-index: 0; } .cream-flow > section { background: transparent !important; overflow: visible !important; position: relative; z-index: 1; } .cream-flow > section::before { display: none !important; content: none !important; } .cream-flow .section { position: relative; z-index: 1; padding: 42px 72px 44px; } .cream-flow .section-head { max-width: 780px; margin: 0 0 36px; } .cream-flow .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--coral); font-family: var(--mono); font-weight: 600; letter-spacing: .18em; font-size: 12px; text-transform: uppercase; margin-bottom: 22px; } .cream-flow .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); display: inline-block; } .cream-flow .numbers h2, .cream-flow .numbers h3 { font-family: var(--display); margin: 0; font-weight: 600; } .cream-flow .numbers { padding-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 52px; } .cream-flow .numbers h2 { font-family: var(--display); font-weight: 600; font-size: 42px; line-height: 1; letter-spacing: -.035em; margin-bottom: 20px; color: var(--navy); } .cream-flow .subhead { font-family: var(--sans); color: var(--blue); font-weight: 600; margin-bottom: 24px; } .cream-flow .numbers table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 12px; background: rgba(255,246,232,.76); box-shadow: var(--shadow); } .cream-flow .numbers thead th { font-family: var(--mono); background: linear-gradient(180deg, #11314a, #235C81); color: var(--cream); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-align: left; padding: 22px 24px; border-bottom: 4px solid var(--coral); font-weight: 600; } .cream-flow .numbers tbody td { font-family: var(--sans); padding: 22px 24px; border-bottom: 1px solid rgba(17,49,74,.10); color: var(--blue); font-size: 15px; line-height: 1.55; font-weight: 500; vertical-align: top; } .cream-flow .numbers tbody tr:last-child td { border-bottom: 0; } .cream-flow .numbers tbody td:first-child { font-family: var(--display); color: var(--navy); font-weight: 700; } .cream-flow .numbers .highlight { color: var(--coral) !important; } .cream-flow .field-note { font-family: var(--sans); padding-top: 58px; color: var(--blue); font-size: 13px; line-height: 1.55; font-weight: 500; } .cream-flow .field-note h4 { font-family: var(--mono); margin: 18px 0 10px; font-size: 12px; color: var(--soft-blue); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; } .cream-flow .compass { width: 142px; margin: 0 auto 12px; color: var(--soft-blue); opacity: .55; } .cream-flow .wave-divider { position: relative; height: 48px; margin-top: 28px; } .cream-flow .wave-divider svg { width: 100%; height: 100%; display: block; } @media (max-width: 900px) { .cream-flow .section { padding: 34px 24px; } .cream-flow .numbers { grid-template-columns: 1fr; } .cream-flow .numbers h2 { font-size: 30px; } } .ml{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.md{stroke-dasharray:9 9}.mt{opacity:.45}.mn{fill:currentColor;font:700 12px 'Bodoni Moda',Georgia,serif}.mx{stroke:currentColor;stroke-width:2.5;stroke-linecap:round} .vet-frac { position: relative; background: #FFF6E8; padding: 110px 24px 120px; overflow: hidden; } .vet-frac::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply; background-image: radial-gradient(rgba(17,49,74,0.05) 1px, transparent 1px), radial-gradient(rgba(17,49,74,0.04) 1px, transparent 1px); background-size: 3px 3px, 7px 7px; background-position: 0 0, 1px 2px; } .vet-frac__contours { position: absolute; left: -40px; top: 60px; width: 360px; height: 360px; pointer-events: none; z-index: 0; opacity: 0.18; color: #5492B6; } .vet-frac__contours svg { display: block; width: 100%; height: 100%; } @media (max-width: 720px) { .vet-frac__contours { width: 200px; height: 200px; left: -60px; top: 30px; opacity: 0.14; } } .vet-frac > * { position: relative; z-index: 1; } .vet-frac > .vet-frac__contours { z-index: 0; position: absolute; } .vet-frac__inner { max-width: 1040px; margin: 0 auto; } .vet-frac__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; margin-bottom: 56px; } .vet-frac .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: "Source Code Pro", ui-monospace, monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #DB635D; margin-bottom: 22px; } .vet-frac .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #DB635D; display: inline-block; } .vet-frac .section-title { font-family: "DM Sans", system-ui, sans-serif; font-size: 44px; line-height: 1.12; font-weight: 600; color: #11314a; letter-spacing: -0.01em; margin: 0 0 22px; max-width: 780px; } .vet-frac .section-title em { font-family: "Bodoni Moda", "DM Serif Display", Georgia, serif; font-style: italic; font-weight: 500; color: #235C81; } .vet-frac .section-intro { font-family: "Inter", system-ui, sans-serif; font-size: 17px; line-height: 1.55; color: rgba(17, 49, 74, 0.75); margin: 0; max-width: 720px; } .vet-frac__badge { width: 88px; height: 88px; border-radius: 50%; background: rgba(219, 99, 93, 0.10); display: grid; place-items: center; color: #DB635D; flex-shrink: 0; } .vet-frac__badge svg { width: 42px; height: 42px; display: block; } .vet-frac__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(17, 49, 74, 0.10); } .vet-frac__row { display: grid; grid-template-columns: 56px minmax(220px, 32%) 1fr; column-gap: 36px; align-items: start; padding: 38px 0; border-bottom: 1px solid rgba(17, 49, 74, 0.10); } .vet-frac__num { width: 36px; height: 36px; border-radius: 50%; background: #DB635D; color: #FFF6E8; display: inline-flex; align-items: center; justify-content: center; font-family: "Source Code Pro", ui-monospace, monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; margin-top: 2px; } .vet-frac__title { font-family: "Source Code Pro", ui-monospace, monospace; font-size: 13.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #11314a; line-height: 1.5; margin: 4px 0 0; } .vet-frac__body { font-family: "Inter", system-ui, sans-serif; font-size: 15px; line-height: 1.65; color: rgba(17, 49, 74, 0.78); margin: 0; } .vet-frac__body strong { font-weight: 600; color: #11314a; } @media (max-width: 720px) { .vet-frac { padding: 72px 20px 80px; } .vet-frac__head { grid-template-columns: 1fr; align-items: start; gap: 20px; margin-bottom: 36px; } .vet-frac__badge { width: 64px; height: 64px; } .vet-frac__badge svg { width: 30px; height: 30px; } .vet-frac .section-title { font-size: 30px; } .vet-frac .section-intro { font-size: 15.5px; } .vet-frac__row { grid-template-columns: 1fr; row-gap: 12px; padding: 28px 0; } .vet-frac__num { margin-top: 0; } .vet-frac__title { margin-top: 0; font-size: 12.5px; } .vet-frac__body { font-size: 14.5px; } } .label-vs { position: relative; background: #FFF6E8; padding: 110px 24px 120px; overflow: hidden; } .label-vs::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply; background-image: radial-gradient(rgba(17,49,74,0.05) 1px, transparent 1px), radial-gradient(rgba(17,49,74,0.04) 1px, transparent 1px); background-size: 3px 3px, 7px 7px; background-position: 0 0, 1px 2px; } .label-vs__contours { position: absolute; right: -50px; bottom: 40px; width: 320px; height: 320px; pointer-events: none; z-index: 0; opacity: 0.16; color: #5492B6; } .label-vs__contours svg { display: block; width: 100%; height: 100%; } @media (max-width: 720px) { .label-vs__contours { width: 200px; height: 200px; right: -70px; bottom: 20px; opacity: 0.12; } } .label-vs > * { position: relative; z-index: 1; } .label-vs > .label-vs__contours { z-index: 0; position: absolute; } .label-vs__inner { max-width: 1040px; margin: 0 auto; } .label-vs__head { margin-bottom: 56px; } .label-vs .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: "Source Code Pro", ui-monospace, monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #DB635D; margin-bottom: 22px; } .label-vs .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #DB635D; display: inline-block; } .label-vs .section-title { font-family: "DM Sans", system-ui, sans-serif; font-size: 42px; line-height: 1.14; font-weight: 600; color: #11314a; letter-spacing: -0.01em; margin: 0 0 22px; max-width: 880px; } .label-vs .section-title em { font-family: "Bodoni Moda", "DM Serif Display", Georgia, serif; font-style: italic; font-weight: 500; color: #235C81; } .label-vs .section-intro { font-family: "Inter", system-ui, sans-serif; font-size: 17px; line-height: 1.6; color: rgba(17, 49, 74, 0.75); margin: 0; max-width: 760px; } .label-vs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 40px; } .label-vs__card { position: relative; background: rgba(17, 49, 74, 0.025); border: 1px solid rgba(17, 49, 74, 0.10); border-top: 3px solid #DB635D; padding: 32px 28px 30px; border-radius: 4px; display: flex; flex-direction: column; } .label-vs__card:nth-child(2) { border-top-color: #5492B6; } .label-vs__card:nth-child(3) { border-top-color: #F2847D; } .label-vs__num { font-family: "Source Code Pro", ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(17, 49, 74, 0.5); margin-bottom: 14px; } .label-vs__name { font-family: "DM Sans", system-ui, sans-serif; font-size: 22px; line-height: 1.2; font-weight: 600; color: #11314a; margin: 0 0 8px; letter-spacing: -0.005em; } .label-vs__tag { font-family: "Source Code Pro", ui-monospace, monospace; font-size: 11.5px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: #DB635D; margin-bottom: 18px; } .label-vs__card:nth-child(2) .label-vs__tag { color: #235C81; } .label-vs__card:nth-child(3) .label-vs__tag { color: #F2847D; } .label-vs__body { font-family: "Inter", system-ui, sans-serif; font-size: 14.5px; line-height: 1.65; color: rgba(17, 49, 74, 0.78); margin: 0; } .label-vs__body strong { font-weight: 600; color: #11314a; } .label-vs__kicker { margin-top: 8px; padding: 24px 28px; background: rgba(84, 146, 182, 0.08); border-left: 3px solid #5492B6; border-radius: 2px; font-family: "Inter", system-ui, sans-serif; font-size: 16.5px; line-height: 1.6; color: rgba(17, 49, 74, 0.85); } .label-vs__kicker strong { font-family: "DM Sans", system-ui, sans-serif; font-weight: 600; color: #11314a; } @media (max-width: 900px) { .label-vs__grid { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 720px) { .label-vs { padding: 72px 20px 80px; } .label-vs .section-title { font-size: 28px; } .label-vs .section-intro { font-size: 15.5px; } .label-vs__card { padding: 22px 20px; display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; row-gap: 6px; align-items: start; } .label-vs__num { grid-column: 1; grid-row: 1 / span 3; margin-bottom: 0; font-size: 11px; line-height: 1.3; padding-top: 2px; align-self: start; } .label-vs__name { grid-column: 2; grid-row: 1; font-size: 20px; } .label-vs__body { grid-column: 2; font-size: 14px; } .label-vs__kicker { font-size: 15px; padding: 20px 22px; } } .sd-insight__divider-slot { position: relative; width: 100%; height: 0; z-index: 3; pointer-events: none; } .sd-insight__divider { position: absolute; left: 0; right: 0; width: 100%; height: clamp(70px, 10vw, 150px); pointer-events: none; display: block; } .sd-insight__divider svg { width: 100%; height: 100%; display: block; overflow: visible; } .sd-insight__divider svg path { fill: #FFF6E8; } .sd-insight__divider--down { top: 0; bottom: auto; transform: scaleY(-1); transform-origin: center; } .sd-insight__divider--up { bottom: 0; top: auto; } .sd-insight__divider--inside-top { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: clamp(70px, 10vw, 150px); z-index: 3; pointer-events: none; } .sd-insight__section--showcase { position: relative; overflow: hidden; background: #11314a url('https://scubadev.com/data/uploads/sites/4/2026/03/sdoffice.jpg') center/cover no-repeat; color: #FFF6E8; padding: clamp(110px, 11vw, 170px) 0 clamp(56px, 7vw, 96px); } .sd-insight__section--showcase::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(17, 49, 74, 0.86) 0%, rgba(10, 25, 48, 0.95) 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #11314a 18%, #11314a 82%, transparent 100%); } .sd-insight__section--showcase > .sd-insight__section-inner { position: relative; z-index: 1; padding-top: 100px; padding-bottom: 100px; max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } .sd-insight__section--showcase .sd-insight__section-card { position: relative; background: rgba(10, 25, 48, 0.55); border: 1px solid rgba(255, 246, 232, 0.12); color: #FFF6E8; border-radius: 22px; padding: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px); box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.45); } .sd-insight__what-we-run-grid { display: block; } .sd-insight__what-we-run-left { min-width: 0; } .sd-insight__section--showcase .sd-insight__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: "Source Code Pro", ui-monospace, monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #DB635D; margin: 0 0 18px; } .sd-insight__section--showcase .sd-insight__eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: #DB635D; display: inline-block; } .sd-insight__section--showcase .sd-insight__section-num { color: #F6C893; font-family: "Source Code Pro", ui-monospace, monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; } .sd-insight__section--showcase h2.sd-insight__section-title { font-family: "DM Sans", system-ui, sans-serif; font-size: 36px; line-height: 1.14; font-weight: 600; color: #FFF6E8; letter-spacing: -0.01em; margin: 0 0 14px; } .sd-insight__section--showcase h2.sd-insight__section-title em { font-family: "Bodoni Moda", "DM Serif Display", Georgia, serif; font-style: italic; font-weight: 500; color: #F6C893; } .sd-insight__section--showcase .sd-insight__intro { font-family: "Inter", system-ui, sans-serif; font-size: 16px; line-height: 1.6; color: rgba(255, 246, 232, 0.82); margin: 0 0 30px; max-width: 560px; } .sd-insight__what-we-run-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; } .sd-insight__what-we-run-row { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; padding-top: 18px; border-top: 1px solid rgba(246, 200, 147, 0.18); } .sd-insight__what-we-run-row:first-child { border-top-color: rgba(246, 200, 147, 0.28); } .sd-insight__what-we-run-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 246, 232, 0.08); display: grid; place-items: center; color: #F6C893; flex-shrink: 0; } .sd-insight__what-we-run-icon svg { width: 22px; height: 22px; stroke: #FFF6E8; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; } .sd-insight__what-we-run-title { font-family: "DM Sans", system-ui, sans-serif; font-size: 17px; font-weight: 600; color: #FFF6E8; margin: 0 0 6px; letter-spacing: -0.005em; } .sd-insight__what-we-run-body { font-family: "Inter", system-ui, sans-serif; font-size: 15px; line-height: 1.6; color: rgba(255, 246, 232, 0.82); margin: 0; } .sd-insight__what-we-run-body strong { color: #FFF6E8; font-weight: 600; } .sd-insight__what-we-run-body em { font-family: "Bodoni Moda", "DM Serif Display", Georgia, serif; font-style: italic; color: #F6C893; } @media (max-width: 880px) { .sd-insight__section--showcase { padding: clamp(80px, 10vw, 130px) 0 clamp(48px, 6vw, 80px); } .sd-insight__section--showcase > .sd-insight__section-inner { padding-top: 64px; padding-bottom: 64px; } .sd-insight__section--showcase .sd-insight__section-card { padding: 32px 24px; border-radius: 18px; } .sd-insight__section--showcase h2.sd-insight__section-title { font-size: 28px; } .sd-insight__section--showcase .sd-insight__intro { font-size: 15px; } .sd-insight__what-we-run-row { grid-template-columns: 44px 1fr; gap: 14px; } .sd-insight__what-we-run-title { font-size: 16px; } .sd-insight__what-we-run-body { font-size: 14.5px; } } .sd-playbook-cta-wrap { padding: 64px clamp(20px, 5vw, 48px); background: #FFF6E8; } .sd-playbook-cta { position: relative; isolation: isolate; margin: 0 auto; max-width: 1180px; padding: 80px clamp(20px, 5vw, 64px); color: #FFF6E8; font-family: 'Inter', system-ui, -apple-system, sans-serif; overflow: hidden; background: #11314a; border-radius: 36px; box-shadow: 0 24px 60px -20px rgba(17,49,74,0.35); transform: translateZ(0); will-change: transform; contain: layout paint; } .sd-playbook-cta__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: 36px; transform: translateZ(0); } .sd-playbook-cta__bg-gradient { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 35%, #235C81 0%, #11314a 70%); border-radius: 36px; } .sd-playbook-cta__caustic { position: absolute; top: -10%; left: -10%; width: 60%; height: 70%; background: radial-gradient(ellipse at 30% 20%, rgba(84, 146, 182, 0.28) 0%, rgba(84, 146, 182, 0) 60%); filter: blur(100px); opacity: 0.9; } .sd-playbook-cta__caustic--2 { position: absolute; bottom: -15%; right: -10%; width: 55%; height: 65%; background: radial-gradient(ellipse at 70% 80%, rgba(246, 200, 147, 0.18) 0%, rgba(246, 200, 147, 0) 60%); filter: blur(110px); opacity: 0.7; } .sd-playbook-cta__kelp { position: absolute; bottom: -40px; left: -20px; width: 220px; height: auto; opacity: 0.55; pointer-events: none; } .sd-playbook-cta__topo { position: absolute; top: -10px; right: -20px; width: 280px; height: 200px; opacity: .18; pointer-events: none; color: #5492B6; z-index: 0; } .sd-playbook-cta__coords { position: absolute; top: 22px; right: 28px; font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 10px; letter-spacing: .15em; color: #FFF6E8; opacity: .55; text-align: right; line-height: 1.45; pointer-events: none; z-index: 3; } .sd-playbook-cta__bubbles { position: absolute; right: 4%; bottom: 0; width: 180px; height: 100%; pointer-events: none; } .sd-playbook-cta__bubble { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,246,232,0.45), rgba(84,146,182,0.18) 70%, transparent 100%); border: 1px solid rgba(255,246,232,0.18); opacity: 0; animation: sd-playbook-cta-bubble 9s ease-in infinite; } .sd-playbook-cta__bubble--1 { width: 10px; height: 10px; left: 12px;  bottom: -30px; animation-delay: 0s;   animation-duration: 9s;  } .sd-playbook-cta__bubble--2 { width: 16px; height: 16px; left: 60px;  bottom: -40px; animation-delay: 1.6s; animation-duration: 11s; } .sd-playbook-cta__bubble--3 { width: 7px;  height: 7px;  left: 100px; bottom: -20px; animation-delay: 3.1s; animation-duration: 7.5s;} .sd-playbook-cta__bubble--4 { width: 12px; height: 12px; left: 140px; bottom: -50px; animation-delay: 4.3s; animation-duration: 10s; } .sd-playbook-cta__bubble--5 { width: 5px;  height: 5px;  left: 40px;  bottom: -10px; animation-delay: 5.8s; animation-duration: 8s;  } @keyframes sd-playbook-cta-bubble { 0%   { transform: translateY(0) scale(0.8); opacity: 0; } 20%  { opacity: 0.5; } 80%  { opacity: 0.35; } 100% { transform: translateY(-640px) scale(1); opacity: 0; } } .sd-playbook-cta__particles { position: absolute; inset: 0; pointer-events: none; } .sd-playbook-cta__particle { position: absolute; border-radius: 50%; background: #F6C893; box-shadow: 0 0 6px rgba(246,200,147,0.5); animation: sd-playbook-cta-drift 14s linear infinite; } .sd-playbook-cta__particle:nth-child(2n) { animation-duration: 18s; } .sd-playbook-cta__particle:nth-child(3n) { animation-duration: 22s; animation-direction: reverse; } @keyframes sd-playbook-cta-drift { 0%   { transform: translate3d(0,0,0); } 50%  { transform: translate3d(10px,-14px,0); } 100% { transform: translate3d(0,0,0); } } @media (prefers-reduced-motion: reduce) { .sd-playbook-cta__bubble, .sd-playbook-cta__particle { animation: none; opacity: 0.3; } } .sd-playbook-cta__grid { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; } @media (min-width: 900px) { .sd-playbook-cta__grid { grid-template-columns: minmax(0, 40%) minmax(0, 60%); gap: 56px; } } .sd-playbook-cta__cover-wrap { position: relative; display: flex; justify-content: center; align-items: center; padding: 16px; } .sd-playbook-cta__cover-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(84,146,182,0.35) 0%, rgba(84,146,182,0) 65%); filter: blur(50px); z-index: 0; pointer-events: none; } .sd-playbook-cta__cover { position: relative; z-index: 1; display: block; width: 100%; max-width: 360px; height: auto; border-radius: 4px; transform: perspective(1500px) rotateY(-4deg); filter: drop-shadow(0 20px 40px rgba(17, 49, 74, 0.5)) drop-shadow(0 6px 16px rgba(17, 49, 74, 0.35)); transition: transform 600ms cubic-bezier(.2,.8,.2,1); } .sd-playbook-cta__cover:hover { transform: perspective(1500px) rotateY(-2deg); } .sd-playbook-cta__body { position: relative; z-index: 1; max-width: 560px; } .sd-playbook-cta__eyebrow { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #F6C893; margin: 0 0 18px; } .sd-playbook-cta__headline { font-family: 'DM Sans', system-ui, sans-serif; font-size: clamp(28px, 4.4vw, 42px); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; color: #FFF6E8; margin: 0 0 18px; } .sd-playbook-cta__italic { font-family: 'Bodoni Moda', 'Times New Roman', serif; font-style: italic; font-weight: 500; color: #DB635D; padding: 0 0.04em; } .sd-playbook-cta__desc { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.65; color: rgba(255, 246, 232, 0.85); margin: 0 0 28px; } .sd-playbook-cta__form { display: flex; flex-direction: column; gap: 14px; margin: 0 0 18px; } .sd-playbook-cta__row { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 560px) { .sd-playbook-cta__row { grid-template-columns: 1fr 1fr; } } .sd-playbook-cta__field { display: flex; flex-direction: column; gap: 6px; } .sd-playbook-cta__label { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246, 200, 147, 0.85); padding-left: 2px; } .sd-playbook-cta__field input, .sd-playbook-cta__field select { width: 100%; box-sizing: border-box; padding: 13px 14px; border-radius: 6px; background: rgba(255, 246, 232, 0.08); border: 1px solid rgba(255, 246, 232, 0.22); color: #FFF6E8; font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.3; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; -webkit-appearance: none; appearance: none; box-shadow: none; outline: none; } .sd-playbook-cta__field select { background-image: linear-gradient(45deg, transparent 50%, rgba(246,200,147,0.8) 50%), linear-gradient(135deg, rgba(246,200,147,0.8) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; cursor: pointer; } .sd-playbook-cta__field input::placeholder { color: rgba(255, 246, 232, 0.42); } .sd-playbook-cta__field input:focus, .sd-playbook-cta__field select:focus { outline: none; border-color: #DB635D; background: rgba(255, 246, 232, 0.12); box-shadow: 0 0 0 3px rgba(219, 99, 93, 0.22); } .sd-playbook-cta__field select option { background: #11314a; color: #FFF6E8; } .sd-playbook-cta__submit { position: relative; width: 100%; padding: 15px 22px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #DB635D 0%, #DB635D 100%); color: #FFF6E8; font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 24px rgba(219, 99, 93, 0.25), inset 0 1px 0 rgba(255, 246, 232, 0.12); transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .sd-playbook-cta__submit:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(219, 99, 93, 0.38), inset 0 1px 0 rgba(255, 246, 232, 0.18); background: linear-gradient(180deg, #F2847D 0%, #DB635D 100%); } .sd-playbook-cta__submit .arrow { display: inline-block; transition: transform 180ms ease; } .sd-playbook-cta__submit:hover .arrow { transform: translateX(3px); } .sd-playbook-cta__fineprint { font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.55; color: rgba(255, 246, 232, 0.6); margin: 4px 0 0; } .sd-playbook-cta__trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 22px 0 0; font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 246, 232, 0.6); } .sd-playbook-cta__dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(246, 200, 147, 0.4); } @media (max-width: 899px) { .sd-playbook-cta { padding: 64px clamp(20px, 6vw, 40px); } .sd-playbook-cta__cover { transform: none; max-width: 240px; } .sd-playbook-cta__cover-wrap { order: -1; } .sd-playbook-cta__kelp { width: 140px; bottom: -30px; } .sd-playbook-cta__bubbles { width: 120px; } .sd-playbook-cta__topo { width: 200px; height: 140px; opacity: .14; } } @media (max-width: 480px) { .sd-playbook-cta__field input, .sd-playbook-cta__field select { padding: 12px 14px; font-size: 13px; min-height: 44px; } .sd-playbook-cta__field select { padding-right: 32px; } .sd-playbook-cta__submit { min-height: 44px; font-size: 15px; } } .sd-fg-faq-wrap { background: #FFF6E8; padding: clamp(56px, 7vw, 96px) clamp(20px, 5vw, 48px); color: #11314a; font-family: 'Inter', system-ui, sans-serif; border-top: 1px solid rgba(17, 49, 74, .08); } .sd-fg-faq { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 28% 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; } .sd-fg-faq__head { position: sticky; top: 32px; align-self: start; } .sd-fg-faq__eyebrow { display: inline-block; font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #DB635D; margin-bottom: 18px; } .sd-fg-faq__title { font-family: 'Bodoni Moda', 'Times New Roman', serif; font-style: italic; font-weight: 600; font-size: clamp(48px, 6vw, 80px); line-height: .92; color: #11314a; letter-spacing: -0.025em; margin: 0 0 28px; } .sd-fg-faq__deco { margin-top: 4px; color: #5492B6; opacity: .55; width: 110px; height: auto; } .sd-fg-faq__wave { margin-top: 28px; color: #5492B6; opacity: .4; width: 140px; height: auto; display: block; } .sd-fg-faq__list { display: flex; flex-direction: column; } .sd-fg-faq__item { border-top: 1px solid rgba(17, 49, 74, .18); } .sd-fg-faq__item:first-of-type { border-top: 0; } .sd-fg-faq__item:last-of-type { border-bottom: 1px solid rgba(17, 49, 74, .18); } .sd-fg-faq__item > summary { list-style: none; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 4px 22px 0; font-family: 'DM Sans', 'Inter', sans-serif; font-size: clamp(15px, 1.4vw, 17px); font-weight: 500; color: #11314a; line-height: 1.4; letter-spacing: -0.005em; transition: color .2s ease; } .sd-fg-faq__item > summary::-webkit-details-marker { display: none; } .sd-fg-faq__item > summary::marker { content: ""; } .sd-fg-faq__item > summary:hover { color: #DB635D; } .sd-fg-faq__q-text { flex: 1; padding-right: 12px; } .sd-fg-faq__icon { flex-shrink: 0; width: 22px; height: 22px; position: relative; color: #DB635D; transition: transform .3s cubic-bezier(.4,0,.2,1); } .sd-fg-faq__icon::before, .sd-fg-faq__icon::after { content: ""; position: absolute; background: currentColor; border-radius: 1px; transition: opacity .25s ease; } .sd-fg-faq__icon::before { top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; } .sd-fg-faq__icon::after { left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; } .sd-fg-faq__item[open] > summary > .sd-fg-faq__icon { transform: rotate(45deg); } .sd-fg-faq__answer { padding: 0 4px 26px 0; max-width: 60ch; } .sd-fg-faq__answer p { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.65; color: rgba(17, 49, 74, .78); } @media (max-width: 900px) { .sd-fg-faq { grid-template-columns: 1fr; gap: 28px; } .sd-fg-faq__head { position: static; } } @media (max-width: 720px) { .sd-fg-faq { grid-template-columns: 1fr; gap: 36px; } .sd-fg-faq__head { position: static; } .sd-fg-faq__title { font-size: clamp(64px, 18vw, 96px); margin-bottom: 12px; } .sd-fg-faq__deco { width: 88px; } .sd-fg-faq__wave { display: none; } .sd-fg-faq__item > summary { padding: 18px 0; font-size: 15px; gap: 16px; } .sd-fg-faq__icon { width: 18px; height: 18px; } } .sd-fg-author-wrap { background: #FFF6E8; padding: clamp(48px, 6vw, 88px) clamp(20px, 5vw, 48px) clamp(64px, 8vw, 112px); color: #11314a; font-family: 'Inter', system-ui, sans-serif; border-top: 1px solid rgba(17, 49, 74, .08); } .sd-fg-author-inner { max-width: 720px; margin: 0 auto; } .sd-fg-author-box { display: block; background: #FAF0DC; border: 1px solid rgba(17, 49, 74, .12); border-radius: 16px; padding: clamp(32px, 4vw, 44px); box-shadow: 0 10px 30px -20px rgba(13, 31, 46, .12); position: relative; } .sd-fg-author-box::before { content: ""; position: absolute; left: clamp(32px, 4vw, 44px); top: 0; width: 56px; height: 2px; background: #DB635D; border-radius: 2px; } .sd-fg-author-box__wave { position: absolute; top: 18px; right: 22px; color: #5492B6; opacity: .22; width: 64px; height: auto; pointer-events: none; } .sd-fg-author-grid { display: grid; grid-template-columns: 90px 1fr; gap: 28px; align-items: start; } .sd-fg-author-avatar { width: 90px; height: 90px; border-radius: 50%; display: block; overflow: hidden; background: linear-gradient(135deg, #235C81, #DB635D); object-fit: cover; object-position: center; box-shadow: 0 0 0 4px #FFF6E8, 0 8px 20px -10px rgba(13, 31, 46, .25); } .sd-fg-author-body { min-width: 0; } .sd-fg-author-kicker { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #235C81; font-weight: 600; margin: 0 0 10px; } .sd-fg-author-name { font-family: 'DM Sans', 'Inter', sans-serif; font-size: 22px; line-height: 1.2; letter-spacing: -.015em; color: #11314a; font-weight: 400; margin: 0 0 6px; } .sd-fg-author-name strong { font-weight: 700; color: #11314a; } .sd-fg-author-role { font-family: 'DM Sans', 'Inter', sans-serif; font-size: 13px; letter-spacing: .02em; color: #235C81; font-weight: 600; margin: 0 0 14px; display: inline-flex; align-items: center; gap: 8px; } .sd-fg-author-role-icon { color: #DB635D; width: 14px; height: 14px; flex: 0 0 auto; } .sd-fg-author-bio { font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.6; color: rgba(17, 49, 74, .78); margin: 0; max-width: 56ch; } @media (max-width: 900px) { .sd-fg-author-avatar { width: 80px; height: 80px; } } @media (max-width: 720px) { .sd-fg-author-box { padding: 28px; } .sd-fg-author-box::before { left: 28px; } .sd-fg-author-box__wave { width: 48px; top: 14px; right: 16px; } .sd-fg-author-grid { grid-template-columns: 1fr; gap: 20px; justify-items: center; text-align: center; } .sd-fg-author-avatar { width: 72px; height: 72px; } .sd-fg-author-name { font-size: 20px; } .sd-fg-author-bio { font-size: 14.5px; max-width: none; } .sd-fg-author-role { justify-content: center; } } .sd-final-cta { position: relative; background: radial-gradient(80% 60% at 50% 30%, rgba(84,146,182,.16) 0%, rgba(17,49,74,0) 65%), linear-gradient(180deg, var(--navy) 0%, var(--dark-blue) 100%); color: var(--cream); padding: clamp(140px, 14vw, 180px) 0 clamp(72px, 8vw, 120px); text-align: center; overflow: visible; isolation: isolate; } .sd-final-cta__wave { position: absolute; top: 0; left: 0; right: 0; height: clamp(70px, 10vw, 150px); z-index: 3; pointer-events: none; } .sd-final-cta__wave svg { display: block; width: 100%; height: 100%; color: var(--cream); transform: scaleY(-1); transform-origin: center; } .sd-final-cta__wave svg path { fill: currentColor; } .sd-final-cta__pulse-a { position: absolute; top: -60px; bottom: 0; left: 0; right: 0; z-index: 5; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(219,99,93,0.18), transparent 58%); pointer-events: none; animation: sd-final-coral-pulse 6s ease-in-out infinite; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #11314a 14%, #11314a 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #11314a 14%, #11314a 86%, transparent 100%); } .sd-final-cta__pulse-b { position: absolute; top: -60px; bottom: 0; left: 0; right: 0; z-index: 5; background: radial-gradient(ellipse 35% 35% at 30% 30%, rgba(219,99,93,0.20), transparent 58%), radial-gradient(ellipse 30% 30% at 75% 70%, rgba(246,200,147,0.10), transparent 58%); filter: blur(40px); pointer-events: none; animation: sd-final-coral-pulse 6s ease-in-out infinite reverse; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #11314a 14%, #11314a 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #11314a 14%, #11314a 86%, transparent 100%); } @keyframes sd-final-coral-pulse { 0%, 100% { opacity: 0.7; } 50%      { opacity: 1; } } .sd-final-cta__topo { position: absolute; pointer-events: none; color: var(--medium-blue); opacity: .18; z-index: 1; width: 240px; height: 160px; } .sd-final-cta__topo--tl { top: -10px; left: -28px; transform: rotate(-6deg); } .sd-final-cta__topo--br { bottom: -14px; right: -32px; transform: rotate(174deg); opacity: .14; } .sd-final-cta__coords { position: absolute; top: 28px; right: clamp(20px, 4vw, 56px); z-index: 2; font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 246, 232, .55); line-height: 1.55; text-align: right; pointer-events: none; } .sd-final-cta__diver { position: absolute; bottom: 24px; left: clamp(16px, 3vw, 40px); z-index: 1; width: 110px; height: 110px; color: var(--medium-blue); opacity: .22; pointer-events: none; } .sd-final-cta__inner { position: relative; z-index: 6; max-width: 760px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); } .sd-final-cta__compass { width: 56px; height: 56px; margin: 0 auto 22px; color: var(--medium-blue); opacity: .82; display: block; } .sd-final-cta__eyebrow { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-sand); margin: 0 0 18px; } .sd-final-cta__title { font-family: 'DM Sans', 'Inter', sans-serif; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.12; color: var(--cream); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 18px; } .sd-final-cta__title em { font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; font-weight: 500; color: var(--salmon); } .sd-final-cta__subtitle { font-family: 'Inter', system-ui, sans-serif; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55; color: rgba(255, 246, 232, .78); max-width: 560px; margin: 0 auto 32px; } .sd-final-cta__btn { display: inline-flex; align-items: center; gap: 10px; padding: 18px 36px; background: var(--coral); color: var(--cream); font-family: 'DM Sans', 'Inter', sans-serif; font-weight: 600; font-size: 16px; border-radius: 999px; text-decoration: none; letter-spacing: 0.005em; box-shadow: 0 10px 30px -6px rgba(219,99,93,0.55); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .sd-final-cta__btn:hover { transform: translateY(-2px); background: var(--salmon); box-shadow: 0 14px 40px -8px rgba(219,99,93,0.7); } .sd-final-cta__btn-arrow { display: inline-block; transform: translateY(-1px); } .sd-final-cta__disclaimers { margin: 22px 0 0; font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 246, 232, .55); display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; } .sd-final-cta__disclaimers span { white-space: nowrap; } .sd-final-cta__dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--gold-sand); opacity: .65; } @media (max-width: 720px) { .sd-final-cta { padding: 64px 0 56px; } .sd-final-cta__inner { padding: 0 22px; } .sd-final-cta__title { font-size: 28px; } .sd-final-cta__subtitle { font-size: 14.5px; margin-bottom: 26px; } .sd-final-cta__compass { width: 44px; height: 44px; margin-bottom: 16px; } .sd-final-cta__btn { width: 100%; justify-content: center; padding: 16px 24px; } .sd-final-cta__coords { display: none; } .sd-final-cta__topo { display: none; } .sd-final-cta__diver { width: 64px; height: 64px; opacity: .16; bottom: 12px; left: 10px; } .sd-final-cta__disclaimers { font-size: 9.5px; gap: 8px; } }