/* TITAN.ATLAS R14 (Lauren, Papa 2026-10-26): sigil before the wordmark, accent words, matched sub-headlines,
   promises layout, motion, world clocks. Additive; pages link this after their own styles. */
@font-face{font-family:"NEXTSTEP";src:url("/assets/fonts/nextstep-regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

/* 1. the diamond sigil sits before the TITAN.ATLAS wordmark in the header, never in the footer */
.header .brand{align-items:center;gap:12px}
.header .brand::before{content:"";flex:0 0 auto;width:36px;height:36px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%20role%3D%22img%22%20aria-labelledby%3D%22title%20desc%22%3E%3Ctitle%20id%3D%22title%22%3ETitan%20four-diamond%20sigil%3C%2Ftitle%3E%3Cdesc%20id%3D%22desc%22%3EWhite%20north%2C%20teal%20east%2C%20red%20south%2C%20orange%20west.%3C%2Fdesc%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22gW%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d6e2ea%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22gT%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%236ff0ea%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232fbdb8%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22gR%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ec5a5e%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23c63a3f%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22gO%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ff9a58%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ee6f25%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20x%3D%2242%22%20y%3D%2210%22%20width%3D%2236%22%20height%3D%2236%22%20rx%3D%225%22%20transform%3D%22rotate%2845%2060%2028%29%22%20fill%3D%22url%28%23gW%29%22%2F%3E%3Crect%20x%3D%2274%22%20y%3D%2242%22%20width%3D%2236%22%20height%3D%2236%22%20rx%3D%225%22%20transform%3D%22rotate%2845%2092%2060%29%22%20fill%3D%22url%28%23gT%29%22%2F%3E%3Crect%20x%3D%2242%22%20y%3D%2274%22%20width%3D%2236%22%20height%3D%2236%22%20rx%3D%225%22%20transform%3D%22rotate%2845%2060%2092%29%22%20fill%3D%22url%28%23gR%29%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2242%22%20width%3D%2236%22%20height%3D%2236%22%20rx%3D%225%22%20transform%3D%22rotate%2845%2028%2060%29%22%20fill%3D%22url%28%23gO%29%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;filter:drop-shadow(0 0 10px rgba(255,106,31,.18))}
@media(max-width:600px){.header .brand::before{width:26px;height:26px}.header .brand{gap:9px}}

/* 2. accent word in every headline */
.hl,:is(h1,h2,h3) .hl{color:#ff6a1f;font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit}
.atlas-studio h2 .serif,.desk-page h2 .serif{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;color:#ff6a1f}

/* 3. sub-headlines speak the same language as the hero */
.atlas-studio h2:not(dialog h2){font-family:"NEXTSTEP","Work Sans",sans-serif;font-weight:400;font-synthesis:none;letter-spacing:-.03em;line-height:1.16}
.atlas-studio :is(.section,.story,.closing,.presence-section,.section-head) h2{font-size:clamp(30px,3.5vw,54px)}

/* the Why Atlas lead line is a sub-headline: same face as the hero, Atlas in orange */
.why-atlas-copy .why-atlas-heart,.why-atlas-heart{display:block;font-family:"NEXTSTEP","Work Sans",sans-serif!important;font-weight:400!important;font-size:clamp(28px,3vw,44px)!important;letter-spacing:-.03em!important;line-height:1.18!important;margin:.5em 0 .4em;color:#f3f0e7}

/* closing headline gets room for the thin face */
.atlas-studio .closing h2{max-width:min(100%,860px);font-size:clamp(30px,3.2vw,50px)}

/* 4. world clocks, greyed so the page stays minimal */
.r14-zones{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:0;padding:7px 18px;overflow-x:auto;scrollbar-width:none;
 font:500 10px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(138,153,174,.62);background:rgba(5,9,18,.55);border-bottom:1px solid rgba(138,153,174,.08)}
.r14-zones::-webkit-scrollbar{display:none}
.r14-zones span{white-space:nowrap}
.r14-zones span+span::before{content:"/";padding:0 13px;color:rgba(138,153,174,.28)}
.r14-zones b{font-weight:500;color:rgba(160,175,196,.62);margin-right:7px}
.r14-zones time{font-variant-numeric:tabular-nums}
@media(max-width:900px){.r14-zones{justify-content:flex-start;font-size:9px}}

/* 5. "Atlas, for life." : heading and card side by side, the five promises as one balanced row */
.presence-section .section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:clamp(36px,6vw,96px);row-gap:0;align-items:center}
.presence-section .section-head>div:first-child{display:contents}
.presence-section .section-head>div:first-child>.kicker{grid-column:1;grid-row:1;align-self:end}
.presence-section .section-head>div:first-child>h2{grid-column:1;grid-row:2;align-self:start}
.presence-section .presence-copy{grid-column:2;grid-row:1/span 2;margin-top:0;position:relative;overflow:visible}
.presence-section .presence-lead{grid-column:1/-1;grid-row:3;margin:clamp(46px,5vw,72px) 0 18px;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#ff8a2a}
.presence-section .presence-promises{grid-column:1/-1;grid-row:4;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0;max-width:none}
.presence-section .presence-promises li{position:relative;padding:22px 20px 22px;border:1px solid rgba(145,188,215,.16);border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.01));color:#9ca7b8;font-size:13.5px;line-height:1.6}
.presence-section .presence-promises li:before{content:"";display:block;width:9px;height:9px;margin-bottom:16px;border-radius:50%;background:#ff6a1f;box-shadow:0 0 0 4px rgba(255,106,31,.12),0 0 14px rgba(255,106,31,.55);position:static}
.presence-section .presence-promises b{display:block;color:#f3f0e7;font-weight:600;font-size:15px;line-height:1.35;margin-bottom:6px}
.presence-section .presence-note{grid-column:1/-1;grid-row:5;margin:22px 0 0;max-width:62ch;font-size:11.5px;line-height:1.7;color:#77879d}
.presence-section .presence-note a{color:#c6d0dc;text-decoration:underline;text-decoration-color:rgba(255,106,31,.6);text-underline-offset:3px}
@media(max-width:1180px){.presence-section .presence-promises{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.presence-section .section-head{grid-template-columns:1fr}
 .presence-section .section-head>div:first-child>.kicker,.presence-section .section-head>div:first-child>h2,.presence-section .presence-copy,.presence-section .presence-lead,.presence-section .presence-promises,.presence-section .presence-note{grid-column:1;grid-row:auto}
 .presence-section .presence-copy{margin-top:34px}.presence-section .presence-promises{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.presence-section .presence-promises{grid-template-columns:1fr}}

/* 6. the orange dot that travels the orbit, in and out of the card */
.presence-copy>*:not(.r14-orbit){position:relative;z-index:1}
.r14-orbit{position:absolute;left:-18%;top:-34%;width:136%;height:auto;aspect-ratio:900/560;overflow:visible;pointer-events:none;z-index:0}
.r14-orbit ellipse{fill:none;stroke:rgba(145,188,215,.22);stroke-width:1}
.r14-orbit .r14-halo{fill:rgba(255,106,31,.18)}
.r14-orbit .r14-dot{fill:#ff6a1f}
@media(max-width:900px){.r14-orbit{left:-8%;width:116%;top:-24%}}

/* 7. the little things move: nodes drift, threads flow, sparks travel in, the centre breathes */
.map-node{animation:r14Drift 7s ease-in-out infinite}
.map-node.n2{animation-duration:8.5s;animation-delay:-2s}.map-node.n3{animation-duration:9s;animation-delay:-4s}.map-node.n4{animation-duration:7.5s;animation-delay:-1s}
@keyframes r14Drift{0%,100%{transform:translate(0,0)}25%{transform:translate(3px,-4px)}50%{transform:translate(-2px,3px)}75%{transform:translate(-4px,-2px)}}
.map svg path{stroke-dasharray:3 6;animation:r14Flow 3.4s linear infinite}
@keyframes r14Flow{to{stroke-dashoffset:-27}}
.map svg circle:not(.r14-spark){transform-box:fill-box;transform-origin:center;animation:r14Spin 48s linear infinite}
@keyframes r14Spin{to{transform:rotate(360deg)}}
.map-center{animation:r14Breathe 3.8s ease-in-out infinite}
@keyframes r14Breathe{0%,100%{box-shadow:0 0 0 0 rgba(255,106,31,.0)}50%{box-shadow:0 0 0 9px rgba(255,106,31,.10),0 0 22px rgba(255,106,31,.35)}}
.map svg .r14-spark{fill:#ff6a1f;animation:none;filter:drop-shadow(0 0 4px rgba(255,106,31,.8))}

/* 8. "a little spark": a thread to follow beside the headline, and a spark running along the cards */
#connections{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,5vw,80px);align-items:center}
#connections>.story-intro{grid-column:1;margin-bottom:0}
#connections>.spark-art{grid-column:2;justify-self:end;width:min(100%,520px);aspect-ratio:520/300}
#connections>.story-row{grid-column:1/-1;margin-top:clamp(40px,5vw,64px);position:relative}
.spark-art svg{width:100%;height:100%;overflow:visible}
.spark-art .r14-thread{fill:none;stroke:rgba(255,106,31,.5);stroke-width:1.2;stroke-dasharray:4 7;animation:r14Flow 5s linear infinite}
.spark-art .r14-link{fill:none;stroke:rgba(145,188,215,.2);stroke-width:1}
.spark-art .r14-node{fill:#0d1622;stroke:rgba(255,106,31,.7);stroke-width:1.2}
.spark-art .r14-core{fill:#ff6a1f}
.spark-art .r14-ring{fill:none;stroke:rgba(255,106,31,.5);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:r14Ping 4.5s ease-out infinite}
.spark-art .r14-ring.r2{animation-delay:-1.5s}.spark-art .r14-ring.r3{animation-delay:-3s}
@keyframes r14Ping{0%{transform:scale(.25);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.spark-art text{font:500 9px "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;fill:rgba(150,165,186,.65)}
.spark-art .r14-travel{fill:#ffb27a;filter:drop-shadow(0 0 6px rgba(255,106,31,.9))}
.story-row::after{content:"";position:absolute;top:-1px;left:0;width:90px;height:2px;background:linear-gradient(90deg,transparent,#ff6a1f,transparent);filter:drop-shadow(0 0 6px rgba(255,106,31,.8));animation:r14Run 7s ease-in-out infinite}
@keyframes r14Run{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:calc(100% - 90px);opacity:0}}
.story-item{padding:28px 26px 30px;border:1px solid rgba(145,188,215,.14);border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.03),rgba(255,255,255,.008))}
.story-item:before{top:-3px;left:26px}
.story-item p{max-width:none}
@media(max-width:900px){#connections{grid-template-columns:1fr}#connections>.spark-art{grid-column:1;justify-self:center;margin-top:34px;width:min(100%,420px)}#connections>.story-intro{grid-column:1}}

/* 9. the closing box's dot rides its orbit too */
.closing-orbit:after{transform-origin:140px 196px;animation:r14Orbit 30s linear infinite}
@keyframes r14Orbit{to{transform:rotate(360deg)}}

/* motion off: the site's pause control and reduced-motion both stop everything above */
.atlas-studio[data-motion=off] .map-node,.atlas-studio[data-motion=off] .map svg path,.atlas-studio[data-motion=off] .map svg circle,.atlas-studio[data-motion=off] .map-center,
.atlas-studio[data-motion=off] .spark-art *,.atlas-studio[data-motion=off] .story-row::after,.atlas-studio[data-motion=off] .closing-orbit:after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.map-node,.map svg path,.map svg circle,.map-center,.spark-art *,.story-row::after,.closing-orbit:after{animation:none!important}}