/* ------------------------------------------------------------------
   McIntire Capital, dark

   The page colour is sampled from the photo's sky (#030e1a), and the
   photo's top and bottom edges fade into it, so the skyline sits in
   the page instead of on it. Warm amber, taken from the lit windows
   in the photo, is used only for interactive states.

   Type: Bricolage Grotesque for headings (a grotesk with real character
   that tightens as it gets larger) over Inter for body text.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #030e1a;
  --panel: #071624;
  --panel-hover: #0a1c2d;
  --line: #16283a;
  --white: #f4f8fb;
  --text: #c5d0dc;
  --muted: #8fa2b5;
  --amber: #f2b04a;
  --amber-hover: #f7c374;
  --on-amber: #0a1520;

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;

  --bar: 72px;
  --pad: clamp(20px, 5vw, 48px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--bar);
  background: var(--bg);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
p { text-wrap: pretty; }

a { color: inherit; }

/* No double-tap zoom delay on links and buttons; tap highlight matches the accent */
a,
.btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(242 176 74 / 0.2);
}

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

::selection { background: rgb(242 176 74 / 0.35); color: var(--white); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  left: var(--pad);
  top: 12px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--amber);
  color: var(--on-amber);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--pad);
}

h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--white);
  text-wrap: balance;
}

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */

.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--bar);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.bar-in {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.bar[data-scrolled] {
  background: var(--bg);
  border-bottom-color: var(--line);
}

.brand {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
  text-decoration: none;
  transition: opacity 150ms ease;
}

.bar-nav {
  display: flex;
  gap: clamp(20px, 3vw, 36px);
}

.bar-nav a {
  position: relative;
  padding-block: 12px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
}

.bar-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--ease-out);
}

/* ---------------------------------------------------------------
   Hero: at least one viewport tall. Copy is centred in the space
   above; the photo sits on the bottom edge and fades into the page
   colour at its top and bottom, so there is no visible seam.
   --------------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  overflow: hidden;
}

.hero-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--bar) + clamp(40px, 10vh, 120px)) var(--pad) clamp(8px, 2vh, 24px);
  text-align: center;
}

.hero h1 {
  max-width: 14em;
  font-family: var(--display);
  font-size: clamp(2.25rem, 4.8vw, 4.5rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--white);
  text-wrap: balance;
}

.hero-sub {
  max-width: 34em;
  margin-top: 24px;
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.55;
  color: var(--text);
  text-wrap: balance;
}

/* 2000x573 photo: natural height is 28.65vw; on narrow screens it is cropped to the middle */
.city {
  width: 100%;
  height: clamp(260px, 28.65vw, 660px);
  object-fit: cover;
  object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 82%, transparent 100%);
}

/* ---------------------------------------------------------------
   Portfolio: one row per company, a small screenshot at the left
   --------------------------------------------------------------- */

.portfolio { padding-block: clamp(64px, 8vw, 112px) clamp(72px, 9vw, 120px); }

.rows {
  margin-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--line);
}

.row {
  position: relative;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(20px, 3vw, 44px);
  padding-block: 24px;
  border-bottom: 1px solid var(--line);
}

.row-shot {
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 298;
  transition: border-color 150ms ease;
  object-fit: cover;
  object-position: top;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.row h3 {
  font-family: var(--display);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--white);
}

.row-text p {
  max-width: 34em;
  margin-top: 8px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}

.tag {
  display: block;
  margin-top: 10px;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* The whole row is the click target; the visible link stays the accessible name */
.row-link {
  font-weight: 600;
  white-space: nowrap;
  color: var(--amber);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.row-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.row-link:focus-visible { outline-offset: 0; }
.row:has(.row-link:focus-visible) { outline: 2px solid var(--amber); outline-offset: -2px; }

/* ---------------------------------------------------------------
   Contact
   --------------------------------------------------------------- */

.contact { padding-block: 0 clamp(72px, 9vw, 120px); }

.contact .wrap {
  padding-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--line);
}

.contact p {
  max-width: 32em;
  margin-top: 20px;
  font-size: 1.125rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 32px;
  padding: 0 26px;
  background: var(--amber);
  color: var(--on-amber);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}

.btn:active { transform: scale(0.97); }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */

.foot {
  padding-block: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
}

.foot-brand {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--white);
}

.foot-nav { display: flex; gap: 28px; }

.foot-nav a {
  padding-block: 12px;
  font-size: 0.9375rem;
  color: var(--white);
  text-decoration: none;
}

.foot-legal {
  max-width: 44em;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  line-height: 1.6;
}

.foot-copy { margin-top: 16px; font-size: 0.875rem; }

/* ---------------------------------------------------------------
   Motion: one entrance on load, then hover only where hover exists
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  [data-in] {
    animation: rise 640ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 80ms + 60ms);
  }

  [data-rise] {
    animation: lift 1000ms var(--ease-out) 200ms both;
  }

  @keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
  }

  @keyframes lift {
    from { opacity: 0; transform: translateY(24px); }
  }
}

@media (hover: hover) and (pointer: fine) {
  .bar-nav a:hover::after { transform: scaleX(1); }
  .brand:hover { opacity: 0.75; }
  .row:hover .row-shot { border-color: var(--muted); }
  .row-link:hover { color: var(--amber-hover); }
  .btn:hover { background: var(--amber-hover); }
  .foot-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* ---------------------------------------------------------------
   Smaller screens
   --------------------------------------------------------------- */

@media (max-width: 52rem) {
  .row { grid-template-columns: 160px minmax(0, 1fr); row-gap: 14px; }
  .row-link { grid-column: 2; justify-self: start; }
}

@media (max-width: 36rem) {
  .row { grid-template-columns: 1fr; }
  .row-shot { max-width: 320px; }
  .row-link { grid-column: 1; }
  .brand { font-size: 1.25rem; }
  .bar-nav { gap: 18px; }
  .bar-nav a[href="#portfolio"] { display: none; }
}