/* ==========================================================================
   PATOMIC LABS — Core design system
   Edit colours & fonts in the :root block below.
   ========================================================================== */

:root{
  /* Surfaces — deep indigo, matching the brochure */
  --ink:        #05071A;   /* page background */
  --ink-1:      #0A0E2C;   /* alternating section background */
  --ink-2:      #101640;   /* card surface */
  --ink-3:      #1A2159;   /* raised / hover surface */

  /* Ink on ink */
  --paper:      #EEF1FF;   /* primary text */
  --paper-2:    #BAC3EC;   /* secondary text */
  --dim:        #8791C9;   /* tertiary / captions */

  /* Signal */
  --cyan:       #00AAE6;   /* exact brand cyan, sampled from the logo */
  --cyan-hi:    #38C6FA;   /* hover / highlight */
  --cyan-soft:  rgba(0,170,230,.14);
  --cyan-line:  rgba(0,170,230,.38);
  --royal:      #3B5BFF;   /* electric royal blue, from the brochure */
  --royal-soft: rgba(59,91,255,.15);
  --royal-line: rgba(59,91,255,.42);
  --royal-ink:  #9DB0FF;   /* royal blue, lightened for text on dark */
  --volt:       #4C6CFF;   /* motion accent */

  /* Structure */
  --line:       rgba(150,165,255,.16);
  --line-2:     rgba(150,165,255,.30);

  /* Type */
  --display: "Montserrat", system-ui, -apple-system, sans-serif;
  --sans:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:    "Montserrat", system-ui, sans-serif;   /* label face — same family, wide tracking */
  --brand:   "Orbitron", "Montserrat", system-ui, sans-serif;  /* the logo's own face */

  /* Layout */
  --wrap: 1180px;
  --gutter: 24px;
  --radius: 4px;
  --radius-lg: 8px;
}

/* --------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

html{scroll-behavior:smooth;scroll-padding-top:118px}

body{
  background:var(--ink);
  color:var(--paper-2);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------------------------------------------------------- typography -- */
h1,h2,h3,h4,h5{color:var(--paper);line-height:1.15;font-weight:700;letter-spacing:-.018em}

.display{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.06;
  color:var(--paper);
}

h1{font-size:clamp(33px,4.5vw,55px)}
h2{font-size:clamp(25px,3vw,38px)}
h3{font-size:clamp(18px,1.6vw,21px);letter-spacing:-.01em}
h4{font-size:17px}

p{max-width:66ch}
strong{color:var(--paper);font-weight:600}
em{font-style:italic}

.lede{
  font-size:clamp(17px,1.5vw,20px);
  line-height:1.6;
  color:var(--paper-2);
  max-width:60ch;
}

/* Field marker — mono label. Used ONLY where it carries real information:
   figure numbers, step counters, week ranges, claim numbers, prices. */
.field{
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cyan);
}
.field--royal{color:var(--royal-ink)}
.field--dim{color:var(--dim)}

.mono{font-family:var(--mono)}

/* ------------------------------------------------------------- layout -- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:820px}

.section{padding-block:clamp(72px,9vw,126px)}
.section--tight{padding-block:clamp(56px,6vw,80px)}
.section--alt{background:linear-gradient(180deg,rgba(14,20,58,.72),rgba(8,12,40,.58));border-block:1px solid var(--line)}

.sec-head{margin-bottom:clamp(38px,4.5vw,60px);max-width:760px}
.sec-head .field{display:block;margin-bottom:16px}
.sec-head p{margin-top:18px}

.rule{height:1px;background:var(--line);border:0;margin:0}

/* ------------------------------------------------------------ buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;
  font-size:14.5px;font-weight:600;letter-spacing:.005em;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}

.btn--primary{background:var(--cyan);color:#04121C;border-color:var(--cyan)}
.btn--primary:hover{background:var(--cyan-hi);border-color:var(--cyan-hi)}

.btn--ghost{border-color:var(--line-2);color:var(--paper)}
.btn--ghost:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-soft)}

.btn--royal{background:var(--royal-soft);border-color:var(--royal-line);color:#C6D0FF}
.btn--royal:hover{background:rgba(59,91,255,.28);border-color:var(--royal)}

.btn--block{display:flex;width:100%}
.btn--sm{padding:10px 15px;font-size:13.5px;line-height:1.2}

.btn-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}

/* -------------------------------------------------------------- cards -- */
.card{
  background:linear-gradient(180deg,rgba(21,28,80,.72),rgba(13,18,56,.72));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(22px,2.4vw,30px);
}
.card h3{margin-bottom:9px}
:where(.card) p{font-size:15px;color:var(--paper-2)}

/* ---------------------------------------------------- blueprint fields -- */
/* Faint engineering grid used behind heroes only. */
.grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(150,165,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,165,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 20%,transparent 78%);
}

/* ---------------------------------------------------------------- nav -- */
.nav{
  position:sticky;top:0;z-index:80;
  background:rgba(5,7,26,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__inner{display:flex;align-items:center;gap:18px;height:100px}

.nav__brand{display:flex;align-items:center;gap:9px;flex-shrink:0}
.nav__mark{width:auto;height:64px;flex-shrink:0}
.nav__brand span{
  font-family:var(--brand);font-weight:700;font-size:21px;
  color:var(--paper);letter-spacing:.075em;
  text-transform:uppercase;
}

.nav__links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav__links a{
  display:block;padding:9px 8px;border-radius:var(--radius);
  font-size:14.5px;font-weight:500;color:var(--paper-2);
  white-space:nowrap;line-height:1.2;
  transition:color .15s ease,background-color .15s ease;
}
.nav__links a:hover{color:var(--paper);background:rgba(150,165,255,.07)}
.nav__links a.is-active{color:var(--cyan)}

.nav__cta{display:flex;align-items:center;gap:9px;flex-shrink:0;margin-left:12px}
.nav__toggle{display:none;padding:7px;color:var(--paper);border-radius:var(--radius)}

.nav__panel{display:none}

/* Laptop screens — most 14" machines land here once display scaling is on
   (a 1920px panel at 150% reports 1280 CSS px). Everything stays on one
   line; the lockup, links and buttons simply step down a size. */
@media (max-width:1239px) and (min-width:1040px){
  .nav__inner{height:78px;gap:14px}
  .nav__mark{height:46px}
  .nav__brand{gap:7px}
  .nav__brand span{font-size:16px;letter-spacing:.06em}
  .nav__name small{font-size:6px;letter-spacing:.14em;margin-top:9px}
  .nav__links{gap:0}
  .nav__links a{padding:7px 7px;font-size:13.2px}
  .nav__cta{margin-left:10px;gap:7px}
  .nav__cta .btn--sm{padding:8px 12px;font-size:12.8px}
}

@media (max-width:1039px){
  .nav__links,.nav__cta .btn{display:none}
  .nav__toggle{display:block;margin-left:auto}
  .nav__panel{
    display:block;position:fixed;inset:100px 0 auto;
    background:var(--ink-1);border-bottom:1px solid var(--line);
    padding:14px var(--gutter) 24px;
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .26s cubic-bezier(.4,0,.2,1),opacity .2s ease,visibility .26s;
    z-index:79;max-height:calc(100vh - 100px);overflow-y:auto;
    box-shadow:0 18px 40px rgba(0,0,0,.5);
  }
  .nav__panel.is-open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
  .nav__panel a{
    display:block;padding:13px 2px;font-size:16px;font-weight:500;
    color:var(--paper);border-bottom:1px solid var(--line);
  }
  .nav__panel .btn{display:flex;justify-content:center;border-bottom-width:1px;margin-top:18px;padding:14px 20px}
  .nav__panel .btn + .btn{margin-top:10px}
  .nav__panel .btn--ghost{border-color:var(--line-2);color:var(--paper)}
  .nav__panel .btn--primary{color:#04121C;border-color:var(--cyan)}
}

/* ------------------------------------------------------------- footer -- */
.footer{background:linear-gradient(180deg,rgba(10,14,44,.5),rgba(6,9,30,.85));border-top:1px solid var(--line);padding-top:clamp(40px,4.6vw,58px)}
.footer__grid{
  display:grid;gap:40px;
  grid-template-columns:2.15fr 1fr 1fr 1.35fr;
  padding-bottom:44px;
  row-gap:clamp(24px,2.4vw,30px);
  align-items:start;
}
.footer__brand{display:block;margin-bottom:22px}
.footer__brand img{width:auto;height:168px}
:where(.footer) p{font-size:14.5px;color:var(--dim);max-width:38ch}
.footer__col h5{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin-bottom:16px;
}
.footer__col a{
  display:block;font-size:14.5px;color:var(--paper-2);padding-block:6px;
  transition:color .15s ease;
}
.footer__col a:hover{color:var(--cyan)}
/* Address and map share a row that runs from the left edge to the end of the
   Company column, so the map can stretch rather than sit in one narrow cell. */
.footer__where{
  grid-column:1 / span 3;
  display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);
  gap:40px;align-items:start;
}

.footer__address{
  font-size:13.5px;color:var(--dim);margin-top:0;line-height:1.55;font-style:normal;
}
.footer__address-label{color:var(--paper-2);font-weight:600}
.footer__map{
  display:flex!important;align-items:center;gap:7px;width:fit-content;margin-top:12px;
  font-size:13px;color:var(--cyan);padding-block:0;
}
.footer__map svg{width:14px;height:14px;color:currentColor;flex-shrink:0}
.footer__map:hover{color:var(--cyan-hi);text-decoration:underline}

/* Live map. Tinted to sit on the dark page rather than glow white at the
   bottom of every screen. Delete the filter line for standard Google colours. */
.footer__mapbox{
  align-self:start;
  display:block!important;position:relative;
  aspect-ratio:3/1;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line-2);background:var(--ink-2);
  padding-block:0!important;
  transition:border-color .2s ease;
}
.footer__mapbox:hover{border-color:var(--cyan-line)}
.footer__mapbox iframe{
  width:100%;height:100%;border:0;display:block;
  filter:invert(91%) hue-rotate(180deg) saturate(.72) contrast(.92) brightness(.95);
}
/* Keeps the whole tile clickable instead of panning inside the frame */
.footer__mapbox-hit{position:absolute;inset:0}



.footer__bottom{
  border-top:1px solid var(--line);
  padding-block:24px 30px;
  display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:space-between;align-items:center;
}
.footer__bottom p{font-size:12.5px;color:var(--dim);max-width:62ch}

@media (max-width:900px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__where{grid-column:1 / span 2;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:28px}
  .footer__mapbox{aspect-ratio:2/1}
}
@media (max-width:560px){
  .footer__grid{grid-template-columns:1fr;gap:30px}
  .footer__where{grid-column:1;grid-template-columns:1fr;gap:18px}
  .footer__mapbox{aspect-ratio:16/10}
}

/* --------------------------------------------------------- page heros -- */
.hero-wash{
  background:
    radial-gradient(1000px 560px at 14% -14%, rgba(59,91,255,.26), transparent 66%),
    radial-gradient(760px 440px at 94% 4%, rgba(0,170,230,.12), transparent 68%);
}
.page-hero{position:relative;padding-block:clamp(58px,7vw,92px) clamp(42px,5vw,64px);overflow:hidden}
.page-hero .wrap{position:relative}
.page-hero .field{display:block;margin-bottom:18px}
.page-hero h1{max-width:17ch}
.page-hero .lede{margin-top:22px}


/* ------------------------------------------------------------- the sky -- */
/* Three fixed layers sit behind everything: a nebula wash on <html>, a
   drifting two-depth starfield, and a fine grain that stops the large
   gradients from banding. All decorative, all pointer-transparent. */
html{
  background:
    radial-gradient(1180px 720px at 10% -10%, rgba(0,170,230,.16), transparent 60%),
    radial-gradient(1000px 680px at 92% 6%,  rgba(59,91,255,.20), transparent 58%),
    radial-gradient(1200px 900px at 50% 112%, rgba(59,91,255,.13), transparent 62%),
    var(--ink);
  background-attachment:fixed;
}
body{background:transparent}

body::before,
body::after{content:"";position:fixed;inset:-10% -10% -10% -10%;pointer-events:none;z-index:-1}

body::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Ccircle cx="136.0" cy="63.4" r="0.74" fill="%23fff" opacity="0.27"/%3E%3Ccircle cx="225.1" cy="153.6" r="0.38" fill="%23fff" opacity="0.4"/%3E%3Ccircle cx="15.7" cy="182.1" r="0.39" fill="%23fff" opacity="0.28"/%3E%3Ccircle cx="178.3" cy="347.3" r="0.42" fill="%23fff" opacity="0.32"/%3E%3Ccircle cx="263.5" cy="398.0" r="0.7" fill="%23fff" opacity="0.37"/%3E%3Ccircle cx="410.0" cy="19.6" r="0.87" fill="%23fff" opacity="0.34"/%3E%3Ccircle cx="60.6" cy="49.5" r="0.54" fill="%23fff" opacity="0.49"/%3E%3Ccircle cx="75.9" cy="244.3" r="0.73" fill="%23fff" opacity="0.36"/%3E%3Ccircle cx="230.1" cy="26.4" r="0.39" fill="%23fff" opacity="0.31"/%3E%3Ccircle cx="285.8" cy="179.6" r="0.54" fill="%23fff" opacity="0.43"/%3E%3Ccircle cx="190.3" cy="125.9" r="0.83" fill="%23fff" opacity="0.46"/%3E%3Ccircle cx="102.5" cy="241.3" r="0.67" fill="%23fff" opacity="0.51"/%3E%3Ccircle cx="306.4" cy="120.9" r="0.94" fill="%23fff" opacity="0.29"/%3E%3Ccircle cx="175.6" cy="318.0" r="0.44" fill="%23fff" opacity="0.4"/%3E%3Ccircle cx="16.5" cy="280.7" r="0.81" fill="%23fff" opacity="0.42"/%3E%3Ccircle cx="367.7" cy="131.8" r="0.77" fill="%23fff" opacity="0.43"/%3E%3Ccircle cx="243.6" cy="191.6" r="0.85" fill="%23fff" opacity="0.53"/%3E%3Ccircle cx="199.1" cy="278.9" r="0.39" fill="%23fff" opacity="0.46"/%3E%3Ccircle cx="271.8" cy="417.1" r="0.84" fill="%23fff" opacity="0.34"/%3E%3Ccircle cx="162.0" cy="280.8" r="0.36" fill="%23fff" opacity="0.39"/%3E%3Ccircle cx="70.6" cy="49.2" r="0.39" fill="%23fff" opacity="0.48"/%3E%3Ccircle cx="54.3" cy="104.0" r="0.58" fill="%23fff" opacity="0.51"/%3E%3Ccircle cx="33.8" cy="188.7" r="0.68" fill="%23fff" opacity="0.52"/%3E%3Ccircle cx="344.1" cy="362.9" r="0.52" fill="%23fff" opacity="0.37"/%3E%3Ccircle cx="150.7" cy="371.4" r="0.92" fill="%23fff" opacity="0.3"/%3E%3Ccircle cx="74.0" cy="97.4" r="0.49" fill="%23fff" opacity="0.4"/%3E%3Ccircle cx="247.4" cy="110.4" r="0.35" fill="%23fff" opacity="0.38"/%3E%3Ccircle cx="155.1" cy="237.9" r="0.92" fill="%23fff" opacity="0.46"/%3E%3Ccircle cx="216.5" cy="259.4" r="0.76" fill="%23fff" opacity="0.27"/%3E%3Ccircle cx="377.8" cy="327.6" r="0.87" fill="%23fff" opacity="0.49"/%3E%3Ccircle cx="164.8" cy="167.6" r="0.41" fill="%23fff" opacity="0.44"/%3E%3Ccircle cx="26.1" cy="28.3" r="0.48" fill="%23fff" opacity="0.3"/%3E%3Ccircle cx="142.8" cy="22.1" r="0.35" fill="%23fff" opacity="0.3"/%3E%3Ccircle cx="42.6" cy="152.7" r="0.37" fill="%23fff" opacity="0.51"/%3E%3Ccircle cx="257.9" cy="62.4" r="0.5" fill="%23fff" opacity="0.35"/%3E%3Ccircle cx="152.9" cy="51.6" r="0.86" fill="%23fff" opacity="0.55"/%3E%3Ccircle cx="195.7" cy="203.2" r="0.4" fill="%23fff" opacity="0.28"/%3E%3Ccircle cx="143.9" cy="111.2" r="0.85" fill="%23fff" opacity="0.3"/%3E%3Ccircle cx="9.7" cy="399.4" r="0.67" fill="%23fff" opacity="0.29"/%3E%3Ccircle cx="228.1" cy="11.4" r="0.67" fill="%23fff" opacity="0.54"/%3E%3Ccircle cx="362.6" cy="292.4" r="0.51" fill="%23fff" opacity="0.36"/%3E%3Ccircle cx="70.2" cy="324.2" r="0.67" fill="%23fff" opacity="0.48"/%3E%3Ccircle cx="138.5" cy="93.7" r="0.84" fill="%23fff" opacity="0.55"/%3E%3Ccircle cx="358.1" cy="338.6" r="0.84" fill="%23fff" opacity="0.47"/%3E%3Ccircle cx="95.2" cy="217.4" r="0.56" fill="%23fff" opacity="0.26"/%3E%3Ccircle cx="11.7" cy="117.4" r="0.51" fill="%23fff" opacity="0.46"/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Ccircle cx="42.9" cy="179.3" r="1.08" fill="%23fff" opacity="0.54"/%3E%3Ccircle cx="56.2" cy="206.1" r="1.28" fill="%23fff" opacity="0.56"/%3E%3Ccircle cx="131.3" cy="61.4" r="0.35" fill="%23fff" opacity="0.47"/%3E%3Ccircle cx="152.2" cy="18.0" r="1.26" fill="%23fff" opacity="0.39"/%3E%3Ccircle cx="60.5" cy="11.0" r="1.5" fill="%23fff" opacity="0.69"/%3E%3Ccircle cx="227.5" cy="160.1" r="0.39" fill="%23fff" opacity="0.45"/%3E%3Ccircle cx="129.4" cy="30.1" r="1.44" fill="%23fff" opacity="0.47"/%3E%3Ccircle cx="40.3" cy="212.6" r="0.49" fill="%23fff" opacity="0.81"/%3E%3Ccircle cx="117.8" cy="143.5" r="0.74" fill="%23fff" opacity="0.54"/%3E%3Ccircle cx="48.6" cy="9.7" r="1.35" fill="%23fff" opacity="0.39"/%3E%3Ccircle cx="202.9" cy="54.2" r="1.46" fill="%23fff" opacity="0.79"/%3E%3Ccircle cx="196.2" cy="198.3" r="1.02" fill="%23fff" opacity="0.69"/%3E%3Ccircle cx="31.8" cy="123.8" r="1.3" fill="%23fff" opacity="0.37"/%3E%3Ccircle cx="240.0" cy="230.8" r="0.82" fill="%23fff" opacity="0.47"/%3E%3Ccircle cx="117.3" cy="100.3" r="1.49" fill="%23fff" opacity="0.48"/%3E%3Ccircle cx="7.0" cy="24.2" r="1.18" fill="%23fff" opacity="0.85"/%3E%3C/svg%3E");
  background-repeat:repeat, repeat;
  opacity:.55;
  animation:drift 260s linear infinite, twinkle 11s ease-in-out infinite alternate;
}
body::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  opacity:.05;
  mix-blend-mode:overlay;
}
@keyframes drift{
  0%{background-position:0 0, 0 0}
  100%{background-position:420px 840px, -260px 520px}
}
@keyframes twinkle{
  0%{opacity:.42}
  100%{opacity:.68}
}
@media (prefers-reduced-motion:reduce){
  body::before{animation:none;opacity:.5}
}

/* ------------------------------------------------- the travelling light -- */
/* A single spark that crosses a hairline, then rests. Echoes the streak
   running through the logo. Used on three lines site-wide, no more. */
.trace{position:relative}
.trace::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:30%;
  background:linear-gradient(90deg,transparent,var(--volt) 42%,var(--cyan) 72%,transparent);
  box-shadow:0 0 9px rgba(76,108,255,.55);
  animation:trace 9s cubic-bezier(.62,.02,.35,1) infinite;
  pointer-events:none;
}
@keyframes trace{
  0%   {transform:translateX(-110%);opacity:0}
  8%   {opacity:.95}
  46%  {transform:translateX(345%);opacity:0}
  100% {transform:translateX(345%);opacity:0}
}

/* ------------------------------------------------------------- reveal -- */
[data-reveal]{opacity:0;transition:opacity .55s ease}
[data-reveal].is-in{opacity:1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .trace::after{display:none}
  [data-reveal]{opacity:1}
}

/* --------------------------------------------------------------- a11y -- */
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}
.skip{
  position:absolute;left:-9999px;top:8px;z-index:200;
  background:var(--cyan);color:#04121C;padding:10px 16px;border-radius:var(--radius);font-weight:600;
}
.skip:focus{left:16px}
::selection{background:var(--cyan);color:#04121C}

/* ------------------------------------------------------ brand tagline -- */
.nav__name{display:flex;flex-direction:column;align-items:center;line-height:1}
.nav__name small{
  font-family:var(--brand);font-size:7.6px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cyan);margin-top:13px;
  text-align:center;white-space:nowrap;
}
@media (max-width:430px){
  .nav__mark{height:54px}
  .nav__brand span{font-size:17px}
  .nav__name small{font-size:6.6px;letter-spacing:.12em;margin-top:10px}
}

.footer__logo{display:inline-block;text-align:center;margin-bottom:18px}
.footer__logo .footer__brand{display:block;margin-bottom:12px}
.footer__logo .footer__brand img{margin-inline:auto}
.footer__tag{
  font-family:var(--brand);font-size:9.6px;font-weight:600;letter-spacing:.168em;
  text-transform:uppercase;color:var(--cyan);text-align:center;
}

/* Contact links carry their own small mark */
.footer__col a{display:flex;align-items:center;gap:10px}
.footer__col a svg{
  width:15px;height:15px;flex-shrink:0;color:var(--dim);
  transition:color .15s ease;
}
.footer__col a:hover svg{color:var(--cyan)}