/* =================================================================
   1stDevelop — public stylesheet (structure only)
   Colours live in theme-dark.css / theme-light.css, picked by THEME in config.php.
   Type    : IBM Plex Mono (display, labels, UI) · IBM Plex Sans (body copy)
   ================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(.98rem,.94rem + .18vw,1.05rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* Faint vignette so the hero does not read as a flat black rectangle. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:var(--vignette);
}
body > *{position:relative;z-index:1}

img,svg{max-width:100%;height:auto}

a{color:var(--term);text-decoration:none}
a:hover{color:#fff;text-decoration:underline;text-underline-offset:.2em}

:focus-visible{outline:2px solid var(--term);outline-offset:3px;border-radius:2px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--term);color:#080a08;padding:.7rem 1rem;z-index:99;font-family:var(--mono);font-weight:600}
.skip:focus{left:0}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.5rem)}

/* ---------------------------------------------------------- masthead */

.masthead{
  position:sticky;top:0;z-index:50;
  background:rgba(8,10,8,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.masthead-in{display:flex;align-items:center;gap:1.75rem;min-height:64px}

.brand{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;
  color:var(--text);text-decoration:none
}
.brand:hover{text-decoration:none;color:var(--text)}
.brand-hi{color:var(--term)}

/* Mark: one solid bar splitting into two — a monolith becoming services. */
.brand-mark{
  display:inline-block;width:18px;height:18px;flex:0 0 18px;
  background:
    linear-gradient(var(--term),var(--term)) 0 0/5px 18px no-repeat,
    linear-gradient(#3d5240,#3d5240) 8px 0/10px 7.5px no-repeat,
    linear-gradient(#3d5240,#3d5240) 8px 10.5px/10px 7.5px no-repeat;
}

.nav-toggle{
  display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:var(--radius);padding:.5rem .65rem;cursor:pointer
}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{
  display:block;width:18px;height:2px;background:var(--text);content:"";position:relative
}
.nav-toggle-bars::before{position:absolute;top:-6px}
.nav-toggle-bars::after{position:absolute;top:6px}

.sitenav{margin-left:auto;display:flex;align-items:center;gap:1.75rem}
.sitenav ul{display:flex;align-items:center;gap:1.75rem;list-style:none;margin:0;padding:0}
.sitenav a{
  font-family:var(--mono);font-size:.78rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  padding:.3rem 0;border-bottom:1px solid transparent;text-decoration:none
}
.sitenav a:hover{color:var(--text);text-decoration:none}
.sitenav a[aria-current="page"]{color:var(--term);border-bottom-color:var(--term)}

/* ---------------------------------------------------------- buttons */

.btn{
  display:inline-block;background:var(--term);color:#080a08;
  font-family:var(--mono);font-weight:600;font-size:.85rem;letter-spacing:.02em;
  padding:.72rem 1.25rem;border:1px solid var(--term);border-radius:var(--radius);
  cursor:pointer;text-decoration:none;transition:background .15s ease,transform .1s ease
}
.btn:hover{background:var(--term-dim);border-color:var(--term-dim);color:#080a08;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:.45rem .85rem;font-size:.78rem}
.btn-ghost{background:var(--panel-2);color:var(--text);border-color:var(--line)}
.btn-ghost:hover{background:var(--panel);border-color:var(--term);color:var(--term)}

/* ---------------------------------------------------------- type */

.eyebrow{
  font-family:var(--mono);font-size:.74rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--term);
  margin:0 0 1.35rem
}
.eyebrow::before{content:"// ";opacity:.55}

.display{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(2rem,1.1rem + 4vw,4.15rem);
  line-height:1.04;letter-spacing:-.01em;text-transform:uppercase;
  color:var(--text);margin:0 0 1.4rem;max-width:20ch
}
.display .hi{color:var(--term)}

.h2{
  font-family:var(--mono);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.3rem,1.1rem + 1.1vw,1.95rem);
  line-height:1.15;letter-spacing:-.005em;margin:0 0 1rem
}
.h3{font-family:var(--mono);font-size:1.02rem;font-weight:600;line-height:1.3;margin:0 0 .55rem;color:var(--text)}
.lede{font-size:clamp(1rem,.96rem + .35vw,1.15rem);color:var(--muted);line-height:1.6;max-width:56ch;margin:0 0 1.6rem}

.slab{padding-block:clamp(3rem,7vw,5.5rem)}
.slab-tight{padding-block:clamp(2rem,4vw,3rem)}
.band{background:var(--deep);border-block:1px solid var(--line-soft)}
.band-ink{background:#050705;border-block:1px solid var(--line-soft)}
.doc-head{padding-block:clamp(2.5rem,6vw,4rem) clamp(1rem,3vw,1.75rem)}

.prose{max-width:70ch;color:var(--muted)}
.prose h2{font-family:var(--mono);text-transform:uppercase;font-size:clamp(1.15rem,1rem + .7vw,1.5rem);color:var(--text);margin:2.4rem 0 .8rem;letter-spacing:-.005em}
.prose h3{font-family:var(--mono);font-size:1rem;color:var(--text);margin:1.8rem 0 .5rem}
.prose p{margin:0 0 1.1rem}
.prose ul,.prose ol{margin:0 0 1.2rem;padding-left:1.2rem}
.prose li{margin-bottom:.5rem}
.prose li::marker{color:var(--term)}
.prose strong{color:var(--text);font-weight:600}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
.prose blockquote{margin:1.6rem 0;padding-left:1.1rem;border-left:2px solid var(--term);color:var(--muted)}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--panel);color:var(--term);padding:.1em .38em;border-radius:3px}

/* ---------------------------------------------------------- hero */

.hero{padding-block:clamp(3.5rem,9vw,7rem) clamp(2.5rem,6vw,4.5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--gap);align-items:center}
.hero .display{max-width:16ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}

/* Stat strip under the hero. */
.stats{display:flex;flex-wrap:wrap;gap:clamp(2rem,5vw,3.5rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
.stat-n{
  display:block;font-family:var(--mono);font-weight:700;color:var(--term);
  font-size:clamp(1.6rem,1.2rem + 1.4vw,2.1rem);line-height:1.1;letter-spacing:-.02em
}
.stat-l{
  display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin-top:.45rem
}

/* Signature figure: monolith on the left, services on the right. */
.split-figure{width:100%;display:block}
.split-figure .mono-block{fill:#1e2a1f}
.split-figure .svc{fill:var(--panel-2);stroke:#31432f;stroke-width:1.5}
.split-figure .svc-live{fill:var(--term-glow);stroke:var(--term)}
.split-figure .wire{stroke:#2d3f2f;stroke-width:1.25;fill:none;stroke-dasharray:4 4}
.split-figure .cap{font-family:var(--mono);font-size:11px;fill:var(--dim);letter-spacing:.16em}

@media (prefers-reduced-motion:no-preference){
  .split-figure .svc,.split-figure .svc-live{animation:settle .7s cubic-bezier(.2,.7,.3,1) backwards}
  .split-figure .svc:nth-of-type(1){animation-delay:.05s}
  .split-figure .svc:nth-of-type(2){animation-delay:.15s}
  .split-figure .svc:nth-of-type(3){animation-delay:.25s}
  .split-figure .svc:nth-of-type(4){animation-delay:.35s}
  @keyframes settle{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
}

/* ---------------------------------------------------------- grids */

.grid{display:grid;gap:clamp(1rem,2vw,1.4rem)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;transition:border-color .15s ease,background .15s ease
}
.card:hover{border-color:#2b3a2d;background:var(--panel-2)}
.card p{margin:0;color:var(--muted);font-size:.94rem}
.card .h3{margin-bottom:.5rem}
.card-tag{
  display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--term);margin-bottom:.85rem
}

/* Ordered stages — numbering is real sequence here, so it stays. */
.stage{border-top:1px solid var(--line);padding-top:1.1rem}
.stage-n{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--term);margin-bottom:.7rem}
.stage p{color:var(--muted);font-size:.94rem;margin:0}

/* ---------------------------------------------------------- forms */

.form{max-width:44rem}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.field{display:block;margin:0 0 1.15rem}
.field label{
  display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:.45rem
}
.field .hint{text-transform:none;letter-spacing:0;color:var(--dim);font-family:var(--sans)}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--sans);font-size:.96rem;padding:.75rem .9rem;
  background:var(--panel);color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius)
}
/* The rule above is meant for text boxes. A radio or tick box stretched to
   full width renders as a lone dot with its label pushed onto the next line. */
.field input[type="radio"],
.field input[type="checkbox"]{
  width:auto;flex:0 0 auto;margin:0;padding:0;
  background:none;border:0;border-radius:0;
  inline-size:1.05rem;block-size:1.05rem;accent-color:var(--term)
}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--term);box-shadow:0 0 0 3px var(--term-glow)
}
.field textarea{resize:vertical;min-height:9rem}
.field-error{display:block;color:var(--bad);font-size:.85rem;margin-top:.3rem}
.trap{position:absolute;left:-9999px}

.notice{
  border-left:2px solid var(--term);background:var(--term-glow);
  padding:.85rem 1rem;border-radius:var(--radius);margin:1.5rem 0;font-size:.94rem;color:var(--text)
}
.notice-bad{border-left-color:var(--bad);background:var(--bad-tint)}

/* ---------------------------------------------------------- footer */

.footer{border-top:1px solid var(--line-soft);background:var(--deep);margin-top:clamp(3rem,7vw,6rem)}

/* Brand, then the link columns. The newsletter is its own row below. */
.footer-top{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,2fr) minmax(0,1fr);
  gap:var(--gap);
  padding-block:clamp(2.5rem,5vw,3.5rem)
}
.footer-line{color:var(--muted);max-width:38ch;margin:.9rem 0 1rem;font-size:.94rem}
.footer-mail a{font-family:var(--mono);font-size:.88rem}

.footer-h{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);font-weight:500;margin:0 0 .95rem
}

/* Site links spill into as many columns as FOOTER_LINKS_PER_COL allows. */
.footer-cols{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,3vw,3rem)}
.footer-cols ul,.footer-legal ul{list-style:none;margin:0;padding:0;min-width:7rem}
.footer-cols li,.footer-legal li{margin-bottom:.55rem}
.footer-cols a,.footer-legal a{color:var(--muted);font-size:.92rem;text-decoration:none}
.footer-cols a:hover,.footer-legal a:hover{color:var(--term)}

/* Newsletter: full width, label and blurb above, field and button in a row. */
.footer-news{border-top:1px solid var(--line-soft);background:var(--panel)}
.footer-news > .shell{padding-block:clamp(1.75rem,4vw,2.5rem)}
.footer-news-blurb{color:var(--muted);font-size:.95rem;margin:0 0 1.1rem;max-width:60ch}
.news-form{margin:0}
.news-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;max-width:34rem}
.news-row input{
  flex:1 1 16rem;min-width:0;font-family:var(--sans);font-size:.95rem;padding:.7rem .85rem;
  background:var(--void);color:var(--text);border:1px solid var(--line);border-radius:var(--radius)
}
.news-row input::placeholder{color:var(--dim)}
.news-row input:focus{outline:none;border-color:var(--term);box-shadow:0 0 0 3px var(--term-glow)}
.news-row .btn{flex:0 0 auto}

.footer-base{
  display:flex;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--line-soft);padding-block:1.15rem;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--dim)
}
.footer-base p{margin:0}
.footer-base a{color:var(--dim);text-decoration:none}
.footer-base a:hover{color:var(--term)}

/* ---------------------------------------------------------- responsive */

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}

@media (max-width:760px){
  .nav-toggle{display:block}

  /**
   * No blur on small screens. An element with backdrop-filter becomes the
   * containing block for its position:fixed descendants, so the menu panel
   * was being positioned inside the header bar rather than the viewport —
   * which is why it appeared as a strip in the top corner. Losing the blur
   * costs nothing; the bar is opaque instead.
   */
  .masthead{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--void)}

  /* Offcanvas panel from the right, rather than a dropdown under the bar. */
  .sitenav{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(20rem,86vw);
    height:100vh;height:100dvh;
    transform:translateX(100%);
    transition:transform .25s ease;
    background:var(--deep);border-left:1px solid var(--line);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:1.25rem;margin:0;z-index:70;overflow-y:auto;
    display:flex;visibility:hidden
  }
  .sitenav.is-open{transform:none;visibility:visible}
  .sitenav ul{flex-direction:column;align-items:stretch;gap:0;margin-top:2.5rem}
  .sitenav li{border-bottom:1px solid var(--line-soft)}
  .sitenav a{display:block;padding:.9rem 0;font-size:.9rem;border-bottom:0}
  .sitenav .btn{margin-top:1rem;text-align:center;display:block}

  /* Close button inside the panel. */
  .nav-close{
    position:absolute;top:.75rem;right:1rem;background:none;border:0;
    color:var(--muted);font-size:1.7rem;line-height:1;cursor:pointer;padding:.1rem .3rem
  }
  .nav-close:hover{color:var(--term)}

  /**
   * Below the masthead, not above it. The panel is a child of the masthead, so
   * a backdrop stacked higher than the masthead would cover the panel it is
   * meant to sit behind. Dimming the page but not the header bar is also what
   * keeps the close button visible.
   */
  .nav-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40;
    opacity:0;visibility:hidden;transition:opacity .25s ease
  }
  .nav-backdrop.is-open{opacity:1;visibility:visible}

  body.nav-locked{overflow:hidden}
  .langpick{margin-top:1rem}
  .langpick-menu{position:static;margin-top:.4rem;width:100%}
}

@media (min-width:761px){
  .nav-close,.nav-backdrop{display:none}
}

@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .footer-cols{gap:1.5rem}
  .footer-base{flex-direction:column}
  .stats{gap:1.75rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media print{
  body{background:#fff;color:#000}
  body::before,.masthead,.footer,.skip{display:none}
}

/* ---------------------------------------------------------- chat assistant */

.cb{position:fixed;right:clamp(.85rem,2vw,1.5rem);bottom:clamp(.85rem,2vw,1.5rem);z-index:80}

.cb-toggle{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--term);color:#080a08;border:1px solid var(--term);
  font-family:var(--mono);font-size:.82rem;font-weight:600;
  padding:.7rem 1.1rem;border-radius:999px;cursor:pointer
}
.cb-toggle:hover{background:var(--term-dim);border-color:var(--term-dim)}
.cb-toggle span{font-size:.6rem;line-height:1}

.cb-panel{
  position:absolute;right:0;bottom:calc(100% + .6rem);
  width:min(22rem,calc(100vw - 2rem));
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden
}
.cb-panel[hidden]{display:none}

.cb-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.7rem .9rem;border-bottom:1px solid var(--line);background:var(--panel-2)}
.cb-title{margin:0;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--term)}
.cb-close{background:none;border:0;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer;padding:0 .2rem}
.cb-close:hover{color:var(--text)}

.cb-log{list-style:none;margin:0;padding:.9rem;max-height:19rem;overflow-y:auto;display:flex;flex-direction:column;gap:.55rem}
.cb-msg{max-width:85%;padding:.55rem .75rem;border-radius:var(--radius);font-size:.9rem;line-height:1.5;word-wrap:break-word}
.cb-bot{align-self:flex-start;background:var(--panel-2);color:var(--text);border:1px solid var(--line)}
.cb-me{align-self:flex-end;background:var(--term-glow);color:var(--text);border:1px solid var(--term)}
.cb-wait{color:var(--dim);letter-spacing:.2em}

.cb-form{display:flex;gap:.45rem;padding:.7rem;border-top:1px solid var(--line);background:var(--panel-2)}
.cb-form[hidden]{display:none}
.cb-input{
  flex:1;min-width:0;font-family:var(--sans);font-size:.9rem;padding:.55rem .7rem;
  background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:var(--radius)
}
.cb-input::placeholder{color:var(--dim)}
.cb-input:focus{outline:none;border-color:var(--term);box-shadow:0 0 0 3px var(--term-glow)}

@media (max-width:640px){
  .cb-panel{width:calc(100vw - 1.7rem)}
  .cb-log{max-height:15rem}
}

/* ---------------------------------------------------------- jobs board */

.job-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.job-row{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.4rem 0;border-bottom:1px solid var(--line)
}
.job-main{min-width:0}
.job-row .h3{margin-bottom:.35rem}
.job-row .h3 a{color:var(--text);text-decoration:none}
.job-row .h3 a:hover{color:var(--term);text-decoration:none}
.job-summary{margin:0 0 .45rem;color:var(--muted);font-size:.95rem;max-width:60ch}
.job-meta{
  margin:0;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)
}
.doc-head .job-meta{margin-bottom:1rem}
.job-action{flex:0 0 auto}

@media (max-width:640px){
  .job-row{flex-direction:column;align-items:flex-start;gap:.9rem}
}

/* ---------------------------------------------------------- toast notice */

.notice-toast{transition:opacity .35s ease,transform .35s ease}
.notice-toast.is-going{opacity:0;transform:translateY(-6px)}

/* ---------------------------------------------------------- language picker */

.langpick{position:relative}
.langpick-toggle{font-family:var(--mono);letter-spacing:.06em}
.langpick-menu{
  position:absolute;right:0;top:calc(100% + .4rem);z-index:60;
  list-style:none;margin:0;padding:.35rem;min-width:11rem;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)
}
.langpick-menu[hidden]{display:none}
.langpick-menu a{
  display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:3px;
  color:var(--muted);text-decoration:none;font-size:.9rem
}
.langpick-menu a:hover{background:var(--panel-2);color:var(--text);text-decoration:none}
.langpick-menu a[aria-current="true"]{color:var(--term)}
.langpick-code{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  border:1px solid var(--line);border-radius:2px;padding:.05rem .3rem
}

/* ---------------------------------------------------------- blog */

.post-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.post-row{padding:1.5rem 0;border-bottom:1px solid var(--line)}
.post-cat{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--term);margin:0 0 .5rem}
.post-row .h3 a{color:var(--text);text-decoration:none}
.post-row .h3 a:hover{color:var(--term);text-decoration:none}
.post-excerpt{color:var(--muted);margin:.4rem 0 .5rem;max-width:65ch;font-size:.96rem}
.post-meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0}
.empty-note{color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius);padding:1.5rem;text-align:center}

.filters{display:flex;flex-wrap:wrap;gap:1.1rem;margin:0 0 1.5rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.filters a{color:var(--muted);text-decoration:none;padding-bottom:.25rem;border-bottom:1px solid transparent}
.filters a:hover{color:var(--text);text-decoration:none}
.filters a.is-on{color:var(--term);border-bottom-color:var(--term)}

.pager{display:flex;gap:.4rem;margin-top:2rem;font-family:var(--mono);font-size:.85rem}
.pager a{padding:.35rem .7rem;border:1px solid var(--line);border-radius:var(--radius);color:var(--muted);text-decoration:none}
.pager a:hover{border-color:var(--term);color:var(--term);text-decoration:none}
.pager a.is-on{background:var(--term);border-color:var(--term);color:#080a08}

/* ---------------------------------------------------------- faq */

.faq-cat{margin-top:2.5rem}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  cursor:pointer;padding:1.1rem 0;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:flex-start
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--term);font-family:var(--mono);flex:0 0 auto}
.faq-item[open] summary::after{content:"–"}
.faq-item summary:hover{color:var(--term)}
.faq-answer{padding:0 0 1.2rem;max-width:70ch}
.faq-answer p:last-child{margin-bottom:0}

/* ---------------------------------------------------------- reviews */

.rv-grid{
  display:grid;gap:clamp(1rem,2vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))
}
.rv-card{
  display:flex;flex-direction:column;gap:.9rem;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;transition:border-color .15s ease
}
.rv-card:hover{border-color:#2b3a2d}
.rv-logo{margin:0;min-height:2.25rem;display:flex;align-items:center}
.rv-logo img{max-height:2.25rem;width:auto;max-width:11rem;object-fit:contain}
.rv-stars{color:var(--term);letter-spacing:.14em;margin:0;font-size:.95rem}
.rv-stars-off{color:var(--line)}
.rv-title{
  margin:0;font-size:1rem;line-height:1.45;font-weight:600;color:var(--text);
  font-family:var(--sans);letter-spacing:0
}
.rv-tags{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.rv-tags li{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  background:var(--panel-2);border:1px solid var(--line);border-radius:3px;
  padding:.28rem .5rem;color:var(--muted)
}
.rv-action{margin:auto 0 0}

/* The dialog opens purely on :target, so it works with JavaScript off. */
.rv-modal{display:none}
.rv-modal:target{
  display:flex;position:fixed;inset:0;z-index:90;
  align-items:center;justify-content:center;padding:clamp(1rem,4vw,2.5rem)
}
.rv-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.rv-modal-box{
  position:relative;z-index:1;width:min(38rem,100%);max-height:85vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.5rem,4vw,2.25rem);display:flex;flex-direction:column;gap:1rem
}
.rv-modal-close{
  position:absolute;top:.6rem;right:.85rem;font-size:1.6rem;line-height:1;
  color:var(--muted);text-decoration:none
}
.rv-modal-close:hover{color:var(--term);text-decoration:none}
.rv-modal-title{margin:0;font-size:1.15rem;line-height:1.4;color:var(--text)}
.rv-quote{margin:0;padding-left:1rem;border-left:2px solid var(--term)}
.rv-quote p{margin:0;font-size:1.02rem;line-height:1.6;color:var(--text)}
.rv-by{margin:0;font-size:.92rem;color:var(--muted)}
.rv-role{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin-top:.2rem}

/* ---------------------------------------------------------- quiz */

.quiz{border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.25rem,3vw,2rem);background:var(--panel)}
.quiz-q{margin-bottom:.5rem}
.quiz-intro{color:var(--muted);font-size:.95rem;margin:0 0 1.2rem}
.quiz-options{list-style:none;margin:0 0 1.25rem;padding:0;display:grid;gap:.5rem}
.quiz-option{display:flex;align-items:center;gap:.65rem;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer}
.quiz-option:hover{border-color:var(--term)}
.quiz-option input{accent-color:var(--term)}

.quiz-chart{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.7rem}
.quiz-bar-row{display:grid;grid-template-columns:minmax(6rem,14rem) 1fr 3rem;gap:.75rem;align-items:center;font-size:.92rem}
.quiz-bar-label{color:var(--muted)}
.quiz-bar-track{background:var(--panel-2);border:1px solid var(--line);border-radius:2px;height:.85rem;overflow:hidden}
.quiz-bar-fill{display:block;height:100%;background:var(--term)}
.quiz-bar-value{font-family:var(--mono);font-size:.82rem;color:var(--text);text-align:right}
.quiz-total{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:1rem 0 0}

@media (max-width:560px){
  .quiz-bar-row{grid-template-columns:1fr 2.5rem;grid-template-areas:"label label" "track value"}
  .quiz-bar-label{grid-area:label}
  .quiz-bar-track{grid-area:track}
  .quiz-bar-value{grid-area:value}
}

/* ---------------------------------------------------------- forms builder */

/**
 * Specificity note: the generic `.field label` rule sets small uppercase mono
 * caption styling and display:block. It outranks a bare `.fb-choice`, which is
 * why choice labels rendered as tiny capitals with the button jammed against
 * them. These selectors carry the extra class so they win.
 */

.fb-wrap{max-width:38rem}
.fb-intro{margin-bottom:1.25rem}
.fb .field{margin-bottom:1.25rem}

/* A question: readable, sentence case, in the body face. */
.fb .field > label,
.fb .fb-question{
  display:block;font-family:var(--sans);font-size:.98rem;line-height:1.4;
  font-weight:600;letter-spacing:0;text-transform:none;color:var(--text);
  margin-bottom:.45rem
}
.fb .field > label .hint,
.fb .fb-question .hint{
  font-family:var(--sans);font-size:.82rem;font-weight:400;
  text-transform:none;letter-spacing:0;color:var(--dim)
}
.fb .fb-help{
  display:block;margin:-.2rem 0 .5rem;color:var(--muted);
  font-size:.85rem;text-transform:none;letter-spacing:0;font-family:var(--sans)
}

.fb .field input[type="text"],
.fb .field input[type="email"],
.fb .field textarea,
.fb .field select{
  padding:.55rem .7rem;font-size:.93rem
}
.fb .field textarea{min-height:6.5rem}

.fb .fb-choices{display:grid;gap:.35rem;margin-top:.15rem}
.fb .field .fb-choice{
  display:flex;align-items:center;gap:.6rem;
  padding:.5rem .7rem;margin:0;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);cursor:pointer;
  font-family:var(--sans);font-size:.93rem;font-weight:400;line-height:1.35;
  letter-spacing:0;text-transform:none;color:var(--text)
}
.fb .field .fb-choice:hover{border-color:var(--term);background:var(--panel-2)}
.fb .field .fb-choice span{flex:1 1 auto}
.fb .field .fb-choice:has(input:checked){border-color:var(--term);background:var(--term-glow)}

.fb-score{
  font-family:var(--mono);font-size:1.6rem;margin:0 0 1.5rem;color:var(--text)
}
.fb-score strong{color:var(--term);font-size:2.2rem}
.fb-score-pct{font-size:1rem;color:var(--dim);margin-left:.5rem}

.fb-review{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;counter-reset:q}
.fb-review-item{
  border:1px solid var(--line);border-left-width:3px;border-radius:var(--radius);padding:1rem 1.15rem
}
.fb-review-item.is-right{border-left-color:var(--term)}
.fb-review-item.is-wrong{border-left-color:var(--bad)}
.fb-q{margin:0 0 .4rem;font-weight:600;color:var(--text)}
.fb-a{margin:0;font-size:.93rem;color:var(--muted)}
.fb-correct{color:var(--term);margin-top:.25rem}

/* ---------------------------------------------------------- showcase */

.tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 2rem}
.tabs a{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;
  padding:.55rem 1rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);color:var(--muted);text-decoration:none
}
.tabs a:hover{color:var(--text);border-color:var(--term);text-decoration:none}
.tabs a.is-on{background:var(--term);border-color:var(--term);color:#080a08;font-weight:600}

.work-grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.work-card{display:flex;flex-direction:column;gap:.6rem;text-align:center}

/* A browser-window frame, so a screenshot reads as a site rather than a photo. */
.work-frame{
  position:relative;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel-2);overflow:hidden;padding-top:1.6rem
}
.work-chrome{
  position:absolute;top:0;left:0;right:0;height:1.6rem;
  display:flex;align-items:center;gap:.3rem;padding-left:.6rem;
  background:var(--panel);border-bottom:1px solid var(--line)
}
.work-chrome i{width:.45rem;height:.45rem;border-radius:50%;background:var(--line)}
.work-frame img{display:block;width:100%;height:auto}
.work-html{padding:1rem;font-size:.85rem;color:var(--muted);overflow:hidden}
.work-title{font-family:var(--sans);font-size:1.02rem;font-weight:600;margin:.3rem 0 0;color:var(--text)}
.work-sub{margin:0;color:var(--muted);font-size:.9rem}
.work-link{margin:.2rem 0 0}
.work-link a{font-size:.92rem}

/* ---------------------------------------------------------- gallery */

.gal-block{scroll-margin-top:5rem}
.gal{display:grid;gap:.6rem;grid-template-columns:repeat(var(--gal-cols,3),minmax(0,1fr))}
.gal-item{margin:0}
.gal-link{display:block;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line)}
.gal-link img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.gal-link:hover img{transform:scale(1.04)}
.gal-item figcaption{margin-top:.4rem;font-size:.82rem;color:var(--muted)}

.gal-grid .gal-link{aspect-ratio:4/3}

/* Masonry: CSS columns keep every picture whole rather than cropping. */
.gal-masonry{display:block;column-count:var(--gal-cols,3);column-gap:.6rem}
.gal-masonry .gal-item{break-inside:avoid;margin-bottom:.6rem}

.gal-strip{display:flex;overflow-x:auto;gap:.6rem;padding-bottom:.5rem;scroll-snap-type:x mandatory}
.gal-strip .gal-item{flex:0 0 min(20rem,72vw);scroll-snap-align:start}
.gal-strip .gal-link{aspect-ratio:4/3}

/**
 * A modal nested inside <main> is trapped in main's stacking context, because
 * `body > *` gives it z-index:1 — so however high the modal's own z-index, the
 * masthead still painted over the top of the screen and swallowed clicks meant
 * for the backdrop. Lift the container while a viewer is open.
 */
body > main:has(.gal-view:target),
body > main:has(.rv-modal:target){z-index:96}

/* Full-size viewer, opened by the URL fragment so it needs no JavaScript. */
.gal-view{display:none}
.gal-view:target{
  display:flex;position:fixed;inset:0;z-index:95;
  align-items:center;justify-content:center;padding:clamp(.75rem,3vw,2rem)
}
.gal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.88)}
.gal-view-box{position:relative;z-index:1;max-width:min(72rem,100%);max-height:92vh;text-align:center}
.gal-view-box img{max-width:100%;max-height:78vh;width:auto;height:auto;border-radius:var(--radius)}
.gal-close{
  position:absolute;top:-.4rem;right:-.2rem;z-index:2;
  font-size:2rem;line-height:1;color:#fff;text-decoration:none;
  text-shadow:0 1px 3px rgba(0,0,0,.9);padding:.2rem .5rem
}
.gal-close:hover{color:var(--term);text-decoration:none}
.gal-prev,.gal-next{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  font-size:2.6rem;line-height:1;color:#fff;text-decoration:none;
  padding:.3rem .7rem;text-shadow:0 1px 3px rgba(0,0,0,.9)
}
.gal-prev{left:-.5rem}
.gal-next{right:-.5rem}
.gal-prev:hover,.gal-next:hover{color:var(--term);text-decoration:none}
.gal-caption{margin:.75rem 0 0;color:#e8ece7;font-size:.95rem}
.gal-count{margin:.3rem 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:#8fa197}

@media (max-width:900px){
  .gal{grid-template-columns:repeat(min(var(--gal-cols,3),2),minmax(0,1fr))}
  .gal-masonry{column-count:min(var(--gal-cols,3),2)}
}
@media (max-width:560px){
  .gal{grid-template-columns:1fr}
  .gal-masonry{column-count:1}
  .gal-prev{left:-.2rem}
  .gal-next{right:-.2rem}
}

/* ---------------------------------------------------------- home hero */

.sweep{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(46rem,92vh);display:flex;align-items:center;
  margin-top:calc(-1 * var(--gap));
  padding-block:clamp(4rem,10vw,7rem);
  border-bottom:1px solid var(--line)
}

/* The photograph, dimmed hard so type stays readable over a busy skyline.
   Without one, the gradient below still reads as a city at night. */
.sweep-bg{
  position:absolute;inset:0;z-index:-2;overflow:hidden;
  background-color:#05070a;
  background-image:var(--hero-image, none);
  background-size:cover;
  background-position:center 35%;
  transform:scale(1.04);
  animation:sweep-drift 32s ease-in-out infinite alternate
}

/* The dimming sits in its own layer so its strength can be set from the admin
   without rebuilding the whole background shorthand. */
.sweep-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom,
      rgba(3,5,8,calc(var(--sweep-dim,.7) + .12)) 0%,
      rgba(3,5,8,calc(var(--sweep-dim,.7) - .10)) 38%,
      rgba(3,5,8,calc(var(--sweep-dim,.7) + .22)) 100%),
    radial-gradient(120% 80% at 70% 20%, rgba(0,255,65,.10), transparent 60%)
}

/* The drawn skyline, used until a photograph is uploaded. */
/* Scaled by width so the whole skyline is visible: cropping it to fill the
   height cut the landmarks off at the knees. */
/* Scaled with a transform rather than a percentage width: left, right and
   width together over-constrain an absolutely positioned box, and the browser
   quietly drops one of them. The origin is the bottom edge, so the buildings
   stay standing on the ground however far it is zoomed. */
.sweep-skyline{
  position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;
  display:block;transform:scale(1.16);transform-origin:bottom center
}
.sweep-drawn .sweep-bg{
  background-image:linear-gradient(to bottom,#08111c 0%,#0a1724 55%,#050a10 100%);
  /* No slow drift on the drawn skyline: the scale it applies would enlarge the
     vector and push the buildings' bases below the edge of the band. */
  animation:none;transform:none
}
.sweep-drawn .sweep-bg::after{
  background:
    linear-gradient(to bottom, rgba(3,5,8,.62) 0%, rgba(3,5,8,.22) 52%, rgba(3,5,8,.72) 100%),
    radial-gradient(120% 80% at 70% 20%, rgba(0,255,65,.10), transparent 60%)
}
@keyframes sweep-drift{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(1.10) translate3d(-1.2%,-1.4%,0)}
}

/* A faint grid and a sweep, so the still photo feels instrumented. */
.sweep-scan{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,255,65,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,65,.045) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px;
  mask-image:radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 80%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 80%)
}
.sweep-scan::after{
  content:"";position:absolute;left:0;right:0;height:34vh;
  background:linear-gradient(to bottom, transparent, rgba(0,255,65,.07), transparent);
  animation:sweep-move 7s linear infinite
}
@keyframes sweep-move{
  0%{transform:translateY(-40vh)}
  100%{transform:translateY(105vh)}
}

.sweep-in{display:flex;flex-direction:column;gap:1.75rem;width:100%}

/* Every slide occupies the same grid cell, so the band keeps the height of the
   tallest one and nothing below it jumps as they change. */
.sweep-deck{display:grid;width:100%}
.sweep-slide{
  grid-area:1/1;
  display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
  opacity:0;visibility:hidden;transform:translateY(.9rem);
  transition:opacity .45s ease, transform .45s ease, visibility .45s;
  pointer-events:none
}
.sweep-slide.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto}

/* Which of the four you are on, and how to move between them. */
/* Above the slides, in the space the band already left at the top: the tabs
   read as a menu of what the company does rather than as pagination. */
.sweep-nav{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.25rem}
.sweep-tabs{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.sweep-tab{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.5rem .9rem;border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(4,8,6,.55);color:#8c9a90;cursor:pointer;
  transition:color .2s ease, border-color .2s ease
}
.sweep-tab:hover{color:#e8f1ea;border-color:rgba(0,255,65,.4)}
.sweep-tab.is-on{color:#080a08;background:var(--term);border-color:var(--term);font-weight:600}
.sweep-arrow{
  font-size:1.5rem;line-height:1;padding:.15rem .6rem;cursor:pointer;
  background:rgba(4,8,6,.55);color:#8c9a90;
  border:1px solid var(--line);border-radius:var(--radius)
}
.sweep-arrow:hover{color:var(--term);border-color:rgba(0,255,65,.4)}

/* A slide that is not showing must not be reachable by keyboard. */
.sweep-slide:not(.is-on) a,
.sweep-slide:not(.is-on) button{pointer-events:none}

.sweep-eyebrow{
  display:flex;align-items:center;gap:.55rem;margin:0 0 1.1rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--term)
}
.sweep-dot{
  width:.5rem;height:.5rem;border-radius:50%;background:var(--term);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(0,255,65,.6);animation:sweep-pulse 2.4s ease-out infinite
}
@keyframes sweep-pulse{
  0%{box-shadow:0 0 0 0 rgba(0,255,65,.55)}
  70%{box-shadow:0 0 0 .7rem rgba(0,255,65,0)}
  100%{box-shadow:0 0 0 0 rgba(0,255,65,0)}
}

.sweep-title{
  font-size:clamp(2.3rem,1.4rem + 3.9vw,4.4rem);
  line-height:1.02;letter-spacing:-.03em;margin:0 0 1.1rem;
  color:#f4f8f4;text-wrap:balance
}
.sweep-caret{
  display:inline-block;width:.55ch;height:.86em;margin-left:.12em;
  background:var(--term);vertical-align:-.06em;
  animation:sweep-blink 1.05s steps(1) infinite
}
@keyframes sweep-blink{50%{opacity:0}}

.sweep-lede{
  color:#b9c6bc;font-size:clamp(1rem,.95rem + .35vw,1.18rem);
  line-height:1.6;max-width:46ch;margin:0 0 1.75rem
}
.sweep-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:0 0 2.25rem}

.sweep-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;
  list-style:none;margin:0;padding:1.35rem 0 0;border-top:1px solid rgba(255,255,255,.12)
}
.sweep-stats li{display:flex;flex-direction:column;gap:.15rem}
.sweep-stats strong{
  font-family:var(--mono);font-size:clamp(1.25rem,1.1rem + .6vw,1.7rem);
  color:var(--term);letter-spacing:-.02em
}
.sweep-stats span{
  font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:#8c9a90
}

/* ---- the terminal ---- */

.sweep-term{
  border:1px solid rgba(0,255,65,.22);border-radius:var(--radius);
  background:rgba(4,8,6,.78);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow:hidden;font-family:var(--mono)
}
.sweep-term-bar{
  display:flex;align-items:center;gap:.7rem;padding:.6rem .85rem;
  border-bottom:1px solid rgba(0,255,65,.16);background:rgba(0,0,0,.35)
}
.sweep-term-dots{display:flex;gap:.35rem}
.sweep-term-dots i{width:.55rem;height:.55rem;border-radius:50%;background:rgba(255,255,255,.18)}
.sweep-term-name{font-size:.72rem;color:#7f8f84;letter-spacing:.06em}
.sweep-term-live{
  margin-left:auto;font-size:.64rem;letter-spacing:.18em;color:var(--term);
  display:flex;align-items:center;gap:.4rem
}
.sweep-term-live::before{
  content:"";width:.42rem;height:.42rem;border-radius:50%;background:var(--term);
  animation:sweep-blink 1.4s steps(1) infinite
}

.sweep-term-body{
  /* A fixed height, not a range: letting it grow as lines arrived made the
     whole panel jump down the page while someone was reading it. */
  padding:1rem .95rem;height:16rem;overflow:hidden;
  display:flex;flex-direction:column;gap:.42rem;justify-content:flex-start
}
.sweep-line{
  margin:0;font-size:.78rem;line-height:1.45;color:#cfe0d4;
  display:flex;flex-wrap:wrap;gap:.45rem .5rem;align-items:baseline;
  animation:sweep-line-in .28s ease-out
}
/* The description takes its own row, indented under the target, so a long
   finding does not read as a separate unrelated line. */
.sweep-line > span:nth-child(3){
  flex:1 1 100%;padding-left:1.1rem;color:#9fb2a5;font-size:.74rem;
  border-left:1px solid rgba(0,255,65,.18);margin-left:.15rem
}
@keyframes sweep-line-in{from{opacity:0;transform:translateY(.35rem)}to{opacity:1;transform:none}}
.sweep-line-cmd{color:#8c9a90}
.sweep-prompt{color:var(--term)}
.sweep-target{color:#e8f1ea}
.sweep-line-muted{color:#7c8b81}

.sev{
  flex:0 0 auto;font-size:.62rem;letter-spacing:.1em;padding:.15rem .42rem;
  border-radius:2px;border:1px solid currentColor
}
.sev-critical{color:#ff8a75}
.sev-high{color:#ffb454}
.sev-medium{color:#ffe08a}
.sev-low{color:#8fd0a4}

/* The other panels use their own words, so they get their own colours: a
   result is green, a tool or standard is blue, a caveat amber. */
.sev-optimal,.sev-pass,.sev-deploy,.sev-cert{color:#8fd0a4}
.sev-gurobi,.sev-cplex,.sev-neos,.sev-mip,.sev-fhir,.sev-lab{color:#8fc4f0}
.sev-pci,.sev-audit,.sev-test{color:#ffe08a}
.sev-build,.sev-course{color:#b9c6bc}

.sweep-term-foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem .85rem;border-top:1px solid rgba(0,255,65,.16);
  background:rgba(0,0,0,.3);font-size:.7rem;color:#7f8f84
}
.sweep-count strong{color:var(--term);font-size:.9rem}
.sweep-note{letter-spacing:.04em;opacity:.75}

/* On a narrow screen the full skyline would scale down to a thin strip, so
   show a larger slice of it instead — the middle, where the landmarks are. */
@media (max-width:900px){
  .sweep-skyline{transform:scale(2.1)}
}
@media (max-width:560px){
  .sweep-skyline{transform:scale(3)}
}

@media (max-width:900px){
  .sweep-slide{grid-template-columns:1fr}
  .sweep{min-height:0}
  .sweep-term-body{height:13rem}
}
@media (max-width:560px){
  .sweep-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
  .sweep-term{font-size:.95em}
}

/* Movement is decoration here; the content is identical without it. */
@media (prefers-reduced-motion:reduce){
  .sweep-bg{animation:none;transform:none}
  .sweep-scan::after,.sweep-dot,.sweep-caret,.sweep-term-live::before{animation:none}
  .sweep-line{animation:none}
}

/* ---------------------------------------------------------- social links */

.social-list{
  display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:.9rem 0 0;padding:0
}
.social-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;border-radius:var(--radius);
  border:1px solid var(--line);color:var(--muted);
  transition:color .18s ease, border-color .18s ease, background .18s ease
}
.social-link:hover,
.social-link:focus-visible{
  color:var(--term);border-color:var(--term);background:var(--panel-2)
}
.social-icon{display:block}

/* ---------------------------------------------------------- newsletter page */

.nl-wrap{max-width:44rem}
.nl-body{margin:1.5rem 0}
.nl-text{white-space:pre-wrap;font-family:var(--mono);font-size:.9rem;line-height:1.6;color:var(--text)}
.nl-foot{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.9rem}
.nl-foot a{color:var(--muted)}