/* ==========================================================================
   KOVAIBUILD — Main Stylesheet
   --------------------------------------------------------------------------
   Table of contents
   01. Design tokens (colours, fonts, images, spacing)
   02. Reset & base
   03. Layout helpers
   04. Buttons
   05. Header / navigation / dropdown
   06. Mobile navigation
   07. Hero
   08. Trust section
   09. About
   10. Services
   11. Why choose us
   12. Process
   13. CTA band
   14. Contact (cards, form, map)
   15. Footer
   16. Floating WhatsApp & back-to-top
   17. Scroll reveal animations
   18. Responsive breakpoints
   19. Reduced motion & print
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   --------------------------------------------------------------------------
   >> CHANGE COLOURS HERE
   >> CHANGE BACKGROUND IMAGE URLs HERE (--ssc-img-*)
   ========================================================================== */
:root {
  /* --- Brand colours --- */
  --ssc-ink:          #111114;   /* deep charcoal / near-black */
  --ssc-ink-soft:     #1b1c21;
  --ssc-ink-line:     #2a2c33;
  --ssc-white:        #ffffff;
  --ssc-paper:        #f7f7f5;   /* off-white page background */
  --ssc-paper-2:      #eeeeec;
  --ssc-silver:       #9aa0a8;   /* metallic grey */
  --ssc-silver-light: #c9ced4;
  /* Brand accent, taken from the KovaiBuild logo.
     The --ssc-gold-* names are kept as aliases so every existing rule keeps
     working; change the three values below to retheme the whole site. */
  --ssc-teal:         #007f88;   /* logo teal            */
  --ssc-teal-light:   #20bec9;   /* lifted, for dark bg  */
  --ssc-teal-dark:    #04606a;   /* for light bg text    */
  --ssc-navy:         #002a54;   /* logo navy            */

  --ssc-gold:         var(--ssc-teal);
  --ssc-gold-light:   var(--ssc-teal-light);
  --ssc-gold-dark:    var(--ssc-teal-dark);
  --ssc-whatsapp:     #25d366;

  /* --- Text --- */
  --ssc-text:         #1a1b1f;
  --ssc-text-muted:   #5c6168;
  --ssc-text-light:   rgba(255,255,255,.78);

  /* --- Lines & shadows --- */
  --ssc-border:       #e3e3df;
  --ssc-border-dark:  rgba(255,255,255,.12);
  --ssc-shadow-sm:    0 2px 10px rgba(17,17,20,.06);
  --ssc-shadow-md:    0 14px 34px rgba(17,17,20,.09);
  --ssc-shadow-lg:    0 28px 70px rgba(17,17,20,.16);

  /* --- Typography (change the font family here and in index.html <link>) --- */
  --ssc-font: "Manrope", "Plus Jakarta Sans", "Inter", system-ui, -apple-system,
              "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Hero display face — condensed, bold, uppercase */
  --ssc-font-display: "Oswald", "Manrope", "Arial Narrow", system-ui, sans-serif;
  /* Signature / handwritten accent above each hero headline */
  --ssc-font-script: "Great Vibes", "Segoe Script", "Brush Script MT", cursive;

  /* --- Layout --- */
  --ssc-container:    1220px;
  --ssc-gutter:       clamp(18px, 5vw, 48px);
  --ssc-header-h:     86px;
  --ssc-radius:       14px;
  --ssc-radius-lg:    22px;
  --ssc-section-y:    clamp(64px, 8vw, 118px);

  /* --- Motion --- */
  --ssc-ease:         cubic-bezier(.22,.61,.36,1);
  --ssc-t-fast:       .22s var(--ssc-ease);
  --ssc-t:            .38s var(--ssc-ease);

  /* --- BACKGROUND IMAGES --------------------------------------------------
     Home-page band backgrounds. Both are used behind a heavy dark overlay, so
     they read as texture rather than as a photograph of a specific job.
     >> CHANGE THE HOME PAGE'S BAND BACKGROUNDS HERE.
     Project files only — no external or stock image URLs anywhere on the site.
     ---------------------------------------------------------------------- */
  --ssc-img-why:  url("../assets/hero/hero-02-civil-structure.webp");
  --ssc-img-cta:  url("../assets/hero/hero-10-interior.webp");
}


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ssc-header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--ssc-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ssc-text);
  background: var(--ssc-paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.ssc-no-scroll { overflow: hidden; }

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

/* Safety net: a `display` declaration further down must never out-rank the
   hidden attribute and leave an invisible element on top of the page. */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--ssc-ink);
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; transition: color var(--ssc-t-fast); }

button { font: inherit; cursor: pointer; }

/* Inline SVG icons default to stroked line icons */
svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Solid icons (WhatsApp) opt out of stroking */
.ssc-icon-fill { fill: currentColor; stroke: none; }

/* Focus visibility (accessibility) */
:focus-visible {
  outline: 3px solid var(--ssc-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.ssc-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ssc-ink); color: #fff;
  padding: 12px 20px; border-radius: 0 0 8px 0; font-weight: 600;
}
.ssc-skip-link:focus { left: 0; }

::selection { background: var(--ssc-gold); color: #fff; }


/* ==========================================================================
   03. LAYOUT HELPERS
   ========================================================================== */
.ssc-container {
  width: 100%;
  max-width: var(--ssc-container);
  margin-inline: auto;
  padding-inline: var(--ssc-gutter);
}

section[id] { scroll-margin-top: calc(var(--ssc-header-h) + 12px); }
.ssc-service-card[id] { scroll-margin-top: calc(var(--ssc-header-h) + 40px); }

.ssc-section-head {
  max-width: 720px;
  margin-bottom: clamp(38px, 5vw, 66px);
}
.ssc-section-title {
  font-size: clamp(28px, 4vw, 46px);
  margin-bottom: 16px;
}
.ssc-section-text {
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--ssc-text-muted);
  max-width: 60ch;
}
.ssc-section-head--light .ssc-section-title { color: #fff; }
.ssc-section-head--light .ssc-section-text { color: var(--ssc-text-light); }

.ssc-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ssc-gold-dark);
  margin-bottom: 18px;
}
.ssc-section-head--light .ssc-eyebrow { color: var(--ssc-gold-light); }
.ssc-eyebrow-bar {
  width: 34px; height: 2px; flex: none;
  background: linear-gradient(90deg, var(--ssc-gold), transparent);
}

.ssc-text-gold {
  background: linear-gradient(100deg, var(--ssc-gold-light), var(--ssc-gold) 55%, #f2d79a);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}


/* ==========================================================================
   04. BUTTONS
   ========================================================================== */
.ssc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14.5px; font-weight: 700; letter-spacing: .01em;
  text-align: center;
  cursor: pointer;
  transition: background var(--ssc-t-fast), color var(--ssc-t-fast),
              border-color var(--ssc-t-fast), transform var(--ssc-t-fast),
              box-shadow var(--ssc-t-fast);
}
.ssc-btn svg { width: 18px; height: 18px; }
.ssc-btn__arrow { transition: transform var(--ssc-t-fast); }
.ssc-btn:hover .ssc-btn__arrow { transform: translateX(4px); }

.ssc-btn--sm { padding: 10px 20px; min-height: 42px; font-size: 13.5px; }
.ssc-btn--lg { padding: 16px 30px; min-height: 54px; font-size: 15px; }
.ssc-btn--block { width: 100%; }

.ssc-btn--primary {
  background: linear-gradient(120deg, var(--ssc-gold-dark), var(--ssc-gold) 45%, var(--ssc-gold-light));
  color: #17130a;
  box-shadow: 0 10px 26px rgba(0,127,136,.28);
}
.ssc-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,127,136,.36); }

.ssc-btn--outline {
  border-color: rgba(255,255,255,.4);
  color: #fff;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ssc-btn--outline:hover { background: rgba(255,255,255,.14); border-color: #fff; transform: translateY(-2px); }

.ssc-btn--outline-dark { border-color: var(--ssc-border); color: var(--ssc-ink); background: #fff; }
.ssc-btn--outline-dark:hover { border-color: var(--ssc-ink); }

/* Ghost = subtle outlined button for use on dark panels (mobile drawer) */
.ssc-btn--ghost {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.ssc-btn--ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.45); }

.ssc-btn--dark { background: var(--ssc-ink); color: #fff; }
.ssc-btn--dark:hover { background: #000; transform: translateY(-2px); box-shadow: var(--ssc-shadow-md); }

.ssc-btn--whatsapp { background: var(--ssc-whatsapp); color: #06301a; }
.ssc-btn--whatsapp:hover { background: #1fbb59; transform: translateY(-2px); }

.ssc-btn--link {
  padding-inline: 4px; min-height: 46px;
  color: var(--ssc-ink); border-radius: 0;
  border-bottom: 2px solid var(--ssc-gold);
}
.ssc-btn--link:hover { color: var(--ssc-gold-dark); }


/* ==========================================================================
   05. HEADER / NAVIGATION
   ========================================================================== */
.ssc-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--ssc-header-h);
  display: flex; align-items: center;
  background: linear-gradient(180deg, rgba(17,17,20,.55), rgba(17,17,20,0));
  border-bottom: 1px solid transparent;
  transition: background var(--ssc-t), border-color var(--ssc-t),
              box-shadow var(--ssc-t), height var(--ssc-t);
}
.ssc-header.is-scrolled {
  /* Always shorter than the initial header, at every breakpoint */
  height: calc(var(--ssc-header-h) - 14px);
  background: rgba(15,15,18,.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(255,255,255,.1);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

.ssc-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}

/* --- Logo --- */
.ssc-logo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ssc-logo__mark {
  width: auto; height: 48px; flex: none;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.4));
  transition: height var(--ssc-t), transform var(--ssc-t-fast);
}
.ssc-header.is-scrolled .ssc-logo__mark { height: 42px; }
.ssc-logo:hover .ssc-logo__mark { transform: scale(1.04); }

/* Reproduces the logo's own two-tone wordmark as live text — crisper than a
   raster wordmark at small sizes, and it scales with the user's font settings. */
.ssc-logo__text { display: flex; align-items: baseline; gap: 1px; line-height: 1.05; }
.ssc-logo__name,
.ssc-logo__sub {
  font-size: 19px; font-weight: 800; letter-spacing: -.015em;
  white-space: nowrap; text-transform: none;
}
.ssc-logo__name { color: #fff; }
.ssc-logo__sub  { color: var(--ssc-teal-light); }

/* --- Desktop nav --- */
.ssc-nav__list { display: flex; align-items: center; gap: 4px; }
.ssc-nav__item { position: relative; }
.ssc-nav__link {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600;
  color: rgba(255,255,255,.86);
  white-space: nowrap;
  transition: color var(--ssc-t-fast), background var(--ssc-t-fast);
}
.ssc-nav__link:hover { color: #fff; background: rgba(255,255,255,.09); }
.ssc-nav__link.is-active { color: var(--ssc-gold-light); }
.ssc-nav__link.is-active::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 2px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ssc-gold), var(--ssc-gold-light));
}
.ssc-nav__caret { width: 15px; height: 15px; transition: transform var(--ssc-t-fast); }
.ssc-nav__item--has-dropdown:hover .ssc-nav__caret,
.ssc-nav__item--has-dropdown:focus-within .ssc-nav__caret { transform: rotate(180deg); }

/* --- Dropdown --- */
.ssc-dropdown {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translate(-50%, 10px);
  min-width: 246px; padding: 10px;
  background: rgba(20,20,24,.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--ssc-radius);
  box-shadow: 0 26px 60px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--ssc-t-fast), transform var(--ssc-t-fast), visibility var(--ssc-t-fast);
}
.ssc-dropdown::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.ssc-nav__item--has-dropdown:hover .ssc-dropdown,
.ssc-nav__item--has-dropdown:focus-within .ssc-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.ssc-dropdown a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 14px; border-radius: 9px;
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,.8);
  border-left: 2px solid transparent;
}
.ssc-dropdown a:hover {
  background: rgba(255,255,255,.07);
  color: #fff; border-left-color: var(--ssc-gold);
}

/* Small service icon shown in the Services menus */
.ssc-menu-icon {
  width: 17px; height: 17px; flex: none;
  stroke-width: 1.6;
  color: var(--ssc-gold-light);
  opacity: .72;
  transition: opacity var(--ssc-t-fast), transform var(--ssc-t-fast);
}
.ssc-dropdown a:hover .ssc-menu-icon,
.ssc-submenu a:hover .ssc-menu-icon { opacity: 1; transform: translateX(1px); }
.ssc-dropdown a.is-current .ssc-menu-icon,
.ssc-submenu a.is-current .ssc-menu-icon { opacity: 1; }

/* Current service page, marked in both Services menus */
.ssc-dropdown a.is-current,
.ssc-submenu a.is-current {
  color: var(--ssc-gold-light);
  background: rgba(0,127,136, .12);
  border-left-color: var(--ssc-gold);
}
.ssc-dropdown a.is-current::after,
.ssc-submenu a.is-current::after {
  content: "";
  width: 5px; height: 5px; flex: none;
  border-radius: 50%;
  background: var(--ssc-gold);
}

/* --- Header actions --- */
.ssc-header__actions { display: flex; align-items: center; gap: 12px; }
.ssc-header__phone {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,.86);
  white-space: nowrap;
}
.ssc-header__phone svg { width: 17px; height: 17px; color: var(--ssc-gold-light); }
.ssc-header__phone:hover { color: #fff; }

/* --- Hamburger --- */
.ssc-burger {
  display: none;
  width: 46px; height: 46px; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
}
.ssc-burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform var(--ssc-t-fast), opacity var(--ssc-t-fast);
}
.ssc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ssc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ssc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ==========================================================================
   06. MOBILE NAVIGATION
   ========================================================================== */
.ssc-mobile-overlay {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(8,8,10,.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity var(--ssc-t);
}
.ssc-mobile-overlay.is-visible { opacity: 1; }

.ssc-mobile-nav {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: min(360px, 88vw);
  display: flex; flex-direction: column;
  background: var(--ssc-ink);
  border-left: 1px solid var(--ssc-ink-line);
  box-shadow: -30px 0 70px rgba(0,0,0,.5);
  transform: translateX(102%);
  transition: transform var(--ssc-t);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom);
}
.ssc-mobile-nav.is-open { transform: translateX(0); }

.ssc-mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--ssc-ink-line);
}
.ssc-mobile-nav__title {
  font-size: 11.5px; font-weight: 700; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ssc-gold-light);
}
.ssc-mobile-close {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: rgba(255,255,255,.06); border: 1px solid var(--ssc-ink-line);
  border-radius: 12px; color: #fff;
}
.ssc-mobile-close:hover { background: rgba(255,255,255,.12); }

.ssc-mobile-nav__list { padding: 10px 14px; flex: 1 1 auto; }
.ssc-mobile-nav__link {
  display: block; padding: 13px 12px;
  font-size: 17px; font-weight: 700; color: #fff;
  border-radius: 10px;
}
.ssc-mobile-nav__link:hover,
.ssc-mobile-nav__link.is-active { color: var(--ssc-gold-light); background: rgba(255,255,255,.05); }

.ssc-mobile-nav__row { display: flex; align-items: center; }
.ssc-mobile-nav__row .ssc-mobile-nav__link { flex: 1 1 auto; }
.ssc-submenu-toggle {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: transparent; border: 0; color: rgba(255,255,255,.7);
  border-radius: 10px;
}
.ssc-submenu-toggle svg { transition: transform var(--ssc-t-fast); }
.ssc-submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.ssc-submenu-toggle:hover { color: #fff; background: rgba(255,255,255,.06); }

.ssc-submenu {
  max-height: 0; overflow: hidden;
  transition: max-height var(--ssc-t);
  margin-left: 12px;
  border-left: 1px solid var(--ssc-ink-line);
}
.ssc-submenu.is-open { max-height: 420px; }
.ssc-submenu a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 16px;
  font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,.72);
}
.ssc-submenu a:hover { color: var(--ssc-gold-light); }

.ssc-mobile-nav__foot {
  padding: 20px 22px 26px;
  border-top: 1px solid var(--ssc-ink-line);
  display: grid; gap: 10px;
}
.ssc-mobile-nav__addr {
  margin-top: 6px; font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,.55); text-align: center;
}


/* ==========================================================================
   07. HERO — full-screen fading slideshow
   --------------------------------------------------------------------------
   Structure
     .ssc-hero__stage  → the cross-fading images + scrims (absolute, behind)
     .ssc-hero__body   → the cross-fading copy blocks (stacked in one grid cell)
     .ssc-hero__foot   → static CTAs + slideshow controls (never re-animate)
   Per-slide colours are set inline on each .ssc-hero-copy as
   --ssc-slide-ink (headline / body) and --ssc-slide-accent (script, 2nd line,
   icons). Both are sampled from that slide's photograph.
   ========================================================================== */
.ssc-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-top: calc(var(--ssc-header-h) + 30px);
  padding-bottom: 30px;
  overflow: hidden;
  background: #0d0d10;

  /* One place to change the slide duration — JS reads this value too. */
  --ssc-hero-duration: 6500ms;
  --ssc-hero-fade: 1100ms;
}

/* --- Slide images ------------------------------------------------------- */
.ssc-hero__stage { position: absolute; inset: 0; z-index: -1; }

/* Constant dark band at the top so the sticky header stays readable over a
   light photograph, and at the foot so the CTAs and controls always read —
   whatever the slide behind them looks like. */
.ssc-hero__stage::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 145px;
  background: linear-gradient(180deg,
              rgba(6,7,10,.72) 0%, rgba(6,7,10,.34) 55%, rgba(6,7,10,0) 100%);
  pointer-events: none;
  z-index: 1;
}
.ssc-hero__stage::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(0deg,
              rgba(6,7,10,.94) 0%, rgba(6,7,10,.78) 26%,
              rgba(6,7,10,.34) 58%, rgba(6,7,10,0) 100%);
  pointer-events: none;
}

.ssc-hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--ssc-hero-fade) ease-in-out;
  will-change: opacity;
}
.ssc-hero-slide.is-active { opacity: 1; }

.ssc-hero-slide__media {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1.045);
  transition: transform 9s linear;
  will-change: transform;
}
/* Slow background zoom while a slide is on screen */
.ssc-hero-slide.is-active .ssc-hero-slide__media { transform: scale(1.13); }

/* Tone veil — dark for slides with light text, cream for slides with dark
   text. Masked so it fades out before it reaches the foot band. */
.ssc-hero-slide__scrim {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 82%);
}
.ssc-hero-slide[data-tone="light"] .ssc-hero-slide__scrim {
  background: linear-gradient(96deg,
              rgba(8,9,12,.90) 0%, rgba(8,9,12,.80) 36%,
              rgba(8,9,12,.48) 56%, rgba(8,9,12,.16) 74%,
              rgba(8,9,12,0) 96%);
}
.ssc-hero-slide[data-tone="dark"] .ssc-hero-slide__scrim {
  background: linear-gradient(96deg,
              rgba(252,249,243,.96) 0%, rgba(252,249,243,.92) 38%,
              rgba(252,249,243,.66) 56%, rgba(252,249,243,.22) 72%,
              rgba(252,249,243,0) 88%);
}

/* --- Slide copy --------------------------------------------------------- */
.ssc-hero__body {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 0;
}
/* Every copy block sits in the same grid cell, so the deck is as tall as the
   longest slide and nothing jumps between slides. */
.ssc-hero__deck { display: grid; width: 100%; max-width: 820px; }

.ssc-hero-copy {
  grid-area: 1 / 1;
  color: var(--ssc-slide-ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .55s var(--ssc-ease), visibility .55s var(--ssc-ease);
}
.ssc-hero-copy.is-active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition-delay: .3s;
}

/* Staggered entrance for the pieces inside the active slide */
.ssc-hero-copy > * {
  transform: translateY(22px);
  opacity: 0;
  transition: transform .7s var(--ssc-ease), opacity .7s var(--ssc-ease);
}
.ssc-hero-copy.is-active > * { transform: none; opacity: 1; }
.ssc-hero-copy.is-active .ssc-hero-copy__badge  { transition-delay: .34s; }
.ssc-hero-copy.is-active .ssc-hero-copy__script { transition-delay: .42s; }
.ssc-hero-copy.is-active .ssc-hero-copy__title  { transition-delay: .50s; }
.ssc-hero-copy.is-active .ssc-hero-copy__text   { transition-delay: .62s; }
.ssc-hero-copy.is-active .ssc-hero-copy__chips  { transition-delay: .72s; }

.ssc-hero-copy__badge {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  margin-bottom: 18px;
  border-radius: 15px;
  color: var(--ssc-slide-accent);
  border: 1px solid rgba(150,150,150,.45);
  border-color: color-mix(in srgb, var(--ssc-slide-accent) 55%, transparent);
  background: rgba(255,255,255,.08);
  background: color-mix(in srgb, var(--ssc-slide-accent) 15%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ssc-hero-copy__badge svg { width: 26px; height: 26px; }

/* Signature script line */
.ssc-hero-copy__script {
  font-family: var(--ssc-font-script);
  font-size: clamp(27px, 3.4vw, 44px);
  font-weight: 400;
  line-height: 1;
  color: var(--ssc-slide-accent);
  margin-bottom: 6px;
  padding-left: 2px;
}

/* Condensed display headline — line 1 in the ink colour, line 2 in the accent */
.ssc-hero-copy__title {
  font-family: var(--ssc-font-display);
  font-weight: 700;
  font-size: clamp(34px, 6.1vw, 74px);
  line-height: .98;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin-bottom: 18px;
  color: inherit;
}
.ssc-hero-copy__title span { display: block; }
.ssc-hero-copy__line-2 { color: var(--ssc-slide-accent); }
.ssc-hero-copy[data-tone="light"] .ssc-hero-copy__title { text-shadow: 0 4px 34px rgba(0,0,0,.45); }

.ssc-hero-copy__text {
  max-width: 54ch;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.65;
  opacity: .84;
  margin-bottom: 26px;
}

.ssc-hero-copy__chips {
  display: flex; flex-wrap: wrap;
  gap: 10px 22px;
  max-width: 620px;
}
.ssc-hero-copy__chips li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  opacity: .92;
}
.ssc-hero-copy__chip-icon {
  width: 17px; height: 17px; flex: none;
  color: var(--ssc-slide-accent);
  stroke-width: 2;
}

/* --- Foot: static CTAs + controls --------------------------------------- */
.ssc-hero__foot {
  position: relative;
  flex: none;
  display: flex; flex-direction: column; gap: 24px;
}
.ssc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.ssc-hero__controls {
  display: flex; align-items: center; gap: clamp(14px, 2.5vw, 28px);
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.16);
}

.ssc-hero__arrows { display: flex; gap: 8px; flex: none; }
.ssc-hero-arrow {
  width: 46px; height: 46px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.26);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--ssc-t-fast), border-color var(--ssc-t-fast),
              color var(--ssc-t-fast), transform var(--ssc-t-fast);
}
.ssc-hero-arrow svg { width: 18px; height: 18px; }
.ssc-hero-arrow:hover {
  background: linear-gradient(120deg, var(--ssc-gold-dark), var(--ssc-gold-light));
  border-color: transparent; color: #17130a;
  transform: translateY(-2px);
}
.ssc-hero-arrow:active { transform: translateY(0); }
.ssc-hero-arrow__play { display: none; }
.ssc-hero-arrow[aria-pressed="true"] .ssc-hero-arrow__pause { display: none; }
.ssc-hero-arrow[aria-pressed="true"] .ssc-hero-arrow__play  { display: block; }
.ssc-hero-arrow__play { fill: currentColor; stroke: none; }

/* Progress-bar indicators — the active bar fills over the slide duration */
.ssc-hero__dots { display: flex; align-items: center; gap: 7px; flex: 1 1 auto; }
.ssc-hero-dot {
  flex: 1 1 auto; max-width: 54px; min-width: 16px;
  height: 26px; padding: 11px 0;
  background: none; border: 0;
}
.ssc-hero-dot > span {
  display: block; position: relative; overflow: hidden;
  height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.26);
  transition: background var(--ssc-t-fast);
}
.ssc-hero-dot:hover > span { background: rgba(255,255,255,.5); }
.ssc-hero-dot > span::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ssc-gold), var(--ssc-gold-light));
}
.ssc-hero-dot.is-active > span::after {
  animation: ssc-hero-progress var(--ssc-hero-duration) linear forwards;
}
.ssc-hero.is-paused .ssc-hero-dot.is-active > span::after,
.ssc-hero.is-hovered .ssc-hero-dot.is-active > span::after { animation-play-state: paused; }
@keyframes ssc-hero-progress { from { width: 0; } to { width: 100%; } }

.ssc-hero__counter {
  flex: none;
  font-family: var(--ssc-font-display);
  font-size: 15px; font-weight: 600; letter-spacing: .08em;
  color: rgba(255,255,255,.55);
}
.ssc-hero__counter span:first-child { color: var(--ssc-gold-light); font-size: 19px; }
.ssc-hero__counter-sep { display: inline-block; width: 22px; }
.ssc-hero__counter-sep::before { content: "/"; opacity: .5; margin: 0 6px; }

/* Scroll indicator, now part of the control bar */
.ssc-hero__scroll {
  flex: none;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
  padding-left: 4px;
}
.ssc-hero__scroll:hover { color: #fff; }
.ssc-hero__scroll svg { width: 16px; height: 16px; animation: ssc-bob 1.9s ease-in-out infinite; }
@keyframes ssc-bob {
  0%, 100% { transform: translateY(-2px); opacity: .7; }
  50%      { transform: translateY(3px); opacity: 1; }
}

/* ==========================================================================
   08. TRUST SECTION
   ========================================================================== */
.ssc-trust {
  padding-block: var(--ssc-section-y);
  background: var(--ssc-white);
  border-bottom: 1px solid var(--ssc-border);
}
.ssc-trust__head {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 64px); align-items: end;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.ssc-trust__title { font-size: clamp(26px, 3.6vw, 42px); }
.ssc-trust__text { color: var(--ssc-text-muted); font-size: clamp(15px, 1.4vw, 16.5px); }

.ssc-trust__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.ssc-trust-card {
  padding: 30px 26px;
  background: var(--ssc-paper);
  border: 1px solid var(--ssc-border);
  border-radius: var(--ssc-radius);
  transition: transform var(--ssc-t-fast), box-shadow var(--ssc-t-fast), border-color var(--ssc-t-fast);
}
.ssc-trust-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0,127,136,.45);
  box-shadow: var(--ssc-shadow-md);
  background: #fff;
}
.ssc-trust-card__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 20px;
  border-radius: 13px;
  background: linear-gradient(140deg, var(--ssc-ink), #33353d);
  color: var(--ssc-gold-light);
}
.ssc-trust-card h3 { font-size: 17.5px; font-weight: 700; margin-bottom: 8px; }
.ssc-trust-card p { font-size: 14.5px; color: var(--ssc-text-muted); line-height: 1.65; }


/* ==========================================================================
   09. ABOUT US
   --------------------------------------------------------------------------
   Self-contained module. Every class is prefixed .ssc-about- and every colour
   has a literal fallback, so this block can be lifted into WordPress/Novamira
   without the site-wide token block coming with it.
   ========================================================================== */
.ssc-about {
  padding-block: var(--ssc-section-y, 96px);
  background: var(--ssc-paper, #f7f7f5);
}

.ssc-about-grid {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
}

/* --- Left column: image, frame and floating badge ----------------------- */
.ssc-about-media {
  position: relative;
  min-width: 0;                /* let the grid track shrink on narrow screens */
  margin: 0;
  padding: 0 20px 20px 0;      /* room for the offset architectural frame */
}

/* Thin outlined rectangle offset behind the photo */
.ssc-about-frame {
  position: absolute;
  inset: 26px 0 0 26px;
  border: 1px solid rgba(0,127,136, .5);
  border-color: color-mix(in srgb, var(--ssc-gold, #007f88) 55%, transparent);
  border-radius: var(--ssc-radius-lg, 22px);
  pointer-events: none;
}

.ssc-about-image {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  background: linear-gradient(150deg, #2c2e35, #14151a);  /* shown while loading */
  border-radius: var(--ssc-radius-lg, 22px);
  box-shadow: 0 28px 70px rgba(17, 17, 20, .16);
  box-shadow: var(--ssc-shadow-lg, 0 28px 70px rgba(17, 17, 20, .16));
}

/* Floating credential card, overlapping the bottom-left of the photo */
.ssc-about-badge {
  position: absolute;
  z-index: 2;
  left: -6px;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: calc(100% - 40px);
  margin: 0;
  padding: 14px 20px 14px 15px;
  background: var(--ssc-ink, #111114);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--ssc-radius, 14px);
  box-shadow: 0 24px 60px rgba(17, 17, 20, .28);
}
.ssc-about-badge-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  color: var(--ssc-gold-light, #20bec9);
  background: rgba(32,190,201, .14);
}
.ssc-about-badge-mark svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Laid out as flex items so the three words wrap as whole units rather than
   leaving a separator stranded at the end of a line. */
.ssc-about-badge-words {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.45;
  text-transform: uppercase;
  color: #fff;
}
.ssc-about-badge-dot { color: var(--ssc-gold, #007f88); }

/* --- Right column: copy ------------------------------------------------- */
.ssc-about-content { min-width: 0; }

.ssc-about-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ssc-gold-dark, #04606a);
}
.ssc-about-eyebrow-bar {
  flex: none;
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, var(--ssc-gold, #007f88), transparent);
}

.ssc-about-title {
  margin: 0 0 20px;
  font-size: clamp(28px, 3.9vw, 46px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--ssc-ink, #111114);
}
.ssc-about-title-accent { color: var(--ssc-gold-dark, #04606a); }

.ssc-about-text {
  max-width: 56ch;
  margin: 0 0 30px;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.75;
  color: var(--ssc-text-muted, #5c6168);
}

/* Feature list — hairline separated rows with a check icon */
.ssc-about-features {
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ssc-border, #e3e3df);
}
.ssc-about-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--ssc-border, #e3e3df);
  transition: padding-left .28s cubic-bezier(.22,.61,.36,1);
}
.ssc-about-feature:hover { padding-left: 12px; }

.ssc-about-feature-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--ssc-gold-dark, #04606a);
  background: rgba(0,127,136, .14);
  transition: background .28s ease, color .28s ease;
}
.ssc-about-feature-icon svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ssc-about-feature:hover .ssc-about-feature-icon {
  background: var(--ssc-gold, #007f88);
  color: #fff;
}

.ssc-about-feature-label {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ssc-ink, #111114);
}

/* Call to action */
.ssc-about-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 14px 28px;
  border: 1px solid var(--ssc-ink, #111114);
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ssc-ink, #111114);
  background: transparent;
  transition: background .24s ease, color .24s ease,
              border-color .24s ease, transform .24s ease, box-shadow .24s ease;
}
.ssc-about-cta:hover,
.ssc-about-cta:focus-visible {
  background: var(--ssc-ink, #111114);
  border-color: var(--ssc-ink, #111114);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(17, 17, 20, .18);
}
.ssc-about-cta-arrow {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .24s ease;
}
.ssc-about-cta:hover .ssc-about-cta-arrow { transform: translateX(4px); }

/* --- Scroll reveal ------------------------------------------------------ */
[data-about-reveal] {
  opacity: 0;
  transition: opacity .8s cubic-bezier(.22,.61,.36,1),
              transform .8s cubic-bezier(.22,.61,.36,1);
}
.ssc-about-media   { transform: translateX(-26px); }   /* image: fade + slide  */
.ssc-about-content { transform: translateY(26px); }    /* copy: fade + rise    */
[data-about-reveal].is-in { opacity: 1; transform: none; }

/* Feature rows stagger in after the column they sit in */
.ssc-about-feature {
  opacity: 0;
  transform: translateY(14px);
}
.is-in .ssc-about-feature {
  opacity: 1;
  transform: none;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,.61,.36,1),
              padding-left .28s cubic-bezier(.22,.61,.36,1);
}
.is-in .ssc-about-feature:nth-child(1) { transition-delay: .30s; }
.is-in .ssc-about-feature:nth-child(2) { transition-delay: .40s; }
.is-in .ssc-about-feature:nth-child(3) { transition-delay: .50s; }

/* Without JavaScript the section must still be visible */
.no-js [data-about-reveal],
.no-js .ssc-about-feature { opacity: 1; transform: none; }

/* ==========================================================================
   10. SERVICES
   ========================================================================== */
.ssc-services {
  padding-block: var(--ssc-section-y);
  background: var(--ssc-white);
}
.ssc-services__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ssc-service-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  padding: 34px 30px 28px;
  background: var(--ssc-paper);
  border: 1px solid var(--ssc-border);
  border-radius: var(--ssc-radius-lg);
  overflow: hidden;
  transition: transform var(--ssc-t-fast), box-shadow var(--ssc-t-fast),
              border-color var(--ssc-t-fast), background var(--ssc-t-fast);
}
.ssc-service-card::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--ssc-gold-dark), var(--ssc-gold-light));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--ssc-t);
}
.ssc-service-card:hover,
.ssc-service-card:focus-within {
  transform: translateY(-6px);
  background: #fff;
  border-color: rgba(0,127,136,.4);
  box-shadow: var(--ssc-shadow-md);
}
.ssc-service-card:hover::before,
.ssc-service-card:focus-within::before { transform: scaleX(1); }
.ssc-service-card:target { border-color: var(--ssc-gold); box-shadow: var(--ssc-shadow-md); }

.ssc-service-card__num {
  position: absolute; top: 22px; right: 26px;
  font-size: 40px; font-weight: 800; line-height: 1;
  color: rgba(17,17,20,.07);
  transition: color var(--ssc-t-fast);
}
.ssc-service-card:hover .ssc-service-card__num { color: rgba(0,127,136,.24); }

.ssc-service-card__icon {
  display: grid; place-items: center;
  width: 58px; height: 58px; margin-bottom: 24px;
  border-radius: 15px;
  background: linear-gradient(140deg, var(--ssc-ink), #34363e);
  color: var(--ssc-gold-light);
  transition: transform var(--ssc-t), background var(--ssc-t-fast);
}
.ssc-service-card__icon svg { width: 26px; height: 26px; }
.ssc-service-card:hover .ssc-service-card__icon {
  transform: translateY(-3px) rotate(-5deg);
  background: linear-gradient(140deg, var(--ssc-gold-dark), var(--ssc-gold));
  color: #fff;
}

.ssc-service-card__title { font-size: 20px; margin-bottom: 10px; }
.ssc-service-card__text {
  font-size: 14.8px; color: var(--ssc-text-muted); line-height: 1.65;
  margin-bottom: 22px; flex: 1 1 auto;
}
.ssc-service-card__link {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  font-size: 13.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ssc-ink);
}
.ssc-service-card__link svg { width: 17px; height: 17px; transition: transform var(--ssc-t-fast); }
.ssc-service-card__link:hover { color: var(--ssc-gold-dark); }
.ssc-service-card:hover .ssc-service-card__link svg { transform: translateX(5px); }

/* Card 07 spans the remaining columns on desktop */
.ssc-service-card--wide { grid-column: span 3; }
.ssc-service-card--wide .ssc-service-card__text { max-width: 62ch; }


/* ==========================================================================
   11. WHY CHOOSE US
   ========================================================================== */
.ssc-why {
  position: relative; isolation: isolate;
  padding-block: var(--ssc-section-y);
  background: var(--ssc-ink);
  overflow: hidden;
}
.ssc-why__bg {
  position: absolute; inset: 0; z-index: -1;
  background-color: #17181c;
  background-image: var(--ssc-img-why),
    radial-gradient(90% 80% at 30% 20%, #4a4d57 0%, #17181c 70%);
  background-size: cover; background-position: center;
  opacity: .16;
  filter: grayscale(1) contrast(1.1);
}
.ssc-why::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--ssc-ink) 0%, rgba(17,17,20,.72) 45%, var(--ssc-ink) 100%);
}
.ssc-why__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.ssc-why-card {
  padding: 30px 26px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--ssc-radius);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform var(--ssc-t-fast), background var(--ssc-t-fast), border-color var(--ssc-t-fast);
}
.ssc-why-card:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,.08);
  border-color: rgba(0,127,136,.45);
}
.ssc-why-card svg { width: 30px; height: 30px; color: var(--ssc-gold-light); margin-bottom: 18px; }
.ssc-why-card h3 { font-size: 18px; color: #fff; margin-bottom: 8px; }
.ssc-why-card p { font-size: 14.5px; color: var(--ssc-text-light); line-height: 1.65; }


/* ==========================================================================
   12. PROCESS
   ========================================================================== */
.ssc-process {
  padding-block: var(--ssc-section-y);
  background: var(--ssc-paper);
}
.ssc-process__list {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: step;
}
.ssc-process-step {
  position: relative;
  padding-top: 42px;
}
/* Timeline rule */
.ssc-process-step::before {
  content: ""; position: absolute; top: 15px; left: 0; right: -20px;
  height: 1px; background: var(--ssc-border);
}
.ssc-process-step:last-child::before { right: 0; }
.ssc-process-step::after {
  content: ""; position: absolute; top: 9px; left: 0;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--ssc-paper);
  border: 2px solid var(--ssc-gold);
}
.ssc-process-step__num {
  display: block;
  font-size: 13px; font-weight: 800; letter-spacing: .18em;
  color: var(--ssc-gold-dark); margin-bottom: 10px;
}
.ssc-process-step h3 { font-size: 21px; margin-bottom: 10px; }
.ssc-process-step p { font-size: 14.8px; color: var(--ssc-text-muted); line-height: 1.65; max-width: 34ch; }


/* ==========================================================================
   13. CTA BAND
   ========================================================================== */
.ssc-cta {
  position: relative; isolation: isolate;
  padding-block: clamp(70px, 9vw, 130px);
  background: var(--ssc-ink);
  overflow: hidden;
  text-align: center;
}
.ssc-cta__bg {
  position: absolute; inset: 0; z-index: -2;
  background-color: #101114;
  background-image: var(--ssc-img-cta),
    radial-gradient(80% 120% at 50% 0%, #3b3e48 0%, #101114 65%);
  background-size: cover; background-position: center;
}
.ssc-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12,12,14,.88), rgba(12,12,14,.94));
}
.ssc-cta__title {
  font-size: clamp(28px, 4.6vw, 52px); color: #fff;
  max-width: 18ch; margin: 0 auto 16px;
}
.ssc-cta__text {
  font-size: clamp(15px, 1.5vw, 18px); color: var(--ssc-text-light);
  max-width: 46ch; margin: 0 auto 34px;
}
.ssc-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }


/* ==========================================================================
   14. CONTACT
   ========================================================================== */
.ssc-contact {
  padding-block: var(--ssc-section-y);
  background: var(--ssc-white);
}
.ssc-contact__cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin-bottom: clamp(30px, 4vw, 52px);
}
.ssc-contact-card {
  display: block; padding: 28px 26px;
  background: var(--ssc-paper);
  border: 1px solid var(--ssc-border);
  border-radius: var(--ssc-radius);
  transition: transform var(--ssc-t-fast), box-shadow var(--ssc-t-fast), border-color var(--ssc-t-fast);
}
.ssc-contact-card:hover {
  transform: translateY(-4px); background: #fff;
  border-color: rgba(0,127,136,.45); box-shadow: var(--ssc-shadow-md);
}
.ssc-contact-card__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: 18px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--ssc-ink), #34363e);
  color: var(--ssc-gold-light);
}
.ssc-contact-card__icon svg { width: 22px; height: 22px; }
.ssc-contact-card h3 {
  font-size: 12.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ssc-text-muted); margin-bottom: 8px;
}
.ssc-contact-card p { font-size: 16.5px; font-weight: 700; line-height: 1.5; color: var(--ssc-ink); }
.ssc-contact-card__cue {
  display: inline-block; margin-top: 12px;
  font-size: 13px; font-weight: 700; color: var(--ssc-gold-dark);
}

.ssc-contact__main {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 20px; align-items: start;
}

/* --- Form --- */
.ssc-form-wrap {
  padding: clamp(26px, 3.5vw, 42px);
  background: var(--ssc-paper);
  border: 1px solid var(--ssc-border);
  border-radius: var(--ssc-radius-lg);
}
.ssc-form-wrap__title { font-size: 24px; margin-bottom: 8px; }
.ssc-form-wrap__text { font-size: 14.8px; color: var(--ssc-text-muted); margin-bottom: 26px; }

.ssc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ssc-field { display: flex; flex-direction: column; margin-bottom: 16px; min-width: 0; }
.ssc-field label {
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  margin-bottom: 7px; color: var(--ssc-ink);
}
.ssc-field label span { color: var(--ssc-gold-dark); }
.ssc-field input,
.ssc-field select,
.ssc-field textarea {
  width: 100%;
  font-family: inherit; font-size: 15px; color: var(--ssc-text);
  padding: 13px 15px; min-height: 48px;
  background: #fff;
  border: 1px solid var(--ssc-border);
  border-radius: 10px;
  transition: border-color var(--ssc-t-fast), box-shadow var(--ssc-t-fast);
}
.ssc-field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.ssc-field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6168' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 18px;
  padding-right: 42px;
}
.ssc-field input::placeholder,
.ssc-field textarea::placeholder { color: #9ba1a8; }
.ssc-field input:focus,
.ssc-field select:focus,
.ssc-field textarea:focus {
  outline: none;
  border-color: var(--ssc-gold);
  box-shadow: 0 0 0 3px rgba(0,127,136,.18);
}
.ssc-field.has-error input,
.ssc-field.has-error select,
.ssc-field.has-error textarea { border-color: #cf3b3b; }
.ssc-field__error {
  display: none; margin-top: 6px;
  font-size: 12.8px; font-weight: 600; color: #cf3b3b;
}
.ssc-field.has-error .ssc-field__error { display: block; }

.ssc-form__note {
  margin-top: 16px; font-size: 13.5px; color: var(--ssc-text-muted); text-align: center;
}
.ssc-form__note a { font-weight: 700; color: var(--ssc-ink); border-bottom: 1px solid var(--ssc-gold); }

/* --- Success state --- */
.ssc-form-success { text-align: center; padding: 20px 0 6px; }
.ssc-form-success__icon {
  display: grid; place-items: center;
  width: 62px; height: 62px; margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(37,211,102,.14); color: #17a34a;
}
.ssc-form-success__icon svg { width: 30px; height: 30px; stroke-width: 2.6; }
.ssc-form-success h4 { font-size: 21px; margin-bottom: 10px; }
.ssc-form-success p { font-size: 15px; color: var(--ssc-text-muted); margin-bottom: 22px; }
.ssc-form-success a { font-weight: 700; border-bottom: 1px solid var(--ssc-gold); }

/* --- Map --- */
.ssc-map {
  display: flex; flex-direction: column;
  border: 1px solid var(--ssc-border);
  border-radius: var(--ssc-radius-lg);
  overflow: hidden;
  background: var(--ssc-paper);
}
.ssc-map__frame { position: relative; aspect-ratio: 4 / 3; background: var(--ssc-paper-2); }
.ssc-map__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
  filter: grayscale(.35) contrast(1.02);
}
.ssc-map__panel { padding: 26px; }
.ssc-map__panel h3 { font-size: 19px; margin-bottom: 8px; }
.ssc-map__panel p { font-size: 14.8px; color: var(--ssc-text-muted); margin-bottom: 20px; line-height: 1.65; }


/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.ssc-footer { background: var(--ssc-ink); color: rgba(255,255,255,.72); }
.ssc-footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 54px);
  padding-block: clamp(48px, 6vw, 84px);
}
.ssc-footer__logo { width: 200px; height: auto; margin-bottom: 6px; }
.ssc-footer__tagline {
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ssc-gold-light); margin-bottom: 16px;
}
.ssc-footer__blurb { font-size: 14.5px; line-height: 1.7; max-width: 42ch; margin-bottom: 20px; }
.ssc-footer__social { display: flex; gap: 10px; }
.ssc-footer__social a {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 11px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ssc-border-dark);
  color: #fff;
  transition: background var(--ssc-t-fast), transform var(--ssc-t-fast), border-color var(--ssc-t-fast);
}
.ssc-footer__social a:hover {
  background: rgba(0,127,136,.2); border-color: var(--ssc-gold); transform: translateY(-2px);
}
.ssc-footer__social svg { width: 19px; height: 19px; }

.ssc-footer__col h4 {
  font-size: 12.5px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: #fff; margin-bottom: 18px;
}
.ssc-footer__col ul { display: grid; gap: 11px; }
.ssc-footer__col a { font-size: 14.5px; }
.ssc-footer__col a:hover { color: var(--ssc-gold-light); }

.ssc-footer__contact li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.6; }
.ssc-footer__contact svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--ssc-gold-light); }

.ssc-footer__bar { border-top: 1px solid var(--ssc-ink-line); }
.ssc-footer__bar-inner {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  align-items: center; justify-content: space-between;
  padding-block: 22px;
  font-size: 13.5px; color: rgba(255,255,255,.52);
}


/* ==========================================================================
   16. FLOATING WHATSAPP & BACK TO TOP
   ========================================================================== */
.ssc-whatsapp-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ssc-whatsapp); color: #fff;
  box-shadow: 0 12px 30px rgba(37,211,102,.4);
  transition: transform var(--ssc-t-fast), box-shadow var(--ssc-t-fast);
}
.ssc-whatsapp-float svg { width: 30px; height: 30px; position: relative; z-index: 2; }
.ssc-whatsapp-float:hover { transform: scale(1.07); box-shadow: 0 16px 40px rgba(37,211,102,.52); }

.ssc-whatsapp-float__pulse {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--ssc-whatsapp); opacity: .55;
  animation: ssc-pulse 2.4s ease-out infinite;
  z-index: 1;
}
@keyframes ssc-pulse {
  0%   { transform: scale(1); opacity: .5; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

.ssc-whatsapp-float__tip {
  position: absolute; right: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(8px);
  white-space: nowrap;
  padding: 8px 14px; border-radius: 8px;
  background: var(--ssc-ink); color: #fff;
  font-size: 13px; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity var(--ssc-t-fast), transform var(--ssc-t-fast);
  box-shadow: var(--ssc-shadow-md);
}
.ssc-whatsapp-float:hover .ssc-whatsapp-float__tip { opacity: 1; transform: translateY(-50%) translateX(0); }

.ssc-to-top {
  position: fixed; right: 20px; bottom: 88px; z-index: 89;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ssc-ink); color: #fff;
  border: 1px solid var(--ssc-ink-line);
  box-shadow: var(--ssc-shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--ssc-t-fast), transform var(--ssc-t-fast), visibility var(--ssc-t-fast);
}
.ssc-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.ssc-to-top:hover { background: var(--ssc-gold-dark); }
.ssc-to-top svg { width: 19px; height: 19px; }


/* ==========================================================================
   17. SCROLL REVEAL
   ========================================================================== */
.ssc-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s var(--ssc-ease), transform .75s var(--ssc-ease);
  will-change: opacity, transform;
}
.ssc-reveal.is-visible { opacity: 1; transform: none; }
.ssc-reveal[data-delay="1"] { transition-delay: .09s; }
.ssc-reveal[data-delay="2"] { transition-delay: .18s; }
.ssc-reveal[data-delay="3"] { transition-delay: .27s; }
.ssc-reveal[data-delay="4"] { transition-delay: .36s; }

/* If JavaScript is disabled, content must still be visible */
.no-js .ssc-reveal { opacity: 1; transform: none; }


/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */

/* ---------- Large laptops ---------- */
@media (max-width: 1180px) {
  .ssc-header__phone { display: none; }
}

/* ---------- Tablet landscape / small laptop ---------- */
@media (max-width: 1024px) {
  :root { --ssc-header-h: 74px; }

  .ssc-nav, .ssc-header__cta { display: none; }
  .ssc-burger { display: flex; }

  .ssc-about-grid { grid-template-columns: 42fr 58fr; }
  .ssc-about-frame { inset: 20px 0 0 20px; }
  /* The media column is narrower here, so the badge drops its separators and
     leans on the flex gap instead — that keeps it to a single line. */
  .ssc-about-badge { gap: 11px; padding: 12px 15px 12px 12px; }
  .ssc-about-badge-mark { width: 34px; height: 34px; }
  .ssc-about-badge-words { font-size: 10px; letter-spacing: .1em; gap: 2px 11px; }
  .ssc-about-badge-dot { display: none; }
  .ssc-trust__grid { grid-template-columns: repeat(2, 1fr); }
  .ssc-services__grid { grid-template-columns: repeat(2, 1fr); }
  .ssc-service-card--wide { grid-column: span 2; }
  .ssc-why__grid { grid-template-columns: repeat(2, 1fr); }
  .ssc-process__list { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .ssc-process-step:nth-child(2)::before { right: 0; }
  .ssc-contact__cards { grid-template-columns: 1fr; }
  .ssc-contact__main { grid-template-columns: 1fr; }
  .ssc-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Tablet portrait ---------- */
@media (max-width: 900px) {
  .ssc-trust__head { grid-template-columns: 1fr; align-items: start; }

  /* About: the image becomes a full-width banner above the copy */
  .ssc-about-grid { grid-template-columns: 1fr; gap: 40px; }
  .ssc-about-media {
    max-width: none;
    transform: translateY(26px);      /* reveal slides up, not across */
  }
  .ssc-about-image { aspect-ratio: 16 / 10; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  :root { --ssc-header-h: 68px; }

  body { font-size: 15.5px; }

  .ssc-logo__mark { height: 40px; }
  .ssc-header.is-scrolled .ssc-logo__mark { height: 36px; }
  .ssc-logo__name, .ssc-logo__sub { font-size: 16.5px; }

  /* --- Hero slideshow on phones --- */
  .ssc-hero {
    min-height: 100svh;
    padding-top: calc(var(--ssc-header-h) + 26px);
    padding-bottom: 22px;
  }
  /* The veil runs top-to-bottom instead of left-to-right, because the copy
     now sits over the middle of the photo rather than beside the subject. */
  .ssc-hero-slide__scrim {
    -webkit-mask-image: none; mask-image: none;
  }
  .ssc-hero-slide[data-tone="light"] .ssc-hero-slide__scrim {
    background: linear-gradient(180deg,
                rgba(8,9,12,.86) 0%, rgba(8,9,12,.72) 42%, rgba(8,9,12,.6) 70%, rgba(8,9,12,.5) 100%);
  }
  .ssc-hero-slide[data-tone="dark"] .ssc-hero-slide__scrim {
    background: linear-gradient(180deg,
                rgba(252,249,243,.93) 0%, rgba(252,249,243,.86) 40%,
                rgba(252,249,243,.5) 66%, rgba(252,249,243,0) 84%);
  }
  .ssc-hero__stage::after { height: 40%; }

  .ssc-hero__body { align-items: flex-start; padding-top: 6px; }
  .ssc-hero-copy__badge { width: 46px; height: 46px; margin-bottom: 14px; border-radius: 13px; }
  .ssc-hero-copy__badge svg { width: 23px; height: 23px; }
  .ssc-hero-copy__text { margin-bottom: 20px; }
  .ssc-hero-copy__chips { gap: 8px 16px; }
  .ssc-hero-copy__chips li { font-size: 11px; letter-spacing: .08em; }
  .ssc-hero-copy__chips li:nth-child(3) { display: none; }

  .ssc-hero__foot { gap: 18px; }
  .ssc-hero__actions { gap: 10px; }
  .ssc-hero__actions .ssc-btn { flex: 1 1 100%; }
  /* There is no room for thirteen separate bars on a phone, so the indicator
     collapses to one progress bar plus the slide counter. */
  .ssc-hero__controls { gap: 12px; padding-top: 16px; padding-right: 74px; }
  .ssc-hero-arrow { width: 42px; height: 42px; }
  .ssc-hero-arrow[data-hero-toggle] { display: none; }
  .ssc-hero__dots { gap: 0; min-width: 0; }
  .ssc-hero-dot { display: none; }
  .ssc-hero-dot.is-active { display: block; flex: 1 1 auto; max-width: none; min-width: 0; }
  .ssc-hero__scroll { display: none; }
  .ssc-hero__counter { font-size: 13px; }
  .ssc-hero__counter span:first-child { font-size: 17px; }

  .ssc-about-media { padding: 0 14px 14px 0; }
  .ssc-about-frame { inset: 18px 0 0 18px; }
  .ssc-about-eyebrow { font-size: 11.5px; letter-spacing: .14em; }
  .ssc-about-badge { gap: 11px; padding: 12px 16px 12px 13px; }
  .ssc-about-badge-mark { width: 36px; height: 36px; border-radius: 10px; }
  .ssc-about-image { aspect-ratio: 4 / 3.1; }
  .ssc-about-cta { width: 100%; }
  .ssc-about-feature { padding: 13px 2px; }
  .ssc-about-feature:hover { padding-left: 2px; }   /* no hover shift on touch */

  .ssc-trust__grid { grid-template-columns: 1fr; }
  .ssc-services__grid { grid-template-columns: 1fr; }
  .ssc-service-card--wide { grid-column: span 1; }
  .ssc-why__grid { grid-template-columns: 1fr; }

  .ssc-process__list { grid-template-columns: 1fr; row-gap: 0; }
  .ssc-process-step { padding: 0 0 34px 34px; }
  .ssc-process-step::before {
    top: 6px; bottom: -6px; left: 6px; right: auto;
    width: 1px; height: auto;
  }
  .ssc-process-step:last-child::before { display: none; }
  .ssc-process-step::after { top: 4px; left: 0; }
  .ssc-process-step p { max-width: none; }

  .ssc-form__row { grid-template-columns: 1fr; gap: 0; }
  .ssc-cta__actions .ssc-btn { flex: 1 1 100%; }

  .ssc-footer__grid { grid-template-columns: 1fr; }
  .ssc-footer__bar-inner { justify-content: center; text-align: center; }

  .ssc-whatsapp-float { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .ssc-whatsapp-float__tip { display: none; }
  .ssc-to-top { right: 16px; bottom: 80px; width: 42px; height: 42px; }
}

/* ---------- Small phones ---------- */
@media (max-width: 400px) {
  :root { --ssc-gutter: 16px; }

  /* Compact logo lockup — the wordmark stays visible, it just gets smaller */
  .ssc-logo { gap: 9px; }
  .ssc-logo__mark { height: 34px; }
  .ssc-header.is-scrolled .ssc-logo__mark { height: 32px; }
  .ssc-logo__name, .ssc-logo__sub { font-size: 15px; }

  /* Squeeze the hero so the slideshow controls stay above the fold on the
     smallest phones */
  .ssc-hero { padding-bottom: 16px; }
  .ssc-hero__foot { gap: 14px; }
  .ssc-hero__controls { gap: 10px; padding-top: 13px; }
  .ssc-hero__actions .ssc-btn--lg {
    min-height: 50px; padding-inline: 18px; font-size: 14px;
  }
  .ssc-hero-copy__text { margin-bottom: 16px; }

  /* The badge stops floating so it can never cover the photo */
  .ssc-about-badge { position: static; max-width: none; margin-top: 14px; }
  .ssc-about-media { padding: 0; }
  .ssc-about-frame { display: none; }
  .ssc-about-badge-words { letter-spacing: .1em; gap: 2px 10px; }
}

/* ---------- Large desktops ---------- */
@media (min-width: 1600px) {
  :root { --ssc-container: 1320px; }
}


/* ==========================================================================
   19. REDUCED MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .ssc-reveal { opacity: 1 !important; transform: none !important; }
  [data-about-reveal], .ssc-about-feature { opacity: 1 !important; transform: none !important; }

  /* Hero slideshow: no zoom, no progress animation, instant cross-fade.
     The slides still change when the viewer presses the arrows or dots. */
  .ssc-hero-slide__media { transform: none !important; transition: none !important; }
  .ssc-hero-copy > * { transform: none !important; opacity: 1 !important; }
  .ssc-hero-dot.is-active > span::after { animation: none !important; width: 100%; }
  .ssc-hero__scroll svg { animation: none !important; }
}

/* Also stop the slow zoom for viewers who leave motion on but would rather
   the page stayed still while they read — the hover pause covers that. */
@media (hover: none) {
  .ssc-hero-slide.is-active .ssc-hero-slide__media { transform: scale(1.08); }
}

@media print {
  .ssc-header, .ssc-mobile-nav, .ssc-mobile-overlay,
  .ssc-whatsapp-float, .ssc-to-top, .ssc-hero__scroll { display: none !important; }
  body { background: #fff; color: #000; }
  .ssc-reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   17. FAQ
   Native <details> so the answers exist in the HTML with no JavaScript —
   crawlers and answer engines read them whether or not they are open.
   ========================================================================== */
.ssc-faq {
  padding-block: var(--ssc-section-y);
  background: var(--ssc-white);
}
/* left-aligned to match .ssc-section-head, which is not centred */
.ssc-faq__list {
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ssc-faq-item {
  background: var(--ssc-paper);
  border: 1px solid var(--ssc-border);
  border-radius: var(--ssc-radius);
  overflow: hidden;
  transition: border-color var(--ssc-t-fast), box-shadow var(--ssc-t-fast);
}
.ssc-faq-item[open] {
  border-color: var(--ssc-teal);
  box-shadow: var(--ssc-shadow-sm);
}
.ssc-faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  list-style: none;
  transition: color var(--ssc-t-fast);
}
.ssc-faq-item > summary::-webkit-details-marker { display: none; }
.ssc-faq-item > summary:hover { color: var(--ssc-teal-dark); }
.ssc-faq-item > summary:focus-visible {
  outline: 2px solid var(--ssc-teal);
  outline-offset: -2px;
}
/* the +/- indicator is drawn from borders so it needs no icon font or SVG */
.ssc-faq-item > summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--ssc-teal);
  border-bottom: 2px solid var(--ssc-teal);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--ssc-t-fast);
}
.ssc-faq-item[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.ssc-faq-item__body {
  padding: 0 22px 20px;
}
.ssc-faq-item__body p {
  margin: 0;
  max-width: 68ch;
  font-size: 15.6px;
  line-height: 1.72;
  color: var(--ssc-text-muted);
}
.ssc-faq-item__body a {
  color: var(--ssc-teal-dark);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}
@media (max-width: 640px) {
  .ssc-faq-item > summary { padding: 15px 17px; font-size: 15.6px; }
  .ssc-faq-item__body { padding: 0 17px 17px; }
  .ssc-faq-item__body p { font-size: 15px; }
}