/* =========================================================================
   Blog index: the diagnostic terminal
   =========================================================================
   The rest of the site is daylight: white ground, black text, photographs of
   the shop. The blog index goes the other way on purpose. It is the one page
   that is a list of doors rather than a thing to read, so it gets to be an
   instrument panel: the scan tool readout the shop actually works from, in the
   blue and red of the brand.

   The articles themselves stay light. Long copy on a dark ground is harder to
   read, and the contrast between the index and the articles is the point.

   Scoped to .fcb26, which sits alongside .fcs26 so all the base layout still
   applies and only colour and treatment are overridden. This sheet loads after
   service-2026.css, so equal-specificity rules here win.
   ========================================================================= */

.fcb26 {
  --void:  #04070e;
  --deep:  #08111f;
  --panel: #0b1729;
  --ink:   #eaf1fa;
  --dim:   #93a7c2;
  --blue:  #35b6ff;
  --cyan:  #00e0ff;
  /* Was #ff4438, which is not the site's red and gives white-on-red 3.42:1
     on the Book Appointment button, an AA failure on a primary CTA. The
     real brand red is #c8362f and white on it is 5.22:1, so this fixes the
     contrast and stops the blog running an off-brand red at the same time.
     CHANGE_ID fc-contrast-20260916 */
  --red:   #c8362f;
  --glow:  #c8362f;   /* the accent the home page tiles wash on hover */
  --edge:  rgba(120, 180, 255, .16);
  --edge2: rgba(120, 180, 255, .34);

  /* The scanner sweep and the headline strike are timed against each other,
     so they share one duration. Change it here and they stay in step: the
     keyframe percentages are relative, so the window where the band covers
     the headline (46.4% to 54.9%) holds at any speed. Never set either
     animation's duration on its own. */
  --scan-cycle: 10.8s;

  background: var(--void);
  color: var(--ink);
}

.fcb26 h1, .fcb26 h2, .fcb26 h3 { color: var(--ink); }
.fcb26 p { color: var(--dim); }
.fcb26 a { color: var(--blue); }
.fcb26 a:hover { color: var(--cyan); }

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

.fcb26 .bloghero {
  position: relative;
  overflow: hidden;
  padding-block: 72px 56px;
  border-bottom: 1px solid var(--edge);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(53, 182, 255, .20), transparent 62%),
    radial-gradient(70% 70% at 12% 108%, rgba(255, 68, 56, .16), transparent 68%),
    linear-gradient(180deg, var(--void), var(--deep));
}

/* Circuit rule, drifting. Two sets of hairlines at different pitches so it
   reads as a board trace rather than graph paper. */
.fcb26 .bloghero__grid {
  position: absolute;
  inset: -60px;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--edge) 1px, transparent 1px),
    linear-gradient(to bottom, var(--edge) 1px, transparent 1px),
    linear-gradient(to right, rgba(120, 180, 255, .07) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px;
  mask-image: radial-gradient(90% 75% at 50% 35%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(90% 75% at 50% 35%, #000 20%, transparent 78%);
  animation: fcb-drift 26s linear infinite;
}
@keyframes fcb-drift { to { transform: translate3d(96px, 96px, 0); } }

/* One pass of the scanner, slowly. */
.fcb26 .bloghero__scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 26%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 224, 255, .13) 55%, transparent);
  animation: fcb-scan var(--scan-cycle) cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes fcb-scan {
  0%, 12%  { transform: translateY(-120%); opacity: 0; }
  30%      { opacity: 1; }
  88%,100% { transform: translateY(460%); opacity: 0; }
}

.fcb26 .bloghero__inner { position: relative; z-index: 1; text-align: center; }

/* The emblem now carries a real alpha channel, so it composites normally and
   needs no blend mode at all.

   It used to be a JPEG on black drawn with mix-blend-mode: screen. Screen does
   not remove black, it adds: over anything that is not pure black it lifts the
   whole image toward the backdrop. There is a blue radial behind the emblem
   here, so every dark pixel in the artwork got lifted to it and the neon went
   flat and grey. See tools/blog_emblem.py for how the alpha is recovered. */
.fcb26 .bloghero__mark {
  position: relative;
  width: min(760px, 92%);
  margin: 0 auto 26px;
}
/* A soft pool of light under the art, not over it, so nothing is hazed.
   No blur filter: a radial gradient is already soft, and animating a 30px
   blur on a layer this size repaints it every frame and was enough to lock
   the renderer up. Only opacity animates, which the compositor handles. */
.fcb26 .bloghero__mark::before {
  content: "";
  position: absolute;
  inset: -16% -10%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(48% 54% at 50% 50%, rgba(53, 182, 255, .34), transparent 72%);
  will-change: opacity;
  animation: fcb-breathe 7s ease-in-out infinite;
}
.fcb26 .bloghero__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}
@keyframes fcb-breathe { 50% { opacity: .5; } }

.fcb26 .bloghero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  padding: 6px 16px 6px 12px;
  border: 1px solid var(--edge2);
  border-radius: 999px;
  background: rgba(8, 17, 31, .7);
  color: var(--cyan);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.fcb26 .bloghero__eyebrow i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: fcb-pulse 2.4s ease-in-out infinite;
}
@keyframes fcb-pulse { 50% { opacity: .25; transform: scale(.75); } }

/* The headline lights up as the scanner passes over it, and only then.

   The scan band above is 26% of the hero tall and sweeps top to bottom with
   an ease-in-out. Solving that easing against the measured layout, the band
   covers the headline between 46.4% and 54.9% of the cycle. So the glow here
   runs on the same clock from --scan-cycle, sits parked off the glyphs for
   the rest of it, and travels down through the letters across exactly that
   window. Same duration and the same start means no drift.

   Top to bottom, so the light moves the way the scanner does: the gradient
   runs at 180deg and the sweep goes from a high background-position to a low
   one, which slides the image DOWN the box rather than up.

   Blue leading, red trailing, and nothing in between them but their own fade
   to transparent, so no warm colour is ever mixed.

   Underneath, brushed chrome. That is what the line is for the other 8.2s. */
.fcb26 .bloghero h1 {
  margin: 0 0 18px;
  font-size: clamp(30px, 5.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -.01em;
  background-image:
    linear-gradient(180deg,
      rgba(53, 182, 255, 0)   42%,
      rgba(53, 182, 255, .9)  45.5%,
      rgba(214, 245, 255, 1)  48%,
      rgba(90, 200, 255, 1)   50%,
      rgba(53, 182, 255, .55) 51.5%,
      rgba(53, 182, 255, 0)   52.5%,
      rgba(255, 58, 46, 0)    53.5%,
      rgba(255, 58, 46, .95)  55%,
      rgba(255, 58, 46, 0)    58%),
    linear-gradient(177deg, #ffffff 2%, #eaf5ff 34%, #9fd0ff 56%, #e6f3ff 76%, #ffffff 98%);
  background-size: 100% 400%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(53, 182, 255, .35));
  animation: fcb-strike var(--scan-cycle) linear infinite;
}

@keyframes fcb-strike {
  0%, 46.4%   { background-position: 0 78%, 0 0; }
  54.9%, 100% { background-position: 0 22%, 0 0; }
}

.fcb26 .bloghero__lede {
  max-width: 62ch;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.68;
  color: var(--dim);
}

/* ---- readout ---------------------------------------------------------- */

.fcb26 .readout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}
.fcb26 .readout span {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: rgba(11, 23, 41, .78);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
}
.fcb26 .readout b {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
}

/* ---- topic chips ------------------------------------------------------ */

.fcb26 .chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 26px;
}
.fcb26 .chips a {
  padding: 9px 17px;
  border: 1px solid var(--edge2);
  border-radius: 999px;
  background: rgba(11, 23, 41, .6);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s, color .18s, transform .18s;
}
.fcb26 .chips a:hover,
.fcb26 .chips a:focus-visible {
  color: #fff;
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(0, 224, 255, .3), 0 8px 26px rgba(0, 224, 255, .22);
  transform: translateY(-2px);
}

/* ---- the listing ------------------------------------------------------ */

.fcb26 .band { background: transparent; border-top: 1px solid var(--edge); }
.fcb26 .band--wash { background: rgba(11, 23, 41, .5); }
.fcb26 .head h2 { font-size: clamp(24px, 3vw, 32px); }
.fcb26 .head .eyebrow { color: var(--red); }

.fcb26 .bloggroup { scroll-margin-top: 96px; }

.fcb26 .bloggroup > h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
}
.fcb26 .bloggroup > h3::before {
  content: attr(data-n);
  font-size: 12px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.fcb26 .bloggroup > h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--edge2), transparent);
}

.fcb26 .related { gap: 14px; }

/* Each card is a panel with a rail down the left that lights on approach, and
   a wash of brand red that rises from the bottom on hover. That wash is the
   same move the service tiles make on the home page, where the dark gradient
   over the photograph turns red at the foot of the tile, so the two pages
   behave the same way under the cursor even though one is a photograph and
   this one is a panel. The arrow is from there too. */
.fcb26 .related .rel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 20px 20px 18px 22px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(13, 27, 48, .92), rgba(8, 17, 31, .92));
  text-decoration: none;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

/* the rail */
.fcb26 .related .rel::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  z-index: 1;
  width: 3px;
  background: linear-gradient(180deg, var(--cyan), var(--blue) 45%, var(--glow));
  opacity: .42;
  transition: opacity .25s ease, width .25s ease;
}

/* the wash */
.fcb26 .related .rel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 40%, rgba(200, 54, 47, 0) 100%);
  transition: background .3s ease;
}

.fcb26 .related .rel > * { position: relative; z-index: 1; }

.fcb26 .related .rel:hover,
.fcb26 .related .rel:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(200, 54, 47, .55);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .55), 0 10px 34px rgba(200, 54, 47, .34);
}
.fcb26 .related .rel:hover::after,
.fcb26 .related .rel:focus-visible::after {
  background: linear-gradient(180deg, transparent 32%, rgba(200, 54, 47, .5) 100%);
}
.fcb26 .related .rel:hover::before,
.fcb26 .related .rel:focus-visible::before { opacity: 1; width: 4px; }

.fcb26 .related .rel b {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 1.34;
  color: var(--ink);
  transition: color .25s ease;
}
.fcb26 .related .rel b::after {
  content: " \2192";
  opacity: 0;
  transition: opacity .25s ease;
}
.fcb26 .related .rel:hover b,
.fcb26 .related .rel:focus-visible b { color: #fff; }
.fcb26 .related .rel:hover b::after,
.fcb26 .related .rel:focus-visible b::after { opacity: 1; }

.fcb26 .related .rel span {
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--dim);
}

/* ---- closing call ----------------------------------------------------- */

.fcb26 .svc-cta {
  position: relative;
  border-top: 1px solid var(--edge);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(53, 182, 255, .14), transparent 60%),
    linear-gradient(180deg, var(--deep), var(--void));
}
.fcb26 .svc-cta::after { display: none; }
.fcb26 .svc-cta h2 { color: var(--ink); }
.fcb26 .svc-cta p { color: var(--dim); }
/* Brand red, the same primary action colour as every other page on the site.
   The page is themed, the call to action is not: people should not have to
   relearn which button books an appointment. The red also belongs here, it is
   the colour of the wings in the emblem above. */
.fcb26 .svc-cta .btn--onphoto {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 8px 30px rgba(255, 68, 56, .32);
}
.fcb26 .svc-cta .btn--onphoto:hover {
  background: #ff5a4f;
  border-color: #ff5a4f;
  box-shadow: 0 10px 38px rgba(255, 68, 56, .46);
}
.fcb26 .svc-cta .btn:not(.btn--onphoto) {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--edge2);
}
.fcb26 .svc-cta .btn:not(.btn--onphoto):hover { border-color: var(--cyan); color: #fff; }

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

@media (max-width: 680px) {
  .fcb26 .bloghero { padding-block: 48px 40px; }
  .fcb26 .bloghero__mark { width: 100%; margin-bottom: 18px; }
  .fcb26 .readout span { font-size: 12px; padding: 8px 13px; }
  .fcb26 .chips a { font-size: 13px; padding: 8px 14px; }
}

/* Motion is decoration here, never information. */
@media (prefers-reduced-motion: reduce) {
  .fcb26 .bloghero__grid,
  .fcb26 .bloghero__scan,
  .fcb26 .bloghero__mark::before,
  .fcb26 .bloghero h1,
  .fcb26 .bloghero__eyebrow i { animation: none; }
  /* parked with the glow clear of the glyphs, so the line is plain chrome */
  .fcb26 .bloghero h1 { background-position: 0 78%, 0 0; }
  .fcb26 .bloghero__scan { opacity: 0; }
  .fcb26 .related .rel,
  .fcb26 .related .rel::after,
  .fcb26 .related .rel b,
  .fcb26 .chips a { transition: none; }
  .fcb26 .related .rel:hover,
  .fcb26 .chips a:hover { transform: none; }
}

/* The eyebrow on the blog hero is the brand red on --void #04070e, 3.86:1
   and an AA failure at 12.5px. The dark-ground red used on the other dark
   bands is 5.94:1 here. CHANGE_ID fc-contrast-20260916 */
.fcs26 .art-hero .eyebrow,
body[data-page-alias="blog"] .fcs26 .eyebrow { color: #da6964; }