/* =============================================================
   ALOWEB, Global Stylesheet
   -------------------------------------------------------------
   A single source of truth for the whole site. To rebrand,
   change the tokens in :root below, colors, fonts, spacing
   and radii all flow from there.

   CONTENTS
   01. Design tokens (:root)
   02. Reset & base
   03. Typography helpers
   04. Layout (container, sections, grid)
   05. Buttons
   06. Eyebrow / labels (mono)
   07. Header & navigation
   08. Hero (search-field signature)
   09. Marquee
   10. Section heading block
   11. Service cards
   12. Stat row
   13. Workflow steps
   14. Capability lists ("what we do")
   15. FAQ accordion
   16. CTA band
   17. Forms (contact)
   18. Footer
   19. Dark section variant
   20. Motion / scroll reveal
   21. Responsive
   ============================================================= */

/* 01. DESIGN TOKENS ------------------------------------------- */
:root {
  /* Color */
  --paper: #fbf8f3;          /* warm near-white, default background      */
  --paper-2: #f3eee4;        /* slightly deeper warm surface              */
  --ink: #16140f;            /* warm near-black, primary text on paper   */
  --carbon: #15130e;         /* dark section background                   */
  --on-dark: #f4f0e8;        /* primary text on carbon                    */
  --muted: #54514b;          /* secondary text on paper                   */
  --muted-dark: #a79d8d;     /* secondary text on carbon                  */
  --line: #e6dfd2;           /* hairline rules on paper                   */
  --line-dark: #2f2b22;      /* hairline rules on carbon                  */
  --accent: #6EC1E4;         /* signal orange, CTAs, marks, caret        */
  --accent-press: #4aa8d0;   /* pressed / hover state                     */
  --accent-deep: #147ba6;    /* deeper blue for small accents that need white text (~4.8:1 AA) */
  --accent-soft: rgba(110, 193, 228, 0.16);

  /* Type */
  --font-display: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;
  --font-body: "Inter Tight", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: "Plus Jakarta Sans", "Inter Tight", system-ui, sans-serif; /* label/eyebrow font (modern, not monospace) */

  /* Fluid type scale */
  --fs-hero: clamp(2rem, 4vw, 4rem);
  --fs-display: clamp(2.1rem, 5vw, 4.25rem);
  --fs-title: clamp(1.85rem, 3.8vw, 3.1rem);
  --fs-h3: clamp(1.2rem, 1.7vw, 1.55rem);
  --fs-lead: clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-label: 0.78rem;

  /* Spacing */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);
  --block-gap: clamp(2.5rem, 5vw, 4.5rem);

  /* Radius & misc */
  --r-card: 18px;
  --r-input: 12px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 76px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light; background: var(--paper); overflow-x: hidden; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--accent); color: var(--ink); }

:focus-visible {
  outline: 2px solid transparent; /* becomes visible in forced-colors mode */
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--ink);
}

/* 03. TYPOGRAPHY HELPERS -------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
}

p { text-wrap: pretty; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--muted);
  max-width: 56ch;
}

.accent { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% 0.24em; background-position: 0 84%; background-repeat: no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.04em; }
.text-center { text-align: center; }

/* 04. LAYOUT --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); background: var(--paper); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }

.divider { height: 1px; background: var(--line); border: 0; }

/* 05. BUTTONS -------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.7em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bg);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); background: var(--accent-press); border-color: var(--accent-press); }
.btn:active { transform: translateY(0); }

.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translate(3px, -3px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* on dark backgrounds */
.on-carbon .btn--ghost { --btn-fg: var(--on-dark); border-color: rgba(244,240,232,0.4); }
.on-carbon .btn--ghost:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }

/* 06. EYEBROW / LABELS (mono) --------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--accent);
}
.eyebrow--plain::before { display: none; }
.on-carbon .eyebrow { color: var(--muted-dark); }

/* 07. HEADER & NAVIGATION ------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  box-sizing: border-box;
  padding-top: 10px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.nav {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.brand .dot { color: var(--accent); }

.nav-links { display: flex; align-items: center; gap: 0.35rem; }
.nav-links a {
  position: relative;
  padding: 0.5rem 1.05rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  border-radius: var(--r-pill);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-links a:hover { background: var(--paper-2); }
.nav-links a.is-active { color: var(--accent); }

.nav-cta { display: flex; align-items: center; gap: 0.75rem; }

.nav-toggle {
  display: none;
  width: 54px; height: 54px;
  border: 1.5px solid rgba(20,18,12,.18);
  background: rgba(20,18,12,.04);
  border-radius: 15px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav-toggle:hover { background: rgba(20,18,12,.08); border-color: rgba(20,18,12,.32); }
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 24px; height: 2.5px;
  border-radius: 2px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle span::before { transform: translate(-50%, -8px); }
.nav-toggle span::after { transform: translate(-50%, 6px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translate(-50%, -50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* 08. HERO ----------------------------------------------------- */
.hero {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 6rem));
  background: var(--paper);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  position: relative;
}
/* hero__inner inherits the .container width so its left edge lines
   up with every section below; headline/lead widths are capped
   individually for readability. */
.hero__inner { max-width: var(--container); }

.hero h1 {
  font-size: var(--fs-hero);
  margin-top: 1.5rem;
  max-width: none;
}
.hero h1 .line { display: block; }
.hero h1 .line { white-space: nowrap; }

/* the signature: a word rendered as a live search field */
.searchword {
  display: inline-flex;
  align-items: center;
  gap: 0.4ch;
  vertical-align: baseline;
  padding: 0.05em 0.45em 0.12em;
  margin: 0 0.05em;
  background: var(--accent-soft);
  border: 1.5px solid var(--accent);
  border-radius: 0.28em;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.searchword svg { width: 0.62em; height: 0.62em; opacity: 0.55; flex: none; }
.searchword .caret {
  display: inline-block;
  width: 2.5px;
  height: 0.92em;
  background: var(--ink);
  border-radius: 2px;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.hero__lead { margin-top: 1.6rem; font-size: 1.02rem; line-height: 1.6; max-width: 33rem; }
.hero__actions {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.hero__meta {
  margin-top: 2.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.05em;
  color: var(--muted);
}
.hero__meta b { color: var(--ink); font-weight: 700; }

/* hero two-column + campaign dashboard visual */
.hero__grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.hero__copy { max-width: 42ch; }
.hero__visual { position: relative; width: 100%; max-width: 430px; justify-self: end; }
.orb { position: absolute; z-index: 0; top: 50%; left: 50%; transform: translate(-50%,-50%); width: clamp(320px, 46vw, 520px); height: clamp(320px, 46vw, 520px); background: radial-gradient(circle at 50% 50%, rgba(110, 193, 228,0.55), rgba(110, 193, 228,0) 68%); filter: blur(4px); border-radius: 50%; pointer-events: none; animation: orbpulse 9s ease-in-out infinite; }
@keyframes orbpulse { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 0.9; } 50% { transform: translate(-50%,-50%) scale(1.1); opacity: 1; } }
.dash { position: relative; z-index: 1; width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 44px 80px -42px rgba(22,20,15,0.34); padding: 1.5rem 1.6rem; animation: floaty 7s ease-in-out infinite; }
.dash__head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.dash__head .live { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.dash__head .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.dash__stat { margin-top: 1.1rem; display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.dash__stat b { font-family: var(--font-display); font-weight: 800; font-size: 2.7rem; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.dash__stat span { color: var(--muted); font-size: 0.88rem; }
.chart { width: 100%; height: auto; margin-top: 0.5rem; overflow: visible; }
.chart .area { opacity: 0; animation: fadein 0.9s ease 0.7s forwards; }
.chart .cline { stroke-dasharray: 640; stroke-dashoffset: 640; animation: draw 1.8s cubic-bezier(0.22,1,0.36,1) 0.2s forwards; }
.chart .dot { opacity: 0; animation: fadein 0.4s ease 1.8s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }
.dash__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 1.1rem; }
.tile { background: var(--paper-2); border-radius: 14px; padding: 0.8rem 0.9rem; }
.tile span { display: block; font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.tile b { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em; color: #1a6e93; }
.searchpill { position: absolute; z-index: 2; left: -0.5rem; bottom: -1.1rem; display: inline-flex; align-items: center; gap: 0.55rem; background: var(--ink); color: var(--on-dark); padding: 0.75rem 1rem; border-radius: 999px; box-shadow: 0 24px 44px -20px rgba(22,20,15,0.5); font-size: 0.9rem; font-weight: 500; white-space: nowrap; animation: floaty 7s ease-in-out infinite 0.9s; }
.searchpill svg { width: 16px; height: 16px; opacity: 0.85; }
.searchpill .tag { background: var(--accent); color: var(--ink); font-weight: 700; font-size: 0.72rem; padding: 0.18em 0.5em; border-radius: 6px; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; gap: clamp(3rem,8vw,4rem); } .hero__copy { max-width: none; } .hero__visual { margin: 0 auto; justify-self: center; } }
/* brand logo */
.brand__logo { height: 38px; width: auto; display: block; }
.footer__brand .brand__logo, .brand__logo--footer { height: 42px; }


/* 09. MARQUEE -------------------------------------------------- */
.marquee {
  background: var(--paper);
  border-block: 1px solid var(--line);
  padding-block: clamp(0.9rem, 1.6vw, 1.3rem);
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: inline-flex;
  gap: 2.5rem;
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.marquee__track span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
}
.marquee__track span::after { content: "•"; color: var(--accent); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.on-carbon .marquee { border-color: var(--line-dark); }
.on-carbon .marquee__track span { color: var(--on-dark); }

/* 10. SECTION HEADING BLOCK ----------------------------------- */
.head { max-width: 760px; margin-bottom: var(--block-gap); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .eyebrow { justify-content: center; }
.head h2 { font-size: var(--fs-title); margin-top: 1.1rem; }
.head .lead { margin-top: 1.2rem; }
.head--center .lead { margin-inline: auto; }

.head--split {
  max-width: none;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.head--split .lead { margin-top: 0; }

/* 11. SERVICE CARDS ------------------------------------------- */
.cards { display: grid; gap: clamp(1rem, 1.8vw, 1.4rem); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.4vw, 2.3rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.card::after {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: 0 18px 40px -24px rgba(22,20,15,0.35);
}
.card:hover::after { transform: scaleX(1); }

.card__index {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--accent);
}
.card__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  margin-bottom: 1.4rem;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--ink);
  transition: background 0.3s ease, color 0.3s ease;
}
.card:hover .card__icon { background: var(--accent); color: var(--ink); }
.on-carbon .card__icon { background: rgba(110, 193, 228,0.18); color: var(--accent); }
.on-carbon .card:hover .card__icon { background: var(--accent); color: var(--ink); }
.card__icon svg { width: 26px; height: 26px; }
.card h3 { font-size: var(--fs-h3); margin-bottom: 0.7rem; }
.card p { color: var(--muted); font-size: var(--fs-small); }
.card__link {
  margin-top: auto;
  padding-top: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
}
.card__link .arrow { color: var(--accent); transition: transform 0.25s var(--ease); }
.card:hover .card__link .arrow { transform: translate(3px, -3px); }

/* compact 3-up feature cards (no link) */
.feature {
  padding: clamp(1.4rem, 2vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper);
}
.feature .card__icon { margin-bottom: 1rem; width: 46px; height: 46px; }
.feature .card__icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: var(--fs-h3); margin-bottom: 0.4rem; }
.feature p { color: var(--muted); font-size: var(--fs-small); }

/* 12. STAT ROW ------------------------------------------------ */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.stat__num .accent { color: var(--ink); background: none; padding: 0; }
.stat__label {
  margin-top: 0.8rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.on-carbon .stat__num { color: var(--on-dark); }
.on-carbon .stat__label { color: var(--muted-dark); }

/* 13. WORKFLOW STEPS ------------------------------------------ */
.steps { display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 4vw, 4rem);
  padding-block: clamp(2.2rem, 4vw, 3.4rem);
  border-top: 1.5px solid var(--line);
}
.step:last-child { border-bottom: 1.5px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__no {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--accent);
  padding: 0.4em 0.85em;
  border-radius: 999px;
  margin-bottom: 0.9rem;
}
.steps { counter-reset: stepnum; }
.step { counter-increment: stepnum; }
.step > div:first-child::before {
  content: counter(stepnum, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 0.85;
  color: rgba(22, 20, 15, 0.10);
  margin-bottom: 0.4rem;
}
.on-carbon .step > div:first-child::before { color: rgba(244, 240, 232, 0.13); }
.step h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.step__body p { color: var(--muted); margin-bottom: 1rem; }
.step__body ul { display: grid; gap: 0.55rem; }
.step__body li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-small);
  color: var(--ink);
}
.step__body li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
}
.step__body strong { font-weight: 600; }

.on-carbon .step,
.on-carbon .step:last-child { border-color: var(--line-dark); }
.on-carbon .step h3 { color: var(--on-dark); }
.on-carbon .step__body li { color: var(--on-dark); }

/* 14. CAPABILITY LISTS ---------------------------------------- */
.caps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(2rem, 5vw, 5rem);
}
.caps li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-block: clamp(0.85rem, 1.4vw, 1.1rem);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-lead);
  font-weight: 500;
}
.caps li::before {
  content: "→";
  color: var(--accent);
  font-weight: 700;
}
.on-carbon .caps li { border-color: var(--line-dark); color: var(--on-dark); }

/* 15. FAQ ACCORDION ------------------------------------------- */
.faq { display: grid; gap: 0; max-width: 780px; margin-inline: auto; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.3rem, 2.2vw, 1.7rem) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.faq__icon { position: relative; flex: none; width: 20px; height: 20px; }
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform 0.3s var(--ease);
}
.faq__icon::before { inset: 9px 0; height: 2px; }
.faq__icon::after { inset: 0 9px; width: 2px; }
.faq__item.is-open .faq__icon::after { transform: scaleY(0); }
.faq__a {
  overflow: hidden;
  height: 0;
  transition: height 0.35s var(--ease);
}
.faq__a-inner {
  padding-bottom: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--muted);
  max-width: 64ch;
}
.faq__a-inner strong { color: var(--ink); font-weight: 600; }

/* 16. CTA BAND ------------------------------------------------ */
.cta {
  position: relative;
  text-align: center;
  padding-block: clamp(4rem, 9vw, 8rem);
  background: var(--paper);
  overflow: hidden;
}
.cta h2 {
  font-size: clamp(2.3rem, 5.2vw, 4.3rem);
  color: var(--ink);
  max-width: 16ch;
  margin-inline: auto;
}
.cta .eyebrow { justify-content: center; margin-bottom: 1.4rem; }
.cta__actions { margin-top: 2.6rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.85rem; }
.cta__email {
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--muted-dark);
}
.cta__email a { color: var(--accent); }

/* 17. FORMS --------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: 0.5rem; }
.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.9rem 1.05rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-input);
  font-size: var(--fs-body);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form__note { font-size: var(--fs-small); color: var(--muted); }
.form__status {
  display: none;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-input);
  font-size: var(--fs-small);
}
.form__status.is-ok { display: block; background: var(--accent-soft); color: var(--accent-press); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.form__status.is-err { display: block; background: #fdecec; color: #b42318; border: 1px solid #f5c2c0; }

/* contact split layout */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.contact-info { display: grid; gap: 2rem; align-content: start; }
.contact-info__item .eyebrow { margin-bottom: 0.6rem; }
.contact-info__item a, .contact-info__item p { font-size: var(--fs-lead); font-weight: 500; }
.contact-info__item a:hover { color: var(--accent); }

/* 18. FOOTER -------------------------------------------------- */
.footer { background: var(--carbon); color: var(--on-dark); padding-block: clamp(3.5rem, 6vw, 5.5rem) 2.5rem; }
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line-dark);
}
.footer__brand .brand { color: var(--on-dark); font-size: 1.6rem; margin-bottom: 1.1rem; }
.footer__brand p { color: var(--on-dark); max-width: 36ch; font-size: var(--fs-small); }
.footer__col h4 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-bottom: 1.2rem;
}
.footer__col ul { display: grid; gap: 0.7rem; }
.footer__col a { color: var(--on-dark); font-size: var(--fs-small); transition: color 0.2s var(--ease); }
.footer__col li { font-size: var(--fs-small); color: var(--on-dark); line-height: 1.5; }
.footer__col a:hover { color: var(--accent); }

/* footer "call us" callout — sits under the logo, made to pop */
.footer__call {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: 1.7rem; padding: .55rem 1.2rem .55rem .55rem;
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  text-decoration: none;
  transition: border-color .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1), background .28s cubic-bezier(.4,0,.2,1), box-shadow .28s cubic-bezier(.4,0,.2,1);
}
.footer__call:hover { border-color: var(--accent); transform: translateY(-2px); background: rgba(110,193,228,.07); box-shadow: 0 10px 26px -14px rgba(110,193,228,.5); }
.footer__call-ic {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: 50%; background: var(--accent); color: #0b0f14;
}
.footer__call-ic svg { width: 17px; height: 17px; }
.footer__call-text { display: flex; flex-direction: column; line-height: 1.15; }
.footer__call-label {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}
.footer__call-num {
  font-family: var(--font-display); font-weight: 700; font-size: 1.18rem;
  color: #fff; letter-spacing: -.01em; margin-top: .15rem;
}
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
}
.footer__bottom p { color: var(--muted-dark); font-size: var(--fs-small); font-family: var(--font-mono); letter-spacing: 0.03em; }
.socials { display: flex; gap: 0.5rem; }
.socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: var(--on-dark);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.socials a:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.socials svg { width: 17px; height: 17px; }

/* 19. DARK SECTION VARIANT ------------------------------------ */
.on-carbon { background: var(--carbon); color: var(--on-dark); }
.on-carbon h1, .on-carbon h2, .on-carbon h3, .on-carbon h4 { color: var(--on-dark); }
.on-carbon .lead, .on-carbon p { color: var(--muted-dark); }
.on-carbon .divider { background: var(--line-dark); }
.on-carbon .card {
  background: linear-gradient(158deg, color-mix(in srgb, var(--on-dark) 10%, var(--carbon)), color-mix(in srgb, var(--on-dark) 4.5%, var(--carbon)));
  border-color: rgba(244,240,232,.11);
}
.on-carbon .card p { color: var(--muted-dark); }
.on-carbon .card__link { color: var(--on-dark); }
.on-carbon .feature { background: color-mix(in srgb, var(--on-dark) 4%, var(--carbon)); border-color: var(--line-dark); }
.on-carbon .feature p { color: var(--muted-dark); }

/* 20. MOTION / SCROLL REVEAL ---------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  .searchword .caret { animation: none; opacity: 1; }
}

/* 21. RESPONSIVE ---------------------------------------------- */
@media (max-width: 980px) {
  .head--split { grid-template-columns: 1fr; align-items: start; }
  .cols-3, .stats, .cards.cols-3 { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 0.6rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: block; }

  /* mobile drawer */
  .mobile-menu {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 99;
    background: var(--paper);
    padding: 2rem var(--gutter) 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    overflow-y: auto;
  }
  .mobile-menu.is-open { transform: none; }
  .mobile-menu a {
    display: block;
    padding: 0.8rem 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    border-bottom: 1px solid var(--line);
  }
  .mobile-menu a.is-active { color: var(--accent); }
  .mobile-menu .btn { margin-top: 1.5rem; justify-content: center; display: inline-flex; }
}

/* content-column + hero-meta stacking stays at the phone breakpoint (unchanged) */
@media (max-width: 760px) {
  .cols-2, .cols-3, .caps, .form__row { grid-template-columns: 1fr; }
  .hero__meta { gap: 0.5rem 1.2rem; }
}

@media (min-width: 981px) { .mobile-menu { display: none; } }

/* ==========================================================
   ABOUT PAGE  (Arolax marketing-agency style, Aloweb brand)
   ========================================================== */
.about-hero { padding-top: calc(var(--header-h) + clamp(2rem,5vw,4rem)); padding-bottom: clamp(3rem,6vw,5rem); background: radial-gradient(120% 70% at 82% -10%, rgba(110, 193, 228,0.10), transparent 55%); }
.about-hero__head { max-width: 900px; }
.about-hero__head h1 { font-size: clamp(2.4rem,5.4vw,4.6rem); margin-top: 1.2rem; }
.about-hero__head .lead { margin-top: 1.4rem; max-width: 62ch; }

.collage { position: relative; display: flex; justify-content: center; align-items: center; gap: clamp(0.8rem,2vw,1.5rem); flex-wrap: wrap; margin: clamp(2.5rem,5vw,4.5rem) auto; }
.collage__orb { position: absolute; z-index: 0; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(720px,94%); height: 320px; background: radial-gradient(circle, rgba(110, 193, 228,0.42), rgba(110, 193, 228,0) 70%); filter: blur(10px); border-radius: 50%; pointer-events: none; }
.cc { position: relative; z-index: 1; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 34px 64px -38px rgba(22,20,15,0.32); padding: 1.15rem 1.25rem; width: 288px; }
.cc--dash { width: 326px; transform: translateY(-14px); animation: floaty 7s ease-in-out infinite; }
.cc--search { transform: rotate(-2.5deg); animation: floaty 7s ease-in-out infinite 0.7s; }
.cc--rev { transform: rotate(2.5deg); animation: floaty 7s ease-in-out infinite 1.2s; }
.cc__label { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.7rem; }
.cc__live { display: inline-flex; align-items: center; gap: 0.35em; color: var(--ink); }
.cc__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: 1px solid var(--ink); }
.cc__big { font-family: var(--font-display); font-weight: 800; font-size: 2.3rem; letter-spacing: -0.03em; line-height: 1; }
.cc__big span { font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; color: var(--muted); margin-left: 0.5rem; letter-spacing: 0; }
.cc .chart { margin-top: 0.6rem; }
.cc__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.8rem; }
.cc__tiles div { background: var(--paper-2); border-radius: 10px; padding: 0.5rem 0.55rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: #1a6e93; text-align: center; }
.cc__bar { display: flex; align-items: center; gap: 0.5rem; background: var(--accent-soft); border: 1.5px solid var(--accent); border-radius: 999px; padding: 0.5rem 0.85rem; font-size: 0.92rem; font-weight: 500; }
.cc__bar svg { width: 15px; height: 15px; opacity: 0.55; flex: none; }
.cc__ad { margin-top: 0.85rem; font-size: 0.82rem; line-height: 1.5; color: var(--ink); }
.cc__tag { display: inline-block; background: var(--ink); color: var(--paper); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.03em; padding: 0.12em 0.45em; border-radius: 5px; margin-right: 0.45em; vertical-align: middle; }
.cc__stars { color: #e3b007; font-size: 1.05rem; letter-spacing: 1px; }
.cc__stars b { color: var(--ink); font-family: var(--font-display); margin-left: 0.45em; }
.cc__quote { margin-top: 0.65rem; font-size: 0.88rem; line-height: 1.5; color: var(--ink); }
.cc__src { margin-top: 0.75rem; font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

.about-hero__cta { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.4rem,3.4vw,3rem); align-items: center; margin-top: clamp(2rem,4vw,3.4rem); padding-top: clamp(1.8rem,3vw,2.6rem); border-top: 1px solid var(--line); }
.about-hero__cta h2 { font-size: clamp(1.6rem,3vw,2.5rem); letter-spacing: -0.02em; }
.about-hero__cta-body { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.about-hero__cta-body p { color: var(--muted); margin: 0; }

.feat3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.feat3__item { padding: clamp(1.4rem,2.4vw,2.2rem) clamp(1.3rem,2vw,2rem); }
.feat3__item + .feat3__item { border-left: 1px solid var(--line); }
.feat3__item h3 { font-size: clamp(1.3rem,2vw,1.7rem); margin-bottom: 0.7rem; }
.feat3__item p { color: var(--muted); font-size: var(--fs-small); }

.services4 { grid-template-columns: repeat(2,1fr); }

.who__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: start; }
.who__statement h2 { font-size: var(--fs-title); margin-top: 1.1rem; }
.who__body { position: relative; }
.who__orb { position: absolute; z-index: 0; top: -30px; right: -10px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(110, 193, 228,0.5), rgba(110, 193, 228,0) 70%); filter: blur(8px); border-radius: 50%; pointer-events: none; }
.who__body p { position: relative; z-index: 1; color: var(--muted); font-size: var(--fs-lead); }
.who__list { position: relative; z-index: 1; margin-top: 1.6rem; display: grid; gap: 1rem; }
.who__list li { padding-left: 1.6rem; position: relative; }
.who__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 1px solid var(--ink); }
.who__list strong { font-weight: 700; color: var(--ink); }

.stats--4 { grid-template-columns: repeat(4,1fr); }

.smart { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.smart__copy h2 { font-size: var(--fs-title); margin: 1.1rem 0 1.2rem; }
.smart__copy p { color: var(--muted); }
.smart__socials { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }
.smart__socials span { border: 1.5px solid var(--line); border-radius: 999px; padding: 0.45em 1em; font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); }
.smart__media { position: relative; }
.smart__orb { position: absolute; z-index: 0; inset: 0; margin: auto; width: 82%; height: 82%; background: radial-gradient(circle, rgba(110, 193, 228,0.4), rgba(110, 193, 228,0) 70%); filter: blur(10px); border-radius: 50%; pointer-events: none; }
.smart__card { position: relative; z-index: 1; background: var(--paper); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 40px 80px -42px rgba(22,20,15,0.34); padding: clamp(1.6rem,3vw,2.4rem); }
.smart__badge { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem,5vw,3.8rem); letter-spacing: -0.03em; line-height: 1; }
.smart__badge span { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; color: var(--muted); letter-spacing: 0; margin-top: 0.4rem; }
.smart__bars { display: flex; align-items: flex-end; gap: 0.7rem; height: 120px; margin: 1.6rem 0 0.8rem; }
.smart__bars i { flex: 1; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 8px 8px 0 0; }
.smart__bars i:nth-child(1){ height: 38%; } .smart__bars i:nth-child(2){ height: 54%; } .smart__bars i:nth-child(3){ height: 46%; } .smart__bars i:nth-child(4){ height: 72%; } .smart__bars i:nth-child(5){ height: 92%; background: var(--accent); }
.smart__cap { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

.tcards { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,1.6vw,1.4rem); }
.tcard { background: color-mix(in srgb, var(--on-dark) 4%, var(--carbon)); border: 1px solid var(--line-dark); border-radius: var(--r-card); padding: clamp(1.6rem,2.4vw,2.2rem); display: flex; flex-direction: column; }
.tcard__stars { color: var(--accent); letter-spacing: 2px; margin-bottom: 1rem; }
.tcard blockquote { font-size: 1.05rem; line-height: 1.55; color: var(--on-dark); margin-bottom: 1.6rem; }
.tcard__who { margin-top: auto; display: flex; align-items: center; gap: 0.85rem; }
.tcard__avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1rem; flex: none; }
.tcard__who > span:last-child { font-size: var(--fs-small); color: var(--muted-dark); }
.tcard__who b { display: block; color: var(--on-dark); font-weight: 600; }

@media (max-width: 980px) {
  .about-hero__cta, .who__grid, .smart { grid-template-columns: 1fr; gap: 2rem; }
  .feat3, .tcards, .services4 { grid-template-columns: 1fr; }
  .feat3__item + .feat3__item { border-left: 0; }
  .who__orb { display: none; }
  .cc--dash, .cc--search, .cc--rev { transform: none; }
}
@media (min-width: 561px) and (max-width: 980px) {
  .feat3 { grid-template-columns: repeat(3,1fr); }
  .feat3__item + .feat3__item { border-left: 1px solid var(--line); }
  .tcards, .services4, .stats--4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px) { .stats--4 { grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   ADDED, hover interactions · Services · Team · About montage
   · growth curve · Montréal contact band
   ============================================================ */
.card,.cc,.tcard,.tm,.feat3__item{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease,background .3s ease;}
.card:hover,.tcard:hover{transform:translateY(-6px);box-shadow:0 30px 56px -30px rgba(22,20,15,.34);border-color:var(--ink);}
.card__icon{transition:transform .32s cubic-bezier(.2,.7,.2,1);}
.card:hover .card__icon{transform:translateY(-2px) rotate(-6deg) scale(1.08);}
.cc{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;}
.cc:hover{transform:translateY(-8px);box-shadow:0 42px 80px -40px rgba(22,20,15,.42);}
.feat3__item svg,.feat3__icon,.feat3__ico{transition:transform .32s cubic-bezier(.2,.7,.2,1);}
.feat3__item:hover svg,.feat3__item:hover .feat3__icon,.feat3__item:hover .feat3__ico{transform:translateY(-3px) scale(1.1);}
.on-carbon .card:hover,.on-carbon .tcard:hover{border-color:rgba(110,193,228,.38);box-shadow:0 30px 60px -30px rgba(0,0,0,.75),0 0 34px -8px rgba(110,193,228,.2);}

/* Services rows */
.srows{border-top:1px solid var(--line);}
.srow{display:grid;grid-template-columns:60px minmax(170px,1fr) minmax(0,1.3fr) auto;gap:1.4rem;align-items:center;padding:clamp(1.4rem,2.6vw,2.3rem) clamp(.9rem,1.6vw,1.6rem);border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:background .32s ease,color .32s ease,border-radius .32s ease,padding .32s ease;}
.srow__no{font-family:var(--font-mono);font-size:.82rem;color:var(--muted);transition:color .32s ease;}
.srow__title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.35rem,2.3vw,1.95rem);line-height:1.04;letter-spacing:-.02em;}
.srow__title span{display:block;font-weight:400;font-family:var(--font-body);color:var(--muted);font-size:.9em;transition:color .32s ease;}
.srow__desc{color:var(--muted);font-size:var(--fs-small);max-width:44ch;transition:color .32s ease;}
.srow__cta{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;white-space:nowrap;color:var(--ink);transition:color .32s ease;}
.srow__arrow{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1.6px solid currentColor;transition:transform .32s ease,background .32s ease,color .32s ease,border-color .32s ease;}
.srow:hover{background:var(--carbon);color:var(--on-dark);border-radius:18px;border-bottom-color:transparent;}
.srow:hover .srow__no,.srow:hover .srow__desc,.srow:hover .srow__title span{color:var(--muted-dark);}
.srow:hover .srow__cta{color:var(--accent);}
.srow:hover .srow__arrow{background:var(--accent);border-color:var(--accent);color:var(--ink);transform:rotate(45deg);}
@media(max-width:820px){.srow{grid-template-columns:42px 1fr;gap:.35rem 1rem;}.srow__desc{grid-column:1 / -1;}.srow__cta{grid-column:1 / -1;margin-top:.6rem;justify-self:start;}}
.srv-intro{max-width:780px;}
.srv-intro h2{font-size:var(--fs-title);margin:1rem 0;}

/* Team */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.6vw,1.4rem);}
.tm{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.4rem,2.3vw,1.9rem);}
.tm:hover{transform:translateY(-6px);box-shadow:0 30px 56px -30px rgba(22,20,15,.32);border-color:var(--ink);}
.tm__avatar{width:62px;height:62px;border-radius:50%;background:var(--accent);color:var(--ink);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;margin-bottom:1rem;transition:transform .3s ease;}
.tm:hover .tm__avatar{transform:scale(1.08) rotate(-4deg);}
.tm__name{font-size:1.18rem;margin:0 0 .25rem;}
.tm__role{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:#4d7d12;}
.tm__bio{color:var(--muted);font-size:var(--fs-small);margin-top:.7rem;}
.team-note{margin-top:1.8rem;font-family:var(--font-mono);font-size:.74rem;color:var(--muted);letter-spacing:.03em;}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.team-grid{grid-template-columns:1fr;}}

/* About growth curve */
.smart__chart{position:relative;background:var(--accent);border-radius:22px;padding:clamp(1.4rem,2.6vw,2.1rem);box-shadow:0 40px 80px -42px rgba(22,20,15,.34);}
.smart__badge2{position:absolute;top:clamp(1.4rem,2.6vw,2.1rem);left:clamp(1.4rem,2.6vw,2.1rem);background:var(--ink);padding:.85rem 1.05rem;border-radius:4px;z-index:2;}
.smart__badge2 b{display:block;font-family:var(--font-display);font-weight:800;color:#fff;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1;}
.smart__badge2 span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);}
.smart__curve{display:block;width:100%;height:auto;}
.smart__years{display:flex;justify-content:space-between;margin-top:.2rem;font-family:var(--font-mono);font-size:.72rem;color:var(--ink);opacity:.65;padding:0 .3rem;}

/* About who montage */
.who__wrap{display:block;}
.who__head{max-width:840px;}
.who__head h2{font-size:clamp(1.8rem,3.4vw,3rem);margin-top:1rem;}
.who__montage{position:relative;margin:clamp(2rem,4vw,3.4rem) 0 1.6rem;background:var(--carbon);border-radius:24px;min-height:clamp(280px,40vw,470px);overflow:hidden;}
.wm{position:absolute;border:1px solid var(--line-dark);border-radius:8px;background:linear-gradient(135deg,#221d15,#141009);box-shadow:0 26px 52px -28px rgba(0,0,0,.6);overflow:hidden;}
.wm video,.wm img{width:100%;height:100%;object-fit:cover;display:block;}
.wm--1{width:24%;height:42%;left:9%;top:30%;transform:rotate(-1deg);}
.wm--2{width:30%;height:64%;left:30%;top:17%;background:linear-gradient(135deg,#2b261c,#15120c);z-index:2;}
.wm--3{width:25%;height:54%;left:60%;top:23%;}
.wm--4{width:15%;height:30%;left:80%;top:40%;opacity:.82;}
.who__spark{position:absolute;left:25%;top:18%;color:#fff;font-size:clamp(1.4rem,2.6vw,2.1rem);z-index:3;}
.who__quart{position:absolute;right:17%;bottom:9%;width:58px;height:58px;background:#fff;border-radius:0 0 0 58px;z-index:3;}
.who__foot{max-width:46ch;margin-left:auto;color:var(--muted);font-size:var(--fs-lead);}
@media(max-width:720px){.who__montage{min-height:300px;}.wm--4{display:none;}.who__foot{margin-left:0;}}

/* Contact Montréal band */
.mtl{padding:clamp(.5rem,1.5vw,1.5rem) 0 clamp(1.5rem,3vw,2.6rem);}
.mtl__card{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.5rem,4vw,3.4rem);align-items:center;background:var(--paper-2);border:1px solid var(--line);border-radius:24px;padding:clamp(1.5rem,3vw,2.5rem);overflow:hidden;}
.mtl__copy h2{font-size:clamp(1.55rem,3vw,2.3rem);margin:.85rem 0 1rem;}
.mtl__copy p{color:var(--muted);margin-bottom:1.4rem;}
.mtl__skyline{position:relative;background:var(--carbon);border-radius:16px;overflow:hidden;aspect-ratio:16 / 9;display:flex;align-items:flex-end;}
.mtl__skyline svg{width:100%;height:auto;display:block;}
.mtl__skyline img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
@media(max-width:820px){.mtl__card{grid-template-columns:1fr;}}

/* ============ ADDED: hover interactions + new sections ============ */
.card,.cc,.tcard,.tm,.feat3__item{transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,border-color .28s ease,background .28s ease;}
.card:hover,.tcard:hover,.tm:hover{transform:translateY(-6px);box-shadow:0 30px 56px -30px rgba(22,20,15,.32);border-color:var(--ink);}
.card__icon{transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.card:hover .card__icon{transform:translateY(-2px) rotate(-6deg) scale(1.07);}
.cc:hover{transform:translateY(-8px);box-shadow:0 44px 80px -40px rgba(22,20,15,.4);}
.feat3__item svg,.feat3__item .feat3__ico{transition:transform .3s ease;}
.feat3__item:hover svg,.feat3__item:hover .feat3__ico{transform:translateY(-3px) scale(1.08);}
.on-carbon .card:hover,.on-carbon .tcard:hover{border-color:rgba(110,193,228,.38);box-shadow:0 30px 60px -30px rgba(0,0,0,.75),0 0 34px -8px rgba(110,193,228,.2);}

/* services rows */
.srows{border-top:1px solid var(--line);margin-top:.5rem;}
.srow{display:grid;grid-template-columns:60px minmax(170px,1fr) minmax(0,1.3fr) auto;gap:1.4rem;align-items:center;padding:clamp(1.4rem,2.6vw,2.3rem) clamp(.8rem,1.6vw,1.6rem);border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:background .32s ease,color .32s ease,border-radius .32s ease;position:relative;}
.srow__no{font-family:var(--font-mono);font-size:.82rem;color:var(--muted);transition:color .32s ease;}
.srow__title{font-family:var(--font-display,"Bricolage Grotesque",system-ui,sans-serif);font-weight:800;font-size:clamp(1.35rem,2.3vw,2rem);line-height:1.03;letter-spacing:-.02em;}
.srow__title span{display:block;font-weight:400;font-family:var(--font-body,"Inter Tight",system-ui,sans-serif);color:var(--muted);font-size:.92em;transition:color .32s ease;}
.srow__desc{color:var(--muted);font-size:.95rem;max-width:44ch;transition:color .32s ease;}
.srow__cta{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;white-space:nowrap;color:var(--ink);transition:color .32s ease;}
.srow__arrow{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid currentColor;transition:transform .32s ease,background .32s ease,color .32s ease,border-color .32s ease;}
.srow:hover{background:var(--carbon);color:var(--on-dark);border-radius:18px;border-bottom-color:transparent;}
.srow:hover .srow__no,.srow:hover .srow__desc,.srow:hover .srow__title span{color:var(--muted-dark);}
.srow:hover .srow__cta{color:var(--accent);}
.srow:hover .srow__arrow{background:var(--accent);border-color:var(--accent);color:var(--ink);transform:rotate(45deg);}
@media(max-width:820px){.srow{grid-template-columns:42px 1fr;gap:.3rem 1rem;}.srow__desc{grid-column:1/-1;margin-top:.2rem;}.srow__cta{grid-column:1/-1;margin-top:.6rem;justify-self:start;}}

/* services intro */
.srv-intro{max-width:760px;}
.srv-intro h2{font-size:clamp(1.8rem,3.4vw,2.9rem);margin:1rem 0 1.1rem;line-height:1.05;}

/* team */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.6vw,1.4rem);}
.tm{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.4rem,2.4vw,1.9rem);}
.tm__avatar{width:62px;height:62px;border-radius:50%;background:var(--accent);color:var(--ink);display:grid;place-items:center;font-family:var(--font-display,"Bricolage Grotesque",system-ui,sans-serif);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;margin-bottom:1.1rem;transition:transform .3s ease;}
.tm:hover .tm__avatar{transform:scale(1.08) rotate(-4deg);}
.tm__name{font-size:1.18rem;margin-bottom:.25rem;}
.tm__role{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:#5c8a14;}
.tm__bio{color:var(--muted);font-size:.95rem;margin-top:.7rem;}
.team-note{margin-top:1.8rem;font-family:var(--font-mono);font-size:.74rem;color:var(--muted);letter-spacing:.03em;}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.team-grid{grid-template-columns:1fr;}}

/* smart growth-curve */
.smart__chart{position:relative;background:var(--accent);border-radius:22px;padding:clamp(1.3rem,2.6vw,2.1rem);box-shadow:0 40px 80px -42px rgba(22,20,15,.34);}
.smart__badge2{position:absolute;top:clamp(1.3rem,2.6vw,2.1rem);left:clamp(1.3rem,2.6vw,2.1rem);background:var(--ink);color:#fff;padding:.85rem 1.05rem;border-radius:4px;z-index:2;}
.smart__badge2 b{display:block;font-family:var(--font-display,"Bricolage Grotesque",system-ui,sans-serif);font-weight:800;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1;}
.smart__badge2 span{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);}
.smart__curve{display:block;width:100%;height:auto;}
.smart__years{display:flex;justify-content:space-between;margin-top:.3rem;font-family:var(--font-mono);font-size:.72rem;color:var(--ink);opacity:.65;padding:0 .3rem;}

/* who montage */
.who__wrap{display:block;}
.who__head{max-width:840px;}
.who__head h2{font-size:clamp(1.8rem,3.4vw,3rem);margin-top:1rem;line-height:1.05;}
.who__montage{position:relative;margin:clamp(2rem,4vw,3.4rem) 0 1.4rem;background:var(--carbon);border-radius:24px;min-height:clamp(280px,40vw,460px);overflow:hidden;}
.wm{position:absolute;border:1px solid var(--line-dark);border-radius:8px;background:linear-gradient(135deg,#221d15,#141109);box-shadow:0 24px 50px -28px rgba(0,0,0,.6);overflow:hidden;}
.wm video,.wm img{width:100%;height:100%;object-fit:cover;display:block;}
.wm--1{width:24%;height:42%;left:7%;top:30%;transform:rotate(-1.5deg);}
.wm--2{width:30%;height:64%;left:30%;top:17%;background:linear-gradient(135deg,#2b261b,#16130d);z-index:2;}
.wm--3{width:26%;height:54%;left:60%;top:23%;}
.wm--4{width:15%;height:30%;left:80%;top:40%;opacity:.8;}
.who__spark{position:absolute;left:25%;top:19%;color:#fff;font-size:clamp(1.4rem,2.6vw,2.1rem);z-index:3;}
.who__quart{position:absolute;right:15%;bottom:7%;width:58px;height:58px;background:#fff;border-radius:0 0 0 58px;z-index:3;}
.who__foot{max-width:48ch;margin-left:auto;color:var(--muted);font-size:1.06rem;}
@media(max-width:720px){.who__montage{min-height:300px;}.wm--4{display:none;}.who__foot{margin-left:0;}}

/* contact Montréal band */
.mtl{padding:clamp(1rem,2vw,1.6rem) 0 clamp(1.6rem,3vw,2.4rem);}
.mtl__card{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.5rem,4vw,3.4rem);align-items:center;background:var(--paper-2);border:1px solid var(--line);border-radius:24px;padding:clamp(1.5rem,3vw,2.5rem);overflow:hidden;}
.mtl__copy h2{font-size:clamp(1.6rem,3vw,2.4rem);margin:.8rem 0 1rem;line-height:1.05;}
.mtl__copy p{color:var(--muted);margin-bottom:1.4rem;}
.mtl__skyline{position:relative;background:var(--carbon);border-radius:16px;overflow:hidden;aspect-ratio:16/9;display:flex;align-items:flex-end;}
.mtl__skyline svg{width:100%;height:auto;display:block;}
.mtl__skyline img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
@media(max-width:820px){.mtl__card{grid-template-columns:1fr;}}


/* ===== nav dropdown ===== */
.nav-item--has{position:relative;display:inline-flex;align-items:center;}
.nav-item--has::after{content:"";position:absolute;top:100%;left:-8px;right:-8px;height:14px;}
.nav-item__top{display:inline-flex;align-items:center;gap:.32rem;}
.caret-d{font-size:.66em;transition:transform .2s ease;}
.nav-item--has:hover .caret-d{transform:rotate(180deg);}
.nav-dd{position:absolute;top:100%;left:0;min-width:215px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 60px -30px rgba(22,20,15,.42);padding:.5rem;display:flex;flex-direction:column;gap:.1rem;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:80;}
.nav-item--has:hover .nav-dd,.nav-item--has:focus-within .nav-dd{opacity:1;visibility:visible;transform:translateY(6px);}
.nav-dd a{padding:.62rem .8rem;border-radius:9px;font-size:.95rem;color:var(--ink);white-space:nowrap;transition:background .18s ease;}
.nav-dd a:hover{background:var(--accent-soft);}
.mm-sub{padding-left:1.5rem !important;opacity:.82;font-size:.96rem;}
/* mobile Services accordion (native <details>) — expanded list matches the original */
.mm-acc>summary{
  list-style:none;-webkit-appearance:none;appearance:none;cursor:pointer;margin:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0.8rem 0;
  font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:-0.02em;line-height:1.2;
  border-bottom:1px solid var(--line);
}
.mm-acc>summary::-webkit-details-marker{display:none;}
.mm-acc>summary::marker{content:"";}
.mm-acc>summary.is-active{color:var(--accent);}
.mm-acc__chev{font-size:0.8em;opacity:.5;transition:transform .25s ease;margin-left:1rem;flex:none;}
.mm-acc[open]>summary .mm-acc__chev{transform:rotate(180deg);}
.mm-acc .mm-sub{display:block;}
a[data-go],a[data-scroll],[data-go],[data-scroll]{cursor:pointer;}
@media(max-width:900px){.nav-dd{display:none;}.nav-item--has::after{display:none;}}


/* ===== client logo strip ===== */
.clients{background:#fff;padding:clamp(2rem,4vw,3rem) 0;border-bottom:1px solid var(--line);}
.clients__label{text-align:center;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:clamp(1.3rem,2.5vw,2rem);}
.clients__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.4rem,5vw,4rem);}
.client-logo{font-family:var(--font-display,"Bricolage Grotesque",system-ui,sans-serif);font-weight:700;font-size:clamp(1rem,1.8vw,1.4rem);letter-spacing:-.01em;color:#b4aea4;transition:color .25s ease,transform .25s ease;white-space:nowrap;}
.client-logo b{font-weight:800;}
.client-logo:hover{color:var(--ink);transform:translateY(-2px);}
.client-logo img{max-height:clamp(42px,4.7vw,64px);max-width:100%;height:auto;width:auto;display:block;opacity:.82;transition:opacity .25s ease,transform .25s ease;}
.client-logo:hover img{opacity:1;transform:translateY(-2px);}
@media(max-width:640px){.clients__row{gap:1.1rem 2rem;}}


/* white-section helper + bigger creative service icons */
.section--white{background:#fff; padding-top: clamp(3.5rem,7vw,6.5rem); padding-bottom: clamp(4rem,7.5vw,6.5rem);}
#services .card__icon{width:74px;height:74px;border-radius:20px;background:linear-gradient(140deg,#7cc9ea,#147ba6);display:grid;place-items:center;margin-bottom:1.4rem;color:#fff;box-shadow:0 10px 24px -10px rgba(20,123,166,.55);transition:transform .4s cubic-bezier(.2,.85,.25,1),background .3s ease,box-shadow .3s ease;}
#services .card__icon svg{width:36px;height:36px;}
#services .card:hover .card__icon{background:linear-gradient(140deg,#8fd3f0,#1a92c4);color:#fff;box-shadow:0 16px 32px -12px rgba(20,123,166,.7);transform:translateY(-4px) rotate(-8deg) scale(1.06);}


/* logo grid (4 across) + green eyebrow */
.clients__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.2rem 1.3rem;max-width:none;margin:0 auto;}
.client-logo{flex:0 0 calc((100% - 7.8rem)/7);display:flex;align-items:center;justify-content:center;}
.head--center{text-align:center;}
.eyebrow--accent{display:block;text-align:center;font-family:var(--font-mono);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#1a6e93;background:none;padding:0;border-radius:0;margin-bottom:1rem;}
.eyebrow--accent::before{display:none !important;}
@media(max-width:1000px){.client-logo{flex-basis:calc((100% - 3.9rem)/4);}}
@media(max-width:640px){.clients__row{gap:1.3rem 1.4rem;}.client-logo{flex-basis:calc((100% - 1.4rem)/2);}.client-logo img{max-height:52px;}}

/* #2 lime stat numbers (home) */
#about .stat__num{color:var(--accent);}
/* #4 larger differentiator icons */
.section--white .feature { border: none; background: none; border-radius: 0; border-top: 1.5px solid var(--line); padding: clamp(1.4rem,2.4vw,2rem) 0 0; }
.section--white .feature .card__icon { width: 34px; height: 34px; background: none; border: none; border-radius: 0; margin-bottom: .85rem; color: #2a93c4; }
.section--white .feature .card__icon svg { width: 32px; height: 32px; }
/* #5 full-card link */
a.card{color:inherit;text-decoration:none;}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}


/* google ads packages */
.pkgs .head{margin-bottom:clamp(2.4rem,5vw,3.4rem);}
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,1.8vw,1.7rem);align-items:stretch;}
.pkg{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.6rem,2.4vw,2.1rem);}
.pkg--featured{border-color:var(--ink);box-shadow:0 32px 64px -38px rgba(22,20,15,.32);}
.pkg__flag{position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);background:var(--accent-deep);color:#fff;font-family:var(--font-mono);font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;padding:.42em .95em;border-radius:999px;white-space:nowrap;}
.pkg__name{font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);}
.pkg__price{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;margin-top:.55rem;}
.pkg__price b{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,3.2vw,2.5rem);letter-spacing:-.03em;line-height:1.05;color:var(--ink);}
.pkg__price span{color:var(--muted);font-size:.88rem;}
.pkg__fit{color:var(--muted);font-size:var(--fs-small);margin-top:.85rem;min-height:3.2em;}
.pkg__budget{margin-top:1rem;padding:.75rem .9rem;background:var(--paper-2);border-radius:12px;}
.pkg--featured .pkg__budget{background:var(--accent-soft);}
.pkg__budget span{display:block;font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.25rem;}
.pkg__budget b{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink);letter-spacing:-.01em;}
.pkg__list{list-style:none;margin:1.25rem 0 clamp(1.8rem,3.4vw,2.4rem);padding:0;display:flex;flex-direction:column;gap:.62rem;}
.pkg__list li{position:relative;padding-left:1.85rem;font-size:.91rem;color:var(--ink);line-height:1.45;}
.pkg__list li::before{content:"\2713";position:absolute;left:0;top:.08em;display:grid;place-items:center;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--accent-soft);color:#1a6e93;font-size:.7rem;font-weight:800;}
.pkg__cta{margin-top:auto;width:100%;justify-content:center;}
.pkg__note{text-align:center;margin-top:clamp(1.5rem,3vw,2.1rem);font-size:.9rem;color:var(--muted);}
@media(max-width:900px){.pkg-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto;gap:1.6rem;}.pkg__fit{min-height:0;}.pkg{padding:1.8rem 1.7rem 2rem;}.pkg__cta{margin-top:1.9rem;}.pkg__list{margin:1.15rem 0 0;}}


/* split-headline hierarchy: lighter first line(s), bold last line */
h1 .line:not(:last-child), h2 .line:not(:last-child){font-weight:400;}


/* master addendum */
#about { background: #fff; }
.tx-accent { color: var(--accent); }
.pkgs { background: #fff; padding-top: clamp(1.8rem, 3.2vw, 2.8rem); }
.feat3__item { padding-top: clamp(1.6rem,2.6vw,2.4rem); }
.feat3__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); display: grid; place-items: center; color: #1a6e93; margin-bottom: 0.95rem; }
.feat3__icon svg { width: 24px; height: 24px; }
.who__body p + p { margin-top: 1rem; }
.proof { margin-top: clamp(2rem,4vw,3.4rem); }
.proof__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.6rem,4vw,3.2rem); padding: clamp(1.7rem,3vw,2.6rem); background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 60px -44px rgba(22,20,15,0.26); }
.proof__logos span { display: inline-flex; }
.proof__logos img { max-height: clamp(30px,3.6vw,44px); max-width: 150px; height: auto; width: auto; opacity: 0.82; }
.proof__sectors { text-align: center; max-width: 62ch; margin: 1.4rem auto 0; color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 600px) { .proof__logos { gap: 1.4rem 2rem; } }


/* stat number bounce on hover */
.stat__num { transform-origin: center bottom; }
.stats > div:hover .stat__num { animation: statbounce 0.65s cubic-bezier(.3,.7,.4,1); }
@keyframes statbounce { 0%,100% { transform: translateY(0); } 22% { transform: translateY(-14px); } 42% { transform: translateY(0); } 60% { transform: translateY(-7px); } 78% { transform: translateY(0); } 90% { transform: translateY(-3px); } }


/* hero: a touch more space between headline lines; allow wrap on mobile */
.hero h1 .line + .line { margin-top: .1em; }
@media(max-width:600px){ .hero h1 .line { white-space: normal; } }

/* who-we-are: pull client logos up toward the 60+/8/100+ stats */
#about { padding-bottom: clamp(1.4rem,2.6vw,2.4rem); }
.clients { padding-top: clamp(.4rem,1.4vw,1.1rem); }

/* website-package financing sub-lines + custom-quote price */
.pkg__terms { margin: .25rem 0 0; font-size: .8rem; color: var(--muted); line-height: 1.45; }
.pkg__terms strong { color: var(--ink); font-weight: 700; }
.pkg__save { display: inline-block; margin: .6rem 0 0; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .01em; line-height: 1.35; color: #1a6e93; background: var(--accent-soft); padding: .34rem .62rem; border-radius: 8px; }
.pkg__own { margin: 1rem 0 0; padding-top: .85rem; border-top: 1px solid var(--line); font-size: .73rem; color: var(--muted); line-height: 1.5; }
.pkg__price--quote b { font-size: clamp(1.5rem,2.4vw,1.9rem); }

/* blue contact CTA conversion block */
.cta--blue { background: var(--paper); }
.cta--blue::before, .cta--blue::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  width: clamp(110px, 24vw, 320px);
  background-image: radial-gradient(circle, rgba(110,193,228,.55) 1px, transparent 2.3px);
  background-size: 26px 26px;
}
.cta--blue::before { left: 0; -webkit-mask-image: linear-gradient(to right, #000, transparent 92%); mask-image: linear-gradient(to right, #000, transparent 92%); }
.cta--blue::after { right: 0; -webkit-mask-image: linear-gradient(to left, #000, transparent 92%); mask-image: linear-gradient(to left, #000, transparent 92%); }
.cta--blue .container { position: relative; z-index: 1; }
.cta--blue .eyebrow { color: #1c7fb8; }
.cta--blue .eyebrow::before { background: #1c7fb8; }
.cta--blue h2 { color: var(--ink); }
.cta--blue .cta__email { color: var(--muted); }
.cta--blue .cta__email a { color: #1c7fb8; font-weight: 600; }
.cta--blue .btn:not(.btn--ghost) {
  --btn-bg: var(--accent); --btn-fg: #fff;
  background: var(--accent);
  border-color: transparent;
  box-shadow: 0 6px 16px -6px rgba(110,193,228,.5);
}
.cta--blue .btn:not(.btn--ghost):hover {
  background: var(--accent-press);
  border-color: transparent;
  box-shadow: 0 10px 22px -8px rgba(110,193,228,.55);
}
.cta--blue .btn:not(.btn--ghost):hover .arrow { transform: translate(5px,-5px); }
.cta--blue .btn:not(.btn--ghost) .arrow { color: #fff; }
.cta--blue .btn--ghost { --btn-fg: var(--ink); border-color: rgba(20,18,12,.42); background: transparent; }
.cta--blue .btn--ghost:hover { background: rgba(255,255,255,.2); border-color: rgba(20,18,12,.6); }


/* ============================================================
   MOBILE REFINEMENTS (<=760px): tighter vertical rhythm so dark
   sections read as bands, not giant black voids
   ============================================================ */
@media (max-width: 760px) {
  :root { --section-y: clamp(4rem, 9.5vw, 5.5rem); }

  .hero { padding-top: calc(var(--header-h) + 1.5rem); padding-bottom: 2.2rem; }
  .hero h1 { margin-top: 1rem; }
  .hero__grid { gap: 2.2rem; }
  .hero__lead { margin-top: 1.1rem; }
  .hero__actions { margin-top: 1.6rem; }

  .contact-split { padding-top: calc(var(--header-h) + 1.5rem); padding-bottom: 2.4rem; }
  .contact-split__title { margin-top: 1rem; }
  .contact-split__lead { margin-top: 1.1rem; }

  .head { margin-bottom: clamp(2rem, 6vw, 2.9rem); }
  .head--split { gap: clamp(1.9rem, 6vw, 2.4rem); }
  .stats { gap: 2.2rem 1rem; }

  .cta { padding-block: clamp(3.2rem, 9vw, 4.2rem); }
  .cta h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .cta .eyebrow { margin-bottom: 1rem; }
  .cta__actions { margin-top: 1.9rem; }
  .cta__email { margin-top: 1.4rem; }

  .pkgs .head { margin-bottom: clamp(2rem, 6vw, 2.9rem); }
  .pkg__note { margin-top: 1.8rem; }
}

/* footer: single column + tighter on small phones */
@media (max-width: 560px) {
  .footer { padding-block: 2.6rem 1.8rem; }
  .footer__top { grid-template-columns: 1fr; gap: 1.9rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 1.1rem; padding-top: 1.6rem; }
}


/* mobile: drop the marquee edge-fade mask (it revealed the dark canvas at the sides) */
@media (max-width: 760px) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
}


/* studio photos (about) */
.studio__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(.8rem, 1.4vw, 1.1rem); }
.studio__img { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 60px -50px rgba(22,20,15,.32); }
.studio__img img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/2; transition: transform .6s var(--ease); }
.studio__img:hover img { transform: scale(1.04); }
@media (max-width: 760px) { .studio__grid { grid-template-columns: 1fr; gap: .9rem; } .studio__img img { aspect-ratio: 16/10; } }

/* styled bluish-grey location map (contact) */
.mapwrap { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 36px 70px -50px rgba(22,20,15,.34); background: #e7ebf1; }
.mapframe { display: block; width: 100%; height: clamp(300px, 44vw, 460px); border: 0; pointer-events: none; filter: grayscale(1) contrast(.92) brightness(1.05); }
.maptint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(150deg, rgba(110,193,228,.32), rgba(74,108,138,.26) 55%, rgba(40,62,90,.34)); mix-blend-mode: multiply; }
.mapcta { text-align: center; margin-top: clamp(1.3rem, 3vw, 2rem); }


/* lighter map: white + grey + a little blue, no dark overlay */
.mapwrap { background: #ededee; }
.mapwrap::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(110,193,228,.16), transparent 62%),
    repeating-linear-gradient(0deg, rgba(20,45,70,.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(20,45,70,.05) 0 1px, transparent 1px 30px),
    #eef1f5;
}
.mapwrap::after {
  content: "";
  position: absolute; z-index: 0; top: 44%; left: 50%; width: 18px; height: 18px;
  transform: translate(-50%,-100%);
  border-radius: 50% 50% 50% 0;
  background: var(--accent);
  box-shadow: 0 8px 18px -6px rgba(12,26,46,.5);
  rotate: -45deg;
}
.mapframe { position: relative; z-index: 1; filter: grayscale(.35) contrast(.96); }
.maplink { position: absolute; inset: 0; z-index: 3; cursor: pointer; }
.maplink:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 22px; }
.mapsec { padding-block: clamp(3.5rem, 7vw, 6rem); background: linear-gradient(180deg, #f1f8fd 0%, #e1eff9 100%); }
.mapsec .head { max-width: 880px; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }


/* modern Montreal hero (contact) */
.contact-hero .hero__grid { grid-template-columns: 1fr 1.08fr; align-items: start; }
.cityhero { position: relative; max-width: none; justify-self: stretch; }
.cityhero__glow { position: absolute; z-index: 0; inset: -6% 0% -8% 0%; border-radius: 40px; background: radial-gradient(60% 60% at 38% 30%, rgba(110,193,228,.32), transparent 70%); filter: blur(44px); opacity: .48; animation: cityglow 13s ease-in-out infinite; }
.cityhero__media { position: relative; z-index: 1; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 50px 90px -48px rgba(12,26,46,.62); background: linear-gradient(140deg, #1a6e93, #0c1a2e); aspect-ratio: 4/3; }
.cityhero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); animation: cityzoom 26s ease-in-out infinite alternate; }
.cityhero__skyline { position: absolute; inset: auto 0 0 0; width: 100%; height: 66%; display: block; }
.cityhero__wash { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(8,16,30,.28) 100%), linear-gradient(140deg, rgba(110,193,228,.08), transparent 50%); }
.cityhero__chip { position: absolute; z-index: 2; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-radius: 999px; font-family: var(--font-mono); font-size: .8rem; font-weight: 600; letter-spacing: .01em; color: #0e2236; background: rgba(255,255,255,.74); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.65); box-shadow: 0 10px 24px -14px rgba(12,26,46,.5); animation: cityfloat 6s ease-in-out infinite; }
.cityhero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(110,193,228,.7); animation: citypulse 2.2s ease-out infinite; }
.cityhero__card { position: absolute; z-index: 2; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 16px; color: #fff; background: rgba(14,34,54,.44); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 16px 34px -18px rgba(0,0,0,.6); font-size: .8rem; line-height: 1.2; animation: cityfloat 7.4s ease-in-out infinite .6s; }
.cityhero__card strong { font-size: .92rem; }
.cityhero__globe { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.5; }
@keyframes cityglow { 0%,100% { transform: translateY(0) scale(1); opacity: .82; } 50% { transform: translateY(-2%) scale(1.04); opacity: .95; } }
@keyframes cityzoom { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@keyframes cityfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes citypulse { 0% { box-shadow: 0 0 0 0 rgba(110,193,228,.7); } 70% { box-shadow: 0 0 0 9px rgba(110,193,228,0); } 100% { box-shadow: 0 0 0 0 rgba(110,193,228,0); } }
@media (max-width: 980px) { .contact-hero .hero__grid { grid-template-columns: 1fr; } .cityhero__media { aspect-ratio: 16/10; } .cityhero { max-width: 560px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .cityhero__glow, .cityhero__media img, .cityhero__chip, .cityhero__card, .cityhero__dot { animation: none; } }


/* sexier nav CTA button */
.nav-cta .btn { padding: 0.78em 1.5em; }


/* browser mockup (web dev hero) */
.browser { position: relative; z-index: 1; width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 44px 80px -42px rgba(22,20,15,.34); animation: floaty 7s ease-in-out infinite; }
.browser__bar { display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem; background: #fff; border-bottom: 1px solid var(--line); }
.browser__dots { display: inline-flex; gap: 5px; }
.browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: #d8dde3; }
.browser__dots i:nth-child(1){ background:#f0a8a0; } .browser__dots i:nth-child(2){ background:#f2cf8e; } .browser__dots i:nth-child(3){ background:#a6d6a8; }
.browser__url { flex: 1; font-family: var(--font-mono); font-size: .72rem; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 7px; padding: .25rem .6rem; }
.browser__view { padding: .9rem 1rem 1.1rem; display: grid; gap: .8rem; background: linear-gradient(180deg, #fff, var(--paper)); }
.bw-top { display: flex; align-items: center; gap: .5rem; }
.bw-logo { width: 34px; height: 9px; border-radius: 4px; background: var(--ink); }
.bw-nav { display: inline-flex; gap: 7px; margin-left: auto; }
.bw-nav i { width: 18px; height: 6px; border-radius: 3px; background: #cfd5db; }
.bw-pill { width: 40px; height: 16px; border-radius: 999px; background: var(--accent); }
.bw-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: .8rem; align-items: center; }
.bw-lines { display: grid; gap: .5rem; }
.bw-l1 { width: 90%; height: 11px; border-radius: 4px; background: var(--ink); }
.bw-l2 { width: 68%; height: 11px; border-radius: 4px; background: var(--accent); }
.bw-l3 { width: 100%; height: 6px; border-radius: 3px; background: #d2d8de; }
.bw-cta { width: 56px; height: 18px; border-radius: 999px; background: var(--ink); margin-top: .2rem; }
.bw-shot { height: 86px; border-radius: 10px; background: linear-gradient(150deg, #6EC1E4, #1a6e93); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.bw-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; }
.bw-row span { height: 34px; border-radius: 8px; background: #fff; border: 1px solid var(--line); }

/* about hero 2-column */
.about-hero__top { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.about-hero__top .about-hero__head { max-width: none; }
.about-hero__top .about-hero__head h1 { font-size: clamp(2.2rem, 4vw, 3.6rem); }
.about-hero__top .hero__visual { justify-self: end; }
@media (max-width: 900px) { .about-hero__top { grid-template-columns: 1fr; gap: clamp(2.4rem, 6vw, 3rem); } .about-hero__top .hero__visual { justify-self: center; } }


/* ============================================================
   ABOUT PAGE — today's proof / spacing refinements
   ============================================================ */

/* Honest client-proof card (replaces the dashboard chart card) */
.clientcard { position: relative; z-index: 1; width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 44px 80px -42px rgba(22,20,15,0.34); padding: 1.5rem 1.6rem; animation: floaty 7s ease-in-out infinite; }
.clientcard__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.clientcard__eyebrow { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.clientcard__badge { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #1a6e93; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; padding: 0.32em 0.72em; white-space: nowrap; }
.clientcard__list { list-style: none; margin: 1.15rem 0 0; padding: 0; }
.clientcard__list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.72rem 0; border-top: 1px solid var(--line); }
.clientcard__list li:first-child { border-top: 0; padding-top: 0.2rem; }
.clientcard__list img { max-height: 28px; max-width: 132px; width: auto; height: auto; opacity: 0.9; }
.clientcard__list span { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); white-space: nowrap; }
.clientcard__foot { margin: 1.05rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.85rem; line-height: 1.45; color: var(--muted); }

/* Blue text accent for the "60+" proof line */
.htext-blue { color: #2a93c4; }

/* Premium client-logo marquee (replaces the boxed strip) */
.logomq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.logomq__track { display: flex; width: max-content; animation: marquee 40s linear infinite; will-change: transform; }
.logomq:hover .logomq__track { animation-play-state: paused; }
.logomq__set { display: inline-flex; align-items: center; gap: clamp(2.6rem, 5.5vw, 5rem); padding-right: clamp(2.6rem, 5.5vw, 5rem); flex: 0 0 auto; }
.logomq__set span { display: inline-flex; flex: 0 0 auto; }
.logomq__set img { max-height: clamp(38px, 4.4vw, 52px); max-width: 184px; width: auto; height: auto; opacity: 0.68; }
@media (prefers-reduced-motion: reduce) {
  .logomq__track { animation: none; flex-wrap: wrap; justify-content: center; }
  .logomq__set { flex-wrap: wrap; justify-content: center; row-gap: 1.6rem; padding-right: 0; }
  .logomq__set:nth-child(2) { display: none; }
}

/* Tighten the gap above "Where the work happens." */
.studio--tight { padding-top: clamp(2rem, 4vw, 3.5rem); }

/* Keep the About hero credential pill inside the viewport on small screens */
@media (max-width: 600px) { .about-hero .searchpill { left: 0; bottom: -1.15rem; } }


/* ============================================================
   SERVICES "what we do" rows — richer cards, blue accents,
   cleaner mobile separators, clean reveal + hover motion
   ============================================================ */
.srows { border-top: 0; margin-top: clamp(1rem, 2.2vw, 1.7rem); display: flex; flex-direction: column; gap: clamp(1.25rem, 2.8vw, 1.6rem); }
.srow {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(110,193,228,.08), rgba(110,193,228,.018)), var(--paper);
  padding: clamp(1.3rem,2.4vw,2rem) clamp(1.2rem,2.1vw,1.9rem);
  position: relative;
  overflow: hidden;
  transition: background .32s var(--ease), color .32s var(--ease), border-color .32s var(--ease), transform .32s var(--ease), box-shadow .32s var(--ease);
}
/* blue accent edge */
.srow::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, #8fd0ee, var(--accent));
  transform: scaleY(.35); transform-origin: top; opacity:.7;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.srow__no { color:#2a93c4; font-weight:600; }
.srow__arrow { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); color:#2a93c4; }

/* hover / keyboard focus (desktop) — premium dark fill */
.srow:hover, .srow:focus-visible {
  background: var(--carbon); color: var(--on-dark); border-color: var(--carbon);
  transform: translateY(-2px); box-shadow: 0 26px 50px -30px rgba(12,26,46,.5);
}
.srow:hover::before, .srow:focus-visible::before { transform: scaleY(1); opacity:1; }
.srow:hover .srow__no, .srow:focus-visible .srow__no { color: var(--accent); }
.srow:hover .srow__desc, .srow:focus-visible .srow__desc { color: rgba(244,240,232,.86); }
.srow:hover .srow__title span, .srow:focus-visible .srow__title span { color: var(--on-dark); }
.srow:hover .srow__cta, .srow:focus-visible .srow__cta { color: var(--accent); }
.srow:hover .srow__arrow, .srow:focus-visible .srow__arrow {
  background: var(--accent); border-color: var(--accent); color: var(--ink); transform: rotate(45deg);
}
.srow:active { transform: translateY(0) scale(.997); }

/* mobile: spaced cards, full-width desc/cta, blue accents visible at rest */
@media (max-width: 820px) {
  .srow { grid-template-columns: 40px 1fr; gap: .3rem 1rem; padding: 1.2rem 1.2rem 1.3rem 1.4rem; }
  .srow::before { transform: scaleY(1); opacity: .9; }
  .srow__no { align-self: start; padding-top: .15rem; }
  .srow__desc { grid-column: 1 / -1; margin-top: .4rem; }
  .srow__cta { grid-column: 1 / -1; margin-top: .95rem; justify-self: start; color: #2a93c4; }
}

[data-reveal-delay="4"] { transition-delay: 0.32s; }


/* ===== Homepage client logos: balance sizes + more gap above row ===== */
.clients { padding-top: clamp(2.6rem, 5.5vw, 4.6rem); }

/* desktop (7 across): widen the under-sized wide logos, trim the rest so it stays one row.
   Percentage shares of the non-gap space sum to 100% (6 gaps = 7.8rem). */
@media (min-width: 1001px) {
  .clients__row .client-logo { flex: 0 0 calc((100% - 7.8rem) * 0.125); }
  .clients__row .client-logo--md { flex-basis: calc((100% - 7.8rem) * 0.155); }
  .clients__row .client-logo--lg { flex-basis: calc((100% - 7.8rem) * 0.19); }
  .client-logo img { max-height: 62px; }
}

@media (max-width: 640px) { .clients { padding-top: clamp(2rem, 7vw, 3rem); } }


/* ============================================================
   SERVICES — "Why Aloweb" honest proof + positioning (pre-CTA)
   ============================================================ */
.whysec { background: var(--paper); }
.whysec__head h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -0.02em; line-height: 1.05; }
.whysec__head .lead { margin-top: 1.2rem; }

.whygrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 3rem); margin-top: clamp(2.6rem, 5vw, 4.2rem); }
.whyp { padding-top: 1.3rem; border-top: 2px solid var(--accent); }
.whyp__k { font-family: var(--font-mono); font-size: .78rem; font-weight: 600; color: #2a93c4; letter-spacing: .1em; }
.whyp h3 { font-size: clamp(1.1rem, 1.7vw, 1.4rem); margin: .65rem 0 .55rem; letter-spacing: -.01em; }
.whyp p { color: var(--muted); font-size: .96rem; line-height: 1.58; }

.whyproof { margin-top: clamp(2.8rem, 5.5vw, 4.6rem); text-align: center; }
.whyproof__label { display: block; font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: clamp(1.5rem, 2.8vw, 2.2rem); }
.whyproof__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.6rem, 4.4vw, 3.4rem); }
.whyproof__logos img { max-height: clamp(34px, 3.6vw, 46px); max-width: 132px; width: auto; height: auto; opacity: .6; transition: opacity .25s ease; }
.whyproof__logos span:hover img { opacity: .92; }

@media (max-width: 820px) {
  .whygrid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; gap: 1.8rem; }
  .whyproof__logos { gap: 1.5rem 2rem; }
}


/* ============================================================
   PDF REFINEMENTS: thin accent (mobile), mixed-weight headline,
   3-step process, dark-section ecosystem motion
   ============================================================ */
@media (max-width: 760px) { .accent { background-size: 100% 0.22em; } }

/* Why Aloweb headline: regular first line, bold accent line */
.whysec__soft { font-weight: 400; }
.whysec__strong { font-weight: 800; }
.whysec__h2 { line-height: 1.08; }

/* 3-step process: centered editorial flow with restrained blue accents */
.process { margin-top: clamp(3rem, 6vw, 5rem); }
.process__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.process__head h3 { font-size: clamp(1.5rem, 2.7vw, 2.1rem); letter-spacing: -.01em; margin-top: .9rem; }
.psteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.8rem, 3.6vw, 3.2rem); position: relative; }
.pstep { text-align: center; }
.pstep__num { display: inline-flex; align-items: center; justify-content: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; border: 2px solid var(--accent); color: #2a93c4; font-family: var(--font-mono); font-weight: 600; font-size: .9rem; background: var(--paper); position: relative; z-index: 1; margin-bottom: 1.1rem; }
.pstep h4 { font-size: clamp(1.05rem, 1.5vw, 1.25rem); margin-bottom: .55rem; letter-spacing: -.01em; }
.pstep p { color: var(--muted); font-size: .95rem; line-height: 1.58; max-width: 32ch; margin-inline: auto; }
@media (min-width: 821px) {
  .psteps::before { content: ""; position: absolute; top: 1.35rem; left: 16.7%; right: 16.7%; height: 2px; background: linear-gradient(90deg, rgba(110,193,228,.35), var(--accent), rgba(110,193,228,.35)); z-index: 0; }
}
@media (max-width: 820px) {
  .psteps { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; gap: 2rem; }
}

/* Dark section: two columns + ecosystem visual + brighter copy */
.srv-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.on-carbon .lead { color: rgba(244,240,232,.84); }
.eco { width: 100%; }
.eco__svg { width: 100%; height: auto; display: block; overflow: visible; }
.eco__line { stroke: rgba(110,193,228,.45); stroke-width: 1.5; stroke-dasharray: 240; stroke-dashoffset: 240; }
.eco.is-visible .eco__line { animation: ecoDraw 1.1s var(--ease) forwards; }
.eco.is-visible .eco__line:nth-of-type(1) { animation-delay: .15s; }
.eco.is-visible .eco__line:nth-of-type(2) { animation-delay: .28s; }
.eco.is-visible .eco__line:nth-of-type(3) { animation-delay: .41s; }
.eco.is-visible .eco__line:nth-of-type(4) { animation-delay: .54s; }
.eco.is-visible .eco__line:nth-of-type(5) { animation-delay: .67s; }
@keyframes ecoDraw { to { stroke-dashoffset: 0; } }
.eco__ring { fill: var(--carbon); stroke: rgba(110,193,228,.55); stroke-width: 1.5; }
.eco__ic { stroke: #cfeaf7; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.eco__ic--fill { fill: var(--accent); stroke: none; }
.eco__lbl { fill: #b9c7cf; font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; }
.eco__node { animation: ecoFloat 6.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes ecoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.eco__glow { transform-box: fill-box; transform-origin: center; animation: ecoPulse 5.5s ease-in-out infinite; }
@keyframes ecoPulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .85; transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) {
  .eco__node, .eco__glow { animation: none; }
  .eco.is-visible .eco__line { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 900px) {
  .srv-grid { grid-template-columns: 1fr; gap: clamp(2.4rem, 6vw, 3.4rem); }
  .eco { max-width: 360px; margin: 0 auto; }
}


/* ============================================================
   "HOW WE WORK" — light section with step cards
   ============================================================ */
.howwork { position: relative; overflow: hidden; background: var(--paper-2); color: var(--ink); }
.howwork .eyebrow::before { background: var(--accent); }
.howwork__lead { color: var(--muted); max-width: 50ch; margin: 1.1rem auto 0; font-size: var(--fs-lead); line-height: 1.5; }

.ww-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.4vw, 1.8rem); margin-top: clamp(2.8rem, 5vw, 4.2rem); }
.ww-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(1.8rem, 3vw, 2.7rem);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.ww-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 26px 54px -32px rgba(20,19,15,.28);
}
.ww-card__num { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 4.6vw, 3.6rem); line-height: .9; color: #2a93c4; letter-spacing: -.02em; margin-bottom: 1.1rem; }
.ww-card h3 { color: var(--ink); font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: -.01em; margin-bottom: .6rem; }
.ww-card p { color: var(--muted); font-size: .96rem; line-height: 1.6; }

@media (max-width: 860px) {
  .ww-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; gap: 1.1rem; }
}


/* ============================================================
   ABOUT: premium "Who we are" metrics + softer heading
   ============================================================ */
.who h2 { color: #25303a; }
.stats--about .stat__num { font-size: clamp(2.1rem, 3.8vw, 3.1rem); color: #2a93c4; letter-spacing: -.025em; }
.stats--about .stat__label { color: var(--muted); margin-top: 0.65rem; }
@media (min-width: 681px) {
  .stats--about { gap: 0; }
  .stats--about > div { padding: 0.2rem clamp(1.6rem, 3.4vw, 3.2rem); }
  .stats--about > div:first-child { padding-left: 0; }
  .stats--about > div + div { border-left: 1px solid var(--line); }
}


/* ============================================================
   §2 Web design benefit cards: premium hover motion
   ============================================================ */
.feature { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.feature .card__icon { transition: transform .32s var(--ease); }
.feature:hover, .feature:focus-within {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 22px 46px -28px rgba(20,19,15,.3), 0 0 0 1px rgba(110,193,228,.28);
}
.feature:hover .card__icon, .feature:focus-within .card__icon { transform: translateY(-2px) scale(1.07); }
@media (prefers-reduced-motion: reduce) {
  .feature, .feature .card__icon { transition: none; }
  .feature:hover, .feature:focus-within, .feature:hover .card__icon { transform: none; }
}

/* §3 Packages footer (free month / ownership / CAD stated once) */
.pkg-foot { margin-top: clamp(1.8rem, 3.2vw, 2.6rem); text-align: center; display: flex; flex-direction: column; gap: .55rem; }
.pkg-foot__free { font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.pkg-foot__own { color: var(--muted); font-size: .92rem; max-width: 62ch; margin-inline: auto; }
.pkg-foot__meta { color: var(--muted); font-size: .88rem; max-width: 62ch; margin-inline: auto; }


/* ============================================================
   §4 Static client panel + testimonials carousel
   ============================================================ */
.clientpanel { position: relative; z-index: 1; width: 100%; background: linear-gradient(180deg, var(--paper), color-mix(in srgb, var(--accent) 6%, var(--paper))); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 44px 80px -42px rgba(22,20,15,.34); padding: 1.5rem 1.7rem 1.7rem; }
.clientpanel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.1rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--line); }
.clientpanel__eyebrow { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.clientpanel__since { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: #1a6e93; background: var(--accent-soft); padding: .34em .7em; border-radius: 999px; white-space: nowrap; }
.clientpanel__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem 1.4rem; }
.clientpanel__grid li { display: flex; flex-direction: column; gap: .5rem; }
.clientpanel__grid img { height: 21px; width: auto; max-width: 128px; object-fit: contain; object-position: left center; }
.clientpanel__grid span { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .03em; text-transform: uppercase; color: #2a93c4; }

.tcar { max-width: 760px; margin: clamp(1.4rem,3vw,2.2rem) auto 0; text-align: center; }
.tcar__stage { position: relative; min-height: 210px; display: flex; align-items: center; justify-content: center; }
.treview { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.treview.is-active { opacity: 1; position: relative; pointer-events: auto; }
.treview__stars { color: var(--accent); letter-spacing: .18em; font-size: 1rem; margin-bottom: 1rem; }
.treview blockquote { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem,2.1vw,1.6rem); line-height: 1.42; letter-spacing: -.01em; margin: 0 0 1.3rem; color: var(--ink); max-width: 40ch; }
.treview figcaption strong { display: block; font-size: 1rem; color: var(--ink); }
.treview figcaption span { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.tcar__nav { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-top: 1.6rem; }
.tcar__arrow { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: border-color .25s var(--ease), color .25s var(--ease); display: grid; place-items: center; }
.tcar__arrow:hover { border-color: var(--accent); color: #2a93c4; }
.tcar__dots { display: flex; gap: .42rem; }
.tcar__dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: var(--line); cursor: pointer; transition: background .3s var(--ease), width .3s var(--ease); }
.tcar__dots button.is-active { background: var(--accent); width: 20px; }
.tcar__note { margin-top: 1.2rem; font-size: .78rem; color: var(--muted); font-style: italic; }
@media (prefers-reduced-motion: reduce) { .treview { transition: opacity .25s linear; } }
@media (max-width: 520px) { .clientpanel__grid { gap: 1.1rem; } .clientpanel__grid img { height: 19px; } }


/* ============================================================
   §7 How we work — connected 3-step system
   ============================================================ */
.system { display: flex; align-items: flex-start; gap: 0; margin-top: clamp(2.6rem, 5vw, 4rem); }
.sysstep { flex: 1; text-align: center; padding: 0 clamp(.8rem, 2vw, 1.6rem); }
.sysstep__ic { width: 58px; height: 58px; border-radius: 16px; background: var(--accent-soft); color: #1a6e93; display: grid; place-items: center; margin: 0 auto .9rem; }
.sysstep__ic svg { width: 28px; height: 28px; }
.sysstep__k { font-family: var(--font-mono); font-size: .78rem; font-weight: 600; color: #2a93c4; letter-spacing: .12em; }
.sysstep h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin: .5rem 0 .55rem; letter-spacing: -.01em; }
.sysstep p { color: var(--muted); font-size: .95rem; line-height: 1.58; max-width: 30ch; margin-inline: auto; }
.sysconn { flex: 0 0 auto; align-self: flex-start; margin-top: 16px; color: var(--accent); }
.sysconn svg { width: 46px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.sysconn svg line { stroke-dasharray: 34; stroke-dashoffset: 34; }
.sysconn svg path { opacity: 0; }
.system.is-visible .sysconn svg line { animation: sysdraw .85s var(--ease) forwards; }
.system.is-visible .sysconn svg path { animation: sysarrow .4s var(--ease) .55s forwards; }
.system.is-visible > div:nth-child(4) svg line { animation-delay: .3s; }
.system.is-visible > div:nth-child(4) svg path { animation-delay: .85s; }
@keyframes sysdraw { to { stroke-dashoffset: 0; } }
@keyframes sysarrow { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 820px) {
  .system { flex-direction: column; align-items: center; max-width: 340px; margin-inline: auto; }
  .sysstep { padding: 0; }
  .sysconn { align-self: center; margin: .7rem 0; transform: rotate(90deg); }
}
/* tablet portrait: scale the ecosystem diagram up so it fills the space (phones keep the compact size) */
@media (min-width: 601px) and (max-width: 820px) {
  .system { max-width: clamp(380px, 62vw, 480px); }
  .eco { max-width: clamp(380px, 62vw, 480px); }
}
@media (prefers-reduced-motion: reduce) {
  .sysconn svg line { stroke-dashoffset: 0; }
  .sysconn svg path { opacity: 1; }
}

/* ============================================================
   §8 Our Space — animated title + responsive office gallery
   ============================================================ */
.studio__word { position: relative; color: #2a93c4; white-space: nowrap; }
.studio__word::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.06em; height: 3px; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform .8s var(--ease) .25s; }
.studio .head.is-visible .studio__word::after { transform: scaleX(1); }
.studio__img img { transition: transform .8s var(--ease); }
.studio__img:hover img { transform: scale(1.05); }
@media (max-width: 760px) {
  .studio__grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: .75rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: .4rem; }
  .studio__grid::-webkit-scrollbar { display: none; }
  .studio__img { flex: 0 0 86%; scroll-snap-align: center; }
  .studio__img img { aspect-ratio: 4/3; }
}
@media (prefers-reduced-motion: reduce) {
  .studio__word::after { transition: none; transform: scaleX(1); }
  .studio__img img, .studio__img:hover img { transition: none; transform: none; }
}

/* =============================================================
   ALOWEB 2.0 — About round: editorial photo + value band,
   real-review testimonials, office gallery carousel
   ============================================================= */

/* 01 — Editorial photo + clean outcomes row ------------------ */
.editorial { margin: clamp(2.4rem,6vw,5rem) 0; }
.editorial__media { position: relative; width: 100%; height: clamp(300px,40vw,540px); overflow: hidden; background: #0e2a3a; }
.editorial__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.editorial__sweep { position: absolute; inset: -25% -45%; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.13) 50%, transparent 62%); filter: blur(20px); pointer-events: none; animation: ed-sweep 11s ease-in-out infinite; }
@keyframes ed-kb { from { transform: scale(1.04) translate3d(0,0,0); } to { transform: scale(1.12) translate3d(-1.4%,-1.2%,0); } }
@keyframes ed-sweep { 0% { transform: translateX(-42%); } 50% { transform: translateX(42%); } 100% { transform: translateX(-42%); } }
.outcomes { --ocgap: clamp(1.5rem,3.4vw,3rem); list-style: none; margin: clamp(1.9rem,3.6vw,3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: var(--ocgap); }
.outcomes__item { position: relative; display: flex; align-items: center; gap: .95rem; }
.outcomes__item + .outcomes__item::before { content: ""; position: absolute; left: calc(var(--ocgap) / -2); top: .05em; bottom: .05em; width: 1px; background: var(--line); }
.outcomes__ic { flex: 0 0 auto; color: #2a93c4; line-height: 0; }
.outcomes__ic svg { width: 30px; height: 30px; }
.outcomes__item h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.18rem,1.8vw,1.6rem); letter-spacing: -.015em; line-height: 1.16; color: var(--ink); }
@media (max-width: 780px) {
  .outcomes { grid-template-columns: 1fr; gap: 0; }
  .outcomes__item { padding: 1.1rem 0; }
  .outcomes__item + .outcomes__item::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .outcomes__item:first-child { padding-top: 0; }
  .outcomes__item:last-child { padding-bottom: 0; }
}
/* 02 — Testimonials (real reviews) ---------------------------- */
.reviews { background: #e8f3f9; }
.reviews__car { margin-top: clamp(1.8rem,3.5vw,2.6rem); }
.reviews__viewport { overflow: hidden; }
.reviews__track { display: flex; gap: 1.5rem; transition: transform .55s var(--ease); will-change: transform; }
.rcard { flex: 0 0 calc((100% - 2 * 1.5rem) / 3); box-sizing: border-box; background: #fff; border: 1px solid rgba(13,56,80,.08); border-radius: 22px; padding: clamp(1.8rem,2.5vw,2.3rem); display: flex; flex-direction: column; box-shadow: 0 34px 64px -50px rgba(13,56,80,.4); }
.rcard__mark { display: block; font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: 3.6rem; line-height: .5; height: 1.4rem; }
.rcard__mark::before { content: "\201C"; }
.rcard__quote { margin: .7rem 0 1.6rem; color: var(--ink); font-size: 1.06rem; line-height: 1.64; font-weight: 450; }
.rcard__who { display: flex; flex-direction: column; gap: .2rem; margin-top: auto; padding-top: 1.15rem; border-top: 1px solid rgba(13,56,80,.1); }
.rcard__who strong { color: var(--ink); font-size: 1rem; font-weight: 700; }
.rcard__who > span { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: #2a93c4; }
@media (max-width: 860px) { .rcard { flex-basis: 100%; } }

/* WHO WE ARE — editorial ------------------------------------- */
.whoed { padding: var(--section-y) 0; }
.whoed__top { display: grid; grid-template-columns: .72fr 2.5fr; gap: clamp(1rem,4vw,3rem); align-items: start; }
.whoed__label { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .14em; color: #2a93c4; position: relative; padding: .65rem 0 0 2.5rem; }
.whoed__label::before { content: ""; position: absolute; left: 0; top: 1rem; width: 1.7rem; height: 2px; background: var(--accent); }
.whoed__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem,5vw,4rem); line-height: 1.04; letter-spacing: -.022em; color: var(--ink); max-width: 17ch; }
.whoed__grid { margin-top: clamp(2.4rem,5vw,4.5rem); display: grid; grid-template-columns: 1fr 1.22fr; gap: clamp(1.8rem,4vw,3.6rem); align-items: start; }
.whoed__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.05rem; }
.whoed__points li { display: flex; align-items: center; gap: .9rem; font-size: clamp(1.05rem,1.5vw,1.28rem); font-weight: 500; color: var(--ink); }
.whoed__dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.whoed__body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(1.6rem,3vw,2.8rem); }
.whoed__body p { margin: 0; flex: 1 1 280px; color: var(--muted); font-size: var(--fs-lead); line-height: 1.62; }
.whoed__cta { flex: 0 0 auto; width: clamp(122px,12vw,152px); height: clamp(122px,12vw,152px); border-radius: 999px; background: var(--accent); color: #0c374f; display: grid; place-items: center; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem,1.2vw,1.15rem); line-height: 1.12; text-decoration: none; box-shadow: 0 20px 44px -18px rgba(110,193,228,.75); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.whoed__cta:hover { transform: scale(1.05) rotate(-3deg); box-shadow: 0 26px 54px -18px rgba(110,193,228,.9); }
.whoed__cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 860px) {
  .whoed__top { grid-template-columns: 1fr; gap: 1rem; }
  .whoed__grid { grid-template-columns: 1fr; gap: 2rem; }
}
/* 03 — Office gallery carousel -------------------------------- */
.gallery { margin-top: clamp(1.8rem,3.4vw,2.6rem); }
.gallery__viewport { overflow: hidden; }
.gallery__track { display: flex; gap: clamp(.7rem,1.4vw,1.1rem); transition: transform .6s var(--ease); will-change: transform; }
.gslide { flex: 0 0 42%; box-sizing: border-box; }
.gslide figure { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 60px -50px rgba(22,20,15,.32); }
.gslide img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .8s var(--ease); }
.gslide figure:hover img { transform: scale(1.06); }
@media (max-width: 760px) { .gslide { flex-basis: 80%; } }

/* shared carousel chrome (reviews + gallery) ------------------ */
.reviews__nav, .gallery__nav { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-top: 1.7rem; }
.reviews__arrow, .gallery__arrow { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); }
.reviews__arrow:hover, .gallery__arrow:hover { border-color: var(--accent); color: #2a93c4; }
.reviews__dots, .gallery__dots { display: flex; gap: .42rem; }
.reviews__dots button, .gallery__dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: var(--line); cursor: pointer; transition: background .3s var(--ease), width .3s var(--ease); }
.reviews__dots button.is-active, .gallery__dots button.is-active { background: var(--accent); width: 20px; }
.reviews__car.is-single .reviews__nav, .gallery.is-single .gallery__nav { display: none; }
.reviews__arrow:focus-visible, .gallery__arrow:focus-visible,
.reviews__dots button:focus-visible, .gallery__dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .editorial__img { animation: none; transform: scale(1.04); }
  .editorial__sweep { animation: none; opacity: 0; }
  .reviews__track, .gallery__track, .gslide img { transition: none; }
  .whoed__cta { transition: none; }
}

/* nav CTA — "Let's talk" -------------------------------------- */
.nav-cta .btn, .mobile-menu .btn {
  position: relative; border: none;
  padding: .66em .66em .66em 1.6em; gap: .72em;
  font-size: calc(var(--fs-small) + .05rem); font-weight: 650; letter-spacing: .01em; color: #fff;
  background: #16140f;
  box-shadow: 0 12px 26px -14px rgba(22,20,15,.55);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), background .26s var(--ease);
}
.nav-cta .btn .arrow, .mobile-menu .btn .arrow {
  display: grid; place-items: center; width: 2.05em; height: 2.05em; border-radius: 999px;
  background: var(--accent); color: #0c374f; font-size: .82em; line-height: 1; font-weight: 800;
  transition: transform .3s var(--ease);
}
.nav-cta .btn:hover, .mobile-menu .btn:hover {
  background: #221d15;
  box-shadow: 0 16px 30px -14px rgba(22,20,15,.68);
}
.nav-cta .btn:hover .arrow, .mobile-menu .btn:hover .arrow { transform: translateX(3px); }
.nav-cta .btn:active, .mobile-menu .btn:active { transform: translateY(1px); }

/* contact hero — real Montreal photo -------------------------- */
.cityhero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.05); animation: cityken 24s ease-in-out infinite alternate; }
@keyframes cityken { from { transform: scale(1.05) translate(0,0); } to { transform: scale(1.13) translate(-1.6%,-1%); } }

@media (prefers-reduced-motion: reduce) {
  .nav-cta .btn .arrow, .mobile-menu .btn .arrow { transition: none; }
  .cityhero__img { animation: none; transform: scale(1.05); }
}

/* ===== Contact hero centered (no image) ===== */
.contact-hero--center .hero__copy { max-width: 780px; margin-inline: auto; text-align: center; }
.contact-hero--center .eyebrow { justify-content: center; }
.contact-hero--center .hero__lead { margin-inline: auto; }

/* ===== Service-area tags (contact map section) ===== */
.areas { list-style: none; padding: 0; margin: clamp(1.4rem,3vw,2rem) auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem .7rem; max-width: 960px; }
.areas li { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: .02em; color: #15597f; background: #fff; border: 1px solid rgba(110,193,228,.55); padding: .5rem 1.05rem; border-radius: 999px; box-shadow: 0 6px 16px -12px rgba(20,97,140,.5); }
.areas__addr { margin-top: clamp(1.1rem,2.4vw,1.5rem); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--muted); }

/* ===== Homepage "Who we help" blue band ===== */
.grow { position: relative; overflow: hidden; text-align: center; padding-block: clamp(4rem, 9vw, 7rem);
  background:
    radial-gradient(80% 120% at 50% -20%, rgba(110,193,228,.34), transparent 60%),
    linear-gradient(135deg, #0e4d6e 0%, #1a6e93 60%, #14607f 100%);
  color: #eaf6fc; }
.grow::before, .grow::after { content: ""; position: absolute; top: 0; bottom: 0; pointer-events: none;
  width: clamp(120px,24vw,340px);
  background-image: radial-gradient(circle, rgba(255,255,255,.18) 1.6px, transparent 2px); background-size: 18px 18px; }
.grow::before { left: 0; -webkit-mask-image: linear-gradient(to right,#000,transparent 90%); mask-image: linear-gradient(to right,#000,transparent 90%); }
.grow::after { right: 0; -webkit-mask-image: linear-gradient(to left,#000,transparent 90%); mask-image: linear-gradient(to left,#000,transparent 90%); }
.grow .container { position: relative; z-index: 1; }
.grow .eyebrow { justify-content: center; color: #9bd6f0; margin-bottom: 1.2rem; }
.grow .eyebrow::before { background: #9bd6f0; }
.grow h2 { font-size: var(--fs-title); color: #fff; max-width: 18ch; margin: 0 auto; line-height: 1.08; }
.grow__lead { max-width: 60ch; margin: clamp(1.1rem,2.5vw,1.6rem) auto 0; color: rgba(234,246,252,.86); font-size: var(--fs-body); }
.grow__cats { list-style: none; padding: 0; margin: clamp(2rem,4vw,2.8rem) auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.3rem,3vw,2.2rem) clamp(1.6rem,4vw,3rem); max-width: 840px; }
.grow__cats li { display: flex; flex-direction: column; align-items: center; gap: .75rem; width: 118px; text-align: center; }
.grow__ic { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 16px; color: #eaf6fc; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.22); }
.grow__ic svg { width: 27px; height: 27px; }
.grow__cats li > span:last-child { font-family: var(--font-mono); font-size: var(--fs-small); color: rgba(234,246,252,.92); letter-spacing: .02em; line-height: 1.25; }

/* ===== Softer dark sections (less black) + readable text ===== */
.on-carbon { background: radial-gradient(85% 65% at 50% 22%, #241f19, #141109 72%); }
.on-carbon .card, .on-carbon .feature { background: linear-gradient(158deg, #282219, #1d1913); border-color: rgba(244,240,232,.13); box-shadow: 0 22px 52px -30px rgba(0,0,0,.7); }
.on-carbon .lead, .on-carbon p, .on-carbon .card p, .on-carbon .feature p { color: #c7c1b4; }

/* ===== Approach features (home): hover grows only the icon, not the box ===== */
.section--white .feature .card__icon { transition: transform .35s var(--ease); }
.section--white .feature:hover, .section--white .feature:focus-within { transform: none; border-color: var(--line); box-shadow: none; }
.section--white .feature:hover .card__icon, .section--white .feature:focus-within .card__icon { transform: scale(1.22); }

/* ===== Dark-mode webview fix: light sections need their own paper bg ===== */
/* In forced-dark webviews the page/body background does not paint through
   transparent child sections (only elements with their own background render it,
   which is why .section blocks stay light but bare sections went black). Give the
   page wrapper + the bare About sections an explicit paper background. */
main { background: var(--paper); }
.about-hero { background: radial-gradient(120% 70% at 82% -10%, rgba(110, 193, 228,0.10), transparent 55%), var(--paper); }
.editorial, .whoed { background: var(--paper); }

/* ===== Industries (Who we help): clean 3+2 layout on mobile, not 2+2+1 ===== */
@media (max-width: 560px) {
  .grow__cats { gap: 1.6rem 0.6rem; }
  .grow__cats li { width: 30%; }
}

/* Bigger Let's talk button in the mobile menu (was too thin) */
.mobile-menu .btn { font-size: 1.08rem; padding: 1.05em 1.4em; margin-top: 1.75rem; }

/* ===== §2 How We Work — tighter spacing + modern process visual (today's brief) ===== */
.howwork { padding-top: clamp(2.2rem, 4.5vw, 3.4rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.howwork .head h2 { margin-top: .4rem; }
.howwork .head .lead { margin-top: .7rem; }
.howwork .system { margin-top: clamp(1.7rem, 3.4vw, 2.5rem); }

/* modern icon tiles: vivid blue, depth + glass, sharper stroke */
.sysstep__ic {
  width: 68px; height: 68px; border-radius: 18px;
  background: linear-gradient(160deg, #3cb0e8 0%, #1c7fc2 100%);
  color: #fff;
  box-shadow: 0 14px 26px -12px rgba(28,140,210,.6), inset 0 1px 0 rgba(255,255,255,.4);
  margin-bottom: 1rem;
}
.sysstep__ic svg { width: 30px; height: 30px; stroke-width: 2; }

/* stronger blue connectors */
.sysconn { color: #2f9fd6; }
.sysconn svg { stroke-width: 2.4; }

/* restrained scroll sequence: steps fade up in turn, then connectors draw across */
.system[data-reveal] { opacity: 1; transform: none; }
.system .sysstep { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.system.is-visible .sysstep { opacity: 1; transform: none; }
.system .sysstep:nth-child(1) { transition-delay: .05s; }
.system .sysstep:nth-child(3) { transition-delay: .22s; }
.system .sysstep:nth-child(5) { transition-delay: .39s; }
.system.is-visible .sysconn svg line { animation: sysdraw .7s var(--ease) .3s forwards; }
.system.is-visible .sysconn svg path { animation: sysarrow .35s var(--ease) .9s forwards; }
.system.is-visible .sysconn:nth-child(4) svg line { animation-delay: .55s; }
.system.is-visible .sysconn:nth-child(4) svg path { animation-delay: 1.1s; }

/* ===== §3 Contact split — copy/form left, Montreal visual right (today's brief) ===== */
.contact-split { padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4rem)); padding-bottom: clamp(3rem, 6vw, 5rem); }
.contact-split__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.4rem, 4.5vw, 4rem); align-items: center; }
.contact-split__intro { max-width: 40ch; }
.contact-split__title { font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: 1.1; letter-spacing: -.02em; margin: 1.2rem 0 0; }
.contact-split__lead { margin-top: 1.4rem; margin-bottom: 0; max-width: 46ch; }
.contact-split__meta { display: flex; flex-wrap: wrap; gap: 1.4rem 2.6rem; margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.contact-split__meta .contact-info__item p { margin: .15rem 0 0; font-size: .98rem; }

.contact-split__visual { position: relative; border-radius: 22px; overflow: hidden; min-height: 480px; box-shadow: 0 30px 60px -30px rgba(12,55,79,.45); }
.contact-split__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-split__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,28,42,.62) 0%, rgba(8,28,42,.12) 34%, rgba(8,28,42,.22) 60%, rgba(8,28,42,.74) 100%); }
.contact-split__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.6rem, 3vw, 2.5rem); }
.contact-split__labels { display: flex; flex-direction: column; gap: .4rem; }
.contact-split__city { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1; letter-spacing: -.02em; color: #fff; }
.contact-split__region { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: #bfe6f6; }
.contact-split__copy { color: rgba(255,255,255,.94); font-size: 1.02rem; line-height: 1.55; max-width: 40ch; text-shadow: 0 1px 14px rgba(0,0,0,.45); }

@media (max-width: 860px) {
  .contact-split__grid { grid-template-columns: 1fr; gap: clamp(1.8rem, 5vw, 2.4rem); align-items: start; }
  .contact-split__intro { max-width: none; }
}

/* Contact split labels: guaranteed legibility over the photo */
.contact-split__city { text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.contact-split__region { text-shadow: 0 1px 12px rgba(0,0,0,.55); }

/* ===== Contact gallery: editorial collage (Arolax-style) + dark contact tile ===== */
.ccollage { display: flex; gap: 14px; align-items: flex-end; }
.ccollage__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ccollage__col--a { flex: 0 0 35%; }
.ccollage__col--b { flex: 1 1 auto; }
.ccollage__cell { margin: 0; border-radius: 16px; overflow: hidden; position: relative; box-shadow: 0 22px 44px -26px rgba(12,55,79,.45); }
.ccollage__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccollage__cell--portrait { aspect-ratio: 4 / 5; }
.ccollage__cell--wide { aspect-ratio: 3 / 2; }
.ccollage__cell--wide16 { aspect-ratio: 16 / 9; }
.ccollage__tile { aspect-ratio: auto; background: linear-gradient(150deg, #6EC1E4 0%, #14618c 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.1rem, 2.1vw, 1.5rem); }
.ccollage__tile-mark { position: absolute; top: clamp(.9rem,1.8vw,1.2rem); right: clamp(.9rem,1.8vw,1.2rem); width: 28px; height: 28px; color: #fff; opacity: .34; }
.ccollage__city { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.45rem, 2.3vw, 2.1rem); color: #fff; line-height: 1; letter-spacing: -.02em; }
.ccollage__region { display: block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #e3f3fb; margin-top: .5rem; }

/* ===== Form section (form + contact info) ===== */
.formsec { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.formsec__grid { display: grid; grid-template-columns: 1.1fr 0.72fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch; }
.formsec__title { font-size: var(--fs-title); line-height: 1.08; letter-spacing: -.01em; margin: 1.1rem 0 1.9rem; max-width: 18ch; }
.formsec__aside { background: linear-gradient(165deg, #e9f5fc 0%, #d3eaf7 100%); border: 1px solid rgba(110,193,228,.4); border-radius: 22px; padding: clamp(1.7rem, 3vw, 2.5rem); display: flex; }
.formsec__aside .contact-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(1.5rem, 3.2vw, 2.2rem); }
.formsec__aside .contact-info__item a:hover { color: #15597f; }

@media (max-width: 860px) {
  .ccollage__col--a { flex-basis: 42%; }
  .ccollage__tile { aspect-ratio: auto; padding: clamp(.95rem, 3.5vw, 1.3rem); }
  .ccollage__city { font-size: clamp(1.15rem, 4.8vw, 1.55rem); }
  .ccollage__region { font-size: .66rem; letter-spacing: .1em; }
  .formsec__grid { grid-template-columns: 1fr; gap: clamp(1.8rem, 6vw, 2.6rem); }
  .formsec__title { margin-bottom: 1.5rem; }
}

/* ===== WHO WE HELP — split variant (homepage comparison) ===== */
.helpband { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 8vw, 6rem);
  background:
    radial-gradient(85% 130% at 8% -12%, rgba(110,193,228,.26), transparent 55%),
    linear-gradient(122deg, #0a2742 0%, #103a5c 58%, #0c3350 100%);
  color: #eaf6fc; }
.helpband .container { position: relative; z-index: 1; }
.helpband__inner { max-width: 56%; }
.helpband .eyebrow { color: #8fd0ee; margin-bottom: 1.1rem; }
.helpband .eyebrow::before { background: #8fd0ee; }
.helpband h2 { font-size: clamp(2.1rem, 4vw, 3.5rem); color: #fff; line-height: 1.05; letter-spacing: -.02em; margin: 0; }
.helpband__accent { color: #6EC1E4; }
.helpband__lead { max-width: 40ch; margin: 1.3rem 0 0; color: rgba(234,246,252,.82); font-size: var(--fs-body); line-height: 1.6; }
.helpband__cats { list-style: none; padding: 0; margin: clamp(1.8rem, 3.5vw, 2.4rem) 0 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.helpband__cats li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .65rem; padding: clamp(.85rem, 1.3vw, 1.1rem) clamp(.7rem, 1vw, .9rem); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(255,255,255,.05); transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.helpband__cats li:hover { border-color: rgba(110,193,228,.65); background: rgba(110,193,228,.13); transform: translateY(-3px); }
.helpband__ic { color: #cfeaf8; }
.helpband__ic svg { width: 25px; height: 25px; }
.helpband__cats li > span:last-child { font-family: var(--font-mono); font-size: .72rem; line-height: 1.3; color: rgba(234,246,252,.92); letter-spacing: .005em; white-space: nowrap; }
.helpband__media { position: absolute; top: 0; right: 0; bottom: 0; width: 40%; z-index: 0; }
.helpband__media img, .helpband__media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.helpband__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0a2742 0%, rgba(10,39,66,.55) 24%, transparent 52%); }

@media (max-width: 1180px) {
  .helpband__inner { max-width: none; }
  .helpband__media { position: static; width: auto; height: clamp(220px, 46vw, 340px); margin: clamp(1.8rem, 5vw, 2.4rem) var(--gutter) 0; border-radius: 18px; overflow: hidden; }
  .helpband__media::after { background: none; }
}
@media (max-width: 680px) {
  .helpband__cats li { flex: 1 1 28%; min-width: 92px; }
  .helpband__cats li > span:last-child { white-space: normal; }
}

/* ===== WHO WE HELP — baby-blue human variant (Version B) ===== */
.humanband { padding-block: clamp(3.5rem, 8vw, 6rem);
  background:
    radial-gradient(120% 130% at 88% 10%, rgba(255,255,255,.38), transparent 46%),
    linear-gradient(135deg, #6EC1E4 0%, #7fcae8 52%, #5cb6df 100%);
  color: #08233d; }
.humanband__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.humanband__copy { max-width: none; }
.humanband .eyebrow { color: #0d3a57; margin-bottom: 1.1rem; }
.humanband .eyebrow::before { background: #0d3a57; }
.humanband__title { font-size: clamp(2.1rem, 4vw, 3.5rem); line-height: 1.06; letter-spacing: -.02em; margin: 0; color: #08233d; }
.humanband__accent { color: #08233d; background-image: linear-gradient(transparent 62%, rgba(255,255,255,.7) 62%); padding: 0 .05em; }
.humanband__lead { margin: 1.3rem 0 0; max-width: 42ch; color: rgba(8,35,61,.82); font-size: var(--fs-body); line-height: 1.6; }
.humanband__media { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 34px 64px -28px rgba(8,35,61,.55); }
.humanband__video { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 860px) {
  .humanband__grid { grid-template-columns: 1fr; gap: clamp(1.8rem, 6vw, 2.6rem); }
  .humanband__copy { max-width: none; }
  .humanband__media { aspect-ratio: 16 / 10; }
}

/* ===== subtle blue depth on the dark services section ===== */
#services {
  background-color: #23201a;
  background-image:
    radial-gradient(135% 95% at 90% -5%, rgba(110,193,228,.07), transparent 58%),
    radial-gradient(120% 85% at -5% 105%, rgba(110,193,228,.05), transparent 58%);
  background-repeat: no-repeat;
}

/* ===== client logos — bigger, airier, uniform pale-grey (6 logos) ===== */
.clients .clients__row { gap: clamp(2.2rem, 5vw, 5rem); }
.clients .client-logo { flex: 0 0 auto; }
.clients .client-logo img {
  max-height: clamp(50px, 5.4vw, 78px);
  width: auto;
  filter: grayscale(1) brightness(0) invert(0.64);
  opacity: .9;
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.clients .client-logo:hover img { filter: grayscale(1) brightness(0) invert(0.30); opacity: 1; transform: translateY(-2px); }
@media (max-width: 640px) {
  .clients .clients__row { gap: 1.6rem 2.2rem; }
  .clients .client-logo img { max-height: 46px; }
}


/* =========================================================
   TODAY — homepage updates (end-of-file: wins the cascade)
   ========================================================= */

/* 1) More breathing room above/below the white "How we're different" band */
.section--white{
  padding-top: clamp(5rem, 9vw, 8.5rem);
  padding-bottom: clamp(5.5rem, 9.5vw, 9rem);
}

/* 2) Services (dark) section: drop the obvious blue orbs,
      keep only a refined whisper of depth */
#services{
  background-color:#23201a;
  background-image:
    radial-gradient(115% 80% at 50% -28%, rgba(110,193,228,.045), transparent 62%);
  background-repeat:no-repeat;
}

/* 3) Client logo strip: one line, evenly spaced, uniform pale grey, right-sized */
.clients .clients__row{
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:center;
  gap:clamp(.7rem, 2.4vw, 2.4rem);
  width:100%;
}
.clients .client-logo{
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.clients .client-logo img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:clamp(26px, 3.4vw, 42px);
  object-fit:contain;
  filter:grayscale(1) brightness(0) invert(.72);
  opacity:.85;
  transition:filter .25s ease, opacity .25s ease, transform .25s ease;
}
.clients .client-logo:hover img{
  filter:grayscale(1) brightness(0) invert(.45);
  opacity:1;
  transform:translateY(-2px);
}
@media (max-width:640px){
  .clients .clients__row{ gap:.55rem; }
  .clients .client-logo img{ max-height:clamp(16px, 4.6vw, 24px); }
}


/* =========================================================
   TODAY — Website Design & Development page
   ========================================================= */

/* 1) Hero: match the Google Ads visual's size & presence; nudge slightly left */
.hero--web .hero__visual { max-width: 472px; }
.hero--web .browser__view { padding: 1rem 1.15rem 1.35rem; gap: .95rem; }
.hero--web .bw-hero { gap: .95rem; }
.hero--web .bw-shot { height: 122px; }
.hero--web .bw-row span { height: 40px; }
@media (min-width: 981px){
  .hero--web .hero__visual { justify-self: end; transform: translateX(-1.1rem); }
}

/* 2a) "What's included": lighter, premium off-white section (was full dark) */
.svc-light{
  background:
    radial-gradient(120% 90% at 0% 0%, var(--accent-soft), transparent 46%),
    var(--paper);
}
.svc-light .eyebrow{ color:#1a6e93; }
.svc-light .eyebrow::before{ background:#1a6e93; }
.svc-light h2{ color:var(--ink); }
.svc-light .card{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 22px 44px -34px rgba(22,20,15,.20);
}
.svc-light .card:hover{
  transform:translateY(-4px);
  border-color:var(--accent);
  box-shadow:0 30px 56px -30px rgba(110,193,228,.42);
}
.svc-light .card h3{ color:var(--ink); }
.svc-light .card p{ color:var(--muted); }
.svc-light .card__icon{
  width:56px; height:56px; border-radius:16px;
  background:var(--accent-soft);
  border:1px solid rgba(110,193,228,.30);
  display:grid; place-items:center;
  color:var(--accent);
  margin-bottom:1.1rem;
}
.svc-light .card__icon svg{ width:28px; height:28px; }

/* 2b) Final CTA merges seamlessly into the dark footer (same token, no seam) */
.cta--merge{
  background:var(--carbon);
  padding-bottom:clamp(2.5rem, 5vw, 4rem);
}

/* 3) Financing / ownership block: tighter, wider lines (one line on desktop) */
.pkgs--web{ padding-bottom:clamp(2rem, 4vw, 3rem); }
.pkg-foot{ margin-top:clamp(1.4rem, 2.6vw, 2rem); gap:.4rem; }
.pkg-foot__own, .pkg-foot__meta{ max-width:min(100%, 60rem); }


/* =========================================================
   TODAY — What We Do page: "Why Aloweb" visual journey
   ========================================================= */
.whysec__lead{ max-width:60ch; margin-inline:auto; }
.journey{ display:flex; align-items:stretch; justify-content:center; gap:clamp(.7rem,1.6vw,1.3rem); margin-top:clamp(2.4rem,5vw,3.6rem); }
.jcard{ flex:1 1 0; min-width:0; background:#fff; border:1px solid var(--line); border-radius:20px; padding:clamp(1.2rem,1.9vw,1.7rem); display:flex; flex-direction:column; box-shadow:0 26px 52px -38px rgba(22,20,15,.22); transition:transform .35s var(--ease,ease), border-color .35s ease, box-shadow .35s ease; }
.jcard:hover{ transform:translateY(-5px); border-color:var(--accent); box-shadow:0 34px 64px -32px rgba(110,193,228,.4); }
.jcard h3{ font-size:clamp(1.08rem,1.5vw,1.3rem); margin:0 0 .35rem; letter-spacing:-.01em; }
.jcard p{ color:var(--muted); font-size:.94rem; line-height:1.55; margin:0; }
.jcard__viz{ position:relative; height:152px; border-radius:14px; background:linear-gradient(180deg,#fff,var(--paper)); border:1px solid var(--line); overflow:hidden; display:grid; place-items:center; padding:14px; margin-bottom:1.15rem; }
.jvz{ width:100%; }
.jarrow{ align-self:center; color:var(--accent); flex:0 0 auto; opacity:.9; }
.jarrow svg{ width:24px; height:24px; }

/* get found */
.jvz--find{ display:flex; flex-direction:column; gap:.45rem; }
.jsearch{ display:flex; align-items:center; gap:.45rem; background:#fff; border:1px solid var(--line); border-radius:999px; padding:.42rem .7rem; box-shadow:0 8px 16px -12px rgba(22,20,15,.2); }
.jsearch__ic{ color:var(--muted); display:grid; place-items:center; flex:0 0 auto; }
.jsearch__ic svg{ width:14px; height:14px; }
.jsearch__q{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink); }
.jres{ display:grid; gap:.32rem; }
.jres__row{ display:flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--line); border-radius:9px; padding:.38rem .5rem; }
.jres__row--top{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.jres__pin{ color:var(--accent); display:grid; place-items:center; flex:0 0 auto; }
.jres__pin svg{ width:13px; height:13px; }
.jres__dot{ width:13px; height:13px; border-radius:50%; background:#e2e6ea; flex:0 0 auto; }
.jres__bars{ display:grid; gap:4px; flex:1; }
.jres__bars i{ height:4px; border-radius:2px; background:#dfe3e8; }
.jres__bars i:first-child{ width:72%; background:#c9ced4; }
.jres__row--top .jres__bars i:first-child{ background:var(--accent); }
.jres__tag{ font-family:var(--font-mono); font-size:.54rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#1a6e93; background:var(--accent-soft); padding:.2em .45em; border-radius:5px; flex:0 0 auto; }

/* get chosen */
.jvz--pick{ display:grid; gap:.42rem; }
.jopt{ display:flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--line); border-radius:9px; padding:.42rem .55rem; opacity:.5; }
.jopt--on{ opacity:1; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.jopt__logo{ width:17px; height:17px; border-radius:5px; background:#e6dfd2; flex:0 0 auto; }
.jopt--on .jopt__logo{ background:var(--accent); }
.jopt__lines{ display:grid; gap:4px; flex:1; }
.jopt__lines i{ height:4px; border-radius:2px; background:#dfe3e8; }
.jopt__lines i:first-child{ width:58%; }
.jopt--on .jopt__lines i:first-child{ background:var(--ink); }
.jopt__check{ color:var(--accent); display:grid; place-items:center; flex:0 0 auto; }
.jopt__check svg{ width:15px; height:15px; }

/* get contacted */
.jvz--contact{ display:grid; place-items:center; }
.jcontact{ position:relative; display:flex; align-items:center; gap:.6rem; width:100%; background:#fff; border:1px solid var(--line); border-radius:12px; padding:.65rem .75rem; box-shadow:0 12px 24px -16px rgba(22,20,15,.24); }
.jcontact__ic{ width:32px; height:32px; border-radius:9px; background:var(--accent-soft); color:#1a6e93; display:grid; place-items:center; flex:0 0 auto; }
.jcontact__ic svg{ width:17px; height:17px; }
.jcontact__meta{ display:grid; gap:5px; flex:1; }
.jcontact__t{ font-size:.78rem; font-weight:700; color:var(--ink); }
.jcontact__sub{ display:grid; gap:4px; }
.jcontact__sub i{ height:4px; border-radius:2px; background:#dfe3e8; }
.jcontact__sub i:first-child{ width:62%; }
.jping{ position:absolute; top:-5px; right:-5px; width:11px; height:11px; border-radius:50%; background:var(--accent); }

/* restrained motion (off for reduced-motion) */
@media (prefers-reduced-motion: no-preference){
  .jres__row--top{ animation:jbreathe 3.4s ease-in-out infinite; }
  .jopt--on{ animation:jbreathe 3.4s ease-in-out infinite; }
  .jping::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--accent); animation:jping 2.6s ease-out infinite; }
}
@keyframes jbreathe{ 0%,100%{ box-shadow:0 0 0 3px var(--accent-soft); } 50%{ box-shadow:0 0 0 5px rgba(110,193,228,.28); } }
@keyframes jping{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(3); opacity:0; } }

@media (max-width:820px){
  .journey{ flex-direction:column; align-items:stretch; gap:.4rem; }
  .jarrow{ transform:rotate(90deg); margin:.1rem 0; }
}


/* =========================================================
   TODAY — Website Design "What's included": more blue
   ========================================================= */
.svc-light{
  background:
    radial-gradient(85% 75% at 2% -6%, rgba(110,193,228,.30), transparent 52%),
    radial-gradient(70% 80% at 100% 108%, rgba(110,193,228,.16), transparent 55%),
    linear-gradient(180deg, #eaf5fc, var(--paper) 60%);
}
.svc-light .card{
  background: linear-gradient(180deg, #ffffff, #eaf4fb);
  border-color: #cbe4f3;
  box-shadow: 0 24px 48px -34px rgba(26,110,147,.26);
}
.svc-light .card:hover{
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 32px 60px -28px rgba(110,193,228,.5);
}
.svc-light .card__icon{
  background: linear-gradient(140deg, #7cc9ea, #147ba6);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 16px -10px rgba(20,123,166,.5);
}


/* =========================================================
   TODAY — Google Ads "Managed end to end": richer, punchier dark (not faded)
   ========================================================= */
.ga-managed{
  background: linear-gradient(180deg, #262329 0%, #1a191d 74%);
}
.ga-managed .eyebrow{ color:#b7d7e6; }
.ga-managed .eyebrow::before{ background:var(--accent); }
.ga-managed .card{
  background:#302d34;
  border:1px solid rgba(255,255,255,.09);
  box-shadow: 0 26px 52px -30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
}
.ga-managed .card:hover{
  transform:translateY(-5px);
  border-color:rgba(110,193,228,.5);
  box-shadow: 0 40px 68px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(110,193,228,.28), inset 0 1px 0 rgba(255,255,255,.16);
}
.ga-managed .card h3{ color:#fff; }
.ga-managed .card p{ color:#c8cfd5; }
.ga-managed .card__icon{
  background: linear-gradient(150deg, #6EC1E4, #3f9ec6);
  border:1px solid transparent;
  color:#0e2c3b;
  box-shadow: 0 10px 22px -10px rgba(110,193,228,.55);
}


/* =========================================================
   TODAY — Online Reputation page (bring in line + card/list + white CTA)
   ========================================================= */

/* hero reputation mockup */
.repcard{ position:relative; z-index:1; width:100%; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 44px 80px -42px rgba(22,20,15,.34); padding:1.4rem 1.5rem; animation:floaty 7s ease-in-out infinite; }
.repcard__top{ display:flex; align-items:center; gap:.8rem; }
.repcard__logo{ width:40px; height:40px; border-radius:12px; background:linear-gradient(150deg,#6EC1E4,#3f9ec6); flex:0 0 auto; }
.repcard__id{ display:grid; gap:3px; flex:1; min-width:0; }
.repcard__name{ font-weight:700; color:var(--ink); font-size:1rem; letter-spacing:-.01em; }
.repcard__cat{ font-size:.78rem; color:var(--muted); }
.repcard__badge{ display:inline-flex; align-items:center; gap:.3rem; font-size:.66rem; font-weight:700; letter-spacing:.02em; color:#1a6e93; background:var(--accent-soft); padding:.32em .6em; border-radius:999px; flex:0 0 auto; }
.repcard__badge svg{ width:12px; height:12px; }
.repcard__nap{ display:grid; gap:.6rem; margin:1.1rem 0; padding:1rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.repcard__row{ display:flex; align-items:center; gap:.6rem; }
.repcard__ic{ color:#1a6e93; display:grid; place-items:center; flex:0 0 auto; }
.repcard__ic svg{ width:15px; height:15px; }
.repcard__bar{ height:8px; border-radius:4px; background:#e9edf1; width:78%; }
.repcard__bar--s{ width:52%; }
.repcard__sync{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.repcard__synclabel{ font-family:var(--font-mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.repcard__chips{ display:inline-flex; gap:.4rem; }
.repchip{ width:28px; height:28px; border-radius:8px; background:var(--accent-soft); border:1px solid rgba(110,193,228,.28); color:#1a6e93; display:grid; place-items:center; }
.repchip svg{ width:15px; height:15px; }

/* platforms card / list */
.platsec{ background:linear-gradient(180deg,#f1f8fc,var(--paper) 55%); }
.platcard{ max-width:720px; margin:clamp(2rem,4vw,3rem) auto 0; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 34px 66px -40px rgba(22,20,15,.22); padding:.55rem; }
.platrow{ display:flex; align-items:center; gap:1rem; padding:.95rem 1rem; border-radius:14px; transition:background .2s ease; }
.platrow + .platrow{ border-top:1px solid var(--line); }
.platrow:hover{ background:var(--accent-soft); }
.platrow__ic{ width:42px; height:42px; border-radius:12px; background:var(--accent-soft); border:1px solid rgba(110,193,228,.28); color:#1a6e93; display:grid; place-items:center; flex:0 0 auto; }
.platrow__ic svg{ width:20px; height:20px; }
.platrow__meta{ display:grid; gap:2px; flex:1; min-width:0; }
.platrow__name{ font-weight:700; color:var(--ink); font-size:1rem; letter-spacing:-.01em; }
.platrow__sub{ font-size:.82rem; color:var(--muted); }
.platrow__chip{ display:inline-flex; align-items:center; gap:.35rem; font-family:var(--font-mono); font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#1a6e93; background:var(--accent-soft); padding:.42em .72em; border-radius:999px; flex:0 0 auto; }
.platrow__chip svg{ width:13px; height:13px; }
.platrow__chip--soft{ color:var(--muted); background:var(--paper-2); }
.platrow--more .platrow__ic{ background:var(--paper-2); border-color:var(--line); color:var(--muted); }
@media (max-width:560px){ .platrow__sub{ display:none; } .platrow{ gap:.7rem; padding:.8rem .55rem; } .platrow__chip{ font-size:.56rem; padding:.4em .55em; } .platrow__ic{ width:38px; height:38px; } }

/* white CTA (light) */
.cta--light{ background:radial-gradient(90% 120% at 50% -20%, rgba(110,193,228,.14), transparent 60%), var(--paper); }
.cta--light .eyebrow{ color:#1c7fb8; }
.cta--light .eyebrow::before{ background:#1c7fb8; }
.cta--light .cta__email{ color:var(--muted); }
.cta--light .cta__email a{ color:#1c7fb8; font-weight:600; }


/* =========================================================
   TODAY — About page (office sweep removed + light 4-card rebuild)
   ========================================================= */
/* 1) kill the glossy reflective sweep for good (element also removed) */
.editorial__sweep{ display:none !important; }

/* 2) "What we do" 4-card section: light premium (was full dark), one blue feature card */
.svc4-light{
  background:
    radial-gradient(80% 70% at 3% 0%, rgba(110,193,228,.20), transparent 52%),
    radial-gradient(70% 80% at 100% 100%, rgba(110,193,228,.12), transparent 55%),
    linear-gradient(180deg, #eaf5fc, var(--paper) 55%);
}
.svc4-light h2{ color:var(--ink); }
.svc4-light .lead{ color:var(--muted); }
.svc4-light .eyebrow{ color:#1a6e93; }
.svc4-light .eyebrow::before{ background:#1a6e93; }
.svc4-light .card{
  background: linear-gradient(180deg,#ffffff,#eaf4fb);
  border:1px solid #cbe4f3;
  box-shadow:0 24px 48px -34px rgba(26,110,147,.26);
}
.svc4-light .card:hover{
  transform:translateY(-5px);
  border-color:var(--accent);
  box-shadow:0 34px 62px -30px rgba(110,193,228,.5);
}
.svc4-light .card h3{ color:var(--ink); }
.svc4-light .card p{ color:var(--muted); }
.svc4-light .card__link{ color:#1a6e93; font-weight:600; }
.svc4-light .card__link .arrow{ color:#1a6e93; }
.svc4-light .card__icon{
  width:56px; height:56px; border-radius:16px;
  background: linear-gradient(140deg,#7cc9ea,#147ba6);
  border:1px solid transparent; color:#fff;
  display:grid; place-items:center; margin-bottom:1.1rem;
  box-shadow:0 8px 16px -10px rgba(20,123,166,.5);
}
.svc4-light .card__icon svg{ width:28px; height:28px; }
/* one stronger blue feature card (first) for hierarchy */
.svc4-light .card:first-child{
  background: linear-gradient(155deg,#6EC1E4,#54b2da);
  border-color:transparent;
  box-shadow:0 30px 60px -28px rgba(74,168,208,.55);
}
.svc4-light .card:first-child h3,
.svc4-light .card:first-child .card__link{ color:#0a2a3b; }
.svc4-light .card:first-child p{ color:rgba(10,42,59,.85); }
.svc4-light .card:first-child .card__link .arrow{ color:#0a2a3b; }
.svc4-light .card:first-child .card__icon{
  background:rgba(255,255,255,.92); color:#1a6e93;
  box-shadow:0 8px 16px -10px rgba(0,0,0,.22);
}


/* =========================================================
   TODAY — Contact page + global QA + homepage logos
   ========================================================= */

/* Footer tagline: muted secondary, matching the copyright line (not brighter/larger) */
.footer__brand p{ color: var(--muted-dark); }

/* Homepage client logos: less pale (darker grey) + ~20% larger, +10% again */
.clients .client-logo img{
  filter: grayscale(1) brightness(0) invert(.5);
  opacity: .92;
  max-height: clamp(34px, 4.5vw, 55px);
}
.clients .client-logo:hover img{ filter: grayscale(1) brightness(0) invert(.28); opacity: 1; }
@media (max-width:640px){ .clients .client-logo img{ max-height: clamp(21px, 6.1vw, 32px); } }

/* Contact hero: right-size the heading + more breathing room */
.contact-split__title{ font-size: clamp(1.7rem, 2.9vw, 2.6rem); }
@media (min-width: 861px){
  .contact-split__grid{ grid-template-columns: 1fr 1.04fr; gap: clamp(3rem, 5.5vw, 5.5rem); }
}
.ccollage{ gap: 18px; }
.ccollage__col{ gap: 18px; }

/* Contact info panel: small consistent icons */
.formsec__aside .contact-info__item{ display:flex; gap:.9rem; align-items:flex-start; }
.contact-info__ic{ width:40px; height:40px; border-radius:12px; background:var(--accent-deep); color:#fff; display:grid; place-items:center; flex:0 0 auto; box-shadow:0 6px 15px -6px rgba(20,123,166,.5); }
.contact-info__ic svg{ width:20px; height:20px; }
.contact-info__body{ flex:1; min-width:0; }


/* TODAY — homepage "How we're different": remove the divider lines above the 3 features */
.section--white .feature{ border-top: none; padding-top: clamp(.4rem, 1.2vw, .9rem); }


/* TODAY — About: render the testimonial quote mark in a font that has U+201C (was tofu) */
.rcard__mark::before{ font-family: Georgia, "Times New Roman", serif; }


/* TODAY — About fixes (round 2) */
/* remove the decorative quote mark (kept rendering as a broken glyph) */
.rcard__mark{ display:none !important; }
.rcard__quote{ margin-top:0; }
/* office photo: constrain to native-res width in a crisp, premium rounded frame */
.editorial__media{ max-width:min(1240px, calc(100% - 3rem)); margin-inline:auto; border-radius:22px; height:clamp(280px, 34vw, 470px); }


/* TODAY — About "Where the work happens.": no underline, correct light blue */
.studio__word{ color:#6EC1E4; }
.studio__word::after{ display:none !important; }

/* =========================================================
   Cookie consent banner (Quebec Law 25)  — dark, explicit
   colours so it renders correctly in iOS dark mode too
   ========================================================= */
.cc-banner {
  position: fixed; z-index: 9999; left: 50%; bottom: clamp(.9rem, 2vw, 1.4rem);
  transform: translateX(-50%) translateY(150%);
  width: min(680px, calc(100% - 2.2rem));
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(.85rem, 2vw, 1.5rem);
  padding: clamp(.95rem, 1.8vw, 1.15rem) clamp(1.05rem, 2vw, 1.4rem);
  background: #16140f; color: #f3efe7;
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.55);
  opacity: 0; transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.cc-banner.is-open { transform: translateX(-50%) translateY(0); opacity: 1; }
.cc-banner__text { margin: 0; flex: 1 1 260px; font-size: .88rem; line-height: 1.55; color: rgba(243,239,231,.9); }
.cc-banner__link { color: #6EC1E4; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.cc-banner__link:hover { color: #8ad0f0; }
.cc-banner__actions { display: flex; gap: .55rem; flex: 0 0 auto; margin-left: auto; }
.cc-btn {
  font-family: inherit; font-size: .84rem; font-weight: 600; letter-spacing: .01em;
  padding: .62rem 1.15rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.cc-btn:hover { transform: translateY(-1px); }
.cc-btn--accept { background: #6EC1E4; color: #0c2233; }
.cc-btn--accept:hover { background: #8ad0f0; }
.cc-btn--ghost { background: transparent; color: #f3efe7; border-color: rgba(255,255,255,.35); }
.cc-btn--ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); }

/* footer "Cookie preferences" reopener */
.cc-prefs {
  display: inline; margin: 0 0 0 .85rem; padding: 0; background: none; border: 0;
  color: var(--muted-dark); font-family: var(--font-mono); font-size: var(--fs-small);
  letter-spacing: 0.03em; text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; opacity: .85;
}
.cc-prefs:hover { opacity: 1; color: var(--accent); }
@media (max-width: 640px) { .cc-prefs { margin-left: 0; } }

@media (max-width: 520px) {
  .cc-banner { gap: .8rem; }
  .cc-banner__actions { width: 100%; margin-left: 0; }
  .cc-btn { flex: 1 1 auto; }
}

/* =========================================================
   Privacy / legal page readability
   ========================================================= */
.legal { background: var(--paper); }
.legal__head { padding: clamp(3.4rem, 8vw, 5.5rem) 0 clamp(1.4rem, 3vw, 2rem); }
.legal__eyebrow { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 .7rem; }
.legal__head h1 { margin: 0 0 .6rem; }
.legal__updated { color: var(--muted, #6b6357); font-size: .9rem; margin: 0; }
.legal__body { padding: 0 0 clamp(3.5rem, 8vw, 6rem); }
.legal__body .container { max-width: 760px; }
.legal__body h2 { margin: 2.4rem 0 .7rem; font-size: clamp(1.15rem, 2.4vw, 1.45rem); }
.legal__body h3 { margin: 1.5rem 0 .4rem; font-size: 1.02rem; }
.legal__body p, .legal__body li { color: var(--body, #3a352e); line-height: 1.7; font-size: 1rem; }
.legal__body p { margin: 0 0 1rem; }
.legal__body ul { margin: 0 0 1.15rem; padding-left: 1.2rem; }
.legal__body li { margin: 0 0 .45rem; }
.legal__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal__body strong { color: var(--ink, #16140f); }

/* =========================================================
   Booking / quote modal — compact, minimal
   ========================================================= */
.bk-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 1.75rem);
  background: rgba(16, 14, 10, 0.5);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .22s ease;
}
.bk-overlay.is-open { opacity: 1; }
.bk-overlay[hidden] { display: none; }
.bk-modal {
  position: relative; width: 100%; max-width: 416px;
  background: var(--paper, #f7f3ec); color: var(--ink, #16140f);
  border: 1px solid rgba(0,0,0,.06); border-radius: 20px;
  box-shadow: 0 28px 68px -28px rgba(0,0,0,.45);
  padding: clamp(1.45rem, 3.5vw, 1.85rem);
  transform: translateY(12px) scale(.99);
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto; overflow-x: hidden;
}
.bk-modal::before {
  content: ""; position: absolute; top: -70px; right: -50px;
  width: 190px; height: 190px; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(110,193,228,.4), rgba(110,193,228,0) 68%);
  border-radius: 50%;
  animation: orbpulse 9s ease-in-out infinite;
}
.bk-body, .bk-success { position: relative; z-index: 1; }
.bk-overlay.is-open .bk-modal { transform: translateY(0) scale(1); }
.bk-close {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; z-index: 2;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.05); color: var(--ink, #16140f);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.bk-close:hover { background: rgba(0,0,0,.1); transform: rotate(90deg); }
.bk-eyebrow { margin: 0 0 .4rem; font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; color: var(--accent, #6EC1E4); text-align: center; }
.bk-title { margin: 0 0 .35rem; font-size: clamp(1.22rem, 3vw, 1.45rem); line-height: 1.15; text-align: center; }
.bk-sub { margin: 0 0 .9rem; color: #6b6357; font-size: .875rem; line-height: 1.45; text-align: center; }
.bk-perks { list-style: none; margin: 0 0 1.05rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .85rem; }
.bk-perks li { display: inline-flex; align-items: center; gap: .34rem; font-size: .775rem; font-weight: 600; color: var(--ink, #16140f); }
.bk-perks svg { width: 13px; height: 13px; color: var(--accent, #6EC1E4); flex: 0 0 auto; }
.bk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.bk-field { display: flex; flex-direction: column; gap: .26rem; margin-bottom: .6rem; }
.bk-field--full { margin-bottom: .85rem; }
.bk-field > span { font-size: .76rem; font-weight: 600; color: var(--ink, #16140f); }
.bk-field > span em { font-style: normal; font-weight: 500; color: var(--muted-dark, #6b6357); }
.bk-field input, .bk-field select, .bk-field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink, #16140f);
  background: #fff; border: 1px solid rgba(0,0,0,.14); border-radius: 10px;
  padding: .56rem .72rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.bk-field textarea { resize: vertical; min-height: 58px; }
.bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus {
  outline: none; border-color: var(--accent, #6EC1E4); box-shadow: 0 0 0 3px rgba(110,193,228,.2);
}
.bk-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; font-family: inherit; font-size: .92rem; font-weight: 700;
  padding: .72rem 1.1rem; border: 0; border-radius: 11px; cursor: pointer;
  background: var(--accent, #6EC1E4); color: #fff;
  transition: background .15s ease, transform .15s ease;
}
.bk-submit:hover { background: #8ad0f0; transform: translateY(-1px); }
.bk-submit:disabled { opacity: .7; cursor: default; transform: none; }
.bk-submit--ghost { background: transparent; color: var(--ink, #16140f); border: 1px solid rgba(0,0,0,.18); margin-top: .25rem; }
.bk-submit--ghost:hover { background: rgba(0,0,0,.05); }
.bk-fine { margin: .6rem 0 0; text-align: center; font-size: .73rem; color: var(--muted-dark, #6b6357); }
.bk-fine--tel { margin-top: .3rem; }
.bk-fine--tel a { color: var(--accent, #6EC1E4); font-weight: 700; text-decoration: none; }
.bk-success { text-align: center; padding: .6rem 0 .3rem; }
.bk-check { width: 46px; height: 46px; margin: 0 auto .85rem; display: grid; place-items: center; border-radius: 50%; background: rgba(110,193,228,.18); color: var(--accent, #6EC1E4); }
.bk-check svg { width: 22px; height: 22px; }
.bk-success h3 { margin: 0 0 .4rem; font-size: 1.18rem; }
.bk-success p { margin: 0 0 1.1rem; color: var(--muted-dark, #6b6357); line-height: 1.5; font-size: .9rem; }
.bk-success .bk-submit { width: auto; padding-left: 1.8rem; padding-right: 1.8rem; }
[data-booking] { cursor: pointer; }
@media (max-width: 430px) { .bk-grid { grid-template-columns: 1fr; } }

/* =========================================================
   Language switcher (EN / FR)
   ========================================================= */
.lang-switch {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600; letter-spacing: .05em;
  color: var(--ink); border: 1px solid rgba(0,0,0,.2); border-radius: 999px;
  padding: .34rem .68rem; text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.lang-switch:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 980px) { .nav-cta .lang-switch { display: none; } }
.lang-switch--mm { text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; opacity: .72; }
.lang-switch--mm:hover { opacity: 1; }
/* language selector matches the menu items exactly */
.mobile-menu a.lang-switch--mm {
  text-transform: none; letter-spacing: -0.02em;
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  padding: 0.8rem 0; border-bottom: 1px solid var(--line); opacity: 1;
}

/* ---- Client logos: static centered row on desktop, auto-sliding marquee on mobile ---- */
.clients .clients__row{ display: block; }            /* wrapper only; the track does the layout */
.clients__marq{                                      /* desktop: same centered logo grid as before */
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 1.2rem 1.3rem;
}
.clients__marq .client-logo--dup{ display: none; }   /* desktop: hide the duplicate loop set */
@keyframes clientscroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (max-width: 640px){
  .clients .clients__row{ overflow: hidden; }
  .clients .clients__marq{
    flex-wrap: nowrap; justify-content: flex-start; gap: 0;
    width: max-content;
    animation: clientscroll 22s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
  }
  .clients .clients__marq:active{ animation-play-state: paused; }
  .clients .clients__marq .client-logo--dup{ display: flex; }   /* show dups for the seamless loop */
  /* fixed-width slots keep the track a stable width even before the logo
     images load, so the slide runs at a constant speed with no start-up jump */
  .clients .clients__marq .client-logo{
    flex: 0 0 auto;
    width: 33vw;
    display: flex; align-items: center; justify-content: center;
  }
  .clients .clients__marq .client-logo img{
    max-height: clamp(28px, 7.8vw, 34px);
    max-width: 76%;
    width: auto; height: auto;
  }
}

/* more breathing room on the homepage service cards on mobile */
@media (max-width: 640px) {
  #services .cards { gap: 1.4rem; }
  #services .card { padding: 2rem 1.65rem; }
}