/* ==========================================================================
   if-then-now LLC — design tokens
   Single source of truth for color, type, spacing. No magic values below.
   ========================================================================== */
:root {
  /* Brand palette (carried over from the previous site's orange/ink identity) */
  --color-primary: #fe8510;
  --color-primary-dark: #ba5c02;
  --color-primary-darker: #663202;
  --color-ink: #1b1b1b;
  --color-ink-soft: #474747;
  --color-muted: #575757;
  --color-line: #e2e2e2;
  --color-surface: #ffffff;
  --color-surface-alt: #f6f6f6;
  --color-dark: #161616;
  --color-dark-soft: #232323;

  /* Type */
  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-body: 'Montserrat', arial, sans-serif;
  --step-hero: clamp(2rem, 4.5vw + 1rem, 3.75rem);
  --step-h2: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  --step-h3: clamp(1.25rem, 1.2vw + 1rem, 1.5rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Layout */
  --content-max: 1180px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-card: 0 10px 30px rgba(27, 27, 27, 0.08);
  --shadow-card-hover: 0 18px 40px rgba(27, 27, 27, 0.14);
  --nav-height: 76px;
  --transition: 200ms ease;
}

:root[data-theme='dark'] {
  --color-surface: #161616;
  --color-surface-alt: #1e1e1e;
  --color-ink: #f4f4f4;
  --color-ink-soft: #d4d4d4;
  --color-muted: #b7b7b7;
  --color-line: #333333;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-surface: #161616;
    --color-surface-alt: #1e1e1e;
    --color-ink: #f4f4f4;
    --color-ink-soft: #d4d4d4;
    --color-muted: #b7b7b7;
    --color-line: #333333;
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* height: auto is load-bearing — without it, an img carrying width/height
   attributes keeps its attribute height while max-width shrinks the width,
   which stretches the image vertically. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary);
  color: #111;
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.section-heading {
  font-family: var(--font-display);
  font-size: var(--step-h2);
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: var(--space-sm);
}

.section-lede {
  max-width: 62ch;
  color: var(--color-ink-soft);
  font-size: 1.05rem;
}

.section {
  padding-block: var(--space-2xl);
}

.section--alt { background: var(--color-surface-alt); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  /* A button label breaking mid-phrase reads as a layout fault, never as design. */
  white-space: nowrap;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-primary);
  color: #171100;
}
.btn--primary:hover { background: var(--color-primary-dark); color: #fff; }

.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

.btn--outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn--outline:hover { background: var(--color-primary); color: #171100; }

/* ==========================================================================
   Header / nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: rgba(22, 22, 22, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: #fff;
  /* The brand was being compressed to 66px of its natural 173px by the nav's
     flex row, which broke the wordmark across lines. It is not negotiable space. */
  flex: none;
}
.brand__mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__links {
  display: flex;
  align-items: center;
  /* Seven items at the old 2.5rem gap overflowed the row and forced the flex
     items below their text width, wrapping the two-word labels onto two and
     three lines. 1rem is what actually fits: the nav is capped at
     --content-max, so a vw-based gap keeps growing after the container has
     stopped and overflows on wide screens. Fixed units are correct here. */
  gap: 1rem;
  list-style: none;
}
/* Never compress a label below its natural width... */
.nav__links li { flex: none; }
.nav__links a {
  text-decoration: none;
  color: #eee;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  position: relative;
  padding-block: 0.35rem;
  /* ...and never break one across lines. */
  white-space: nowrap;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--color-primary);
  transition: right var(--transition);
}
.nav__links a:hover::after,
.nav__links a.is-active::after { right: 0; }

/* Tighter than the default .btn padding purely to buy the nav row the width it
   needs to keep every label on one line. */
.nav__cta { display: none; flex: none; padding-inline: 1.25rem; }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.nav__toggle svg { width: 22px; height: 22px; }

/* 1200px, not 900px: below this the brand, seven nowrap links and the CTA
   genuinely do not fit on one row, and forcing them to overflowed the header.
   Keep the hamburger until there is real room. Mirrored by SITE_CONFIG.navBreakpoint. */
@media (min-width: 1200px) {
  .nav__toggle { display: none; }
  .nav__cta { display: inline-flex; }
}

@media (max-width: 1199px) {
  .nav__links {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    /* Height is set explicitly rather than via `bottom: 0`. .site-header carries
       backdrop-filter, which makes it the containing block for position:fixed
       descendants — so `bottom: 0` resolved against the 76px header and collapsed
       this panel to ~80px, hiding six of the seven links behind an inner
       scrollbar. An explicit height is immune to which ancestor wins. */
    height: calc(100vh - var(--nav-height));
    height: calc(100dvh - var(--nav-height));
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-lg) var(--space-md);
    background: var(--color-dark);
    gap: var(--space-md);
    /* Parked above the viewport, not off to the right. A panel sitting at
       translateX(100%) made the document twice the viewport width and let the
       whole page be dragged sideways to reveal it; overflow above the top edge
       is never scrollable, so hiding upwards cannot create that. It also reads
       naturally: a full-width panel drops down from behind the header. */
    transform: translateY(-100%);
    /* visibility, not just transform. Translated out of view the panel still
       overlaps the header and swallows taps meant for the hamburger, so the menu
       could not be opened at all. A hidden element is not hit-tested. The 0s
       delay holds it visible for the length of the slide-out. */
    visibility: hidden;
    transition: transform var(--transition), visibility 0s linear var(--transition);
    overflow-y: auto;
  }
  .nav__links.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--transition), visibility 0s;
  }
  .nav__links a { font-size: 1.1rem; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex;
  align-items: center;
  color: #fff;
  /* Path is relative to this stylesheet (src/css/), not to index.html */
  background: var(--color-dark) url('../../assets/hero.jpg') center / cover no-repeat;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.55) 45%, rgba(10, 10, 10, 0.85) 100%);
  z-index: -1;
}
.hero__content { max-width: 760px; }
.hero__tagline {
  font-style: italic;
  font-size: 1.35rem;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--step-hero);
  line-height: 1.08;
  text-transform: uppercase;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.hero__lede {
  margin-top: var(--space-md);
  font-size: 1.1rem;
  color: #e7e7e7;
  max-width: 56ch;
}
.hero__actions {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ==========================================================================
   Welcome / intro
   ========================================================================== */
.services {
  margin-top: var(--space-md);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 0.6rem 1.5rem;
  list-style: none;
}
.services li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 600;
  color: var(--color-ink);
}
.services li::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--color-primary);
}

.welcome__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.welcome__figure {
  background: var(--color-dark);
  border-radius: var(--radius);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.welcome__figure img { border-radius: var(--radius-sm); }

@media (max-width: 860px) {
  .welcome__grid { grid-template-columns: 1fr; }
  .welcome__figure { order: -1; max-width: 260px; margin-inline: auto; }
}

/* ==========================================================================
   Pillars (equal-emphasis section — the MVP requirement)
   ========================================================================== */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
@media (max-width: 980px) {
  .pillars { grid-template-columns: 1fr; }
}

.pillar-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
.pillar-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}
.pillar-card__media {
  height: 190px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.pillar-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22,22,22,0) 40%, rgba(22,22,22,0.55) 100%);
}
.pillar-card__number {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: #fff;
  background: var(--color-primary);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  z-index: 1;
}
/* Line-art artwork rather than a cropped photo: show the whole illustration on a
   light brand tint, and drop the darkening overlay that would swallow the ink. */
.pillar-card__media--illustration {
  background-color: #fff6ea;
  background-size: contain;
  background-repeat: no-repeat;
  background-origin: content-box;
  padding: 0.75rem;
}
.pillar-card__media--illustration::after { display: none; }

.pillar-card__body {
  padding: var(--space-md) var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.pillar-card__body h3 {
  font-family: var(--font-display);
  font-size: var(--step-h3);
  text-transform: uppercase;
}
.pillar-card__body p { color: var(--color-ink-soft); }
.pillar-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
}
.pillar-card__list li { padding-left: 1rem; position: relative; }
.pillar-card__list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-primary);
}
.pillar-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-decoration: none;
}
.pillar-card__link:hover { text-decoration: underline; }

/* ==========================================================================
   Portfolio (project cards)
   ========================================================================== */
.projects {
  display: grid;
  /* Same guard as .community-grid — overflowed below a ~368px viewport. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.project-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
.project-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}
.project-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.project-card__eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
.project-card__body h3 {
  font-family: var(--font-display);
  font-size: var(--step-h3);
  text-transform: uppercase;
}
.project-card__body p { color: var(--color-ink-soft); font-size: 0.95rem; }
.project-card__tag {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-line);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-ink);
}

/* ==========================================================================
   Community cards
   ========================================================================== */
.community-grid {
  display: grid;
  /* min(360px, 100%) not a bare 360px: a fixed track minimum cannot shrink, so on
     any viewport under ~408px the card stayed 360px wide and pushed the page
     sideways — that covers most iPhones. */
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.community-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.community-card__eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
.community-card h3 {
  font-family: var(--font-display);
  font-size: var(--step-h3);
  text-transform: uppercase;
}
.community-card p { color: var(--color-ink-soft); font-size: 0.95rem; }
.community-card__tag { color: var(--color-ink); }
.community-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-decoration: none;
}
.community-card__link:hover { text-decoration: underline; }

/* ==========================================================================
   About cards
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
@media (max-width: 980px) {
  .about-grid { grid-template-columns: 1fr; }
}
.about-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.about-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.about-card__body { padding: var(--space-md); }
.about-card__body h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.about-card__body p { color: var(--color-ink-soft); font-size: 0.95rem; }

/* ==========================================================================
   Owner
   ========================================================================== */
.owner {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.owner__photo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 6px solid var(--color-surface-alt);
  box-shadow: var(--shadow-card);
}
.owner__body p { color: var(--color-ink-soft); margin-bottom: var(--space-sm); }
@media (max-width: 760px) {
  .owner { grid-template-columns: 1fr; text-align: center; }
  .owner__photo { max-width: 220px; margin-inline: auto; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}
@media (max-width: 860px) {
  .contact { grid-template-columns: 1fr; }
}
.contact__info { display: flex; flex-direction: column; gap: var(--space-md); }
.contact__channel {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
/* A flex item defaults to min-width:auto and so refuses to shrink below its
   content, which pushed the contact block past the screen on ~320px phones. */
.contact__channel > div { min-width: 0; }
.contact__channel a { overflow-wrap: anywhere; }
.contact__channel svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--color-primary);
  margin-top: 0.15rem;
}
.contact__channel a { text-decoration: none; font-weight: 700; color: var(--color-ink); }
.contact__channel a:hover { color: var(--color-primary-dark); }
.contact__channel p { color: var(--color-muted); font-size: 0.9rem; }

.form {
  background: var(--color-surface-alt);
  border-radius: var(--radius);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-size: 0.85rem; font-weight: 700; }
.field input,
.field textarea {
  /* Inputs carry an intrinsic width of about 20 characters; without this they
     refuse to shrink and push the form off narrow screens. */
  width: 100%;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-ink);
  resize: vertical;
}
.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.form__note {
  font-size: 0.8rem;
  color: var(--color-muted);
}
/* Honeypot wrapper — must stay in the DOM for spam filtering, never shown to people. */
.is-hidden { display: none; }
.form__status {
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 1.2em;
}
.form__status[data-state='success'] { color: #1a7f37; }
.form__status[data-state='error'] { color: #b3261e; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-dark);
  color: #d8d8d8;
  padding-block: var(--space-xl) var(--space-lg);
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer__brand { max-width: 320px; }
.footer__brand .brand__name { color: #fff; }
.footer__brand p { margin-top: var(--space-sm); color: #a9a9a9; font-size: 0.9rem; }
.footer__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
}
.footer__links a {
  text-decoration: none;
  color: #d8d8d8;
  font-size: 0.9rem;
  font-weight: 600;
}
.footer__links a:hover { color: var(--color-primary); }
.footer__bottom {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 0.8rem;
  color: #a9a9a9;
}

/* ==========================================================================
   Motion
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
  .pillar-card:hover { transform: none; }
}