/* =============================================================
   GENESYS TECHNOLOGY CONSULTING — Master Stylesheet
   styles.css

   Loaded by every page, before the page's own stylesheet.
   Holds the brand colors and type, the header and mobile menu,
   buttons, section headings, the navy opening band on each
   page, the call-to-action panel, the contact form, the footer,
   and the home page sections.

   The look is taken from the GTC logo:
   - Navy letters on white: navy type on a white page, with
     navy bands where a page opens and where it asks for contact.
   - The teal T and "TECHNOLOGY": teal for links and highlights.
   - The two cyan slashes: the // mark on labels and bands.
   - The 45° cuts on the G, T and C: cut corners on buttons,
     icon tiles and the bottom corner of each opening band.

   Sections:
     1. Fonts, reset, brand tokens
     2. Base type and layout
     3. Section headings and the // mark
     4. Buttons
     5. Header: contact bar, nav and mobile menu
     6. Opening band (subpages)
     7. Call-to-action panel
     8. Contact form (home page and contact page)
     9. Footer
    10. Home page: hero carousel
    11. Home page: services, challenges, roadmap, contact
    12. Motion
    13. Responsive
   ============================================================= */


/* ── 1. Fonts, reset, brand tokens ─────────────────────────── */

/* Montserrat matches the logo's wordmark; IBM Plex Sans is for reading text.
   Each page loads them with <link> tags in its <head>, which starts the
   download sooner than an @import here would. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Logo colors */
  --navy:     #0B1E3D;
  --midblue:  #1E3A5F;
  --teal:     #0E7490;
  --cyan:     #22D3EE;
  --offwhite: #F8F9FB;
  --white:    #FFFFFF;

  /* Text */
  --ink:          var(--navy);              /* headings */
  --text:         var(--midblue);           /* body copy */
  --text-muted:   rgba(30, 58, 95, 0.82);   /* secondary copy, still AA on white */
  --on-dark:      var(--white);
  --on-dark-muted: rgba(255, 255, 255, 0.78);

  /* Lines */
  --line:        rgba(11, 30, 61, 0.12);
  --line-strong: rgba(11, 30, 61, 0.24);

  /* Type */
  --font-display: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-body:    'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;

  /* The logo's 45° cut, small (buttons, tiles) and large (bands) */
  --cut:    12px;
  --cut-lg: 72px;

  /* Layout */
  --wrap:     1160px;
  --topbar-h: 40px;   /* navy contact bar above the nav */
  --header-h: 84px;   /* nav row */
  --section:  112px;   /* vertical padding of a page section */
}


/* ── 2. Base type and layout ───────────────────────────────── */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  /* On short pages (thank-you, error) the footer still sits at the bottom */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > footer { margin-top: auto; }

img { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;   /* even line lengths, no single word left on the last line */
}

a { color: var(--teal); }

/* Keyboard focus: teal on light backgrounds, cyan on navy */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

::selection {
  background: rgba(34, 211, 238, 0.35);
  color: var(--navy);
}

/* Text for screen readers only */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}

/* Anchor links (#contact, #services) land below the sticky header */
section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }


/* ── 3. Section headings and the // mark ───────────────────── */

/* The small label above a heading, led by the logo's two slashes */
.section-label,
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--teal);
  margin-bottom: 16px;
}

.section-label::before,
.eyebrow::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 13px;
  background: linear-gradient(90deg, var(--cyan) 0 36%, transparent 36% 64%, var(--cyan) 64%);
  transform: skewX(-36deg);
}

.section-title {
  font-size: clamp(30px, 3.4vw, 44px);
  margin-bottom: 16px;
}

.section-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 560px;
  margin-bottom: 56px;
}


/* ── 4. Buttons ────────────────────────────────────────────── */

/* The colored shape sits on ::before so it can take the logo's
   cut corners without clipping the keyboard focus ring. */
.btn-primary {
  --btn-bg: var(--navy);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--teal);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--btn-fg);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-bg);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: background-color 0.2s ease;
}
.btn-primary:hover::before { background: var(--btn-bg-hover); }

/* On navy, the button turns cyan like the logo's slashes */
.hero .btn-primary,
.page-hero .btn-primary,
.cta-strip .btn-primary {
  --btn-bg: var(--cyan);
  --btn-fg: var(--navy);
  --btn-bg-hover: var(--white);
}
.hero :focus-visible,
.page-hero :focus-visible,
.cta-strip :focus-visible,
.footer-bottom :focus-visible { outline-color: var(--cyan); }


/* ── 5. Header, nav and mobile menu ────────────────────────── */

/* Sticky with a negative top: the contact bar scrolls out of view,
   then the nav row stays pinned to the top of the window. */
header {
  position: sticky;
  top: calc(-1 * var(--topbar-h));
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

/* Contact bar: phone and email on navy, above the nav */
.topbar {
  height: var(--topbar-h);
  background: var(--navy);
}
.topbar .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
}
.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--on-dark-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.topbar-link:hover { color: var(--white); }
.topbar-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topbar :focus-visible { outline-color: var(--cyan); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: var(--header-h);
}

/* Logo: the GTC mark with the company name under it (genesys-logo.webp) */
.logo-lockup {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-mark {
  height: 52px;
  width: auto;
}

header nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

header nav a {
  position: relative;
  padding: 6px 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
  text-decoration: none;
}

/* Current page and hover: a cyan slash underneath */
header nav a::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -5px;
  height: 3px;
  background: var(--cyan);
  transform: skewX(-36deg) scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}
header nav a:hover::after,
header nav a.active::after { transform: skewX(-36deg) scaleX(1); }

/* Menu button, shown on small screens only (main.js opens and closes it) */
.nav-toggle {
  display: none;
  position: relative;
  isolation: isolate;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 6px; }

header.nav-open .nav-toggle-bars { background: transparent; }
header.nav-open .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); background: var(--cyan); }
header.nav-open .nav-toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); background: var(--cyan); }


/* ── 6. Opening band (subpages) ────────────────────────────── */

/* Navy band with its bottom-right corner cut at 45°, like the
   logo's C, and the logo's two slashes hanging from its top edge. */
.page-hero {
  position: relative;
  background: var(--navy);
  padding: 112px 0 136px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%);
}

.hero::after,
.page-hero::after {
  content: '';
  position: absolute;
  z-index: 11;
  top: 0;
  right: calc(var(--cut-lg) + 7%);
  width: 132px;
  height: 92px;
  background: linear-gradient(90deg, var(--cyan) 0 34%, transparent 34% 66%, var(--cyan) 66%);
  transform: skewX(-36deg);
  transform-origin: top center;
  pointer-events: none;
}

.page-hero .eyebrow { color: var(--cyan); }

.page-hero h1 {
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--on-dark);
  max-width: 780px;
  margin-bottom: 24px;
}
.page-hero h1 span { color: var(--cyan); }

.page-hero p {
  font-size: 19px;
  line-height: 1.6;
  color: var(--on-dark-muted);
  max-width: 580px;
}


/* ── 7. Call-to-action panel ───────────────────────────────── */

.cta-strip {
  padding: var(--section) 0;
  background: var(--offwhite);
}

/* Navy panel, top-right corner cut like the logo's C, slashes beside the cut */
.cta-inner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 72px 72px 64px;
}
.cta-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy);
  clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%);
}
.cta-inner::after {
  content: '';
  position: absolute;
  top: 0;
  right: 104px;
  width: 64px;
  height: 44px;
  background: linear-gradient(90deg, var(--cyan) 0 34%, transparent 34% 66%, var(--cyan) 66%);
  transform: skewX(-36deg);
  transform-origin: top center;
}

.cta-inner h2 {
  font-size: clamp(26px, 3vw, 36px);
  color: var(--on-dark);
}

.cta-inner p {
  font-size: 17px;
  color: var(--on-dark-muted);
  max-width: 520px;
  margin-top: 12px;
}


/* ── 8. Contact form (home page and contact page) ──────────── */

.contact-form-wrap {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 48px;
}

.form-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 8px;
}

.form-sub {
  font-size: 16px;
  color: var(--text-muted);
  margin-bottom: 32px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
}

input, select, textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 16px;   /* 16px stops iPhones zooming in on focus */
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder,
textarea::placeholder { color: rgba(30, 58, 95, 0.55); }
input:hover, select:hover, textarea:hover { border-color: rgba(11, 30, 61, 0.42); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.22);
}

select {
  cursor: pointer;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230E7490' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
select option { color: var(--navy); background: var(--white); }
/* "Select a service..." looks like placeholder text until a service is picked */
select:has(option[value=""]:checked) { color: rgba(30, 58, 95, 0.55); }

textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}

/* Bot check: Cloudflare Turnstile draws its widget in this box
   (main.js, section 5). The box holds the widget's 65px height from
   the start, so the Send button doesn't jump when the widget loads. */
.turnstile-box {
  min-height: 65px;
  margin-bottom: 22px;
}

/* Shown under the widget only when the check can't load or hits a
   problem; main.js fills in the text */
.turnstile-note {
  margin: -8px 0 22px;
  padding: 12px 14px;
  border-left: 3px solid var(--teal);
  background: var(--offwhite);
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy);
}

/* Send button: full width, same cut corners as .btn-primary */
.btn-submit {
  position: relative;
  isolation: isolate;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 28px;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--white);
  cursor: pointer;
}
.btn-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: background-color 0.2s ease;
}
.btn-submit:hover::before { background: var(--teal); }
.btn-submit svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Disabled state: main.js keeps the button disabled until the bot
   check passes, and again after the first click, so a double click
   can't send the message twice */
.btn-submit:disabled {
  opacity: 0.65;
  cursor: wait;
}
.btn-submit:disabled::before { background: var(--navy); }


/* ── 9. Footer ─────────────────────────────────────────────── */

footer {
  background: var(--white);
  border-top: 1px solid var(--line);
}

.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  padding: 64px 0 56px;
}

.footer-desc {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 300px;
  margin-top: 20px;
}

.footer-nav-group {
  display: flex;
  gap: 72px;
  flex-wrap: wrap;
}

.footer-nav-col h4 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--navy);
  margin-bottom: 16px;
}

.footer-nav-col a {
  display: block;
  font-size: 15px;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: 10px;
  transition: color 0.15s ease;
}
.footer-nav-col a:hover { color: var(--teal); }

/* Navy strip along the bottom */
.footer-bottom {
  background: var(--navy);
  color: var(--on-dark-muted);
  font-size: 13px;
}
.footer-bottom .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
}


/* ── 10. Home page: hero carousel ──────────────────────────── */

.hero {
  position: relative;
  height: min(86vh, 800px);
  min-height: 560px;
  overflow: hidden;
  background: var(--navy);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%);
}

.hero-swiper,
.hero-slide {
  width: 100%;
  height: 100%;
}

.hero-slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* The first photo loads right away (index.html preloads it). The other
   three wait until the page has finished loading, when main.js adds
   .hero-loaded, so they don't slow down the first. */
.hero-slide--1 { background-image: url('../images/heroimage_one.webp'); }
.hero-loaded .hero-slide--2 { background-image: url('../images/heroimage_two.webp'); }
.hero-loaded .hero-slide--3 { background-image: url('../images/heroimage_three.webp'); }
.hero-loaded .hero-slide--4 { background-image: url('../images/heroimage_four.webp'); }

/* Navy over the photo, strongest behind the text */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 30, 61, 0.94) 0%, rgba(11, 30, 61, 0.84) 42%, rgba(11, 30, 61, 0.5) 72%, rgba(11, 30, 61, 0.3) 100%);
}

.hero-content {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.hero-content .wrap { pointer-events: auto; }

.hero-eyebrow {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(40px, 4.8vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--on-dark);
  max-width: 900px;
  margin-bottom: 24px;
}
.hero h1 span { color: var(--cyan); }

.hero-sub {
  font-size: 19px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  max-width: 540px;
  margin-bottom: 40px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* Slide dots drawn as slanted bars, like the logo's slashes */
.hero-pagination {
  bottom: 48px !important;
  left: max(32px, calc((100% - var(--wrap)) / 2 + 32px)) !important;
  right: auto !important;
  width: auto !important;
  z-index: 12;
  display: flex;
  gap: 10px;
}
.hero-pagination .swiper-pagination-bullet {
  width: 26px;
  height: 5px;
  margin: 0 !important;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.45);
  opacity: 1;
  transform: skewX(-36deg);
  transition: width 0.3s ease, background-color 0.3s ease;
}
.hero-pagination .swiper-pagination-bullet-active {
  width: 52px;
  background: var(--cyan);
}


/* ── 11. Home page: services, challenges, roadmap, contact ─── */

.services,
.challenges,
.roadmap,
.contact { padding: var(--section) 0; }

.challenges,
.contact { background: var(--offwhite); }

/* Services: a ruled grid of ten, two rows of five */
.services-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.service-card {
  background: var(--white);
  padding: 32px 24px 36px;
}

/* Navy tile with the logo's cut corners and a cyan icon */
.service-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  margin-bottom: 24px;
}
.service-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-card h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.service-card p {
  font-size: 15.5px;
  color: var(--text-muted);
}

/* Challenges: two columns of quotes, each led by the // mark */
.challenges-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 56px;
  border-bottom: 1px solid var(--line);
}

.challenge-item {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.challenge-item::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 12px;
  background: linear-gradient(90deg, var(--cyan) 0 36%, transparent 36% 64%, var(--cyan) 64%);
  transform: skewX(-36deg);
}

.challenge-quote {
  font-size: 18px;
  line-height: 1.5;
  color: var(--navy);
}

/* Roadmap: the interactive 10-step walkthrough */
.roadmap-shell {
  display: flex;
  flex-direction: column;
  min-height: 440px;
  background: var(--white);
  border: 1px solid var(--line);
}

.roadmap-start,
.roadmap-complete {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 48px;
}

.roadmap-start-icon,
.roadmap-complete-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 28px;
}

.roadmap-start h3,
.roadmap-complete h3 {
  font-size: 26px;
  margin-bottom: 12px;
}

.roadmap-start p,
.roadmap-complete p {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 460px;
  margin-bottom: 32px;
}

/* Start / Get in Touch: same look as .btn-primary */
.roadmap-btn-start {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 16px 32px;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
}
.roadmap-btn-start::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: background-color 0.2s ease;
}
.roadmap-btn-start:hover::before { background: var(--teal); }

.roadmap-btn-restart {
  padding: 14px 24px;
  border: 1px solid var(--line-strong);
  background: var(--white);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  margin-left: 12px;
  transition: border-color 0.2s ease;
}
.roadmap-btn-restart:hover { border-color: var(--navy); }

.roadmap-complete-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.roadmap-step-screen {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 24px;
  padding: 40px 48px 36px;
}

.roadmap-progress-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.roadmap-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--line);
  overflow: hidden;
}

.roadmap-progress-fill {
  height: 100%;
  background: var(--teal);
  transition: width 0.4s ease;
}

.roadmap-progress-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.roadmap-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.roadmap-pill {
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.roadmap-pill:hover { border-color: var(--navy); color: var(--navy); }
.roadmap-pill.done { border-color: rgba(14, 116, 144, 0.5); color: var(--teal); }
.roadmap-pill.active { border-color: var(--navy); background: var(--navy); color: var(--white); }

.roadmap-content-card {
  flex: 1;
  background: var(--offwhite);
  border: 1px solid var(--line);
  padding: 36px 40px;
  animation: fadeUp 0.35s ease both;
}

.roadmap-step-header {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 20px;
}

.roadmap-step-number {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--cyan);
  flex-shrink: 0;
}

.roadmap-step-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 8px;
}

.roadmap-step-tag {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid rgba(14, 116, 144, 0.4);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
}

.roadmap-step-desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  max-width: 70ch;
  margin-bottom: 20px;
}

.roadmap-bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}

.roadmap-bullet {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy);
}
.roadmap-bullet::before {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 10px;
  background: var(--cyan);
  transform: skewX(-36deg);
}

.roadmap-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.roadmap-btn-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px;
  border: 1px solid var(--line-strong);
  background: var(--white);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.roadmap-btn-nav svg { width: 16px; height: 16px; }
.roadmap-btn-nav:hover { border-color: var(--navy); }
.roadmap-btn-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.roadmap-btn-nav.primary { background: var(--navy); border-color: var(--navy); color: var(--white); }
.roadmap-btn-nav.primary:hover { background: var(--teal); border-color: var(--teal); }

.roadmap-step-screen,
.roadmap-complete { display: none; }
.roadmap-step-screen.active,
.roadmap-complete.active { display: flex; }

/* Contact section: centered heading over the form */
.contact-form-centered {
  max-width: 760px;
  margin: 0 auto;
}
.contact-form-centered > .section-label { justify-content: center; }
.contact-form-centered > .section-title {
  text-align: center;
  max-width: none;
}
.contact-form-centered > .section-sub {
  text-align: center;
  margin: 0 auto 40px;
}


/* ── 12. Motion ────────────────────────────────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* One entrance per page: the opening text rises in on load */
.hero-eyebrow  { animation: fadeUp 0.7s ease both; }
.hero h1       { animation: fadeUp 0.7s 0.1s ease both; }
.hero-sub      { animation: fadeUp 0.7s 0.2s ease both; }
.hero-actions  { animation: fadeUp 0.7s 0.3s ease both; }

.page-hero .eyebrow { animation: fadeUp 0.6s ease both; }
.page-hero h1       { animation: fadeUp 0.6s 0.1s ease both; }
.page-hero p        { animation: fadeUp 0.6s 0.2s ease both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}


/* ── 13. Responsive ────────────────────────────────────────── */

/* Services grid: two columns once five no longer fit comfortably */
@media (max-width: 1180px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card { padding: 36px 32px 40px; }
  /* An odd number of cards: let the last one run full width */
  .service-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
  :root { --cut-lg: 56px; }
}

/* Header switches to the menu button */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }

  header nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 32px 20px;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 32px rgba(11, 30, 61, 0.12);
  }
  header.nav-open nav { display: flex; }

  header nav a {
    padding: 16px 0;
    font-size: 17px;
    border-bottom: 1px solid var(--line);
  }
  header nav a:last-child { border-bottom: 0; }
  header nav a::after { display: none; }
  header nav a.active { color: var(--teal); }

}

@media (max-width: 768px) {
  :root {
    --topbar-h: 36px;
    --header-h: 68px;
    --cut-lg: 40px;
    --section: 72px;
  }

  .wrap { padding: 0 20px; }

  .logo-mark { height: 40px; }

  header nav { padding: 4px 20px 16px; }

  .topbar .wrap { justify-content: space-between; gap: 16px; }
  .topbar-link { font-size: 13px; gap: 7px; }
  .topbar-link svg { width: 14px; height: 14px; }

  .section-sub { font-size: 17px; margin-bottom: 40px; }

  .page-hero { padding: 80px 0 96px; }
  .page-hero p { font-size: 17px; }
  .hero::after,
  .page-hero::after {
    width: 72px;
    height: 50px;
    right: calc(var(--cut-lg) + 24px);
  }

  .hero { height: auto; min-height: 0; max-height: none; }
  .hero-swiper { height: 100vh; max-height: 680px; min-height: 540px; }
  .hero-content { align-items: flex-end; padding-bottom: 104px; }
  .hero-overlay {
    background: linear-gradient(180deg, rgba(11, 30, 61, 0.55) 0%, rgba(11, 30, 61, 0.88) 45%, rgba(11, 30, 61, 0.95) 100%);
  }
  .hero-eyebrow { font-size: 14px; margin-bottom: 14px; }
  .hero h1 { font-size: 38px; margin-bottom: 16px; }
  .hero-sub { font-size: 16px; margin-bottom: 28px; }
  .hero-pagination { bottom: 56px !important; left: 20px !important; }

  .cta-inner { padding: 64px 28px 48px; }
  .cta-inner::before { clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%); }
  .cta-inner::after { right: 64px; width: 48px; height: 32px; }

  .contact-form-wrap { padding: 32px 22px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }

  .challenges-grid { grid-template-columns: 1fr; }
  .challenge-quote { font-size: 17px; }

  .roadmap-step-screen { padding: 24px 20px 20px; }
  .roadmap-content-card { padding: 24px 20px; }
  .roadmap-step-number { font-size: 40px; }
  .roadmap-bullets { grid-template-columns: 1fr; }
  .roadmap-pills { display: none; }
  .roadmap-start,
  .roadmap-complete { padding: 48px 24px; }

  .footer-top { flex-direction: column; gap: 40px; padding: 48px 0 40px; }
  .footer-nav-group { gap: 40px; }
}

@media (max-width: 600px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-card:last-child:nth-child(odd) { grid-column: auto; }
  .service-card { padding: 28px 24px 32px; }
}