/* =========================================================
   DUALSTAG — OUR WORK PAGE STYLESHEET
   Loads AFTER style.css and only adds what's unique to work.html:
   the work hero and the interactive category showcase. The
   let's talk banner, footer, whatsapp and navbar reuse style.css.

   TABLE OF CONTENTS
   00 · Work hero (light)
   01 · Stage + ghost word
   02 · Category tabs (glass)
   03 · Project feature (info + visual frame)
   04 · Project rail
   05 · Per-category overrides  (styled one by one, later)
   06 · Mobile & tablet responsive
   ========================================================= */

/* =========================================================
   00 · WORK HERO (light)
   Dotted paper (.soft-bg) with a faint ghost word, centred tag,
   headline and paragraph, sitting right above the works stage.
   ========================================================= */
.work-hero{
  position:relative;
  overflow:hidden;
  padding:150px 6% 56px;
  background-color:var(--paper);
}
.work-hero-ghost{
  position:absolute;
  top:96px;
  right:-2%;
  z-index:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(130px, 19vw, 300px);
  line-height:.8;
  letter-spacing:-6px;
  color:rgba(143,48,111,0.06);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}
.work-hero-body{
  position:relative;
  z-index:1;
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.work-hero .eyebrow{ justify-content:center; margin-bottom:18px; }
.work-hero h1{ margin:0 0 20px; }
.work-hero-body > p{
  max-width:60ch;
  margin:0 auto;
  font-size:16px;
  line-height:1.8;
  color:var(--text-soft);
}

/* =========================================================
   01 · STAGE
   work.html → <section class="work-stage">
   Deep ink with rose / violet glows, rounded on all corners with
   only a thin gap on the left and right of the page.
   ========================================================= */
.work-stage{
  position:relative;
  z-index:2;
  overflow:hidden;
  isolation:isolate;
  scroll-margin-top:100px;
  margin:0 clamp(12px, 2vw, 28px) 0;                 /* no gap: the Let's Talk band tucks in right under it */
  padding:clamp(28px, 3.4vw, 48px) 4% clamp(30px, 3.4vw, 46px);
  display:flex;
  flex-direction:column;
  border-radius:clamp(28px, 3.4vw, 48px);
  background:
    radial-gradient(46% 50% at 8% 6%,   rgba(219,87,123,0.30), transparent 70%),
    radial-gradient(42% 50% at 96% 40%, rgba(124,58,214,0.30), transparent 70%),
    radial-gradient(50% 45% at 45% 108%, rgba(143,48,111,0.38), transparent 70%),
    var(--ink);
}
.work-stage::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,0.08) 1.4px, transparent 1.4px);
  background-size:26px 26px;
  opacity:.5;
  pointer-events:none;
}
.work-ghost{
  position:absolute;
  top:60px;
  right:-3%;
  z-index:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(150px, 21vw, 330px);
  line-height:0.8;
  letter-spacing:-6px;
  color:rgba(255,255,255,0.035);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  transform:translate3d(var(--ghost-x, 0px), 0, 0);
  will-change:transform;
}
.work-inner{
  position:relative;
  z-index:1;
  flex:1;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
}

/* =========================================================
   02 · CATEGORY TABS (glass)
   A gradient thumb slides behind the active tab
   (script.js sets --x / --w on .work-tabs-thumb).
   ========================================================= */
.work-tabs{
  position:relative;
  display:flex;
  gap:6px;
  width:fit-content;
  max-width:100%;
  margin:0 auto 34px;
  padding:8px;
  border-radius:100px;
  background:linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.05) 100%);
  border:1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 18px 40px rgba(8,2,20,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
  overflow-x:auto;
  scrollbar-width:none;
}
.work-tabs::-webkit-scrollbar{ display:none; }

.work-tabs-thumb{
  --x:0px; --w:0px;
  position:absolute;
  top:8px; bottom:8px; left:0;
  width:var(--w);
  transform:translateX(var(--x));
  border-radius:100px;
  background:var(--brand-gradient);
  box-shadow:0 10px 26px rgba(219,87,123,0.38), inset 0 1px 0 rgba(255,255,255,0.5);
  pointer-events:none;
  opacity:0;
}
.work-tabs-thumb.ready{
  opacity:1;
  transition:transform .6s var(--ease), width .6s var(--ease), opacity .3s ease;
}
.work-tab{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:14px 24px;
  border:0;
  border-radius:100px;
  background:transparent;
  font-family:var(--font-body);
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.3px;
  white-space:nowrap;
  color:rgba(255,255,255,0.72);
  cursor:pointer;
  transition:color .35s ease, background .35s ease;
}
.work-tab i{ font-size:17px; color:#FBC9D6; transition:color .35s ease, transform .45s var(--ease); }
.work-tab:hover{ color:#fff; background:rgba(255,255,255,0.08); }
.work-tab:hover i{ transform:translateY(-2px) rotate(-6deg); }
.work-tab.is-active,
.work-tab.is-active:hover{ color:#fff; background:transparent; }
.work-tab.is-active i{ color:#fff; }
.work-tab:focus-visible{ outline:2px solid #fff; outline-offset:-3px; }

/* =========================================================
   03 · PROJECT FEATURE
   Left: category chip, project title, text, tags, action.
   Right: the featured project inside a frame (a browser window
   for web development). script.js swaps the content.
   ========================================================= */
.work-panel{ flex:1; }
.work-panel[hidden]{ display:none; }
.work-panel:not([hidden]){ display:flex; flex-direction:column; }
.work-panel.is-active .wp-feature{ animation:workIn .75s var(--ease) both; }
.work-panel.is-active .wp-rail{ animation:workIn .75s var(--ease) .12s both; }
@keyframes workIn{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

.wp-feature{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
  padding:8px 0 34px;
}
.wp-info{ min-width:0; }
.wp-area{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px; border-radius:100px;
  border:1px solid rgba(255,255,255,0.28); background:rgba(255,255,255,0.08);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:.3px; color:#fff;
}
.wp-area i{ color:#FBC9D6; font-size:14px; }
.wp-title{
  margin:18px 0 14px;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(28px, 3.7vw, 50px); line-height:1.06; letter-spacing:-.5px; color:#fff;
}
.wp-desc{ max-width:44ch; margin-bottom:22px; font-size:15.5px; line-height:1.75; color:rgba(255,255,255,0.78); }
.wp-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; }
.wp-tags li{
  padding:7px 14px; border-radius:100px; font-size:12px; font-weight:600; color:rgba(255,255,255,0.85);
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18);
}
/* which office handles this category */
.wp-branch{ display:flex; align-items:center; justify-content:flex-start; gap:8px; margin:18px 0 0; font-size:12.5px; font-weight:600; letter-spacing:.2px; color:rgba(255,255,255,0.78); }
.wp-branch i{ font-size:15px; color:#FBC9D6; }
/* .btn-plum is built for light pages: on this dark stage it goes white, same as Let's Talk */
.wp-info{ text-align:left; }
.wp-link{ color:#fff; border-color:rgba(255,255,255,0.7); display:inline-flex; margin-left:0; margin-right:auto; }
.wp-link:hover{ border-color:transparent; }
.wp-info.swap > *{ animation:workIn .6s var(--ease) both; }
.wp-info.swap > *:nth-child(2){ animation-delay:.05s; }
.wp-info.swap > *:nth-child(3){ animation-delay:.10s; }
.wp-info.swap > *:nth-child(4){ animation-delay:.15s; }
.wp-info.swap > *:nth-child(5){ animation-delay:.20s; }
.wp-info.swap > *:nth-child(6){ animation-delay:.25s; }

.wp-visual{ position:relative; min-width:0; }
.wp-visual::before{
  content:""; position:absolute; inset:8% -4% -8%; z-index:-1;
  background:radial-gradient(closest-side, rgba(219,87,123,0.30), rgba(124,58,214,0.14) 60%, transparent);
  filter:blur(28px); pointer-events:none;
}
.wp-frame{
  position:relative; overflow:hidden; border-radius:24px; background:var(--ink);
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 34px 80px rgba(8,2,20,0.55);
}
.wp-screen{ position:relative; height:clamp(280px, 46vh, 500px); }
.wp-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition:opacity .8s ease, transform 1.2s var(--ease);
}
.wp-img.on{ opacity:1; transform:scale(1); }

/* browser window chrome (web development) */
.wp-bar{
  display:flex; align-items:center; gap:16px; padding:12px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  border-bottom:1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.wp-dots{ display:flex; gap:7px; }
.wp-dots i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.32); }
.wp-dots i:first-child{ background:var(--coral); }
.wp-url{
  flex:1; max-width:380px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:6px 14px; border-radius:100px; font-size:12px; font-weight:600; color:rgba(255,255,255,0.75);
  background:rgba(8,2,20,0.35); border:1px solid rgba(255,255,255,0.12);
}
.wp-url i{ font-size:11px; color:#FBC9D6; }
.wp-frame--browser .wp-img{ object-position:top center; }

/* live preview: the real site rendered at desktop width (1280px), scaled to fit the frame.
   script.js sets --s on .wp-screen. The screenshot underneath shows until the page has loaded. */
.wp-live{
  position:absolute; top:0; left:0;
  width:1280px; height:calc(100% / var(--s, .6));
  border:0; background:#fff;
  transform:scale(var(--s, .6)); transform-origin:0 0;
  opacity:0; pointer-events:none;
  transition:opacity .8s ease;
}
/* once loaded, the page inside can be scrolled with the wheel or by touch, all the way to its bottom */
.wp-live.on.loaded{ opacity:1; pointer-events:auto; }

.wp-hint{
  position:absolute; left:50%; bottom:16px; z-index:3; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:100px;
  font-size:12px; font-weight:700; letter-spacing:.3px; color:#fff; white-space:nowrap;
  background:rgba(23,10,41,0.55); border:1px solid rgba(255,255,255,0.28);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  pointer-events:none; transition:opacity .5s ease;
}
.wp-hint i{ font-size:15px; color:#FBC9D6; }
.wp-hint[hidden], .work-panel.hint-off .wp-hint{ opacity:0; }

/* =========================================================
   04 · PROJECT RAIL
   Glass cards along the bottom: click one to feature it.
   ========================================================= */
.wp-rail{ display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0,1fr)); gap:14px; }
.wp-item{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; gap:14px; padding:10px 16px 10px 10px;
  border-radius:20px; text-align:left; font:inherit; color:#fff; cursor:pointer;
  background:linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.18);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.22);
  transition:transform .4s var(--ease), border-color .35s ease, background .35s ease;
}
.wp-item img{ flex:none; width:84px; height:62px; object-fit:cover; border-radius:13px; }
/* logo tile (web development): white tile so any logo reads; falls back to the first letter if the file is missing */
.wp-item-logo{
  flex:none; width:84px; height:62px; padding:9px; overflow:hidden;
  display:grid; place-items:center; border-radius:13px; background:#fff;
  box-shadow:inset 0 0 0 1px rgba(27,11,52,0.06);
}
.wp-item .wp-item-logo img{ width:100%; height:100%; object-fit:contain; border-radius:0; }
.wp-item-logo::before{
  content:attr(data-initial); display:none;
  font-family:var(--font-display); font-weight:800; font-size:26px; color:#8F306F;
}
.wp-item-logo.no-logo::before{ display:block; }
.wp-item-txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.wp-item-txt small{ font-size:10.5px; font-weight:700; letter-spacing:.9px; color:rgba(255,255,255,0.6); }
.wp-item-txt strong{ font-family:var(--font-display); font-weight:700; font-size:14px; line-height:1.25; color:#fff; }
.wp-item::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:1;
  background:var(--brand-gradient); transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease);
}
/* auto-change (script.js adds .is-auto to the panel): the bar fills over --auto, then the next project shows */
.work-panel.is-auto .wp-item.is-active::after{ transform:scaleX(0); transition:none; animation:wpFill var(--auto, 3500ms) linear forwards; }
.work-panel.is-paused .wp-item.is-active::after{ animation-play-state:paused; }
@keyframes wpFill{ to{ transform:scaleX(1); } }
.wp-item:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,0.4); }
.wp-item.is-active{
  border-color:rgba(255,255,255,0.5);
  background:linear-gradient(135deg, rgba(219,87,123,0.34), rgba(143,48,111,0.20));
}
.wp-item.is-active::after{ transform:scaleX(1); }
.wp-item:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* =========================================================
   05 · PER-CATEGORY OVERRIDES
   Each panel has its own class, ready to be styled one by one:
   .work-panel--graphic-designing · --printing · --web-development
   .work-panel--gift-branding · --branding · --signage
   ========================================================= */
@media (max-width:1000px){
  .work-panel--web-development .wp-rail{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}





/* =========================================================
   04 · LET'S TALK — COMPACT GLASS CTA (LIGHT THEME)
   about.html → <section class="talk-section">
   Same aurora + dot texture as the hero and showcase, a ghost
   word that drifts on scroll and one frosted panel holding the
   pitch, the button and two contact chips. The headline carries
   the same switch as "Our values" (flips on when it scrolls into
   view, click to flip it back). A soft spotlight follows the
   cursor across the glass (script.js sets --sx / --sy).
   ========================================================= */
.talk-section{
  --talk-r:clamp(28px,3.4vw,48px);            /* one radius, applied to all four corners */
  --talk-ink:#1B0B34;                          /* main text colour on the light glass */
  --talk-ink-soft:rgba(27,11,52,0.72);
  --talk-ink-mute:rgba(27,11,52,0.55);
  position:relative; z-index:1; overflow:hidden; isolation:isolate;
  box-sizing:border-box; width:100%; max-width:none; float:none;
  /* full-bleed, and pulled up behind the stage's rounded bottom corners so no page background shows between them */
  margin:calc(-1 * clamp(28px,3.4vw,48px)) 0 0; left:0; right:0;
  padding:calc(clamp(56px,6vw,88px) + clamp(28px,3.4vw,48px)) 6% clamp(56px,6vw,88px);
  border-radius:0;
  background:
    radial-gradient(50% 60% at 12% 10%,  rgba(219,87,123,0.22), transparent 70%),
    radial-gradient(45% 55% at 92% 22%,  rgba(124,58,214,0.18), transparent 70%),
    radial-gradient(55% 55% at 50% 110%, rgba(143,48,111,0.16), transparent 70%),
    linear-gradient(160deg, #FFFFFF, #F8F3FF 60%, #FFF4F8);
}
.talk-section::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; border-radius:inherit;
  background-image:radial-gradient(rgba(124,58,214,0.16) 1.4px, transparent 1.4px);
  background-size:26px 26px; opacity:.5;
}
.talk-ghost{
  position:absolute; top:14px; left:-3%; z-index:0;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(110px, 16vw, 250px); line-height:0.8; letter-spacing:-6px;
  color:rgba(124,58,214,0.06); white-space:nowrap;
  pointer-events:none; user-select:none;
  transform:translate3d(var(--ghost-x, 0px), 0, 0); will-change:transform;
}

/* frosted panel */
.talk-panel{
  position:relative; z-index:1; overflow:hidden;
  max-width:980px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);
  gap:clamp(24px,4vw,48px); align-items:center;
  padding:clamp(26px,3.4vw,44px);
  border-radius:clamp(24px,2.6vw,34px);
  background:linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.5) 100%);
  border:1px solid rgba(124,58,214,0.16);
  -webkit-backdrop-filter:blur(24px) saturate(140%); backdrop-filter:blur(24px) saturate(140%);
  box-shadow:0 30px 70px rgba(124,58,214,0.16), inset 0 1px 0 rgba(255,255,255,0.95), inset 0 0 40px rgba(255,255,255,0.4);
}
.talk-panel::before{                    /* cursor spotlight */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(380px circle at var(--sx, 50%) var(--sy, 0%), rgba(219,87,123,0.14), transparent 60%);
  transition:opacity .4s ease;
}
.talk-panel:hover::before{ opacity:1; }
.talk-main, .talk-meta{ position:relative; z-index:1; }

.talk-main .eyebrow{ margin-bottom:14px; }
.talk-title{
  margin:0 0 12px; font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(24px,3.3vw,42px); line-height:1.08; letter-spacing:-.5px; color:var(--talk-ink);
}
.talk-line{ display:block; white-space:nowrap; }
.talk-title em{
  font-style:normal;
  background:linear-gradient(90deg, #DB577B, #7C3AD6);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.talk-lede{ max-width:46ch; margin:0 0 22px; font-size:15px; line-height:1.7; color:var(--talk-ink-soft); }

/* the inline switch (same behaviour as .vx-toggle, tuned for the light glass) */
.talk-toggle{
  position:relative; display:inline-block; vertical-align:-.03em;
  width:1.12em; height:.66em; margin:0 .06em; border-radius:999px;
  background:rgba(27,11,52,0.16); cursor:pointer;
  box-shadow:inset 0 2px 4px rgba(27,11,52,0.15);
}
.talk-toggle::before{                   /* on-state colour, faded in over the grey */
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:var(--brand-gradient, linear-gradient(135deg,#DB577B,#7C3AD6)); opacity:0;
  transition:opacity .5s ease .35s;
}
.talk-toggle::after{                    /* the knob */
  content:""; position:absolute; top:50%; left:.07em;
  width:.52em; height:.52em; margin-top:-.26em; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(27,11,52,0.3);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1) .35s, width .25s ease;
}
.talk-panel.in-view .talk-toggle::before{ opacity:1; }
.talk-panel.in-view .talk-toggle::after{ transform:translateX(.46em); }
.talk-panel.in-view .talk-toggle:not(.is-off):hover::after{ transform:translateX(.4em); width:.58em; }
.talk-panel.in-view .talk-toggle.is-off::before{ opacity:0; transition-delay:0s; }
.talk-panel.in-view .talk-toggle.is-off::after{ transform:none; transition-delay:0s; }

/* contact chips */
.talk-meta{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.talk-chip{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-radius:18px; color:var(--talk-ink);
  background:rgba(255,255,255,0.7); border:1px solid rgba(124,58,214,0.16);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 6px 16px rgba(124,58,214,0.08), inset 0 1px 0 rgba(255,255,255,0.95);
  transition:transform .35s var(--ease), background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
a.talk-chip:hover{
  transform:translateY(-3px); background:#fff; border-color:rgba(124,58,214,0.35);
  box-shadow:0 12px 26px rgba(124,58,214,0.16), inset 0 1px 0 #fff;
}
.talk-chip-ico{
  flex:0 0 40px; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; font-size:18px; color:#fff;
  background:var(--brand-gradient, linear-gradient(135deg,#DB577B,#7C3AD6));
  box-shadow:0 8px 18px rgba(124,58,214,0.28), inset 0 1px 0 rgba(255,255,255,0.35);
}
.talk-chip-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.talk-chip-txt small{ font-size:10.5px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--talk-ink-mute); }
.talk-chip-txt strong{ font-size:14px; font-weight:600; color:var(--talk-ink); overflow-wrap:anywhere; }

@media (max-width:900px){
  .talk-panel{ grid-template-columns:1fr; }
  .talk-meta{ grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); }
}
@media (max-width:640px){
  .talk-line{ white-space:normal; }
}
@media (max-width:560px){
  .talk-section{ padding:40px 5%; }
  .talk-panel{ padding:24px 20px; }
  .talk-main .btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .talk-toggle::before, .talk-toggle::after{ transition:none !important; }
}


/* =========================================================
   06 · MOBILE & TABLET RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .work-hero{ padding:128px 6% 44px; }
  .work-stage{ padding:26px 5% 30px; }
  .wp-feature{ grid-template-columns:1fr; gap:30px; }
  .wp-screen{ height:clamp(240px, 42vh, 380px); }
}
@media (max-width:700px){
  .wp-rail{ grid-template-columns:1fr; gap:10px; }
}
@media (max-width:640px){
  .work-hero{ padding:118px 6% 36px; }
  .work-tabs{ margin-bottom:28px; width:100%; }
  .work-tab{ padding:13px 18px; }
  .wp-info .btn{ width:auto; justify-content:flex-start; }
}




/* =========================================================
   06 · MOBILE & TABLET RESPONSIVE
   work.html  (same breakpoints as the About page: 900 / 600 / 380)

   06.00 Work hero · 06.01 Stage (tabs, project feature, rail) · 06.02 Let's Talk

   Panel order on phones: chip → title → p → IMAGE → tags → button → branch line
   NOTE: the mobile navbar is 12px from the top + 64px high = 76px.
   ========================================================= */

/* ---------------------------------------------------------
   06.00 · WORK HERO   (same values as the About hero)
   --------------------------------------------------------- */
@media (max-width:900px){
  .work-hero{ padding:140px 6% 44px; }
  .work-hero-ghost{
    top:96px;
    right:-4%;
    font-size:clamp(90px, 24vw, 200px);
    letter-spacing:-4px;
  }
  .work-hero .eyebrow{ margin-bottom:14px; }
  .work-hero h1{
    font-size:clamp(28px, 6.4vw, 42px);
    line-height:1.15;
    margin:0;
  }
}
@media (max-width:600px){
  .work-hero{ padding:128px 6% 36px; }
  .work-hero-ghost{
    top:88px;
    font-size:clamp(80px, 28vw, 130px);
    letter-spacing:-3px;
  }
  .work-hero h1{
    font-size:clamp(25px, 7.4vw, 32px);
    text-wrap:balance;
  }
}
@media (max-width:380px){
  .work-hero{ padding:120px 5% 32px; }
  .work-hero-ghost{ top:82px; }
  .work-hero h1{ font-size:24px; }
}

/* ---------------------------------------------------------
   06.01 · STAGE  (tabs + project feature + rail)

    900px  tablet + phones   one column, image moved below the paragraph
    600px  phones            compact; image height adapts to the screen height;
                             rail becomes a row of small cards
    380px  small phones      smallest
    short  phones <= 680px tall   tags hidden to save room
   --------------------------------------------------------- */
@media (max-width:900px){
  .work-stage{
    padding:26px 5% 30px;
    scroll-margin-top:90px;
  }
  .work-ghost{
    top:40px;
    right:-4%;
    font-size:clamp(100px, 24vw, 200px);
    letter-spacing:-4px;
  }

  /* tabs */
  .work-tabs{
    margin-bottom:22px;
    padding:6px;
    gap:4px;
  }
  .work-tabs-thumb{ top:6px; bottom:6px; }
  .work-tab{
    padding:12px 18px;
    font-size:13px;
  }

  /* feature: one column; the text elements join the grid so the image can sit after the p */
  .wp-feature{
    grid-template-columns:minmax(0, 1fr);
    gap:0;
    align-items:start;
    padding:0 0 18px;
  }
  .wp-info{ display:contents; }
  .wp-area{ order:1; justify-self:start; }
  .wp-title{
    order:2;
    margin:14px 0 10px;
    font-size:clamp(24px, 5.4vw, 34px);
  }
  .wp-desc{
    order:3;
    max-width:none;
    margin-bottom:18px;
    font-size:14.5px;
    line-height:1.65;
  }
  .wp-visual{ order:4; margin-bottom:18px; }
  .wp-tags{ order:5; margin-bottom:18px; }
  .wp-link{ order:6; justify-self:start; }
  .wp-branch{ order:7; margin-top:14px; }
  .wp-screen{ height:clamp(240px, 42vh, 380px); }

  .wp-rail{ gap:10px; }
}

/* ---------- phones: compact ---------- */
@media (max-width:600px){
  .work-stage{ padding:20px 4% 22px; }
  .work-ghost{
    top:26px;
    font-size:clamp(90px, 30vw, 140px);
    letter-spacing:-3px;
  }

  /* tabs: slim scrolling row */
  .work-tabs{
    width:100%;
    margin-bottom:12px;
    padding:5px;
    gap:3px;
  }
  .work-tabs-thumb{ top:5px; bottom:5px; }
  .work-tab{
    gap:6px;
    padding:9px 14px;
    font-size:12px;
  }
  .work-tab i{ font-size:15px; }

  /* feature */
  .wp-feature{ padding:0 0 12px; }
  .wp-area{
    gap:6px;
    padding:6px 12px;
    font-size:11px;
  }
  .wp-area i{ font-size:13px; }
  .wp-title{
    margin:10px 0 6px;
    font-size:clamp(20px, 6vw, 24px);
    line-height:1.1;
  }
  .wp-desc{
    margin-bottom:12px;
    font-size:12.5px;
    line-height:1.5;
  }
  .wp-visual{ margin-bottom:12px; }
  .wp-frame{ border-radius:16px; }

  /* image: takes the space left on the screen
     (screen height minus the other parts, never below 160px or above 250px).
     Raise 500px to make it shorter, lower it to make it taller. */
  .wp-screen{
    height:clamp(160px, calc(100vh - 500px), 250px);
    height:clamp(160px, calc(100svh - 500px), 250px);
  }
  /* browser bar (web development) */
  .wp-bar{ padding:8px 12px; gap:10px; }
  .wp-dots i{ width:8px; height:8px; }
  .wp-url{
    padding:4px 10px;
    font-size:10.5px;
  }
  .wp-hint{
    bottom:10px;
    padding:6px 12px;
    font-size:10.5px;
  }

  .wp-tags{ gap:6px; margin-bottom:12px; }
  .wp-tags li{
    padding:4px 10px;
    font-size:10.5px;
  }
  .wp-link{
    padding:9px 18px;
    font-size:11.5px;
  }
  .wp-branch{
    margin-top:10px;
    font-size:11px;
  }
  .wp-branch i{ font-size:13px; }

  /* rail: one row of small cards (3 cards, or 4 for web development) */
  .wp-rail,
  .work-panel--web-development .wp-rail{
    grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr));
    gap:6px;
  }
  .wp-item{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:5px 5px 7px;
    border-radius:12px;
  }
  .wp-item:hover{ transform:translateY(-2px); }
  .wp-item img{
    width:100%;
    height:44px;
    border-radius:8px;
  }
  .wp-item-logo{
    width:100%;
    height:44px;
    padding:6px;
    border-radius:8px;
  }
  .wp-item-logo::before{ font-size:20px; }
  .wp-item-txt{ gap:0; }
  .wp-item-txt strong{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:10.5px;
    line-height:1.2;
    text-align:center;
  }
}
@media (max-width:380px){
  .work-stage{ padding:18px 3.5% 20px; }
  .work-tab{
    padding:8px 12px;
    font-size:11.5px;
  }
  .wp-title{ font-size:20px; }
  .wp-desc{ font-size:12px; }
  .wp-item img,
  .wp-item-logo{ height:38px; }
  .wp-item-txt strong{ font-size:10px; }
}
/* short phones (about 680px tall or less): hide the tags, keep the image decent */
@media (max-width:600px) and (max-height:680px){
  .wp-tags{ display:none; }
  .wp-screen{ height:clamp(130px, calc(100svh - 470px), 190px); }
}

/* ---------------------------------------------------------
   06.02 · LET'S TALK  (light glass CTA)

    900px  tablet + phones   one column, the 2 contact chips side by side, glassy short button
    600px  phones            compact: short centred button, the 2 chips stay in ONE line
    380px  small phones      smallest

   Order: eyebrow → title → p → button → contact chips.
   The section is pulled up behind the stage's rounded corners (28px on
   phones), so the top padding adds that 28px back.
   --------------------------------------------------------- */
@media (max-width:900px){
  .talk-section{ padding:calc(clamp(28px, 3.4vw, 48px) + 30px) 5% 32px; }
  .talk-ghost{
    top:44px;
    left:-4%;
    font-size:clamp(80px, 22vw, 160px);
    letter-spacing:-4px;
  }
  .talk-panel{
    grid-template-columns:1fr;
    gap:18px;
    padding:22px 20px;
  }
  .talk-main .eyebrow{ margin-bottom:10px; }
  .talk-title{
    margin-bottom:10px;
    font-size:clamp(22px, 5.2vw, 32px);
  }
  .talk-line{ white-space:normal; }
  .talk-lede{
    max-width:none;
    margin-bottom:16px;
    font-size:14px;
    line-height:1.6;
  }

  /* START A PROJECT: short, glassy button (width follows its label) */
  .talk-main .btn{
    display:flex;
    width:fit-content;
    max-width:100%;
    justify-content:center;
    margin:0 auto;
    padding:11px 26px;         /* button length: lower padding = shorter, raise = longer */
    color:var(--magenta);
    background:
      linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.12)),
      linear-gradient(135deg, rgba(219,87,123,0.22), rgba(124,58,214,0.18));
    border:1px solid rgba(143,48,111,0.30);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    backdrop-filter:blur(14px) saturate(160%);
    box-shadow:0 10px 24px rgba(124,58,214,0.16), inset 0 1px 0 rgba(255,255,255,0.85);
    transition:background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
  }
  .talk-main .btn:hover,
  .talk-main .btn:focus-visible{
    color:#fff;
    background:var(--brand-gradient);
    border-color:transparent;
    box-shadow:0 14px 28px rgba(219,87,123,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
  }

  .talk-meta{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .talk-chip{
    gap:10px;
    padding:10px 14px;
    border-radius:16px;
  }
  .talk-chip-ico{
    flex:0 0 34px;
    width:34px;
    height:34px;
    font-size:16px;
  }
  .talk-chip-txt small{ font-size:10px; }
  .talk-chip-txt strong{ font-size:13px; }
}

@media (max-width:600px){
  .talk-section{ padding:calc(clamp(28px, 3.4vw, 48px) + 22px) 4% 26px; }
  .talk-ghost{
    top:38px;
    font-size:clamp(64px, 24vw, 96px);
    letter-spacing:-3px;
  }
  .talk-panel{
    gap:12px;
    padding:16px 14px;
    border-radius:18px;
  }
  .talk-main .eyebrow{
    margin-bottom:6px;
    font-size:10.5px;
  }
  .talk-title{
    margin-bottom:6px;
    font-size:clamp(18px, 5.4vw, 22px);
    line-height:1.1;
  }
  .talk-lede{
    margin-bottom:12px;
    font-size:12.5px;
    line-height:1.5;
  }

  /* button: short, centred */
  .talk-main .btn{
    padding:10px 22px;
    font-size:11px;
  }

  /* chips: slim, side by side in ONE line (email gets a bit more room) */
  .talk-meta{
    grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);
    gap:6px;
  }
  .talk-chip{
    gap:7px;
    min-width:0;
    padding:7px 8px;
    border-radius:14px;
  }
  .talk-chip-ico{
    flex:0 0 26px;
    width:26px;
    height:26px;
    font-size:12px;
  }
  .talk-chip-txt{
    gap:1px;
    min-width:0;
  }
  .talk-chip-txt small{ font-size:8.5px; }
  .talk-chip-txt strong{
    font-size:10.5px;
    line-height:1.25;
    overflow-wrap:anywhere;    /* safety: wraps instead of overflowing on very narrow screens */
  }
}

@media (max-width:380px){
  .talk-section{ padding:calc(clamp(28px, 3.4vw, 48px) + 20px) 3% 24px; }
  .talk-panel{ padding:14px 12px; }
  .talk-title{ font-size:18px; }
  .talk-lede{ font-size:12px; }
  .talk-main .btn{
    padding:9px 18px;
    font-size:10.5px;
  }
  .talk-chip{
    gap:6px;
    padding:6px 7px;
  }
  .talk-chip-ico{
    flex:0 0 24px;
    width:24px;
    height:24px;
    font-size:11px;
  }
  .talk-chip-txt strong{ font-size:10px; }
}