{"id":659,"date":"2026-02-08T01:24:26","date_gmt":"2026-02-08T01:24:26","guid":{"rendered":"https:\/\/whity.me\/?page_id=659"},"modified":"2026-02-08T02:41:38","modified_gmt":"2026-02-08T02:41:38","slug":"659-2","status":"publish","type":"page","link":"https:\/\/whity.me\/index.php\/659-2\/","title":{"rendered":""},"content":{"rendered":"\n<section class=\"whity-ba-hover\">\n  <div class=\"whity-ba-hover__frame\">\n\n    <!-- BEFORE -->\n    <img decoding=\"async\" class=\"whity-ba-hover__img\"\n      src=\"https:\/\/images.unsplash.com\/photo-1524758631624-e2822e304c36?auto=format&#038;fit=crop&#038;w=1600&#038;q=80\"\n      alt=\"Before workspace\">\n\n    <!-- AFTER overlay -->\n    <div class=\"whity-ba-hover__after\">\n      <img decoding=\"async\" class=\"whity-ba-hover__img\"\n        src=\"https:\/\/images.unsplash.com\/photo-1521737604893-d14cc237f11d?auto=format&#038;fit=crop&#038;w=1600&#038;q=80\"\n        alt=\"After workspace\">\n    <\/div>\n\n    <!-- moving line -->\n    <div class=\"whity-ba-hover__line\" aria-hidden=\"true\"><\/div>\n\n    <!-- labels -->\n    <span class=\"whity-ba-hover__tag whity-ba-hover__tag--before\">Before<\/span>\n    <span class=\"whity-ba-hover__tag whity-ba-hover__tag--after\">After<\/span>\n  <\/div>\n\n  <div class=\"whity-ba-hover__text\">\n    <h3>Studio Corner \u2014 28 m\u00b2<\/h3>\n    <p>Focus-first zoning \u00b7 calmer flow \u00b7 reduced visual noise<\/p>\n  <\/div>\n<\/section>\n\n<style>\n.whity-ba-hover{\n  max-width:1100px;\n  margin:70px auto;\n  padding:0 20px;\n}\n\n.whity-ba-hover__frame{\n  position:relative;\n  width:100%;\n  height:380px;\n  border-radius:18px;\n  overflow:hidden;\n  border:1px solid rgba(0,0,0,.08);\n  background:#fff;\n}\n\n.whity-ba-hover__img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n  filter:saturate(.92) contrast(.96);\n}\n\n\/* overlay *\/\n.whity-ba-hover__after{\n  position:absolute;\n  top:0; left:0;\n  width:50%;\n  height:100%;\n  overflow:hidden;\n  will-change: width;\n}\n\n\/* line *\/\n.whity-ba-hover__line{\n  position:absolute;\n  top:0; left:50%;\n  width:1px;\n  height:100%;\n  background:rgba(0,0,0,.22);\n  pointer-events:none;\n  transform:translateX(-0.5px);\n  will-change:left;\n}\n\n\/* labels *\/\n.whity-ba-hover__tag{\n  position:absolute;\n  top:14px;\n  padding:6px 12px;\n  font-size:12px;\n  letter-spacing:.06em;\n  text-transform:uppercase;\n  border-radius:999px;\n  background:rgba(255,255,255,.88);\n  border:1px solid rgba(0,0,0,.08);\n  color:rgba(0,0,0,.65);\n}\n.whity-ba-hover__tag--before{ left:14px; }\n.whity-ba-hover__tag--after{ right:14px; }\n\n.whity-ba-hover__text{ margin-top:24px; }\n.whity-ba-hover__text h3{ margin:0 0 8px; font-weight:600; }\n.whity-ba-hover__text p{ margin:0; opacity:.75; }\n\n@media (max-width:640px){\n  .whity-ba-hover__frame{ height:260px; }\n}\n<\/style>\n\n<script>\ndocument.querySelectorAll('.whity-ba-hover__frame').forEach(frame => {\n  const after = frame.querySelector('.whity-ba-hover__after');\n  const line  = frame.querySelector('.whity-ba-hover__line');\n\n  const setPos = (clientX) => {\n    const rect = frame.getBoundingClientRect();\n    let x = clientX - rect.left;\n    x = Math.max(0, Math.min(x, rect.width));\n    const pct = (x \/ rect.width) * 100;\n\n    after.style.width = pct + '%';\n    line.style.left = pct + '%';\n  };\n\n  frame.addEventListener('mousemove', e => setPos(e.clientX));\n  frame.addEventListener('mouseleave', () => {\n    after.style.width = '50%';\n    line.style.left = '50%';\n  });\n\n  frame.addEventListener('touchmove', e => {\n    const t = e.touches[0];\n    if (!t) return;\n    setPos(t.clientX);\n  }, { passive:true });\n\n  frame.addEventListener('touchend', () => {\n    after.style.width = '50%';\n    line.style.left = '50%';\n  });\n});\n<\/script>\n\n\n\n\n<!-- =========================\nWHITY \u2014 Portfolio \/ Workspace Studies\nStatic Before\/After Library + Case Study Grid\nBootstrap 5\n========================= -->\n\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n\n<style>\n  :root{\n    --whity-ink:#1f2328;\n    --whity-muted:#5f6b75;\n    --whity-line:rgba(0,0,0,.08);\n    --whity-surface:#ffffff;\n    --whity-soft:#f6f7f8;\n    --whity-shadow:0 12px 30px rgba(16,24,40,.06);\n    --whity-radius:18px;\n  }\n\n  body{ color:var(--whity-ink); background:var(--whity-surface); }\n  .whity-section{ padding:72px 0; }\n  .whity-section--tight{ padding:48px 0; }\n  .whity-muted{ color:var(--whity-muted); }\n\n  .whity-hero{\n    padding:88px 0 40px;\n    border-bottom:1px solid var(--whity-line);\n    background:linear-gradient(180deg, rgba(246,247,248,.9), rgba(255,255,255,1));\n  }\n\n  .whity-pill{\n    display:inline-flex; align-items:center; gap:8px;\n    padding:8px 12px; border:1px solid var(--whity-line);\n    border-radius:999px; font-size:13px; color:var(--whity-muted);\n    background:rgba(255,255,255,.7);\n  }\n\n  .whity-card{\n    border:1px solid var(--whity-line);\n    border-radius:var(--whity-radius);\n    background:var(--whity-surface);\n    box-shadow:var(--whity-shadow);\n    overflow:hidden;\n    transition:transform .18s ease, box-shadow .18s ease;\n  }\n  .whity-card:hover{\n    transform:translateY(-2px);\n    box-shadow:0 18px 42px rgba(16,24,40,.08);\n  }\n\n  .whity-card__body{ padding:20px; }\n  .whity-card__title{ font-weight:600; margin:0 0 6px; }\n  .whity-card__meta{ font-size:13px; color:var(--whity-muted); margin:0 0 12px; }\n\n  .whity-chip{\n    display:inline-block;\n    padding:6px 10px;\n    border-radius:999px;\n    font-size:12px;\n    border:1px solid var(--whity-line);\n    color:var(--whity-muted);\n    background:rgba(246,247,248,.7);\n    margin:2px 6px 0 0;\n  }\n\n  \/* ---- Before\/After Card ---- *\/\n  .ba-wrap{\n    position:relative;\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:10px;\n    padding:16px;\n    background:rgba(246,247,248,.55);\n    border-bottom:1px solid var(--whity-line);\n  }\n\n  .ba-panel{\n    background:#fff;\n    border:1px solid var(--whity-line);\n    border-radius:14px;\n    overflow:hidden;\n  }\n\n  .ba-label{\n    font-size:12px;\n    letter-spacing:.06em;\n    text-transform:uppercase;\n    color:var(--whity-muted);\n    padding:10px 12px;\n    border-bottom:1px solid var(--whity-line);\n    background:rgba(255,255,255,.85);\n  }\n\n  .ba-img{\n    width:100%;\n    height:220px;\n    object-fit:cover;\n    filter:saturate(.92) contrast(.96); \/* calm visuals *\/\n  }\n\n  \/* optional: subtle auto-moving divider (NOT a slider, no interaction) *\/\n  .ba-divider{\n    position:absolute;\n    top:26px;\n    bottom:26px;\n    left:50%;\n    width:1px;\n    background:rgba(0,0,0,.10);\n    transform:translateX(-0.5px);\n    animation:whityDrift 8s ease-in-out infinite;\n    pointer-events:none;\n  }\n  @keyframes whityDrift{\n    0%{ transform:translateX(-4px); opacity:.75; }\n    50%{ transform:translateX(4px); opacity:.95; }\n    100%{ transform:translateX(-4px); opacity:.75; }\n  }\n  @media (prefers-reduced-motion: reduce){\n    .ba-divider{ animation:none; }\n  }\n\n  \/* ---- Buttons ---- *\/\n  .whity-btn{\n    display:inline-flex; align-items:center; gap:8px;\n    padding:12px 16px;\n    border-radius:999px;\n    border:1px solid var(--whity-line);\n    background:#fff;\n    color:var(--whity-ink);\n    text-decoration:none;\n    font-weight:600;\n    transition:transform .15s ease, background .15s ease;\n  }\n  .whity-btn:hover{ transform:translateY(-1px); background:rgba(246,247,248,.75); }\n\n  .whity-btn--primary{\n    background:var(--whity-ink);\n    color:#fff;\n    border-color:rgba(0,0,0,.25);\n  }\n  .whity-btn--primary:hover{ background:#111418; }\n\n  \/* ---- Filter chips ---- *\/\n  .filter-bar{\n    display:flex; flex-wrap:wrap; gap:8px;\n    padding:10px;\n    border:1px solid var(--whity-line);\n    border-radius:999px;\n    background:rgba(255,255,255,.85);\n  }\n  .filter-btn{\n    padding:8px 12px;\n    border-radius:999px;\n    border:1px solid var(--whity-line);\n    background:#fff;\n    color:var(--whity-muted);\n    font-size:13px;\n    cursor:pointer;\n    transition:background .15s ease, color .15s ease;\n  }\n  .filter-btn.active{\n    background:rgba(31,35,40,.08);\n    color:var(--whity-ink);\n  }\n\n  \/* ---- Study grid image ---- *\/\n  .study-thumb{\n    width:100%;\n    height:200px;\n    object-fit:cover;\n    filter:saturate(.92) contrast(.96);\n  }\n\n  .whity-rule{\n    border-top:1px solid var(--whity-line);\n    margin:0;\n  }\n<\/style>\n\n<!-- =========================\nHERO \/ INTRO\n========================= -->\n<header class=\"whity-hero\">\n  <div class=\"container\">\n    <div class=\"row g-4 align-items-end\">\n      <div class=\"col-lg-8\">\n        <span class=\"whity-pill\">Portfolio \u00b7 Workspace Studies<\/span>\n        <h1 class=\"display-6 mt-3 mb-2\" style=\"font-weight:650;\">\n          Decision-led workspace studies \u2014 built for clarity.\n        <\/h1>\n        <p class=\"whity-muted mb-0\" style=\"max-width: 62ch;\">\n          We document what changed in zoning, flow, lighting, and spatial calm \u2014 without sliders, gimmicks, or \u201cdesign show-off\u201d.\n        <\/p>\n      <\/div>\n\n      <div class=\"col-lg-4 d-flex gap-2 justify-content-lg-end\">\n        <a class=\"whity-btn\" href=\"#before-after\">Explore snapshots<\/a>\n        <a class=\"whity-btn whity-btn--primary\" href=\"\/packages\">View packages<\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/header>\n\n<!-- =========================\nSECTION: BEFORE \/ AFTER SNAPSHOT LIBRARY\n========================= -->\n<section id=\"before-after\" class=\"whity-section\">\n  <div class=\"container\">\n\n    <div class=\"row g-3 align-items-center mb-4\">\n      <div class=\"col-lg-7\">\n        <h2 class=\"h4 mb-1\" style=\"font-weight:650;\">Decision Before \/ After \u2014 Snapshot Library<\/h2>\n        <p class=\"whity-muted mb-0\" style=\"max-width: 70ch;\">\n          Quiet comparisons that highlight spatial decisions \u2014 not decoration.\n        <\/p>\n      <\/div>\n\n      <div class=\"col-lg-5\">\n        <!-- Optional filters (simple + calm) -->\n        <div class=\"filter-bar justify-content-lg-end\" aria-label=\"Filter by decision lens\">\n          <button class=\"filter-btn active\" data-filter=\"all\" type=\"button\">All<\/button>\n          <button class=\"filter-btn\" data-filter=\"zoning\" type=\"button\">Zoning<\/button>\n          <button class=\"filter-btn\" data-filter=\"flow\" type=\"button\">Flow<\/button>\n          <button class=\"filter-btn\" data-filter=\"light\" type=\"button\">Light<\/button>\n          <button class=\"filter-btn\" data-filter=\"calm\" type=\"button\">Visual Calm<\/button>\n          <button class=\"filter-btn\" data-filter=\"support\" type=\"button\">Support Zone<\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Snapshot Cards Grid -->\n    <div class=\"row g-4\" id=\"snapshotGrid\">\n\n      <!-- CARD 1 -->\n      <div class=\"col-lg-6 snapshot-item\" data-tags=\"zoning flow calm\">\n        <article class=\"whity-card\">\n          <div class=\"ba-wrap\">\n            <!-- subtle divider (optional). remove this div if you want 100% static look -->\n            <div class=\"ba-divider\"><\/div>\n\n            <div class=\"ba-panel\">\n              <div class=\"ba-label\">Before<\/div>\n              <img decoding=\"async\" class=\"ba-img\" src=\"https:\/\/images.unsplash.com\/photo-1524758631624-e2822e304c36?q=80&#038;w=1200&#038;auto=format&#038;fit=crop\" alt=\"Before workspace snapshot\">\n            <\/div>\n            <div class=\"ba-panel\">\n              <div class=\"ba-label\">After<\/div>\n              <img decoding=\"async\" class=\"ba-img\" src=\"https:\/\/images.unsplash.com\/photo-1520607162513-77705c0f0d4a?q=80&#038;w=1200&#038;auto=format&#038;fit=crop\" alt=\"After workspace snapshot\">\n            <\/div>\n          <\/div>\n\n          <div class=\"whity-card__body\">\n            <h3 class=\"whity-card__title\">Studio Corner \u2014 28 m\u00b2<\/h3>\n            <p class=\"whity-card__meta\">Focus-first zoning \u00b7 calmer flow \u00b7 reduced visual noise<\/p>\n\n            <ul class=\"mb-3\" style=\"color:var(--whity-muted);\">\n              <li>Zones became readable (focus vs support).<\/li>\n              <li>Flow clarified by removing cross-traffic near the desk.<\/li>\n              <li>Visual calm improved through fewer competing surfaces.<\/li>\n            <\/ul>\n\n            <div class=\"mb-3\">\n              <span class=\"whity-chip\">Zoning<\/span>\n              <span class=\"whity-chip\">Flow<\/span>\n              <span class=\"whity-chip\">Visual Calm<\/span>\n            <\/div>\n\n            <a class=\"whity-btn\" href=\"\/portfolio\/studio-corner-28\">View workspace study \u2192<\/a>\n          <\/div>\n        <\/article>\n      <\/div>\n\n      <!-- CARD 2 -->\n      <div class=\"col-lg-6 snapshot-item\" data-tags=\"light calm support\">\n        <article class=\"whity-card\">\n          <div class=\"ba-wrap\">\n            <div class=\"ba-divider\"><\/div>\n\n            <div class=\"ba-panel\">\n              <div class=\"ba-label\">Before<\/div>\n              <img decoding=\"async\" class=\"ba-img\" src=\"https:\/\/images.unsplash.com\/photo-1551218808-94e220e084d2?q=80&#038;w=1200&#038;auto=format&#038;fit=crop\" alt=\"Before workspace snapshot\">\n            <\/div>\n            <div class=\"ba-panel\">\n              <div class=\"ba-label\">After<\/div>\n              <img decoding=\"async\" class=\"ba-img\" src=\"https:\/\/images.unsplash.com\/photo-1521737604893-d14cc237f11d?q=80&#038;w=1200&#038;auto=format&#038;fit=crop\" alt=\"After workspace snapshot\">\n            <\/div>\n          <\/div>\n\n          <div class=\"whity-card__body\">\n            <h3 class=\"whity-card__title\">Client-facing Studio \u2014 44 m\u00b2<\/h3>\n            <p class=\"whity-card__meta\">Lighting hierarchy \u00b7 support zone definition<\/p>\n\n            <ul class=\"mb-3\" style=\"color:var(--whity-muted);\">\n              <li>Task lighting introduced to reduce glare moments.<\/li>\n              <li>Support zone consolidated for faster daily resets.<\/li>\n              <li>Calmer background palette to lower visual load.<\/li>\n            <\/ul>\n\n            <div class=\"mb-3\">\n              <span class=\"whity-chip\">Light<\/span>\n              <span class=\"whity-chip\">Support Zone<\/span>\n              <span class=\"whity-chip\">Visual Calm<\/span>\n            <\/div>\n\n            <a class=\"whity-btn\" href=\"\/portfolio\/client-studio-44\">View workspace study \u2192<\/a>\n          <\/div>\n        <\/article>\n      <\/div>\n\n      <!-- CARD 3 -->\n      <div class=\"col-lg-6 snapshot-item\" data-tags=\"zoning support\">\n        <article class=\"whity-card\">\n          <div class=\"ba-wrap\">\n            <div class=\"ba-divider\"><\/div>\n\n            <div class=\"ba-panel\">\n              <div class=\"ba-label\">Before<\/div>\n              <img decoding=\"async\" class=\"ba-img\" src=\"https:\/\/images.unsplash.com\/photo-1551292831-023188e78222?q=80&#038;w=1200&#038;auto=format&#038;fit=crop\" alt=\"Before workspace snapshot\">\n            <\/div>\n            <div class=\"ba-panel\">\n              <div class=\"ba-label\">After<\/div>\n              <img decoding=\"async\" class=\"ba-img\" src=\"https:\/\/images.unsplash.com\/photo-1524758631624-e2822e304c36?q=80&#038;w=1200&#038;auto=format&#038;fit=crop\" alt=\"After workspace snapshot\">\n            <\/div>\n          <\/div>\n\n          <div class=\"whity-card__body\">\n            <h3 class=\"whity-card__title\">Micro Team Hub \u2014 50 m\u00b2<\/h3>\n            <p class=\"whity-card__meta\">Support buffers \u00b7 clearer adjacencies<\/p>\n\n            <ul class=\"mb-3\" style=\"color:var(--whity-muted);\">\n              <li>Support elements moved away from focus seating.<\/li>\n              <li>Storage repositioned to act as a buffer.<\/li>\n              <li>Collaboration kept \u201clight\u201d without entering focus paths.<\/li>\n            <\/ul>\n\n            <div class=\"mb-3\">\n              <span class=\"whity-chip\">Zoning<\/span>\n              <span class=\"whity-chip\">Support Zone<\/span>\n            <\/div>\n\n            <a class=\"whity-btn\" href=\"\/portfolio\/micro-hub-50\">View workspace study \u2192<\/a>\n          <\/div>\n        <\/article>\n      <\/div>\n\n      <!-- CARD 4 -->\n      <div class=\"col-lg-6 snapshot-item\" data-tags=\"flow zoning\">\n        <article class=\"whity-card\">\n          <div class=\"ba-wrap\">\n            <div class=\"ba-divider\"><\/div>\n\n            <div class=\"ba-panel\">\n              <div class=\"ba-label\">Before<\/div>\n              <img decoding=\"async\" class=\"ba-img\" src=\"https:\/\/images.unsplash.com\/photo-1520607162513-77705c0f0d4a?q=80&#038;w=1200&#038;auto=format&#038;fit=crop\" alt=\"Before workspace snapshot\">\n            <\/div>\n            <div class=\"ba-panel\">\n              <div class=\"ba-label\">After<\/div>\n              <img decoding=\"async\" class=\"ba-img\" src=\"https:\/\/images.unsplash.com\/photo-1521737604893-d14cc237f11d?q=80&#038;w=1200&#038;auto=format&#038;fit=crop\" alt=\"After workspace snapshot\">\n            <\/div>\n          <\/div>\n\n          <div class=\"whity-card__body\">\n            <h3 class=\"whity-card__title\">Founder Office \u2014 36 m\u00b2<\/h3>\n            <p class=\"whity-card__meta\">Movement clarified \u00b7 focus protected<\/p>\n\n            <ul class=\"mb-3\" style=\"color:var(--whity-muted);\">\n              <li>Primary path kept continuous and away from the desk.<\/li>\n              <li>Focus seat gained a quieter visual background.<\/li>\n              <li>Support zone grouped to reduce micro-interruptions.<\/li>\n            <\/ul>\n\n            <div class=\"mb-3\">\n              <span class=\"whity-chip\">Flow<\/span>\n              <span class=\"whity-chip\">Zoning<\/span>\n            <\/div>\n\n            <a class=\"whity-btn\" href=\"\/portfolio\/founder-36\">View workspace study \u2192<\/a>\n          <\/div>\n        <\/article>\n      <\/div>\n\n    <\/div>\n\n    <hr class=\"whity-rule my-5\">\n\n    <p class=\"whity-muted mb-0\" style=\"max-width: 78ch;\">\n      Note: These snapshots are intentionally static. Full decision logic lives inside each Workspace Study.\n    <\/p>\n\n  <\/div>\n<\/section>\n\n<!-- =========================\nSECTION: WORKSPACE STUDIES GRID (normal portfolio cards)\n========================= -->\n<section class=\"whity-section whity-section--tight\" style=\"background: rgba(246,247,248,.55); border-top:1px solid var(--whity-line);\">\n  <div class=\"container\">\n\n    <div class=\"row g-3 align-items-end mb-4\">\n      <div class=\"col-lg-8\">\n        <h2 class=\"h4 mb-1\" style=\"font-weight:650;\">Workspace Studies<\/h2>\n        <p class=\"whity-muted mb-0\">Decision-led narratives \u2014 zoning, movement, light, and calm.<\/p>\n      <\/div>\n      <div class=\"col-lg-4 d-flex justify-content-lg-end\">\n        <a class=\"whity-btn\" href=\"\/packages\">Start with packages \u2192<\/a>\n      <\/div>\n    <\/div>\n\n    <div class=\"row g-4\">\n\n      <!-- Study Card -->\n      <div class=\"col-md-6 col-lg-4\">\n        <article class=\"whity-card\">\n          <img decoding=\"async\" class=\"study-thumb\" src=\"https:\/\/images.unsplash.com\/photo-1524758631624-e2822e304c36?q=80&#038;w=1200&#038;auto=format&#038;fit=crop\" alt=\"Workspace study cover\">\n          <div class=\"whity-card__body\">\n            <h3 class=\"whity-card__title\">Studio Corner \u2014 28 m\u00b2<\/h3>\n            <p class=\"whity-card__meta\">Zoning clarity + calmer flow<\/p>\n            <div class=\"mb-3\">\n              <span class=\"whity-chip\">Zoning<\/span>\n              <span class=\"whity-chip\">Flow<\/span>\n            <\/div>\n            <a class=\"whity-btn\" href=\"\/portfolio\/studio-corner-28\">Open study \u2192<\/a>\n          <\/div>\n        <\/article>\n      <\/div>\n\n      <div class=\"col-md-6 col-lg-4\">\n        <article class=\"whity-card\">\n          <img decoding=\"async\" class=\"study-thumb\" src=\"https:\/\/images.unsplash.com\/photo-1521737604893-d14cc237f11d?q=80&#038;w=1200&#038;auto=format&#038;fit=crop\" alt=\"Workspace study cover\">\n          <div class=\"whity-card__body\">\n            <h3 class=\"whity-card__title\">Client-facing Studio \u2014 44 m\u00b2<\/h3>\n            <p class=\"whity-card__meta\">Lighting hierarchy + support zone<\/p>\n            <div class=\"mb-3\">\n              <span class=\"whity-chip\">Light<\/span>\n              <span class=\"whity-chip\">Support<\/span>\n            <\/div>\n            <a class=\"whity-btn\" href=\"\/portfolio\/client-studio-44\">Open study \u2192<\/a>\n          <\/div>\n        <\/article>\n      <\/div>\n\n      <div class=\"col-md-6 col-lg-4\">\n        <article class=\"whity-card\">\n          <img decoding=\"async\" class=\"study-thumb\" src=\"https:\/\/images.unsplash.com\/photo-1520607162513-77705c0f0d4a?q=80&#038;w=1200&#038;auto=format&#038;fit=crop\" alt=\"Workspace study cover\">\n          <div class=\"whity-card__body\">\n            <h3 class=\"whity-card__title\">Founder Office \u2014 36 m\u00b2<\/h3>\n            <p class=\"whity-card__meta\">Focus protected + movement refined<\/p>\n            <div class=\"mb-3\">\n              <span class=\"whity-chip\">Flow<\/span>\n              <span class=\"whity-chip\">Calm<\/span>\n            <\/div>\n            <a class=\"whity-btn\" href=\"\/portfolio\/founder-36\">Open study \u2192<\/a>\n          <\/div>\n        <\/article>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- =========================\nSECTION: CTA (quiet)\n========================= -->\n<section class=\"whity-section\">\n  <div class=\"container\">\n    <div class=\"whity-card\">\n      <div class=\"whity-card__body d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3\">\n        <div style=\"max-width:70ch;\">\n          <h2 class=\"h5 mb-1\" style=\"font-weight:650;\">Want the same clarity for your workspace?<\/h2>\n          <p class=\"whity-muted mb-0\">Start with layout + zoning decisions, then move to 3D and Shop-the-Look when you need buying certainty.<\/p>\n        <\/div>\n        <div class=\"d-flex gap-2\">\n          <a class=\"whity-btn\" href=\"\/how-it-works\">How it works \u2192<\/a>\n          <a class=\"whity-btn whity-btn--primary\" href=\"\/packages\">View packages \u2192<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n  \/\/ Simple filter for snapshot library (optional, calm, no animations)\n  const buttons = document.querySelectorAll('.filter-btn');\n  const items = document.querySelectorAll('.snapshot-item');\n\n  buttons.forEach(btn => {\n    btn.addEventListener('click', () => {\n      buttons.forEach(b => b.classList.remove('active'));\n      btn.classList.add('active');\n\n      const filter = btn.dataset.filter;\n      items.forEach(item => {\n        const tags = (item.dataset.tags || '').split(' ');\n        const show = (filter === 'all') || tags.includes(filter);\n        item.style.display = show ? '' : 'none';\n      });\n    });\n  });\n<\/script>\n\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Before After Studio Corner \u2014 28 m\u00b2 Focus-first zoning \u00b7 calmer flow \u00b7 reduced visual noise Portfolio \u00b7 Workspace Studies Decision-led workspace studies \u2014 built for clarity. We document what changed in zoning, flow, lighting, and spatial calm \u2014 without sliders, gimmicks, or \u201cdesign show-off\u201d. Explore snapshots View packages Decision Before \/ After \u2014 Snapshot [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-659","page","type-page","status-publish","hentry"],"blocksy_meta":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"woocommerce_archive_thumbnail":false,"woocommerce_thumbnail":false,"woocommerce_single":false,"woocommerce_gallery_thumbnail":false,"wpcpc-logo":false},"uagb_author_info":{"display_name":"whity.me","author_link":"https:\/\/whity.me\/index.php\/author\/whity-me\/"},"uagb_comment_info":0,"uagb_excerpt":"Before After Studio Corner \u2014 28 m\u00b2 Focus-first zoning \u00b7 calmer flow \u00b7 reduced visual noise Portfolio \u00b7 Workspace Studies Decision-led workspace studies \u2014 built for clarity. We document what changed in zoning, flow, lighting, and spatial calm \u2014 without sliders, gimmicks, or \u201cdesign show-off\u201d. Explore snapshots View packages Decision Before \/ After \u2014 Snapshot&hellip;","_links":{"self":[{"href":"https:\/\/whity.me\/index.php\/wp-json\/wp\/v2\/pages\/659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/whity.me\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/whity.me\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/whity.me\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/whity.me\/index.php\/wp-json\/wp\/v2\/comments?post=659"}],"version-history":[{"count":10,"href":"https:\/\/whity.me\/index.php\/wp-json\/wp\/v2\/pages\/659\/revisions"}],"predecessor-version":[{"id":676,"href":"https:\/\/whity.me\/index.php\/wp-json\/wp\/v2\/pages\/659\/revisions\/676"}],"wp:attachment":[{"href":"https:\/\/whity.me\/index.php\/wp-json\/wp\/v2\/media?parent=659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}