/* =========================================================
   TOKENS — COLORS (yours) + TYPOGRAPHY & SPACING (new)
   ========================================================= */
:root {
  /* your existing */
  --header-space: 72px;
  --maxw: 1200px;
  --cream: #F7F5E8;
  --ink: #111;
  --muted: #A8A8A8;
  --accent-red: #FF2626;
  --toc-w: 228px;
  --logo-offset: 72px;

  /* base spacing unit */
  --spacing: 8px;

  /* fonts + weights */
  --font-sans: "Urbanist", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-serif: "Playfair Display", Georgia, serif;
  --w-300: 300;
  --w-400: 400;
  --w-500: 500;
  --w-600: 600;
  --w-700: 700;
  --w-800: 800;

  /* line heights */
  --lh-tight: 1.2;
  --lh-body: 1.6;
  --lh-loose: 1.8;

  /* spacing scale */
  --s-1: calc(var(--spacing) * .5);
  /* 4px  */
  --s-2: var(--spacing);
  /* 8px  */
  --s-3: calc(var(--spacing) * 1.5);
  /* 12px */
  --s-4: calc(var(--spacing) * 2);
  /* 16px */
  --s-5: calc(var(--spacing) * 3);
  /* 24px */
  --s-6: calc(var(--spacing) * 4);
  /* 32px */
  --s-7: calc(var(--spacing) * 5);
  /* 40px */
  --s-8: calc(var(--spacing) * 6);
  /* 48px */

  /* fluid type steps */
  --fs-100: clamp(.8125rem, .77rem + .25vw, .875rem);
  --fs-200: clamp(.9375rem, .9rem + .3vw, 1rem);
  --fs-300: 1rem;
  --fs-400: clamp(1.0625rem, 1rem + .6vw, 1.25rem);
  --fs-500: clamp(1.25rem, 1.05rem + 1.2vw, 1.625rem);
  --fs-600: clamp(1.75rem, 1.25rem + 2vw, 2.25rem);
  --fs-700: clamp(2.25rem, 1.6rem + 2.6vw, 3rem);
  --fs-800: clamp(2.75rem, 2rem + 3.3vw, 3.5rem);

  /* readable line lengths */
  --measure: 70ch;
  --measure-tight: 56ch;

  /* GLOBAL RHYTHM (consolidated) */
  --section-gap: clamp(48px, 6vw, 112px);
  --block-gap: clamp(20px, 3vw, 36px);
  --grid-gap: clamp(28px, 4vw, 44px);
  --head-gap: clamp(14px, 2vw, 26px);
  --subhead-gap: clamp(12px, 1.6vw, 20px);
  --para-gap: clamp(12px, 1.8vw, 22px);
  --lh-head: 1.08;
}

/* =========================================
   BASE TEXT
   ========================================= */
html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--w-400);
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
}

h1 {
  font-family: "Urbanist", sans-serif;
  font-size: clamp(24px, 4.5vw, 36px);
  letter-spacing: -1.2px;
  font-weight: 500;
  margin-bottom: 16px;
  margin-top: 0px;

}

h2 {
  font-family: "Urbanist", sans-serif;
  font-size: clamp(18px, 3.5vw, 26px);
  letter-spacing: 0.25px;
  font-weight: 400;
  margin-bottom: 8px;
}

p {
  font-family: "Urbanist", sans-serif;
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.55;
  letter-spacing: 0.25px;
  font-weight: 300;
  line-height: 32px;
  margin-bottom: 32px;
}

.list {
  font-family: "Urbanist", sans-serif;
  font-size: clamp(13px, 1.8vw, 14px);
  line-height: 1.45;
  letter-spacing: 0.25px;
  font-weight: 200;
  line-height: 24px;
  margin-bottom: 32px;
}

/* =========================================================
   LAYOUT
   ========================================================= */

/* ── Header ─────────────────────────────────────────────── */
.globalHeader {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  /* border-bottom: 1px solid #eaecef; */
}

.nav-wrapper {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logoBox {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.primaryNav a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  margin-left: 1.25rem;
  font-size: var(--fs-200);
}

.primaryNav a:hover {
  color: #007aff;
}

.primaryNav .btn-link {
  background: #007aff;
  color: #fff;
  padding: .45rem 1rem;
  border-radius: 8px;
}

.primaryNav .btn-link:hover {
  filter: brightness(.95);
}

@media (max-width: 640px) {
  .nav-wrapper {
    padding: .75rem 1rem;
  }

  .primaryNav a {
    margin-left: .9rem;
  }
}

/* ── Main container ─────────────────────────────────────── */
.main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px 16px 0;
}

/* Spacer above case studies (same height feel as hero) */
.introSpacer {
  height: min(72vh, 680px);
  margin-bottom: 32px;
  /* space before the case grid */
}

/* optional: a bit shorter on small screens */
@media (max-width: 640px) {
  .introSpacer {
    height: 40vh;
    margin-bottom: 24px;
  }
}


/* Grid wrapper to add space between case studies */
.caseGrid {
  display: grid;
  gap: 32px;
  /* space between each case */
  padding-bottom: 48px;
  /* <-- space below the grid */
}

/* Card (same sizing as your hero) */
.caseCard {
  position: relative;
  height: min(72vh, 680px);
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream);
}

/* Media layer */
.caseMedia {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.caseMedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Gradient overlay */
.caseCard::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, 0) 45%);
  z-index: 1;
}

/* Make whole card clickable */
.caseLink {
  position: relative;
  display: block;
  inset: 0;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Left meta card */
.caseMeta {
  position: absolute;
  z-index: 2;
  inset: 20px auto 20px 20px;
  /* top/right/bottom/left */
  width: min(520px, 46%);
  /* background: #fff; */
  color: #0a0a0a;
  border-radius: 12px;
  /* box-shadow: 0 12px 30px rgba(0,0,0,.22); */
  padding: 22px 24px 28px;
  display: grid;
  align-content: start;
  gap: 10px;
}

/* blue accent bar on the far left of the card */
.caseMeta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 16px;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  /* background: var(--accent-200, #A7D5FF); */
}

/* meta row */
.caseMetaRow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-200, 0.9rem);
  font-weight: var(--w-600, 600);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .75);
}

.dot {
  opacity: .55;
}

.caseMetaRule {
  height: 2px;
  /* background: var(--accent-300, #67B5FF); */
  margin-top: 2px;
  border-radius: 2px;
}

/* title + date */
.caseTitle {
  margin: 0;
  font-weight: var(--w-800, 800);
  font-size: var(--fs-900, clamp(1.6rem, 2.2vw, 2.25rem));
  line-height: var(--lh-tight, 1.1);
  letter-spacing: .2px;
}

.caseDate {
  margin: 0;
  font-size: var(--fs-200, 0.92rem);
  font-weight: var(--w-600, 600);
  letter-spacing: .08em;
  color: rgba(0, 0, 0, .6);
}

/* bottom-right translucent badge */
.caseBadge {
  position: absolute;
  right: 24px;
  bottom: 26px;
  z-index: 2;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-weight: var(--w-800, 800);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* hover polish */
.caseCard:hover .caseMedia img {
  transform: scale(1.015);
}

.caseMedia img {
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.caseCard:hover .caseMeta {
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

/* responsive */
@media (max-width: 960px) {
  .caseMeta {
    width: min(600px, 88%);
    inset: auto 12px 12px 12px;
  }

  .caseBadge {
    right: 16px;
    bottom: 16px;
  }
}

@media (max-width: 640px) {
  .caseGrid {
    gap: 20px;
  }

  /* tighter spacing on small screens */
  .caseCard {
    border-radius: 12px;
  }

  .caseMeta {
    border-radius: 10px;
    padding: 18px 18px 20px;
  }

  .caseMeta::before {
    width: 12px;
  }

  .caseTitle {
    font-size: clamp(1.3rem, 5.6vw, 1.7rem);
  }
}



/* ——— Contact strip ——— */
.contactStrip {
  margin: 48px 0 40px;
}

.contactStrip__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 24px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.contactStrip .kicker {
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6d7780;
  margin-bottom: 6px;
}

.contactStrip__line {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.contactStrip__email {
  text-decoration: none;
  font-weight: 800;
  color: #0b1b17;
  transition: opacity .2s;
  font-size: clamp(22px, 3.6vw, 36px);
}

.contactStrip__email:hover {
  opacity: .75;
}

.contactStrip__social {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.contactStrip__social a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 2px solid #0b1b17;
  color: #0b1b17;
  text-decoration: none;
  transition: transform .15s, background .15s, color .15s;
}

.contactStrip__social a:hover {
  transform: translateY(-2px);
  background: #ffffff;
}

.contactStrip__social i {
  font-size: 18px;
  line-height: 1;
}

/* full-bleed utility so the background spans the viewport */
.fullBleed {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

/* Color band */
.bandAlt {
  --band-bg: #0f1115;
  /* change to your token if you like */
  --band-ink: #ffffff;
  background: var(--band-bg);
  color: var(--band-ink);
  padding: 56px 0;
  /* vertical rhythm */
  isolation: isolate;
}

/* soft seam into the band (fade from page bg to band color) */
.bandAlt::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -24px;
  height: 24px;
  background: linear-gradient(to bottom, transparent, var(--band-bg));
}

/* inner width matches your page content */
.bandInner {
  width: min(1200px, 92vw);
  margin: 0 auto;
}

/* header */
.bandHeader h2 {
  margin: 0 0 6px;
  font-weight: var(--w-900, 900);
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
}

.bandHeader p {
  margin: 0 0 20px;
  opacity: .85;
}

/* capability grid */
.capGrid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.capItem {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

.capItem h3 {
  margin: 0 0 6px;
  font-weight: var(--w-800, 800);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}

.capItem p {
  margin: 0;
  opacity: .9;
  line-height: 1.45;
}

/* hover */
.capItem:hover {
  transform: translateY(-2px);
  transition: transform .2s ease;
}

/* responsive */
@media (max-width: 1024px) {
  .capGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .bandAlt {
    padding: 40px 0;
  }

  .capGrid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .caseGrid {
    padding-bottom: 28px;
  }
}

/* 1) Remove the soft gradient seam */
.bandAlt::before {
  content: "";
  display: none;
}

/* 3) If you still want breathing room, put it INSIDE the black band */
.bandAlt {
  padding-top: 48px;
}

/* adjust to taste */

.caseHeading {
  margin: 8px 0 16px;
  font-weight: var(--w-900, 900);
  font-size: var(--fs-800, clamp(1.6rem, 3vw, 2.2rem));
  letter-spacing: .2px;
}

/* if you want a bit more breathing room on mobile */
@media (max-width: 640px) {
  .caseHeading {
    margin: 4px 0 12px;
  }
}




/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* ==================== Intro ==================== */
.intro {
  height: auto;
  width: 100%;
  /* padding: 10vh 5vw; */
  /* background-color: #c2dadc; */
  /* background: url(Images/Tartan.png); */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.introWrapper {
  display: grid;
  grid-template-columns:
    7.17% 15.66% 7.17% 7.17% 7% 12.75% 35.75% 7.33%;
  grid-template-rows: 7.05% 5.23% 17.5% 33.78% 8.26% 5.59% 13.74%;
  width: 100%;
  max-width: 1200px;
  height: 100vh;
  position: relative;
  /* margin-bottom: 100px; */
}


/* Bottom Image: row 2 → 5, col 1 → 2 */
.bottom-image {
  grid-row: 2 / 6;
  grid-column: 1 / 4;
  z-index: 1;
}

.bottom-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Top Image: row 3 → 6, col 2 → 6 */
.top-image {
  grid-row: 3 / 7;
  grid-column: 3 / 7;
  z-index: 2;
}

.top-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.intro__title {
  grid-row: 5 / 6;
  grid-column: 3 / 9;
  z-index: 3;
  font-family: 'Cinzel', serif;
  font-size: 100px;
  letter-spacing: -5px;
  font-weight: 400;
  text-align: left;
  align-self: center;
  /* mix-blend-mode: difference; */
  /* color: white; */
}

.intro__txt {
  grid-column: 4 / 8; /* From column 4 to the end (column 8 if you’ve added a column) */
  grid-row: 7 / 8;     /* Only takes up row 6 */
  align-self: start;   /* Optional: aligns the top of the text within the grid cell */
  z-index: 3;
}

.socialTab {
  grid-column: 1; /* From column 4 to the end (column 8 if you’ve added a column) */
  grid-row: 5 / 8;     /* Only takes up row 6 */
  /* background-color: yellow; */
  width: 100%;
  height: 100%;
    display: flex;
  flex-direction: column;
  /* align-items: center; */
  gap: 1.5rem;
}

.socialTab a {
  color: black;
  font-size: 1.8rem;
  transition: transform 0.2s ease;
}

.socialTab a:hover {
  transform: scale(1.2);
  color: #333;
}















/* Grid */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Smaller items */
  gap: 3rem;
  padding: 1.5rem;
  width: 100%;
  margin-top: 60px;
}

.portfolio-item.drawn-outline {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.portfolio-item.drawn-outline:hover {
  transform: scale(1.02); /* Subtle zoom effect */
}

.portfolio-content {
  aspect-ratio: 3 / 4;
  height: auto;
  display: flex;
  align-items: stretch;
}

.portfolio-content img,
.portfolio-content iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

.spline-wrapper {
  width: 100%;
  height: 100%;
}

.spline-wrapper iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.outline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  stroke: var(--color-accent);
  stroke-width: 0.5;
  fill: none;
  pointer-events: none;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 0.6s ease;
  z-index: 2;
}

.drawn-outline:hover .outline {
  stroke-dashoffset: 2;
}

.playground-intro {
  text-align: center;
  margin-top: 4rem;
  margin-bottom: 1.5rem;
  color: rgb(142, 180, 186);
}

.playground-intro h1 {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.playground-intro p {
  opacity: 0.75;
  font-size: 1.1rem;
}

.portfolio-item.wide {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .portfolio-item.wide {
    grid-column: span 1;
  }

  .playground-intro h1 {
    font-size: 2rem;
  }

  .portfolio-grid {
    gap: 2rem;
    padding: 1rem;
  }
}