/* ================================================================
   FREE WEBSITE NI — MARKETING / LEAD-CAPTURE SITE
   ----------------------------------------------------------------
   Built from the NovaStudio multi-page template. Brand palette is a
   deep NI-green/teal (trustworthy, local) plus a warm amber accent —
   loosely inspired by the clean, no-nonsense feel of nidirect.gov.uk
   without reusing any official government branding.

   HOW THIS FILE IS ORGANIZED (use Ctrl/Cmd+F for the === markers):
   1. THEME VARIABLES   — colors, fonts, spacing. Change site-wide look here.
   2. RESET & BASE
   3. LAYOUT UTILITIES
   4. COMPONENTS (buttons, cursor, preloader...)
   5. HEADER / NAV
   6. HERO
   7. MARQUEE
   8. ABOUT
   9. SERVICES
   10. WORK / PORTFOLIO
   11. PROCESS
   12. TESTIMONIALS
   13. TEAM
   14. CTA
   15. PAGE HEADER (inner pages)
   16. CONTACT PAGE
   17. LEAD FORM (business onboarding form + upload dropzone + pill selectors)
   18. FOOTER
   19. RESPONSIVE
   ================================================================ */

/* ================================================================
   1. THEME VARIABLES — edit these to re-skin the entire site
   ================================================================ */
:root {
  /* --- Colors --- */
  --color-bg: #FAFAF7;
  --color-bg-alt: #EEF3EF;
  --color-dark: #0E211C;
  --color-dark-soft: #163A30;
  --color-text: #17231F;
  --color-text-muted: #5B6B64;
  --color-white: #FFFFFF;

  --color-primary: #0E7A54;      /* main brand color — NI green/teal */
  --color-primary-dark: #0B5F42;
  --color-secondary: #E8A33D;    /* accent color — warm amber */
  --color-accent: #E85D5D;       /* highlight / warning color */
  --color-gold: #E8A33D;

  --color-border: rgba(14, 33, 28, 0.12);

  /* --- Fonts (linked in index.html <head>) --- */
  --font-heading: 'Space Grotesk', Helvetica, Arial, sans-serif;
  --font-body: 'Inter', Helvetica, Arial, sans-serif;

  /* --- Type scale --- */
  --fs-h1: clamp(2.5rem, 6vw, 5.5rem);
  --fs-h2: clamp(2rem, 4vw, 3.4rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.6rem);
  --fs-body: 1.05rem;

  /* --- Spacing / shape --- */
  --section-pad: clamp(4.5rem, 9vw, 8rem);
  --container-w: 1240px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

/* ================================================================
   2. RESET & BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  overflow-x: hidden;
  cursor: default;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-dark);
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
em { font-style: italic; color: var(--color-primary); }
p { color: var(--color-text-muted); }
/* Inline text links inside body copy (e.g. "See our <a>Terms</a>") would
   otherwise inherit the paragraph's muted grey and be near-invisible as
   links. .btn / .service-card__link etc. are all higher-specificity class
   selectors, so they're unaffected by this. */
p a, .legal-content ul li a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
p a:hover, .legal-content ul li a:hover { color: var(--color-dark); }
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; }

a, button { cursor: pointer; }

/* ================================================================
   3. LAYOUT UTILITIES
   ================================================================ */
.container { width: 100%; max-width: var(--container-w); margin: 0 auto; padding: 0 1.5rem; }
section { padding: var(--section-pad) 0; position: relative; }
.section-head { max-width: 640px; margin-bottom: 3.5rem; }
.section-head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; max-width: none; flex-wrap: wrap; }
.section-head h2 { margin-top: 0.5rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-primary);
}
.eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--color-primary); display: inline-block; }

.check-list { margin: 1.5rem 0; display: flex; flex-direction: column; gap: 0.6rem; }
.check-list--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1.5rem; }
.check-list li { position: relative; padding-left: 1.7rem; color: var(--color-text); font-weight: 500; }
.check-list li::before {
  content: ''; position: absolute; left: 0; top: 0.25em; width: 16px; height: 16px;
  border-radius: 50%; background: var(--color-secondary);
}
.pricing-card:not(.pricing-card--featured) .check-list li::before { background: #deba86; }
.check-list li::after {
  content: ''; position: absolute; left: 4px; top: 0.55em; width: 8px; height: 4px;
  border-left: 2px solid var(--color-dark); border-bottom: 2px solid var(--color-dark);
  transform: rotate(-45deg);
}

/* ================================================================
   4. COMPONENTS
   ================================================================ */

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem;
  padding: 0.9rem 1.6rem; border-radius: 100px;
  transition: transform 0.35s var(--ease), background 0.3s, color 0.3s, box-shadow .3s;
  white-space: nowrap;
}
.btn svg { transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translate(3px, -3px); }
.btn--primary { background: var(--color-dark); color: var(--color-white); }
.btn--primary:hover { background: var(--color-primary); box-shadow: 0 10px 30px -8px var(--color-primary); }
.btn--outline { border: 1.5px solid var(--color-border); color: var(--color-dark); }
.btn--outline:hover { background: var(--color-dark); color: var(--color-white); border-color: var(--color-dark); }
.btn--light { background: var(--color-white); color: var(--color-dark); }
.btn--light:hover { background: var(--color-secondary); }
.btn--sm { padding: 0.65rem 1.3rem; font-size: 0.85rem; }
.btn--lg { padding: 1.1rem 2rem; font-size: 1rem; }

/* --- Rounded hit-area fix ---
   Any link/button with border-radius (the circular social icons, the
   back-to-top button, the mobile-menu close button, every pill-shaped
   .btn) has its actual hover/click hit-area clipped to the rounded
   shape in Chromium-based browsers — the four square corners of the
   element's own box fall outside that shape and silently miss it,
   falling through to whatever's behind. Giving each one a same-size
   invisible ::before with NO border-radius restores a full square
   hit-area — pseudo-elements resolve hits to their host element, so
   this slightly enlarges the click target with no visual change.
   Un-positioned targets get `position: relative` so the pseudo-element
   has something to anchor `inset: 0` to; already `position:
   fixed/absolute` targets (e.g. .back-to-top) keep that, since their
   own class rule is more specific and wins. */
.btn, .socials a, .back-to-top, .mobile-menu__close, .contact-info-card {
  position: relative;
}
.btn::before, .socials a::before, .back-to-top::before, .mobile-menu__close::before, .contact-info-card::before {
  content: '';
  position: absolute;
  inset: 0;
}

/* --- Preloader --- */
.preloader {
  position: fixed; inset: 0; background: var(--color-dark); z-index: 10000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem;
}
.preloader__logo { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; color: var(--color-white); }
.preloader__logo span { color: var(--color-white); }
.preloader__bar { width: 200px; height: 2px; background: rgba(255,255,255,0.15); overflow: hidden; border-radius: 2px; }
.preloader__bar span { display: block; height: 100%; width: 0%; background: var(--color-white); }

/* --- Back to top --- */
.back-to-top {
  position: fixed; right: 1.5rem; bottom: 1.5rem; width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-dark); color: var(--color-white); display: flex; align-items: center; justify-content: center;
  transform: translateY(0) rotate(-90deg) scale(0); opacity: 0; transition: transform .4s var(--ease), opacity .4s, background .3s;
  z-index: 500;
}
.back-to-top.is-visible { transform: rotate(-90deg) scale(1); opacity: 1; }
.back-to-top:hover { background: var(--color-primary); }

/* --- Reveal animation base states (GSAP toggles these via classes) --- */
.reveal-up, .reveal-img { will-change: transform, opacity; }

/* If the GSAP CDN fails to load, js/animations.js adds "no-gsap" to <html>
   and reveals everything immediately so the site stays fully usable. */
.no-gsap .reveal-up, .no-gsap .reveal-img img { opacity: 1 !important; transform: none !important; }

/* ================================================================
   5. HEADER / NAV
   ================================================================ */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 900;
  padding: 1.3rem 0; transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s;
}
.site-header.is-scrolled { background: rgba(250,250,248,0.85); backdrop-filter: blur(12px); padding: 0.85rem 0; box-shadow: 0 1px 0 var(--color-border); }
.header__inner { display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; }
.nav__list { display: flex; gap: 1.6rem; }
.nav__link { font-weight: 500; font-size: 0.92rem; position: relative; padding: 0.3rem 0; white-space: nowrap; }
.nav__link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1.5px; background: var(--color-dark); transition: width .3s var(--ease); }
.nav__link:hover::after { width: 100%; }
.nav__link.is-active { color: var(--color-primary); }
.nav__link.is-active::after { width: 100%; background: var(--color-primary); }
.mobile-menu a.is-active { color: var(--color-secondary); }
.header__actions { display: flex; align-items: center; gap: 1.2rem; }
.nav-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; }

.mobile-menu {
  position: fixed; inset: 0 0 0 auto; width: min(340px, 85vw); height: 100vh; background: var(--color-dark);
  transform: translateX(100%); transition: transform .5s var(--ease); z-index: 950; padding: 6rem 2.5rem;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu__close {
  position: absolute; top: 1.5rem; right: 1.5rem; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  color: var(--color-white); transition: background .3s;
}
.mobile-menu__close:hover { background: rgba(255,255,255,0.12); }
.mobile-menu__close .icon { width: 20px; height: 20px; }
.mobile-menu ul { display: flex; flex-direction: column; gap: 1.5rem; }
.mobile-menu a { font-family: var(--font-heading); font-size: 1.6rem; color: var(--color-white); font-weight: 600; }

/* ================================================================
   6. HERO
   ================================================================ */
.hero { padding-top: clamp(8rem, 16vw, 12rem); padding-bottom: 4rem; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.06; z-index: -1; }
.hero__inner { position: relative; z-index: 1; }

/* Decorative Titanic Belfast photo — full-bleed backdrop filling the
   right half of the hero, desktop only (hidden below 780px, where a
   small copy sits behind .hero__badges instead — see that section).
   Faded and masked into the page background on its left edge so it
   reads as atmosphere behind the CTA button rather than a boxed-in
   graphic. */
.hero__laptop {
  position: absolute; top: 0; right: 0; bottom: 0; width: 52%;
  opacity: 0.2; z-index: 0; pointer-events: none;
  mask-image: linear-gradient(to right, transparent, black 22%);
  -webkit-mask-image: linear-gradient(to right, transparent, black 22%);
}
.hero__laptop img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* Mobile equivalent of .hero__laptop — full viewport width (a sibling
   of .hero__inner, not inside it, so the container's side padding
   doesn't constrain it) sitting behind the CTA button, trust badges
   and scroll cue. Hidden on desktop — see RESPONSIVE for the <=780px
   rules that show it (and hide .hero__laptop) and position it. */
.hero__mobile-bg { display: none; }

.hero__title { font-size: var(--fs-h1); overflow: hidden; }
.split-line { display: block; overflow: hidden; }
.hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-top: 2.2rem; flex-wrap: wrap; }
.hero__desc { max-width: 420px; font-size: 1rem; }
.hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 5rem; padding-top: 2.5rem; border-top: 1px solid var(--color-border); }
.stat__num, .stat__suffix { font-family: var(--font-heading); font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 700; color: var(--color-dark); }
.stat__label { display: block; margin-top: 0.4rem; font-size: 0.85rem; color: var(--color-text-muted); }

/* Non-numeric trust badges — used instead of stat counters wherever a
   claim isn't a real, sourced number (never invent stats). */
.hero__badges { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 3rem; }
.badge-item {
  display: inline-flex; align-items: center; gap: 0.55rem; background: var(--color-white);
  border: 1px solid var(--color-border); padding: 0.6rem 1.1rem; border-radius: 100px;
  font-size: 0.85rem; font-weight: 600; color: var(--color-text);
}
.badge-item .icon { width: 16px; height: 16px; color: var(--color-primary); flex-shrink: 0; }

/* Stats grid reused as its own section (e.g. about.html) instead of
   nested inside the hero — drop the hero-specific top border/margin
   and most of the section's own top/bottom padding so it reads as a
   compact strip between .about and .team rather than doubling up on
   the standard --section-pad above AND below it. */
.about-stats { padding-top: 0; padding-bottom: 1rem; }
.about-stats .hero__stats { margin-top: 0; padding-top: 0; border-top: none; }

.scroll-cue { display: flex; align-items: center; gap: 0.6rem; justify-content: center; margin-top: 2rem; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.scroll-cue span { width: 1px; height: 26px; background: var(--color-text-muted); position: relative; overflow: hidden; }
.scroll-cue span::after { content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--color-primary); animation: scrollcue 1.8s infinite ease-in-out; }
@keyframes scrollcue { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } }

/* ================================================================
   7. MARQUEE — pure CSS scroll, not JS-driven. The two .marquee__track
   children are byte-for-byte identical copies of the same list, sitting
   side by side; animating the shared .marquee wrapper by exactly -50%
   (i.e. by the width of ONE track) is what makes the loop seamless —
   whatever the viewport width, since it's a fixed fraction of the

   Each track repeats the 7-item list 4x (28 items), not once. With
   only one copy, a single track ends up almost exactly as wide as a
   typical desktop viewport, so there's no runway for a smooth "new
   item enters as an old one exits" scroll — instead the whole list
   pops fully into view and swaps out, looking like a stutter/reset
   instead of a continuous loop. Repeating it 4x keeps a track wider
   than any realistic viewport, so content is always flowing rather
   than visible all at once. EDIT ▸ if you add/remove categories,
   keep both tracks' repeats identical, and adjust the duration below
   if the total per-track width changes a lot (see next paragraph).
   wrapper's own (content-sized) width rather than depending on the
   viewport ever being narrower than the content, which is what caused
   the old dual-GSAP-tween version to visibly jump/stutter on repeat.
   ================================================================ */
.marquee-strip { padding: 1.6rem 0; background: var(--color-dark); overflow: hidden; }
.marquee { display: flex; width: max-content; animation: marquee-scroll 88s linear infinite; }
.marquee__track { display: flex; flex-shrink: 0; align-items: center; gap: 1.2rem; padding-right: 1.2rem; white-space: nowrap; }
.marquee__track span { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 600; color: rgba(255,255,255,0.85); }
.marquee__track span:nth-child(even) { color: var(--color-secondary); font-size: 1rem; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } }

/* ================================================================
   8. ABOUT
   ================================================================ */
.about__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 4.5rem; align-items: center; }
.about__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; }
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__content h2 { margin: 0.6rem 0 1.3rem; }
.about__content p { max-width: 480px; }

/* Reused on how-it-works.html for the "how we build it" illustration
   — same idea as .about__grid but the media isn't a cropped photo. */
.how-visual__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4rem; align-items: center; }
.how-visual__grid img { width: 100%; height: auto; display: block; }
/* custom-apps.html's code-banner-vertical.jpg is a genuinely tall photo
   (not an illustration like the default .how-visual__grid image) — cap it
   to a normal portrait ratio instead of rendering at its full, very tall
   natural height. Matches .about__media's contained-photo convention.
   Needs its own overflow:hidden wrapper (unlike .about__media, .reveal-img
   alone doesn't clip): the reveal-in animation scales the image to 1.25x
   before fading it in, and with nothing to clip that, the scaled-up image
   was spilling past the right edge and making the whole page horizontally
   scrollable on mobile. */
.reveal-img--photo { overflow: hidden; border-radius: var(--radius-lg); }
.how-visual__grid img.is-photo { aspect-ratio: 4/5; object-fit: cover; }
.how-visual__content h2 { margin: 0.6rem 0 1.3rem; }
.how-visual__content p { max-width: 480px; }

/* ================================================================
   9. SERVICES
   ================================================================ */
.services { background: var(--color-bg-alt); }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.service-card {
  background: var(--color-white); border-radius: var(--radius-md); padding: 2.4rem 2rem;
  border: 1px solid var(--color-border); transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -20px rgba(16,16,24,0.18); border-color: transparent; }
.service-card__num { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; color: var(--color-primary); }
.service-card h3 { margin: 1rem 0 0.7rem; }
.service-card p { margin-bottom: 1.4rem; }
.service-card__link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9rem; color: var(--color-dark); }
.service-card__link svg { transition: transform .3s var(--ease); }
.service-card:hover .service-card__link svg { transform: translate(3px, -3px); }

/* ================================================================
   10. WORK / PORTFOLIO
   ================================================================ */
.filters { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.filters--center { justify-content: center; margin-bottom: -1rem; }
.filter { padding: 0.55rem 1.1rem; border-radius: 100px; border: 1px solid var(--color-border); font-size: 0.85rem; font-weight: 500; transition: all .3s; }
.filter:hover { border-color: var(--color-dark); }
.filter.is-active { background: var(--color-dark); color: var(--color-white); border-color: var(--color-dark); }

/* Examples page — bento-style gallery of design previews.
   Two generous columns rather than a tight multi-span bento pack —
   the tile aspect ratio (8/5) is matched to the source screenshots'
   own ~1440x900 ratio, so object-fit:cover only ever trims a sliver
   off the top/bottom instead of cropping into the design. The last
   (odd) tile spans full width as a closing feature image. */
.examples-gallery {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 2rem; margin-top: 3rem;
}
.examples-gallery__item {
  border-radius: var(--radius-md); overflow: hidden; position: relative;
  aspect-ratio: 8/5;
  box-shadow: 0 10px 30px -14px rgba(16,16,24,0.2); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.examples-gallery__item img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.examples-gallery__item:hover { transform: translateY(-6px); box-shadow: 0 18px 38px -16px rgba(16,16,24,0.3); }
.examples-gallery__item:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .examples-gallery { grid-template-columns: 1fr; gap: 1.5rem; }
  .examples-gallery__item:last-child:nth-child(odd) { grid-column: auto; }
}

/* ================================================================
   11. PROCESS
   ================================================================ */
.process__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.8rem; }
.process-step { padding-top: 1.6rem; border-top: 2px solid var(--color-dark); }
.process-step__num { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; color: var(--color-text-muted); }
.process-step h3 { margin: 0.8rem 0 0.6rem; }

/* ================================================================
   12. TESTIMONIALS
   ================================================================ */
.testimonials { background: var(--color-dark); color: var(--color-white); text-align: center; }
.testimonials__quote { width: 48px; height: 36px; color: var(--color-primary); margin: 0 auto 1.5rem; }
.testimonial-slider { position: relative; max-width: 760px; margin: 0 auto; min-height: 220px; }
.testimonial-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s; }
.testimonial-slide.is-active { position: relative; opacity: 1; visibility: visible; }
.testimonial-slide p { font-family: var(--font-heading); font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 500; color: var(--color-white); line-height: 1.4; }
.testimonial-author { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-top: 2rem; }
.testimonial-author img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.testimonial-author div { text-align: left; font-size: 0.9rem; }
.testimonial-author strong { display: block; color: var(--color-white); }
.testimonial-author span { color: rgba(255,255,255,0.55); }
.testimonial-dots { display: flex; justify-content: center; gap: 0.6rem; margin-top: 2.5rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.25); transition: all .3s; }
.dot.is-active { background: var(--color-secondary); width: 22px; border-radius: 4px; }

/* ================================================================
   13. SOCIALS (footer)
   ================================================================ */
.socials { display: flex; gap: 0.7rem; margin-top: 0.8rem; }
.socials a { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; transition: all .3s; }
.socials a:hover { background: var(--color-dark); color: var(--color-white); border-color: var(--color-dark); }

/* ================================================================
   14. CTA
   ================================================================ */
.cta { background: var(--color-dark); color: var(--color-white); text-align: center; overflow: hidden; }
.cta__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.5; }
.cta__inner h2 { color: var(--color-white); margin: 0.8rem 0 2.2rem; }
.cta .eyebrow { color: var(--color-secondary); }
.cta .eyebrow::before { background: var(--color-secondary); }

/* ================================================================
   15. PAGE HEADER — banner used at the top of inner pages
   (Services / Gallery / About / Contact). Home uses the full HERO
   above instead; inner pages use this shorter version so visitors
   land straight in the page content.
   ================================================================ */
.page-header { padding-top: clamp(7.5rem, 14vw, 10.5rem); padding-bottom: 3.5rem; text-align: center; overflow: hidden; }
.page-header__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.05; z-index: -1; }
/* about.html only — a real photo needs a touch more presence than the
   abstract hero-bg.svg pattern every other page header uses, but still
   low enough to keep the heading text fully readable over it. */
.page-header__bg--about { opacity: 0.15; }
/* custom-apps.html only — same idea as --about above, just with its own
   photo and a saturation boost since a busy screenshot reads as flat/grey
   at 15% opacity otherwise. Swaps to the pre-cropped mobile photo under
   768px so the interesting part of the image (not just empty desk) stays
   visible at a narrow, shorter banner. */
.page-header__bg--code { opacity: 0.15; filter: saturate(1.8); background-image: url('../assets/img/code-banner.jpg'); }
.page-header .eyebrow { justify-content: center; }
.page-header h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 0.6rem 0 1.1rem; }
.page-header p { max-width: 560px; margin: 0 auto; font-size: 1.05rem; }
.breadcrumbs { display: flex; justify-content: center; gap: 0.4rem; margin-bottom: 1.2rem; font-size: 0.85rem; color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs span { color: var(--color-border); }

/* ================================================================
   16. CONTACT PAGE
   ================================================================ */
.contact-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; align-items: flex-start; }
.contact-info { display: flex; flex-direction: column; gap: 1rem; }
.contact-info-card {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; border-radius: var(--radius-md);
  background: var(--color-bg-alt); border: 1px solid transparent; transition: all .3s;
}
.contact-info-card:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.contact-info-card .icon { width: 24px; height: 24px; color: var(--color-primary); flex-shrink: 0; margin-top: 0.15rem; }
.contact-info-card strong { display: block; font-family: var(--font-heading); font-size: 1rem; color: var(--color-dark); margin-bottom: 0.2rem; }
.contact-info-card span { font-size: 0.9rem; color: var(--color-text-muted); }

.contact-form { background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: 2.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--color-dark); margin-bottom: 0.5rem; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
  background: var(--color-white); font: inherit; font-size: 0.95rem; color: var(--color-text); transition: border-color .3s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--color-primary); }
.form-group textarea { resize: vertical; min-height: 130px; }
.form-group input.is-valid, .form-group textarea.is-valid { border-color: var(--color-primary); }
.form-group input.is-invalid, .form-group textarea.is-invalid { border-color: var(--color-accent); }
.field-feedback {
  display: block; min-height: 1.1em; margin-top: 0.4rem; font-size: 0.8rem; font-weight: 500;
  color: var(--color-text-muted); transition: color .2s;
}
.field-feedback.is-valid { color: var(--color-primary); }
.field-feedback.is-invalid { color: var(--color-accent); }
.form-note { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 1rem; }
.form-success {
  display: none; align-items: center; gap: 0.6rem; padding: 1rem 1.2rem; border-radius: var(--radius-sm);
  background: rgba(14,122,84,0.10); color: var(--color-dark); font-weight: 600; font-size: 0.9rem; margin-top: 1rem;
}
.form-success.is-visible { display: flex; }
.form-success .icon { font-size: 50px; color: var(--color-secondary); }

.form-error {
  display: none; align-items: center; gap: 0.6rem; padding: 1rem 1.2rem; border-radius: var(--radius-sm);
  background: rgba(232,93,93,0.1); color: var(--color-dark); font-weight: 600; font-size: 0.9rem; margin-top: 1rem;
}
.form-error.is-visible { display: flex; }
.form-error .icon { color: var(--color-accent); flex-shrink: 0; }

.map-embed { border-radius: var(--radius-lg); overflow: hidden; margin-top: 2.5rem; aspect-ratio: 21/8; }
.map-embed img { width: 100%; height: 100%; object-fit: cover; }

/* ================================================================
   17. LEAD FORM — the deliberately minimal homepage request form
   (name + email + honeypot + reCAPTCHA), plus tag list and the FAQ
   accordion further down this section.
   ================================================================ */
.lead-form-section { background: var(--color-bg-alt); scroll-margin-top: 100px; }
.lead-form-section .section-head { max-width: 700px; margin-left: auto; margin-right: auto; text-align: center; }
.lead-form-section .section-head .eyebrow { justify-content: center; }

.lead-form {
  max-width: 520px; margin: 3.5rem auto 0; background: var(--color-white);
  border-radius: var(--radius-lg); padding: 2.6rem; border: 1px solid var(--color-border);
  box-shadow: 0 40px 80px -40px rgba(14,33,28,0.18);
}
.lead-form__hint { font-size: 0.85rem; color: var(--color-text-muted); margin: -0.4rem 0 1.4rem; }
.lead-form__submit { width: 100%; justify-content: center; }
.lead-form__fineprint { text-align: center; font-size: 0.82rem; color: var(--color-text-muted); margin-top: 1rem; }
.lead-form .form-success, .lead-form .form-error { justify-content: center; text-align: left; }

/* Honeypot field — visually hidden (not display:none, which some bots
   detect and skip) but still in the tab/DOM flow for anything that
   doesn't understand CSS at all. */
.honeypot-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.recaptcha-wrap { margin: 1.4rem 0; }
.recaptcha-wrap:empty { margin: 0; } /* no visible gap while unconfigured — see js/config.js */

/* Loading state while the (currently front-end-only) submit is "in flight" */
.btn:disabled, .btn.is-loading { opacity: 0.6; pointer-events: none; }

/* Removable tag chip — services/serviceAreas/requestedPages on the
   website-details onboarding form. Plain .tag-chip stays the
   read-only display version used elsewhere on the site. */
.tag-chip--removable { gap: 0.5rem; }
.tag-chip--removable button { display: flex; color: var(--color-text-muted); }
.tag-chip--removable button:hover { color: var(--color-accent); }
.tag-chip--removable .icon { width: 14px; height: 14px; }

/* Upload dropzone — website-details.html logo/image uploads */
.dropzone {
  border: 2px dashed var(--color-border); border-radius: var(--radius-md); padding: 2.4rem 1.5rem;
  text-align: center; cursor: pointer; transition: all .3s;
}
.dropzone:hover, .dropzone.is-dragover { border-color: var(--color-primary); background: var(--color-bg-alt); }
.dropzone .icon { width: 28px; height: 28px; color: var(--color-primary); margin: 0 auto 0.8rem; }
.dropzone p { font-size: 0.9rem; }
.dropzone strong { color: var(--color-text); }

.media-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.media-item {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1rem; border-radius: var(--radius-sm);
  background: var(--color-bg-alt); font-size: 0.88rem; font-weight: 500;
}
.media-item img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.media-item > .icon { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; }
.media-item__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-item__status { font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted); flex-shrink: 0; }
.media-item__status.is-error { color: var(--color-accent); }
.media-item button { display: flex; color: var(--color-text-muted); flex-shrink: 0; }
.media-item button:hover { color: var(--color-accent); }
.media-item button .icon { width: 14px; height: 14px; }

/* Website template picker — website-details.html. Placeholder
   thumbnails only; swap .template-card__thumb for real screenshots
   (e.g. an <img>) once templates are built. */
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin-top: 1rem; }
.template-card {
  display: flex; flex-direction: column; gap: 0.6rem; cursor: pointer; border: 2px solid transparent; border-radius: var(--radius-md);
  padding: 0.5rem; transition: all .3s; position: relative;
}
.template-card:hover { background: var(--color-bg-alt); }
.template-card.is-selected { border-color: var(--color-primary); background: var(--color-bg-alt); }
.template-card__thumb {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 4/3; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-bg-alt), var(--color-border)); color: var(--color-text-muted);
  font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem;
}
.template-card.is-selected .template-card__thumb { background: linear-gradient(135deg, rgba(14,122,84,0.15), rgba(14,122,84,0.3)); color: var(--color-primary-dark); }
.template-card__thumb--img { background: none; padding: 0; overflow: hidden; position: relative; }
.template-card__thumb--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.template-card.is-selected .template-card__thumb--img { box-shadow: inset 0 0 0 2px var(--color-primary); }

/* Preview button — sits on top of the thumbnail but is its own click
   target (stopPropagation in onboarding.js keeps it from also selecting
   the card), so previewing and selecting stay two separate, obvious
   actions instead of fighting over the same click. */
.template-card__preview {
  position: absolute; top: 0.4rem; right: 0.4rem; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(15,11,31,0.55); color: #fff; border: none; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.template-card__preview:hover, .template-card__preview:focus-visible { background: rgba(15,11,31,0.85); }
.template-card__preview .icon { width: 15px; height: 15px; }

.template-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 2rem; }
.template-lightbox.is-open { display: flex; }
.template-lightbox__backdrop { position: absolute; inset: 0; background: rgba(15,11,31,0.75); cursor: pointer; }
.template-lightbox__panel {
  position: relative; z-index: 1; background: var(--color-white); border-radius: var(--radius-lg);
  padding: 1.2rem; max-width: 900px; width: 100%; max-height: 90vh; overflow: auto;
}
/* Stage is a fixed-ratio window (matches the template screenshots, 900x563)
   so paging between images of slightly different heights never jumps the
   layout mid-slide. The track is three slides wide — prev/current/next —
   and rests shifted so the current one fills the stage; paging just slides
   the whole strip over by one slide-width, dragging the neighbour into
   view like a real filmstrip, rather than swapping one image in place. */
.template-lightbox__stage { position: relative; overflow: hidden; border-radius: var(--radius-sm); aspect-ratio: 900 / 563; }
.template-lightbox__track {
  position: absolute; top: 0; left: 0; display: flex; width: 300%; height: 100%;
  transform: translateX(-33.3333%);
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.template-lightbox__track.is-dragging { transition: none; }
.template-lightbox__slide { width: 33.3333%; height: 100%; object-fit: cover; display: block; flex: none; }
.template-lightbox__close {
  position: absolute; top: 0.8rem; right: 0.8rem; width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-bg-alt); border: none; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.template-lightbox__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; flex-wrap: wrap; }
.template-lightbox__footer span { font-weight: 700; }
/* Prev/next — anchored to the panel itself (not the outer overlay) so they
   sit right at the edge of the image regardless of viewport size, rather
   than stranded out at the screen edges. Reuses .icon-arrow (already
   pointing right) and just mirrors it for "prev" rather than adding a
   second icon. Hidden entirely by renderTemplates() when there's only one
   image to page through. */
.template-lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.92); border: none;
  color: var(--color-dark); cursor: pointer; transition: background .2s, transform .2s;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(15,11,31,0.18);
}
.template-lightbox__nav .icon { width: 22px; height: 22px; }
.template-lightbox__nav:hover { background: var(--color-white); transform: translateY(-50%) scale(1.06); }
.template-lightbox__nav--prev { left: 0.6rem; }
.template-lightbox__nav--prev .icon { transform: rotate(180deg); }
.template-lightbox__nav--next { right: 0.6rem; }
@media (max-width: 600px) {
  .template-lightbox { padding: 0.8rem; }
  .template-lightbox__footer { flex-direction: column; align-items: stretch; }
  .template-lightbox__nav { width: 40px; height: 40px; }
  .template-lightbox__nav .icon { width: 18px; height: 18px; }
  .template-lightbox__nav--prev { left: 0.3rem; }
  .template-lightbox__nav--next { right: 0.3rem; }
}
.template-card__name { text-align: center; font-size: 0.85rem; font-weight: 600; color: var(--color-text); }

/* Simple display tag list — e.g. "who we help" categories */
.tag-list { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.tag-chip {
  display: inline-flex; align-items: center; padding: 0.55rem 1.1rem; border-radius: 100px;
  background: var(--color-white); border: 1px solid var(--color-border); font-size: 0.88rem; font-weight: 600; color: var(--color-text);
}

/* FAQ accordion */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item__question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 0; background: none; border: none; text-align: left; cursor: pointer;
  font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; color: var(--color-dark);
}
.faq-item__question .icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-primary); transition: transform .3s var(--ease); }
.faq-item.is-open .faq-item__question .icon { transform: rotate(45deg); }
.faq-item__answer { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-item__answer p { padding-bottom: 1.4rem; color: var(--color-text-muted); max-width: 640px; }

/* ================================================================
   18. FOOTER
   ================================================================ */
.site-footer { background: var(--color-dark); color: rgba(255,255,255,0.7); padding-top: var(--section-pad); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 2.5rem; padding-bottom: 3.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-widget h4 { color: var(--color-white); font-size: 0.95rem; margin-bottom: 1.1rem; }
.footer-widget ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-widget a:hover { color: var(--color-secondary); }
.footer-widget .btn:hover,
.footer-widget .socials a:hover { color: var(--color-white); }
.footer-widget--about img { margin-bottom: 1rem; }
.footer-widget--about p { margin-bottom: 1.2rem; max-width: 320px; }
.footer-widget--about .socials a { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.7); }
.contact-list li { display: flex; align-items: center; gap: 0.6rem; }
.newsletter { display: flex; margin-top: 1.2rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 100px; overflow: hidden; }
.newsletter input { flex: 1; background: none; border: none; padding: 0.75rem 1.1rem; color: var(--color-white); font-size: 0.85rem; }
.newsletter input::placeholder { color: rgba(255,255,255,0.4); }
.newsletter button { width: 44px; display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-white); }
.footer__bottom { display: flex; justify-content: space-between; padding: 1.6rem 0; font-size: 0.82rem; flex-wrap: wrap; gap: 0.5rem; }

/* ================================================================
   19. PRICING
   ================================================================ */
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: stretch; }
.pricing-card {
  display: flex; flex-direction: column; background: var(--color-white); border-radius: var(--radius-lg);
  padding: 2.6rem 2.2rem; border: 1px solid var(--color-border);
}
.pricing-card--featured { border-color: var(--color-primary); box-shadow: 0 30px 60px -32px rgba(14,122,84,0.3); }
.pricing-card__badge {
  align-self: flex-start; padding: 0.35rem 0.9rem; border-radius: 100px; margin-bottom: 1.1rem;
  background: var(--color-bg-alt); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted);
}
.pricing-card--featured .pricing-card__badge { background: rgba(14,122,84,0.12); color: #084731; }
.pricing-card__name { font-size: 1.3rem; }
.pricing-card__price { display: flex; align-items: baseline; gap: 0.4rem; margin: 0.7rem 0 0.3rem; }
.pricing-card__price strong { font-family: var(--font-heading); font-size: 2.8rem; font-weight: 700; color: var(--color-dark); }
.pricing-card__price span { font-size: 0.95rem; color: var(--color-text-muted); }
.pricing-card__desc { margin-bottom: 1.6rem; }
.pricing-card .check-list { flex: 1; margin: 0 0 2rem; }
.pricing-card .btn { justify-content: center; }

.compare-table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.compare-table th, .compare-table td { padding: 0.9rem 1rem; text-align: left; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; }
.compare-table thead th { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.compare-table thead th:last-child { color: var(--color-primary); }
.compare-table th:not(:first-child), .compare-table td:not(:first-child) { text-align: center; }
.compare-table tbody td:first-child { font-weight: 500; color: var(--color-text); }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table .yes { color: var(--color-primary); font-weight: 700; }
.compare-table .no { color: var(--color-border); }

/* Mobile equivalent of .compare-table — two full-width cards instead
   of a 3-column table, so nothing needs horizontal scrolling on small
   screens. Hidden here; shown (and .compare-table-wrap hidden) <=780px
   — see RESPONSIVE. */
.compare-cards { display: none; }
.compare-card {
  background: var(--color-white); border-radius: var(--radius-lg);
  padding: 1.8rem 1.6rem; border: 1px solid var(--color-border);
}
.compare-card + .compare-card { margin-top: 1.2rem; }
.compare-card--featured { border-color: var(--color-primary); box-shadow: 0 30px 60px -32px rgba(14,122,84,0.3); }
.compare-card__title { font-size: 1.1rem; }
.compare-card__title span { font-family: var(--font-body); font-weight: 500; font-size: 0.85rem; color: var(--color-text-muted); }
.compare-card--featured .compare-card__title { color: var(--color-primary); }
.compare-card__list { margin-top: 1.1rem; display: flex; flex-direction: column; gap: 0.8rem; }
.compare-card__list li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; }
.compare-card__list li span { color: var(--color-text-muted); font-size: 0.85rem; }
.compare-card__list li.is-yes { color: var(--color-text); font-weight: 500; }
.compare-card__list li.is-yes .icon { color: var(--color-primary); flex-shrink: 0; }
.compare-card__list li.is-no { color: var(--color-text-muted); }
.compare-card__list li.is-no .icon { color: var(--color-border); flex-shrink: 0; width: 0.85em; height: 0.85em; }

.benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.2rem; }
.benefit-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.3rem 1.4rem; }
.benefit-card__label { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--color-dark); margin-bottom: 0.4rem; }
.benefit-card p { font-size: 0.85rem; margin: 0; }

.info-box { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.6rem 1.8rem; }
.info-box + .info-box { margin-top: 1.2rem; }
.info-box h4 { font-family: var(--font-heading); font-size: 1rem; margin-bottom: 0.5rem; color: var(--color-dark); }
.info-box p { font-size: 0.92rem; margin: 0; }
.info-box p + p { margin-top: 0.6rem; }

/* ================================================================
   20. LEGAL PAGES (Terms / Privacy)
   ================================================================ */
.legal-content { max-width: 820px; margin: 0 auto; }
.legal-meta { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 2.2rem; }
.legal-toc { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.6rem 1.8rem; margin-bottom: 3rem; }
.legal-toc h2 { font-size: 1rem; margin-bottom: 0.9rem; }
.legal-toc ol { padding-left: 1.3rem; columns: 2; column-gap: 2rem; }
.legal-toc li { font-size: 0.88rem; margin-bottom: 0.5rem; break-inside: avoid; }
.legal-toc a:hover { color: var(--color-primary); }
.legal-content section { margin-bottom: 2.6rem; scroll-margin-top: 100px; }
.legal-content h2 { font-size: 1.25rem; margin-bottom: 0.9rem; }
.legal-content h3 { font-size: 1rem; margin: 1.3rem 0 0.5rem; color: var(--color-dark); }
.legal-content p, .legal-content li { font-size: 0.95rem; line-height: 1.75; color: var(--color-text-muted); }
.legal-content p { margin-bottom: 0.9rem; }
.legal-content ul, .legal-content ol { padding-left: 1.4rem; margin-bottom: 0.9rem; display: flex; flex-direction: column; gap: 0.4rem; }
.legal-content strong { color: var(--color-text); }
.legal-placeholder { background: rgba(232,163,61,0.2); padding: 0.05em 0.4em; border-radius: 4px; font-style: italic; color: var(--color-text); }

/* ================================================================
   21. RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 460px; }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .work__grid { grid-template-columns: repeat(2, 1fr); }
  .team__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-form { padding: 2rem; }
  .lead-form { padding: 2.2rem; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
  .nav, .header__actions .btn { display: none; }
  .nav-toggle { display: flex; }
  .hero__row { flex-direction: column; align-items: flex-start; }
  .compare-table-wrap { display: none; }
  .compare-cards { display: block; }
  .hero__laptop { display: none; }
  .hero__mobile-bg {
    display: block; position: absolute; left: 0; right: 0; top: 65%; height: 42%;
    z-index: 0; opacity: 0.16; pointer-events: none; overflow: hidden;
  }
  .hero__mobile-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
  .scroll-cue { position: relative; z-index: 1; }
  .services__grid, .work__grid, .team__grid { grid-template-columns: 1fr; }
  .process__list { grid-template-columns: 1fr; }
  .section-head--split { flex-direction: column; align-items: flex-start; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 1.5rem; }
  .lead-form { padding: 1.6rem; }
  .check-list--grid { grid-template-columns: 1fr; }
  .how-visual__grid { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: 1fr; }
  .legal-toc ol { columns: 1; }
}






.desktop-break {
  display: none;
}
@media (min-width: 769px) {
  .desktop-break {
    display: block;
  }
}
@media (max-width: 768px) {
  .footer-text-left {
    text-align: left;
  }
  .page-header__bg--code { background-image: url('../assets/img/code-banner-mobile.jpg'); }
}