/* =====================================================================
   Cyber247 — site.css
   Design source of truth: reference/cyber247-header.html + reference/cyber247-managed-it-services.html
   Sections: TOKENS · BASE · HEADER (verbatim port) · BUTTONS · LAYOUT · HERO · CARDS · SERVICES ·
             BENEFITS · NEEDS · FAQ · CTA · NEW COMPONENTS (image cards, forms, tabs, video, contact, prose) ·
             FOOTER · MOTION · RESPONSIVE
   ===================================================================== */

/* ---------- TOKENS (03-DESIGN-SYSTEM.md §1, verbatim) ---------- */
:root{
  --primary:#0D508E;
  --navy:#163A5B;
  --navy-ink:#0B1E33;
  --green:#36A470;
  --green-dk:#2c885d;
  --green-lt:#7fd3a9;
  --green-ink:#1f6e48;     /* AA-safe green for small text on white/tint (added) */
  --green-grad:linear-gradient(135deg,#3fbb80 0%,#36A470 50%,#2c885d 100%);
  --tint:#EDF1FC;
  --line:#dbe4f2;
  --ink:#1C1C1C;
  --muted:#5f6b7a;
  --muted-dark:#a9bdd4;
  --white:#ffffff;
  --pad:clamp(66px,8vw,104px);
  --wrap:1160px;
  --radius:16px;
  /* Live renders the approved reference in Roboto (Elementor kit primary/text font) — matched exactly.
     The header keeps its own Inter/Montserrat (.c247h vars), as on live. */
  --font-h:'Roboto','Montserrat',system-ui,sans-serif;
  --font-b:'Roboto','Inter',system-ui,sans-serif;
}

/* ---------- BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:100px}
body{margin:0;font-family:var(--font-b);color:var(--ink);font-size:17px;line-height:1.65;background:#fff;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video{max-width:100%}
img{height:auto}
picture{display:contents}
h1,h2,h3,h4{font-family:var(--font-h);color:var(--navy);margin:0;line-height:1.2;letter-spacing:-.01em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--primary)}
main{display:block;outline:0}
[hidden]{display:none !important}
.c247-skip{position:absolute;left:12px;top:-60px;z-index:10000;background:var(--green-grad);color:#fff;font-family:var(--font-h);font-weight:700;padding:12px 18px;border-radius:999px;text-decoration:none;transition:top .2s ease}
.c247-skip:focus{top:12px}
.c247-sr{position:absolute !important;width:1px !important;height:1px !important;min-height:0 !important;padding:0 !important;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 !important}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px}

/* =====================================================================
   HEADER — ported verbatim from reference/cyber247-header.html
   (removed: Elementor border-kill block, WP admin-bar offset)
   ===================================================================== */
.c247h{
  --navy-ink:#0B1E33;
  --navy:#163A5B;
  --primary:#0D508E;
  --green:#36A470;
  --green-lt:#7fd3a9;
  --white:#ffffff;
  --text:#e6eef8;
  --muted:#a9bdd4;
  --h:92px;
  --h-small:72px;
  --wrap:1280px;
  --font-h:'Montserrat',system-ui,sans-serif;
  --font-b:'Inter',system-ui,sans-serif;
  --top:0px;
  font-family:var(--font-b);
}
.c247h *,.c247h *::before,.c247h *::after{box-sizing:border-box}
.c247h ul{list-style:none;margin:0;padding:0}
.c247h a{text-decoration:none}
.c247h button{font:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;color:inherit;box-shadow:none;text-transform:none;letter-spacing:normal;min-height:0}
.c247h button:hover,.c247h button:focus{background:none;color:inherit}
.c247h a:focus-visible,.c247h button:focus-visible{outline:2px solid var(--green-lt);outline-offset:3px;border-radius:4px}
.c247h__bar{border:0 !important;outline:0 !important}

/* Spacer keeps content below the fixed bar */
.c247h__spacer{height:var(--h)}

/* ---------- BAR ---------- */
.c247h__bar{
  position:fixed;left:0;right:0;top:var(--top);z-index:9990;
  height:var(--h);
  background:
    linear-gradient(100deg,var(--navy-ink) 0%,#10263f 45%,var(--navy) 100%);
  transition:height .3s ease,box-shadow .3s ease;
}
/* Home page only: 75% transparent bar, overlays the hero (no spacer) */
.c247h.is-home .c247h__bar{
  background:
    linear-gradient(100deg,rgba(11,30,51,.25) 0%,rgba(16,38,63,.25) 45%,rgba(22,58,91,.25) 100%);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.c247h.is-home .c247h__spacer{display:none}
.c247h.is-scrolled .c247h__bar{height:var(--h-small);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.c247h__inner{max-width:var(--wrap);height:100%;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:32px}

/* Logo */
.c247h__logo{display:flex;align-items:center;flex:none}
.c247h__logo-stack{position:relative;display:inline-block;line-height:0}
.c247h__logo img{display:block;height:54px;width:auto;transition:height .3s ease,opacity .8s ease}
.c247h__logo-w,.c247h__phead .c247h__logo-w{position:absolute;inset:0;width:100% !important;height:100% !important;object-fit:contain;opacity:0}
.c247h__logo:hover .c247h__logo-w,.c247h__logo:focus-visible .c247h__logo-w,
.c247h__plogo:hover .c247h__logo-w,.c247h__plogo:focus-visible .c247h__logo-w{opacity:1}
.c247h__logo:hover .c247h__logo-c,.c247h__logo:focus-visible .c247h__logo-c,
.c247h__plogo:hover .c247h__logo-c,.c247h__plogo:focus-visible .c247h__logo-c{opacity:0}
.c247h.is-scrolled .c247h__logo img{height:44px}

/* ---------- DESKTOP NAV ---------- */
.c247h__nav{display:flex;align-items:center;height:100%}
.c247h__menu{display:flex;align-items:center;height:100%}
.c247h__item{position:relative;display:flex;align-items:center;height:100%}
.c247h__item + .c247h__item::before{content:"";width:2px;height:20px;background:rgba(255,255,255,.85);margin:0 4px}
.c247h .c247h__link{
  display:flex;align-items:center;gap:8px;height:100%;padding:0 20px;
  font-family:var(--font-b);font-weight:500;font-size:17px;color:var(--white) !important;
  position:relative;white-space:nowrap;transition:color .2s ease;
}
.c247h__link::after{content:"";position:absolute;left:20px;right:20px;bottom:24px;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.c247h.is-scrolled .c247h__link::after{bottom:16px}
.c247h__link:hover,.c247h__item.is-open > .c247h__link{color:var(--green-lt) !important}
.c247h__link:hover::after,.c247h__link[aria-current="page"]::after,.c247h__item.is-open > .c247h__link::after{transform:scaleX(1)}
.c247h__caret{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,#3fbb80,#2c885d);box-shadow:0 3px 10px rgba(54,164,112,.4);
  transition:transform .3s ease,box-shadow .25s ease}
.c247h__caret svg{width:12px;height:12px;display:block}
.c247h__link:hover .c247h__caret{box-shadow:0 4px 14px rgba(54,164,112,.6)}
.c247h__item.is-open .c247h__caret{transform:rotate(180deg)}

/* Dropdown */
.c247h__drop{
  position:absolute;top:calc(100% - 6px);left:50%;
  min-width:300px;padding:10px;
  background:#0f2742;border:1px solid rgba(255,255,255,.14);border-radius:14px;
  box-shadow:0 24px 50px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translate(-50%,10px);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
}
.c247h__drop::before{content:"";position:absolute;top:-7px;left:50%;width:12px;height:12px;background:#0f2742;border-left:1px solid rgba(255,255,255,.14);border-top:1px solid rgba(255,255,255,.14);transform:translateX(-50%) rotate(45deg)}
.c247h__item.is-open .c247h__drop{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s ease,transform .2s ease,visibility 0s}
.c247h__drop a{display:flex;align-items:flex-start;gap:14px;padding:14px;border-radius:10px;color:var(--white) !important;transition:background .2s ease}
.c247h__drop a:hover,.c247h__drop a:focus-visible{background:rgba(255,255,255,.07)}
.c247h__dicon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--navy));border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;flex:none}
.c247h__dicon svg{width:19px;height:19px;color:var(--green-lt)}
.c247h__dtext strong{display:block;font-family:var(--font-h);font-weight:700;font-size:15px;line-height:1.3;color:var(--white)}
.c247h__dtext small{display:block;font-size:13px;line-height:1.45;color:var(--muted);margin-top:2px}

/* CTA — modern green pill */
.c247h__cta,.c247h__pcta{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:none;
  height:54px;padding:0 10px 0 8px;border-radius:999px;
  background:linear-gradient(135deg,#3fbb80 0%,#36A470 50%,#2c885d 100%);
  font-family:var(--font-h);font-weight:700;font-size:15.5px;letter-spacing:.01em;color:var(--white) !important;
  box-shadow:0 8px 24px rgba(54,164,112,.38),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .25s ease,box-shadow .25s ease,height .3s ease;
}
.c247h__cta::before,.c247h__pcta::before{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .7s ease;
}
.c247h__cta:hover,.c247h__pcta:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(54,164,112,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.c247h__cta:hover::before,.c247h__pcta:hover::before{left:120%}
.c247h__cta-ico{width:40px;height:40px;border-radius:50%;background:rgba(11,30,51,.22);display:grid;place-items:center;flex:none}
.c247h__cta-ico svg{width:19px;height:19px}
.c247h__cta-arrow{width:18px;height:18px;margin:0 8px 0 2px;transition:transform .25s ease;flex:none}
.c247h__cta:hover .c247h__cta-arrow,.c247h__pcta:hover .c247h__cta-arrow{transform:translateX(4px)}
.c247h.is-scrolled .c247h__cta{height:48px}
.c247h.is-scrolled .c247h__cta-ico{width:34px;height:34px}

/* Nav icons */
.c247h__nicon{width:18px;height:18px;flex:none;color:var(--green-lt);transition:color .2s ease,transform .2s ease}
.c247h__link:hover .c247h__nicon,.c247h__item.is-open .c247h__nicon{transform:translateY(-1px)}
.c247h__mlabel{display:inline-flex;align-items:center;gap:14px}
.c247h__mlabel .c247h__nicon{width:22px;height:22px}

/* Burger — green tile with staggered lines */
.c247h .c247h__burger{
  display:none;position:relative;overflow:hidden;width:50px;height:50px;border-radius:14px;flex:none;
  align-items:center;justify-content:center;
  background:linear-gradient(135deg,#3fbb80 0%,#36A470 50%,#2c885d 100%);
  box-shadow:0 8px 22px rgba(54,164,112,.4),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .25s ease,box-shadow .25s ease;
}
.c247h .c247h__burger:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(54,164,112,.55),inset 0 1px 0 rgba(255,255,255,.3)}
.c247h .c247h__burger:active{transform:scale(.96)}
.c247h__bl{display:flex;flex-direction:column;align-items:flex-end;gap:5px;width:22px}
.c247h__bl i{display:block;height:2.5px;border-radius:3px;background:#fff;transition:width .3s ease,transform .3s ease,opacity .3s ease}
.c247h__bl i:nth-child(1){width:22px}
.c247h__bl i:nth-child(2){width:14px}
.c247h__bl i:nth-child(3){width:18px}
.c247h__burger:hover .c247h__bl i{width:22px}
.c247h.is-menu .c247h__bl i:nth-child(1){transform:translateY(7.5px) rotate(45deg);width:22px}
.c247h.is-menu .c247h__bl i:nth-child(2){opacity:0}
.c247h.is-menu .c247h__bl i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);width:22px}

/* ---------- MOBILE PANEL ---------- */
.c247h__overlay{position:fixed;inset:0;z-index:9995;background:rgba(5,14,26,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.c247h__panel{
  position:fixed;top:0;right:0;bottom:0;z-index:9996;
  width:min(400px,100%);
  display:flex;flex-direction:column;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(170deg,var(--navy-ink) 0%,var(--navy) 100%);
  border-left:2px solid rgba(255,255,255,.85);
  transform:translateX(100%);visibility:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s linear .35s;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.c247h.is-menu .c247h__overlay{opacity:1;visibility:visible;transition:opacity .3s ease}
.c247h.is-menu .c247h__panel{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.7,.2,1)}

.c247h__phead{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.12)}
.c247h__plogo{display:inline-flex}
.c247h__phead img{height:42px;width:auto;display:block;transition:opacity .8s ease}
.c247h .c247h__close{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#3fbb80,#2c885d);box-shadow:0 6px 18px rgba(54,164,112,.4);transition:transform .3s ease}
.c247h .c247h__close:hover{transform:rotate(90deg)}
.c247h__close svg{width:20px;height:20px;color:var(--white)}

.c247h__mnav{padding:12px 24px}
.c247h__mitem{border-bottom:1px solid rgba(255,255,255,.1)}
.c247h .c247h__mlink,.c247h .c247h__mtoggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:18px 0;font-family:var(--font-h);font-weight:600;font-size:18px;color:var(--white) !important;text-align:left;
}
.c247h__mtoggle .c247h__mplus{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#3fbb80,#2c885d);box-shadow:0 4px 12px rgba(54,164,112,.4);display:grid;place-items:center;flex:none;transition:transform .3s ease}
.c247h__mtoggle .c247h__mplus svg{width:16px;height:16px}
.c247h__mitem.is-open .c247h__mplus{transform:rotate(180deg)}
.c247h__msub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.c247h__mitem.is-open .c247h__msub{grid-template-rows:1fr}
.c247h__msub > ul{overflow:hidden}
.c247h__msub a{display:flex;align-items:center;gap:14px;padding:12px;margin-bottom:6px;border-radius:12px;background:rgba(255,255,255,.05);color:var(--white) !important}
.c247h__msub li:first-child a{margin-top:2px}
.c247h__msub li:last-child a{margin-bottom:18px}
.c247h__msub a:hover{background:rgba(255,255,255,.09)}

.c247h__pfoot{margin-top:auto;padding:24px;display:grid;gap:18px}
.c247h__pcta{width:100%;height:58px;justify-content:space-between}
.c247h__contact{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:18px}
.c247h__contact h4,.c247h__contact-h{margin:0 0 12px;font-family:var(--font-h);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-lt)}
.c247h__contact a{display:flex;align-items:center;gap:12px;padding:10px 0;color:var(--white) !important;font-size:16px;font-weight:500}
.c247h__contact a + a{border-top:1px solid rgba(255,255,255,.08)}
.c247h__contact a:hover{color:var(--green-lt) !important}
.c247h__cicon{width:36px;height:36px;border-radius:10px;background:rgba(54,164,112,.18);display:grid;place-items:center;flex:none}
.c247h__cicon svg{width:18px;height:18px;color:var(--green-lt)}
.c247h__legal{font-size:12.5px;color:var(--muted);text-align:center;margin:0}
.c247h__legal a{color:var(--muted) !important}
.c247h__legal a:hover{color:var(--white) !important}

body.c247h-lock{overflow:hidden}

@media (max-width:1180px){
  .c247h__link{padding:0 14px;font-size:16px}
  .c247h__link::after{left:14px;right:14px}
  .c247h__cta{font-size:14.5px}
  .c247h__cta .c247h__cta-ico{display:none}
  .c247h__cta{padding:0 6px 0 22px}
}
@media (max-width:1024px){
  .c247h{--h:80px;--h-small:68px}
  .c247h__nav,.c247h__cta{display:none}
  .c247h .c247h__burger{display:inline-flex}
  .c247h__inner{padding:0 24px}
  .c247h__logo img{height:46px}
  .c247h.is-scrolled .c247h__logo img{height:40px}
}
@media (max-width:480px){
  .c247h{--h:72px;--h-small:64px}
  .c247h__inner{padding:0 18px}
  .c247h__logo img{height:40px}
  .c247h.is-scrolled .c247h__logo img{height:36px}
  .c247h .c247h__burger{width:46px;height:46px;border-radius:13px}
}
@media (prefers-reduced-motion:reduce){
  .c247h *,.c247h *::before,.c247h *::after{transition:none !important}
}

/* =====================================================================
   BUTTONS — primary site-wide = header pill (.c247h__cta language)
   ===================================================================== */
.c247-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:15px 30px;border-radius:999px;font-family:var(--font-h);font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;cursor:pointer;border:0;transition:background .2s ease,transform .25s ease,box-shadow .25s ease,color .2s ease,border-color .2s ease}
.c247-btn svg{width:18px;height:18px;flex:none}
.c247-btn--green{background:var(--green-grad);color:var(--white) !important;box-shadow:0 10px 26px rgba(54,164,112,.32),inset 0 1px 0 rgba(255,255,255,.25)}
.c247-btn--green::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s ease}
.c247-btn--green:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(54,164,112,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.c247-btn--green:hover::before{left:120%}
.c247-btn--green.has-ico{padding:8px 22px 8px 8px}
.c247-btn__ico{width:40px;height:40px;border-radius:50%;background:rgba(11,30,51,.22);display:grid;place-items:center;flex:none}
.c247-btn__ico svg{width:19px;height:19px}
.c247-btn__arrow{transition:transform .25s ease}
.c247-btn:hover .c247-btn__arrow{transform:translateX(4px)}
.c247-btn--ghost{border:2px solid rgba(255,255,255,.35);color:var(--white) !important;background:transparent}
.c247-btn--ghost:hover{border-color:var(--white);background:rgba(255,255,255,.08)}
.c247-btn--outline{border:2px solid var(--line);color:var(--primary) !important;background:#fff}
.c247-btn--outline:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 12px 26px rgba(13,80,142,.12)}
.c247-btn[disabled],.c247-btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed;transform:none}
.c247-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.c247-actions--center{justify-content:center}

/* =====================================================================
   LAYOUT + SECTION HEAD (reference .c247m__wrap / __section / __head)
   ===================================================================== */
.c247-wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.c247-section{padding:var(--pad) 0;position:relative}
.c247-section--tint{background:var(--tint)}
.c247-section--flush-top{padding-top:0}
.c247-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-h);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-ink);margin-bottom:16px}
.c247-eyebrow::before{content:"";width:28px;height:2px;background:currentColor;border-radius:2px;flex:none}
.c247-eyebrow svg{width:16px;height:16px;flex:none}
.c247-h2{font-size:48px;font-weight:700;margin-bottom:0}
@media (max-width:1024px){.c247-h2{font-size:36px}}
body:not(.page-managed-it-services) .c247-head .c247-lead,body:not(.page-managed-it-services) .c247-h2 + p:not(.c247-strap){margin-top:14px}
.c247-h2 + .c247-strap{margin-top:10px}
@media (max-width:767px){.c247-h2{font-size:28px}}
.c247-lead{font-size:clamp(17px,1.5vw,19px);color:var(--muted);max-width:720px}
.c247-head{margin-bottom:clamp(40px,5vw,64px)}
.c247-head--center{text-align:center}
.c247-head--center .c247-lead{margin-left:auto;margin-right:auto}
.c247-head--center .c247-eyebrow::after{content:"";width:28px;height:2px;background:currentColor;border-radius:2px;flex:none}
.c247-strap{font-family:var(--font-h);font-weight:600;font-size:clamp(18px,1.7vw,21px);color:var(--primary);margin:0 0 1em;line-height:1.4}

/* Dark bands (reference .c247m__why) */
.c247-dark{background:linear-gradient(160deg,var(--navy-ink),var(--navy));color:var(--white);overflow:hidden}
.c247-dark .c247-h2,.c247-dark h2,.c247-dark h3{color:var(--white)}
.c247-dark .c247-lead,.c247-dark p{color:#b9cbe0}
.c247-dark .c247-eyebrow{color:var(--green-lt)}
.c247-dark .c247-strap{color:#cfe0f3}
.c247-dark a:not(.c247-btn){color:var(--green-lt)}
.c247-dark strong{color:var(--white)}
.c247-watermark{position:absolute;inset:0;background-repeat:no-repeat;background-position:right -80px center;background-size:auto 120%;opacity:.05;pointer-events:none}
.c247-dark > .c247-wrap,.c247-section > .c247-wrap{position:relative;z-index:1}

/* =====================================================================
   HERO (reference .c247m__hero + .c247m__panel)
   ===================================================================== */
.c247-hero{position:relative;background:radial-gradient(1000px 520px at 85% 10%,rgba(13,80,142,.55),transparent 60%),linear-gradient(160deg,var(--navy-ink) 0%,var(--navy) 100%);color:var(--white);padding:max(24px,calc(clamp(80px,10vw,136px) - 107px)) 0 clamp(72px,9vw,120px);overflow:hidden;isolation:isolate}
.c247-hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(180deg,#000 30%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 100%);pointer-events:none;z-index:-1}
.c247-hero__media{position:absolute;inset:0;z-index:-3}
.c247-hero__media img,.c247-hero__media video{width:100%;height:100%;object-fit:cover;display:block}
.c247-hero__media video{position:absolute;inset:0}
.c247-hero__media--faint{opacity:.14}
.c247-hero__shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(11,30,51,.72) 0%,rgba(11,30,51,.55) 45%,rgba(11,30,51,.85) 100%),radial-gradient(900px 480px at 85% 10%,rgba(13,80,142,.45),transparent 60%)}
:root{--hdr:92px}
@media (max-width:1024px){:root{--hdr:80px}}
@media (max-width:480px){:root{--hdr:72px}}
/* Heroes fill the first screen on every device (svh = visible height on phones, under the browser bars).
   Home: whole screen, under the transparent header. Inner pages: screen minus the solid header. Legal pages stay compact. */
.c247-hero:not(.c247-hero--compact){display:flex;align-items:center;min-height:calc(100vh - var(--hdr));min-height:calc(100svh - var(--hdr))}
.c247-hero > .c247-wrap{width:100%}
.c247-hero.c247-hero--home{min-height:100vh;min-height:100svh;padding-top:calc(var(--hdr) + clamp(24px,3vw,40px));padding-bottom:clamp(64px,8vw,96px)}
.c247-hero__cue{position:absolute;left:50%;bottom:clamp(18px,3vh,32px);z-index:1;width:44px;height:44px;margin-left:-22px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.35);color:var(--green-lt);animation:c247Cue 2.2s ease-in-out infinite}
.c247-hero__cue svg{width:20px;height:20px}
@keyframes c247Cue{0%,100%{transform:translateY(0);opacity:.75}50%{transform:translateY(7px);opacity:1}}
.c247-hero--compact{padding:clamp(28px,3.5vw,48px) 0 clamp(36px,4.5vw,60px)}
/* Content straight after a compact hero (legal pages) and the header-only Contact page: no big top gap */
.c247-hero--compact + .c247-section,.c247-contactpage{padding-top:clamp(32px,4vw,56px)}
.c247-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,5vw,72px);align-items:center}
.c247-hero__grid--single{grid-template-columns:1fr;max-width:920px}
.c247-hero__grid--center{grid-template-columns:1fr;text-align:center;max-width:980px;margin:0 auto}
.c247-hero__grid--center .c247-actions{justify-content:center}
.c247-hero .c247-eyebrow{color:var(--green-lt)}
.c247-hero h1{color:var(--white);font-size:clamp(38px,5.2vw,64px);font-weight:800;margin-bottom:18px}
.c247-hero--compact h1{font-size:clamp(34px,4.4vw,54px)}
.c247-hero--product h1{font-size:clamp(30px,3.5vw,46px)}
/* ---- Shared service/product hero (Dom, 2026-11-04): page photo under a left-weighted navy shade, copy left, glass card right ---- */
.c247-hero--service .c247-hero__media img{opacity:.75;object-position:center}
.c247-hero--service .c247-hero__shade{background:radial-gradient(900px 520px at 88% 12%,rgba(13,80,142,.45),transparent 62%),linear-gradient(100deg,rgba(11,30,51,.96) 0%,rgba(11,30,51,.86) 40%,rgba(13,40,70,.62) 72%,rgba(22,58,91,.48) 100%)}
.c247-hero--service .c247-hero__copy{display:flex;flex-direction:column;align-items:flex-start}
.c247-hero--service .c247-hero__copy > *{order:5}
.c247-hero--service .c247-hero__copy > .c247-hero__logos{order:0}
.c247-hero--service .c247-hero__copy > .c247-eyebrow{order:1}
.c247-hero--service .c247-hero__copy > h1{order:2}
.c247-hero--service .c247-hero__copy > .c247-hero__intro{order:3}
.c247-hero--service .c247-hero__copy > .c247-actions{order:9}
.c247-hero--service .c247-hero__side .c247-panel{max-width:520px;margin-left:auto}
.c247-hero--service .c247-hero__logos{margin-bottom:22px}
.c247-hero--service .c247-hero__logos img{max-height:96px;width:auto}
.c247-hero--service .c247-logo-tile img{max-height:58px}
@media (max-width:640px){
  .c247-hero--service .c247-hero__logos img{max-height:76px}
  .c247-hero--service .c247-logo-tile img{max-height:46px}
  /* phones: buttons straight under the headline/strapline so they're in the first screen; longer copy follows */
  .c247-hero--service .c247-hero__copy > .c247-hero__sub,.c247-hero--service .c247-hero__copy > .c247-tagline{order:3}
  .c247-hero--service .c247-hero__copy > .c247-actions{order:4;margin:6px 0 26px}
  .c247-hero--service .c247-hero__copy > .c247-hero__intro{order:5}
}
.c247-panel--media .c247-panel__media{border-radius:14px;overflow:hidden}
.c247-panel--media .c247-video{border-radius:14px;box-shadow:none;border:1px solid rgba(255,255,255,.1)}
.c247-panel--media .c247-panel__foot{margin-top:16px}
@media (max-width:1024px){
  .c247-hero--service .c247-hero__shade{background:linear-gradient(180deg,rgba(11,30,51,.93) 0%,rgba(11,30,51,.86) 55%,rgba(13,40,70,.9) 100%)}
  .c247-hero--service .c247-hero__side .c247-panel{max-width:none;margin:0}
}
.c247-hero--product .c247-hero__grid{align-items:center}
.c247-hero__sub{font-family:var(--font-h);font-weight:600;font-size:clamp(19px,2vw,24px);color:#cfe0f3;margin:0 0 1em;line-height:1.35}
.c247-hero__tag{font-weight:600;color:var(--white);margin:0 0 1em}
.c247-hero p{color:#c3d2e4}
.c247-hero strong{color:#fff}
.c247-hero__logos{display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;margin-bottom:28px}
.c247-hero__logos img{display:block;height:auto}
.c247-hero__intro{font-size:clamp(16px,1.3vw,18px);max-width:620px;margin-bottom:26px}
.c247-hero__grid--center .c247-eyebrow::before{display:none}
.c247-hero__grid--center .c247-eyebrow{justify-content:center}
.c247-ticks-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin:6px 0 20px}
.c247-ticks-pair .c247-ticks,.c247-tabpanel .c247-ticks-pair .c247-ticks{margin:0}
.c247-frame--small{max-width:400px}
.c247-card.c247-card--after-frame{position:relative;margin:-36px 18px 0;z-index:1}
@media (max-width:640px){.c247-card.c247-card--after-frame{margin:-24px 10px 0}}
.c247-logo-tile{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:16px;padding:14px 22px;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.c247-tagline{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-h);font-weight:700;letter-spacing:.08em;font-size:clamp(17px,2vw,22px);color:var(--green-lt);margin-top:6px}
.c247-tagline svg{width:22px;height:22px}
.c247-tagline p{color:var(--green-lt);margin:0}

.c247-panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:28px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 30px 60px rgba(0,0,0,.25)}
.c247-panel__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;font-family:var(--font-h);font-weight:700;font-size:14px;color:var(--white);letter-spacing:.04em}
.c247-live{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#7fd3a9;text-transform:uppercase;letter-spacing:.12em}
.c247-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#36A470;box-shadow:0 0 0 0 rgba(54,164,112,.6);animation:c247Pulse 2s infinite}
@keyframes c247Pulse{0%{box-shadow:0 0 0 0 rgba(54,164,112,.6)}70%{box-shadow:0 0 0 10px rgba(54,164,112,0)}100%{box-shadow:0 0 0 0 rgba(54,164,112,0)}}
.c247-status{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.c247-status li{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 16px;font-size:15px;color:#dbe6f3}
.c247-status li span:first-child{display:flex;align-items:center;gap:12px}
.c247-status svg{width:20px;height:20px;color:#7fd3a9;flex:none}
.c247-ok{font-size:12px;font-weight:600;color:#7fd3a9;background:rgba(54,164,112,.15);padding:4px 10px;border-radius:999px;white-space:nowrap}
.c247-panel__foot{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.c247-stat{text-align:center;padding:14px 8px;border-radius:12px;background:rgba(13,80,142,.35)}
.c247-stat strong{display:block;font-family:var(--font-h);font-size:24px;font-weight:800;color:var(--white);line-height:1.1}
.c247-stat small{font-size:12px;color:#a9bdd4}

/* =====================================================================
   PILLARS · SERVICES · CARDS · RESULT (reference)
   ===================================================================== */
.c247-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.c247-pillar{display:flex;gap:16px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:border-color .2s,box-shadow .2s,transform .2s;color:var(--ink);text-decoration:none}
.c247-pillar:hover{border-color:var(--primary);box-shadow:0 14px 30px rgba(13,80,142,.10);transform:translateY(-3px)}
.c247-pillar__num{font-family:var(--font-h);font-weight:800;font-size:15px;color:var(--white);background:var(--primary);width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none}
.c247-pillar h3{font-size:18px;font-weight:700;margin-bottom:4px}
.c247-pillar p{font-size:15px;color:var(--muted)}

.c247-service{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:start}
.c247-service--center{align-items:center}
.c247-service + .c247-service{margin-top:clamp(64px,8vw,110px);padding-top:clamp(64px,8vw,110px);border-top:1px solid var(--line)}
.c247-service--flip .c247-service__copy{order:2}
.c247-service__copy{position:sticky;top:120px}
.c247-service--center .c247-service__copy{position:static}
.c247-num{font-family:var(--font-h);font-weight:800;font-size:15px;color:var(--green-ink);letter-spacing:.1em;margin-bottom:12px}
.c247-service h2{font-size:clamp(28px,3.2vw,38px);font-weight:800;margin-bottom:14px}
.c247-service__copy p{color:#3d4654}
.c247-dark .c247-service__copy p{color:#c3d2e4}
.c247-result{margin-top:28px;background:var(--tint);border-left:4px solid var(--green);border-radius:0 12px 12px 0;padding:20px 24px}
.c247-result strong{display:block;font-family:var(--font-h);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-ink);margin-bottom:6px}
.c247-result p{color:var(--navy);font-weight:500}

.c247-card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,36px);box-shadow:0 20px 50px rgba(22,58,91,.08)}
.c247-card + .c247-card{margin-top:20px}
.c247-card__head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.c247-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--navy));display:grid;place-items:center;flex:none}
.c247-icon svg{width:24px;height:24px;color:var(--white)}
.c247-icon--sm{width:42px;height:42px;border-radius:12px}
.c247-icon--sm svg{width:20px;height:20px}
.c247-icon--green{background:rgba(54,164,112,.16)}
.c247-icon--green svg{color:var(--green-ink)}
.c247-card h3{font-size:18px;font-weight:700}
.c247-card__sub{font-size:14px;color:var(--muted);margin:0 0 1em}
.c247-ticks{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.c247-ticks li{position:relative;padding-left:32px;font-size:15.5px;line-height:1.5;color:#2c3440}
.c247-ticks li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:rgba(54,164,112,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2336A470' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.c247-ticks--2{grid-template-columns:1fr 1fr;column-gap:20px}
.c247-dark .c247-ticks li{color:#dbe6f3}
.c247-channels{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.c247-channels span{font-size:13px;font-weight:600;color:var(--primary);background:var(--tint);border:1px solid var(--line);padding:6px 12px;border-radius:999px}

/* =====================================================================
   BENEFITS (reference .c247m__benefit) — glass cards on navy
   ===================================================================== */
.c247-benefits{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.c247-benefit{grid-column:span 2;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:30px 26px;transition:background .2s,border-color .2s,transform .2s}
.c247-benefits--3x2 .c247-benefit:nth-child(4){grid-column:2 / span 2}
.c247-benefits--4{grid-template-columns:repeat(4,1fr)}
.c247-benefits--4 .c247-benefit{grid-column:auto}
.c247-benefit:hover{background:rgba(255,255,255,.08);border-color:rgba(127,211,169,.45);transform:translateY(-3px)}
.c247-benefit .c247-icon{background:rgba(54,164,112,.18);margin-bottom:18px}
.c247-benefit .c247-icon svg{color:#7fd3a9}
.c247-benefit h3{color:var(--white);font-size:19px;font-weight:700;margin-bottom:8px}
.c247-benefit p{color:#b9cbe0;font-size:15.5px}

/* =====================================================================
   GROW / NEEDS (reference .c247m__grow, .c247m__need)
   ===================================================================== */
.c247-grow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center}
.c247-grow__copy p{color:#3d4654}
.c247-needs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.c247-need{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.c247-need .c247-icon{width:42px;height:42px;border-radius:12px;margin-bottom:14px}
.c247-need .c247-icon svg{width:20px;height:20px}
.c247-need h3{font-size:16px;font-weight:700;margin-bottom:4px}
.c247-need p{font-size:14.5px;color:var(--muted);line-height:1.5}

/* =====================================================================
   FAQ (reference .c247m__faq)
   ===================================================================== */
.c247-faq-wrap{max-width:860px;margin:0 auto}
.c247-faq{display:grid;gap:14px}
.c247-faq details{background:var(--white);border:1px solid var(--line);border-radius:14px;transition:border-color .2s,box-shadow .2s}
.c247-faq details[open]{border-color:var(--primary);box-shadow:0 12px 30px rgba(13,80,142,.08)}
.c247-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;font-family:var(--font-h);font-weight:700;font-size:17px;color:var(--navy);line-height:1.35}
.c247-faq summary::-webkit-details-marker{display:none}
.c247-faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D508E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .25s ease,background-color .25s}
.c247-faq details[open] summary::after{transform:rotate(45deg);background-color:rgba(54,164,112,.16)}
.c247-faq__a{padding:0 26px 24px;color:#3d4654;font-size:16px}

/* =====================================================================
   CTA BAND (reference .c247m__cta-box)
   ===================================================================== */
.c247-cta{padding:0 0 var(--pad)}
.c247-cta-box{position:relative;overflow:hidden;background:radial-gradient(700px 360px at 100% 0%,rgba(54,164,112,.35),transparent 60%),linear-gradient(135deg,var(--primary),var(--navy-ink));border-radius:28px;padding:clamp(44px,6vw,80px) clamp(28px,5vw,72px);color:var(--white);display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
.c247-cta-box h2{color:var(--white);font-size:clamp(30px,3.6vw,44px);font-weight:800;margin-bottom:14px}
.c247-cta-strap{font-family:var(--font-h);font-weight:600;font-size:clamp(17px,1.6vw,20px);color:#cfe0f3;margin:0 0 1em;line-height:1.4}
.c247-cta-box p{color:#c3d2e4}
.c247-cta-side{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.c247-cta-contact{display:grid;gap:8px;font-size:15px;color:#cfe0f3}
.c247-cta-contact a{color:var(--white) !important;font-weight:600;text-decoration:none;display:inline-block;padding:13px 0;margin:-13px 0}
.c247-cta-contact a:hover{color:#7fd3a9 !important}
.c247-sign{margin:0;text-align:center;font-size:14px;color:var(--muted);font-style:italic}

/* =====================================================================
   NEW: IMAGE FRAME + IMAGE CARDS (same language: 20px radius, --line border, soft navy shadow)
   ===================================================================== */
.c247-frame{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 60px rgba(22,58,91,.18);background:var(--tint);line-height:0}
.c247-frame img{display:block;width:100%;height:100%;object-fit:cover}
.c247-dark .c247-frame{border-color:rgba(255,255,255,.14);box-shadow:0 30px 60px rgba(0,0,0,.35)}
.c247-frame--tall img{aspect-ratio:504/587}
.c247-frame__badge{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:10px;background:rgba(11,30,51,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:10px 14px;color:#fff;font-family:var(--font-h);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
.c247-frame__badge svg{width:18px;height:18px;color:var(--green-lt)}

.c247-icards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.c247-icard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 20px 50px rgba(22,58,91,.08);transition:transform .2s,box-shadow .2s,border-color .2s}
.c247-icard:hover{transform:translateY(-3px);border-color:var(--primary);box-shadow:0 26px 60px rgba(13,80,142,.14)}
.c247-icard__img{line-height:0;aspect-ratio:1472/832;overflow:hidden;background:var(--tint)}
.c247-icard__img img{width:100%;height:100%;object-fit:cover;display:block}
.c247-icard__body{padding:26px 26px 22px;flex:1}
.c247-icard__head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.c247-icard__head h3{font-size:clamp(19px,1.7vw,22px);font-weight:800}
.c247-icard__quote{display:flex;align-items:flex-start;gap:12px;margin:0;padding:18px 26px;background:linear-gradient(135deg,var(--primary),var(--navy));color:#fff;font-style:italic;font-size:15px;line-height:1.5}
.c247-icard:nth-child(2) .c247-icard__quote{background:var(--green-grad)}
.c247-icard__quote svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--green-lt)}
.c247-icard:nth-child(2) .c247-icard__quote svg{color:#fff}

/* =====================================================================
   NEW: FORMS (card in the reference card language, green pill submit)
   ===================================================================== */
.c247-formcard{background:#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(24px,3.4vw,40px);box-shadow:0 30px 70px rgba(22,58,91,.14)}
.c247-dark .c247-formcard{box-shadow:0 30px 70px rgba(0,0,0,.35)}
.c247-formcard__head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.c247-formcard__head h1,.c247-formcard__head h2,.c247-formcard__head h3{font-size:clamp(20px,2vw,24px);font-weight:800;color:var(--navy)}
.c247-form{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.c247-field{display:grid;gap:6px;min-width:0}
.c247-field--full{grid-column:1 / -1}
.c247-field label,.c247-field .c247-field__label{font-family:var(--font-h);font-weight:700;font-size:13.5px;color:var(--navy);letter-spacing:.01em}
.c247-field .c247-req{color:#c0392b;margin-left:2px}
.c247-field input,.c247-field textarea,.c247-field select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#f7f9fd;border:1.5px solid var(--line);border-radius:12px;padding:13px 16px;min-height:50px;transition:border-color .2s,box-shadow .2s,background .2s;appearance:none;-webkit-appearance:none}
.c247-field textarea{min-height:120px;resize:vertical;line-height:1.5}
.c247-field input::placeholder,.c247-field textarea::placeholder{color:#7a8597}
.c247-field input:focus,.c247-field textarea:focus,.c247-field select:focus{outline:0;border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(13,80,142,.12)}
.c247-field [aria-invalid="true"]{border-color:#c0392b;background:#fff7f6}
.c247-field__err{font-size:13px;color:#b03a2e;font-weight:500;min-height:0}
.c247-field__err:empty{display:none}
.c247-checks{display:grid;gap:8px;border:1.5px solid var(--line);border-radius:12px;padding:12px 16px;background:#f7f9fd;margin:0}
.c247-checks legend{padding:0 6px;font-family:var(--font-h);font-weight:700;font-size:13.5px;color:var(--navy)}
.c247-check{display:flex;align-items:center;gap:12px;font-size:15.5px;color:var(--ink);cursor:pointer;min-height:44px}
.c247-check input{width:20px;height:20px;min-height:0;padding:0;accent-color:var(--green);appearance:auto;-webkit-appearance:auto}
.c247-hp{position:absolute !important;left:-10000px !important;width:1px;height:1px;overflow:hidden}
.c247-form__foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:6px}
.c247-form__foot .c247-btn{min-width:200px}
.c247-form__status{font-size:15px;font-weight:600;margin:0}
.c247-form__status.is-ok{color:var(--green-ink)}
.c247-form__status.is-err{color:#b03a2e}
.c247-formsplit{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(36px,5vw,72px);align-items:center}
.c247-formsplit__copy p{color:#3d4654}
.c247-contactlines{display:grid;gap:10px;margin-top:26px;list-style:none;padding:0}
.c247-contactlines a,.c247-contactlines span.c247-cl{display:flex;align-items:center;gap:14px;color:var(--navy);font-weight:600;text-decoration:none}
.c247-contactlines a:hover{color:var(--primary)}
.c247-dark .c247-contactlines a,.c247-dark .c247-contactlines span.c247-cl{color:#fff}

/* =====================================================================
   NEW: BOOKING STEPPER (needs → details → date & time → confirm)
   ===================================================================== */
.c247-book{max-width:880px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(22px,3.4vw,40px);box-shadow:0 30px 70px rgba(22,58,91,.14);color:var(--ink);text-align:left}
.c247-dark .c247-book{box-shadow:0 30px 70px rgba(0,0,0,.35)}
.c247-dark .c247-book p{color:#3d4654}
.c247-book__head{margin-bottom:clamp(28px,4vw,44px)}
.c247-book__head .c247-eyebrow svg{width:16px;height:16px}
.c247-book__progress{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.c247-book__progress li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-family:var(--font-h);font-weight:600;font-size:13px;color:var(--muted)}
.c247-book__progress li::before{content:"";position:absolute;top:17px;left:calc(-50% + 22px);right:calc(50% + 22px);height:2px;background:var(--line)}
.c247-book__progress li:first-child::before{display:none}
.c247-book__progress li.is-done::before,.c247-book__progress li[aria-current]::before{background:var(--green)}
.c247-book__dot{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--tint);border:2px solid var(--line);color:var(--muted);font-weight:800;font-size:14px;transition:background .25s,border-color .25s,color .25s}
.c247-book__progress li[aria-current]{color:var(--navy)}
.c247-book__progress li[aria-current] .c247-book__dot{background:linear-gradient(135deg,var(--primary),var(--navy));border-color:transparent;color:#fff;box-shadow:0 8px 20px rgba(13,80,142,.3)}
.c247-book__progress li.is-done .c247-book__dot{background:var(--green-grad);border-color:transparent;color:#fff}
.c247-book__step{border:0;margin:0;padding:0;min-width:0}
.c247-book__step + .c247-book__step{margin-top:28px}
.is-stepper .c247-book__step + .c247-book__step{margin-top:0}
.c247-book__legend{display:flex;align-items:center;gap:12px;padding:0;margin:0 0 18px;font-family:var(--font-h);font-weight:700;font-size:clamp(18px,1.8vw,21px);color:var(--navy);outline:0}
.c247-book__legend svg{width:38px;height:38px;padding:9px;border-radius:11px;background:linear-gradient(135deg,var(--primary),var(--navy));color:#fff;flex:none}
.c247-book__q{border:0;margin:0 0 20px;padding:0;min-width:0}
.c247-book__q legend{padding:0;margin-bottom:10px;font-family:var(--font-h);font-weight:700;font-size:15px;color:var(--navy)}
.c247-book__opt{font-weight:500;color:var(--muted);font-size:13px}
.c247-book__q.is-invalid .c247-chip span{border-color:#e3a59d}
.c247-chips{display:flex;flex-wrap:wrap;gap:10px}
.c247-chip{position:relative;cursor:pointer}
.c247-chip input{position:absolute;opacity:0;width:1px;height:1px}
.c247-chip span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);background:#f7f9fd;font-size:15px;font-weight:500;color:var(--ink);line-height:1.3;transition:border-color .2s,background .2s,color .2s,box-shadow .2s}
.c247-chip:hover span{border-color:var(--primary)}
.c247-chip__tick{width:0;height:16px;opacity:0;transition:width .2s,opacity .2s;color:#fff}
.c247-chip__ico{width:18px;height:18px;color:var(--primary)}
.c247-chip input:checked + span{background:linear-gradient(135deg,var(--primary),var(--navy));border-color:transparent;color:#fff;box-shadow:0 8px 20px rgba(13,80,142,.22)}
.c247-chip input:checked + span .c247-chip__tick{width:16px;opacity:1}
.c247-chip input:checked + span .c247-chip__ico{color:var(--green-lt)}
.c247-chip input:focus-visible + span{outline:3px solid var(--green);outline-offset:3px}
.c247-book__hint{font-size:15px;color:var(--muted);margin:-6px 0 18px}
.c247-book__when{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;margin-bottom:18px}
.c247-cal{border:1.5px solid var(--line);border-radius:16px;padding:14px;background:#f7f9fd}
.c247-cal[hidden],.c247-slots[hidden]{display:none}
.c247-cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.c247-cal__title{margin:0;font-family:var(--font-h);font-weight:700;color:var(--navy)}
.c247-cal__nav{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--primary);font-size:22px;line-height:1;cursor:pointer}
.c247-cal__nav:disabled{opacity:.35;cursor:default}
.c247-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.c247-cal__dow{text-align:center;font-size:12px;font-weight:700;color:var(--muted);padding:4px 0}
.c247-cal__dow.is-we{opacity:.5}
.c247-cal__day{aspect-ratio:1;min-height:40px;border:0;border-radius:10px;background:#fff;font:600 15px/1 var(--font-b);color:var(--navy);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.c247-cal__day:hover:not(:disabled){background:var(--tint);box-shadow:inset 0 0 0 1.5px var(--primary)}
.c247-cal__day:disabled{background:transparent;color:#9aa6b5;cursor:default}
.c247-cal__day.is-selected{background:var(--green-grad);color:#fff;box-shadow:0 6px 16px rgba(54,164,112,.35)}
.c247-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:328px;overflow:auto;padding:2px}
.c247-slot{min-height:44px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font:600 15px var(--font-b);color:var(--navy);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.c247-slot:hover{border-color:var(--primary)}
.c247-slot.is-selected{background:var(--green-grad);border-color:transparent;color:#fff}
.c247-book__calltype{margin-bottom:0}
.c247-book__summary{display:grid;gap:0;margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.c247-book__summary div{display:grid;grid-template-columns:minmax(140px,38%) 1fr;gap:12px;padding:12px 16px;font-size:15px}
.c247-book__summary div:nth-child(odd){background:#f7f9fd}
.c247-book__summary dt{font-weight:700;color:var(--navy)}
.c247-book__summary dd{margin:0;color:#2c3440;word-break:break-word}
.c247-book__nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.c247-book__nav .c247-book__next,.c247-book__nav .c247-book__submit{margin-left:auto}
.c247-book__nav [hidden]{display:none}
.c247-book__nav .c247-btn{white-space:nowrap}
.c247-book__backico{transform:rotate(180deg)}
.c247-book.is-stepper .c247-book__step[hidden]{display:none}
.c247-book.is-done .c247-book__step,.c247-book.is-done .c247-book__nav,.c247-book.is-done .c247-book__progress{display:none}
.c247-book__done{display:flex;gap:18px;align-items:flex-start}
.c247-book__done[hidden]{display:none}
.c247-book__done .c247-icon{width:52px;height:52px}
.c247-book__done-title{margin:0 0 6px;font-family:var(--font-h);font-weight:800;font-size:22px;color:var(--navy);outline:0}
.c247-book__done-text{margin:0 0 16px;color:#3d4654}
.c247-book .c247-form__status{margin-top:12px}
@media (max-width:768px){
  .c247-book__when{grid-template-columns:1fr}
  .c247-slots{grid-template-columns:repeat(4,1fr);max-height:none}
}
@media (max-width:640px){
  .c247-book{padding:20px 16px;border-radius:20px}
  .c247-book__plabel{font-size:11.5px}
  .c247-book__progress li::before{left:calc(-50% + 20px);right:calc(50% + 20px)}
  .c247-chip span{font-size:14.5px;padding:10px 14px}
  .c247-slots{grid-template-columns:repeat(3,1fr)}
  .c247-book__summary div{grid-template-columns:1fr;gap:2px}
  .c247-book__nav .c247-btn{flex:1}
  .c247-book__done{flex-direction:column}
}

/* =====================================================================
   NEW: TABS (dark rail like the header dropdown + white panel card)
   ===================================================================== */
.c247-tabs{display:grid;grid-template-columns:320px 1fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 26px 60px rgba(22,58,91,.10)}
.c247-tabs__rail{background:linear-gradient(170deg,var(--navy-ink) 0%,var(--navy) 100%);padding:16px;display:flex;flex-direction:column;gap:8px}
.c247-tab{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px;border-radius:12px;border:1px solid transparent;background:none;color:#dbe6f3;font-family:var(--font-h);font-weight:700;font-size:16px;line-height:1.3;cursor:pointer;transition:background .2s,border-color .2s,color .2s;min-height:56px}
.c247-tab:hover{background:rgba(255,255,255,.06);color:#fff}
.c247-tab[aria-selected="true"]{background:rgba(255,255,255,.08);border-color:rgba(127,211,169,.45);color:#fff}
.c247-tab .c247h__dicon{width:38px;height:38px}
.c247-tab[aria-selected="true"] .c247h__dicon{background:var(--green-grad);border-color:transparent}
.c247-tab[aria-selected="true"] .c247h__dicon svg{color:#fff}
.c247-tab__img{width:38px;height:38px;border-radius:10px;background:#fff;display:grid;place-items:center;flex:none}
.c247-tab__img img{width:24px;height:24px}
.c247-tabpanel{padding:clamp(26px,3.6vw,48px)}
.c247-tabpanel:focus-visible{outline-offset:-4px}
.c247-tabpanel__lead{font-family:var(--font-h);font-weight:700;font-size:clamp(19px,2vw,24px);line-height:1.35;color:var(--primary);margin-bottom:24px}
.c247-tabpanel h3{font-size:clamp(19px,1.8vw,22px);font-weight:800;margin:28px 0 10px;display:flex;align-items:center;gap:12px}
.c247-tabpanel h3:first-of-type{margin-top:0}
.c247-tabpanel h3 .c247-icon{width:38px;height:38px;border-radius:10px}
.c247-tabpanel h3 .c247-icon svg{width:19px;height:19px}
.c247-tabpanel p{color:#3d4654}
.c247-tabpanel .c247-ticks{margin:8px 0 18px}
.c247-tabpanel .c247-frame{margin-top:24px;max-width:640px}
.c247-tabs--h{grid-template-columns:1fr}
.c247-tabs--h .c247-tabs__rail{flex-direction:row;gap:10px;padding:14px}
.c247-tabs--h .c247-tab{flex:1;justify-content:flex-start}
.c247-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:28px}
.c247-statcard{display:flex;gap:18px;align-items:flex-start;background:var(--tint);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:0 16px 16px 0;padding:22px 24px}
.c247-statcard__num{font-family:var(--font-h);font-weight:800;font-size:clamp(36px,4vw,52px);line-height:1;color:var(--primary);white-space:nowrap}
.c247-statcard__num span{display:inline-block;color:var(--green-ink)}
.c247-statcard p{margin:0;color:var(--navy);font-weight:500;font-size:15.5px;line-height:1.5}

/* =====================================================================
   NEW: VIDEO BLOCK (20px frame, poster, play button in green disc; YouTube loads on click)
   ===================================================================== */
.c247-video{position:relative;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 30px 60px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);aspect-ratio:16/9}
.c247-video button{all:unset;position:absolute;inset:0;cursor:pointer;display:block}
.c247-video img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88;transition:opacity .25s ease,transform .4s ease}
.c247-video button:hover img{opacity:1;transform:scale(1.02)}
.c247-video__play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--green-grad);display:grid;place-items:center;box-shadow:0 14px 34px rgba(54,164,112,.5),0 0 0 10px rgba(54,164,112,.18);transition:transform .25s ease}
.c247-video__play svg{width:30px;height:30px;color:#fff;fill:#fff;margin-left:4px}
.c247-video button:hover .c247-video__play{transform:scale(1.08)}
.c247-video button:focus-visible .c247-video__play{outline:3px solid #fff;outline-offset:4px}
.c247-video__label{position:absolute;left:0;top:0;right:0;padding:14px 16px 28px;background:linear-gradient(180deg,rgba(5,14,26,.78),transparent);color:#fff;font-family:var(--font-h);font-weight:700;font-size:14px;line-height:1.3;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.c247-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* =====================================================================
   NEW: CONTACT PANEL + MAP
   ===================================================================== */
.c247-contactgrid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,3vw,40px);align-items:start}
.c247-cbox{display:flex;align-items:flex-start;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.c247-cbox:first-child{padding-top:0}
.c247-cbox h2,.c247-cbox h3{font-size:20px;font-weight:800;margin-bottom:4px}
.c247-cbox p,.c247-cbox a{margin:0;color:#3d4654;font-weight:600;text-decoration:none}
.c247-cbox a:hover{color:var(--primary)}
.c247-map{position:relative;margin-top:26px;border-radius:20px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;background:linear-gradient(135deg,var(--tint),#dfe8f7)}
.c247-map button{all:unset;position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;text-align:center}
.c247-map__in{display:grid;justify-items:center;gap:12px;color:var(--navy);font-family:var(--font-h);font-weight:700}
.c247-map__in .c247-icon{width:56px;height:56px;border-radius:16px}
.c247-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.c247-map button:focus-visible{outline:3px solid var(--green);outline-offset:-6px;border-radius:20px}

/* =====================================================================
   NEW: PROSE (legal documents)
   ===================================================================== */
.c247-prose{max-width:860px;margin:0 auto;font-size:16.5px;color:#2c3440}
.c247-prose p{margin:0 0 1.05em}
.c247-prose a{color:var(--primary);font-weight:600;word-break:break-word}
.c247-prose strong,.c247-prose b{color:var(--navy)}
.c247-prose ol,.c247-prose ul{margin:0 0 1.1em;padding-left:1.4em}
.c247-prose li{margin:.35em 0}
.c247-prose li::marker{color:var(--green-ink);font-weight:700}
.c247-prose > ol > li > strong:only-child,.c247-prose h2,.c247-prose h3{font-family:var(--font-h);font-size:clamp(19px,1.9vw,23px);font-weight:800;color:var(--navy);letter-spacing:-.01em}
.c247-prose > ol{margin-top:2em;padding-left:1.6em}
.c247-prose > :first-child{margin-top:0}
.c247-prose h2,.c247-prose h3{margin:1.8em 0 .6em}
.c247-prose table{width:100%;border-collapse:collapse;margin:0 0 1.2em;font-size:15px}
.c247-prose td,.c247-prose th{border:1px solid var(--line);padding:10px 12px;vertical-align:top}

/* =====================================================================
   LOGO STRIP (sponsor/partner logos — white strip, original colours)
   ===================================================================== */
.c247-logos{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:36px 0}
.c247-logos ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 44px;list-style:none;margin:0;padding:0}
.c247-logos img{height:44px;width:auto;display:block}
.c247-logos .is-faint{background:#f1f3f6;border-radius:10px;padding:10px 14px}

/* =====================================================================
   FOOTER
   ===================================================================== */
.c247f{position:relative;overflow:hidden;background:var(--navy-ink);color:#c3d2e4;font-size:15.5px;isolation:isolate}
.c247f__bg{position:absolute;inset:0;z-index:-1;background:linear-gradient(170deg,rgba(11,30,51,.94) 0%,rgba(22,58,91,.94) 100%),url("/wp-content/uploads/2025/04/governmental-hackers-analyzing-cyber-threats-on-big-screens.webp") center/cover no-repeat}
.c247f__bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px}
.c247f__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(32px,5vw,72px);padding-top:clamp(56px,7vw,84px);padding-bottom:clamp(44px,6vw,64px)}
.c247f__logo{display:inline-block;margin-bottom:20px}
.c247f__logo img{display:block;height:120px;width:auto}
.c247f__blurb{max-width:520px;color:#b9cbe0;line-height:1.7;margin:0}
.c247f__title{margin:0 0 16px;font-family:var(--font-h);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-lt);display:flex;align-items:center;gap:10px}
.c247f__title::before{content:"";width:28px;height:2px;background:var(--green-lt);border-radius:2px}
.c247f__links,.c247f__contact{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.c247f a{color:#fff;text-decoration:none}
.c247f__links a{display:inline-flex;align-items:center;gap:10px;padding:8px 0;min-height:44px;font-weight:500;transition:color .2s}
.c247f__links a:hover{color:var(--green-lt)}
.c247f__chev{width:34px;height:34px;border-radius:10px;background:rgba(54,164,112,.18);display:grid;place-items:center;transition:transform .2s,background .2s;flex:none}
.c247f__chev svg{width:17px;height:17px;color:var(--green-lt)}
.c247f__links a:hover .c247f__chev{transform:translateY(-2px);background:rgba(54,164,112,.3)}
.c247f__contact a{display:flex;align-items:center;gap:12px;padding:8px 0;font-weight:500;transition:color .2s}
.c247f__contact a:hover{color:var(--green-lt)}
.c247f__cicon{width:38px;height:38px;border-radius:10px;background:rgba(54,164,112,.18);display:grid;place-items:center;flex:none}
.c247f__cicon svg{width:18px;height:18px;color:var(--green-lt)}
.c247f__bar{border-top:1px solid rgba(255,255,255,.1);background:rgba(5,14,26,.35)}
.c247f__bar-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-top:20px;padding-bottom:20px;font-size:14px;color:#a9bdd4}
.c247f__bar-in p{margin:0}
.c247f__bar-in a{color:#fff;font-weight:600}
.c247f__bar-in a:hover{color:var(--green-lt)}
/* Galaxy credit: real Galaxy logo (pixel-star mark + GALAXY, Plus Jakarta Sans 700, .42em — as galaxywebsitedesign.co.uk) */
.c247f__galaxy{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:500}
.c247f__galaxy-by{color:#a9bdd4;font-weight:500}
.c247f__galaxy-logo{display:inline-flex;align-items:center;gap:8px}
.c247f__galaxy-mark{display:block;width:28px;height:28px;filter:drop-shadow(0 0 6px rgba(45,212,247,.45));transition:transform .4s ease}
.c247f__galaxy-word{font-family:'Plus Jakarta Sans',var(--font-h);font-weight:700;font-size:14px;letter-spacing:.42em;color:#EDF1FF;margin-right:-.42em}
.c247f__galaxy:hover .c247f__galaxy-mark{transform:rotate(18deg) scale(1.08)}
.c247f__galaxy:hover .c247f__galaxy-word{color:#fff}

/* Bare layout (standalone MetForm pages) */
body.is-bare{background:linear-gradient(160deg,var(--navy-ink) 0%,var(--navy) 100%);min-height:100vh}
.c247-bare{padding:clamp(32px,6vw,72px) 0}
.c247-bare__wrap{max-width:860px}

/* Performance: skip layout/paint of off-screen sections until they approach the viewport */
main > section:not(.c247-hero),.c247f{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* =====================================================================
   MOTION — scroll reveal (content visible without JS; reduced-motion off)
   ===================================================================== */
.is-js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.is-js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .is-js [data-reveal]{opacity:1;transform:none}
}

/* =====================================================================
   RESPONSIVE (reference breakpoints: 1180 / 1024 / 640 / 480)
   ===================================================================== */
@media (max-width:1180px){
  .c247-benefits--4{grid-template-columns:repeat(2,1fr)}
  .c247-tabs{grid-template-columns:270px 1fr}
}
@media (max-width:1024px){
  .c247-hero__grid,.c247-service,.c247-grow,.c247-cta-box,.c247-formsplit,.c247-contactgrid{grid-template-columns:1fr}
  .c247-service--flip .c247-service__copy{order:0}
  .c247-service__copy{position:static}
  .c247-pillars{grid-template-columns:1fr}
  .c247-benefits{grid-template-columns:1fr 1fr}
  .c247-benefit,.c247-benefits--3x2 .c247-benefit:nth-child(4){grid-column:auto}
  .c247-benefits--3x2 .c247-benefit:nth-child(5){grid-column:1 / -1}
  .c247-icards{gap:16px}
  .c247-icard__body{padding:20px 18px 18px}
  .c247-icard__quote{padding:16px 18px}
  .c247-tabs{grid-template-columns:1fr}
  .c247-tabs__rail{flex-direction:row;overflow-x:auto;scrollbar-width:thin}
  .c247-tab{flex:0 0 auto;min-width:220px}
  .c247-f__grid,.c247f__grid{grid-template-columns:1fr 1fr}
  .c247f__brand{grid-column:1 / -1}
  .c247-frame--tall img,.c247-frame img{aspect-ratio:16/9;max-height:440px}
}
@media (max-width:860px){
  .c247-icards{grid-template-columns:1fr;max-width:560px;margin:0 auto}
}
@media (max-width:640px){
  body{font-size:16px}
  .c247-wrap{padding-left:20px;padding-right:20px}
  .c247-benefits,.c247-benefits--4,.c247-needs,.c247-ticks--2,.c247-form,.c247-stats,.c247-ticks-pair{grid-template-columns:1fr}
  .c247-benefits--3x2 .c247-benefit:nth-child(5){grid-column:auto}
  .c247-panel{padding:20px}
  .c247-panel__foot{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .c247-stat strong{font-size:20px}
  .c247-hero .c247-actions .c247-btn{width:100%}
  .c247-faq summary{padding:18px 20px;font-size:16px}
  .c247-faq__a{padding:0 20px 20px}
  .c247-cta-box{border-radius:20px}
  .c247-tabs__rail,.c247-tabs--h .c247-tabs__rail{flex-direction:row;overflow-x:auto;gap:8px;padding:12px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .c247-tabs__rail::-webkit-scrollbar{display:none}
  .c247-tab,.c247-tabs--h .c247-tab{flex:0 0 auto;min-width:0;max-width:78%;scroll-snap-align:start;font-size:14.5px;padding:10px 14px 10px 10px;min-height:52px;border-color:rgba(255,255,255,.12)}
  .c247-tab .c247h__dicon,.c247-tab__img{width:32px;height:32px}
  .c247-tabpanel{padding:24px 20px}
  .c247-form__foot .c247-btn{width:100%}
  .c247f__grid{grid-template-columns:1fr}
  .c247-statcard{flex-direction:column;gap:10px}
  .c247-logo-tile{padding:10px 16px}
}

/* =====================================================================
   FOOTER — phones (≤640px): centred brand, legal pills, contact card (header-panel style), tidy bar
   Same content and order as the live footer.
   ===================================================================== */
@media (max-width:640px){
  .c247f__grid{grid-template-columns:1fr;gap:30px;padding-top:48px;padding-bottom:36px;text-align:center}
  .c247f__brand{grid-column:auto}
  .c247f__logo{margin-bottom:16px}
  .c247f__logo img{height:96px;margin:0 auto}
  .c247f__blurb{font-size:15px;line-height:1.65;max-width:36ch;margin:0 auto}
  .c247f__title{justify-content:center;margin-bottom:14px}
  .c247f__title::after{content:"";width:28px;height:2px;background:var(--green-lt);border-radius:2px}
  .c247f__links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
  .c247f__links a{padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);font-size:15px}
  .c247f__links a:hover{background:rgba(255,255,255,.1);border-color:rgba(127,211,169,.45)}
  .c247f__chev{width:26px;height:26px;border-radius:8px;background:none}
  .c247f__chev svg{width:16px;height:16px}
  .c247f__links a{padding:8px 16px 8px 10px}
  .c247f__contact{display:block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:6px 16px;text-align:left}
  .c247f__contact li + li{border-top:1px solid rgba(255,255,255,.08)}
  .c247f__contact a{padding:12px 0;min-height:56px;font-size:16px}
  .c247f__bar-in{flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:18px;padding-bottom:22px;font-size:13px;line-height:1.5}
}

/* =====================================================================
   FORMS v2 (Dom, 2026-11-04): make every form read clearly as a form —
   tinted panel with a green top bar, white fields with a visible border, an icon inside each field,
   strong labels, clear focus. Applies to the contact forms, MetForm pages and the booking step 2.
   ===================================================================== */
.c247-formcard{position:relative;overflow:hidden;background:linear-gradient(180deg,#f4f7fd 0%,#eef3fb 100%);border:1px solid #d3deee;border-radius:24px;padding:clamp(26px,3.6vw,42px);box-shadow:0 30px 70px rgba(22,58,91,.16)}
.c247-formcard::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--green-grad)}
.c247-formcard__head{padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid #d3deee}
.c247-formcard__head .c247-icon{width:48px;height:48px}
.c247-formcard__note{margin:2px 0 0;font-size:14px;color:var(--muted)}
.c247-field label,.c247-field .c247-field__label{font-size:14px;color:var(--navy);margin-bottom:2px}
.c247-input{position:relative;display:block}
.c247-input__ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:22px;height:22px;display:grid;place-items:center;color:var(--primary);pointer-events:none;transition:color .2s}
.c247-input__ico svg{width:19px;height:19px}
.c247-input--area .c247-input__ico{top:15px;transform:none}
.c247-field .c247-input input,.c247-field .c247-input textarea{background:#fff;border:1.5px solid #c5d3e8;border-radius:12px;padding:14px 16px 14px 46px;min-height:54px;box-shadow:inset 0 1px 2px rgba(11,30,51,.05),0 1px 0 rgba(255,255,255,.8);font-size:16px}
.c247-field .c247-input textarea{min-height:128px;padding-top:13px}
.c247-field .c247-input input:hover,.c247-field .c247-input textarea:hover{border-color:#9fb5d4}
.c247-field .c247-input input:focus,.c247-field .c247-input textarea:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(13,80,142,.14)}
.c247-input:focus-within .c247-input__ico{color:var(--green)}
.c247-field .c247-input [aria-invalid="true"]{border-color:#c0392b;background:#fffafa}
.c247-field input::placeholder,.c247-field textarea::placeholder{color:#8794a6}
.c247-form__foot{padding-top:6px}
.c247-form__foot .c247-btn{min-height:56px;font-size:16.5px}
/* booking step 2 sits on a white card: tint the field area so it reads as a form there too */
.c247-book__step[data-step="2"] .c247-form{background:#f4f7fd;border:1px solid #d3deee;border-radius:16px;padding:18px}
@media (max-width:640px){
  .c247-formcard{padding:24px 16px;border-radius:20px}
  .c247-book__step[data-step="2"] .c247-form{padding:14px}
}

/* FAQ toggle = the two-part Cyber247 shield: whole when closed, the right stroke slides away when open (Dom, 2026-11-04) */
.c247-faq summary::after{display:none}
.c247-faq__shield{flex:none;width:30px;height:33px;overflow:visible}
.c247-shield__l{fill:var(--primary);transition:fill .3s ease}
.c247-shield__r{fill:var(--green);transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .35s ease;transform-box:fill-box;transform-origin:center}
.c247-faq details[open] .c247-shield__r{opacity:0;transform:translate(14px,-6px) rotate(8deg)}
.c247-faq details[open] .c247-shield__l{fill:var(--green)}
.c247-faq summary:hover .c247-shield__r{transform:translateX(2px)}

/* Phones: every group of buttons = same size, full width, and each a different colour: green → blue → white (Dom, 2026-11-04) */
@media (max-width:640px){
  .c247-actions{flex-direction:column;align-items:stretch;gap:12px}
  .c247-actions > .c247-btn{width:100%;min-height:56px;padding:12px 20px;justify-content:center;font-size:16px;border-width:0}
  .c247-actions > .c247-btn.has-ico{padding:8px 20px}
  .c247-actions > .c247-btn:nth-child(1){background:var(--green-grad);color:#fff !important;box-shadow:0 10px 26px rgba(54,164,112,.32),inset 0 1px 0 rgba(255,255,255,.25)}
  .c247-actions > .c247-btn:nth-child(2){background:linear-gradient(135deg,#1a6fc0 0%,#0D508E 55%,#163A5B 100%);color:#fff !important;border:1.5px solid rgba(255,255,255,.16);box-shadow:0 10px 24px rgba(13,80,142,.3)}
  .c247-actions > .c247-btn:nth-child(3){background:#fff;color:var(--navy) !important;border:1.5px solid var(--line);box-shadow:0 8px 20px rgba(22,58,91,.1)}
  .c247-actions > .c247-btn:nth-child(2) svg,.c247-actions > .c247-btn:nth-child(1) svg{color:#fff}
  .c247-actions > .c247-btn:nth-child(3) svg{color:var(--primary)}
  .c247-book__nav .c247-book__back{background:linear-gradient(135deg,#1a6fc0 0%,#0D508E 55%,#163A5B 100%);color:#fff !important;border:0}
  .c247-book__nav .c247-btn{min-height:56px}
}

/* Home hero: video only, fades in from the blue once it is actually playing */
.c247-hero__video{opacity:0;transition:opacity 1.6s ease}
.c247-hero__video.is-playing{opacity:1}

/* =====================================================================
   SPLIT LEAD + RICH POINTS — long copy broken into a statement + icon cards (same words, same order)
   ===================================================================== */
.c247-splitlead{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(22px,3vw,40px);align-items:start;max-width:1080px;margin:-12px auto clamp(40px,5vw,60px);text-align:left}
.c247-splitlead__first{margin:0;padding-left:22px;border-left:4px solid var(--green);font-family:var(--font-h);font-weight:600;font-size:clamp(20px,2vw,26px);line-height:1.42;color:var(--navy)}
.c247-splitlead__rest{display:grid;gap:14px}
.c247-splitlead__item{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 34px rgba(22,58,91,.08)}
.c247-splitlead__item p{margin:0;font-size:16px;line-height:1.6;color:#3d4654}
.c247-dark .c247-splitlead__first{color:#fff;border-color:var(--green-lt)}
.c247-dark .c247-splitlead__item{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:none}
.c247-dark .c247-splitlead__item p{color:#c9d8ea}
.c247-dark .c247-splitlead__item .c247-icon{background:rgba(54,164,112,.18)}
.c247-dark .c247-splitlead__item .c247-icon svg{color:var(--green-lt)}
.c247-richlead{font-size:clamp(17.5px,1.55vw,20px);line-height:1.6;font-weight:500;color:var(--navy);margin-bottom:18px}
.c247-dark .c247-richlead{color:#e6eef8}
.c247-points{display:grid;gap:12px;margin:0 0 6px}
.c247-point{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:14px;background:var(--tint);border:1px solid var(--line)}
.c247-point p{margin:0;font-size:15.5px;line-height:1.6;color:#3d4654}
.c247-section--tint .c247-point{background:#fff}
.c247-dark .c247-point{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.c247-dark .c247-point p{color:#c9d8ea}
.c247-dark .c247-point .c247-icon{background:rgba(54,164,112,.18)}
.c247-dark .c247-point .c247-icon svg{color:var(--green-lt)}
@media (max-width:860px){.c247-splitlead{grid-template-columns:1fr}}

/* =====================================================================
   HERO ARTWORK — original animated illustrations (templates/components/heroart.php)
   ===================================================================== */
.c247-hero__art{opacity:1}
.c247-heroart{display:block;width:100%;height:100%}
.c247-hero--service .c247-hero__art + .c247-hero__shade{background:linear-gradient(90deg,rgba(11,30,51,.94) 0%,rgba(11,30,51,.82) 34%,rgba(11,30,51,.25) 62%,rgba(11,30,51,0) 100%)}
.is-ready .c247-ha-pulse{animation:c247haPulse 3.4s linear infinite}
.is-ready .c247-ha-float{animation:c247haFloat 7s ease-in-out infinite;transform-box:fill-box}
.is-ready .c247-ha-ping{animation:c247haPing 2.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
.is-ready .c247-ha-sweep{animation:c247haSweep 7s linear infinite}
.is-ready .c247-ha-hexlit{animation:c247haHex 4s ease-in-out infinite}
.is-ready .c247-ha-scan{animation:c247haScan 6s linear infinite}
@keyframes c247haPulse{from{stroke-dashoffset:434}to{stroke-dashoffset:0}}
@keyframes c247haFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes c247haPing{0%{transform:scale(1);opacity:.85}100%{transform:scale(2.6);opacity:0}}
@keyframes c247haSweep{to{transform:rotate(360deg)}}
@keyframes c247haHex{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes c247haScan{from{transform:translateY(0)}to{transform:translateY(720px)}}
/* Tablet/phone: the artwork sits BEHIND THE GLASS CARD (video / status panel), not behind the headline,
   so the text stays clean and the card section gets the motion. site.js sets --side-c (card centre, px from hero top).
   Phone art = 1152x720 (scale .8): motif centre is 264px down, 904px across. Tablet = 1296x810 (scale .9): 297px / 1017px. (Dom, 2026-11-04) */
@media (max-width:1024px){
  .c247-hero--service{--side-c:900px;--ha-my:297px}
  .c247-hero--service .c247-hero__art{opacity:1;overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,transparent calc(var(--side-c) - 420px),#000 calc(var(--side-c) - 230px),#000 calc(var(--side-c) + 230px),transparent calc(var(--side-c) + 420px));
            mask-image:linear-gradient(180deg,transparent calc(var(--side-c) - 420px),#000 calc(var(--side-c) - 230px),#000 calc(var(--side-c) + 230px),transparent calc(var(--side-c) + 420px))}
  .c247-hero--service .c247-hero__art .c247-heroart{position:absolute;top:calc(var(--side-c) - var(--ha-my));left:calc(50% - var(--ha-cx,1017px));width:var(--ha-w,1296px);height:var(--ha-h,810px);max-width:none}
  .c247-hero--service .c247-hero__art + .c247-hero__shade{background:linear-gradient(180deg,rgba(11,30,51,.9) 0%,rgba(11,30,51,.88) calc(var(--side-c) - 420px),rgba(11,30,51,.25) calc(var(--side-c) - 200px),rgba(11,30,51,.25) calc(var(--side-c) + 200px),rgba(11,30,51,.9) calc(var(--side-c) + 420px))}
}
@media (max-width:600px){
  .c247-hero--service{--ha-my:363px}
  .c247-hero--service .c247-hero__art .c247-heroart{--ha-w:1584px;--ha-h:990px;--ha-cx:1243px}
}
@media (max-width:1024px){
  .c247-hero--service .c247-hero__side .c247-panel{background:rgba(11,30,51,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
}

/* Desktop: glass card smaller and low on the right so the artwork above/around it stays visible */
@media (min-width:1025px){
  .c247-hero--service .c247-hero__grid{align-items:end}
  .c247-hero--service .c247-hero__side{align-self:end;padding-top:clamp(140px,18vh,220px)}
  .c247-hero--service .c247-hero__side .c247-panel{max-width:440px;background:rgba(11,30,51,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
}

/* Managed IT hero title on one line at every width (Dom, 2026-11-04) */
.c247-oneline{white-space:nowrap}
.c247-hero h1:has(> .c247-oneline){font-size:clamp(26px,8.2vw,58px)}

/* =====================================================================
   ONE BUTTON ANIMATION, SITE-WIDE (Dom, 2026-11-04)
   Every button — green, blue, ghost, outline/white, form, booking, header CTA — does the same thing:
   hover / keyboard focus = lift 2px + deeper shadow + light shine sweeps across + arrow nudges right;
   press (mouse or finger) = sinks back and squeezes to 97%. Touch screens get the shine + squeeze on tap.
   ===================================================================== */
.c247-btn,.c247h__cta,.c247h__pcta{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,background-color .2s ease,border-color .2s ease,color .2s ease}
.c247-btn::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s ease}
.c247-btn--outline::before{background:linear-gradient(100deg,transparent,rgba(13,80,142,.14),transparent)}
.c247-btn:hover,.c247-btn:focus-visible,.c247h__cta:focus-visible,.c247h__pcta:focus-visible{transform:translateY(-2px)}
.c247-btn:hover::before,.c247-btn:focus-visible::before,.c247-btn:active::before,.c247h__cta:active::before,.c247h__pcta:active::before{left:120%}
.c247-btn:hover .c247-btn__arrow,.c247-btn:focus-visible .c247-btn__arrow{transform:translateX(4px)}
.c247-btn--green:hover,.c247-btn--green:focus-visible{box-shadow:0 14px 34px rgba(54,164,112,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.c247-btn--ghost:hover,.c247-btn--ghost:focus-visible{box-shadow:0 14px 30px rgba(0,0,0,.28)}
.c247-btn--outline:hover,.c247-btn--outline:focus-visible{box-shadow:0 14px 30px rgba(13,80,142,.18)}
.c247-btn:active,.c247h__cta:active,.c247h__pcta:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.c247-btn[disabled],.c247-btn[aria-disabled="true"]{transform:none}
.c247-btn[disabled]::before,.c247-btn[aria-disabled="true"]::before{display:none}
@media (max-width:640px){
  .c247-actions > .c247-btn:nth-child(2):hover,.c247-actions > .c247-btn:nth-child(2):focus-visible{box-shadow:0 14px 30px rgba(13,80,142,.42)}
  .c247-actions > .c247-btn:nth-child(3)::before{background:linear-gradient(100deg,transparent,rgba(13,80,142,.14),transparent)}
}
/* Touch screens: no sticky hover lift after a tap — the tap itself plays the shine + squeeze */
@media (hover:none){
  .c247-btn:hover,.c247h__cta:hover,.c247h__pcta:hover{transform:none}
  .c247-btn:hover::before{left:-60%}
  .c247-btn:active::before{left:120%;transition-duration:.45s}
  .c247-btn:active,.c247h__cta:active,.c247h__pcta:active{transform:scale(.97)}
}
@media (prefers-reduced-motion:reduce){
  .c247-btn,.c247h__cta,.c247h__pcta,.c247-btn::before{transition:none}
  .c247-btn:hover,.c247-btn:focus-visible,.c247-btn:active{transform:none}
}

/* Booking questions: each question is its own numbered card so the separate choices read at a glance (Dom, 2026-11-04).
   Card turns green-edged with a tick once it's answered. */
.c247-book__step{counter-reset:bq}
.c247-book__q{counter-increment:bq;position:relative;margin:0 0 14px;padding:18px 20px 18px 66px;border:1.5px solid var(--line);border-radius:16px;background:#f4f7fc;transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
.c247-book__q > legend{float:left;width:100%;margin:0 0 12px;padding:0;font-size:16px;line-height:1.35}
.c247-book__q > legend + *{clear:both}
.c247-book__q::before{content:counter(bq);position:absolute;left:18px;top:16px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--navy));color:#fff;font-family:var(--font-h);font-weight:700;font-size:15px;box-shadow:0 6px 14px rgba(13,80,142,.22);transition:background .2s ease}
.c247-book__q .c247-chip span{background:#fff}
.c247-book__q:has(input:checked){border-color:rgba(54,164,112,.55);background:#f2faf6;box-shadow:inset 4px 0 0 var(--green)}
.c247-book__q:has(input:checked)::before{content:"✓";background:var(--green-grad)}
.c247-book__q.is-invalid{border-color:#e3a59d;background:#fdf5f4}
.c247-book__q .c247-field__err:empty{display:none}
@media (max-width:640px){
  .c247-book__q{padding:16px 14px}
  .c247-book__q::before{left:14px;top:13px;width:28px;height:28px;font-size:14px}
  .c247-book__q > legend{float:left;font-size:15.5px;min-height:28px;padding:3px 0 0 40px}
}

/* =====================================================================
   BUTTON GROUPS — same scheme on every screen (Dom, 2026-11-04)
   1st = green, 2nd = blue, 3rd = white. In a group every button is the same width and height;
   a long label wraps onto two balanced lines instead of making one huge pill.
   ===================================================================== */
.c247-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:fit-content;max-width:100%;gap:14px}
.c247-actions--center{margin-inline:auto}
.c247-actions > .c247-btn{min-height:56px;padding:10px 26px;border-width:0;text-align:center;text-wrap:balance;font-size:16px;line-height:1.25}
.c247-actions > .c247-btn.has-ico{padding:8px 24px 8px 8px}
.c247-actions > .c247-btn:nth-child(1){background:var(--green-grad);color:#fff !important;box-shadow:0 10px 26px rgba(54,164,112,.32),inset 0 1px 0 rgba(255,255,255,.25)}
.c247-actions > .c247-btn:nth-child(2){background:linear-gradient(135deg,#1a6fc0 0%,#0D508E 55%,#163A5B 100%);color:#fff !important;border:1.5px solid rgba(255,255,255,.16);box-shadow:0 10px 24px rgba(13,80,142,.3)}
.c247-actions > .c247-btn:nth-child(3){background:#fff;color:var(--navy) !important;border:1.5px solid var(--line);box-shadow:0 8px 20px rgba(22,58,91,.1)}
.c247-actions > .c247-btn:nth-child(1) svg,.c247-actions > .c247-btn:nth-child(2) svg{color:#fff}
.c247-actions > .c247-btn:nth-child(3) svg{color:var(--primary)}
.c247-actions > .c247-btn:nth-child(1):hover,.c247-actions > .c247-btn:nth-child(1):focus-visible{box-shadow:0 14px 34px rgba(54,164,112,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.c247-actions > .c247-btn:nth-child(2):hover,.c247-actions > .c247-btn:nth-child(2):focus-visible{box-shadow:0 14px 30px rgba(13,80,142,.42)}
.c247-actions > .c247-btn:nth-child(3):hover,.c247-actions > .c247-btn:nth-child(3):focus-visible{box-shadow:0 14px 30px rgba(13,80,142,.18)}
.c247-actions > .c247-btn:nth-child(1)::before,.c247-actions > .c247-btn:nth-child(2)::before{background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent)}
.c247-actions > .c247-btn:nth-child(3)::before{background:linear-gradient(100deg,transparent,rgba(13,80,142,.14),transparent)}
.c247-hero .c247-actions{max-width:min(100%,640px)}
@media (max-width:640px){
  .c247-actions{grid-auto-flow:row;grid-auto-columns:auto;width:100%}
  .c247-actions > .c247-btn{width:100%}
}

/* =====================================================================
   SERVICE / PRODUCT HEROES — fit one desktop screen (Dom, 2026-11-04)
   Long intro copy now lives in .c247-introband directly under the hero.
   ===================================================================== */
@media (min-width:1025px){
  .c247-hero--service{padding-bottom:clamp(40px,6vh,72px)}
  .c247-hero--service .c247-hero__grid{align-items:center}
  .c247-hero--service .c247-hero__side{align-self:center;padding-top:clamp(40px,8vh,110px)}
  .c247-hero--service .c247-actions{margin-top:26px}
  .c247-hero.c247-hero--product h1{font-size:clamp(34px,3.2vw,48px);line-height:1.12}
  .c247-hero--service .c247-hero__logos{margin-bottom:14px}
}
@media (min-width:1025px) and (max-height:820px){
  .c247-hero--service h1{font-size:clamp(34px,3.6vw,50px)}
  .c247-hero--service .c247-hero__sub{font-size:20px}
  .c247-hero--service .c247-hero__logos img{max-height:76px}
  .c247-hero--service .c247-hero__side .c247-panel{transform:scale(.92);transform-origin:right center}
}
.c247-introband{padding-block:clamp(40px,5vw,64px)}
.c247-introband__grid{display:grid;gap:18px}
.c247-introband__grid--2{grid-template-columns:1.35fr 1fr}
.c247-introband__grid--3{grid-template-columns:repeat(3,1fr)}
.c247-introband__grid--1{max-width:980px;margin-inline:auto}
.c247-introband__card{display:flex;gap:16px;align-items:flex-start;padding:24px 26px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px rgba(22,58,91,.07);position:relative;overflow:hidden}
.c247-introband__card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--green-grad)}
.c247-introband__card p{margin:0;font-size:17px;line-height:1.65;color:var(--ink)}
.c247-introband__grid--1 .c247-introband__card p{font-size:clamp(17px,1.5vw,19.5px)}
.c247-introband:not(.c247-section--tint){background:linear-gradient(180deg,#f4f7fc 0%,#fff 100%)}
@media (max-width:1024px){.c247-introband__grid--2,.c247-introband__grid--3{grid-template-columns:1fr}}
@media (max-width:640px){.c247-introband__card{padding:20px 18px}}

/* Desktop: artwork centred BEHIND the glass card too (same as mobile), so it frames the card instead of
   colliding with its corner. 1800x1125 = 1.25x; motif centre in the SVG = (1412px, 412px). (Dom, 2026-11-04) */
@media (min-width:1025px){
  .c247-hero--service{--side-c:480px;--side-x:75%}
  .c247-hero--service .c247-hero__art{overflow:hidden;
    -webkit-mask-image:radial-gradient(760px 520px at var(--side-x) var(--side-c),#000 55%,transparent 100%);
            mask-image:radial-gradient(760px 520px at var(--side-x) var(--side-c),#000 55%,transparent 100%)}
  .c247-hero--service .c247-hero__art .c247-heroart{position:absolute;width:1800px;height:1125px;max-width:none;left:calc(var(--side-x) - 1412px);top:calc(var(--side-c) - 412px)}
  .c247-hero--service .c247-hero__art + .c247-hero__shade{background:linear-gradient(90deg,rgba(11,30,51,.94) 0%,rgba(11,30,51,.8) 36%,rgba(11,30,51,.2) 60%,rgba(11,30,51,.1) 100%)}
}

/* Button groups: never squashed to the label — a sensible minimum width on desktop, full width stacked on phones */
.c247-actions > .c247-btn{min-width:220px}
.c247-hero--home .c247-actions > .c247-btn{min-width:230px;min-height:60px;font-size:17px}
@media (max-width:640px){
  .c247-actions,.c247-hero .c247-actions,.c247-actions--center{grid-template-columns:1fr;justify-content:stretch;justify-items:stretch;width:100%}
  .c247-actions > .c247-btn{min-width:0;width:100%}
}
.c247-hero__grid--center .c247-actions{margin-inline:auto}

/* Art position from site.js (exact centre on the card); the calc() values above are only the no-JS fallback */
.c247-hero--service .c247-hero__art .c247-heroart{left:var(--art-l,calc(var(--side-x,75%) - 1412px));top:var(--art-t,calc(var(--side-c,480px) - 412px))}
@media (max-width:1024px){
  .c247-hero--service .c247-hero__art .c247-heroart{left:var(--art-l,calc(50% - var(--ha-cx,1017px)));top:var(--art-t,calc(var(--side-c) - var(--ha-my)))}
}
/* See-through glass card so the artwork's dots and lines show through it (Dom, 2026-11-04) */
.c247-hero--service .c247-hero__side .c247-panel{background:rgba(11,30,51,.22) !important;backdrop-filter:blur(1.5px) !important;-webkit-backdrop-filter:blur(1.5px) !important}
.c247-hero--service .c247-panel .c247-status li{background:rgba(11,30,51,.55)}

/* Tablet/phone hero art: kept to the card area only (fades out just above and below the card) — Dom, 2026-11-04 */
@media (max-width:1024px){
  .c247-hero--service .c247-hero__art{
    -webkit-mask-image:linear-gradient(180deg,transparent calc(var(--side-c) - var(--side-h,460px)/2 - 70px),#000 calc(var(--side-c) - var(--side-h,460px)/2 + 30px),#000 calc(var(--side-c) + var(--side-h,460px)/2 - 30px),transparent calc(var(--side-c) + var(--side-h,460px)/2 + 90px));
            mask-image:linear-gradient(180deg,transparent calc(var(--side-c) - var(--side-h,460px)/2 - 70px),#000 calc(var(--side-c) - var(--side-h,460px)/2 + 30px),#000 calc(var(--side-c) + var(--side-h,460px)/2 - 30px),transparent calc(var(--side-c) + var(--side-h,460px)/2 + 90px))}
}
@media (max-width:600px){
  .c247-hero.c247-hero--product h1{font-size:clamp(28px,7.8vw,34px);line-height:1.15}
  .c247-hero--service .c247-hero__logos{margin-bottom:16px;gap:18px}
  .c247-hero--service .c247-hero__logos img{max-height:64px}
}

/* =====================================================================
   TABS → ACCORDION ON PHONES (Dom, 2026-11-04): every tab is a full-width bar and its content opens directly
   underneath it, so nothing hides off-screen in a sideways-scrolling row. Same buttons/ARIA as desktop.
   ===================================================================== */
.c247-tab__chev{display:none}
@media (max-width:760px){
  .c247-tabs,.c247-tabs--h{display:flex;flex-direction:column;gap:10px;background:none;border:0;box-shadow:none;border-radius:0;overflow:visible}
  .c247-tabs__rail,.c247-tabs--h .c247-tabs__rail{display:contents}
  .c247-tab,.c247-tabs--h .c247-tab{order:var(--o);max-width:none;width:100%;flex:none;min-height:60px;padding:12px 16px 12px 12px;border-radius:16px;background:linear-gradient(170deg,var(--navy-ink) 0%,var(--navy) 100%);border:1px solid rgba(255,255,255,.08);color:#fff;font-size:15.5px;box-shadow:0 10px 24px rgba(22,58,91,.14);scroll-snap-align:none}
  .c247-tab > span:not(.c247h__dicon):not(.c247-tab__img){flex:1}
  .c247-tab__chev{display:block;width:20px;height:20px;flex:none;color:var(--green-lt);transition:transform .25s ease}
  .c247-tabs .c247-tab[aria-selected="true"]{background:linear-gradient(170deg,#123a5e 0%,var(--navy) 100%);color:#fff;border-color:rgba(127,211,169,.55);border-radius:16px 16px 0 0;box-shadow:inset 4px 0 0 var(--green),0 10px 24px rgba(22,58,91,.14)}
  .c247-tab[aria-selected="true"] .c247-tab__chev{transform:rotate(180deg)}
  .c247-tabpanel{order:var(--o);margin-top:-10px;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 16px 16px;box-shadow:0 18px 36px rgba(22,58,91,.08)}
}

/* =====================================================================
   HOME HERO: animated logo shield (canvas, site.js). Replaces the video (Dom, 2026-11-04).
   Dots assemble the two-part shield, outline draws, pulse rings, red threats bounce off.
   ===================================================================== */
.c247-hero__shieldart{background:radial-gradient(900px 600px at 50% 56%,#123a5e 0%,transparent 70%)}
.c247-shieldcv{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease}
.c247-shieldcv.is-on{opacity:1}
.c247-shieldsrc{position:absolute;width:0;height:0;overflow:hidden;visibility:hidden}
.c247-hero--home .c247-hero__copy{position:relative}
.c247-hero--home .c247-hero__copy::before{content:"";position:absolute;inset:-40px -60px;z-index:-1;background:radial-gradient(closest-side,rgba(11,30,51,.62),rgba(11,30,51,0));pointer-events:none}

/* AI-Enabled SOC & MDR page (Dom, 2026-11-04) */
.c247-partner-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(127,211,169,.4);color:#dbe6f3;font-size:15px}
.c247-partner-pill svg{width:20px;height:20px;color:var(--green-lt)}
.c247-partner-pill strong{color:#fff;letter-spacing:.02em}
.c247-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.c247-tiers > .c247-card,.c247-tier--featured > .c247-card{height:100%}
.c247-tier--featured{position:relative}
.c247-tier--featured > .c247-card{border:2px solid var(--green);box-shadow:0 26px 60px rgba(54,164,112,.18)}
.c247-tier__badge{position:absolute;top:-13px;right:20px;z-index:1;background:var(--green-grad);color:#fff;font-family:var(--font-h);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.c247-footnote{max-width:820px;margin:26px auto 0;text-align:center;font-size:13.5px;color:#a9bdd3}
@media (max-width:960px){.c247-tiers{grid-template-columns:1fr}}

/* TENEX.AI partner logo (white, theirs) — hero + "What is TENEX.AI?" card (Dom, 2026-11-04) */
.c247-partner-logo{display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px}
.c247-partner-logo__by{font-family:var(--font-h);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-lt)}
.c247-partner-logo img{display:block;width:clamp(220px,22vw,320px);height:auto}
.c247-tenex-card{background:linear-gradient(160deg,var(--navy-ink) 0%,var(--navy) 100%);border-radius:24px;padding:clamp(28px,3.5vw,44px);box-shadow:0 26px 60px rgba(22,58,91,.22);color:#fff;position:relative;overflow:hidden}
.c247-tenex-card::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:36px 36px;pointer-events:none}
.c247-tenex-card > *{position:relative;z-index:1}
.c247-tenex-card > img{width:min(100%,300px);height:auto;margin-bottom:24px}
.c247-tenex-card ul{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:12px}
.c247-tenex-card li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#dbe6f3;font-size:15.5px}
.c247-tenex-card li svg{width:22px;height:22px;flex:none;color:var(--green-lt)}
.c247-tenex-card li strong{color:#fff}
@media (max-width:600px){.c247-partner-logo img{width:200px}}
.c247-hero--service .c247-hero__logos--tenex img{width:clamp(200px,17vw,250px) !important;max-height:none !important;height:auto}
@media (max-width:600px){.c247-hero--service .c247-hero__logos--tenex img{width:180px !important}}

/* =====================================================================
   ROOMIER LAYOUT + NO ORPHAN WORDS, SITE-WIDE (Dom, 2026-11-04)
   Content column 1160px → 1280px (lines up with the header logo/CTA); side space on a 1440 screen drops from
   164px to 104px each side (~37% less). Text blocks widened to match, and every heading/lead/paragraph wraps
   evenly so no single word is left alone on the last line.
   ===================================================================== */
:root{--wrap:1280px}
.c247-wrap{padding-left:28px;padding-right:28px}
.c247-lead{max-width:920px}
.c247-hero__grid--single{max-width:1100px}
.c247-hero__grid--center{max-width:1140px}
.c247-hero__intro{max-width:720px}
.c247-faq-wrap{max-width:1000px}
.c247-book{max-width:1020px}
.c247-prose{max-width:960px}
.c247-splitlead{max-width:1240px}
.c247-introband__grid--1{max-width:1120px}
.c247-footnote{max-width:960px}
h1,h2,h3,.c247-h2,.c247-lead,.c247-eyebrow,.c247-hero__sub,.c247-splitlead__first,.c247-tabpanel__lead,.c247-richlead,.c247-strap,.c247-cta-strap{text-wrap:balance}
p,li,dd,.c247-card__sub,.c247-need p,.c247-benefit p{text-wrap:pretty}
.c247-tiers > .c247-card + .c247-card,.c247-tiers > * + * > .c247-card{margin-top:0}
@media (max-width:640px){.c247-wrap{padding-left:20px;padding-right:20px}}

/* Agentic SOC hero art (TENEX.AI page) — inbound alert dashes, orbiting agents (Dom, 2026-11-04) */
.is-ready .c247-ha-flow{animation:c247haFlow 2.2s linear infinite}
.is-ready .c247-ha-flow--out{animation-duration:1.4s}
.is-ready .c247-ha-orbit{animation:c247haSweep 46s linear infinite}
.is-ready .c247-ha-orbit--rev{animation-direction:reverse;animation-duration:80s}
@keyframes c247haFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:-96}}
@media (prefers-reduced-motion:reduce){.c247-ha-flow,.c247-ha-orbit,.c247-ha-orbit--rev{animation:none !important}}
/* Hero glass card: more solid so the information reads clearly; art still glows softly through (Dom, 2026-11-04) */
.c247-hero--service .c247-hero__side .c247-panel{background:rgba(11,30,51,.66) !important;backdrop-filter:blur(5px) !important;-webkit-backdrop-filter:blur(5px) !important}
.c247-hero--service .c247-panel .c247-status li{background:rgba(11,30,51,.78);border-color:rgba(255,255,255,.1)}
.c247-hero--service .c247-panel .c247-stat{background:rgba(13,80,142,.55)}

/* ---------- CYBER 100 CLUB LOGO ----------
   The club mark is a portrait crest (409x610), not the 3.5:1 wordmark the 247
   header was built for. At the inherited 54px it rendered 36px wide and was
   unreadable. Sized off the bar instead: the bar height is fixed, so a taller
   crest can never push the page down. */
.c247h__logo img{height:78px}
.c247h.is-stuck .c247h__logo img{height:62px}
@media (max-width:1024px){.c247h__logo img{height:66px}.c247h.is-stuck .c247h__logo img{height:56px}}
@media (max-width:480px){.c247h__logo img{height:56px}.c247h.is-stuck .c247h__logo img{height:48px}}

/* ================= CYBER 100 CLUB HOME HERO (Dom, 2026-11-09) =================
   Desktop: the crest animates in the LEFT half, the copy sits in the right half,
   still centred within its own column. The canvas centres itself inside its own
   box, so constraining the box is all that is needed; no JS change.

   Mobile: the crest builds first, fades out, then the copy arrives line by line
   and the buttons last. Nothing is stacked on top of the artwork. */

/* The desktop hero copy column is set once at the end of this file,
   under "Where the crest settles". */

/* ---- the staged entrance ----
   The hidden state is owned by JS, not by the stylesheet: body.is-staging is
   added only when JS is going to remove it, so a JS failure can never leave a
   blank hero. Applies at every width now. On a phone the crest builds, fades
   and hands over; on desktop it builds centre, slides left, flashes, then hands
   over. Same classes drive both. */
body.is-staging .c247-hero__copy > *,
body.is-staging .c247-hero__copy .c247-actions > * {
  opacity: 0 !important; transform: translateY(16px) !important;
}
body.is-copy-in .c247-hero__copy > *,
body.is-copy-in .c247-hero__copy .c247-actions > * {
  transition: opacity .6s ease, transform .6s ease;
}
body.is-copy-in .c247-hero__copy > :nth-child(1) { transition-delay: .00s; }
body.is-copy-in .c247-hero__copy > :nth-child(2) { transition-delay: .20s; }
body.is-copy-in .c247-hero__copy > :nth-child(3) { transition-delay: .40s; }
body.is-copy-in .c247-hero__copy .c247-actions > :nth-child(1) { transition-delay: .56s; }
body.is-copy-in .c247-hero__copy .c247-actions > :nth-child(2) { transition-delay: .72s; }

/* Only the phone fades the crest out; desktop keeps it in the left column. */
@media (max-width: 1024px) {
  .c247-hero__shieldart { transition: opacity .9s ease; }
  .c247-hero__shieldart.is-faded { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.is-copy-in .c247-hero__copy > *,
  body.is-copy-in .c247-hero__copy .c247-actions > * { transition: none !important; }
}

/* ---- Stat tiles outside a hero panel ----
   stat_tiles() defaults to .c247-panel__foot, which only has a grid inside the
   glass panel. On a plain section the tiles had no layout and the labels were
   invisible against the fill. */
.c247-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; margin-top: 28px;
}
.c247-stats .c247-stat {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 16px; text-align: center;
}
.c247-stats .c247-stat strong {
  display: block; font-family: var(--font-h); font-weight: 800;
  font-size: clamp(22px, 2.4vw, 30px); color: var(--navy); line-height: 1.1;
}
.c247-stats .c247-stat small {
  display: block; margin-top: 6px; font-size: 15px; color: var(--muted);
}
@media (max-width: 860px) { .c247-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .c247-stats { grid-template-columns: 1fr; } }

/* ---- Home hero backdrop ----
   The 247 hero puts a blue glow at 85% across, which worked when its shield art
   filled the width. With the crest on the left that glow sat on its own behind
   the copy as a blue blob. On the home page the glow follows the crest. */
.c247-hero--home {
  background: radial-gradient(900px 560px at 26% 42%, rgba(13,80,142,.50), transparent 62%),
              linear-gradient(160deg, var(--navy-ink) 0%, var(--navy) 100%);
}
@media (max-width: 1024px) {
  .c247-hero--home {
    background: radial-gradient(760px 520px at 50% 34%, rgba(13,80,142,.50), transparent 64%),
                linear-gradient(160deg, var(--navy-ink) 0%, var(--navy) 100%);
  }
}

/* ---- Four events: four across, never 3 + 1 ----
   The shared pillar grid is three columns. Four events left one card stranded
   on its own row, the same orphan the awards jury grid had. */
@media (min-width: 1100px) { .page-home .c247-pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 681px) and (max-width: 1099px) { .page-home .c247-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .page-home .c247-pillars { grid-template-columns: 1fr; } }

/* ---- Hero proportions: give the headline room ---- */
@media (min-width: 1025px) {
  .c247-hero--home .c247-hero__copy h1 { font-size: clamp(34px, 3.4vw, 50px); }
}

/* Revealed by the backstop rather than by scrolling: show it outright. A paused
   or never-run transition must not be able to leave content invisible. */
.is-js [data-reveal].is-shown {
  opacity: 1 !important; transform: none !important; transition: none !important;
}


/* Sponsor wall sits under the audience stats, so it needs its own heading. */
.c100-sponsors { margin-top: 48px; }
.c100-sponsors__title {
  font-family: var(--font-h); font-weight: 700; font-size: 19px;
  color: var(--navy); text-align: center; margin: 0 0 20px;
}

/* ---- benefit_grid with SIX cards ----
   .c247-benefits is a 6-column grid and each card spans 2, so three sit per
   row. The --3x2 modifier then pushes card 4 to column 2, which centres a
   trailing pair: it is a five-card layout, three then two. Given six cards it
   produced 3 + 2 + 1 with an orphan. These let six cards run 3 + 3, and keep
   the tablet step at 2 + 2 + 2 instead of stranding card five full-width. */
.c247-benefits--3x2:has(> :nth-child(6)) .c247-benefit:nth-child(4) { grid-column: span 2; }
@media (max-width: 1024px) {
  .page-home .c247-benefits--3x2 .c247-benefit:nth-child(5) { grid-column: auto; }
}

/* ---- image_cards with FOUR events ----
   .c247-icards is a three-card grid: 247's framework has exactly three steps.
   The series has four events, which left one stranded on its own row. */
@media (min-width: 1100px) { .c247-icards:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 681px) and (max-width: 1099px) { .c247-icards:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .c247-icards:has(> :nth-child(4)) { grid-template-columns: 1fr; } }

/* ---- Sponsor wall: an even grid, not a wrapping flex row ----
   .c247-logos ul is a centred flex row, which wrapped eight marks as 5 + 3.
   Four per row keeps both rows full and the tiles aligned. */
.c247-logos:has(> .c247-wrap > ul > :nth-child(7)) ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
.c247-logos:has(> .c247-wrap > ul > :nth-child(7)) li { display: grid; place-items: center; }
@media (max-width: 860px) { .c247-logos:has(> .c247-wrap > ul > :nth-child(7)) ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Six benefit cards on a phone: one per row. The 6-column track with span-2
   cards otherwise produced a ragged 2 + 1 + 1 + 2. */
@media (max-width: 680px) {
  .page-home .c247-benefits { grid-template-columns: 1fr; }
  .page-home .c247-benefit,
  .page-home .c247-benefits--3x2 .c247-benefit:nth-child(4),
  .page-home .c247-benefits--3x2 .c247-benefit:nth-child(5) { grid-column: auto; }
}
@media (min-width: 681px) and (max-width: 1024px) {
  .page-home .c247-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-home .c247-benefit,
  .page-home .c247-benefits--3x2 .c247-benefit:nth-child(4),
  .page-home .c247-benefits--3x2 .c247-benefit:nth-child(5) { grid-column: auto; }
}

/* ---- Home hero backdrop and crest box ----
   Re-adding this: an earlier cleanup of mine searched for a marker that sat
   BEFORE the one it started from, so it truncated the stylesheet and took this
   rule with it, which is why the dark panel came back.

   .c247-hero__shieldart carries its own radial. Constrained to one side of the
   hero that radial stops at a hard vertical edge and reads as a dark rectangle
   behind the copy. The hero keeps one soft glow; the art box carries none.

   The box is now full width at every size: the crest builds in the centre of
   the page and the JS slides it to the left column, so it needs the whole hero
   to move across. */
.c247-hero__shieldart { background: none; right: 0; }
.c247-hero--home {
  background: radial-gradient(900px 560px at 50% 42%, rgba(13,80,142,.42), transparent 64%),
              linear-gradient(160deg, var(--navy-ink) 0%, var(--navy) 100%);
}

/* ---- First paint: nothing but the crest ----
   The copy and the scroll cue are hidden before the stylesheet even finishes,
   so neither can flash up ahead of the logo. Removed by stageCopy(). */
html.is-preload .c247-hero__copy > *,
html.is-preload .c247-hero__copy .c247-actions > *,
html.is-preload .c247-hero__cue {
  opacity: 0 !important; animation: none !important;
}

/* ---- Scroll cue arrives last, after both buttons ---- */
html.is-js .c247-hero__cue { opacity: 0; transition: opacity .6s ease; }
html.is-js body.is-cue-in .c247-hero__cue { opacity: 1; }

/* ---- Event cards: identical footers ----
   .c247-icard__body already has flex:1, so the quote strip is pinned to the
   bottom of every card. The strips were still different heights because the
   quotes run two or three lines. A shared minimum height with the text centred
   on both axes makes the row read as one band. */
.c247-icard__quote {
  min-height: 118px; align-items: center; justify-content: center;
  text-align: center; padding: 20px 22px;
}
/* 247 highlights the second card in green. Here the second card is RSA, whose
   venue is still unconfirmed, so singling it out reads as a mistake. */
.c247-icard:nth-child(2) .c247-icard__quote { background: linear-gradient(135deg, var(--primary), var(--navy)); }
.c247-icard:nth-child(2) .c247-icard__quote svg { color: var(--green-lt); }
@media (max-width: 680px) { .c247-icard__quote { min-height: 0; } }

/* ---- Inner page heroes ----
   .c247-hero--compact has no height of its own: only the non-compact hero gets
   the 100vh rule. With a crest building inside it the hero collapsed to a thin
   band. Any hero carrying the crest gets room to build in. */
.c247-hero--compact:has(.c247-hero__shieldart) {
  display: flex; align-items: center;
  min-height: clamp(440px, 62vh, 640px);
}
/* On an inner page the crest has nowhere to slide to, so it settles back as a
   watermark and lets the copy sit over it. */
.c247-hero__shieldart.is-ghost { opacity: .16; transition: opacity .9s ease; }

/* ---- Tick lists inside a white panel on a dark section ----
   .c247-dark .c247-ticks li is pale blue for navy backgrounds. The tabs panel
   is white, so inside it the ticks were near invisible. */
.c247-dark .c247-tabpanel .c247-ticks li,
.c247-dark .c247-tabpanel p { color: #2c3440; }
.c247-dark .c247-tabpanel { color: #2c3440; }

/* ---- CTA band ----
   The two buttons used to share the side column with flex:1 1 0. Their labels
   needed more room than the column gave, so BOTH wrapped onto two lines inside
   squashed boxes. Stack them instead, matched width, capped so they do not run
   the whole column, and let each label sit on one line.

   The section also ended on a bare strip of page white between the navy box and
   the navy footer, which read as a gap rather than a margin. It carries the
   same tint as the other light bands now, so a page ends dark -> tint -> footer
   with no orphan sliver. */
.c247-cta { background: var(--tint); padding-top: var(--pad); }
.c247-cta-side { flex-direction: column; align-items: stretch; gap: 14px; width: 100%; max-width: 320px; margin-left: auto; }
.c247-cta-side > .c247-btn { width: 100%; min-width: 0; justify-content: center; text-align: center; white-space: nowrap; }
@media (max-width: 1024px) {
  .c247-cta-side { margin-left: 0; max-width: 360px; }
}
@media (max-width: 640px) {
  .c247-cta-side { max-width: none; }
  .c247-cta-side > .c247-btn { white-space: normal; }
}

/* ---- Where the crest settles ----
   --crest-x is the fraction across the hero that the crest slides to. It is
   declared in CSS so the script never needs to know page names.

   DEFAULT = the home layout Dom signed off: crest left, copy right and centred.
   Every page that opens on the full 'home' hero inherits it.
   MIRROR  = .hero-crest-right, set by hero_dark(['crest' => 'right']): crest
   right, copy left and left aligned, for the event pages. Same geometry; only
   the side and the text alignment change.
   Phones are untouched either way: the crest builds full width and fades. */
.c247-hero--home { --crest-x: .28; }
.hero-crest-right .c247-hero--home { --crest-x: .72; }

@media (min-width: 1025px) {
  .c247-hero--home .c247-hero__copy {
    width: 56%; max-width: 680px; margin-left: auto; margin-right: 0;
    text-align: center; align-items: center;
  }
  .c247-hero--home .c247-hero__copy .c247-actions { justify-content: center; }

  .hero-crest-right .c247-hero--home .c247-hero__copy {
    margin-left: 0; margin-right: auto;
    text-align: left; align-items: flex-start;
  }
  .hero-crest-right .c247-hero--home .c247-hero__copy .c247-actions { justify-content: flex-start; }
}

/* ---- Footer crest (Dom, 2026-11-10) ----
   It was taken off the desktop footer while it was the wrong size - a tall
   portrait mark at the inherited 54px height read as a stamp. It is back, at a
   proper size, beside the blurb rather than above it: the brand cell is wide
   enough for both once the blurb is one sentence, which is what frees the
   space. Below 641px the footer is the stacked, centred phone layout, which
   Dom asked me not to touch, so none of this applies there. */
@media (min-width: 641px) {
  .c247f__brand{
    display:flex;align-items:flex-start;
    gap:clamp(18px,2.2vw,32px);
  }
  .c247f__logo{
    display:block;flex:none;margin-bottom:0;
    width:clamp(84px,8.5vw,118px);
  }
  .c247f__logo img{width:100%;height:auto}
  .c247f__blurb{max-width:none}
}

/* ---- Pages added 2026-11-10: three layout helpers ----
   Everything else on these pages is a Cyber247 component as-is. These three
   shapes have no 247 equivalent, so they are built on the same tokens, the same
   card treatment and the same breakpoints rather than invented from scratch. */

/* Two equal cards side by side. .c247-card on its own stacks vertically
   (.c247-card + .c247-card { margin-top }), which is right inside a column but
   wrong when the two are a pair. */
.c100-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch;margin-top:28px}
.c100-duo > .c247-card{height:100%;margin-top:0}
@media (max-width:860px){.c100-duo{grid-template-columns:1fr}}

/* Three captioned photographs. Same frame as image_frame() elsewhere. */
.c100-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:30px}
.c100-gallery figure{margin:0}
.c100-gallery figcaption{margin-top:14px;font-size:15px;line-height:1.55;color:var(--muted)}
@media (max-width:980px){.c100-gallery{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.c100-gallery{grid-template-columns:1fr}}

/* ---- Sponsorship comparison matrix ----
   A real table: 16 rows against 4 tiers. On a phone a 5-column table is either
   a sideways scroll or unreadable, so below 860px each tier becomes its own
   stacked card and every cell carries its tier name from data-tier. Nothing is
   hidden at any width. Body type stays at the 247 size; it never shrinks. */
.c100-matrix{margin-top:30px;background:var(--white);border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 50px rgba(22,58,91,.08);overflow:hidden}
.c100-matrix table{width:100%;border-collapse:collapse;font-size:15.5px;color:#2c3440}
.c100-matrix caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.c100-matrix thead th{background:linear-gradient(100deg,var(--navy-ink) 0%,#10263f 45%,var(--navy) 100%);color:var(--white);text-align:center;padding:16px 14px;vertical-align:middle}
.c100-matrix thead th:first-child{text-align:left}
.c100-matrix__tier{display:block;font-family:var(--font-h);font-weight:800;font-size:17px;letter-spacing:.01em}
.c100-matrix__sub{display:block;margin-top:3px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#9fd9bd}
.c100-matrix tbody th{text-align:left;font-weight:600;color:var(--navy);padding:14px 16px;width:38%;line-height:1.45}
.c100-matrix tbody td{text-align:center;padding:14px 12px;border-left:1px solid var(--line)}
.c100-matrix tbody tr + tr th,.c100-matrix tbody tr + tr td{border-top:1px solid var(--line)}
.c100-matrix tbody tr:nth-child(odd){background:var(--tint)}
.c100-matrix__yes{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--green-ink)}
.c100-matrix__yes svg{width:17px;height:17px;flex:none}
.c100-matrix__no{color:var(--muted)}
@media (max-width:860px){
  .c100-matrix{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
  .c100-matrix table,.c100-matrix tbody,.c100-matrix tr,.c100-matrix th,.c100-matrix td{display:block;width:auto}
  .c100-matrix thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
  .c100-matrix tbody tr{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:4px 0;margin-bottom:16px;box-shadow:0 14px 34px rgba(22,58,91,.07)}
  .c100-matrix tbody tr:nth-child(odd){background:var(--white)}
  .c100-matrix tbody th{width:auto;padding:16px 18px 10px;font-size:15.5px}
  .c100-matrix tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:16px;text-align:right;padding:9px 18px;border-left:0;border-top:1px solid var(--line)}
  .c100-matrix tbody tr + tr th{border-top:0}
  .c100-matrix tbody td::before{content:attr(data-tier);font-family:var(--font-h);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:left}
  .c100-matrix__yes{justify-content:flex-end}
}

/* ---- Dubai 2026 archive index ----
   The list of ported pages on /previous-events/dubai-2026/. Each row is a real
   link the size of a card, not a line of body text, so it is easy to hit on a
   phone and reads as a directory rather than a paragraph of links. */
.c100-arch__h{font-family:var(--font-h);font-size:clamp(18px,1.8vw,21px);font-weight:800;color:var(--navy);margin:38px 0 16px}
.c100-arch{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.c100-arch a{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px 18px;text-decoration:none;box-shadow:0 12px 30px rgba(22,58,91,.06);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.c100-arch a:hover,.c100-arch a:focus-visible{border-color:var(--green);box-shadow:0 18px 40px rgba(54,164,112,.16);transform:translateY(-2px)}
.c100-arch .c247-icon{flex:none}
.c100-arch strong{display:block;font-family:var(--font-h);font-size:16px;color:var(--navy)}
.c100-arch em{display:block;margin-top:3px;font-style:normal;font-size:14px;line-height:1.45;color:var(--muted)}
@media (max-width:720px){.c100-arch{grid-template-columns:1fr}}

/* "Your invitation, courtesy of" plus the sponsor's logo, on an archived
   sponsor page. The logos are supplied on white, so each sits on a white chip
   rather than straight on the page. */
.c100-guestlogo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px}
.c100-guestlogo span{font-family:var(--font-h);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.c100-guestlogo img{height:40px;width:auto;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:8px 14px}

/* ---- Long dropdowns (Previous Events) ----
   Dom asked for every ported page to sit under Previous Events > Dubai 2026,
   which is 13 items. In one column that is 1155px of menu in a 900px window:
   the last few sponsors hung below the fold with no way to reach them.

   Nine or more children lay out in two columns, and every dropdown is capped to
   the space actually below the bar and scrolls if it still does not fit, so a
   longer menu can never run off-screen again. */
.c247h__drop{
  max-height:calc(100vh - var(--h) - 28px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.c247h__drop > ul:has(> :nth-child(9)){
  display:grid;
  grid-template-columns:repeat(2,minmax(248px,1fr));
  gap:0 6px;
  align-content:start;
}
/* The first child is the section itself (Dubai 2026), so it spans the width and
   reads as the heading of the list rather than as one sponsor among twelve. */
.c247h__drop > ul:has(> :nth-child(9)) > li:first-child{
  grid-column:1 / -1;
  border-bottom:1px solid rgba(255,255,255,.12);
  margin-bottom:6px;
  padding-bottom:4px;
}
@media (max-width:1180px){
  .c247h__drop > ul:has(> :nth-child(9)){grid-template-columns:1fr}
}

/* Deep-link target for a tab (/2027-events/#gisec). Pulled up by the height of
   the fixed header so the browser does not park the heading underneath it. */
.c247-anchor{display:block;position:relative;top:calc(-1 * (var(--hdr) + 20px));height:0;width:0;overflow:hidden}

/* ---- Linked image cards ----
   The four cards on /2027-events/ are the way into the four event pages, so
   each one ends with a link. The body becomes a flex column and the link takes
   the leftover space above it, which keeps all four links on the same line
   whatever length the tick lists are. */
.c247-icard__body{display:flex;flex-direction:column}
.c247-icard__more{margin:0;padding-top:18px;margin-top:auto}
.c247-icard__more a{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-h);font-weight:700;font-size:15px;line-height:1.3;color:var(--primary);text-decoration:none}
.c247-icard__more a:hover,.c247-icard__more a:focus-visible{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.c247-icard__more svg{width:16px;height:16px;flex:none;transition:transform .2s ease}
.c247-icard:hover .c247-icard__more svg{transform:translateX(3px)}

/* ---- benefit_grid below desktop, for every page, not just home ----
   The six-card fixes further up were written when only the home page had a
   six-card grid, so they were scoped to .page-home. The GISEC event page has
   one too, and on a phone card four kept its span-2: in a one-column grid that
   forces a second implicit column, so all six cards came out at half width.
   Scope by the shape of the grid instead of by the page, and the next six-card
   grid someone adds is right without anyone remembering this. */
@media (max-width: 1024px) {
  .c247-benefits--3x2:has(> :nth-child(5)) .c247-benefit:nth-child(5) { grid-column: auto; }
}
@media (min-width: 681px) and (max-width: 1024px) {
  .c247-benefits:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c247-benefits:has(> :nth-child(5)) .c247-benefit { grid-column: auto; }
  /* Three cards went 2 + 1 at this width, which is the orphan card Dom keeps
     pulling me up on. Three cards stack instead. */
  .c247-benefits--3x2:not(:has(> :nth-child(4))) { grid-template-columns: 1fr; }
  .c247-benefits--3x2:not(:has(> :nth-child(4))) .c247-benefit { grid-column: auto; }
}
@media (max-width: 680px) {
  .c247-benefits--3x2,
  .c247-benefits:has(> :nth-child(5)) { grid-template-columns: 1fr; }
  .c247-benefits--3x2 .c247-benefit,
  .c247-benefits:has(> :nth-child(5)) .c247-benefit { grid-column: auto; }
}

/* The six-card rule further up gives card four a two-track span so six cards
   run 3 + 3 on a desktop. Below the desktop grid there is only one or two
   tracks, and that span then invents an extra column and halves every card.
   Written with the same specificity as the rule it answers, and after it, so
   it wins; a plain .c247-benefit selector lost to the :has() in that one. */
@media (max-width: 1024px) {
  .c247-benefits--3x2:has(> :nth-child(6)) .c247-benefit:nth-child(4) { grid-column: auto; }
}

/* ---- A sponsor we hold no mark for ----
   The Dubai 2026 wall is sixteen sponsors and we have fifteen marks. Setting
   the sixteenth name keeps the grid square and keeps the sponsor on the wall,
   which is better than dropping them or leaving a hole. Sized to sit level
   with the 44px marks beside it. */
.c247-logos li.is-word{display:grid;place-items:center;min-height:44px}
.c247-logos li.is-word span{
  font-family:var(--font-h);font-weight:800;font-size:17px;line-height:1.2;
  letter-spacing:.01em;color:var(--navy);text-align:center;
}

/* ---- Hero buttons on the mirrored (crest right) hero ----
   .c247-hero__grid--center centres the actions row with margin-inline:auto,
   which is right when the copy is centred, as it is on the home hero. The
   mirrored hero left-aligns its copy, so the buttons were sitting about 60px
   in from the headline above them. Pin them to the same left edge. */
@media (min-width: 1025px) {
  .hero-crest-right .c247-hero--home .c247-hero__copy .c247-actions {
    margin-inline: 0 auto;
  }
}

/* ---- A picture that carries its own caption ----
   .c247-frame--tall is portrait and crops with object-fit:cover, which sliced
   the ends off the branded venue placeholders: they have "venue photography to
   follow" set into the image. This keeps the picture's own 1472x832 ratio so
   nothing is cut. */
.c247-frame--wide img { aspect-ratio: 1472 / 832; }

/* ---- Footer crest on a phone ----
   Dom, 2026-11-10: it should fill half the width it sits in. It is a 409x610
   portrait lockup, so it is sized on width and the height follows; the old
   fixed 96px height made it a stamp. Desktop still hides it. */
@media (max-width: 640px) {
  .c247f__logo { display: block; width: 50%; margin: 0 auto 18px; }
  .c247f__logo img { width: 100%; height: auto; margin: 0; }
}

/* ---- The sticky bar goes solid once you scroll ----
   .is-home makes the bar 75% transparent so the hero reads through it. That is
   right at the top of the page and wrong everywhere below it: scrolled down,
   the bar sat over white sections with the page showing through. Same
   behaviour as the 247 site: transparent over the hero, solid navy after. */
.c247h.is-home.is-scrolled .c247h__bar{
  background:linear-gradient(100deg,var(--navy-ink) 0%,#10263f 45%,var(--navy) 100%);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* ---- benefit cards on a light section ----
   .c247-benefit is a glass card: a 5% white fill, a 12% white border and pale
   blue text. That is built for the navy sections, and on white or tint it is
   an invisible card with grey text floating on the page. Sponsorship, Why
   Sponsor, Contact and the 2026 invitation all use it on light. Give it the
   same treatment as every other light-section card instead. */
section:not(.c247-dark) .c247-benefit{
  background:var(--white);
  border-color:var(--line);
  box-shadow:0 14px 34px rgba(22,58,91,.07);
}
section:not(.c247-dark) .c247-benefit:hover{
  border-color:var(--green);
  box-shadow:0 20px 44px rgba(54,164,112,.16);
  transform:translateY(-3px);
}
section:not(.c247-dark) .c247-benefit .c247-icon{background:rgba(54,164,112,.12)}
section:not(.c247-dark) .c247-benefit .c247-icon svg{color:var(--green)}
section:not(.c247-dark) .c247-benefit h3{color:var(--navy)}
section:not(.c247-dark) .c247-benefit p{color:var(--muted)}

/* .c247-footnote is pale blue for the navy sections. On a white or tint
   section that is grey-on-grey: 1.7:1, under half the minimum. Same split as
   the benefit cards. */
section:not(.c247-dark) .c247-footnote{color:var(--muted)}

/* ---- "Dubai 2026" at the foot of the 2027 Events menu ----
   Seven top-level items plus the Enquire button ran off the right of a laptop,
   so the one page about an event that has already happened moved in here. It
   has to read as a different kind of thing from the four events still to come,
   or it looks like a fifth one to sponsor: ruled off, on its own panel, with a
   grey mark instead of a green one and quieter type. */
.c247h__drop li.is-past{
  margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.16);
}
.c247h__drop li.is-past > a{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
}
.c247h__drop li.is-past > a:hover,
.c247h__drop li.is-past > a:focus-visible{background:rgba(255,255,255,.1)}
.c247h__drop li.is-past .c247h__dicon{background:rgba(169,189,212,.14)}
.c247h__drop li.is-past .c247h__dicon svg{color:#a9bdd4}
.c247h__drop li.is-past .c247h__dtext strong{color:#c6d7ea;font-weight:600}
.c247h__drop li.is-past .c247h__dtext small{color:#8ba3bd}

/* Same treatment in the phone menu, which shows the label only. */
.c247h__msub li.is-past{
  margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.16);
}
.c247h__msub li.is-past > a{background:rgba(255,255,255,.045);border-radius:12px}
.c247h__msub li.is-past .c247h__dicon{background:rgba(169,189,212,.14)}
.c247h__msub li.is-past .c247h__dicon svg{color:#a9bdd4}
.c247h__msub li.is-past .c247h__dtext strong{color:#c6d7ea;font-weight:600}

/* ---- The bar between the burger and the full-width layout ----
   The desktop nav runs from 1025px up, but it was only laid out for 1280px:
   between the two the Enquire button was pushed past the right edge and
   clipped. Tighten the gaps rather than drop items or move the burger up. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .c247h__inner{gap:16px;padding:0 20px}
  .c247h .c247h__link{padding:0 11px;font-size:15.5px;gap:7px}
  .c247h__link::after{left:11px;right:11px}
  .c247h__item + .c247h__item::before{margin:0 2px;height:18px}
  .c247h__logo img{height:48px}
  .c247h.is-scrolled .c247h__logo img{height:42px}
  .c247h__nicon{width:17px;height:17px}
  .c247h__caret{width:20px;height:20px}
}