/* =========================================================
   Project 359 — shared base styles
   Used by the group landing page and all three division sites.
   Division sites layer a theme file (living.css / workspace.css /
   investments.css) on top of this for accent colors.
   ========================================================= */

:root {
  --ink: #1f1f1f;
  --body-grey: #3a3a3a;
  --muted: #6e6e6e;
  --rule: #e2ded7;
  --bg: #ffffff;
  --bg-alt: #f6f4f0;
  --white: #ffffff;

  /* Overridden per-division; sensible default = group orange */
  --accent: #ff3d00;
  --accent-ink: #ffffff;
  --accent-dark: #c62f00;
  --accent-tint: #fff1ec;

  --container: 1180px;
  --radius: 4px;
  --radius-lg: 10px;
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.18);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);

  font-size: 16px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--body-grey);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9em;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--accent);
  display: inline-block;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 88px 0;
}

.section--tight { padding: 56px 0; }
.section--alt { background: var(--bg-alt); }
.section--ink { background: var(--ink); color: #d8d8d8; }
.section--ink h2, .section--ink h3 { color: #fff; }

.lede {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 620px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover { background: var(--accent-dark); box-shadow: var(--shadow-sm); }

.btn--outline {
  background: transparent;
  border-color: currentColor;
  color: var(--ink);
}
.btn--outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.btn--on-dark {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.btn--on-dark:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ---------- Group utility bar (division sites only) ---------- */
.group-bar {
  background: var(--ink);
}
.group-bar a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #b9b9b9;
  letter-spacing: 0.02em;
}
.group-bar a:hover { color: #4fc9bd; }
.group-bar svg { width: 13px; height: 13px; }

/* ---------- Site header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: var(--ink);
}

.brand { flex-shrink: 0; }
.brand img { height: 60px; width: auto; }

/* white card used to keep a logo legible when it sits on a dark background */
.logo-chip {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  padding: 8px 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.logo-chip img,
.logo-chip svg {
  height: 56px;
  width: auto;
  display: block;
}
.footer-brand .logo-chip {
  margin-bottom: 14px;
  padding: 14px 22px;
}
.footer-brand .logo-chip img,
.footer-brand .logo-chip svg {
  height: 88px;
  margin: 0;
}

/* ---------- Partner / client logo strip ---------- */
.partner-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  height: 110px;
  flex: 1 1 150px;
  max-width: 220px;
}
.partner-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ---------- Project updates feed ---------- */
.update-feed {
  display: flex;
  flex-direction: column;
}
.update-entry {
  display: flex;
  gap: 28px;
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
}
.update-entry:first-child { padding-top: 0; }
.update-entry:last-child { border-bottom: none; }
.update-entry__media {
  flex: 0 0 240px;
  width: 240px;
  height: 170px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-alt);
}
.update-entry__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.update-entry__body { flex: 1; min-width: 0; }
.update-entry__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.82rem;
  color: var(--muted);
}
.update-entry__studio {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 999px;
  color: #fff;
}
.update-entry__body h3 { margin: 0 0 8px; }
.update-entry__body p { color: var(--muted); margin: 0; }
@media (max-width: 640px) {
  .update-entry { flex-direction: column; }
  .update-entry__media { width: 100%; flex-basis: auto; }
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand__group {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.brand__name {
  font-size: 1.05rem;
  font-weight: 800;
}

.nav-primary {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-primary a {
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--body-grey);
  border-radius: var(--radius);
  transition: color 0.15s ease, background 0.15s ease;
}

.nav-primary a:hover { color: var(--accent); }

.nav-primary a.is-active {
  color: var(--ink);
  background: var(--bg-alt);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--ink);
  display: block;
}

/* division switcher pill in header */
.division-switch {
  position: relative;
}
.division-switch__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--body-grey);
  background: #fff;
}
.division-switch__trigger:hover { border-color: var(--accent); color: var(--accent); }
.division-switch__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  min-width: 240px;
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.division-switch.is-open .division-switch__menu { display: flex; }
.division-switch__menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
}
.division-switch__menu a:hover { background: var(--bg-alt); }
.division-switch__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
}

/* ---------- Hero ---------- */
.hero {
  padding: 52px 0 56px;
  position: relative;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.hero__art {
  aspect-ratio: 4 / 3.1;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.placeholder-art {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: rgba(255,255,255,0.92);
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, var(--accent), var(--ink));
}

.placeholder-art strong {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
}
.placeholder-art span {
  font-size: 0.82rem;
  opacity: 0.75;
  max-width: 220px;
}
.placeholder-art svg { width: 40px; height: 40px; opacity: 0.9; }

.hero__actions {
  display: flex;
  gap: 14px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.stat-row {
  display: flex;
  gap: 40px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.stat-row .stat b {
  display: block;
  font-size: 1.9rem;
  color: var(--ink);
  font-weight: 800;
}
.stat-row .stat span {
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- Cards / grids ---------- */
.grid {
  display: grid;
  gap: 28px;
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color .2s ease;
}
.card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  border-color: transparent;
}

.card__icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.card__icon svg { width: 22px; height: 22px; }

/* project / work cards */
.work-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: #fff;
}
.work-card__media {
  aspect-ratio: 4/3;
}
.work-card__body { padding: 22px 24px 26px; }

/* multi-photo variant — one project, several photos: a lead shot plus a
   stacked column of supporting shots, instead of forcing one photo per card */
.work-card--gallery { grid-column: span 2; }
.work-card__gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}
.work-card__gallery-main { grid-row: 1 / 4; grid-column: 1; overflow: hidden; }
.work-card__gallery-thumb { overflow: hidden; }
.work-card__gallery-main img,
.work-card__gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) {
  .work-card--gallery { grid-column: span 1; }
}
.work-card__tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  display: block;
}
.work-card__meta {
  display: flex;
  gap: 14px;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 10px;
}

/* ---------- Section headers ---------- */
.section-head {
  max-width: 640px;
  margin: 0 0 32px;
}
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Team / value list ---------- */
.value-list { display: grid; gap: 20px; }
.value-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}
.value-item__num {
  font-weight: 800;
  color: var(--accent);
  font-size: 1rem;
  flex: none;
  width: 34px;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.contact-detail {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.contact-detail:first-child { border-top: none; }
.contact-detail__icon {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: var(--accent-tint);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.contact-detail__icon svg { width: 18px; height: 18px; }
.contact-detail b { display: block; color: var(--ink); font-size: 0.95rem; }
.contact-detail span, .contact-detail a { color: var(--muted); font-size: 0.92rem; }
.contact-detail a:hover { color: var(--accent); }

.form {
  display: grid;
  gap: 18px;
  background: var(--bg-alt);
  padding: 32px;
  border-radius: var(--radius-lg);
}
.form-row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.field input, .field select, .field textarea {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 12px 14px;
  font: inherit;
  background: #fff;
  color: var(--body-grey);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form-note {
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---------- Divisions intro band (landing + cross-links) ---------- */
.divisions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.division-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 28px 24px 22px;
  color: #fff;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.division-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.division-card__tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 10px;
}
.division-card__go {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
}
.division-card__go svg { width: 16px; height: 16px; transition: transform .15s ease; }
.division-card:hover .division-card__go svg { transform: translateX(4px); }

/* logo-led variant — the studio's own logo is the primary clickable visual.
   The three source logo files are NOT drawn at the same internal scale (the
   "359" mark and wordmark occupy different proportions of each 1254x1254
   canvas), so a plain <img> at a shared height puts the mark and the text
   at different sizes per studio. Fix: crop each source down to just the
   numeral mark at a matching zoom level (measured directly from each file,
   values below), sized identically, and set the studio name as real text
   underneath — real text is guaranteed identical size across all three,
   which a raster crop can't promise on its own. */
.division-card--logo {
  background: #fff;
  border: 1px solid var(--rule);
  color: var(--body-grey);
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.division-card__tag--dark {
  color: var(--muted);
  opacity: 1;
}
.division-card__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
}
.division-card__logo-mark {
  display: block;
  width: 130px;
  height: 115px;
  background-repeat: no-repeat;
}
.division-card__logo-mark--living {
  background-image: url('../img/living-logo.png');
  background-size: 251px 251px;
  background-position: -60px -33px;
}
.division-card__logo-mark--workspace {
  background-image: url('../img/workspace-logo.png');
  background-size: 229px 229px;
  background-position: -50px -31px;
}
.division-card__logo-mark--investments {
  background-image: url('../img/investments-logo.png');
  background-size: 235px 235px;
  background-position: -52px -51px;
}
.division-card__wordmark {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.division-card--logo .division-card__go { margin-top: auto; }
.division-card--logo p { max-width: 300px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: #b9b9b9;
  padding: 64px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand img { height: 34px; margin-bottom: 14px; }
.footer-brand p { color: #9a9a9a; font-size: 0.9rem; max-width: 280px; }
.footer-col h4 {
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-col a, .footer-col span {
  display: block;
  color: #b9b9b9;
  font-size: 0.9rem;
  padding: 5px 0;
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.82rem;
  color: #8a8a8a;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom a:hover { color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: -1; }
  .contact-grid { grid-template-columns: 1fr; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .divisions { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .nav-primary, .nav-cta .btn--outline, .nav-cta .btn--primary { display: none; }
  .nav-toggle { display: flex; }
  .site-header.is-open .nav-primary {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--rule);
    padding: 10px 24px 20px;
    gap: 2px;
  }
  .form-row { grid-template-columns: 1fr; }
  .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .stat-row { gap: 26px; }
}