/* ==========================================================================
   Luke Lackey — Web & App Design
   Design system: "Ink & Signal" — dark canvas, Space Grotesk display +
   Inter body, one warm-bone accent carrying every interactive cue.

   The canvas is deliberately dark so client screenshots read as artifacts
   sitting ON the page rather than continuous with it — Rio Vista's bright
   photography glows against it, and Basecamp's dark admin UI stops
   competing with the surrounding chrome.
   ========================================================================== */

:root{
  /* Surfaces, darkest to lightest */
  --bg:#0E0F12;
  --bg-2:#131519;          /* .block.alt bands */
  --panel:#16181D;
  --panel-2:#1B1E24;       /* raised cards inside alt bands */

  /* Ink */
  --text:#EDEAE4;
  --muted:#9AA0AA;
  --dim:#737A85;

  /* Signal — every tint below derives from --accent, so the whole scheme
     re-colors by changing that one value. */
  --accent:#E8DCC4;
  --on-accent:#0E0F12;                                                  /* text on accent fills */
  --accent-bright:color-mix(in srgb, var(--accent) 80%, #fff);          /* hover lift */
  --accent-deep:color-mix(in srgb, var(--accent) 84%, #000);
  --accent-wash:color-mix(in srgb, var(--accent) 12%, transparent);     /* focus ring */
  --accent-line:color-mix(in srgb, var(--accent) 38%, transparent);     /* hover borders */
  --accent-shadow:color-mix(in srgb, var(--accent) 24%, transparent);
  --accent-glow:color-mix(in srgb, var(--accent) 14%, transparent);     /* hero/section washes */
  --accent-glow-soft:color-mix(in srgb, var(--accent) 5%, transparent);
  --accent-tint:color-mix(in srgb, var(--accent) 9%, transparent);

  /* Structure */
  --line:#24272E;
  --line-soft:#1D2026;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
  --shadow-lg:0 28px 70px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.4);

  --max:1180px;
  --gutter:24px;
  --display:"Space Grotesk", "Inter", system-ui, sans-serif;
  --body:"Inter", system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;font-family:var(--body);color:var(--text);background:var(--bg);
  line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--display);color:var(--text);line-height:1.1;margin:0;font-weight:600;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
/* height:auto is load-bearing — the width/height attributes on <img> are
   presentational hints that otherwise pin every image to its intrinsic height. */
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Eyebrow ---------- */
.eyebrow{
  font-family:var(--body);font-size:.7rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--accent);display:inline-block}
.eyebrow.light{color:var(--accent)}
.eyebrow.light::before{background:var(--accent)}
.block-head.center .eyebrow{justify-content:center}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:700;
  font-size:.94rem;letter-spacing:-.01em;padding:15px 26px;border-radius:3px;
  transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor:pointer;border:1.5px solid transparent;
}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-bright);transform:translateY(-2px);box-shadow:0 12px 30px var(--accent-shadow)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-light{background:transparent;color:var(--text);border-color:rgba(237,234,228,.28)}
.btn-light:hover{border-color:var(--text);background:rgba(237,234,228,.06);transform:translateY(-2px)}
.btn-block{width:100%;justify-content:center}
.btn svg{width:16px;height:16px}

/* ---------- Header ---------- */
/* Transparent over the hero, then materializes on scroll — the page opens on
   type, not on chrome. */
header{
  position:sticky;top:0;z-index:50;background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
header.scrolled{
  background:rgba(14,15,18,.82);
  backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom-color:var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:11px}
.brand .mark{
  width:34px;height:34px;flex:none;border-radius:3px;background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);
  font-weight:700;font-size:.86rem;letter-spacing:-.03em;
}
.brand .word{font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--text);letter-spacing:.01em;line-height:1;text-transform:uppercase}
.brand .word span{color:var(--dim)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:.88rem;font-weight:500;color:var(--muted);letter-spacing:-.005em;position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--accent);transition:width .22s ease}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:18px}
.nav-phone{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.88rem;color:var(--text);letter-spacing:-.01em}
.nav-phone svg{width:16px;height:16px;color:var(--accent)}
.nav-phone:hover{color:var(--accent)}
/* Icon-only so it reads as a mark, not a nav item — stays visible on mobile
   where the phone number and CTA drop out. */
.nav-social{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;border-radius:3px;border:1.5px solid var(--line);color:var(--text);
  transition:color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.nav-social svg{width:17px;height:17px;fill:currentColor}
.nav-social:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-wash);transform:translateY(-2px)}
.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--text)}
.menu-btn svg{width:26px;height:26px}

/* Mobile menu */
.mobile-menu{display:none;border-top:1px solid var(--line);background:var(--panel)}
.mobile-menu.open{display:block}
.mobile-menu .mm-inner{padding:18px var(--gutter) 26px;display:grid;gap:4px}
.mobile-menu a{padding:13px 0;font-weight:500;color:var(--text);border-bottom:1px solid var(--line-soft)}
.mobile-menu .mm-email{font-weight:600;color:var(--accent);word-break:break-word}
/* Outspecify `.mobile-menu a` above, or the button renders bone-on-bone. */
.mobile-menu .btn{margin-top:14px;border-bottom:none;padding:15px 28px}
.mobile-menu .btn-primary{color:var(--on-accent)}

/* ---------- Hero ---------- */
/* Type-only above the fold, then a full-bleed reel of the work running off the
   right edge — no fake browser chrome. */
.hero{position:relative;overflow:hidden;background:var(--bg);margin-top:-76px;padding-top:76px}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(1100px 520px at 72% -8%, var(--accent-glow), transparent 64%),
    radial-gradient(800px 500px at 4% 18%, var(--accent-glow-soft), transparent 62%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;opacity:.55;
  background-image:linear-gradient(rgba(237,234,228,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(237,234,228,.028) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 60% 0%,#000 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 60% 0%,#000 10%,transparent 72%);
}
.hero-inner{position:relative;z-index:2;padding:104px var(--gutter) 0}
.hero h1{
  font-size:clamp(2.9rem,7.2vw,5.6rem);font-weight:600;letter-spacing:-.035em;
  color:var(--text);margin-top:26px;max-width:16ch;line-height:1.02;
}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p.lead{font-size:1.14rem;color:var(--muted);max-width:52ch;margin:28px 0 36px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-meta{display:flex;flex-wrap:wrap;gap:28px;margin-top:52px;padding-top:24px;border-top:1px solid var(--line)}
.hero-meta .hm{color:var(--dim);font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}

/* Full-bleed work reel. Left gutter aligns to .wrap; the strip runs off the
   right edge on purpose, so the row reads as continuing past the viewport.
   The visible track and snap points make that bleed read as "there's more"
   rather than "something is cut off". */
.hero-reel-wrap{position:relative;z-index:2;margin-top:64px;padding-bottom:78px}
.hero-reel{
  display:flex;gap:22px;padding-bottom:20px;
  padding-left:max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  padding-right:var(--gutter);
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scroll-padding-left:max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.hero-reel::-webkit-scrollbar{height:8px}
.hero-reel::-webkit-scrollbar-track{background:var(--line-soft);border-radius:4px}
.hero-reel::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.hero-reel::-webkit-scrollbar-thumb:hover{background:var(--dim)}
.reel-item{
  display:block;margin:0;flex:0 0 clamp(280px,42vw,520px);border-radius:5px;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-lg);
  scroll-snap-align:start;
  transition:transform .35s ease, border-color .35s ease;
}
.reel-item:hover{transform:translateY(-6px);border-color:var(--accent-line)}
.reel-item img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;transition:transform .5s ease}
.reel-item:hover img{transform:scale(1.03)}
.reel-cap{
  padding:12px 15px;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);border-top:1px solid var(--line-soft);display:flex;align-items:center;gap:9px;
}
.reel-cap::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.reel-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reel-cap svg{width:14px;height:14px;flex:none;color:var(--accent);transition:transform .2s ease}
.reel-item:hover .reel-cap{color:var(--text)}
.reel-item:hover .reel-cap svg{transform:translateX(3px)}
.reel-hint{
  margin:14px 0 0;font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  padding-left:max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}

/* ---------- Intro band ---------- */
.intro{background:var(--bg-2);border-block:1px solid var(--line-soft)}
.intro-inner{padding:52px var(--gutter);text-align:center}
.intro-text{
  margin:0 auto;font-family:var(--display);font-weight:400;
  font-size:clamp(1.15rem,2.2vw,1.55rem);color:var(--text);max-width:800px;line-height:1.4;letter-spacing:-.02em;
}
.intro-text em{font-style:normal;color:var(--accent)}

/* ---------- Sections ---------- */
.block{padding:104px 0}
.block.alt{background:var(--bg-2)}
.block.tight{padding:76px 0}
.block-head{max-width:700px;margin-bottom:60px}
.block-head.center{margin-left:auto;margin-right:auto;text-align:center}
.block-head h2{font-size:clamp(2rem,4.2vw,3.1rem);margin-top:20px;font-weight:600;line-height:1.08;padding-bottom:.06em}
.block-head p{color:var(--muted);font-size:1.08rem;margin:20px 0 0}

/* ---------- Work / case studies ---------- */
.work-list{display:grid;gap:96px}
.work-item{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.work-item:nth-child(even) .work-media{order:2}
.work-media{
  position:relative;border-radius:5px;overflow:hidden;background:var(--panel);
  box-shadow:var(--shadow-lg);border:1px solid var(--line);transition:border-color .4s ease;
}
.work-item:hover .work-media{border-color:var(--accent-line)}
.work-media img{width:100%;display:block;transition:transform .6s ease}
.work-item:hover .work-media img{transform:scale(1.03)}
.work-media .ph{
  aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;color:var(--dim);text-align:center;padding:32px;
  background:radial-gradient(700px 320px at 70% 20%, var(--accent-tint), transparent 60%), var(--panel);
}
.work-media .ph svg{width:44px;height:44px;stroke:currentColor;stroke-width:1.2;fill:none}
.work-media .ph span{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.work-tag{
  position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:3px;background:rgba(14,15,18,.78);color:var(--text);
  border:1px solid rgba(237,234,228,.16);
  font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.work-tag.wip{background:var(--accent);color:var(--on-accent);border-color:transparent}

/* Oversized outlined numeral, hung above the title as structure rather than label */
.work-copy .num{
  display:block;font-family:var(--display);font-size:clamp(3.2rem,6vw,4.6rem);font-weight:700;
  line-height:.85;letter-spacing:-.04em;color:transparent;
  -webkit-text-stroke:1.5px var(--line);margin-bottom:12px;
  transition:-webkit-text-stroke-color .4s ease;
}
.work-item:hover .num{-webkit-text-stroke-color:var(--accent-deep)}
.work-copy h3{font-size:clamp(1.75rem,3vw,2.4rem);margin:0;font-weight:600}
.work-copy .role{
  display:block;margin-top:12px;font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);
}
.work-copy p{color:var(--muted);font-size:1.04rem;margin:20px 0 0}
.work-stack{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.work-stack li{
  font-size:.78rem;font-weight:500;color:var(--muted);background:var(--panel);
  border:1px solid var(--line);border-radius:3px;padding:6px 13px;
}
.block.alt .work-stack li{background:var(--panel-2)}
.work-actions{display:flex;flex-wrap:wrap;gap:22px;margin-top:30px}
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--accent);
}
.link-arrow:hover{color:var(--accent-bright)}
.link-arrow svg{width:15px;height:15px;transition:transform .2s ease}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- Capabilities ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cap-card{
  border:1px solid var(--line);border-radius:5px;padding:34px 30px;background:var(--panel);
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.block.alt .cap-card{background:var(--panel-2)}
.cap-card:hover{border-color:var(--accent-line);transform:translateY(-3px)}
.cap-card svg{width:24px;height:24px;color:var(--accent);stroke:currentColor;stroke-width:1.5;fill:none}
.cap-card h3{font-size:1.22rem;margin:18px 0 10px;font-weight:600}
.cap-card p{margin:0;color:var(--muted);font-size:.96rem}
.cap-proof{
  display:inline-flex;align-items:center;gap:7px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line-soft);width:100%;
  font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
}
span.cap-proof{color:var(--dim)}
.cap-proof svg{width:13px;height:13px;flex:none;transition:transform .2s ease}
a.cap-proof:hover svg{transform:translateX(3px)}

/* ---------- Process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step}
.step{position:relative;padding-top:30px;border-top:1px solid var(--line)}
.step::after{content:"";position:absolute;top:-1px;left:0;width:34px;height:1px;background:var(--accent)}
.step::before{
  counter-increment:step;content:"0" counter(step);
  position:absolute;top:-.9em;right:0;background:var(--bg);padding-left:12px;
  font-family:var(--display);font-size:.85rem;font-weight:600;color:var(--dim);letter-spacing:.1em;
}
.block.alt .step::before{background:var(--bg-2)}
.step h3{font-size:1.14rem;margin:0 0 8px;font-weight:600}
.step p{margin:0;color:var(--muted);font-size:.94rem}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-copy h2{margin-top:18px;font-size:clamp(1.9rem,3.8vw,2.8rem)}
.about-copy p{color:var(--muted);font-size:1.06rem;margin:22px 0 0}
.about-copy p strong{color:var(--text);font-weight:600}
.points{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:16px}
.points li{display:flex;gap:14px;align-items:flex-start;font-size:1rem;color:var(--text)}
.points li svg{width:20px;height:20px;flex:none;color:var(--accent);stroke:currentColor;stroke-width:2;fill:none;margin-top:3px}
.stat-panel{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:6px}
.block.alt .stat-panel{background:var(--panel-2)}
.stat{padding:28px 30px;border-bottom:1px solid var(--line-soft)}
.stat:last-child{border-bottom:none}
.stat .big{font-family:var(--display);font-size:1.42rem;color:var(--text);font-weight:600;line-height:1.15;letter-spacing:-.02em}
.stat .lab{font-size:.92rem;color:var(--muted);margin-top:6px}

/* ---------- Contact ---------- */
.contact{background:var(--bg);position:relative;overflow:hidden}
.contact::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(900px 460px at 88% 0%, var(--accent-tint), transparent 62%);
}
.contact .wrap{position:relative;z-index:1}
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact h2{color:var(--text);font-size:clamp(2rem,4.2vw,3.1rem);margin-top:18px}
.contact .sub{color:var(--muted);font-size:1.1rem;margin:20px 0 28px;max-width:44ch}
.contact-meta{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.contact-meta .cm{display:inline-flex;align-items:center;gap:12px;color:var(--text);font-size:1rem}
.contact-meta .cm svg{width:19px;height:19px;color:var(--accent);flex:none}
.contact-meta a.cm:hover{color:var(--accent)}
.contact-actions{margin-top:30px}
.btn-linkedin svg{fill:currentColor;width:17px;height:17px}

.contact-card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:34px}
.cform{display:grid;gap:18px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:7px}
.field label{font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:.96rem;color:var(--text);background:var(--bg);
  border:1px solid var(--line);border-radius:3px;padding:13px 14px;width:100%;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field textarea{resize:vertical;min-height:120px}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);
}
.field select option{background:var(--panel);color:var(--text)}
.form-note{font-size:.82rem;color:var(--dim);margin:0}
.form-status{margin:0;font-size:.92rem;color:var(--dim);min-height:1.2em}
.form-status.ok{color:var(--accent)}
.form-status.err{color:#D98B7A}
.cform button[type="submit"]:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
/* Honeypot — hidden from people, screen readers, and autofill alike. Bots that
   fill every input trip it and FormSubmit drops the message. */
.honeypot{display:none}

/* ---------- Footer ---------- */
footer{background:var(--bg-2);color:var(--muted);padding:60px 0 30px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot-brand .word{font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--text);text-transform:uppercase;letter-spacing:.01em}
.foot-brand .word span{color:var(--accent)}
.foot-brand p{margin:14px 0 0;font-size:.92rem;max-width:34ch;color:var(--dim)}
.foot-col h4{color:var(--text);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-family:var(--body);margin:0 0 15px}
.foot-col ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.foot-col a{font-size:.92rem;color:var(--muted)}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{
  margin-top:46px;padding-top:22px;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.84rem;color:var(--dim);
}
.foot-bottom span{color:var(--dim)}

/* ---------- Case study pages ---------- */
.cs-hero{background:var(--bg);color:var(--text);padding:96px 0 84px;position:relative;overflow:hidden;margin-top:-76px;padding-top:calc(96px + 76px)}
.cs-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(900px 460px at 82% 4%, var(--accent-glow), transparent 62%);
}
.cs-hero::after{
  content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(237,234,228,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(237,234,228,.028) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 65% 0%,#000 8%,transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 65% 0%,#000 8%,transparent 70%);
}
.cs-hero .wrap{position:relative;z-index:1}
.cs-back{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:30px}
.cs-back svg{width:15px;height:15px;transition:transform .2s ease}
.cs-back:hover svg{transform:translateX(-4px)}
.cs-hero h1{color:var(--text);font-size:clamp(2.3rem,5vw,3.6rem);margin:18px 0 0;letter-spacing:-.035em;line-height:1.04}
.cs-hero .sub{color:var(--muted);font-size:1.12rem;max-width:56ch;margin:22px 0 0}
.cs-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.cs-facts .f h4{font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:0 0 9px}
.cs-facts .f p{margin:0;color:var(--text);font-size:1rem;font-weight:500}
.cs-shot{margin:0;border-radius:5px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line);background:var(--panel)}
.cs-shot img{width:100%;display:block}
/* Full-page screenshots are very tall — scroll them in place instead of
   letting one image own three screens of the case study. */
.cs-shot.scrolls .scroll-window{max-height:660px;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--line) transparent}
.cs-shot.scrolls .scroll-window::-webkit-scrollbar{width:10px}
.cs-shot.scrolls .scroll-window::-webkit-scrollbar-track{background:var(--panel)}
.cs-shot.scrolls .scroll-window::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
.cs-shot.scrolls .scroll-window::-webkit-scrollbar-thumb:hover{background:var(--dim)}
.cs-shot figcaption{padding:14px 18px;font-size:.86rem;color:var(--muted);background:var(--panel);border-top:1px solid var(--line-soft)}
.cs-body{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.cs-body h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.cs-body p{color:var(--muted);font-size:1.04rem;margin:20px 0 0}
.cs-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px}
.cs-list li{display:flex;gap:13px;align-items:flex-start;color:var(--text);font-size:1rem}
.cs-list li svg{width:19px;height:19px;flex:none;color:var(--accent);stroke:currentColor;stroke-width:2;fill:none;margin-top:4px}
.cs-next{border-top:1px solid var(--line);padding:48px 0}
.cs-next-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cs-next .lab{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.cs-next h3{font-size:1.5rem;margin-top:8px}

/* Live strip — contents written by tools/refresh-live.mjs from the client's
   real site. Read-only information, so no accent: borders and muted text only. */
.cs-live{margin-top:28px;padding:24px 26px;background:var(--panel);border:1px solid var(--line);border-radius:5px}
.cs-live-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.cs-live-date{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.cs-live-chips{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:9px}
.cs-live-chips li{
  padding:7px 13px;border:1px solid var(--line-soft);border-radius:99px;
  background:var(--panel-2);color:var(--muted);font-size:.88rem;line-height:1.2;
}
.cs-shot figcaption .cs-live-date{display:block;margin-top:7px}

/* ---------- Screenshot gallery ---------- */
.shot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-bottom:56px}
.shot-grid .cs-shot{margin:0;transition:transform .3s ease, border-color .3s ease}
.shot-grid .cs-shot:hover{transform:translateY(-4px);border-color:var(--accent-line)}
.shot-grid figcaption{font-size:.88rem;line-height:1.55}
@media (prefers-reduced-motion:reduce){.shot-grid .cs-shot:hover{transform:none}}

/* ---------- Scale strip (case study depth) ---------- */
.scale-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden;
}
.scale-strip .s{background:var(--panel);padding:32px 26px;text-align:center}
.block.alt .scale-strip .s{background:var(--panel-2)}
.scale-strip .s .n{
  font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:700;
  color:var(--accent);line-height:1;letter-spacing:-.03em;
}
.scale-strip .s .l{
  margin-top:12px;font-size:.74rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);line-height:1.45;
}
.scale-note{text-align:center;color:var(--muted);font-size:.95rem;margin:22px auto 0;max-width:60ch}

/* ---------- Depth list (two-column feature rundown) ---------- */
.depth-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 44px;margin-top:8px}
.depth-item{display:flex;gap:18px;align-items:flex-start}
.depth-item .dnum{
  font-family:var(--display);font-size:.85rem;font-weight:600;color:var(--accent);
  letter-spacing:.08em;flex:none;padding-top:5px;min-width:26px;
}
.depth-item h3{font-size:1.12rem;margin:0 0 8px;font-weight:600}
.depth-item p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.6}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.cap-card:hover,.reel-item:hover,.work-item:hover .work-media img{transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .nav-links,.nav-cta .btn,.nav-phone{display:none}
  .menu-btn{display:block}
  .hero-inner{padding:76px var(--gutter) 0}
  .hero h1{max-width:none}
  .hero-reel{margin-top:48px;padding-bottom:72px;gap:16px}
  .work-item{grid-template-columns:1fr;gap:30px}
  .work-item:nth-child(even) .work-media{order:0}
  .cap-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .scale-strip{grid-template-columns:repeat(2,1fr)}
  .shot-grid{grid-template-columns:1fr;gap:28px}
  .depth-grid{grid-template-columns:1fr;gap:28px}
  .about-grid,.contact-inner,.cs-body{grid-template-columns:1fr;gap:40px}
  .cs-facts{grid-template-columns:repeat(2,1fr);gap:24px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:620px){
  .block{padding:72px 0}
  .cap-grid,.steps,.field-row{grid-template-columns:1fr}
  .work-list{gap:64px}
  .contact-card{padding:26px 22px}
  .foot-grid{grid-template-columns:1fr}
  .hero-meta{gap:16px;margin-top:40px}
  .reel-item{flex:0 0 78vw}
}