/* ==========================================================================
   JH Projekt — Jozef Hindický, freelance web developer
   Built from Figma: JH Projekt / canvas "Web" (J1nLJxYbxmbLIztC9Q1IbW)
   Desktop frames are 1512px wide with a 1200px content column.
   Everything below is a fluid rework of those frames.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts -- */
/* Nunito Sans, self-hosted (variable weight 400–900) — no request to Google */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/nunito-sans-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/nunito-sans-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- tokens -- */
:root {
  /* brand */
  --navy-900: #000328;
  --navy-850: #000438;
  --navy-800: #020531;
  --navy-750: #01032A;
  --navy-700: #0A1445;
  --navy-650: #131E55;
  --navy-600: #0A0C35;
  --navy-500: #0A1D45;
  --blue:     #019EFF;
  --red:      #EA2946;
  --red-alt:  #FB2F51;
  --red-link: #E52535;
  --green:    #23D15D;
  --green-alt:#28BC59;
  --teal:     #2CC2C9;
  --mint:     #2FFBD6;
  --lavender: #989CDD;

  /* text */
  --ink:        #020531;
  --ink-strong: #01032A;
  --ink-body:   #273655;
  --ink-muted:  #585858;
  --on-dark:    #FFFFFF;
  --on-dark-dim:#C0CADA;
  --chip-ink:   #A0AEC0;

  /* surfaces */
  --surface:      #FFFFFF;
  --surface-soft: #F6F8F9;
  --surface-chip: #F3F5F6;
  --placeholder:  #CAD2DA;
  --line:         #D8E7F1;
  --line-soft:    #E4E4E4;
  --line-rule:    #D7D7D7;

  --grad-navy: linear-gradient(180deg, var(--navy-850) 0%, var(--navy-900) 100%);
  --grad-navy-diag: linear-gradient(134deg, var(--navy-850) 0%, var(--navy-900) 100%);

  /* metrics */
  --container: 1200px;
  --gutter: clamp(20px, 3vw, 40px);
  --gutter-wide: clamp(20px, 3.3vw, 50px); /* header row bleeds wider than the grid */
  --card-gap: 24px;
  --radius-pill: 999px;

  --shadow-card: 0 3px 37px rgba(0, 0, 0, .05);
  --shadow-panel: 0 0 120px rgba(0, 0, 0, .06);

  /* fluid type — desktop values are the Figma sizes */
  --fs-eyebrow: 16px;
  --fs-h1:      clamp(36px, 5vw, 75px);
  --fs-h2:      clamp(30px, 3.7vw, 56px);
  --fs-h3:      clamp(26px, 3.3vw, 50px);
  --fs-h4:      clamp(22px, 1.9vw, 35px);
  --fs-lead:    clamp(16px, 1.4vw, 20px);
  --fs-hero-lead: clamp(16px, 2vw, 30px);
  --fs-body:    clamp(15px, 1.35vw, 20px);
  --fs-card-t:  clamp(18px, 1.4vw, 20px);
  --fs-num:     clamp(35px, 4.2vw, 62px);
  --fs-num-lg:  clamp(44px, 6vw, 90px);
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-body);
  background: var(--surface);
}
img, svg { display: block; max-width: 100%; }
/* the build wraps images in <picture> for WebP; this keeps layouts treating the <img> as unwrapped */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ------------------------------------------------------------- utilities -- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: none; }
.section { position: relative; padding-block: clamp(56px, 8vw, 120px); overflow-x: clip; }
.section--dark { background: var(--navy-800); color: var(--on-dark); }
.section--gradient { background: var(--grad-navy); color: var(--on-dark); }
.section--blue { background: var(--blue); color: var(--on-dark); }
.section--light { background: var(--surface); }
.section > .container,
.hero > .container { position: relative; z-index: 2; }

/* Figma content insets, per section (top / bottom). The 120px base is a
   fallback for bands that were not measured. */
#portfolio   { padding-block: clamp(56px, 8.6vw, 130px); }
#sluzby      { padding-block: clamp(56px, 8.1vw, 123px) clamp(60px, 9.9vw, 150px); }
#spolupraca  { padding-block: clamp(56px, 7.7vw, 117px) clamp(64px, 11.2vw, 170px); }
.testimonial { padding-block: clamp(56px, 8.6vw, 130px) clamp(48px, 6.6vw, 100px); }
#kontakt     { padding-block: clamp(40px, 5.1vw, 77px) clamp(56px, 8.6vw, 130px); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 900;
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 18px;
}
.eyebrow--light { color: #fff; }
.section--dark .eyebrow, .section--gradient .eyebrow { color: var(--red); }

h1, .h1 { font-size: var(--fs-h1); font-weight: 900; line-height: 1.06; letter-spacing: 0; }
h2, .h2 { font-size: var(--fs-h2); font-weight: 900; line-height: 1.2; }
.h2--upper { text-transform: uppercase; line-height: 1.2; }
.h3-quote { font-size: var(--fs-h3); font-weight: 600; line-height: 1.44; color: var(--ink); }
.lead { font-size: var(--fs-lead); font-weight: 400; line-height: 1.6; }
.body-text { font-size: var(--fs-body); line-height: 1.45; }
.body-text + .body-text { margin-top: clamp(16px, 1.8vw, 25px); }
.text-center { text-align: center; }
.on-dark-dim { color: var(--on-dark-dim); }
.measure-lg { max-width: 783px; }
.measure-md { max-width: 600px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Keyboard users should not have to tab the whole nav on every page.
   Sits above .site-header's z-index: 50. */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 100;
  padding: 12px 24px;
  border-radius: 0 0 6px 6px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  transform: translate(-50%, -120%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }
/* the skip target is only focusable to receive the jump */
#main:focus { outline: none; }

/* ---------------------------------------------------------------- button -- */
.btn {
  --btn-bg: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 300px;
  min-height: 70px;
  padding: 0 28px;
  background: var(--btn-bg);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
  text-align: center;
  transition: background-color .2s ease, transform .2s ease;
}
.btn:hover { background: var(--red-alt); transform: translateY(-2px); }
.btn:active { transform: none; }
.btn--outline { --btn-bg: transparent; box-shadow: inset 0 0 0 2px #fff; }
.btn--outline:hover { --btn-bg: var(--red); box-shadow: inset 0 0 0 2px var(--red); }
.btn__icon { width: 24px; height: 24px; flex: none; }
.btn__icon svg, .btn__icon img { width: 100%; height: 100%; }

.btn-round {
  display: inline-grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line-soft);
  transition: background-color .2s ease, border-color .2s ease;
}
.btn-round { color: var(--navy-500); }
.btn-round--ghost { background: transparent; border-color: #fff; color: #fff; }
.btn-round:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn-round[disabled] { pointer-events: none; }
.btn-round[disabled] .ico { opacity: .35; }
/* Mask-based icon so a single exported SVG can take any colour and direction.
   assets/svg/arrow.svg points left, so "next" is the mirrored one. */
.ico {
  display: block;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.ico--arrow {
  width: 25px; height: 25px;
  -webkit-mask-image: url("../assets/svg/arrow.svg");
          mask-image: url("../assets/svg/arrow.svg");
}
.btn-round--next .ico--arrow { transform: scaleX(-1); }


/* ---------------------------------------------------- decorative shapes -- */
/* "dots element" from Figma, used as a mask so it can take any colour */
.dots {
  position: absolute;
  /* --dy is set by initParallax(); default 0 so it is inert without JS.
     translate and scale are separate properties, so the scroll drift and the
     ambient breathing below compose instead of overwriting each other. */
  translate: 0 var(--dy, 0px);
  will-change: translate, scale;
  background-color: currentColor;
  -webkit-mask: url("../assets/svg/dots.svg") no-repeat center / 100% 100%;
          mask: url("../assets/svg/dots.svg") no-repeat center / 100% 100%;
  pointer-events: none;
  z-index: 1;
}
/* Three-quarter square cluster — the "square element" / "Union" groups.
   The modifier names the corner the design leaves empty; children fill the
   remaining three in reading order (top-left → top-right → bottom-left → …). */
.squares {
  position: absolute;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  pointer-events: none;
  z-index: 1;
}
.squares span { aspect-ratio: 1; }
.squares span:nth-child(1) { grid-area: 1 / 2; }
.squares span:nth-child(2) { grid-area: 2 / 1; }
.squares span:nth-child(3) { grid-area: 2 / 2; }
.squares--tr span:nth-child(1) { grid-area: 1 / 1; }
.squares--tr span:nth-child(2) { grid-area: 2 / 1; }
.squares--tr span:nth-child(3) { grid-area: 2 / 2; }
.squares--bl span:nth-child(1) { grid-area: 1 / 1; }
.squares--bl span:nth-child(2) { grid-area: 1 / 2; }
.squares--bl span:nth-child(3) { grid-area: 2 / 2; }
.squares--br span:nth-child(1) { grid-area: 1 / 1; }
.squares--br span:nth-child(2) { grid-area: 1 / 2; }
.squares--br span:nth-child(3) { grid-area: 2 / 1; }
.deco-block { position: absolute; pointer-events: none; z-index: 1; }

/* Decorative motion. Default state is the finished state, so nothing is
   hidden if the JS never runs — the animations only fire once .is-in lands. */
@media (prefers-reduced-motion: no-preference) {
  .squares.is-in span {
    animation: decoPop .5s cubic-bezier(.2, .75, .3, 1) both;
  }
  .squares.is-in span:nth-child(2) { animation-delay: .09s; }
  .squares.is-in span:nth-child(3) { animation-delay: .18s; }

  .deco-block.is-in { animation: decoRise .7s cubic-bezier(.2, .75, .3, 1) both; }

  .work-card__media { overflow: hidden; }
  .work-card:hover .work-card__media img { transform: scale(1.05) rotate(.4deg); }
  .service-card__icon,
  .nda-note .btn { transition: transform .35s cubic-bezier(.2, .75, .3, 1); }
  .service-card:hover .service-card__icon { transform: translateY(-3px) scale(1.08); }
}
@keyframes decoPop {
  from { opacity: 0; transform: scale(.45); }
}
@keyframes decoRise {
  from { opacity: 0; transform: translateY(26px); }
}

/* Ambient life for the dot grids — barely there, staggered so they do not
   pulse in unison. --sd is a per-element delay set in initParallax(). */
@media (prefers-reduced-motion: no-preference) {
  .dots { animation: dotsBreathe 9s ease-in-out var(--sd, 0s) infinite; }
}
@keyframes dotsBreathe {
  0%, 100% { scale: 1; }
  50%      { scale: 1.04; }
}

/* Logo: settles in on load, lifts on hover. */
@media (prefers-reduced-motion: no-preference) {
  .logo img { transition: transform .4s cubic-bezier(.2, .75, .3, 1); }
  .logo:hover img,
  .logo:focus-visible img { transform: translateY(-2px) scale(1.04); }
}


@media (max-width: 900px) {
  .dots, .squares, .deco-block { display: none; }
}

/* ---------------------------------------------------------------- header -- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding-block: clamp(20px, 3.3vw, 50px);
  transition: padding-block .35s cubic-bezier(.4, 0, .2, 1), background-color .35s ease,
              box-shadow .35s ease, backdrop-filter .35s ease;
}
/* Once the page moves, the header tightens into a frosted navy bar. */
.site-header.is-scrolled {
  padding-block: 12px;
  background: rgba(1, 3, 42, .78);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 14px 40px rgba(0, 3, 40, .35);
}
.site-header .logo img { transition: width .35s cubic-bezier(.4, 0, .2, 1); }
.site-header.is-scrolled .logo img { width: clamp(124px, 9vw, 150px); }
.site-header .lang-toggle, .site-header .contact-pill { transition: height .35s ease, width .35s ease, background-color .2s ease; }
.site-header.is-scrolled .lang-toggle { width: 46px; height: 46px; }
.site-header.is-scrolled .contact-pill { height: 46px; }
html { scroll-padding-top: 96px; }
.site-header .container { max-width: none; padding-inline: var(--gutter-wide); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 40px);
}
.logo { display: block; flex: none; }
.logo img { width: clamp(142px, 12.7vw, 192px); height: auto; }

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.2vw, 47px);
}
.nav__link {
  position: relative;
  display: block;
  padding-block: 6px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.lang-toggle {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  flex: none;
  border-radius: 50%;
  background: rgba(97, 255, 255, .1);
  color: #fff;
  font-size: 16px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase;
  transition: background-color .2s ease;
}
.lang-toggle:hover { background: rgba(97, 255, 255, .22); }

.contact-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 54px;
  padding: 0 26px;
  background: var(--red);
  color: #fff;
  font-size: 16px; font-weight: 900; letter-spacing: .04em;
  text-transform: uppercase;
  transition: background-color .2s ease;
}
.contact-pill:hover { background: var(--red-alt); }

.burger {
  display: none;
  flex: none;
  width: 28px; height: 18px;
  margin-left: auto;
  position: relative;
}
.burger span {
  position: absolute;
  left: 0; height: 3px; width: 100%;
  border-radius: 3px;
  background: #fff;
  transition: transform .28s ease, opacity .2s ease;
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 7.5px; }
.burger span:nth-child(3) { bottom: 0; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* mobile menu overlay — a circle grows out of the burger, then the links
   rise in one after another. --mx/--my are set from the burger's position. */
.mobile-menu {
  --mx: calc(100% - 38px);
  --my: 40px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 104px var(--gutter) max(32px, env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(1, 158, 255, .16), transparent 60%),
    var(--grad-navy-diag);
  overflow-x: hidden;
  overflow-y: auto;
  clip-path: circle(0 at var(--mx) var(--my));
  visibility: hidden;
  transition: clip-path .6s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .6s;
}
.mobile-menu[data-open="true"] {
  clip-path: circle(150vmax at var(--mx) var(--my));
  visibility: visible;
  transition: clip-path .75s var(--ease-out), visibility 0s;
}
/* slow-drifting colour blob + brand squares, purely decorative */
.mobile-menu__glow {
  position: absolute;
  left: -30%; bottom: -20%;
  width: 90vw; height: 90vw;
  max-width: 520px; max-height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(234, 41, 70, .35), transparent 65%);
  filter: blur(10px);
  pointer-events: none;
  animation: menuDrift 12s ease-in-out infinite alternate;
}
@keyframes menuDrift {
  to { transform: translate(18%, -14%) scale(1.15); }
}
.mobile-menu__squares {
  position: absolute;
  bottom: 250px; right: 0;
  display: grid;
  grid-template-columns: repeat(2, 34px);
  pointer-events: none;
}
.mobile-menu__squares span { width: 34px; height: 34px; transform: scale(0); transition: transform .5s var(--ease-out); }
.mobile-menu__squares span:nth-child(1) { grid-column: 2; background: var(--red); }
.mobile-menu__squares span:nth-child(2) { background: var(--blue); transition-delay: .05s; }
.mobile-menu__squares span:nth-child(3) { background: var(--red); opacity: .55; transition-delay: .1s; }
.mobile-menu[data-open="true"] .mobile-menu__squares span { transform: none; transition-delay: calc(.35s + var(--d, 0s)); }
.mobile-menu[data-open="true"] .mobile-menu__squares span:nth-child(2) { --d: .07s; }
.mobile-menu[data-open="true"] .mobile-menu__squares span:nth-child(3) { --d: .14s; }

.mobile-menu__nav, .mobile-menu__foot { position: relative; }
.mobile-menu__eyebrow {
  margin: 0 0 10px;
  font-size: 12px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lavender);
}
.mobile-menu__list { margin: 0; padding: 0; list-style: none; }
.mobile-menu__list li,
.mobile-menu__foot {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .25s ease, transform .25s ease;
}
.mobile-menu[data-open="true"] .mobile-menu__list li,
.mobile-menu[data-open="true"] .mobile-menu__foot {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .7s var(--ease-out);
  transition-delay: calc(.22s + var(--i) * .065s);
}
.mobile-menu__list a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
}
/* a red line sweeps along the divider on press / for the current page */
.mobile-menu__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--red), var(--red-alt));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.mobile-menu__num {
  flex: none;
  min-width: 26px;
  font-size: 13px; font-weight: 800; letter-spacing: .08em;
  color: rgba(255, 255, 255, .4);
  font-variant-numeric: tabular-nums;
  transition: color .3s ease;
}
.mobile-menu__label {
  font-size: clamp(30px, 9vw, 44px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  transition: transform .45s var(--ease-out), color .3s ease;
}
.mobile-menu__arrow {
  margin-left: auto;
  align-self: center;
  color: var(--red);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .3s ease, transform .45s var(--ease-out);
}
.mobile-menu__list a:hover::after,
.mobile-menu__list a:focus-visible::after,
.mobile-menu__list a[aria-current="page"]::after { transform: scaleX(1); }
.mobile-menu__list a:hover .mobile-menu__label,
.mobile-menu__list a:focus-visible .mobile-menu__label { transform: translateX(8px); }
.mobile-menu__list a:hover .mobile-menu__arrow,
.mobile-menu__list a:focus-visible .mobile-menu__arrow,
.mobile-menu__list a[aria-current="page"] .mobile-menu__arrow { opacity: 1; transform: none; }
.mobile-menu__list a[aria-current="page"] .mobile-menu__num { color: var(--red); }
.mobile-menu__list a:active .mobile-menu__label { color: var(--on-dark-dim); }

.mobile-menu__foot { margin-top: auto; }
.mobile-menu__contact {
  display: block;
  width: fit-content;
  padding-block: 3px;
  font-size: 17px; font-weight: 700;
  color: #fff;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .35s var(--ease-out);
}
.mobile-menu__contact:hover { background-size: 100% 1px; }
.mobile-menu__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}
.mobile-menu__actions .btn { flex: 1; min-width: 0; min-height: 54px; }
.mobile-menu__social {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  flex: none;
  border-radius: 50%;
  background: rgba(97, 255, 255, .1);
  transition: background-color .2s ease;
}
.mobile-menu__social:hover { background: var(--blue); }

body[data-menu-open="true"] { overflow: hidden; }
/* the menu brings its own background — let the header melt into it */
body[data-menu-open="true"] .site-header {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu[data-open="true"] { transition: visibility 0s, opacity .2s ease; clip-path: none; opacity: 0; }
  .mobile-menu[data-open="true"] { opacity: 1; }
  .mobile-menu__glow { animation: none; }
  .mobile-menu__list li, .mobile-menu__foot, .mobile-menu__squares span { transition: none !important; opacity: 1; transform: none; }
}

@media (max-width: 1080px) {
  .nav, .site-header .lang-toggle, .site-header .contact-pill { display: none; }
  .burger { display: block; }
}
@media (min-width: 1081px) {
  .mobile-menu { display: none; }
}

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative;
  background: var(--grad-navy-diag);
  color: #fff;
  /* clip only the axis that guards against horizontal scroll — the design
     lets the decorative grids bleed past the section's bottom edge */
  overflow-x: clip;
}
/* availability signal — sits above the h1 so it is the first thing read */
.availability {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(16px, 1.8vw, 24px);
  padding: 10px 20px 10px 16px;
  border-radius: var(--radius-pill);
  /* 90% so the chip sits into the hero rather than on top of it, with a
     solid green edge to keep it defined. box-sizing is border-box, so the
     border does not change the chip's size. */
  background: rgba(35, 209, 93, .9);
  border: 1.5px solid var(--green);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--navy-900);
}
.availability__label { display: inline; }
/* the quarter is the part that changes, so it carries the emphasis */
.availability [data-quarter] { font-weight: 800; }
.availability__dot {
  position: relative;
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--navy-900);
}
@media (prefers-reduced-motion: no-preference) {
  /* a slow halo, not a blink — this should read as "alive", not "alert" */
  .availability__dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: var(--navy-900);
    opacity: .35;
    animation: availPulse 2.4s ease-out infinite;
  }
}
@keyframes availPulse {
  0%   { transform: scale(.5); opacity: .45; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.hero--home { padding-block: clamp(150px, 16.9vw, 256px) clamp(56px, 5.8vw, 88px); }
.hero--page {
  padding-block: clamp(130px, 14vw, 200px) clamp(60px, 7vw, 96px);
  text-align: center;
}
.hero__grid {
  display: grid;
  /* In Figma the 498px portrait bleeds ~50px past the content column, leaving the
     headline ~753px. Inside a strict 1200px column the portrait gives that space
     back, so "Web Developer" still sets on one line like the design. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  align-items: center;
  gap: clamp(32px, 3vw, 40px);
}
.hero__title { text-transform: uppercase; }
.hero__title span { display: block; color: var(--blue); }
.hero__lead {
  max-width: 583px;
  margin-top: clamp(20px, 2.2vw, 30px);
  font-size: var(--fs-hero-lead);
  line-height: 1.47;
}
.hero__cta { margin-top: clamp(28px, 3vw, 44px); }
.hero__photo {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #D9D9D9;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }

.hero--page .hero__title { max-width: 973px; margin-inline: auto; line-height: 1.2; }
.hero--page .lead { max-width: 783px; margin: clamp(20px, 2.2vw, 30px) auto 0; }
.hero__scroll {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-top: clamp(36px, 5vw, 65px);
}
.hero__scroll::before, .hero__scroll::after {
  content: "";
  width: 3px; height: 54px;
  background: rgba(255, 255, 255, .3);
}
.hero__scroll img { width: 22px; }

/* stat strip under the home hero */
.stats {
  /* The design's four items are 241 / 236 / 188 / 414px — not equal columns.
     Four 1fr tracks squeezed the credential to 106px and wrapped it to five
     lines instead of the two the design breaks it into. */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 45px);
  margin-top: clamp(40px, 5vw, 76px);
}
.stat { display: flex; align-items: center; gap: clamp(10px, 1.3vw, 18px); }
.stat__num {
  font-size: var(--fs-num);
  font-weight: 900;
  line-height: 1.05;
}
.stat__label { font-size: clamp(12px, 1.4vw, 20px); line-height: 1.25; }
.stat--logo { gap: 20px; }
.stat--logo img { width: clamp(96px, 9.3vw, 141px); height: auto; flex: none; }
.stat--logo .stat__label { font-size: clamp(12px, 1.1vw, 16px); }

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hero__photo { width: min(250px, 60vw); order: -1; }
  .hero__lead { margin-inline: auto; }
}
@media (max-width: 720px) {
  .stats { justify-content: space-around; text-align: center; }
  .stat { flex-direction: column; gap: 4px; }
  .stat--logo { flex-basis: 100%; flex-direction: row; justify-content: center; gap: 18px; padding-top: 8px; }
  .stat--logo .stat__label { text-align: left; }
}

/* --------------------------------------------------------------- section -- */
.section-head { margin-bottom: clamp(32px, 4vw, 56px); }
.section-head--center { text-align: center; }
.section-head--center .eyebrow { }
.section-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
}
.section-head--split > .btn { justify-self: start; }
/* a line break that only makes sense on wide screens */
@media (max-width: 720px) { br.br-wide { display: none; } }
/* on phones the 300px button and two 70px arrows don't fit side by side */
@media (max-width: 620px) {
  .section-head--split { gap: 14px; }
  .section-head--split > .btn { min-width: 0; width: 100%; padding: 0 18px; }
  .section-head--split .slider-nav { gap: 10px; }
  .section-head--split .btn-round { width: 56px; height: 56px; }
}

/* ---------------------------------------------------------- service grid -- */
.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(240px, auto);
  gap: var(--card-gap);
}
.service-feature {
  /* one row, so the promo plus five services fill two clean rows of three;
     spanning two rows only balanced when there were exactly four services */
  grid-row: span 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 44px 40px;
  background: var(--blue);
  color: #fff;
}
.service-feature__icon { width: 37px; height: 42px; }
.service-feature__icon img { width: 100%; height: 100%; }
.service-feature h3 { font-size: clamp(20px, 1.7vw, 24px); font-weight: 900; line-height: 1.25; }
.service-feature p { font-size: 16px; line-height: 1.44; }
.service-feature .btn { margin-top: auto; min-width: 0; width: 100%; max-width: 304px; }

.service-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 45px 40px;
  background: var(--navy-700);
  color: #fff;
  transition: transform .25s ease, background-color .25s ease;
}
.service-card:hover { transform: translateY(-4px); background: var(--navy-650); }
.service-card__icon { width: 42px; height: 42px; margin-bottom: 4px; }
.service-card h3 {
  font-size: var(--fs-card-t);
  font-weight: 900;
  line-height: 1.45;
  text-transform: uppercase;
}
.service-card p { font-size: 16px; line-height: 1.5; color: var(--on-dark-dim); }

@media (max-width: 1080px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-feature { grid-row: auto; grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .services { grid-template-columns: 1fr; }
  .service-feature, .service-card { padding: 32px 24px; }
}

/* ------------------------------------------------------------- portfolio -- */
/* Projects that cannot be shown. Centred and quiet on purpose — it should
   close the grid, not compete with it. */
.nda-note {
  position: relative;
  margin: clamp(44px, 5.5vw, 88px) auto 0;
  padding: clamp(40px, 5vw, 76px) clamp(28px, 5vw, 96px);
  background: var(--blue);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
/* the brand dot motif, so the panel does not read as a plain colour block */
.nda-note::before,
.nda-note::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 190px;
  background-image: radial-gradient(circle, rgba(255,255,255,.28) 1.6px, transparent 1.7px);
  background-size: 20.2px 20.2px;
  pointer-events: none;
}
.nda-note::before { left: -36px; top: -28px; }
.nda-note::after { right: -36px; bottom: -28px; }
.nda-note > * { position: relative; }
/* red on #019EFF is unreadable; .section--dark .eyebrow would otherwise win */
.section--dark .nda-note .eyebrow { color: #fff; }
.nda-note__title {
  margin-top: 14px;
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 900;
  line-height: 1.2;
}
.nda-note__text {
  max-width: 760px;
  margin: clamp(14px, 1.6vw, 22px) auto 0;
  font-size: var(--fs-body);
  line-height: 1.6;
}
.nda-note .btn { margin-top: clamp(22px, 2.6vw, 36px); }


.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--card-gap) var(--card-gap);
}
.work-slider {
  display: grid;
  grid-auto-flow: column;
  /* Cards keep the Figma's 384px so the row overflows and the next tile peeks in,
     the way the design shows it. minmax() shrank them until nothing overflowed,
     which left mandatory snap with no reachable snap point but 0. */
  grid-auto-columns: min(384px, 78vw);
  gap: var(--card-gap);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.work-slider::-webkit-scrollbar { display: none; }
.work-slider > * { scroll-snap-align: start; }

.work-card { display: block; }
.work-card__media {
  aspect-ratio: 1;
  background: var(--placeholder);
  overflow: hidden;
}
.work-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.work-card:hover .work-card__media img { transform: scale(1.05); }
.work-card__title {
  margin-top: 22px;
  font-size: var(--fs-card-t);
  font-weight: 900;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--ink-strong);
}
.work-card__meta {
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.43;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.section--dark .work-card__title, .section--gradient .work-card__title { color: #fff; }
.section--dark .work-card__meta, .section--gradient .work-card__meta { color: var(--on-dark-dim); }

.slider-nav { display: flex; gap: 14px; }

/* previous / next project, under the other-projects carousel on a case page */
.project-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.project-pager__link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  justify-self: start;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 800;
  line-height: 1.3;
  transition: color .2s ease;
}
.project-pager__link--next { justify-self: end; text-align: right; }
.project-pager__link--next .ico--arrow { transform: scaleX(-1); }
.project-pager__link:hover { color: var(--red); }
.project-pager__label {
  display: block;
  margin-bottom: 4px;
  color: var(--on-dark-dim);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.project-pager__all {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.project-pager__all:hover { color: var(--red); }
@media (max-width: 620px) {
  .project-pager { grid-template-columns: 1fr 1fr; }
  .project-pager__all { grid-row: 2; grid-column: 1 / -1; justify-self: center; }
  .project-pager__link { gap: 12px; }
}

/* ------------------------------------------------------------------- why -- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 504px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 7.3vw, 110px);
}
.split--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 504px); }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__media img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 504 / 647; }
.split__body .btn { margin-top: clamp(28px, 3vw, 46px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(28px, 3vw, 46px); }
.btn-row .btn, .split__body .btn-row .btn { margin-top: 0; }
@media (max-width: 620px) { .btn-row .btn { min-width: 0; width: 100%; } }

@media (max-width: 980px) {
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  /* the photos are portraits: keep the top of the frame (faces) when cropping to landscape */
  .split__media img { aspect-ratio: 3 / 2; object-position: 50% 18%; }
}
@media (max-width: 620px) {
  .split__media img { aspect-ratio: 4 / 5; object-position: 50% 30%; }
}

/* ----------------------------------------------------------- testimonial -- */
.testimonial { position: relative; overflow-x: clip; }
.testimonial__quote-mark {
  position: absolute;
  top: clamp(40px, 6vw, 139px);
  left: var(--gutter);
  width: clamp(120px, 14.7vw, 222px);
  opacity: .15;
  z-index: 1;
}
.testimonial__stage {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  margin-inline: clamp(-56px, -3.7vw, 0px);
}
.testimonial__stage .btn-round { flex: none; }
.testimonial__track { position: relative; flex: 1 1 auto; min-width: 0; }
.testimonial__slide {
  display: none;
  text-align: center;
}
.testimonial__slide[data-active="true"] { display: block; animation: fade .45s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.testimonial blockquote {
  max-width: 964px;
  margin-inline: auto;
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 800;
  line-height: 1.47;
}
.testimonial__author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: clamp(28px, 3vw, 46px);
  text-align: center;
}
/* left-aligned only when there is a photo to sit beside */
.testimonial__author:has(img) { text-align: left; }
.testimonial__author img {
  width: 77px; height: 77px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: #D9D9D9;
}
.testimonial__name { font-size: clamp(20px, 1.6vw, 24px); font-weight: 800; line-height: 1.35; }
.testimonial__role { font-size: clamp(16px, 1.35vw, 20px); font-weight: 600; line-height: 1.35; }

.testimonial__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 60px);
  margin-top: clamp(32px, 4vw, 56px);
}
.dots-nav { display: flex; align-items: center; gap: 12px; }
.dots-nav button {
  width: 12px; height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #fff;
  transition: transform .2s ease, background-color .2s ease;
}
.dots-nav button[aria-selected="true"] { background: #fff; transform: scale(1.33); }
@media (max-width: 780px) {
  .testimonial__stage .btn-round { display: none; }
  .testimonial__stage { margin-inline: 0; }
  .testimonial__author { flex-direction: column; text-align: center; gap: 14px; }
}

/* ------------------------------------------------------------ tech stack -- */
.marquee {
  --fade: 18%;
  position: relative;
  margin-block: clamp(36px, 5vw, 66px);
  padding-block: 12px;              /* room for the pills' shadow, which overflow would clip */
  overflow: hidden;
  transform: translateZ(0);         /* own layer: iOS Safari otherwise drops the masked, animated rows while scrolling */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
.marquee__row {
  display: flex;
  width: max-content;
  animation: marquee var(--dur, 42s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
/* spacing as a margin on every pill (not flex gap), so each half of the doubled row is
   exactly 50% wide and the -50% loop is seamless */
.marquee__row > * { margin-right: 24px; }
.marquee__row + .marquee__row { margin-top: 24px; }
.marquee__row--reverse { animation-direction: reverse; }
/* pause on hover only where there is a real pointer: on touch screens a tap leaves :hover stuck */
@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee__row { animation-play-state: paused; }
}
@media (max-width: 620px) {
  .marquee { --fade: 8%; }
  .marquee__row > * { margin-right: 14px; }
  .marquee__row + .marquee__row { margin-top: 14px; }
}
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__row { animation: none; }
  .marquee { overflow-x: auto; }
}
.tech-pill {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  width: 206px;
  height: 78px;
  padding: 0 20px;
  background: var(--navy-600);
  box-shadow: var(--shadow-card);
}
.tech-pill img { width: 42px; height: 42px; object-fit: contain; flex: none; }
.tech-pill span {
  font-size: 14px; font-weight: 900; line-height: 1.15;
  text-transform: uppercase; color: #fff;
}

/* tech detail cards (O mne) */
.tech-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--card-gap);
}
.tech-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 336px;
  padding: 44px 40px;
  background: var(--navy-700);
}
.tech-card img { width: 46px; height: 46px; object-fit: contain; }
.tech-card h3 {
  font-size: var(--fs-card-t); font-weight: 900; line-height: 1.45;
  text-transform: uppercase; color: #fff;
}
.tech-card p { font-size: 16px; line-height: 1.5; color: var(--on-dark-dim); }
@media (max-width: 980px) { .tech-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .tech-cards { grid-template-columns: 1fr; } .tech-card { padding: 30px 24px; min-height: 0; } }

/* --------------------------------------------------------------- numbers -- */
.number-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--card-gap);
}
.number-card {
  display: grid;
  place-content: center;
  gap: 8px;
  min-height: 237px;
  padding: 32px 20px;
  background: var(--navy-700);
  text-align: center;
}
.number-card__num { font-size: var(--fs-num-lg); font-weight: 900; line-height: 1.05; color: #fff; }
.number-card__label {
  font-size: 16px; line-height: 1.25; text-transform: uppercase; color: #fff;
}
@media (max-width: 700px) {
  .number-cards { grid-template-columns: 1fr; }
  .number-card { min-height: 0; padding: 28px 20px; }
}

/* -------------------------------------------------------------- timeline -- */
.timeline { position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background: rgba(255, 255, 255, .3);
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 106px 1fr;
  align-items: start;
  padding-block: 0 52px;
}
.timeline__badge {
  grid-column: 2;
  display: grid;
  place-items: center;
  justify-self: center;
  width: 53px; height: 53px;
  border-radius: 50%;
  background: var(--red);
}
.timeline__badge span { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.9); }
.timeline__item:nth-child(2) .timeline__badge { background: var(--blue); }
.timeline__item:nth-child(3) .timeline__badge { background: var(--green); }
.timeline__year {
  grid-row: 1;
  align-self: start;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--navy-700);
  color: #fff;
  font-size: 15px; font-weight: 800;
  white-space: nowrap;
}
.timeline__card {
  grid-row: 1;
  padding: 31px;
  background: var(--navy-700);
}
.timeline__item:nth-child(odd) .timeline__year { grid-column: 1; }
.timeline__item:nth-child(odd) .timeline__card { grid-column: 3; }
.timeline__item:nth-child(even) .timeline__year { grid-column: 3; justify-self: start; }
.timeline__item:nth-child(even) .timeline__card { grid-column: 1; }
.timeline__card h3 { font-size: clamp(20px, 1.6vw, 24px); font-weight: 800; line-height: 1.46; color: #fff; }
.timeline__org { margin-top: 2px; font-size: 14px; font-weight: 800; line-height: 1.8; color: var(--red-link); }
.timeline__card p { margin-top: 14px; font-size: 14px; line-height: 1.57; color: var(--on-dark-dim); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px; line-height: 1.25;
  color: var(--chip-ink);
}
.chips--light .chip {
  border-radius: 0;
  padding: 10px 20px;
  background: var(--surface-chip);
  border-color: var(--surface-chip);
  font-size: 16px;
  color: var(--ink-body);
}

@media (max-width: 900px) {
  .timeline::before { left: 26px; }
  .timeline__item { grid-template-columns: 53px 1fr; gap: 0 20px; padding-bottom: 36px; }
  .timeline__badge { grid-column: 1; grid-row: 1; justify-self: start; }
  .timeline__item:nth-child(odd) .timeline__year,
  .timeline__item:nth-child(even) .timeline__year { grid-column: 2; grid-row: 1; justify-self: start; }
  .timeline__item:nth-child(odd) .timeline__card,
  .timeline__item:nth-child(even) .timeline__card { grid-column: 2; grid-row: 2; margin-top: 18px; padding: 24px; }
}

.timeline-wrap { position: relative; }
.timeline-wrap[data-collapsed="true"] .timeline { max-height: 950px; overflow: hidden; }
.timeline-wrap[data-collapsed="true"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 357px;
  background: linear-gradient(180deg, rgba(1, 4, 47, 0) 0%, var(--navy-800) 100%);
  pointer-events: none;
  z-index: 2;
}
.timeline-wrap + .center-cta { margin-top: clamp(28px, 3vw, 42px); }
.center-cta { display: flex; justify-content: center; }

/* ------------------------------------------------------------- education -- */
.edu { text-align: center; }
.edu h2 {
  max-width: 1202px;
  margin-inline: auto;
  font-size: clamp(24px, 2.9vw, 44px);
  font-weight: 600;
  line-height: 1.45;
}
.edu img { margin: clamp(28px, 3.5vw, 44px) auto 0; width: clamp(180px, 17vw, 255px); height: auto; }
/* Year above the school rather than beside it — side by side the two never
   had enough breathing room, and the entries read as one block. */
.edu-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 3.4vw, 60px);
  max-width: 860px;
  margin: clamp(28px, 3.4vw, 48px) auto 0;
}
.edu-list li { display: grid; gap: 6px; align-content: start; }
.edu-list__years {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .7);
}
.edu-list__school { font-size: clamp(18px, 1.5vw, 22px); font-weight: 800; line-height: 1.3; }
.edu-list__degree { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.45; color: rgba(255, 255, 255, .85); }
@media (max-width: 720px) {
  .edu-list { grid-template-columns: 1fr; gap: 24px; }
}

/* --------------------------------------------------------------- hobbies -- */
.collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  gap: 20px;
  align-items: end;
}
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage__a { aspect-ratio: 336 / 326; }
.collage__b { aspect-ratio: 230 / 299; align-self: end; }
.collage__c { aspect-ratio: 293 / 357; }
.collage__d { aspect-ratio: 194 / 213; align-self: start; }

/* ------------------------------------------------------------ ai / cards -- */
.ai-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--card-gap);
}
.ai-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 390px;
  padding: 41px 39px;
  background: var(--navy-700);
}
.ai-card__icon { width: 55px; height: 55px; }
.ai-card h3 { font-size: clamp(20px, 1.55vw, 22px); font-weight: 900; line-height: 1.4; color: #fff; }
.ai-card p { font-size: 16px; line-height: 1.56; color: var(--on-dark-dim); }
@media (max-width: 980px) { .ai-cards { grid-template-columns: 1fr; } .ai-card { min-height: 0; padding: 30px 24px; } }

/* -------------------------------------------------------- service blocks -- */
.service-block {
  display: grid;
  grid-template-columns: minmax(0, 588px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 2vw, 24px);
}
.service-block + .service-block { margin-top: clamp(48px, 7vw, 120px); }
.service-block:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 588px); }
.service-block:nth-child(even) .service-block__media { order: 2; }
.service-block__media img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.service-block__body { max-width: 542px; justify-self: end; }
.service-block:nth-child(even) .service-block__body { justify-self: start; }
.service-block h2 { font-size: var(--fs-h2); }
.service-block p { margin-top: 20px; font-size: var(--fs-body); line-height: 1.55; }
.service-block .btn { margin-top: 30px; }
@media (max-width: 980px) {
  .service-block, .service-block:nth-child(even) { grid-template-columns: 1fr; }
  .service-block:nth-child(even) .service-block__media { order: 0; }
  .service-block__body, .service-block:nth-child(even) .service-block__body { justify-self: start; max-width: none; }
}

/* ------------------------------------------------------------------- faq -- */
.faq { display: grid; gap: 16px; max-width: 996px; margin-inline: auto; }
.faq__item { background: var(--navy-700); transition: background-color .25s ease; }
.faq__item[data-open="true"] { background: var(--navy-650); }
.faq__q {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 30px 40px;
  text-align: left;
}
.faq__q > span:first-child {
  flex: 1;
  font-size: var(--fs-card-t);
  font-weight: 900;
  line-height: 1.45;
  color: #fff;
}
.faq__icon {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--blue);
  transition: background-color .25s ease;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  background: #fff;
  transition: transform .25s ease, opacity .25s ease;
}
.faq__icon::before { width: 21px; height: 3px; }
.faq__icon::after { width: 3px; height: 21px; }
.faq__item[data-open="true"] .faq__icon { background: var(--red); }
.faq__item[data-open="true"] .faq__icon::after { transform: scaleY(0); opacity: 0; }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s ease;
}
.faq__item[data-open="true"] .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding: 0 40px 32px;
  max-width: 854px;
  font-size: 16px;
  line-height: 1.56;
  color: #fff;
}
@media (max-width: 620px) {
  .faq__q { padding: 22px 20px; gap: 14px; }
  .faq__a p { padding: 0 20px 24px; }
  .faq__icon { width: 38px; height: 38px; }
  .faq__icon::before { width: 16px; }
  .faq__icon::after { height: 16px; }
}

/* --------------------------------------------------------------- contact -- */
.contact { position: relative; overflow: hidden; }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 486px) minmax(0, 588px);
  justify-content: space-between;
  gap: clamp(40px, 8vw, 126px);
  align-items: start;
}
.contact__list { margin-top: clamp(28px, 3.4vw, 48px); }
.contact__row {
  display: block;
  /* Figma rows are a 118px pitch: 30 above the label, 26 under the value */
  padding-block: 30px 26px;
  border-top: 1px solid var(--line);
}
/* label sits above the value — both are spans, so they need to be blocks */
.contact__label, .contact__value { display: block; }
.contact__label { font-size: 14px; line-height: 1.43; text-transform: uppercase; color: var(--ink-body); }
.contact__value {
  margin-top: 4px;
  font-size: clamp(20px, 1.75vw, 26px);
  font-weight: 800;
  line-height: 1.46;
  color: var(--ink);
  transition: color .2s ease;
}
a.contact__row:hover .contact__value { color: var(--red); }

.form-panel {
  padding: clamp(28px, 3.3vw, 50px);
  background: #fff;
  box-shadow: var(--shadow-panel);
}
.form-panel h3 { font-size: clamp(26px, 2.3vw, 35px); font-weight: 900; line-height: 1.15; color: var(--ink); }
.form-panel form { display: grid; gap: 27px; margin-top: clamp(24px, 2.7vw, 40px); }
.form-panel label { display: block; }
.form-panel input, .form-panel textarea {
  width: 100%;
  padding: 18px 22px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 0;
  font: inherit;
  font-size: 18px;
  line-height: 1.44;
  color: var(--ink-body);
  transition: border-color .2s ease, background-color .2s ease;
}
.form-panel input { height: 64px; }
.form-panel textarea { min-height: 237px; resize: vertical; }
.form-panel input:focus, .form-panel textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue);
}
.form-panel ::placeholder { color: var(--ink-body); opacity: 1; }
.form-panel .btn { justify-self: start; }
.form-panel .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-consent { font-size: 15px; line-height: 1.5; color: var(--ink-body); }
.form-consent a { color: var(--red-link); text-decoration: underline; text-underline-offset: 3px; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.form-foot .form-status { flex: 1 1 200px; }
.form-status {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-body);
}
.form-status[data-state="error"] { color: var(--red); }
.form-status[data-state="ok"] { color: var(--green-alt); }
.field-error { border-color: var(--red) !important; }

@media (max-width: 1080px) {
  .contact__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- footer -- */
.site-footer {
  position: relative;
  padding-block: clamp(48px, 6vw, 90px) clamp(150px, 15vw, 210px);  /* clears the 181px corner squares */
  background: var(--navy-750);
  color: var(--on-dark-dim);
  overflow: hidden;
}
.footer__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.footer__logo img { width: clamp(160px, 14vw, 214px); }
.footer__mail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  justify-self: center;
  text-align: left;
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.45;
  color: #fff;
}
.footer__mail img { width: 36px; height: 36px; flex: none; }
.footer__mail strong { font-weight: 800; text-decoration: underline; }
.socials { display: flex; gap: 10px; }
.socials a {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--navy-600);
  transition: background-color .2s ease, transform .2s ease;
}
.socials a:hover { background: var(--blue); transform: translateY(-3px); }
.socials img { width: 24px; height: 24px; }

.footer__rule {
  height: 1px;
  margin-block: clamp(32px, 4vw, 60px) clamp(30px, 3.6vw, 55px);
  background: rgba(255, 255, 255, .2);
}
/* One card per company — a big outlined country code sits in the corner,
   each card carries its own accent (SK blue, UK red). */
.footer__companies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(30px, 3.6vw, 50px);
}
.footer-co {
  --accent: var(--blue);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: 18px;
  background:
    radial-gradient(110% 90% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  font-size: 15px;
  line-height: 1.6;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}
.footer-co--uk { --accent: var(--red); }
.footer-co::before {      /* accent bar that grows on hover */
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 3px;
  background: var(--accent);
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.footer-co:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 24px 50px rgba(0, 0, 0, .3); }
.footer-co:hover::before { transform: scaleX(1); }
.footer-co__code {
  position: absolute;
  right: -6px; bottom: -34px;
  z-index: -1;
  font-size: clamp(120px, 12vw, 170px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .09);
  transition: transform .8s cubic-bezier(.16, 1, .3, 1), -webkit-text-stroke-color .4s ease;
  pointer-events: none;
}
.footer-co:hover .footer-co__code { transform: translate(-10px, -8px); -webkit-text-stroke-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.footer-co__country {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 12px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}
.footer-co__badge {
  display: grid;
  place-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 11px; letter-spacing: .08em;
}
.footer-co__name { margin: 0 0 4px; font-size: clamp(20px, 1.8vw, 24px); font-weight: 900; color: #fff; }
.footer-co__addr { margin: 0 0 20px; }
.footer-co__ids {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.footer-co__ids div { display: flex; flex-direction: column; gap: 2px; }
.footer-co__ids dt {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.footer-co__ids dd { margin: 0; }
.footer-co__copy {
  position: relative;
  padding: 5px 10px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: 14px; font-weight: 700; line-height: 1.3;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  cursor: copy;
  transition: background-color .2s ease;
}
.footer-co__copy:hover { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.footer-co__copy::after {           /* "Copied" bubble */
  content: attr(data-copied-label);
  position: absolute;
  left: 50%; bottom: calc(100% + 6px);
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--green-alt);
  color: #fff;
  font-size: 11px; font-weight: 800; white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity .2s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.footer-co__copy[data-copied]::after { opacity: 1; transform: translate(-50%, 0); }
.footer-co__note { margin: 0; max-width: 46ch; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .5); }
@media (prefers-reduced-motion: reduce) {
  .footer-co, .footer-co::before, .footer-co__code { transition: none; }
  .footer-co:hover, .footer-co:hover .footer-co__code { transform: none; }
}
.footer__cookie {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.footer__cookie:hover { color: #fff; }
.footer__formats { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: rgba(255, 255, 255, .4); }
.footer__formats [aria-current] { color: rgba(255, 255, 255, .85); }
.footer__bottom .footer__formats a { text-decoration: none; }
.footer__formats-sep { width: 1px; height: 11px; background: rgba(255, 255, 255, .25); }
.footer__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  font-size: 16px;
  line-height: 1.7;
}
.footer__bottom p:last-child { text-align: right; }
.footer__bottom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom a:hover { color: #fff; }
@media (max-width: 980px) {
  .footer__top { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer__bottom { grid-template-columns: 1fr; text-align: center; }
  .footer__bottom p:last-child { text-align: center; }
}

/* -------------------------------------------------------------- process -- */
.steps {
  position: relative;
  display: grid;
  gap: clamp(34px, 4.2vw, 60px);
  max-width: 860px;
  margin: clamp(38px, 4.4vw, 60px) auto 0;
  padding: 0;
  list-style: none;
}
/* one continuous rail from the first badge to the last */
.steps::before {
  content: "";
  position: absolute;
  left: 33px;
  top: 36px;
  bottom: 36px;
  width: 2px;
  background: var(--line);
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: clamp(22px, 2.6vw, 38px);
  align-items: start;
}
.step__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--navy-700);
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .02em;
}
/* the first step carries the accent, the way the services grid does */
.step:first-child .step__num { background: var(--blue); }
.step__body { padding-top: clamp(10px, 1.3vw, 18px); }
.step__title {
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 900;
  line-height: 1.3;
  color: var(--ink-strong);
}
.step__text {
  margin-top: 14px;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-body);
}
@media (max-width: 620px) {
  .steps::before { left: 25px; }
  .step { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
  .step__num { width: 52px; height: 52px; font-size: 17px; }
}

/* ---------------------------------------------------------------- legal -- */
.legal { max-width: 760px; }
.legal__part + .legal__part { margin-top: clamp(48px, 5vw, 72px); padding-top: clamp(40px, 4.4vw, 60px); border-top: 1px solid var(--line); }
.legal__num { font-size: 15px; font-weight: 900; letter-spacing: .1em; color: var(--red); }
.legal .legal__part h2 { margin-top: 6px; font-size: clamp(26px, 2.4vw, 34px); }
.legal__lead { color: var(--ink-strong); }
.legal h3 {
  margin-top: clamp(26px, 2.8vw, 36px);
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink-strong);
}
.legal h3, .legal__part { scroll-margin-top: 110px; }
.legal code { font-size: .92em; padding: 1px 5px; background: var(--surface-soft); }
.legal h2 {
  margin-top: clamp(34px, 4vw, 56px);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 900;
  line-height: 1.3;
  color: var(--ink-strong);
}
.legal h2:first-child { margin-top: 0; }
.legal .body-text { margin-top: 14px; }
.legal a { color: var(--red-link); text-decoration: underline; text-underline-offset: 3px; }
.legal__list { margin: 16px 0 0; padding-left: 22px; list-style: disc; }
.legal__list li { margin-top: 8px; font-size: var(--fs-body); line-height: 1.55; }

/* ------------------------------------------------------------ case study -- */
.case-hero__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--line-rule);
  margin-top: clamp(36px, 4.5vw, 70px);
}
.case-hero__meta h2 {
  font-size: 16px; font-weight: 900; line-height: 1.44;
  text-transform: uppercase; color: var(--ink-strong);
  margin-bottom: 16px;
}
.case-figure { margin-top: clamp(40px, 5vw, 76px); }
.case-figure img { width: 100%; height: auto; }
.case-figure--pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--card-gap);
}
/* Both halves share one box so a landscape shot paired with a portrait one
   cannot leave a tall gap under the shorter of the two. */
.case-figure--pair figure {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-soft);
}
.case-figure--pair figure img { width: 100%; height: 100%; object-fit: cover; }
.case-text {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 724px);
  gap: clamp(24px, 4vw, 66px);
  align-items: start;
  margin-top: clamp(48px, 6vw, 96px);
}
.case-text p { font-size: var(--fs-body); line-height: 1.55; }
@media (max-width: 900px) {
  .case-figure--pair { grid-template-columns: 1fr; }
  .case-text { grid-template-columns: 1fr; }
  .case-hero__meta { grid-template-columns: 1fr; }
}
.pull-quote { max-width: 1202px; }
.testimonial--light { background: var(--surface); color: var(--ink); }
.testimonial--light blockquote { color: var(--ink); }
.testimonial--light .testimonial__quote-mark { opacity: .05; }
.testimonial--light .testimonial__quote-mark img { filter: brightness(0) saturate(100%); }

/* Figma "web-development 9": three page screenshots on a dark gradient plate.
   Composed here rather than exported flat, so the shots stay crisp. */
.case-collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 27.5%);
  justify-content: center;
  column-gap: 4.3%;
  align-items: start;
  aspect-ratio: 1200 / 1432;
  padding: 4.6% 4% 0 5%;
  background: linear-gradient(180deg, #082735 0%, #06090C 100%);
  overflow: hidden;
}
.case-collage img { width: 100%; height: auto; border-radius: 4px; border: 1px solid #fff; }
.case-collage figure { margin: 0; }
.case-collage__l { aspect-ratio: 330 / 1118; margin-top: 4.6%; }
.case-collage__c { aspect-ratio: 330 / 1290; }
.case-collage__r { aspect-ratio: 330 / 1180; margin-top: 4.6%; }

/* ---------------------------------------------------------- reveal on scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------- cookie bar -- */
.btn--sm { min-width: 0; min-height: 50px; padding: 0 22px; font-size: 14px; }
.btn--ghost { --btn-bg: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.btn--ghost:hover { --btn-bg: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.cookie-bar {
  position: fixed;
  z-index: 60;
  right: 16px;
  bottom: 16px;
  left: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  max-width: 860px;
  margin-inline: auto;
  padding: 20px 24px;
  background: #fff;
  box-shadow: var(--shadow-panel), 0 10px 40px rgba(0, 3, 40, .25);
  color: var(--ink-body);
  font-size: 15px;
  line-height: 1.55;
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { flex: 1 1 320px; }
.cookie-bar strong { margin-right: 4px; color: var(--ink); font-weight: 900; }
.cookie-bar a { color: var(--red-link); text-decoration: underline; text-underline-offset: 3px; }
.cookie-bar__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 560px) {
  .cookie-bar__actions { width: 100%; }
  .cookie-bar__actions .btn { flex: 1 1 auto; }
}