/* ============================================
   NAIFEH LAW — DESIGN TOKENS
============================================ */
:root {
  --bg: #06070a;
  --panel: #0d1420;
  --panel-2: #0a0f18;
  --accent: #4a7fe8;
  --accent-bright: #6fa0ff;
  --accent-dim: #4a7fe855;
  --accent-glow: #4a7fe8aa;
  --text: #f2f4f8;
  --muted: #8992a3;
  --hairline: #1a212c;

  --font-serif: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --gutter: clamp(24px, 6vw, 96px);
  --index-col: 64px;
  --maxw: 1320px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

::selection { background: var(--accent); color: #05070c; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

html { scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-bright); }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  opacity: 0.02; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cursor-glow {
  position: fixed; top: 0; left: 0; width: 560px; height: 560px;
  border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  opacity: 0.09; transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  will-change: transform;
}

/* ============================================
   PAGE CONTENT FADE-IN (post-preloader)
============================================ */
body.is-loading { overflow: hidden; height: 100vh; }
.site-nav, main, .site-footer {
  opacity: 0;
  transition: opacity 1s ease;
}
body:not(.is-loading) .site-nav,
body:not(.is-loading) main,
body:not(.is-loading) .site-footer {
  opacity: 1;
}

/* ============================================
   PRELOADER
============================================ */
.preloader {
  position: fixed; inset: 0; z-index: 999;
  background: var(--bg);
  background-image:
    linear-gradient(to right, var(--hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline) 1px, transparent 1px);
  background-size: 40px 40px;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.5s ease;
}
.preloader.is-done { opacity: 0; pointer-events: none; }

.preloader-inner { position: relative; width: min(820px, 90vw); }
.preloader-svg { width: 100%; height: auto; display: block; }

/* ---- base geometry styles (as authored in the source file) ---- */
.preloader-svg .pl-stroke      { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.preloader-svg .pl-stroke-mid  { fill: none; stroke: var(--text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.preloader-svg .pl-stroke-heavy{ fill: none; stroke: var(--text); stroke-width: 3;   stroke-linecap: round; stroke-linejoin: round; }
.preloader-svg .pl-dash        { fill: none; stroke: var(--muted); stroke-width: 1.35; stroke-dasharray: 8 7; stroke-linecap: round; opacity: 0.9; }
.preloader-svg .pl-text        { fill: var(--muted); font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.04em; }
.preloader-svg .pl-tiny  { font-size: 14px; }
.preloader-svg .pl-small { font-size: 15px; }
.preloader-svg .pl-med   { font-size: 18px; fill: var(--accent-bright); }
.preloader-svg .pl-big   { font-size: 40px; fill: var(--text); }
.preloader-svg .pl-brand { font-size: 44px; letter-spacing: 0.24em; fill: var(--text); }
.preloader-svg .pl-tag   { font-size: 17px; letter-spacing: 0.16em; fill: var(--accent-bright); }
.preloader-svg #header .pl-big { fill: var(--text); }

/* the filament is the logo — give it the brand accent + glow */
.preloader-svg #filament .pl-stroke,
.preloader-svg #filament .pl-stroke-mid,
.preloader-svg #filament .pl-stroke-heavy {
  stroke: var(--accent-bright);
  filter: drop-shadow(0 0 5px var(--accent-glow));
}

/* ---- DRAW groups: real product geometry traces itself on ---- */
.preloader-svg #border .pl-stroke,
.preloader-svg #border .pl-stroke-mid,
.preloader-svg #border .pl-stroke-heavy,
.preloader-svg #bulb-envelope .pl-stroke,
.preloader-svg #bulb-envelope .pl-stroke-mid,
.preloader-svg #bulb-envelope .pl-stroke-heavy,
.preloader-svg #filament .pl-stroke,
.preloader-svg #filament .pl-stroke-mid,
.preloader-svg #filament .pl-stroke-heavy,
.preloader-svg #support .pl-stroke,
.preloader-svg #support .pl-stroke-mid,
.preloader-svg #support .pl-stroke-heavy,
.preloader-svg #base .pl-stroke,
.preloader-svg #base .pl-stroke-mid,
.preloader-svg #base .pl-stroke-heavy {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

/* ---- FADE groups: annotation/labels appear as a unit ---- */
.preloader-svg #header,
.preloader-svg #patent-box,
.preloader-svg #dimensions,
.preloader-svg #construction,
.preloader-svg #left-reference-box,
.preloader-svg #top-view,
.preloader-svg #patent-drawing-box,
.preloader-svg #callouts,
.preloader-svg #center-reference,
.preloader-svg #title-block,
.preloader-svg #branding {
  opacity: 0;
}

/* ============================================
   DRAW-ON SEQUENCE
============================================ */
@keyframes pl-draw { to { stroke-dashoffset: 0; } }
@keyframes pl-fade { to { opacity: 1; } }

.preloader-inner.pl-run #header               { animation: pl-fade 0.12s ease-out 0.05s forwards; }
.preloader-inner.pl-run #patent-box           { animation: pl-fade 0.12s ease-out 0.05s forwards; }
.preloader-inner.pl-run #border .pl-stroke,
.preloader-inner.pl-run #border .pl-stroke-mid,
.preloader-inner.pl-run #border .pl-stroke-heavy { animation: pl-draw 0.22s ease-out 0.05s forwards; }
.preloader-inner.pl-run #construction         { animation: pl-fade 0.12s ease-out 0.22s forwards; }
.preloader-inner.pl-run #dimensions           { animation: pl-fade 0.12s ease-out 0.3s forwards; }

.preloader-inner.pl-run #support .pl-stroke,
.preloader-inner.pl-run #support .pl-stroke-mid,
.preloader-inner.pl-run #support .pl-stroke-heavy { animation: pl-draw 0.15s ease-out 1.08s forwards; }

.preloader-inner.pl-run #base .pl-stroke,
.preloader-inner.pl-run #base .pl-stroke-mid,
.preloader-inner.pl-run #base .pl-stroke-heavy { animation: pl-draw 0.2s ease-out 1.23s forwards; }

/* Power-on moment: the bulb "turns on" right after the drawing finishes */
@keyframes pl-bulb-flash {
  0%   { opacity: 0; transform: scale(0.75); }
  45%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0.5; transform: scale(1); }
}
@keyframes pl-bulb-lit-stroke {
  0%   { filter: drop-shadow(0 0 0px transparent); stroke: var(--text); }
  45%  { filter: drop-shadow(0 0 18px var(--accent-glow)); stroke: #eaf3ff; }
  100% { filter: drop-shadow(0 0 7px var(--accent-dim)); stroke: var(--text); }
}
@keyframes pl-filament-lit {
  0%   { filter: drop-shadow(0 0 5px var(--accent-glow)); stroke: var(--accent-bright); }
  45%  { filter: drop-shadow(0 0 20px var(--accent-glow)); stroke: #eaf3ff; }
  100% { filter: drop-shadow(0 0 9px var(--accent-glow)); stroke: var(--accent-bright); }
}

#bulbLight {
  transform-box: fill-box;
  transform-origin: center;
}
.preloader-inner.pl-run #bulbLight {
  animation: pl-bulb-flash 0.55s ease-out 1.45s forwards;
}
.preloader-inner.pl-run #bulb-envelope .pl-stroke-mid,
.preloader-inner.pl-run #bulb-envelope .pl-stroke-heavy {
  animation:
    pl-draw 0.4s cubic-bezier(0.65,0,0.35,1) 0.42s forwards,
    pl-bulb-lit-stroke 0.55s ease-out 1.45s forwards;
}
.preloader-inner.pl-run #filament .pl-stroke,
.preloader-inner.pl-run #filament .pl-stroke-mid,
.preloader-inner.pl-run #filament .pl-stroke-heavy {
  animation:
    pl-draw 0.26s cubic-bezier(0.65,0,0.35,1) 0.82s forwards,
    pl-filament-lit 0.55s ease-out 1.45s forwards;
}

.preloader-inner.pl-run #left-reference-box   { animation: pl-fade 0.12s ease-out 1.5s forwards; }
.preloader-inner.pl-run #top-view             { animation: pl-fade 0.12s ease-out 1.58s forwards; }
.preloader-inner.pl-run #patent-drawing-box   { animation: pl-fade 0.12s ease-out 1.65s forwards; }
.preloader-inner.pl-run #callouts             { animation: pl-fade 0.15s ease-out 1.72s forwards; }
.preloader-inner.pl-run #center-reference     { animation: pl-fade 0.1s  ease-out 1.85s forwards; }
.preloader-inner.pl-run #title-block          { animation: pl-fade 0.12s ease-out 1.92s forwards; }
.preloader-inner.pl-run #branding             { animation: pl-fade 0.25s ease-out 2.05s forwards; }

/* Hold: "NAIFEH LAW" pulses with a soft glow for ~2s once everything has settled */
@keyframes pl-pulse-glow {
  0%, 100% { filter: drop-shadow(0 0 0px var(--accent-glow)); fill: var(--text); }
  50% { filter: drop-shadow(0 0 22px var(--accent-glow)); fill: var(--accent-bright); }
}
.preloader-inner.pl-run #wordmarkName {
  animation: pl-pulse-glow 1s ease-in-out 2.3s 2 both;
  cursor: pointer;
}

/* Reduced motion: skip choreography, show final state fast */
@media (prefers-reduced-motion: reduce) {
  .preloader-inner.pl-run [class*="pl-stroke"] { animation: pl-draw 0.3s ease-out 0s forwards !important; }
  .preloader-inner.pl-run #header,
  .preloader-inner.pl-run #patent-box,
  .preloader-inner.pl-run #construction,
  .preloader-inner.pl-run #dimensions,
  .preloader-inner.pl-run #left-reference-box,
  .preloader-inner.pl-run #top-view,
  .preloader-inner.pl-run #patent-drawing-box,
  .preloader-inner.pl-run #callouts,
  .preloader-inner.pl-run #center-reference,
  .preloader-inner.pl-run #title-block,
  .preloader-inner.pl-run #branding { animation: pl-fade 0.3s ease-out 0.15s forwards !important; }
}

/* Simplify on small screens — keep the core drawing + wordmark, drop dense annotation */
@media (max-width: 700px) {
  .preloader-svg #header,
  .preloader-svg #patent-box,
  .preloader-svg #dimensions,
  .preloader-svg #left-reference-box,
  .preloader-svg #top-view,
  .preloader-svg #patent-drawing-box,
  .preloader-svg #callouts,
  .preloader-svg #center-reference,
  .preloader-svg #title-block {
    display: none;
  }
  .preloader-inner { width: min(340px, 84vw); }
}

/* ============================================
   TYPE
============================================ */
.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
em { font-style: italic; color: var(--accent); }

h2 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 400; line-height: 1.15; }
h3 { font-family: var(--font-body); font-weight: 400; font-size: 18px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-bright);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--accent-dim);
  margin-top: 28px;
  transition: gap 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, text-shadow 0.3s ease;
}
.text-link:hover { gap: 16px; border-color: var(--accent-bright); text-shadow: 0 0 16px var(--accent-glow); }

/* ============================================
   NAV
============================================ */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px var(--gutter);
  background: linear-gradient(to bottom, rgba(6,7,10,0.9), transparent);
  backdrop-filter: blur(6px);
}

.nav-mark {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.14em;
  color: var(--text);
}
.mark-bulb { color: var(--accent); display: flex; }
.nav-bulb {
  height: 18px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 5px var(--accent-glow));
}

.nav-links { display: flex; gap: 40px; }
.nav-links a {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 6px;
  transition: color 0.3s ease;
}
.nav-links a.is-active,
.nav-links a:hover { color: var(--text); text-shadow: 0 0 12px var(--accent-glow); }
.nav-links a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--accent-bright);
  box-shadow: 0 0 8px var(--accent-glow);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a.is-active::after,
.nav-links a:hover::after { width: 100%; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; }
.nav-toggle span { width: 22px; height: 1px; background: var(--text); }

/* ============================================
   LAYOUT / SECTIONS with numbered index
============================================ */
.section {
  position: relative;
  padding: 120px var(--gutter) 120px calc(var(--gutter) + var(--index-col));
  max-width: var(--maxw);
  margin: 0 auto;
  border-top: 1px solid var(--hairline);
}
.hero { border-top: none; }

.index-num {
  position: absolute;
  left: var(--gutter);
  top: 120px;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--accent-bright);
  text-shadow: 0 0 20px var(--accent-glow);
}

.section-head { margin-bottom: 56px; max-width: 620px; }

/* ============================================
   HERO
============================================ */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  padding-top: 140px;
  gap: 40px;
}

.blueprint-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.3;
  mask-image: radial-gradient(ellipse at 25% 40%, black 0%, transparent 75%);
  z-index: -1;
}

.hero-title {
  font-size: clamp(58px, 8vw, 108px);
  line-height: 0.96;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-title em { text-shadow: 0 0 40px var(--accent-glow); }

.hero-sub {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.9;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s ease 0.12s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}

.hero-inner .text-link {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s ease 0.24s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.24s, gap 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, text-shadow 0.3s ease;
}

/* The bulb module (js/script.js) adds .is-lit to .hero-inner once the bulb reaches
   full brightness — that's what actually reveals the title/sub/CTA below. */
.hero-inner.is-lit .hero-title,
.hero-inner.is-lit .hero-sub,
.hero-inner.is-lit .text-link {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion: just show the text, no travel/delay choreography */
@media (prefers-reduced-motion: reduce) {
  .hero-title, .hero-sub, .hero-inner .text-link {
    transition: opacity 0.4s ease;
    transform: none;
  }
}

.hero-graphic {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  animation: hero-graphic-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.hero-graphic::before {
  content: '';
  position: absolute;
  width: 60%; height: 60%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  filter: blur(40px);
  opacity: 0.12;
  z-index: -1;
  animation: hb-breathe-bloom 9s ease-in-out infinite;
  animation-play-state: paused;
}
.hero-graphic:has(.hero-bulb-on.is-on)::before { animation-play-state: running; }
@keyframes hero-graphic-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes hb-breathe-bloom {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 0.32; }
}

/* ============================================
   HERO BULB — off/on image-pair interaction
   (markup lives in index.html; behavior/timing lives in js/script.js)
============================================ */

/* Wrapper: one box, sized by the OFF image (normal flow), so nothing shifts. */
.hero-bulb-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  line-height: 0; /* kill the inline-image whitespace gap */
}
.hero-bulb-wrap img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* OFF image: normal document flow — this is what actually sizes .hero-bulb-wrap */
.hero-bulb-off {
  position: relative;
}

/* ON image: absolutely positioned in the exact same box, pure opacity layer */
.hero-bulb-on {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 450ms ease; /* steady-state hover/focus crossfade only — not used during startup */
  animation: bulb-ambient-pulse 8s ease-in-out infinite;
  animation-play-state: paused;
  will-change: opacity, filter;
}

/* ---- One-time startup flicker (runs once, on whichever trigger js/script.js is set to) ----
   Timeline @ 1540ms total:
     0     - 500ms   hold fully off
     500   - 560ms   flicker to ~18%
     560   - 620ms   back to 0%
     620   - 680ms   flicker to ~38%
     680   - 740ms   back to 0%
     740   - 1540ms  soft ease-out rise to 100% (~800ms)
   To retime: adjust both these keyframe percentages AND the `1540ms` duration below
   AND the matching `startupDuration` value in the JS config — they must stay in sync. */
@keyframes bulb-startup {
  0%, 32.5% { opacity: 0; }
  36.4%     { opacity: 0.18; }
  40.3%     { opacity: 0; }
  44.2%     { opacity: 0.38; }
  48.1% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); /* soft ease for the final rise only */
  }
  100% { opacity: 1; }
}
.hero-bulb-on.is-starting {
  animation: bulb-startup 1540ms linear forwards;
  transition: none; /* keyframes alone drive opacity during startup */
}

/* Steady "on" state — after startup completes, or after hover/focus re-entry.
   This is a plain crossfade (via the `transition` above), never the flicker. */
.hero-bulb-on.is-on {
  opacity: 1;
  animation-play-state: running;
}

/* Ambient pulse: brightness only. Never touches opacity, scale, or position. */
@keyframes bulb-ambient-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-graphic::before { animation: none; opacity: 0.2; }
  .hero-bulb-on {
    animation: none;
    transition: opacity 300ms ease;
  }
  .hero-bulb-on.is-starting { animation: none; }
}

/* ============================================
   SERVICES
============================================ */
.service-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
}
.service-item {
  background: var(--bg);
  padding: 0 32px 0 0;
  position: relative;
}
.service-item:not(:last-child) { border-right: 1px solid var(--hairline); padding-right: 32px; }
.service-item:not(:first-child) { padding-left: 32px; }
.service-item { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.service-item:hover { transform: translateY(-6px); }
.service-icon { color: var(--accent-bright); margin-bottom: 24px; transition: filter 0.3s ease; }
.service-item:hover .service-icon { filter: drop-shadow(0 0 14px var(--accent-glow)); }
.service-item h3 {
  margin-bottom: 12px;
  min-height: 58px; /* reserves space for 2 lines (18px @ 1.6 line-height) so 1-line and
                        2-line titles ("Patent Prosecution" vs "IP Portfolio Management")
                        don't push the description text below to different heights */
  display: flex;
  align-items: flex-start;
}
.service-item p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  min-height: 72px; /* reserves space for ~3 lines so the arrows below line up regardless
                        of how many lines each description happens to wrap to */
}
.arrow-link {
  display: inline-block; margin-top: 20px;
  color: var(--accent-bright); font-size: 15px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-item:hover .arrow-link { transform: translate(4px, -4px); }

/* ============================================
   RESOURCES
============================================ */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.resource-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--hairline);
  transition: border-color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.resource-card:hover {
  border-color: var(--accent);
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -24px var(--accent-glow);
}
.resource-thumb {
  aspect-ratio: 16/10;
  background: var(--panel);
  position: relative;
  overflow: hidden;
}
.resource-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(70%) brightness(0.55) contrast(1.05);
  transition: filter 0.5s ease, transform 0.6s ease;
}
.resource-card:hover .resource-thumb img {
  filter: grayscale(20%) brightness(0.75) contrast(1.05);
  transform: scale(1.04);
}
.resource-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 30% 30%, var(--accent-glow), transparent 60%);
  transition: opacity 0.4s ease;
  opacity: 0.4;
}
.resource-card:hover .resource-thumb::after { opacity: 0.7; }
.resource-card { padding: 0; }
.resource-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--accent); padding: 20px 24px 0;
}
.resource-card h3 { padding: 8px 24px 0; font-size: 16px; }
.resource-card p { padding: 10px 24px 24px; color: var(--muted); font-size: 13px; line-height: 1.7; flex: 1; }
.resource-arrow { padding: 0 24px 20px; align-self: flex-end; color: var(--accent); }

/* ============================================
   TEAM
============================================ */
.team-lead { margin-top: 18px; color: var(--muted); max-width: 440px; }

.team-list { display: flex; flex-direction: column; gap: 72px; }
.team-member {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
}
.team-photo {
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s ease;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-member:hover .team-photo { border-color: var(--accent-dim); }
.team-copy h3 { font-family: var(--font-serif); font-size: 26px; margin-bottom: 6px; }
.team-role {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--accent); margin-bottom: 20px; text-transform: uppercase;
}
.team-copy p { color: var(--muted); font-size: 14px; line-height: 1.8; margin-bottom: 14px; max-width: 640px; }
.team-copy p a { color: var(--accent-bright); border-bottom: 1px solid var(--accent-dim); transition: border-color 0.3s ease; }
.team-copy p a:hover { border-color: var(--accent-bright); }

/* Desktop only: bio text scrolls within a box matching the photo's height (220px column
   at a 3:4 ratio = ~293px tall), so photo and text stay visually aligned regardless of
   how long the bio runs. On mobile the photo column collapses (see the 900px breakpoint
   below), so this constraint is dropped there and the text just flows naturally. */
@media (min-width: 901px) {
  .team-copy {
    max-height: 293px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg);
    padding-right: 14px;
  }
}

.team-values {
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--hairline);
  display: flex; align-items: center; gap: 28px;
}
.values-mark {
  font-family: var(--font-serif);
  font-size: 32px;
  border: 1px solid var(--accent-dim);
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-bright);
  box-shadow: 0 0 24px -8px var(--accent-glow);
}
.team-values p {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); line-height: 2;
}
.team-values em { font-style: normal; color: var(--accent); }

/* ============================================
   CONTACT
============================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
}

.contact-firm-name { font-family: var(--font-serif); font-size: 20px; margin-bottom: 14px; }
.contact-address address {
  font-style: normal;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 24px;
}
.contact-phone { margin-bottom: 12px; }
.contact-phone a {
  color: var(--accent-bright);
  font-size: 15px;
  border-bottom: 1px solid var(--accent-dim);
  transition: border-color 0.3s ease;
}
.contact-phone a:hover { border-color: var(--accent-bright); }
.contact-map {
  aspect-ratio: 4/3;
  border: 1px solid var(--hairline);
  overflow: hidden;
  filter: invert(90%) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}
.contact-map iframe { display: block; width: 100%; height: 100%; }

/* ---- Contact form (shared: inline section + "Schedule a Consultation" modal) ---- */
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.form-required { color: var(--accent-bright); }
.form-optional { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 10px; }
.form-field input,
.form-field textarea {
  background: var(--panel);
  border: 1px solid var(--hairline);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px 14px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-field textarea { resize: vertical; min-height: 100px; }
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-submit { border: none; align-self: flex-start; margin-top: 4px; }

/* ---- Success / error states ---- */
.contact-form-container { position: relative; }
.contact-form,
.form-success {
  transition: opacity 0.3s ease;
}
.contact-form.is-hidden,
.form-success.is-hidden {
  opacity: 0;
}
.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 56px 20px;
  color: var(--accent-bright);
}
.form-success p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.form-error {
  color: #ff8a8a;
  font-size: 13px;
  margin-top: -6px;
}
.form-submit.is-loading { opacity: 0.6; pointer-events: none; }
/* ============================================
   BUTTONS
============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, transform 0.25s ease, background 0.35s ease;
}
.btn svg { flex-shrink: 0; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #05070c;
}
/* Diagonal light sweep on hover — the "dynamic" cue on the primary CTA */
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.btn-primary:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  box-shadow: 0 0 24px -4px var(--accent-glow), 0 10px 26px -10px rgba(0, 0, 0, 0.55);
  transform: translateY(-2px);
}
.btn-primary:hover::before { left: 130%; }
.btn-primary:active { transform: translateY(0) scale(0.97); }

.btn-ghost {
  background: transparent;
  border-color: var(--hairline);
  color: var(--text);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent-bright);
  box-shadow: 0 0 16px -6px var(--accent-glow);
  transform: translateY(-2px);
}



/* ---- Schedule-a-Consultation modal: form needs a bit more room than the service modal ---- */
.contact-modal { height: min(640px, 86vh); }
.contact-modal .modal-scroll { padding-right: 10px; }
.contact-arrow { position: absolute; right: 28px; color: var(--accent); }

/* ============================================
   SCROLL REVEAL
============================================ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================
   FOOTER
============================================ */
.site-footer {
  padding: 40px var(--gutter);
  border-top: 1px solid var(--hairline);
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.footer-brand { display: flex; align-items: center; gap: 16px; }
.mini-bulb-wrap {
  position: relative;
  display: block;
  height: 76px; /* matches the rendered height of the 4-line .footer-values text beside it */
  line-height: 0;
}
.mini-bulb-wrap img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
}
.mini-bulb-off { position: relative; } /* normal flow — defines the wrap's box */
.mini-bulb-on {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 400ms ease;
  filter: drop-shadow(0 0 10px var(--accent-glow));
}
.mini-bulb-wrap:hover .mini-bulb-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mini-bulb-on { transition: opacity 200ms ease; }
}
.footer-values {
  font-size: 11px;
  letter-spacing: 0.05em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-values em { font-style: normal; color: var(--accent-bright); }

.footer-social-block { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.footer-social-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.footer-social { display: flex; align-items: center; gap: 18px; }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.footer-social a:hover { transform: translateY(-2px); filter: brightness(1.3); }
.footer-social img { width: 22px; height: 22px; }

.site-footer p { align-self: center; }

@media (max-width: 640px) {
  .site-footer { flex-direction: column; align-items: center; gap: 28px; text-align: center; }
  .footer-brand { flex-direction: column; }
  .footer-social-block { align-items: center; }
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 900px) {
  :root { --index-col: 0px; }
  .nav-links {
    display: none;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 240px;
    background: var(--panel-2);
    flex-direction: column;
    padding: 100px 32px;
    gap: 28px;
    border-left: 1px solid var(--hairline);
  }
  .nav-links.is-open { display: flex; }
  .nav-toggle { display: flex; z-index: 60; }

  .section { padding: 90px 24px; }
  .index-num { position: static; display: block; margin-bottom: 24px; }
  .hero { grid-template-columns: 1fr; text-align: left; padding-top: 120px; }
  .hero-graphic { order: -1; height: 240px; opacity: 0.6; }
  .service-row { grid-template-columns: 1fr; }
  .service-item, .service-item:not(:last-child) { border-right: none; border-bottom: 1px solid var(--hairline); padding: 32px 0; }
  .resource-grid { grid-template-columns: 1fr; }
  .team-member { grid-template-columns: 1fr; }
  .team-photo { max-width: 220px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .team-values { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ============================================
   SERVICE DETAIL MODAL
============================================ */
.service-item { cursor: pointer; }

.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6, 7, 10, 0.85);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  position: relative;
  width: min(560px, 100%);
  height: min(560px, 82vh);
  display: flex;
  flex-direction: column;
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  box-shadow: 0 40px 80px -32px rgba(0,0,0,0.6), 0 0 0 1px var(--hairline);
  padding: 56px 48px 88px;
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
.modal-overlay.is-open .modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg);
  padding-right: 8px;
  transition: opacity 0.2s ease;
}
.modal-scroll.is-switching { opacity: 0; }

.modal-scroll h3 { font-size: 26px; margin-bottom: 18px; }
.modal-scroll p#modalText { color: var(--muted); font-size: 15px; line-height: 1.8; margin-bottom: 12px; }

.modal-cta {
  flex-shrink: 0;
  margin-top: 24px;
  border: none;
  cursor: pointer;
  align-self: flex-start;
}

.modal-close {
  position: absolute; top: 24px; right: 24px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--hairline);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.modal-close:hover { color: var(--accent-bright); border-color: var(--accent-dim); transform: rotate(90deg); }

.modal-nav {
  position: absolute; bottom: 28px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--hairline);
  color: var(--accent-bright);
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.modal-nav:hover { border-color: var(--accent); box-shadow: 0 0 16px -4px var(--accent-glow); }
.modal-prev { left: 48px; }
.modal-prev:hover { transform: translateX(-3px); }
.modal-next { right: 48px; }
.modal-next:hover { transform: translateX(3px); }
.modal-nav[hidden] { display: none; }

@media (max-width: 640px) {
  .modal { height: min(560px, 78vh); padding: 48px 28px 80px; }
  .modal-prev { left: 24px; }
  .modal-next { right: 24px; }
}