/* SYNOCT // FREEDOM R2.1 · OLD GLORY RED · 25 October 2026
   Existing Egos, MatrixType, Manrope and IBM Plex Mono CSS font stacks retained.
   Company palette: midnight navy / electric cobalt / Old Glory Red / architectural white.
   Titan family sigil colors remain fixed independently: WHITE NORTH, TEAL EAST, RED SOUTH, ORANGE WEST.
*/
:root{
  color-scheme:dark;
  --bg:#050814;--bg2:#0b142a;--ink:#f7faff;
  --muted:#b9c5dc;--soft:#95a6c6;
  --teal:#77a8ff;--teal-2:#3b75f5;--cyan:#b7d6ff;
  --synoct-red:#bf0a30;--titan-orange:#ff791f;--ollie-orange:#ff9a52;
  --orange:var(--titan-orange);--red:var(--synoct-red);--blue:#3a7aff;
  --line:rgba(156,186,244,.17);--line-strong:rgba(180,206,255,.33);
  --glass:rgba(7,19,43,.68);
}
html{scroll-padding-top:106px}
body{background:#050814;color:var(--ink)}
body::before{background:radial-gradient(ellipse 38% 46% at -8% 14%,rgba(24,85,231,.18),transparent 80%),radial-gradient(ellipse 31% 55% at 106% 35%,rgba(191,10,48,.12),transparent 80%),repeating-linear-gradient(0deg,transparent,transparent 71px,rgba(110,152,230,.018) 72px);}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #f7faff;outline-offset:4px;box-shadow:0 0 0 3px var(--synoct-red)}
::selection{background:rgba(191,10,48,.55);color:#fff}
.copy{color:var(--muted)}
.eyebrow{color:#a8c8ff;letter-spacing:.19em}.eyebrow::before{background:var(--red);box-shadow:0 0 11px rgba(191,10,48,.45)}
.arrow{color:var(--synoct-red)}
.top-banner{position:relative;background:linear-gradient(90deg,#12264e 0%,#101d40 43%,#250d19 100%);min-height:42px;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 22px;color:#f4f8ff;border:0;letter-spacing:.14em;font-weight:600}
.top-banner:before{content:'';position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--synoct-red) 0 32%,#f9fbff 32% 66%,#3c7cff 66% 100%)}
.top-banner .bar-star{color:var(--synoct-red);font-size:12px}
.top-banner a{color:#fff;text-decoration:none;text-underline-offset:4px;text-decoration-line:underline;text-decoration-color:rgba(255,255,255,.4)}
.site-header{background:rgba(5,9,22,.90);border-bottom:1px solid rgba(142,180,255,.12);backdrop-filter:blur(24px)}
.header-inner{min-height:90px}
.brand-mark{border:1px solid rgba(127,163,255,.40);background:linear-gradient(135deg,#1d4fc8 0%,#091634 55%,#860d29 100%);border-radius:6px;transform:rotate(-12deg);box-shadow:0 0 25px rgba(37,99,235,.20)}
.brand-mark span{color:#fff;transform:rotate(12deg)}
.brand-name{color:#f6f9ff;letter-spacing:.22em}.brand-name b{color:#74a8ff;font-weight:500}
.brand-caption{color:#9cb2d5}
.nav-link{color:#c0cbe0}.nav-link:hover,.nav-link[aria-current=page]{color:#fff}
.nav-link[aria-current=page]:after{background:var(--synoct-red);box-shadow:0 0 8px var(--synoct-red)}
.nav-cta{border:1px solid rgba(178,198,255,.40);background:linear-gradient(110deg,rgba(48,103,242,.12),rgba(255,255,255,.02));font-weight:700;color:#fff}
.nav-cta:hover{border-color:var(--synoct-red);background:rgba(191,10,48,.12)}
.btn{background:linear-gradient(120deg,var(--synoct-red) 0%,#8c0926 100%);color:white!important;border:1px solid rgba(191,10,48,.32);box-shadow:0 16px 36px rgba(191,10,48,.17);font-weight:700;transition:transform .22s,box-shadow .22s,border-color .22s}
.btn:hover{box-shadow:0 18px 45px rgba(191,10,48,.28);transform:translateY(-2px)}
.btn-outline{border-color:rgba(139,177,255,.62);background:rgba(46,94,193,.14);box-shadow:none}
.btn-outline:hover{background:rgba(48,102,230,.27);border-color:#9fc2ff}
.btn-ghost{background:transparent;color:#ecf3ff!important;border-color:transparent;box-shadow:none}
.btn-ghost:hover{background:rgba(56,112,238,.10);box-shadow:none}
.btn-orange{background:linear-gradient(120deg,var(--titan-orange),#dc5919);border-color:var(--titan-orange);color:#091226!important;box-shadow:0 14px 36px rgba(255,121,31,.16)}
/* HERO / chapter 01: bold type meets red-blue optics */
.hero{min-height:720px;background:radial-gradient(ellipse 48% 58% at 83% 43%,rgba(27,80,204,.19),transparent 82%),radial-gradient(ellipse 44% 64% at 100% 86%,rgba(191,10,48,.10),transparent 85%),linear-gradient(150deg,#070b19,#060a18 62%,#0c1126);border-bottom:0}
.hero:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,transparent 36%,rgba(115,146,255,.035) 36.05%,transparent 36.13%,transparent 67%,rgba(191,10,48,.05) 67.07%,transparent 67.15%);z-index:0}
.hero:after,.atmosphere:after{opacity:.24;background-image:radial-gradient(circle,rgba(202,222,255,.62) .8px,transparent 1px);background-size:39px 39px;mask-image:linear-gradient(90deg,transparent 11%,black 100%)}
.hero-inner{grid-template-columns:1.14fr .86fr;gap:22px;min-height:700px;padding-top:58px;padding-bottom:68px}
.hero-text{max-width:790px}
.freedom-flag{display:flex;align-items:center;gap:4px;width:80px;margin-top:18px;margin-bottom:23px;filter:drop-shadow(0 0 10px rgba(86,131,255,.16))}
.freedom-flag i{height:4px;width:26px;background:var(--synoct-red);display:block;transform:skewX(-24deg)}
.freedom-flag i:nth-child(2){background:#fff}.freedom-flag i:nth-child(3){background:#3d79ff}
.hero h1.freedom-wordmark{font:400 clamp(70px,9.25vw,148px)/.90 var(--head);letter-spacing:-.095em;margin:13px 0 10px;text-shadow:0 0 34px rgba(76,130,255,.12);white-space:nowrap}
.hero h1.freedom-wordmark span{background:linear-gradient(95deg,#fff,#9abfff 59%,#4586ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.hero h1.freedom-wordmark small{display:inline-block;vertical-align:top;margin-left:11px;margin-top:.29em;font:600 clamp(12px,1.3vw,20px)/1 var(--mono);letter-spacing:.12em;color:var(--ink)}
.freedom-statement{margin:13px 0 26px;font:400 clamp(30px,4.2vw,68px)/1.08 var(--head);letter-spacing:-.038em;color:#f8fbff;max-width:13ch}
.freedom-statement i{font-style:normal;color:#91b2ff}
.freedom-statement strong{font-weight:500;color:#f9fbff}
.freedom-statement strong span{color:var(--synoct-red)}
.hero-tag{color:#9fb3d7;font:600 10px/1.7 var(--mono);letter-spacing:.17em;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;text-transform:uppercase}
.hero-tag b{color:var(--synoct-red);font-size:9px;font-weight:400}
.hero .copy{max-width:53ch;color:#b8c5de;font-size:16px;line-height:1.85}
.halo-stage{max-width:610px;aspect-ratio:1.06;position:relative;isolation:isolate}
.halo-stage:before{content:'';position:absolute;inset:2% -5%;z-index:-2;background:radial-gradient(circle at 40% 45%,rgba(34,104,251,.21),transparent 39%),radial-gradient(circle at 72% 57%,rgba(191,10,48,.20),transparent 46%);filter:blur(20px)}
.halo-stage::after{content:'INDEPENDENCE // ENGINEERED';position:absolute;right:4%;bottom:11%;color:#879dc9;font:600 8px/1.3 var(--mono);letter-spacing:.21em;writing-mode:vertical-rl;opacity:.75}
.freedom-field{pointer-events:none;position:absolute;inset:-9%;width:118%;height:118%;z-index:-1;object-fit:contain;opacity:.92;filter:drop-shadow(0 0 21px rgba(21,78,210,.23))}
.tech-globe{width:73%;background:radial-gradient(circle at 49% 48%,rgba(72,117,245,.06),rgba(14,32,69,.24) 54%,transparent 73%);border:1px solid rgba(132,170,255,.23);box-shadow:0 0 110px rgba(32,80,214,.16),inset 0 0 100px rgba(38,111,246,.13)}
.tech-globe:before,.tech-globe:after{border-color:rgba(139,184,255,.32)}
.tech-globe:after{border-color:rgba(191,10,48,.31);transform:rotate(38deg) scaleX(.47)}
.tech-globe .ring{border-color:rgba(145,170,255,.24)}
.tech-globe .node{background:#f8fbff!important;box-shadow:0 0 16px #fff,0 0 30px #4e88ff!important}
.orbit-caption{color:#afbad8!important;font:600 9px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;background:rgba(6,15,35,.66);border:1px solid rgba(166,190,255,.16);border-radius:3px;padding:7px 10px}
.orbit-caption:before{background:var(--synoct-red)!important}
/* BANNER between hero and Ollie */
.freedom-declaration{position:relative;overflow:hidden;background:#BF0A30;color:#ffffff;border-block:4px solid var(--synoct-red);padding:12px 0}
.freedom-declaration .declaration-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;font:700 clamp(10px,1.1vw,13px)/1.3 var(--mono);letter-spacing:.15em}
.freedom-declaration .declaration-inner b{color:#ffffff}.freedom-declaration .declaration-inner em{font-style:normal;color:#ffd9de}
/* Front door, Ollie in the middle */
.front-door{background:linear-gradient(100deg,#0b1430,#081329 48%,#100f24);border-block:1px solid var(--line)}
.front-door>article{border-color:rgba(148,175,240,.22);background:linear-gradient(160deg,rgba(37,68,130,.08),transparent 70%)}
.front-door>article:first-child{border-left:1px solid var(--line)}
.front-door h2{color:#f7faff}
.front-door p{color:#b7c3db}
.front-door .link{color:#a7c5ff}
.ollie-portal{background:radial-gradient(circle at 50% 41%,rgba(255,121,31,.20),transparent 53%),linear-gradient(180deg,rgba(127,67,25,.12),rgba(12,17,42,.3));border-top:3px solid var(--ollie-orange)}
.ollie-portal .eyebrow{color:var(--ollie-orange)!important}
/* Atlas retained as its own product identity, in a quieter separate chapter */
.atlas-chapter{background:radial-gradient(ellipse at 90% 35%,rgba(38,94,236,.19),transparent 56%),linear-gradient(150deg,#070c1b,#0b1630);border-color:var(--line)}
.atlas-wordmark em{color:#ff791f!important;text-shadow:0 0 31px rgba(255,112,31,.12)}
.atlas-wordmark span{color:#f4f8ff}
.atlas-copy .commercial{border-left:3px solid var(--synoct-red);background:rgba(39,80,153,.14);color:#e4ebff}
.orb-zone .atlas-orb{filter:drop-shadow(0 0 27px rgba(50,111,251,.22))}
.atlas-orb-core{background:radial-gradient(circle at 50% 48%,#f3f9ff 0,#72a9ff 2%,#284cb0 5%,transparent 12%),radial-gradient(circle at 42% 46%,rgba(45,103,231,.6),rgba(8,17,49,.36) 51%,rgba(191,10,48,.11));border:1px solid rgba(135,176,255,.44);box-shadow:inset 0 0 56px rgba(65,116,224,.24),0 0 80px rgba(32,79,190,.23)}
.beta-card{background:rgba(10,20,46,.87);border-color:rgba(120,155,244,.3);box-shadow:0 18px 60px rgba(0,0,0,.25)}
.beta-card .eyebrow{color:#ff9b57!important}
.tag{color:#b9d0ff!important;border-color:rgba(135,174,255,.28)!important;background:rgba(44,92,201,.13)!important}
.tag.hold{color:var(--ink)!important;border-color:rgba(191,10,48,.33)!important;background:rgba(191,10,48,.11)!important}
/* State counters and editorial chapters */
.counts{background:#081129;border-color:var(--line)}
.count strong{color:#f5f8ff}
.count.online strong{color:#8bb7ff}.count.build strong{color:var(--synoct-red)}.count.development strong{color:#c0d2ff}
.chapter-heading .section-title strong,.section-title strong{color:#89b1ff}
.service-grid{background:#0b142b;border-color:rgba(139,172,235,.24);border-radius:17px}
.service{background:radial-gradient(ellipse at 100% 0%,rgba(57,108,220,.10),transparent 65%)}
.service:nth-child(2){background:radial-gradient(ellipse at 100% 0%,rgba(191,10,48,.075),transparent 65%)}
.service:hover{background:rgba(41,87,177,.16)}
.service-num{color:#a9c2ff!important}.service h3{color:#f9fbff}
.service-icon svg{stroke:#78a9ff!important}
.service:nth-child(2) .service-icon svg{stroke:var(--synoct-red)!important}
.service-link{color:#b4caff!important}
.work-feature-grid{gap:22px}
.work-card{border-color:rgba(140,174,243,.26)!important;background:#0c142a;box-shadow:0 20px 44px rgba(2,6,21,.18)}
.work-card:hover{border-color:rgba(191,10,48,.48)!important;transform:translateY(-4px)}
.work-art{background:radial-gradient(circle at 55% 40%,rgba(37,98,250,.3),transparent 58%),linear-gradient(145deg,#102552,#080d23)}
.art-host{background:radial-gradient(circle at 60% 39%,rgba(191,10,48,.23),transparent 57%),linear-gradient(145deg,#29101b,#0a1127)}
.art-horizon{background:radial-gradient(circle at 60% 39%,rgba(231,241,255,.16),transparent 57%),linear-gradient(145deg,#12264e,#0a1127)}
.work-art .art-label{color:#f9fbff!important}
.work-body small{color:#a2b9e5!important}
.work-body a{color:#a6c7ff!important}
/* The process, final invitation, footer */
.process{background:linear-gradient(180deg,#0b1229,#080c20);border-color:var(--line)}
.step:before{background:var(--synoct-red)!important;box-shadow:0 0 17px rgba(191,10,48,.3)}
.principle .num{color:var(--ink)!important;border-left:2px solid var(--synoct-red);padding-left:9px}
.final-cta{overflow:hidden;background:radial-gradient(ellipse at 88% 46%,rgba(52,103,249,.23),transparent 56%),radial-gradient(ellipse at 12% 100%,rgba(191,10,48,.11),transparent 46%),#060a18}
.final-cta:after{content:'';pointer-events:none;position:absolute;inset:0;opacity:.5;background:linear-gradient(135deg,transparent 50%,rgba(255,255,255,.035) 50.1%,transparent 50.3%)}
.final-cta h2 span{color:var(--synoct-red)!important}
.site-footer{background:#040714;border-top:1px solid rgba(148,179,243,.25)}
.footer-col h3{color:#fff}
.footer-col a:hover,.footer-bottom a:hover{color:#8eb5ff}
.footer-sigil{color:#c8d6fa}
/* inner pages: use the same visual grammar as the homepage */
.page-hero{background:radial-gradient(ellipse at 87% 29%,rgba(41,100,231,.23),transparent 55%),radial-gradient(ellipse at 0 95%,rgba(191,10,48,.09),transparent 60%),#070c1c;border-bottom:1px solid var(--line)}
.page-hero h1 em{color:#79a7ff!important}
.sub-card{background:linear-gradient(160deg,#101b36,#0a1127)!important;border-color:rgba(144,176,255,.22)!important}
.sub-card .eyebrow{color:#a3c0ff}.sub-card h2{color:#f9fbff}
.project-card{background:#0d162f!important;border-color:rgba(139,173,240,.22)!important}
.project-card:hover{border-color:rgba(191,10,48,.5)!important}
.status{color:#9fc3ff}.status.building{color:var(--ink)}.status.building::before{background:var(--synoct-red)}.status.development{color:#c2d1fa}
.service-icon{border-color:rgba(135,174,255,.3);background:rgba(55,107,226,.10)}
.pill{border-color:rgba(130,169,246,.26)!important;color:#c2d0ee!important}
.pill[aria-pressed=true]{color:#fff!important;background:#2056c4!important;border-color:#4f91ff!important}
.project-search,.field input,.field select,.field textarea{background:#0a1229!important;color:#fff!important;border:1px solid rgba(145,177,248,.33)!important}
.about-quote{background:linear-gradient(130deg,rgba(34,82,188,.20),rgba(191,10,48,.10))!important;border-color:rgba(137,168,255,.3)!important}
.role-card,.form-panel{background:#0b1530!important;border-color:rgba(138,171,244,.25)!important}
.ollie-large{background:radial-gradient(circle at 50% 50%,rgba(255,121,31,.19),transparent 72%)}
.faq details{border-color:rgba(136,171,244,.27)!important}
.hire-contact a{color:#b8d4ff!important}
/* no visual dependency on animations for critical information */
@keyframes freedom-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes freedom-beam{0%,100%{opacity:.65}50%{opacity:1}}
.freedom-field{animation:freedom-float 9s ease-in-out infinite}
.freedom-flag i:nth-child(1){animation:freedom-beam 4s ease-in-out infinite}
/* Responsive corrections */
/* Fine-tuned single-line masthead; no 100px-high mobile announcement. */
.top-banner{gap:9px;white-space:nowrap;min-height:38px;padding:10px 14px}
.banner-divider{color:var(--synoct-red)}.banner-desktop{color:#b5cbf6}
.halo-stage:after{right:-3%;top:18%;bottom:auto;opacity:.48}
@media(max-width:760px){.banner-desktop{display:none}.top-banner{font-size:9px;letter-spacing:.045em;min-height:37px;padding:8px 6px;gap:6px}.halo-stage:after{display:none}}
@media(max-width:1080px){.hero-inner{min-height:620px}.hero h1.freedom-wordmark{font-size:clamp(64px,9.2vw,112px)}.freedom-statement{font-size:clamp(30px,4.2vw,52px)}.halo-stage{max-width:480px}}
@media(max-width:760px){
 .top-banner{letter-spacing:.075em;font-size:9px;flex-wrap:wrap;min-height:42px;padding:10px 12px}
 .hero{min-height:auto}.hero-inner{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:0;padding:72px 0 34px}
 .hero-text{width:100%;max-width:none}
 .hero h1.freedom-wordmark{font-size:clamp(65px,14vw,108px);letter-spacing:-.07em}
 .hero h1.freedom-wordmark small{font-size:11px;margin-left:8px}
 .freedom-statement{font-size:clamp(38px,8vw,61px);margin:8px 0 21px}
 .halo-stage{width:min(100%,460px);max-width:460px;align-self:center;margin-top:10px}
 .freedom-declaration .declaration-inner{font-size:9px;letter-spacing:.075em;flex-wrap:wrap;gap:8px;justify-content:center;text-align:center}
 .front-door>article:first-child{border-left:0}
 .front-door>article{min-height:250px}
 .main-nav{background:#0a1229}
 .nav-link{color:#eff4ff}
 .site-footer{padding-top:45px}
}
@media(max-width:490px){
 .hero-inner{padding-top:53px;padding-bottom:24px}
 .hero h1.freedom-wordmark{font-size:clamp(59px,14vw,78px)}
 .freedom-statement{font-size:clamp(36px,9.4vw,47px);max-width:none}
 .hero-tag{gap:7px;font-size:9px;letter-spacing:.09em}
 .hero .copy{font-size:15px}
 .halo-stage{width:100%;margin-top:6px}
 .orbit-caption{font-size:7px;padding:5px 6px}
 .freedom-declaration{padding:9px 0}
 .front-door>article{min-height:220px}
 .cta-row{gap:11px}
}
@media(prefers-reduced-motion:reduce){.freedom-field,.freedom-flag i:nth-child(1){animation:none!important}}

@font-face{font-family:"Egos";src:url("/assets/fonts/Egos.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Manrope";src:url("/assets/fonts/Manrope-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Manrope";src:url("/assets/fonts/Manrope-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/IBMPlexMono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/IBMPlexMono-600.woff2") format("woff2");font-weight:600;font-display:swap}

@font-face{font-family:"Technovier";src:url("/assets/fonts/technovier-thin-wordmark.woff2") format("woff2");font-display:swap}
:root{--head:"Egos","MatrixType","Inter Display",sans-serif}

.ollie-stage{min-height:400px;border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));backdrop-filter:blur(8px)}
.ollie-figure{width:210px;right:14px;top:14px}
.ollie-meta{left:20px;top:20px}
.ollie-meta b{font-size:16px}
.ollie-meta span{font-size:11px}
.ollie-profile{padding:20px}
/* TITAN.ATLAS wordmark only: its thin face carries just . A I L N S T; everything else uses the original Egos stack */
.atlas-wordmark,.atlas-wordmark *{font-family:"Technovier","Egos","MatrixType",sans-serif}

/* logotype keeps its own face; display headings use the original Egos stack */
.brand-name,.brand-name b{font-family:"Egos","MatrixType",sans-serif}

/* ==== SynOct front-door cell padding v1 (Claire) =================================
   The three cells under the hero ("Engineering the whole system" / "Meet Ollie" / "For the humans behind the processes")
   had 42px 36px, with the first cell's left padding and the last cell's right padding set to 0, so their text touched the
   edges of the strip. They now use the padding of the discipline cards below ("AI that knows its place" ...): 38px 31px on
   wide screens, 29px 22px under 1140px, 31px when stacked, 27px under 490px.
   Because more padding leaves less room, and the three-column row already overflowed the page between 761px and about 900px
   (measured on the live page: horizontal scroll, text cut off by up to 39px), the cells now stack from 920px down instead
   of 760px, with the same stacked rules the page already uses under 760px. Nothing else about the cells changes.
   ================================================================================ */
.front-door>article,.front-door>article:first-child,.front-door>article:last-child{padding:38px 31px}
@media(max-width:1139px){.front-door>article,.front-door>article:first-child,.front-door>article:last-child{padding:29px 22px}}
@media(max-width:920px){
  .front-door{grid-template-columns:1fr}
  .front-door>article,.front-door>article:first-child,.front-door>article:last-child{border-right:0;border-bottom:1px solid var(--line);padding:31px}
  .front-door>article:last-child{border-bottom:0}
  .front-door h2{font-size:27px}
  .front-door>.ollie-portal{min-height:250px!important;padding:31px!important}
  .ollie-portal img{height:122px}
}
@media(max-width:490px){.front-door>article,.front-door>article:first-child,.front-door>article:last-child{padding:27px}.front-door>.ollie-portal{padding:27px!important}}
/* ==== end SynOct front-door cell padding v1 ===================================== */