:root {
  /* Colors - Cafe Collection */
  --color-froth: #f1eeeb;
  --color-chai: #e4d8cb;
  --color-creme: #cdc6c3;
  --color-cinna: #cfb3a9;
  --color-latte: #a09086;
  --text-main: #3e3836;

  /* Dark charcoal/brown for readability */
  --text-light: var(--color-latte);
  --bg-color: var(--color-froth);
  --link-color: var(--text-main);
  --accent-color: var(--color-cinna);

  /* Typography Scale (Ratio 1.25) */
  --type-base: 16px;

  /* 16px */
  --type-lg: 20px;

  /* 16 * 1.25 */
  --type-xl: 25px;

  /* 20 * 1.25 */
  --type-2xl: 31.25px;

  /* 25 * 1.25 */
  --type-3xl: 39.06px;

  /* 31.25 * 1.25 */
  --type-4xl: 48.83px;

  /* 39.06 * 1.25 */
  --type-5xl: 61.04px;

  /* 48.83 * 1.25 */
  --type-6xl: 76.29px;

  /* 61.04 * 1.25 */
  --type-7xl: 95.36px;

  /* 76.29 * 1.25 */

  --font-main:
    'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, sans-serif;
  --font-heading: 'Playfair Display', serif;

  /* Spacing System (8pt mini grid base, 4px multiples) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Grid System Configuration */
  --grid-columns: 4;

  /* Phone default */
  --grid-gap: var(--space-4);
  --container-padding: var(--space-5);
  --container-max-width: 1200px;
}

/* Tablet Override */
@media (width >=768px) {
  :root {
    --grid-columns: 8;
    --container-padding: var(--space-10);
  }
}

/* Desktop Override */
@media (width >=1024px) {
  :root {
    --grid-columns: 12;
  }
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--bg-color);
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: var(--type-base);
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-latte);
}

/* Layout */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Header */
header {
  padding: var(--space-5) 0;

  /* Reduced from space-10 for tighter feel with border */
  margin-bottom: var(--space-20);
  border-bottom: 1px solid var(--color-creme);
}

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.logo {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;

  /* Keeping specific small size for UI element */
  font-weight: 600;
  color: var(--text-main);
}

.menu-toggle {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger-line {
  display: block;
  width: 25px;
  height: 2px;
  margin: 5px 0;
  background-color: var(--text-main);
}

.nav-links {
  display: none;
  width: 100%;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-5);
}

.nav-links.open {
  display: flex;
}

.nav-links a {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--text-light);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text-main);
}

@media (width >=768px) {
  nav {
    flex-flow: row nowrap;

    /* No wrapping on desktop */
    justify-content: space-between;
    align-items: center;
  }

  .menu-toggle {
    display: none;
  }

  .nav-links {
    display: flex !important;
    width: auto;
    flex-direction: row;
    padding-top: 0;
    gap: var(--space-10);
  }

  /* Tablet Hero Grid */
  .hero-grid {
    column-gap: var(--space-10);

    /* Keep default stacked layout for tablet (inherits from base) */
  }

  /* Explicitly keeping 1/-1 for clarity, though base has it */
  .hero-grid .subtitle,
  .hero-grid .bio-text {
    grid-column: 1 / -1;
  }

  /* Separator - maintain order */
  .hero-grid .separator:nth-of-type(1) {
    grid-column: 1 / -1;
  }

  /* Label/Link split at tablet */
  .hero-grid .label {
    grid-column: 1 / 5;
    grid-row: auto;
  }

  .hero-grid .arrow-link {
    grid-column: 5 / -1;
    grid-row: auto;
  }
}

/* Typography */
h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--type-6xl);
  line-height: 1.1;
  margin-bottom: var(--space-5);
  letter-spacing: -1px;
  color: var(--color-latte);
}

.subtitle {
  font-size: var(--type-xl);
  color: var(--text-light);
  font-weight: 300;
  margin-bottom: var(--space-16);
}

@media (width >=1024px) {
  h1 {
    font-size: var(--type-7xl);
  }

  .subtitle {
    font-size: var(--type-2xl);
  }
}

/* General Grid Layout Utility */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
}

/* Hero Section */
.hero-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--space-10);
  align-items: baseline;
}

.hero-grid .hero-text-container {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: var(--space-5);
  margin-top: var(--space-20);

  /* Push down on mobile */
}

.hero-name {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 19vw;

  /* Increased per request */
  line-height: 1;
  margin: 0 0 var(--space-4) 0;
  letter-spacing: -2px;

  /* Tighter for Playfair */
  color: var(--color-latte);
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  text-transform: lowercase;
}

/* Desktop override removed to respect vw scaling */

.hero-subtitle {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: var(--type-3xl);
  color: var(--text-light);
  margin: 0 0 var(--space-5) 0;
  text-transform: lowercase;
}

.hero-grid .subtitle {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-bottom: var(--space-5);
}

.hero-grid .bio-text {
  grid-column: 1 / -1;
  grid-row: 3;
  font-size: 18px;
  color: var(--text-main);
  max-width: 600px;
  margin: 0;
}

/* Separator */
.separator {
  width: 100%;
  height: 1px;
  background-color: var(--color-creme);
  margin: var(--space-5) 0;
  grid-column: 1 / -1;
  grid-row: 4;

  /* Default flow */
}

/* Specific Separator in Hero */
.hero-grid .separator:nth-of-type(1) {
  grid-column: 1 / -1;
  grid-row: 4;
}

.hero-grid .label {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  color: #999;
  grid-column: 1 / -1;
  grid-row: 5;
}

.hero-grid .arrow-link {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  border-bottom: 1px solid var(--color-cinna);
  color: var(--text-main);
  padding-bottom: 3px;
  grid-column: 1 / -1;
  grid-row: 6;

  /* If stacked */
}

/* Tablet adjustments were handled above for label/link */

/* About Page Specifics (Base/Mobile) */
.about-hero {
  display: flex;
  flex-direction: column;
}

.about-hero .about-text-column {
  display: contents;
}

.about-hero h1 {
  order: 1;
}

.about-img-container {
  position: relative;
  grid-column: 1 / -1;
  order: 2;
  margin-bottom: var(--space-5);
}

.about-hero .bio-text {
  order: 3;
  grid-row: 3;
}

.about-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

.about-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-cinna);
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.about-img-container:hover .about-overlay {
  opacity: 0;
}

.about-hero .separator {
  order: 4;
  grid-row: 4;
}

/* Desktop Hero Layout */
@media (width >=1024px) {
  .hero-grid {
    gap: var(--space-8) var(--space-16);
  }

  .hero-grid .hero-text-container {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 0;
    margin-top: 0;

    /* Reset mobile margin */
  }

  .hero-name {
    font-size: 10vw;

    /* Reset to reasonable size for desktop */
  }

  /* Side-by-Side: Subtitle (Left - spans up to line 9) */
  .hero-grid .subtitle {
    grid-column: 1 / 9;

    /* Spans 8 cols, ends at line 9 */
    grid-row: 2;
    margin-bottom: 0;
  }

  /* Side-by-Side: Bio (Right - starts at line 9) */
  .hero-grid .bio-text {
    grid-column: 9 / -1;

    /* Starts at line 9 (Col 9) */
    grid-row: 2;
    margin: 0;
  }

  /* Separator */
  .hero-grid .separator:nth-of-type(1) {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 0;

    /* Reset margins */
    margin-bottom: var(--space-5);
  }

  /* Label (Left) */
  .hero-grid .label {
    grid-column: 1 / 7;
    grid-row: 4;
  }

  /* Link (Right) */

  /* Link (Right) */
  .hero-grid .arrow-link {
    grid-column: 7 / -1;
    grid-row: 4;
  }

  /* About Page Hero Overrides */
  .about-hero {
    display: grid;

    /* Restore grid for desktop */
    align-items: start;
  }

  /* Restore block display for column wrapper */
  .about-hero .about-text-column {
    display: block;
    grid-column: 1 / 9;
    grid-row: 1;
  }

  /* Reset children grid props since they are in the column now */
  .about-hero h1 {
    margin-bottom: 0.6em;
    margin-top: 0;
  }

  .about-hero .about-img-container {
    grid-column: 9 / -1;
    grid-row: 1;
    margin-bottom: var(--space-5);
  }
}

/* Content Grid (Contact Page, etc) */
.content-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--space-10);
  margin-top: var(--space-10);
}

.content-grid .label {
  grid-column: 1 / -1;
  text-transform: lowercase;

  /* Enforce lowercase per request */
}

/* --- Contact Page New Layout --- */

.contact-split-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin-top: var(--space-12);

  /* Increased from space-8 for more breathing room */
}

.section-heading {
  font-family: var(--font-heading);
  font-size: var(--type-xl);
  color: var(--text-main);
  margin-bottom: var(--space-5);
  text-transform: lowercase;
}

/* Left Column Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-group label {
  font-family: var(--font-main);
  font-size: 12px;
  letter-spacing: 1px;
  color: #999;
  text-transform: uppercase;
  font-weight: 600;
}

.form-group input,
.form-group textarea {
  padding: var(--space-3);
  border: 1px solid var(--color-creme);
  border-radius: 4px;
  font-family: var(--font-main);
  font-size: 1rem;
  background: #fff;
  width: 100%;
}

.form-group textarea {
  min-height: 150px;
  resize: vertical;
}

.btn-submit {
  /* Match icon box color or keep dark? Reference has dark button */
  background-color: var(--text-main);
  color: #fff;
  border: none;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  transition: opacity 0.2s ease;
  text-transform: uppercase;

  /* Reference has uppercase button text */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
}

.btn-submit:hover {
  opacity: 0.9;
}

/* Right Column Channels */
.channels-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.channel-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: #fff;
  padding: var(--space-3);
  border-radius: 6px;
  border: 1px solid #eee;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.channel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(0 0 0 / 5%);
}

.icon-box {
  width: 40px;
  height: 40px;
  background-color: #a89f91;

  /* Muted brown from reference */
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.channel-info {
  display: flex;
  flex-direction: column;
}

.channel-label {
  font-size: 10px;
  text-transform: uppercase;
  color: #999;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.channel-value {
  color: var(--text-main);
  font-size: 14px;
}

/* Response Time Card */
.response-time-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: #fff;
  padding: var(--space-4);
  border-radius: 6px;
  min-height: 80px;
  margin-bottom: var(--space-8);
  border: 1px solid #eee;
}

.response-info {
  display: flex;
  flex-direction: column;
}

.response-label {
  font-size: 10px;
  text-transform: uppercase;
  color: #999;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 4px;
}

.response-text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-main);
}

/* Open To Section */
.open-to-section {
  background-color: #eeebe6;

  /* Beige bg */
  padding: var(--space-5);
  border-radius: 6px;
}

.open-to-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  color: #999;
  font-weight: 600;
  margin-bottom: var(--space-3);
  letter-spacing: 0.5px;
}

.open-to-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.open-to-list li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text-main);
}

.open-to-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-latte);
}

@media (width >=1024px) {
  .contact-split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: start;
  }
}

/* --- Global Footer --- */
.site-footer {
  margin-top: var(--space-20);
  padding: var(--space-10) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
  font-size: 14px;
  color: var(--text-light);
}

.footer-right {
  display: flex;
  gap: var(--space-5);
}

.footer-right a {
  color: var(--text-light);
  font-size: 1.2rem;
  transition: color 0.2s ease;
}

.footer-right a:hover {
  color: var(--color-cinna);
}

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

@media (width >=1024px) {
  .content-grid .label {
    grid-column: 1 / 5;

    /* Span 4 */
  }

  .content-grid .contact-list {
    grid-column: 5 / -1;

    /* Span 8 */
  }

  .contact-form {
    grid-column: 5 / -1;

    /* align with contact list */
  }
}

/* Projects Grid */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--space-10);
  margin-top: var(--space-10);
}

.project-card {
  /* Full width on mobile */
  margin-bottom: var(--space-10);
  background: #fff;

  /* Slight contrast card */
  padding: var(--space-4);
  border: 1px solid var(--color-froth);
  grid-column: 1 / -1;
}

@media (width >=1024px) {
  .project-card {
    grid-column: span 6;

    /* 2 per row on 12-col grid */
  }

  .selected-works-grid .project-card {
    grid-column: span 4;

    /* 3 per row */
  }
}

.project-title {
  font-family: var(--font-heading);
  font-size: var(--type-xl);
  font-weight: 400;
  margin-bottom: var(--space-3);
  display: block;
  text-transform: lowercase;
  color: var(--text-main);
  text-decoration: none;
  transition: all 0.2s ease;
}

.project-title:hover {
  text-decoration: underline;
  color: #000;
}

.project-desc {
  color: var(--text-main);
  font-size: var(--type-base);
}

.project-tags {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-4);
  font-size: 12px;
  color: var(--color-latte);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.project-tags a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.project-tags a:hover {
  border-color: currentcolor;
}

/* Project Video */
.project-video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;

  /* 16:9 Aspect Ratio */
  height: 0;
  margin-bottom: var(--space-4);
  background-color: #000;
  border-radius: 2px;
  overflow: hidden;
}

.project-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.video-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
  z-index: 1;
  pointer-events: none;

  /* Let clicks pass if we want, but if it fades on hover, pointer events might not matter as much. Actually, if it's visible, we probably want it to block clicks? But if it fades on hover, you can click the video. safely leave pointer-events: none to avoid blocking interaction if fade fails or something. */

  /* Actually, if pointer-events: none, hover might pass through? No, hover is on container. */
}

.project-video-container:hover .video-cover {
  opacity: 0;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-cinna);
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 2;

  /* On top of cover */
}

.project-video-container:hover .video-overlay {
  opacity: 0;
}

/* General Thumbnail Overlay (reusing video overlay logic) */
.project-thumbnail-link {
  display: block;
  position: relative;

  /* Ensure overlay is positioned relative to this */
}

.hover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.project-thumbnail-link:hover .hover-img {
  opacity: 1;
}

.thumbnail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-cinna);
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.3s ease;
  border-radius: 2px;

  /* Match img border radius */
  z-index: 2;

  /* On top of hover img */
}

.project-thumbnail-link:hover .thumbnail-overlay {
  opacity: 0;
}

/* Project Thumbnail */
.project-thumbnail {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: var(--space-4);
  background-color: #f0f0f0;
  border-radius: 2px;
  display: block;
}

/* Footer */
footer {
  margin-top: var(--space-20);
  padding: var(--space-10) 0;
  border-top: 1px solid #eee;
  font-size: 12px;
  color: #999;
}

/* Contact Page */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact-link {
  font-size: var(--type-xl);
  font-weight: 300;
  color: var(--text-main);
}

/* Selected Works Section Classes */
.selected-works-container {
  margin-top: var(--space-10);
}

.section-title {
  font-family: var(--font-heading);
  color: var(--color-latte);
  font-size: var(--type-3xl);
  margin-bottom: var(--space-5);
}

.see-more-container {
  margin-top: var(--space-5);
  text-align: right;
}

.see-more-link {
  font-family: var(--font-heading);
  color: var(--color-latte);
  font-size: var(--type-lg);
  border-bottom: 1px solid var(--color-latte);
}

/* Flex Wrapper for Reordering */
.selected-works-wrapper {
  display: flex;
  flex-direction: column;
}

.selected-works-wrapper .selected-works-container {
  order: 1;
}

.selected-works-wrapper .see-more-container {
  order: 2;

  /* Adjust spacing when it's in the middle */
  margin-bottom: var(--space-5);
}

.selected-works-wrapper .selected-works-grid {
  order: 3;
}

@media (width >=1024px) {
  .selected-works-container {
    margin-top: var(--space-20);
  }

  /* Desktop Reordering */
  .selected-works-wrapper .selected-works-grid {
    order: 2;
  }

  .selected-works-wrapper .see-more-container {
    order: 3;
  }
}