/* ========================================================================
   Southern Site Rentals — brand-driven marketing site
   Palette: SSR Blue #1D75BD · Site Green #3AB54A · Deep Utility #102A3A
            Clean Fog #F2F6F8 · White #FFFFFF
   Type   : Barlow Condensed (display) · Inter (body)
   ======================================================================== */

:root {
  --header-h: 210px;   /* two-row header: centered logo above nav */
  /* Brand */
  --ssr-blue: #1D75BD;
  --ssr-blue-hover: #155F9C;
  --ssr-blue-dark: #0F4C7D;
  --ssr-green: #3AB54A;
  --ssr-green-hover: #2E9A3D;
  --deep-utility: #102A3A;
  --deep-utility-2: #1B3B4E;
  --clean-fog: #F2F6F8;
  --clean-fog-2: #E8EFF3;
  --white: #FFFFFF;

  /* Semantic */
  --color-bg: var(--white);
  --color-surface: var(--white);
  --color-surface-alt: var(--clean-fog);
  --color-text: var(--deep-utility);
  --color-text-muted: #4A6272;
  --color-text-faint: #7C919F;
  --color-border: #D9E2E8;
  --color-primary: var(--ssr-blue);
  --color-accent: var(--ssr-green);

  /* Type scale — informational, compact-headed */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.2vw, 3.25rem);
  --text-hero: clamp(2.5rem, 1.5rem + 4.5vw, 5.25rem);

  /* Spacing (4px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(16, 42, 58, 0.08);
  --shadow-md: 0 8px 24px -8px rgba(16, 42, 58, 0.15);
  --shadow-lg: 0 24px 48px -12px rgba(16, 42, 58, 0.22);

  --transition: 220ms cubic-bezier(0.16, 1, 0.3, 1);

  --content-max: 1240px;

  --font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
}

/* ============ RESET & BASE ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
p { text-wrap: pretty; }
ul[role="list"] { list-style: none; }

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Keyboard-only accessibility skip link — fully hidden until focused.
   Uses the standard clip pattern instead of top: -40px, which was leaking a
   sliver into the top-left corner. */
.skip-link {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  background: var(--ssr-blue); color: white;
}
.skip-link:focus {
  position: absolute;
  top: 8px; left: 8px;
  width: auto; height: auto;
  padding: .5rem 1rem;
  clip: auto;
  overflow: visible;
  z-index: 100;
  border-radius: 6px;
}

::selection { background: rgba(29,117,189,.22); color: var(--deep-utility); }
:focus-visible { outline: 2px solid var(--ssr-blue); outline-offset: 3px; border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ TYPOGRAPHY UTILITIES ============ */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ssr-green);
  margin-bottom: var(--space-4);
}
.eyebrow--dark { color: var(--ssr-blue); }
.eyebrow--green { color: var(--ssr-green); }

.section__title {
  font-size: var(--text-2xl);
  color: var(--deep-utility);
  margin-bottom: var(--space-4);
}
.section__lede {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 60ch;
  line-height: 1.5;
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
  cursor: pointer;
  white-space: nowrap;
}
.btn--sm { padding: 0.55rem 1rem; font-size: var(--text-xs); }
.btn--lg { padding: 1rem 1.6rem; font-size: var(--text-base); }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--ssr-blue);
  color: white;
  box-shadow: 0 6px 16px -6px rgba(29,117,189,.5);
}
.btn--primary:hover { background: var(--ssr-blue-hover); transform: translateY(-1px); box-shadow: 0 12px 22px -8px rgba(29,117,189,.55); }

.btn--ghost {
  background: rgba(255,255,255,.08);
  color: white;
  border-color: rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(255,255,255,.16); border-color: white; }

.btn--white { background: white; color: var(--ssr-blue); }
.btn--white:hover { background: var(--clean-fog); transform: translateY(-1px); }

.btn--ghost-light {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,.5);
}
.btn--ghost-light:hover { border-color: white; background: rgba(255,255,255,.08); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ssr-blue);
}
.link-arrow span { transition: transform var(--transition); display: inline-block; }
.link-arrow:hover { color: var(--ssr-blue-hover); }
.link-arrow:hover span { transform: translateX(4px); }

/* ============ HEADER ============ */
.header {
  position: sticky; top: 0; z-index: 50;
  /* Platinum metallic backdrop with dimension: a top highlight sweep sitting on
     a vertical brushed-metal band, plus a soft inner top highlight and bottom
     shadow line so the whole header reads like a machined metal panel. */
  background:
    radial-gradient(ellipse 60% 90% at 22% 8%, rgba(255,255,255,0.85), rgba(255,255,255,0) 60%),
    radial-gradient(ellipse 60% 90% at 82% 12%, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%),
    linear-gradient(180deg,
      #f4f6f9 0%,
      #e4e7ec 32%,
      #c9ced5 55%,
      #d6dae1 72%,
      #eceff3 100%);
  border-bottom: 1px solid rgba(139, 146, 156, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 8px 24px -14px rgba(16, 42, 58, 0.15);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.header.is-scrolled {
  border-bottom-color: rgba(100, 108, 118, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 10px 28px -14px rgba(16, 42, 58, 0.22);
}
.header__inner {
  /* Two-row layout: logo centered up top, nav below */
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-items: center;
  row-gap: var(--space-3);
  min-height: var(--header-h);
  padding-block: var(--space-3);
}
.header__logo {
  display: inline-flex; align-items: center;
  justify-self: center;
  flex-shrink: 0;
  padding: 4px 0;
  transition: transform var(--transition), filter var(--transition);
}
/* ============================================================
   ANIMATED SSR LOGO
   The master logo image is a single PNG (621w x 322h). We split
   it into three horizontal bands using CSS clipping so each part
   — the SSR mark, the wordmark, and the tagline — can animate
   independently while remaining pixel-identical to the source art.

   Band boundaries (from ink-density analysis of the master file):
     mark:    y   0 – 231  (72% of height, includes grass base)
     word:    y 232 – 305  (23% of height)
     tagline: y 306 – 322  ( 5% of height)
   ============================================================ */

:root {
  --ssr-logo-h: 160px;                     /* rendered height on desktop — big enough to read the tagline */
  --ssr-logo-src: url("assets/ssr-logo-transparent.png");        /* full logo, transparent bg */
  --ssr-logo-mark-src: url("assets/ssr-mark-transparent.png");   /* just the SSR mark band, transparent bg */
  --ssr-logo-natural-w: 621;
  --ssr-logo-natural-h: 322;
  --ssr-logo-ratio: calc(621 / 322);       /* width per unit of height */

  /* Platinum metallic palette — top-to-bottom vertical gradient reads as a
     brushed metal disc under directional lighting */
  --platinum-1: #f6f7f9;   /* highlight */
  --platinum-2: #e2e5ea;   /* mid */
  --platinum-3: #b9bec6;   /* shadow band */
  --platinum-4: #cdd2d8;   /* lower midtone */
  --platinum-5: #e8ebef;   /* bottom highlight */
  --platinum-rim: #8b929c; /* rim shadow */
}

.ssr-logo {
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
  text-decoration: none;
}

.ssr-logo__stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  /* Total width preserves the natural aspect ratio at whatever height. */
  width: calc(var(--ssr-logo-h) * var(--ssr-logo-ratio));
  perspective: 900px;
  transform-style: preserve-3d;
}

.ssr-logo__part {
  display: block;
  width: 100%;
  background-image: var(--ssr-logo-src);
  background-repeat: no-repeat;
  /* Each band uses the same source, scaled to the full logo width,
     then vertically positioned to expose only its own band. */
  background-size: 100% calc(var(--ssr-logo-h) * 322 / 322);
  background-color: transparent;
  will-change: transform, opacity, filter;
  transform-origin: center center;
}

/* --- MARK band (SSR + restroom + grass) --- */
/* The mark is now a 3D extruded stack of slabs riding a platinum metallic plate.
   The container itself does the Y-axis spin; preserve-3d lets each layer keep its
   own Z offset during rotation, so the plate + all slabs turn together. */
.ssr-logo__part--mark {
  position: relative;
  height: calc(var(--ssr-logo-h) * (231 / 322));
  background: none; /* moved to individual .ssr-logo__slab layers */
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  backface-visibility: visible;
  animation: ssrMarkIn 900ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both,
             ssrMarkSpin 5s linear 1200ms infinite;
}

/* No backdrop plate on the mark — the header itself carries the platinum finish. */

/* Each slab is one copy of the mark art (transparent PNG, cropped to just the mark band)
   offset in Z. Because the PNG has transparent background, the slab silhouette follows
   the actual logo shape — letters, restroom, grass — not a rectangle. */
.ssr-logo__slab {
  position: absolute;
  inset: 0;
  background-image: var(--ssr-logo-mark-src);
  background-repeat: no-repeat;
  background-position: top center;
  /* Mark image is 621×232; scale it to fully fill the mark band. */
  background-size: 100% 100%;
  transform: translateZ(var(--z));
  will-change: transform;
}

/* Front and back faces — crisp full-color surfaces */
.ssr-logo__slab:first-child,
.ssr-logo__slab:last-child {
  filter: none;
}

/* Interior slabs — slightly desaturated and darkened so the edge stack
   looks like solid material, not translucent glass */
.ssr-logo__slab:not(:first-child):not(:last-child) {
  filter: saturate(0.55) brightness(0.78);
}

/* --- WORD band (SOUTHERN SITE RENTALS) --- */
.ssr-logo__part--word {
  height: calc(var(--ssr-logo-h) * (74 / 322));
  /* Slide the source up so the wordmark shows in this window. */
  background-position: 0 calc(var(--ssr-logo-h) * (-231 / 322));
  animation: ssrWordIn 700ms cubic-bezier(0.22, 1, 0.36, 1) 550ms both;
}

/* --- TAGLINE band (HIGHER STANDARDS. EVERY UNIT. EVERY SITE.) --- */
.ssr-logo__part--tagline {
  height: calc(var(--ssr-logo-h) * (17 / 322));
  background-position: 0 calc(var(--ssr-logo-h) * (-305 / 322));
  animation: ssrTaglineIn 900ms cubic-bezier(0.22, 1, 0.36, 1) 900ms both;
}

/* Hover: faster spin + soft blue shadow */
.ssr-logo:hover .ssr-logo__part--mark {
  animation: ssrMarkSpinHover 2s linear infinite;
  filter: drop-shadow(0 6px 18px rgba(29, 117, 189, 0.32));
}
.ssr-logo:hover .ssr-logo__part--word,
.ssr-logo:hover .ssr-logo__part--tagline {
  transform: translateY(-1px);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Entrance keyframes */
@keyframes ssrMarkIn {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.86) rotateX(18deg); }
  60%  { opacity: 1; transform: translateY(1px)  scale(1.04) rotateX(0deg); }
  100% { opacity: 1; transform: translateY(0)    scale(1)    rotateX(0deg); }
}
@keyframes ssrWordIn {
  0%   { opacity: 0; transform: translateY(10px) scaleY(0.7); }
  100% { opacity: 1; transform: translateY(0)   scaleY(1); }
}
@keyframes ssrTaglineIn {
  0%   { opacity: 0; letter-spacing: -0.1em; transform: translateY(4px); filter: blur(2px); }
  100% { opacity: 1; letter-spacing: normal;  transform: translateY(0);  filter: blur(0); }
}

/* Ambient loop: full 360° spin on the Y axis — like a quarter spinning on a table.
   Linear timing keeps the rotation feeling continuous instead of pulsing at each pass. */
@keyframes ssrMarkSpin {
  0%   { transform: perspective(900px) rotateY(0deg); }
  100% { transform: perspective(900px) rotateY(360deg); }
}

/* Faster spin on hover */
@keyframes ssrMarkSpinHover {
  0%   { transform: perspective(900px) rotateY(0deg); }
  100% { transform: perspective(900px) rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ssr-logo__part,
  .ssr-logo__part--mark,
  .ssr-logo__part--word,
  .ssr-logo__part--tagline {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (max-width: 900px) {
  :root { --header-h: 156px; --ssr-logo-h: 108px; }
}
@media (max-width: 640px) {
  :root { --header-h: 122px; --ssr-logo-h: 78px; }
}

.header__nav {
  display: flex; align-items: center; gap: var(--space-6);
}
.nav-list {
  display: flex; align-items: center; gap: var(--space-6);
}
.nav-list a {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--deep-utility);
  padding: .5rem 0;
  position: relative;
}
.nav-list a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  height: 2px; width: 0;
  background: var(--ssr-green);
  transition: width var(--transition);
}
.nav-list a:hover::after, .nav-list a:focus-visible::after { width: 100%; }

.header__toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 10px;
  border-radius: var(--radius-md);
  flex-direction: column; justify-content: space-between;
}
.header__toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--ssr-green);       /* brand green hamburger bars */
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition), background-color var(--transition);
}
.header__toggle:hover span,
.header__toggle:focus-visible span {
  background: var(--ssr-green-hover);
}
.header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.mobile-menu {
  display: none;
  padding: var(--space-4) clamp(1rem, 4vw, 2rem) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: white;
}
.mobile-menu nav {
  display: flex; flex-direction: column; gap: var(--space-2);
}
.mobile-menu a {
  padding: .8rem 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--deep-utility);
  border-bottom: 1px solid var(--color-border);
}
.mobile-menu a.btn { border: none; margin-top: var(--space-3); }
.mobile-menu.is-open { display: block; }

@media (max-width: 960px) {
  .header__nav { display: none; }
  .header__toggle { display: flex; }
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: min(760px, 92vh);
  display: flex; align-items: center;
  color: white;
  overflow: hidden;
  padding: calc(var(--header-h) + var(--space-16)) 0 var(--space-32);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center right; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(16,42,58,.85) 0%, rgba(16,42,58,.55) 45%, rgba(16,42,58,.15) 75%, rgba(16,42,58,.05) 100%),
    linear-gradient(180deg, rgba(16,42,58,.35) 0%, rgba(16,42,58,0) 40%, rgba(16,42,58,.55) 100%);
}
.hero__inner {
  position: relative; z-index: 1;
  max-width: 780px;
}
.hero .eyebrow { color: #7EE38E; }
.hero__title {
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: white;
  margin-bottom: var(--space-6);
}
.hero__title-accent { color: #7EE38E; }
.hero__lede {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: rgba(255,255,255,.9);
  max-width: 58ch;
  margin-bottom: var(--space-8);
}
.hero__cta {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.hero__badges {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  color: rgba(255,255,255,.85);
  font-size: var(--text-sm);
  font-weight: 500;
}
.hero__badges li { display: inline-flex; align-items: center; gap: .5rem; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot--green { background: var(--ssr-green); box-shadow: 0 0 0 3px rgba(58,181,74,.25); }

.hero__sweep {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 100px;
  z-index: 1;
  pointer-events: none;
}
.hero__sweep svg { width: 100%; height: 100%; }

@media (max-width: 640px) {
  .hero { min-height: 700px; padding-top: calc(var(--header-h) + var(--space-12)); padding-bottom: var(--space-24); }
  .hero__bg img { object-position: 65% center; }
  .hero__badges { gap: var(--space-3) var(--space-5); }
  .hero__cta .btn { width: 100%; }
}

/* ============ TRUST STRIP ============ */
.trust {
  background: var(--deep-utility);
  color: white;
  position: relative;
  z-index: 2;
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: var(--space-8) 0;
  gap: var(--space-6);
}
.trust__item {
  display: flex; flex-direction: column; gap: 4px;
  padding-inline: var(--space-4);
  border-left: 2px solid rgba(58,181,74,.5);
}
.trust__item:first-child { border-left: none; }
.trust__item strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: white;
  letter-spacing: -0.01em;
}
.trust__item span {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.75);
}
@media (max-width: 768px) {
  .trust__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .trust__item:nth-child(3) { border-left: none; }
}

/* ============ SECTIONS ============ */
.section {
  padding-block: clamp(4rem, 8vw, 7rem);
  position: relative;
}
.section__head {
  max-width: 780px;
  margin-bottom: var(--space-12);
}
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .section__lede { margin-inline: auto; }

/* ============ SERVICES ============ */
.services { background: var(--clean-fog); }
.services__grid {
  display: grid;
  /* Two site/event cards on the top row, then a wide contract card on row 2 */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
@media (max-width: 720px) {
  .services__grid { grid-template-columns: 1fr; }
}
.service-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  border: 1px solid var(--color-border);
  display: flex; flex-direction: column;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.service-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--clean-fog-2);
}
.service-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover .service-card__media img { transform: scale(1.05); }
.service-card__tag {
  position: absolute; top: var(--space-3); left: var(--space-3);
  background: var(--ssr-blue); color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-full);
}
.service-card__tag--green { background: var(--ssr-green); }
.service-card__tag--blue { background: var(--deep-utility); }

.service-card__body {
  padding: var(--space-6);
  display: flex; flex-direction: column;
  gap: var(--space-4);
  flex-grow: 1;
}
.service-card__body h3 {
  font-size: var(--text-xl);
  color: var(--deep-utility);
}
.service-card__body p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.55;
}
.service-card__body ul {
  list-style: none;
  display: flex; flex-direction: column; gap: .5rem;
  margin-top: -.5rem;
}
.service-card__body ul li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.service-card__body ul li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px;
  background: var(--ssr-green);
  border-radius: 50%;
}
.service-card__body .link-arrow { margin-top: auto; }

/* Wide contract card — spans full row, image-left content-right on desktop */
.services__grid .service-card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
}
.services__grid .service-card--wide .service-card__media {
  aspect-ratio: auto;
  width: 46%;
  flex: 0 0 46%;
  align-self: stretch;
}
.services__grid .service-card--wide .service-card__body {
  flex: 1 1 auto;
  padding: var(--space-8);
  justify-content: center;
}
.services__grid .service-card--wide h3 {
  font-size: var(--text-2xl);
}
@media (max-width: 900px) {
  .services__grid .service-card--wide {
    flex-direction: column;
  }
  .services__grid .service-card--wide .service-card__media {
    width: 100%;
    flex: 0 0 auto;
    aspect-ratio: 4 / 3;
  }
  .services__grid .service-card--wide .service-card__body {
    padding: var(--space-6);
  }
}

/* ============ WHY ============ */
.why { background: white; overflow: hidden; }
.why__sweep {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.why__sweep svg { width: 100%; height: 100%; }
.why .container { position: relative; z-index: 1; }
.why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}
.why__card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.why__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--ssr-blue);
}
.why__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--ssr-blue), #2A8BD8);
  color: white;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5);
}
.why__icon svg { width: 24px; height: 24px; }
.why__card:nth-child(even) .why__icon { background: linear-gradient(135deg, var(--ssr-green), #4CC85D); }
.why__card h3 {
  font-size: var(--text-lg);
  color: var(--deep-utility);
  margin-bottom: var(--space-3);
}
.why__card p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* ============ SERVICE AREA ============ */
.service-area { background: var(--clean-fog); }
.service-area__map {
  background: white;
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-top: var(--space-10);
}
.service-area__map svg,
.service-area__map img { width: 100%; height: auto; max-width: 1040px; margin-inline: auto; display: block; }
.service-area__note {
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.area-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.area-list--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.area-list li {
  padding: var(--space-4) var(--space-5);
  background: white;
  border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: 2px;
  border-left: 3px solid var(--ssr-green);
  box-shadow: var(--shadow-sm);
}
.area-list strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--deep-utility);
}
.area-list span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.pin { transition: transform var(--transition); }

@media (max-width: 900px) {
  .area-list--grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .area-list--grid { grid-template-columns: 1fr; }
}

/* ============ QUOTE ============ */
.quote {
  background: linear-gradient(180deg, white 0%, var(--clean-fog) 100%);
}
.quote__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--space-16);
  align-items: start;
}
.quote__contact {
  display: flex; flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.quote__contact-item {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition), transform var(--transition);
}
.quote__contact-item:hover {
  border-color: var(--ssr-blue);
  transform: translateY(-1px);
}
.quote__contact-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--ssr-blue);
  color: white;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.quote__contact-item span:last-child { display: flex; flex-direction: column; gap: 2px; }
.quote__contact-item small {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.quote__contact-item strong {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--deep-utility);
}

.quote__form {
  background: white;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  gap: var(--space-4);
}
.field {
  display: flex; flex-direction: column;
  gap: 6px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.field label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep-utility);
}
.field label span { color: var(--ssr-green); }
.field input,
.field select,
.field textarea {
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: white;
  font-size: var(--text-base);
  transition: border-color var(--transition), box-shadow var(--transition);
  font-family: var(--font-body);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ssr-blue);
  box-shadow: 0 0 0 4px rgba(29,117,189,.14);
}
.field textarea { resize: vertical; min-height: 88px; }
.field input:invalid:not(:placeholder-shown) { border-color: #C34848; }

.quote__form-fine {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-align: center;
  margin-top: -4px;
}
.quote__success {
  padding: var(--space-5);
  background: rgba(58,181,74,.1);
  border: 1px solid var(--ssr-green);
  border-radius: var(--radius-md);
  color: var(--deep-utility);
  display: flex; flex-direction: column; gap: 4px;
  text-align: center;
}
.quote__success[hidden] { display: none !important; }
.quote__success strong { font-family: var(--font-display); font-size: var(--text-lg); color: var(--ssr-green); }

@media (max-width: 900px) {
  .quote__grid { grid-template-columns: 1fr; gap: var(--space-10); }
}
@media (max-width: 520px) {
  .field-row { grid-template-columns: 1fr; }
}

/* ============ FAQ ============ */
.faq { background: white; }
.faq__wrap { max-width: 820px; margin-inline: auto; }
.faq__list {
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.faq__item {
  background: var(--clean-fog);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition), background var(--transition);
}
.faq__item[open] {
  background: white;
  border-color: var(--ssr-blue);
  box-shadow: var(--shadow-md);
}
.faq__item summary {
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--deep-utility);
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  width: 24px; height: 24px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D75BD' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform var(--transition);
}
.faq__item[open] summary::after { transform: rotate(180deg); }
.faq__item p {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.6;
}

/* ============ FINAL CTA ============ */
.cta-band {
  background: linear-gradient(135deg, var(--ssr-blue) 0%, var(--ssr-blue-dark) 60%, var(--deep-utility) 100%);
  color: white;
  padding: clamp(3rem, 6vw, 5rem) 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before, .cta-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.cta-band::before { top: -80px; left: -60px; width: 300px; height: 300px; background: rgba(58,181,74,.35); }
.cta-band::after { bottom: -80px; right: -60px; width: 340px; height: 340px; background: rgba(29,117,189,.55); }
.cta-band__inner {
  text-align: center;
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-4);
}
.cta-band h2 {
  font-size: var(--text-2xl);
  color: white;
  max-width: 20ch;
}
.cta-band p {
  color: rgba(255,255,255,.85);
  font-size: var(--text-lg);
}
.cta-band__buttons {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-4);
  justify-content: center;
}
@media (max-width: 500px) {
  .cta-band__buttons .btn { width: 100%; }
}

/* ============ FOOTER ============ */
.footer {
  background: var(--deep-utility);
  color: rgba(255,255,255,.75);
  padding: var(--space-16) 0 var(--space-6);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}
.footer__brand .footer__logo {
  margin-bottom: var(--space-4);
  background: white;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  display: inline-block;
}
.footer__brand .footer__logo img {
  display: block;
  height: 80px;
  width: auto;
}
.footer__blurb {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: rgba(255,255,255,.65);
  max-width: 32ch;
}
.footer h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: white;
  margin-bottom: var(--space-4);
}
.footer ul {
  list-style: none;
  display: flex; flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.footer a { color: rgba(255,255,255,.75); transition: color var(--transition); }
.footer a:hover { color: var(--ssr-green); }
.footer__contact li:not(:has(a)) { color: rgba(255,255,255,.6); }

.footer__social {
  display: flex; gap: var(--space-3);
  margin-top: var(--space-5);
}
.footer__social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center;
  color: white;
  transition: background var(--transition), transform var(--transition);
}
.footer__social a:hover { background: var(--ssr-green); transform: translateY(-2px); color: white; }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: var(--space-5);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--space-3);
  font-size: var(--text-xs);
  color: rgba(255,255,255,.5);
}

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
}
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ============ REVEAL ANIMATIONS ============ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 100ms; }
.reveal--delay-2 { transition-delay: 200ms; }
.reveal--delay-3 { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .header__logo-img { animation: none; }
}

/* ============ CALCULATOR ============ */
.calculator { background: var(--clean-fog); }
.calc {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  max-width: 1080px;
  margin-inline: auto;
}
.calc__tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  background: var(--clean-fog);
}
.calc__tab {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1.1rem 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.calc__tab:hover { color: var(--deep-utility); background: rgba(29,117,189,.04); }
.calc__tab.is-active {
  color: var(--ssr-blue);
  background: white;
  border-bottom-color: var(--ssr-green);
}
.calc__tab svg { flex-shrink: 0; }

.calc__panels { padding: clamp(1.5rem, 3vw, 2.5rem); }
.calc__panel { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-10); align-items: start; }
.calc__panel[hidden] { display: none; }
.calc__inputs { display: flex; flex-direction: column; gap: var(--space-5); }
.calc__checks { display: flex; flex-direction: column; gap: .55rem; }
.chk {
  display: inline-flex; align-items: center; gap: .6rem;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.chk input[type="checkbox"] {
  width: 20px; height: 20px;
  accent-color: var(--ssr-blue);
  cursor: pointer;
}

.calc__result {
  background: linear-gradient(160deg, var(--ssr-blue) 0%, var(--ssr-blue-dark) 65%, var(--deep-utility) 100%);
  color: white;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
  min-height: 100%;
  display: flex; flex-direction: column; gap: var(--space-4);
}
.calc__result::before {
  content: "";
  position: absolute; top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(58,181,74,.35) 0%, transparent 70%);
  pointer-events: none;
}
.calc__result-headline {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-2);
  position: relative; z-index: 1;
}
.calc__result-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7EE38E;
}
.calc__result-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: white;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.calc__result-number.is-bump { transform: scale(1.08); }
.calc__result-unit {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: rgba(255,255,255,.9);
  letter-spacing: 0.02em;
}
.calc__result-list {
  list-style: none;
  display: flex; flex-direction: column; gap: .6rem;
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: var(--space-4);
  position: relative; z-index: 1;
}
.calc__result-list li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: rgba(255,255,255,.9);
}
.calc__result-list li strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  color: #7EE38E;
}
.calc__basis {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,.15);
  font-size: var(--text-xs);
  color: rgba(255,255,255,.75);
  line-height: 1.5;
  position: relative; z-index: 1;
}

.calc__cta {
  padding: var(--space-6) clamp(1.5rem, 3vw, 2.5rem) var(--space-8);
  border-top: 1px solid var(--color-border);
  background: white;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.calc__disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  max-width: 60ch;
}
.calc__disclaimer a { color: var(--ssr-blue); font-weight: 600; }

@media (max-width: 820px) {
  .calc__panel { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 480px) {
  .calc__tab { font-size: var(--text-sm); padding: .9rem .5rem; }
  .calc__tab svg { width: 16px; height: 16px; }
}