/* ─── RESET & CSS TOKENS ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:#FAFBFE}
:root{
  --orange:#FF4503;
  --black:#191B24;
  --white:#FAFBFE;
  --offwhite:#F2F2F0;
  --gray:#B6B8C4;
  --lightgray:#B6B8C4;
  /* WCAG AA compliant muted text colors on the near-white background */
  --muted:#6B6E7B;      /* ~4.9:1 — for normal-size secondary text */
  --muted-lg:#83868F;   /* ~3.5:1 — for large/bold text & icons only */
  --border:rgba(25,27,36,.10);
}
html,body{height:100%;font-family:'Inter',sans-serif;background:var(--white);color:var(--black);overflow:hidden}

/* ─── PAGE SYSTEM (multi-page SPA — toggled via showPage()) ─── */
.page{display:none;width:100%;height:100vh}
.page.active{display:flex}
#page-main{flex-direction:row}

/* ─── LAYOUT: SIDEBAR (left 50%, fixed height, scrollable) ─── */
.sidebar{
  width:50%;flex-shrink:0;height:100vh;position:sticky;top:0;
  background:var(--white);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:52px 60px 40px;overflow:hidden;
}
.sidebar::-webkit-scrollbar{display:none}
.sidebar-top{display:flex;flex-direction:column;gap:30px;position:relative}
.headline-star{position:absolute;width:11px;height:11px;pointer-events:none;user-select:none}
.headline{font-family:'Inter',sans-serif;font-size:clamp(2rem,3.2vw,2.9rem);line-height:1.08;font-weight:800;letter-spacing:-.03em}
.headline .accent{color:var(--orange)}
.headline .muted{color:var(--muted-lg);font-weight:700;font-style:normal}
.profile{display:flex;align-items:center;gap:13px}
.profile-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:var(--offwhite);overflow:hidden}
.profile-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.profile-info{flex:1;min-width:0}
.profile-name-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.profile-name{font-weight:600;font-size:.92rem}
.profile-handle{color:var(--muted);font-size:.80rem;margin-top:2px}
.btn-cv{display:flex;align-items:center;justify-content:center;text-decoration:none;flex-shrink:0;transition:opacity .2s}
.btn-cv:hover{opacity:.7}
.bio{font-size:clamp(13px, calc(9px + 0.5vw), 15px);font-weight:500;line-height:1.65;color:#191B24;letter-spacing:-0.04em}
.bio p{margin:0}
.bio p + p{margin-top:0.7em}
.bio strong{font-weight:700;color:#191B24}
.email-row{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:500;color:#191B24;letter-spacing:-0.04em}
.email-row a{color:#191B24;text-decoration:none;transition:color .2s}
.email-row a:hover{color:var(--orange)}
.socials{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.social-icon{width:36px;height:36px;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;background:transparent;font-size:.82rem;color:var(--black);text-decoration:none}
.social-icon:hover{border-color:var(--orange);color:var(--orange)}
.btn-book{background:var(--orange);color:#191B24;border:none;padding:10px 22px;border-radius:999px;font-family:'Inter',sans-serif;font-size:.84rem;font-weight:700;cursor:pointer;transition:opacity .2s,transform .15s;text-decoration:none;display:inline-flex;align-items:center}
.btn-book:hover{opacity:.85;transform:scale(1.02)}
.sidebar-footer{font-size:.70rem;color:var(--muted);display:flex;align-items:center;gap:5px}

/* ─── LAYOUT: MAIN COLUMN (right 50%, vertically scrollable) ─── */
.main{width:50%;height:100vh;overflow-y:auto;background:var(--white)}
.main::-webkit-scrollbar{width:3px}
.main::-webkit-scrollbar-thumb{background:var(--orange);border-radius:2px}

/* ─── SECTION: SHARED COMPONENTS (header, icon, divider, arrow-btn) ─── */
.section{padding:48px 52px 56px;border-bottom:1px solid var(--border)}
.main>.section:last-of-type{border-bottom:none}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.section-label{display:flex;align-items:center;gap:10px}
.section-icon{width:44px;height:44px;border-radius:12px;background:transparent;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.section-icon img{width:44px;height:44px;object-fit:contain;display:block}
.section-title{font-size:17px;font-weight:500;letter-spacing:-0.04em;color:#191B24}
.section-subtitle{font-size:15px;font-weight:500;letter-spacing:-0.04em;color:var(--muted);margin-top:2px}
.section-divider{display:none}
.arrow-btn{width:34px;height:34px;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;background:transparent;color:var(--muted);font-size:1rem;flex-shrink:0}
.arrow-btn:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.arrow-btn svg{width:16px;height:16px;stroke:currentColor}

/* ─── SECTION: SELECTED PROJECTS ─── */
.projects-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto;gap:12px}
.project-card{border-radius:16px;overflow:hidden;cursor:pointer;position:relative;transition:transform .25s,box-shadow .25s}
.project-card:hover{transform:scale(1.015);box-shadow:0 18px 50px rgba(0,0,0,.12)}
.project-card.main-card{grid-row:span 2;aspect-ratio:4/3;min-height:0}
.card-bg{position:absolute;inset:0;overflow:hidden}
.card-bg img{width:100%;height:100%;object-fit:cover;display:block}
.cp1{background:linear-gradient(140deg,#3d1f6e,#6b3fa0,#c06090)}
.cp2{background:linear-gradient(140deg,#f97316,#ef4444)}
.cp3{background:linear-gradient(140deg,#0ea5e9,#6366f1)}
.card-label{position:absolute;bottom:0;left:0;right:0;padding:28px 16px 14px;background:linear-gradient(to top,rgba(25,27,36,.75),transparent);color:#fff}
.card-label-title{font-size:.84rem;font-weight:600}
.card-label-sub{font-size:.70rem;opacity:.65;margin-top:2px}

/* ─── SECTION: APP ICON COLLECTION ─── */
.icons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.icon-card{border-radius:22px;aspect-ratio:4/3;cursor:pointer;transition:transform .2s;overflow:hidden;position:relative}
.icon-card img{width:100%;height:100%;object-fit:cover;display:block}
.icon-card:hover{transform:scale(1.06) rotate(-2deg)}
.ic1{background:linear-gradient(135deg,#FF6B35,#FF4500)}
.ic2{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#e2e8f0}
.ic3{background:linear-gradient(135deg,#FF5733,#C70039)}
.ic4{background:linear-gradient(135deg,#7B2D8B,#C850C0)}
.ic5{background:linear-gradient(135deg,#00B4D8,#90E0EF)}
.ic6{background:linear-gradient(135deg,#444,#222)}

/* ─── SECTION: SNAPSHOTS & WEBSITES ─── */
.snapshots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.snap-card{border-radius:14px;aspect-ratio:4/3;overflow:hidden;cursor:pointer;transition:transform .25s;position:relative}
.snap-card img{width:100%;height:100%;object-fit:cover;display:block}
.snap-card:hover{transform:scale(1.03)}
.sc1{background:linear-gradient(160deg,#0f2027,#2c5364)}
.sc2{background:linear-gradient(160deg,#f97316,#fbbf24)}
.sc3{background:linear-gradient(160deg,#f43f5e,#FF4B2B)}
.sc4{background:linear-gradient(160deg,#1e3a5f,#0ea5e9)}
.sc5{background:linear-gradient(160deg,#FF416C,#FF4B2B)}
.sc6{background:linear-gradient(160deg,#c8c8c0,#94a3b8)}
.phone-frame{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60%;border:2px solid rgba(255,255,255,.2);border-radius:12px;height:75%;background:rgba(255,255,255,.05)}

/* ─── SECTION: CONFERENCES ─── */
.conf-featured{display:flex;gap:15px;margin-bottom:0}
.conf-card{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;cursor:pointer;transition:transform .2s;text-decoration:none;color:inherit;background:transparent}
.conf-card:hover{transform:scale(1.02)}
.conf-thumb{aspect-ratio:4/3;width:100%;border-radius:13px;overflow:hidden;position:relative}
.conf-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cf1{background:linear-gradient(135deg,#191B24,#2d2f3e)}
.cf2{background:linear-gradient(135deg,#1e3a8a,#3b82f6)}
.cf3{background:linear-gradient(135deg,#92400e,#d97706)}
.conf-card-info{display:flex;flex-direction:column;gap:4px;padding:0}
.conf-card-title{font-size:15px;color:#191B24;font-weight:500;letter-spacing:-0.04em;text-align:left}
.conf-card-loc{font-size:15px;color:var(--muted);font-weight:400;letter-spacing:-0.04em;text-align:left}
.conf-list{display:flex;flex-direction:column;gap:0;margin-top:15px}
.conf-row{display:flex;align-items:center;gap:8px;padding:12px 0;border-bottom:0.5px solid #B6B8C4;cursor:pointer;transition:opacity .2s;text-decoration:none;color:inherit}
.conf-row:last-child{border-bottom:none;padding-bottom:12px}
.conf-row:hover{opacity:.6}
.conf-row-thumb{width:60px;height:45px;border-radius:6px;flex-shrink:0;overflow:hidden;background:var(--offwhite)}
.conf-row-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.conf-row-text{display:flex;flex-direction:column;gap:4px}
.conf-row-title{font-size:15px;color:#191B24;font-weight:500;letter-spacing:-0.04em}
.conf-row-loc{font-size:15px;color:var(--muted);font-weight:400;letter-spacing:-0.04em}

/* ─── SECTION: ARTICLES ─── */
.article-list{display:flex;flex-direction:column}
.article-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:opacity .2s;text-decoration:none;color:inherit}
.article-row:hover{opacity:.6}
.article-icon{width:80px;height:60px;border-radius:11px;flex-shrink:0;overflow:hidden;background:var(--offwhite)}
.article-icon img{width:100%;height:100%;object-fit:cover;display:block}
.ai1{background:#f97316}.ai2{background:#3b82f6}.ai3{background:#f97316}.ai4{background:#eab308}
.article-title{font-size:15px;color:#191B24;font-weight:500;letter-spacing:-0.04em;margin-bottom:2px}
.article-read{font-size:15px;color:var(--muted);font-weight:400;letter-spacing:-0.04em}

/* ─── THANKS / FOOTER SVG ─── */
.thanks-section{padding:0 0 0;display:flex;justify-content:center;align-items:flex-end;overflow:hidden}
.thanks-svg{width:100%;display:flex;justify-content:center;line-height:0}
.thanks-svg svg{width:50%;height:auto;display:block;max-width:300px;min-width:140px}
.fade-in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease}
.fade-in.visible{opacity:1;transform:none}

/* ─── PAGE: PROJECT DETAIL ─── */
#page-detail{flex-direction:column}
.detail-nav{display:flex;align-items:center;justify-content:space-between;padding:0 52px;height:60px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--white);z-index:50;flex-shrink:0}
.detail-nav-left{display:flex;align-items:center;gap:16px}
.detail-nav-right{display:flex;align-items:center;gap:12px}
.back-btn{display:flex;align-items:center;gap:10px;font-size:1rem;color:var(--muted);font-weight:500;cursor:pointer;border:none;background:none;font-family:'Inter',sans-serif;transition:color .2s;padding:0}
.back-btn:hover{color:var(--orange)}
.back-btn:hover .arrow-btn{background:var(--orange);border-color:var(--orange);color:#fff}
.detail-nav-title{font-size:1rem;font-weight:600;color:var(--black)}
.icon-btn{width:36px;height:36px;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--black);cursor:pointer;text-decoration:none;font-size:.9rem;transition:all .2s}
.icon-btn:hover{border-color:var(--orange);color:var(--orange)}
.detail-scroll{flex:1;overflow-y:auto}
.detail-scroll::-webkit-scrollbar{width:3px}
.detail-scroll::-webkit-scrollbar-thumb{background:var(--orange)}
.detail-body{padding:48px 52px 80px}
.detail-meta{font-size:17px;font-weight:500;font-family:'Inter',sans-serif;letter-spacing:-0.04em;color:var(--muted);margin-bottom:24px;display:flex;flex-wrap:wrap;gap:0;align-items:center}
.detail-meta .meta-label{color:var(--muted)}
.detail-meta .meta-val{color:var(--black);font-weight:500}
.detail-meta .meta-sep{margin:0 4px;color:var(--muted)}
.detail-meta .meta-group{white-space:nowrap}
.detail-hero{border-radius:16px;overflow:hidden;margin-bottom:36px}
.detail-hero-inner{width:100%}
.detail-hero-inner img{width:100%;height:auto;display:block}
.d-tag{font-size:17px;font-weight:500;color:var(--muted);letter-spacing:-0.04em;margin-bottom:6px;display:block}
.icon-btn-mail{display:flex;align-items:center;justify-content:center;transition:opacity .2s}
.icon-btn-mail:hover{opacity:.7}
.d-h2{font-size:24px;font-weight:700;font-family:'Inter',sans-serif;color:#191B24;letter-spacing:-0.04em;line-height:1.3;margin-bottom:10px}
.d-p{font-size:17px;font-weight:500;font-family:'Inter',sans-serif;line-height:1.82;color:rgba(25,27,36,0.7);letter-spacing:-0.04em;margin-bottom:0;max-width:60%}
.detail-spacer{height:32px}
.detail-img-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0;align-items:start}
.detail-img-card{border-radius:14px;overflow:hidden}
.detail-img-card img{width:100%;height:auto;display:block}
.detail-img-card.ratio-43{aspect-ratio:4/3}
.detail-img-card.ratio-43 img{width:100%;height:100%;object-fit:cover;display:block}
.detail-img-full{border-radius:14px;overflow:hidden;margin:28px 0}
.detail-img-full img{width:100%;height:auto;display:block}
.detail-img-row{display:flex;gap:12px;margin:28px 0;align-items:stretch}
.detail-img-card-natural{border-radius:14px;overflow:hidden;flex:1;min-width:0}
.detail-img-card-natural img{width:100%;height:auto;display:block}
.detail-icon-showcase{border-radius:16px;background:var(--offwhite);padding:48px 32px;display:flex;gap:20px;align-items:flex-end;justify-content:center;margin:28px 0;flex-wrap:wrap}
.showcase-icon{border-radius:28px;display:flex;align-items:center;justify-content:center;transition:transform .2s;overflow:hidden}
.showcase-icon img{width:100%;height:auto;display:block}
.showcase-icon:hover{transform:translateY(-4px)}
.showcase-icon.sm{width:100px;border-radius:22px}
.showcase-icon.md{width:140px;border-radius:30px}
.detail-divider{border:none;border-top:1px solid var(--border);margin:28px 0}
.detail-footer{display:flex;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid var(--border);margin-top:32px;gap:12px}
.pn-btn{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--black);background:none;border:none;font-family:'Inter',sans-serif;cursor:pointer;transition:opacity .2s}
.pn-btn:hover{opacity:.6}
.pn-project{font-size:15px;font-weight:500;color:var(--black);letter-spacing:-0.04em}
.pn-arrow{width:16px;height:16px;flex-shrink:0}

/* ─── PAGE: GALLERY ─── */
#page-gallery{flex-direction:column}
.gallery-nav{display:flex;align-items:center;justify-content:space-between;padding:0 52px;height:60px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--white);z-index:50;flex-shrink:0}
.gallery-page-title{font-size:.95rem;font-weight:600}
.gallery-scroll{flex:1;overflow-y:auto}
.gallery-scroll::-webkit-scrollbar{width:3px}
.gallery-scroll::-webkit-scrollbar-thumb{background:var(--orange)}
.gallery-inner{padding:48px 52px 80px}
.gallery-desc{font-size:.84rem;color:var(--muted);margin-bottom:28px;line-height:1.7}
.gallery-grid{display:grid;gap:13px}
.icons-layout{grid-template-columns:repeat(4,1fr)}
.snaps-layout{grid-template-columns:repeat(3,1fr)}
.g-item{border-radius:18px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s}
.g-item img{width:100%;height:100%;object-fit:cover;display:block}
.g-item:hover{transform:scale(1.03);box-shadow:0 10px 30px rgba(0,0,0,.1)}
.g-item.icon-item{aspect-ratio:4/3;border-radius:22px}
.g-item.snap-item{aspect-ratio:4/3;border-radius:14px}
.g-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.3rem;position:relative}
.gi1{background:linear-gradient(135deg,#FF6B35,#FF4500)}
.gi2{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#e2e8f0}
.gi3{background:linear-gradient(135deg,#FF5733,#C70039)}
.gi4{background:linear-gradient(135deg,#7B2D8B,#C850C0)}
.gi5{background:linear-gradient(135deg,#00B4D8,#90E0EF)}
.gi6{background:linear-gradient(135deg,#444,#222)}
.gi7{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.gi8{background:linear-gradient(135deg,#10b981,#059669)}
.gi9{background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.gi10{background:linear-gradient(135deg,#f43f5e,#e11d48)}
.gi11{background:linear-gradient(135deg,#0ea5e9,#0284c7)}
.gi12{background:linear-gradient(135deg,#84cc16,#65a30d)}
.gs1{background:linear-gradient(160deg,#0f2027,#2c5364)}
.gs2{background:linear-gradient(160deg,#f97316,#fbbf24)}
.gs3{background:linear-gradient(160deg,#f43f5e,#FF4B2B)}
.gs4{background:linear-gradient(160deg,#1e3a5f,#0ea5e9)}
.gs5{background:linear-gradient(160deg,#FF416C,#FF4B2B)}
.gs6{background:linear-gradient(160deg,#c8c8c0,#94a3b8)}
.gs7{background:linear-gradient(160deg,#191B24,#2d3a5e)}
.gs8{background:linear-gradient(160deg,#7B2D8B,#C850C0)}
.gs9{background:linear-gradient(160deg,#10b981,#059669)}

/* ── MOBILE ── */




/* ── WEBSITES + SNAPSHOTS SUB-SECTIONS ── */
.subsection-label{font-size:17px;font-weight:500;color:#191B24;letter-spacing:-0.04em;font-family:'Inter',sans-serif;margin-bottom:14px;margin-top:28px}
.subsection-label:first-child{margin-top:0}
.websites-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}
.website-card{border-radius:14px;aspect-ratio:4/3;overflow:hidden;cursor:pointer;transition:transform .25s,box-shadow .25s;position:relative}
.website-card:hover{transform:scale(1.02);box-shadow:0 14px 40px rgba(0,0,0,.12)}
.website-card img{width:100%;height:100%;object-fit:cover;display:block}
.snaps-concepts-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}

/* ── WEBSITE HOVER CARDS ── */
.website-hover-card{display:block;text-decoration:none;position:relative;overflow:hidden;border-radius:14px;aspect-ratio:4/3;cursor:pointer;transition:transform .25s,box-shadow .25s}
.website-hover-card:hover{transform:scale(1.02);box-shadow:0 14px 40px rgba(0,0,0,.12)}
.website-hover-card img{width:100%;height:100%;object-fit:cover;display:block}
.website-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;transition:opacity .25s}
.website-hover-card:hover .website-overlay{opacity:1}
.website-name{color:#FFFFFF;font-family:'Inter',sans-serif;font-size:17px;font-weight:500}
.website-url{color:rgba(255,255,255,.7);font-family:'Inter',sans-serif;font-size:15px;font-weight:500}

/* ── GALLERY SUB-SECTIONS ── */
.gallery-subsection-label{font-size:17px;font-weight:500;color:#191B24;letter-spacing:-0.04em;font-family:'Inter',sans-serif;margin:32px 0 14px}
.gallery-subsection-label:first-of-type{margin-top:0}
.gallery-websites-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:0}
.gallery-snaps-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.g-website{border-radius:14px;aspect-ratio:4/3}
.g-snap{border-radius:12px;aspect-ratio:4/3}

/* ── ICON GALLERY SUB-SECTIONS ── */
.gallery-icons-instore{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:0}
.gallery-icons-concepts{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.g-icon-instore,.g-icon-concept{border-radius:18px;aspect-ratio:4/3}

/* ─── RESPONSIVE: ≤1100px ─── */
@media(max-width:1100px){
  .d-p{max-width:100%}
  .projects-grid{grid-template-columns:1fr;grid-template-rows:auto;height:auto;gap:12px}
  .project-card.main-card{grid-row:auto;aspect-ratio:4/3}
  .project-card.side-card{aspect-ratio:4/3}
  .conf-featured{flex-direction:column}
  .conf-card{flex:none;width:100%}
  .g-item{transform:none !important}
  .g-item:hover{transform:none;box-shadow:none}
  .gallery-icons-instore,.gallery-icons-concepts{grid-template-columns:repeat(4,1fr)}
  .gallery-snaps-grid{grid-template-columns:repeat(3,1fr)}
  .gallery-websites-grid{grid-template-columns:repeat(2,1fr)}
}

/* ─── RESPONSIVE: ≤768px (mobile) ─── */
@media(max-width:768px){
  html,body{overflow:auto;height:auto}
  .page{height:auto;min-height:100vh}
  .page.active{flex-direction:column}
  #page-main{flex-direction:column}
  .sidebar{width:100%;height:auto;position:static;padding:36px 24px 28px;border-right:none;border-bottom:1px solid var(--border);overflow:visible}
  .headline{font-size:2rem}
  .main{width:100%;height:auto;overflow-y:visible}
  .section{padding:36px 24px 44px}
  .projects-grid{grid-template-columns:1fr;grid-template-rows:auto;height:auto;gap:12px}
  .project-card.main-card{grid-row:auto;aspect-ratio:4/3}
  .project-card.side-card{aspect-ratio:4/3;min-height:0}
  .snapshots-grid{grid-template-columns:repeat(2,1fr)}
  .websites-grid{grid-template-columns:1fr}
  .snaps-concepts-grid{grid-template-columns:repeat(3,1fr)}
  .conf-featured{grid-template-columns:1fr}
  .detail-nav,.gallery-nav{padding:0 18px;gap:6px}
  .detail-nav-right{gap:6px;flex-shrink:0}
  .btn-book{white-space:nowrap;padding:8px 12px;font-size:.77rem}
  .gallery-nav .back-btn{font-size:0;gap:0;flex-shrink:0}
  .gallery-nav .back-btn .arrow-btn{font-size:1rem}
  .gallery-page-title{flex:1 1 auto;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.78rem}
  .detail-body,.gallery-inner{padding:32px 24px 60px}
  .detail-meta{font-size:14px}
  .detail-page-footer,.gallery-page-footer{padding-left:24px !important;padding-right:24px !important}
  .detail-img-row{flex-direction:column}
  .detail-img-card-natural{flex:none !important}
  .detail-img-grid{grid-template-columns:1fr}
  .gallery-grid.icons-layout{grid-template-columns:repeat(3,1fr)}
  .gallery-grid.snaps-layout{grid-template-columns:repeat(2,1fr)}
  /* App Icon Collection & Snapshots preview: 2-col, no scaling */
  .icons-grid{grid-template-columns:repeat(2,1fr)}
  .icon-card{transform:none !important}
  .gallery-icons-instore,.gallery-icons-concepts{grid-template-columns:repeat(2,1fr)}
  .gallery-snaps-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-websites-grid{grid-template-columns:1fr}
  .g-item{transform:none !important}
  .g-item:hover{transform:none;box-shadow:none}
  .thanks-section{padding:28px 24px 0}
  .sidebar-footer{margin-top:64px}
  #page-detail,#page-gallery{height:auto;min-height:100vh}
  .detail-scroll,.gallery-scroll{overflow-y:visible}
}


/* ─── ACCESSIBILITY: skip link, visible focus, reduced motion ─── */
.skip-link{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--black);color:#fff;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:12px}

/* Visible keyboard focus indicator (only for keyboard users) */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:2px;
  border-radius:6px;
}
/* Cards/thumbnails get a high-contrast ring visible over imagery */
.project-card:focus-visible,.icon-card:focus-visible,.g-item:focus-visible,.snap-card:focus-visible{
  outline:3px solid #fff;
  outline-offset:-3px;
  box-shadow:0 0 0 6px var(--orange);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}