/* =============================================
   GREEN CABLE SOLUTIONS - Global Stylesheet
   Color Palette:
     Primary Green : #2BBF5A
     Dark Green    : #1A8A3F
     Light Green   : #E6F9ED
     White         : #FFFFFF
     Dark          : #111827
     Mid Gray      : #6B7280
     Light Gray    : #F9FAFB
     Border        : #E5E7EB
   ============================================= */

/* ─── RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green:       #00D858;
  --green-dark:  #1A8A3F;
  --green-light: #E6F9ED;
  --green-mid:   #D1F4DE;
  --white:       #FFFFFF;
  --dark:        #111827;
  --gray:        #6B7280;
  --light:       #F9FAFB;
  --border:      #E5E7EB;
  --shadow:      0 4px 24px rgba(0,0,0,.07);
  --shadow-lg:   0 16px 48px rgba(0,0,0,.11);
  --radius:      12px;
  --radius-lg:   20px;
  --transition:  all .25s ease;
}

html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--dark);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
  word-break: break-word;
  overflow-wrap: break-word;
  user-select: none;
  -webkit-user-select: none;
}

/* Restore selection on interactive elements only - no touch-action override */
a, button, input, textarea, select, label {
  user-select: auto;
  -webkit-user-select: auto;
}

img { max-width: 100%; display: block; height: auto; }
svg { max-width: 100%; display: block; }
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ─── TYPOGRAPHY ─── */
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.2;  letter-spacing: -.015em; }
h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
h4 { font-size: 1rem;    font-weight: 600; }
p  { color: var(--gray); }

.highlight { color: var(--green); }
.tag {
  display: inline-block;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .35rem .85rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

/* ─── LAYOUT ─── */
.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; }
.section    { padding: 6rem 0; }
.section-sm { padding: 4rem 0; }
.section-light { background: var(--light); }
.section-dark  { background: var(--dark); }

/* Section intro block: centered heading group used before grid content */
.section-intro {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 3.5rem;
}
.section-intro-wide {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 3rem;
}

/* Flex row used inside CTA band and page hero for button groups */
.cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Two-column FAQ layout: narrow label column + wider accordion column */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
}

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 2rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  border: 2px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}
.btn-primary:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(43,191,90,.3);
}
.btn-outline {
  background: transparent;
  color: var(--green);
  border-color: var(--green);
}
.btn-outline:hover {
  background: var(--green);
  color: var(--white);
  transform: translateY(-2px);
}
.btn-white {
  background: var(--white);
  color: var(--green-dark);
  border-color: var(--white);
}
.btn-white:hover {
  background: var(--green-light);
  transform: translateY(-2px);
}
.btn-lg { padding: 1.1rem 2.75rem; font-size: 1.05rem; }
.btn-sm { padding: .6rem 1.4rem; font-size: .85rem; }
.btn:disabled,
.btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ─── NAVIGATION (Staggered Menu) ─── */
/* Fixed full-screen wrapper. pointer-events:none lets page
   content stay clickable when the panel is closed. The panel
   and header children restore pointer-events with :auto. */
.sm-wrapper {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  overflow: hidden; /* clips prelayers + panel when offscreen */
  pointer-events: none;
}

/* ─ Header bar (always visible) ─ */
.sm-header {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 2rem;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 20;
  pointer-events: auto;
  transition: box-shadow .25s ease;
}
.sm-header.scrolled { box-shadow: var(--shadow); }

.sm-logo-link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  max-width: calc(100vw - 3rem);
}
.sm-logo-svg {
  height: 50px;
  width: auto;
  max-width: 100%;
  display: block;
}

/* ─ Toggle button ─ */
.sm-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--dark);
  font-size: .95rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  line-height: 1;
  padding: .5rem;
  pointer-events: auto;
}
.sm-toggle:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Text wrapper clips the two-line Menu/Close slide */
.sm-textwrap {
  display: inline-block;
  height: 1em;
  min-width: 3.6em; /* wide enough for 'Close' */
  overflow: hidden;
  white-space: nowrap;
}
.sm-textinner {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.sm-textline {
  display: block;
  height: 1em;
  line-height: 1;
}

/* Plus/cross icon: two lines rotated by GSAP */
.sm-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
.sm-icon-h,
.sm-icon-v {
  position: absolute;
  left: 50%; top: 50%;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* ─ Pre-layers (staggered green wipes) ─ */
.sm-prelayers {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: clamp(280px, 42vw, 480px);
  pointer-events: none;
  z-index: 5;
  /* Initial off-screen position set by JS; CSS kept as no-op so GSAP owns the transform */
}
.sm-prelayer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sm-prelayer:first-child { background: var(--green); }
.sm-prelayer:last-child  { background: var(--green-dark); }

/* ─ Slide-in panel ─ */
.sm-panel {
  position: absolute;
  top: 0; left: 0;
  width: clamp(280px, 42vw, 480px);
  height: 100%;
  background: var(--white);
  display: flex;
  flex-direction: column;
  padding: 6rem 2.5rem 2.5rem;
  overflow-y: auto;
  z-index: 10;
  pointer-events: auto;
  /* No CSS transform here - GSAP owns position via inline style */
}
.sm-panel-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ─ Nav item list ─ */
.sm-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  counter-reset: smItem;
}
.sm-item-wrap {
  position: relative;
  overflow: hidden;
  line-height: 1;
}
.sm-item-wrap::after {
  counter-increment: smItem;
  content: counter(smItem, decimal-leading-zero);
  position: absolute;
  top: 50%; right: 1.5rem;
  transform: translateY(-50%);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--dark);
  opacity: var(--sm-num-opacity, 0);
  pointer-events: none;
  user-select: none;
}
.sm-item {
  position: relative;
  display: block;
  color: var(--dark);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.12;
  transition: color .2s ease;
}
.sm-item:hover  { color: var(--green); }
.sm-item.active { color: var(--green); }

/* Book a Service: same size as other nav items */
.sm-item-cta       { color: var(--green); font-size: clamp(1.5rem, 3vw, 2.4rem); }
.sm-item-cta:hover { color: var(--green); }

.sm-item-label {
  display: inline-block;
  will-change: transform;
  transform-origin: 50% 100%;
}

/* ─── PAGE HEADER HERO ─── */
.page-hero {
  padding: 8rem 0 4rem;
  background: linear-gradient(160deg, var(--light) 0%, var(--white) 60%, var(--green-light) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--green-mid) 0%, transparent 70%);
  opacity: .45;
  pointer-events: none;
}

/* ─── DIVIDER ─── */
.divider {
  width: 56px;
  height: 4px;
  background: var(--green);
  border-radius: 2px;
  margin: 1rem auto 1.5rem;
}
.divider-left { margin-left: 0; }

/* ─── CARDS ─── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--green-mid);
}

/* ─── ICON BOX ─── */
.icon-box {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}
.icon-box svg { width: 26px; height: 26px; stroke: var(--white); stroke-width: 2; fill: none; }

/* ─── GRID HELPERS ─── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

/* ─── FORM ELEMENTS ─── */
.form-group { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.25rem; }
.form-group label { font-size: .875rem; font-weight: 600; color: var(--dark); }
.form-group input,
.form-group select,
.form-group textarea {
  padding: .85rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--dark);
  background: var(--white);
  transition: var(--transition);
  outline: none;
  width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(43,191,90,.12);
}
.form-group input.field-error,
.form-group select.field-error,
.form-group textarea.field-error {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.10);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #C4C9D4;
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ─── CHECK LIST ─── */
.check-list { display: flex; flex-direction: column; gap: .6rem; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .95rem;
  color: var(--dark);
}
.check-list li::before {
  content: '✓';
  min-width: 22px;
  height: 22px;
  background: var(--green-light);
  color: var(--green-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: .1rem;
}

/* ─── PRICING CARDS ─── */
.pricing-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  position: relative;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.pricing-card:hover {
  border-color: var(--green);
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}
.pricing-card.featured {
  border-color: var(--green);
  background: var(--dark);
  color: var(--white);
}
.pricing-card.featured p { color: #9CA3AF; }
.pricing-card.featured .check-list li { color: #E5E7EB; }
.pricing-badge {
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--green);
  color: var(--white);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .3rem 1.1rem;
  border-radius: 999px;
  white-space: nowrap;
}
.pricing-price {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin: 1.25rem 0;
}
.pricing-price .amount {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--dark);
}
.pricing-card.featured .pricing-price .amount { color: var(--white); }
.pricing-price .currency {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--green);
  align-self: flex-start;
  margin-top: .3rem;
}
.pricing-price .period { font-size: .9rem; color: var(--gray); }
.pricing-card .btn { margin-top: auto; }
.pricing-card .btn-spacer { padding-top: 2rem; }

/* ─── COMPARISON TABLE ─── */
.comparison-table { color: var(--dark); }
.comparison-table tr { border-bottom: 1px solid var(--dark); }
.comparison-table td { color: var(--dark); }
.comparison-table td.no-feature { color: #9CA3AF; }
/* Tick cells: larger, heavier, darker green for clear visibility */
.comparison-table tbody td:not(:first-child):not(.no-feature) {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--green-dark) !important;
}
/* Row hover: highlight full row, keep featured column bg */
.comparison-table tbody tr {
  transition: background-color .15s ease;
}
.comparison-table tbody tr:hover td {
  background-color: #EEF9F3 !important;
}

/* ─── STATS ─── */
.stat-block { text-align: center; }
.stat-block .number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
  margin-bottom: .4rem;
}
.stat-block .label {
  font-size: .875rem;
  color: var(--gray);
  font-weight: 500;
}

/* ─── CTA BAND ─── */
.cta-band {
  background: var(--dark);
  border-radius: var(--radius-lg);
  padding: 4rem 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, var(--green) 0%, transparent 70%);
  opacity: .2;
  pointer-events: none;
}
.cta-band h2 { color: var(--white); }
.cta-band p  { color: #9CA3AF; max-width: 520px; margin: .75rem auto 2rem; }

/* ─── ACCORDION (FAQ) ─── */
.accordion-item {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: .75rem;
  transition: var(--transition);
}
.accordion-item.open { border-color: var(--green); }
.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--dark);
  background: var(--white);
  gap: 1rem;
}
.accordion-icon {
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  transition: var(--transition);
}
.accordion-item.open .accordion-icon {
  background: var(--green);
  color: var(--white);
  transform: rotate(45deg);
}
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
}
.accordion-body.open {
  max-height: 400px;
  padding: 0 1.5rem 1.25rem;
}
.accordion-body p { font-size: .95rem; }

/* ─── STEP INDICATOR ─── */
.step-list { display: flex; flex-direction: column; gap: 0; }
.step-item {
  display: flex;
  gap: 1.5rem;
  position: relative;
}
.step-item:not(:last-child) .step-line {
  position: absolute;
  left: 19px;
  top: 48px;
  bottom: 0;
  width: 2px;
  background: var(--green-mid);
}
.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-content { padding-bottom: 2rem; }
.step-content h4 { margin-bottom: .35rem; }

/* ─── JOURNEY STEPPER ─── */
.journey-stepper {
  max-width: 760px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow);
}

/* Indicator track */
.jstepper-track {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2.5rem;
}
.jstepper-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.jstepper-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .875rem;
  background: var(--light);
  border: 2px solid var(--border);
  color: var(--gray);
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.jstep-check { display: none; width: 1rem; height: 1rem; }
.jstepper-indicator.complete .jstep-check { display: block; }
.jstepper-indicator.complete .jstep-num  { display: none; }
.jstepper-indicator.active .jstepper-circle,
.jstepper-indicator.complete .jstepper-circle {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.jstep-label {
  font-size: .7rem;
  font-weight: 600;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: color .25s ease;
}
.jstepper-indicator.active .jstep-label,
.jstepper-indicator.complete .jstep-label { color: var(--green-dark); }

/* Connector lines */
.jstepper-connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  margin: 1.25rem .4rem 0;
  position: relative;
  overflow: hidden;
}
.jstepper-connector::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0;
  background: var(--green);
  border-radius: 2px;
  transition: width .4s ease;
}
.jstepper-connector.complete::after { width: 100%; }

/* Content viewport: CSS grid stacking so height = tallest panel */
.jstepper-viewport {
  display: grid;
  min-height: 200px;
}
.jstepper-panel {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateX(48px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.jstepper-panel.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.jstepper-panel.past { transform: translateX(-48px); }

/* Panel content layout */
.jstepper-panel-inner {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: .25rem 0 .5rem;
}
.jstepper-panel-text h3 { margin-bottom: .5rem; }
.jstepper-panel-text > p { font-size: .95rem; margin-bottom: 0; }

/* Footer navigation */
.jstepper-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.jstepper-progress {
  font-size: .875rem;
  color: var(--gray);
  font-weight: 500;
}
.jstepper-footer .btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.jstepper-footer .btn:disabled,
.jstepper-footer .btn[disabled] {
  opacity: .3;
  cursor: default;
  pointer-events: none;
  transform: none;
}


.alert {
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 500;
  display: none;
  align-items: flex-start;
  gap: .75rem;
  margin-top: 1rem;
  line-height: 1.5;
}
.alert-success {
  background: var(--green-light);
  color: var(--green-dark);
  border: 1px solid var(--green-mid);
}
.alert-error {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}
.alert.show { display: flex; }

/* ─── FOOTER ─── */
.footer {
  background: var(--dark);
  padding: 5rem 0 2.5rem;
  color: #fff;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 3rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand p { font-size: .9rem; margin: 1rem 0 1.5rem; max-width: 280px; color: #fff; }
.footer-brand .nav-logo img,
.footer-brand .nav-logo svg { height: 40px; }
.footer-heading {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.25rem;
}
.footer-links { display: flex; flex-direction: column; gap: .6rem; }
.footer-links a {
  font-size: .9rem;
  color: #fff;
  transition: var(--transition);
}
.footer-links a:hover { color: var(--green); }
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .9rem;
  margin-bottom: .85rem;
}
.footer-contact-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(43,191,90,.15);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .9rem;
}
.footer-contact-icon svg { width: 16px; height: 16px; stroke: var(--green); stroke-width: 2; fill: none; }
.footer-contact-item > span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  font-size: .85rem;
}
.footer-bottom a { color: var(--green); }

/* ─── LOGO MARK (SVG dot ring) ─── */
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 38px;
  height: 38px;
}

/* ─── ANIMATED LOGO RINGS ─── */
.outer-ring {
  animation: spin-cw 14s linear infinite;
  transform-origin: 0 0;
}
.inner-ring {
  animation: spin-ccw 9s linear infinite;
  transform-origin: 0 0;
}
@keyframes spin-cw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes spin-ccw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
.outer-ring circle,
.inner-ring circle {
  animation: dot-glow 2.5s ease-in-out infinite alternate;
}
@keyframes dot-glow {
  0%   { opacity: .75; }
  100% { opacity: 1; }
}
.gcs-icon-mark {
  width: 48px;
  height: 48px;
  display: block;
  margin: 0 auto 1.25rem;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* Full-width panel on mobile, logo shrinks */
@media (max-width: 860px) {
  .sm-prelayers,
  .sm-panel {
    width: 100%;
    left: 0;
  }
}

@media (max-width: 768px) {
  .sm-header { padding: 0 1.25rem; align-items: center; }
  .sm-logo-link { top: 50%; transform: translate(-50%, -50%); max-width: calc(100vw - 3rem); }
  .sm-logo-svg { height: 44px; width: auto; max-width: 100%; }
  /* Push nav list down so Close button doesn't overlap it */
  .sm-panel { padding-top: 9.5rem; }
  /* Float the toggle below the header bar */
  .sm-toggle {
    position: absolute;
    top: 88px;
    left: 1.25rem;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .55rem 1.1rem;
    box-shadow: var(--shadow);
  }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: .75rem; text-align: center; }
  .cta-band { padding: 3rem 1.5rem; }
  .section { padding: 4rem 0; }
  .faq-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 480px) {
  .page-hero { padding: 7rem 0 3rem; }
}

/* ─── PAGE-SPECIFIC: INDEX ─── */
.hero {
  display: flex;
  align-items: center;
  background: linear-gradient(155deg, #FAFFFE 0%, var(--white) 55%, var(--green-light) 100%);
  padding: 8rem 0 4.5rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, var(--green-mid) 0%, transparent 65%);
  opacity: .5;
  pointer-events: none;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
  max-width: 860px;
  margin: 0 auto;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .5rem 1.15rem;
  border-radius: 999px;
  margin-bottom: 1.75rem;
}
.hero-badge::before { content: none; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}
.hero h1 { margin-bottom: 1.5rem; }
.hero p { font-size: 1.1rem; max-width: 540px; margin: 0 auto 1.25rem; line-height: 1.7; }
.hero-content { text-align: center; }
.hero-badge { margin-left: auto; margin-right: auto; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.hero-trust {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray);
}
.hero-trust-icon { color: var(--green); stroke: var(--green); flex-shrink: 0; }

/* Mock server rack visual */
.hero-visual {
  position: relative;
}
.rack-mockup {
  background: #0F1C1E;
  border-radius: 20px;
  padding: 2rem 1.5rem;
  border: 2px solid rgba(43,191,90,.25);
  box-shadow: 0 32px 80px rgba(0,0,0,.25), 0 0 0 1px rgba(43,191,90,.1);
  position: relative;
}
.rack-unit {
  height: 28px;
  border-radius: 6px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  padding: 0 .75rem;
  gap: .5rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.rack-unit.server {
  background: #1A2E35;
  color: #6EE7A0;
  border: 1px solid rgba(43,191,90,.2);
}
.rack-unit.active {
  background: linear-gradient(90deg, #1A2E35, #0E2A1F);
  color: var(--green);
  border: 1px solid rgba(43,191,90,.35);
}
.rack-unit .led {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: blink 1.5s infinite;
  margin-left: auto;
}
@keyframes blink {
  0%,100% { opacity: 1; }
  50% { opacity: .2; }
}
.rack-unit .led-off { background: #555; animation: none; }
.rack-unit .led-warn { background: #F59E0B; }
.rack-tag { font-size: .65rem; color: #4B9563; letter-spacing: .03em; }
.rack-cable-area {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  gap: 3px;
}
.cable { height: 60px; width: 8px; border-radius: 4px; }
.cable-g { background: linear-gradient(180deg, #2BBF5A, #1A8A3F); opacity: .9; }
.cable-b { background: linear-gradient(180deg, #3B82F6, #1D4ED8); opacity: .7; }
.cable-y { background: linear-gradient(180deg, #F59E0B, #D97706); opacity: .7; }
.cable-w { background: linear-gradient(180deg, #E5E7EB, #9CA3AF); opacity: .5; }

/* Hero Results Card (light hero visual) */
.hero-results-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-lg);
}
.hero-results-header {
  font-size: .65rem;
  color: var(--green-dark);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.hero-result-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .4rem 0;
}
.hero-result-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hero-result-icon svg { width: 16px; height: 16px; stroke-width: 2; fill: none; }
.hero-result-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: .3rem;
}
.hero-result-meta span:first-child { font-size: .78rem; font-weight: 600; color: var(--dark); }
.hero-result-meta span:last-child  { font-size: .78rem; font-weight: 700; }
.hero-result-track { height: 6px; border-radius: 4px; }
.hero-result-fill  { height: 100%; border-radius: 4px; }
.hero-results-footer {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.hero-results-footer-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--gray);
}
.hero-results-footer-item svg { width: 13px; height: 13px; stroke: var(--green); fill: none; }

.rack-floating-badge {
  position: absolute;
  background: var(--green);
  color: var(--white);
  font-size: .75rem;
  font-weight: 700;
  padding: .5rem 1rem;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(43,191,90,.4);
  white-space: nowrap;
}
.rack-badge-1 { top: -20px; right: -20px; }
.rack-badge-2 {
  bottom: -20px; left: -20px;
  background: var(--white);
  color: var(--dark);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* ─── SERVICE ICONS STRIP ─── */
.service-strip {
  padding: 2rem 0;
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.strip-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}
.strip-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--gray);
  flex-shrink: 0;
}
.strip-item .icon { color: var(--green); font-size: 1.1rem; display: flex; align-items: center; }
.strip-item .icon svg { width: 18px; height: 18px; stroke: var(--green); stroke-width: 2; fill: none; }

/* ─── ABOUT PAGE ─── */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.about-img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.about-placeholder {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.about-placeholder::after {
  content: '';
  position: absolute;
  bottom: -60px; right: -60px;
  width: 250px; height: 250px;
  background: radial-gradient(circle, var(--green) 0%, transparent 65%);
  opacity: .06;
}
.about-stat-card {
  position: absolute;
  bottom: -20px; right: -24px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  box-shadow: var(--shadow-lg);
  text-align: center;
  z-index: 10;
  border: 1px solid var(--border);
}
.about-stat-card .number { font-size: 2rem; font-weight: 800; color: var(--green); }
.about-stat-card .label { font-size: .75rem; font-weight: 600; color: var(--gray); }

.value-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--green);
  border-radius: var(--radius);
  transition: var(--transition);
}
.value-card:hover { border-color: var(--green-dark); background: var(--light); }

/* ─── TEAM CARD ─── */
.team-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  transition: var(--transition);
}
.team-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.team-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1rem;
  border: 3px solid var(--green-mid);
}

/* ─── CONTACT PAGE ─── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 4rem;
  align-items: start;
}
.contact-info-card {
  background: var(--dark);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  color: var(--white);
  overflow: hidden;
}
.contact-info-card p { color: #fff; }
.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.contact-detail:last-of-type { border: none; }
.contact-detail-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(43,191,90,.15);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.contact-detail-icon svg { width: 20px; height: 20px; stroke: var(--green); stroke-width: 2; fill: none; }
.contact-detail-text {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.contact-detail-text strong { display: block; color: var(--white); font-size: .85rem; font-weight: 600; margin-bottom: .2rem; }
.contact-detail-text span { font-size: .875rem; }

/* ─── BOOKING PAGE ─── */
.booking-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4rem;
  align-items: start;
}
.booking-summary {
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: sticky;
  top: 100px;
}
.booking-summary h3 { margin-bottom: 1.5rem; }
.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: .75rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .9rem;
}
.summary-line:last-of-type { border: none; }
.summary-line .key { color: var(--gray); }
.summary-line .val { font-weight: 600; text-align: right; max-width: 55%; }
/* ─── BOOKING STEPPER ─── */
.bk-stepper {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.bk-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.progress-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  font-weight: 700;
  color: var(--gray);
  flex-shrink: 0;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.bk-dot-num {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.bk-dot-check {
  display: none;
  width: 18px;
  height: 18px;
  stroke: white;
  stroke-width: 3;
  fill: none;
}
.progress-dot.active {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
  box-shadow: 0 0 0 5px rgba(43,191,90,.15);
}
.progress-dot.done {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
  box-shadow: none;
}
.progress-dot.done .bk-dot-num { display: none; }
.progress-dot.done .bk-dot-check { display: block; }
.bk-step-label {
  font-size: .7rem;
  font-weight: 700;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: color .25s ease;
}
.progress-dot.active + .bk-step-label { color: var(--green-dark); }
.progress-dot.done  + .bk-step-label  { color: var(--green); }
.progress-connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 22px;
  align-self: flex-start;
  position: relative;
  overflow: hidden;
}
.progress-connector::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.progress-connector.done::after { transform: scaleX(1); }

.service-select-card {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .75rem;
}
.service-select-card:hover { border-color: var(--green-mid); background: var(--light); }
.service-select-card.selected {
  border-color: var(--green);
  background: var(--green-light);
}
.service-select-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: .1rem;
  transition: var(--transition);
}
.service-select-card.selected .service-select-radio {
  border-color: var(--green);
  background: var(--green);
}
.service-select-card.selected .service-select-radio::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
.service-select-info h4 { margin-bottom: .25rem; }
.service-select-price {
  font-weight: 700;
  color: var(--green);
  font-size: .9rem;
  margin-top: .25rem;
}

/* Date picker grid */
.date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .4rem;
  margin-top: 1rem;
}
.date-cell {
  aspect-ratio: 1;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  color: var(--dark);
}
.date-cell:hover:not(.disabled) { border-color: var(--green); background: var(--green-light); }
.date-cell.selected { background: var(--green); border-color: var(--green); color: var(--white); font-weight: 700; }
.date-cell.disabled { opacity: .3; cursor: not-allowed; }
.date-cell.today { border-color: var(--green-mid); }
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}
.cal-header h4 { font-size: 1rem; }
.cal-nav {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  font-size: .9rem;
  color: var(--dark);
}
.cal-nav:hover { border-color: var(--green); color: var(--green); }
.cal-day-label {
  text-align: center;
  font-size: .7rem;
  font-weight: 700;
  color: var(--gray);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.time-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-top: 1rem;
}
.time-slot {
  padding: .6rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  text-align: center;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}
.time-slot:hover { border-color: var(--green); color: var(--green); }
.time-slot.selected { background: var(--green); border-color: var(--green); color: var(--white); }
.after-hours-slot { position: relative; color: var(--gray); cursor: default; border-style: dashed; }
.after-hours-slot:hover { border-color: var(--border); color: var(--gray); }
.after-hours-hint {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background: var(--dark);
  color: var(--white);
  font-size: .72rem;
  font-weight: 400;
  text-align: center;
  padding: .45rem .6rem;
  border-radius: var(--radius);
  line-height: 1.4;
  pointer-events: none;
  z-index: 10;
}
.after-hours-hint::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--dark);
}
.after-hours-slot:hover .after-hours-hint { display: block; }

/* ─── TERMS GATE (custom checkbox) ─── */
.terms-gate {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.5rem;
  transition: border-color .25s ease, background .25s ease;
}
.terms-gate.accepted {
  border-color: var(--green);
  background: var(--green-light);
}
.terms-gate-label {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  cursor: pointer;
  margin: 0;
}
.terms-gate-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.terms-gate-box {
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--border);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .1rem;
  transition: background .2s ease, border-color .2s ease;
  flex-shrink: 0;
}
.terms-gate-box svg { opacity: 0; transition: opacity .15s ease; }
.terms-gate-label input:checked ~ .terms-gate-box {
  background: var(--green);
  border-color: var(--green);
}
.terms-gate-label input:checked ~ .terms-gate-box svg { opacity: 1; }
.terms-gate-label:focus-within .terms-gate-box {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.terms-gate-text {
  font-size: .875rem;
  color: var(--gray);
  line-height: 1.55;
}
.terms-gate-text a { color: var(--gray); font-weight: 400; text-decoration: underline; }

/* ─── STEP FORM SECTIONS ─── */
.step-form { display: none; }
.step-form.active { display: block; animation: fadeUp .3s ease; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

/* ─── ADDON CHECKBOX CARDS ─── */
.addon-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: .6rem;
}
.addon-card:hover { border-color: var(--green-mid); }
.addon-card.checked { border-color: var(--green); background: var(--green-light); }
.addon-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  font-size: .7rem;
  color: transparent;
}
.addon-card.checked .addon-check {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.addon-info h4 { margin-bottom: .15rem; font-size: .9rem; }
.addon-info p  { font-size: .8rem; color: var(--gray); }
.addon-price {
  margin-left: auto;
  font-weight: 700;
  color: var(--green);
  font-size: .875rem;
  flex-shrink: 0;
}

/* ─── REVIEW SECTION ─── */
.review-section {
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.review-section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.9rem; }
.review-section-header h4 { color: var(--gray); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.btn-edit-step {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .25rem .65rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--green);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: background .15s, border-color .15s;
}
.btn-edit-step:hover { background: var(--green-light); border-color: var(--green-mid); }
.btn-edit-step svg { width: 12px; height: 12px; }
.review-row {
  display: flex;
  justify-content: space-between;
  padding: .4rem 0;
  font-size: .9rem;
}
.review-row .label { color: var(--gray); }
.review-row .value { font-weight: 600; }

/* ─── MOBILE HERO ─── */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .hero-visual { display: none; }
  .about-split { grid-template-columns: 1fr; gap: 3rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .booking-grid { grid-template-columns: 1fr; }
  .booking-summary { position: static; }
  .journey-stepper { padding: 1.5rem 1.25rem; }
  .jstepper-panel-inner { flex-direction: column; gap: 1.25rem; }
  .jstep-label { display: none; }
  .bk-stepper { padding: 1.25rem 1rem; }
  .progress-dot { width: 36px; height: 36px; }
  .bk-dot-check { width: 14px; height: 14px; }
  .progress-connector { margin-top: 18px; }
  .bk-step-label { font-size: .6rem; letter-spacing: .04em; }
}


/* ─── ROTATING TEXT (hero h1) ─────────────────
   .rt-wrap is the static green block. It never
   moves. Only the characters inside it slide,
   clipped by overflow:hidden on the wrap and on
   each .rt-word container. This mirrors the
   reference component's splitLevelClassName
   overflow-hidden behaviour.
─────────────────────────────────────────────── */
.rt-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--green);
  color: var(--white);
  border-radius: 10px;
  padding: 0.05em 0.3em;
  /* outer clip: chars entering from below are hidden
     until they cross the bottom edge of this box */
  overflow: hidden;
  vertical-align: bottom;
}

.rt-inner {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}

/* sr-only: visible only to screen readers */
.rt-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* per-word clip: characters slide within their own
   word container, matching splitLevelClassName */
.rt-word {
  display: inline-flex;
  overflow: hidden;
  padding-bottom: 0.05em;
}

.rt-char {
  display: inline-block;
}

.rt-space {
  white-space: pre;
}

@keyframes rtEnter {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes rtExit {
  from { transform: translateY(0); }
  to   { transform: translateY(-120%); }
}

.rt-char-exit {
  animation: rtExit 0.28s cubic-bezier(0.4, 0, 0.6, 1) both;
  animation-delay: var(--rt-delay, 0ms);
}
.rt-char-enter {
  animation: rtEnter 0.32s cubic-bezier(0.2, 0, 0.2, 1) both;
  animation-delay: var(--rt-delay, 0ms);
}

/* Reduced-motion: plain opacity swap, no sliding */
@media (prefers-reduced-motion: reduce) {
  @keyframes rtEnter { from { opacity: 0; } to { opacity: 1; } }
  @keyframes rtExit  { from { opacity: 1; } to { opacity: 0; } }
  .outer-ring,
  .inner-ring { animation: none; }
  .outer-ring circle,
  .inner-ring circle { animation: none; opacity: 1; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ─── SCROLL REVEAL ─── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE ENHANCEMENTS — Full device-range coverage
   Correct rendering on 320px phones, tablets (768–1024px),
   16:10 / 3:2 laptops, 1080p, 1440p, and 4K displays.
   !important flags override inline style="grid-template-columns"
   present on certain elements in the HTML.
   ═══════════════════════════════════════════════════════════ */

/* ── Large screens: 1440px–1919px ── */
@media (min-width: 1440px) {
  .container { max-width: 1280px; }
}

/* ── Ultra-wide and 4K: 1920px+ ── */
@media (min-width: 1920px) {
  .container { max-width: 1440px; }
  .hero { padding: 14rem 0 9rem; }
  .page-hero { padding: 13rem 0 7rem; }
  .section { padding: 7rem 0; }
  .section-sm { padding: 5rem 0; }
}

/* ── Tablet (769px–1024px): 3-col → 2-col for card grids ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .about-split { gap: 3rem !important; }
}

/* ── 860px: collapse split layouts.
   !important overrides inline style="grid-template-columns:..."
   set on .about-split elements throughout the HTML. ── */
@media (max-width: 860px) {
  .about-split {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .section { padding: 4.5rem 0; }
  .section-sm { padding: 3rem 0; }
}

/* ── 768px refinements (extends existing 768px block) ── */
@media (max-width: 768px) {
  /* Logo: correct size to prevent overflow on common phone widths.
     SVG viewBox is 520x64. At 32px height width = 260px.
     Centered in a 375px header that leaves ~57px each side, clearing
     the toggle button. Overrides the earlier height:40px rule. */
  .sm-logo-svg { height: 32px; }

  /* Override inline grid-template-columns on .grid-* elements */
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr !important; }

  /* Hero layout improvements */
  .hero { padding: 9rem 0 5rem; background: var(--white); }
  .hero::before { display: none; }
  .hero p { font-size: 1rem; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: 100%; max-width: 340px; justify-content: center; }
  .hero-trust { margin-top: 2.5rem; padding-top: 1.75rem; gap: 1rem; }

  /* Page hero (inner pages): remove green gradient on mobile */
  .page-hero { background: var(--white) !important; }
  .page-hero::before { display: none !important; }

  /* Service strip */
  .strip-inner { gap: 1.5rem; }

  /* Journey stepper: compact circles */
  .jstepper-circle { width: 2rem; height: 2rem; font-size: .75rem; }
  .jstepper-connector { margin: 1rem .25rem 0; }

  /* Pricing: remove negative margin on featured card when stacked */
  .pricing-card.featured { margin-top: 0 !important; }

  /* Typography: ~10% smaller across the board on mobile */
  h1 { font-size: clamp(2.0rem, 7.5vw, 2.7rem); }
  h2 { font-size: clamp(1.35rem, 4.5vw, 1.95rem); }
  h3 { font-size: 1.1rem; }
  h4 { font-size: .9rem; }
  p  { font-size: 1rem; }

  /* Buttons: tighter on mobile */
  .btn { padding: .75rem 1.6rem; font-size: .875rem; }
  .btn-lg { padding: .9rem 2.2rem; font-size: .95rem; }

  /* Section intro: tighten bottom margin */
  .section-intro { margin-bottom: 2.25rem; }
  .section-intro-wide { margin-bottom: 2rem; }

  /* Cards: slightly tighter */
  .card { padding: 1.5rem; }
}

/* ── 480px: small phones (safe range 320px–480px) ── */
@media (max-width: 480px) {
  .sm-logo-svg { height: 36px; width: auto; max-width: 100%; }
  .sm-logo-link { top: 50%; transform: translate(-50%, -50%); max-width: calc(100vw - 2rem); }
  .sm-header { padding: 0 1rem; align-items: center; }
  .sm-toggle { top: 88px; left: 1rem; }

  /* Container */
  .container { padding: 0 1rem; }

  /* Hero */
  .hero { padding: 8rem 0 4rem; }
  .hero-actions .btn { max-width: none; }
  .hero-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-top: 1.75rem;
  }

  /* Section spacing */
  .section { padding: 2.75rem 0; }
  .section-sm { padding: 2rem 0; }
  .page-hero { padding: 6.5rem 0 3rem; }

  /* Typography: further reduce on very small phones */
  h1 { font-size: clamp(1.85rem, 8.5vw, 2.4rem); }
  h2 { font-size: clamp(1.25rem, 5.5vw, 1.75rem); }
  h3 { font-size: 1rem; }
  h4 { font-size: .85rem; }

  /* CTA band */
  .cta-band { border-radius: var(--radius); padding: 2.5rem 1.25rem; }

  /* Accordion */
  .accordion-header { padding: 1rem 1.25rem; font-size: .9rem; }

  /* Booking: time slots and navigation */
  .time-grid { grid-template-columns: repeat(2, 1fr); }
  .form-nav { flex-direction: column; gap: 1rem; }
  .form-nav .btn { width: 100%; justify-content: center; }

  /* Pricing: compact card padding and price */
  .pricing-price .amount { font-size: 2.25rem; }
  .pricing-card { padding: 1.75rem 1.25rem; }

  /* Rotating text: reduce green pill size so it doesn't overwhelm the h1 on mobile */
  .rt-wrap { font-size: .85em; padding: 0.04em 0.2em; border-radius: 7px; }

  /* Comparison table: fit all 4 columns on screen with no horizontal scroll.
     Fixed layout + percentage column widths guarantees nothing is cut off. */
  .comparison-table-wrap { overflow-x: visible; }
  .comparison-table {
    table-layout: fixed;
    width: 100%;
    min-width: unset;
    font-size: .68rem;
  }
  .comparison-table td, .comparison-table th {
    padding: .45rem .3rem !important;
    word-break: break-word;
    hyphens: auto;
  }
  /* Feature label col: slightly wider, value cols share the rest equally */
  .comparison-table td:first-child,
  .comparison-table th:first-child { width: 32%; }
  .comparison-table td:not(:first-child),
  .comparison-table th:not(:first-child) { width: 22.67%; text-align: center; }
  /* Tick marks: smaller on mobile so they don't dominate */
  .comparison-table tbody td:not(:first-child):not(.no-feature) { font-size: 1rem; }
  /* Thead labels: tighter line height so they wrap nicely */
  .comparison-table thead th { line-height: 1.2; vertical-align: bottom; }

  /* reCAPTCHA: scale down the 304px widget to fit narrow phone screens */
  .g-recaptcha {
    transform: scale(0.85);
    transform-origin: 0 0;
    margin-bottom: -12px;
  }
}

/* ── Samsung S24+ and similar 412px-wide Android phones ── */
@media (max-width: 430px) {
  /* Constrain logo so it never reaches toggle button on the left */
  .sm-logo-link {
    max-width: calc(100% - 160px);
    right: 0;
  }
  .sm-logo-svg {
    height: 34px;
    width: auto;
    max-width: 100%;
  }

  /* Contact info card: reduce side padding so content breathes at 412px */
  .contact-info-card { padding: 1.5rem 1.25rem; }

  /* Booking stepper: tighten at 412px so 4 steps fit */
  .bk-stepper { padding: 1rem 0.75rem; gap: 0; }
  .progress-dot { width: 32px; height: 32px; font-size: .75rem; }
  .bk-step-label { font-size: .48rem; letter-spacing: .02em; }
  .progress-connector { margin-top: 16px; }

  /* Service strip items: allow text to wrap on very narrow screens */
  .strip-item { flex-shrink: 1; }

  /* CTA band: tighter horizontal padding */
  .cta-band { padding: 2rem 1rem; }

  /* Page section inner padding */
  .section { padding: 2.5rem 0; }
  .section-sm { padding: 1.75rem 0; }

  /* Container: smallest safe padding */
  .container { padding: 0 0.875rem; }

  /* prevent any element in normal flow from overflowing */
  section, article, aside, div { max-width: 100%; }
}

/* ── Samsung S24+ and other exactly-412px viewports ── */
@media (max-width: 412px) {
  /* Extra breathing room: tighten container and card padding
     so no content element touches the viewport edge */
  .container { padding: 0 0.75rem; }
  .card { padding: 1.25rem; }
  .contact-info-card { padding: 1.25rem 1rem; }
  .cta-band { padding: 2rem 1rem; }

  /* Navigation panel and prelayers: full-width at this size,
     ensure they are never wider than the viewport */
  .sm-prelayers,
  .sm-panel { width: 100%; max-width: 100vw; }

  /* Section spacing */
  .section { padding: 2.5rem 0; }
  .section-sm { padding: 1.75rem 0; }
}