/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:400 16px/1.6 'Segoe UI',system-ui,-apple-system,'Segoe UI Variable',Roboto,Arial,sans-serif}

/* ---------- TOKENS (from your variables) ---------- */
:root{
  --Mode-Background:#F4EFE4;
  --Main-Text-Color:#262626;
  --Dash-Color:rgba(38,38,38,.25);
  --Button-Color:#262626;
  --Button-Text-Color:#F4EFE4;
  --Menu-Color:#D1C2A6;

  --Mode-Section-Header:rgba(242,93,0,.10);
  --Mode-Section-Main:rgba(242,93,0,.05);

  --Card-Text-Color:#F4EFE4;
}
:root[data-theme="dark"]{
  --Mode-Background:#0F0F0F;
  --Main-Text-Color:#F5F5F5;
  --Dash-Color:rgba(255,255,255,.15);
  --Button-Color:#EADD50;
  --Button-Text-Color:#111;
  --Menu-Color:#B5A484;
  --Mode-Section-Header:rgba(242,93,0,.16);
  --Mode-Section-Main:rgba(242,93,0,.08);
}

/* ===== THEME TOKENS ===== */
:root {
  /* Light (default) */
  --Mode-Background: #F4EFE4;
  --Main-Text-Color: #262626;
  --Menu-Color: #D1C2A6;
  --Dash-Color: rgba(38,38,38,0.25);
  --Button-Color: #262626;
  --Button-Text-Color: #F4EFE4;
  --Card-Text-Color: #F4EFE4; /* text inside dark cards */
}

:root[data-theme="dark"] {
  /* From your dark Figma */
  --Mode-Background: #262626;
  --Main-Text-Color: #F4EFE4;
  --Menu-Color: #201B1C;
  --Dash-Color: rgba(255,255,255,0.10);
  --Button-Color: #F4EFE4;
  --Button-Text-Color: #262626;
  --Card-Text-Color: #F4EFE4;
}

/* Global usage */
html, body {
  background: var(--Mode-Background);
  color: var(--Main-Text-Color);
}

/* ---------- GLOBAL ---------- */
body{background:var(--Mode-Background);color:var(--Main-Text-Color)}
a{color:inherit;text-decoration:none}
.container{max-width:1440px;margin:0 auto;padding: 32px;}

/* ---------- HEADER ---------- */
.site-header {
  border-bottom: 1px solid var(--Dash-Color);
  background: var(--Mode-Background);
}

.header-inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Brand 136x33 with 59px offset */
.brand {
  height: 33px;
  display: flex;
  align-items: center;
  transition: color 150ms ease;
}

.brand-grid {
  width: 136px;
  height: 33px;
  display: grid;
  grid-template-columns: 59px auto;
  align-items: start;
  font-size: 25px;
  line-height: 36px;
  font-weight: 400;
  transition: color 150ms ease;
}

.brand.active,
.brand-grid.active {
  color: #F25D00;  /* only home */
}

/* Top nav (desktop default) */
.nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.navlink {
  font-size: 25px;
  line-height: 36px;
  font-weight: 400;
  transition: opacity .15s;
}

.navlink:hover {
  opacity: .75;
}

.navlink.active {
  color: #F25D00;
  transition: color 150ms ease;
}

/* ====== Theme Toggle Button ====== */
.mode-toggle {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  padding: 0;
  border: none;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 200ms ease, transform 150ms ease, filter 150ms ease;
}

.mode-toggle .mode-box {
  display: none; /* Remove the border box entirely */
}

.mode-toggle .icon {
  width: 24px;
  height: 24px;
  z-index: 1;
  display: block;
  transition: transform 150ms ease, filter 200ms ease;
  user-select: none;
  pointer-events: none;
}

/* ===== Theme behavior ===== */

/* Light theme */
:root[data-theme="light"] .mode-toggle .sun { display: none; }
:root[data-theme="light"] .mode-toggle .icon {
  filter: invert(0%) brightness(0%) contrast(100%);
}
:root[data-theme="light"] .mode-toggle:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* Dark theme */
:root[data-theme="dark"] .mode-toggle .moon { display: none; }
:root[data-theme="dark"] .mode-toggle .icon {
  filter: invert(100%) brightness(100%) contrast(100%);
}
:root[data-theme="dark"] .mode-toggle:hover {
  background: rgba(244, 239, 228, 0.15);
}

/* ===== Interaction states ===== */
.mode-toggle:hover .icon {
  transform: scale(1.1);
}
.mode-toggle:active {
  transform: scale(0.95);
}

/* ========== MOBILE MENU ========== */
/* Hamburger (hidden on desktop) */
.nav-toggle{
  display:none; /* shown via media query */
  width:44px; height:44px;
  border:0; border-radius:10px;
  background:transparent;
  appearance:none; -webkit-appearance:none;
  padding:0; margin:0;
  cursor:pointer;
  position:relative;
}
.nav-toggle .nav-toggle-bar{
  display:block;
  width:24px; height:2px;
  background: currentColor;
  margin:5px auto;
  transition: transform .2s ease, opacity .2s ease, width .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Small screens: turn nav into a popover panel */
@media (max-width: 768px){
  .header-inner{height:56px}
  /* Show hamburger, hide desktop nav baseline */
  .nav-toggle{ display:block; }
  .nav{
    position:absolute;
    top:56px; /* just below header */
    left:16px; right:16px;
    display:grid;
    gap:12px;
    padding:12px;
    border:1px solid var(--Dash-Color);
    border-radius:12px;
    background:var(--Mode-Background);
    box-shadow:0 8px 24px rgba(0,0,0,.15);
    opacity:0; transform:translateY(-8px);
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    z-index:20;
  }
  .navlink{ font-size:20px; line-height:28px; }

  /* Keep things from crowding: hide nav by default on mobile */
  .nav.is-open{
    opacity:1; transform:translateY(0);
    pointer-events:auto;
  }

  /* Optional: tighten brand and gaps a touch */
  .brand-grid{ font-size:22px; line-height:32px; }
}

/* ===== HAMBURGER COLOR THEMES ===== */

/* Light mode (default): dark bars */
:root[data-theme="light"] .nav-toggle {
  color: var(--Main-Text-Color, #262626);
}

/* Dark mode: light bars */
:root[data-theme="dark"] .nav-toggle {
  color: var(--Card-Text-Color, #F4EFE4);
}

/* Optional hover feel */
.nav-toggle:hover {
  filter: brightness(1.2);
}


/* ===== HERO — robust layout + spacing ===== */
.hero{
  display:flex;
  position: relative;
  flex-direction:column;
  align-items:center;
  gap:24px;
  padding:48px 16px 64px;     /* breathing room */
  text-align:center;
  overflow:visible;           /* allow logo shadow */
}

.logo-wrap{
  position:relative;
  width: clamp(140px, 55vw, 300px);
}

.hero-logo{
  display:block;
  margin-inline:auto;
  width: 100%;
  max-width:100%;
  height:auto;
  filter:none;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

.logo-wrap::after{
  content:"";
  position:absolute; inset:auto 0 -6px 0;   /* under the logo */
  height:14px;
  border-radius:999px;
  background: radial-gradient(50% 120% at 50% 0%,
              rgba(242,93,0,.25), transparent 70%);
  opacity:.9;                                /* tweak to taste */  
}

.hero-title{
  font-size: clamp(32px, 8vw, 64px);
  line-height:1.15;
  margin:8px 0 0;
}

.hero-sub{
  font-size: clamp(18px, 3.5vw, 25px);
  line-height:1.55;
  max-width: 38rem;
  margin: 0 auto;            /* center the text block */
}

/* ===== Button — force anchor to look like a button ===== */
a.btn-primary, .btn-primary{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 24px;
  margin:8px auto 0;         /* center under copy */
  border-radius:16px;
  background: var(--Button-Color, #222);    /* fallback */
  color: var(--Button-Text-Color, #fff);
  text-decoration:none;      /* prevent link styling */
  box-shadow:0 1px 4px #F25D00;
  transition: opacity .15s, transform .06s ease;
}
a.btn-primary:hover{ opacity:.92; }
a.btn-primary:active{ 
  transform: translateY(1px);
  transform: scale(0.95); }

/* ===== No sideways panning (keep this) ===== */
html, body{ width:100%; overflow-x: clip; }
*, *::before, *::after{ box-sizing: border-box; }
img, svg, video, canvas{ max-width:100%; height:auto; display:block; }
.container{ max-width:1080px; margin:0 auto; padding-inline:16px; }



/* ---------- Footer (mobile-first) ---------- */
.site-footer{
  width:100%;
  background:var(--Menu-Color, #D1C2A6);
  box-shadow:0 4px 4px rgba(38,38,38,.25);
  padding:16px 20px;
  display:flex;
  justify-content:center;
}
.footer-inner{
  max-width:1440px;
  width:100%;
  display:flex;
  flex-direction:column;           /* changed back to column */
  align-items:center;
  justify-content:center;
  gap:16px;
}
/* Nav links */
.footer-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:16px;
  font-size:16px;
  line-height:1;
  color:var(--Main-Text-Color,#262626);
}
.footer-nav a{
  white-space:nowrap;
}
/* Hide the divider on small screens */
.footer-nav .divider{
  display:none;
  width:1px;
  height:16px;
  background:var(--Dash-Color, rgba(38,38,38,.25));
  flex-shrink:0;
}
.footer-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  color: var(--Main-Text-Color);
}

.footer-icons img {
  width: 24px;
  height: 24px;
  display: block;
  filter: brightness(0) invert(var(--icon-invert, 0));
}

:root[data-theme="dark"] {
  --icon-invert: 1;
}

.footer-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:8px;
  background:transparent;
}
.footer-btn img{
  width:24px;
  height:24px;
}
/* ---------- Tablet ≥ 640px ---------- */
@media (min-width:640px){
  .footer-inner{ gap:20px; }
  .footer-nav{
    gap:24px;
    font-size:18px;
  }
}
/* ---------- Tablet/Laptop ≥ 768px ---------- */
@media (min-width:768px){
  .footer-inner{
    flex-direction:row;            /* side-by-side */
    align-items:center;
    justify-content:center;
    gap:48px;
  }
  .footer-nav{
    gap:32px;
    font-size:18px;
  }
  .footer-nav .divider{
    display:inline-block;
    height:20px;
  }
}
/* ---------- Desktop ≥ 1024px ---------- */
@media (min-width:1024px){
  .site-footer{ padding:24px 32px; }
  .footer-inner{ gap:64px; }
  .footer-nav{ gap:48px; font-size:20px; }
  .footer-nav .divider{ height:24px; }
}
/* ---------- Large Desktop ≥ 1440px ---------- */
@media (min-width:1440px){
  .footer-inner{ gap:80px; }
  .footer-nav{ gap:64px; font-size:22px; }
}

/* === Page scaffolding for case-study pages === */
.page { background: var(--Mode-Background, #F4EFE4); }

/* Light / Dark background tokens */
:root[data-theme="light"]{
  --Mode-Background:#F4EFE4;
  --Mode-Section-Header:rgba(242,93,0,0.10);
  --Mode-Section-Main:rgba(242,93,0,0.05);
  --Content-Box-Color:#F8F4EC;
  --Box-Color:rgba(189,196,198,0.08);
  --Dash-Color:rgba(38,38,38,0.25);
  --Button-Color:#262626;
  --Button-Text-Color:#F4EFE4;
}

:root[data-theme="dark"]{
  --Mode-Background:#262626;
  --Mode-Section-Header:rgba(255,255,255,0.10);
  --Mode-Section-Main:rgba(255,255,255,0.05);
  --Content-Box-Color:#201B1C;
  --Box-Color:rgba(189,196,198,0.08);
  --Dash-Color:rgba(255,255,255,0.10);
  --Button-Color:#F4EFE4;
  --Button-Text-Color:#262626;
}

/* Container */
.container{ max-width:1440px; margin-inline:auto; padding-inline:32px; }

/* ===== Hero ===== */
.hero-case{ position:relative; margin-top:32px; }
.hero-case .hero-img{
  width:100%; height:auto; display:block; background:#000;
  aspect-ratio: 1440 / 400; object-fit:contain;
}
.hero-case .hero-bar {
  position: relative;
  background: var(--Button-Color);
  color: var(--Button-Text-Color);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 64px; /* ⬅ Added side padding */
}

.hero-title{
  font:500 40px/1.1 "Segoe UI", sans-serif;
}
@media (min-width:px){
  .hero-title{ font-size:72px; }
}

/* breadcrumb */
.crumb{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--Card-Text-Color,#F4EFE4); text-decoration:none;
  font:400 25px/36px "Segoe UI",sans-serif;
}
.crumb-icon{
  width:36px; height:36px; border-radius:6px;
  background: currentColor; mask:
    radial-gradient(closest-side, transparent 7px, #000 8px) left 12px center/100% 100% no-repeat;
  /* simple block; replace with your chevron if desired */
}

/* ===== Meta cards ===== */
.meta { margin-block:104px; }
.meta-grid{
  display:grid; gap:40px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.meta-card{
  background: var(--Box-Color);
  box-shadow: 0 4px 4px rgba(0,0,0,.25);
  border-radius:8px; outline:2px solid var(--Dash-Color);
  padding-bottom:8px; text-align:left;
}
.meta-card > header{
  background: var(--Button-Color);
  color: var(--Button-Text-Color);
  border-radius:8px 8px 0 0;
  padding:8px; font:400 25px/36px "Segoe UI",sans-serif;
}
.meta-card p{
  margin:0; padding:8px; font:400 25px/36px "Segoe UI",sans-serif;
  color: var(--Main-Text-Color,#262626);
}
.meta-card hr{
  margin:8px; border:0; height:1px; outline:1px solid var(--Dash-Color); outline-offset:-.5px;
}

/* ===== Sections ===== */
.section{ margin-block:88px; box-shadow:0 2px 4px rgba(38,38,38,.25); border-radius:16px; overflow:hidden; }
.section-head{ display:grid; place-items:center; height:96px; background:var(--Mode-Section-Header); }
.section-head h2{ margin:0; font:600 40px/1 "Segoe UI",sans-serif; }
@media (min-width:900px){ .section-head h2{ font-size:48px; } }
.section-head--border{ background:none; border-bottom:1px solid var(--Dash-Color); }
/* Let section headers go edge-to-edge even when section also has .container */
.section.container { padding-left: 0; padding-right: 0; }

.section-body{ padding:40px; background:var(--Mode-Section-Main); }
.section--nofill .section-body{ background:var(--Content-Box-Color); }
.section--boxed { background: var(--Box-Color); }
.section--boxed .section-body{ background:transparent; }

/* Figures / buttons */
/* ---- Figure fixes ---- */
.figure-narrow{
  display:grid;
  gap:16px;
  justify-items:center;
  margin-inline:auto;        /* truly centers the figure itself */
  width:100%;                /* make sure the grid spans its container */
  max-width:100%;            /* prevents subtle horizontal drift */
}

.figure-narrow img{
  display:block;              /* removes inline-image whitespace */
  max-width:min(346px, 100%); /* responsive clamp */
  width:100%;                 /* shrink gracefully on small screens */
  height:auto;
  border-radius:12px;
  margin-inline:auto;         /* ensure it’s visually centered in its own grid cell */
}

/* optional safeguard for extra small screens */
@media (max-width:480px){
  .figure-narrow{ padding-inline:8px; } /* tiny breathing room */
}


.btn{
  display:inline-block; padding:8px 16px; border-radius:4px;
  text-decoration:none; font:400 25px/36px "Segoe UI",sans-serif;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
}
.btn--dark{ background:var(--Button-Color); color:var(--Button-Text-Color); }

/* Hover — same as project card hover */
.btn--dark:hover {
  box-shadow: 0 4px 8px #F25D00;  /* orange glow */
  transform: scale(1.01);         /* subtle pop */
  transition: 150ms;
}

/* Active (pressed) */
.btn--dark:active {
  transform: scale(0.95);
}

/* Pills */
.pill-row {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
  align-items: center;       /* vertical alignment */
  justify-content: center;   /* horizontal centering ✅ */
}

.pill{
  display:flex; align-items:center; gap:16px;
  font:400 25px/36px "Segoe UI",sans-serif;
  color:var(--Main-Text-Color,#262626);
}
.pill .dot{ width:12px; height:12px; border-radius:999px; background: currentColor; opacity:.4; }

.crumb-back {
  display: inline-block;
  padding: 4px 12px;
  font-size: 14px;
  font-family: Segoe UI, sans-serif;
  font-weight: 500;
  color: var(--Card-Text-Color, #f4efe4); /* matches hero-bar text */
  background-color: rgba(0,0,0,0.4); /* subtle box */
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.crumb-back:hover {
  background-color: rgba(0,0,0,0.6);
  text-decoration: none;
  opacity: 1;
}

.hero-bar {
  display: flex;
  justify-content: space-between; /* keeps back on left, title centered */
  align-items: center;
  position: relative;
}

.hero-title {
  flex: 1;
  text-align: center;
  margin: 0; /* strip default spacing */
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  align-items: start; /* instead of stretch */
}

.meta-card {
  background: var(--Mode-Section-Main, #f8f4ec);
  padding: 2%;
  border-radius: 12px;
  box-shadow: 0px 2px 4px rgba(38, 38, 38, 0.25);
  height: auto;       /* let it shrink to fit */
}

.about-intro {
  display: grid;
  grid-template-columns: 280px 1fr;         /* portrait column */
  gap: 32px;
  align-items: start;
}

.about-portrait {
  display: block;
  max-width: 100%;  /* never overflow column */
  height: auto;     /* keep aspect ratio */
  border-radius: 12px;
  outline: 6px var(--Mode-Orange-Border, rgba(242,93,0,.25)) solid;
  box-shadow: 0 2px 4px #F25D00;
}

.about-frame {
  margin: 0 auto;   /* centers the figure within its grid cell */
}


/* ===== Eco Hero Gallery ===== */

/* Root container */
.gallery { margin: 0 auto; }

/* Section heading */
.gallery-heading{
  margin: 0 0 12px;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--Main-Text-Color,#262626);
  text-align: center;
}

/* Row: never wider than the screen */
.gallery-row{
  display:grid;
  grid-template-columns: auto minmax(0,1fr) auto; /* arrows | viewport | arrows */
  gap:16px;
  align-items:center;
  width:100%;                 /* <-- key: fit the viewport width */
  max-width:980px;            /* desktop cap */
  margin-inline:auto;
  padding-inline:8px;
  overflow-x:clip;            /* prevent stray sideways scroll from arrows */
}

/* Arrow buttons */
/* Base button style */
.gallery-nav {
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 10px;
  background: var(--Mode-Section-Header, rgba(242,93,0,.10));
  box-shadow: 0 2px 4px rgba(38,38,38,.25);
  cursor: pointer;
  position: relative;
}

/* Left (prev) arrow */
.gallery-nav.prev::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 12px;
  border-top: 3px solid var(--Button-Color, #262626);
  border-left: 3px solid var(--Button-Color, #262626);
  transform: translate(-40%, -50%) rotate(-45deg);
}

/* Right (next) arrow */
.gallery-nav.next::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 12px;
  border-top: 3px solid var(--Button-Color, #262626);
  border-right: 3px solid var(--Button-Color, #262626);
  transform: translate(-60%, -50%) rotate(45deg);
}

/* Hover — same as project card hover */
.gallery-nav:hover {
  box-shadow: 0 4px 8px #F25D00;  /* orange glow */
  transform: scale(1.05);         /* subtle pop */
  transition: 150ms;
}

.gallery-nav:focus-visible {
  outline: 3px solid rgba(242,93,0,.35);
  outline-offset: 2px;
}

/* Fixed height for this gallery */
#eco-gallery { --gallery-height: 520px; }

/* Viewport: fills available column, scales responsively */
#eco-gallery { --gallery-height: clamp(220px, 56vw, 520px); } /* 220–520px based on width */

#eco-gallery .gallery-viewport{
  width:100%;                 /* fill the middle column */
  height: var(--gallery-height);
  max-height: 72vh;           /* don’t exceed screen height */
  overflow:hidden;
  border-radius:16px;
  margin:0;                   /* row already centers everything */
}

/* Use FLEX for the track – simpler and reliable */
.gallery-track{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;             /* was grid */
  height: 100%;
  transition: transform 280ms ease;
}

/* Each slide is exactly viewport width */
.gallery-slide{
  flex: 0 0 100%;
  height: 100%;
  min-height: 0;             /* allow children to shrink */
  display: flex;
  flex-direction: column;
  background: var(--Content-Box-Color, #F8F4EC);
  border: 1px solid var(--Dash-Color, rgba(38,38,38,.25));
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(38,38,38,.25);
}

/* Title bar takes only its content height */
.slide-head{
  flex: 0 0 auto;
  padding: 12px 16px;
  background: var(--Mode-Section-Header, rgba(242,93,0,.10));
  text-align: center;
}

/* Image fills remaining space and fits inside it */
.gallery-slide img{
  flex: 1 1 auto;            /* take leftover height under header */
  min-height: 0;             /* important in flex containers */
  width: 100%;
  height: 100%;              /* fill the remaining space */
  object-fit: contain;       /* scale to fit without cropping */
  background: rgba(0,0,0,.05);
  display: block;
  padding: 2%;               /* small padding inside the box */
}


/* Dots */
.gallery-dots{
  display: flex; gap: 10px; justify-content: center; padding-top: 12px;
}
.gallery-dots button{
  width:12px; height:12px; border-radius:50%;
  border:1px solid var(--Button-Color,#262626);
  background: transparent; box-shadow: 0 2px 4px rgba(38,38,38,.25);
  cursor: pointer;
}
.gallery-dots button[aria-selected="true"]{ background: var(--Button-Color,#262626); }

/* Responsive */
@media (max-width:900px){
  .gallery-row{ grid-template-columns: 48px 1fr 48px; gap: 12px; }
  .gallery-nav{ width: 48px; height: 48px; }
}

/* Make smooth behavior the default (modern browsers) */
html { scroll-behavior: smooth; }

/* Ensure anchors aren't hidden under a fixed header */
#projects { scroll-margin-top: 80px; } /* adjust to your header height */

/* ---------- Projects ribbon (responsive, spaced) ---------- */
.projects-ribbon{
  display:flex;
  justify-content:center;
  align-items:center;

  /* height that can shrink on mobile */
  min-height:72px;

  background:var(--Mode-Section-Header);
  border-top-left-radius:10px;
  border-top-right-radius:10px;

  /* space around the ribbon */
  margin: 32px auto 32px;        /* top / bottom gaps */
  padding-inline:16px;            /* prevent title from hugging edges on small screens */
}

.projects-title{
  font-size: clamp(28px, 4vw, 64px);
  line-height:1.1;
  margin:0;
  text-align:center;
}

/* gap between ribbon and the cards grid */
#projects{
  margin-top:16px;
  scroll-margin-top: 72px;        /* prevents header overlap when jumping to #projects */
}

/* ---------- Projects grid ---------- */
.projects-grid{
  background: var(--Mode-Section-Main);
  display:flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 112px;
  justify-content: center;
  padding: 104px 32px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* ---------- Base Card Styles ---------- */
.card{
  position: relative;
  width: 328px;
  min-height: 424px;
  height: auto;
  background: var(--card-bg, #000002);
  color: var(--Card-Text-Color, #F4EFE4);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  padding: 40px 16px 16px;
  transition: box-shadow 0.25s ease, gap 0.25s ease;
  cursor: pointer;
}

.card:hover{
  box-shadow: 0 4px 8px #F25D00;
  }

/* ---------- Card Header ---------- */
.card-head{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  flex-shrink: 0;
}

.card-title{
  margin: 0;
  font-size: 32px;
  font-family: "Eudoxus Sans", sans-serif;
  font-weight: 500;
  line-height: 60px;
  color: var(--Card-Text-Color, #F4EFE4);
  text-align: center;
}

.card-image{
  display: block;
  border-radius: 12px;
  max-width: 100%;
  height: auto;
}

/* ---------- Card Body ---------- */
.card-body{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  flex: 1;
  min-height: 0;
  width: 100%;
  padding-bottom: 72px;
}

.chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  font-family: "Segoe UI", sans-serif;
  font-weight: 700;
  color: var(--Card-Text-Color, #F4EFE4);
}

.card-desc{
  margin: 0;
  font-size: 16px;
  font-family: "Segoe UI", sans-serif;
  font-weight: 400;
  line-height: 24px;
  color: var(--Card-Text-Color, #F4EFE4);
}

/* ---------- CTA Button (overlayed on hover) ---------- */
.learn-more{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 10px 16px;
  border: 1px solid currentColor;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.card:hover .learn-more{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---------- Card Variants (Background Colors) ---------- */
.card--incity,
.card--product{
  --card-bg: #000002;
}

.card--eco{
  --card-bg: #041C1B;
}

.card--foco{
  --card-bg: #0B792F;
}

.card--t3{
  --card-bg: #55617C;
}

/* ---------- Responsive Design ---------- */
@media (min-width: 768px){
  .projects-title{
    font-size: 72px;
  }
  
  .card{
    width: 360px;
    min-height: 460px;
  }
}

@media (min-width: 1024px){
  .projects-grid{
    gap: 80px;
  }
}

@media (min-width: 1440px){
  .projects-grid{
    gap: 112px;
  }
}


/* ====== About Page Layout ====== */

/* Container */
.container{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}

/* About Intro Grid */
.about-intro{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: start;
}

.about-frame{
  padding: 16px;
}

/* Portrait sizing */
.about-portrait{
  display:block;
  width:100%;
  max-width:280px;                             /* desktop cap */
  height:auto;
  object-fit:contain;                          /* was cover; avoid aggressive cropping */
  border-radius:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}

/* Content Box */
.content-box--filled{
  background: var(--Content-Box-Color, #F8F4EC);
  box-shadow: 0 2px 4px rgba(38, 38, 38, 0.25);
  border-radius: 16px;
  padding: 16px 16px 8px;
}

/* Lead Text */
.lead{
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
}

/* ====== Responsive Breakpoints ====== */

/* Tablet and below */
@media (max-width: 900px){
  .about-intro{
    grid-template-columns: 1fr;
  }
  
  .about-frame{
    display:grid;
    justify-content:center;                    /* center the photo */
  }
}

/* Mobile */
@media (max-width: 480px){
  .navlink{
    font-size: 18px;
    line-height: 26px;
  }
  
  .brand-grid{
    font-size: 20px;
    line-height: 28px;
  }
  
  .lead{
    font-size: 1.05rem;
  }
}

/* Footer: center EVERYTHING as one cluster */
.site-footer .footer-inner{
  display:flex !important;
  flex-wrap:wrap;                 /* lets icons drop under on small screens */
  justify-content:center !important;
  align-items:center !important;
  gap:32px;
  text-align:center;
}

/* Nav group */
.site-footer .footer-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  font-size:18px;
}

/* Dividers */
.site-footer .footer-nav .divider{
  width:1px; height:20px;
  background:var(--Dash-Color, rgba(38,38,38,.25));
}

/* Icons group */
.site-footer .footer-icons{
  display:flex;
  justify-content:center;
  gap:24px;
}

.site-footer .footer-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:8px;
}

/* Mobile tweaks */
@media (max-width:640px){
  .site-footer .footer-nav{ gap:16px; font-size:16px; }
  .site-footer .footer-nav .divider{ display:none; }
}

/* ====== Hamburger theming (bars use currentColor) ====== */
:root[data-theme="light"] .nav-toggle{ color: var(--Main-Text-Color, #262626); }
:root[data-theme="dark"]  .nav-toggle{ color: var(--Card-Text-Color, #F4EFE4); }
.nav-toggle:hover{ filter: brightness(1.2); }


/* ======= GLOBAL WHITE-SPACE FIX ======= */

/* Give body and main pages consistent padding */
body{
  margin:0;
  padding:0;
  line-height:1.6;
}

main{
  display:block;
  padding:40px 16px;            /* global breathing room around content */
}

/* Every major section gets space above and below */
section{
  margin-block:48px;            /* vertical whitespace between sections */
}

/* Inner containers */
.container{
  width:100%;
  max-width:1080px;
  margin-inline:auto;
  padding-inline:16px;          /* keeps content off the edges */
}

/* Headings get clear top/bottom space */
h1,h2,h3,h4,h5,h6{
  margin-block:24px 16px;
  line-height:1.2;
}

/* Paragraphs and lists breathe vertically */
p, ul, ol{
  margin-block:16px;
}

/* Cards & boxed sections */
.card,
.content-box,
.section{
  margin-block:32px;
  padding:24px;
  border-radius:12px;
}

/* Footer spacing */
.site-footer{
  margin-top:64px;
  padding:24px 16px;
}

/* -------- Responsive refinements -------- */
@media (max-width: 768px){
  main{ padding:24px 12px; }
  section{ margin-block:32px; }
  .card,
  .content-box,
  .section{ padding:16px; }
}

@media (max-width: 480px){
  h1{ font-size:1.75rem; }
  h2{ font-size:1.5rem; }
}

/* ====== Back to Top Button ====== */
.back-to-top {
  position: fixed;
  bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  right: 40px; /* <-- changed from left: 50% to right: 40px */
  transform: translateY(80px); /* <-- removed translateX(-50%) */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;                 /* no clicks when hidden */
  transition:
    opacity 500ms cubic-bezier(0.4,0,0.2,1),
    transform 500ms cubic-bezier(0.4,0,0.2,1),
    background-color 250ms ease,
    box-shadow 250ms ease;
  z-index: 1000;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  will-change: transform, opacity;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Light mode */
:root[data-theme="light"] .back-to-top {
  background: rgba(255, 255, 255, 0.9);
  color: #262626;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
}
:root[data-theme="light"] .back-to-top:hover {
  background: #fff;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16), 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Dark mode */
:root[data-theme="dark"] .back-to-top {
  background: rgba(58, 58, 58, 0.9);
  color: #F4EFE4;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4);
}
:root[data-theme="dark"] .back-to-top:hover {
  background: rgba(70, 70, 70, 1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.5);
}

/* Hover/active keep centering stable by re-including translateX(-50%) */
.back-to-top:hover {
  transform: translateX(-50%) translateY(-4px) scale(1.05);
}
.back-to-top:active {
  transform: translateX(-50%) translateY(0) scale(0.95);
}

/* Focus ring specifically for the button */
.back-to-top:focus-visible {
  outline: 2px solid color-mix(in srgb, currentColor 60%, transparent);
  outline-offset: 3px;
  border-radius: 999px;
}

/* Mobile size */
@media (max-width: 768px) {
  .back-to-top {
    width: 48px;
    height: 48px;
    bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    right: 32px; /* <-- add right positioning on mobile too */
  }
}

/* Smooth anchors + reduced motion (keep) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}


/* ---------- Simple mobile header spacing ---------- */
@media (max-width: 768px) {
  .brand-grid {
    display: flex;
    gap: 6px;                /* tighter Luke–Barber spacing */
    width: auto;             /* shrink to fit */
  }

  .nav-toggle {
    margin-left: auto;       /* push hamburger right */
  }

  .mode-toggle {
    margin-left: 10px;       /* small gap between menu + moon */
  }

  .header-inner {
    padding-inline: 16px;    /* even left/right breathing room */
    align-items: center;     /* keep everything aligned */
  }
}