@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&display=swap');

/* =========================================================
   TABLE OF CONTENTS  (Ctrl+F the section name to jump there)
   ---------------------------------------------------------
   1.  Tokens ............ colours, shadows, animation speeds
   2.  Base .............. page font, links, text selection
   3.  Scroll effects .... blue progress bar, fade-in on scroll
   4.  Nav ............... top bar, logo, menu links, Menu button
   5.  Hero .............. big headline on home page (index.html)
   6.  Marquee ........... scrolling text strip (index.html)
   7.  Buttons ........... blue button + outline button
   8.  Page header ....... light blue banner at top of About/Services/Work
   9.  Sections .......... section spacing, headings, eyebrow, lead
   10. About ............. about.html text block
   11. Explore ........... 3 cards on home page (index.html)
   12. Pricing cards ..... services.html price cards
   13. Chatbot add-on .... services.html chatbot pricing + steps
   13b. Learn more ....... "Learn more" buttons + info panels (services.html)
   16b. Contact page ..... contact.html details + quote form
   14. Work .............. work.html project cards
   15. Hover effects ..... card lifts on mouse hover (desktop only)
   16. Footer ............ black contact area at bottom of every page
   17. Mobile ............ phone / small screen layout (< 860px)
   18. Accessibility ..... reduced motion / transparency / contrast
   ========================================================= */

/* =========================================================
   1. Tokens — change these to restyle the whole site
   ========================================================= */
:root {
  /* Brand colours */
  --navy: #071a45;
  --blue: #1f6fd1;
  --blue-dark: #1557a8;
  --sky: #3ec6f5;
  --ice: #d6ecff;
  --ice-soft: #eaf5ff;

  /* Page + text colours */
  --bg: #f7fbff;               /* page background */
  --card: #ffffff;             /* card background */
  --ink: #071a45;              /* main text */
  --ink-soft: #4f5d75;         /* grey secondary text */

  /* Borders + corner rounding */
  --line: rgba(7, 26, 69, 0.1);
  --border: var(--line);
  --rule: 1px solid var(--line);
  --radius: 16px;              /* card corner roundness */
  --accent: var(--blue);
  --accent-dark: var(--blue-dark);

  /* Shadows — bigger surfaces read as thicker */
  --shadow-sm: 0 1px 2px rgba(7, 26, 69,.04), 0 2px 8px rgba(7, 26, 69,.04);
  --shadow: 0 1px 2px rgba(7, 26, 69,.04), 0 8px 24px rgba(7, 26, 69,.06);
  --shadow-lg: 0 2px 6px rgba(7, 26, 69,.05), 0 24px 60px rgba(7, 26, 69,.14);

  /* Frosted-glass look (used by the nav bar) */
  --material: rgba(247, 251, 255, 0.72);
  --material-strong: rgba(247, 251, 255, 0.86);
  --material-blur: blur(20px) saturate(180%);

  /* Animation curves + speeds */
  --spring: cubic-bezier(.32, .72, 0, 1);     /* sheet/drawer feel */
  --spring-soft: cubic-bezier(.22, 1, .36, 1); /* gentle settle */
  --t-press: 100ms;            /* button press */
  --t-ui: 350ms;               /* hover colour changes */
  --t-surface: 450ms;          /* card lifts */
  --t-reveal: 800ms;           /* fade-in on scroll */
}

/* =========================================================
   2. Base — applies to the whole page
   ========================================================= */
/* Reset: remove default browser spacing */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Smooth scrolling when clicking # links */
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
/* Whole page: font, background colour, text colour */
body {
  font-family: "Archivo", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  font-size: 100%;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}
/* Highlight colour when you select text */
::selection { background: var(--ice); color: var(--navy); }
/* All links */
a { color: var(--ink); text-decoration-color: var(--blue); text-underline-offset: 4px; transition: color var(--t-ui) var(--spring-soft); }
/* All links — on hover */
a:hover { color: var(--blue-dark); }
/* Blue outline when tabbing with keyboard */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
/* Content container — max page width + side padding */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 2rem; }
/* Headings: even line breaks */
h1, h2, h3, h4 { text-wrap: balance; }
/* Paragraphs: avoid single word on last line */
p { text-wrap: pretty; }

/* =========================================================
   3. Scroll effects
   ========================================================= */
/* Blue progress bar at very top of screen (driven by nav.js) */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  background: var(--blue); z-index: 50;
  transform: scaleX(0); transform-origin: left center; will-change: transform;
}

/* Fade-in on scroll — starting state (hidden, slightly lower) */
.reveal {
  opacity: 0; transform: translateY(20px) scale(.985);
  transition: opacity var(--t-reveal) var(--spring-soft), transform var(--t-reveal) var(--spring-soft);
}
/* Fade-in on scroll — end state (shown) */
.reveal.visible { opacity: 1; transform: none; }
/* Animation: fade up (used by hero + page header text) */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Animation: marquee scroll left */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================================
   4. Nav — translucent top bar, content scrolls underneath
   ========================================================= */
/* Nav bar background (sticks to top) */
header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(7, 26, 69, .9);   /* dark nav bar colour */
  -webkit-backdrop-filter: var(--material-blur);
  backdrop-filter: var(--material-blur);
  transition: box-shadow var(--t-ui) var(--spring-soft), background var(--t-ui) var(--spring-soft), transform var(--t-ui) var(--spring);
}
/* Nav bar — slid out of view while scrolling down (toggled by nav.js) */
header.nav-hidden { transform: translateY(-100%); }
header.nav-hidden::after { opacity: 0; }
/* Soft shadow under nav bar (hidden until you scroll) */
header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px;
  background: linear-gradient(to bottom, rgba(7, 26, 69,.12), transparent);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-ui) var(--spring-soft);
}
/* Nav bar — after scrolling down (a bit more solid) */
header.scrolled { background: rgba(7, 26, 69, .96); box-shadow: 0 1px 0 rgba(214, 236, 255,.08); }
header.scrolled::after { opacity: 1; }

/* Nav bar layout + height */
nav.wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
/* Logo text */
.logo { font-weight: 700; font-size: 1.45rem; letter-spacing: -0.02em; }
.logo a { color: var(--ice); text-decoration: none; display: flex; align-items: center; }
/* Cube icon before the logo text (images/kzbuild-icon.png) */
.logo-icon {
  height: 46px; width: auto; margin-right: 12px;
  transition: transform var(--t-ui) var(--spring);
}
.logo a:hover .logo-icon { transform: scale(1.08) rotate(-4deg); }
.logo a:active .logo-icon { transform: scale(.92); transition-duration: var(--t-press); }
/* "Build" part of the logo text, in the logo's sky blue */
.logo span { color: var(--sky); }

/* Nav menu links (Home / About / Services / Work) */
nav ul { list-style: none; display: flex; gap: 4px; }
nav ul a {
  display: block; padding: 8px 16px; border-radius: 999px;
  text-decoration: none; color: rgba(214, 236, 255,.72); font-size: .92rem; font-weight: 500; letter-spacing: .005em;
  transition: background var(--t-ui) var(--spring-soft), color var(--t-ui) var(--spring-soft), transform var(--t-ui) var(--spring);
}
/* Nav link — hover */
nav ul a:hover { background: rgba(214, 236, 255,.1); color: var(--ice); }
/* Nav link — pressed */
nav ul a:active { transform: scale(.95); transition-duration: var(--t-press); }
/* Nav link — current page */
nav ul a.active { background: var(--ice); color: var(--ink); }

/* "Menu" button (only shows on mobile — see Mobile section) */
.nav-toggle {
  display: none; background: none; border: 1px solid rgba(214, 236, 255,.3); border-radius: 999px; cursor: pointer;
  font: 500 .85rem/1 "Archivo", sans-serif; letter-spacing: .01em; padding: 10px 16px; color: var(--ice);
  min-width: 72px;
  transition: background var(--t-ui) var(--spring-soft), transform var(--t-ui) var(--spring);
}
.nav-toggle:hover { background: rgba(214, 236, 255,.1); }
.nav-toggle:active { transform: scale(.94); transition-duration: var(--t-press); }

/* =========================================================
   5. Hero — big intro on home page (index.html)
   ========================================================= */
/* Hero background — light dot-grid pattern */
.hero {
  padding: 0; overflow: hidden;
  background-color: var(--bg);
  background-image: radial-gradient(rgba(7, 26, 69,.09) 1px, transparent 1.5px);
  background-size: 22px 22px;
}
/* Hero top/bottom spacing */
.hero .wrap { padding-top: 4.5rem; padding-bottom: 3.5rem; }
/* Hero layout: text left, visual right */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
/* Hero big headline */
.hero h1 {
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  font-weight: 600; line-height: 1.02; letter-spacing: -0.04em;
  max-width: 16ch; margin-bottom: 1.75rem;
  animation: fadeInUp 1s var(--spring-soft) both;
}
/* Blue highlighted word in hero headline */
.hero h1 span:not(.w) { color: var(--blue); }
/* Hero paragraph under headline */
.hero p {
  color: var(--ink-soft); max-width: 520px; margin-bottom: 2.5rem;
  font-size: 1.12rem; line-height: 1.55;
  animation: fadeInUp 1s var(--spring-soft) .12s both;
}
/* Hero buttons fade in */
.hero .btn, .hero .btn-outline { animation: fadeInUp 1s var(--spring-soft) .24s both; }

/* Hero visual — wrapper. It "materializes" (blur + scale settle together)
   rather than just fading, so it reads as a real surface arriving. */
.hero-visual {
  position: relative; padding: 24px 16px 32px 28px;
  animation: materialize 1.1s var(--spring-soft) .3s backwards;
  /* --rx/--ry tilt and --px/--py parallax are set by motion.js on desktop */
  --rx: 0deg; --ry: 0deg; --px: 0px; --py: 0px;
}
@keyframes materialize {
  from { opacity: 0; transform: translateY(18px) scale(.95); filter: blur(12px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
/* Mock browser window, slightly tilted (and tilts toward the mouse) */
.mock-browser {
  background: var(--card); border: 1px solid rgba(7, 26, 69,.12); border-radius: 18px;
  box-shadow: var(--shadow-lg); overflow: hidden;
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) rotate(2deg);
  will-change: transform;
}
/* Browser top bar */
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: var(--ice-soft); border-bottom: var(--rule); }
/* Three window dots (blue, sky, grey) */
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(7, 26, 69,.15); }
.mock-bar i:nth-child(1) { background: var(--blue); }
.mock-bar i:nth-child(2) { background: var(--sky); }
/* Fake address bar "yourbusiness.com" */
.mock-bar span { flex: 1; margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: var(--card); color: var(--ink-soft); font-size: .75rem; }
/* Fake page inside the browser */
.mock-page { padding: 16px; display: grid; gap: 12px; }
/* Fake dark banner */
.mock-hero { background: var(--navy); border-radius: 12px; padding: 28px 22px; display: grid; gap: 10px; }
/* Fake headline lines */
.mock-hero b { display: block; height: 12px; width: 80%; border-radius: 6px; background: var(--ice); }
.mock-hero b:nth-child(2) { width: 55%; opacity: .5; }
/* Fake blue button */
.mock-hero em { display: block; width: 92px; height: 26px; margin-top: 8px; border-radius: 999px; background: var(--blue); }
/* Fake cards row */
.mock-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mock-cards b { display: block; height: 72px; border-radius: 10px; background: var(--ice); }
.mock-cards b:nth-child(2) { background: var(--sky); }
/* The fake page builds itself: banner, lines, button, then cards, one by one */
.mock-hero { transform-origin: top center; animation: buildIn .7s var(--spring-soft) .75s both; }
.mock-hero b, .mock-hero em { transform-origin: left center; animation: growX .7s var(--spring-soft) both; }
.mock-hero b:nth-child(1) { animation-delay: 1s; }
.mock-hero b:nth-child(2) { animation-delay: 1.1s; }
.mock-hero em { animation-delay: 1.22s; }
.mock-cards b { animation: buildIn .7s var(--spring-soft) both; }
.mock-cards b:nth-child(1) { animation-delay: 1.3s; }
.mock-cards b:nth-child(2) { animation-delay: 1.4s; }
.mock-cards b:nth-child(3) { animation-delay: 1.5s; }
@keyframes buildIn { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes growX { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }

/* Floating chatbot bubble (bottom-left) */
.mock-chat {
  position: absolute; left: 0; bottom: 0; max-width: 230px;
  padding: 12px 16px; border-radius: 16px 16px 16px 4px;
  background: var(--card); border: var(--rule); box-shadow: var(--shadow-lg);
  font-size: .88rem; line-height: 1.4; font-weight: 500;
  /* Pops in from its tail corner after the page builds, floats once, then rests.
     --px/--py: parallax depth (moves more than the browser = closer to you). */
  transform: translate(var(--px), var(--py));
  transform-origin: bottom left;
  animation: popIn .6s var(--spring) 1.6s backwards, float 2.6s ease-in-out 2.4s 1;
}
@keyframes popIn { from { opacity: 0; transform: translate(var(--px), var(--py)) scale(.6); } to { opacity: 1; transform: translate(var(--px), var(--py)); } }
/* Typing dots shown before the answer (motion.js toggles .typing).
   The answer stays in place but invisible, so the bubble never jumps size. */
.chat-text { transition: opacity .35s var(--spring-soft); }
.chat-typing {
  position: absolute; left: 16px; bottom: 14px; display: flex; gap: 4px;
  opacity: 0; transition: opacity .25s var(--spring-soft);
}
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); animation: typingDot 1s ease-in-out infinite; }
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
.mock-chat.typing .chat-text { opacity: 0; }
.mock-chat.typing .chat-typing { opacity: 1; }
@keyframes typingDot { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
/* "AI assistant" label in the bubble */
.mock-chat small { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--ink-soft); font-size: .72rem; font-weight: 600; }
.mock-chat small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }

/* Blue round "From RM300" sticker (top-right) */
.mock-sticker {
  position: absolute; top: 0; right: 0; width: 100px; height: 100px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: var(--blue); color: #fff; font-size: .75rem; font-weight: 500; line-height: 1.1;
  box-shadow: 0 10px 24px rgba(31, 111, 209,.3);
  /* Parallax moves opposite the chat bubble, so the mockup reads as layered depth */
  transform: translate(calc(var(--px) * -1.3), calc(var(--py) * -1.3)) rotate(-10deg);
  animation: stickerIn .7s var(--spring) 1.9s backwards, pulse 1.8s ease-in-out 2.7s 1;
}
@keyframes stickerIn {
  from { opacity: 0; transform: translate(calc(var(--px) * -1.3), calc(var(--py) * -1.3)) rotate(-40deg) scale(.4); }
  to   { opacity: 1; transform: translate(calc(var(--px) * -1.3), calc(var(--py) * -1.3)) rotate(-10deg); }
}
.mock-sticker strong { display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; }

/* Animation: gentle up-and-down float (chat bubble), keeps its parallax */
@keyframes float { 50% { transform: translate(var(--px), calc(var(--py) - 8px)); } }
/* Animation: one zoom in and out ("From RM300" sticker), keeps its tilt + parallax */
@keyframes pulse { 50% { transform: translate(calc(var(--px) * -1.3), calc(var(--py) * -1.3)) rotate(-10deg) scale(1.1); } }

/* Headlines split into words by motion.js: each word rises in a beat after the last */
.split .w { display: inline-block; }
.hero h1.split, .page-header h1.split { animation: none; }
.split.go .w { animation: wordUp .9s var(--spring-soft) backwards; }
.reveal-words.visible .w { animation: wordUp .9s var(--spring-soft) both; }
.reveal-words .w { opacity: 0; }
.reveal.reveal-words { opacity: 1; transform: none; }
@keyframes wordUp {
  from { opacity: 0; transform: translateY(.5em); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* =========================================================
   6. Marquee — scrolling text strip (index.html)
   ========================================================= */
/* Marquee strip (borders + faded edges) */
.marquee {
  background: #123a75;   /* strip colour (dark blue) */
  overflow: hidden; border-top: var(--rule); border-bottom: var(--rule); padding: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
/* Marquee speed (40s = one loop) */
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
/* Pause marquee on hover */
.marquee:hover .marquee-track { animation-play-state: paused; }
/* Each marquee word */
.marquee-track span {
  font-weight: 500; font-size: 1.05rem; color: rgba(214, 236, 255, .85); letter-spacing: -0.005em;
  padding: 16px 28px; display: flex; align-items: center; gap: 56px; white-space: nowrap;
}
/* Blue dot between marquee words */
.marquee-track span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sky); opacity: .8; }

/* =========================================================
   7. Buttons — .btn (blue) and .btn-outline (outlined)
   ========================================================= */
/* Shared button shape + size */
.btn, .btn-outline {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 14px 22px; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: .95rem; letter-spacing: .005em;
  transition:
    background var(--t-ui) var(--spring-soft),
    color var(--t-ui) var(--spring-soft),
    border-color var(--t-ui) var(--spring-soft),
    box-shadow var(--t-ui) var(--spring-soft),
    transform var(--t-ui) var(--spring);
}
/* Arrow → at end of buttons */
.btn::after, .btn-outline::after { content: "\2192"; transition: transform var(--t-ui) var(--spring); }
/* Arrow slides right on hover */
.btn:hover::after, .btn-outline:hover::after { transform: translateX(4px); }
/* Button shrinks slightly when pressed */
.btn:active, .btn-outline:active { transform: scale(.97); transition-duration: var(--t-press); }
/* Blue button */
.btn { background: var(--blue); color: #fff; border: 1px solid var(--blue); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px rgba(31, 111, 209,.18); }
/* Blue button — hover */
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 10px 24px rgba(21, 87, 168,.24); }
/* Outline button */
.btn-outline { border: 1px solid rgba(7, 26, 69,.18); color: var(--ink); background: transparent; margin-left: 10px; }
/* Outline button — hover */
.btn-outline:hover { background: var(--ice-soft); border-color: rgba(7, 26, 69,.3); color: var(--ink); }

/* =========================================================
   8. Page header — light blue banner at top of About / Services / Work
   ========================================================= */
/* Banner background */
.page-header {
  background:
    radial-gradient(50% 90% at 100% 0%, rgba(62, 198, 245,.28), transparent 70%),
    var(--ice-soft);
  border-bottom: var(--rule);
}
/* Banner top/bottom spacing */
.page-header .wrap { padding-top: 4.25rem; padding-bottom: 3rem; }
/* Banner title */
.page-header h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.038em;
  margin-bottom: 1.1rem; animation: fadeInUp 1s var(--spring-soft) both;
}
/* Banner paragraph */
.page-header p { color: var(--ink-soft); max-width: 560px; font-size: 1.08rem; animation: fadeInUp 1s var(--spring-soft) .1s both; }
/* Banner illustration: the whole picture sits on the right, its edges faded into the banner colour */
.page-header:has(.page-header-img) { position: relative; overflow: hidden; }
.page-header:has(.page-header-img) .wrap { min-height: 340px; display: flex; flex-direction: column; justify-content: center; }
.page-header-img {
  position: absolute; top: 50%; right: max(-60px, calc((100% - 1160px) / 2 - 60px));
  height: 145%; width: auto; aspect-ratio: 1168 / 784; transform: translateY(-50%);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%);
  pointer-events: none; animation: headerImgIn 1.2s ease both;
}
@keyframes headerImgIn { from { opacity: 0; } to { opacity: 1; } }
.page-header-img[src*="header-about"] { top: 54%; }
/* Services picture nudged a little to the right (desktop) */
@media (min-width: 761px) { .page-header-img[src*="header-services"] { transform: translate(50px, -50%); } }
.page-header:has(.page-header-img) h1,
.page-header:has(.page-header-img) p { position: relative; z-index: 2; }
/* Medium screens: the picture would run into the text, so wash it out a little behind it */
@media (max-width: 1100px) {
  .page-header:has(.page-header-img)::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, var(--ice-soft) 0%, var(--ice-soft) 35%, rgba(234, 245, 255, 0) 75%);
  }
}
@media (max-width: 760px) {
  .page-header:has(.page-header-img) .wrap { min-height: 0; }
  .page-header-img { right: -35%; height: 120%; }
  .page-header:has(.page-header-img)::before {
    background: linear-gradient(90deg, var(--ice-soft) 0%, rgba(234, 245, 255, .7) 100%);
  }
}

/* =========================================================
   9. Sections & type scale (used on every page)
   ========================================================= */
/* Space above/below every section */
section { padding: 3.5rem 0; }
/* Thin line between sections */
section + section { border-top: var(--rule); }
/* Tinted section — add class="tint" to any <section> for a light blue background */
section.tint { background: var(--ice-soft); }
/* Section titles (h2) */
section h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: .9rem; max-width: 22ch; }
/* Small label above section titles ("eyebrow") */
.eyebrow {
  display: inline-block;
  color: var(--ink); font-weight: 300; font-size: 1.6rem; letter-spacing: -0.01em; margin-bottom: 1rem;
  text-decoration: underline; text-decoration-color: #dfe6ef;   /* light grey underline that blends into the white */
  text-decoration-thickness: 2px; text-underline-offset: 8px;
}
/* "Add-On" eyebrow (services.html): underline is a darker shade of its light blue background */
#chatbot-addon .eyebrow { text-decoration-color: #c6d1de; }
/* Intro paragraph under section titles (.lead) */
section > .wrap > p.lead, footer p.lead { color: var(--ink-soft); max-width: 560px; margin-bottom: 2rem; font-size: 1.05rem; }

/* =========================================================
   10. About — text block on about.html
   ========================================================= */
/* About text width */
.about-content { max-width: 720px; }
/* About paragraphs */
.about-content p { color: var(--ink-soft); margin-bottom: 1rem; font-size: 1.05rem; line-height: 1.7; }
/* Last about paragraph (sign-off with line above) */
.about-content p:last-child { margin-top: 2rem; padding-top: 1.5rem; border-top: var(--rule); font-weight: 500; }

/* =========================================================
   11. Explore — 3 cards on home page (index.html)
   ========================================================= */
/* "What I Do" section: muted grey-blue instead of the bright tint, easier on the eyes */
section.explore.tint { background: #e4eaf1; }
/* Services "Add-On" section: same muted grey-blue + soft cards, easier on the eyes */
#chatbot-addon.tint { background: #e4eaf1; }
#chatbot-addon .card { background: #f4f7fa; }
#chatbot-addon .card.featured { background: linear-gradient(180deg, #edf2f7, #f4f7fa); }
/* Explore grid: 3 columns */
.explore-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: ex; }
/* Explore card box */
.explore-card {
  counter-increment: ex;
  display: flex; flex-direction: column; min-height: 260px;
  padding: 28px; text-decoration: none; color: var(--ink);
  background: #f4f7fa; border: var(--rule); border-radius: var(--radius);   /* soft off-white, not pure white */
  box-shadow: var(--shadow-sm);
  transition: background var(--t-ui) var(--spring-soft), transform var(--t-surface) var(--spring), box-shadow var(--t-surface) var(--spring-soft);
}
/* Card number "01", "02", "03" */
.explore-card::before { content: "0" counter(ex); font-weight: 500; font-size: .85rem; letter-spacing: .02em; color: var(--ink-soft); margin-bottom: auto; }
/* Card pressed */
.explore-card:active { transform: scale(.985); transition-duration: var(--t-press); }
/* Card title */
.explore-card h3 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 40px 0 8px; }
/* Card text */
.explore-card p { font-size: .95rem; color: var(--ink-soft); margin-bottom: 24px; }
/* Blue link text at bottom of card */
.explore-link { font-weight: 600; font-size: .9rem; color: var(--blue-dark); display: inline-flex; gap: 6px; }
/* Arrow after card link */
.explore-link::after { content: "\2192"; transition: transform var(--t-ui) var(--spring); }

/* =========================================================
   12. Pricing cards — services.html
   ========================================================= */
/* Pricing grid: 3 columns */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* Pricing card box */
.card {
  position: relative; padding: 32px 28px; background: var(--card);
  border: var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-surface) var(--spring), box-shadow var(--t-surface) var(--spring-soft);
}
/* Highlighted ("featured") pricing card */
.card.featured {
  background: linear-gradient(180deg, var(--ice-soft), #f0f7ff);
  border-color: rgba(7, 26, 69,.16);
  box-shadow: var(--shadow);
}
/* "Most Popular" / "Best Value" badge in card corner */
.badge {
  position: absolute; top: 24px; right: 24px;
  background: var(--card); color: var(--blue-dark); border: 1px solid rgba(31, 111, 209,.25);
  font-size: .72rem; font-weight: 600; letter-spacing: .03em; padding: 4px 10px; border-radius: 999px;
}
/* Plan name */
.card h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 20px; padding-right: 110px; }
/* Big price number */
.price { font-size: 2.2rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--ink); margin-bottom: 24px; font-variant-numeric: tabular-nums; }
/* Small text next to price (e.g. "/mo") */
.price small { font-size: .95rem; font-weight: 500; letter-spacing: 0; color: var(--ink-soft); }
/* Feature list */
.card ul { list-style: none; color: var(--ink-soft); font-size: .95rem; }
/* Each feature row */
.card ul li { padding: 10px 0 10px 20px; position: relative; border-top: var(--rule); }
/* Blue dot before each feature */
.card ul li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); opacity: .75; }

/* =========================================================
   13. Chatbot add-on — services.html
   ========================================================= */
/* Price + old price stacked */
.addon-cards .price-row { display: flex; flex-direction: column; gap: 6px; }
.addon-cards .price { margin-bottom: 0; }
/* Crossed-out old price */
.addon-cards .price-old { font-size: .92rem; color: var(--ink-soft); text-decoration: line-through; text-decoration-color: rgba(21, 87, 168,.6); }
.addon-cards .price-old small { font-size: .8rem; }
/* Setup fee line */
.addon-cards .setup-fee { font-size: .88rem; color: var(--ink-soft); margin: 12px 0 20px; }
/* Note under add-on cards */
.addon-note { margin: 24px 0 0; }
/* Launch offer pill */
.launch-badge {
  display: inline-block; font-size: .9rem; font-weight: 500; color: var(--ink);
  background: var(--ice); padding: 10px 18px; border-radius: 999px;
}
/* "How it works" block: title left, steps right */
.addon-how { margin: 48px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; border-top: var(--rule); padding-top: 40px; }
/* "How it works" title */
.addon-how > h3 { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; grid-row: span 2; }
/* Steps list */
.how-steps { list-style: none; counter-reset: step; display: grid; margin-bottom: 20px; }
/* Each step row */
.how-steps li { position: relative; padding: 16px 0 16px 56px; color: var(--ink-soft); border-bottom: var(--rule); }
.how-steps li:first-child { padding-top: 0; }
/* Bold text inside steps */
.how-steps li strong { color: var(--ink); font-weight: 600; }
/* Step number "01", "02"... */
.how-steps li::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; left: 0; font-weight: 500; color: var(--blue-dark); font-variant-numeric: tabular-nums;
}
/* "Trained specifically on your business..." text under steps */
.addon-managed { color: var(--ink-soft); font-size: .95rem; grid-column: 2; }
/* Button area under add-on */
.addon-cta { margin-top: 32px; }

/* =========================================================
   13b. Learn more — button that opens an info panel (services.html)
   Uses <details>/<summary>, so it works without JavaScript.
   ========================================================= */
/* Space between the Learn more block and the price cards below it */
.learn-more { margin: 0 0 3rem; }
/* Website prices: 2 cards side by side, centred on the page */
.cards.cards-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin: 0 auto; }
/* Monthly Maintenance: wide box under both cards */
.card.card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: center; }
.card-wide h3 { padding-right: 0; }
.card-wide .price { margin-bottom: 0; }
/* Maintenance features in 2 columns */
.card-wide ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
/* Learn more placed BELOW the price cards, centred with them */
.learn-more.learn-more-below { max-width: 820px; margin: 2.5rem auto 0; }

/* E-commerce "Coming Soon" box (services.html) — dashed border = not ready yet */
.coming-soon {
  position: relative; padding: 40px 36px; border-radius: var(--radius);
  border: 2px dashed rgba(7, 26, 69,.2); background: var(--card);
}
.coming-soon h2 { margin-bottom: .6rem; }
.coming-soon p { color: var(--ink-soft); max-width: 560px; }
/* Blue "Coming Soon" pill in the corner */
.soon-badge {
  position: absolute; top: 24px; right: 24px;
  background: var(--blue); color: #fff; font-size: .75rem; font-weight: 600; letter-spacing: .03em;
  padding: 5px 12px; border-radius: 999px;
}
/* The "Learn more" button itself */
.learn-more > summary { list-style: none; cursor: pointer; margin-left: 0; }
.learn-more > summary::-webkit-details-marker { display: none; }
/* Arrow points down when the panel is open */
.learn-more[open] > summary::after { transform: rotate(90deg); }
/* The info panel that opens */
.learn-more-body {
  margin-top: 20px; padding: 28px; max-width: 760px;
  background: var(--card); border: var(--rule); border-left: 3px solid var(--sky);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  animation: fadeInUp .5s var(--spring-soft) both;
}
/* Paragraphs inside the panel */
.learn-more-body p { color: var(--ink-soft); margin-bottom: 1rem; }
.learn-more-body p:last-child { margin-bottom: 0; }
/* Bullet list inside the panel */
.learn-more-body ul { list-style: none; margin-bottom: 1rem; }
.learn-more-body li { position: relative; padding: 6px 0 6px 20px; color: var(--ink-soft); }
.learn-more-body li strong { color: var(--ink); font-weight: 600; }
/* Blue dot before each bullet */
.learn-more-body li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); opacity: .75; }

/* =========================================================
   14. Work — project cards on work.html
   ========================================================= */
/* Work grid: 2 columns */
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
/* Work card box */
.work-card {
  background: var(--card); border: var(--rule); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform var(--t-surface) var(--spring), box-shadow var(--t-surface) var(--spring-soft);
}
/* First work card — full width, image left + text right */
.work-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.work-card:first-child .work-thumb { height: 100%; min-height: 300px; }
/* Coloured preview box at top of work card */
.work-thumb {
  height: 220px; margin: 10px; border-radius: 10px;
  display: flex; align-items: flex-end; padding: 22px;
  background: var(--ice-soft); color: var(--ink);
  font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1;
  transition: background var(--t-surface) var(--spring-soft);
}
/* Preview box — "industrial" project (dark navy, matches Galvatech's site) */
.work-thumb.industrial {
  position: relative;
  background: radial-gradient(120% 90% at 85% 10%, #2c3a7a 0%, #141a33 65%);
  color: var(--ice);
  flex-direction: column; align-items: stretch; justify-content: space-between; gap: 22px;
  padding: 28px 28px 24px;
}
/* "One of my clients in the industrial field" line under the screenshot */
.work-thumb-label { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }

/* Screenshot in a browser frame, slightly tilted */
.shot-frame {
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 44px rgba(0,0,0,.45);
  transform: rotate(-1.5deg);
  transition: transform var(--t-surface) var(--spring);
}
/* Browser top bar */
.shot-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: #eef1f4; }
.shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: #c5ccd3; }
.shot-bar i:nth-child(1) { background: #ff5f57; }
.shot-bar i:nth-child(2) { background: #febc2e; }
.shot-bar i:nth-child(3) { background: #28c840; }
/* Fake address bar */
.shot-bar span { flex: 1; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: #fff; color: #6b7682; font-size: 11px; font-weight: 400; letter-spacing: 0; line-height: 1.4; }
/* The screenshot image */
.shot-frame img { display: block; width: 100%; height: auto; }
/* Screenshot straightens on hover (desktop) */
@media (hover: hover) and (pointer: fine) {
  .work-card:hover .shot-frame { transform: rotate(0deg) scale(1.01); }
}

/* Floating client badge with logo (top-right corner) */
.shot-client {
  position: absolute; top: 14px; right: 14px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px; border-radius: 14px;
  background: #fff; color: var(--ink); box-shadow: var(--shadow-lg);
  font-size: 1rem; letter-spacing: 0; line-height: 1.2;
}
.shot-client img { width: 30px; height: 30px; object-fit: contain; }
.shot-client strong { display: block; font-size: .85rem; font-weight: 700; }
/* "Real client · Live site" with green dot */
.shot-client small { display: flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 500; color: var(--ink-soft); }
.shot-client small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1fbf5b; }
/* Preview box — "bakery" and "tuition" projects (light blue) */
.work-thumb.bakery, .work-thumb.tuition { background: var(--ice-soft); }
/* Sample cards: homepage screenshot rising from the bottom of the preview box */
.work-thumb.has-shot {
  height: auto; aspect-ratio: 16 / 9; overflow: hidden;
  flex-direction: column; justify-content: flex-start; align-items: stretch;
  padding: 24px 24px 0;
}
.work-thumb.has-shot .shot-frame {
  border-radius: 10px 10px 0 0;
  box-shadow: 0 12px 32px rgba(15, 30, 70, .18);
  transform: translateY(8px);
}
@media (hover: hover) and (pointer: fine) {
  .work-card:hover .work-thumb.has-shot .shot-frame { transform: translateY(0); }
}
/* Text area of work card */
.work-body { padding: 18px 28px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1; }
.work-card:first-child .work-body { padding: 32px 28px; justify-content: center; }
/* Project title */
.work-body h4 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
/* Project description */
.work-body p { font-size: .95rem; color: var(--ink-soft); }
/* Note under work grid */
.work-note { margin-top: 28px; color: var(--ink-soft); font-size: .95rem; }
/* Small pill tag (e.g. "Client Project", "Concept") */
.tag {
  margin-top: auto; display: inline-block;
  font-size: .75rem; font-weight: 500; letter-spacing: .02em;
  color: var(--ink); background: var(--ice); padding: 4px 10px; border-radius: 999px;
}
.work-card:first-child .tag { margin-top: 8px; }
/* Outlined tag variant */
.tag.tag-amber { color: var(--ink-soft); background: transparent; border: var(--rule); }
/* "View project →" link */
.work-link { font-size: .92rem; font-weight: 600; color: var(--ink); text-decoration: none; margin-top: 4px; }
.work-link::after { content: " \2192"; display: inline-block; margin-left: 4px; transition: transform var(--t-surface) var(--spring); }
/* "View project" link hover (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .work-link:hover { color: var(--blue-dark); }
  .work-link:hover::after { transform: translateX(4px); }
}

/* =========================================================
   15. Hover effects — only on mouse devices (not touchscreens)
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  /* Explore card lifts + turns light blue */
  .explore-card:hover { background: #ffffff; transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--ink); }
  .explore-card:hover .explore-link::after { transform: translateX(4px); }
  /* Pricing card lifts */
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  /* Work card lifts */
  .work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .work-card:hover .work-thumb.bakery, .work-card:hover .work-thumb.tuition { background: var(--ice); }
  /* Buttons lift slightly */
  .btn:hover, .btn-outline:hover { transform: translateY(-1px); }
  .btn:active, .btn-outline:active, .explore-card:active { transform: scale(.97); }
}

/* =========================================================
   16. Footer — black contact area (#contact, every page)
   ========================================================= */
/* Footer background + spacing */
footer#contact { background: var(--navy); color: var(--ice); padding: 4rem 0 0; }
/* Footer eyebrow label */
footer .eyebrow { color: var(--ice); text-decoration-color: rgba(214, 236, 255,.25); }
/* Footer big title */
footer h2 { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 600; line-height: 1; letter-spacing: -0.045em; margin-bottom: 1.25rem; }
/* Footer intro paragraph */
footer p.lead { color: rgba(214, 236, 255,.75); }
/* Contact boxes: 2 columns */
.contact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
/* Each contact box (WhatsApp / Email etc.) */
.contact-item {
  padding: 28px; border: 1px solid rgba(214, 236, 255,.14); border-radius: var(--radius);
  background: rgba(214, 236, 255,.02);
  transition: background var(--t-ui) var(--spring-soft), border-color var(--t-ui) var(--spring-soft);
}
/* Contact box — hover */
.contact-item:hover { background: rgba(214, 236, 255,.06); border-color: rgba(214, 236, 255,.28); }
/* Contact box title */
.contact-item h4 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; color: var(--ice); }
/* Contact box text */
.contact-item p { color: rgba(214, 236, 255,.7); font-size: .95rem; margin-bottom: 22px; }
/* Outline button inside footer (light version) */
footer .btn-outline { margin-left: 0; border-color: rgba(214, 236, 255,.3); color: var(--ice); }
footer .btn-outline:hover { background: var(--ice); border-color: var(--ice); color: var(--navy); }
/* © copyright line at very bottom */
.copyright { margin-top: 3rem; padding: 24px 0; border-top: 1px solid rgba(214, 236, 255,.12); color: rgba(214, 236, 255,.55); font-size: .85rem; letter-spacing: .01em; }

/* =========================================================
   16b. Contact page — contact.html
   ========================================================= */
/* Layout: details left, quote form right */
.contact-page { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.contact-details h2 { margin-bottom: 1.5rem; }
/* Email / Phone / WhatsApp boxes */
.detail-card {
  display: block; padding: 20px 22px; margin-bottom: 12px;
  background: var(--card); border: var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  text-decoration: none; color: var(--ink);
  transition: background var(--t-ui) var(--spring-soft), border-color var(--t-ui) var(--spring-soft);
}
.detail-card:hover { background: var(--ice-soft); border-color: rgba(7, 26, 69,.2); color: var(--ink); }
/* Small grey label ("Email", "Phone") */
.detail-card small { display: block; color: var(--ink-soft); font-size: .8rem; font-weight: 500; margin-bottom: 2px; }
/* The email address / phone number */
.detail-card strong { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }
/* "I usually reply within 24 hours" */
.contact-hours { color: var(--ink-soft); font-size: .92rem; margin-top: 16px; }

/* Quote form box (light blue) */
.quote-box {
  padding: 36px; border-radius: var(--radius);
  background: var(--ice-soft); border: var(--rule);
  box-shadow: var(--shadow);
  scroll-margin-top: 90px;   /* stops the nav covering it when linked with #quote */
}
.quote-intro { color: var(--ink-soft); margin-bottom: 24px; }
/* Form fields stacked */
.quote-form { display: grid; gap: 16px; }
/* Two fields side by side */
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* Field labels */
.quote-form label { display: grid; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--ink); }
/* Text boxes, dropdown, message box */
.quote-form input, .quote-form select, .quote-form textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(7, 26, 69,.18); background: var(--card);
  font: 400 1rem/1.4 "Archivo", sans-serif; color: var(--ink);
  transition: border-color var(--t-ui) var(--spring-soft), box-shadow var(--t-ui) var(--spring-soft);
}
.quote-form textarea { resize: vertical; }
/* Field when clicked into */
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31, 111, 209,.12);
}
/* Send buttons */
.quote-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.quote-actions button { cursor: pointer; font-family: inherit; }
.quote-actions .btn-outline { margin-left: 0; }

/* Small black footer (contact page only) */
.site-footer { background: var(--navy); }
.site-footer .copyright { margin-top: 0; border-top: none; }
/* Bottom bar: copyright left, number + email right (wraps on phones) */
.footer-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; }
.footer-contact { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-contact a { color: rgba(214, 236, 255,.8); text-decoration: none; transition: color var(--t-ui) var(--spring-soft); }
.footer-contact a:hover { color: var(--ice); text-decoration: underline; }

/* Stagger: handled by nav.js (things entering the screen together appear a beat apart) */

/* =========================================================
   17. Mobile — screens narrower than 860px
   ========================================================= */
@media (max-width: 860px) {
  /* All grids become 1 column */
  .cards, .explore-grid, .work-grid, .contact-row, .addon-how { grid-template-columns: minmax(0, 1fr); }
  /* Website prices + maintenance box stack into 1 column */
  .cards.cards-two, .card.card-wide { grid-template-columns: minmax(0, 1fr); }
  .card.card-wide { gap: 20px; }
  .card-wide ul { grid-template-columns: minmax(0, 1fr); }
  /* Coming Soon pill sits above the title instead of in the corner */
  .coming-soon { padding: 28px 22px; }
  .soon-badge { position: static; display: inline-block; margin-bottom: 14px; }
  .coming-soon .eyebrow { display: flex; width: fit-content; }
  /* Contact page: details above form, fields stack */
  .contact-page, .field-row { grid-template-columns: minmax(0, 1fr); }
  .quote-box { padding: 24px 20px; }
  /* Hero: headline + visual side by side, paragraph and buttons full width below.
     display: contents lets the text's children sit directly in the hero grid. */
  .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 20px; row-gap: 0; align-items: center; }
  .hero-text { display: contents; }
  .hero h1 { grid-column: 1; grid-row: 1; font-size: clamp(1.9rem, 7.4vw, 3.6rem); margin-bottom: 1.5rem; }
  .hero-visual { grid-column: 2; grid-row: 1; align-self: center; padding: 14px 8px 18px 10px; margin-bottom: 1.5rem; }
  .hero p, .hero-cta { grid-column: 1 / -1; }
  /* Smaller mock browser to fit the narrow column */
  .mock-browser { border-radius: 12px; }
  .mock-bar { padding: 8px 10px; gap: 4px; }
  .mock-bar i { width: 7px; height: 7px; }
  .mock-bar span { margin-left: 4px; padding: 2px 8px; font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mock-page { padding: 10px; gap: 8px; }
  .mock-hero { padding: 16px 12px; gap: 6px; border-radius: 8px; }
  .mock-hero b { height: 8px; }
  .mock-hero em { width: 56px; height: 16px; margin-top: 4px; }
  .mock-cards { gap: 6px; }
  .mock-cards b { height: 40px; border-radius: 6px; }
  .mock-chat { max-width: 170px; padding: 8px 12px; font-size: .74rem; bottom: -6px; }
  .mock-sticker { width: 70px; height: 70px; font-size: .6rem; top: -4px; right: -4px; }
  .mock-sticker strong { font-size: 1rem; }
  /* Very narrow phones: drop the chat bubble so the mockup stays readable */
  @media (max-width: 420px) {
    .mock-chat { display: none; }
  }
  /* Explore cards shorter */
  .explore-card { min-height: 200px; }
  /* First work card stacks image over text */
  .work-card:first-child { grid-template-columns: minmax(0, 1fr); }
  .work-card:first-child .work-thumb { min-height: 220px; }
  /* Chatbot "How it works" stacks */
  .addon-managed { grid-column: auto; }
  .addon-how > h3 { grid-row: auto; }

  /* Dropdown menu panel — hidden state.
     Grows out of the Menu button (top-right) and returns into it. */
  nav ul {
    position: fixed; top: 76px; right: 12px; left: 12px;
    flex-direction: column; gap: 2px; padding: 8px;
    /* Near-solid: it sits inside the translucent header, and stacking
       translucent-on-translucent collapses legibility. */
    background: rgba(7, 26, 69, .98);   /* dark dropdown to match nav bar */
    border: 1px solid rgba(214, 236, 255,.14);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    transform-origin: top right;
    opacity: 0; transform: translateY(-8px) scale(.94);
    visibility: hidden; pointer-events: none;
    transition: opacity var(--t-ui) var(--spring), transform var(--t-ui) var(--spring), visibility 0s linear var(--t-ui);
  }
  /* Dropdown menu panel — open state */
  nav ul.open {
    opacity: 1; transform: none; visibility: visible; pointer-events: auto;
    transition: opacity var(--t-ui) var(--spring), transform var(--t-ui) var(--spring), visibility 0s;
  }
  /* Menu links — bigger tap targets */
  nav ul a { padding: 14px 16px; font-size: 1rem; border-radius: 14px; }
  /* Show the "Menu" button */
  .nav-toggle { display: block; }
  /* Outline button drops below blue button */
  .btn-outline { margin-left: 0; margin-top: 10px; }
  /* Narrower side padding */
  .wrap { padding: 0 1.25rem; }
  /* Less space between sections */
  section { padding: 2.5rem 0; }
  /* Less space around hero */
  .hero .wrap { padding-top: 3rem; padding-bottom: 2.5rem; }
}

/* =========================================================
   18. Accessibility — gentler equivalents, not "no feedback"
   ========================================================= */
/* User turned on "reduce motion" in their OS */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Swap slides/lifts for short cross-fades */
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal { transform: none; transition: opacity 200ms ease; }
  .marquee-track { animation: none; }
  header.nav-hidden { transform: none; opacity: 0; pointer-events: none; }
  header { transition-property: box-shadow, background, opacity; }
  .explore-card, .card, .work-card, .btn, .btn-outline, nav ul a, .nav-toggle { transition-property: background, color, border-color, box-shadow, opacity; }
  .explore-card:hover, .card:hover, .work-card:hover, .btn:hover, .btn-outline:hover,
  .btn:active, .btn-outline:active, .explore-card:active, nav ul a:active, .nav-toggle:active { transform: none; }
  @media (max-width: 860px) {
    nav ul, nav ul.open { transform: none; transition: opacity 200ms ease, visibility 0s linear 200ms; }
    nav ul.open { transition: opacity 200ms ease, visibility 0s; }
  }
}

/* User turned on "reduce transparency" — solid nav instead of glass */
@media (prefers-reduced-transparency: reduce) {
  header, header.scrolled, nav ul { background: var(--navy); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* User turned on "increase contrast" — darker lines + text */
@media (prefers-contrast: more) {
  :root { --line: rgba(7, 26, 69, 0.35); --ink-soft: #2a3550; --material: var(--bg); --material-strong: var(--bg); }
  header { -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--ice); }
  .btn-outline { border-color: var(--ink); }
}


/* =========================================================
   v2. Homepage — featured client work + how it works
   ========================================================= */
.featured .work-grid { grid-template-columns: minmax(0, 1fr); }
.featured-more { margin-top: 1.5rem; font-weight: 600; }
.featured-more a { color: var(--blue-dark); }
.process.tint { background: #e4eaf1; }
.process .eyebrow { text-decoration-color: #c6d1de; }
.process-steps { list-style: none; display: grid; gap: 22px; max-width: 640px; margin: 2rem 0; padding: 0; }
.process-steps { position: relative; }
.process-steps li { position: relative; padding-left: 28px; }
.process-steps li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; z-index: 1;
  border-radius: 50%; background: #b9c5d3;
  transition: background var(--t-ui) var(--spring-soft), box-shadow var(--t-ui) var(--spring-soft), transform var(--t-ui) var(--spring);
}
/* Step dot lights up once the scroll line reaches it (motion.js) */
.process-steps li.reached::before { background: var(--blue); box-shadow: 0 0 0 5px rgba(31, 111, 209,.16); transform: scale(1.15); }
/* Without motion.js every dot is simply navy, as before */
html:not(.motion-js) .process-steps li::before { background: var(--navy); }
/* The line between dots: a grey track with a blue fill that follows your scroll 1:1 */
.process-line { position: absolute; left: 4px; width: 2px; border-radius: 2px; background: rgba(7, 26, 69,.12); pointer-events: none; }
.process-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--blue); transform: scaleY(0); transform-origin: top center; will-change: transform; }
.process-steps h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 8px; }
.process-steps p { color: var(--ink-soft); font-size: .95rem; }
.process-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.process-cta .btn-outline { margin: 0; }
@media (max-width: 860px) {
  .featured .work-card:first-child { grid-template-columns: minmax(0, 1fr); }
  .featured .work-card:first-child .work-thumb { min-height: 220px; }
}

/* =========================================================
   v3. Motion extras (motion.js)
   ========================================================= */
/* Phones: smaller typing dots to match the smaller bubble */
@media (max-width: 860px) {
  .chat-typing { left: 12px; bottom: 10px; }
  .chat-typing i { width: 5px; height: 5px; }
}

/* Reduced motion: no tilt, no word-by-word, no building — content simply appears */
@media (prefers-reduced-motion: reduce) {
  .hero-visual, .mock-hero, .mock-hero b, .mock-hero em, .mock-cards b, .mock-chat, .mock-sticker { animation: none !important; }
  .mock-browser { transform: rotate(2deg); }
  .reveal-words .w { opacity: 1; }
  .process-steps li::before { transition: background 200ms ease; }
  .process-steps li.reached::before { transform: none; }
}

/* ===== FAQ (services page) ===== */
.faq-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.faq-item { background: #fff; border: var(--rule); border-radius: 12px; padding: 1.4rem 1.5rem; }
.faq-item h3 { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: .55rem; color: var(--navy); }
.faq-item p { color: var(--ink-soft); line-height: 1.6; font-size: .97rem; }
#next-steps .how-steps { max-width: 760px; }