/* =========================================================
   Victoria Nguyen — matcha café portfolio
   Vanilla rebuild of the "Victoria Portfolio" Claude Design
   ========================================================= */

:root{
  --bg:#f7f1e4;
  --card:#fffdf6;
  --ink:#42413a;
  --ink-strong:#37402f;
  --muted:#6d6a5e;
  --faded:#a09a88;
  --green:#3f5a3e;
  --green-mid:#5c7a5a;
  --green-soft:#8ba888;
  --green-hand:#7a9678;
  --green-tint:#e2ead9;
  --tan:#a58860;
  --dash:#d8cdb4;
  --line:#eee5cf;
  --border:#e3d9c1;
  --maxw:1060px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
section{scroll-margin-top:84px}

body{
  margin:0;
  background:var(--bg);
  font-family:Karla,-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-mid)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:28px;padding-right:28px}

/* handwritten accent */
.hand{font-family:Caveat,cursive}

/* ---------- keyframes ---------- */
@keyframes wave{0%,100%{transform:rotate(0deg)}30%{transform:rotate(22deg)}60%{transform:rotate(-6deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes steam{0%{transform:translateY(0) scaleX(1);opacity:0}25%{opacity:.7}100%{transform:translateY(-16px) scaleX(1.4);opacity:0}}
@keyframes squish{0%,100%{transform:scale(1,1)}50%{transform:scale(1.04,.95)}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-5px) rotate(var(--r,0deg))}}
@keyframes eqbar{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:var(--bg);border-bottom:2px dashed var(--dash);
}
.site-header .bar{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;gap:16px;
}
.brand{font-family:Caveat,cursive;font-weight:700;font-size:26px;color:var(--ink);white-space:nowrap}
.nav{display:flex;gap:24px;align-items:center;font-weight:600;font-size:14px}
.nav a{color:var(--muted)}
.nav a:hover,.nav a.active{color:var(--green);text-decoration:underline wavy var(--green-soft) 2px;text-underline-offset:5px}
.nav a.home{color:var(--ink);text-decoration:underline wavy var(--green-soft) 2px;text-underline-offset:5px}
.header-btns{display:flex;gap:8px;align-items:center}
.chip-btn{
  font-weight:700;font-size:12px;border:1.5px solid var(--ink);
  padding:6px 14px;color:var(--ink);background:var(--card);
  border-radius:99px 8px 99px 8px;white-space:nowrap;transition:.15s;
}
.chip-btn.alt{border-radius:8px 99px 8px 99px;padding:6px 12px}
.chip-btn:hover{background:var(--green);color:var(--bg);border-color:var(--green)}

.header-spacer{height:74px}

/* ---------- hero ---------- */
.hero{
  max-width:var(--maxw);margin:0 auto;padding:56px 28px 24px;
  display:flex;gap:28px;align-items:flex-end;
}
.hero-copy{flex:1;min-width:0;padding-bottom:14px}
.hero-hi{font-family:Caveat,cursive;font-weight:600;font-size:28px;color:var(--green-hand);transform:rotate(-1.2deg);margin-bottom:4px}
.hero h1{font-weight:800;font-size:46px;line-height:1.12;color:var(--ink-strong);letter-spacing:-.01em;margin:0;text-wrap:pretty}
.hero-bio{font-size:16px;line-height:1.65;color:var(--muted);margin:16px 0 0;max-width:460px}
.hero-bio b{color:var(--green);border-bottom:2px solid #a8c3a0;font-weight:700}

/* music player */
.music{
  display:inline-flex;align-items:center;gap:12px;margin-top:24px;
  background:var(--card);border:1.5px solid var(--dash);border-radius:14px;
  padding:10px 16px;box-shadow:2px 3px 0 var(--dash);
}
.music .play{
  width:32px;height:32px;border-radius:50%;background:var(--green);border:none;
  color:var(--bg);font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;
}
.music .play:hover{background:var(--green-mid)}
.music .track-title{font-weight:700;font-size:12.5px;color:var(--ink-strong)}
.music .track-sub{font-family:Caveat,cursive;font-weight:600;font-size:13px;color:var(--faded)}
.eq{display:flex;gap:2.5px;align-items:flex-end;height:15px;margin-left:2px}
.eq span{width:3px;height:15px;background:var(--green-soft);border-radius:2px;transform-origin:bottom;animation:eqbar 1s ease-in-out infinite;animation-play-state:paused}
.eq span:nth-child(2){animation-delay:.2s}
.eq span:nth-child(3){animation-delay:.4s}
.eq span:nth-child(4){animation-delay:.3s}
.music.playing .eq span{animation-play-state:running}
#spotify-embed{margin-top:16px;max-width:460px}
#spotify-embed iframe{border-radius:12px;display:block;width:100%}
#spotify-embed[hidden]{display:none}

/* blob barista */
.barista{width:300px;flex:none;position:relative;display:flex;flex-direction:column;justify-content:flex-end}
.barista-bubble{
  position:absolute;bottom:186px;right:6px;background:var(--card);border:2px solid var(--ink-strong);
  border-radius:16px;padding:10px 14px;color:var(--ink-strong);box-shadow:3px 3px 0 var(--green-soft);
  z-index:2;animation:floaty 3.6s ease-in-out infinite;
}
.barista-bubble .hand{font-weight:600;font-size:17px}
.bubble-tail{position:absolute;bottom:-9px;left:56px;width:13px;height:13px;background:var(--card);border-right:2px solid var(--ink-strong);border-bottom:2px solid var(--ink-strong);transform:rotate(45deg)}
.counter{height:36px;background:var(--tan);border-radius:8px 8px 0 0;box-shadow:inset 0 4px 0 #b99a70}

/* ---------- sticker strip ---------- */
.stickers{
  max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:20px;align-items:center;padding:4px 28px 46px;
}
.tag-1111{
  background:var(--green);color:var(--bg);font-weight:700;font-size:13px;padding:9px 14px;border-radius:10px;
  transform:rotate(5deg);box-shadow:2px 3px 0 var(--dash);animation:floaty 4.8s 1s ease-in-out infinite;cursor:pointer;
}
.stickers .note{font-family:Caveat,cursive;font-weight:600;font-size:18px;color:var(--faded);margin-left:auto}
.sticker{cursor:pointer}
.drag-sticker{position:relative;cursor:grab;touch-action:none;z-index:1}
.drag-sticker:active{cursor:grabbing;z-index:3}
.drag-sticker svg{display:block}

/* ---------- section heads ---------- */
.sec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.sec-head h2{font-weight:800;font-size:30px;color:var(--ink-strong);margin:0}
.sec-head .sub{font-family:Caveat,cursive;font-weight:600;font-size:20px;color:var(--green-hand);transform:rotate(-1deg)}

/* ---------- gallery ---------- */
.gallery{background:var(--card);border-top:2px dashed var(--dash);border-bottom:2px dashed var(--dash)}
.gallery .wrap{padding:48px 28px 40px}
.photo-wall{
  position:relative;height:440px;margin-top:18px;border-radius:16px;
  background:repeating-linear-gradient(0deg,transparent,transparent 26px,#f2ecdb 26px,#f2ecdb 28px);
}
.polaroid{position:absolute;cursor:grab;touch-action:none}
.polaroid:active{cursor:grabbing}
.polaroid .frame{background:var(--card);border:1px solid var(--line);padding:8px 8px 7px;box-shadow:0 4px 10px rgba(60,50,30,.18)}
.polaroid img{background:#efe7d6;display:block;width:100%;height:100%;object-fit:cover}
.polaroid .cap{font-family:Caveat,cursive;font-weight:600;font-size:16px;color:var(--muted);text-align:center;margin-top:6px}

/* ---------- work ---------- */
.work .wrap{padding:56px 28px 30px}
.featured{
  margin-top:22px;background:var(--green-mid);border-radius:18px;padding:28px 30px;
  display:flex;gap:26px;align-items:center;box-shadow:4px 5px 0 var(--dash);cursor:pointer;transition:.2s;
}
.featured:hover{transform:rotate(-.4deg)}
.featured .badges{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.featured .badge-a{font-weight:700;font-size:11px;background:var(--bg);color:var(--green);padding:4px 10px;border-radius:99px;letter-spacing:.08em}
.featured .badge-b{font-weight:700;font-size:11px;border:1.5px solid #c9dbc2;color:#eef2e8;padding:3px 10px;border-radius:99px}
.featured h3{font-weight:800;font-size:28px;color:var(--bg);margin:0}
.featured p{font-size:14.5px;line-height:1.6;color:#eef2e8;margin:8px 0 14px;max-width:520px}
.featured .tags span{font-weight:600;font-size:11.5px;background:rgba(247,241,228,.18);color:#f7f1e4;padding:4px 10px;border-radius:8px}
.featured .tags{display:flex;gap:7px;flex-wrap:wrap}
.featured .shot{
  width:190px;height:150px;flex:none;border-radius:12px;overflow:hidden;
  background:#fffdf6;display:flex;align-items:center;justify-content:center;padding:24px;
}
.featured .shot img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.featured .shot.dark{background:#141414;padding:0}
.featured .shot.dark img{width:100%;height:100%;object-fit:cover}

.filters{display:flex;gap:8px;margin-top:24px;align-items:center;flex-wrap:wrap}
.filter-btn{
  font-weight:700;font-size:12.5px;padding:7px 16px;border-radius:99px;border:1.5px solid var(--ink);
  cursor:pointer;background:var(--card);color:var(--ink);transition:.15s;
}
.filter-btn.active{background:var(--green);color:var(--bg)}
.filters .note{font-family:Caveat,cursive;font-weight:600;font-size:17px;color:var(--faded);margin-left:6px}

.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px}
.pcard{
  background:var(--card);border:1.5px solid var(--border);border-radius:16px;padding:22px 24px;
  cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;
}
.pcard:hover{transform:rotate(-.5deg) translateY(-3px);box-shadow:3px 4px 0 var(--dash)}
.pcard .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pcard .type{font-weight:700;font-size:10.5px;padding:3px 10px;border-radius:99px;letter-spacing:.08em}
.pcard .type.tech{background:var(--green-tint);color:var(--green)}
.pcard .type.product{background:#efe3d2;color:#8a6a3f}
.pcard .dates{font-family:Caveat,cursive;font-weight:600;font-size:15px;color:var(--faded);white-space:nowrap}
.pcard h3{font-weight:800;font-size:19px;color:var(--ink-strong);margin:10px 0 0;display:flex;align-items:center;gap:9px}
.pcard-logo{width:28px;height:28px;flex:none;object-fit:contain;border-radius:7px;mix-blend-mode:multiply}
.pcard p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:6px 0 12px}
.pcard .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.pcard .tags span{font-weight:600;font-size:11px;background:#f2ecdb;color:var(--muted);padding:3px 9px;border-radius:7px}
.pcard .cta{font-family:Caveat,cursive;font-weight:600;font-size:16px;color:var(--green-hand);margin-top:12px}

/* ---------- journey ---------- */
.journey .wrap{padding:50px 28px 30px}
.journey-cols{display:flex;gap:36px;margin-top:24px}
.timeline{flex:1.4;position:relative;padding-left:26px;border-left:2.5px dashed #c9bd9d;display:flex;flex-direction:column;gap:22px}
.tl-item{position:relative}
.tl-dot{position:absolute;left:-34px;top:4px;width:13px;height:13px;border-radius:50%;background:#c9bd9d;border:2.5px solid var(--bg);box-shadow:0 0 0 2px #c9bd9d}
.tl-dot.current{background:var(--green-soft);box-shadow:0 0 0 2px var(--green-soft)}
.tl-head{cursor:pointer}
.tl-dates{font-family:Caveat,cursive;font-weight:600;font-size:16px;color:var(--faded)}
.tl-titleline{display:flex;align-items:center;gap:10px;margin-top:6px}
.tl-title{font-weight:800;font-size:17px;color:var(--ink-strong)}
.tl-chev{font-weight:800;font-size:16px;color:var(--green-soft);display:inline-block;transition:transform .2s}
.tl-item.open .tl-chev{transform:rotate(90deg)}
.tl-role{font-weight:700;font-size:11.5px;color:var(--green-hand);letter-spacing:.1em;text-transform:uppercase;margin-top:7px}
.tl-detail{margin-top:10px;background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:14px 18px;max-width:480px;display:none;flex-direction:column;gap:5px}
.tl-item.open .tl-detail{display:flex}
.tl-blurb{font-family:Caveat,cursive;font-weight:600;font-size:17px;color:var(--green-hand)}
.tl-bullet{display:flex;gap:9px;font-size:13.5px;line-height:1.6;color:#514f45}
.tl-bullet .b{color:var(--green-soft)}
.tl-tools{font-family:Caveat,cursive;font-weight:600;font-size:16px;color:var(--faded);margin-top:6px;border-top:1.5px solid var(--line);padding-top:8px}
.edu-note{font-size:13.5px;line-height:1.6;color:var(--muted);margin:4px 0 0;max-width:480px}

.community{flex:1;display:flex;flex-direction:column;gap:12px}
.community .lead{font-family:Caveat,cursive;font-weight:600;font-size:20px;color:var(--green-hand);transform:rotate(-1deg)}
.org{background:var(--card);border:1.5px solid var(--border);padding:14px 18px;transition:transform .2s}
.org:nth-of-type(odd){border-radius:4px 16px 4px 16px;transform:rotate(-.8deg)}
.org:nth-of-type(even){border-radius:16px 4px 16px 4px;transform:rotate(.8deg)}
.org:hover{transform:rotate(0deg)}
.org .name{font-weight:700;font-size:14px;color:var(--ink-strong)}
.org .desc{font-size:12.5px;line-height:1.5;color:var(--muted)}

/* ---------- contact ---------- */
.contact .wrap{padding:50px 28px 40px}
.contact-card{
  background:var(--card);border:2px solid var(--ink-strong);border-radius:22px;box-shadow:5px 6px 0 var(--green-soft);
  padding:40px 44px;display:flex;gap:30px;align-items:center;
}
.contact-card .lead{font-family:Caveat,cursive;font-weight:600;font-size:30px;color:var(--green-hand);transform:rotate(-1deg)}
.contact-card h2{font-weight:800;font-size:34px;line-height:1.15;color:var(--ink-strong);margin:6px 0 12px}
.contact-card p{font-size:15px;line-height:1.65;color:var(--muted);max-width:440px;margin:0 0 20px}
.contact-links{display:flex;gap:10px;flex-wrap:wrap}
.c-btn{font-weight:700;font-size:13.5px;padding:11px 20px;text-decoration:none;white-space:nowrap;transition:.15s}
.c-btn.primary{background:var(--green);color:var(--bg);border-radius:99px 10px 99px 10px}
.c-btn.primary:hover{background:var(--green-mid);color:var(--bg)}
.c-btn.ghost{border:1.5px solid var(--ink);color:var(--ink);background:var(--bg);border-radius:10px 99px 10px 99px}
.c-btn.ghost:nth-of-type(odd){border-radius:99px 10px 99px 10px}
.c-btn.ghost:hover{background:#e9e1cd}
.contact-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px;font-size:12.5px;color:var(--muted)}
.contact-meta b{color:var(--ink-strong)}
.footer-note{text-align:center;font-family:Caveat,cursive;font-weight:600;font-size:18px;color:var(--faded);padding:30px 0 6px}
.contact-intro{flex:1.1;min-width:0}

/* contact form */
.contact-form{
  position:relative;flex:1;max-width:380px;background:var(--bg);
  border:1.5px dashed var(--dash);border-radius:16px;padding:22px 22px 20px;
  display:flex;flex-direction:column;gap:12px;
}
.cf-head{font-family:Caveat,cursive;font-weight:700;font-size:23px;color:var(--ink-strong);line-height:1.15}
.cf-head span{display:block;font-size:15px;font-weight:600;color:var(--faded)}
.cf-field{display:flex;flex-direction:column;gap:4px}
.cf-field span{font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-hand)}
.cf-field input,.cf-field textarea{
  font-family:Karla,sans-serif;font-size:14px;color:var(--ink);background:var(--card);
  border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;resize:vertical;
}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:#b8b09c}
.cf-field input:focus,.cf-field textarea:focus{outline:none;border-color:var(--green-soft);box-shadow:0 0 0 3px rgba(139,168,136,.25)}
.cf-send{
  align-self:flex-start;font-weight:700;font-size:13.5px;background:var(--green);color:var(--bg);
  border:none;padding:11px 22px;border-radius:99px 10px 99px 10px;cursor:pointer;transition:.15s;
}
.cf-send:hover{background:var(--green-mid)}
.cf-send:disabled{opacity:.6;cursor:default}
.cf-status{font-family:Caveat,cursive;font-weight:600;font-size:16px;min-height:20px;color:var(--faded)}
.cf-status.ok{color:var(--green)}
.cf-status.err{color:#b5654a}
.cf-blob{position:absolute;top:-116px;right:8px;width:150px;height:130px;pointer-events:none}

/* ---------- blob art (shared) ---------- */
.blob-body{background:var(--green-soft);border-radius:52% 48% 46% 54%/58% 56% 44% 42%;animation:squish 3.2s ease-in-out infinite;transform-origin:bottom}
.blob-eye{border-radius:50%;background:#33402f;animation:blink 5s infinite}

/* ---------- director blob (fixed) ---------- */
.director{
  position:fixed;right:22px;bottom:14px;z-index:80;width:150px;
  opacity:0;transform:translateY(30px);transition:opacity .5s,transform .5s;pointer-events:none;
}
.director.show{opacity:1;transform:translateY(0);pointer-events:auto}
.director-bubble{
  position:absolute;bottom:112px;right:8px;width:190px;background:var(--card);border:2px solid var(--ink-strong);
  border-radius:14px;padding:9px 12px;font-family:Caveat,cursive;font-weight:600;font-size:16px;color:var(--ink-strong);
  box-shadow:3px 3px 0 var(--green-soft);animation:floaty 3.4s ease-in-out infinite;
}
.director-bubble[hidden]{display:none}
.director-bubble .tail{position:absolute;bottom:-8px;right:42px;width:12px;height:12px;background:var(--card);border-right:2px solid var(--ink-strong);border-bottom:2px solid var(--ink-strong);transform:rotate(45deg)}
.director-blob{position:relative;height:104px;cursor:pointer}

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(45,40,28,.52);z-index:90;padding:36px 20px;
  display:none;align-items:center;justify-content:center;
}
.modal-overlay.open{display:flex}
.modal{
  width:760px;max-width:100%;max-height:calc(100vh - 72px);display:flex;flex-direction:column;
  background:var(--card);border:2px solid var(--ink-strong);border-radius:22px;box-shadow:6px 7px 0 var(--green-soft);overflow:hidden;
}
.modal-head{display:flex;align-items:center;gap:16px;padding:26px 30px 18px}
.modal-mono{width:56px;height:56px;flex:none;border-radius:14px;background:var(--green-tint);display:flex;align-items:center;justify-content:center;font-family:Caveat,cursive;font-weight:700;font-size:26px;color:var(--green)}
.modal-mono.has-logo{background:#fffdf6;border:1.5px solid var(--border);overflow:hidden;padding:6px}
.modal-mono img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.modal-mono.logo-fill{padding:0;border:none}
.modal-mono.logo-fill img{object-fit:cover}
.modal-titles{flex:1;min-width:0}
.modal-title{font-weight:800;font-size:27px;color:var(--green)}
.modal-meta{font-family:Caveat,cursive;font-weight:600;font-size:18px;color:var(--faded)}
.modal-close{width:38px;height:38px;flex:none;border-radius:50%;border:1.5px solid var(--dash);background:var(--bg);color:var(--ink);font-weight:700;font-size:15px;cursor:pointer;transition:.15s}
.modal-close:hover{background:#e9e1cd}
.modal-pills{display:flex;gap:8px;padding:0 30px 18px;flex-wrap:wrap}
.pill{font-weight:700;font-size:12.5px;padding:7px 16px;border-radius:99px}
.pill.role{background:var(--green-tint);color:var(--green)}
.pill.dates{background:#efe3d2;color:#8a6a3f}
.modal-psi{display:grid;grid-template-columns:1fr 1fr 1fr;background:#f2ecdb;border-top:2px dashed var(--dash);border-bottom:2px dashed var(--dash)}
.psi{padding:18px 20px;border-left:1.5px dashed var(--dash)}
.psi:first-child{border-left:none}
.psi .label{font-weight:700;font-size:10.5px;color:var(--green-hand);letter-spacing:.14em;margin-bottom:6px}
.psi .text{font-weight:700;font-size:13.5px;line-height:1.45;color:var(--ink-strong);text-wrap:pretty}
.modal-tabs{display:flex;gap:8px;padding:16px 30px;border-bottom:1.5px solid var(--line);flex-wrap:wrap}
.tab-btn{font-family:ui-monospace,Menlo,monospace;font-weight:600;font-size:12.5px;padding:7px 14px;border-radius:99px;border:1.5px solid #c9bd9d;cursor:pointer;background:transparent;color:var(--muted);transition:.15s}
.tab-btn.active{background:var(--green);color:var(--bg)}
.modal-body{padding:22px 30px 24px;flex:1;min-height:0;overflow-y:auto}

/* ---------- case-study content (pm-*) ---------- */
.pm-content-section{margin-bottom:20px}
.pm-content-section h3{font-weight:700;font-size:11px;color:var(--green-hand);letter-spacing:.16em;text-transform:uppercase;border-bottom:1.5px solid var(--line);padding-bottom:6px;margin:0 0 10px}
.pm-content-section h4{font-weight:800;font-size:14px;color:var(--ink-strong);margin:0 0 4px}
.pm-content-section p{font-size:14.5px;line-height:1.7;color:#514f45;margin:0 0 8px;text-wrap:pretty}
.pm-content-section ul{margin:0;padding-left:18px}
.pm-content-section li{font-size:14px;line-height:1.65;color:#514f45;margin-bottom:5px}
.pm-callout{background:var(--green-tint);border-left:3px solid var(--green-soft);border-radius:8px;padding:12px 14px;font-weight:600;color:var(--ink-strong)}
.pm-img-frame{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg)}
.pm-img-frame img{display:block;width:100%;height:auto}
.pm-video-frame{border-radius:12px;overflow:hidden;background:#000;aspect-ratio:16/9}
.pm-video-frame iframe{display:block;width:100%;height:100%;border:0}
.pm-tag-row{display:flex;gap:7px;flex-wrap:wrap}
.pm-tag-row span{font-weight:600;font-size:11.5px;background:#f2ecdb;color:var(--muted);padding:4px 11px;border-radius:8px}
.pm-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pm-feature-card{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.pm-feature-icon{font-size:22px;display:block;margin-bottom:6px}
.pm-two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pm-col-label{font-weight:800;font-size:12px;color:var(--green);letter-spacing:.04em;margin:0 0 6px}
.pm-insight-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pm-insight-card{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px 16px 14px 42px}
.pm-insight-num{position:absolute;left:14px;top:12px;font-family:Caveat,cursive;font-weight:700;font-size:18px;color:var(--green-soft)}
.pm-insight-card p{margin:0;font-size:13px}
.pm-reflection{display:flex;flex-direction:column;gap:10px}
.pm-reflection-item{display:flex;gap:12px;align-items:flex-start;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.pm-reflection-item span{font-size:18px}
.pm-reflection-item p{margin:0;font-size:13.5px}
.pm-prototype-btn{
  display:inline-block;font-weight:700;font-size:13px;background:var(--green);color:var(--bg);
  padding:10px 18px;border-radius:99px 10px 99px 10px;text-decoration:none;transition:.15s;
}
.pm-prototype-btn:hover{background:var(--green-mid);color:var(--bg)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .nav{display:none}
  .barista{display:none}
  .hero{flex-direction:column;align-items:stretch;padding-top:40px}
  .hero h1{font-size:36px}
  .journey-cols{flex-direction:column}
  .card-grid{grid-template-columns:1fr}
  .featured{flex-direction:column;align-items:flex-start}
  .featured .shot{width:100%}
  .contact-card{flex-direction:column;text-align:left}
  .contact-form{max-width:none}
  .cf-blob{display:none}
  .pm-feature-grid,.pm-two-col,.pm-insight-cards,.modal-psi{grid-template-columns:1fr}
  .photo-wall{height:auto;display:flex;flex-wrap:wrap;gap:16px;justify-content:center;background:none;padding:8px 0}
  .polaroid{position:static !important;transform:none !important}
}
@media (max-width:520px){
  .brand{font-size:22px}
  .hero h1{font-size:30px}
  .sec-head h2{font-size:24px}
}