/* =========================================================
Pragya — composition layer on top of colors_and_type.css
========================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--ct-paper);
color: var(--ct-fg-1);
overflow-x: hidden;
}
/* Selection */
::selection { background: var(--ct-blue); color: #fff; }
/* Layout container */
.pg-wrap {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
}
@media (max-width: 720px) { .pg-wrap { padding: 0 20px; } }
/* Section frame */
.pg-section {
position: relative;
padding: clamp(80px, 12vw, 160px) 0;
isolation: isolate;
}
.pg-section--tight { padding: clamp(64px, 8vw, 112px) 0; }
/* Section folio (editorial chapter mark) */
.pg-folio {
position: absolute;
top: 32px;
right: 32px;
font-family: var(--ct-font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--ct-fg-3);
text-transform: uppercase;
z-index: 2;
pointer-events: none;
}
.pg-section.is-dark .pg-folio { color: var(--ct-on-navy-3); }
/* Eyebrow */
.pg-eye {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11.5px;
font-weight: var(--ct-w-medium);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ct-blue);
}
.pg-eye::before {
content: "";
width: 22px; height: 1px;
background: currentColor;
display: inline-block;
}
.is-dark .pg-eye { color: var(--ct-sky); }
/* Headlines */
.pg-h1 {
font-family: var(--ct-font-sans);
font-weight: var(--ct-w-extralight);
font-size: clamp(44px, 7.2vw, 116px);
line-height: 1.02;
letter-spacing: -0.025em;
margin: 0;
text-wrap: balance;
}
.pg-h2 {
font-family: var(--ct-font-sans);
font-weight: var(--ct-w-extralight);
font-size: clamp(34px, 4.6vw, 64px);
line-height: 1.05;
letter-spacing: -0.022em;
margin: 0;
text-wrap: balance;
}
.pg-h3 {
font-weight: var(--ct-w-light);
font-size: clamp(22px, 2.2vw, 30px);
line-height: 1.18;
letter-spacing: -0.014em;
margin: 0;
}
.pg-deck {
font-weight: var(--ct-w-light);
font-size: clamp(18px, 1.5vw, 22px);
line-height: 1.5;
color: var(--ct-fg-2);
letter-spacing: -0.005em;
max-width: 60ch;
text-wrap: pretty;
}
.is-dark .pg-deck { color: var(--ct-on-navy-2); }
.pg-serif {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
font-size: 1.03em;
color: var(--ct-blue);
}
.is-dark .pg-serif { color: var(--ct-sky); }
.pg-serif--ink { color: inherit; }
/* Hairline divider */
.pg-rule {
height: 1px;
background: var(--ct-line);
border: 0;
margin: 32px 0;
}
.pg-rule--gold { background: var(--ct-gold); height: 1px; }
.is-dark .pg-rule { background: var(--ct-on-navy-line); }
/* Buttons */
.pg-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 24px;
border-radius: var(--ct-r-md);
font-family: inherit;
font-size: 15px;
font-weight: var(--ct-w-medium);
letter-spacing: -0.005em;
border: 1px solid transparent;
cursor: pointer;
transition: transform 200ms var(--ct-ease),
background 200ms var(--ct-ease),
color 200ms var(--ct-ease),
border-color 200ms var(--ct-ease),
box-shadow 200ms var(--ct-ease);
text-decoration: none;
white-space: nowrap;
}
.pg-btn--primary {
background: var(--ct-blue);
color: #fff;
box-shadow: var(--ct-shadow-brand);
}
.pg-btn--primary:hover {
background: color-mix(in oklab, var(--ct-blue) 92%, white);
transform: translateY(-1px);
}
.pg-btn--ghost {
background: transparent;
color: var(--ct-fg-1);
border-color: var(--ct-line);
}
.pg-btn--ghost:hover {
background: var(--ct-paper-2);
border-color: var(--ct-border-strong);
}
.is-dark .pg-btn--ghost {
color: #fff;
border-color: var(--ct-on-navy-line);
}
.is-dark .pg-btn--ghost:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.25);
}
.pg-btn .arrow {
transition: transform 200ms var(--ct-ease);
}
.pg-btn:hover .arrow { transform: translateX(3px); }
/* Link with arrow */
.pg-arrow-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ct-blue);
font-weight: var(--ct-w-medium);
font-size: 14.5px;
border-bottom: 0;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
background: transparent;
border: 0;
padding: 0;
font-family: inherit;
transition: gap 200ms var(--ct-ease), color 200ms var(--ct-ease);
}
.pg-arrow-link:hover { gap: 12px; color: var(--ct-navy); }
.pg-arrow-link span { display: inline-block; }
.is-dark .pg-arrow-link { color: var(--ct-sky); }
.is-dark .pg-arrow-link:hover { color: #fff; }
/* Reveal-on-scroll */
.r {
opacity: 0;
transform: translateY(24px);
transition: opacity 800ms var(--ct-ease-out),
transform 800ms var(--ct-ease-out);
transition-delay: var(--r-delay, 0ms);
}
.r.r-in {
opacity: 1;
transform: translateY(0);
}
.r-up { transform: translateY(40px); }
.r-up.r-in { transform: translateY(0); }
.r-left { transform: translateX(-30px); }
.r-left.r-in { transform: translateX(0); }
.r-right { transform: translateX(30px); }
.r-right.r-in { transform: translateX(0); }
.r-scale { transform: scale(0.97); }
.r-scale.r-in { transform: scale(1); }
/* Cinematic char reveal */
.r-chars > span {
display: inline-block;
opacity: 0;
transform: translateY(0.6em);
transition: opacity 600ms var(--ct-ease-out),
transform 700ms var(--ct-ease-out);
}
.r-chars.r-in > span {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.r, .r-chars > span {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ========== NAV ========== */
.pg-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 32px;
background: rgba(1, 14, 53, 0);
backdrop-filter: blur(0);
-webkit-backdrop-filter: blur(0);
transition: background 320ms var(--ct-ease),
backdrop-filter 320ms var(--ct-ease),
padding 320ms var(--ct-ease),
border-color 320ms var(--ct-ease);
border-bottom: 1px solid transparent;
}
.pg-nav.is-scrolled {
background: rgba(1, 14, 53, 0.72);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
padding: 12px 32px;
border-bottom-color: rgba(255,255,255,0.06);
}
.pg-nav__brand {
display: inline-flex;
align-items: center;
gap: 12px;
color: #fff;
text-decoration: none;
border-bottom: 0;
line-height: 1;
}
.pg-nav__brand img { height: 26px; display: block; }
.pg-nav__brand-sep {
color: var(--ct-on-navy-3);
font-size: 20px;
font-weight: 200;
line-height: 1;
opacity: 0.5;
transform: translateY(-1px);
}
.pg-nav__brand-pragya {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
font-size: 22px;
line-height: 1;
color: var(--ct-sky);
letter-spacing: -0.005em;
}
.pg-nav__links {
display: flex;
align-items: center;
gap: 32px;
}
.pg-nav__links a {
color: rgba(255,255,255,0.8);
font-size: 13.5px;
font-weight: var(--ct-w-regular);
letter-spacing: -0.003em;
text-decoration: none;
border-bottom: 0;
transition: color 200ms var(--ct-ease);
}
.pg-nav__links a:hover { color: #fff; }
.pg-nav__cta {
display: inline-flex;
align-items: center;
white-space: nowrap;
text-decoration: none;
padding: 10px 18px;
border-radius: var(--ct-r-md);
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
color: #fff;
font-size: 13.5px;
font-weight: var(--ct-w-medium);
cursor: pointer;
transition: background 200ms var(--ct-ease), border-color 200ms var(--ct-ease);
}
.pg-nav__cta:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); }
@media (max-width: 860px) {
.pg-nav__links { display: none; }
}
/* Top progress bar */
.pg-progress {
position: fixed;
top: 0; left: 0;
height: 2px;
width: 0%;
background: linear-gradient(90deg, var(--ct-sky), var(--ct-blue));
z-index: 60;
transition: width 120ms linear;
}
/* ========== HERO ========== */
.pg-hero {
position: relative;
min-height: 100vh;
background: var(--ct-navy);
color: #fff;
overflow: hidden;
display: flex;
flex-direction: column;
transition: background 480ms var(--ct-ease), color 480ms var(--ct-ease);
}
/* PragyaStatusBar — thin operational status line at the very top */
.pg-hero__status {
position: absolute;
top: 78px; left: 0; right: 0;
z-index: 4;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 32px;
background: rgba(1, 14, 53, 0.06);
border-bottom: 1px solid rgba(1, 14, 53, 0.10);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
font-family: var(--ct-font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(1, 14, 53, 0.7);
pointer-events: none;
}
.pg-hero__status--dark {
background: rgba(255,255,255,0.04);
border-bottom-color: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.7);
}
.pg-hero__status-led {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--ct-emerald);
box-shadow: 0 0 0 3px rgba(0,128,90,0.22);
animation: pulse 2s ease-in-out infinite;
}
.pg-hero__status-tag {
color: var(--ct-emerald);
font-weight: var(--ct-w-medium);
letter-spacing: 0.22em;
}
.pg-hero__status-sep { opacity: 0.4; }
.pg-hero__status-name {
font-weight: var(--ct-w-semibold);
color: var(--ct-navy);
letter-spacing: 0.22em;
}
.pg-hero__status--dark .pg-hero__status-name { color: #fff; }
.pg-hero__status-mode {
color: var(--ct-blue);
font-weight: var(--ct-w-medium);
}
.pg-hero__status--dark .pg-hero__status-mode { color: var(--ct-sky); }
.pg-hero__status-spacer { flex: 1; }
.pg-hero__status-readout {
display: inline-flex;
align-items: center;
gap: 8px;
}
.pg-hero__status-readout span { opacity: 0.55; }
.pg-hero__status-readout b {
font-weight: var(--ct-w-medium);
color: var(--ct-navy);
font-variant-numeric: tabular-nums;
letter-spacing: 0.12em;
}
.pg-hero__status--dark .pg-hero__status-readout b { color: #fff; }
@media (max-width: 720px) {
.pg-hero__status { padding: 7px 18px; font-size: 9.5px; gap: 8px; }
.pg-hero__status-readout { display: none; }
}
@media (max-width: 480px) {
.pg-hero__status-mode { display: none; }
}
/* Existing dark/light hero rules below ... */
.pg-hero--light {
background: var(--ct-grad-sea-earth);
color: var(--ct-navy);
}
.pg-hero--light .pg-hero__lede { color: rgba(1,14,53,0.72); }
.pg-hero--light .pg-hero__lede em { color: var(--ct-blue); }
.pg-hero--light h1 { color: var(--ct-navy); }
.pg-hero--light .pg-hero__eyebrow { color: var(--ct-blue); }
.pg-hero--light .pg-hero__eyebrow .dot { background: var(--ct-blue); box-shadow: 0 0 0 4px rgba(27,63,224,0.18); }
.pg-hero--light .pg-hero__meta { border-top-color: rgba(1,14,53,0.10); }
.pg-hero--light .pg-hero__meta-num { color: var(--ct-navy); }
.pg-hero--light .pg-hero__meta-num sup { color: var(--ct-blue); }
.pg-hero--light .pg-hero__meta-label { color: rgba(1,14,53,0.5); }
.pg-hero--light .pg-hero__rotator-word {
background-image: linear-gradient(180deg, #1B3FE0 0%, #1F5CFF 60%, #72C8FE 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
.pg-hero--light .pg-hero__scroll { color: rgba(1,14,53,0.4); }
.pg-hero--light .pg-hero__scroll-line { background: linear-gradient(to bottom, transparent, var(--ct-blue)); }
.pg-hero--light .pg-hero__badge {
background: rgba(212,175,122,0.14);
border-color: rgba(212,175,122,0.5);
color: rgba(1,14,53,0.78);
}
.pg-hero--light .pg-hero__badge:hover { background: rgba(212,175,122,0.22); color: var(--ct-navy); }
.pg-hero--light .pg-btn--ghost { color: var(--ct-navy); border-color: rgba(1,14,53,0.18); }
.pg-hero--light .pg-btn--ghost:hover { background: rgba(1,14,53,0.04); border-color: rgba(1,14,53,0.3); }
/* aurora wash + film grain */
.pg-hero__aurora {
position: absolute; inset: -20%;
background:
radial-gradient(50% 40% at 18% 28%, rgba(114,200,254,0.28), transparent 70%),
radial-gradient(40% 50% at 82% 12%, rgba(27,63,224,0.40), transparent 70%),
radial-gradient(60% 40% at 65% 86%, rgba(212,175,122,0.10), transparent 70%);
filter: blur(40px);
pointer-events: none;
z-index: 0;
animation: heroAurora 24s ease-in-out infinite alternate;
}
.pg-hero--light .pg-hero__aurora {
background:
radial-gradient(50% 40% at 18% 28%, rgba(114,200,254,0.55), transparent 70%),
radial-gradient(40% 50% at 82% 12%, rgba(27,63,224,0.18), transparent 70%),
radial-gradient(60% 40% at 65% 86%, rgba(212,175,122,0.45), transparent 70%);
}
@keyframes heroAurora {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(2%, -2%) scale(1.05); }
}
.pg-hero__grain {
position: absolute; inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.35;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0nMCAwIDAgMCAxICAwIDAgMCAwIDEgIDAgMCAwIDAgMSAgMCAwIDAgMC4zNSAwJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUyNScgaGVpZ2h0PScxMDAlMjUnIGZpbHRlcj0ndXJsKCUyM24pJy8+PC9zdmc+");
}
.pg-hero--light .pg-hero__grain { mix-blend-mode: multiply; opacity: 0.18; }
/* subtle horizon line — sea meets earth */
.pg-hero__horizon {
position: absolute;
left: 0; right: 0; bottom: 14vh;
height: 1px;
background: linear-gradient(90deg, transparent 5%, rgba(212,175,122,0.5) 45%, rgba(212,175,122,0.5) 55%, transparent 95%);
pointer-events: none;
z-index: 1;
}
/* decision orbit visualization (right side) — bold 2030 composition */
.pg-hero__orbit-wrap {
position: absolute;
right: -6%;
top: 50%;
transform: translateY(-50%);
width: min(620px, 50vw);
aspect-ratio: 1 / 1;
z-index: 1;
pointer-events: none;
/* Single-direction left fade — does NOT clip the lens labels on the right */
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 22%, black 100%);
mask-image: linear-gradient(90deg, transparent 0%, black 22%, black 100%);
filter: drop-shadow(0 0 40px rgba(27,63,224,0.22));
}
.pg-hero__orbit {
width: 100%;
height: 100%;
display: block;
opacity: 1;
}
.pg-hero--light .pg-hero__orbit-wrap {
filter: drop-shadow(0 0 40px rgba(27,63,224,0.14));
}
@media (max-width: 1180px) {
.pg-hero__orbit-wrap { right: -12%; width: 56vw; opacity: 0.9; }
}
@media (max-width: 960px) {
.pg-hero__orbit-wrap {
position: relative;
right: auto; top: auto; transform: none;
width: min(520px, 86vw);
margin: 24px auto 0;
opacity: 1;
-webkit-mask-image: none; mask-image: none;
order: 2;
}
.pg-hero__inner { order: 1; }
.pg-hero { min-height: auto; padding-bottom: 32px; }
}
@media (max-width: 520px) {
.pg-hero__orbit-wrap { width: 96vw; margin-top: 8px; }
}
.pg-hero__flow, .pg-hero__compass-wrap { display: none; }
/* hide legacy hero art that components might still ship */
.pg-hero__art { display: none !important; }
.pg-hero__atmos { display: none !important; }
.pg-hero__grid { display: none !important; }
.pg-hero__atmos {
position: absolute;
inset: 0;
pointer-events: none;
}
.pg-hero__atmos::before {
/* Sea wash from above-left */
content: "";
position: absolute;
inset: -20% -20% 20% -20%;
background:
radial-gradient(60% 50% at 20% 0%, rgba(114,200,254,0.32), transparent 60%),
radial-gradient(50% 50% at 90% 30%, rgba(27,63,224,0.32), transparent 60%);
filter: blur(40px);
}
.pg-hero__atmos::after {
/* Bottom horizon hint of cream */
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 30%;
background: linear-gradient(to bottom, transparent, rgba(242,235,220,0.05) 60%, rgba(242,235,220,0.12) 100%);
}
.pg-hero__grid {
position: absolute; inset: 0;
background-image:
linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 96px 96px;
mask-image: radial-gradient(60% 70% at 50% 50%, black, transparent);
pointer-events: none;
}
.pg-hero__inner {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 144px;
padding-bottom: 80px;
position: relative;
z-index: 2;
}
.pg-hero__content {
max-width: 760px;
width: 100%;
}
@media (max-width: 960px) {
.pg-hero__inner { padding-top: 104px; padding-bottom: 56px; }
.pg-hero__content { max-width: 100%; }
}
/* ATTESTATION — tight, gold, on-brand, NOT washed out */
.pg-hero__attest {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 14px 6px 6px;
border-radius: var(--ct-r-pill);
background: linear-gradient(135deg, #D4AF7A 0%, #B8935A 100%);
border: 1px solid #B8935A;
color: #1B1409;
font-family: inherit;
font-size: 12.5px;
letter-spacing: -0.003em;
cursor: pointer;
margin-bottom: 28px;
text-decoration: none;
border-bottom: 1px solid #B8935A;
box-shadow: 0 6px 18px rgba(212,175,122,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
transition: transform 220ms var(--ct-ease),
box-shadow 220ms var(--ct-ease),
filter 220ms var(--ct-ease);
max-width: 100%;
}
.pg-hero__attest:hover {
transform: translateY(-1px);
filter: brightness(1.05);
box-shadow: 0 10px 24px rgba(212,175,122,0.45), inset 0 1px 0 rgba(255,255,255,0.4);
}
.pg-hero__attest-mark {
width: 26px; height: 26px;
flex-shrink: 0;
border-radius: 50%;
background: #1B1409;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pg-hero__attest-body {
display: inline-flex;
align-items: baseline;
gap: 8px;
white-space: nowrap;
}
.pg-hero__attest-flag {
font-family: var(--ct-font-mono);
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: var(--ct-w-semibold);
color: #1B1409;
padding: 2px 8px;
border-radius: var(--ct-r-pill);
background: rgba(27,20,9,0.12);
}
.pg-hero__attest-line {
font-weight: var(--ct-w-medium);
font-size: 13px;
color: #1B1409;
letter-spacing: -0.002em;
}
.pg-hero__attest-claude {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 500;
color: #1B1409;
letter-spacing: -0.005em;
font-size: 1.08em;
padding-left: 2px;
}
.pg-hero__attest-arrow {
color: #1B1409;
font-size: 14px;
font-weight: 600;
margin-left: 2px;
transition: transform 200ms var(--ct-ease);
flex-shrink: 0;
}
.pg-hero__attest:hover .pg-hero__attest-arrow { transform: translateX(4px); }
/* Dark hero: same gold pill works, just lift a bit */
.pg-hero--dark .pg-hero__attest {
box-shadow: 0 8px 22px rgba(212,175,122,0.4), inset 0 1px 0 rgba(255,255,255,0.45);
}
@media (max-width: 520px) {
.pg-hero__attest { gap: 8px; padding: 5px 12px 5px 5px; }
.pg-hero__attest-body { gap: 6px; }
.pg-hero__attest-flag { font-size: 8.5px; letter-spacing: 0.18em; padding: 2px 6px; }
.pg-hero__attest-line { font-size: 12px; }
.pg-hero__attest-mark { width: 24px; height: 24px; }
}
/* EYEBROW — single consolidated line */
.pg-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11.5px;
font-weight: var(--ct-w-medium);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ct-sky);
margin-bottom: 28px;
}
.pg-hero__eyebrow .sep { opacity: 0.5; }
.pg-hero__eyebrow-glyph {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
font-size: 18px;
letter-spacing: -0.005em;
text-transform: none;
line-height: 1;
padding-right: 8px;
margin-right: 4px;
border-right: 1px solid rgba(255,255,255,0.18);
color: var(--ct-sky);
}
.pg-hero--light .pg-hero__eyebrow { color: var(--ct-blue); }
.pg-hero--light .pg-hero__eyebrow-glyph {
color: var(--ct-blue);
border-right-color: rgba(1,14,53,0.18);
}
.pg-hero__eyebrow-text {
display: inline-flex;
align-items: center;
gap: 10px;
}
@media (max-width: 520px) {
.pg-hero__eyebrow { gap: 10px; font-size: 10.5px; letter-spacing: 0.16em; }
.pg-hero__eyebrow-glyph { font-size: 16px; padding-right: 6px; }
}
.pg-hero__eyebrow .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--ct-sky);
box-shadow: 0 0 0 4px rgba(114,200,254,0.18);
animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(114,200,254,0.18); }
50% { box-shadow: 0 0 0 8px rgba(114,200,254,0.05); }
}
.pg-hero h1 {
font-family: var(--ct-font-sans);
font-weight: var(--ct-w-thin);
font-size: clamp(34px, 5.2vw, 76px);
line-height: 1.04;
letter-spacing: -0.026em;
margin: 0 0 28px;
color: #fff;
max-width: 18ch;
text-wrap: balance;
}
.pg-hero--light h1 { color: var(--ct-navy); }
@media (max-width: 520px) {
.pg-hero h1 { font-size: clamp(32px, 8.4vw, 44px); max-width: none; }
}
.pg-hero h1 .pg-hero__rotator {
display: inline-block;
position: relative;
min-width: 6ch;
vertical-align: baseline;
}
.pg-hero h1 .pg-hero__rotator-word {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
color: var(--ct-sky);
display: inline-block;
background: linear-gradient(180deg, #B9E0FE 0%, #72C8FE 60%, #1F5CFF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
transition: opacity 380ms var(--ct-ease), transform 480ms var(--ct-ease);
will-change: transform, opacity;
}
.pg-hero h1 .pg-hero__rotator-word.is-out {
opacity: 0;
transform: translateY(-0.25em);
}
.pg-hero h1 .pg-hero__rotator-word.is-in {
opacity: 1;
transform: translateY(0);
}
.pg-hero h1 .pg-hero__rotator-word.is-pre {
opacity: 0;
transform: translateY(0.4em);
}
.pg-hero__lede {
font-weight: var(--ct-w-light);
font-size: clamp(17px, 1.5vw, 21px);
line-height: 1.55;
color: var(--ct-on-navy-2);
max-width: 56ch;
margin: 0 0 36px;
text-wrap: pretty;
}
.pg-hero__lede em {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
color: var(--ct-sky);
font-size: 1.04em;
}
.pg-hero--light .pg-hero__lede { color: rgba(1,14,53,0.72); }
.pg-hero--light .pg-hero__lede em { color: var(--ct-blue); }
/* PROFESSOR-STYLE MECHANISM — numbered, explicit, builds understanding */
.pg-hero__primer {
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 12px;
}
.pg-hero__primer-tag {
font-family: var(--ct-font-mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ct-blue);
position: relative;
padding-left: 26px;
}
.pg-hero__primer-tag::before {
content: "";
position: absolute;
left: 0; top: 50%;
width: 18px; height: 1px;
background: var(--ct-blue);
transform: translateY(-50%);
}
.pg-hero--dark .pg-hero__primer-tag { color: var(--ct-sky); }
.pg-hero--dark .pg-hero__primer-tag::before { background: var(--ct-sky); }
.pg-hero__mechanism {
list-style: none;
padding: 0;
margin: 0 0 40px;
display: grid;
gap: 4px;
border-left: 2px solid rgba(1,14,53,0.12);
padding-left: 22px;
}
.pg-hero--dark .pg-hero__mechanism { border-left-color: rgba(255,255,255,0.18); }
.pg-hero__mechanism li {
display: grid;
grid-template-columns: 36px 1fr;
align-items: baseline;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid rgba(1,14,53,0.08);
}
.pg-hero__mechanism li:last-child { border-bottom: 0; }
.pg-hero--dark .pg-hero__mechanism li { border-bottom-color: rgba(255,255,255,0.08); }
.pg-hero__mech-num {
font-family: var(--ct-font-mono);
font-size: 11px;
font-weight: var(--ct-w-medium);
letter-spacing: 0.18em;
color: var(--ct-gold);
}
.pg-hero__mech-text {
font-family: var(--ct-font-sans);
font-weight: var(--ct-w-light);
font-size: clamp(18px, 1.7vw, 24px);
line-height: 1.32;
letter-spacing: -0.012em;
color: var(--ct-navy);
text-wrap: pretty;
}
.pg-hero--dark .pg-hero__mech-text { color: #fff; }
.pg-hero__mech-em {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
color: var(--ct-blue);
}
.pg-hero--dark .pg-hero__mech-em { color: var(--ct-sky); }
.pg-hero__mech-em .pg-hero__rotator-word {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
display: inline-block;
}
@media (max-width: 520px) {
.pg-hero__mechanism { padding-left: 16px; }
.pg-hero__mechanism li { grid-template-columns: 30px 1fr; gap: 12px; padding: 10px 0; }
.pg-hero__mech-text { font-size: 16.5px; }
}
/* CAPABILITY CAPSULES — tighter, numbered, opens modal */
.pg-hero__queries {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 40px;
}
.pg-hero__queries-label {
font-family: var(--ct-font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(1,14,53,0.55);
flex-basis: 100%;
margin-bottom: 4px;
}
.pg-hero--dark .pg-hero__queries-label { color: var(--ct-on-navy-3); }
.pg-hero__query {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 14px 7px 8px;
appearance: none;
font-family: var(--ct-font-sans);
font-weight: var(--ct-w-medium);
font-size: 13.5px;
color: var(--ct-navy);
background: rgba(255,255,255,0.65);
border: 1px solid rgba(1,14,53,0.16);
border-radius: var(--ct-r-pill);
cursor: pointer;
letter-spacing: -0.005em;
line-height: 1.2;
backdrop-filter: blur(4px);
transition: background 200ms var(--ct-ease),
border-color 200ms var(--ct-ease),
transform 200ms var(--ct-ease),
color 200ms var(--ct-ease),
box-shadow 200ms var(--ct-ease);
}
.pg-hero__query-num {
font-family: var(--ct-font-mono);
font-weight: var(--ct-w-regular);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--ct-blue);
background: rgba(27,63,224,0.10);
border-radius: var(--ct-r-pill);
padding: 3px 8px;
flex-shrink: 0;
transition: background 200ms var(--ct-ease), color 200ms var(--ct-ease);
}
.pg-hero__query-arrow {
font-size: 12px;
color: rgba(1,14,53,0.4);
margin-left: 2px;
transition: transform 200ms var(--ct-ease), color 200ms var(--ct-ease);
}
.pg-hero__query:hover {
background: #fff;
border-color: var(--ct-navy);
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(1,14,53,0.10);
}
.pg-hero__query:hover .pg-hero__query-num {
background: var(--ct-navy);
color: #fff;
}
.pg-hero__query:hover .pg-hero__query-arrow {
color: var(--ct-navy);
transform: translateX(3px);
}
.pg-hero__query:focus-visible {
outline: 2px solid var(--ct-blue);
outline-offset: 2px;
}
.pg-hero--dark .pg-hero__query {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.18);
color: #fff;
}
.pg-hero--dark .pg-hero__query-num {
background: rgba(114,200,254,0.18);
color: var(--ct-sky);
}
.pg-hero--dark .pg-hero__query-arrow { color: rgba(255,255,255,0.4); }
.pg-hero--dark .pg-hero__query:hover {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.5);
box-shadow: 0 8px 18px rgba(0,0,0,0.3);
}
.pg-hero--dark .pg-hero__query:hover .pg-hero__query-num { background: #fff; color: var(--ct-navy); }
.pg-hero--dark .pg-hero__query:hover .pg-hero__query-arrow { color: #fff; }
@media (max-width: 520px) {
.pg-hero__query { font-size: 12.5px; padding: 6px 12px 6px 6px; gap: 8px; }
.pg-hero__query-num { font-size: 9.5px; padding: 2px 6px; }
}
/* Hide legacy mark from older variant */
.pg-hero__query-mark { display: none; }
/* Legacy value cards & strips kept hidden */
.pg-hero__valuecards { display: none !important; }
.pg-hero__values { display: none; }
.pg-hero__meta { display: none !important; }
.pg-hero__scroll { display: none !important; }
.pg-hero__horizon { display: none; }
.pg-hero__ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-bottom: 64px;
}
/* Claude-attestation button — gold rim, dual-tone */
.pg-btn--claude {
background: rgba(212, 175, 122, 0.10);
color: #fff;
border: 1px solid rgba(212, 175, 122, 0.45);
}
.pg-btn--claude:hover {
background: rgba(212, 175, 122, 0.20);
border-color: rgba(212, 175, 122, 0.7);
transform: translateY(-1px);
}
.pg-btn--claude .arrow { color: var(--ct-gold); }
.pg-hero--light .pg-btn--claude {
background: rgba(212, 175, 122, 0.18);
color: var(--ct-navy);
border-color: rgba(212, 175, 122, 0.55);
}
.pg-hero--light .pg-btn--claude:hover {
background: rgba(212, 175, 122, 0.28);
border-color: rgba(212, 175, 122, 0.75);
}
@media (max-width: 520px) {
.pg-hero__ctas { gap: 10px; margin-bottom: 48px; }
.pg-hero__ctas .pg-btn { width: 100%; justify-content: center; }
}
.pg-hero__meta {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(16px, 2.4vw, 40px);
padding-top: 32px;
border-top: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 720px) {
.pg-hero__meta { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; padding-top: 28px; }
}
.pg-hero__meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.pg-hero__meta-num {
font-family: var(--ct-font-sans);
font-weight: var(--ct-w-extralight);
font-size: clamp(28px, 3vw, 40px);
color: #fff;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.pg-hero__meta-num sup {
font-family: var(--ct-font-serif);
font-style: italic;
font-size: 0.5em;
color: var(--ct-sky);
margin-left: 2px;
top: -0.6em;
vertical-align: super;
position: relative;
}
.pg-hero__meta-label {
font-size: 11.5px;
font-weight: var(--ct-w-regular);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ct-on-navy-3);
}
.pg-hero__scroll {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: var(--ct-on-navy-3);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
z-index: 3;
}
.pg-hero__scroll-line {
width: 1px;
height: 32px;
background: linear-gradient(to bottom, transparent, var(--ct-sky));
animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
0% { transform: scaleY(0); transform-origin: top; }
50% { transform: scaleY(1); transform-origin: top; }
51% { transform-origin: bottom; }
100% { transform: scaleY(0); transform-origin: bottom; }
}
/* Decorative architecture visual right side */
.pg-hero__art {
position: absolute;
right: -8%;
top: 50%;
transform: translateY(-50%);
width: min(720px, 56vw);
aspect-ratio: 1 / 1;
pointer-events: none;
opacity: 0.85;
z-index: 1;
}
@media (max-width: 1100px) {
.pg-hero__art { opacity: 0.35; right: -20%; }
}
/* ========== WHY ========== */
.pg-why {
background: var(--ct-paper);
color: var(--ct-fg-1);
}
.pg-why__head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: end;
margin-bottom: 64px;
}
@media (max-width: 900px) {
.pg-why__head { grid-template-columns: 1fr; gap: 24px; }
}
.pg-why__timeline {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
margin: 64px 0;
align-items: stretch;
}
@media (max-width: 900px) {
.pg-why__timeline { grid-template-columns: 1fr; gap: 16px; }
}
.pg-why__timeline::before {
content: "";
position: absolute;
top: 24px;
left: 0; right: 0;
height: 1px;
background: var(--ct-line);
z-index: 0;
}
@media (max-width: 900px) { .pg-why__timeline::before { display: none; } }
.pg-tl-card {
position: relative;
padding-top: 56px;
z-index: 1;
}
.pg-tl-card__year {
font-family: var(--ct-font-sans);
font-weight: var(--ct-w-thin);
font-size: clamp(40px, 4.4vw, 64px);
color: var(--ct-navy);
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: 12px;
font-variant-numeric: tabular-nums;
}
.pg-tl-card__dot {
position: absolute;
top: 22px;
left: 0;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--ct-blue);
box-shadow: 0 0 0 4px rgba(27,63,224,0.12);
}
.pg-tl-card--now .pg-tl-card__dot {
background: var(--ct-gold);
box-shadow: 0 0 0 4px rgba(212,175,122,0.18);
}
.pg-tl-card--now .pg-tl-card__year { color: var(--ct-blue); }
.pg-tl-card__name {
font-weight: var(--ct-w-regular);
font-size: 16px;
color: var(--ct-fg-1);
margin-bottom: 6px;
letter-spacing: -0.005em;
}
.pg-tl-card__desc {
font-size: 14px;
color: var(--ct-fg-3);
line-height: 1.5;
max-width: 26ch;
}
.pg-why__closing {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: start;
margin-top: 80px;
padding-top: 48px;
border-top: 1px solid var(--ct-line);
}
@media (max-width: 900px) {
.pg-why__closing { grid-template-columns: 1fr; gap: 24px; }
}
.pg-why__closing-h {
font-weight: var(--ct-w-light);
font-size: clamp(24px, 2.6vw, 36px);
line-height: 1.18;
letter-spacing: -0.015em;
}
.pg-why__failures {
display: grid;
gap: 8px;
}
.pg-why__failure {
display: grid;
grid-template-columns: 28px 1fr;
gap: 14px;
align-items: baseline;
padding: 14px 0;
border-bottom: 1px solid var(--ct-line-2);
}
.pg-why__failure-num {
font-family: var(--ct-font-mono);
font-size: 11px;
color: var(--ct-fg-3);
letter-spacing: 0.12em;
}
.pg-why__failure-text {
font-size: 16px;
color: var(--ct-fg-1);
font-weight: var(--ct-w-regular);
}
/* ========== PRINCIPLE (pull-quote scene) ========== */
.pg-principle {
background: var(--ct-navy);
color: #fff;
padding: clamp(120px, 16vw, 200px) 0;
position: relative;
overflow: hidden;
}
.pg-principle.is-dark {}
.pg-principle__bg {
position: absolute;
inset: 0;
background:
radial-gradient(60% 60% at 80% 20%, rgba(27,63,224,0.35), transparent 60%),
radial-gradient(50% 60% at 10% 90%, rgba(114,200,254,0.18), transparent 60%);
pointer-events: none;
}
.pg-principle__grid {
position: absolute; inset: 0;
background-image:
linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px);
background-size: 8.33% 100%;
mask-image: radial-gradient(70% 80% at 50% 50%, black, transparent);
pointer-events: none;
}
.pg-principle__inner {
position: relative;
z-index: 2;
max-width: 1100px;
}
.pg-principle__quote {
font-family: var(--ct-font-sans);
font-weight: var(--ct-w-thin);
font-size: clamp(36px, 6vw, 96px);
line-height: 1.04;
letter-spacing: -0.028em;
color: #fff;
margin: 24px 0 40px;
text-wrap: balance;
}
.pg-principle__quote em {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
color: var(--ct-sky);
font-size: 1.02em;
}
.pg-principle__cite {
font-size: 14px;
color: var(--ct-on-navy-3);
letter-spacing: 0.04em;
}
.pg-principle__mark {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
font-size: 80px;
color: var(--ct-gold);
line-height: 1;
opacity: 0.7;
}
/* ========== APPROACH ========== */
.pg-approach {
background: var(--ct-cream);
color: var(--ct-navy);
}
.pg-approach__head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 96px;
margin-bottom: 80px;
align-items: end;
}
@media (max-width: 900px) {
.pg-approach__head { grid-template-columns: 1fr; gap: 32px; }
}
.pg-approach__diagram {
position: relative;
margin: 64px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.pg-approach__blurb {
margin-top: 24px;
min-height: 56px;
padding: 14px 22px;
border-radius: var(--ct-r-md);
background: rgba(1, 14, 53, 0.04);
border: 1px solid rgba(1, 14, 53, 0.06);
display: flex;
flex-direction: column;
gap: 4px;
max-width: 540px;
text-align: left;
transition: background 220ms var(--ct-ease), border-color 220ms var(--ct-ease);
}
.pg-approach__blurb.is-on {
background: rgba(1, 14, 53, 0.08);
border-color: rgba(1, 14, 53, 0.14);
}
.pg-approach__blurb-name {
font-family: var(--ct-font-sans);
font-weight: var(--ct-w-medium);
font-size: 14.5px;
color: var(--ct-blue);
letter-spacing: -0.005em;
}
.pg-approach__blurb-text {
font-size: 14px;
color: var(--ct-fg-2);
line-height: 1.5;
}
.pg-approach__blurb-hint {
font-family: var(--ct-font-mono);
font-size: 11.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(1, 14, 53, 0.45);
}
.pg-approach__diagram svg {
width: 100%;
max-width: 920px;
height: auto;
}
.pg-approach__legend {
margin-top: 48px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
}
.pg-approach__legend-item {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 18px;
border-top: 1px solid rgba(1,14,53,0.14);
}
.pg-approach__legend-key {
font-family: var(--ct-font-mono);
font-size: 11px;
color: rgba(1,14,53,0.55);
letter-spacing: 0.14em;
}
.pg-approach__legend-name {
font-weight: var(--ct-w-regular);
font-size: 16px;
color: var(--ct-navy);
}
/* ========== WHAT PRAGYA IS — Human × AI ========== */
.pg-what {
background: var(--ct-paper);
color: var(--ct-fg-1);
position: relative;
}
.pg-what__head { max-width: 920px; margin-bottom: 80px; }
.pg-what__split {
display: grid;
grid-template-columns: 1fr 64px 1fr;
gap: 0;
align-items: stretch;
margin: 32px 0 48px;
border: 1px solid var(--ct-line);
border-radius: var(--ct-r-lg);
overflow: hidden;
background: var(--ct-paper);
box-shadow: var(--ct-shadow-sm);
}
@media (max-width: 900px) {
.pg-what__split { grid-template-columns: 1fr; }
}
.pg-what__col {
padding: 40px 36px;
}
.pg-what__col--human { background: var(--ct-paper); }
.pg-what__col--ai { background: var(--ct-navy); color: #fff; }
.pg-what__col h4 {
font-size: 11.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: var(--ct-w-medium);
margin: 0 0 8px;
}
.pg-what__col--human h4 { color: var(--ct-blue); }
.pg-what__col--ai h4 { color: var(--ct-sky); }
.pg-what__col--ai h3 { color: #fff; }
.pg-what__col h3 {
font-weight: var(--ct-w-light);
font-size: clamp(22px, 2vw, 28px);
letter-spacing: -0.015em;
margin: 0 0 24px;
}
.pg-what__col ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 12px;
}
.pg-what__col li {
display: grid;
grid-template-columns: 18px 1fr;
gap: 12px;
align-items: baseline;
font-size: 15.5px;
line-height: 1.45;
}
.pg-what__col li::before {
content: "";
display: inline-block;
width: 6px; height: 6px;
margin-top: 8px;
background: currentColor;
opacity: 0.5;
}
.pg-what__col--human li { color: var(--ct-fg-1); }
.pg-what__col--ai li { color: var(--ct-on-navy-2); }
.pg-what__bridge {
background: var(--ct-grad-azure);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 900px) {
.pg-what__bridge { display: none; }
}
.pg-what__bridge::before,
.pg-what__bridge::after {
content: "";
position: absolute;
left: 50%; transform: translateX(-50%);
width: 1px;
background: rgba(255,255,255,0.4);
}
.pg-what__bridge::before { top: 0; height: 30%; }
.pg-what__bridge::after { bottom: 0; height: 30%; }
.pg-what__bridge-mark {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.5);
background: rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: var(--ct-font-serif);
font-style: italic;
font-size: 18px;
position: relative;
z-index: 1;
}
/* ========== LENSES (eight-lens validation) ========== */
.pg-lenses {
background: var(--ct-navy);
color: #fff;
overflow: hidden;
}
.pg-lenses__head { max-width: 980px; margin-bottom: 64px; }
.pg-lenses__stage {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 80px;
align-items: center;
}
@media (max-width: 1000px) {
.pg-lenses__stage { grid-template-columns: 1fr; gap: 32px; }
}
.pg-lenses__claim {
padding: 32px 32px 28px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--ct-r-lg);
backdrop-filter: blur(6px);
}
.pg-lenses__claim-eye {
font-family: var(--ct-font-mono);
font-size: 11px;
letter-spacing: 0.16em;
color: var(--ct-on-navy-3);
margin-bottom: 16px;
text-transform: uppercase;
}
.pg-lenses__claim-text {
font-family: var(--ct-font-sans);
font-weight: var(--ct-w-light);
font-size: clamp(20px, 2vw, 26px);
line-height: 1.3;
letter-spacing: -0.012em;
color: #fff;
}
.pg-lenses__claim-text em {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
color: var(--ct-sky);
}
.pg-lenses__claim-meta {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.08);
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.pg-lenses__claim-meta-row {
display: flex; flex-direction: column; gap: 4px;
}
.pg-lenses__claim-meta-label {
font-family: var(--ct-font-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
color: var(--ct-on-navy-3);
text-transform: uppercase;
}
.pg-lenses__claim-meta-value {
font-size: 14px;
color: #fff;
font-weight: var(--ct-w-regular);
}
.pg-lenses__claim-status {
margin-top: 24px;
display: flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
font-weight: var(--ct-w-medium);
color: var(--ct-emerald);
}
.pg-lenses__claim-status .check {
width: 18px; height: 18px;
border-radius: 50%;
background: var(--ct-emerald);
display: inline-flex;
align-items: center;
justify-content: center;
}
.pg-lenses__claim-status .check::after {
content: "";
width: 5px; height: 9px;
border-right: 1.5px solid #fff;
border-bottom: 1.5px solid #fff;
transform: rotate(45deg);
margin-top: -2px;
}
.pg-lenses__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
@media (max-width: 700px) { .pg-lenses__grid { grid-template-columns: repeat(2, 1fr); } }
.pg-lenses__cell {
padding: 18px 16px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--ct-r-md);
background: rgba(255,255,255,0.02);
position: relative;
transition: background 280ms var(--ct-ease),
border-color 280ms var(--ct-ease),
transform 280ms var(--ct-ease);
}
.pg-lenses__cell.is-active {
background: rgba(27,63,224,0.16);
border-color: var(--ct-sky);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(27,63,224,0.25);
}
.pg-lenses__cell-letter {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
font-size: 22px;
color: var(--ct-sky);
margin-bottom: 4px;
line-height: 1;
}
.pg-lenses__cell-name {
font-size: 13px;
font-weight: var(--ct-w-medium);
color: #fff;
margin-bottom: 4px;
letter-spacing: -0.005em;
}
.pg-lenses__cell-desc {
font-size: 11.5px;
color: var(--ct-on-navy-3);
line-height: 1.4;
}
.pg-lenses__hardstop {
margin-top: 32px;
padding: 18px 22px;
border: 1px dashed rgba(212,175,122,0.4);
border-radius: var(--ct-r-md);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
font-size: 13.5px;
color: var(--ct-on-navy-2);
}
.pg-lenses__hardstop strong { color: var(--ct-gold); font-weight: var(--ct-w-medium); }
/* ========== LIFECYCLE (8 questions) ========== */
.pg-lifecycle {
background: var(--ct-paper);
color: var(--ct-fg-1);
}
.pg-lifecycle__head { max-width: 920px; margin-bottom: 56px; }
.pg-lifecycle__stage {
position: relative;
}
.pg-lifecycle__rail {
display: flex;
gap: 8px;
margin-bottom: 24px;
border-bottom: 1px solid var(--ct-line);
overflow-x: auto;
scrollbar-width: none;
}
.pg-lifecycle__rail::-webkit-scrollbar { display: none; }
.pg-lifecycle__tab {
appearance: none;
background: transparent;
border: 0;
font-family: inherit;
padding: 16px 18px 18px;
font-size: 13px;
color: var(--ct-fg-3);
cursor: pointer;
position: relative;
white-space: nowrap;
letter-spacing: -0.003em;
transition: color 200ms var(--ct-ease);
}
.pg-lifecycle__tab strong {
font-family: var(--ct-font-mono);
display: block;
font-size: 10.5px;
letter-spacing: 0.16em;
font-weight: var(--ct-w-regular);
color: var(--ct-fg-3);
margin-bottom: 4px;
}
.pg-lifecycle__tab:hover { color: var(--ct-fg-1); }
.pg-lifecycle__tab.is-active { color: var(--ct-navy); }
.pg-lifecycle__tab.is-active strong { color: var(--ct-blue); }
.pg-lifecycle__tab.is-active::after {
content: "";
position: absolute;
bottom: -1px; left: 0; right: 0;
height: 2px;
background: var(--ct-blue);
}
.pg-lifecycle__panel {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
padding: 48px 0;
align-items: start;
min-height: 360px;
}
@media (max-width: 900px) {
.pg-lifecycle__panel { grid-template-columns: 1fr; gap: 24px; }
}
.pg-lifecycle__question {
font-family: var(--ct-font-sans);
font-weight: var(--ct-w-extralight);
font-size: clamp(28px, 3.4vw, 48px);
line-height: 1.12;
letter-spacing: -0.022em;
color: var(--ct-navy);
margin: 0 0 24px;
max-width: 16ch;
text-wrap: balance;
}
.pg-lifecycle__question em {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
color: var(--ct-blue);
}
.pg-lifecycle__answer {
display: flex;
flex-direction: column;
gap: 18px;
}
.pg-lifecycle__answer-eye {
font-family: var(--ct-font-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ct-fg-3);
}
.pg-lifecycle__answer-body {
font-size: 16px;
line-height: 1.55;
color: var(--ct-fg-2);
max-width: 38ch;
}
.pg-lifecycle__delivers {
margin-top: 12px;
padding: 18px 20px;
background: var(--ct-paper-2);
border-radius: var(--ct-r-md);
border-left: 2px solid var(--ct-gold);
}
.pg-lifecycle__delivers-label {
font-family: var(--ct-font-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ct-fg-3);
margin-bottom: 6px;
}
.pg-lifecycle__delivers-value {
font-size: 14.5px;
color: var(--ct-navy);
font-weight: var(--ct-w-medium);
}
.pg-lifecycle__progress {
display: flex;
gap: 4px;
margin-top: 32px;
}
.pg-lifecycle__progress-cell {
flex: 1;
height: 2px;
background: var(--ct-line);
transition: background 280ms var(--ct-ease);
}
.pg-lifecycle__progress-cell.is-done { background: var(--ct-blue); }
.pg-lifecycle__progress-cell.is-current { background: var(--ct-navy); }
/* ========== METHOD ========== */
.pg-method {
background: var(--ct-grad-sea-earth);
color: var(--ct-navy);
position: relative;
}
.pg-method__head { max-width: 880px; margin-bottom: 80px; }
.pg-method__steps {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
border-top: 1px solid rgba(1,14,53,0.14);
}
@media (max-width: 900px) {
.pg-method__steps { grid-template-columns: 1fr; }
}
.pg-method__step {
padding: 32px 24px 32px 0;
border-right: 1px solid rgba(1,14,53,0.10);
position: relative;
}
.pg-method__step:last-child { border-right: 0; }
@media (max-width: 900px) {
.pg-method__step {
border-right: 0;
border-bottom: 1px solid rgba(1,14,53,0.10);
padding: 24px 0;
}
.pg-method__step:last-child { border-bottom: 0; }
}
.pg-method__step::before {
content: "";
position: absolute;
top: -1px; left: 0;
height: 2px;
width: 0;
background: var(--ct-navy);
transition: width 700ms var(--ct-ease-out);
transition-delay: var(--r-delay, 0ms);
}
.pg-method__step.r-in::before { width: calc(100% - 24px); }
.pg-method__step-num {
font-family: var(--ct-font-mono);
font-size: 11px;
letter-spacing: 0.16em;
color: rgba(1,14,53,0.55);
margin: 24px 0 18px;
}
.pg-method__step-name {
font-family: var(--ct-font-sans);
font-weight: var(--ct-w-light);
font-size: clamp(22px, 2.2vw, 30px);
letter-spacing: -0.016em;
color: var(--ct-navy);
margin: 0 0 12px;
}
.pg-method__step-desc {
font-size: 14.5px;
line-height: 1.5;
color: rgba(1,14,53,0.7);
max-width: 28ch;
}
/* ========== VERSUS ========== */
.pg-versus {
background: var(--ct-paper);
color: var(--ct-fg-1);
}
.pg-versus__head { max-width: 920px; margin-bottom: 64px; }
.pg-versus__table {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
border: 1px solid var(--ct-line);
border-radius: var(--ct-r-lg);
overflow: hidden;
background: var(--ct-paper);
position: relative;
}
@media (max-width: 900px) {
.pg-versus__table { grid-template-columns: 1fr; }
}
.pg-versus__cell {
padding: 22px 24px;
border-right: 1px solid var(--ct-line);
border-bottom: 1px solid var(--ct-line);
font-size: 14.5px;
line-height: 1.4;
color: var(--ct-fg-1);
}
.pg-versus__cell:last-child { border-right: 0; }
.pg-versus__cell.is-header {
background: var(--ct-paper-2);
font-size: 12.5px;
font-weight: var(--ct-w-medium);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ct-fg-3);
}
.pg-versus__cell.is-header.is-pragya {
background: var(--ct-navy);
color: #fff;
position: relative;
font-size: 13px;
}
.pg-versus__cell.is-header.is-pragya::after {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 3px;
background: var(--ct-gold);
}
.pg-versus__cell.is-row { font-weight: var(--ct-w-medium); color: var(--ct-navy); background: var(--ct-paper); }
.pg-versus__cell.is-pragya {
background: linear-gradient(180deg, rgba(27,63,224,0.08), rgba(27,63,224,0.04));
color: var(--ct-navy);
font-weight: var(--ct-w-medium);
border-left: 2px solid var(--ct-gold);
margin-left: -1px;
}
.pg-versus__cell.is-pragya em {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
color: var(--ct-blue);
}
.pg-versus__cell:nth-last-child(-n+4) { border-bottom: 0; }
@media (max-width: 900px) {
.pg-versus__cell {
border-right: 0;
border-bottom: 1px solid var(--ct-line);
}
.pg-versus__cell.is-header { display: none; }
.pg-versus__cell.is-header.is-pragya { display: block; }
}
/* ========== CAPABILITIES ========== */
.pg-cap {
background: var(--ct-cream);
color: var(--ct-navy);
}
.pg-cap__head { max-width: 920px; margin-bottom: 56px; }
.pg-cap__hint {
display: inline-flex;
align-items: center;
gap: 14px;
margin-top: 28px;
padding: 12px 20px 12px 16px;
background: rgba(27,63,224,0.06);
border: 1px solid rgba(27,63,224,0.18);
border-radius: var(--ct-r-pill);
font-size: 13.5px;
color: var(--ct-navy);
letter-spacing: -0.003em;
line-height: 1.4;
}
.pg-cap__hint strong {
font-weight: var(--ct-w-medium);
color: var(--ct-blue);
}
.pg-cap__hint-mark {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ct-blue);
box-shadow: 0 0 0 4px rgba(27,63,224,0.18);
animation: pulse 2.4s ease-in-out infinite;
flex-shrink: 0;
}
@media (max-width: 640px) {
.pg-cap__hint { font-size: 12.5px; padding: 10px 16px 10px 12px; }
}
.pg-cap__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
@media (max-width: 980px) { .pg-cap__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pg-cap__grid { grid-template-columns: 1fr; } }
.pg-cap__grid > .r { display: flex; }
.pg-cap__grid > .r > .pg-cap__card { width: 100%; }
.pg-cap__card {
background: var(--ct-paper);
border: 1px solid var(--ct-line);
border-radius: var(--ct-r-lg);
padding: 28px 26px 32px;
transition: transform 240ms var(--ct-ease),
box-shadow 240ms var(--ct-ease),
border-color 240ms var(--ct-ease);
cursor: pointer;
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
min-height: 100%;
height: 100%;
}
.pg-cap__card:hover {
transform: translateY(-3px);
box-shadow: var(--ct-shadow-md);
border-color: var(--ct-border-strong);
}
.pg-cap__card-num {
font-family: var(--ct-font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--ct-fg-3);
}
.pg-cap__card-title {
font-family: var(--ct-font-sans);
font-weight: var(--ct-w-light);
font-size: 24px;
line-height: 1.18;
letter-spacing: -0.013em;
color: var(--ct-navy);
margin: 0;
}
.pg-cap__card-title em {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
color: var(--ct-blue);
}
.pg-cap__card-desc {
font-size: 14.5px;
line-height: 1.5;
color: var(--ct-fg-2);
}
.pg-cap__card-list {
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid var(--ct-line);
}
.pg-cap__chip {
font-size: 12.5px;
padding: 4px 10px;
border: 1px solid var(--ct-line);
border-radius: var(--ct-r-pill);
color: var(--ct-fg-2);
white-space: nowrap;
}
.pg-cap__card-meta {
margin-top: auto;
padding-top: 14px;
display: flex;
align-items: baseline;
justify-content: space-between;
font-family: var(--ct-font-mono);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--ct-fg-3);
}
.pg-cap__card-meta strong {
font-family: var(--ct-font-sans);
font-weight: var(--ct-w-regular);
font-size: 13px;
letter-spacing: 0;
color: var(--ct-blue);
}
/* ========== ATTESTATION (Claude-branded card) ========== */
.pg-attest {
background: var(--ct-paper);
padding: clamp(64px, 9vw, 96px) 0;
}
.pg-attest__card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 48px;
align-items: center;
padding: 40px 48px;
background: var(--ct-navy);
color: #fff;
border-radius: var(--ct-r-lg);
border: 1px solid var(--ct-on-navy-line);
text-decoration: none;
position: relative;
overflow: hidden;
transition: transform 280ms var(--ct-ease),
box-shadow 280ms var(--ct-ease),
border-color 280ms var(--ct-ease);
}
.pg-attest__card::before {
content: "";
position: absolute;
inset: -40% -20% auto auto;
width: 60%; height: 200%;
background: radial-gradient(circle, rgba(212,175,122,0.18), transparent 60%);
pointer-events: none;
}
.pg-attest__card:hover {
transform: translateY(-2px);
box-shadow: 0 24px 60px rgba(1,14,53,0.4);
border-color: rgba(212,175,122,0.45);
}
@media (max-width: 980px) {
.pg-attest__card { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
}
.pg-attest__card-left {
display: flex;
align-items: center;
gap: 20px;
}
.pg-attest__seal {
width: 64px; height: 64px;
border-radius: 50%;
background: rgba(212,175,122,0.10);
border: 1px solid rgba(212,175,122,0.4);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
}
.pg-attest__seal::before {
content: "";
position: absolute;
inset: 5px;
border-radius: 50%;
border: 1px dashed rgba(212,175,122,0.35);
}
.pg-attest__sig {
display: flex;
flex-direction: column;
gap: 6px;
}
.pg-attest__eye {
font-family: var(--ct-font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ct-gold);
}
.pg-attest__by {
display: flex;
align-items: baseline;
gap: 10px;
font-size: 18px;
line-height: 1.2;
letter-spacing: -0.012em;
}
.pg-attest__by-claude {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
font-size: 22px;
color: #fff;
letter-spacing: -0.005em;
}
.pg-attest__sep { color: var(--ct-on-navy-3); }
.pg-attest__by-anthropic {
font-weight: var(--ct-w-medium);
font-size: 14px;
color: var(--ct-on-navy-2);
letter-spacing: 0.03em;
}
.pg-attest__card-mid { position: relative; z-index: 1; }
.pg-attest__text {
font-family: var(--ct-font-sans);
font-weight: var(--ct-w-light);
font-size: 15.5px;
line-height: 1.5;
color: var(--ct-on-navy-2);
margin: 0;
max-width: 56ch;
}
.pg-attest__text em {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
color: var(--ct-sky);
}
.pg-attest__card-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
flex-shrink: 0;
}
@media (max-width: 980px) {
.pg-attest__card-right { align-items: flex-start; }
}
.pg-attest__cta {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--ct-sky);
font-size: 14.5px;
font-weight: var(--ct-w-medium);
transition: gap 220ms var(--ct-ease);
}
.pg-attest__card:hover .pg-attest__cta { gap: 14px; color: #fff; }
.pg-attest__hash {
font-family: var(--ct-font-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
color: var(--ct-on-navy-3);
}
/* ========== FOOTER (minimal) ========== */
.pg-foot {
background: var(--ct-navy);
color: var(--ct-on-navy-2);
padding: 72px 0 32px;
}
.pg-foot__main {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 56px;
align-items: center;
padding-bottom: 40px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 980px) {
.pg-foot__main { grid-template-columns: 1fr; gap: 28px; }
}
.pg-foot__brand-mark {
display: inline-flex;
align-items: center;
gap: 12px;
line-height: 1;
text-decoration: none;
border-bottom: 0;
margin-bottom: 0;
}
.pg-foot__contacts {
display: flex;
flex-wrap: wrap;
gap: 32px 56px;
align-items: center;
justify-content: center;
}
@media (max-width: 980px) {
.pg-foot__contacts { justify-content: flex-start; }
}
.pg-foot__contact {
display: flex;
flex-direction: column;
gap: 4px;
text-decoration: none;
border-bottom: 0;
color: inherit;
transition: color 200ms var(--ct-ease);
}
.pg-foot__contact:hover { color: #fff; }
.pg-foot__contact-label {
font-family: var(--ct-font-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ct-on-navy-3);
}
.pg-foot__contact:hover .pg-foot__contact-label { color: var(--ct-sky); }
.pg-foot__contact-value {
font-size: 15px;
color: var(--ct-on-navy-2);
font-weight: var(--ct-w-regular);
letter-spacing: -0.003em;
}
.pg-foot__contact:hover .pg-foot__contact-value { color: #fff; }
.pg-foot__cta {
font-size: 14px !important;
padding: 14px 22px !important;
}
.pg-foot__bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 24px;
flex-wrap: wrap;
gap: 12px;
font-family: var(--ct-font-mono);
font-size: 11px;
color: var(--ct-on-navy-3);
letter-spacing: 0.06em;
}
/* Legal / utility links row */
.pg-foot__legal {
display: flex;
flex-wrap: wrap;
gap: 12px 28px;
align-items: center;
margin-top: 8px;
padding-top: 28px;
border-top: 1px solid var(--ct-on-navy-line, rgba(255,255,255,0.12));
}
.pg-foot__legal a {
font-family: var(--ct-font-mono);
font-size: 11.5px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ct-on-navy-2);
text-decoration: none;
border-bottom: 0;
transition: color 200ms var(--ct-ease);
}
.pg-foot__legal a:hover { color: #fff; }
@media (max-width: 720px) {
.pg-foot__legal { gap: 10px 20px; padding-top: 22px; }
.pg-foot__legal a { font-size: 11px; letter-spacing: 0.06em; }
}
/* ========== FIRM (quiet) ========== */
.pg-firm {
background: var(--ct-navy);
color: #fff;
padding: clamp(96px, 12vw, 140px) 0;
}
.pg-firm__inner {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: start;
}
@media (max-width: 900px) {
.pg-firm__inner { grid-template-columns: 1fr; gap: 32px; }
}
.pg-firm__h {
font-weight: var(--ct-w-thin);
font-size: clamp(34px, 4.4vw, 64px);
line-height: 1.05;
letter-spacing: -0.024em;
color: #fff;
}
.pg-firm__h em {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
color: var(--ct-sky);
}
.pg-firm__body {
font-size: 17px;
color: var(--ct-on-navy-2);
line-height: 1.6;
}
.pg-firm__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 600px) { .pg-firm__stats { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.pg-firm__stat {
display: flex; flex-direction: column; gap: 6px;
}
.pg-firm__stat-num {
font-weight: var(--ct-w-extralight);
font-size: clamp(28px, 3vw, 40px);
color: #fff;
letter-spacing: -0.022em;
line-height: 1;
}
.pg-firm__stat-label {
font-size: 11.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ct-on-navy-3);
}
.pg-firm__signature {
margin-top: 40px;
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
font-size: 17px;
color: var(--ct-sky);
}
/* ========== CTA ========== */
.pg-cta {
background: var(--ct-grad-sea-earth);
color: var(--ct-navy);
text-align: center;
padding: clamp(140px, 18vw, 220px) 0 clamp(160px, 20vw, 240px);
position: relative;
overflow: hidden;
isolation: isolate;
}
.pg-cta::before {
/* aurora wash, mirrors the hero */
content: "";
position: absolute;
inset: -20%;
background:
radial-gradient(50% 40% at 18% 28%, rgba(114,200,254,0.50), transparent 70%),
radial-gradient(40% 50% at 82% 18%, rgba(27,63,224,0.16), transparent 70%),
radial-gradient(60% 40% at 65% 86%, rgba(212,175,122,0.40), transparent 70%);
filter: blur(40px);
pointer-events: none;
z-index: -1;
animation: heroAurora 24s ease-in-out infinite alternate;
}
.pg-cta::after {
/* horizon — sea meets earth */
content: "";
position: absolute;
left: 0; right: 0; bottom: 16vh;
height: 1px;
background: linear-gradient(90deg, transparent 5%, rgba(212,175,122,0.55) 45%, rgba(212,175,122,0.55) 55%, transparent 95%);
pointer-events: none;
z-index: -1;
}
.pg-cta > .pg-wrap { position: relative; z-index: 1; }
.pg-cta__eye {
font-family: var(--ct-font-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(1,14,53,0.55);
margin-bottom: 24px;
}
.pg-cta h2 {
font-weight: var(--ct-w-thin);
font-size: clamp(36px, 5.2vw, 72px);
line-height: 1.05;
letter-spacing: -0.024em;
margin: 0 0 24px;
}
.pg-cta h2 em {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
color: var(--ct-blue);
}
.pg-cta__sub {
font-weight: var(--ct-w-light);
font-size: clamp(17px, 1.5vw, 21px);
line-height: 1.5;
color: rgba(1,14,53,0.65);
max-width: 56ch;
margin: 0 auto 40px;
}
.pg-cta__btns {
display: inline-flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
}
.pg-cta__assurance {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 28px;
font-family: var(--ct-font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(1,14,53,0.55);
}
.pg-cta__assurance-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--ct-emerald);
box-shadow: 0 0 0 4px rgba(0,128,90,0.18);
animation: pulse 2.4s ease-in-out infinite;
}
/* ========== MODAL ========== */
.pg-modal-scrim {
position: fixed; inset: 0;
background: rgba(1, 14, 53, 0.6);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
backdrop-filter: blur(6px);
animation: scrimIn 200ms var(--ct-ease-out);
}
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
.pg-modal {
background: var(--ct-paper);
border-radius: var(--ct-r-xl);
width: min(620px, 100%);
padding: 36px 36px 32px;
position: relative;
box-shadow: var(--ct-shadow-xl);
animation: modalIn 320ms var(--ct-ease-out);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.pg-modal h3 {
font-weight: var(--ct-w-light);
font-size: 28px;
letter-spacing: -0.018em;
margin: 0 0 8px;
color: var(--ct-navy);
}
.pg-modal p {
font-size: 15px;
color: var(--ct-fg-2);
margin: 0 0 24px;
}
.pg-modal__close {
position: absolute;
top: 18px; right: 18px;
background: transparent;
border: 0;
font-size: 22px;
cursor: pointer;
color: var(--ct-fg-3);
width: 36px; height: 36px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
transition: background 200ms var(--ct-ease), color 200ms var(--ct-ease);
}
.pg-modal__close:hover { background: var(--ct-line-2); color: var(--ct-navy); }
.pg-modal__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.pg-modal__field label {
font-size: 12px; letter-spacing: 0.06em;
color: var(--ct-fg-3);
text-transform: uppercase;
font-weight: var(--ct-w-medium);
}
.pg-modal__field input,
.pg-modal__field textarea {
font-family: inherit; font-size: 15px;
padding: 12px 14px;
border: 1px solid var(--ct-line);
border-radius: var(--ct-r-sm);
background: var(--ct-paper);
color: var(--ct-navy);
resize: vertical;
}
.pg-modal__field input:focus,
.pg-modal__field textarea:focus {
outline: 2px solid var(--ct-blue);
outline-offset: 2px;
border-color: var(--ct-blue);
}
.pg-modal__actions {
display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px;
}
/* ========== TWEAKS / FOLIOS / MOTION / PALETTE ========== */
body[data-folios="off"] .pg-folio { display: none; }
body[data-motion="quiet"] .r,
body[data-motion="quiet"] .r-chars > span {
transition-duration: 400ms !important;
}
body[data-motion="quiet"] .pg-hero__art { opacity: 0.4; }
body[data-motion="quiet"] .pg-hero__atmos::before { display: none; }
/* Navy-dominant: push more sections to navy */
body[data-palette="navy-dominant"] .pg-approach { background: var(--ct-navy); color: #fff; }
body[data-palette="navy-dominant"] .pg-approach .pg-approach__legend-item { border-top-color: rgba(255,255,255,0.14); }
body[data-palette="navy-dominant"] .pg-approach .pg-approach__legend-name { color: #fff; }
body[data-palette="navy-dominant"] .pg-approach .pg-approach__legend-key { color: var(--ct-on-navy-3); }
body[data-palette="navy-dominant"] .pg-approach .pg-h2,
body[data-palette="navy-dominant"] .pg-approach .pg-deck { color: #fff; }
body[data-palette="navy-dominant"] .pg-approach .pg-eye { color: var(--ct-sky); }
body[data-palette="navy-dominant"] .pg-approach .pg-arrow-link { color: var(--ct-sky); }
body[data-palette="navy-dominant"] .pg-approach__diagram svg text { fill: #fff !important; }
body[data-palette="navy-dominant"] .pg-cap { background: var(--ct-navy-soft); color: #fff; }
body[data-palette="navy-dominant"] .pg-cap .pg-h2,
body[data-palette="navy-dominant"] .pg-cap .pg-deck { color: #fff; }
body[data-palette="navy-dominant"] .pg-cap .pg-eye { color: var(--ct-sky); }
body[data-palette="navy-dominant"] .pg-cap__card { background: #050E2C; border-color: rgba(255,255,255,0.08); }
body[data-palette="navy-dominant"] .pg-cap__card-num,
body[data-palette="navy-dominant"] .pg-cap__card-desc { color: var(--ct-on-navy-2); }
body[data-palette="navy-dominant"] .pg-cap__card-title { color: #fff; }
body[data-palette="navy-dominant"] .pg-cap__chip { color: var(--ct-on-navy-2); border-color: rgba(255,255,255,0.14); }
body[data-palette="navy-dominant"] .pg-cap__card-list { border-top-color: rgba(255,255,255,0.08); }
/* Cream-dominant: push more sections to cream */
body[data-palette="cream-dominant"] .pg-why { background: var(--ct-cream); }
body[data-palette="cream-dominant"] .pg-what { background: var(--ct-cream); }
body[data-palette="cream-dominant"] .pg-lifecycle { background: var(--ct-cream); }
body[data-palette="cream-dominant"] .pg-versus { background: var(--ct-cream); }
body[data-palette="cream-dominant"] .pg-versus__cell.is-header { background: rgba(1,14,53,0.04); }
body[data-palette="cream-dominant"] .pg-versus__cell.is-row { background: transparent; }
body[data-palette="cream-dominant"] .pg-lifecycle__delivers { background: rgba(1,14,53,0.04); }
/* ========== EXTRA: Capability card cue + more chip ========== */
.pg-cap__card {
appearance: none;
font-family: inherit;
text-align: left;
width: 100%;
}
.pg-cap__card:focus-visible {
outline: 2px solid var(--ct-blue);
outline-offset: 3px;
}
.pg-cap__card-cue {
position: absolute;
top: 20px; right: 22px;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--ct-font-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ct-blue);
opacity: 0;
transform: translateX(-4px);
transition: opacity 220ms var(--ct-ease), transform 220ms var(--ct-ease);
pointer-events: none;
}
.pg-cap__card:hover .pg-cap__card-cue,
.pg-cap__card:focus-visible .pg-cap__card-cue {
opacity: 1;
transform: translateX(0);
}
.pg-cap__chip--more {
color: var(--ct-blue) !important;
border-color: rgba(27,63,224,0.25) !important;
background: rgba(27,63,224,0.05);
font-family: var(--ct-font-mono);
font-size: 11px !important;
letter-spacing: 0.04em;
}
/* ========== FAMILY MODAL (wide) ========== */
.pg-modal--wide {
max-width: 720px;
width: 100%;
padding: 40px 44px 36px !important;
}
.pg-modal__eye {
font-family: var(--ct-font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ct-blue);
margin-bottom: 12px;
}
.pg-modal__title {
font-family: var(--ct-font-sans);
font-weight: var(--ct-w-light);
font-size: clamp(28px, 3.4vw, 40px) !important;
line-height: 1.1 !important;
letter-spacing: -0.018em !important;
margin: 0 0 16px !important;
color: var(--ct-navy) !important;
}
.pg-modal__title em {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
color: var(--ct-blue);
}
.pg-modal__deck {
font-size: 16px !important;
line-height: 1.5;
color: var(--ct-fg-1) !important;
margin: 0 0 14px !important;
font-weight: var(--ct-w-regular);
}
.pg-modal__body {
font-size: 14.5px !important;
line-height: 1.55;
color: var(--ct-fg-2) !important;
margin: 0 0 28px !important;
}
.pg-modal__divider {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-top: 1px solid var(--ct-line);
border-bottom: 1px solid var(--ct-line);
margin-bottom: 18px;
font-family: var(--ct-font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ct-fg-3);
}
.pg-modal__archlist {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 24px;
}
@media (max-width: 560px) { .pg-modal__archlist { grid-template-columns: 1fr; } }
.pg-modal__arch {
display: grid;
grid-template-columns: 32px 1fr;
align-items: baseline;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--ct-line-2);
}
.pg-modal__arch-num {
font-family: var(--ct-font-mono);
font-size: 11px;
letter-spacing: 0.12em;
color: var(--ct-fg-3);
}
.pg-modal__arch-name {
font-size: 14.5px;
color: var(--ct-navy);
font-weight: var(--ct-w-regular);
}
/* ========== HOVER SWEEP ========== */
.pg-tl-card { transition: transform 280ms var(--ct-ease); }
.pg-tl-card:hover { transform: translateY(-2px); }
.pg-tl-card:hover .pg-tl-card__dot {
box-shadow: 0 0 0 6px rgba(27,63,224,0.15);
transition: box-shadow 240ms var(--ct-ease);
}
.pg-tl-card__dot { transition: box-shadow 240ms var(--ct-ease), transform 240ms var(--ct-ease); }
.pg-why__failure { transition: background 220ms var(--ct-ease), padding-left 220ms var(--ct-ease); }
.pg-why__failure:hover {
background: var(--ct-paper-2);
padding-left: 8px;
margin-left: -8px;
border-radius: var(--ct-r-xs);
}
.pg-versus__cell {
transition: background 200ms var(--ct-ease);
}
.pg-versus__cell:hover { background: var(--ct-paper-2); }
.pg-versus__cell.is-pragya:hover { background: rgba(27,63,224,0.08); }
.pg-lifecycle__tab { transition: color 200ms var(--ct-ease), background 200ms var(--ct-ease); }
.pg-lifecycle__tab:hover { background: var(--ct-paper-2); }
.pg-lenses__cell {
cursor: default;
}
.pg-lenses__cell:hover {
background: rgba(27,63,224,0.10) !important;
border-color: rgba(114,200,254,0.5) !important;
transform: translateY(-1px);
}
.pg-firm__stat { transition: transform 240ms var(--ct-ease); }
.pg-firm__stat:hover { transform: translateY(-2px); }
/* Hero stats hover */
.pg-hero__meta-item {
transition: transform 240ms var(--ct-ease);
}
.pg-hero__meta-item:hover { transform: translateY(-2px); }
.pg-hero__meta-item:hover .pg-hero__meta-num { color: var(--ct-sky); transition: color 240ms var(--ct-ease); }
/* ========== CERTIFICATE MODAL (in-page) ========== */
.pg-cert-scrim {
position: fixed; inset: 0;
background: rgba(1, 14, 53, 0.78);
z-index: 110;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 32px 24px;
overflow-y: auto;
backdrop-filter: blur(8px);
animation: scrimIn 220ms var(--ct-ease-out);
}
.pg-cert {
width: 100%;
max-width: 920px;
background: linear-gradient(180deg, #FFFEF9 0%, #F2EBDC 100%);
color: var(--ct-navy);
border-radius: var(--ct-r-lg);
padding: clamp(40px, 6vw, 80px);
position: relative;
box-shadow: 0 40px 100px rgba(0,0,0,0.5);
overflow: hidden;
animation: modalIn 360ms var(--ct-ease-out);
}
.pg-cert::before, .pg-cert::after {
content: "";
position: absolute;
pointer-events: none;
inset: 0;
}
.pg-cert::before { background: radial-gradient(circle at top right, rgba(212,175,122,0.25), transparent 60%); }
.pg-cert::after { background: linear-gradient(135deg, transparent 0%, transparent 90%, rgba(212,175,122,0.35) 100%); }
.pg-cert__close {
position: absolute;
top: 18px; right: 18px;
background: rgba(1,14,53,0.06);
border: 0;
font-size: 22px;
cursor: pointer;
color: var(--ct-navy);
width: 38px; height: 38px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
z-index: 3;
transition: background 200ms var(--ct-ease);
}
.pg-cert__close:hover { background: rgba(1,14,53,0.14); }
.pg-cert__corner {
position: absolute;
top: 28px; left: 28px;
font-family: var(--ct-font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
color: rgba(1,14,53,0.5);
text-transform: uppercase;
z-index: 1;
}
.pg-cert__corner--tr { left: auto; right: 62px; text-align: right; }
.pg-cert__brand {
display: inline-flex; align-items: center; gap: 12px;
margin-bottom: 32px;
line-height: 1;
position: relative; z-index: 1;
}
.pg-cert__brand img { height: 22px; display: block; }
.pg-cert__brand-sep {
color: rgba(1,14,53,0.35);
font-size: 18px;
font-weight: 200;
line-height: 1;
transform: translateY(-1px);
}
.pg-cert__brand-pragya {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 1;
color: var(--ct-blue);
}
.pg-cert__eye {
font-family: var(--ct-font-mono);
font-size: 11.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ct-blue);
margin: 48px 0 24px;
position: relative; z-index: 1;
}
.pg-cert__title {
font-family: var(--ct-font-sans);
font-weight: var(--ct-w-thin);
font-size: clamp(28px, 4vw, 56px);
line-height: 1.06;
letter-spacing: -0.022em;
margin: 0 0 40px;
max-width: 22ch;
text-wrap: balance;
position: relative; z-index: 1;
}
.pg-cert__title em {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
color: var(--ct-blue);
}
.pg-cert__body {
max-width: 60ch;
font-size: 15.5px;
line-height: 1.6;
color: rgba(1,14,53,0.78);
position: relative; z-index: 1;
}
.pg-cert__body p { margin: 0 0 14px; }
.pg-cert__body em.brand {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
color: var(--ct-blue);
}
.pg-cert__claims {
margin: 40px 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
padding: 24px;
border: 1px solid rgba(1,14,53,0.14);
border-radius: var(--ct-r-md);
background: rgba(255,255,255,0.5);
position: relative; z-index: 1;
}
@media (max-width: 640px) { .pg-cert__claims { grid-template-columns: 1fr; } }
.pg-cert__claim { display: flex; flex-direction: column; gap: 6px; }
.pg-cert__claim-label {
font-family: var(--ct-font-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(1,14,53,0.55);
}
.pg-cert__claim-value {
font-weight: var(--ct-w-light);
font-size: 19px;
letter-spacing: -0.012em;
color: var(--ct-navy);
}
.pg-cert__quote {
border-left: 2px solid var(--ct-gold);
padding: 8px 0 8px 24px;
margin: 32px 0;
font-family: var(--ct-font-sans);
font-weight: var(--ct-w-light);
font-size: 18px;
line-height: 1.42;
letter-spacing: -0.01em;
color: var(--ct-navy);
max-width: 56ch;
position: relative; z-index: 1;
}
.pg-cert__quote em {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
color: var(--ct-blue);
}
.pg-cert__sign {
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid rgba(1,14,53,0.14);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
position: relative; z-index: 1;
}
.pg-cert__signer { display: flex; flex-direction: column; gap: 4px; }
.pg-cert__signer-script {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
font-size: 28px;
color: var(--ct-blue);
letter-spacing: -0.005em;
line-height: 1;
margin-bottom: 8px;
}
.pg-cert__signer-name {
font-weight: var(--ct-w-medium);
font-size: 13.5px;
color: var(--ct-navy);
}
.pg-cert__signer-role {
font-size: 12.5px;
color: rgba(1,14,53,0.6);
}
.pg-cert__hash {
font-family: var(--ct-font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
color: rgba(1,14,53,0.55);
text-align: right;
max-width: 30ch;
line-height: 1.5;
}
.pg-cert__seal {
width: 88px; height: 88px;
border-radius: 50%;
border: 1px solid rgba(1,14,53,0.2);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: var(--ct-font-mono);
font-size: 8.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(1,14,53,0.55);
position: relative;
background: radial-gradient(circle at 50% 30%, rgba(212,175,122,0.2), transparent 65%);
}
.pg-cert__seal-num {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
font-size: 20px;
color: var(--ct-blue);
letter-spacing: -0.01em;
}
.pg-cert__seal::before {
content: "";
position: absolute;
inset: 5px;
border-radius: 50%;
border: 1px dashed rgba(1,14,53,0.18);
}
/* ========== HERO LIGHT MODE: nav adapt ========== */
body[data-hero-mode="light"] .pg-nav:not(.is-scrolled) .pg-nav__brand-pragya { color: var(--ct-blue); }
body[data-hero-mode="light"] .pg-nav:not(.is-scrolled) .pg-nav__brand-sep { color: rgba(1,14,53,0.45); }
body[data-hero-mode="light"] .pg-nav:not(.is-scrolled) .pg-nav__links a { color: rgba(1,14,53,0.72); }
body[data-hero-mode="light"] .pg-nav:not(.is-scrolled) .pg-nav__links a:hover { color: var(--ct-navy); }
body[data-hero-mode="light"] .pg-nav:not(.is-scrolled) .pg-nav__cta {
background: rgba(1,14,53,0.06);
border-color: rgba(1,14,53,0.18);
color: var(--ct-navy);
}
body[data-hero-mode="light"] .pg-nav:not(.is-scrolled) .pg-nav__cta:hover {
background: rgba(1,14,53,0.12);
border-color: rgba(1,14,53,0.3);
}
/* logo wordmark — swap to dark version against light hero. We do this by swapping
src via CSS content trick won't work; do it in the Nav component instead via heroMode. */
body[data-hero-mode="light"] .pg-nav:not(.is-scrolled) .pg-nav__brand img {
/* filter inverts navy→white logo to navy. Since logo-wordmark-white.svg is white,
invert + slight blue shift gives us a navy-ish wordmark inline. */
filter: brightness(0) saturate(100%) invert(8%) sepia(78%) saturate(2900%) hue-rotate(225deg) brightness(85%);
}
/* ========== PRAGYA OPS · Decision telemetry strip ========== */
.pg-ops {
background: linear-gradient(180deg, #010A28 0%, #010E35 50%, #03133e 100%);
color: #fff;
padding: clamp(64px, 9vw, 112px) 0 clamp(56px, 8vw, 96px);
position: relative;
overflow: hidden;
isolation: isolate;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pg-ops::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(80% 100% at 50% 50%, black, transparent 90%);
pointer-events: none;
z-index: -1;
}
.pg-ops::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(60% 40% at 20% 0%, rgba(114,200,254,0.10), transparent 60%),
radial-gradient(50% 50% at 85% 100%, rgba(212,175,122,0.06), transparent 60%);
pointer-events: none;
z-index: -1;
}
.pg-ops__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(255,255,255,0.10);
margin-bottom: 26px;
flex-wrap: wrap;
}
.pg-ops__title {
display: inline-flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
font-family: var(--ct-font-mono);
font-size: 11.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.pg-ops__led {
width: 9px; height: 9px;
border-radius: 50%;
background: var(--ct-emerald);
box-shadow: 0 0 0 4px rgba(0,128,90,0.22);
animation: pulse 2s ease-in-out infinite;
}
.pg-ops__title-tag { color: var(--ct-emerald); font-weight: var(--ct-w-semibold); }
.pg-ops__title-sep { color: rgba(255,255,255,0.32); }
.pg-ops__title-name { color: #fff; font-weight: var(--ct-w-semibold); letter-spacing: 0.26em; }
.pg-ops__title-sub {
font-family: var(--ct-font-sans);
font-size: 13.5px;
font-weight: var(--ct-w-regular);
letter-spacing: -0.003em;
color: var(--ct-on-navy-2);
text-transform: none;
margin-left: 4px;
}
.pg-ops__meta {
display: inline-flex;
gap: 16px;
font-family: var(--ct-font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
color: var(--ct-on-navy-3);
text-transform: uppercase;
}
/* Legend — three labelled steps */
.pg-ops__legend {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
flex-wrap: wrap;
padding: 14px 18px;
border-radius: var(--ct-r-md);
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
}
.pg-ops__leg {
display: inline-flex;
align-items: baseline;
gap: 10px;
}
.pg-ops__leg-num {
font-family: var(--ct-font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
color: var(--ct-gold);
}
.pg-ops__leg-text {
font-size: 13.5px;
color: var(--ct-on-navy-2);
font-weight: var(--ct-w-regular);
}
.pg-ops__leg-sep {
color: rgba(255,255,255,0.28);
font-size: 14px;
}
/* The feed — rows of decisions being processed */
.pg-ops__feed {
display: grid;
gap: 0;
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--ct-r-md);
background: rgba(255,255,255,0.02);
overflow: hidden;
margin-bottom: 36px;
}
.pg-ops__row {
display: grid;
grid-template-columns: 36px minmax(0,1.6fr) minmax(0,1.4fr) auto minmax(0,1.2fr);
align-items: center;
gap: 18px;
padding: 14px 20px;
border-bottom: 1px solid rgba(255,255,255,0.06);
transition: background 320ms var(--ct-ease);
position: relative;
}
.pg-ops__row:last-child { border-bottom: 0; }
.pg-ops__row::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: transparent;
transition: background 240ms var(--ct-ease), box-shadow 240ms var(--ct-ease);
}
.pg-ops__row.is-active {
background: rgba(114,200,254,0.06);
}
.pg-ops__row.is-active::before {
background: var(--ct-sky);
box-shadow: 0 0 12px rgba(114,200,254,0.6);
}
.pg-ops__row-idx {
font-family: var(--ct-font-mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--ct-on-navy-3);
}
.pg-ops__row-src {
font-family: var(--ct-font-mono);
font-size: 12px;
letter-spacing: 0.04em;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pg-ops__row-path {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--ct-font-mono);
font-size: 11px;
color: var(--ct-on-navy-2);
letter-spacing: 0.06em;
}
.pg-ops__row-lens {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 22px;
padding: 0 6px;
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--ct-r-sm);
background: rgba(255,255,255,0.04);
font-weight: var(--ct-w-medium);
color: var(--ct-sky);
letter-spacing: 0.06em;
transition: background 240ms var(--ct-ease), border-color 240ms var(--ct-ease);
}
.pg-ops__row.is-active .pg-ops__row-lens {
border-color: var(--ct-sky);
background: rgba(114,200,254,0.10);
}
.pg-ops__row-arrow { color: rgba(255,255,255,0.35); }
.pg-ops__row-status {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 12px;
border: 1px solid;
border-radius: var(--ct-r-pill);
font-family: var(--ct-font-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: var(--ct-w-medium);
white-space: nowrap;
}
.pg-ops__row-dot {
width: 6px; height: 6px;
border-radius: 50%;
}
.pg-ops__row--signed .pg-ops__row-dot {
box-shadow: 0 0 0 3px rgba(0,128,90,0.22);
}
.pg-ops__row--held .pg-ops__row-dot {
box-shadow: 0 0 0 3px rgba(212,175,122,0.22);
}
.pg-ops__row--redacted .pg-ops__row-dot {
box-shadow: 0 0 0 3px rgba(197,48,48,0.22);
}
.pg-ops__row-note {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
font-size: 13px;
color: var(--ct-on-navy-3);
letter-spacing: -0.003em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 1100px) {
.pg-ops__row {
grid-template-columns: 28px minmax(0,1fr) auto;
grid-template-areas:
"idx src status"
"idx path note";
gap: 4px 14px;
padding: 14px 16px;
}
.pg-ops__row-idx { grid-area: idx; }
.pg-ops__row-src { grid-area: src; }
.pg-ops__row-path { grid-area: path; }
.pg-ops__row-status { grid-area: status; align-self: start; }
.pg-ops__row-note { grid-area: note; }
}
@media (max-width: 560px) {
.pg-ops__row {
grid-template-columns: 28px 1fr;
grid-template-areas:
"idx src"
"idx path"
"idx status"
"idx note";
gap: 6px 12px;
}
.pg-ops__row-src { white-space: normal; font-size: 11.5px; }
.pg-ops__row-note { white-space: normal; font-size: 12.5px; }
}
/* Foot — stats + caption */
.pg-ops__foot {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 48px;
align-items: end;
}
@media (max-width: 900px) {
.pg-ops__foot { grid-template-columns: 1fr; gap: 32px; }
}
.pg-ops__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(16px, 2vw, 32px);
}
@media (max-width: 720px) {
.pg-ops__stats { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
}
.pg-ops__stat {
display: flex;
flex-direction: column;
gap: 4px;
}
.pg-ops__stat-num {
font-family: var(--ct-font-sans);
font-weight: var(--ct-w-extralight);
font-size: clamp(32px, 3.6vw, 48px);
color: #fff;
letter-spacing: -0.025em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.pg-ops__stat-label {
font-size: 11.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ct-on-navy-3);
}
.pg-ops__caption {
font-size: 14px;
line-height: 1.55;
color: var(--ct-on-navy-2);
margin: 0;
max-width: 44ch;
}
.pg-ops__caption-eye {
display: block;
font-family: var(--ct-font-mono);
font-size: 10.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ct-gold);
margin-bottom: 8px;
}
/* =========================================================
POLISH PASS — m0009
Goals:
1. Lighter hero background so content reads cleanly
2. Orbital diagram pushed right + stronger left fade so it
no longer clashes with the mechanism list
3. Navigation more present in its default state
4. Tighter contrast on micro-labels
========================================================= */
/* ---- 1. Hero light mode: paler ground, softer aurora ---- */
.pg-hero--light {
/* Sky-mist down to cream — drops the saturated #72C8FE top stop */
background:
linear-gradient(
180deg,
#F4FAFF 0%,
#EAF4FE 22%,
#F2F5F9 48%,
#F7F1E2 78%,
#F2EBDC 100%
);
}
.pg-hero--light .pg-hero__aurora {
/* Halve aurora intensity so left-column copy reads without a wash */
background:
radial-gradient(48% 38% at 14% 24%, rgba(114,200,254,0.28), transparent 70%),
radial-gradient(38% 46% at 84% 14%, rgba(27,63,224,0.10), transparent 70%),
radial-gradient(58% 38% at 65% 88%, rgba(212,175,122,0.24), transparent 70%);
filter: blur(48px);
opacity: 0.85;
}
.pg-hero--light .pg-hero__grain { opacity: 0.10; }
/* Light-mode status bar: lift contrast on labels */
.pg-hero__status:not(.pg-hero__status--dark) {
background: rgba(255,255,255,0.55);
border-bottom-color: rgba(1,14,53,0.08);
color: rgba(1,14,53,0.82);
}
.pg-hero__status:not(.pg-hero__status--dark) .pg-hero__status-readout span { opacity: 0.7; }
/* ---- 2. Orbit: push out, mask the left half so labels don't sit on copy ---- */
.pg-hero__orbit-wrap {
/* Sized down + pushed further right; mask fades the left ~45% */
right: -8%;
width: min(560px, 46vw);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.25) 32%, black 56%, black 100%);
mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.25) 32%, black 56%, black 100%);
}
.pg-hero--light .pg-hero__orbit-wrap {
filter: drop-shadow(0 0 36px rgba(27,63,224,0.10));
opacity: 0.92;
}
/* On narrower desktops the orbit shouldn't crowd the headline */
@media (max-width: 1280px) {
.pg-hero__orbit-wrap { right: -14%; width: min(520px, 46vw); }
}
@media (max-width: 1100px) {
.pg-hero__orbit-wrap { right: -22%; width: 52vw; opacity: 0.55; }
}
/* Keep the mechanism + queries column readable: cap content width so it
sits firmly to the left of the orbit on wide screens */
@media (min-width: 1100px) {
.pg-hero__content { max-width: 640px; }
}
/* ---- 3. Navigation: more present in default (unscrolled) state ---- */
.pg-nav {
background: rgba(1, 14, 53, 0.32);
backdrop-filter: blur(10px) saturate(150%);
-webkit-backdrop-filter: blur(10px) saturate(150%);
border-bottom-color: rgba(255,255,255,0.06);
}
.pg-nav.is-scrolled {
background: rgba(1, 14, 53, 0.85);
border-bottom-color: rgba(255,255,255,0.10);
}
.pg-nav__links a {
color: rgba(255,255,255,0.92);
font-weight: var(--ct-w-medium);
}
.pg-nav__cta {
background: rgba(255,255,255,0.14);
border-color: rgba(255,255,255,0.28);
}
/* Light-hero override: keep nav legible on the pale ground */
body[data-hero-mode="light"] .pg-nav:not(.is-scrolled) {
background: rgba(255,255,255,0.55);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border-bottom-color: rgba(1,14,53,0.08);
}
body[data-hero-mode="light"] .pg-nav:not(.is-scrolled) .pg-nav__links a {
color: rgba(1,14,53,0.82);
}
body[data-hero-mode="light"] .pg-nav:not(.is-scrolled) .pg-nav__links a:hover {
color: var(--ct-navy);
}
body[data-hero-mode="light"] .pg-nav:not(.is-scrolled) .pg-nav__cta {
background: var(--ct-navy);
color: #fff;
border-color: var(--ct-navy);
}
body[data-hero-mode="light"] .pg-nav:not(.is-scrolled) .pg-nav__cta:hover {
background: #06195A;
border-color: #06195A;
}
/* ---- 4. Contrast: tighten micro-labels on the lighter ground ---- */
.pg-hero--light .pg-hero__queries-label { color: rgba(1,14,53,0.7); }
.pg-hero--light .pg-hero__primer-tag { color: var(--ct-navy); }
.pg-hero--light .pg-hero__primer-tag::before { background: var(--ct-navy); }
.pg-hero--light .pg-hero__mech-num { color: #8A6A3A; } /* deeper gold for readability on cream */
.pg-hero--light .pg-hero__mechanism { border-left-color: rgba(1,14,53,0.18); }
.pg-hero--light .pg-hero__mechanism li { border-bottom-color: rgba(1,14,53,0.10); }
/* CTA secondary ghost button — make hierarchy crisp on light ground */
.pg-hero--light .pg-btn--ghost {
background: rgba(255,255,255,0.55);
border-color: rgba(1,14,53,0.20);
backdrop-filter: blur(6px);
}
.pg-hero--light .pg-btn--ghost:hover {
background: #fff;
border-color: var(--ct-navy);
}
/* Query chip in light mode — pull contrast up */
.pg-hero--light .pg-hero__query {
background: rgba(255,255,255,0.78);
border-color: rgba(1,14,53,0.18);
}
.pg-hero--light .pg-hero__query:hover {
background: #fff;
border-color: var(--ct-navy);
}
/* Versus table — pragya column header readability on dark cell */
.pg-versus__cell.is-header.is-pragya { letter-spacing: 0.08em; }
/* Footer brand "Pragya" wordmark — was un-styled (.pragya class only).
Match the nav/cert treatment for a cohesive lockup. */
.pg-foot__brand-mark .pragya,
.pg-foot__brand-mark .pg-foot__brand-pragya {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 1;
color: var(--ct-sky);
letter-spacing: -0.005em;
}
.pg-foot__brand-sep {
color: rgba(255,255,255,0.32);
font-size: 18px;
font-weight: 200;
line-height: 1;
transform: translateY(-1px);
}
.pg-foot__brand-mark img { height: 24px; display: block; }
/* ============================================================
POLISH PASS v2 — May 2026
- Lighten hero light bg so left-column copy lifts
- Push orbit further right + stronger mask so it never crosses copy
- Strengthen nav so it does not feel "silent"
- Tighten contrast across micro-labels, ghost buttons, body copy
- Hide all leftover .pg-ops + .pg-hero__status surfaces
============================================================ */
/* Defensively hide any residual telemetry surfaces */
.pg-ops, .pg-hero__status { display: none !important; }
/* ---- HERO LIGHT BG — paler, calmer, less sky-blue dominance ---- */
.pg-hero--light {
background:
linear-gradient(
180deg,
#FAFCFF 0%,
#F5F8FC 26%,
#F8F4EA 68%,
#F4ECDC 100%
) !important;
}
.pg-hero--light .pg-hero__aurora {
background:
radial-gradient(46% 36% at 12% 22%, rgba(114,200,254,0.18), transparent 72%),
radial-gradient(36% 42% at 86% 12%, rgba(27,63,224,0.07), transparent 72%),
radial-gradient(58% 38% at 70% 92%, rgba(212,175,122,0.18), transparent 72%) !important;
filter: blur(56px);
opacity: 0.75 !important;
}
.pg-hero--light .pg-hero__grain { opacity: 0.06 !important; }
/* h1 sits a touch deeper navy on the paler ground */
.pg-hero--light h1 { color: #050E2C !important; }
.pg-hero--light .pg-hero__mech-text { color: #0A1A4A !important; }
/* ---- ORBIT — push further right + steeper mask so it can never overlap copy ---- */
.pg-hero__orbit-wrap {
right: -14% !important;
width: min(540px, 44vw) !important;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.10) 28%, rgba(0,0,0,0.6) 50%, black 70%) !important;
mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.10) 28%, rgba(0,0,0,0.6) 50%, black 70%) !important;
}
@media (max-width: 1380px) {
.pg-hero__orbit-wrap { right: -22% !important; width: min(500px, 42vw) !important; opacity: 0.78 !important; }
}
@media (max-width: 1180px) {
.pg-hero__orbit-wrap { right: -28% !important; width: 48vw !important; opacity: 0.5 !important; }
}
@media (max-width: 960px) {
.pg-hero__orbit-wrap {
position: relative !important;
right: auto !important;
width: min(420px, 80vw) !important;
opacity: 1 !important;
margin: 8px auto 0 !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
}
/* Keep the left content column firmly capped */
@media (min-width: 1100px) {
.pg-hero__content { max-width: 620px !important; }
}
/* ---- NAV — present, not silent ---- */
.pg-nav {
background: rgba(1, 14, 53, 0.62) !important;
backdrop-filter: blur(18px) saturate(170%) !important;
-webkit-backdrop-filter: blur(18px) saturate(170%) !important;
border-bottom: 1px solid rgba(255,255,255,0.10) !important;
box-shadow: 0 4px 24px rgba(1,14,53,0.18);
}
.pg-nav.is-scrolled {
background: rgba(1, 14, 53, 0.92) !important;
border-bottom-color: rgba(255,255,255,0.14) !important;
box-shadow: 0 6px 30px rgba(1,14,53,0.32);
}
.pg-nav__links a {
color: rgba(255,255,255,0.96) !important;
font-weight: 500 !important;
font-size: 14px;
letter-spacing: 0.005em;
}
.pg-nav__cta {
background: var(--ct-blue) !important;
border-color: var(--ct-blue) !important;
color: #fff !important;
font-weight: 500;
}
.pg-nav__cta:hover {
background: #2E54F0 !important;
border-color: #2E54F0 !important;
}
/* Light-hero variant: keep the nav crisp on pale bg — switch to a clean white pill */
body[data-hero-mode="light"] .pg-nav:not(.is-scrolled) {
background: rgba(255,255,255,0.86) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
border-bottom-color: rgba(1,14,53,0.10) !important;
box-shadow: 0 4px 20px rgba(1,14,53,0.06);
}
body[data-hero-mode="light"] .pg-nav:not(.is-scrolled) .pg-nav__links a {
color: #0A1A4A !important;
}
body[data-hero-mode="light"] .pg-nav:not(.is-scrolled) .pg-nav__brand-pragya {
color: var(--ct-navy) !important;
}
body[data-hero-mode="light"] .pg-nav:not(.is-scrolled) .pg-nav__brand-sep {
color: rgba(1,14,53,0.32) !important;
}
body[data-hero-mode="light"] .pg-nav:not(.is-scrolled) .pg-nav__cta {
background: var(--ct-navy) !important;
border-color: var(--ct-navy) !important;
color: #fff !important;
}
body[data-hero-mode="light"] .pg-nav:not(.is-scrolled) .pg-nav__cta:hover {
background: #06195A !important;
border-color: #06195A !important;
}
/* Progress bar a hair more visible */
.pg-progress { background: linear-gradient(90deg, var(--ct-blue), var(--ct-sky)) !important; height: 2px !important; }
/* ---- CONTRAST CLEANUP ---- */
/* Light-mode hero eyebrow + dot */
.pg-hero--light .pg-hero__eyebrow { color: var(--ct-navy) !important; }
.pg-hero--light .pg-hero__eyebrow .dot { background: var(--ct-blue) !important; }
/* Queries label in light mode — lift from 0.7 to navy */
.pg-hero--light .pg-hero__queries-label { color: var(--ct-navy) !important; opacity: 0.78; }
.pg-hero--light .pg-hero__queries-label::before,
.pg-hero--light .pg-hero__queries-label::after { background: var(--ct-navy); opacity: 0.32; }
/* Light-mode mech num — darker gold */
.pg-hero--light .pg-hero__mech-num { color: #8A6A3A !important; }
/* Mech em (the rotating word in step 01) — solid blue on light, not gradient-faded */
.pg-hero--light .pg-hero__mech-em .pg-hero__rotator-word {
background-image: none !important;
-webkit-text-fill-color: currentColor !important;
text-fill-color: currentColor !important;
color: var(--ct-blue) !important;
}
/* h1 rotator word in light mode — make it solid blue rather than a fading gradient, for confidence */
.pg-hero--light h1 .pg-hero__rotator-word {
background-image: none !important;
-webkit-text-fill-color: currentColor !important;
text-fill-color: currentColor !important;
color: var(--ct-blue) !important;
}
/* Why-section failure rows — tighten dim text */
.pg-why__failure-text { color: var(--ct-ink) !important; }
.pg-why__failure-num { color: #8A6A3A !important; }
/* Generic ghost button — clearer outline on any light surface */
.pg-btn--ghost {
border-width: 1.5px !important;
}
/* Section eyebrows on cream/sky surfaces — pull color up */
.pg-eye { color: var(--ct-navy) !important; opacity: 0.78; }
.is-dark .pg-eye, [data-palette="navy-dominant"] .pg-eye { color: var(--ct-sky) !important; opacity: 1; }
/* ============================================================
POLISH PASS v3 — Editor's cut, May 2026
- Hero stripped to one statement, one lede, one credential, two CTAs
- Section folios hidden across the page
- Hero light bg: one near-white field, single horizon at the bottom
- Claude attestation elevated as a feature card
============================================================ */
/* Kill section folios globally (was a bookbinder affectation) */
.pg-folio { display: none !important; }
/* HERO light ground — single near-white field, one quiet horizon */
.pg-hero--light {
background:
linear-gradient(
180deg,
#FCFDFF 0%,
#FAFBFD 56%,
#F6F1E6 100%
) !important;
}
.pg-hero--light .pg-hero__aurora {
background:
radial-gradient(56% 38% at 18% 22%, rgba(114,200,254,0.12), transparent 75%) !important;
filter: blur(70px);
opacity: 0.85 !important;
}
.pg-hero--light .pg-hero__grain { opacity: 0.04 !important; }
/* Quiet horizon line where sky meets earth */
.pg-hero--light::after {
content: "";
position: absolute;
left: 0; right: 0;
bottom: 22%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(1,14,53,0.12), transparent);
pointer-events: none;
z-index: 0;
}
/* HERO LEDE — give it room and authority */
.pg-hero__lede {
font-family: var(--ct-font-sans);
font-weight: 300;
font-size: clamp(17px, 1.4vw, 19.5px);
line-height: 1.55;
letter-spacing: -0.005em;
color: rgba(1,14,53,0.78);
max-width: 50ch;
margin: 24px 0 32px;
text-wrap: pretty;
}
.pg-hero--dark .pg-hero__lede { color: rgba(255,255,255,0.78); }
.pg-hero__lede em {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 400;
color: var(--ct-blue);
}
.pg-hero--dark .pg-hero__lede em { color: var(--ct-sky); }
/* CLAUDE ATTESTATION — feature card, not a pill */
.pg-hero__claude {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 16px;
width: 100%;
max-width: 540px;
padding: 18px 22px 18px 18px;
margin: 0 0 32px;
background: linear-gradient(135deg, #F4E9D2 0%, #E8D6B5 100%);
border: 1px solid rgba(212,175,122,0.55);
border-radius: 14px;
color: #1B1409;
text-align: left;
cursor: pointer;
box-shadow:
0 1px 0 rgba(255,255,255,0.6) inset,
0 12px 28px rgba(27,20,9,0.10);
transition: transform 220ms var(--ct-ease), box-shadow 220ms var(--ct-ease);
}
.pg-hero__claude:hover {
transform: translateY(-1px);
box-shadow:
0 1px 0 rgba(255,255,255,0.7) inset,
0 18px 34px rgba(27,20,9,0.16);
}
.pg-hero__claude-mark {
width: 40px; height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.55);
border-radius: 50%;
border: 1px solid rgba(27,20,9,0.10);
flex-shrink: 0;
}
.pg-hero__claude-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.pg-hero__claude-eye {
font-family: var(--ct-font-mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(27,20,9,0.65);
font-weight: 500;
}
.pg-hero__claude-line {
font-family: var(--ct-font-sans);
font-weight: 500;
font-size: 14.5px;
line-height: 1.4;
color: #1B1409;
letter-spacing: -0.005em;
}
.pg-hero__claude-line em {
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 400;
color: #6B3F0E;
}
.pg-hero__claude-arrow {
font-size: 18px;
color: #1B1409;
flex-shrink: 0;
transition: transform 220ms var(--ct-ease);
}
.pg-hero__claude:hover .pg-hero__claude-arrow { transform: translateX(3px); }
/* Dark mode card variant */
.pg-hero--dark .pg-hero__claude {
background: linear-gradient(135deg, rgba(212,175,122,0.18) 0%, rgba(212,175,122,0.08) 100%);
border-color: rgba(212,175,122,0.40);
color: #fff;
box-shadow:
0 1px 0 rgba(255,255,255,0.06) inset,
0 12px 28px rgba(0,0,0,0.35);
}
.pg-hero--dark .pg-hero__claude-mark { background: rgba(212,175,122,0.18); border-color: rgba(212,175,122,0.35); }
.pg-hero--dark .pg-hero__claude-mark svg path { fill: #D4AF7A !important; }
.pg-hero--dark .pg-hero__claude-eye { color: rgba(212,175,122,0.78); }
.pg-hero--dark .pg-hero__claude-line { color: #fff; }
.pg-hero--dark .pg-hero__claude-line em { color: #E5C795; }
.pg-hero--dark .pg-hero__claude-arrow { color: #fff; }
@media (max-width: 520px) {
.pg-hero__claude { padding: 14px 16px; gap: 12px; }
.pg-hero__claude-mark { width: 36px; height: 36px; }
.pg-hero__claude-eye { font-size: 9.5px; letter-spacing: 0.18em; }
.pg-hero__claude-line { font-size: 13.5px; }
}
/* HIDE all the old hero pieces we removed (defensive) */
.pg-hero__mechanism,
.pg-hero__primer,
.pg-hero__queries,
.pg-hero__attest { display: none !important; }
/* Slightly tighten h1 line-height for the 3-line statement */
.pg-hero h1 {
font-size: clamp(40px, 5.4vw, 76px);
line-height: 1.04;
letter-spacing: -0.022em;
font-weight: 200;
max-width: 14ch;
margin: 24px 0 0;
}
.pg-hero--light h1 { color: #050E2C !important; }
/* Orbit — let it breathe now that it's unlabelled. Slightly smaller, further right. */
.pg-hero__orbit-wrap {
right: -10% !important;
top: 52% !important;
width: min(520px, 42vw) !important;
opacity: 0.95 !important;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.18) 30%, rgba(0,0,0,0.7) 52%, black 72%) !important;
mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.18) 30%, rgba(0,0,0,0.7) 52%, black 72%) !important;
}
@media (max-width: 1180px) {
.pg-hero__orbit-wrap { right: -22% !important; width: 48vw !important; opacity: 0.45 !important; }
}
@media (max-width: 960px) {
.pg-hero__orbit-wrap {
position: relative !important;
right: auto !important;
top: auto !important;
transform: none !important;
width: min(360px, 70vw) !important;
opacity: 0.9 !important;
margin: 24px auto 0 !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
}
/* Cap left content column on wide screens — even tighter */
@media (min-width: 1100px) {
.pg-hero__content { max-width: 600px !important; }
}
/* CTA stack — generous, editorial */
.pg-hero__ctas {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 8px;
}
/* Update primary CTA tone — restrained, not playful */
.pg-btn--primary {
font-weight: 500;
letter-spacing: 0;
}
/* Eyebrow micro-label — clean, no slogan stacking */
.pg-hero__eyebrow {
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 11px;
font-weight: 500;
font-family: var(--ct-font-mono);
}
.pg-hero__eyebrow .sep { opacity: 0.45; margin: 0 4px; }
/* Hero h1 tuning v3.1 — smaller, wider, lets the sentence flow */
.pg-hero h1 {
font-size: clamp(34px, 3.8vw, 56px) !important;
line-height: 1.08 !important;
letter-spacing: -0.018em !important;
font-weight: 200 !important;
max-width: 22ch !important;
margin: 24px 0 0 !important;
text-wrap: balance;
}
@media (max-width: 720px) {
.pg-hero h1 {
font-size: clamp(30px, 7.6vw, 44px) !important;
max-width: none !important;
}
}
/* Hero h1 v3.2 — big again, 3-line composition.
Wider max-width so each ~22ch line fits on one row instead of re-wrapping. */
.pg-hero h1 {
font-size: clamp(38px, 4.8vw, 68px) !important;
line-height: 1.05 !important;
letter-spacing: -0.02em !important;
font-weight: 200 !important;
max-width: none !important;
margin: 24px 0 0 !important;
text-wrap: pretty;
white-space: normal;
}
.pg-hero h1 br { display: inline; }
@media (max-width: 720px) {
.pg-hero h1 {
font-size: clamp(32px, 8vw, 46px) !important;
}
/* drop the hard breaks so the sentence reflows on small screens */
.pg-hero h1 br { display: none; }
}
/* ============================================================
POLISH PASS v4 — Senior-firm details
Cursor-aware orbit, magnetic CTAs, section progress in nav,
stat count-up, drop caps, edition mark, scroll cue, reg marks.
============================================================ */
/* Smooth out the orbit's transform inheritance from JS */
.pg-hero__orbit-wrap svg {
transition: transform 80ms linear;
transform-origin: 50% 50%;
}
/* Primary CTA + Claude card — magnetic transform applied via JS.
Underlying transitions for inner content kept light. */
.pg-btn--primary, .pg-hero__claude {
will-change: transform;
transition: box-shadow 220ms var(--ct-ease), background 200ms var(--ct-ease);
}
/* ---- Section progress in nav (the "now" indicator) ---- */
.pg-nav__nowat {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 0 18px 0 18px;
border-left: 1px solid rgba(255,255,255,0.18);
margin-left: 18px;
height: 24px;
font-family: var(--ct-font-mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.66);
opacity: 0;
transform: translateY(-2px);
transition: opacity 320ms var(--ct-ease), transform 320ms var(--ct-ease);
pointer-events: none;
}
.pg-nav__nowat.is-visible { opacity: 1; transform: translateY(0); }
.pg-nav__nowat.is-hidden { opacity: 0; transform: translateY(-2px); }
.pg-nav__nowat-eye {
color: var(--ct-emerald);
font-weight: 600;
}
.pg-nav__nowat-name {
color: rgba(255,255,255,0.92);
font-weight: 500;
}
/* Light hero variant */
body[data-hero-mode="light"] .pg-nav:not(.is-scrolled) .pg-nav__nowat {
border-left-color: rgba(1,14,53,0.18);
color: rgba(1,14,53,0.6);
}
body[data-hero-mode="light"] .pg-nav:not(.is-scrolled) .pg-nav__nowat-name {
color: var(--ct-navy);
}
@media (max-width: 980px) {
.pg-nav__nowat { display: none; }
}
/* drop cap removed */
/* ---- Scroll cue at hero bottom ---- */
.pg-hero__cue {
position: absolute;
left: 50%;
bottom: 28px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
pointer-events: none;
z-index: 4;
opacity: 1;
transition: opacity 360ms var(--ct-ease);
}
.pg-hero__cue-label {
font-family: var(--ct-font-mono);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(1,14,53,0.45);
}
.pg-hero--dark .pg-hero__cue-label { color: rgba(255,255,255,0.5); }
.pg-hero__cue-line {
width: 1px;
height: 36px;
background: linear-gradient(to bottom, transparent, rgba(1,14,53,0.4));
position: relative;
overflow: hidden;
}
.pg-hero__cue-line::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 0%, var(--ct-blue) 50%, transparent 100%);
animation: pgCueSlide 2.2s ease-in-out infinite;
}
.pg-hero--dark .pg-hero__cue-line {
background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.35));
}
.pg-hero--dark .pg-hero__cue-line::after {
background: linear-gradient(to bottom, transparent, var(--ct-sky), transparent);
}
@keyframes pgCueSlide {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
@media (max-width: 720px) { .pg-hero__cue { display: none; } }
/* ---- Registration marks in the four corners ---- */
.pg-regmark {
position: fixed;
width: 14px; height: 14px;
color: rgba(1,14,53,0.22);
z-index: 1;
pointer-events: none;
mix-blend-mode: multiply;
}
body[data-hero-mode="dark"] .pg-regmark { color: rgba(255,255,255,0.18); mix-blend-mode: screen; }
.pg-regmark--tl { top: 16px; left: 16px; }
.pg-regmark--tr { top: 16px; right: 16px; }
.pg-regmark--bl { bottom: 16px; left: 16px; }
.pg-regmark--br { bottom: 16px; right: 16px; }
@media (max-width: 720px) { .pg-regmark { width: 10px; height: 10px; } }
/* ---- Wax-seal accent on the Claude card (hover reveal) ---- */
.pg-hero__claude { position: relative; overflow: hidden; }
.pg-hero__claude::after {
content: "";
position: absolute;
top: 50%;
right: -60px;
width: 120px; height: 120px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, rgba(255,240,210,0.55), rgba(212,175,122,0.25) 50%, transparent 70%);
transform: translateY(-50%) scale(0.6);
opacity: 0;
transition: opacity 320ms var(--ct-ease), transform 420ms var(--ct-ease);
pointer-events: none;
}
.pg-hero__claude:hover::after {
opacity: 1;
transform: translateY(-50%) scale(1);
}
/* ---- Focus rings — editorial navy outline, never blurred ---- */
:where(button, a, input, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--ct-blue);
outline-offset: 2px;
border-radius: 4px;
}
/* ---- Hero CTA arrow micro-interaction polish ---- */
.pg-btn .arrow {
display: inline-block;
transition: transform 220ms var(--ct-ease);
}
.pg-btn:hover .arrow { transform: translateX(4px); }
/* ---- A tiny "frame" of the orbit position counter on hover ---- */
.pg-hero__orbit-wrap::before {
content: "Decision Orbit · 08 Lenses";
position: absolute;
top: 18px; right: 18px;
font-family: var(--ct-font-mono);
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(1,14,53,0.42);
opacity: 0;
transition: opacity 320ms var(--ct-ease);
pointer-events: none;
}
.pg-hero__orbit-wrap:hover::before { opacity: 1; }
body[data-hero-mode="dark"] .pg-hero__orbit-wrap::before { color: rgba(255,255,255,0.5); }
/* ---- Footer dateline ---- */
.pg-foot__bottom {
font-family: var(--ct-font-mono);
font-size: 11px;
letter-spacing: 0.10em;
}
/* ============================================================
POLISH v4.1 — Hero spacing + fresh sky
- Remove the thin horizon hairline that sat above the CTAs
- Trim bottom whitespace; full-viewport hero
- Lift the light bg with a fresh sky tone
============================================================ */
/* 1) Kill the horizon hairline (was bottom: 22% — landed across the CTA row) */
.pg-hero--light::after { display: none !important; }
/* 2) Full-viewport hero, balanced top/bottom rhythm */
.pg-hero {
min-height: 100vh !important;
}
.pg-hero__inner {
padding-top: 130px !important;
padding-bottom: 96px !important;
justify-content: center;
}
@media (max-width: 960px) {
.pg-hero { min-height: auto !important; }
.pg-hero__inner { padding-top: 110px !important; padding-bottom: 64px !important; }
}
/* 3) Tighten the gap UNDER the CTA row */
.pg-hero__ctas { margin-bottom: 0 !important; margin-top: 12px !important; }
.pg-hero__claude { margin-bottom: 24px !important; }
.pg-hero__lede { margin-bottom: 24px !important; }
/* 4) Move the scroll cue tighter to the bottom so it doesn't create dead air */
.pg-hero__cue { bottom: 22px !important; }
.pg-hero__cue-line { height: 28px !important; }
/* 5) FRESH SKY — lighter, slightly cooler top, soft cream tail.
Pulls a hint of the brand sky #72C8FE through the top half. */
.pg-hero--light {
background:
linear-gradient(
180deg,
#EFF6FE 0%,
#F3F8FD 28%,
#FAFBFA 58%,
#F7F1E6 100%
) !important;
}
.pg-hero--light .pg-hero__aurora {
background:
radial-gradient(54% 38% at 14% 18%, rgba(114,200,254,0.22), transparent 78%),
radial-gradient(40% 38% at 88% 8%, rgba(27,63,224,0.06), transparent 78%),
radial-gradient(60% 36% at 70% 96%, rgba(212,175,122,0.14), transparent 78%) !important;
filter: blur(72px);
opacity: 0.92 !important;
}
.pg-hero--light .pg-hero__grain { opacity: 0.05 !important; }
/* 6) Subtle "fresh air" particles — barely there. Adds dimension without noise. */
.pg-hero--light .pg-hero__aurora::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(2px 2px at 18% 22%, rgba(114,200,254,0.5), transparent 60%),
radial-gradient(1.5px 1.5px at 72% 32%, rgba(114,200,254,0.4), transparent 60%),
radial-gradient(1.5px 1.5px at 38% 64%, rgba(212,175,122,0.4), transparent 60%),
radial-gradient(2px 2px at 84% 72%, rgba(114,200,254,0.35), transparent 60%);
opacity: 0.5;
pointer-events: none;
}
/* ============================================================
POLISH v4.2 — Calm the motion, lock the nav width
============================================================ */
/* Stop the SVG from inheriting transforms (it sits still now) */
.pg-hero__orbit-wrap svg {
transform: none !important;
transition: none !important;
}
/* Lock the section-indicator slot so long section names
(CAPABILITIES, ATTESTATION, WHAT PRAGYA IS) don't push the
rest of the nav around. */
.pg-nav__nowat {
width: 220px !important;
min-width: 220px !important;
flex-shrink: 0;
justify-content: flex-start;
overflow: hidden;
}
.pg-nav__nowat-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
display: inline-block;
line-height: 1;
}
/* Slot transitions only opacity, never width — eliminates reflow */
.pg-nav__nowat {
transition: opacity 320ms var(--ct-ease);
transform: none !important;
}
@media (max-width: 1100px) {
.pg-nav__nowat { width: 160px !important; min-width: 160px !important; }
.pg-nav__nowat-name { max-width: 120px; }
}
@media (max-width: 980px) {
.pg-nav__nowat { display: none !important; }
}
/* Soften the wax-seal so it isn't paired with motion (now it's the
only effect on the Claude card after we removed the magnetic) */
.pg-hero__claude { transform: none !important; }
.pg-hero__claude::after {
transition: opacity 480ms var(--ct-ease) !important;
transform: translateY(-50%) scale(0.9) !important;
}
.pg-hero__claude:hover::after {
transform: translateY(-50%) scale(1) !important;
}
/* ============================================================
POLISH v4.3 — Method section: drop the pale grey dividers,
let whitespace separate the five steps. Keep the navy top
accent as the only structural mark.
============================================================ */
.pg-method__step {
border-right: 0 !important;
border-bottom: 0 !important;
padding: 32px 28px 32px 0 !important;
}
.pg-method__step::before {
/* keep the top accent — it's the editorial signal of "step N starts here" */
background: var(--ct-navy) !important;
height: 2px !important;
top: 0 !important;
}
.pg-method__step.r-in::before { width: calc(100% - 28px) !important; }
@media (max-width: 900px) {
.pg-method__step {
padding: 24px 0 32px !important;
border-right: 0 !important;
border-bottom: 0 !important;
}
.pg-method__step.r-in::before { width: 100% !important; }
}
/* ============================================================
POLISH v4.4 — Remove edition badge from nav; clean
footer contact layout at narrow widths.
============================================================ */
/* Edition badge: hidden in case any stale DOM is injected */
/* Footer contacts: at narrow widths, always stack vertically
instead of letting two fit and one wrap awkwardly. */
@media (max-width: 980px) {
.pg-foot__contacts {
display: grid !important;
grid-template-columns: 1fr;
gap: 14px !important;
width: 100%;
margin-top: 8px;
}
.pg-foot__contact {
flex-direction: row !important;
align-items: baseline;
gap: 12px;
padding: 12px 16px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
}
.pg-foot__contact-label {
min-width: 56px;
color: var(--ct-gold);
font-family: var(--ct-font-mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.pg-foot__contact-value {
color: #fff;
font-size: 14px;
word-break: break-word;
}
}
@media (max-width: 520px) {
.pg-foot__contact { padding: 10px 14px; }
.pg-foot__contact-value { font-size: 13.5px; }
}
/* ============================================================
POLISH v4.4 — Footer contact layout
- Earlier breakpoint: stack as soon as the three contacts don't
fit comfortably in one row (was 980px → now 1180px)
- Cleaner card-row style on mobile, gold label, white value
============================================================ */
@media (max-width: 1180px) {
.pg-foot__main {
grid-template-columns: 1fr;
gap: 28px;
text-align: left;
}
.pg-foot__contacts {
display: grid !important;
grid-template-columns: 1fr;
gap: 8px;
width: 100%;
margin-top: 4px;
justify-content: start !important;
}
.pg-foot__contact {
flex-direction: row !important;
align-items: baseline;
justify-content: flex-start;
gap: 16px;
padding: 12px 16px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
transition: background 200ms var(--ct-ease), border-color 200ms var(--ct-ease);
}
.pg-foot__contact:hover {
background: rgba(255,255,255,0.07);
border-color: rgba(212,175,122,0.35);
}
.pg-foot__contact-label {
min-width: 56px;
color: var(--ct-gold) !important;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
flex-shrink: 0;
}
.pg-foot__contact-value {
color: rgba(255,255,255,0.92);
font-size: 14.5px;
font-weight: 500;
}
.pg-foot__cta {
align-self: start;
}
}
@media (max-width: 520px) {
.pg-foot__contact { padding: 11px 14px; gap: 12px; }
.pg-foot__contact-label { min-width: 48px; font-size: 9.5px; }
.pg-foot__contact-value { font-size: 13.5px; }
}
/* Bottom row: stack cleanly when narrow */
@media (max-width: 720px) {
.pg-foot__bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
}
/* ============================================================
POLISH v4.5 — Why title: cap line count on very large screens
- Remove hard
; use width + text-wrap: balance instead
- Capped at ~22ch so it always reads as 2 lines on desktop+
============================================================ */
.pg-why__title {
max-width: 22ch !important;
text-wrap: balance;
/* Match Hero h1 scale so this doesn't overshoot on smaller devices */
font-size: clamp(38px, 4.8vw, 68px) !important;
line-height: 1.05 !important;
letter-spacing: -0.022em !important;
}
@media (max-width: 720px) {
.pg-why__title {
max-width: none !important;
font-size: clamp(32px, 8vw, 46px) !important;
}
}
/* ============================================================
POLISH v4.6 — Pull-quote in the What section (Nitin Lodha)
Editorial pull quote, properly composed, NOT a centered .
============================================================ */
.pg-what__quote {
position: relative;
margin: 72px auto 0;
max-width: 760px;
padding: 48px 56px 40px;
background: linear-gradient(180deg, #FCFBF7 0%, #F7F0DE 100%);
border: 1px solid rgba(212,175,122,0.4);
border-left: 3px solid var(--ct-gold);
border-radius: 14px;
box-shadow: 0 12px 32px rgba(1,14,53,0.06);
}
@media (max-width: 720px) {
.pg-what__quote { margin-top: 48px; padding: 36px 28px 32px; max-width: none; }
}
.pg-what__quote-mark {
position: absolute;
top: -8px; left: 28px;
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
font-size: 96px;
line-height: 1;
color: var(--ct-gold);
user-select: none;
pointer-events: none;
}
.pg-what__quote-text {
margin: 0;
font-family: var(--ct-font-serif);
font-style: italic;
font-weight: 300;
font-size: clamp(22px, 2.2vw, 28px);
line-height: 1.4;
color: var(--ct-navy);
letter-spacing: -0.01em;
text-wrap: pretty;
}
.pg-what__quote-text em {
font-style: italic;
color: var(--ct-blue);
font-weight: 400;
}
.pg-what__quote-cite {
display: flex;
align-items: center;
gap: 12px;
margin-top: 28px;
font-family: var(--ct-font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ct-fg-3);
}
.pg-what__quote-cite-rule {
display: inline-block;
width: 32px;
height: 1px;
background: var(--ct-gold);
flex-shrink: 0;
}
.pg-what__quote-cite-name {
font-weight: 600;
color: var(--ct-navy);
}
.pg-what__quote-cite-sep { opacity: 0.4; }
.pg-what__quote-cite-role { font-weight: 400; }
@media (max-width: 520px) {
.pg-what__quote-cite { flex-wrap: wrap; gap: 8px 12px; }
.pg-what__quote-cite-sep { display: none; }
}
/* ============================================================
NAV — mobile compression
============================================================ */
.pg-nav__right {
display: inline-flex;
align-items: center;
gap: 14px;
}
/* CTA short/full label swap */
.pg-nav__cta-short { display: none; }
.pg-nav__cta-full { display: inline; }
/* Mobile: tighten the whole bar, drop the long CTA label */
@media (max-width: 720px) {
.pg-nav { padding: 12px 16px !important; gap: 8px; }
.pg-nav.is-scrolled { padding: 10px 16px !important; }
.pg-nav__brand { gap: 8px; font-size: 14px; }
.pg-nav__brand img { height: 20px; }
.pg-nav__brand-sep { font-size: 16px; }
.pg-nav__right { gap: 8px; }
.pg-nav__cta {
padding: 8px 12px !important;
font-size: 12.5px;
}
.pg-nav__cta-full { display: none; }
.pg-nav__cta-short { display: inline; }
}
/* Very small (≤380px): drop the wordmark image, keep just "Pragya"; tighten further */
@media (max-width: 380px) {
.pg-nav { padding: 10px 12px !important; }
.pg-nav.is-scrolled { padding: 8px 12px !important; }
.pg-nav__brand img,
.pg-nav__brand-sep { display: none; }
.pg-nav__cta { padding: 7px 10px !important; font-size: 12px; }
}