/* ============================================================
   BIRLY — Brand-aligned stylesheet
   Brand colours: San Marino #283F64 · Copper #7E4432
   Background:    Sky #F3F4F6 · Sky Dark #111827
   Type system:   Display: Cormorant Garamond (serif, light)
                  Body:    Inter (modern humanist sans)
   ============================================================ */

:root {
  --san-marino: #283F64;
  --san-marino-dark: #1a2c47;
  --copper: #7E4432;
  --copper-dark: #5e3424;
  --sky-light: #F3F4F6;
  --sky-warm: #F7F5F1;
  --sky-dark: #111827;
  --ink: #2A2A2C;
  --ink-soft: #5b5b5e;
  --line: #d8d6d2;
  --line-soft: #e9e7e3;

  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --t-fast: 220ms cubic-bezier(.22,.61,.36,1);
  --t-mid:  420ms cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--sky-warm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }

/* ──────────────────────────────────────────────  TYPOGRAPHY ── */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--san-marino);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  display: inline-block;
}

.h-display {
  font-size: clamp(3rem, 9vw, 7.5rem);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.025em;
}

.h-1 {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  font-weight: 300;
}

.h-2 {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 300;
}

.h-3 {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 400;
}

.lede {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.4;
  font-weight: 300;
  color: var(--san-marino);
  letter-spacing: -0.005em;
}

p { margin: 0 0 1em; }

.muted { color: var(--ink-soft); }

/* ──────────────────────────────────────────────  LAYOUT ────── */

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

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

section {
  padding: clamp(4rem, 10vw, 9rem) 0;
}

.divider {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* ──────────────────────────────────────────────  HEADER ────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 245, 241, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.site-header.scrolled { border-bottom-color: var(--line-soft); }

.site-header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.1rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  height: 30px;
}
.brand img { height: 100%; width: auto; }

.nav {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}

.nav a {
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  color: var(--san-marino);
  position: relative;
  padding: 0.4rem 0;
  font-weight: 400;
  transition: color var(--t-fast);
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast);
}

.nav a:hover::after,
.nav a.is-active::after { transform: scaleX(1); }
.nav a.is-active { color: var(--copper); }

.nav__cta {
  border: 1px solid var(--san-marino);
  padding: 0.55rem 1rem;
  border-radius: 999px;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: var(--san-marino); color: var(--sky-light); }

/* Mobile nav */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 36px;
  height: 36px;
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  display: block;
  position: absolute;
  left: 6px;
  right: 6px;
  height: 1.5px;
  background: var(--san-marino);
  transition: transform var(--t-fast), top var(--t-fast);
}
.nav-toggle span { top: 50%; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top: 7px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { top: 0; transform: rotate(45deg); }
.nav-toggle.is-open span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 820px) {
  /* On phones / small tablets the header is no longer sticky.
     It sits at the top of the page and scrolls away naturally,
     so the nav labels never obscure body text as you read.
     Desktop (>820px) keeps the original sticky behaviour. */
  .site-header { position: static; }

  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: 0;
    background: var(--sky-warm);
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 5rem var(--gutter) 2.5rem;
    transform: translateY(-110%);
    transition: transform var(--t-mid);
    z-index: 60;
  }
  .nav.is-open { transform: translateY(0); }
  .nav a { font-size: 1.4rem; font-family: var(--font-display); font-weight: 300; }
  .nav__cta { font-family: var(--font-body); font-size: 0.86rem; }

  /* When the menu opens, also re-fix the header so the X button is reachable */
  body:has(.nav.is-open) .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 70; }
}

/* ──────────────────────────────────────────────  HERO ──────── */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  color: var(--sky-light);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(17, 24, 39, 0.15) 0%,
    rgba(17, 24, 39, 0.05) 35%,
    rgba(17, 24, 39, 0.55) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 6rem var(--gutter) 4rem;
}

.hero__wordmark {
  width: clamp(280px, 55vw, 720px);
  margin-bottom: 1.5rem;
}

.hero__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  max-width: 600px;
  color: var(--sky-light);
  margin: 0;
}

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: 2rem;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(243, 244, 246, 0.7);
  z-index: 2;
}

.hero--inner { min-height: 50vh; padding: 0; }
.hero--inner .hero__inner { padding: 9rem var(--gutter) 5rem; }
.hero--inner h1 { color: var(--sky-light); max-width: 900px; }
.hero--inner .eyebrow { color: rgba(243, 244, 246, 0.85); }

/* ──────────────────────────────────────────────  GRID PAIRS ── */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.split--reverse > *:first-child { order: 2; }

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse > *:first-child { order: 0; }
}

.stack > * + * { margin-top: 1.25em; }

/* ──────────────────────────────────────────────  PROJECT CARDS  */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
}
@media (max-width: 700px) {
  .projects-grid { grid-template-columns: 1fr; gap: 2.75rem; }
}

.project-card {
  display: block;
  cursor: pointer;
}
.project-card__image {
  overflow: hidden;
  background: var(--line-soft);
  aspect-ratio: 4 / 3;
  margin-bottom: 1.25rem;
}
.project-card__image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.project-card:hover .project-card__image img { transform: scale(1.04); }

.project-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

.project-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 400;
  color: var(--san-marino);
  margin: 0 0 0.4rem;
}

.project-card__desc {
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 480px;
}

/* ──────────────────────────────────────────────  IMAGE BLOCKS  */

figure { margin: 0; }

.figure-tall { aspect-ratio: 3 / 4; overflow: hidden; }
.figure-wide { aspect-ratio: 16 / 10; overflow: hidden; }
.figure-square { aspect-ratio: 1 / 1; overflow: hidden; }
.figure-tall img,
.figure-wide img,
.figure-square img { width: 100%; height: 100%; object-fit: cover; }

.image-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
.image-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
@media (max-width: 700px) {
  .image-pair, .image-trio { grid-template-columns: 1fr; }
}

.full-bleed {
  width: 100%;
  height: clamp(320px, 60vh, 720px);
  overflow: hidden;
}
.full-bleed img { width: 100%; height: 100%; object-fit: cover; }

/* ──────────────────────────────────────────────  CASE STUDY ── */

.case-study {
  border-top: 1px solid var(--line-soft);
  padding-top: clamp(3rem, 7vw, 6rem);
}
.case-study + .case-study { margin-top: clamp(3rem, 7vw, 6rem); }

.case-study__head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 820px) {
  .case-study__head { grid-template-columns: 1fr; }
}

.case-study__nav-meta {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.75rem;
}

/* ──────────────────────────────────────────────  PILLARS ───── */

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 760px) { .pillar-grid { grid-template-columns: 1fr; } }

.pillar {
  border-top: 1px solid var(--san-marino);
  padding-top: 1.5rem;
}
.pillar__num {
  font-family: var(--font-display);
  color: var(--copper);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}
.pillar h3 { margin-bottom: 0.75rem; }

/* ──────────────────────────────────────────────  CALLOUTS ──── */

.callout-dark {
  background: var(--san-marino);
  color: var(--sky-light);
}
.callout-dark h2 { color: var(--sky-light); }
.callout-dark .eyebrow { color: rgba(243, 244, 246, 0.7); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--t-fast);
}
.btn--ghost {
  border-color: var(--san-marino);
  color: var(--san-marino);
  background: transparent;
}
.btn--ghost:hover { background: var(--san-marino); color: var(--sky-light); }

.btn--solid {
  background: var(--copper);
  color: var(--sky-light);
}
.btn--solid:hover { background: var(--copper-dark); }

.btn--ghost-light {
  border-color: rgba(243, 244, 246, 0.7);
  color: var(--sky-light);
  background: transparent;
}
.btn--ghost-light:hover { background: var(--sky-light); color: var(--san-marino); }

.btn .arrow { transition: transform var(--t-fast); }
.btn:hover .arrow { transform: translateX(3px); }

/* ──────────────────────────────────────────────  FORM ─────── */

.form {
  display: grid;
  gap: 1.5rem;
}
.form__row {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }

.field {
  display: flex;
  flex-direction: column;
}
.field label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--san-marino);
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.field input,
.field textarea,
.field select {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.65rem 0;
  outline: none;
  transition: border-color var(--t-fast);
  resize: vertical;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-bottom-color: var(--copper);
}
.field textarea { min-height: 130px; }

/* ──────────────────────────────────────────────  PLACEHOLDER  */

.placeholder {
  background: linear-gradient(135deg, var(--line-soft) 0%, #ece9e3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink-soft);
  position: relative;
}
.placeholder::before {
  content: '';
  position: absolute;
  inset: 1.5rem;
  border: 1px solid rgba(126, 68, 50, 0.18);
}
.placeholder__inner { position: relative; padding: 2rem; }
.placeholder__label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
}
.placeholder__sub {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--san-marino);
  margin-top: 0.45rem;
}

/* ──────────────────────────────────────────────  FOOTER ────── */

.site-footer {
  background: var(--sky-dark);
  color: rgba(243, 244, 246, 0.78);
  padding: clamp(3.5rem, 7vw, 6rem) 0 2rem;
  font-size: 0.92rem;
}
.site-footer h4 {
  color: var(--sky-light);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 1rem;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(243, 244, 246, 0.12);
}
@media (max-width: 820px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}
.site-footer a:hover { color: var(--sky-light); }

.site-footer__brand img {
  width: 90px;
  margin-bottom: 1.25rem;
}
.site-footer__tag {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--sky-light);
  line-height: 1.45;
  max-width: 360px;
}

.site-footer__base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: rgba(243, 244, 246, 0.55);
}

/* ──────────────────────────────────────────────  REVEAL ───── */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.reveal.is-in { opacity: 1; transform: none; }

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

/* ──────────────────────────────────────────────  UTILITIES ── */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-sm { margin-top: 1rem; }
.mt-md { margin-top: 2rem; }
.mt-lg { margin-top: 3rem; }

/* ────────────────────────────────────────────────────────────
   MOBILE — refinements for phones (below 640px wide)
   These activate ON TOP of the existing responsive rules and
   tighten sizing, padding and rhythm specifically for small screens.
   ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

  body {
    font-size: 15px;
    line-height: 1.6;
  }

  /* Hero — stop the homepage hero from filling the whole phone screen */
  .hero { min-height: 78vh; }
  .hero__inner { padding: 5rem var(--gutter) 3.5rem; }
  .hero__wordmark { width: min(72vw, 360px); margin-bottom: 1.1rem; }
  .hero__tagline { font-size: 1.05rem; line-height: 1.45; }
  .hero__scroll { display: none; }

  .hero--inner { min-height: 36vh; }
  .hero--inner .hero__inner { padding: 6.5rem var(--gutter) 2.75rem; }

  /* Tighter vertical rhythm — less dead space between sections */
  section { padding: 3.75rem 0; }

  /* Headlines — sized so they don't break awkwardly on narrow viewports */
  .h-display { font-size: clamp(2.4rem, 12.5vw, 3.75rem); line-height: 1; }
  .h-1       { font-size: clamp(1.85rem, 8vw, 2.5rem); }
  .h-2       { font-size: clamp(1.45rem, 5.5vw, 1.85rem); }
  .h-3       { font-size: 1.15rem; }
  .lede      { font-size: 1.18rem; line-height: 1.5; }

  /* Container gutters — slightly tighter on phones */
  .container,
  .container-narrow { padding: 0 1.25rem; }

  /* Header — compact on mobile */
  .site-header__inner { padding: 0.85rem 1.25rem; }
  .brand { height: 26px; }

  /* Mobile drawer — easier tap targets, cleaner spacing */
  .nav.is-open { padding-top: 2rem; gap: 1.35rem; }
  .nav.is-open a { font-size: 1.55rem; }

  /* Project cards — slightly less tall image, better title sizing */
  .project-card__image { aspect-ratio: 5/4; margin-bottom: 1rem; }
  .project-card__title { font-size: 1.35rem; }
  .project-card__desc  { font-size: 0.95rem; }
  .projects-grid       { gap: 2.5rem; }

  /* Case-study head — keep stacked block tidy */
  .case-study__head { gap: 1.5rem; }

  /* Split layouts (image + copy side-by-side desktop, stacked mobile) */
  .split { gap: 2.5rem; }

  /* Pillars on the Approach page */
  .pillar { padding-top: 1.25rem; }
  .pillar-grid { gap: 2.5rem; }

  /* Forms — 16px font prevents iOS Safari from auto-zooming on focus */
  .field input,
  .field textarea,
  .field select { font-size: 16px; padding: 0.7rem 0; }

  /* Buttons — finger-friendly tap targets */
  .btn {
    padding: 0.95rem 1.4rem;
    font-size: 0.76rem;
    letter-spacing: 0.14em;
  }

  /* Eyebrow — slightly tighter on phones */
  .eyebrow { font-size: 0.68rem; letter-spacing: 0.2em; }

  /* Full-bleed images — shorter on phones so they don't dominate */
  .full-bleed { height: clamp(260px, 55vh, 480px); }

  /* Image grids — use comfortable single column with breathing room */
  .image-trio,
  .image-pair { gap: 1rem; }

  /* Footer — tighter, columns stack sensibly, base info wraps */
  .site-footer { padding: 3rem 0 1.5rem; }
  .site-footer__grid { gap: 2rem; padding-bottom: 2.25rem; }
  .site-footer h4 { font-size: 0.68rem; }
  .site-footer__base {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.74rem;
  }

  /* Callout sections — tighter padding so they don't feel oversized */
  .callout-dark { padding: 4rem 0; }

  /* Contact page — left/right columns stack with comfortable gap */
  .contact .split { gap: 3rem; }
}

/* Extra-small phones (≤ 380px wide, e.g. iPhone SE) */
@media (max-width: 380px) {
  :root { --gutter: 1rem; }
  .h-display       { font-size: 2.3rem; }
  .hero__wordmark  { width: 78vw; }
  .hero__tagline   { font-size: 0.98rem; }
  .nav.is-open a   { font-size: 1.4rem; }
  .project-card__title { font-size: 1.25rem; }
}