/* ============================
   Self-hosted Inter (latin variable)
   ============================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-var.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;
}

/* ============================
   Design tokens
   ============================ */
:root {
  --color-navy: #0B1B3D;
  --color-navy-translucent: rgba(11, 27, 61, 0.85);
  --color-blue: #2563FF;
  --color-blue-light: #3B82F6;
  --color-white: #FFFFFF;
  --color-off-white: #F5F7FB;
  --color-border: rgba(11, 27, 61, 0.15);

  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;

  --fs-body: 1.0625rem;
  --fs-h2: clamp(1.75rem, 3vw, 2.5rem);
  --fs-h1: clamp(2rem, 6vw, 4.5rem);

  --lh-body: 1.6;
  --lh-tight: 1.15;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 6rem;

  --radius: 0; /* sharp corners per design */
  --max-width: 1200px;

  --bp-tablet: 768px;
  --bp-desktop: 1024px;
}

/* ============================
   Reset & base
   ============================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-navy);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--color-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: var(--lh-tight); margin: 0 0 var(--space-md); font-weight: 700; }

p { margin: 0 0 var(--space-md); }

/* Skip-to-content link (visually hidden until focused) */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-sm);
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-sm) var(--space-md);
  z-index: 1000;
  transition: top 0.2s;
}
.skip-link:focus { top: var(--space-sm); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Section container helper */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

@media (min-width: 768px) {
  .container { padding: 0 var(--space-lg); }
}

/* Focus rings */
:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
}

/* ============================
   Sticky header / nav
   ============================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.2s ease, backdrop-filter 0.2s ease;
}

.site-header.is-scrolled {
  background: var(--color-navy-translucent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: transparent;
}
.site-header.is-scrolled .site-header__toggle-bar { color: var(--color-white); background: var(--color-white); }
.site-header.is-scrolled .site-header__logo { filter: brightness(0) invert(1); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
}

.site-header__brand {
  display: flex;
  align-items: center;
  color: var(--color-navy);
  text-decoration: none;
}
.site-header__brand:hover { text-decoration: none; }
.site-header__logo {
  height: 36px;
  width: auto;
  display: block;
  transition: filter 0.2s ease;
}

/* Hamburger button */
.site-header__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
}
.site-header__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-navy);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2) {
  opacity: 0;
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Nav list — mobile (default) */
.site-nav {
  position: absolute;
  top: 4.5rem;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.site-nav.is-open { max-height: 26rem; }
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.site-nav a {
  display: block;
  padding: var(--space-xs) 0;
  color: var(--color-navy);
  font-weight: 500;
  text-decoration: none;
}

/* Tablet + desktop nav */
@media (min-width: 768px) {
  .site-header__toggle { display: none; }
  .site-nav {
    position: static;
    background: transparent;
    border-bottom: none;
    max-height: none;
    overflow: visible;
  }
  .site-nav ul {
    flex-direction: row;
    gap: var(--space-md);
    padding: 0;
  }
  .site-nav a { padding: 0; }
  .site-nav a:hover { color: var(--color-blue); }

  /* On desktop, nav links sit directly on the header — flip to white when scrolled */
  .site-header.is-scrolled .site-nav a { color: var(--color-white); }
  .site-header.is-scrolled .site-nav a:hover { color: var(--color-blue-light); }
}

/* Temporary section placeholders (replaced in later tasks) */
.placeholder { padding: 8rem var(--space-md); text-align: center; }
.placeholder--alt { background: var(--color-off-white); }

/* ============================
   Hero
   ============================ */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-xl) 0 var(--space-xl);
  background: var(--color-white);
}

.hero__streak {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(125deg,
      transparent 40%,
      rgba(37, 99, 255, 0.07) 50%,
      rgba(37, 99, 255, 0.12) 55%,
      transparent 65%);
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: center;
  text-align: center;
}

.hero__copy { max-width: 36rem; }

.hero__eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-md);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue);
}

.hero__headline {
  font-size: var(--fs-h1);
  line-height: 1.05;
  margin: 0 0 var(--space-md);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero__accent {
  background: linear-gradient(120deg, var(--color-blue) 0%, var(--color-blue-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub {
  font-size: 1.125rem;
  margin: 0 0 var(--space-lg);
  color: var(--color-navy);
  opacity: 0.85;
}

.hero__email-fallback {
  margin: var(--space-md) 0 0;
  font-size: 0.9375rem;
  opacity: 0.7;
}

.hero__visual {
  width: 100%;
  display: flex;
  justify-content: center;
}
.hero__monogram {
  width: clamp(180px, 50vw, 360px);
  height: auto;
  filter: drop-shadow(0 12px 40px rgba(37, 99, 255, 0.15));
}

/* Primary CTA button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) calc(var(--space-md) + var(--space-xs));
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline-offset: 4px; }

.btn--primary {
  background: var(--color-blue);
  color: var(--color-white);
}
.btn--primary:hover {
  background: linear-gradient(120deg, var(--color-blue) 0%, var(--color-blue-light) 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px rgba(37, 99, 255, 0.6);
}
.btn__arrow { transition: transform 0.2s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Hero — side-by-side at desktop */
@media (min-width: 1024px) {
  .hero { padding: calc(var(--space-xl) + 1rem) 0 calc(var(--space-xl) + 2rem); }
  .hero__inner {
    flex-direction: row;
    text-align: left;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
  }
  .hero__copy { max-width: 32rem; }
  .hero__visual { width: auto; }
  .hero__monogram { width: clamp(320px, 32vw, 520px); }
}

/* ============================
   Shared section helpers
   ============================ */
.section__eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-sm);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue);
}
.section__heading {
  font-size: var(--fs-h2);
  margin: 0 0 var(--space-sm);
  letter-spacing: -0.02em;
}
.section__lede {
  max-width: 40rem;
  margin: 0 0 var(--space-lg);
  font-size: 1.0625rem;
  opacity: 0.8;
}

/* Section spacing & alternating backgrounds */
.services,
.startup,
.about,
.contact { padding: var(--space-xl) 0; position: relative; }
.services { background: var(--color-off-white); }
.startup { background: var(--color-off-white); }

/* ============================
   Services
   ============================ */
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-navy);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.service-card:hover {
  border-color: var(--color-blue);
  text-decoration: none;
  transform: translateY(-3px);
}

.service-card__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}
.service-card__body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  opacity: 0.85;
}
.service-card__cta {
  margin-top: auto;
  padding-top: var(--space-sm);
  font-weight: 700;
  color: var(--color-blue);
}

.service-card--lead {
  border-top: 4px solid var(--color-blue);
}
.service-card--lead .service-card__title::after {
  content: ' ●';
  color: var(--color-blue);
  font-size: 0.7em;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .service-card { padding: var(--space-md) var(--space-md); }
}
@media (min-width: 1024px) {
  .services__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================
   Work / clients
   ============================ */
.work {
  background: var(--color-navy);
  padding: var(--space-xl) 0;
  position: relative;
}
/* Sits between .about (white) and .startup (off-white); navy keeps it from
   colliding with either. Note .contact is also navy - if this section is ever
   moved next to it, the two will merge into one over-tall dark block. */
.work .section__eyebrow { color: var(--color-blue-light); }
.work .section__heading { color: var(--color-white); }
.work .section__lede { color: var(--color-white); opacity: 0.85; }

/* Flex rather than grid: five items in a 4-column grid strands one orphan on
   the second row. justify-content centres a short final row, and a sixth or
   seventh client needs no CSS change. */
.work__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
}
.work__item { flex: 0 1 100%; }

.work__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  height: 100%;
  padding: var(--space-md);
  /* Anchors the name bar and clips it while it sits below the tile edge. */
  position: relative;
  overflow: hidden;
  /* Transparent rather than absent: reserves the 1px so the tile does not
     shift when the hover border appears. */
  border: 1px solid transparent;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease,
              background-color 0.2s ease;
}
/* Hover lights the whole tile, not just the logo. Four of the five logos are
   black artwork drawn for a light background - dropping the silhouette filter
   while the tile stayed navy made them vanish. Each tile hovers to the
   background its logo was actually designed for, set per item via
   --work-hover-bg and defaulting to white. */
.work__link:hover {
  background: var(--work-hover-bg, var(--color-white));
  border-color: var(--color-blue);
  text-decoration: none;
  transform: translateY(-3px);
}
.work__link:hover .work__logo { filter: none; }

/* Name bar: slides up across the bottom of the tile on hover, so it never
   moves the grid. Blue rather than navy because Vehtra's tile stays navy on
   hover and a navy bar would vanish there. The text stays in the DOM while
   hidden, so it is still the link's accessible name and crawlable text. */
.work__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-blue);
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.2s ease;
}
.work__link:hover .work__name,
.work__link:focus-visible .work__name { transform: translateY(0); }

/* Touch screens have no hover, so the names would never be seen there. Show
   them permanently, with extra bottom padding so the bar clears the logo. */
@media (hover: none) {
  .work__link { padding-bottom: calc(var(--space-md) + 2rem); }
  .work__name { transform: none; }
}

/* Sant Building Group's logo is black and red drawn on a yellow field. The
   yellow is keyed out of the asset so the silhouette works, so the tile has
   to supply it back on hover or the logo shows in the wrong presentation. */
.work__item--sbg { --work-hover-bg: #FDC701; }

/* Our Dream Day is a wedding brand - its panel is a soft pink rather than
   plain white. Its wordmark is near-black, so it still reads. */
.work__item--odd { --work-hover-bg: #F8D9D9; }

/* Vehtra's wordmark is white, so it is the one logo that needs to stay on a
   dark tile. Its hover keeps the navy background and only the logo changes. */
.work__item--on-dark { --work-hover-bg: transparent; }

/* Fixed-height media box so the client names align across the row. */
.work__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.5rem;
  width: 100%;
}

.work__logo {
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Flattens any logo to a white silhouette from its alpha channel, so five
     unrelated brand palettes read as one set - and rescues Vehtra, whose
     wordmark is white and would otherwise be invisible. Lifted on hover. */
  filter: brightness(0) invert(1);
  transition: filter 0.2s ease;
}

/* Per-logo heights, balanced by optical area rather than by height, because
   the aspect ratios span 0.94 (Sant Building Group) to 4.93 (Our Dream Day). */
.work__logo--sbg    { max-height: 5rem; }
.work__logo--apex   { max-height: 4.25rem; }
.work__logo--vehtra { max-height: 3.5rem; }
.work__logo--comcar { max-height: 3.25rem; }
.work__logo--odd    { max-height: 2.25rem; }

@media (min-width: 768px) {
  .work__item { flex: 0 1 calc(50% - (var(--space-md) / 2)); }
}
@media (min-width: 1024px) {
  .work__item { flex: 0 1 calc(33.333% - (var(--space-md) * 2 / 3)); }
}

/* ============================
   About
   ============================ */
.about { background: var(--color-white); }
.about__inner { max-width: 44rem; }
.about__copy p { font-size: 1.0625rem; line-height: 1.7; }
.about__copy p:last-child { margin-bottom: 0; }

/* ============================
   Startup Package
   ============================ */
.startup .section__heading { max-width: 32rem; }

.text-accent {
  background: linear-gradient(120deg, var(--color-blue) 0%, var(--color-blue-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.startup__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.startup-pillar {
  padding: var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-blue);
}
.startup-pillar__num {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-blue);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
}
.startup-pillar__title {
  font-size: 1.1875rem;
  margin: 0 0 var(--space-sm);
}
.startup-pillar__body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  opacity: 0.85;
}

.startup__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-lg);
}

@media (min-width: 768px) {
  .startup__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================
   Contact section
   ============================ */
.contact { background: var(--color-navy); color: var(--color-white); text-align: center; }
.contact .section__eyebrow { color: var(--color-blue-light); }
.contact .section__heading { color: var(--color-white); }
.contact__lede {
  max-width: 38rem;
  margin: 0 auto var(--space-lg);
  opacity: 0.85;
  font-size: 1.0625rem;
}
.contact__btn { font-size: 1.125rem; }

/* ============================
   Footer
   ============================ */
.site-footer {
  padding: var(--space-lg) 0;
  background: var(--color-navy);
  color: var(--color-white);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}
.site-footer__brand img {
  width: clamp(180px, 30vw, 240px);
  height: auto;
  filter: brightness(0) invert(1);
}
.site-footer__email a { color: var(--color-blue-light); font-weight: 500; }
.site-footer__email a:hover { color: var(--color-white); }
.site-footer__copy { margin: 0; opacity: 0.6; font-size: 0.875rem; }

@media (min-width: 768px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ============================
   Reveal-on-scroll
   Gated behind .js so content stays visible without JavaScript.
   ============================ */
[data-reveal] { opacity: 1; transform: none; }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================
   Service pages
   ============================ */
.page-hero {
  padding: var(--space-xl) 0 var(--space-lg);
  background: var(--color-off-white);
  border-bottom: 1px solid var(--color-border);
}
.page-hero__eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-sm);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue);
}
.page-hero h1 {
  font-size: var(--fs-h2);
  max-width: 30rem;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-md);
}
.page-hero__lede {
  max-width: 40rem;
  margin: 0;
  font-size: 1.125rem;
  opacity: 0.85;
}

.breadcrumb { padding: var(--space-md) 0 0; font-size: 0.875rem; }
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
}
.breadcrumb li::after { content: '/'; margin-left: var(--space-xs); opacity: 0.4; }
.breadcrumb li:last-child::after { content: ''; }
.breadcrumb a { color: var(--color-navy); opacity: 0.7; }
.breadcrumb [aria-current='page'] { opacity: 0.5; }

.prose { padding: var(--space-xl) 0; }
.prose__row { max-width: 44rem; }
.prose__row + .prose__row { margin-top: var(--space-lg); }
.prose h2 { font-size: 1.5rem; margin: 0 0 var(--space-md); }
.prose h3 { font-size: 1.1875rem; margin: var(--space-md) 0 var(--space-xs); }
.prose h3:first-child { margin-top: 0; }
.prose p { line-height: 1.7; }
.prose ul { margin: 0 0 var(--space-md); padding-left: 1.25rem; }
.prose li { margin-bottom: var(--space-xs); line-height: 1.6; }
.prose__body > :last-child { margin-bottom: 0; }

/* Desktop: heading moves into a left rail so the body uses the full container
   width without the line length becoming unreadable. */
@media (min-width: 1024px) {
  .prose__row {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
    max-width: none;
  }
  .prose__row + .prose__row { margin-top: var(--space-xl); }
  .prose__body { max-width: 42rem; }
}

.faq { padding: var(--space-xl) 0; background: var(--color-off-white); }
.faq__item {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
}
.faq__item:last-child { border-bottom: none; }

@media (min-width: 900px) {
  .faq__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-xl);
  }
  .faq__item:last-child { border-bottom: 1px solid var(--color-border); }
}
.faq__q { font-size: 1.0625rem; margin: 0 0 var(--space-xs); font-weight: 700; }
.faq__a { margin: 0; opacity: 0.85; line-height: 1.65; }

.page-cta {
  padding: var(--space-xl) 0;
  background: var(--color-navy);
  color: var(--color-white);
  text-align: center;
}
.page-cta h2 { color: var(--color-white); font-size: var(--fs-h2); }
.page-cta p {
  max-width: 38rem;
  margin: 0 auto var(--space-lg);
  opacity: 0.85;
}

.related { padding: var(--space-lg) 0; }
.related h2 { font-size: 1.125rem; margin: 0 0 var(--space-sm); }
.related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-md); }