/* ==========================================================================
   WP Server Guard — homepage, Midnight
   Implementation of "WP Server Guard v2 - Midnight.dc.html" (Claude Design
   project 5c30f216). Loaded on the homepage only, after styles.css; the
   <body class="midnight"> scope remaps the shared tokens so the sections the
   design does not draw (specialist, case study, deliverable, process,
   research, FAQ, CTA, footer) sit in the same palette and typeface.
   ========================================================================== */

@font-face{font-family:'Sora';font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/sora-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/sora-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* --- Tokens --------------------------------------------------------------- */
.midnight{
  --mn-navy:#0b1530;
  --mn-panel:#121f42;
  --mn-panel-2:#0f1a38;
  --mn-tile:#111d3d;
  --mn-tile-hover:#1a2a55;
  --mn-deep:#13265c;
  --mn-royal:#2551b8;
  --mn-sky:#9cc4ff;
  --mn-gold:#ffc24b;
  --mn-gold-hover:#ffd47f;
  --mn-gold-soft:#ffe2a8;
  --mn-mist:#f3f5fa;
  --mn-card-line:#dfe4f0;
  --mn-card-rule:#e8ecf4;
  --mn-ease:cubic-bezier(.2,.7,.2,1);

  /* Shared tokens, remapped: gold takes the accent role green had, the sky
     blue takes the on-dark link role, navy replaces the ink scale. */
  --ink-900:#081026;
  --ink-800:var(--mn-navy);
  --ink-700:var(--mn-tile);
  --ink-600:var(--mn-panel);
  --line-dark:rgba(255,255,255,.08);
  --line-dark-2:rgba(255,255,255,.14);
  --paper-2:var(--mn-mist);
  --text-1:var(--mn-navy);
  --text-2:#454d60;
  --text-3:#5f687b;
  --on-dark-2:#c2c8d6;
  --on-dark-3:#98a1b5;
  --green:var(--mn-gold);
  --blue:var(--mn-sky);
  --blue-link:var(--mn-royal);
  --sans:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --r:10px;

  background:var(--mn-navy);
}
.midnight main{background:var(--paper)}

.midnight .btn{border-radius:10px}
.midnight .btn--primary:hover{background:var(--mn-gold-hover)}
.midnight .btn--outline{border-color:rgba(255,255,255,.35)}
.midnight .btn--outline:hover{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08)}
.midnight .link-arrow:hover{color:var(--mn-deep)}
.midnight .link-rule{border-bottom-color:rgba(37,81,184,.3)}

/* The header is sticky here, so in-page jumps need to clear it. */
.midnight section[id],
.midnight .mn-svc{scroll-margin-top:88px}

.mn-eyebrow{
  display:flex;align-items:center;gap:10px;margin:0;
  font:500 12px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--mn-gold);
}

/* --- Announcement bar ----------------------------------------------------- */
.mn-bar{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px 10px;
  padding:11px var(--pad);
  background:linear-gradient(90deg,var(--mn-deep),var(--mn-royal) 50%,var(--mn-deep));
  color:#fff;font:400 14px/1.5 var(--sans);text-align:center;
}
.mn-bar:hover{filter:brightness(1.12)}
.mn-bar strong{font-weight:600}
.mn-bar__arrow{color:var(--mn-gold);display:inline-block}

/* --- Header --------------------------------------------------------------- */
.midnight .site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,21,48,.85);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.midnight .site-header__bar{padding-block:14px}
@media (min-width:1024px){
  .midnight .site-header__bar{padding-block:16px;justify-content:flex-start;gap:32px}
  .midnight .nav-desktop{flex:1;gap:26px}
  .midnight .nav-desktop a{color:rgba(255,255,255,.82)}
  .midnight .nav-desktop a:hover{color:#fff}
  .midnight .nav-desktop .btn{margin-left:auto;border-radius:10px;padding:11px 20px}
  .midnight .nav-desktop .btn:hover{color:var(--mn-navy)}
  .midnight .nav-drop__panel{border-radius:12px;border-color:rgba(255,255,255,.1)}
  .midnight .nav-drop__panel a{border-radius:8px}
}
/* The open sheet lives inside the sticky header, so it scrolls within itself
   rather than running off a short screen. */
.midnight .nav-mobile{max-height:calc(100vh - 72px);overflow-y:auto}
.midnight.is-locked .site-header{background:var(--mn-navy)}
.midnight .menu-btn{border-radius:10px;border-color:rgba(255,255,255,.2)}

/* Brand mark: a gold tile with a navy ring, replacing the three bars. */
.midnight .brand{gap:10px}
.midnight .brand__mark{
  width:26px;height:26px;border-radius:8px;background:var(--mn-gold);
  display:flex;align-items:center;justify-content:center;
}
.midnight .brand__mark i{display:none}
.midnight .brand__mark::after{
  content:"";width:10px;height:10px;border-radius:50%;
  border:2.5px solid var(--mn-navy);box-sizing:border-box;
}
.midnight .brand__name{
  font:600 16px/1 var(--sans);letter-spacing:-.01em;text-transform:none;white-space:nowrap;
}
@media (min-width:1024px){ .midnight .brand__name{font-size:17px} }

/* --- Hero ----------------------------------------------------------------- */
.mn-hero{position:relative;overflow:hidden;background:var(--mn-navy);color:#fff}
.mn-hero__glow{
  position:absolute;left:50%;top:-240px;width:1100px;height:700px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(50,100,230,.5),rgba(50,100,230,0));
  transform:translateX(-50%);pointer-events:none;
}
.mn-hero__inner{
  position:relative;max-width:980px;margin:0 auto;
  padding:clamp(64px,10vw,120px) var(--pad) clamp(56px,8vw,96px);
  display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center;
}
.mn-live{position:relative;width:7px;height:7px;flex:none}
.mn-live::before,
.mn-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--mn-gold)}
/* On a phone the kicker would wrap and strand the live dot; tighter
   tracking keeps it on one line. */
@media (max-width:479px){ .mn-hero .mn-eyebrow{font-size:11px;letter-spacing:.08em;gap:8px} }
.mn-hero h1{
  margin:0;color:#fff;
  font:600 clamp(42px,7vw,92px)/1 var(--sans);letter-spacing:-.04em;text-wrap:balance;
}
.mn-hero h1 span{color:var(--mn-sky)}
.mn-hero__lede{
  max-width:680px;margin:0;
  font:400 clamp(17px,1.6vw,20px)/1.6 var(--sans);color:rgba(255,255,255,.78);
}
.mn-hero__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding-top:6px}
.mn-hero__actions .btn{padding:15px 26px;font-size:15px}
.mn-hero__actions .btn--outline{font-weight:500}
.mn-hero__quiet{display:flex;gap:0 24px;flex-wrap:wrap;justify-content:center;margin:0}
.mn-hero__quiet a{
  display:inline-flex;align-items:center;min-height:44px;
  font:500 14px var(--sans);color:var(--mn-gold);
}
.mn-hero__quiet a:hover{color:var(--mn-gold-soft)}
@media (max-width:559px){
  .mn-hero__actions{flex-direction:column;align-self:stretch}
}

/* --- Proof strip ---------------------------------------------------------- */
.mn-proof{background:var(--mn-navy);color:rgba(255,255,255,.78);border-top:1px solid rgba(255,255,255,.08)}
.mn-proof__list{
  max-width:var(--wrap);margin:0 auto;padding:22px var(--pad);
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;
  font:400 14px/1.5 var(--sans);text-align:center;
}
.mn-proof__list b{margin-right:4px;font:600 17px/1 var(--sans);letter-spacing:-.01em;color:var(--mn-gold)}
.mn-proof__list a{color:var(--mn-sky)}
.mn-proof__list a:hover{color:#fff}
@media (max-width:559px){
  .mn-proof__list{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;text-align:left}
  .mn-proof__list b{display:block;margin:0 0 4px}
}

/* --- Coverage ------------------------------------------------------------- */
.mn-coverage{background:var(--mn-navy);color:#fff}
.mn-coverage__wrap{
  max-width:var(--wrap);margin:0 auto;
  padding:0 var(--pad) clamp(80px,10vw,128px);
}
.mn-coverage__panel{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(32px,5vw,72px);
  padding:clamp(28px,5vw,64px);
  border:1px solid rgba(255,255,255,.1);border-radius:28px;
  background:linear-gradient(180deg,var(--mn-panel),var(--mn-panel-2));
}
@media (max-width:559px){ .mn-coverage__panel{padding:24px 18px;border-radius:22px} }

.mn-radar-box{flex:1 1 340px;display:flex;justify-content:center}
.mn-radar{position:relative;width:min(100%,440px);aspect-ratio:1}
.mn-ring{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--size);height:var(--size);border-radius:50%;
  border:1px solid rgba(156,196,255,.35);background:var(--bg);
  display:flex;justify-content:center;cursor:pointer;
  transition:border-color .5s ease,background-color .5s ease,box-shadow .5s ease;
}
.mn-ring span{
  margin-top:var(--label-top);
  font:400 11px/1 var(--mono);letter-spacing:.14em;color:rgba(255,255,255,.62);
  transition:color .25s;
}
.mn-ring:nth-child(1){--size:100%;--label-top:3.2%;--bg:rgba(50,100,230,.06)}
.mn-ring:nth-child(2){--size:83%;--label-top:4%;--bg:rgba(50,100,230,.09)}
.mn-ring:nth-child(3){--size:66%;--label-top:5%;--bg:rgba(50,100,230,.12)}
.mn-ring:nth-child(4){--size:49%;--label-top:6.5%;--bg:rgba(50,100,230,.15)}
.mn-ring:nth-child(5){--size:32%;--label-top:9%;--bg:rgba(50,100,230,.18)}
.mn-ring.is-active{
  border:1.5px solid var(--mn-gold);background:rgba(255,194,75,.10);
  box-shadow:0 0 40px rgba(255,194,75,.25);
}
.mn-ring.is-active span{color:var(--mn-gold)}
.mn-radar__sweep{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--mn-angle),rgba(255,194,75,0) 0deg,rgba(255,194,75,0) 300deg,rgba(255,194,75,.22) 360deg);
  -webkit-mask:radial-gradient(circle,transparent 14%,#000 15%);
  mask:radial-gradient(circle,transparent 14%,#000 15%);
  transition:opacity .8s ease;
}

.mn-coverage__body{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:22px}
.mn-coverage h2{
  margin:0;color:#fff;
  font:600 clamp(30px,3.6vw,46px)/1.08 var(--sans);letter-spacing:-.03em;text-wrap:balance;
}
.mn-coverage__lede{margin:0;font:400 16px/1.65 var(--sans);color:rgba(255,255,255,.74)}
.mn-layers{display:flex;flex-direction:column;gap:6px}
.mn-layer{
  display:flex;gap:16px;padding:14px 16px;border-radius:14px;
  border:1px solid transparent;cursor:default;
  transition:background-color .2s,border-color .2s;
}
.mn-layer.is-active{background:rgba(255,194,75,.08);border-color:rgba(255,194,75,.45)}
.mn-layer__n{font:400 12px/1 var(--mono);color:var(--mn-gold);padding-top:5px;flex:none}
.mn-layer h3{margin:0 0 4px;font:600 16px/1.4 var(--sans);color:#fff}
.mn-layer p{font:400 14px/1.55 var(--sans);color:rgba(255,255,255,.7)}
.mn-coverage__link{
  display:inline-flex;align-items:center;min-height:44px;align-self:flex-start;
  font:600 15px var(--sans);color:var(--mn-gold);
}
.mn-coverage__link:hover{color:var(--mn-gold-soft)}

/* --- Services ------------------------------------------------------------- */
.mn-services{background:var(--mn-mist);color:var(--mn-navy)}
.mn-services__wrap{max-width:var(--wrap);margin:0 auto;padding:clamp(80px,10vw,128px) var(--pad)}
.mn-services__head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  margin-bottom:48px;
}
.mn-services__head > div{display:flex;flex-direction:column;gap:14px}
.mn-services .mn-eyebrow{color:var(--mn-royal)}
.mn-services h2{
  margin:0;font:600 clamp(30px,4vw,52px)/1.05 var(--sans);letter-spacing:-.03em;color:var(--mn-navy);
}
.mn-link{font:600 15px var(--sans);color:var(--mn-royal)}
.mn-link:hover{color:var(--mn-deep);text-decoration:underline;text-underline-offset:3px}

.mn-svc-grid{display:flex;flex-wrap:wrap;gap:20px}
.mn-svc{
  flex:1 1 280px;display:flex;flex-direction:column;overflow:hidden;
  border-radius:22px;background:#fff;border:1px solid var(--mn-card-line);
  box-shadow:0 1px 2px rgba(11,21,48,.04);
}
.mn-svc__head{
  display:flex;flex-direction:column;gap:10px;padding:22px 26px;
  background:var(--head);color:#fff;
}
.mn-svc__tag{font:400 11px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tag)}
.mn-svc__quote{font:500 19px/1.3 var(--sans)}
.mn-svc--incident{--head:#2e1330;--tag:#ff9db5}
.mn-svc--assess{--head:#1a2a55;--tag:var(--mn-sky)}
.mn-svc--ongoing{--head:#14304a;--tag:var(--mn-gold)}
.mn-svc__body{flex:1;display:flex;flex-direction:column;gap:16px;padding:26px}
.mn-svc h3{margin:0;font:600 22px/1.2 var(--sans);letter-spacing:-.01em;color:var(--mn-navy)}
.mn-svc__desc{font:400 15px/1.65 var(--sans);color:#454d60}
.mn-svc__price{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--mn-card-rule);
  display:flex;flex-direction:column;gap:4px;
}
.mn-svc__price p:first-child{font:400 15px/1.3 var(--sans);color:#454d60}
.mn-svc__price b{font:600 30px/1.1 var(--sans);letter-spacing:-.03em;color:var(--mn-navy)}
.mn-svc__note{font:400 13px/1.5 var(--sans);color:var(--text-3)}
.mn-svc__time{margin-top:6px;font:500 14px/1.5 var(--sans);color:#454d60}
.mn-svc__urgent{
  display:inline-flex;align-items:center;min-height:44px;align-self:flex-start;
  font:600 15px var(--sans);color:#8a1c3c;
}
.mn-svc__urgent:hover{color:#2e1330;text-decoration:underline;text-underline-offset:3px}
.mn-svc__actions{display:flex;flex-direction:column;gap:8px}
.mn-svc__links{display:flex;flex-direction:column;gap:2px}
.mn-svc__links a{display:inline-flex;align-items:center;min-height:36px}
@media (max-width:839px){ .mn-svc__links a{min-height:44px} }

/* Cards that sit side by side share row tracks, so the titles, the price
   rules and the link lists line up across them no matter how long each
   description is or how many links follow the price. */
@supports (grid-template-rows:subgrid){
  @media (min-width:640px){
    .mn-svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;margin-bottom:-20px}
    .mn-svc{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;margin-bottom:20px}
    .mn-svc:last-child:nth-child(odd){grid-column:1 / -1}
    .mn-svc__body{display:contents}
    .mn-svc .mn-svc__body > *{margin-inline:26px}
    .mn-svc h3{padding-top:26px}
    .mn-svc__desc{padding-top:16px}
    .mn-svc__price{margin-top:16px;align-self:start}
    .mn-svc__actions{padding:12px 0 22px}
  }
  @media (min-width:960px){
    .mn-svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .mn-svc:last-child:nth-child(odd){grid-column:auto}
  }
}
.mn-services__foot{
  margin-top:32px;max-width:78ch;
  font:400 15px/1.7 var(--sans);color:var(--text-2);
}
.mn-services__foot a{display:inline-flex;align-items:center;min-height:44px}

/* --- I'm here because… ---------------------------------------------------- */
.mn-start{background:var(--mn-navy);color:#fff}
.mn-start__wrap{max-width:var(--wrap);margin:0 auto;padding:clamp(80px,10vw,128px) var(--pad)}
.mn-start__intro{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;margin-bottom:48px}
.mn-start__intro h2{justify-content:center}
.mn-start__intro p:not(.mn-eyebrow){max-width:640px;font:400 18px/1.6 var(--sans);color:rgba(255,255,255,.78)}
.mn-start__intro h2{
  margin:0;color:#fff;font:600 clamp(30px,4vw,52px)/1.05 var(--sans);letter-spacing:-.03em;
}
.mn-enquiry{
  display:grid;gap:20px;max-width:880px;margin:0 auto;
  padding:clamp(22px,4vw,40px);border-radius:22px;
  background:var(--mn-tile);border:1px solid rgba(255,255,255,.1);
}
@media (min-width:760px){
  .mn-enquiry{grid-template-columns:1fr 1fr}
  .mn-enquiry__urgency,.mn-enquiry__submit{grid-column:1/-1}
}
.mn-enquiry__field{display:flex;flex-direction:column;gap:8px;min-width:0}
.mn-enquiry label,.mn-enquiry legend{font:500 14px/1.4 var(--sans);color:#fff}
.mn-enquiry input[type=text],.mn-enquiry select{
  width:100%;min-height:50px;padding:12px 14px;border-radius:10px;
  border:1px solid rgba(255,255,255,.22);background:var(--mn-navy);color:#fff;
  font:400 16px/1.3 var(--sans);
}
.mn-enquiry select option{background:var(--mn-navy);color:#fff}
.mn-enquiry input::placeholder{color:rgba(255,255,255,.55)}
.mn-enquiry input:focus-visible,.mn-enquiry select:focus-visible{outline:2px solid var(--mn-gold);outline-offset:2px}
.mn-enquiry__urgency{margin:0;padding:0;border:0;min-width:0;display:flex;flex-wrap:wrap;gap:10px}
.mn-enquiry__urgency legend{float:left;width:100%;margin-bottom:8px}
.mn-enquiry__urgency label{
  flex:1 1 200px;display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  padding:14px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:var(--mn-navy);
}
.mn-enquiry__urgency label:has(:checked){border-color:var(--mn-gold);background:var(--mn-tile-hover)}
.mn-enquiry__urgency input{margin:3px 0 0;accent-color:var(--mn-gold);flex:none}
.mn-enquiry__urgency small{display:block;margin-top:2px;font:400 13px/1.4 var(--sans);color:rgba(255,255,255,.72)}
.mn-enquiry__submit{justify-self:start;padding:15px 28px;border:0;font-size:15px;cursor:pointer}
@media (max-width:559px){ .mn-enquiry__submit{justify-self:stretch} }
.mn-start__note{
  margin:28px auto 0;max-width:640px;text-align:center;
  font:400 14px/1.6 var(--sans);color:rgba(255,255,255,.66);
}
.mn-start__note strong{color:#f5c86b;font-weight:600}

/* --- Remaining sections, adjusted to the Midnight surfaces ---------------- */
.midnight .specialist__role{color:var(--mn-royal)}
.midnight .credentials li:first-child b{color:var(--mn-royal)}
.midnight .voice__verified,
.midnight .marquee__verified{color:#136c40}
.midnight .faq__item[open] summary::after{color:var(--mn-royal)}
.midnight .sev--high{color:var(--mn-navy)}

/* --- Motion ---------------------------------------------------------------
   Everything below is decoration and stays off under reduced motion. The
   reveal hides content only once the inline head script has marked the page
   (.mn-js); if app.js then never runs, the failsafe animation shows it anyway
   after a few seconds, so a script failure cannot leave the page blank.
   ------------------------------------------------------------------------ */
@keyframes mn-glow{0%{transform:translate(-50%,0) scale(1)}50%{transform:translate(-46%,40px) scale(1.12)}100%{transform:translate(-50%,0) scale(1)}}
/* The sweep turns its gradient rather than the element: a rotating box's
   corners would stick out past the circle and widen the page on a phone. */
@property --mn-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes mn-sweep{to{--mn-angle:360deg}}
@keyframes mn-ping{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.6);opacity:0}}
@keyframes mn-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes mn-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes mn-failsafe{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:no-preference){
  .mn-bar__arrow{animation:mn-nudge 1.6s ease-in-out infinite}
  .mn-hero__glow{animation:mn-glow 14s ease-in-out infinite}
  .mn-live::after{animation:mn-ping 1.8s ease-out 6}

  .mn-hero__inner > *{animation:mn-rise .9s var(--mn-ease) both}
  .mn-hero__inner > :nth-child(2){animation-delay:.12s}
  .mn-hero__inner > :nth-child(3){animation-delay:.26s}
  .mn-hero__inner > :nth-child(4){animation-delay:.38s}
  .mn-hero__inner > :nth-child(5){animation-delay:.5s}

  /* The sweep turns while the diagram steps through the layers, then stops. */
  .mn-radar.is-cycling .mn-radar__sweep{opacity:1;animation:mn-sweep 6s linear infinite}

  [data-reveal]{
    transition:opacity .9s ease var(--d,0s),transform .9s var(--mn-ease) var(--d,0s),box-shadow .3s ease;
  }
  .mn-js [data-reveal]:not(.is-in){opacity:0;transform:translateY(28px)}
  .mn-svc[data-reveal]:not(.is-in){transform:translateY(36px)}
  .mn-js:not(.mn-ready) [data-reveal]:not(.is-in){animation:mn-failsafe .01s 3s forwards}

  .mn-svc.is-in{transition:opacity .8s ease var(--d,0s),transform .3s ease,box-shadow .3s ease}
  .mn-svc.is-in:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(30,50,120,.16)}
}