/* ============================================================
   SudoCyber — page section components
   Implements the new page design (hero, challenge, solution,
   alternating deep-dive features, payoff, trust) using the
   existing brand palette. Loads on top of merge.css.
   ============================================================ */
:root{
  --sudo-red:#B91202;
  --sudo-red2:#d20007;
  --sudo-black:#141416;
  --sudo-panel:#1A1A1C;
  --sudo-panel2:#232327;
  --sudo-line:#33333A;
  --sudo-grey:#BEBEBE;
  --sudo-greyl:#E3E3E3;
  --sudo-white:#FFFFFF;
  --sudo-mut:#8A8A90;
}
.sudo{font-family:'Poppins',sans-serif;}
.sudo-wrap{max-width:1320px;margin:0 auto;padding:0 15px;}
.sudo-section{padding:64px 0;}

/* ---- section bands (differentiate sections as you scroll) ----
   Specific section types get a black background; the rest keep the plain page
   background. Assigning these by section type (rather than by position) keeps
   the rhythm identical on every page no matter how many sections precede them,
   so e.g. "The Payoff" is always a band and the "Our Solution" + feature list
   above it always stay plain. The sudo colour tokens are re-asserted to their
   dark-theme values locally so text stays light on the black bands in BOTH
   light and dark mode (this wins because the tokens are defined on the section
   itself, nearest to its own content). */
.sudo-challenge,
.sudo-contact,
.sudo-events,
.sudo-payoff{
  background:#000;
  --sudo-white:#FFFFFF;
  --sudo-grey:#BEBEBE;
  --sudo-greyl:#E3E3E3;
  --sudo-mut:#8A8A90;
  --sudo-panel:#1A1A1C;
  --sudo-panel2:#232327;
  --sudo-line:#33333A;
}
.sudo-eyebrow{color:var(--sudo-red2);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin:0 0 12px;}
.sudo h1,.sudo h2,.sudo h3{color:var(--sudo-white);font-weight:700;line-height:1.1;margin:0 0 16px;}
.sudo h2{font-size:clamp(24px,3.4vw,34px);}
.sudo p{color:var(--sudo-grey);line-height:1.65;margin:0 0 14px;font-size:16px;}

/* ---- buttons ---- */
.sudo-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}
.sudo-btn{display:inline-block;background:var(--sudo-red2);color:#fff;font-weight:600;font-size:15px;
  padding:13px 26px;border-radius:6px;text-decoration:none;border:1px solid var(--sudo-red2);transition:.2s;}
.sudo-btn:hover{background:var(--sudo-red);border-color:var(--sudo-red);color:#fff;}
.sudo-btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;}
.sudo-btn--ghost:hover{background:rgba(255,255,255,.08);border-color:#fff;color:#fff;}

/* ---- hero ---- */
.sudo-hero{position:relative;overflow:hidden;background:var(--sudo-panel);}
.sudo-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.sudo-hero__bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,10,.82) 0%,rgba(8,8,10,.55) 60%,rgba(8,8,10,.35) 100%);}
.sudo-hero--noimg{background:radial-gradient(120% 120% at 100% 0%, #2a0d09 0%, #141416 55%);}
.sudo-hero__inner{position:relative;padding:96px 15px 88px;}
.sudo-hero h1{font-size:clamp(30px,5vw,52px);max-width:14ch;}
.sudo-hero .sudo-sub{color:var(--sudo-greyl);font-size:clamp(16px,1.7vw,19px);max-width:60ch;}
.sudo-hero__tag{position:absolute;right:24px;bottom:18px;color:var(--sudo-mut);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}

/* ---- challenge ---- */
.sudo-challenge .sudo-wrap{position:relative;padding-left:43px;}
.sudo-challenge .sudo-wrap:before{content:"";position:absolute;left:15px;top:2px;bottom:2px;width:4px;background:var(--sudo-red2);border-radius:2px;}
.sudo-challenge p:last-child{color:var(--sudo-grey);margin-bottom:0;}
.sudo-challenge p:first-of-type{color:var(--sudo-greyl);}

/* ---- solution ---- */
.sudo-solution .sudo-lead{color:var(--sudo-grey);font-size:18px;max-width:74ch;}

/* ---- features (alternating deep-dives) ---- */
.sudo-feature{display:flex;gap:46px;align-items:center;padding:34px 0;border-top:1px solid var(--sudo-line);}
.sudo-feature:first-child{border-top:0;}
.sudo-feature.reverse{flex-direction:row-reverse;}
.sudo-feature__media{flex:0 0 40%;max-width:40%;}
.sudo-feature__media img{width:100%;height:280px;object-fit:cover;border-radius:12px;border:1px solid var(--sudo-line);display:block;}
.sudo-spot{height:280px;border-radius:12px;border:1px solid var(--sudo-line);position:relative;overflow:hidden;
  background:var(--sudo-panel2);display:flex;align-items:center;justify-content:center;}
.sudo-spot:before{content:"";position:absolute;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,#3a0f0a 0%,rgba(58,15,10,0) 70%);right:-40px;bottom:-40px;}
.sudo-spot__num{position:absolute;top:14px;left:18px;color:var(--sudo-mut);font-weight:700;font-size:16px;}
.sudo-spot__kw{position:relative;color:#fff;font-weight:700;letter-spacing:1px;font-size:30px;text-align:center;padding:0 14px;}
.sudo-feature__body{flex:1;}
.sudo-feature__num{color:var(--sudo-red2);font-weight:700;font-size:15px;margin-right:10px;}
.sudo-feature__body h3{display:inline;font-size:21px;}
.sudo-feature__body p{margin-top:14px;}
.sudo-checks{list-style:none;margin:14px 0 0;padding:0;}
.sudo-checks li{position:relative;padding-left:26px;color:var(--sudo-greyl);font-weight:600;font-size:14px;margin-bottom:8px;}
.sudo-checks li:before{content:"\2713";position:absolute;left:0;top:0;color:var(--sudo-red2);font-weight:700;}

/* ---- payoff / outcomes ---- */
.sudo-payoff .sudo-lead{color:var(--sudo-grey);font-size:17px;max-width:74ch;margin-bottom:26px;}
.sudo-outcomes{list-style:none;margin:0;padding:0;display:grid;gap:20px;}
.sudo-outcomes li{position:relative;padding-left:34px;}
.sudo-outcomes li:before{content:"\2713";position:absolute;left:0;top:2px;color:var(--sudo-red2);font-weight:700;font-size:18px;}
.sudo-outcomes strong{display:block;color:#fff;font-size:17px;margin-bottom:4px;}
.sudo-outcomes p{margin:0;font-size:15px;}

/* ---- upcoming events (2x2 card grid) ---- */
.sudo-events__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:6px;}
.sudo-event-card{display:flex;flex-direction:column;background:var(--sudo-panel);border:1px solid var(--sudo-line);
  border-radius:12px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;}
.sudo-event-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.28);}
.sudo-event-card__media img{display:block;width:100%;height:150px;object-fit:cover;}
.sudo-event-card__body{padding:16px 18px;}
.sudo-event-card__body h3{font-size:18px;line-height:1.25;margin:0 0 6px;color:var(--sudo-white);}
.sudo-event-card__addr{color:var(--sudo-grey);font-size:14px;line-height:1.45;margin:0 0 8px;}
.sudo-event-card__date{color:var(--sudo-red2);font-weight:700;font-size:14px;letter-spacing:.02em;margin:0;}
@media(max-width:640px){.sudo-events__grid{grid-template-columns:1fr;}}

/* ---- trust strip ---- */
.sudo-trust{background:var(--sudo-panel);border:1px solid var(--sudo-line);border-radius:12px;padding:26px 24px;text-align:center;}
.sudo-trust__line{color:var(--sudo-greyl);font-weight:700;font-size:16px;margin:0 0 18px;}
.sudo-trust__logos{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;}
.sudo-trust__logos .chip{background:#000;border-radius:8px;padding:12px 16px;display:flex;align-items:center;justify-content:center;height:64px;width:130px;}
.sudo-trust__logos img{max-height:40px;max-width:100%;object-fit:contain;}

/* ---- responsive ---- */
@media (max-width:860px){
  .sudo-feature,.sudo-feature.reverse{flex-direction:column;gap:22px;}
  .sudo-feature__media{flex:0 0 100%;max-width:100%;width:100%;}
  .sudo-feature__media img,.sudo-spot{height:220px;}
  .sudo-section{padding:46px 0;}
  .sudo-hero__inner{padding:70px 15px 60px;}
}

/* ---- spacer to clear the fixed header ---- */
.sudo-top-spacer{height:80px;}

/* ---- FAQ accordion (GEO-friendly, no JS) ---- */
.sudo-faq__list{margin-top:18px;border-top:1px solid var(--sudo-line);}
.sudo-faq__item{border-bottom:1px solid var(--sudo-line);padding:6px 0;}
.sudo-faq__item summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative;
  color:var(--sudo-white);font-weight:600;font-size:17px;}
.sudo-faq__item summary::-webkit-details-marker{display:none;}
.sudo-faq__item summary:after{content:"+";position:absolute;right:6px;top:14px;color:var(--sudo-red2);font-size:22px;font-weight:700;}
.sudo-faq__item[open] summary:after{content:"\2212";}
.sudo-faq__item p{margin:0 0 16px;color:var(--sudo-grey);font-size:15px;max-width:none;}

/* ---- contact enquiry form ---- */
.sudo-contact__grid{display:flex;gap:46px;flex-wrap:wrap;}
.sudo-contact__intro{flex:1 1 40%;min-width:280px;}
.sudo-contact__form{flex:1 1 50%;min-width:300px;}
.sudo-contact__details{list-style:none;margin:18px 0 0;padding:0;}
.sudo-contact__details li{color:var(--sudo-grey);margin-bottom:10px;font-size:15px;}
.sudo-contact__details strong{display:inline-block;width:62px;color:var(--sudo-greyl);}
.sudo-contact__details a{color:var(--sudo-red2);text-decoration:none;}
.sudo-field{margin-bottom:14px;}
.sudo-field input,.sudo-field textarea{width:100%;background:var(--sudo-panel);border:1px solid var(--sudo-line);
  border-radius:8px;padding:14px 16px;color:#fff;font-family:'Poppins',sans-serif;font-size:15px;}
.sudo-field input::placeholder,.sudo-field textarea::placeholder{color:var(--sudo-mut);}
.sudo-field input:focus,.sudo-field textarea:focus{outline:none;border-color:var(--sudo-red2);}
.sudo-contact__response{margin-top:14px;color:var(--sudo-greyl);font-size:14px;}
@media (max-width:860px){ .sudo-contact__grid{flex-direction:column;gap:24px;} }

/* ---- location map ---- */
.sudo-map__frame{margin-top:10px;border-radius:12px;overflow:hidden;border:1px solid var(--sudo-line);}
.sudo-map__frame iframe{display:block;width:100%;height:380px;border:0;}
.sudo-map__link{margin:12px 0 0;font-size:14px;}
.sudo-map__link a{color:var(--sudo-red2);text-decoration:none;}
@media (max-width:600px){ .sudo-map__frame iframe{height:300px;} }

/* ---- static legal documents ---- */
.sudo-doc__title{color:var(--sudo-white);font-weight:700;font-size:clamp(26px,3.4vw,36px);margin-bottom:24px;}
.sudo-doc__body{color:var(--sudo-grey);line-height:1.7;}
.sudo-doc__body strong{display:block;color:var(--sudo-white);font-size:18px;margin:22px 0 6px;}
.sudo-doc__body p{color:var(--sudo-grey);margin:0 0 14px;}
.sudo-doc__body a{color:var(--sudo-red2);}
.sudo-doc__body h1,.sudo-doc__body h2,.sudo-doc__body h3,.sudo-doc__body h4{color:var(--sudo-white);margin:22px 0 10px;}

/* ---- client logo marquee (home) ----
   Overrides the generic theme .marquee rules (merge.css) so every logo sits in
   a uniform fixed-width cell: equal cells give even spacing automatically and
   normalise the very different logo aspect ratios. The set is rendered twice in
   the component, so a translateX(-50%) keyframe loops seamlessly. */
.sudo-client-logos{padding:26px 0;overflow:hidden;}
.sudo-client-logos__title{text-align:center;color:#fff;font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;margin:0 0 20px;opacity:.85;}
.sudo-client-logos .marquee{width:100%;overflow:hidden;}
.sudo-client-logos .marquee-track{
  width:max-content;display:flex;align-items:center;justify-content:flex-start;
  animation:sudo-logo-scroll 40s linear infinite;
}
.sudo-client-logos .marquee:hover .marquee-track{animation-play-state:paused;}
.sudo-client-logos .marquee-item{
  flex:0 0 auto;width:180px;height:80px;
  display:flex;align-items:center;justify-content:center;
}
.sudo-client-logos .marquee-item img{
  max-height:50px;max-width:130px;width:auto;height:auto;object-fit:contain;
}
@keyframes sudo-logo-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
/* soft edge fade into the band colour */
.sudo-client-logos .marquee::before,
.sudo-client-logos .marquee::after{width:10%;}
.sudo-client-logos .marquee::before{background:linear-gradient(to right,#141416,rgba(20,20,22,0));}
.sudo-client-logos .marquee::after{background:linear-gradient(to right,#141416,rgba(20,20,22,0));transform:rotateZ(180deg);}
@media (max-width:768px){
  .sudo-client-logos .marquee-item{width:128px;height:64px;}
  .sudo-client-logos .marquee-item img{max-height:38px;max-width:92px;}
  .sudo-client-logos .marquee-track{animation-duration:26s;}
}
/* Light variant: a white band for full-colour vendor logos (e.g. the test
   centre's certification providers). Dark title, white edge-fades, gentler
   scroll because there are many more logos. */
.sudo-client-logos--light .sudo-client-logos__title{color:#141416;opacity:.65;}
.sudo-client-logos--light .marquee::before{background:linear-gradient(to right,#ffffff,rgba(255,255,255,0));}
.sudo-client-logos--light .marquee::after{background:linear-gradient(to right,#ffffff,rgba(255,255,255,0));}
.sudo-client-logos--light .marquee-track{animation-duration:120s;}
/* White/light logos (made for dark backgrounds) would vanish on the white band,
   so render them as a dark mark instead. Flagged per-logo by the loader. */
.sudo-client-logos--light .marquee-item.is-light img{filter:brightness(0);opacity:.78;}
@media (max-width:768px){
  .sudo-client-logos--light .marquee-track{animation-duration:80s;}
}
@media (prefers-reduced-motion: reduce){
  .sudo-client-logos .marquee-track{animation:none;}
}