/* ═══════════════════════════════════════════════════════════════
   enhance.css — studio lighting, hero treatment, custom cursor.
   Loaded after tailwind.css so it can override the compiled theme.
   Palette matches the UK ads landing page:
     ground #0C0C0D · vermilion #FF5123 · gold #E8A62E
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ember:#FF5123;
  --ember-2:#F5391B;
  --gold:#E8A62E;
  --ink:#0C0C0D;
  --line:rgba(255,255,255,.10);
  --g-cta:linear-gradient(135deg,#FF9153 0%,#FF5123 58%,#F5391B 100%);
  --g-text:linear-gradient(120deg,#FFB877,#FF5123 48%,#F5391B);
  --display:"Bricolage Grotesque",Georgia,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

/* the old serif display face is gone — retune the new one */
.font-display{font-family:var(--display)!important;letter-spacing:-.03em;font-weight:700}
.font-mono-tech{font-family:var(--mono)!important}
h1,h2,h3{text-wrap:balance}

/* ── gradient text ── */
.gt{background:var(--g-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ═══════════ LIGHTING ═══════════ */
.lit{position:relative;overflow-x:clip;overflow-y:visible;isolation:isolate}
.lit > *:not(.lights):not(.vig):not(.gridlines):not(.absolute){position:relative;z-index:2}
/* Sections here run 600-3300px tall and overflow-y must stay visible (sticky),
   so the rig is pinned to the section box and capped in height — otherwise the
   glow bleeds into the next section and washes out over huge areas. */
.lights{position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none;
  height:min(1100px,100%);overflow:hidden}
/* bottom-anchored rig for the floor glow */
.lights.lt-e{top:auto;bottom:0}
/* tall sections get a second, lower pool of light so the middle is not flat */
.lit::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:min(620px,55%);z-index:0;pointer-events:none;
  background:radial-gradient(760px 420px at 78% 118%,rgba(255,81,35,.13),transparent 68%);
}
.lights::before,.lights::after{content:"";position:absolute;inset:0}
.vig{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 105% at 62% 38%,transparent 34%,rgba(0,0,0,.42) 78%,rgba(0,0,0,.72) 100%);
}
.edge-lit::before{
  content:"";position:absolute;top:0;left:12%;right:12%;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(255,81,35,.55),rgba(232,166,46,.4),transparent);
}

/* HERO — big studio backlight behind the portrait */
.lt-hero::before{
  background:
    radial-gradient(1250px 980px at 84% 12%,
      rgba(255,146,72,.58) 0%, rgba(255,95,44,.46) 20%,
      rgba(228,60,26,.28) 40%, rgba(150,34,14,.12) 58%, transparent 74%),
    radial-gradient(760px 600px at 99% 56%, rgba(245,57,27,.30), transparent 64%);
  animation:drift 22s ease-in-out infinite alternate;
}
.lt-hero::after{
  background:
    conic-gradient(from 198deg at 74% 2%, transparent 0deg, rgba(255,150,80,.20) 26deg, transparent 56deg),
    radial-gradient(620px 460px at 2% 78%, rgba(232,166,46,.14), transparent 64%);
}
.lt-a::before{background:radial-gradient(920px 620px at 50% -16%,rgba(255,190,90,.30) 0%,rgba(232,166,46,.20) 26%,transparent 72%)}
.lt-a::after{background:radial-gradient(640px 460px at 92% 100%,rgba(255,81,35,.18),transparent 64%)}
.lt-b::before{background:radial-gradient(900px 660px at 4% 106%,rgba(255,120,58,.38) 0%,rgba(255,81,35,.24) 24%,transparent 72%)}
.lt-b::after{background:radial-gradient(700px 520px at 96% -10%,rgba(232,166,46,.22),transparent 64%)}
.lt-c::before{background:radial-gradient(560px 820px at -8% 46%,rgba(255,110,52,.34) 0%,rgba(255,81,35,.20) 28%,transparent 66%)}
.lt-c::after{background:radial-gradient(560px 820px at 108% 54%,rgba(255,190,90,.26) 0%,rgba(232,166,46,.16) 28%,transparent 66%)}
.lt-d::before{background:radial-gradient(980px 720px at 50% -22%,rgba(255,132,66,.40) 0%,rgba(255,81,35,.24) 24%,transparent 74%)}
.lt-d::after{
  background:conic-gradient(from 158deg at 50% -4%,transparent 0deg,rgba(232,166,46,.18) 32deg,transparent 66deg);
  animation:drift 28s ease-in-out infinite alternate-reverse;
}
.lt-e::before{background:radial-gradient(1150px 420px at 50% 110%,rgba(255,110,52,.30) 0%,rgba(255,81,35,.18) 28%,transparent 70%)}
.lt-e::after{background:radial-gradient(660px 400px at 8% -12%,rgba(232,166,46,.16),transparent 64%)}

@keyframes drift{
  from{transform:translate3d(-3%,-2%,0) scale(1)}
  to  {transform:translate3d(3%,2.5%,0) scale(1.09)}
}

/* faint grid, masked to the centre */
.gridlines{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(70% 62% at 50% 34%,#000,transparent);
  mask-image:radial-gradient(70% 62% at 50% 34%,#000,transparent);
}

/* ═══════════ HERO ═══════════ */
.hero-pill{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);background:rgba(232,166,46,.11);
  border:1px solid rgba(232,166,46,.34);padding:8px 16px;border-radius:999px;
}
.hero-pill i{width:6px;height:6px;border-radius:99px;background:var(--gold);flex:none;animation:blip 2.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(232,166,46,.5)}50%{opacity:.65;box-shadow:0 0 0 5px rgba(232,166,46,0)}}

.hero-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--g-cta);color:#1A0800;font-weight:700;font-size:15.5px;
  padding:16px 30px;border-radius:999px;position:relative;overflow:hidden;
  box-shadow:0 14px 36px -12px rgba(255,81,35,.75),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s ease,box-shadow .22s ease,filter .2s ease;
}
.hero-cta:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 20px 46px -14px rgba(255,81,35,.85)}
.hero-cta::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s ease;
}
.hero-cta:hover::after{transform:translateX(120%)}
.hero-ghost{
  display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:#fff;
  padding:16px 26px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);backdrop-filter:blur(10px);transition:.2s;
}
.hero-ghost:hover{border-color:rgba(255,81,35,.5);background:rgba(255,255,255,.07)}

/* portrait */
.pf-wrap{position:relative;display:grid;place-items:center;padding:8px 0}
.pf-glow{position:absolute;width:88%;aspect-ratio:1;border-radius:99px;
  background:radial-gradient(circle,rgba(255,81,35,.34),rgba(245,57,27,.06) 58%,transparent 74%);filter:blur(8px)}
.pf-ring{position:absolute;width:92%;aspect-ratio:1;border-radius:99px;border:1px dashed rgba(255,81,35,.34);animation:spin 46s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pf-img{
  position:relative;width:100%;max-width:400px;height:auto;aspect-ratio:4/5;
  object-fit:cover;object-position:50% 16%;border-radius:24px;border:1px solid var(--line);
  -webkit-mask-image:linear-gradient(180deg,#000 66%,rgba(0,0,0,.6) 86%,transparent 99%);
  mask-image:linear-gradient(180deg,#000 66%,rgba(0,0,0,.6) 86%,transparent 99%);
  will-change:transform;
}
.pf-coords{
  position:absolute;left:8%;right:8%;bottom:6%;z-index:3;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.pf-chip{
  position:absolute;z-index:4;background:rgba(20,20,22,.88);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:13px;padding:10px 14px;
  box-shadow:0 22px 46px -24px rgba(0,0,0,.95);
}
.pf-chip .k{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.6);white-space:nowrap}
.pf-chip .v{display:block;font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.03em;margin-top:2px}
.pf-chip.c1{top:4%;left:-6%;animation:bob 7.4s ease-in-out infinite}
.pf-chip.c2{bottom:26%;right:-7%;animation:bob 6.2s ease-in-out .7s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* stat cards */
.statgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:72px}
.statcard{
  background:linear-gradient(160deg,rgba(32,31,33,.86),rgba(19,19,21,.93));
  border:1px solid var(--line);border-radius:18px;padding:24px 20px;position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.statcard::before{content:"";position:absolute;top:-40%;right:-20%;width:150px;height:150px;border-radius:99px;
  background:radial-gradient(circle,rgba(255,81,35,.16),transparent 68%)}
.statcard .v{font-family:var(--display);font-size:clamp(30px,3.6vw,42px);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.statcard .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.66);margin-top:12px;line-height:1.5}

@media (max-width:1024px){
  .statgrid{grid-template-columns:repeat(3,1fr);margin-top:56px}
  .pf-wrap{max-width:380px;margin:0 auto}
}
@media (max-width:680px){
  .statgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .statgrid > :last-child{grid-column:span 2}
  .pf-chip.c1{left:-2%} .pf-chip.c2{right:-2%}
  .pf-chip .v{font-size:17px}
}

/* ═══════════ CUSTOM CURSOR ═══════════ */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:99px;opacity:0;transition:opacity .3s;will-change:transform}
.cur-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:var(--ember);box-shadow:0 0 12px rgba(255,81,35,.9),0 0 30px rgba(255,81,35,.45)}
.cur-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(255,81,35,.55);
  transition:opacity .3s,width .28s cubic-bezier(.2,.9,.3,1),height .28s cubic-bezier(.2,.9,.3,1),margin .28s cubic-bezier(.2,.9,.3,1),background .28s,border-color .28s}
body.cur-on .cur-dot,body.cur-on .cur-ring{opacity:1}
body.cur-on,body.cur-on a,body.cur-on button,body.cur-on summary,body.cur-on .chip{cursor:none}
body.cur-hot .cur-ring{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(255,81,35,.10);border-color:rgba(255,81,35,.85)}
body.cur-hot .cur-dot{opacity:.35}
body.cur-press .cur-ring{width:26px;height:26px;margin:-13px 0 0 -13px;background:rgba(255,81,35,.2)}
body.cur-text .cur-dot,body.cur-text .cur-ring{opacity:0}
body.cur-text,body.cur-text input,body.cur-text select,body.cur-text textarea{cursor:auto}

/* ═══════════ SURFACES — opaque so the glow can't wash out text ═══════════ */
.case-card,.skill-pill,.chip{backdrop-filter:blur(10px)}
.case-card{background:rgba(24,24,26,.9)!important}
.bg-ink-soft{background-color:rgba(26,26,29,.9)!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .cur-dot,.cur-ring{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   Utilities missing from the purged tailwind.css build.
   tailwind.css was compiled against the ORIGINAL markup, so any
   class introduced afterwards has no rule and silently does nothing.
   These are the ones the redesign needs.
   ═══════════════════════════════════════════════════════════════ */
.font-semibold{font-weight:600}
@media (min-width:1024px){
  .lg\:col-span-7{grid-column:span 7/span 7}
}

/* ═══════════════════════════════════════════════════════════════
   CASE STUDY MODAL — redesigned
   Custom classes, not Tailwind utilities: the compiled build is
   purged, so any new utility would silently do nothing.
   ═══════════════════════════════════════════════════════════════ */
#case-modal.open .modal-panel{transform:none;opacity:1}
.modal-panel{
  transform:translateY(18px) scale(.985);opacity:0;
  transition:transform .34s cubic-bezier(.2,.9,.3,1),opacity .28s ease;
  background:#111113!important;border-color:rgba(255,255,255,.12)!important;
}
#modal-backdrop{background:rgba(6,6,7,.86)!important}

/* sticky bar */
.mdl-bar{
  position:sticky;top:0;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 20px;background:rgba(17,17,19,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.10);border-radius:16px 16px 0 0;
}
.mdl-nav{display:flex;align-items:center;gap:8px}
.mdl-btn{
  height:34px;width:34px;border-radius:99px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);color:#C7C3BC;display:flex;align-items:center;justify-content:center;
  font-size:15px;transition:.18s;cursor:pointer;
}
.mdl-btn:hover{color:#fff;border-color:rgba(255,81,35,.6);background:rgba(255,81,35,.12)}
.mdl-count{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#C7C3BC;white-space:nowrap}
.mdl-count b{color:var(--ember);font-weight:600}

/* lit header */
.mdl-head{position:relative;overflow:hidden;padding:34px 30px 28px;border-bottom:1px solid rgba(255,255,255,.08)}
.mdl-head::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(620px 380px at 88% -30%,rgba(255,146,72,.34),transparent 66%),
    radial-gradient(420px 300px at 4% 120%,rgba(232,166,46,.14),transparent 64%);
}
.mdl-head > *{position:relative;z-index:2}
.mdl-id{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.mdl-initials{
  height:52px;width:52px;border-radius:99px;flex:none;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:18px;color:var(--ember);
  background:rgba(255,81,35,.12);border:1px solid rgba(255,81,35,.36);
}
.mdl-meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.mdl-brand{font-family:var(--display);font-size:clamp(26px,4.4vw,38px);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-top:10px}
.mdl-when{font-family:var(--mono);font-size:12px;color:#C7C3BC;margin-top:8px}
.mdl-chans{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.mdl-chan{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#E9E7E3;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);padding:7px 13px;border-radius:99px;
}

/* metrics — the payoff, surfaced high */
.mdl-metrics{display:grid;gap:10px;padding:24px 30px;border-bottom:1px solid rgba(255,255,255,.08)}
.mdl-metrics.m1{grid-template-columns:1fr}
.mdl-metrics.m2{grid-template-columns:repeat(2,1fr)}
.mdl-metrics.m3{grid-template-columns:repeat(3,1fr)}
.mdl-metrics.m4{grid-template-columns:repeat(4,1fr)}
.mdl-metric{
  background:linear-gradient(160deg,rgba(34,33,36,.9),rgba(20,20,22,.94));
  border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px 16px;text-align:center;
}
.mdl-metric .v{
  font-family:var(--display);font-size:clamp(22px,3.4vw,30px);font-weight:800;letter-spacing:-.04em;line-height:1;
  background:var(--g-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.mdl-metric .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#C7C3BC;margin-top:9px;line-height:1.45}

/* the story, as a numbered flow */
.mdl-story{padding:30px}
.mdl-step{position:relative;padding-left:52px;padding-bottom:28px}
.mdl-step:last-child{padding-bottom:0}
.mdl-step::before{
  content:attr(data-n);position:absolute;left:0;top:0;
  height:34px;width:34px;border-radius:11px;display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:600;color:#1A0800;background:var(--g-cta);
  box-shadow:0 8px 20px -8px rgba(255,81,35,.8);
}
.mdl-step:not(:last-child)::after{
  content:"";position:absolute;left:17px;top:40px;bottom:6px;width:1px;
  background:linear-gradient(180deg,rgba(255,81,35,.42),rgba(255,255,255,.06));
}
.mdl-step h4{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ember);margin:8px 0 10px;font-weight:600;
}
.mdl-step p{color:#E9E7E3;line-height:1.7;font-size:15.5px}
.mdl-list{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.mdl-list li{position:relative;padding-left:24px;color:#E9E7E3;line-height:1.65;font-size:15.5px}
.mdl-list li::before{
  content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:2px;
  background:var(--gold);transform:rotate(45deg);
}

/* footer */
.mdl-foot{padding:0 30px 30px}
.mdl-note{
  display:flex;gap:12px;align-items:flex-start;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);border-radius:14px;padding:16px 18px;
}
.mdl-note span:first-child{color:var(--gold);flex:none;font-size:15px;line-height:1.4}
.mdl-note p{font-size:13.5px;color:#C7C3BC;line-height:1.65}
.mdl-cta{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  background:var(--g-cta);color:#1A0800;font-weight:700;font-size:15px;
  padding:15px 28px;border-radius:999px;position:relative;overflow:hidden;
  box-shadow:0 14px 34px -12px rgba(255,81,35,.7);transition:transform .18s ease,filter .2s ease;
}
.mdl-cta:hover{transform:translateY(-2px);filter:brightness(1.06)}
.mdl-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:#8E8A84;margin-top:16px}
.mdl-hint kbd{
  font-family:var(--mono);border:1px solid rgba(255,255,255,.16);border-radius:5px;
  padding:2px 6px;color:#C7C3BC;background:rgba(255,255,255,.05);font-size:10px;
}

@media (max-width:640px){
  .mdl-head,.mdl-metrics,.mdl-story,.mdl-foot{padding-left:20px;padding-right:20px}
  .mdl-metrics.m3,.mdl-metrics.m4{grid-template-columns:repeat(2,1fr)}
  .mdl-step{padding-left:44px}
  .mdl-hint{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   SECTION POLISH — applied through existing selectors so the
   markup (and therefore the content) is never touched.
   ═══════════════════════════════════════════════════════════════ */

/* ── readability: the old scale ran too small on a dark ground ── */
.text-sm{font-size:15px;line-height:1.65}
.text-xs{font-size:13px;line-height:1.6}
.text-\[10px\]{font-size:11px}
.text-\[9px\]{font-size:10px}
.leading-relaxed{line-height:1.7}
.text-muted-foreground{color:#E9E7E3}
.text-bone\/80{color:rgba(233,231,227,.9)}

/* highlights inside body copy read as accent, not just brighter grey */
#about .text-foreground{color:var(--gold);font-weight:600}

/* ── section headings: give the eyebrow a pill, like the landing page ── */
section .font-mono-tech.text-ember:has(+ h2){
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,81,35,.12);border:1px solid rgba(255,81,35,.34);
  padding:7px 14px;border-radius:999px;font-size:11px;letter-spacing:.15em;
}
section h2.font-display{letter-spacing:-.035em}

/* ── services grid: real cards with a lit hover ── */
#services .group{
  background:linear-gradient(160deg,rgba(30,29,32,.86),rgba(19,19,21,.93))!important;
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease;
  position:relative;overflow:hidden;
}
#services .group::after{
  content:"";position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .3s ease;
  background:radial-gradient(420px 260px at 50% -20%,rgba(255,81,35,.18),transparent 70%);
}
#services .group:hover{transform:translateY(-3px);box-shadow:0 24px 50px -26px rgba(0,0,0,.85)}
#services .group:hover::after{opacity:1}
/* the hover glow sits behind content via its own stacking context, so the
   card's absolutely-positioned children (the 01-05 index, the bg image)
   keep their placement */
#services .group{isolation:isolate}
#services .group::after{z-index:-1}
#services .text-ember.text-2xl{
  display:inline-grid;place-items:center;height:46px;width:46px;border-radius:14px;
  background:rgba(255,81,35,.12);border:1px solid rgba(255,81,35,.36);font-size:20px;
}
#services h3.font-display{font-size:22px;letter-spacing:-.025em}
#services .mt-6.flex .font-mono-tech{
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);
  padding:6px 11px;border-radius:999px;color:#E9E7E3;
}

/* ── skills: pills that look like chips, with legible icons ── */
.skill-pill{
  background:rgba(26,26,29,.88)!important;border:1px solid rgba(255,255,255,.12)!important;
  border-radius:999px;padding:9px 15px 9px 9px;transition:.22s;
}
.skill-pill:hover{border-color:rgba(255,81,35,.55)!important;background:rgba(38,37,40,.94)!important;transform:translateY(-2px)}
.skill-icon{background:rgba(255,255,255,.06);border-radius:99px}
#skills .font-mono-tech.text-xs.uppercase{color:var(--gold);letter-spacing:.15em}

/* ── credentials ── */
#credentials .border.border-border.rounded-2xl{
  background:linear-gradient(160deg,rgba(30,29,32,.84),rgba(19,19,21,.92));
  border-color:rgba(255,255,255,.12)!important;
}
#credentials img{filter:saturate(1.05)}

/* ── web projects bento ── */
.bento-item{border-color:rgba(255,255,255,.12)!important;transition:transform .3s ease,border-color .25s ease,box-shadow .3s ease}
.bento-item:hover{transform:translateY(-4px);border-color:rgba(255,81,35,.5)!important;box-shadow:0 28px 56px -28px rgba(0,0,0,.9)}
.bento-tag{
  display:inline-block;width:-moz-fit-content;width:fit-content;
  font-family:var(--mono);letter-spacing:.1em;
  background:rgba(255,81,35,.16);border:1px solid rgba(255,81,35,.4);color:#FFB877;
  padding:5px 11px;border-radius:999px;
}
.bento-title{font-family:var(--display);letter-spacing:-.02em}
.bento-arrow{background:var(--g-cta);color:#1A0800;border:0}

/* ── case study cards ── */
.case-card{border-color:rgba(255,255,255,.12)!important;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.case-card:hover{transform:translateY(-3px);border-color:rgba(255,81,35,.5)!important}
.chip{border-color:rgba(255,255,255,.14)!important;color:#E9E7E3!important}
.chip:hover{border-color:rgba(255,81,35,.55)!important;color:#fff!important}
.chip.active{background:var(--g-cta)!important;color:#1A0800!important;border-color:transparent!important;font-weight:600}
#case-stat-row > div{background:linear-gradient(160deg,rgba(30,29,32,.86),rgba(19,19,21,.93))!important}
#case-stat-row .font-display{
  background:var(--g-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}

/* ── contact form ── */
#contact input,#contact textarea,#contact select{
  background:rgba(0,0,0,.34)!important;border:1px solid rgba(255,255,255,.12)!important;
  border-radius:12px;padding:13px 14px;font-size:16px;color:#fff;transition:.2s;
}
#contact input:focus,#contact textarea:focus,#contact select:focus{
  outline:0;border-color:rgba(255,81,35,.6)!important;box-shadow:0 0 0 3px rgba(255,81,35,.14);
  background:rgba(0,0,0,.5)!important;
}
#contact label,#contact .font-mono-tech{color:#C7C3BC}
#contact button[type=submit],#contact .bg-ember{
  background:var(--g-cta)!important;color:#1A0800!important;font-weight:700;border:0;
  box-shadow:0 14px 34px -12px rgba(255,81,35,.7);transition:transform .18s ease,filter .2s ease;
}
#contact button[type=submit]:hover,#contact .bg-ember:hover{transform:translateY(-2px);filter:brightness(1.06)}

/* ── nav + global CTA buttons pick up the gradient ── */
header .bg-ember,a.bg-ember{
  background:var(--g-cta)!important;color:#1A0800!important;font-weight:700;
  box-shadow:0 10px 26px -10px rgba(255,81,35,.7);
}

/* ── footer ── */
footer{border-top:1px solid rgba(255,255,255,.1)}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — paid traffic is ~85% phones, so this is the primary view.
   Targets: 44px minimum touch area, nothing below 11px, no zoom on focus.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:820px){

  /* touch targets — 44px is the Apple/Google floor */
  .chip,
  .skill-pill,
  #contact button,
  header a.bg-ember,
  a.bg-ember,
  .mdl-btn,
  .hero-cta,
  .hero-ghost{min-height:44px;display:inline-flex;align-items:center}
  .chip{padding:.7rem 1.05rem}
  .mdl-btn{height:44px;width:44px}
  header nav a{padding:10px 4px;display:inline-flex;align-items:center;min-height:44px}
  header .flex.items-center.gap-2{min-height:44px}
  footer a{display:inline-flex;align-items:center;min-height:40px}

  /* nothing under 11px on a phone */
  .text-\[9px\]{font-size:11px}
  .text-\[10px\]{font-size:11.5px}
  .pf-coords{font-size:11px}
  .pf-chip .k{font-size:10px}
  .mdl-metric .k{font-size:10.5px}
  .mdl-chan{font-size:11px}
  .mdl-count{font-size:11px}
  .bento-tag{font-size:11px}
  .font-mono-tech{letter-spacing:.09em}

  /* body copy comfort */
  body{font-size:16.5px}
  .text-lg{font-size:17px;line-height:1.7}
  .text-sm{font-size:15px}

  /* hero breathing room */
  #top{padding-top:104px;padding-bottom:64px}
  .pf-wrap{max-width:300px}
  .pf-chip .v{font-size:16px}
  .hero-cta,.hero-ghost{width:100%;justify-content:center}

  /* the drifting light rigs are the most expensive thing on a phone GPU */
  .lights::before,.lights::after{animation:none!important}
}

@media (max-width:480px){
  .statgrid{grid-template-columns:repeat(2,1fr)}
  .pf-chip.c1{top:2%;left:-1%}
  .pf-chip.c2{bottom:22%;right:-1%}
  h1{font-size:clamp(2.4rem,11vw,3.4rem)!important}
}

/* never let iOS zoom the page when a field is focused */
input,select,textarea{font-size:16px}

/* ── remaining mobile fixes found in testing ── */
@media (max-width:820px){
  /* the nav CTA and any inline "arrow" links */
  header a[href="#contact"],
  a[href="#contact"].inline-flex,
  #credentials a,
  #about a{min-height:44px;display:inline-flex;align-items:center}

  /* labels inside custom components (Tailwind overrides don't reach these) */
  .statcard .k{font-size:11.5px}
  .pf-chip .k{font-size:11px}
  .mdl-metric .k{font-size:11px}
  .mdl-step h4{font-size:12px}
  .mdl-hint{font-size:11px}
  .bento-meta,.bento-tag{font-size:11px}

  /* inline links in prose get a real touch area without breaking flow */
  p a,li a{display:inline-block;padding:6px 0}
}

@media (max-width:820px){
  #contact a{min-height:44px;display:inline-flex;align-items:center}
}

/* the decorative chart art in the "Ready to scale?" card is green —
   push it into the vermilion/gold palette instead of replacing the asset */
#services img[src*="results-abstract"]{
  filter:grayscale(1) sepia(1) hue-rotate(-16deg) saturate(3.2) brightness(.85);
}

/* ═══════════════════════════════════════════════════════════════
   CREDENTIALS — the densest section on the page. Cards instead of
   hairline lists, a proper timeline rail, readable meta.
   ═══════════════════════════════════════════════════════════════ */

/* --- award card --- */
#credentials > .max-w-7xl > .border{
  background:linear-gradient(150deg,rgba(34,32,34,.9),rgba(18,18,20,.95));
  border-color:rgba(255,255,255,.13)!important;
}
#credentials .font-display.text-3xl{font-size:clamp(22px,2.6vw,30px);line-height:1.18;letter-spacing:-.03em}
#credentials .absolute.top-4.left-4{
  background:rgba(12,12,13,.82)!important;border:1px solid rgba(255,81,35,.45)!important;
}

/* --- column headers --- */
#credentials .font-mono-tech.text-xs.uppercase.tracking-widest.text-muted-foreground{
  color:var(--gold);font-size:11.5px;letter-spacing:.16em;
  display:flex;align-items:center;gap:10px;
}
#credentials .font-mono-tech.text-xs.uppercase.tracking-widest.text-muted-foreground::after{
  content:"";height:1px;flex:1;background:linear-gradient(90deg,rgba(232,166,46,.4),transparent);
}

/* --- career timeline rail --- */
#credentials .border-l{
  border-color:transparent!important;position:relative;
}
#credentials .border-l::before{
  content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--ember),rgba(232,166,46,.5) 55%,rgba(255,255,255,.08));
}
#credentials .absolute.-left-\[41px\]{
  background:#141416!important;border-width:2px!important;
  box-shadow:0 0 0 4px rgba(12,12,13,1),0 6px 18px -6px rgba(255,81,35,.7);
}
#credentials .font-mono-tech.text-\[10px\].uppercase.tracking-widest.text-ember{
  display:inline-block;background:rgba(255,81,35,.13);border:1px solid rgba(255,81,35,.36);
  padding:5px 11px;border-radius:999px;font-size:11px;letter-spacing:.1em;
}
#credentials .font-display.text-xl{font-size:19px;letter-spacing:-.02em;margin-top:10px}

/* --- certifications as cards --- */
#credentials .divide-y{border:0!important}
#credentials .divide-y > *{
  border:1px solid rgba(255,255,255,.12)!important;border-radius:14px;
  background:linear-gradient(160deg,rgba(32,31,33,.86),rgba(19,19,21,.93));
  padding:16px 18px!important;margin-bottom:10px;
  transition:border-color .22s ease,transform .22s ease,background .22s ease;
}
#credentials .divide-y > *:hover{
  border-color:rgba(255,81,35,.5)!important;transform:translateY(-2px);
  background:linear-gradient(160deg,rgba(42,40,43,.92),rgba(24,24,26,.95));
}
#credentials .divide-y .h-9.w-9{
  height:42px!important;width:42px!important;border-radius:12px!important;
  background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.14)!important;
  padding:6px;
}
#credentials .divide-y .h-9.w-9 img{object-fit:contain!important}
#credentials .font-display.text-lg{font-size:16.5px;line-height:1.3;letter-spacing:-.015em}
#credentials .mt-1.font-mono-tech.text-\[10px\]{
  font-size:11px;letter-spacing:.06em;color:#C7C3BC;line-height:1.7;text-transform:none;
}

/* --- education card --- */
#credentials .border.border-border.rounded-2xl.p-6{
  background:linear-gradient(160deg,rgba(32,31,33,.88),rgba(19,19,21,.94));
  border-color:rgba(255,255,255,.13)!important;padding:22px!important;
}

/* --- languages --- */
#credentials .flex.items-center.justify-between.text-sm{
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07);
}
#credentials .flex.items-center.justify-between.text-sm:last-child{border-bottom:0}
#credentials .flex.items-center.justify-between.text-sm > span:last-child,
#credentials .flex.items-center.justify-between.text-sm > *:last-child{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold);background:rgba(232,166,46,.12);border:1px solid rgba(232,166,46,.3);
  padding:5px 10px;border-radius:999px;white-space:nowrap;
}

@media (max-width:820px){
  #credentials .divide-y > *{padding:14px 15px!important}
  #credentials .mt-1.font-mono-tech.text-\[10px\]{font-size:11.5px}
}