/* =========================================================
   Ahmed Radwan — Portfolio · shared styles
   Dark, sans-only, single accent.
   ========================================================= */

:root{
  --bg:        #0B0C0D;
  --bg-sub:    #131518;
  --bg-elev:   #1A1D22;
  --ink:       #ECECEE;
  --ink-2:     #C8CACE;
  --mute:      #7A7E85;
  --mute-2:    #4F5359;
  --rule:      #22262B;
  --rule-2:    #2E3239;
  --accent:    #4ADECB;
  --accent-ink:#0B0C0D;

  --noise-opacity: 0.12;

  --max: 1640px;
  --gutter: clamp(20px, 4vw, 56px);

  --f-display: "Geist", system-ui, sans-serif;
  --f-body:    "Geist", system-ui, sans-serif;
  --f-mono:    "Geist Mono", ui-monospace, monospace;

  --t-mega:    clamp(72px, 17vw, 280px);
  --t-section: clamp(48px, 9vw, 160px);
  --t-display: clamp(40px, 6vw, 96px);
  --t-h2:      clamp(28px, 3.4vw, 56px);
  --t-h3:      clamp(20px, 2vw, 28px);
  --t-body:    clamp(15px, 1.05vw, 18px);
  --t-lead:    clamp(18px, 1.4vw, 22px);
  --t-label:   12px;

  /* mono scale — one place to size all the uppercase mono UI text */
  --t-mono-2xs: 9px;
  --t-mono-xs:  10px;
  --t-mono-s:   11px;
  --t-mono-m:   12px;
  --t-mono-l:   13px;

  /* UI / body scale — fixed-px sizes that used to be hardcoded per rule */
  --t-ui-2xs:  12px;
  --t-ui-xs:   13px;
  --t-ui-s:    14px;
  --t-ui-m:    15px;
  --t-ui-l:    16px;
  --t-ui-xl:   17px;
  --t-ui-2xl:  18px;
  --t-ui-3xl:  19px;

  /* hero (home) — overridden per breakpoint below */
  --t-hero:         170px;
  --t-hero-kicker:  30px;
  --t-hero-tagline: clamp(22px, 2vw, 32px);
  --t-hero-stat:    clamp(30px, 2.8vw, 44px);
}

/* ---------- TABLET TIER (761–1024px) ----------
   Between the mobile rules (≤760) and desktop, the vw-driven clamps were
   overshooting on display type and bottoming out on labels. This tier gives
   the range its own scale. */
@media (min-width: 761px) and (max-width: 1024px){
  :root{
    --t-mega:    clamp(96px, 12vw, 140px);
    --t-section: clamp(56px, 8vw, 96px);
    --t-display: clamp(44px, 6.4vw, 72px);
    --t-h2:      clamp(32px, 4.4vw, 46px);
    --t-h3:      clamp(21px, 2.6vw, 27px);
    --t-body:    17px;
    --t-lead:    20px;
    --t-label:   14px;
    --t-mono-2xs: 11px;
    --t-mono-xs:  12px;
    --t-mono-s:   13px;
    --t-mono-m:   14px;
    --t-mono-l:   15px;
    --t-ui-2xs:  13px;
    --t-ui-xs:   14px;
    --t-ui-s:    15px;
    --t-ui-m:    16px;
    --t-ui-l:    17px;
    --t-ui-xl:   18px;
    --t-ui-2xl:  19px;
    --t-ui-3xl:  21px;
    --t-hero:         clamp(108px, 14.5vw, 160px);
    --t-hero-kicker:  22px;
    --t-hero-tagline: clamp(19px, 2.4vw, 24px);
    --t-hero-stat:    clamp(40px, 5.2vw, 54px);
  }
}

/* ---------- MOBILE TIER (≤760px) ---------- */
@media (max-width: 760px){
  :root{
    --t-hero:         clamp(60px, 17.8vw, 112px);
    --t-hero-kicker:  20px;
    --t-hero-tagline: clamp(18px, 4.4vw, 22px);
    --t-hero-stat:    clamp(26px, 7vw, 32px);
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  background:var(--bg);
  overflow-x:clip;
}
body{
  background: transparent;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: clip;
}

/* ---------- film-grain background texture (BEHIND content) ---------- */
body::before{
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -0.2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: var(--noise-opacity, 0.12);
}
/* mobile: crisp raster noise — iOS rasterizes the SVG turbulence filter at
   low res and upscales it, which is what made the grain look huge/mushy.
   A real 256px PNG tile shown at 128px stays pixel-sharp on retina. */
@media (max-width: 760px){
  body::before, .loader::after{
    background-image: url("noise.png");
    background-size: 90px 90px;
  }
  body::before{ opacity: calc(var(--noise-opacity, 0.12) * 0.55); }
}

/* Heavy sections — let the browser skip layout/paint when off-screen. */
/* NOTE: .work excluded — its hover transforms clip on paint-contained ancestors. */
.clients,
.about,
.services-compact,
.case-body{
  content-visibility: auto;
  contain-intrinsic-size: 1px 1200px;
}

/* ===========================================================
   LOADER — fancy entry overlay
   =========================================================== */
.loader{
  position: fixed; inset: 0;
  z-index: 10000;
  background: var(--bg);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(24px, 3vw, 44px) var(--gutter);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--mute);
  overflow: hidden;
  will-change: transform;
}
.loader::after{
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -0.2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: 0.10;
}
@media (max-width: 760px){
  .loader::after{ background-image: url("noise.png"); background-size: 90px 90px; opacity: 0.07; }
}
.loader.exit{
  transform: translateY(-100%);
  transition: transform .95s cubic-bezier(.76,0,.24,1);
}
html.no-loader .loader{ display: none; }
html.loading{ overflow: hidden; }

.loader-row{
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  position: relative; z-index: 2;
}
.loader-row .ink{ color: var(--ink); }
.loader-row .mark{
  font-family: var(--f-display); font-weight: 500;
  letter-spacing: -0.01em; text-transform: none;
  font-size: 14px; color: var(--ink);
}
.loader-dots{
  display:inline-block; margin-left: 6px; letter-spacing: 2px;
  animation: loader-dots 1.4s steps(4) infinite;
}
@keyframes loader-dots{
  0%   { opacity: 0; }
  25%  { opacity: 0.4; }
  50%  { opacity: 0.7; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

.loader-center{
  display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 2;
  min-height: 0;
}
.loader-num{
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(48px, 8vw, 120px);
  letter-spacing: -0.05em; line-height: 0.86;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 0.04em;
  transition: opacity .35s ease, transform .55s cubic-bezier(.2,.7,.2,1);
  opacity: 0; transform: translateY(24px);
}
.loader-num.ready{ opacity: 1; transform: translateY(0); }
.loader-num .pct{
  font-size: 0.32em;
  color: var(--accent);
  align-self: flex-start; padding-top: 0.4em;
  letter-spacing: -0.04em;
}
.loader-welcome{
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%) translateY(20px);
  display: flex; align-items: center; justify-content: center; gap: 0.08em;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(64px, 13vw, 200px);
  letter-spacing: -0.05em; line-height: 0.9;
  color: var(--ink);
  opacity: 0;
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
.loader-welcome .accent{ color: var(--accent); }
.loader.done .loader-num{ opacity: 0; transform: translateY(-20px); }
.loader.done .loader-welcome{ opacity: 1; transform: translateY(-50%) translateY(0); }

.loader-bottom{
  display: flex; flex-direction: column; gap: 14px;
  position: relative; z-index: 2;
}
.loader-bar{
  height: 2px; background: var(--rule); position: relative; overflow: hidden;
  border-radius: 2px;
}
.loader-fill{
  position: absolute; top:0; bottom:0; left: 0;
  width: 0; background: var(--accent);
  transition: width .08s linear;
}
.loader-meta{
  display:flex; justify-content: space-between; align-items: center; gap: 16px;
}
.loader-tags{
  display:flex; gap: 28px; flex-wrap: wrap;
  color: var(--mute);
}
.loader-tags span{ position: relative; }
.loader-tags span + span::before{
  content: ""; position: absolute; left: -16px; top: 50%; width: 4px; height: 4px;
  background: var(--rule); border-radius: 50%; transform: translateY(-50%);
}

/* hero portrait shares the same grain feel */
.hero-portrait{ position: relative; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font: inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background: var(--accent); color: var(--accent-ink); }

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.mono{
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.rule{ height:1px; background: var(--rule); width:100%; }

/* ---------- NAV ---------- */
.nav{
  position: fixed; inset: 0 0 auto 0;
  z-index: 50;
  padding: 22px var(--gutter);
  /* align logo/CTA with the centered content column (--max includes gutters) */
  padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(33,33,32,.92), rgba(33,33,32,.4) 70%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.nav .mark{
  font-family: var(--f-display); font-weight:500; font-size: var(--t-ui-s);
  letter-spacing: -0.01em; text-transform: none; color: var(--ink);
  display: inline-flex; align-items: center;
  transition: color .25s ease;
}
.nav .mark .logo{
  height: 22px; width: auto; display: block;
  fill: currentColor;
}
.nav .mark:hover{ color: var(--accent); }
.nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap: 24px;
  justify-content: center;
  grid-column: 2;
}
.nav .mark{ grid-column: 1; justify-self: start; }
.nav-right{
  grid-column: 3; justify-self: end;
  display:flex; align-items:center; gap: 28px;
}
.nav a:hover:not(.btn){ color: var(--accent); }


/* shared SVG arrow for CTA buttons */
.arr-svg{ width: 1em; height: 1em; display:block; }
.arr-svg.arr-right{ width: 1.2em; }
.dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  display:inline-block; margin-right: 10px; vertical-align: 1px;
  box-shadow: 0 0 0 0 rgba(4,183,153,.6);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%  { box-shadow: 0 0 0 0 rgba(4,183,153,.55); }
  70% { box-shadow: 0 0 0 8px rgba(4,183,153,0); }
  100%{ box-shadow: 0 0 0 0 rgba(4,183,153,0); }
}
/* ---------- HAMBURGER + MOBILE NAV PANEL ---------- */
.nav-toggle{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
.nav-hamburger{
  display:none;
  width: 44px; height: 44px;
  align-items:center; justify-content:center;
  cursor: pointer;
  position: relative;
  margin-left: 4px;
  color: var(--ink);
  border-radius: 999px;
  transition: background-color .25s ease, color .25s ease;
  z-index: 52;
}
.nav-hamburger:hover{ background: rgba(255,255,255,0.04); color: var(--accent); }
.nav-hamburger span{
  position: absolute;
  left: 12px; right: 12px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.6,.05,.2,1), opacity .2s ease, top .35s cubic-bezier(.6,.05,.2,1);
}
.nav-hamburger span:nth-child(1){ top: 16px; }
.nav-hamburger span:nth-child(2){ top: 22px; }
.nav-hamburger span:nth-child(3){ top: 28px; }
.nav-toggle:checked ~ .nav .nav-hamburger span:nth-child(1){ top: 22px; transform: rotate(45deg); }
.nav-toggle:checked ~ .nav .nav-hamburger span:nth-child(2){ opacity: 0; }
.nav-toggle:checked ~ .nav .nav-hamburger span:nth-child(3){ top: 22px; transform: rotate(-45deg); }

.nav-panel{
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 51;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
  display: flex; flex-direction: column;
  padding: 96px var(--gutter) 56px;
  overflow-y: auto;
}
.nav-panel::before{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(4,183,153,0.10), transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(4,183,153,0.06), transparent 60%);
  pointer-events: none;
}
.nav-toggle:checked ~ .nav-panel{ opacity: 1; visibility: visible; pointer-events: auto; }

.nav-panel .np-head{
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: var(--t-mono-s);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--mute);
}
.np-close{
  position: fixed; top: 22px; right: var(--gutter); z-index: 53;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--rule-2);
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--f-mono); font-size: var(--t-ui-l);
  letter-spacing: 0; line-height: 1;
  transition: border-color .25s ease, color .25s ease, transform .25s ease;
}
.np-close:hover{ border-color: var(--accent); color: var(--accent); transform: rotate(90deg); }

.nav-panel-inner{
  position: relative;
  flex: 1;
  display: flex; flex-direction: column;
  gap: 0;
  padding-top: 8px;
}
.nav-panel a.np-link{
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 24px 4px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(34px, 9vw, 64px);
  letter-spacing: -0.035em;
  color: var(--ink);
  transition: color .25s ease, padding-left .35s cubic-bezier(.2,.7,.2,1);
  opacity: 0;
  transform: translateY(14px);
}
.nav-toggle:checked ~ .nav-panel .np-link{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1), color .25s ease, padding-left .35s cubic-bezier(.2,.7,.2,1);
}
.nav-toggle:checked ~ .nav-panel .np-link:nth-child(1){ transition-delay: 0.08s, 0.08s, 0s, 0s; }
.nav-toggle:checked ~ .nav-panel .np-link:nth-child(2){ transition-delay: 0.14s, 0.14s, 0s, 0s; }
.nav-toggle:checked ~ .nav-panel .np-link:nth-child(3){ transition-delay: 0.20s, 0.20s, 0s, 0s; }
.nav-toggle:checked ~ .nav-panel .np-link:nth-child(4){ transition-delay: 0.26s, 0.26s, 0s, 0s; }
.nav-panel a.np-link:hover{ color: var(--accent); padding-left: 14px; }
.nav-panel a.np-link .num{
  font-family: var(--f-mono); font-size: var(--t-mono-m);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mute);
}
.nav-panel a.np-link.current{ color: var(--accent); }
.nav-panel a.np-link.current .num::before{
  content: "• "; color: var(--accent);
}
.nav-panel .np-foot{
  margin-top: auto;
  padding-top: 32px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: var(--t-mono-s);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute);
  position: relative;
}
.nav-panel .np-foot a{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  background: var(--accent);
  color: #000;
  border-radius: 999px;
  font-weight: 500;
}
.nav-panel .np-foot a:hover{ background: var(--ink); color: var(--bg); }

html:has(.nav-toggle:checked){ overflow: hidden; }

/* hamburger through the whole tablet range, not just ≤820 */
@media (max-width: 1024px){
  .nav ul.center-nav{ display:none; }
  .nav-hamburger{ display: inline-flex; }
  .nav-right .nav-cta{ display: none; }
}

/* hide any legacy "← Back to home" link site-wide — covered by nav */
.aw-back,
.case-back{ display: none !important; }

/* ---------- LINKS ---------- */
/* Buttons (incl. the old .link-arrow text link) live in buttons.css:
   .btn + .btn--primary / .btn--secondary / .btn--text */




/* ---------- EYEBROW ---------- */
.eyebrow{
  display:flex; align-items:center; gap: 14px;
  white-space: nowrap;
  font-family: var(--f-mono); font-size: var(--t-label);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute);
}
.eyebrow::before{
  content:""; flex: 0 0 28px; width: 28px; height: 1px; background: var(--ink); display:inline-block;
}

/* ---------- REVEAL ---------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
}
.reveal.in{
  opacity: 1;
  transform: none;
  animation: reveal-in var(--reveal-dur, 1.2s) cubic-bezier(.2,.7,.2,1) backwards;
}
.reveal.d1{ animation-delay: .1s; }
.reveal.d2{ animation-delay: .2s; }
.reveal.d3{ animation-delay: .3s; }
@keyframes reveal-in{
  from{ opacity: 0; transform: translateY(28px); }
  to{ opacity: 1; transform: none; }
}
/* shorter travel for small elements that sit right above animated content */
@keyframes reveal-in-short{
  from{ opacity: 0; transform: translateY(32px); }
  to{ opacity: 1; transform: none; }
}

/* ---------- FOOTER ---------- */
footer{
  padding: 120px var(--gutter) 40px;
  max-width: var(--max);
  margin: 0 auto;
}
footer .lockup{
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(80px, 19vw, 300px);
  line-height: 0.82; letter-spacing: -0.05em;
  color: var(--ink);
  margin-bottom: 32px;
}
.foot-bar{
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  display:flex; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  font-family: var(--f-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--mute);
}
.foot-bar a:hover{ color: var(--accent); }

/* ===========================================================
   PROJECT ARTWORKS — dark-mode placeholders that read as work
   =========================================================== */
.art{ width:100%; height:100%; position:relative; }

/* -- dashboard -- */
.art-dash{
  background: #1A1A19;
  padding: clamp(20px, 3vw, 48px);
  display:grid; grid-template-rows: auto auto 1fr; gap: 18px;
  color: #D9DCE0;
  font-family: var(--f-mono); font-size: 11px;
}
.art-dash .topline{
  display:flex; justify-content:space-between; opacity:.55;
  font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
}
.art-dash .h{
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(34px, 5vw, 88px); letter-spacing: -0.035em; line-height: .92;
  color:#F4F5F6;
}
.art-dash .h .accent{ color: var(--accent); }
.art-dash .grid{ display:grid; grid-template-columns: 2fr 1fr; gap: 18px; min-height: 0; }
.art-dash .card{
  background: #2A2A29; border-radius: 6px; padding: 18px;
  display:flex; flex-direction: column; gap: 12px;
  border: 1px solid #34332F;
}
.art-dash .stat-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; height:100%; }
.art-dash .stat{
  background:#2A2A29; border:1px solid #34332F; border-radius:6px; padding: 14px;
  display:flex; flex-direction: column; justify-content: space-between;
}
.art-dash .stat .v{
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(22px, 2.8vw, 40px); line-height:1; color:#F4F5F6;
  letter-spacing: -0.025em;
}
.art-dash .stat .v .accent{ color: var(--accent); }
.art-dash .stat .k{ opacity:.55; text-transform: uppercase; letter-spacing: 0.1em; font-size: 9px; }
.art-dash .chart{ height: 100%; min-height: 80px; position: relative; flex: 1; }
.art-dash .chart svg{ width:100%; height:100%; }

/* -- phones -- */
.art-phones{
  background: radial-gradient(120% 80% at 50% 30%, #34332F 0%, #1A1A19 70%);
  display:flex; align-items:flex-end; justify-content:center;
  gap: clamp(16px, 3vw, 56px);
  padding: clamp(40px, 6vw, 88px) clamp(16px, 2vw, 32px) 0;
  overflow: hidden;
}
.phone{
  width: 30%;
  aspect-ratio: 9/19;
  background: #141413;
  border-radius: clamp(18px, 2.4vw, 32px);
  padding: clamp(6px, .7vw, 10px);
  box-shadow: 0 30px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
  position: relative;
  transform-origin: bottom center;
}
.phone.left{  transform: rotate(-4deg) translateY(10%); }
.phone.right{ transform: rotate(4deg)  translateY(10%); }
.phone .screen{
  width:100%; height:100%;
  background:#1A1A19;
  border-radius: clamp(14px, 1.8vw, 24px);
  overflow: hidden; position: relative;
  padding: clamp(12px, 1.6vw, 22px);
  display:flex; flex-direction: column; gap: 8px;
}
.phone .notch{
  position:absolute; top: clamp(6px, .7vw, 10px); left: 50%; transform: translateX(-50%);
  width: 28%; height: 4%; background:#000; border-radius: 999px;
}
.phone .h1{
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(11px, 1.6vw, 22px); letter-spacing: -0.02em; line-height: 1.05;
  color:#F4F5F6;
  margin-top: clamp(10px, 1.6vw, 22px);
}
.phone .balance{
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(20px, 3.2vw, 48px); letter-spacing: -0.04em; line-height: 1;
  color:#F4F5F6; margin-top: 6px;
}
.phone .balance .accent{ color: var(--accent); }
.phone .row{
  display:flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono); font-size: clamp(8px, .95vw, 11px);
  color:#8A8A85; padding: clamp(6px, .9vw, 10px) 0;
  border-bottom: 1px solid #34332F;
}
.phone .row .nm, .phone .row .val{
  color:#ECECEE; font-family: var(--f-display); font-weight: 500; letter-spacing: -0.01em;
}
.phone .pill{
  margin-top: auto; align-self: stretch;
  background:var(--accent); color:var(--accent-ink);
  font-family: var(--f-mono); font-size: clamp(8px, .95vw, 11px);
  letter-spacing:0.08em; text-transform: uppercase;
  padding: clamp(8px,1.1vw,12px); text-align:center; border-radius: 999px;
  font-weight: 500;
}
.phone.right .pill{ background:#34332F; color:#ECECEE; }

/* -- brand specimen -- */
.art-brand{
  background: #1A1A19;
  padding: clamp(24px, 3.5vw, 56px);
  display:grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(16px, 2.4vw, 36px);
  font-family: var(--f-mono); font-size: 10px;
}
.art-brand .specimen{
  background: #2A2A29; color:#F4F5F6;
  border-radius: 4px;
  padding: clamp(20px, 3vw, 48px);
  display:flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
  border: 1px solid #34332F;
}
.art-brand .specimen .big{
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(70px, 12vw, 220px);
  line-height: .82; letter-spacing: -0.05em;
  color:#F4F5F6;
}
.art-brand .specimen .big .a{ color: var(--accent); }
.art-brand .specimen .lbl{
  opacity:.55; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 10px; color:#8A8A85;
}
.art-brand .right{ display:grid; grid-template-rows: 1fr 1fr; gap: clamp(16px, 2.4vw, 36px); }
.art-brand .swatches{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.art-brand .sw{ border-radius: 2px; }
.art-brand .logo-grid{
  background:#34332F; border-radius: 4px;
  display:grid; grid-template-columns: 1fr 1fr; gap:1px;
  padding: 1px; overflow:hidden;
}
.art-brand .logo-grid > div{
  background:#2A2A29;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(10px,2vw,24px);
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(18px, 2.8vw, 40px); letter-spacing: -0.05em;
  color: #F4F5F6;
}
.art-brand .logo-grid .a{ color: var(--accent); }

/* -- wearable + companion -- */
.art-watch{
  background: radial-gradient(120% 100% at 50% 0%, #34332F 0%, #1A1A19 70%);
  display:flex; align-items:center; justify-content:center;
  padding: clamp(24px, 4vw, 72px);
  gap: clamp(20px, 4vw, 64px);
}
.art-watch .watch{
  width: 34%; max-width: 280px;
  aspect-ratio: 1/1.18;
  background:#141413; border-radius: 26%;
  padding: clamp(8px, 1.2vw, 16px);
  position: relative;
  box-shadow: 0 30px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
}
.art-watch .watch .face{
  width:100%; height:100%; background:#1A1A19;
  border-radius: 19%;
  display:flex; flex-direction:column;
  padding: clamp(10px,1.6vw,20px); gap: 6px;
  position: relative; overflow:hidden;
}
.art-watch .ring{
  position:absolute; inset: 14%;
  border-radius: 50%;
  background: conic-gradient(from 220deg, var(--accent) 0deg 230deg, #34332F 230deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%);
          mask: radial-gradient(circle, transparent 56%, #000 57%);
}
.art-watch .v{
  position:relative; z-index:2;
  font-family: var(--f-display); font-weight:500;
  font-size: clamp(22px, 3.2vw, 48px); letter-spacing:-0.04em; color:#F4F5F6; line-height:1;
  margin: auto auto 4px;
}
.art-watch .v .accent{ color: var(--accent); }
.art-watch .k{
  position:relative; z-index:2;
  font-family: var(--f-mono); font-size: clamp(8px,.95vw,11px); letter-spacing: 0.1em;
  text-transform: uppercase; color: #8A8A85; text-align:center;
}
.art-watch .companion{
  width: 22%; aspect-ratio: 9/19;
  background:#141413; border-radius: clamp(14px, 1.8vw, 22px);
  padding: clamp(4px,.7vw,8px); display:flex;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.art-watch .companion .screen{
  flex:1; background:#1A1A19; border-radius: clamp(10px,1.4vw,17px);
  padding: clamp(12px,1.8vw,22px);
  display:flex; flex-direction:column; gap: clamp(8px,1.2vw,14px);
}
.art-watch .companion .ttl{
  font-family: var(--f-display); font-weight:500; color:#F4F5F6;
  font-size: clamp(12px,1.8vw,22px); letter-spacing:-0.02em; line-height:1.05;
}
.art-watch .companion .ttl .a{ color: var(--accent); }
.art-watch .companion .bar{
  height: clamp(8px,1.2vw,14px); background:#34332F; border-radius: 999px;
  overflow:hidden; position: relative;
}
.art-watch .companion .bar::after{
  content:""; position:absolute; inset:0; right: 38%; background: var(--accent); border-radius:999px;
}
.art-watch .companion .grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top:auto; }
.art-watch .companion .cell{ background:#34332F; border-radius: 4px; aspect-ratio: 1; }

/* -- e-commerce -- */
.art-shop{
  background:#1A1A19;
  display:grid; grid-template-columns: 1fr 1fr; gap: 0;
  align-items: stretch;
}
.art-shop .product{
  background: radial-gradient(80% 100% at 50% 60%, #34332F 0%, #1A1A19 80%);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.art-shop .product::before{
  content:""; width: 50%; height:65%;
  background:
    radial-gradient(ellipse at 30% 30%, #1F6A5C 0%, #0E3F36 55%, #062420 100%);
  border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
  box-shadow: 0 30px 60px rgba(0,0,0,.55), inset 0 -20px 40px rgba(0,0,0,.3);
}
.art-shop .product::after{
  content:""; position:absolute; left: 50%; top:50%;
  width: 22%; height: 6%; transform: translate(-50%, 130%);
  background: rgba(0,0,0,.4); border-radius: 50%;
  filter: blur(10px);
}
.art-shop .panel{
  background:#2A2A29; color:#F4F5F6;
  padding: clamp(22px, 3.4vw, 56px);
  display:flex; flex-direction:column; gap: clamp(10px,1.5vw,18px);
  border-left: 1px solid #34332F;
}
.art-shop .panel .lbl{
  font-family: var(--f-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--mute);
}
.art-shop .panel .ttl{
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(24px, 3.6vw, 64px); letter-spacing: -0.035em; line-height: .95;
  color:#F4F5F6; max-width: 16ch;
}
.art-shop .panel .ttl .a{ color: var(--accent); }
.art-shop .panel .price{
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(18px, 2.6vw, 36px); letter-spacing: -0.02em;
  margin-top: auto;
}
.art-shop .panel .opts{ display:flex; gap: 6px; flex-wrap: wrap; }
.art-shop .panel .opt{
  font-family: var(--f-mono); font-size: 10px;
  border:1px solid #45443F; padding: 6px 12px; border-radius: 999px;
  color:#8A8A85;
}
.art-shop .panel .opt.on{ background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.art-shop .panel .cta{
  margin-top: 6px; background: var(--accent); color: var(--accent-ink);
  font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 10px; padding: clamp(10px,1.4vw,16px); text-align:center;
  border-radius: 999px; font-weight: 500;
}

/* -- portrait -- */
.art-portrait{
  width:100%; height:100%; position: relative; overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 35%, #1F6A5C 0%, #0E3F36 50%, #0B1F1B 100%);
}
.art-portrait::after{
  content:""; position:absolute; left:50%; bottom: -18%;
  width: 76%; aspect-ratio: 3/4; transform: translateX(-50%);
  background:
    radial-gradient(ellipse 40% 28% at 50% 24%, #C8D8D2 0%, #5E8078 55%, transparent 65%),
    radial-gradient(ellipse 55% 42% at 50% 72%, #1F3A33 0%, #0C1C18 70%, transparent 75%);
  filter: contrast(1.05) saturate(.85);
  mix-blend-mode: screen;
}
.art-portrait .label{
  position:absolute; left: 24px; bottom: 22px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color:#C8D8D2;
}
.art-portrait .label::before{
  content:""; display:inline-block; width:18px; height:1px;
  background:#C8D8D2; margin-right: 8px; vertical-align: 3px;
}

/* ===========================================================
   FULL-BLEED CASE HERO — 70vh image at the top of a case study
   =========================================================== */
.case-fullbleed{
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 420px;
  overflow: hidden;
  background: var(--bg-sub);
}
.case-fullbleed image-slot.cover-slot{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 1 !important; /* always visible as a drop target */
  z-index: 1;
}
.case-fullbleed::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height: 30%;
  background: linear-gradient(180deg, rgba(0,0,0,.4), transparent);
  pointer-events: none;
  z-index: 2;
}

/* ===========================================================
   COVER IMAGE UPLOAD — overlay an <image-slot> over any artwork
   Drop a photo onto a project card, all-work thumbnail, or case
   study image to replace the placeholder.
   =========================================================== */
/* containers must establish positioning so the absolutely-positioned
   cover-slot is bounded — without this, an empty slot's drop target
   stretches up to body and absorbs clicks everywhere on the page. */
.case-cover .frame,
.case-img,
.aw-card .frame{
  position: relative;
}

image-slot.cover-slot{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2; display: block;
}
/* empty state — invisible by default, fades in on container hover.
   pointer-events: none so the invisible drop target doesn't swallow
   clicks on the link wrapping the card. */
image-slot.cover-slot:not([data-filled]){
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.proj:hover image-slot.cover-slot:not([data-filled]),
.aw-card:hover image-slot.cover-slot:not([data-filled]),
.case-cover .frame:hover image-slot.cover-slot:not([data-filled]),
.case-img:hover image-slot.cover-slot:not([data-filled]),
image-slot.cover-slot[data-over]{
  opacity: 1;
  pointer-events: auto;
}
/* filled — hide the artwork below so the uploaded photo takes over */
.proj-frame:has(image-slot.cover-slot[data-filled]) > .art{ display: none; }
.aw-card .frame:has(image-slot.cover-slot[data-filled]) > .thumb{ display: none; }
.case-cover .frame:has(image-slot.cover-slot[data-filled]) > *:not(image-slot){ display: none; }
.case-img:has(image-slot.cover-slot[data-filled]) > *:not(image-slot){ display: none; }

/* ===========================================================
   TWEAKS PANEL
   =========================================================== */
.tweaks{
  position: fixed; right: 20px; bottom: 20px; z-index: 100;
  background: #2A2A29; color: #F2EEE5; border-radius: 14px;
  padding: 18px; width: 260px;
  font-family: var(--f-mono); font-size: var(--t-mono-s);
  display: none;
  border: 1px solid #34332F;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.tweaks.on{ display: block; }
.tweaks .head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 14px; }
.tweaks .head .t{ text-transform: uppercase; letter-spacing: 0.1em; }
.tweaks .head button{ color: #8A8A85; }
.tweaks .grp{ margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #34332F; }
.tweaks .grp:last-child{ border:0; padding-bottom:0; margin-bottom:0; }
.tweaks .lbl{ text-transform: uppercase; letter-spacing: 0.1em; color: #8A8A85; margin-bottom: 8px; }
.tweaks .swatches{ display:flex; gap: 8px; }
.tweaks .sw{ width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor:pointer; }
.tweaks .sw.on{ border-color: #F4F5F6; }
.tweaks .seg{ display:flex; background: #1A1A19; border-radius: 8px; padding: 3px; gap: 3px; }
.tweaks .seg button{ flex:1; padding: 7px 8px; border-radius: 6px; color: #8A8A85; text-transform: uppercase; letter-spacing: 0.06em; }
.tweaks .seg button.on{ background: #F4F5F6; color: #212120; }

/* drag-to-reorder project list */
.tweaks .reorder{ display:flex; flex-direction:column; gap:6px; max-height:54vh; overflow-y:auto; margin:0 -4px; padding:0 4px; }
.tweaks .ro-row{ display:flex; align-items:center; gap:10px; padding:8px 9px; background:#1A1A19; border-radius:8px; cursor:grab; user-select:none; border:1px solid transparent; transition:border-color .12s ease, opacity .12s ease; }
.tweaks .ro-row:active{ cursor:grabbing; }
.tweaks .ro-row.dragging{ opacity:.4; }
.tweaks .ro-row.over{ border-color: var(--accent); }
.tweaks .ro-row .grip{ color:#5E5E5A; font-size: var(--t-ui-xs); line-height:.7; letter-spacing:1px; }
.tweaks .ro-row .ro-num{ color:#8A8A85; font-variant-numeric:tabular-nums; min-width:16px; }
.tweaks .ro-row .ro-name{ flex:1; color:#F2EEE5; text-transform:none; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tweaks .ro-hint{ color:#6A6A66; margin-top:10px; text-transform:none; letter-spacing:0; line-height:1.45; }
.tweaks .ro-reset{ margin-top:10px; width:100%; padding:7px 8px; border-radius:6px; background:#1A1A19; color:#8A8A85; text-transform:uppercase; letter-spacing:.06em; cursor:pointer; }
.tweaks .ro-reset:hover{ color:#F2EEE5; }

/* range slider for tweak controls */
.tweaks .slider-row{
  display: flex; align-items: center; gap: 12px;
}
.tweaks input[type="range"]{
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 4px; background: #34332F; border-radius: 999px;
  outline: none; cursor: pointer;
}
.tweaks input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 0;
  box-shadow: 0 0 0 2px #2A2A29;
  cursor: pointer;
}
.tweaks input[type="range"]::-moz-range-thumb{
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 0;
  box-shadow: 0 0 0 2px #2A2A29;
  cursor: pointer;
}
.tweaks .slider-val{
  width: 40px; text-align: right;
  font-variant-numeric: tabular-nums;
  color: #ECECEE;
}

/* range slider */
.tweaks .slider-row{
  display:flex; align-items:center; gap: 12px;
}
.tweaks input[type="range"]{
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 4px; background: #34332F; border-radius: 999px;
  outline: none; cursor: pointer;
}
.tweaks input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 0;
  box-shadow: 0 0 0 2px #2A2A29;
  cursor: pointer;
}
.tweaks input[type="range"]::-moz-range-thumb{
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 0;
  box-shadow: 0 0 0 2px #2A2A29;
  cursor: pointer;
}
.tweaks .slider-val{
  width: 36px; text-align: right;
  font-variant-numeric: tabular-nums;
  color: #ECECEE;
}

/* ===== Case-study responsive tightening =====
   Cuts the cavernous gaps between cover image, captions,
   and the body sections on small screens.
   Targets per-page styles defined in case-*.html files. */

/* Country flag beside the Region value in case-study meta blocks. */
.case-meta .v .flag{
  display:inline-block; height:0.92em; width:auto; vertical-align:-0.12em;
  margin-right:0.45em; border-radius:2px; object-fit:cover;
}

@media (max-width: 760px){
  .case-hero{ padding-top: 64px; padding-bottom: 24px; }
  .case-hero .lead{ margin-top: 32px; }
  .case-meta{ margin-top: 48px; }

  .case-cover{ margin: 32px 0 8px; }
  .case-cover .cap{ margin-top: 10px; }

  .case-body{ padding-top: 32px; row-gap: 56px; gap: 20px; }

  /* figures / image slots that sit inside a .sec or row */
  .sec image-slot,
  .sec .frame,
  .row2 image-slot,
  .case-pair image-slot{ margin-bottom: 0; }

  /* compact spacing for the "next project" footer */
  .next{ margin-top: 80px; padding: 56px var(--gutter); }
  footer{ padding: 128px var(--gutter) 32px; }
}

/* ===========================================================
   SITE THEME — light/dark toggle + frosted cursor (shared)
   Paired with site-theme.js. Variables flip on html[data-theme="light"];
   the Tweaks palette writes inline vars, so light-mode vars use !important.
   =========================================================== */
html[data-theme="light"]{
  --bg:        #F5F4EF !important;
  --bg-sub:    #ECEAE2 !important;
  --bg-elev:   #FFFFFF !important;
  --ink:       #1B1B19;
  --ink-2:     #44443F !important;
  --mute:      #7C7B72 !important;
  --mute-2:    #A6A59B;
  --rule:      #DEDBD1 !important;
  --rule-2:    #CDCABF !important;
  --accent:    #009F89 !important;   /* primary — light mode */
  --accent-ink:#FFFFFF;
  --noise-opacity: 0.045;
}

/* client logos are near-white artwork — invert flips them dark on paper */
html[data-theme="light"] .clients-marquee .logo{ filter: invert(1); opacity: .8; }
html[data-theme="light"] .clients-marquee .logo:hover{ opacity: 1; }
/* hardcoded (non-variable) colors that need a light counterpart */
html[data-theme="light"] .nav{
  background: linear-gradient(180deg, rgba(245,244,239,.92), rgba(245,244,239,.45) 70%, transparent);
}
html[data-theme="light"] .proj:hover,
html[data-theme="light"] .srv:hover{ background-color:#E7E4DA; }
html[data-theme="light"] .nav-hamburger:hover{ background: rgba(0,0,0,.05); }
html[data-theme="light"] .hero-portrait image-slot{
  box-shadow: 0 16px 32px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.12);
}

/* ---------- THEME TOGGLE BUTTON (in nav) ---------- */
.theme-toggle{
  position: relative;
  width:38px; height:38px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--rule-2); border-radius:999px;
  color:var(--ink); background:transparent;
  transition:border-color .25s ease, color .25s ease, transform .25s ease;
}
.theme-toggle:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
/* current-mode tooltip */
.theme-toggle::after{
  content: attr(data-label);
  position:absolute; top:calc(100% + 10px); left:50%;
  transform: translateX(-50%) translateY(-4px);
  padding:6px 11px;
  background: var(--bg-elev); color: var(--ink);
  border:1px solid var(--rule-2); border-radius:999px;
  font-family: var(--f-mono); font-size: var(--t-mono-xs);
  letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap;
  opacity:0; pointer-events:none; z-index:60;
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
  transition: opacity .2s ease, transform .2s ease;
}
/* tooltip is a pointer-hover affordance only — on touch, :hover sticks after
   a tap until you press elsewhere, so suppress it there entirely */
@media (hover: hover) and (pointer: fine){
  .theme-toggle:hover::after{ opacity:1; transform: translateX(-50%) translateY(0); }
}
.theme-toggle .ti{
  width:15px; height:15px; border-radius:50%;
  box-shadow: inset -4px -3px 0 0 currentColor;   /* crescent moon — dark mode */
  transition: box-shadow .3s ease, width .3s ease, height .3s ease, background-color .3s ease;
}
html[data-theme="light"] .theme-toggle .ti{
  width:11px; height:11px; box-shadow:none; background: currentColor;  /* sun disc — light mode */
}

/* ---------- FROSTED CURSOR ---------- */
#cursor{
  position:fixed; top:0; left:0; width:24px; height:24px;
  border-radius:999px;
  background: rgba(33,33,32,.30);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 4px 14px rgba(0,0,0,.28), inset 0 0 0 .5px rgba(255,255,255,.06);
  pointer-events:none; z-index:9000;
  opacity:0; display:none;
  will-change: transform;
  backface-visibility: hidden;
  transition: opacity .2s ease,
              width .2s cubic-bezier(.2,.7,.2,1),
              height .2s cubic-bezier(.2,.7,.2,1),
              background-color .25s ease, border-color .25s ease;
}
html.cursor-on #cursor{ display:block; }
html.cursor-on,
html.cursor-on body,
html.cursor-on *{ cursor:none !important; }
#cursor.big{
  width:46px; height:46px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
/* case-study "View Case Study" state — morphs the frosted disc into a pill */
#cursor .cur-label{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  white-space:nowrap;
  font-family: var(--f-mono); font-weight:500;
  font-size: var(--t-mono-s); letter-spacing:0.1em; text-transform:uppercase;
  color:#fff; text-shadow: 0 1px 8px rgba(0,0,0,.4);
  opacity:0; transform: scale(.92);
  transition: opacity .14s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
#cursor .cur-label .ar{ font-size: var(--t-ui-xs); line-height:1; }
#cursor.view{
  width:170px; height:42px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 12px 30px rgba(0,0,0,.30);
}
#cursor.view .cur-label{ opacity:1; transform: scale(1); }
/* light mode: reversed — black text */
html[data-theme="light"] #cursor.view{
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}
html[data-theme="light"] #cursor.view .cur-label{
  color:#111; text-shadow: 0 1px 8px rgba(255,255,255,.45);
}
html[data-theme="light"] #cursor{
  background: rgba(245,244,239,.45);
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
html[data-theme="light"] #cursor.big{
  background: rgba(0,159,137,.16);
  border-color: rgba(0,159,137,.5);
}
@media (prefers-reduced-motion: reduce){
  #cursor{ transition: opacity .25s ease; }
}

/* Mobile tap targets — 44px minimum hit area on small text links.
   Padding only; type size and position are unchanged. */
@media (max-width: 760px){
  .foot-bar a,
  .hero-foot a.scroll,
  .direct a,
  .about-text .btn--text,
  .ab-music-socials .links a{ display:inline-flex; align-items:center; min-height:44px; }
  .foot-bar{ padding-top: 12px; align-items: center; }
}

/* ---------- image protection (see protect.js) ---------- */
img, picture, canvas, video, image-slot, .cover-slot{ -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; }

/* ==========================================================================
   TOUCH: kill sticky-hover movement.
   On a touch screen the first tap paints :hover and the element MOVES
   (transform / translate / padding), which pulls it out from under your finger
   and swallows the tap — you have to press twice. Colour-only hovers are
   harmless and left alone; anything that shifts geometry is neutralised here
   and replaced with a real :active press state.
   !important is needed because several of these rules live in per-page
   <style> blocks that come after this file.
   ========================================================================== */
@media (hover: none){
  .proj:hover,
  .srv:hover,
  .aw-card:hover,
  .theme-toggle:hover,
  .np-close:hover,
  .navbtn:hover,
  .contact .email-link:hover,
  .ct-block .email:hover,
  .proj:hover .proj-frame > *{
    transform: none !important;
    translate: none !important;
  }
  .nav-panel a.np-link:hover{ padding-left: 0 !important; }

  /* press feedback that fires on the FIRST touch */
  .proj:active,
  .srv:active,
  .aw-card:active{ transform: scale(.995) !important; }
  .nav-panel a.np-link:active,
  .np-close:active,
  .theme-toggle:active,
  .contact .email-link:active,
  .ct-block .email:active{ opacity: .75; }
}