@font-face {
  font-family:'F37Atlantic';
  src:url('../fonts/F37AtlanticTrial-Bold.otf') format('opentype');
  font-weight:700; font-style:normal;
}
@font-face {
  font-family:'F37Atlantic';
  src:url('../fonts/F37AtlanticTrial-Regular.otf') format('opentype');
  font-weight:400; font-style:normal;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body { width:100%; height:100%; overflow:hidden; background:#fff; font-family:'Nunito',sans-serif; color:#2a2a2a; }

/* ── Z-index stack ─────────────────────────────────────────────────
   1  drawCanvas
   2  colouringPage image
   3  hero
  11  crayonTray
  50  scrim
  60  panelWork / panelAbout / panelInsights
  70  panelCaseStudy
 100  nav
── */

/* ── Draw canvas ── */
#drawCanvas { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1; pointer-events:none; }

/* ── Colouring page image ── */
#colouringPage {
  position:fixed; inset:0; z-index:2;
  pointer-events:none;
  opacity:0; transition:opacity 0.5s ease;
}
#colouringPage img {
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  display:block; max-width:1400px; max-height:100%; margin:0 auto;
}
#colouringPage .img-desktop { display:block; }
#colouringPage .img-mobile  { display:none; }
@media(max-width:768px){
  #colouringPage .img-desktop { display:none; }
  #colouringPage .img-mobile  { display:block; }
}
body.colouring #colouringPage { opacity:1; }

/* ── Pens ── */
#crayonTray {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  display:flex; align-items:flex-end; gap:10px;
  z-index:11; pointer-events:none;
}
.crayon-wrap {
  display:flex; flex-direction:column; align-items:center;
  pointer-events:all; cursor:pointer;
  height:220px; overflow:visible; position:relative;
  transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
  transform:translateY(45%);
  will-change:transform;
}
.crayon-wrap img { height:220px; width:auto; display:block; pointer-events:none; user-select:none; mix-blend-mode:multiply; }
.crayon-wrap:hover  { transform:translateY(32%); }
.crayon-wrap.active { transform:translateY(18%); }
.crayon-wrap.inactive { opacity:0.38; }
@media(max-width:768px){
  .crayon-wrap { height:160px; }
  .crayon-wrap img { height:160px; }
}

/* ── Nav ── */
nav {
  position:fixed; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:0 36px; height:68px;
  z-index:100; pointer-events:none;
  background:transparent;
  transition:background 0.25s, border-bottom 0.25s;
}
/* Nav only gets background when panel has scrolled to top */
body.panel-scrolled nav {
  background:#fff;
  border-bottom:1px solid #e8e8e8;
}
.nav-btn {
  font-family:'F37Atlantic',sans-serif; font-weight:700;
  font-size:clamp(1rem, 2.36vw, 34px);
  letter-spacing:-0.01em; color:#2a2a2a;
  background:none; border:none; cursor:pointer; pointer-events:all;
  padding:4px 0; position:relative; transition:color 0.2s; z-index:1;
  text-decoration:none; text-transform:lowercase;
}
.nav-btn::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:1.5px; background:currentColor; transition:width 0.25s ease;
}
.nav-btn:hover { opacity:0.6; }
.nav-btn:hover::after { width:100%; }


#navLogo {
  font-family:'F37Atlantic',sans-serif; font-weight:700;
  font-size:1.25rem; letter-spacing:-0.02em; color:#2a2a2a;
  position:absolute; left:50%; transform:translateX(-50%);
  white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity 0.35s ease, color 0.25s ease;
}
body.overlay-open #navLogo { opacity:1; }
body.colouring #navLogo    { opacity:1; }

/* ── Hero ── */
.hero {
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  z-index:3; pointer-events:none;
}
#heroSolid {
  font-family:'F37Atlantic',sans-serif; font-weight:700;
  font-size:clamp(2.5rem, 9.85vw, 142px); line-height:0.9; color:#2a2a2a;
  letter-spacing:-0.02em; user-select:none; white-space:nowrap;
  text-align:center; padding:0 12px;
  max-width:1300px; width:100%;
  transition:opacity 0.5s ease;
}
#heroStrap {
  font-family:'F37Atlantic',sans-serif; font-weight:400;
  font-size:clamp(1.1rem, 2.92vw, 42px);
  color:#2a2a2a; letter-spacing:0.01em;
  line-height:1.5; user-select:none;
  text-align:center; padding:0 24px;
  max-width:800px; width:100%;
  margin-top:24px;
  transition:opacity 0.5s ease;
}
body.colouring #heroSolid  { opacity:0; }
body.colouring #heroStrap  { opacity:0; }
body.colouring #colouringPage { opacity:1; }

/* ── Pen cursor in colouring mode ── */
body.colouring {
  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAADZ0lEQVR4nO2YPUsrTRiG79ndZNdkVawEU/kDxD8hiBZaCKKNWFhaiJVaKfZir9Z2tv4AW7GwEmzEMmARkv2a/bhPEZ45m6DngCZ5zwu5Ieywm525ns8ZFhhrrP9WaugLqD8vQfKPz61BwgxDY8B/TkopOI4Dy+raXqlUAACu68K2bSwuLqLT6fD5+Zny//Jv4PI8z4wFBgAcxzHjarUKAFheXmaapmy32yTJj48PDh3wM8harWbuTU9PAwDW1taYpinTNCVJtlotkhwNoFKqx3tlWADY2NggSeZ5ziRJGIYhgyDg+fn58AEnJycBdHNM8s62bfN8a2uLWZZRa21+RVHw/f19NDkoEijJPdd1sbOzwzAMSZJaa8ZxzCiKyFJ3HgmghFIpBcuyoJTC3t4eSbIoCnY6HRZFwSAIWBQFG40GgK73RwIooZXx/v4+tdbM85x5nhuvJUnC9fV1Al0Pi1EDB5RwCpiE1XEcHB4eMggCkmQcx9Ram6q9urqibds9Bg0ERqyVflar1cxzued5Hg4ODgxYnufm2mq1+PLywnI7kuL6scTt/VYrpQyo4zg4Pj5mlmUMw9DkW5ZlTJKEQRCw3Lhlzs9a07dk2zaUUqjX6wCAqakp04g9z8Pp6Sm11oyiiEmSmHwjySiKKMUgRso8A1XZAyLf93F2dmZ2BwHSWjNJErbbbS4tLVE85jiOmacc7h9JKYVqtWqu/V64v783YHEcM01TUyRHR0emYst5OzMz86XRA5Hv+5idnUUcx1xYWMDc3BxIstlsMssyFkXBu7s7Ar2eUkrB87wvt8ZvqdxKbNs2E7++vjIMQ6ZpyouLCwKA5N7b2xvlHQnvZ73uW5D9jVPaiGVZZry6umraSZqmzPOc19fXrNfryPOcA/XQ3wCB30cm8SZJs8dmWcYsy0iSm5ubLBs0EsBySHzfx+XlpdlfZZdoNpt8eHigZVmoVCo9zXvogEC3CmXRk5MTaq1Na4miiNvb2wR6d5jykWvogFIgNzc3XFlZYaPRAEk+PT2ZSpWQliGH0pD7AcuLSM7t7u5yfn4eruv2FIN4WaCHoq/yT/ba29tbViqVniKQIgJ+H6PkOjLAx8dH+r6ParWKiYkJAN1KLZ+k+98ZRCX/9YT4028rP9U//2VhDDjWWP93/QIbjCc9QR98vgAAAABJRU5ErkJggg==") 4 28, crosshair;
}

/* ── Scrim ── */
.scrim {
  position:fixed; inset:0; z-index:50;
  opacity:0; pointer-events:none; transition:opacity 0.35s ease;
}
.scrim.active { opacity:1; pointer-events:all; }

/* ── Panels ── */
.panel {
  position:fixed; left:0; right:0; bottom:0; width:100%;
  background:#fff;
  border-radius:20px 20px 0 0;
  box-shadow:0 -8px 40px rgba(0,0,0,0);
  transform:translateY(100%);
  transition:transform 0.45s cubic-bezier(0.77,0,0.175,1),
             border-radius 0.3s ease,
             box-shadow 0.45s ease,
             height 0.35s cubic-bezier(0.77,0,0.175,1);
  overflow-y:auto;
  padding:52px 52px 60px;
}
.panel.open     { transform:translateY(0); box-shadow:0 -8px 40px rgba(0,0,0,0.10), 0 -1px 6px rgba(0,0,0,0.05); }
.panel.scrolled { border-radius:0; box-shadow:none; height:calc(var(--vh, 1vh) * 100 - 70px) !important; }

#panelWork     { z-index:60; height:calc(var(--vh, 1vh) * 100 - 70px); }
#panelAbout    { z-index:60; height:calc(var(--vh, 1vh) * 100 - 70px); }
#panelInsights { z-index:60; height:calc(var(--vh, 1vh) * 100 - 70px); }
#panelCaseStudy{ z-index:70; height:calc(var(--vh, 1vh) * 100 - 90px); }

@media(max-width:600px){ .panel{ padding:40px 24px 50px; } }

/* Close button — circular, dark bg version */
.panel-close {
  position:sticky; top:0; float:right;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:#f0f0f0; border:none; border-radius:50%;
  cursor:pointer; color:#1a1a1a;
  font-size:18px; line-height:1;
  transition:background 0.2s;
  margin-bottom:20px;
  flex-shrink:0;
  z-index:1;
}
.panel-close:hover { background:#e0e0e0; }

/* Panel typography — white */
.panel h2 {
  font-family:'F37Atlantic',sans-serif; font-weight:700;
  font-size:2.4rem; margin-bottom:28px; color:#2a2a2a;
}
.panel > p, .panel > div > p {
  font-size:1.05rem; line-height:1.8; color:#555; margin-bottom:20px; font-weight:300;
}

/* ── Blog / Insights ── */
.blog-link {
  display:inline-block; margin-top:8px; font-weight:600; font-size:0.95rem;
  letter-spacing:0.06em; text-transform:uppercase; color:#2a2a2a;
  text-decoration:none; border-bottom:2px solid #2a2a2a; padding-bottom:2px; transition:opacity 0.2s;
}
.blog-link:hover { opacity:0.5; }

.insight-card {
  border-bottom:1px solid #efefef; padding:28px 0;
  cursor:pointer; transition:opacity 0.2s; text-decoration:none; display:block; color:inherit;
}
.insight-card:first-of-type { padding-top:8px; }
.insight-card:hover { opacity:0.55; }
.insight-card .tag {
  font-size:0.72rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:#aaa; margin-bottom:8px;
}
.insight-card h3 {
  font-family:'F37Atlantic',sans-serif; font-weight:700;
  font-size:1.35rem; margin-bottom:8px; color:#2a2a2a; line-height:1.35;
}
.insight-card p { font-size:0.95rem; color:#777; line-height:1.65; font-weight:300; }
.insight-card .meta { font-size:0.8rem; color:#bbb; margin-top:10px; }

/* ── Work grid ── */
.projects-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:8px; }
@media(max-width:600px){ .projects-grid{ grid-template-columns:1fr; } }
.project-tile {
  background:#fafafa; border:1.5px solid #efefef; border-radius:16px;
  padding:28px 24px; cursor:pointer;
  transition:transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s;
}
.project-tile:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,0.08); border-color:#ddd; }
.tile-color { width:100%; height:100px; border-radius:10px; margin-bottom:18px; }
.project-tile h3 { font-family:'F37Atlantic',sans-serif; font-weight:700; font-size:1.3rem; margin-bottom:6px; color:#2a2a2a; }
.project-tile p { font-size:0.88rem; color:#888; line-height:1.6; margin:0; }

/* ── Case study ── */
.case-header { margin-bottom:32px; }
.case-header h1 { font-family:'F37Atlantic',sans-serif; font-weight:700; font-size:2.8rem; margin-bottom:12px; color:#2a2a2a; }
.case-header .case-desc { font-size:1.1rem; color:#666; font-weight:300; line-height:1.7; }
.proj-hero { width:100%; height:260px; border-radius:20px; margin:28px 0 40px; }
.proj-section { margin-bottom:32px; }
.proj-section h4 {
  font-family:'F37Atlantic',sans-serif; font-weight:700;
  font-size:1.05rem; color:#bbb; margin-bottom:10px;
  text-transform:uppercase; letter-spacing:0.04em;
}
.proj-section p { font-size:1rem; line-height:1.85; color:#555; font-weight:300; max-width:680px; }
@media(max-width:600px){ .case-header h1{ font-size:2rem; } }

/* ── Clear button ── */
#clearBtn {
  position:fixed; bottom:28px; right:36px; z-index:11;
  font-family:'Nunito',sans-serif; font-weight:600; font-size:13px;
  letter-spacing:0.06em; text-transform:uppercase;
  color:#bbb; background:none; border:none; cursor:pointer; padding:4px 0;
  opacity:0; pointer-events:none; transition:opacity 0.4s, color 0.2s;
}
#clearBtn.visible { opacity:1; pointer-events:all; }
#clearBtn:hover { color:#555; }

/* ── Work panel tabs ── */
.panel-tabs {
  display:flex; gap:8px; margin-bottom:32px; margin-top:4px;
  justify-content:center; flex-wrap:wrap;
}

/* About panel tabs: horizontal scroll, no wrap, clear of X button */
#panelAbout .panel-tabs,
#panelWork .panel-tabs {
  display:flex; gap:8px; margin-bottom:32px; margin-top:0;
  justify-content:flex-start; flex-wrap:nowrap;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; /* Firefox */
  padding-bottom:2px; /* prevent border clipping */
  clear:both; /* sits below the floated X button */
}
#panelAbout .panel-tabs::-webkit-scrollbar,
#panelWork .panel-tabs::-webkit-scrollbar { display:none; }

.panel-tab {
  font-family:'Nunito',sans-serif; font-weight:700; font-size:0.8rem;
  letter-spacing:0.07em; text-transform:uppercase;
  padding:8px 18px; border-radius:100px; cursor:pointer;
  border:1.5px solid; background:transparent;
  transition:all 0.2s; white-space:nowrap; flex-shrink:0;
}

/* Active tab — solid colour fill */
.panel-tab.active { color:#1a1a1a; }

/* About tabs */
[data-tab="who-we-are"]     { border-color:#ACEDC2; color:#ACEDC2; }
[data-tab="who-we-are"].active     { background:#ACEDC2; }

[data-tab="our-approach"]   { border-color:#FF9659; color:#FF9659; }
[data-tab="our-approach"].active   { background:#FF9659; }

[data-tab="about-insights"] { border-color:#FFC100; color:#FFC100; }
[data-tab="about-insights"].active { background:#FFC100; }

/* Work tabs */
[data-tab="case-studies"]   { border-color:#FFBFAB; color:#FFBFAB; }
[data-tab="case-studies"].active   { background:#FFBFAB; }

[data-tab="from-studio"]    { border-color:#00F5FE; color:#00F5FE; }
[data-tab="from-studio"].active    { background:#00F5FE; }

.tab-pane { display:none; }
.tab-pane.active {
  display:block;
  animation:tabFadeIn 0.28s ease forwards;
}
@keyframes tabFadeIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Studio cards (From the Studio tab) */
.studio-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:600px){ .studio-grid{ grid-template-columns:1fr; } }
.studio-card {
  background:#fafafa; border:1.5px solid #efefef; border-radius:16px;
  padding:28px 24px; cursor:pointer;
  transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.studio-card:hover { transform:translateY(-3px); box-shadow:0 10px 32px rgba(0,0,0,0.07); border-color:#ddd; }
.studio-card .s-tag {
  font-size:0.72rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:#bbb; margin-bottom:10px;
}
.studio-card h3 {
  font-family:'F37Atlantic',sans-serif; font-weight:700;
  font-size:1.15rem; margin-bottom:8px; color:#2a2a2a; line-height:1.3;
}
.studio-card p { font-size:0.88rem; color:#888; line-height:1.6; }

/* Insights link in About panel */
.insights-link {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:28px;
  font-family:'F37Atlantic',sans-serif; font-weight:700;
  font-size:1rem; color:#2a2a2a; text-decoration:none;
  border-bottom:2px solid #2a2a2a; padding-bottom:3px;
  transition:opacity 0.2s;
}
.insights-link:hover { opacity:0.5; }

/* Insight cards (in panel and listing page) */
.insight-card {
  border-bottom:1px solid #efefef; padding:28px 0;
  cursor:pointer; transition:opacity 0.2s; text-decoration:none; display:block; color:inherit;
}
.insight-card:first-of-type { padding-top:8px; }
.insight-card:hover { opacity:0.55; }
.insight-card .tag {
  font-size:0.72rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:#aaa; margin-bottom:8px;
}
.insight-card h3 {
  font-family:'F37Atlantic',sans-serif; font-weight:700;
  font-size:1.35rem; margin-bottom:8px; color:#2a2a2a; line-height:1.35;
}
.insight-card p { font-size:0.95rem; color:#777; line-height:1.65; font-weight:300; }
.insight-card .meta { font-size:0.8rem; color:#bbb; margin-top:10px; }

/* ── Insight article (in case study panel) ── */
.article-tag { font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#aaa; margin-bottom:16px; }
.article-h1  { font-family:'F37Atlantic',sans-serif; font-weight:700; font-size:clamp(1.6rem,3.5vw,44px); line-height:1.15; margin-bottom:12px; color:#2a2a2a; }
.article-meta { font-size:0.85rem; color:#bbb; margin-bottom:32px; border-bottom:1px solid #efefef; padding-bottom:24px; }
.article-intro { font-family:'F37Atlantic',sans-serif; font-weight:400; font-size:1.15rem; line-height:1.7; color:#444; margin-bottom:24px; }
.article-body { font-size:1rem; line-height:1.85; color:#555; font-weight:300; max-width:680px; }

/* ── Case study components inside the panel overlay ── */
/* Override case-study.css variables to fit the panel context */
#panelCaseStudy {
  --section-gap: 56px;
  --label-w:     180px;
  --col-gap:     40px;
  --img-gap:     12px;
  --radius:      12px;
}
#panelCaseStudy .cs-hero {
  padding-top:0;
  padding-bottom:40px;
  margin-bottom:48px;
}
#panelCaseStudy .cs-hero-title {
  font-size:clamp(1.4rem, 3vw, 2rem);
}
#panelCaseStudy .cs-meta {
  min-width:120px;
}
#panelCaseStudy .cs-row {
  margin-bottom:48px;
}
#panelCaseStudy .cs-label {
  position:static; /* sticky doesn't work inside overflow:auto panel */
  font-size:clamp(1.1rem, 2vw, 1.6rem);
}
#panelCaseStudy .cs-tiles {
  margin-bottom:48px;
}
#panelCaseStudy .cs-img-block {
  margin-bottom:48px;
}
#panelCaseStudy .cs-pullquote {
  margin-bottom:48px;
  padding:28px 32px;
}
/* Stack to single col on narrow panel */
@media(max-width:700px){
  #panelCaseStudy {
    --label-w: 100%;
  }
  #panelCaseStudy .cs-hero {
    grid-template-columns:1fr;
  }
  #panelCaseStudy .cs-meta {
    flex-direction:row; flex-wrap:wrap; gap:16px 28px; min-width:unset;
  }
  #panelCaseStudy .cs-row {
    grid-template-columns:1fr;
    row-gap:12px;
  }
  #panelCaseStudy .cs-img-2,
  #panelCaseStudy .cs-img-3 {
    grid-template-columns:1fr;
  }
  #panelCaseStudy .cs-img-mixed {
    grid-template-columns:1fr; height:auto;
  }
  #panelCaseStudy .cs-img-mixed .cs-img-span {
    grid-row:auto;
  }
}