:root, html {
--color-accent: #14502f; --color-accent-100: #eaf1ec; --color-accent-200: #b9d2c2; --color-accent-300: #7fa38e;
--color-accent-400: #e8b94e; --color-accent-500: #14502f; --color-accent-600: #0f4027; --color-accent-700: #073b2b;
--color-accent-800: #0a3327; --color-accent-900: #092f25;
--color-accent-2: #14502f; --color-accent-2-500: #14502f; --color-accent-2-700: #073b2b; --color-accent-2-900: #092f25;
--color-bg: #f7f7f2; --color-text: #17241f; --color-divider: #d9e1da;
}
body { margin: 0; background: var(--color-bg); }
.u { --color-accent: #14502f; --color-accent-100: #eaf1ec; --color-accent-200: #b9d2c2; --color-accent-300: #7fa38e; --color-accent-400: #e8b94e; --color-accent-600: #0f4027; --color-accent-700: #073b2b; --color-accent-900: #092f25; --color-bg: #f7f7f2; --color-text: #17241f; --color-divider: #d9e1da; --gold: #e8b94e; --mark: color-mix(in srgb, #17241f 55%, transparent); --paper: #f2f5f1; --navy: var(--color-accent-900); --navy2: var(--color-accent-700); --blue: var(--color-accent-700); --amber: var(--color-accent-400); --ink: var(--color-text); --muted: color-mix(in srgb, var(--color-text) 62%, transparent); --line: var(--color-divider); --paper: var(--color-bg); font-family: var(--font-body); color: var(--ink); }
.u h1, .u h2, .u h3 { font-family: var(--font-heading); letter-spacing: -0.02em; }
.u a { color: var(--blue); text-decoration: none; }
.u a:hover { color: var(--navy2); }
.u .navlink { color: var(--navy); font-weight: 600; position: relative; }
.u .navlink::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 3px; background: var(--amber); transition: right .28s ease; }
.u .navlink:hover::after { right: 0; }
.u .navlink.on::after { right: 0; }
.u .cta { background: var(--color-accent-700); color: #fff; font-weight: 700; padding: 14px 26px; border: 0; cursor: pointer; font-family: var(--font-heading); font-size: 15px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; display: inline-block; }
.u .cta:hover { background: var(--color-accent-800); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(9, 47, 37,.35); }
@keyframes uRise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
.u [data-reveal] { animation: uRise .75s cubic-bezier(.22,.8,.3,1) both; }
@keyframes uMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.u .track { display: flex; width: max-content; animation: uMarquee 34s linear infinite; }
.u .marquee:hover .track { animation-play-state: paused; }
@keyframes uPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.u .pulse { animation: uPulse 1.6s ease-in-out infinite; }
@keyframes uSweep { from { transform: translateX(-100%); } to { transform: translateX(220%); } }
.u .sweep { position: absolute; top: 0; bottom: 0; width: 32%; background: linear-gradient(90deg, transparent, rgba(214,177,106,.22), transparent); animation: uSweep 9s ease-in-out infinite; pointer-events: none; }
.u [data-spot] { position: relative; isolation: isolate; }
.u [data-spot]::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .45s ease; background: radial-gradient(620px circle at var(--mx,50%) var(--my,50%), rgba(242,183,5,.14), transparent 62%); }
.u [data-spot]:hover::before { opacity: 1; }
.u [data-spot] > * { position: relative; z-index: 1; }
.u .card { background: #fff; border: 1px solid var(--line); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)); }
.u .card:hover { --ty: -6px; box-shadow: 0 18px 44px rgba(29, 45, 61,.16); border-color: #b9d3ee; }
.u .g3 { grid-template-columns: repeat(3, 1fr); }
.u .g2 { grid-template-columns: 1fr 1fr; }
.u .g2a { grid-template-columns: 1fr 1.15fr; }
.u :focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
@media (max-width: 1040px) {
.u .unav { flex-wrap: wrap; row-gap: 14px; }
.u .unav-links { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.u .unav-links .cta { margin-left: auto; }
.u .g3 { grid-template-columns: repeat(2, 1fr); }
.u .g2, .u .g2a { grid-template-columns: 1fr; gap: 40px !important; }
.u section { padding-left: 28px !important; padding-right: 28px !important; }
}
@media (max-width: 700px) {
.u .g3, .u .g2, .u .g2a { grid-template-columns: 1fr; }
.u h1 { font-size: clamp(32px, 9vw, 44px) !important; }
.u h2 { font-size: clamp(26px, 7vw, 34px) !important; }
.u section { padding: 56px 20px !important; }
.u nav, .u footer { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (prefers-reduced-motion: reduce) { .u [data-reveal] { animation: none !important; } .u .track, .u .pulse, .u .sweep { animation: none !important; } .u .card { transform: none !important; } .u [data-spot]::before { display: none; } }
image-slot { display: block; filter: saturate(.88) contrast(1.05) brightness(.97); box-shadow: 0 28px 60px rgba(29, 45, 61, .3); outline: 1px solid rgba(9, 47, 37, .25); outline-offset: -1px; }
/* Industry system: blueprint framing, marks, duotone */
.p .card { background: transparent; border: 1px solid var(--color-divider); border-radius: 0; display: block; }
.p .card:hover { border-color: var(--color-accent); box-shadow: none; }
.p .blueprint > .corner { position: absolute; width: 11px; height: 11px; color: var(--mark); }
.p .blueprint > .corner::before, .p .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.p .blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.p .blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
.p .blueprint > .corner.tl { top: -6px; left: -6px; }
.p .blueprint > .corner.tr { top: -6px; right: -6px; }
.p .blueprint > .corner.bl { bottom: -6px; left: -6px; }
.p .blueprint > .corner.br { bottom: -6px; right: -6px; }
.p .card.blueprint { position: relative; }
.p .cta { border-radius: 0; position: relative; }
.p .cta::before, .p .cta::after { content: ''; position: absolute; left: -6px; right: -6px; height: 11px; pointer-events: none; background-image: linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)); background-size: 1px 11px, 1px 11px, 11px 1px, 11px 1px; background-repeat: no-repeat; }
.p .cta::before { top: -6px; background-position: 5px 0, calc(100% - 5px) 0, 0 5px, 100% 5px; }
.p .cta::after { bottom: -6px; background-position: 5px 0, calc(100% - 5px) 0, 0 5px, 100% 5px; }
.p .cta:hover { transform: none; box-shadow: none; background: var(--color-accent-600); }
.p .cta:active { background: var(--color-accent-700); }
.p .shotframe { position: relative; overflow: visible; border: 1px solid var(--color-divider); border-radius: 0; }
.p image-slot, .p .duotone { position: relative; overflow: hidden; }
.p image-slot { filter: grayscale(1) contrast(1.06) brightness(.99); box-shadow: none; outline: 1px solid var(--color-divider); outline-offset: -1px; }
.p image-slot::after, .p .duotone::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--color-accent); mix-blend-mode: color; }
.p image-slot[id^="prosg-hero-graphic"] { filter: none; }
.p image-slot[id^="prosg-hero-graphic"]::after { display: none; }

.p img.shot { filter: grayscale(1) contrast(1.06); }
.p [style*="border-radius"] { }

.p image-slot[src=""], .u image-slot[src=""] { filter: none; }
.p image-slot[src=""]::after, .u image-slot[src=""]::after { display: none; }

/* Soft corporate treatment: rounded surfaces, no registration marks */
.p .corner, .u .corner { display: none !important; }
.p .cta::before, .p .cta::after, .u .cta::before, .u .cta::after { display: none !important; }
.p .cta, .u .cta { border-radius: 999px !important; }
.p .cta, .u .cta { background: var(--color-accent-700) !important; color: #fff !important; display: inline-block !important; }
.p .cta:hover, .u .cta:hover { background: var(--color-accent-800) !important; }

.p .card, .u .card { border-radius: 14px !important; background: #fff !important; border: 1px solid var(--color-divider) !important; box-shadow: 0 1px 2px rgba(29,45,61,.04) !important; transition: box-shadow .28s ease, transform .28s ease, border-color .28s ease; }
.p .card:hover, .u .card:hover { box-shadow: 0 14px 34px rgba(29,45,61,.10) !important; transform: translateY(-3px); border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-divider)) !important; }
.p .shotframe, .u .shotframe { border-radius: 16px !important; overflow: hidden !important; }
.p .shotframe image-slot, .u .shotframe image-slot, .p .ctile image-slot { border-radius: inherit; }
.p image-slot[style*="inset: 0"], .u image-slot[style*="inset: 0"], .p image-slot[id^="prosg-hero-graphic"], .u image-slot[id^="prosg-hero-graphic"] { border-radius: 0 !important; }
.p .cnav { border-radius: 999px !important; }
.p .ctile { border-radius: 18px !important; overflow: hidden; }
.p .cbody { border-top: 0 !important; }
.p button, .u button, .p input, .u input, .p select, .u select, .p textarea, .u textarea { border-radius: 10px; }

/* ---- Animated technical graphics (replace photo drops) ---- */
.p .gfx, .u .gfx, .gfx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: linear-gradient(152deg, var(--color-accent-900) 0%, var(--color-accent-700) 58%, var(--color-accent-900) 100%); }
.gfx > * { position: absolute; pointer-events: none; }
/* in-flow use: a sized frame the graphic can fill without covering siblings */
.p .gfxframe, .u .gfxframe { position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 260px; overflow: hidden; border-radius: 16px; }
.gfx .g-grid { inset: -20%; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 72px 72px; animation: gfxPan 30s linear infinite; }
.gfx .g-sweep { left: 50%; top: 50%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); background: conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--color-accent-300) 34%, transparent) 34deg, transparent 72deg); animation: gfxSpin 11s linear infinite; }
.gfx .g-ring { left: 50%; top: 50%; border: 1px solid color-mix(in srgb, var(--color-accent-200) 40%, transparent); border-radius: 50%; transform: translate(-50%, -50%); animation: gfxPulse 5.2s ease-out infinite; }
.gfx .g-scan { left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold, var(--color-accent-300)) 70%, transparent), transparent); animation: gfxScan 7s ease-in-out infinite; }
.gfx .g-node { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent-200); box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent-200) 18%, transparent); animation: gfxBlink 3.4s ease-in-out infinite; }
.gfx .g-glyph { inset: 0; display: grid; place-items: center; color: #fff; opacity: .2; }
.gfx .g-glyph svg { width: 44%; height: 44%; animation: gfxFloat 9s ease-in-out infinite; }
.gfx .g-vignette { inset: 0; background: radial-gradient(120% 100% at 50% 40%, transparent 30%, rgba(12,20,28,.62) 100%); }
.p .gfx-light, .u .gfx-light { background: linear-gradient(145deg, #e7eee8 0%, #d6e2d9 58%, #cbd9cf 100%); }
.p .gfx-light .g-grid, .u .gfx-light .g-grid { background-image: linear-gradient(rgba(9,47,37,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(9,47,37,.16) 1px, transparent 1px); }
.p .gfx-light .g-ring, .u .gfx-light .g-ring { border-color: rgba(9, 47, 37, .34); }
.p .gfx-light .g-glyph, .u .gfx-light .g-glyph { color: #092f25; opacity: .3; }
.p .gfx-light .g-vignette, .u .gfx-light .g-vignette { background: radial-gradient(120% 100% at 50% 40%, transparent 42%, color-mix(in srgb, var(--color-accent-900) 12%, transparent) 100%); }
.p .gfx-light .g-sweep, .u .gfx-light .g-sweep { background: conic-gradient(from 0deg, transparent 0deg, rgba(9, 47, 37, .13) 40deg, transparent 80deg); }
@keyframes gfxPan { to { transform: translate3d(72px, 72px, 0); } }
@keyframes gfxSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes gfxPulse { 0% { width: 12%; height: 12%; opacity: .95; } 100% { width: 122%; height: 122%; opacity: 0; } }
@keyframes gfxScan { 0%, 100% { top: 8%; } 50% { top: 92%; } }
@keyframes gfxBlink { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@keyframes gfxFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(-1.5deg); } }
@media (prefers-reduced-motion: reduce) { .gfx * { animation: none !important; } }
/* ---- Hero milestone rail (timeline motif) ---- */
.p .rail, .u .rail { position: relative; background: rgba(2, 37, 29, .55); border-top: 1px solid rgba(232, 185, 78, .38); backdrop-filter: blur(3px); }
.p .rail-in, .u .rail-in { position: relative; max-width: 1260px; margin: 0 auto; padding: 30px 40px 34px; display: grid; gap: 0; }
.p .rail-line, .u .rail-line { position: absolute; left: 40px; right: 40px; top: 52px; height: 1px; background: linear-gradient(90deg, rgba(232,185,78,.9), rgba(232,185,78,.35)); transform: scaleX(0); transform-origin: left center; animation: railDraw 1.5s cubic-bezier(.22,.8,.3,1) .25s forwards; }
.p .rail-step, .u .rail-step { position: relative; padding: 0 26px 0 0; opacity: 0; animation: railIn .7s cubic-bezier(.22,.8,.3,1) forwards; }
.p .rail-step:nth-child(2), .u .rail-step:nth-child(2) { animation-delay: .5s; }
.p .rail-step:nth-child(3), .u .rail-step:nth-child(3) { animation-delay: .72s; }
.p .rail-step:nth-child(4), .u .rail-step:nth-child(4) { animation-delay: .94s; }
.p .rail-step:nth-child(5), .u .rail-step:nth-child(5) { animation-delay: 1.16s; }
.p .rail-num, .u .rail-num { position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #092f25; border: 1px solid rgba(232,185,78,.6); color: #e8b94e; font-family: var(--font-heading); font-size: 14px; font-weight: 700; letter-spacing: .06em; margin-bottom: 14px; }
.p .rail-step::after, .u .rail-step::after { content: ''; position: absolute; left: 21px; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: #e8b94e; opacity: 0; animation: railPing 3.4s ease-out infinite; }
.p .rail-step:nth-child(3)::after, .u .rail-step:nth-child(3)::after { animation-delay: .85s; }
.p .rail-step:nth-child(4)::after, .u .rail-step:nth-child(4)::after { animation-delay: 1.7s; }
.p .rail-step:nth-child(5)::after, .u .rail-step:nth-child(5)::after { animation-delay: 2.55s; }
.p .rail-t, .u .rail-t { font-family: var(--font-heading); font-size: 16.5px; font-weight: 600; color: #fff; line-height: 1.2; }
.p .rail-b, .u .rail-b { font-size: 13.5px; line-height: 1.45; color: #cfe0d4; margin-top: 4px; max-width: 26ch; }
@keyframes railDraw { to { transform: scaleX(1); } }
@keyframes railIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes railPing { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3.4); } }
@media (max-width: 900px) { .p .rail-in, .u .rail-in { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px 0; } .p .rail-line, .u .rail-line { display: none; } }
@media (max-width: 560px) { .p .rail-in, .u .rail-in { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .p .rail-line, .u .rail-line, .p .rail-step, .u .rail-step, .p .rail-step::after, .u .rail-step::after { animation: none !important; opacity: 1; transform: none; } }