/* ============================================================
   ndrws — Work / About / Contact / Footer
   Continues the dark↔light rhythm + terminal system.
   ============================================================ */

/* shared dark-section scaffolding */
.dark-sec {
  position: relative;
  background: var(--ink);
  color: var(--text-dark);
  overflow: hidden;
  isolation: isolate;
}
.dark-sec .wrap { position: relative; z-index: 2; }

/* faint grid texture for dark sections */
.dark-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000, transparent 78%);
          mask-image: radial-gradient(120% 100% at 50% 0%, #000, transparent 78%);
  opacity: 0.5;
  pointer-events: none;
}
html.no-grid .dark-sec::before { display: none; }

/* section kicker shared */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
}
.kicker::before { content: ""; width: 26px; height: 1px; background: var(--accent-2); }

/* ============================================================
   WORK
   ============================================================ */
.work { padding: clamp(96px, 14vh, 180px) 0; }
.work-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(54px, 8vh, 96px);
}
.work-head .kicker { color: var(--text-dark-dim); }
.work-head h2 {
  margin: 16px 0 0;
  font-weight: 500;
  font-size: clamp(32px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.0;
}
.work-head .note {
  max-width: 34ch;
  color: var(--text-dark-dim);
  font-size: 15px;
  line-height: 1.6;
}

.cases { display: flex; flex-direction: column; gap: clamp(64px, 9vh, 132px); }

.case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
.case:nth-child(even) .case-media { order: 2; }

/* ── Work: calm single fade per card (no per-element motion) ──
   All the "interest" lives in one slow, faint background layer
   that parallax-drifts behind the section (.work-bg).           */
.cases .case.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.cases .case.reveal.in { opacity: 1; transform: none; }

/* quiet hover: accent corner-glow blooms, no movement */
.case .case-media::after { transition: transform 0.6s var(--ease), opacity 0.6s var(--ease); }
.case .case-media:hover::after { transform: scale(1.3); opacity: 0.85; }

/* faint parallax background — the section's only ambient motion */
.work-bg {
  position: absolute;
  inset: -12% 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background-image:
    radial-gradient(58% 46% at 18% 14%, color-mix(in oklab, var(--accent) 11%, transparent), transparent 66%),
    radial-gradient(52% 42% at 86% 86%, color-mix(in oklab, var(--accent-2) 9%, transparent), transparent 66%),
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
}
html.no-grid .work-bg { background-image:
    radial-gradient(58% 46% at 18% 14%, color-mix(in oklab, var(--accent) 11%, transparent), transparent 66%),
    radial-gradient(52% 42% at 86% 86%, color-mix(in oklab, var(--accent-2) 9%, transparent), transparent 66%); }
/* the section uses .work-bg instead of the shared dark-sec grid */
.work.dark-sec::before { display: none; }

.case-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.028) 0 2px, transparent 2px 13px),
    linear-gradient(160deg, var(--ink-3), var(--ink-2));
  will-change: transform;
}
.case-media::after {
  /* accent corner glow */
  content: "";
  position: absolute;
  width: 60%; height: 60%;
  right: -12%; bottom: -16%;
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.case-media .ph-label {
  position: absolute;
  left: 16px; top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-dark-dim);
}
.case-media .ph-label b { color: var(--accent); font-weight: 500; }
.case-media .ph-frame {
  position: absolute;
  inset: 38px 22px 22px;
  border: 1px dashed var(--line-dark);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--text-dark-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 14px;
}
/* filled product shot */
.case-media.has-img { background: linear-gradient(160deg, var(--ink-3), var(--ink-2)); aspect-ratio: 1693 / 929; }
.case-media.has-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.case-media.has-img::after { z-index: 1; }
/* portrait phone-grid shot — frame the top row of phones */
.case-media.has-img.raidlink { aspect-ratio: 1448 / 1086; }
.case-media.has-img.raidlink img { object-position: center; }
/* hitec — iPad device mockup on dark bg, blends into section */
.case-media.has-img.hitec { aspect-ratio: 1122 / 1402; background: #1a1a1a; }
.case-media.has-img.hitec img { object-position: center; }
/* biometrics — wide dark dashboard, native ratio */
.case-media.has-img.biometrics { aspect-ratio: 1672 / 941; }
.case-media.has-img.biometrics img { object-position: center; }
/* privacy — light CRM UI, native 3:2 ratio */
.case-media.has-img.privacy { aspect-ratio: 1536 / 1024; }
.case-media.has-img.privacy img { object-position: center; }
/* ADA conversion tool — light compliance UI, native ratio */
.case-media.has-img.ada { aspect-ratio: 1448 / 1086; }
.case-media.has-img.ada img { object-position: center; }

.case-body .case-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-dark-dim);
  margin-bottom: 18px;
}
.case-body .case-meta .idx { color: var(--accent); font-weight: 600; }
.case-body .case-meta .sector {
  position: relative;
  border: 1px solid var(--line-dark);
  border-radius: 5px;
  padding: 4px 8px;
  white-space: nowrap;
}
/* periodic sheen travelling around the pill border — teal→coral, infrequent.
   Marks these as the breadth-of-industry categories without nagging the eye. */
@property --sheen-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.case-body .case-meta .sector::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--sheen-angle),
    transparent 0deg,
    transparent 228deg,
    var(--accent) 288deg,
    var(--accent-2) 332deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: drop-shadow(0 0 3px color-mix(in oklab, var(--accent) 50%, transparent));
  opacity: 0;
  pointer-events: none;
  animation: sectorSheen 11s ease-in-out infinite;
}
@keyframes sectorSheen {
  0%, 76%   { opacity: 0; --sheen-angle: 0deg; }
  80%       { opacity: 1; }
  98%       { opacity: 1; --sheen-angle: 392deg; }
  100%      { opacity: 0; --sheen-angle: 392deg; }
}
/* stagger so they shimmer one at a time, never in unison */
.cases .case:nth-child(1) .sector::before { animation-delay: 0s; }
.cases .case:nth-child(2) .sector::before { animation-delay: 2.2s; }
.cases .case:nth-child(3) .sector::before { animation-delay: 4.4s; }
.cases .case:nth-child(4) .sector::before { animation-delay: 6.6s; }
.cases .case:nth-child(5) .sector::before { animation-delay: 8.8s; }
.case-body h3 {
  margin: 0 0 16px;
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.case-body p {
  margin: 0 0 22px;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.62;
  color: var(--text-dark-dim);
  max-width: 50ch;
  text-wrap: pretty;
}
.case-impact {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 0 22px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  margin-bottom: 22px;
}
.case-impact .val {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1;
}
.case-impact .desc {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-dark-dim);
  max-width: 30ch;
}
.case-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.case-tags span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--text-dark-dim);
  border: 1px solid var(--line-dark);
  border-radius: 5px;
  padding: 5px 9px;
}

/* ============================================================
   ABOUT (light)
   ============================================================ */
.about {
  position: relative;
  background: var(--paper);
  color: var(--text-light);
  padding: clamp(96px, 14vh, 180px) 0 clamp(70px, 10vh, 120px);
  overflow: hidden;
}
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.about-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  border: 1px solid var(--line-light);
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg,
      rgba(16,20,26,0.035) 0 2px, transparent 2px 13px),
    linear-gradient(160deg, var(--paper-2), #fff);
  will-change: transform;
}
.about-portrait .ph-label {
  position: absolute; left: 16px; top: 14px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--text-light-dim);
}
.about-portrait .ph-label b { color: var(--accent-2); font-weight: 600; }
.about-portrait .ph-frame {
  position: absolute; inset: 40px 24px 24px;
  border: 1px dashed var(--line-light); border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--text-light-dim); text-align: center; padding: 14px;
}
/* real headshot — monochrome by default, blooms to color on hover */
.about-portrait.has-photo { background: var(--ink-2); }
.about-portrait.has-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  display: block;
  filter: grayscale(1) contrast(1.04) brightness(1.02);
  transition: filter 0.6s var(--ease), transform 6s var(--ease);
}
.about-portrait.has-photo::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(150deg, color-mix(in oklab, var(--accent) 26%, transparent), transparent 52%, color-mix(in oklab, var(--accent-2) 22%, transparent));
  mix-blend-mode: screen;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.about-portrait.has-photo:hover img { filter: grayscale(0) contrast(1) brightness(1); }
.about-portrait.has-photo:hover::after { opacity: 0; }

.about-copy .kicker { color: var(--text-light-dim); margin-bottom: 18px; }
.about-copy h2 {
  margin: 0 0 24px;
  font-weight: 500;
  font-size: clamp(28px, 3.8vw, 50px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
}
.about-copy h2 .em { color: var(--accent); }
.about-copy p {
  margin: 0 0 18px;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.62;
  color: var(--text-light-dim);
  max-width: 56ch;
  text-wrap: pretty;
}
.signature {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 10px; font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.04em; color: var(--text-light);
}
.signature .gt { color: var(--accent); font-weight: 700; }

.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-light);
  border: 1px solid var(--line-light);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 38px;
}
.principles .p {
  background: var(--paper);
  padding: 24px 22px 26px;
}
.principles .p .n {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; color: var(--accent-2); margin-bottom: 12px;
}
.principles .p h4 {
  margin: 0 0 8px; font-weight: 500; font-size: 17px; letter-spacing: -0.01em;
}
.principles .p span {
  font-size: 13.5px; line-height: 1.5; color: var(--text-light-dim);
}

/* client marquee */
.clients {
  margin-top: clamp(56px, 8vh, 96px);
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
  padding: 26px 0;
}
.clients .lbl {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-light-dim);
  margin: 0 0 18px; padding-inline: var(--gutter);
}
.marquee { position: relative; overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track {
  display: flex; width: max-content; gap: 0;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: -0.01em;
  color: var(--text-light);
  opacity: 0.55;
  padding: 0 28px;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 28px;
  transition: opacity 0.25s var(--ease), color 0.25s var(--ease);
}
.marquee-track span::after { content: "/"; color: var(--accent); opacity: 0.6; }
.marquee-track span:hover { opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   CONTACT (dark)
   ============================================================ */
.contact { padding: clamp(100px, 15vh, 200px) 0; }
.contact-inner { max-width: 880px; }
.contact .kicker { color: var(--text-dark-dim); margin-bottom: 26px; }
.contact h2 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(36px, 6.4vw, 92px);
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}
.contact h2 .accent { color: var(--accent); }
.contact-sub {
  margin: 28px 0 0; max-width: 52ch;
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55;
  color: var(--text-dark-dim);
}
.contact-card {
  margin-top: 44px;
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  background: color-mix(in oklab, var(--ink-2) 70%, transparent);
  backdrop-filter: blur(8px);
  overflow: hidden;
  min-width: min(440px, 100%);
}
.contact-card .bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em;
  color: var(--text-dark-dim);
}
.contact-card .bar .dotrow { display: flex; gap: 6px; margin-right: 8px; }
.contact-card .bar .dotrow i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-dark); display: block; }
.contact-card .bar .dotrow i:first-child { background: var(--coral); }
.contact-card .bar .dotrow i:nth-child(2) { background: #e0b341; }
.contact-card .bar .dotrow i:nth-child(3) { background: var(--teal); }
.contact-card .body {
  padding: 22px 20px 24px;
  font-family: var(--font-mono); font-size: 14px; line-height: 1.9;
}
.contact-card .body .ln { color: var(--text-dark-dim); }
.contact-card .body .ln .gt { color: var(--accent); }
.contact-card .body a.mailbig {
  display: inline-block;
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--text-dark);
  letter-spacing: -0.01em;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.contact-card .body a.mailbig:hover { color: var(--accent); border-color: var(--accent); }
.contact-card .body .typed-cursor { color: var(--accent-2); animation: blink 1.05s steps(1) infinite; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--ink);
  color: var(--text-dark-dim);
  border-top: 1px solid var(--line-dark);
  padding: 44px 0;
}
.footer .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 20px;
}
.footer .logo .word { font-size: 19px; }
.footer .logo svg { height: 22px; }
.footer .f-links { display: flex; gap: 22px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; }
.footer .f-links a { color: var(--text-dark-dim); transition: color 0.2s var(--ease); }
.footer .f-links a:hover { color: var(--accent); }
.footer .copy { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 900px) {
  .case { grid-template-columns: 1fr; gap: 24px; }
  .case:nth-child(even) .case-media { order: 0; }
  .about-grid { grid-template-columns: 1fr; }
  .about-portrait { max-width: 380px; aspect-ratio: 16/10; }
  .principles { grid-template-columns: 1fr; }
}