/* ==========================================================================
   christianmccarthy.com — site styles
   Single-page, no framework. Custom properties + grid + a little motion.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  --ink:        #10161d;
  --ink-2:      #1d2731;
  --body:       #46545f;
  --muted:      #74838f;
  --line:       #e2e7ec;
  --line-soft:  #eef1f4;
  --paper:      #ffffff;
  --paper-2:    #f6f8fa;
  --paper-3:    #eef2f6;

  --accent:      #c2703a;   /* warm copper, picked from the hero jacket */
  --accent-deep: #a15926;
  --sky:         #12406f;   /* colorado bluebird */
  --sky-deep:    #0a2748;

  --ranes-cyan:  #1a9fc9;
  --ranes-green: #17a862;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Inter", var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1140px;
  --pad: clamp(20px, 5vw, 48px);
  --radius: 14px;
  --radius-btn: 4px;
  --shadow-sm: 0 1px 2px rgba(16, 22, 29, .06), 0 4px 14px rgba(16, 22, 29, .05);
  --shadow-md: 0 2px 6px rgba(16, 22, 29, .07), 0 18px 44px rgba(16, 22, 29, .10);
  --nav-h: 62px;
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-deep); text-decoration: none; }
a:hover { color: var(--accent); }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  font-weight: 700;
}
p { margin: 0 0 1.1em; }
ul { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; color: #fff; }

/* ------------------------------------------------------------- sections -- */
.section { padding: clamp(64px, 9vw, 116px) 0; }
.section--alt { background: var(--paper-2); border-block: 1px solid var(--line-soft); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::after { content: ""; height: 1px; flex: 1; background: var(--line); max-width: 90px; }

.section-title { font-size: clamp(29px, 4vw, 42px); max-width: 22ch; }
.section-intro { font-size: clamp(17px, 1.6vw, 19px); max-width: 62ch; color: var(--body); }

/* ------------------------------------------------------------------ nav -- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid transparent;
  transform: translateY(-100%);
  transition: transform .35s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.nav.is-visible { transform: none; }
.nav.is-solid {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 20px rgba(16, 22, 29, .05);
}
.nav__inner { display: flex; align-items: center; gap: 20px; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.nav__brand {
  font-weight: 700; color: var(--ink); letter-spacing: -.02em; font-size: 16px;
  margin-right: auto; white-space: nowrap;
}
.nav__brand span { color: var(--accent); }
.nav__list { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav__list a {
  display: block; padding: 8px 12px; border-radius: var(--radius-btn);
  font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--body); transition: color .2s, background-color .2s;
}
.nav__list a:hover { color: var(--ink); background: var(--paper-3); }
.nav__list a.is-active { color: var(--accent-deep); background: rgba(194, 112, 58, .10); }
.nav__cta {
  margin-left: 8px; padding: 9px 16px !important; border-radius: var(--radius-btn);
  background: var(--ink); color: #fff !important; font-size: 13.5px; font-weight: 600;
}
.nav__cta:hover { background: var(--accent-deep) !important; color: #fff !important; }

.nav__toggle {
  display: none; width: 42px; height: 42px; border: 1px solid var(--line);
  background: var(--paper); border-radius: var(--radius-btn); cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav__toggle span::before { transform: translateY(-6px); }
.nav__toggle span::after  { transform: translateY(4px); }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: flex-start;
  padding: clamp(96px, 16vh, 180px) 0 0;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background: #0b1f36 url("../img/background/start-page-1100.jpg") center 38% / cover no-repeat;
  transform: scale(1.06);
  will-change: transform;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 20, 38, .70) 0%, rgba(6, 20, 38, .34) 38%, rgba(6, 20, 38, .05) 62%, rgba(6, 20, 38, .55) 100%);
}
.hero__inner { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.hero__text { max-width: 640px; }
.hero h1 {
  color: #fff;
  font-size: clamp(38px, 7.2vw, 76px);
  letter-spacing: -.035em;
  margin: 0;
  text-shadow: 0 2px 30px rgba(4, 14, 26, .45);
}
.hero__rule { width: 64px; height: 3px; background: var(--accent); border: 0; margin: 22px 0 20px; border-radius: 2px; }
.hero__tagline {
  color: #fff; font-size: clamp(17px, 2.2vw, 22px); font-weight: 500;
  margin: 0 0 14px; text-shadow: 0 1px 18px rgba(4, 14, 26, .5);
}
.hero__kicker {
  font-family: var(--font-mono); font-size: clamp(11px, 1.5vw, 13px);
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78); margin: 0;
  text-shadow: 0 1px 14px rgba(4, 14, 26, .6);
}
.hero__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.hero__links a {
  color: #fff; border: 1px solid rgba(255, 255, 255, .45);
  padding: 10px 20px; border-radius: var(--radius-btn); font-size: 14px; font-weight: 600;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  background: rgba(9, 24, 42, .22);
  transition: background-color .2s, border-color .2s, transform .2s;
}
.hero__links a:hover { background: rgba(255, 255, 255, .95); color: var(--ink); border-color: transparent; transform: translateY(-1px); }
.hero__links a.is-primary { background: var(--accent); border-color: var(--accent); }
.hero__links a.is-primary:hover { background: #fff; color: var(--accent-deep); }

.hero__scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  color: rgba(255, 255, 255, .8); font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0));
  animation: drop 2.2s ease-in-out infinite;
}
@keyframes drop { 0%,100% { opacity: .3; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* ---------------------------------------------------------------- about -- */
.about__grid {
  display: grid; gap: clamp(28px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) { .about__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.about__lead { font-size: clamp(19px, 2.1vw, 23px); line-height: 1.5; color: var(--ink-2); font-weight: 500; }
.about__lead strong { color: var(--ink); font-weight: 700; }

.about__aside {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm);
}
.about__aside h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-family: var(--font-mono); font-weight: 600; }
.stack { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.stack li {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: var(--paper-3); border-radius: 6px; padding: 5px 10px;
}
.stack + h3, .about__aside p + h3 { margin-top: 26px; }

/* App-store badges. Official vendor artwork; the Google asset ships with
   its clear space baked in, so it was cropped to the mark and both are
   spaced from here — that way they align on height rather than on the
   padding each vendor happens to include. */
.stores { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.stores a { display: block; transition: opacity .2s; }
.stores a:hover { opacity: .78; }
.stores img { display: block; height: 40px; width: auto; }
/* Inside a bullet the badges support the copy, so they run smaller than
   the standalone size. On --ink their black lozenges nearly vanish, so
   the link carries a hairline rim — outside the vendor artwork, which
   both badge guidelines require stay unmodified. */
.stores--inline { margin-top: 11px; gap: 9px; }
/* nested inside .bullets, so cancel the parent list's marker and indent */
.bullets .stores li { padding-left: 0; }
.bullets .stores li::before { content: none; }
.stores--inline img { height: 32px; }
.stores--inline a { border-radius: 5px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
.stores--inline a:hover { opacity: 1; box-shadow: 0 0 0 1px rgba(255, 255, 255, .38); }

.cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: clamp(36px, 5vw, 56px); list-style: none; }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #d6dde4; }
.card__num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: .12em; }
.card h3 { font-size: 18px; margin: 12px 0 8px; }
.card p { font-size: 15px; margin: 0; color: var(--body); }

/* ------------------------------------------------------------- featured -- */
.featured { background: var(--ink); color: #b7c3ce; position: relative; overflow: hidden; }
.featured::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 70%;
  background: radial-gradient(60% 60% at 30% 40%, rgba(26, 159, 201, .22), transparent 70%),
              radial-gradient(50% 50% at 75% 30%, rgba(23, 168, 98, .16), transparent 70%);
  pointer-events: none;
}
.featured h2, .featured h3, .featured h4 { color: #fff; }
.featured .eyebrow { color: var(--ranes-cyan); }
.featured .eyebrow::after { background: rgba(255, 255, 255, .16); }
.featured .section-intro { color: #aebbc7; }

.featured__head { position: relative; display: grid; gap: 28px; }
@media (min-width: 900px) { .featured__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }

.featured__meta { list-style: none; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.featured__meta dt, .featured__meta .k {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: #6f8090; margin-bottom: 4px;
}
.featured__meta .v { color: #e6edf3; font-size: 15px; font-weight: 600; }

.featured__art {
  position: relative; margin: clamp(34px, 5vw, 56px) 0;
  background: linear-gradient(160deg, rgba(26, 159, 201, .14), rgba(23, 168, 98, .06));
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 20px;
  padding: clamp(16px, 3vw, 34px);
}
.featured__art figcaption {
  font-size: 13px; color: #7e8e9c; margin-top: 14px; text-align: center; font-family: var(--font-mono);
}

.featured__cols { display: grid; gap: clamp(26px, 4vw, 48px); }
@media (min-width: 860px) { .featured__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.featured__cols h3 { font-size: 20px; }
.featured p { color: #aebbc7; }
.featured strong { color: #e6edf3; }

.bullets { list-style: none; display: grid; gap: 12px; }
.bullets li { position: relative; padding-left: 26px; font-size: 15.5px; color: #aebbc7; }
.bullets li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px;
  background: var(--ranes-green); box-shadow: 0 0 0 3px rgba(23, 168, 98, .18);
}
.bullets li strong { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; }

.loop {
  display: grid; gap: 12px; list-style: none; counter-reset: loop;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: clamp(30px, 4vw, 46px) 0 0;
}
.loop li {
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px; padding: 18px 18px 20px; position: relative;
}
.loop li::before {
  counter-increment: loop; content: counter(loop, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 11px; color: var(--ranes-cyan); letter-spacing: .1em;
}
.loop h4 { font-size: 15px; margin: 8px 0 6px; }
.loop p { font-size: 14px; margin: 0; color: #9aa9b7; }

.featured__stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); list-style: none; margin-top: clamp(30px, 4vw, 46px); }
.featured__stats li { border-left: 2px solid rgba(26, 159, 201, .5); padding-left: 16px; }
.featured__stats b { display: block; font-size: clamp(24px, 3vw, 32px); color: #fff; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.featured__stats span { font-size: 13.5px; color: #8b9aa8; }

.featured__note {
  margin-top: clamp(30px, 4vw, 44px); padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 14px; color: #7e8e9c;
}

/* ----------------------------------------------------------------- work -- */
.work__grid {
  list-style: none; display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  margin-top: clamp(34px, 4vw, 52px);
}
.tile {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d6dde4; }
.tile__shot { background: var(--paper-3); border-bottom: 1px solid var(--line-soft); aspect-ratio: 16 / 10; overflow: hidden; }
.tile__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s ease; }
.tile:hover .tile__shot img { transform: scale(1.03); }
.tile__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.tile h3 { font-size: 18px; margin: 0 0 8px; }
.tile p { font-size: 14.5px; margin: 0 0 14px; }
.tile__tools { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); letter-spacing: .04em; margin-bottom: 18px; }
.tile__links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.linkbtn {
  font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: var(--radius-btn);
  border: 1px solid var(--line); color: var(--ink-2); background: var(--paper);
  cursor: pointer; font-family: inherit; transition: background-color .2s, border-color .2s, color .2s;
}
.linkbtn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ----------------------------------------------------------- experience -- */
.timeline { list-style: none; margin-top: clamp(34px, 4vw, 52px); display: grid; gap: 0; }
.tl {
  display: grid; gap: 4px 28px; padding: 24px 0;
  border-top: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .tl { grid-template-columns: 190px minmax(0, 1fr); } }
.tl:last-child { border-bottom: 1px solid var(--line); }
.tl__when { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); letter-spacing: .04em; padding-top: 4px; }
.tl__role { font-size: 18px; margin: 0 0 2px; }
.tl__org { font-size: 14px; font-weight: 600; color: var(--accent-deep); margin: 0 0 8px; }
.tl p { font-size: 15px; margin: 0; }

/* -------------------------------------------------------------- contact -- */
.contact { background: var(--sky-deep); color: #c3d3e4; }
.contact h2, .contact h3 { color: #fff; }
.contact .eyebrow { color: #8fc0f0; }
.contact .eyebrow::after { background: rgba(255, 255, 255, .16); }
.contact__grid { display: grid; gap: clamp(26px, 5vw, 56px); }
@media (min-width: 860px) { .contact__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; } }
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(23, 168, 98, .16); border: 1px solid rgba(23, 168, 98, .4);
  color: #6fe0a6; border-radius: 999px; padding: 7px 16px 7px 14px;
  font-size: 13.5px; font-weight: 600; margin-bottom: 20px;
}
.status-pill::before {
  content: ""; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.contact__lead { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.45; color: #fff; font-weight: 500; }
.contact__list { list-style: none; display: grid; gap: 16px; }
.contact__list .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #7fa0c2; display: block; margin-bottom: 3px; }
.contact__list a, .contact__list .v { color: #fff; font-size: 16px; font-weight: 600; }
.contact__list a:hover { color: #8fc0f0; }

/* LinkedIn mark — one glyph, inked with currentColor so each context tints it. */
.li-mark {
  display: inline-block; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* The contact link is the prominent one: a chip, not a text link. */
.contact__list .li-link {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px 8px 12px; border-radius: var(--radius-btn);
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06);
  transition: background-color .2s, border-color .2s, color .2s;
}
.contact__list .li-link .li-mark { width: 17px; height: 17px; }
.contact__list .li-link:hover { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.btn {
  display: inline-block; padding: 12px 22px; border-radius: var(--radius-btn);
  font-size: 14.5px; font-weight: 600; border: 1px solid rgba(255, 255, 255, .35); color: #fff;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { background: #fff; color: var(--sky-deep); border-color: #fff; transform: translateY(-1px); }
.btn--solid { background: var(--accent); border-color: var(--accent); }
.btn--solid:hover { background: #fff; color: var(--accent-deep); }

/* --------------------------------------------------------------- footer -- */
.footer { background: #0a1523; color: #6b8099; padding: 40px 0; font-size: 14px; }
.footer__inner { display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: center; justify-content: space-between; }
.footer a { color: #a9bdd2; }
.footer a:hover { color: #fff; }
.footer__links { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; }
.footer__links .li-link { display: inline-flex; align-items: center; gap: 7px; }
.footer__links .li-link .li-mark { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- modal -- */
.modal {
  border: 0; padding: 0; width: min(1080px, 94vw); max-width: 94vw; max-height: 90vh;
  border-radius: 16px; background: var(--paper); color: var(--body); box-shadow: var(--shadow-md);
  overflow: hidden;
}
.modal::backdrop { background: rgba(10, 21, 35, .72); backdrop-filter: blur(3px); }
.modal__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--paper-2);
  position: sticky; top: 0;
}
.modal__title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; }
.modal__close {
  border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius-btn); cursor: pointer;
  width: 34px; height: 34px; font-size: 18px; line-height: 1; color: var(--ink-2);
}
.modal__close:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.modal__body { padding: clamp(20px, 3vw, 32px); overflow: auto; max-height: calc(90vh - 62px); font-size: 15.5px; }
.modal__body h2 { font-size: 22px; }
.modal__body .img-project { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 18px; }

/* legacy foundation-ish markup inside the fetched project fragments */
.modal__body .row { display: grid; gap: 24px; margin-bottom: 18px; }
@media (min-width: 760px) {
  .modal__body .row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .modal__body .columns { grid-column: span 12; }
  .modal__body .medium-4 { grid-column: span 4; }
  .modal__body .medium-5 { grid-column: span 5; }
  .modal__body .medium-6 { grid-column: span 6; }
  .modal__body .medium-7 { grid-column: span 7; }
  .modal__body .medium-8 { grid-column: span 8; }
  .modal__body .medium-12 { grid-column: span 12; }
}

/* ------------------------------------------------------------ animation -- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero__scroll::after { animation: none; }
  .card:hover, .tile:hover { transform: none; }
}

/* ---------------------------------------------------------------- small -- */
@media (min-width: 701px) {
  .hero__bg { background-image: url("../img/background/start-page-1920.jpg"); }
}

@media (max-width: 700px) {
  .hero__bg { background-position: 38% 42%; }
  .hero__links a { padding: 9px 16px; font-size: 13.5px; }
}

@media (max-width: 820px) {
  .nav__toggle { display: inline-flex; }
  .nav__list {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line); padding: 10px var(--pad) 18px;
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav__list.is-open { display: flex; }
  .nav__list a { padding: 12px 10px; font-size: 15px; }
  .nav__cta { text-align: center; margin: 6px 0 0; }
}

/* ==========================================================================
   hero — black & white portrait treatment
   Merged in from the former css/site-alt.css. Kept at the end of the file
   so it continues to win the cascade over the base .hero rules above.
   ========================================================================== */

:root {
  --studio: #e9ecef;   /* one flat ground, edge to edge */
}

/* ------------------------------------------------------------- backdrop -- */
.hero--alt {
  align-items: center;
  padding: calc(var(--nav-h) + 24px) 0 0;
  background: var(--studio);
}

/* A crisp SVG pattern — sharp at any pixel density, one consistent field
   across the whole hero, no gradients anywhere. */
.hero__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--studio);
  background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23f2f9fc' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- portrait -- */
.hero__portrait {
  filter: grayscale(1);
  position: absolute;
  right: max(1vw, calc(50vw - var(--wrap) / 2 - 270px));
  bottom: 0;
  z-index: 1;
  height: min(91vh, 870px);
  width: auto;
  pointer-events: none;
}

/* ----------------------------------------------------------------- type -- */
.hero--alt .hero__inner { position: relative; z-index: 3; }
.hero--alt .hero__text { max-width: 560px; }

/* the knot, as an eyebrow above the name — the one piece of brand colour in the hero */
.hero__mark {
  width: clamp(92px, 108px, 168px);
  height: auto;
  margin: 0 0 20px;
  display: block;
}

.hero--alt h1 {
  color: var(--ink);
  text-shadow: 0 0 14px rgba(235, 238, 241, .96), 0 0 5px rgba(235, 238, 241, .96), 0 0 2px rgba(235, 238, 241, .92);
}
.hero--alt .hero__rule { background: var(--accent); }
.hero--alt .hero__tagline { color: var(--ink-2); text-shadow: 0 0 12px rgba(235, 238, 241, .96), 0 0 4px rgba(235, 238, 241, .96); }
.hero--alt .hero__kicker { color: #5c6a75; text-shadow: 0 0 10px rgba(235, 238, 241, .96), 0 0 3px rgba(235, 238, 241, .96); }

.hero--alt .hero__links a {
  color: var(--ink-2);
  background: rgba(255, 255, 255, .78);
  border-color: rgba(31, 45, 60, .14);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero--alt .hero__links a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.hero--alt .hero__links a.is-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.hero--alt .hero__links a.is-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

.hero--alt .hero__scroll {
  color: #6b7883;
  text-shadow: 0 0 10px rgba(235, 238, 241, .96);
  left: max(var(--pad), calc(50vw - var(--wrap) / 2 + var(--pad)));
  transform: none;
  align-items: flex-start;
  z-index: 3;
}
.hero--alt .hero__scroll::after { background: linear-gradient(180deg, rgba(107, 120, 131, .9), rgba(107, 120, 131, 0)); }

/* a hairline where the hero hands off to the page */
.hero--alt::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: rgba(31, 45, 60, .10);
  z-index: 3;
}

/* ------------------------------------------------------------------ nav -- */
/* the hero is light here, so the bar can be present from the first frame */
body[data-nav="always"] .nav { transform: none; }

/* ---------------------------------------------------------------- small -- */
@media (max-width: 1100px) {
  .hero__portrait { right: -9vw; height: min(82vh, 780px); }
  .hero--alt .hero__text { max-width: 48%; }
}

/* ---------------------------------------------------------------- phone --
   No forced full-screen hero here. A phone viewport is tall and narrow, so
   100svh leaves a dead band between the copy and the figure and pushes the
   rest of the page entirely out of sight. Instead the hero is sized by its
   content with a floor, and deliberately stops short of the fold so the next
   section peeks — that peek is the scroll cue, which is why the "SCROLL"
   marker is dropped. The figure is scaled to the hero, not the viewport, so
   the two stay locked together as the copy wraps to more or fewer lines. */
@media (max-width: 780px) {
  .hero--alt {
    /* one figure size drives both the image and the room reserved for it, so
       the two can never drift apart as the copy rewraps */
    --figure: clamp(320px, 46svh, 460px);
    align-items: flex-start;
    min-height: 0;
    height: auto;
    padding: calc(var(--nav-h) + 30px) 0 calc(var(--figure) - 44px);
  }
  .hero--alt .hero__text { max-width: 100%; }
  /* keep the buttons in a narrow column so they wrap away from the figure
     instead of running under it */
  .hero--alt .hero__links { margin-top: 26px; max-width: 340px; }
  .hero__mark { width: 104px; margin-bottom: 16px; }
  .hero--alt .hero__scroll { display: none; }
  .hero__portrait {
    right: -13%;
    height: var(--figure);
    width: auto;
  }
}

@media (max-width: 520px) {
  .hero--alt { --figure: clamp(300px, 42svh, 390px); }
  .hero__portrait { right: -17%; }
}

/* landscape phones: very little vertical room, so keep the figure modest */
@media (max-width: 900px) and (max-height: 520px) {
  .hero--alt { padding-bottom: 190px; }
  .hero__portrait { right: -6%; width: min(46%, 320px); }
}