@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Space+Mono:wght@400;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* ============ TOKENS ============ */
:root{
  --blue: #1622E0;
  --white: #F4F6FF;
  --line-soft: rgba(244,246,255,0.25);
  --dim: rgba(244,246,255,0.6);
  --max: 1200px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--blue);
  color:var(--white);
  font-family:'Space Grotesk', sans-serif;
  -webkit-font-smoothing:antialiased;
  transition: background-color 1.4s cubic-bezier(0.4,0,0.2,1);
}
a{color:inherit;}
img{max-width:100%; display:block;}

/* ============ BRACKET FRAME (reusable) ============ */
.bracket{position:relative; border:1px solid var(--line-soft);}
.bracket::before, .bracket::after,
.bracket .bl::before, .bracket .br::before{
  content:''; position:absolute; width:16px; height:16px; border:2px solid var(--white);
}
.bracket::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.bracket::after{ top:-1px; right:-1px; border-left:none; border-bottom:none; }
.bracket .bl::before{ bottom:-1px; left:-1px; border-right:none; border-top:none; }
.bracket .br::before{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

/* ============ TOP NAV ============ */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 40px; font-family:'Space Mono', monospace; font-size:12px; color:var(--dim);
  border-bottom:1px solid var(--line-soft);
  position:sticky; top:0; background:var(--blue); z-index:100;
  transition: background-color 1.4s cubic-bezier(0.4,0,0.2,1);
}
.topbar .brand{color:var(--white); font-family:'Space Grotesk'; font-weight:700; font-size:16px; letter-spacing:-0.02em; text-decoration:none;}
.nav-desktop{display:flex; gap:26px;}
.nav-desktop a{color:var(--dim); text-decoration:none; padding:10px 0;}
.nav-desktop a:hover, .nav-desktop a.active{color:var(--white);}

.nav-toggle{
  display:none; width:44px; height:44px; background:none; border:none; cursor:pointer;
  position:relative; z-index:110;
}
.nav-toggle span{
  position:absolute; left:11px; width:22px; height:2px; background:var(--white);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle span:first-child{ top:17px; }
.nav-toggle span:last-child{ top:25px; }
body.nav-open .nav-toggle span:first-child{ transform:translateY(4px) rotate(45deg); }
body.nav-open .nav-toggle span:last-child{ transform:translateY(-4px) rotate(-45deg); }

.nav-mobile{
  display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:var(--blue); z-index:90;
  flex-direction:column; justify-content:center; align-items:center; gap:8px;
  opacity:0; pointer-events:none; transition:opacity .25s ease, background-color 1.4s cubic-bezier(0.4,0,0.2,1);
}
.nav-mobile a{
  color:var(--white); text-decoration:none; font-family:'Space Grotesk';
  font-size:32px; font-weight:700; padding:14px 24px;
}
body.nav-open .nav-mobile{ opacity:1; pointer-events:auto; }
body.nav-open{ overflow:hidden; }

/* ============ HERO (home) ============ */
.hero{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px 40px 60px; position:relative;
}
.hero .label{
  font-family:'Space Mono', monospace; font-size:12px; color:var(--dim);
  display:flex; align-items:center; gap:10px; margin-bottom:30px;
}
.hero .label .dash{width:40px; height:1px; background:var(--line-soft);}
.hero h1{
  font-size:clamp(38px,6.4vw,88px); font-weight:700; line-height:1.02; letter-spacing:-0.02em;
  max-width:none;
}
.hero .tagline{
  margin-top:26px; font-family:'Space Mono', monospace; font-size:14px; color:var(--dim);
  max-width:none; width:100%; line-height:1.7;
}
.hero .actions{margin-top:44px; display:flex; gap:14px;}
.hero .actions a{
  font-family:'Space Mono', monospace; font-size:12px; padding:16px 26px;
  border:1px solid var(--white); color:var(--white); text-decoration:none;
  min-height:48px; display:inline-flex; align-items:center; justify-content:center;
}
.hero .actions a.solid{background:var(--white); color:var(--blue); font-weight:700;}

.hero .coord{ position:absolute; font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); }
.hero .coord.tl{ top:32px; left:40px; }
.hero .coord.tr{ top:32px; right:40px; text-align:right; }
.hero .coord.bl{ bottom:32px; left:40px; }
.hero .coord.br{ bottom:32px; right:40px; text-align:right; }

.scroll-cue{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  font-family:'Space Mono', monospace; font-size:11px; color:var(--dim);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-cue .line{width:1px; height:28px; background:var(--line-soft);}

/* ============ PAGE HEADER (non-home pages) ============ */
.page-header{ padding:150px 40px 60px; max-width:var(--max); margin:0 auto; }
.page-header .cap{ font-family:'Space Mono', monospace; font-size:12px; color:var(--dim); margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.page-header .cap .dash{width:40px; height:1px; background:var(--line-soft);}
.page-header h1{ font-size:clamp(34px,5.5vw,64px); font-weight:700; line-height:1.05; letter-spacing:-0.02em; max-width:none; }
.page-header p{ font-family:'Space Mono', monospace; font-size:14px; color:var(--dim); margin-top:20px; max-width:none; line-height:1.7; }

/* ============ SECTION HEAD ============ */
.shead{padding:50px 40px 26px; max-width:var(--max); margin:0 auto; display:flex; justify-content:space-between; border-top:1px solid var(--line-soft); align-items:baseline;}
.shead .cap{font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); letter-spacing:0.05em;}
.shead h2{font-size:28px; font-weight:700; margin-top:6px;}
.shead .view-all{font-family:'Space Mono', monospace; font-size:12px; color:var(--dim); text-decoration:none; align-self:end;}
.shead .view-all:hover{color:var(--white);}

/* ============ PROJECT GRID (shared: home featured + work full grid) ============ */
.grid{
  padding:0 40px 100px; max-width:var(--max); margin:0 auto;
  display:flex; flex-wrap:wrap;
}
.grid > *{ width:33.333%; padding:0 12px 24px; box-sizing:border-box; }
.grid.grid-2col > *{ width:50%; }
.fcard{ text-decoration:none; color:inherit; display:block; }
.fcard .frame{ padding:16px; }
.fcard .img-wrap{
  position:relative; overflow:hidden; border:1px solid var(--line-soft);
}
.fcard .img-wrap::before{ content:''; display:block; padding-top:125%; } /* 4:5 */
.fcard .img-wrap img{
  position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.05) brightness(0.85);
  opacity:0; transform:scale(1.08);
}
.fcard .img-wrap::after{
  content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:var(--blue);
  mix-blend-mode:color; opacity:1; pointer-events:none;
}
.fcard .hover-hint{
  position:absolute; top:0; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:20px;
  font-family:'Space Mono', monospace; font-size:10px; letter-spacing:0.06em; color:var(--dim);
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:16px 16px; background-position:center;
}
@media (hover:hover) and (pointer:fine){
  .fcard .img-wrap img{ transition:opacity .5s ease, filter .5s ease, transform .6s ease; }
  .fcard .img-wrap::after{ transition:opacity .5s ease; }
  .fcard .hover-hint{ transition:opacity .4s ease; }
  .fcard:hover .img-wrap img{ opacity:1; filter:grayscale(0) contrast(1) brightness(1); transform:scale(1); }
  .fcard:hover .img-wrap::after{ opacity:0; }
  .fcard:hover .hover-hint{ opacity:0; }
}
@media (hover:none), (pointer:coarse){
  .fcard .img-wrap img{ opacity:1; filter:none; transform:scale(1); }
  .fcard .img-wrap::after{ opacity:0; }
  .fcard .hover-hint{ display:none; }
}
.fcard .meta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:16px; font-family:'Space Mono', monospace; font-size:11px; color:var(--dim);
}
.fcard h4{ font-size:19px; font-weight:700; margin-top:10px; line-height:1.2; }
.fcard .arrow{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  font-family:'Space Mono', monospace; font-size:11px; color:var(--dim);
}
@media (hover:hover) and (pointer:fine){
  .fcard .arrow{ opacity:0; transform:translateX(-4px); transition:opacity .3s, transform .3s; }
  .fcard:hover .arrow{ opacity:1; transform:translateX(0); }
}

/* ============ ABOUT PAGE ============ */
.about-body{ padding:0 40px 60px; max-width:var(--max); margin:0 auto; display:flex; flex-wrap:wrap; }
.about-body > *{ box-sizing:border-box; padding:0 30px; }
.about-body > *:first-child{ width:55%; }
.about-body > *:last-child{ width:45%; }
.about-body .lead{ font-size:clamp(24px,3vw,34px); font-weight:700; line-height:1.35; max-width:none; }
.about-body .copy{ font-family:'Space Mono', monospace; font-size:13px; color:var(--dim); line-height:1.8; margin-top:28px; max-width:none; }
.stat-panel{ padding:36px; }
.stat-panel .cap{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); margin-bottom:26px; letter-spacing:0.04em; }
.stat-row{ display:flex; justify-content:space-between; align-items:baseline; padding:19px 0; border-top:1px solid var(--line-soft); font-family:'Space Mono', monospace; font-size:12.5px; gap:20px; }
.stat-row:first-of-type{ border-top:none; padding-top:0; }
.stat-row:last-of-type{ padding-bottom:0; }
.stat-row span:first-child{ color:var(--dim); letter-spacing:0.03em; }
.stat-row span:last-child{ color:var(--white); font-weight:700; text-align:right; }

.skills{ padding:0 40px 100px; max-width:var(--max); margin:0 auto; }
.skills .tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.skills .tags span{ font-family:'Space Mono', monospace; font-size:12px; border:1px solid var(--line-soft); padding:10px 16px; }

/* ============ CONTACT PAGE ============ */
.contact-body{ padding:0 40px 100px; max-width:var(--max); margin:0 auto; display:flex; flex-wrap:wrap; }
.contact-body > *{ width:50%; box-sizing:border-box; padding:0 30px; }
.contact-links{ display:flex; flex-direction:column; gap:0; }
.contact-links a{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 0; border-top:1px solid var(--line-soft); text-decoration:none;
  font-size:20px; font-weight:700;
}
.contact-links a:last-child{ border-bottom:1px solid var(--line-soft); }
.contact-links a span.sub{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); font-weight:400; }
.contact-links a:hover{ color:var(--dim); }

.contact-form{ display:flex; flex-direction:column; gap:18px; }
.contact-form label{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); display:block; margin-bottom:8px; }
.contact-form input, .contact-form textarea{
  width:100%; background:transparent; border:1px solid var(--line-soft); color:var(--white);
  font-family:'Space Grotesk'; font-size:15px; padding:14px 16px; min-height:48px;
}
.contact-form textarea{ min-height:120px; resize:vertical; font-family:'Space Mono', monospace; font-size:13px; }
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--white); }
.contact-form button{
  margin-top:8px; font-family:'Space Mono', monospace; font-size:12px; padding:16px 26px;
  background:var(--white); color:var(--blue); font-weight:700; border:none; cursor:pointer;
  min-height:48px;
}

/* ============ PROJECT DETAIL PAGE ============ */
.project-body{ padding:0 40px 100px; max-width:var(--max); margin:0 auto; }
.specs{ display:flex; flex-wrap:wrap; border:1px solid var(--line-soft); margin-bottom:50px; }
.specs > *{ width:25%; box-sizing:border-box; }
.specs div{ padding:18px 20px; border-right:1px solid var(--line-soft); font-family:'Space Mono', monospace; }
.specs div:last-child{ border-right:none; }
.specs .k{ font-size:10px; color:var(--dim); margin-bottom:8px; }
.specs .v{ font-size:13px; }

.project-title{ font-size:clamp(34px,5.5vw,64px); font-weight:700; line-height:1.05; max-width:none; margin-bottom:24px; }

/* text panel — same visual identity as the photo frames (bracket, white corners) */
.text-panel{ padding:26px 28px; margin-bottom:24px; }
.text-panel p.desc{ font-family:'Space Mono', monospace; font-size:14px; color:var(--dim); max-width:none; line-height:1.8; }
.text-panel p.desc + p.desc{ margin-top:14px; }

.project-body p.desc{ font-family:'Space Mono', monospace; font-size:14px; color:var(--dim); max-width:none; line-height:1.7; margin-bottom:16px; }
.frame-block{ margin-top:24px; padding:18px; }
.frame-block .cap{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); margin-bottom:14px; }
.frame-block .img{ position:relative; overflow:hidden; border:1px solid var(--line-soft); }
.frame-block .img::before{ content:''; display:block; padding-top:56.25%; } /* 16:9 */
.frame-block .img.img-portrait::before{ padding-top:150%; } /* 2:3 */
.frame-block .img.img-45::before{ padding-top:125%; } /* 4:5 */
.frame-block .img img{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; object-fit:cover; }
.frame-block .img svg{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; display:block; }
/* video inside a frame-block: no forced/cropped aspect ratio — scales to fit the box using its own natural dimensions */
.frame-block video{ width:100%; height:auto; display:block; }

/* ============ PROJECT PAGE — extra components for multi-page sites ============ */
.live-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  font-family:'Space Mono', monospace; font-size:12px; color:var(--white);
  text-decoration:none; border-bottom:1px solid var(--line-soft); padding-bottom:2px;
}
.live-link:hover{ border-color:var(--white); }

.page-grid{
  display:flex; flex-wrap:wrap; margin-top:24px;
}
.page-grid > *{ width:50%; box-sizing:border-box; padding:0 10px 20px; }
.page-grid .frame-block{ margin-top:0; padding:14px; }
.page-grid .frame-block .img::before{ padding-top:75%; } /* 4:3 */
.page-grid .frame-block .cap{ display:flex; justify-content:space-between; }
.page-grid .frame-block .cap .name{ color:var(--white); }

.detail-block{ margin-top:50px; }
.detail-block .eyebrow{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); margin-bottom:10px; }
.detail-block h3{ font-size:22px; font-weight:700; margin-bottom:14px; max-width:none; }
.detail-block p{ font-family:'Space Mono', monospace; font-size:13px; color:var(--dim); line-height:1.7; max-width:none; margin-bottom:22px; }

/* ============ BROWSER WINDOW MOCKUP ============ */
.browser-frame{ border:1px solid var(--line-soft); margin-top:24px; overflow:hidden; }
.browser-frame .bar{
  display:flex; align-items:center; gap:16px; padding:12px 16px;
  border-bottom:1px solid var(--line-soft); background:rgba(244,246,255,0.03);
}
.browser-frame .dots{ display:flex; gap:6px; flex:0 0 auto; }
.browser-frame .dots span{ width:9px; height:9px; border-radius:50%; border:1px solid var(--line-soft); }
.browser-frame .url{
  flex:1; font-family:'Space Mono', monospace; font-size:11px; color:var(--dim);
  border:1px solid var(--line-soft); padding:6px 12px; display:flex; align-items:center; gap:8px;
  max-width:340px;
}
.browser-frame .url .lock{ font-size:10px; }
.browser-frame .shot{ position:relative; overflow:hidden; background:rgba(244,246,255,0.03); }
.browser-frame .shot::before{ content:''; display:block; padding-top:62.5%; } /* 16:10 */
.browser-frame .shot img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.browser-frame .cap{
  padding:12px 16px; font-family:'Space Mono', monospace; font-size:11px; color:var(--dim);
  border-top:1px solid var(--line-soft); display:flex; justify-content:space-between;
}

/* ============ PHONE FRAME MOCKUP ============ */
.phone-frame{
  width:260px; margin:24px auto 0; border:2px solid var(--line-soft); border-radius:26px;
  padding:10px; position:relative;
}
.phone-frame .notch{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:80px; height:16px; background:var(--blue); border:1px solid var(--line-soft);
  border-radius:0 0 10px 10px; z-index:2;
}
.phone-frame .shot{ position:relative; overflow:hidden; border-radius:16px; background:rgba(244,246,255,0.03); }
.phone-frame .shot::before{ content:''; display:block; padding-top:216.67%; } /* 9:19.5 */
.phone-frame .shot img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.phone-frame .cap{
  text-align:center; margin-top:12px; font-family:'Space Mono', monospace; font-size:11px; color:var(--dim);
}

/* ============ RESEARCH PROJECT COMPONENTS ============ */
.stat-band{
  display:flex; flex-wrap:wrap; margin:40px -12px 36px;
}
.stat-band > *{ width:25%; box-sizing:border-box; padding:0 12px 24px; }
.stat-band .num{ font-size:clamp(38px,5.5vw,58px); font-weight:700; line-height:1; letter-spacing:-0.02em; }
.stat-band .lbl{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); margin-top:12px; line-height:1.5; letter-spacing:0.02em; }

.phase-steps{ display:flex; flex-wrap:wrap; margin-top:44px; }
.phase-steps > *{ width:25%; box-sizing:border-box; padding:0 18px 24px; }
.phase-steps .step{ padding-top:18px; border-top:1px solid var(--line-soft); }
.phase-steps .step .n{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); margin-bottom:14px; }
.phase-steps .step h4{ font-size:16px; font-weight:700; margin-bottom:10px; }
.phase-steps .step p{ font-family:'Space Mono', monospace; font-size:11.5px; color:var(--dim); line-height:1.7; }

/* insight cards — always visible, no click required, strong per-insight emphasis */
.insight-card{ padding:28px 0; border-top:1px solid var(--line-soft); }
.insight-card:last-child{ border-bottom:1px solid var(--line-soft); }
.insight-card .tag{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:12px; }
.insight-card .headline{ font-size:clamp(20px,2.6vw,28px); font-weight:700; line-height:1.3; max-width:none; }
.insight-card .detail{ font-family:'Space Mono', monospace; font-size:13px; color:var(--dim); line-height:1.8; max-width:none; margin-top:14px; }

.findings{ margin-top:32px; }
.findings .f-row{ padding:30px 0; border-top:1px solid var(--line-soft); }
.findings .f-row:last-child{ border-bottom:1px solid var(--line-soft); }
.findings .f-num{ font-family:'Space Mono', monospace; font-size:13px; color:var(--dim); letter-spacing:0.04em; margin-bottom:12px; }
.findings .f-head{ font-size:clamp(19px,2.4vw,25px); font-weight:700; line-height:1.3; max-width:none; }
.findings .f-sub{ font-family:'Space Mono', monospace; font-size:13px; color:var(--dim); line-height:1.75; max-width:none; margin-top:12px; }

.relevance-box{ border:1px solid var(--line-soft); padding:40px; margin-top:24px; }
.relevance-box .eyebrow{ margin-bottom:16px; }
.relevance-box p{ font-family:'Space Mono', monospace; font-size:13.5px; color:var(--dim); line-height:1.85; max-width:none; }

/* ============ MOTIVATION / PULL QUOTE ============ */
.motivation{ margin:36px 0 50px; padding:30px; border-left:2px solid var(--white); }
.motivation p{ font-size:clamp(19px,2.4vw,26px); font-weight:700; line-height:1.45; max-width:none; }
.motivation p.small{ font-family:'Space Mono', monospace; font-size:13px; font-weight:400; color:var(--dim); margin-top:16px; line-height:1.7; max-width:none; }

/* ============ HERO PHOTO — same bracket identity as every other project photo ============ */
.hero-photo{ margin:30px 0 0; padding:16px; }
.hero-photo .img-wrap{ position:relative; overflow:hidden; }
.hero-photo .img-wrap::before{ content:''; display:block; padding-top:56.25%; } /* 16:9 default */
.hero-photo .img-wrap.img-45::before{ padding-top:125%; } /* 4:5 */
.hero-photo .img-wrap img{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; object-fit:cover; display:block; }
.hero-photo .cap{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); padding-top:14px; }

/* ============ FIELDWORK GALLERY — uniform size, stacked vertically, caption right under each ============ */
.field-gallery{ margin-top:28px; display:flex; flex-direction:column; gap:36px; }
.field-gallery figure{ padding:16px; }
.field-gallery .img-wrap{ position:relative; overflow:hidden; }
.field-gallery .img-wrap::before{ content:''; display:block; padding-top:56.25%; } /* 16:9 default */
.field-gallery .img-wrap.img-45::before{ padding-top:125%; } /* 4:5 */
.field-gallery .img-wrap img{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; object-fit:cover; display:block; }
.field-gallery figcaption{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); padding-top:14px; }

/* ============ CENTERED DELIVERABLE IMAGE ============ */
.deliverable-photo{ max-width:520px; margin:28px auto 0; padding:16px; }
.deliverable-photo .img-wrap{ overflow:hidden; }
.deliverable-photo img{ width:100%; display:block; }
.deliverable-photo .cap{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); padding-top:14px; text-align:center; }
.deliverable-text{ max-width:none; margin:28px 0 0; text-align:left; }
.deliverable-text p{ font-family:'Space Mono', monospace; font-size:14px; color:var(--dim); line-height:1.9; }


/* ============ VIDEO GRID — native 9:16 video, same frame identity as photos ============ */
.video-grid{ display:flex; flex-wrap:wrap; margin-top:24px; }
.video-grid > *{ width:33.333%; box-sizing:border-box; padding:0 12px 24px; }
.video-card{ padding:16px; }
.video-card .vid-wrap{ position:relative; overflow:hidden; background:#000; }
.video-card .vid-wrap::before{ content:''; display:block; padding-top:177.78%; } /* 9:16 */
.video-card .vid-wrap video{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; object-fit:cover; display:block; }
.video-card .cap{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); padding-top:14px; display:flex; justify-content:space-between; align-items:baseline; }
.video-card .cap a{ color:var(--dim); text-decoration:none; }
.video-card .cap a:hover{ color:var(--white); }

/* ============ BRAND IDENTITY COMPONENTS ============ */
.swatch-grid{ display:flex; flex-wrap:wrap; margin-top:24px; }
.swatch-grid > *{ width:50%; box-sizing:border-box; padding:0 10px 20px; }
.swatch{ border:1px solid var(--line-soft); overflow:hidden; }
.swatch .chip{ padding-top:50%; } /* 2:1 */
.swatch .info{ padding:18px 20px; }
.swatch .info .name{ font-size:17px; font-weight:700; margin-bottom:6px; }
.swatch .info .hex{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); margin-bottom:10px; }
.swatch .info .why{ font-family:'Space Mono', monospace; font-size:12px; color:var(--dim); line-height:1.7; }

.logo-showcase{ padding:60px 30px; margin-top:24px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.logo-showcase .mark{ width:120px; height:auto; margin-bottom:22px; }
.logo-showcase .wordmark{ font-size:20px; font-weight:700; letter-spacing:0.02em; }
.logo-showcase .sub{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); margin-top:8px; }

.app-grid{ display:flex; flex-wrap:wrap; margin-top:24px; }
.app-grid > *{ width:50%; box-sizing:border-box; padding:0 10px 20px; }
.app-grid .frame-block{ margin-top:0; }
.app-grid .frame-block .img::before{ padding-top:100%; } /* 1:1 */

.mini-grid-3{ display:flex; flex-wrap:wrap; margin-top:24px; }
.mini-grid-3 > *{ width:33.333%; box-sizing:border-box; padding:0 10px 20px; }
.frame-block .big-num{ font-size:clamp(32px,4vw,44px); font-weight:700; line-height:1; }
.frame-block .card-title{ font-size:21px; font-weight:700; line-height:1.2; }
.frame-block .card-sub{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); line-height:1.65; margin-top:10px; }
.frame-block .r-card-inner{ padding:22px; min-height:150px; display:flex; flex-direction:column; justify-content:space-between; }

/* ============ THEORETICAL PILLARS ============ */
.pillar-grid{ display:flex; flex-wrap:wrap; margin-top:24px; }
.pillar-grid > *{ width:33.333%; box-sizing:border-box; padding:0 14px 20px; }
.pillar{ padding-top:16px; border-top:1px solid var(--line-soft); }
.pillar .n{ font-family:'Space Mono', monospace; font-size:10px; color:var(--dim); margin-bottom:10px; }
.pillar h4{ font-size:15px; font-weight:700; margin-bottom:8px; line-height:1.3; }
.pillar p{ font-family:'Space Mono', monospace; font-size:11.5px; color:var(--dim); line-height:1.65; }

/* ============ SAMPLE / ETHICS NOTE ============ */
.sample-note{ border:1px solid var(--line-soft); padding:24px 26px; margin-top:24px; display:flex; flex-wrap:wrap; }
.sample-note > *{ width:50%; box-sizing:border-box; padding:0 12px; }
.sample-note .col .k{ font-family:'Space Mono', monospace; font-size:10px; color:var(--dim); margin-bottom:8px; }
.sample-note .col .v{ font-size:14px; font-weight:700; line-height:1.5; }
.sample-note .col p{ font-family:'Space Mono', monospace; font-size:11.5px; color:var(--dim); line-height:1.7; margin-top:6px; }

/* ============ BIG CALLOUT INSIGHT ============ */
.callout-insight{ padding:40px; margin-top:24px; text-align:center; }
.callout-insight .eyebrow{ justify-content:center; display:flex; }
.callout-insight h3{ font-size:clamp(22px,3.4vw,32px); font-weight:700; line-height:1.35; max-width:none; margin:14px 0 26px; }
.callout-pattern{ display:flex; justify-content:center; align-items:center; gap:22px; flex-wrap:wrap; font-family:'Space Mono', monospace; font-size:13px; }
.callout-pattern .side{ padding:16px 22px; border:1px solid var(--line-soft); min-width:180px; }
.callout-pattern .side .label{ font-size:11px; color:var(--dim); margin-bottom:8px; }
.callout-pattern .side .value{ font-size:20px; font-weight:700; }
.callout-pattern .arrow{ font-size:20px; color:var(--dim); }

/* ============ PERCEPTION MATRIX (topic x group table) ============ */
.matrix{ margin-top:24px; overflow-x:auto; }
.matrix table{ width:100%; border-collapse:collapse; font-family:'Space Mono', monospace; font-size:12px; min-width:640px; }
.matrix th, .matrix td{ text-align:left; padding:14px 16px; border-top:1px solid var(--line-soft); }
.matrix thead th{ color:var(--dim); font-weight:400; font-size:10px; text-transform:uppercase; letter-spacing:0.03em; border-top:none; padding-bottom:12px; }
.matrix tbody th{ color:var(--white); font-weight:700; font-family:'Space Grotesk'; font-size:13px; white-space:nowrap; }
.matrix tbody tr:last-child td, .matrix tbody tr:last-child th{ border-bottom:1px solid var(--line-soft); }

/* ============ DOUBLE DIAMOND DIAGRAM — unframed, responsive ============ */
.dd-wrap{ width:100%; }
.dd-wrap svg{ width:100%; height:auto; display:block; }
.dd-mobile{ display:none; }
.dd-cap{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); padding-top:14px; }

/* ============ INTERACTIVE PHOTO-ELICITATION DEMO ============ */
.elicit-demo{ display:flex; flex-wrap:wrap; margin-top:24px; align-items:stretch; }
.elicit-demo > *{ box-sizing:border-box; padding:0 12px; }
.elicit-photo{ width:57%; }
.rank-list{ width:43%; }
.elicit-photo{ padding:16px; }

.rank-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; justify-content:center; }
.rank-item{
  display:flex; align-items:center; gap:14px; border:1px solid var(--line-soft);
  padding:16px 18px; cursor:grab; touch-action:none; background:var(--blue);
  position:relative; user-select:none;
}
.rank-item.dragging{ opacity:0.65; border-color:var(--white); z-index:10; cursor:grabbing; }
.rank-item .rank-num{ font-family:'Space Mono', monospace; font-size:13px; color:var(--dim); width:18px; flex:0 0 auto; }
.rank-item .rank-label{ font-size:15px; font-weight:700; flex:1; }
.rank-item .grip{ font-family:'Space Mono', monospace; color:var(--dim); font-size:16px; letter-spacing:-2px; }

.rank-hint{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); margin-top:14px; }

/* ============ REAL RESULTS TABLE ============ */
.rank-table{ margin-top:24px; overflow-x:auto; }
.rank-table table{ width:100%; border-collapse:collapse; font-family:'Space Mono', monospace; font-size:12px; min-width:520px; }
.rank-table th, .rank-table td{ text-align:left; padding:12px 16px; border-top:1px solid var(--line-soft); }
.rank-table thead th{ color:var(--dim); font-weight:400; font-size:10px; text-transform:uppercase; letter-spacing:0.03em; border-top:none; padding-bottom:10px; }
.rank-table tbody th{ color:var(--dim); font-weight:400; width:26px; }
.rank-table td.hl{ color:var(--white); font-weight:700; background:rgba(255,201,60,0.12); }
.rank-table tbody tr:last-child td, .rank-table tbody tr:last-child th{ border-bottom:1px solid var(--line-soft); }

/* ============ LOGO WORDMARK HERO (recreated in code, not raster) ============ */
.wordmark-hero{ padding:70px 30px; text-align:center; }
.wordmark-hero .word{ font-family:'Playfair Display', Georgia, serif; font-size:clamp(48px,9vw,110px); line-height:1; }
.wordmark-hero .word em{ font-style:italic; }
.wordmark-hero .sub{ font-family:Georgia, serif; font-size:13px; letter-spacing:0.15em; text-transform:uppercase; margin-top:14px; }
.wordmark-hero .tag{ font-family:'Space Mono', monospace; font-size:10px; letter-spacing:0.1em; color:var(--dim); margin-top:6px; text-transform:uppercase; }

/* ============ COASTER GRID (recreated in code) ============ */
.coaster-grid{ display:flex; flex-wrap:wrap; margin-top:24px; }
.coaster-grid > *{ width:33.333%; box-sizing:border-box; padding:0 8px 16px; }
.coaster{ position:relative; border-radius:50%; overflow:hidden; font-family:'Playfair Display', Georgia, serif; font-style:italic; }
.coaster::before{ content:''; display:block; padding-top:100%; }
.coaster .txt{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.coaster .txt{ font-size:20px; }

/* ============ TWO-COL PHOTO + TEXT FEATURE ============ */
.feature-2col{ display:flex; flex-wrap:wrap; margin-top:24px; align-items:center; }
.feature-2col > *{ width:50%; box-sizing:border-box; padding:0 12px; }
.feature-2col .ph{ padding:16px; }
.feature-2col .tx p{ font-family:'Space Mono', monospace; font-size:13px; color:var(--dim); line-height:1.8; }
.feature-2col .tx h4{ font-size:20px; font-weight:700; margin-bottom:12px; }

/* ============ PHOTO PRESENTATION UTILITIES ============ */
.frame-block.photo-frame{ padding:28px; }
.hero-photo.photo-frame{ padding:28px; }
.field-gallery figure.photo-frame{ padding:28px; }

/* ============ SEQUENTIAL SLIDE GALLERY ============ */
.slide-gallery{ display:flex; flex-wrap:wrap; margin-top:24px; }
.slide-gallery > *{ width:33.333%; box-sizing:border-box; padding:0 8px 16px; }
.slide-gallery .frame-block{ margin-top:0; }

/* ============ PHOTO GRID (hobbies / photography) — uniform tiles, framed like the rest of the site ============ */
.photo-grid{ display:flex; flex-wrap:wrap; margin-top:24px; }
.photo-grid .p-item{ padding:14px; box-sizing:border-box; width:33.333%; cursor:pointer; opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.photo-grid .p-item.in-view{ opacity:1; transform:translateY(0); }
.photo-grid .p-item .img-wrap{ position:relative; overflow:hidden; }
.photo-grid .p-item .img-wrap::before{ content:''; display:block; padding-top:125%; } /* 4:5 */
.photo-grid .p-item .img-wrap img{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.photo-grid .p-item:hover .img-wrap img{ transform:scale(1.06); }

/* ============ LIGHTBOX ============ */
.lightbox{
  display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:200;
  background:rgba(7,10,25,0.96); align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s ease;
}
.lightbox.open{ display:flex; }
.lightbox.show{ opacity:1; }
.lightbox img{
  max-width:88vw; max-height:82vh; width:auto; height:auto; display:block;
  object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.lightbox .lb-close{
  position:absolute; top:24px; right:28px; background:none; border:none; color:var(--white);
  font-family:'Space Mono', monospace; font-size:14px; cursor:pointer; padding:10px;
}
.lightbox .lb-nav{
  position:absolute; top:0; bottom:0; width:15%; min-width:60px; background:none; border:none;
  color:var(--white); font-size:28px; cursor:pointer; opacity:.6; transition:opacity .2s ease;
}
.lightbox .lb-nav:hover{ opacity:1; }
.lightbox .lb-prev{ left:0; text-align:left; padding-left:20px; }
.lightbox .lb-next{ right:0; text-align:right; padding-right:20px; }
.lightbox .lb-count{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  font-family:'Space Mono', monospace; font-size:11px; color:var(--dim);
}

/* ============ ICON ROW (small, unframed, side by side) ============ */
.icon-row{ display:flex; gap:36px; flex-wrap:wrap; margin-top:28px; }
.icon-row .ic{ text-align:center; }
.icon-row .ic img{ width:56px; height:56px; object-fit:contain; display:block; margin:0 auto; }
.icon-row .ic .lbl{ font-family:'Space Mono', monospace; font-size:10px; color:var(--dim); margin-top:10px; letter-spacing:0.03em; }

/* ============ NATURAL-RATIO IMAGE (no crop — for unusually shaped content like bottle tags) ============ */
.img-natural{ display:flex; align-items:flex-start; justify-content:center; }
.img-natural img{ width:100%; height:auto; display:block; }

/* ============ PORTRAIT — same treatment as Work cards (grayscale duotone, hover reveals color) ============ */
.portrait-section{ padding:0 40px 100px; max-width:var(--max); margin:0 auto; }
.portrait-frame{ position:relative; overflow:hidden; padding:20px; }
.portrait-frame .p-wrap{ position:relative; overflow:hidden; max-width:520px; margin:0 auto; }
.portrait-frame .p-wrap img{
  width:100%; display:block;
  filter:grayscale(1) contrast(1.08) brightness(0.95);
}
.portrait-frame .p-wrap::after{
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background:var(--blue); mix-blend-mode:color; opacity:1; pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .portrait-frame .p-wrap img{ transition:filter .5s ease; }
  .portrait-frame .p-wrap::after{ transition:opacity .5s ease; }
  .portrait-frame .p-wrap:hover img{ filter:grayscale(0) contrast(1) brightness(1); }
  .portrait-frame .p-wrap:hover::after{ opacity:0; }
}
@media (hover:none), (pointer:coarse){
  .portrait-frame .p-wrap img{ filter:none; }
  .portrait-frame .p-wrap::after{ opacity:0; }
}
.portrait-frame .p-wrap::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:rgba(244,246,255,0.5); z-index:2; animation:scanline 4s linear infinite;
  pointer-events:none;
}
@keyframes scanline{
  0%{ top:0; opacity:0; }
  5%{ opacity:.8; }
  95%{ opacity:.8; }
  100%{ top:100%; opacity:0; }
}
.portrait-cap{ text-align:center; font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); margin-top:16px; }

/* ============ TERMINAL HOME — S4AD-style, text only ============ */
.term-home{ padding:120px 40px 100px; max-width:1100px; margin:0 auto; font-family:'Space Mono', monospace; }
.term-home .t-label{
  font-size:clamp(24px,4vw,36px); font-weight:700; letter-spacing:0.5em; margin-bottom:28px;
}
.term-home .t-highlight{
  background:var(--white); color:var(--blue); padding:4px 2px;
  font-size:clamp(16px,2.4vw,22px); line-height:1.6; font-weight:700;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.term-home .t-link{
  display:inline-block; margin-top:22px; font-size:15px; text-decoration:underline;
  text-underline-offset:5px; color:var(--white);
}
.term-home .t-link:hover{ color:var(--dim); }

.t-divider{
  white-space:nowrap; overflow:hidden; color:var(--white); font-size:14px;
  letter-spacing:2px; margin:40px 0; opacity:0.9; line-height:1;
}

.t-kv .t-tag{
  display:inline-block; background:var(--white); color:var(--blue);
  padding:3px 8px; font-weight:700; font-size:14px; margin-bottom:10px;
}
.t-kv p{ font-size:16px; line-height:1.6; margin-bottom:4px; }
.t-schedule{ margin-top:18px; }
.t-schedule .row{ display:flex; gap:24px; font-size:14px; line-height:2; color:var(--dim); }
.t-schedule .row span:first-child{ width:110px; color:var(--white); flex:0 0 auto; }

.t-proj-list{ font-size:17px; line-height:2.1; max-width:900px; }
.t-proj-list a{ color:var(--white); text-decoration:none; }
.t-proj-list a:hover{ text-decoration:underline; }
.t-proj-list .sep{ color:var(--dim); margin:0 6px; }
.hero .actions a{ position:relative; overflow:hidden; transition:color .3s ease, border-color .3s ease; }
.hero .actions a::before{
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:var(--white); transition:left .35s ease; z-index:0;
}
.hero .actions a span{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; }
.hero .actions a .arrow-ic{ transition:transform .3s ease; }
.hero .actions a:hover{ color:var(--blue); }
.hero .actions a:hover::before{ left:0; }
.hero .actions a:hover .arrow-ic{ transform:translateX(4px); }
.hero .actions a.solid::before{ background:transparent; }
.hero .actions a.solid:hover{ color:var(--blue); }

/* ============ BSOD-STYLE HEADER (Work page) ============ */
.bsod{ padding:0 40px; max-width:var(--max); margin:0 auto 10px; }
.bsod-inner{ border:1px solid var(--line-soft); padding:40px; }
.bsod-face{ font-family:'Space Grotesk', sans-serif; font-size:48px; font-weight:700; line-height:1; }
.bsod-msg{ font-size:22px; font-weight:700; margin-top:18px; max-width:640px; }
.bsod-sub{ font-family:'Space Mono', monospace; font-size:13px; color:var(--dim); margin-top:12px; max-width:520px; line-height:1.7; }
.bsod-bar{ height:2px; background:var(--line-soft); margin-top:26px; position:relative; overflow:hidden; }
.bsod-bar::after{
  content:''; position:absolute; top:0; left:0; height:100%; width:40%; background:var(--white);
  animation:bsodload 2.2s ease-in-out infinite;
}
@keyframes bsodload{ 0%{ left:-40%; } 100%{ left:100%; } }
.bsod-code{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); margin-top:16px; letter-spacing:0.03em; }

/* ============ FILTER TAGS (Work page) ============ */
.filter-tags{ display:flex; flex-wrap:wrap; gap:10px; padding:0 40px; max-width:var(--max); margin:32px auto 0; }
.filter-tag{
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.03em;
  border:1px solid var(--line-soft); color:var(--dim); background:none; padding:10px 16px;
  cursor:pointer; transition:all .2s ease;
}
.filter-tag:hover{ color:var(--white); border-color:var(--white); }
.filter-tag.active{ background:var(--white); color:var(--blue); border-color:var(--white); font-weight:700; }
.fcard{ transition:opacity .3s ease, transform .3s ease; }
.fcard.hide{ display:none; }

/* ============ CV PAGE ============ */
.cv-job{ padding:30px 0; border-top:1px solid var(--line-soft); }
.cv-job:last-child{ border-bottom:1px solid var(--line-soft); }
.cv-job-head{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.cv-job-title{ font-size:21px; font-weight:700; }
.cv-job-meta{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); text-align:right; }
.cv-job-company{ font-family:'Space Mono', monospace; font-size:13px; color:var(--dim); margin-bottom:18px; }
.cv-job p.lead{ font-size:14px; line-height:1.7; max-width:680px; margin-bottom:14px; }
.cv-job ul{ list-style:none; margin-top:6px; }
.cv-job ul li{ font-family:'Space Mono', monospace; font-size:12.5px; color:var(--dim); line-height:1.85; padding-left:18px; position:relative; max-width:680px; }
.cv-job ul li::before{ content:'—'; position:absolute; left:0; color:var(--line-soft); }
.cv-achieve{ margin-top:20px; border:1px solid var(--line-soft); padding:18px 20px; }
.cv-achieve .lbl{ font-family:'Space Mono', monospace; font-size:10px; color:var(--dim); margin-bottom:12px; letter-spacing:0.03em; }
.cv-achieve ul{ margin-top:0; }
.cv-achieve ul li{ color:var(--white); font-weight:700; font-family:'Space Grotesk'; font-size:13.5px; line-height:1.6; margin-bottom:10px; padding-left:0; }
.cv-achieve ul li::before{ content:none; }

.cv-edu-row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; padding:22px 0; border-top:1px solid var(--line-soft); }
.cv-edu-row:last-child{ border-bottom:1px solid var(--line-soft); }
.cv-edu-degree{ font-weight:700; font-size:15px; }
.cv-edu-school{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); margin-top:6px; }
.cv-edu-meta{ font-family:'Space Mono', monospace; font-size:11px; color:var(--dim); text-align:right; }

.cv-contact-bar{ display:flex; flex-wrap:wrap; gap:28px; margin-top:24px; }
.cv-contact-bar a, .cv-contact-bar span{ font-family:'Space Mono', monospace; font-size:12px; color:var(--dim); text-decoration:none; }
.cv-contact-bar a:hover{ color:var(--white); }

/* ============ FOOTER ============ */
footer{
  padding:30px 40px; border-top:1px solid var(--line-soft);
  font-family:'Space Mono', monospace; font-size:11px; color:var(--dim);
  display:flex; justify-content:space-between; max-width:var(--max); margin:0 auto;
}

/* ===================== TABLET ===================== */
@media (max-width: 1024px){
  .grid{ padding:0 28px 80px; }
  .grid > *{ width:50%; padding:0 9px 18px; }
  .hero{ padding:110px 28px 60px; }
  .page-header{ padding:130px 28px 50px; }
  .topbar{ padding:18px 28px; }
  .shead{ padding:44px 28px 22px; }
  .coord.tl, .coord.tr{ top:22px; }
  .fcard .arrow{ opacity:1; transform:none; }

  .about-body{ padding:0 28px 50px; margin-left:0; margin-right:0; }
  .about-body > *:first-child, .about-body > *:last-child{ width:100%; margin-bottom:36px; }
  .photo-grid .p-item{ width:50%; }
  .contact-body{ padding:0 28px 80px; margin-left:0; margin-right:0; }
  .contact-body > *{ width:100%; padding:0 0 44px; }
  .skills{ padding:0 28px 80px; }
}

/* nav collapses to hamburger below 860px */
@media (max-width: 860px){
  .nav-desktop{ display:none; }
  .nav-toggle{ display:block; }
  .nav-mobile{ display:flex; }
}

/* ===================== MOBILE ===================== */
@media (max-width: 640px){
  .topbar{ padding:16px 20px; }
  .topbar .brand{ font-size:14px; }

  .portrait-section{ padding:0 20px 70px; }
  .bsod{ padding:0 20px; }
  .bsod-inner{ padding:24px; }
  .bsod-face{ font-size:36px; }
  .bsod-msg{ font-size:18px; }
  .filter-tags{ padding:0 20px; gap:8px; }
  .filter-tag{ padding:8px 12px; font-size:10px; }

  .hero{ padding:100px 20px 70px; }
  .hero .coord{ display:none; }
  .hero .coord.tl, .hero .coord.bl{ display:block; font-size:10px; }
  .hero .coord.tl{ top:20px; left:20px; }
  .hero .coord.bl{ bottom:20px; left:20px; }
  .hero h1{ font-size:32px; letter-spacing:-0.01em; }
  .hero .tagline{ font-size:13px; max-width:none; }
  .hero .actions{ flex-direction:column; width:100%; max-width:300px; }
  .hero .actions a{ width:100%; }
  .scroll-cue{ display:none; }

  .page-header{ padding:100px 20px 40px; }

  .shead{ padding:36px 20px 18px; flex-direction:column; align-items:flex-start; gap:10px; }
  .shead .view-all{ align-self:flex-start; padding:8px 0; }

  .grid{ padding:0 20px 70px; margin-left:0; margin-right:0; }
  .grid > *{ width:100%; padding:0 0 18px; }
  .fcard .img-wrap::before{ padding-top:115%; }
  .fcard .frame{ padding:14px; }

  .about-body{ padding:0 20px 40px; }
  .stat-panel{ padding:28px 22px; }
  .stat-row{ flex-wrap:wrap; gap:6px 20px; }
  .photo-grid .p-item{ width:100%; }
  .skills{ padding:0 20px 60px; }
  .skills .tags span{ font-size:11px; padding:8px 12px; }

  .contact-body{ padding:0 20px 70px; }
  .contact-links a{ font-size:17px; }

  .page-grid > *{ width:100%; }
  .specs > *{ width:50%; }
  .stat-band > *{ width:50%; padding-bottom:32px; }
  .phase-steps > *{ width:100%; padding-bottom:28px; }
  .insight-card .headline{ max-width:none; }
  .video-grid > *{ width:50%; }
  .mini-grid-3 > *{ width:50%; }
  .findings .f-head{ max-width:none; }
  .field-gallery figure{ padding:0; }
  .swatch-grid > *{ width:100%; }
  .app-grid > *{ width:100%; }
  .logo-showcase{ padding:44px 20px; }
  .deliverable-photo{ padding:0; }
  .video-grid > *{ width:100%; }
  .mini-grid-3 > *{ width:100%; }
  .dd-desktop{ display:none; }
  .dd-mobile{ display:block; }
  .elicit-demo > *{ width:100%; }
  .elicit-photo, .rank-list{ width:100%; }
  .coaster-grid > *{ width:50%; }
  .slide-gallery > *{ width:50%; }
  .feature-2col > *{ width:100%; }
  .wordmark-hero{ padding:44px 16px; }
  .pillar-grid > *{ width:100%; padding-bottom:24px; }
  .sample-note{ padding:20px; }
  .sample-note > *{ width:100%; padding-bottom:18px; }
  .callout-insight{ padding:26px 18px; }
  .callout-pattern{ gap:12px; }
  .callout-pattern .arrow{ transform:rotate(90deg); }
  .hero-photo .img-wrap.img-45::before{ padding-top:133.33%; } /* 3:4 on mobile */
  .browser-frame .url{ max-width:none; }
  .phone-frame{ width:220px; }
  .specs div:nth-child(2){ border-right:none; }
  .specs div{ border-bottom:1px solid var(--line-soft); }
  .project-body{ padding:0 20px 70px; }

  footer{ padding:24px 20px; flex-direction:column; gap:6px; align-items:flex-start; }
}

@media (max-width: 360px){
  .hero h1{ font-size:28px; }
  .nav-mobile a{ font-size:26px; }
}