/* ============================================
   CSS Custom Properties
   ============================================ */
:root {
  /* Light theme. The page carries a pale blue-grey tone and the bands and
     cards are pure white, so cards lift off the surface rather than relying
     on a border, and the page throws less glare than full white. */
  --bg:          #f7f9fd;
  --bg-surface:  #ffffff;
  --bg-card:     #ffffff;

  /* On a light page the accent has to be dark enough to read as text and to
     carry white text on top of it as a button fill. */
  --accent:      #1a5fd0;
  --accent-deep: #144da8;
  --accent-dim:  #eaf1fd;
  --accent-line: #c3d8f7;
  --accent-ink:  #164ea8;

  --text:        #111827;
  --text-muted:  #4b5768;
  --border:      #dee5f0;
  --border-light: #cbd5e6;
  /* Cards are white on a white page, so their border is the only thing
     giving them an edge. It has to be stronger than a hairline divider. */
  --card-border:  #c6d2e3;

  /* Secondary button: a filled deep blue rather than a hollow outline, which
     disappeared against the dark page. The border is what draws the button's
     edge, so it stays light enough to be seen against the background on its own. */
  --btn-2-bg:           #eaf1fd;
  --btn-2-text:         #164ea8;
  --btn-2-border:       #4a80d0;
  --btn-2-bg-hover:     #dbe8fb;
  --btn-2-border-hover: #3f76c8;
  --nav-height:  64px;
  --max-width:   960px;
  --radius:      6px;
  --transition:  0.2s ease;
}

/* ============================================
   Reset & Base
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--accent-deep);
}

ul {
  list-style: none;
}

/* height: auto stops the HTML height="..." attribute from being applied as a
   presentational hint, which would otherwise squash images set by width alone */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ============================================
   Navigation
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  display: flex;
  align-items: center;
}

.nav__inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav__logo {
  display: block;
  height: 44px;
  width: auto;
  transition: opacity var(--transition);
}

.nav__brand:hover .nav__logo {
  opacity: 0.8;
}

.nav__links {
  display: flex;
  gap: 32px;
  align-items: center;
}

.nav__links a {
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding-bottom: 3px;
  /* transparent by default so the active state changes nothing but colour */
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.nav__links a:hover {
  color: var(--accent);
}

/* The current section is underlined as well as coloured. Blue and grey sit
   too close in brightness to be told apart by hue alone. */
.nav__links a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  transition: transform var(--transition), opacity var(--transition);
}

.nav__hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.nav__mobile {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  padding: 16px 24px 24px;
  flex-direction: column;
  gap: 4px;
  z-index: 999;
}

.nav__mobile.open {
  display: flex;
}

.nav__mobile a {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.nav__mobile a:last-child {
  border-bottom: none;
}

.nav__mobile a:hover {
  color: var(--accent);
}

/* Same idea as the desktop underline, turned on its side */
.nav__mobile a.active {
  color: var(--accent);
  border-left: 3px solid var(--accent);
  padding-left: 12px;
}

/* ============================================
   Page Wrapper
   ============================================ */
.page {
  padding-top: var(--nav-height);
  flex: 1;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================
   Section
   ============================================ */
.section {
  padding: 72px 0;
}

.section__header {
  margin-bottom: 48px;
}

.section__title {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 16px;
}

.section__title::before {
  content: '';
  display: block;
  width: 4px;
  height: 1.2em;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}

.section__subtitle {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 1rem;
  /* wide enough for the longest subtitle to sit on one line at desktop: the
     Work one needs 657px, the Services one 598px. */
  max-width: 700px;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  cursor: pointer;
  border: 2px solid transparent;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn__icon {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-primary {
  /* dark text on light blue, rather than white on mid blue,
     which never cleared AA */
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #ffffff;
}

.btn-secondary {
  background: var(--btn-2-bg);
  color: var(--btn-2-text);
  border-color: var(--btn-2-border);
}

.btn-secondary:hover {
  background: var(--btn-2-bg-hover);
  border-color: var(--btn-2-border-hover);
  color: var(--btn-2-text);
}

/* ============================================
   Cards
   ============================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 32px;
  transition: border-color var(--transition), transform var(--transition);
}

.card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.card-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ============================================
   Work cards (portfolio)
   ============================================ */
/* auto-fill, not auto-fit, so a single card keeps its column width
   instead of stretching across the full row */
.work-grid {
  display: grid;
  gap: 24px;
  /* Two explicit columns rather than auto-fill. The featured card spans the
     full row, so auto-fill left a third empty track beside the two cards
     underneath; a fixed count keeps the lower row the same width as the
     featured card above it. */
  grid-template-columns: repeat(2, 1fr);
}

.work-card {
  background: var(--bg-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition), transform var(--transition);
}

/* Only a card that is genuinely a link should lift on hover. The cards now carry
   their own controls (the gallery dots) instead of being one big link, so a plain
   card must not advertise itself as clickable. */
a.work-card:hover,
a.work-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
  color: inherit;
}

/* 2:1 matches a typical browser-window screenshot, so nothing is cropped.
   Keep future screenshots near this ratio — object-fit: cover trims to fit. */
.work-card__thumb {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: top center;
  background: var(--bg);
  border-bottom: 1px solid var(--card-border);
}

.work-card__body {
  padding: 20px 22px 22px;
}

.work-card__kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.work-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 8px;
}

.work-card__desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.work-card .tags {
  margin-top: 14px;
}

.work-note,
.note {
  margin-top: 28px;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 620px;
}

/* Centred call-to-action at the foot of a section */
.section__cta {
  text-align: center;
  margin-top: 48px;
}

/* ============================================
   Tags / Chips
   ============================================ */
.tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--accent-dim);
  color: var(--accent-ink);
  border: 1px solid var(--accent-line);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* A tag carrying its own icon. The svg inherits the tag's colour. */
.tag--icon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.tag--icon svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ============================================
   Divider
   ============================================ */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 48px 0;
}

/* ============================================
   Footer
   ============================================ */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 32px 0;
}

.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer__copy {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.footer__links {
  display: flex;
  gap: 20px;
}

.footer__links a {
  color: var(--text-muted);
  font-size: 0.85rem;
  transition: color var(--transition);
}

.footer__links a:hover {
  color: var(--accent);
}

/* ============================================
   Hero (index.html)
   ============================================ */
.hero {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(26, 95, 208, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

.hero__content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px 24px;
  width: 100%;
}

.hero__name {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 8px;
}

.hero__accent-line {
  width: 80px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  margin: 20px 0 28px;
}

.hero__role {
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.hero__tagline {
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  color: var(--text-muted);
  max-width: 520px;
  line-height: 1.7;
  margin-bottom: 40px;
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ============================================
   About page
   ============================================ */
.about-bio p {
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.8;
}

.about-bio p:last-child {
  margin-bottom: 0;
}

.glance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

/* The icon sits beside the number and the pair is centred as a group.
   flex-wrap lets the icon drop back above the number on a narrow card. */
.glance-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
}

.glance-card__icon {
  color: var(--accent);
  line-height: 0;
  flex-shrink: 0;
}

.glance-card__icon svg {
  width: 36px;
  height: 36px;
}

.glance-card__value {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.glance-card__label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* ============================================
   Services page
   ============================================ */
/* Line icons: sized here, coloured via currentColor so they inherit the accent */
.service-card__icon {
  color: var(--accent);
  line-height: 0;
  margin-bottom: 16px;
}

.service-card__icon svg {
  width: 30px;
  height: 30px;
}

/* Step number: same footprint as a service icon, so the cards line up */
.step__number {
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}

.service-card__desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 20px;
  line-height: 1.7;
}

.service-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.service-card__list li {
  font-size: 0.875rem;
  color: var(--text-muted);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* A drawn circle rather than a bullet character, so the size is exact and it
   does not shift between fonts. The top margin centres it on the first line
   of text, allowing for the leading above the first line. */
.service-card__list li::before {
  content: '';
  width: 5px;
  height: 5px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* A labelled group of tags (About: standards, systems) */
.skill-group {
  margin-bottom: 20px;
}

.skill-group:last-child {
  margin-bottom: 0;
}

.skill-group__label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

/* ============================================
   Contact page
   ============================================ */
.contact-center {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.contact-center .section__title {
  justify-content: center;
}

.contact-center .section__title::before {
  display: none;
}

.contact-center p {
  color: var(--text-muted);
  /* equal above and below, so the line sits centred between the heading
     and the buttons rather than flush against the heading */
  margin: 32px 0;
  line-height: 1.8;
}

.contact-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
  .nav__links {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  .section {
    padding: 48px 0;
  }

  .work-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Focus states
   Keyboard users need to see where they are. The near-black
   background swallows the browser's default focus ring, so
   links and buttons get an explicit one.
   ============================================ */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================
   Reduced motion
   The page smooth-scrolls a long way when a nav link is
   clicked, which is unpleasant for anyone with vestibular
   sensitivity. Honour the setting their OS already carries.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   Work card gallery
   Up to three screenshots per card. The dots sit over the bottom-right of the
   image on a white pill, so they cost the card no extra height and stay legible
   over any screenshot. A card holding one image gets no dots at all — the
   script only builds them when there is more than one.
   --------------------------------------------------------------------------- */

.work-card__gallery {
  position: relative;
  aspect-ratio: 2 / 1;
  background: var(--bg);
  border-bottom: 1px solid var(--card-border);
}

/* Inside a gallery the images stack, so they come out of flow and the gallery
   itself carries the height and the border. */
.work-card__gallery .work-card__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.work-card__gallery .work-card__thumb[data-active] {
  opacity: 1;
}

.work-card__dots {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border: 1px solid var(--card-border);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(3px);
}

.work-card__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  background: var(--card-border);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition),
              border-color var(--transition);
}

.work-card__dot:hover {
  background: var(--btn-2-border);
  border-color: var(--btn-2-border);
}

.work-card__dot[aria-current="true"] {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.15);
}

.work-card__dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .work-card__gallery .work-card__thumb {
    transition: none;
  }
}