/* ============================================================
   StackForge Tech / styles.css
   Palette from brand logo:
   --cyan  #08d8f3   primary accent (logo cyan)
   --steel #184867   steel navy (logo face)
   --mist  #77899c   grey-blue (logo side / secondary text)
   --ink   #060d1a   page void (matches hero video)
   --navy  #0a1628   panel navy
   --paper #fbfbfb   white (logo outline)
   Type: Inter for everything (headings, body, labels)
   ============================================================ */

:root {
  --cyan: #08d8f3;
  --cyan-dim: rgba(8, 216, 243, 0.12);
  --steel: #184867;
  --mist: #77899c;
  --ink: #060d1a;
  --navy: #0a1628;
  --navy-2: #0d1d33;
  --paper: #fbfbfb;
  --line: rgba(119, 137, 156, 0.22);
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nav-h: 76px;
}

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

html { scroll-behavior: auto; scroll-padding-top: var(--nav-h); }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

a { color: inherit; text-decoration: none; }

/* visible keyboard focus everywhere, without outlining mouse clicks */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible { border-radius: 0; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--cyan);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  transform: translateY(-64px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.skip-link:focus-visible {
  transform: none;
  opacity: 1;
  outline-offset: 2px;
}

.container { width: min(1160px, 92vw); margin-inline: auto; }

/* ---------- utility type ---------- */
.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-block;
}

h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}

.h-xl { font-size: clamp(2.4rem, 5.6vw, 4.4rem); letter-spacing: -0.028em; line-height: 1.06; }
.h-lg { font-size: clamp(1.9rem, 3.8vw, 2.9rem); letter-spacing: -0.022em; line-height: 1.12; }
.h-md { font-size: clamp(1.3rem, 2.2vw, 1.6rem); letter-spacing: -0.012em; font-weight: 600; }

.accent { color: var(--cyan); }
.muted { color: var(--mist); }

/* ---------- loader (first-load overlay) ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--ink);
  display: grid;
  place-items: center;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.loader-inner {
  display: grid;
  justify-items: center;
  gap: 18px;
}
.loader img {
  height: 72px;
  width: auto;
  animation: loader-pulse 1.7s ease-in-out infinite;
}
.loader-word {
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.loader-word .accent { color: var(--cyan); }
.loader-bar {
  width: 132px;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
  position: relative;
}
.loader-bar span {
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: 2px;
  background: var(--cyan);
  animation: loader-slide 1.2s ease-in-out infinite;
}
@keyframes loader-slide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}
@keyframes loader-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1); }
}
.loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 50;
  display: flex;
  align-items: center;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.nav.scrolled {
  background: rgba(6, 13, 26, 0.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
/* During the hero video scroll the nav is visible (logo + links show over the
   video) but stays transparent: its solid background appears only once the hero
   scroll is complete. main.js keeps .hero-lock on <html> until the scrub
   finishes; the static/reduced-motion fallbacks clear it, so there the
   background just follows normal scrolling. */
.hero-lock .nav.scrolled {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.nav-inner {
  width: min(1240px, 94vw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Brand lockup: cube icon + "StackForge | Tech", always on one crisp line.
   "Forge" stays cyan; a thin vertical divider separates the wordmark from a
   lighter, gently tracked "Tech". */
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 38px; width: auto; flex: none; }
.brand-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.brand-name .accent { color: var(--cyan); }
.brand-divider {
  flex: none;
  width: 1px;
  height: 1.05em;
  background: rgba(119, 137, 156, 0.5);
}
.brand-tech {
  font-size: 0.88em;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--mist);
  line-height: 1;
  /* the tracking adds space after the h; pull it back so the lockup ends cleanly */
  margin-right: -0.12em;
}
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  position: relative;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--mist);
  padding: 6px 0;
  transition: color 0.25s ease;
}
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--paper); }
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn):focus-visible::after { transform: scaleX(1); }
/* current page: the hover underline stays lit so the header shows where you are */
.nav-links a.is-current:not(.btn) { color: var(--paper); }
.nav-links a.is-current:not(.btn)::after { transform: scaleX(1); }
.nav-links .btn { padding: 10px 22px; font-size: 14px; }
/* keep the primary button's ink text; .nav-links a would otherwise recolor it */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover,
.nav-links a.btn-primary:focus-visible { color: var(--ink); }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-primary {
  background: var(--cyan);
  color: var(--ink);
  box-shadow: 0 0 0 rgba(8, 216, 243, 0);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(8, 216, 243, 0.22); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn-ghost {
  border-color: var(--line);
  color: var(--paper);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px; height: 44px;
  cursor: pointer;
  position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: var(--paper);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -7px; left: 0; right: 0; }
.nav-toggle span::after { top: 7px; left: 0; right: 0; }
.nav.open .nav-toggle span { background: transparent; }
.nav.open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- nav "Services" dropdown ----------
   Desktop: a hover/focus panel of the service pages under "Services".
   Mobile (inside the hamburger): the panel is rendered inline and always open. */
.nav-item.has-menu { position: relative; display: flex; align-items: center; }
.nav-menu-trigger { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.nav-menu-trigger .caret { transition: transform 0.25s ease; }
.nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 12px;
  min-width: 232px;
  display: grid;
  background: rgba(6, 13, 26, 0.98);
  border: 1px solid var(--line);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 60;
}
/* invisible bridge so hover survives the gap between trigger and panel */
.nav-item.has-menu::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
.nav-item.has-menu:hover .nav-menu,
.nav-item.has-menu:focus-within .nav-menu,
.nav-item.has-menu.open .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-item.has-menu:hover .caret,
.nav-item.has-menu:focus-within .caret,
.nav-item.has-menu.open .caret { transform: rotate(180deg); }
.nav-menu a { padding: 11px 12px !important; font-size: 14px; white-space: nowrap; }
.nav-menu a:not(.btn)::after { display: none; }

/* ---------- hero (pinned scroll-scrub) ---------- */
.hero {
  position: relative;
  height: 100vh;
  /* phones: 100vh includes the strip behind the browser's address bar, which
     hid the "scroll to explore" hint on first load. svh is the height that is
     actually visible; vh above stays as the fallback for older browsers. */
  height: 100svh;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
}
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(6, 13, 26, 0.85), transparent 55%),
    linear-gradient(180deg, rgba(6, 13, 26, 0.55) 0%, rgba(6, 13, 26, 0.08) 35%, rgba(6, 13, 26, 0.75) 100%);
}
.hero-beat {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 6vw;
  opacity: 0;
  pointer-events: none;
}
.hero-beat p {
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
  max-width: 26ch;
  color: var(--paper);
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(6, 13, 26, 0.75);
}

/* Desktop scrub: the story beats and final headline fade via CSS transitions,
   class-toggled by scroll progress in main.js. Because they are not scrubbed,
   each line responds the instant you reach it instead of trailing the scroll. */
.hero-scrub .hero-beat {
  transform: translateY(22px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.hero-scrub .hero-beat.is-visible { opacity: 1; transform: none; }
.hero-scrub .hero-final {
  visibility: hidden;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s ease;
}
.hero-scrub .hero-final.is-visible { opacity: 1; visibility: visible; transform: none; }
.hero-scrub .scroll-hint { transition: opacity 0.4s ease; }
.hero-scrub .scroll-hint.is-hidden { opacity: 0; pointer-events: none; }
.hero-final {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  text-align: center;
  padding: 0 6vw;
  opacity: 0;
  /* hidden until revealed so the invisible CTAs can't be clicked or tabbed to */
  visibility: hidden;
  pointer-events: none;
}
.hero-final .badge {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid rgba(8, 216, 243, 0.28);
  border-left: 3px solid var(--cyan);
  border-radius: 0;
  padding: 8px 18px;
  background: rgba(8, 216, 243, 0.06);
}
.hero-final h1 { max-width: 16ch; }
/* the hero story's closing line: styled like the scroll-story beats and held at
   the end of the scrub, in place of a headline + CTA block */
.hero-final-line {
  font-size: clamp(1.6rem, 3.6vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 22ch;
  color: var(--paper);
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(6, 13, 26, 0.75);
}
.hero-final-line .accent { color: var(--cyan); }
.hero-final .sub {
  max-width: 56ch;
  color: rgba(251, 251, 251, 0.78);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.7;
}
.hero-final .cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  pointer-events: auto;
}
/* Scroll affordance: mouse-wheel indicator on desktop, chevrons on mobile,
   plus a clear "Scroll to begin" label. Faded out by JS once scrolling starts. */
.scroll-hint {
  position: absolute;
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  margin-inline: auto;
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: hint-float 2.6s ease-in-out infinite;
}
.scroll-hint-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.85;
  text-shadow: 0 2px 18px rgba(6, 13, 26, 0.9);
  /* compensate for tracking after the last character so it centers optically */
  margin-right: -0.14em;
}
.scroll-hint .label-mobile { display: none; }
.scroll-hint-mouse {
  width: 26px;
  height: 41px;
  border: 1.5px solid rgba(251, 251, 251, 0.55);
  border-radius: 14px;
  position: relative;
  box-shadow: 0 2px 24px rgba(6, 13, 26, 0.6);
}
.scroll-hint-mouse i {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 3px;
  height: 8px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: var(--cyan);
  animation: wheel-roll 1.7s ease-in-out infinite;
}
.scroll-hint-chevrons {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.scroll-hint-chevrons i {
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  border-radius: 1px;
  transform: rotate(45deg);
  animation: chev-pulse 1.7s ease-in-out infinite;
}
.scroll-hint-chevrons i:nth-child(2) { animation-delay: 0.22s; margin-top: -5px; }
@keyframes hint-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@keyframes wheel-roll {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translateY(15px); }
}
@keyframes chev-pulse {
  0%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

/* Hero scrub progress: thin bar along the bottom of the pinned hero
   so visitors sense how much of the intro is left. Filled by JS. */
.hero-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(119, 137, 156, 0.18);
  z-index: 2;
}
.hero-progress span {
  display: block;
  height: 100%;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------- sections ---------- */
section { position: relative; }
.section-pad { padding: clamp(80px, 12vh, 140px) 0; }
.section-head { max-width: 640px; margin-bottom: clamp(40px, 7vh, 72px); display: grid; gap: 18px; }
/* optional supporting line under a section heading (about, contact) */
.section-head p { font-size: 16.5px; line-height: 1.7; max-width: 56ch; }

/* services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

/* selected work: a 3-up band of filled cards (reuses the .service-card look,
   bracket and hover); .work-metric is the cyan result line at the foot of each */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.work-metric {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--cyan);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.service-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 0;
  background: linear-gradient(160deg, var(--navy) 0%, var(--ink) 90%);
  padding: clamp(30px, 4vw, 48px);
  display: grid;
  gap: 18px;
  overflow: hidden;
  transition: border-color 0.35s ease, transform 0.35s ease;
}
.service-card:hover { border-color: rgba(8, 216, 243, 0.35); transform: translateY(-3px); }
.service-card ul {
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--mist);
  font-size: 15.5px;
}
.service-card li { display: flex; gap: 12px; align-items: flex-start; }
.service-card li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  margin-top: 0.62em;
}

/* work cards use the service-card look but as a flex column, so the cyan result
   line sits at the foot of every card and the three stay balanced whatever the
   copy length */
.work-card { display: flex; flex-direction: column; }

/* forge band */
.forge {
  position: relative;
  min-height: 74vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
}
/* desktop: the forge band fills the viewport as a full-bleed ambient video band (not pinned) */
@media (min-width: 761px) {
  .forge { min-height: 100vh; }
}
.forge video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}
.forge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(6,13,26,0.1) 34%, rgba(6,13,26,0.1) 66%, var(--ink) 100%);
}
.forge-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 22px;
  justify-items: center;
  padding: 14vh 6vw;
  text-shadow: 0 2px 24px rgba(6, 13, 26, 0.9);
}
.forge-inner p { max-width: 56ch; color: var(--paper); font-size: clamp(1.05rem, 1.8vw, 1.3rem); }

/* about: a section head (with one supporting line) then a full-width band of
   fact cards. Each card carries a label, a short statement and a line of
   detail, using the services grid's card language (border, gradient, radius,
   hover-lift) so the section sits in the site's rhythm and never reads empty */


.fact b {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin-top: 2px;
}
.fact p {
  color: var(--mist);
  font-size: 14px;
  line-height: 1.6;
}

/* process */
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.step {
  border-left: 1px solid var(--line);
  padding: 6px 0 6px 26px;
  display: grid;
  gap: 12px;
  align-content: start;
  transition: border-color 0.35s ease;
}
.step:hover { border-left-color: var(--cyan); }
/* shared uppercase label used by process steps and about fact cards */
.num {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist);
}
.step p { color: var(--mist); font-size: 15.5px; }

/* contact: the same left-aligned section head + card grid as the rest of the
   site, with three clear ways to reach us */
/* .contact-methods is defined as a card grid in the cards section below */
.contact-card:hover b { color: var(--cyan); }
.contact-card b::after { content: " \2192"; opacity: 0; transition: opacity 0.25s ease; }
.contact-card:hover b::after { opacity: 1; }
/* the WhatsApp card is the primary action, so it reads a touch stronger */


.contact-card .ico { width: auto; height: auto; background: none; color: var(--cyan); display: inline-flex; }
.contact-card-text { display: grid; gap: 5px; min-width: 0; }
.contact-card small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mist);
}
.contact-card b {
  transition: color 0.25s ease;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--paper);
  overflow-wrap: anywhere;
}
.contact-card .sub {
  color: var(--mist);
  font-size: 13px;
  line-height: 1.55;
  margin-top: 2px;
}
/* quiet closing line under the contact cards */
.contact-note {
  color: var(--mist);
  font-size: 14px;
  margin-top: clamp(26px, 3vw, 36px);
  max-width: 60ch;
}
/* long unbroken strings (email addresses) must wrap, never overflow */
.fact b,
.footer-bottom span { overflow-wrap: anywhere; }

/* ---------- forms: contact tile + lead-capture ---------- */
.lead-form {
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(28px, 3.4vw, 42px);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--navy) 0%, var(--ink) 90%);
  display: grid;
  gap: 20px;
}
.lead-form > h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 600; letter-spacing: -0.01em; }
.form-fields { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); }
.field label .opt { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.7; }
.field input,
.field textarea,
.checklist-form input[type="email"] {
  font-family: var(--font-sans);
  font-size: 15.5px;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 13px 16px;
  width: 100%;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.field textarea { resize: vertical; min-height: 118px; line-height: 1.6; }
.field input:focus,
.field textarea:focus,
.checklist-form input[type="email"]:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(8, 216, 243, 0.15);
}
.field input::placeholder,
.field textarea::placeholder,
.checklist-form input::placeholder { color: rgba(119, 137, 156, 0.55); }
.hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; }
.form-status { font-size: 14.5px; line-height: 1.6; margin: 0; }
.form-status:empty { display: none; }
.form-status.is-ok { color: var(--cyan); font-weight: 600; }
.form-status.is-error { color: #ff9090; }

/* lead-magnet band: the site's unfilled step style */
.lead-magnet-inner {
  border-left: 1px solid var(--line);
  padding: 6px 0 6px clamp(22px, 2vw, 30px);
  display: grid;
  gap: 16px;
  max-width: 620px;
}
.lead-magnet-inner b { font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-weight: 600; letter-spacing: -0.012em; color: var(--paper); }
.lead-magnet-inner p { color: var(--mist); font-size: 15px; line-height: 1.65; }
.checklist-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; margin-top: 4px; }
.checklist-form input[type="email"] { flex: 1 1 260px; width: auto; }
.checklist-ready { margin: 4px 0 0; }
.checklist-ready a { color: var(--cyan); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
  /* stack the contact buttons full-width so the small primary and the wide
     "prefer to talk" button line up cleanly instead of mismatching */
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; justify-content: center; }
  /* the checklist "Get the checklist" button matches its email field's width */
  .checklist-form .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- sub-pages (service pages, /work) ---------- */
/* bottom padding matches .section-pad so the gap under the sub-hero (above the
   video band) is the same as every other section boundary */
.subhero { padding: calc(var(--nav-h) + clamp(20px, 3.5vh, 52px)) 0 clamp(80px, 12vh, 140px); }
/* centred so the sub-hero flows straight into the centred full-bleed video band
   below, instead of jumping from left-aligned text to a centred video */
.subhero .container { display: grid; gap: 22px; justify-items: center; text-align: center; max-width: 860px; }
.subhero .sub { color: var(--mist); font-size: clamp(1.05rem, 1.9vw, 1.3rem); line-height: 1.6; max-width: 60ch; margin-inline: auto; }
.subhero .btn { margin-top: 6px; }
.prose { max-width: 68ch; display: grid; gap: 16px; }
.prose p { color: var(--mist); font-size: 16.5px; line-height: 1.8; }
.prose strong { color: var(--paper); font-weight: 600; }
.feature-list { list-style: none; display: grid; gap: 12px; margin-top: 4px; max-width: 68ch; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--mist); font-size: 16px; line-height: 1.55; }
.feature-list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); margin-top: 0.55em; }
/* boxed reassurance panel (used on the blog pages) */
.anywhere { position: relative; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(160deg, var(--navy) 0%, var(--ink) 90%); padding: clamp(28px, 4vw, 46px); display: grid; gap: 14px; }
.anywhere::after { content: ""; position: absolute; top: -1px; right: -1px; width: 22px; height: 22px; border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); opacity: 0.55; }
.anywhere b { font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 600; letter-spacing: -0.01em; }
.anywhere p { color: var(--mist); font-size: 15.5px; line-height: 1.75; max-width: 68ch; }

/* (the service pages' "work from anywhere" section reuses the homepage About
   pattern: left section-head + the numbered unfilled .fact-list tiles, so it
   doesn't repeat the filled service-card look on the same page) */

/* "in depth" link at the foot of a homepage service card */
.card-link { display: inline-block; margin-top: 4px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.service-card:hover .card-link { transform: translateX(3px); }
.prose a.accent, .card-link { text-decoration: none; }
.prose a.accent:hover { text-decoration: underline; }

/* FAQ: question-shaped headings in plain editorial rows (also feeds the
   FAQPage schema, whose text must match this visible copy exactly) */
.faq-list { display: grid; max-width: 860px; }
.faq {
  padding: clamp(22px, 3.4vh, 32px) 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
}
.faq:last-child { border-bottom: 1px solid var(--line); }
.faq h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.008em; color: var(--paper); }
.faq p { color: var(--mist); font-size: 15.5px; line-height: 1.7; max-width: 66ch; }

/* case studies as editorial rows, not tiles: the story on the left and the
   result as a big stat on the right, separated by hairlines. The stat is the
   hero; nothing else on the site uses this treatment, so it stays distinct. */
.case-list { display: grid; }
.case {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 26px 72px;
  align-items: center;
  padding: clamp(34px, 5vh, 54px) 0;
  border-top: 1px solid var(--line);
}
.case:last-child { border-bottom: 1px solid var(--line); }
.case-info { display: grid; gap: 14px; justify-items: start; }
.case-info h3 { letter-spacing: -0.012em; }
.case-info p { color: var(--mist); font-size: 15.5px; line-height: 1.7; max-width: 58ch; }
.case-stat { display: grid; gap: 12px; justify-items: start; align-content: center; }
.case-stat-value {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--paper);
}
.case-stat-value .accent { color: var(--cyan); }
.case-stat-value .arrow { color: var(--mist); font-weight: 400; padding: 0 4px; }
.case-stat-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist);
}
@media (max-width: 860px) {
  .case { grid-template-columns: 1fr; gap: 22px; align-items: start; }
}
.prose h2 { margin-top: 10px; }

/* cinematic media band: full-bleed, scroll-scrubbed video with a centred line of
   text over it, echoing the homepage forge band (a touch shorter). subpage.js
   loads the right cut (desktop/portrait) and seeks it with the scroll; with no
   JS / reduced motion it rests on a still frame. Video edges fade into the page
   background so it reads as a full-width takeover, not a boxed panel. */
.media-band {
  position: relative;
  min-height: 60vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
}
/* desktop: height follows the 16:9 video's shape (so the scene isn't cropped),
   capped at 88vh on short/wide screens. Height is computed from the viewport
   width rather than aspect-ratio + max-height, which would shrink the box's
   WIDTH to keep the ratio and leave a blank strip down the right side. */
@media (min-width: 761px) { .media-band { min-height: 56vh; height: min(calc(100vw * 9 / 16), 88vh); } }
.media-band-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
}
.media-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(6, 13, 26, 0.12) 30%, rgba(6, 13, 26, 0.12) 70%, var(--ink) 100%);
}
.media-band-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  justify-items: center;
  padding: 12vh 6vw;
  text-shadow: 0 2px 26px rgba(6, 13, 26, 0.95);
}
.media-band-inner p {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(1.55rem, 3.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.22;
  color: var(--paper);
}

/* footer: brand column plus Company / Legal / Get in touch link columns,
   closed off by a hairline bottom bar */
footer {
  border-top: 1px solid var(--line);
  padding: 64px 0 40px;
  background: var(--ink);
}
/* free-checklist panel across the top of the footer: a contained, on-brand
   card (border + gradient + corner bracket) so it reads as intentional */
.footer-cta {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px 48px;
  align-items: center;
  padding: clamp(26px, 3.2vw, 42px);
  margin-bottom: 56px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, var(--navy) 0%, var(--ink) 82%);
}
.footer-cta::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 22px;
  height: 22px;
  border-top: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
  opacity: 0.55;
}
.footer-cta-text { display: grid; gap: 9px; justify-items: start; }
.footer-cta-text b { font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 600; letter-spacing: -0.01em; color: var(--paper); }
.footer-cta-text p { color: var(--mist); font-size: 14.5px; line-height: 1.6; max-width: 42ch; }
.footer-cta .checklist-form { margin-top: 0; }
@media (max-width: 860px) {
  .footer-cta { grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; }
}

/* compact "or reach us directly" line that replaced the 3 contact tiles */
.contact-direct { color: var(--mist); font-size: 15px; line-height: 1.7; margin: 2px 0 28px; }
.contact-direct a { color: var(--paper); font-weight: 500; border-bottom: 1px solid rgba(8, 216, 243, 0.45); padding-bottom: 1px; transition: color 0.2s ease, border-color 0.2s ease; }
.contact-direct a:hover { color: var(--cyan); border-color: var(--cyan); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
  gap: 44px 32px;
  margin-bottom: 52px;
}
.footer-brand { display: grid; gap: 16px; justify-items: start; align-content: start; }
.footer-brand p { color: var(--mist); font-size: 14.5px; line-height: 1.7; max-width: 32ch; }
.footer-col { display: grid; gap: 12px; align-content: start; justify-items: start; }
.footer-title {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 4px;
}
.footer-col a {
  color: var(--paper);
  font-size: 14.5px;
  font-weight: 500;
  opacity: 0.8;
  overflow-wrap: anywhere;
  transition: color 0.25s ease, opacity 0.25s ease;
}
.footer-col a:hover { color: var(--cyan); opacity: 1; }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  gap: 10px 24px;
  flex-wrap: wrap;
  color: var(--mist);
  font-size: 13.5px;
}
.footer-bottom a:hover { color: var(--cyan); }

/* whatsapp float */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease;
}
.wa-float:hover { transform: scale(1.08); }

/* ---------- cookie consent banner ---------- */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: rgba(10, 22, 40, 0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 16px clamp(16px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  flex-wrap: wrap;
  transform: translateY(115%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.consent.is-in { transform: none; }
.consent-text { margin: 0; color: var(--mist); font-size: 14px; line-height: 1.6; max-width: 60ch; }
.consent-text a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.consent-actions { display: flex; gap: 12px; flex: none; }
.consent-actions .btn { padding: 10px 24px; font-size: 14px; }
@media (max-width: 560px) {
  .consent { flex-direction: column; align-items: stretch; }
  .consent-actions .btn { flex: 1; justify-content: center; }
}

/* legal pages */
.back-link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mist);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.back-link:hover, .back-link:focus-visible {
  color: var(--cyan);
  border-color: rgba(8, 216, 243, 0.5);
}
.legal { padding: calc(var(--nav-h) + 60px) 0 100px; }
.legal .container { width: min(820px, 92vw); }
.legal h1 { margin-bottom: 10px; }
.legal .updated {
  color: var(--mist);
  font-size: 14px;
  margin-bottom: 48px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.legal h2 { font-size: 1.35rem; font-weight: 600; margin: 46px 0 14px; }
.legal p, .legal li { color: #c3cddb; font-size: 16px; max-width: 68ch; }
.legal ul { padding-left: 22px; margin: 12px 0; display: grid; gap: 8px; }
.legal p a { color: var(--cyan); }
.legal p a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* reveal animation base state (JS adds motion) */
.reveal { opacity: 0; transform: translateY(24px); }

/* static fallback: if the animation libraries fail to load, main.js adds
   .no-motion-libs to <html> and the page reads as a normal static site:
   all content visible, hero headline shown, story-beat overlays hidden */
.no-motion-libs .reveal { opacity: 1 !important; transform: none !important; }
.no-motion-libs .hero-final { opacity: 1 !important; visibility: visible !important; }
.no-motion-libs .hero-beat,
.no-motion-libs .scroll-hint,
.no-motion-libs .hero-progress { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .services-grid, .process-grid, .work-grid { grid-template-columns: 1fr; }
  .fact-list { grid-template-columns: repeat(2, 1fr); }

  /* footer: brand row on top, the three link columns share the row below */
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 36px 28px; }
  .footer-brand { grid-column: 1 / -1; }

  /* the full desktop link row no longer fits below ~960px, so switch to
     the hamburger menu here rather than letting the nav crowd or wrap */
  .nav-links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(6, 13, 26, 0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    padding: 12px 6vw 26px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    /* short landscape phones: the menu itself scrolls instead of clipping */
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav.open .nav-links { opacity: 1; transform: none; pointer-events: auto; }
  .nav-links a { padding: 15px 4px; font-size: 17px; border-bottom: 1px solid var(--line); }
  /* the underline is hidden in the menu, so the current page reads in cyan */
  .nav-links a.is-current:not(.btn) { color: var(--cyan); }
  .nav-links a:not(.btn)::after { display: none; }
  .nav-links .btn { margin-top: 18px; justify-content: center; border-bottom: 0; padding: 13px 26px; font-size: 15px; }
  .nav-toggle { display: block; }
  /* dropdown flattens into the hamburger column: trigger is a header, panel is
     always-open and its links sit indented beneath it */
  .nav-item.has-menu { display: block; }
  .nav-item.has-menu::after { display: none; }
  .nav-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    margin: 0;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .nav-menu a { padding: 13px 4px 13px 20px !important; font-size: 15.5px; border-bottom: 1px solid var(--line); }
  .nav-menu-trigger .caret { display: none; }
}
@media (max-width: 760px) {
  .contact-methods { grid-template-columns: 1fr; }

  /* touch devices: chevrons read better than a mouse outline */
  .scroll-hint-mouse { display: none; }
  .scroll-hint-chevrons { display: flex; }
  .scroll-hint .label-desktop { display: none; }
  .scroll-hint .label-mobile { display: block; }

  /* no scrubbing on mobile, so no scrub progress bar */
  .hero-progress { display: none; }
}
@media (max-width: 560px) {
  /* fact cards read better as a single column once they get narrow */
  .fact-list { grid-template-columns: 1fr; }

  /* footer link columns pair up; the contact column gets the full width
     so the email address never squeezes */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  /* very narrow phones: scale the brand lockup down a touch so it always
     sits on one line with room to spare next to the menu button */
  .brand img { height: 34px; }
  .brand-name { font-size: 1.06rem; gap: 8px; }
}
@media (max-width: 420px) {
  /* small phones: tighter card padding so long lines (like the email
     address) have room, and slightly smaller contact rows */
  .contact-card { padding: 22px 20px; }
  .service-card { padding: 26px 22px; }
  .fact { padding: 22px 20px; }
}
/* short viewports (landscape phones, small laptops): keep the pinned hero's
   final headline block comfortably inside 100vh */
@media (max-height: 640px) {
  .hero-final { gap: 18px; }
  .hero-final .sub { font-size: 0.95rem; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scroll-hint,
  .scroll-hint-mouse i,
  .scroll-hint-chevrons i,
  .loader-bar span { animation: none; }
  .scroll-hint-mouse i { opacity: 1; }
  .hero-progress { display: none; }
  .reveal { opacity: 1; transform: none; }
  .loader { transition: none; }
  .loader img { animation: none; }
  .btn, .service-card, .contact-card, .step, .fact, .wa-float { transition: none; }
}

/* ---------- forged corner brackets (technical detail) ---------- */
.service-card::after,
.step::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 22px;
  height: 22px;
  border-top: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
  opacity: 0.55;
  transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
  pointer-events: none;
}
.step { position: relative; }
.service-card:hover::after { opacity: 1; width: 30px; height: 30px; }


/* ---------- word-mask heading reveals ---------- */
.wm { display: inline-block; overflow: hidden; vertical-align: bottom; }
.wm > .wmi { display: inline-block; transform: translateY(112%); will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .wm > .wmi { transform: none; }
}


/* ---------- tile typography: one consistent system ---------- */
.fact .num,
.contact-card small {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
}
.fact b,
.contact-card b {
  font-family: var(--font-display, var(--font-sans));
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.fact p,
.contact-card .sub {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--mist);
}

/* ---------- custom cursor (fine pointers only) ---------- */
@media (hover: hover) and (pointer: fine) {
  body.cursor-on, body.cursor-on a, body.cursor-on button { cursor: none; }
  .cursor-dot, .cursor-ring {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 999;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  .cursor-dot {
    width: 6px; height: 6px;
    background: var(--cyan);
  }
  .cursor-ring {
    width: 34px; height: 34px;
    border: 1.5px solid rgba(8, 216, 243, 0.45);
    transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  }
  body.cursor-hover .cursor-ring {
    width: 52px; height: 52px;
    border-color: rgba(8, 216, 243, 0.9);
    background: rgba(8, 216, 243, 0.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-ring { display: none; }
  body.cursor-on, body.cursor-on a, body.cursor-on button { cursor: auto; }
}


/* ---------- about: unfilled steps (matches the Process section) ---------- */
/* About mirrors the "How we work" steps: no fill, a thin line down the left
   that lights cyan on hover, an index + label, a title and a line of detail. */
.fact-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(30px, 4vw, 46px) clamp(34px, 5vw, 68px);
}
.fact {
  position: relative;
  border-left: 1px solid var(--line);
  padding: 4px 0 6px clamp(22px, 2vw, 30px);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num   label"
    "title title"
    "desc  desc";
  column-gap: 12px;
  row-gap: 9px;
  align-content: start;
  background: none;
  clip-path: none;
  overflow: visible;
  transition: border-color 0.35s ease;
}
.fact::before, .fact::after { content: none; }
.fact:hover { border-left-color: var(--cyan); }
.fact-num {
  grid-area: num;
  font-family: var(--font-mono, var(--font-sans));
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cyan);
  line-height: 1.5;
}
.fact .num { grid-area: label; align-self: center; }
.fact b {
  grid-area: title;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--paper);
}
.fact p {
  grid-area: desc;
  color: var(--mist);
  font-size: 15px;
  line-height: 1.65;
  max-width: 48ch;
}

/* ---------- contact: filled cards (matches the Services section) ---------- */
/* Contact is the closing call to action, so it takes the bolder filled card
   with the cyan corner bracket, bookending the page with the Services cards. */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.contact-card {
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(28px, 3.4vw, 42px);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--navy) 0%, var(--ink) 90%);
  clip-path: none;
  overflow: hidden;
  transition: border-color 0.35s ease, transform 0.35s ease;
}
.contact-card:hover { border-color: rgba(8, 216, 243, 0.35); transform: translateY(-3px); }
/* forged cyan corner bracket, identical to the service cards */
.contact-card::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  left: auto;
  bottom: auto;
  width: 22px;
  height: 22px;
  border: 0;
  border-top: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
  opacity: 0.55;
  color: transparent;
  transform: none;
  transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
  pointer-events: none;
}
.contact-card:hover::after { opacity: 1; width: 30px; height: 30px; }
.contact-card b::after { content: none; }
.contact-card .ico {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--cyan-dim);
  color: var(--cyan);
  margin: 0 0 4px;
}
.contact-card-text { display: grid; gap: 5px; min-width: 0; }
.contact-card small,
.contact-card b,
.contact-card .sub { grid-column: auto; grid-row: auto; }
.contact-card small { display: inline-flex; align-items: center; gap: 10px; }
.contact-card b {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--paper);
  transition: color 0.25s ease;
  overflow-wrap: anywhere;
}
.contact-card:hover b { color: var(--cyan); }
.contact-card.primary { border-color: rgba(8, 216, 243, 0.4); }
.contact-card.primary .ico { background: rgba(8, 216, 243, 0.2); }
.contact-card.primary small { color: var(--cyan); }

/* ---------- unified tile hover: one smooth, consistent effect on every tile ---------- */
/* Services, Process, About and Contact all react the same way on hover: a gentle
   lift, the cyan corner bracket grows and brightens, and the outline (card border
   or step line) warms to cyan, all on the same smooth easing curve. */
.service-card,
.step,
.fact,
.contact-card {
  transition: border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* give the About steps the same corner bracket the other tiles carry */
.fact::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  left: auto;
  bottom: auto;
  width: 22px;
  height: 22px;
  border: 0;
  border-top: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
  opacity: 0.55;
  color: transparent;
  transform: none;
  pointer-events: none;
}
.service-card::after,
.step::after,
.fact::after,
.contact-card::after {
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-card:hover,
.step:hover,
.fact:hover,
.contact-card:hover { transform: translateY(-3px); }
.service-card:hover::after,
.step:hover::after,
.fact:hover::after,
.contact-card:hover::after { opacity: 1; width: 30px; height: 30px; }
.step:hover,
.fact:hover { border-left-color: var(--cyan); }
.service-card:hover,
.contact-card:hover { border-color: rgba(8, 216, 243, 0.4); }
/* respect reduced motion: keep the colour change, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .service-card:hover,
  .step:hover,
  .fact:hover,
  .contact-card:hover { transform: none; }
}

/* About and Contact collapse to one column at the same 960px breakpoint as the
   Services and Process grids (and the hamburger nav), so every section changes
   together and the tablet range stays consistent. */
@media (max-width: 960px) {
  .fact-list { grid-template-columns: 1fr; }
  .contact-methods { grid-template-columns: 1fr; }
}