/* ==========================================================
   Ayotayo Samuel Olowoyo — Portfolio Styles (ACCESSIBILITY REVISED)
   Revision focus:
   - stronger contrast for WCAG 2 AA
   - slightly larger type scale
   - cleaner readable metadata / muted text
   - preserves your existing layout system
========================================================== */

/* =========================
   BASE / TOKENS
========================= */
:root{
  --bg: #f6f3ee;
  --surface: rgba(255,255,255,.68);
  --surface-2: rgba(255,255,255,.82);

  --text: #141414;
  --muted: #5e5c59;              /* darker for accessibility */
  --muted-2: #4f4d4a;            /* darker secondary text */
  --line: rgba(20,20,20,.16);    /* slightly stronger borders */

  --shadow: 0 18px 46px rgba(20,20,20,.10);
  --shadow-sm: 0 10px 26px rgba(20,20,20,.10);

  --accent: #1f6f5b;
  --accent-2: #b08d57;
  --blue: #2E6BFF;

  --radius: 18px;
  --radius-lg: 22px;

  --font-serif: "Fraunces", serif;
  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --container: 1100px;

  --s1: 8px;
  --s2: 12px;
  --s3: 18px;
  --s4: 26px;
  --s5: 40px;
  --s6: 60px;
  --s7: 90px;

  --t: 220ms;
  --t2: 420ms;
}

/* =========================
   RESET / GLOBALS
========================= */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;         /* increased base size */
  line-height: 1.65;       /* slightly more readable */
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
button, input, textarea{ font: inherit; }

:focus-visible{
  outline: 2px solid rgba(46,107,255,.45);
  outline-offset: 3px;
  border-radius: 10px;
}

/* background glow */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(31,111,91,.16), transparent 62%),
    radial-gradient(720px 520px at 92% 8%, rgba(176,141,87,.12), transparent 60%),
    radial-gradient(760px 600px at 60% 110%, rgba(31,111,91,.10), transparent 66%);
  pointer-events:none;
  z-index:-2;
}

/* grain overlay */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: .16;
  pointer-events:none;
  z-index:-1;
}

/* =========================
   UTIL
========================= */
.container{
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  background: var(--text);
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
}
.skip-link:focus{ left: 10px; z-index: 9999; }

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

.lead{
  font-size: 20px;         /* bumped from 18 */
  line-height: 1.7;
  max-width: 64ch;
  color: var(--muted-2);
}

.small{
  font-size: 15px;         /* bumped from 14 */
  color: var(--muted);
}

h1,h2,h3{
  font-family: var(--font-serif);
  letter-spacing: -0.02em;
  line-height: 1.08;
}
h1{ font-size: clamp(42px, 5vw, 66px); margin:0; }
h2{ font-size: clamp(30px, 3.2vw, 40px); margin:0; }
h3{ font-size: 22px; margin:0; }

.eyebrow{
  font-size: 13px;                 /* bumped from 12 */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px 0;
}

.hr{ height: 1px; background: var(--line); width: 100%; }

/* =========================
   NAV
========================= */
.nav{
  position: sticky;
  top:0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(246,243,238,.90), rgba(246,243,238,.70));
  border-bottom: 1px solid var(--line);
}

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

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 140px;
  justify-content: center;
}

.brand__logo{
  height: 64px;
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(20,20,20,.06));
}

.nav__links{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav__links a{
  font-size: 15px;                /* bumped from 14 */
  color: var(--muted);
  padding: 10px 10px;
  border-radius: 12px;
  position: relative;
  transition: color var(--t) ease, transform var(--t) ease, background var(--t) ease;
}

.nav__links a:not(.nav__icon)::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 7px;
  height: 1px;
  background: rgba(20,20,20,.24);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) ease, background var(--t) ease;
}

.nav__links a:hover{
  color: var(--text);
  background: rgba(255,255,255,.60);
  transform: translateY(-1px);
}
.nav__links a:hover::after{
  transform: scaleX(1);
  background: rgba(31,111,91,.38);
}

.nav__links a[aria-current="page"]{
  color: var(--text);
  background: rgba(31,111,91,.10);
  box-shadow: inset 0 0 0 1px rgba(31,111,91,.18);
}
.nav__links a[aria-current="page"]::after{
  transform: scaleX(1);
  background: rgba(31,111,91,.48);
}

.nav__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 40px;
  height: 40px;
  padding:0 !important;
}
.nav__icon svg{ width: 18px; height: 18px; }

/* mobile nav */
@media (max-width: 700px){
  .nav__inner{
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
  }
  .brand__logo{ height: 52px; }
  .nav__links{ justify-content: center; gap: 10px; }
  .nav__links a{ font-size: 14px; padding: 6px 10px; }
}

/* =========================
   SECTIONS
========================= */
.section{ padding: var(--s6) 0; }
.section--tight{ padding: var(--s5) 0 var(--s6); }

.section__head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.text-link{
  color: var(--muted);
  font-size: 15px;           /* bumped */
  transition: color var(--t) ease, transform var(--t) ease;
}
.text-link:hover{ color: var(--text); transform: translateX(2px); }

/* =========================
   WORK GRID / CARDS
========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
}

.card{
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.68);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
  position: relative;
  transition: transform var(--t) ease, box-shadow var(--t) ease, border-color var(--t) ease;
}

/* =========================
   CARD FOOT (CTA FIX)
========================= */
.card__foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.card__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.card__cta{
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  opacity: .92;
  transition: opacity var(--t) ease, transform var(--t) ease;
}
@media (pointer: fine){
  .card:hover .card__cta{
    opacity: 1;
    transform: translateX(3px);
  }
}

/* spotlight */
.card::before{
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t) ease;
  background: radial-gradient(
    520px circle at var(--mx, 50%) var(--my, 40%),
    rgba(46, 107, 255, 0.10),
    rgba(46, 107, 255, 0.04) 30%,
    transparent 60%
  );
}

.card__link{ display:block; height: 100%; }

.card__thumb{
  height: 260px;
  background: linear-gradient(135deg, rgba(31,111,91,.10), rgba(176,141,87,.08));
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform var(--t2) ease;
}

.card__thumb .thumb-ph{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 14px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.card__thumb.card__thumb--img .thumb-ph{ display:none; }

.card__thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,.06));
  pointer-events:none;
}

@media (pointer: fine){
  .card:hover::before,
  .card:focus-within::before{ opacity: 1; }

  .card:hover{
    box-shadow: 0 18px 44px rgba(17,17,17,.10);
    border-color: rgba(17,17,17,.18);
  }
  .card:hover .card__thumb img{
    transform: scale(1.06);
  }
}

.card__body{ padding: 18px 18px 16px; }

.card__top{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.card__year{
  color: var(--muted);
  font-size: 14px;
}

.card__desc{
  margin: 10px 0 12px;
  color: var(--muted-2);
  font-size: 16px;         /* bumped from 14 */
  line-height: 1.65;
}

.chips{ display:flex; flex-wrap:wrap; gap: 8px; }

.chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 11px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted-2);
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(20,20,20,.14);
}

/* ==========================================================
   HOME PAGE — UPDATED
========================================================== */

/* ===== Page load states ===== */
body.is-loading main{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms ease, transform 420ms ease;
}
body.is-loaded main{
  opacity: 1;
  transform: translateY(0);
}

/* ===== Intro stamp ===== */
.intro-stamp{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
}

.intro-stamp__inner{
  border-radius: 999px;
  padding: 14px 16px;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--line);
  box-shadow: 0 28px 80px rgba(20,20,20,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(8px) scale(.98);
  opacity: 0;
}

.intro-stamp__logo{
  width: auto;
  height: 40px;
  filter: drop-shadow(0 10px 18px rgba(20,20,20,.12));
}

body.is-loading .intro-stamp{
  opacity: 1;
  pointer-events: auto;
}
body.is-loading .intro-stamp__inner{
  opacity: 1;
  animation: stampIn 520ms cubic-bezier(.2,.8,.2,1) forwards;
}
body.is-loaded .intro-stamp{
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}
body.is-loaded .intro-stamp__inner{
  animation: stampOut 320ms ease forwards;
}

@keyframes stampIn{
  from{ transform: translateY(14px) scale(.96); opacity: 0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes stampOut{
  from{ transform: translateY(0) scale(1); opacity: 1; }
  to{ transform: translateY(-6px) scale(.99); opacity: 0; }
}

/* ===== Hero ===== */
.hero{
  position: relative;
  padding: clamp(48px, 6.5vw, 90px) 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.hero__bg{
  position: absolute;
  inset: -22% -10% auto -10%;
  height: 540px;
  background:
    radial-gradient(780px 400px at 18% 28%, rgba(31,111,91,.13), transparent 70%),
    radial-gradient(700px 380px at 84% 8%, rgba(176,141,87,.11), transparent 72%),
    radial-gradient(780px 520px at 52% 95%, rgba(46,107,255,.05), transparent 68%);
  filter: blur(14px);
  pointer-events: none;
  z-index: 0;
}

.hero__grain{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero__inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: 26px;
  align-items: start;
}

.hero__title{
  margin: 0 0 14px 0;
  max-width: 15ch;
  font-size: clamp(42px, 5.2vw, 72px);
  line-height: .98;
  letter-spacing: -0.04em;
}

.hero .lead{
  margin: 0;
  max-width: 61ch;
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted-2);
}

.cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

/* ===== Right side cards ===== */
.hero__side{
  display: grid;
  gap: 14px;
}

.mini-card{
  border-radius: 20px;
  background: rgba(255,255,255,.68);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}

.mini-card__kicker{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px 0;
}

.mini-card__title{
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 8px 0;
}

.mini-card__text{
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted-2);
}

/* ===== Home projects ===== */
.home-projects{
  padding-top: 56px;
}

.home-projects__intro{
  margin: 8px 0 0;
  font-size: 16px;
}

.home-projects .section__head{
  align-items: end;
  margin-bottom: 22px;
}

/* ===== Closing card ===== */
.home-closing{
  padding-top: 26px;
}

.home-closing__card{
  background: rgba(255,255,255,.70);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  padding: 26px 24px;
}

.home-closing__card h2{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.8vw, 48px);
  line-height: 1.02;
}

.home-closing__card p{
  margin: 0;
  max-width: 58ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted-2);
}

.home-closing__card .cta-row{
  margin-top: 18px;
}

.hero__title{
  max-width: 620px;
}

.lead{
  max-width: 520px;
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .hero__inner{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hero__title{
    max-width: 17ch;
  }
}

@media (max-width: 640px){
  .hero{
    padding: 42px 0 54px;
  }

  .hero__title{
    max-width: 100%;
    font-size: clamp(38px, 10vw, 54px);
  }

  .hero .lead{
    font-size: 17px;
  }

  .home-closing__card{
    padding: 22px 18px;
  }

  .home-closing__card .cta-row{
    flex-direction: column;
    align-items: stretch;
  }

  .home-closing__card .btn{
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce){
  body.is-loading main,
  body.is-loaded main{
    transition: none;
  }

  .intro-stamp,
  .intro-stamp__inner{
    animation: none !important;
    transition: none !important;
  }
}

/* =========================
   PAGE HEAD / PANELS
========================= */
.page-head{
  padding: var(--s6) 0 var(--s4);
  border-bottom: 1px solid var(--line);
}

.panel{
  border-radius: var(--radius);
  background: rgba(255,255,255,.68);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}

.panel__title{
  font-family: var(--font-serif);
  margin: 0 0 10px 0;
  font-size: 20px;
}

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

.list{
  list-style:none;
  padding:0;
  margin: 0;
  display:grid;
  gap: 10px;
  color: var(--muted-2);
  font-size: 16px;
  line-height: 1.65;
}

/* ==========================================================
   WORK PAGE — CARD CLEANUP
   Consistent thumbnails, spacing, CTA alignment, and WIP styling
========================================================== */

.page-work .grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

@media (max-width: 900px){
  .page-work .grid{
    grid-template-columns: 1fr;
  }
}

/* ---------- Card ---------- */
.page-work .card{
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 22px;
  background: rgba(255,255,255,.68);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--t) ease, box-shadow var(--t) ease, border-color var(--t) ease;
}

.page-work .card__link{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ---------- Thumbnail ---------- */
.page-work .card__thumb{
  position: relative;
  height: 260px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #f4f4f2;
  flex-shrink: 0;
}

.page-work .card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--t2) ease;
}

/* Cleaner image positions by project if needed */
.page-work .card--ecothreads .card__thumb img{
  object-position: center;
}

.page-work .card--hydraforce .card__thumb img{
  object-position: center;
}

.page-work .card--equalizer .card__thumb img{
  object-position: center top;
}

/* ---------- Card body ---------- */
.page-work .card__body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 18px 16px;
}

.page-work .card__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.page-work .card__title{
  margin: 0;
  font-family: var(--font-serif);
  font-size: 34px;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.page-work .card__year{
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
  padding-top: 6px;
}

.page-work .card__desc{
  margin: 0 0 16px;
  color: var(--muted-2);
  font-size: 15px;
  line-height: 1.65;
  max-width: 54ch;
}

/* ---------- Foot alignment ---------- */
.page-work .card__foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 4px;
}

.page-work .card__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-work .chip{
  display: inline-flex;
  align-items: center;
  padding: 8px 11px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  color: var(--muted-2);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(20,20,20,.12);
}

.page-work .card__cta{
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  opacity: .92;
  transition: transform var(--t) ease, opacity var(--t) ease;
}

/* ===== WORK GRID ===== */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 40px;
}

@media (max-width: 900px) {
  .work-grid {
    grid-template-columns: 1fr;
  }
}

.work-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.04);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.work-card:hover .work-card__thumb::after {
  opacity: 1;
}

/* ---------- Hover ---------- */
@media (pointer: fine){
  .page-work .card:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(17,17,17,.10);
    border-color: rgba(17,17,17,.18);
  }

  .page-work .card:hover .card__thumb img{
    transform: scale(1.04);
  }

  .page-work .card:hover .card__cta{
    transform: translateX(3px);
    opacity: 1;
  }
}

.page-work .card--selected-works .card__thumb{
  display: flex;
  height: 260px;
  background: #f4f0ea;
}

.page-work .card--selected-works .card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 16px;
  background: #f8f5ef;
}


/* ==========================================================
   ISOKAN WIP CARD
========================================================== */

.page-work .card--wip .card__thumb{
  background:
    radial-gradient(560px 260px at 18% 15%, rgba(31,111,91,.13), transparent 62%),
    radial-gradient(520px 260px at 86% 82%, rgba(176,141,87,.12), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.58));
}

.page-work .card__thumb--wip{
  display: grid;
  place-items: center;
}

.page-work .wip-ph{
  width: min(86%, 400px);
  border-radius: 18px;
  padding: 18px 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(20,20,20,.10);
  box-shadow: 0 12px 28px rgba(20,20,20,.08);
  backdrop-filter: blur(10px);
  text-align: center;
}

.page-work .wip-ph__tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(20,20,20,.72);
  background: rgba(31,111,91,.10);
  border: 1px solid rgba(31,111,91,.16);
  margin-bottom: 12px;
}

.page-work .wip-ph__title{
  display: block;
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
  color: var(--text);
}

.page-work .wip-ph__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted-2);
}

.result-card__link{
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

/* ==========================================================
   ISOKAN — HERO MOTION SIZE FIX
   Makes video same size as other project hero images
========================================================== */

.project-motion-hero{
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  box-shadow: 0 18px 46px rgba(20,20,20,.12);
  
  /* THIS CONTROLS THE SIZE */
  aspect-ratio: 16 / 9;
  max-height: 520px;
}

.project-motion-hero__media{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-motion-hero{
  position: relative;
}

.motion-label{
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(20,20,20,.6);
  color: #fff;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

/* Make sure hero visual aligns with other pages */
.project-hero__visual{
  max-width: 720px;
}

/* Responsive */
@media (max-width: 980px){
  .project-motion-hero{
    max-height: 420px;
  }
}

@media (max-width: 640px){
  .project-motion-hero{
    max-height: 320px;
    border-radius: 18px;
  }
}

/* Make sure hero grid stays consistent */
.project-hero__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  gap: 26px;
  align-items: start;
}

/* Mobile */
@media (max-width: 980px){
  .project-motion-hero{
    aspect-ratio: 16 / 10;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px){
  .page-work .card__thumb{
    height: 230px;
  }

  .page-work .card__body{
    padding: 16px 16px 15px;
  }

  .page-work .card__title{
    font-size: 30px;
  }

  .page-work .card__foot{
    flex-direction: column;
    align-items: flex-start;
  }

  .page-work .card__cta{
    white-space: normal;
  }

  .page-work .wip-ph{
    width: 90%;
    padding: 16px;
  }

  .page-work .wip-ph__title{
    font-size: 24px;
  }
}


/* ==========================================================
   ISOKAN — DIGITAL EXPERIENCE / WEBSITE SECTION
========================================================== */

/* make website cards feel cleaner + more intentional */
.page-isokan .result-card--web .result-card__frame,
.page-isokan .result-card--mobile .result-card__frame,
.page-isokan .result-card--builder .result-card__frame{
  background: #f3f0ea;
  border-radius: 22px 22px 0 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* desktop / laptop screens */
.page-isokan .result-card--web .result-card__frame{
  aspect-ratio: 16 / 10;
  padding: 16px;
}

.page-isokan .result-card--web .result-card__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  display: block;
}

/* outfit builder hero gets a bit more room */
/* MOBILE MOCKUPS — FIX HEIGHT + FIT */

.page-isokan .result-card--mobile .result-card__frame{
  aspect-ratio: 10 / 13; /* was too tall before */
  max-height: 420px;     /* key fix */
  padding: 12px;
  background: #f3f0ea;
  border-radius: 18px 18px 0 0;

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.page-isokan .result-card--mobile .result-card__img{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* keeps full phone visible */
  object-position: center top;
  transform: scale(0.92);
}

/* EVEN SMALLER ON BIG SCREENS (so they don’t look oversized) */
@media (min-width: 1200px){
  .page-isokan .result-card--mobile .result-card__frame{
    max-height: 380px;
  }
}

/* MOBILE VIEWPORT (your actual site responsiveness) */
@media (max-width: 768px){
  .page-isokan .result-card--mobile .result-card__frame{
    max-height: 340px;
    aspect-ratio: 10 / 14;
  }
}


/* keep bodies aligned nicely */
.page-isokan .result-card--web,
.page-isokan .result-card--mobile,
.page-isokan .result-card--builder{
  display: flex;
  flex-direction: column;
}

/* slightly tighter text spacing for website cards */
.page-isokan .result-card--web .result-card__body,
.page-isokan .result-card--mobile .result-card__body,
.page-isokan .result-card--builder .result-card__body{
  padding: 18px 20px 20px;
}

.page-isokan .result-card--web .result-card__title,
.page-isokan .result-card--mobile .result-card__title,
.page-isokan .result-card--builder .result-card__title{
  margin-bottom: 8px;
}

.page-isokan .result-card--web .result-card__text,
.page-isokan .result-card--mobile .result-card__text,
.page-isokan .result-card--builder .result-card__text{
  line-height: 1.65;
}

/* make the desktop website grid breathe a bit more */
.page-isokan .results-grid--web{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.page-isokan .results-grid--mobile{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

/* full width website hero cards */
.page-isokan .result-card--builder.result-card--wide,
.page-isokan .result-card--web.result-card--wide{
  grid-column: 1 / -1;
}

/* make homepage card feel strongest */
.page-isokan .result-card--web.result-card--wide .result-card__frame{
  aspect-ratio: 16 / 8.8;
  padding: 18px;
}

/* mobile responsiveness */
@media (max-width: 900px){
  .page-isokan .results-grid--web,
  .page-isokan .results-grid--mobile{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .page-isokan .result-card--web .result-card__frame{
    aspect-ratio: 16 / 10.5;
    padding: 12px;
  }

  .page-isokan .result-card--builder .result-card__frame{
    aspect-ratio: 16 / 10;
    padding: 12px;
  }

  .page-isokan .result-card--mobile .result-card__frame{
    aspect-ratio: 10 / 15;
    padding: 12px;
  }

  .page-isokan .result-card--web.result-card--wide .result-card__frame{
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 560px){
  .page-isokan .result-card--web .result-card__body,
  .page-isokan .result-card--mobile .result-card__body,
  .page-isokan .result-card--builder .result-card__body{
    padding: 16px;
  }

  .page-isokan .result-card--web .result-card__frame,
  .page-isokan .result-card--builder .result-card__frame,
  .page-isokan .result-card--mobile .result-card__frame{
    border-radius: 18px 18px 0 0;
  }
}


.project-notes{
  padding: 18px 0 10px;
}

.notes-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.note-card{
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.68);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.note-card__label{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(20,20,20,.55);
  margin-bottom: 10px;
}

.note-card__text{
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(20,20,20,.78);
}

@media (max-width: 900px){
  .notes-grid{
    grid-template-columns: 1fr;
  }
}


/* =========================
   PROJECT HERO / META
========================= */
.project-hero{
  position: relative;
  padding: var(--s6) 0 var(--s4);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.project-hero__bg{
  position:absolute;
  inset: -20% -10% auto -10%;
  height: 380px;
  background:
    radial-gradient(560px 280px at 20% 40%, rgba(31,111,91,.12), transparent 70%),
    radial-gradient(560px 280px at 80% 10%, rgba(176,141,87,.10), transparent 70%);
  filter: blur(12px);
  pointer-events:none;
}

.project-meta{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.meta-box{
  border-radius: 16px;
  background: rgba(255,255,255,.68);
  border: 1px solid var(--line);
  padding: 14px;
}
.meta-box__label{
  font-size: 13px;             /* bumped */
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.meta-box__value{
  font-weight: 600;
  margin-top: 6px;
  font-size: 16px;             /* bumped */
  line-height: 1.5;
}

.case-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
}
@media (max-width: 900px){
  .case-grid{ grid-template-columns: 1fr; }
  .project-meta{ grid-template-columns: 1fr; }
}

/* =========================
   PROJECT GALLERY SYSTEM
========================= */
.project-gallery{
  padding: 60px 0 40px;
}
.project-gallery__title{
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 40px);
  margin: 0 0 22px 0;
}
.pgrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 900px){
  .pgrid{ grid-template-columns: 1fr; }
}
.ptile{
  margin: 0;
  background: rgba(255,255,255,.68);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 55px rgba(20,20,20,.10);
}

/* ==========================================================
   PROJECT PAGE SYSTEM — shared across EcoThreads, Hydraforce,
   Equalizer, and Isokan
========================================================== */

.project-shell{
  padding-bottom: 24px;
}

/* ---------- Hero ---------- */
.project-hero{
  position: relative;
  padding: 56px 0 28px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.project-hero__bg{
  position:absolute;
  inset: -20% -10% auto -10%;
  height: 420px;
  background:
    radial-gradient(620px 300px at 20% 40%, rgba(31,111,91,.11), transparent 70%),
    radial-gradient(620px 300px at 80% 10%, rgba(176,141,87,.10), transparent 72%);
  filter: blur(12px);
  pointer-events:none;
}

.project-hero__grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 24px;
  align-items: start;
}

.project-hero__copy{
  min-width: 0;
}

.project-hero__copy .lead{
  margin-top: 14px;
  max-width: 60ch;
}

.project-hero__visual{
  min-width: 0;
}

.project-hero__frame{
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow);
}

.project-hero__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-meta{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.meta-box{
  border-radius: 16px;
  background: rgba(255,255,255,.70);
  border: 1px solid var(--line);
  padding: 14px;
}

.meta-box__label{
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.meta-box__value{
  font-size: 16px;
  font-weight: 600;
  margin-top: 6px;
  line-height: 1.45;
}

/* ---------- Snapshot strip ---------- */
.project-snapshot{
  padding: 26px 0 8px;
}

.snapshot-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.snapshot-card{
  background: rgba(255,255,255,.68);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.snapshot-card__label{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.snapshot-card__value{
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  font-weight: 600;
}

.snapshot-card__text{
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-2);
}

/* ---------- Results first ---------- */
.project-results{
  padding: 26px 0 8px;
}

.results-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.results-head h2{
  margin: 0;
}

.results-head p{
  margin: 0;
  color: var(--muted-2);
  max-width: 58ch;
}

.results-grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.result-card{
  grid-column: span 6;
  background: rgba(255,255,255,.68);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.result-card--wide{
  grid-column: 1 / -1;
}

.result-card__frame{
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f4f4f2;
}

.result-card__frame--wide{
  aspect-ratio: 16 / 9;
}

.result-card__frame--square{
  aspect-ratio: 1 / 1;
}

.result-card__frame--contain{
  background: #fff;
}

.result-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.result-card__img--contain{
  object-fit: contain;
  padding: 22px;
}

.result-card__body{
  padding: 14px 16px 16px;
}

.result-card__title{
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 20px;
}

.result-card__text{
  margin: 0;
  color: var(--muted-2);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- Case study narrative ---------- */
.project-story{
  padding: 34px 0 8px;
}

.story-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: start;
}

.story-card{
  background: rgba(255,255,255,.68);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: 20px;
}

.story-card h2{
  margin: 0 0 10px;
  font-size: 26px;
}

.story-card p{
  margin: 0;
  color: var(--muted-2);
  font-size: 16px;
  line-height: 1.7;
}

.story-stack{
  display:grid;
  gap: 18px;
}

.story-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 10px;
}

.story-list li{
  color: var(--muted-2);
  font-size: 15px;
  line-height: 1.65;
}

/* ---------- Process ---------- */
.project-process{
  padding: 34px 0 8px;
}

.process-head{
  margin-bottom: 16px;
}

.process-head p{
  margin: 10px 0 0;
  color: var(--muted-2);
  max-width: 62ch;
}

.process-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.process-step{
  background: rgba(255,255,255,.68);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.process-step__frame{
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f4f4f2;
}

.process-step__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.process-step__img--contain{
  object-fit: contain;
  padding: 20px;
  background: #fff;
}

.process-step__body{
  padding: 14px 16px 18px;
}

.process-step__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(31,111,91,.10);
  border: 1px solid rgba(31,111,91,.18);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-2);
  margin-bottom: 10px;
}

.process-step__title{
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 20px;
}

.process-step__text{
  margin: 0;
  color: var(--muted-2);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- Closing summary ---------- */
.project-summary{
  padding: 34px 0 0;
}

.project-summary__card{
  background: rgba(255,255,255,.70);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  padding: 22px;
}

.project-summary__card h2{
  margin: 0 0 10px;
}

.project-summary__card p{
  margin: 0;
  color: var(--muted-2);
  font-size: 16px;
  line-height: 1.7;
}

/* ---------- Bottom nav ---------- */
.proj-nav{
  padding: 28px 0 0;
}

.proj-nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .project-hero__grid,
  .story-grid{
    grid-template-columns: 1fr;
  }

  .project-meta{
    grid-template-columns: 1fr;
  }

  .snapshot-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .results-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .result-card,
  .result-card--wide{
    grid-column: auto;
  }

  .process-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .project-hero{
    padding: 46px 0 24px;
  }

  .snapshot-grid,
  .results-grid{
    grid-template-columns: 1fr;
  }

  .proj-nav__inner{
    flex-direction: column;
    align-items: stretch;
  }

  .proj-nav__inner .btn{
    width: 100%;
  }
}

.project--equalizer .project-hero__frame{
  aspect-ratio: 16 / 10;
  max-height: 360px;
  background: #111;
}

.project--equalizer .project-hero__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}


/* Thumbnail video */
.card__media--video{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
}

.card__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================
   PROCESS SECTION — EQUALIZER FIX
========================================= */

.project--equalizer .process-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Card */
.project--equalizer .process-step{
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  height: 100%;
}

/* Image frame */
.project--equalizer .process-step__frame{
  width: 100%;
  height: 220px;            /* Controls image area height */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f5ef;
  padding: 14px;
}

/* THIS IS THE IMPORTANT PART */
.project--equalizer .process-step__frame img{
  width: 100%;
  height: 100%;
  object-fit: contain;      /* Ensures full image shows */
}

/* Card text */
.project--equalizer .process-step__body{
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project--equalizer .process-step__num{
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.project--equalizer .process-step__title{
  font-size: 18px;
  margin: 0;
}

.project--equalizer .process-step__text{
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-2);
  margin: 0;
}

/* Mobile */
@media (max-width: 980px){
  .project--equalizer .process-grid{
    grid-template-columns: 1fr;
  }

  .project--equalizer .process-step__frame{
    height: 200px;
  }
}


.project--equalizer .result-card--poster{
  grid-column: 1 / -1;
  max-width: 550px;
  margin: 0 auto;
}

.project--equalizer .result-card__frame--poster{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;      /* slightly less padding */
  background: #f8f5ef;
  border-radius: 22px 22px 0 0;
  overflow: hidden;
  height: 620px;
}

.project--equalizer .result-card__frame--poster .result-card__img,
.project--equalizer .result-card__frame--poster .result-card__img--contain{
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
  padding: 0;
  background: transparent;
  box-shadow: 0 18px 46px rgba(0,0,0,.45);
}

@media (max-width: 768px){
  .project--equalizer .result-card--poster{
    max-width: 100%;
  }

  .project--equalizer .result-card__frame--poster{
    height: 480px;
    padding: 14px;
  }
}



/* ==========================================================
   ISOKAN — completed project refinements
========================================================== */

.page-isokan .project-hero__visual--split{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-isokan .project-motion-card{
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: 14px;
}

.page-isokan .project-motion-card__label{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.page-isokan .project-motion-card__media{
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: 14px;
  object-fit: cover;
  background: #111;
}

.page-isokan .result-card__frame,
.page-isokan .process-step__frame{
  background: #f8f5ef;
}

.page-isokan .result-card__img--contain,
.page-isokan .process-step__img--contain{
  object-fit: contain;
  padding: 18px;
  background: #f8f5ef;
}

.page-isokan .project-results,
.page-isokan .project-story,
.page-isokan .project-process,
.page-isokan .project-summary{
  padding-top: 28px;
}

@media (max-width: 980px){
  .page-isokan .project-hero__visual--split{
    gap: 12px;
  }
}

/* =========================
   EQUALIZER GRID
========================= */
.pgrid--equalizer{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
.ptile--poster{ grid-column: 1 / span 7; grid-row: 1 / span 3; }
.ptile--type{ grid-column: 8 / -1; grid-row: 1; }
.ptile--mood{ grid-column: 8 / -1; grid-row: 2; }
.ptile--process{ grid-column: 8 / -1; grid-row: 3; }
.ptile--poster,
.ptile--type,
.ptile--mood,
.ptile--process{
  display: flex;
  flex-direction: column;
}
.ptile--poster .pframe,
.ptile--type .pframe,
.ptile--mood .pframe,
.ptile--process .pframe{ flex: 1; }
.pframe--poster{ aspect-ratio: 2 / 3; }
.pframe--support{ aspect-ratio: auto; height: 100%; }
@media (max-width: 900px){
  .pgrid--equalizer{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .ptile--poster,
  .ptile--type,
  .ptile--mood,
  .ptile--process{
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .ptile--poster{
    max-width: 520px;
    margin: 0 auto;
  }
  .pframe--support{
    aspect-ratio: 16 / 10;
    height: auto;
  }
}

/* ===== FRAME TYPES ===== */
.pframe--wide{ aspect-ratio: 16 / 9; }
.pframe--square{ aspect-ratio: 1 / 1; }
.pframe--tall{ aspect-ratio: 2 / 3; }

.pframe{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: #f4f4f2;
}
.pimg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pimg--contain{
  object-fit: contain;
  padding: 24px;
  background: #fff;
}
.ptile--wide{ grid-column: 1 / -1; }
@media (max-width: 900px){
  .ptile--wide{ grid-column: auto; }
}
.pcap{
  padding: 14px 18px;
  font-size: 15px;
  color: var(--muted-2);
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.70);
}

/* =========================
   HYDRAFORCE ONLY
========================= */
.project--hydraforce .project-gallery .ptile--wide{
  max-width: 820px;
  margin: 0 auto 10px;
}
.project--hydraforce .project-gallery .pframe--hero{
  aspect-ratio: 21 / 9;
  max-height: 340px;
  overflow: hidden;
}
@media (max-width: 900px){
  .project--hydraforce .project-gallery .ptile--wide{
    max-width: 100%;
  }
  .project--hydraforce .project-gallery .pframe--hero{
    aspect-ratio: 16 / 9;
    max-height: 220px;
  }
}

/* =========================
   PROJECT BOTTOM NAV
========================= */
.proj-nav{ padding: 24px 0 0; }

.proj-nav__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

@media (max-width: 560px){
  .proj-nav__inner{
    flex-direction: column;
    align-items: stretch;
  }
}

/* =========================
   BUTTONS
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 600;
  font-size: 15px;
  background: rgba(255,255,255,.68);
  color: var(--text);
  transition: transform var(--t) ease, box-shadow var(--t) ease, background var(--t) ease, border-color var(--t) ease;
  white-space: nowrap;
}

@media (pointer: fine){
  .btn:hover{
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: rgba(20,20,20,.18);
    background: rgba(255,255,255,.88);
  }
}

.btn--primary{
  background: var(--text);
  color: #fff;
  border-color: rgba(20,20,20,.35);
}
@media (pointer: fine){
  .btn--primary:hover{
    background: #000;
    border-color: #000;
  }
}
.btn--ghost{ background: rgba(255,255,255,.58); }
.btn--full{ width: 100%; }

@media (max-width: 560px){
  .proj-nav__inner .btn{ width: 100%; }
}



/* ==========================================================
   SELECTED WORKS PAGE
========================================================== */
.selected-works-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.selected-work-card{
  overflow: hidden;
  padding: 0;
}

.selected-work-card__media{
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: #f5f2ec;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.selected-work-card__media--poster{
  aspect-ratio: 4 / 5;
  padding: 16px;
}

.selected-work-card__media--logo{
  aspect-ratio: 16 / 10;
  padding: 24px;
  background: #f8f6f1;
}

.selected-work-card__media img{
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.selected-work-card__body{
  padding: 18px 18px 20px;
}

.selected-work-card__meta{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.selected-work-card__title{
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1;
}

.selected-work-card__text{
  margin: 0;
  color: var(--muted-2);
  line-height: 1.7;
  font-size: 15px;
}

.selected-work-card__media--wide{
  aspect-ratio: 16 / 10;
  padding: 16px;
  background: #f8f6f1;
  border-bottom: 1px solid var(--line);
}

.selected-work-card__media--wide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.selected-work-card__media--logo{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px 24px;
  background: #f8f6f1;
  border-bottom: 1px solid var(--line);
  min-height: 220px;
}

.selected-work-card__media--logo img{
  width: min(100%, 760px);
  height: auto;
  display: block;
  object-fit: contain;
}

@media (max-width: 900px){
  .selected-works-grid{
    grid-template-columns: 1fr;
  }
}



/* =========================
   CONTACT
========================= */
.contact-grid{
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 18px;
  align-items:start;
}
@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }
}

.contact-details{ display:grid; gap: 12px; }
.contact-row{ display:grid; gap: 6px; }

.contact-label{
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-value{
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: 16px;
}
.contact-value:hover{ color: var(--text); transform: none; }

.social-links{ display:grid; gap: 10px; }
.social-link{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.60);
  transition: transform var(--t) ease, border-color var(--t) ease, box-shadow var(--t) ease;
}
@media (pointer: fine){
  .social-link:hover{
    transform: translateY(-2px);
    border-color: rgba(31,111,91,.22);
    box-shadow: 0 14px 34px rgba(17,17,17,.09);
  }
}
.social-ico{ width: 18px; height: 18px; display:inline-flex; }
.social-ico svg{ width: 18px; height: 18px; }

/* form */
.contact-form{ display:grid; gap: 12px; }
.field{ display:grid; gap: 8px; }

label{
  font-size: 14px;
  color: var(--muted-2);
}

input, textarea{
  width: 100%;
  padding: 13px 13px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow-sm);
  outline: none;
  transition: border-color var(--t) ease, box-shadow var(--t) ease;
}
input:focus, textarea:focus{
  border-color: rgba(31,111,91,.35);
  box-shadow: 0 0 0 4px rgba(31,111,91,.08), var(--shadow-sm);
}
textarea{ resize: vertical; min-height: 160px; }

.error{ font-size: 14px; color: #b42318; min-height: 18px; }
.status{ font-size: 14px; color: var(--muted); }
.form-note{ margin: 0; font-size: 14px; color: var(--muted); }

/* =========================
   FOOTER
========================= */
.footer{
  margin-top: var(--s7);
  padding: var(--s6) 0 var(--s4);
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
}

.footer__top{
  display:flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.footer__name{
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
}

.footer__role{
  color: var(--muted-2);      /* darker to fix contrast */
  margin-top: 6px;
  font-size: 15px;            /* larger than before */
  line-height: 1.5;
}

.footer__links{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.footer__link{
  display:inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.64);
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-2);
  transition: transform var(--t) ease, color var(--t) ease, border-color var(--t) ease, box-shadow var(--t) ease;
}
.footer__link:hover{
  transform: translateY(-2px);
  color: var(--text);
  border-color: rgba(31,111,91,.22);
  box-shadow: var(--shadow-sm);
}
.footer__link .ico{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 1px;
}
.footer__link .ico svg{ width: 18px; height: 18px; display: block; }

.footer__bottom{
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  line-height: 1.6;
}

@media (max-width: 700px){
  .footer__top{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  .footer__links{ justify-content: center; }
  .footer__link{ font-size: 14px; padding: 8px 10px; }
  .footer__name{ font-size: 18px; }
  .footer__role{ font-size: 15px; }
}

/* =========================
   REVEAL ANIMS
========================= */
[data-reveal]{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.is-inview{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
  [data-reveal]{ opacity: 1; transform: none; }
}

/* =========================
   ABOUT PAGE
========================= */
.about-layout{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 22px;
  align-items: start;
}

.about-copy.panel{
  padding: 22px;
}

.about-image.panel{
  padding: 18px;
  position: relative;
}

.about-image::before{
  content: "Ayotayo Samuel Olowoyo";
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 2;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.40);
  background: rgba(20,20,20,.52);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  letter-spacing: .06em;
  backdrop-filter: blur(10px);
}

.about-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.about-list li{
  position: relative;
  padding-left: 18px;
  color: var(--muted-2);
  font-size: 16px;
  line-height: 1.65;
}

.about-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: rgba(31,111,91,.55);
  box-shadow: 0 0 0 4px rgba(31,111,91,.12);
}

.tools{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tool{
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(20,20,20,.14);
  background: rgba(255,255,255,.60);
  font-size: 14px;
  color: var(--muted-2);
}

.about-cta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.img-ph{
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.45);
  box-shadow: 0 18px 46px rgba(20,20,20,.10);
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 620px;
}

.img-ph::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 240px at 30% 15%, rgba(255,255,255,.26), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,.08));
  opacity: .9;
}

.about-photo{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 22%;
  transform: scale(1.01);
}

@media (min-width: 980px){
  .about-image{
    position: sticky;
    top: 105px;
  }
}

@media (max-width: 980px){
  .about-layout{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .about-image{
    order: -1;
  }

  .img-ph{
    max-height: 520px;
    min-height: 360px;
  }

  .about-photo{
    object-position: 50% 35%;
  }

  .about-image::before{
    left: 16px;
    bottom: 16px;
    font-size: 11px;
    padding: 9px 10px;
  }
}

@media (max-width: 560px){
  .about-copy.panel{
    padding: 18px;
  }

  .about-image.panel{
    padding: 14px;
  }

  .img-ph{
    min-height: 320px;
    max-height: 460px;
    border-radius: 18px;
  }

  .about-photo{
    object-position: 50% 38%;
  }

  .about-cta{
    flex-direction: column;
    align-items: stretch;
  }

  .about-cta .btn{
    width: 100%;
  }
}

/* =========================
   RESPONSIVE TWEAKS
========================= */
@media (max-width: 600px){
  .container{ width: min(var(--container), calc(100% - 28px)); }
  .brand__logo{ height: 54px; }
  .lead{ font-size: 18px; }
}