/**
 * StackWright renewal landing page.
 *
 * Source of truth: stackwright-renewal-typography-v2 prototype. Values match the
 * prototype; changes are responsive scaling, container-relative artwork, contrast
 * and the inquiry form states.
 */

/* Fonts (self-hosted, latin subset; SIL Open Font License) */
@font-face{font-family:"Space Grotesk";src:url(../../assets/fonts/space-grotesk-latin-var.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url(../../assets/fonts/manrope-latin-var.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../../assets/fonts/ibm-plex-mono-latin-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../../assets/fonts/ibm-plex-mono-latin-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../../assets/fonts/ibm-plex-mono-latin-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
	--paper:#f6f6f4;--ink:#101013;--muted:#5b5c62;--subtle:#6b6b70;--red:#dc332e;--red-dark:#ad2823;--black:#101013;
	--font-display:"Space Grotesk","Segoe UI",Arial,sans-serif;
	--font-body:Manrope,"Segoe UI",Arial,sans-serif;
	--font-mono:"IBM Plex Mono",ui-monospace,"Cascadia Code",Consolas,monospace;
	--split:56%;
	--mast-h:clamp(88px,15vh,134px);
	--foot-h:58px;
	--gutter-l:clamp(30px,8.8vw,170px);
	--ease-out:cubic-bezier(.2,1,.25,1);
}

/* Base */
:where(.sw-landing) *,:where(.sw-landing) *::before,:where(.sw-landing) *::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.sw-landing{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
:where(.sw-landing) :where(p,h1,h2){margin:0}
:where(.sw-landing) :where(button,input,textarea){font:inherit}
:where(.sw-landing) button{cursor:pointer}
:where(.sw-landing) a{color:inherit}
.sw-landing ::selection{background:#e84239;color:#fff}
html:has(.sw-inquiry[open]){overflow:hidden}

.skip-link{position:absolute;top:-80px;left:16px;background:#fff;color:var(--ink);padding:12px 16px;z-index:1000;font-weight:700}
.skip-link:focus{top:12px}
.sw-landing :focus-visible{outline:3px solid var(--red);outline-offset:3px}
.visual-panel :focus-visible,.cta:focus-visible{outline-color:#ff958a}

.site-shell{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;overflow:clip;isolation:isolate}

/* Masthead */
.masthead{height:var(--mast-h);display:grid;grid-template-columns:var(--split) calc(100% - var(--split));position:relative;z-index:3}
.brand{display:flex;align-items:center;margin-left:clamp(30px,6.2vw,120px);width:max-content}
.brand img{display:block;width:clamp(116px,9.9vw,168px);height:auto}
.header-side{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-right:clamp(26px,5vw,110px);background:var(--black);color:#dedede;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.09em}
.online-dot{width:7px;height:7px;flex:none;background:var(--red);border-radius:50%;box-shadow:0 0 0 4px #e3342e24;animation:status-pulse 3.2s ease-in-out infinite}

/* Stage */
.stage{display:grid;grid-template-columns:var(--split) calc(100% - var(--split));min-height:calc(100svh - var(--mast-h) - var(--foot-h));position:relative}
.narrative{position:relative;display:flex;align-items:center;z-index:2;background:var(--paper)}
.narrative::after{content:"";position:absolute;right:0;top:7%;bottom:7%;width:1px;background:linear-gradient(transparent,#ddd,transparent)}
.narrative-inner{width:100%;padding:clamp(8px,2vh,24px) clamp(40px,4vw,76px) clamp(84px,12.5vh,115px) var(--gutter-l);position:relative;z-index:2}

.eyebrow{display:flex;align-items:center;gap:13px;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.14em;color:var(--subtle);margin-bottom:clamp(18px,3.1vh,28px)}
.eyebrow-line{height:1px;width:30px;background:var(--red)}

.sw-landing h1{font-family:var(--font-display);font-size:clamp(52px,min(6.15vw,10vh),124px);font-weight:650;line-height:1.015;letter-spacing:-.071em;font-feature-settings:"kern" 1;margin:0 0 clamp(20px,3.4vh,31px);white-space:nowrap}
.sw-landing h1 em{font-style:normal;font-weight:700;letter-spacing:-.076em;color:var(--red)}
.sw-landing h1 .period{color:var(--ink)}

.intro{font-size:clamp(16px,1.33vw,22px);font-weight:450;line-height:1.66;letter-spacing:-.022em;color:var(--muted);max-width:26em;margin:0 0 12px}
.still-here{font-size:clamp(13px,.9vw,15px);color:var(--subtle);margin:0 0 clamp(24px,3.8vh,34px);line-height:1.6;letter-spacing:-.01em}
.still-here strong{font-weight:700;color:#29292d}

.actions{display:flex;align-items:center;gap:23px;flex-wrap:wrap}
.cta{appearance:none;border:1px solid var(--red);background:var(--red);padding:0 0 0 25px;min-width:223px;min-height:59px;display:flex;align-items:stretch;justify-content:space-between;gap:14px;color:#fff;font-family:var(--font-display);font-size:14px;font-weight:650;letter-spacing:-.025em;border-radius:0;transition:transform .25s,background-color .25s,box-shadow .25s;touch-action:manipulation}
.cta>span:first-child{align-self:center}
.cta:hover{background:var(--red-dark);border-color:var(--red-dark);transform:translateY(-3px);box-shadow:0 12px 30px #dc332e30}
.cta:active{transform:translateY(0)}
.cta-arrow{width:57px;border-left:1px solid #ffffff50;display:grid;place-items:center;font-size:23px;font-weight:300;transition:transform .25s}
.cta:hover .cta-arrow{transform:translate(2px,-2px)}
.action-note{font-size:11px;color:var(--subtle);line-height:1.55;letter-spacing:-.01em}
.action-note strong{color:#262629;font-weight:700}

.bottom-index{position:absolute;bottom:clamp(20px,3.6vh,32px);left:var(--gutter-l);right:clamp(30px,3.2vw,64px);display:flex;align-items:center;gap:18px;color:#8b8b8e;font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:.09em}
.bottom-index-line{width:36px;height:1px;background:#b6b6b9}

/* Visual panel */
.visual-panel{position:relative;background:radial-gradient(circle at 40% 43%,#202024 0%,#131315 37%,#0d0d0f 90%);color:#f6f6f6;min-height:480px;overflow:hidden;isolation:isolate}
.visual-panel::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:73px 73px;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 42%);mask-image:linear-gradient(to right,transparent 0%,#000 42%);opacity:.42}
.visual-panel::after{content:"";width:230px;height:230px;background:var(--red);filter:blur(150px);opacity:.19;position:absolute;top:45%;left:42%;transform:translate(-50%,-50%);pointer-events:none}
.panel-top{position:absolute;top:31px;left:39px;right:45px;z-index:2;display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:.075em;color:#a3a3a8}
.panel-top-plus{font-size:21px;color:#6a6a6e;font-weight:400;line-height:1}

/* The artboard is a size container so the symbol and rings scale with the panel. */
.artboard{position:absolute;inset:0 0 var(--panel-foot,48px);container-type:size;display:flex;align-items:center;justify-content:center}
.technical-circle{position:absolute;border:1px solid #ffffff12;border-radius:50%;top:50%;left:50%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.circle-a{width:112cqmin}
.circle-b{width:88cqmin;border-style:dashed;border-color:#ffffff18;animation:circle-spin 95s linear infinite}
.circle-c{width:57cqmin;border-color:#ffffff1b}
.axis{position:absolute;background:#ffffff0c}
.axis-x{width:200%;height:1px;top:50%;left:-50%}
.axis-y{height:200%;width:1px;left:50%;top:-50%}
.coordinate{position:absolute;color:#77787d;font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:.11em}
.coordinate-top{top:20%;left:11%}
.coordinate-side{bottom:12%;right:8%;writing-mode:vertical-rl}
.crosshair{position:absolute;font-size:18px;font-weight:200;line-height:1;color:#cf37334a}
.crosshair-left{left:15%;top:45%}
.crosshair-right{right:14%;bottom:24%}
.pulse-dot{position:absolute;right:19%;top:31%;background:var(--red);height:5px;width:5px;border-radius:50%;box-shadow:0 0 0 8px #dc332e16}

/* Symbol rig: shadow, motion trails and the animated mark share one coordinate box. */
.symbol-rig{--sym-w:min(35cqw,33cqh,330px);position:absolute;left:50%;top:50%;width:var(--sym-w);aspect-ratio:68.5/139;translate:-50% -50%;z-index:3}
.hero-symbol,.symbol-ghost{position:absolute;inset:0;width:100%;height:100%;rotate:-7deg}
.hero-symbol{filter:drop-shadow(3.7cqmin 3.8cqmin 1.5cqmin #00000059) drop-shadow(0 0 5.5cqmin #ce241d27);animation:symbol-float 7s ease-in-out 1.6s infinite;will-change:transform}
.sw-symbol{display:block;width:100%;height:100%;overflow:visible}
.symbol-ghost{display:block;filter:blur(.8px);opacity:0;animation:ghost-in 1.4s ease-out 1.1s forwards}
.ghost-one{translate:19% -6%;--ghost-o:.09}
.ghost-two{translate:35% -11.5%;--ghost-o:.035}
.symbol-shadow{position:absolute;left:0;right:0;top:104%;height:17%;border-radius:50%;background:#000;filter:blur(21px);opacity:.55;animation:shadow-float 7s ease-in-out 1.6s infinite}

/* Layer-by-layer assembly: the base lands first, the top tile last. */
.sw-layer{transform-box:fill-box;transform-origin:center;animation:assemble 1.05s var(--ease-out) both}
.sw-layer-5{animation-delay:.15s}
.sw-layer-4{animation-delay:.27s}
.sw-layer-3{animation-delay:.39s}
.sw-layer-2{animation-delay:.51s}
.sw-layer-1{animation-delay:.63s}

.panel-bottom{position:absolute;bottom:40px;left:46px;right:46px;z-index:2;border-top:1px solid #ffffff2b;padding-top:22px}
.panel-bottom-label{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.12em;color:#e85b54}
.panel-bottom p{font-family:var(--font-display);font-weight:400;font-size:clamp(11px,.96vw,16px);letter-spacing:-.018em;line-height:1.7;color:#bebec3;max-width:34em;margin:7px 0 0}
.separator{color:var(--red);padding:0 4px}
.panel-side-label{position:absolute;right:14px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-family:var(--font-mono);font-size:8px;font-weight:500;letter-spacing:.12em;color:#ffffff34}

/* Footer */
.footer{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;padding:0 clamp(25px,6.2vw,120px);height:var(--foot-h);border-top:1px solid #e6e6e4;background:#fff;color:#6b6b70;font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:.08em}
.footer>span:last-child{text-align:right}
.footer-mid{color:#737378}
.footer-star{color:var(--red);font-size:12px;padding-left:8px}

/* Keyframes */
@keyframes assemble{0%{opacity:0;transform:translateY(-72%) scale(.94)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes symbol-float{0%,100%{transform:none}50%{transform:translateY(-4.5%) rotate(2deg)}}
@keyframes shadow-float{0%,100%{transform:none;opacity:.55}50%{transform:scaleX(.86);opacity:.4}}
@keyframes ghost-in{to{opacity:var(--ghost-o)}}
@keyframes status-pulse{50%{box-shadow:0 0 0 7px #e3342e0a}}
@keyframes circle-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Large displays: scale the supporting type and CTA with the headline. */
@media (min-width:1800px) and (min-height:900px){
	:root{--foot-h:72px}
	.brand img{width:200px}
	.header-side{font-size:12px}
	.eyebrow{font-size:12px}
	.eyebrow-line{width:40px}
	.intro{font-size:24px}
	.still-here{font-size:16px}
	.cta{min-width:280px;min-height:72px;padding-left:30px;font-size:17px}
	.cta-arrow{width:72px;font-size:28px}
	.action-note{font-size:14px}
	.bottom-index{font-size:11px}
	.panel-top{top:40px;left:52px;right:56px;font-size:11px}
	.panel-top-plus{font-size:26px}
	.coordinate{font-size:11px}
	.panel-bottom{bottom:52px;left:60px;right:60px}
	.panel-bottom-label{font-size:12px}
	.panel-bottom p{font-size:19px}
	.panel-side-label{font-size:10px;right:20px}
	.footer{font-size:11px}
}

/* Narrower split screens */
@media (max-width:1100px){
	:root{--split:54%}
	.narrative-inner{padding-left:6vw;padding-right:24px}
	.sw-landing h1{font-size:clamp(47px,min(5.7vw,10.6vh),76px)}
	.brand{margin-left:6vw}
	.bottom-index{left:6vw}
	.panel-top{left:27px;right:27px}
	.panel-bottom{left:27px;right:27px}
	.panel-bottom p{font-size:12px}
}

/* Short landscape screens keep the split but tighten vertical rhythm. */
@media (min-width:960px) and (max-height:700px){
	.sw-landing h1{line-height:1}
	.intro{line-height:1.55}
	.bottom-index{display:none}
	.narrative-inner{padding-bottom:40px}
	.panel-bottom{bottom:24px;padding-top:16px}
	.visual-panel{--panel-foot:40px}
}

/* Stacked composition for tablets and phones. */
@media (max-width:959px){
	:root{--mast-h:auto;--gutter-l:clamp(18px,6.25vw,48px)}
	.masthead{height:auto;min-height:90px;grid-template-columns:1fr auto;background:var(--paper);padding:14px 0}
	.brand{margin-left:var(--gutter-l)}
	.brand img{width:clamp(97px,15vw,128px)}
	.header-side{padding-right:var(--gutter-l);color:#646467;background:transparent;font-size:8px;letter-spacing:.02em;gap:8px}
	.online-dot{height:5px;width:5px}
	.stage{grid-template-columns:1fr;min-height:0}
	.narrative::after{display:none}
	.narrative-inner{padding:clamp(30px,6vw,64px) var(--gutter-l) clamp(51px,8vw,80px)}
	.eyebrow{margin-bottom:23px}
	.sw-landing h1{font-size:clamp(40px,12.6vw,88px);line-height:1.04;margin-bottom:23px}
	.intro{font-size:clamp(15.5px,2.3vw,19px);line-height:1.65;max-width:30em}
	.still-here{font-size:clamp(12px,1.8vw,14px);margin-bottom:25px}
	.actions{gap:15px}
	.cta{min-width:211px;min-height:56px}
	.bottom-index{display:none}
	.visual-panel{min-height:clamp(500px,80vw,680px);--panel-foot:110px}
	.artboard{top:48px}
	.panel-top{left:var(--gutter-l);right:var(--gutter-l);top:23px}
	.symbol-rig{--sym-w:min(38cqw,40cqh,260px)}
	.coordinate-top{top:8%}
	.coordinate-side{bottom:6%;right:6%}
	.panel-side-label{right:10px}
	.panel-bottom{bottom:24px;left:var(--gutter-l);right:var(--gutter-l)}
	.panel-bottom p{font-size:clamp(12px,1.8vw,15px)}
	.footer{height:auto;min-height:65px;grid-template-columns:1fr auto;padding:16px var(--gutter-l);gap:8px;font-size:8px;letter-spacing:.045em}
	.footer-mid{display:none}
}

@media (max-width:600px){
	.panel-side-label{display:none}
	.crosshair-right{bottom:14%}
}

@media (max-width:400px){
	.header-side{font-size:7px}
	.action-note{font-size:10px}
}

@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	.sw-landing *,.sw-landing *::before,.sw-landing *::after{animation:none!important;transition-duration:.01ms!important}
	.ghost-one{opacity:.09}
	.ghost-two{opacity:.035}
}