/* ==========================================================================
   PATOMIC LABS — Page components
   ========================================================================== */

/* ============================================================ HOME HERO == */
.hero{position:relative;overflow:hidden;padding-block:clamp(52px,6.5vw,92px) clamp(56px,7vw,100px)}
.hero .wrap{position:relative}

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(38px,5vw,72px);
  align-items:center;
}

.hero h1{max-width:16ch}
.hero__sub{margin-top:24px;max-width:52ch;font-size:clamp(16px,1.4vw,18.5px);line-height:1.62}

.hero__seal{
  display:inline-flex;align-items:center;gap:11px;
  margin-top:34px;padding:9px 16px 9px 12px;
  border:1px solid var(--royal-line);border-radius:100px;
  background:var(--royal-soft);
}
.hero__seal svg{width:17px;height:17px;color:var(--royal-ink);flex-shrink:0}
.hero__seal span{font-size:13.5px;color:var(--royal-ink);font-weight:500;letter-spacing:.01em}

@media (max-width:940px){
  .hero__grid{grid-template-columns:1fr;gap:44px}
}

/* ====================================================== THE AMENDMENT === */
/* Before / after, set as a patent-prosecution redline */
.amend{
  display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(18px,2.4vw,30px);
  align-items:stretch;
}
.amend__panel{
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(24px,2.6vw,34px);background:var(--ink-2);
  display:flex;flex-direction:column;gap:16px;
}
.amend__panel--new{border-color:var(--cyan-line);background:linear-gradient(180deg,var(--cyan-soft),transparent 62%),var(--ink-2)}
.amend__text{font-size:clamp(17px,1.7vw,21px);line-height:1.42;color:var(--paper-2)}
.amend__panel--old .amend__text{text-decoration:line-through;text-decoration-color:rgba(230,90,90,.6);text-decoration-thickness:1.5px;color:var(--dim)}
.amend__panel--new .amend__text{color:var(--paper);font-weight:500}
.amend__arrow{display:flex;align-items:center;color:var(--cyan)}
/* The turn of the argument, stated before the two panels demonstrate it. */
.amend__lead{
  max-width:760px;
  margin:0 0 clamp(46px,5.4vw,76px);
  font-family:var(--display);font-weight:700;
  font-size:clamp(25px,3vw,38px);line-height:1.22;letter-spacing:-.025em;
  color:var(--paper);
}
.amend__lead em{font-style:normal;color:var(--cyan);white-space:nowrap}

@media (max-width:820px){
  .amend{grid-template-columns:1fr;gap:14px}
  .amend__arrow{justify-content:center;transform:rotate(90deg)}
}

/* ========================================================== LEVERAGE ==== */
.leverage{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.leverage__item{background:var(--ink-2);padding:clamp(24px,2.5vw,32px)}
.leverage__item .field{display:block;margin-bottom:18px}
.leverage__item h3{margin-bottom:10px}
.leverage__item p{font-size:14.5px}

@media (max-width:900px){.leverage{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.leverage{grid-template-columns:1fr}}

/* ============================================================= STATS ==== */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.stat__num{
  font-family:var(--display);font-size:clamp(46px,6vw,76px);
  line-height:1;color:var(--paper);letter-spacing:-.03em;
}
.stat__num span{color:var(--cyan)}
.stat__label{font-size:14px;color:var(--dim);margin-top:12px;max-width:24ch}
.stat + .stat{padding-left:clamp(20px,3vw,40px);border-left:1px solid var(--line)}

@media (max-width:700px){
  .stats{grid-template-columns:1fr;gap:26px}
  .stat + .stat{padding-left:0;padding-top:26px;border-left:0;border-top:1px solid var(--line)}
}

/* Split: prose + stats */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:40px}}

/* ============================================== PROCESS (numbered rail) = */
.rail{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.rail::before{content:"";position:absolute;top:7px;left:0;right:0;height:1px;background:var(--line)}
.rail__step{position:relative;padding:30px 20px 0 0}
.rail__dot{
  position:absolute;top:0;left:0;width:15px;height:15px;border-radius:50%;
  background:var(--ink);border:1.5px solid var(--cyan-line);
}
.rail__step .field{display:block;margin-bottom:12px}
.rail__step h3{font-size:17px;margin-bottom:8px}
.rail__step p{font-size:14px;color:var(--dim)}

/* A craft runs the line, pausing to light each step, and loops. */
.rail__beam{
  position:absolute;top:7px;left:10%;
  transform:translate(-50%,-50%);
  pointer-events:none;z-index:2;
  animation:beamRun 15s cubic-bezier(.5,0,.2,1) infinite;
}
.rail__trail{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:96px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,rgba(76,108,255,.55) 45%,var(--cyan));
  filter:blur(.3px);
}
.rail__head{
  position:relative;display:block;width:22px;height:12px;
  background:linear-gradient(90deg,#8FE4FF,#EEF1FF);
  clip-path:polygon(0 18%,62% 0,100% 50%,62% 100%,0 82%,26% 50%);
  filter:drop-shadow(0 0 8px rgba(0,170,230,.95)) drop-shadow(0 0 18px rgba(76,108,255,.6));
}
@keyframes beamRun{
  0%   {left:-8%}
  5%   {left:10%}
  14%  {left:10%}
  23%  {left:30%}
  32%  {left:30%}
  41%  {left:50%}
  50%  {left:50%}
  59%  {left:70%}
  68%  {left:70%}
  77%  {left:90%}
  86%  {left:90%}
  95%  {left:108%}
  100% {left:108%}
}

/* Each step lights as the craft reaches it */
.rail__step .rail__dot{
  background:var(--ink);border:1.5px solid var(--cyan-line);
  animation:dotLit 15s linear infinite;
}
@keyframes dotLit{
  0%,4%   {background:var(--ink);border-color:var(--cyan-line);box-shadow:none}
  6%,14%  {background:var(--cyan);border-color:var(--cyan);
           box-shadow:0 0 0 5px rgba(0,170,230,.16),0 0 18px rgba(0,170,230,.75)}
  18%,100%{background:var(--ink);border-color:var(--cyan-line);box-shadow:none}
}
.rail__step h3{animation:headLit 15s linear infinite}
@keyframes headLit{
  0%,4%   {color:var(--paper)}
  6%,14%  {color:#8FE4FF}
  18%,100%{color:var(--paper)}
}
.rail__step:nth-child(1) .rail__dot,.rail__step:nth-child(1) h3{animation-delay:0s}
.rail__step:nth-child(2) .rail__dot,.rail__step:nth-child(2) h3{animation-delay:-13.65s}
.rail__step:nth-child(3) .rail__dot,.rail__step:nth-child(3) h3{animation-delay:-12.3s}
.rail__step:nth-child(4) .rail__dot,.rail__step:nth-child(4) h3{animation-delay:-10.95s}
.rail__step:nth-child(5) .rail__dot,.rail__step:nth-child(5) h3{animation-delay:-9.6s}

@media (prefers-reduced-motion:reduce){
  .rail__step .rail__dot,.rail__step h3{animation:none}
  .rail__beam{display:none}
}

@media (max-width:940px){
  .rail{grid-template-columns:1fr;gap:0}
  .rail::before{top:0;bottom:0;left:7px;right:auto;width:1px;height:auto}
  .rail__step{padding:0 0 34px 34px}
  .rail__step:last-child{padding-bottom:0}
  .rail__beam{left:7px;top:0;animation-name:beamRunV}
  .rail__head{transform:rotate(90deg)}
  .rail__trail{right:auto;left:50%;top:auto;bottom:8px;width:3px;height:74px;
    transform:translateX(-50%);
    background:linear-gradient(180deg,transparent,rgba(76,108,255,.55) 45%,var(--cyan));}
  @keyframes beamRunV{
    0%{top:-6%} 5%{top:10%} 14%{top:10%} 23%{top:30%} 32%{top:30%}
    41%{top:50%} 50%{top:50%} 59%{top:70%} 68%{top:70%}
    77%{top:90%} 86%{top:90%} 95%{top:106%} 100%{top:106%}
  }
}

/* ========================================================== TIMELINE ==== */
.timeline{border-top:1px solid var(--line);position:relative}
.timeline::before{
  content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;
  background:var(--line);
}
.timeline::after{
  content:"";position:absolute;left:3px;top:0;width:3px;height:88px;border-radius:3px;
  background:linear-gradient(180deg,transparent,var(--volt) 45%,var(--cyan) 78%,transparent);
  box-shadow:0 0 12px rgba(76,108,255,.5);
  animation:spineRun 13s cubic-bezier(.6,.02,.35,1) infinite;pointer-events:none;
}
@keyframes spineRun{
  0%{top:-96px;opacity:0}
  6%{opacity:1}
  52%{top:100%;opacity:0}
  100%{top:100%;opacity:0}
}
@media (max-width:640px){.timeline::before,.timeline::after{display:none}}
.tl__row{
  display:grid;grid-template-columns:132px 1fr;
  gap:clamp(18px,3vw,44px);
  padding:clamp(22px,2.6vw,32px) 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.tl__weeks{position:relative;padding-left:24px}
.tl__weeks::before{
  content:"";position:absolute;left:0;top:5px;width:9px;height:9px;
  border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px var(--ink-1);
}
.tl__row:last-child .tl__weeks::before{background:var(--royal)}
.tl__body h3{margin-bottom:8px}
.tl__body p{font-size:15px;color:var(--paper-2)}
.tl__tag{
  display:inline-block;margin-top:12px;padding:4px 11px;border-radius:100px;
  background:var(--cyan-soft);border:1px solid var(--cyan-line);
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan);
}
.tl__tag--royal{background:var(--royal-soft);border-color:var(--royal-line);color:var(--royal-ink)}

@media (max-width:640px){
  .tl__row{grid-template-columns:1fr;gap:12px}
}

/* ========================================================= VERTICALS ==== */
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,20px)}
.vcard{
  display:block;position:relative;overflow:hidden;
  transition:border-color .2s ease,background-color .2s ease;
}
.vcard:hover{border-color:var(--cyan-line);background:var(--ink-3)}
.vcard .field{display:block;margin-bottom:16px}
.vcard h3{font-size:clamp(19px,1.9vw,23px);margin-bottom:10px}
.vcard__list{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--dim)}

@media (max-width:720px){.vgrid{grid-template-columns:1fr}}

/* Full vertical detail blocks */
.vblock{padding-block:clamp(52px,6vw,84px);border-bottom:1px solid var(--line)}
.vblock__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,64px)}
.vblock .field{display:block;margin-bottom:16px}
.vblock h2{margin-bottom:18px}
.vblock__items{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.vblock__item{background:var(--ink-2);padding:16px 20px}
.vblock__item strong{display:block;font-size:15px;margin-bottom:3px;color:var(--paper)}
.vblock__item span{font-size:13.5px;color:var(--dim)}

@media (max-width:860px){.vblock__grid{grid-template-columns:1fr;gap:32px}}

/* =========================================================== PRICING ==== */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);align-items:start}
.plan{position:relative;display:flex;flex-direction:column;height:100%}
.plan--featured{
  border-color:var(--cyan-line);
  background:linear-gradient(180deg,rgba(0,170,230,.07),transparent 46%),var(--ink-2);
}
.plan__badge{
  position:absolute;top:-11px;left:clamp(22px,2.4vw,30px);
  padding:3px 12px;border-radius:100px;
  background:var(--cyan);color:#04121C;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.plan .field{display:block;margin-bottom:14px}
.plan h3{font-size:20px;margin-bottom:14px}
.plan__price{
  font-family:var(--display);font-size:clamp(34px,3.6vw,44px);
  color:var(--paper);line-height:1;letter-spacing:-.02em;margin-bottom:6px;
}
.plan__price small{font-family:var(--sans);font-size:13px;color:var(--dim);letter-spacing:0;margin-left:8px}
.plan__desc{font-size:14.5px;margin-bottom:22px;flex-shrink:0}
.plan__inc{font-size:13px;color:var(--dim);margin-bottom:12px}
.plan__list{margin-bottom:26px;flex:1}
.plan__list li{
  position:relative;padding-left:22px;font-size:14.5px;color:var(--paper-2);
  padding-block:6px;
}
.plan__list li::before{
  content:"";position:absolute;left:0;top:14px;width:9px;height:1px;background:var(--cyan);
}
.plan .rule{margin-block:4px 20px}

@media (max-width:940px){.plans{grid-template-columns:1fr;gap:26px}.plan__badge{left:24px}}

/* ========================================================= LICENSING ==== */
.licensing{border-color:var(--royal-line);background:linear-gradient(180deg,rgba(59,91,255,.09),transparent 55%),var(--ink-2)}
.licensing .field{display:block;margin-bottom:16px}
.licensing__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-block:28px}
.licensing__grid > div{background:var(--ink-1);padding:22px}
.licensing__grid .field{margin-bottom:10px}
.licensing__grid p{font-size:14.5px}
.licensing__note{font-size:13.5px;color:var(--dim);margin-bottom:24px}

@media (max-width:760px){.licensing__grid{grid-template-columns:1fr}}

/* ============================================================ WHO FOR === */
.whofor{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,22px)}
@media (max-width:820px){.whofor{grid-template-columns:1fr}}

/* ====================================================== TESTIMONIALS ==== */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,22px)}
.quote{display:flex;flex-direction:column}
.quote__mark{font-family:var(--display);font-weight:700;font-size:46px;line-height:.75;color:var(--cyan);opacity:.55;margin-bottom:12px;height:24px}
.quote__text{font-size:15px;line-height:1.62;color:var(--paper-2);flex:1;margin-bottom:22px}
.quote__by{padding-top:18px;border-top:1px solid var(--line)}
.quote__name{color:var(--paper);font-weight:600;font-size:14.5px}
.quote__role{font-size:13px;color:var(--dim);margin-top:2px}

@media (max-width:900px){.quotes{grid-template-columns:1fr}}

/* ============================================================== CLAIM === */
/* Closing statement set as a patent claim — used once per site */
.claim{
  border:1px solid var(--line-2);border-radius:var(--radius-lg);
  background:var(--ink-2);
  padding:clamp(30px,4vw,54px);
  position:relative;
}
.claim .field{display:block;margin-bottom:22px}
.claim__body{
  font-family:var(--display);
  font-size:clamp(22px,2.8vw,36px);line-height:1.28;color:var(--paper);
  letter-spacing:-.015em;max-width:22ch;
}
.claim__list{margin-top:24px;display:grid;gap:10px;max-width:60ch}
.claim__list li{
  display:grid;grid-template-columns:32px 1fr;gap:12px;
  font-size:15.5px;color:var(--paper-2);
}
.claim__list .mono{color:var(--cyan);font-size:13px;padding-top:3px}

/* ============================================================== FAQ ===== */
.faq{border-top:1px solid var(--line);max-width:900px}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:24px 0;text-align:left;
}
.faq__q h3{font-size:clamp(16.5px,1.6vw,19px);color:var(--paper-2);transition:color .18s ease}
.faq__item.is-open .faq__q h3{color:var(--cyan)}
.faq__q:hover h3{color:var(--paper)}
.faq__sign{position:relative;width:15px;height:15px;flex-shrink:0;margin-top:5px}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;background:var(--cyan);transition:transform .25s ease;
}
.faq__sign::before{top:7px;left:0;width:15px;height:1.5px}
.faq__sign::after{left:7px;top:0;width:1.5px;height:15px}
.faq__item.is-open .faq__sign::after{transform:rotate(90deg)}
.faq__a{overflow:hidden;max-height:0;transition:max-height .3s cubic-bezier(.4,0,.2,1)}
.faq__a p{padding-bottom:26px;font-size:15.5px;color:var(--paper-2);max-width:74ch}
.faq__a p + p{margin-top:-10px;padding-bottom:26px}

/* ========================================================== CONTACT ===== */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,4.5vw,64px);align-items:start}
.contact__row{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.contact__row:first-of-type{border-top:1px solid var(--line)}
.contact__ico{
  width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--radius);color:var(--cyan);
}
.contact__row strong{display:block;font-size:12px;color:var(--dim);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.contact__row a,.contact__row span{display:block;font-size:15px;color:var(--paper);transition:color .15s ease}
.contact__row a + a{margin-top:4px}
.contact__row a:hover{color:var(--cyan)}

.form h3{margin-bottom:8px}
.form > p{font-size:14.5px;margin-bottom:26px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f{margin-bottom:16px}
.f label{display:block;font-size:13px;color:var(--paper-2);margin-bottom:7px;font-weight:500}
.f input,.f textarea,.f select{
  width:100%;padding:12px 14px;
  background:var(--ink);border:1px solid var(--line-2);border-radius:var(--radius);
  color:var(--paper);font-family:var(--sans);font-size:15px;
  transition:border-color .15s ease,background-color .15s ease;
}
.f textarea{resize:vertical;min-height:110px}
.f select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2300AAE6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.f select option{background:#0A1120;color:#E9EEF6}
.f input::placeholder,.f textarea::placeholder{color:#5F718C}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-color:var(--cyan);background:var(--ink-1)}
.form__note{font-size:12.5px;color:var(--dim);margin-top:14px}

@media (max-width:880px){
  .contact{grid-template-columns:1fr;gap:44px}
  .field-row{grid-template-columns:1fr}
}

/* ============================================================= BLOG ===== */
.blog{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,22px)}
.blog__card{display:flex;flex-direction:column;transition:border-color .2s ease,background-color .2s ease}
a.blog__card:hover{border-color:var(--cyan-line);background:var(--ink-3)}
.blog__meta{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.tag{
  padding:3px 10px;border-radius:100px;background:var(--cyan-soft);border:1px solid var(--cyan-line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan);
}
.tag--muted{background:transparent;border-color:var(--line);color:var(--dim)}
.blog__date{font-size:12.5px;color:var(--dim);font-family:var(--mono)}
.blog__card h3{margin-bottom:10px}
.blog__card p{font-size:14.5px;flex:1;margin-bottom:20px}
.blog__link{font-size:13.5px;color:var(--cyan);font-weight:600}
.blog__link--muted{color:var(--dim)}

@media (max-width:900px){.blog{grid-template-columns:1fr}}

/* ============================================================= POST ===== */
.post{max-width:700px}
.post__lede{font-size:clamp(18px,1.8vw,21px);line-height:1.55;color:var(--paper);margin-bottom:34px}
.post h2{font-size:clamp(21px,2.2vw,27px);margin:44px 0 16px}
.post p{margin-bottom:18px;font-size:16.5px;line-height:1.72;max-width:none}
.post ul{margin:0 0 22px;display:grid;gap:12px}
.post ul li{position:relative;padding-left:24px;font-size:16px;line-height:1.6}
.post ul li::before{content:"";position:absolute;left:0;top:12px;width:12px;height:2px;border-radius:2px;background:var(--cyan)}
.post__by{display:flex;align-items:center;gap:14px;margin-top:48px;padding-top:26px;border-top:1px solid var(--line)}
.post__badge{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:var(--cyan-soft);border:1px solid var(--cyan-line);
  font-family:var(--mono);font-size:13px;color:var(--cyan);
}

/* ============================================================= ABOUT ==== */
.about__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,22px)}
@media (max-width:820px){.about__grid{grid-template-columns:1fr}}

/* ============================================================== CTA ===== */
.cta-band{text-align:center}
.cta-band h2{max-width:20ch;margin-inline:auto}
.cta-band p{margin-inline:auto;margin-top:16px}
.cta-band .btn-row{justify-content:center}

/* =========================================================== UTILITY ==== */
.center{text-align:center}
.note{
  font-size:13.5px;color:var(--dim);margin-top:26px;
  padding-left:16px;border-left:1px solid var(--cyan-line);max-width:72ch;
}
.note--plain{padding-left:0;border-left:0}
.pull{
  font-family:var(--display);font-size:clamp(22px,2.6vw,32px);line-height:1.3;
  color:var(--paper);letter-spacing:-.015em;max-width:24ch;
}
.mt-lg{margin-top:clamp(32px,4vw,52px)}


/* ======================================================== THE SAMENESS === */
.same{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,64px);align-items:center}
.same__note{
  margin-top:24px;padding-top:22px;border-top:1px solid var(--line);
  font-size:clamp(16px,1.5vw,18px);color:var(--paper-2);max-width:44ch;
}
.same__note strong{color:var(--paper)}

/* Pinned notes — the credentials everyone already has, stuck on a board */
.notes{
  position:relative;display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(12px,1.6vw,20px);padding:12px 0;
}
.pinned{
  position:relative;
  padding:26px 20px 18px;
  min-width:132px;
  background:linear-gradient(160deg,#F6F1DE,#E4DCC2);
  color:#2A2A22;
  font-weight:600;font-size:15px;text-align:center;
  border-radius:2px;
  box-shadow:0 10px 22px rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.35);
  transform:rotate(var(--rot,0deg));
  transition:transform .3s ease, filter .3s ease;
  filter:saturate(.8) brightness(.94);
}
.pinned::before{
  content:"";position:absolute;top:-9px;left:50%;
  width:22px;height:22px;margin-left:-11px;
  background:url("../assets/pin.png") center/contain no-repeat;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));
}
.pinned:nth-child(even){background:linear-gradient(160deg,#EFE7D2,#DCD2B6)}
.pinned:hover{transform:rotate(var(--rot,0deg)) translateY(-4px);filter:saturate(.95) brightness(1)}
.notes__stamp{
  width:100%;text-align:center;margin-top:18px;
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);
}
@media (max-width:860px){.same{grid-template-columns:1fr;gap:32px}}
@media (max-width:420px){.pinned{min-width:114px;font-size:14px;padding:24px 14px 16px}}

/* ======================================================== CERTIFICATION == */
.cert{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,60px);align-items:center}
.cert__list{display:grid;gap:14px;margin-top:28px}
.cert__list li{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;
  font-size:clamp(16px,1.5vw,19px);color:var(--paper);font-weight:600;
}
.cert__list .n{
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--cyan-line);background:var(--cyan-soft);
  font-size:12px;font-weight:700;color:var(--cyan);letter-spacing:.04em;
}

/* The grant, drawn as the document it actually is */
.grant-doc{
  position:relative;
  padding:clamp(26px,3vw,40px);
  border-radius:var(--radius-lg);
  background:
    repeating-linear-gradient(135deg, rgba(0,170,230,.05) 0 2px, transparent 2px 9px),
    linear-gradient(170deg, rgba(23,32,92,.95), rgba(10,15,48,.95));
  border:1px solid rgba(0,170,230,.34);
  box-shadow:0 30px 60px rgba(0,0,0,.45), inset 0 0 0 5px rgba(0,170,230,.07);
  overflow:hidden;
}
.grant-doc::before{
  content:"";position:absolute;inset:11px;border:1px solid rgba(0,170,230,.22);
  border-radius:4px;pointer-events:none;
}
.grant-doc::after{
  content:"";position:absolute;top:-60%;left:-40%;width:55%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  transform:rotate(18deg);
  animation:certSheen 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes certSheen{0%,72%{left:-45%}100%{left:125%}}
@media (prefers-reduced-motion:reduce){.grant-doc::after{display:none}}

.grant-doc__inner{position:relative;z-index:1}
.grant-doc__head{
  display:flex;align-items:center;gap:14px;
  padding-bottom:16px;margin-bottom:22px;
  border-bottom:1px solid rgba(0,170,230,.22);
}
.grant-doc__head svg{width:34px;height:34px;color:var(--cyan);flex-shrink:0}
.grant-doc__kind{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan);
}
.grant-doc__title{font-size:17px;font-weight:700;color:var(--paper);margin-top:3px}
.grant-doc dl{margin:0;padding-right:clamp(0px,7vw,104px)}
.grant-doc dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-bottom:5px;
}
.grant-doc dd{
  margin:0 0 18px;max-width:34ch;padding-bottom:14px;border-bottom:1px dashed rgba(150,165,255,.18);
  font-size:16px;color:var(--paper);font-weight:600;
}
.grant-doc dd:last-of-type{margin-bottom:0;border-bottom:0;padding-bottom:0}
.grant-doc__seal{
  position:absolute;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);
  width:92px;height:92px;opacity:.5;transform:rotate(-13deg);color:var(--cyan);
}
@media (max-width:860px){
  .cert{grid-template-columns:1fr;gap:32px}
  .grant-doc__seal{width:70px;height:70px;opacity:.35}
}

/* ============================================================== TRIO ===== */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,22px)}
.trio .field{display:block;margin-bottom:16px}
.trio h3{margin-bottom:10px}
@media (max-width:860px){.trio{grid-template-columns:1fr}}

/* ========================================================= CASE FILES ==== */
.cases{display:grid;gap:clamp(16px,2vw,22px)}
.case{
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(24px,2.8vw,36px);
  display:grid;grid-template-columns:238px 1fr;gap:clamp(24px,3.2vw,48px);
}
.case__id .field{display:block;margin-bottom:14px}
.case__domain{
  font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.15;
  font-size:clamp(19px,2vw,24px);color:var(--paper);
}
.case__who{margin-top:14px;font-size:13.5px;color:var(--dim);max-width:24ch}
.case__rows{display:grid;gap:18px;align-content:start}
.case__row{display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:baseline}
.case__row p{font-size:15px;color:var(--paper-2);max-width:74ch}
.case__label{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan);
}
/* Status reads as a sentence, not a shouted label */
.case__row .tl__tag{
  font-family:var(--sans);font-size:13px;letter-spacing:.005em;
  text-transform:none;padding:6px 14px;
}
@media (max-width:900px){
  .case{grid-template-columns:1fr;gap:26px}
  .case__row{grid-template-columns:1fr;gap:6px}
  .case__who{max-width:none}
}

/* ============================================================ INTAKE ===== */
.intake{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:100px;
  border:1px solid var(--royal-line);background:var(--royal-soft);
  font-size:13.5px;color:#C6D0FF;font-weight:500;
}
.intake::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--royal);
  box-shadow:0 0 0 3px rgba(59,91,255,.25);
}


/* ========================================================== THE ORBIT ==== */
/* Hero visual: the logo's own idea, alive — a core, its rings, and a craft
   working its way around the outside. */
/* Sized down on phones so it reads as a mark, not a mural */
.orbital{position:relative;width:100%;max-width:560px;margin-inline:auto}
@media (max-width:940px){.orbital{max-width:380px}}
@media (max-width:480px){.orbital{max-width:300px}}
.orbital svg{width:100%;height:auto;overflow:visible}

.ship{
  offset-path:path("M40,230 A190,72 0 1,1 420,230 A190,72 0 1,1 40,230");
  offset-rotate:auto;
  animation:orbit-ship 30s linear infinite;
}
@keyframes orbit-ship{from{offset-distance:0%}to{offset-distance:100%}}

.sat{
  offset-path:path("M84,230 A146,55 0 1,1 376,230 A146,55 0 1,1 84,230");
  offset-rotate:auto;
  animation:orbit-sat 19s linear infinite;
}
@keyframes orbit-sat{from{offset-distance:0%}to{offset-distance:100%}}

.comet{
  stroke-dasharray:60 940;
  animation:comet 19s linear infinite;
}
@keyframes comet{from{stroke-dashoffset:0}to{stroke-dashoffset:-1000}}

.pulse{animation:pulse 7s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:.95}}

.spin-ring{
  transform-box:view-box;transform-origin:230px 230px;
  animation:spin 120s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .ship,.sat,.comet,.pulse,.spin-ring{animation:none}
  .ship{offset-distance:18%}
  .sat{offset-distance:64%}
}

/* --------------------------------------------------------- the fly-by --- */
/* One craft crosses the section, rarely, at the edge of noticing. */
.flyby{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
}
.flyby svg{
  position:absolute;top:18%;left:0;width:132px;height:auto;opacity:0;
  animation:flyby 34s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes flyby{
  0%{transform:translate3d(-16vw,10vh,0) rotate(-12deg);opacity:0}
  6%{opacity:.5}
  34%{opacity:0}
  40%,100%{transform:translate3d(118vw,-16vh,0) rotate(-12deg);opacity:0}
}
@media (prefers-reduced-motion:reduce){.flyby{display:none}}

/* ---------------------------------------------------------- the line ---- */
.tagline{
  position:relative;
  padding-block:clamp(52px,6.5vw,86px);
  border-block:1px solid var(--line);
  background:linear-gradient(180deg,rgba(16,22,64,.5),rgba(8,12,40,.2));
  overflow:hidden;
}
.tagline__text{
  font-family:var(--display);font-weight:800;
  font-size:clamp(25px,4.1vw,52px);line-height:1.12;letter-spacing:-.028em;
  max-width:18ch;margin-inline:auto;text-align:center;
  color:var(--paper);
  background:linear-gradient(100deg,#EEF1FF 12%,#63D7FF 38%,#8FA6FF 56%,#EEF1FF 82%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:sheen 14s ease-in-out infinite;
}
@keyframes sheen{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@media (prefers-reduced-motion:reduce){.tagline__text{animation:none}}
@supports not (-webkit-background-clip:text){
  .tagline__text{-webkit-text-fill-color:var(--paper);background:none}
}

/* ---------------------------------------------------------- hero bits --- */
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);
  margin-bottom:clamp(22px,2.6vw,30px);
}
.kicker::before{
  content:"";width:26px;height:1px;background:var(--cyan);opacity:.7;flex-shrink:0;
}
@media (max-width:520px){.kicker{font-size:10.5px;letter-spacing:.16em}}


/* ============================================================ SCOPE ====== */
/* Case-file artwork, held in a slowly turning instrument ring. */
.scope{
  position:relative;width:100%;max-width:216px;aspect-ratio:1;margin-top:22px;
  display:grid;place-items:center;
}
.scope__ring{position:absolute;inset:0;width:100%;height:100%}
.scope__ring .r-out{
  transform-box:view-box;transform-origin:100px 100px;
  animation:scopeSpin 34s linear infinite;
}
.scope__ring .r-in{
  transform-box:view-box;transform-origin:100px 100px;
  animation:scopeSpin 22s linear infinite reverse;
}
@keyframes scopeSpin{to{transform:rotate(360deg)}}

.scope__stack{position:relative;width:74%;aspect-ratio:1;display:grid;place-items:center}
.scope__img{
  position:absolute;max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;opacity:0;
  animation:scopeFade 15s ease-in-out infinite;
}
.scope__img:nth-child(2){animation-delay:-7.5s}
@keyframes scopeFade{
  0%      {opacity:0;transform:scale(.94)}
  8%,42%  {opacity:1;transform:scale(1)}
  50%,100%{opacity:0;transform:scale(1.04)}
}
.scope--line .scope__img{filter:drop-shadow(0 0 7px rgba(0,170,230,.85)) drop-shadow(0 0 20px rgba(0,170,230,.35))}
.scope--photo .scope__img{filter:drop-shadow(0 8px 20px rgba(0,0,0,.55))}
.scope::before{
  content:"";position:absolute;inset:12%;border-radius:50%;
  background:radial-gradient(circle,rgba(0,170,230,.2),transparent 68%);
}
@media (prefers-reduced-motion:reduce){
  .scope__ring .r-out,.scope__ring .r-in{animation:none}
  .scope__img{animation:none;opacity:1}
  .scope__img:nth-child(2){display:none}
}
@media (max-width:900px){.scope{margin-inline:auto}}

/* ---------------------------------------------- vertical colour coding -- */
.vcard{position:relative;overflow:hidden}
.vcard::before{
  content:"";position:absolute;top:0;left:0;height:3px;width:74px;
  background:linear-gradient(90deg,var(--vc,var(--cyan)),transparent);
  border-radius:0 0 3px 0;
}
.vcard .field{color:var(--vc,var(--cyan))}
.vcard:hover{border-color:color-mix(in srgb, var(--vc, #00AAE6) 45%, transparent)}
.vcard__list{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;color:var(--paper-2)}
.vblock .field{color:var(--vc,var(--cyan))}
.vblock h2{position:relative;padding-left:16px}
.vblock h2::before{
  content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:3px;border-radius:2px;
  background:var(--vc,var(--cyan));
}

/* ------------------------------------------------------ grant target ---- */
.grant{
  margin-top:clamp(26px,3vw,38px);padding:clamp(22px,2.6vw,30px);
  border:1px solid var(--cyan-line);border-radius:var(--radius-lg);
  background:linear-gradient(160deg,rgba(0,170,230,.1),transparent 62%),rgba(16,22,64,.55);
  max-width:620px;
}
.grant__line{
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(19px,2.2vw,27px);color:var(--paper);
}
.grant__line b{color:#8FE4FF;font-weight:800}
.grant__note{margin-top:10px;font-size:12.5px;color:var(--dim)}

/* ============================================================ PATHWAY === */
.path{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px);align-items:stretch}
.step-card{
  position:relative;display:flex;flex-direction:column;height:100%;
  padding:clamp(26px,3vw,38px);
}
.step-card--two{
  border-color:var(--cyan-line);
  background:linear-gradient(170deg,rgba(0,170,230,.13),transparent 52%),
             linear-gradient(180deg,rgba(21,28,80,.75),rgba(13,18,56,.75));
}
.step-card__n{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);
}
.step-card__n::before{content:"";width:24px;height:1px;background:var(--cyan);opacity:.7}
.step-card h3{font-size:clamp(20px,2.1vw,26px);margin-bottom:14px;letter-spacing:-.02em}
.step-card__price{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line);
}
.step-card__fig{
  font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(30px,3.4vw,42px);color:var(--paper);line-height:1;
}
.step-card__kind{font-size:13.5px;color:var(--cyan);font-weight:600}
.step-card p{font-size:15.5px;color:var(--paper-2);margin-bottom:20px}
.step-card__list{display:grid;gap:12px;margin-bottom:26px;flex:1;align-content:start}
.step-card__list li{
  position:relative;padding-left:24px;font-size:14.5px;line-height:24px;color:var(--paper-2);
}
.step-card__list li::before{
  content:"";position:absolute;left:0;top:11px;width:12px;height:2px;border-radius:2px;
  background:var(--cyan);
}
.step-card__note{
  margin:0 0 22px;padding:12px 15px;border-radius:var(--radius);
  background:var(--cyan-soft);border:1px solid var(--cyan-line);
  font-size:13.5px;color:#9BE0FF;
}
@media (max-width:900px){.path{grid-template-columns:1fr}}

/* ---------------------------------------------------------- big CTA ----- */
.bigcta{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(40px,5.5vw,72px) clamp(22px,3vw,48px);
  border:1px solid var(--cyan-line);border-radius:var(--radius-lg);
  background:
    radial-gradient(760px 340px at 50% -20%, rgba(0,170,230,.22), transparent 66%),
    linear-gradient(180deg, rgba(21,28,80,.7), rgba(11,15,48,.7));
}
.bigcta__line{
  font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(25px,3.6vw,46px);line-height:1.14;
  max-width:19ch;margin:0 auto;
  background:linear-gradient(100deg,#EEF1FF 14%,#63D7FF 42%,#8FA6FF 60%,#EEF1FF 84%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:sheen 13s ease-in-out infinite;
}
@supports not (-webkit-background-clip:text){
  .bigcta__line{-webkit-text-fill-color:var(--paper);background:none;color:var(--paper)}
}
.bigcta .btn-row{justify-content:center;margin-top:clamp(28px,3.4vw,40px);align-items:center}
@media (prefers-reduced-motion:reduce){.bigcta__line{animation:none}}

/* ---------------------------------------------------------- founder ----- */
.founder{display:grid;grid-template-columns:320px 1fr;gap:clamp(30px,4vw,56px);align-items:start}
.founder__photo{position:relative}
.founder__photo img{
  width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-lg);
  border:1px solid var(--line);display:block;
}
.founder__photo::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius-lg);
  background:linear-gradient(180deg,transparent 45%,rgba(5,7,26,.5));
  pointer-events:none;
}
.founder__role{margin-top:6px;font-size:14px;color:var(--cyan);font-weight:600}
.founder__body p{font-size:15.5px;margin-bottom:16px;max-width:70ch}
.founder__quote{
  margin-top:26px;padding-left:20px;border-left:2px solid var(--cyan-line);
  font-family:var(--display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(17px,1.8vw,21px);color:var(--paper);max-width:34ch;
}
@media (max-width:820px){
  .founder{grid-template-columns:1fr;gap:28px}
  .founder__photo{max-width:300px}
}

/* ------------------------------------------------------ testimonials ---- */
.quote__by{display:flex;align-items:center;gap:14px;padding-top:18px;border-top:1px solid var(--line)}
.quote__face{
  width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1px solid var(--cyan-line);
}

/* ============================================================= EVENT ==== */
.poster{
  position:relative;overflow:hidden;
  border:1px solid var(--cyan-line);border-radius:var(--radius-lg);
  background:
    radial-gradient(620px 420px at 78% 12%, rgba(0,170,230,.26), transparent 62%),
    radial-gradient(520px 420px at 14% 88%, rgba(59,91,255,.26), transparent 62%),
    linear-gradient(165deg, rgba(18,25,74,.92), rgba(7,10,34,.95));
  padding:clamp(28px,4vw,56px);
  display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(26px,4vw,52px);align-items:center;
}
.poster__grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(150,165,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,165,255,.07) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 25%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 25%,transparent 80%);
}
.poster__body{position:relative;z-index:1}
.poster__series{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan);
}
.poster__series::before{content:"";width:22px;height:1px;background:var(--cyan)}
.poster__title{
  font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(30px,4.6vw,58px);color:var(--paper);
}
.poster__sub{margin-top:18px;font-size:clamp(15px,1.5vw,17px);color:var(--paper-2);max-width:46ch}
.poster__meta{
  display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:26px;
  padding-top:22px;border-top:1px solid rgba(0,170,230,.26);
}
.poster__meta div{min-width:110px}
.poster__meta dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-bottom:5px;
}
.poster__meta dd{margin:0;font-size:16px;font-weight:700;color:var(--paper)}
.poster__art{position:relative;z-index:1}
.poster__art svg{width:100%;height:auto;overflow:visible}
@media (max-width:860px){.poster{grid-template-columns:1fr;gap:30px}.poster__art{max-width:320px;margin-inline:auto}}

.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.topics div{background:rgba(16,22,64,.6);padding:20px 22px}
.topics strong{display:block;font-size:15px;color:var(--paper);margin-bottom:4px}
.topics span{font-size:13.5px;color:var(--dim)}
@media (max-width:820px){.topics{grid-template-columns:1fr}}

.ship-p{
  offset-path:path("M28,180 A152,58 0 1,1 332,180 A152,58 0 1,1 28,180");
  offset-rotate:auto;
  animation:orbit-ship-p 32s linear infinite;
}
@keyframes orbit-ship-p{from{offset-distance:0%}to{offset-distance:100%}}
@media (prefers-reduced-motion:reduce){.ship-p{animation:none;offset-distance:22%}}

/* ======================================================== ABOUT HERO ===== */
.hero-split{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,5vw,64px);align-items:center;
}
.hero-split h1{max-width:14ch}
.hero-split .lede{max-width:52ch}
.about-hero__sub{
  margin-top:16px;max-width:26ch;
  font-family:var(--display);font-weight:600;letter-spacing:-.022em;line-height:1.2;
  font-size:clamp(18px,2.1vw,26px);color:#8FE4FF;
}
.hero-split .lede{margin-top:22px}
@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:34px}
  .sparkfield{max-width:340px;margin-inline:auto}
}

/* Spark field: nodes wired together, pulses running the wires, embers rising */
.sparkfield{position:relative;width:100%;max-width:460px;margin-inline:auto}
.sparkfield svg{width:100%;height:auto;overflow:visible}

.lp{animation:lpRun 4.6s linear infinite;opacity:.95}
.lp2{animation-duration:5.8s;animation-delay:-1.4s}
.lp3{animation-duration:5.1s;animation-delay:-2.7s}
.lp4{animation-duration:6.4s;animation-delay:-3.6s}
.lp5{animation-duration:7.2s;animation-delay:-0.8s}
@keyframes lpRun{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

.nd{animation:ndGlow 5s ease-in-out infinite}
.n2{animation-delay:-.9s}.n3{animation-delay:-1.8s}
.n4{animation-delay:-2.6s}.n5{animation-delay:-3.4s}.n6{animation-delay:-4.2s}
@keyframes ndGlow{
  0%,100%{opacity:.45;filter:none}
  50%{opacity:1;filter:drop-shadow(0 0 7px rgba(0,170,230,.95))}
}

.em{animation:ember 8s ease-in infinite;opacity:0}
.e2{animation-delay:-1.6s}.e3{animation-delay:-3.1s}
.e4{animation-delay:-4.4s}.e5{animation-delay:-5.9s}.e6{animation-delay:-7.1s}
@keyframes ember{
  0%   {opacity:0;transform:translateY(0)}
  12%  {opacity:.9}
  70%  {opacity:.5}
  100% {opacity:0;transform:translateY(-118px)}
}
.embers circle{transform-box:fill-box;transform-origin:center}

@media (prefers-reduced-motion:reduce){
  .lp,.nd,.em{animation:none}
  .em{opacity:.6}
}

/* ==================================================== PROBLEM / SOLUTION = */
.ps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,24px);align-items:stretch}
.ps__card{display:flex;flex-direction:column;padding:clamp(26px,3vw,38px)}
.ps__card--problem{border-color:rgba(150,165,255,.2)}
.ps__card--solution{
  border-color:var(--cyan-line);
  background:linear-gradient(170deg,rgba(0,170,230,.12),transparent 52%),
             linear-gradient(180deg,rgba(21,28,80,.75),rgba(13,18,56,.75));
}
.ps__tag{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);
}
.ps__tag::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.ps__card--solution .ps__tag{color:var(--cyan)}
.ps__card h3{font-size:clamp(19px,2vw,24px);margin-bottom:14px;letter-spacing:-.02em}
.ps__card > p{font-size:15.5px;color:var(--paper-2);margin-bottom:16px}
.ps__list{display:grid;gap:12px;margin-bottom:18px}
.ps__list li{position:relative;padding-left:24px;font-size:15px;line-height:24px;color:var(--paper-2)}
.ps__list li::before{
  content:"";position:absolute;left:0;top:11px;width:12px;height:2px;border-radius:2px;
  background:var(--dim);
}
.ps__card--solution .ps__list li::before{background:var(--cyan)}
.ps__kicker{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--paper);font-weight:500;
}
@media (max-width:860px){.ps{grid-template-columns:1fr}}

/* The legal process, as the queue it is */
.chain{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;align-items:center}
.chain li{
  position:relative;padding:7px 13px;border-radius:100px;
  border:1px solid var(--line-2);background:rgba(13,18,56,.6);
  font-size:13px;color:var(--paper-2);
}
.chain li:not(:last-child)::after{
  content:"\2192";margin-left:11px;color:var(--dim);opacity:.8;
}
.chain li:last-child{border-color:var(--cyan-line);color:#8FE4FF;background:var(--cyan-soft)}

/* ------------------------------------------------------- grant targets -- */
.grant__line + .grant__line{margin-top:8px}
.grant__star{color:var(--cyan);font-size:.7em;vertical-align:super;margin-left:2px}


/* ============================================================ MOTIFS ===== */
/* Reuses the spark-field animations (.lp / .nd / .em / .pulse). */
.motif{position:relative;width:100%;margin-inline:auto}
.motif svg{width:100%;height:auto;overflow:visible}

.motif--hero{max-width:330px}
@media (max-width:900px){.motif--hero{max-width:230px}}
@media (max-width:560px){.motif--hero{display:none}}

/* Inside a vertical block, small and tinted to that vertical's colour */
.motif--vertical{max-width:190px;margin:clamp(22px,2.6vw,30px) 0 0}
@media (max-width:860px){.motif--vertical{max-width:160px;margin-inline:auto}}

.motif .pulse{transform-box:view-box;transform-origin:160px 160px}


/* Seats line sits under the buttons, on its own */
.bigcta__seats{margin:20px auto 0;max-width:none;text-align:center}

/* Office map on the contact page */
.contact__mapbox{
  display:block;position:relative;margin-top:26px;
  aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line-2);background:var(--ink-2);
  transition:border-color .2s ease;
}
.contact__mapbox:hover{border-color:var(--cyan-line)}
.contact__mapbox iframe{
  width:100%;height:100%;border:0;display:block;
  filter:invert(91%) hue-rotate(180deg) saturate(.72) contrast(.92) brightness(.95);
}

/* ==================================================== VIDEO TESTIMONIAL = */
/* The one testimonial you can watch. The video carries the block; the caption
   beside it is just the attribution. */
.vtest{
  display:grid;grid-template-columns:minmax(0,3.1fr) minmax(178px,.86fr);
  gap:clamp(22px,2.8vw,38px);align-items:center;
  margin:0 0 clamp(26px,3vw,38px);
  padding:clamp(16px,1.8vw,22px);
  border:1px solid var(--cyan-line);border-radius:var(--radius-lg);
  background:
    radial-gradient(640px 340px at 18% 0%, rgba(0,170,230,.16), transparent 64%),
    linear-gradient(180deg, rgba(21,28,80,.72), rgba(13,18,56,.72));
}
.vtest__player{
  position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line-2);background:#000;
  box-shadow:0 22px 48px rgba(0,0,0,.5);
  line-height:0;
}
.vtest__player video{width:100%;height:auto;display:block;aspect-ratio:16/9;background:#000}

/* Browsers only allow autoplay without sound, so the viewer is offered it. */
.vtest__sound{
  position:absolute;top:12px;right:12px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:100px;
  background:rgba(5,7,26,.76);border:1px solid var(--cyan-line);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#9BE0FF;font-size:13px;font-weight:600;line-height:1;
  transition:background-color .18s ease,border-color .18s ease,opacity .25s ease;
}
.vtest__sound svg{width:16px;height:16px;flex-shrink:0}
.vtest__sound:hover{background:rgba(0,170,230,.26);border-color:var(--cyan)}
.vtest__player.is-unmuted .vtest__sound{opacity:0;pointer-events:none}

.vtest__side .field{display:block;margin-bottom:14px}
.vtest__name{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.15;
  font-size:clamp(20px,2.1vw,26px);color:var(--paper);
}
.vtest__role{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--paper-2)}

@media (max-width:880px){
  .vtest{grid-template-columns:1fr;gap:20px}
  .vtest__side{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
  .vtest__side .field{width:100%;margin-bottom:6px}
  .vtest__role{margin-top:0}
}

/* ===================================================== PAST SESSIONS ==== */
.pastlist{border-top:1px solid var(--line)}
.pastlist__item{
  display:grid;grid-template-columns:168px 1fr;gap:clamp(18px,3vw,40px);
  padding:clamp(20px,2.4vw,28px) 0;border-bottom:1px solid var(--line);align-items:start;
}
.pastlist__when{display:flex;flex-direction:column;gap:5px}
.pastlist__no{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);
}
.pastlist__date{font-size:15.5px;font-weight:600;color:var(--paper-2)}
.pastlist__what h3{font-size:18px;margin-bottom:8px}
.pastlist__what p{font-size:15px;color:var(--paper-2);max-width:70ch}
.pastlist__tag{
  display:inline-block;margin-top:12px;padding:4px 12px;border-radius:100px;
  border:1px solid var(--line-2);background:rgba(13,18,56,.6);
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
}
@media (max-width:640px){
  .pastlist__item{grid-template-columns:1fr;gap:10px}
  .pastlist__when{flex-direction:row;align-items:baseline;gap:12px}
}