/* =========================================================
   Motion Code Labs — "Screening Room"  (design_variant: screening)
   Ported from the v2 redesign (theme.css + storyboard.css).
   Bridged to the admin DB:
     --accent      ← Style → Skins colour  (--skinscolor)
     --ff-serif    ← Style → Fonts → Hero  (--ff-hero)
     --ff-sans     ← Style → Fonts → Body  (--ff-body)
     --ff-mono     ← Style → Fonts → Accent(--ff-accent)
   Everything else is the editorial frame. The work supplies the colour.
   ========================================================= */

:root {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Light — warm paper */
  --bg: #F4EEE5;
  --bg-2: #ECE4D7;
  /* soft charcoal grey ink — NOT black, NOT brown */
  --ink: #3A3D43;
  --ink-soft: #5A5E66;
  --muted: rgba(58, 61, 67, 0.66);
  --faint: rgba(58, 61, 67, 0.45);
  --line: rgba(58, 61, 67, 0.16);
  --line-soft: rgba(58, 61, 67, 0.09);
  --card: #FBF7F0;
  --accent: var(--skinscolor, #2997ab);       /* Joami's brand teal — DB-driven */
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --shadow: 0 1px 2px rgba(28,27,23,0.04), 0 24px 48px -16px rgba(28,27,23,0.18);

  /* Type identity — fully DB-driven via the admin font pickers (options.php
     injects --ff-heading / --ff-navbar / --ff-body / --ff-accent etc. from
     Style → Fonts). The design folder fonts are the fallbacks, and the admin
     slots are pre-set to those, so it looks right AND every font is editable.
     No serif anywhere. Accent COLOUR is DB-driven via --skinscolor above. */
  --ff-serif: var(--ff-heading, 'Bricolage Grotesque', 'Space Grotesk', system-ui, sans-serif);
  --ff-brand: var(--ff-navbar, 'Lato', system-ui, sans-serif);
  --ff-sans:  var(--ff-body, 'Plus Jakarta Sans', system-ui, sans-serif);
  --ff-mono:  var(--ff-accent, 'Space Mono', ui-monospace, monospace);
  /* mode-aware heading fonts: render = serif/grotesque, storyboard flips to
     handwriting. ONE source of truth so headings stay consistent everywhere. */
  --ff-display: var(--ff-serif);                        /* section / main headings (heading slot) */
  --ff-card:    var(--ff-subsection, var(--ff-serif));  /* card / sub headings (sub-section slot) */

  --container: 1280px;
  --pad: clamp(20px, 4vw, 56px);
  --nav-h: 76px;
}

.theme-dark {
  --bg: #16150F;
  --bg-2: #1C1A13;
  --ink: #EFE8DA;
  --muted: rgba(239, 232, 218, 0.60);
  --faint: rgba(239, 232, 218, 0.40);
  --line: rgba(239, 232, 218, 0.16);
  --line-soft: rgba(239, 232, 218, 0.08);
  --card: #201E16;
  --accent: var(--skinscolor, #45bcd2);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 28px 56px -18px rgba(0,0,0,0.7);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-sans);
  font-size: var(--fs-body, 16px);
  font-weight: var(--fw-body, 400);
  line-height: 1.6;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--accent-soft); }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

/* serif display voice */
.serif { font-family: var(--ff-serif); font-weight: 400; line-height: 0.98; letter-spacing: -0.01em; }
.serif em, em.serif { font-style: normal; }

/* small tracked label */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-accent, var(--ff-mono)); font-size: var(--fs-accent, 0.72rem); font-weight: var(--fw-accent, 600); letter-spacing: 0.16em; text-transform: none;
  color: var(--faint);
}
.eyebrow .idx { color: var(--accent); font-variant-numeric: tabular-nums; }

/* full-width content (edge-to-edge with --pad gutters), like the old multipage */
.container { width: 100%; max-width: none; margin: 0 auto; padding: 0 var(--pad); }

section { position: relative; }
#work, #about, #experience, #contact { scroll-margin-top: calc(var(--nav-h) + 16px); }
.block { padding: clamp(72px, 11vw, 150px) 0; }
.block--tint { background: var(--bg-2); }
.mode-render #work { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, var(--ink)) 0%, var(--bg) 100%); }
.divider { height: 1px; background: var(--line-soft); }

/* section header */
/* small label (eyebrow) ALWAYS sits FIRST — above the heading — consistently */
.sec-head { margin-bottom: clamp(36px, 5vw, 64px); max-width: 760px; display: flex; flex-direction: column; }
.sec-head .eyebrow { order: 1; margin: 0 0 16px; }
.sec-head .sec-title { order: 2; }
.sec-title { font-family: var(--ff-serif); font-size: clamp(2.4rem, 5.5vw, 4.2rem); line-height: 0.98; letter-spacing: -0.015em; }
.sec-title em { font-style: normal; }
.sec-lead { margin-top: 18px; color: var(--muted); font-size: 1.05rem; max-width: 540px; }

.accent { color: var(--accent); }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: sticky; top: 0; z-index: 60; min-height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.nav.scrolled { border-color: var(--line-soft); }
/* full-width nav — edge padding instead of a centered container. The inline
   nav holds ALL enabled pages, so it wraps to 1–2 lines on narrower desktops. */
.nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 14px clamp(12px, 2vw, 28px); padding: 10px var(--pad); }
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark { height: 36px; width: auto; flex-shrink: 0; }
/* light / dark logo variants — matches the design folder */
.brand-mark--dark { display: none; }
.theme-dark .brand-mark--light { display: none; }
.theme-dark .brand-mark--dark { display: block; }
/* wordmark — teal brand name, not bold, no brackets (the [ ] belongs on the active nav link) */
.brand-name { font-family: var(--ff-brand); font-weight: var(--fw-navbar, 600); font-size: 1.12rem; letter-spacing: 0.01em; color: var(--accent); white-space: nowrap; }

/* inline nav (desktop) — every enabled page; wraps to 1–2 lines as needed.
   The active page is bracketed: [ Home ] */
.nav-links { display: flex; align-items: center; align-content: center; justify-content: center; flex: 1 1 auto; min-width: 0; gap: 4px clamp(6px, 0.9vw, 16px); flex-wrap: wrap; }
.nav-links a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ff-brand); font-size: var(--fs-navbar, 0.82rem); font-weight: var(--fw-navbar, 400); color: var(--muted); padding: 4px 4px; white-space: nowrap; transition: color .2s var(--ease); }
.nav-links a i { font-size: 1.05em; line-height: 1; color: var(--accent); }
.nav-links a:hover { color: var(--ink); }
/* active page → teal + bracketed label, matching the mobile menu */
.nav-links a.active { color: var(--accent); }
.nav-links a.active span::before { content: '['; margin-right: 5px; }
.nav-links a.active span::after  { content: ']'; margin-left: 5px; }

.nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: border-color .2s var(--ease), background .2s var(--ease); padding: 0; }
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .moon { display: none; }
.theme-dark .theme-toggle .moon { display: block; }
.theme-dark .theme-toggle .sun { display: none; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-buttons, var(--ff-sans)); font-size: var(--fs-buttons, 0.85rem); font-weight: var(--fw-buttons, 500); line-height: 1;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ink); background: var(--ink); color: var(--bg);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn svg { transition: transform .2s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.theme-dark .btn--accent { color: #11221F; }

/* hamburger is desktop-hidden — it only appears when the inline nav collapses */
.hamb { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 4px; transition: border-color .2s var(--ease); }
.hamb:hover { border-color: var(--accent); }
.hamb span { width: 17px; height: 1.6px; background: var(--ink); border-radius: 2px; }

/* =========================================================
   HERO
   ========================================================= */
/* Onepage in-page anchor targets — offset for the fixed navbar on scroll. */
.sc-anchor { display: block; height: 0; scroll-margin-top: 88px; }
.sc-anchor-sec { scroll-margin-top: 88px; }
.hero { padding: clamp(48px, 9vw, 110px) 0 clamp(40px, 7vw, 84px); }
/* Optional hero backdrops (Settings → Homepage → background video / particles) */
.hero:has(.hero-bg-video), .hero:has(#particles-js) { position: relative; }
.hero .hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero:has(.hero-bg-video)::after { content: ''; position: absolute; inset: 0; background: var(--bg); opacity: 0.78; z-index: 0; }
.hero #particles-js { position: absolute; inset: 0; z-index: 0; }
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(36px, 6vw, 100px); align-items: center; }
.hero-eyebrow { margin-bottom: 28px; }
/* Footer client logos (Settings → Footer → Clients) */
.foot-clients { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 48px); align-items: center; justify-content: center; padding-bottom: 26px; margin-bottom: 22px; border-bottom: 1px solid var(--line-soft); }
.foot-clients img { max-height: 34px; width: auto; opacity: 0.6; filter: grayscale(1); transition: opacity .2s var(--ease), filter .2s var(--ease); }
.foot-clients a:hover img { opacity: 1; filter: none; }
/* Background music toggle (Settings → Sidebar → music) */
.sc-music { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); transition: transform .2s var(--ease); }
.sc-music:hover { transform: scale(1.06); }
.sc-music svg { width: 20px; height: 20px; }
.sc-music .sc-music-on { display: none; }
.sc-music .sc-music-off { display: block; }
.sc-music.is-playing .sc-music-on { display: block; }
.sc-music.is-playing .sc-music-off { display: none; }
.sc-music.is-playing { color: var(--accent); border-color: var(--accent); }
.hero-typed { margin-top: 20px; font-family: var(--ff-mono, monospace); font-size: clamp(0.95rem, 1.4vw, 1.15rem); color: var(--ink); }
.hero-typed-lead { color: var(--muted); }
.hero-typed .typed-words { color: var(--accent); font-weight: 600; }
.hero-typed .typed-caret { display: inline-block; width: 2px; height: 1.05em; vertical-align: text-bottom; margin-left: 2px; background: var(--accent); animation: typed-blink 1s steps(1) infinite; }
@keyframes typed-blink { 50% { opacity: 0; } }
.hero-title { font-family: var(--ff-hero, var(--ff-serif)); font-weight: var(--fw-hero, 600); font-size: var(--fs-hero, clamp(2.7rem, 7vw, 5.8rem)); line-height: 0.96; letter-spacing: -0.02em; text-wrap: balance; hyphens: none; }
.hero-title .u-word { white-space: nowrap; }
.hero-title em { font-style: normal; color: var(--accent); }
.hero-title .amp { font-family: var(--ff-serif); font-style: normal; color: var(--accent); }
.hero-sub { margin-top: 24px; font-size: clamp(0.95rem, 1.25vw, 1.08rem); color: var(--muted); max-width: 460px; line-height: 1.6; }
.hero-actions { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-meta { margin-top: 42px; display: flex; gap: 34px; flex-wrap: wrap; }
.hero-meta .k { font-family: var(--ff-serif); font-size: 2rem; line-height: 1; }
.hero-meta .l { font-size: 0.78rem; color: var(--faint); letter-spacing: 0.06em; margin-top: 6px; text-transform: none; }

/* hero reel — a 35mm filmstrip of the featured work */
.hero-reel { position: relative; justify-self: end; width: clamp(238px, 30vw, 356px); }
.reel-head { display: inline-flex; align-items: center; gap: 9px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: none; color: var(--faint); margin-bottom: 16px; }
.reel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: reelpulse 2.4s var(--ease) infinite; }
@keyframes reelpulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); } 55% { box-shadow: 0 0 0 7px transparent; } }
.filmstrip { position: relative; background: #1b1916; border-radius: 12px; padding: 16px 22px; display: flex; flex-direction: column; gap: 13px; transform: rotate(-6deg); box-shadow: var(--shadow); }
.theme-dark .filmstrip { background: #0e0d0b; box-shadow: 0 26px 60px -18px rgba(0,0,0,0.82); }
.filmstrip::before, .filmstrip::after { content: ''; position: absolute; top: 13px; bottom: 13px; width: 7px; background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,0.82) 0 9px, transparent 9px 19px); border-radius: 2px; }
.filmstrip::before { left: 8px; }
.filmstrip::after { right: 8px; }
.film-frame { position: relative; display: block; aspect-ratio: 16/10; border-radius: 3px; overflow: hidden; background: #000; }
.film-frame img { width: 100%; height: 100%; object-fit: cover; }
.film-frame-play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .25s var(--ease); }
.film-frame-play svg { width: 30px; height: 30px; color: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6)); }
.film-frame:hover .film-frame-play { opacity: 1; }
.film-frame-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 11px 8px; font-size: 0.74rem; font-weight: 500; color: #fff; line-height: 1.22; background: linear-gradient(transparent, rgba(0,0,0,0.8)); }
.reel-status { position: absolute; left: -16px; bottom: -16px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 0.74rem; color: var(--muted); box-shadow: var(--shadow); display: flex; align-items: center; gap: 7px; z-index: 4; }
.reel-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* hero emblem — the studio mark + name as a circular seal, stamped a touch
   below the reel's corner. A double accent ring + a thin divider between the
   mark and the wordmark give it craft without any spinning/gimmicks. */
.hero-emblem {
  position: absolute; top: 0; left: 0;
  transform: translate(-58%, 104%) rotate(-5deg);
  z-index: 7; text-decoration: none;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,0.30));
}
.emblem-disc {
  position: relative; display: block; overflow: hidden;
  width: clamp(120px, 12vw, 150px); aspect-ratio: 1; border-radius: 50%;
  background: var(--card);
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  transition: transform .4s var(--ease), border-color .3s var(--ease);
}
/* Logo fills the whole circular seal (admin logo from the DB), no caption. */
.emblem-mark { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-emblem:hover .emblem-disc { transform: scale(1.04); border-color: var(--accent); }
/* hero title accent word (no italic, no underline) */
.hero-accent { color: var(--accent); }

/* =========================================================
   WORK — card gallery
   ========================================================= */
/* .work-head also carries .sec-head (which is flex-column for eyebrow order);
   force it back to a row so the copy stays LEFT and the filter goes RIGHT. */
.work-head { max-width: none; display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.work-head-copy { max-width: 620px; }
.work-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ff-sans); font-size: 0.86rem; font-weight: 500; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip-n { font-size: 0.7rem; opacity: 0.55; font-variant-numeric: tabular-nums; }

.work-cards { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: clamp(26px, 3vw, 42px) clamp(22px, 2.4vw, 34px); padding-top: 14px; }

/* Admin Portfolio options (Settings → Portfolio) honoured by the gallery: */
/* page_subtitle as a descriptive line under the headline (work + résumé) */
.sec-head .sec-sub, .work-head .sec-sub { margin-top: 10px; color: var(--muted); font-size: 0.95rem; max-width: 56ch; }
/* load more — hidden cards + button */
.work-cards .wcard.is-loadmore-hidden { display: none; }
.work-loadmore { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 48px); }
/* layoutmode: masonry packs cards with CSS columns; fitRows = the default grid */
.work-section.layout-masonry .work-cards { display: block; column-count: var(--cols, 3); column-gap: clamp(22px, 2.4vw, 34px); }
.work-section.layout-masonry .work-cards .wcard { break-inside: avoid; margin-bottom: clamp(26px, 3vw, 42px); }
@media (max-width: 860px) { .work-section.layout-masonry .work-cards { column-count: 2; } }
@media (max-width: 560px) { .work-section.layout-masonry .work-cards { column-count: 1; } }
/* Per-section background IMAGE (admin Settings → [section] → Background → Image).
   Applied in render mode; storyboard keeps its paper texture. The Dark/None
   options are intentionally inert in the Screening design — dark/light is
   controlled globally by the theme toggle, and forcing a per-section dark
   background would override the chosen look. */
.sec-bg-bgimage { position: relative; background-size: cover; background-position: center; }
.sec-bg-bgimage > .container { position: relative; z-index: 1; }
.sec-bg-bgimage::before { content: ''; position: absolute; inset: 0; background: var(--bg); opacity: 0.85; z-index: 0; }

.wcard { display: flex; flex-direction: column; position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.wcard.is-hidden { display: none; }

/* RENDER MODE — clean elevated cards (depth, not flat) */
.mode-render .wcard {
  background: var(--card);
  padding: 12px 12px 16px;
  border-radius: 16px;
  border: 1px solid var(--line-soft);
  box-shadow: 0 1px 2px rgba(28,27,23,0.04), 0 16px 30px -18px rgba(28,27,23,0.28);
}
.theme-dark .mode-render .wcard { box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 20px 36px -18px rgba(0,0,0,0.7); }
.mode-render .wcard:hover { transform: translateY(-7px); border-color: var(--line); box-shadow: 0 2px 4px rgba(28,27,23,0.05), 0 34px 56px -22px rgba(28,27,23,0.40); }
.theme-dark .mode-render .wcard:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 40px 66px -24px rgba(0,0,0,0.85); }

.wcard-thumb { position: relative; aspect-ratio: 16/10; border-radius: 11px; overflow: hidden; background: var(--bg-2); }
.wcard-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wcard-play { position: absolute; inset: 0; display: grid; place-items: center; }
.wcard-play span { width: 54px; height: 54px; border-radius: 50%; background: rgba(0,0,0,0.34); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.5); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(0.9); transition: opacity .3s var(--ease), transform .3s var(--ease), background .3s var(--ease); }
.wcard-play svg { width: 20px; height: 20px; }
.wcard:hover .wcard-play span { opacity: 1; transform: scale(1); background: var(--accent); border-color: var(--accent); }
.wcard-yr { position: absolute; top: 12px; left: 12px; font-family: var(--ff-serif); font-size: 0.92rem; color: #fff; background: rgba(0,0,0,0.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 3px 11px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.wcard-yr { font-family: var(--ff-mono); }
/* type badge — top-right of the thumb */
.wcard-type { position: absolute; top: 12px; right: 12px; font-family: var(--ff-mono); font-size: 0.62rem; letter-spacing: 0.08em; color: #fff; background: color-mix(in srgb, var(--accent) 82%, #000); padding: 3px 9px; border-radius: 999px; }
.wcard-body { padding: 14px 6px 2px; }
.wcard-cat { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: none; color: var(--accent); }
.wcard-title { font-family: var(--ff-subsection, var(--ff-serif)); font-size: clamp(0.98rem, 1.15vw, 1.12rem); font-weight: 500; line-height: 1.12; margin-top: 8px; transition: color .2s var(--ease); }
.wcard:hover .wcard-title { color: var(--accent); }
.wcard-tags { margin-top: 7px; font-size: 0.78rem; color: var(--faint); }

/* card actions — external CTA (video/website/lightbox) + View details */
.wcard-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.wcard-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ff-sans); font-size: 0.78rem; font-weight: 600; line-height: 1; padding: 8px 13px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--ink); transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.wcard-btn svg { width: 13px; height: 13px; }
.wcard-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.theme-dark .wcard-btn--primary { color: #11221F; }
.wcard-btn--primary:hover { transform: translateY(-2px); }
.wcard-btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.wcard-btn--ghost span { transition: transform .2s var(--ease); }
.wcard-btn--ghost:hover span:last-child { transform: translateX(3px); }

/* ---------- lightbox (iframe / video previews) ---------- */
.sc-lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 4vw; background: color-mix(in srgb, #000 78%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sc-lightbox.is-open { display: flex; }
.sc-lightbox-inner { position: relative; width: min(1040px, 100%); }
.sc-lightbox-stage { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 120px -30px rgba(0,0,0,0.8); }
.sc-lightbox-stage iframe, .sc-lightbox-stage video, .sc-lightbox-stage img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; }
.sc-lightbox-close { position: absolute; top: -14px; right: -14px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--card); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6); }
@media (max-width: 600px) { .sc-lightbox-close { top: 8px; right: 8px; } }

/* =========================================================
   ABOUT
   ========================================================= */
.about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.about-portrait { border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; background: var(--bg-2); position: sticky; top: calc(var(--nav-h) + 28px); box-shadow: 0 2px 4px rgba(28,27,23,0.05), 0 26px 50px -22px rgba(28,27,23,0.42); }
.theme-dark .about-portrait { box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 30px 56px -22px rgba(0,0,0,0.8); }
/* RENDER MODE — framed photo with a subtle mat border */
.mode-render .about-portrait { border: 8px solid var(--card); }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-body p { font-size: 0.95rem; line-height: 1.68; color: var(--muted); margin: 0 0 16px; }
.about-body p.lead { font-family: var(--ff-card); font-size: clamp(1.3rem, 2.3vw, 1.75rem); line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 24px; }
.about-body p.lead em { font-style: normal; color: var(--accent); }
.about-meta { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 26px; }
.about-meta span { display: inline-flex; align-items: center; gap: 9px; font-size: 0.88rem; color: var(--ink); }
.about-meta svg { width: 17px; height: 17px; color: var(--accent); }
.about-meta .avail-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.about-tools { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.about-tools .lbl { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: none; color: var(--faint); margin-bottom: 14px; }
.tool-list { display: flex; flex-wrap: wrap; gap: 8px 0; line-height: 1.4; }
.tool-list span { font-size: 0.9rem; color: var(--ink); }
.tool-list span::after { content: '·'; color: var(--faint); margin: 0 11px; }
.tool-list span:last-child::after { content: ''; margin: 0; }

/* =========================================================
   RÉSUMÉ — experience timeline + education
   ========================================================= */
.resume-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(36px, 5vw, 76px); align-items: start; }
/* standalone /experience or /education only fill one column — go full width there */
#screening-page .resume-grid:not(:has(.edu-col)),
#screening-page .resume-grid:not(:has(.exp-col)) { grid-template-columns: 1fr; }
.col-label { display: inline-flex; align-items: center; gap: 10px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: none; color: var(--faint); margin-bottom: 26px; }
.col-label svg { width: 16px; height: 16px; color: var(--accent); }

.exp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.exp-row { display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 0 0 38px; position: relative; }
.exp-row:last-child { padding-bottom: 0; }
/* timeline rail down the logo column */
.exp-rail { position: relative; }
.exp-rail::before { content: ''; position: absolute; left: 50%; top: 56px; bottom: -38px; width: 2px; background: var(--line); transform: translateX(-50%); }
.exp-row:last-child .exp-rail::before { display: none; }
.exp-logo { width: 52px; height: 52px; border-radius: 13px; object-fit: contain; background: var(--card); border: 1px solid var(--line); padding: 8px; position: relative; z-index: 1; }
.exp-logo--empty { display: grid; place-items: center; font-family: var(--ff-card); font-size: 1.4rem; color: var(--accent); }

.exp-main { min-width: 0; padding-top: 2px; }
/* RENDER MODE — each role sits on an elevated card */
.mode-render .exp-main { background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px; padding: clamp(18px, 2vw, 24px); box-shadow: 0 1px 2px rgba(28,27,23,0.04), 0 14px 28px -18px rgba(28,27,23,0.26); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.theme-dark .mode-render .exp-main { box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 16px 30px -18px rgba(0,0,0,0.6); }
.mode-render .exp-row:hover .exp-main { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(28,27,23,0.05), 0 22px 40px -20px rgba(28,27,23,0.36); }
.mode-render .exp-rail::before { left: 26px; }
.exp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; }
.exp-role { font-family: var(--ff-card); font-weight: var(--fw-subsection, 500); font-size: calc(var(--fs-subsection, 1.25rem) * 1.25); line-height: 1.06; letter-spacing: -0.01em; }
.exp-period { display: inline-flex; align-items: center; gap: 7px; font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.2rem; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.exp-period svg { width: 14px; height: 14px; }
.exp-co { font-family: var(--ff-subsubsection, var(--ff-sans)); font-size: var(--fs-subsubsection, 0.95rem); font-weight: var(--fw-subsubsection, 600); color: var(--accent); margin-top: 5px; }
.exp-points { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
.exp-points p { margin: 0 0 8px; }
.exp-points p:last-child { margin-bottom: 0; }
.exp-stack { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.exp-stack span { font-size: 0.76rem; font-weight: 500; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 7px; padding: 4px 10px; }
.mode-render .exp-stack span { background: var(--bg); }

/* education panel */
.edu-col { position: sticky; top: calc(var(--nav-h) + 28px); background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: clamp(22px, 2.5vw, 30px); box-shadow: var(--shadow); }
.edu-list { list-style: none; margin: 0; padding: 0; }
.edu-item { padding: 16px 0; border-top: 1px solid var(--line-soft); display: flex; gap: 12px; align-items: flex-start; }
.edu-item:first-child { padding-top: 0; border-top: 0; }
.edu-item:last-child { padding-bottom: 0; }
/* Education entry logo = the post's Featured Image (admin-driven), matching
   the experience badge so résumé columns read consistently. */
.edu-logo { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: var(--card); border: 1px solid var(--line); padding: 6px; }
.edu-body { flex: 1 1 auto; min-width: 0; }
.edu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.edu-t { font-size: 0.96rem; font-weight: 600; line-height: 1.3; }
.edu-y { font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.2rem; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.edu-o { font-size: 0.86rem; color: var(--muted); margin-top: 4px; }
.edu-cv { margin-top: 24px; width: auto; align-self: flex-start; justify-content: center; }
.edu-cv svg { width: 16px; height: 16px; }
.edu-cv:hover svg { transform: translateY(2px); }

/* =========================================================
   CONTACT + FOOTER
   ========================================================= */
.contact { text-align: center; padding: clamp(90px, 13vw, 180px) 0; }
.contact .eyebrow { margin-bottom: 26px; justify-content: center; }
.contact h2 { font-family: var(--ff-serif); font-size: clamp(2.6rem, 8vw, 6rem); line-height: 0.96; letter-spacing: -0.02em; }
.contact h2 em { font-style: normal; color: var(--accent); }
.contact-email { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; padding: 11px 20px 11px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(28,27,23,0.04), 0 14px 28px -18px rgba(28,27,23,0.3); font-family: var(--ff-mono); font-size: clamp(0.9rem, 1.5vw, 1.1rem); color: var(--ink); transition: border-color .2s var(--ease), transform .2s var(--ease); }
.theme-dark .contact-email { box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 16px 30px -18px rgba(0,0,0,0.7); }
.contact-email:hover { border-color: var(--accent); transform: translateY(-2px); }
.contact-email-ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.contact-email-ico svg { width: 18px; height: 18px; }
.contact-place { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--muted); }
.contact-place svg { width: 15px; height: 15px; color: var(--accent); }
.contact-follow { margin-top: 46px; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: none; color: var(--faint); }
.contact-actions { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.contact-actions .btn svg { width: 16px; height: 16px; }

/* Contact form (admin Settings → Contact → Send to) — screening-styled */
.contact-form-wrap { margin: 40px auto 0; max-width: 620px; text-align: left; position: relative; background: var(--card); border-radius: 18px; padding: clamp(22px, 3vw, 36px); box-shadow: var(--shadow); }
.contact-form-head { text-align: center; margin-bottom: 18px; }
.contact-form-head h3 { font-family: var(--ff-card); font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.contact-form-head p { color: var(--muted); font-size: 0.95rem; margin-top: 6px; }
.contact-form-success { margin: 0 auto 18px; max-width: 620px; padding: 12px 16px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); font-size: 0.92rem; }
.contact-form .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .contact-form .cf-row { grid-template-columns: 1fr; } }
.contact-form .cf-field { display: block; margin-bottom: 16px; }
.contact-form .cf-field > span { display: block; font-size: 0.8rem; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.contact-form input, .contact-form textarea { width: 100%; padding: 10px 2px; border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font-family: inherit; font-size: 0.95rem; transition: border-color .2s var(--ease); }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-bottom-color: var(--accent); box-shadow: none; }
.contact-form input.is-error, .contact-form textarea.is-error { border-bottom-color: #d9534f; }
.contact-form .cf-err { display: block; margin-top: 5px; font-size: 0.8rem; color: #d9534f; font-style: normal; }
.contact-form button[type="submit"] { margin-top: 6px; }
/* Contact map (admin Settings → Contact → Map) */
.contact-map { margin: 44px auto 0; max-width: 900px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.contact-map iframe { display: block; width: 100%; height: 360px; border: 0; }
/* About video block (admin Settings → About → Video) */
.about-video { position: relative; margin-top: 40px; border-radius: 18px; overflow: hidden; min-height: 320px; background: var(--bg-2) center / cover no-repeat; display: grid; place-items: center; box-shadow: var(--shadow); }
.about-video::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.35); }
.about-video-play { position: relative; z-index: 1; width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .2s var(--ease); }
.about-video-play:hover { transform: scale(1.08); }
.about-video-play svg { width: 30px; height: 30px; margin-left: 3px; }
.about-video-cap { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 22px 24px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.6)); }
.about-video-cap h3 { font-family: var(--ff-card); font-size: clamp(1.1rem, 2.2vw, 1.5rem); }
.about-video-cap p { font-size: 0.92rem; opacity: 0.9; margin-top: 4px; }
.contact-socials { margin: 18px auto 0; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; max-width: 720px; }
.social-card { display: inline-flex; align-items: center; gap: 13px; padding: 13px 18px 13px 14px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--card); box-shadow: 0 1px 2px rgba(28,27,23,0.04), 0 12px 24px -18px rgba(28,27,23,0.28); transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); text-align: left; }
.theme-dark .social-card { box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 14px 26px -18px rgba(0,0,0,0.65); }
.social-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 2px 4px rgba(28,27,23,0.05), 0 22px 38px -20px rgba(28,27,23,0.4); }
.social-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.social-ico svg { width: 19px; height: 19px; }
.social-ico i { font-size: 19px; }
.social-meta { display: flex; flex-direction: column; line-height: 1.3; }
.social-meta b { font-size: 0.9rem; font-weight: 600; }
.social-meta i { font-style: normal; font-size: 0.8rem; color: var(--muted); }
.social-card > svg { width: 14px; height: 14px; color: var(--faint); margin-left: 2px; transition: transform .2s var(--ease), color .2s var(--ease); }
.social-card:hover > svg { color: var(--accent); transform: translate(2px, -2px); }

footer.screening-footer { border-top: 1px solid var(--line); padding: 30px 0; }
.foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.foot-brand { flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; }
.foot-logo { height: 44px; width: auto; border-radius: 8px; }
.foot-brand b { font-family: var(--ff-brand); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; }
.foot-inner .c { font-size: 0.82rem; color: var(--faint); }
.socials { display: flex; gap: 10px; }
.socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); transition: color .2s var(--ease), border-color .2s var(--ease); }
.socials a:hover { color: var(--accent); border-color: var(--accent); }
.socials a svg { width: 17px; height: 17px; }
.socials a i { font-size: 17px; }

/* =========================================================
   HAND-DRAWN SIGNATURE MARKS — one restrained, elegant layer.
   ========================================================= */
.mark { display: inline-block; vertical-align: middle; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; overflow: visible; }
.mark path, .mark circle { vector-effect: non-scaling-stroke; }
.mark-sparkle { width: 14px; height: 14px; margin-right: 2px; fill: none; stroke: var(--accent); opacity: 0.95; }
.mark-sparkle.sm { width: 11px; height: 11px; }
.u-word { position: relative; display: inline-block; font-style: normal; color: var(--accent); }
.mark-underline { position: absolute; left: -3%; bottom: -0.2em; width: 106%; height: 0.32em; }
.mark-underline path { stroke-width: 2.6; }
.u-circle { position: relative; display: inline-block; padding: 0 0.12em; }
.mark-circle { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%) rotate(-2deg); width: 184%; height: 168%; }
.mark-circle path, .mark-circle circle { stroke-width: 2; }

@media (prefers-reduced-motion: no-preference) {
  .mark-sparkle { animation: twinkle 6s var(--ease) infinite; }
}
@keyframes twinkle { 0%, 100% { opacity: 0.92; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.9); } }

.float-spark { position: absolute; fill: var(--accent); stroke: none; pointer-events: none; z-index: 5; }
.float-spark.s1 { top: -16px; right: 12px; width: 18px; height: 18px; }
.float-spark.s2 { bottom: 36px; left: -22px; width: 13px; height: 13px; }
.anim-rise { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .float-spark, .mark-sparkle, .reel-dot { animation: none !important; }
}

/* =========================================================
   FULL MENU PANEL (hamburger → slide-in, every page + icon)
   ========================================================= */
.site-menu { position: fixed; inset: 0; z-index: 90; display: none; }
.site-menu.open { display: block; }
.site-menu::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, #000 44%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.site-menu-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(380px, 92vw);
  background: var(--bg); border-left: 1px solid var(--line);
  box-shadow: -34px 0 90px -34px rgba(0,0,0,0.55);
  padding: 20px 20px 28px; display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(100%); transition: transform .42s var(--ease);
}
.site-menu.open .site-menu-panel { transform: none; }
.site-menu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.site-menu-label { font-family: var(--ff-mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--faint); }
.mm-close { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: border-color .2s var(--ease); }
.mm-close:hover { border-color: var(--accent); }
.site-menu-links { display: flex; flex-direction: column; gap: 2px; }
.site-menu-links a { display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 12px; font-family: var(--ff-sans); font-size: 1rem; color: var(--ink); transition: background .18s var(--ease), color .18s var(--ease); }
.site-menu-links a i { width: 22px; font-size: 17px; color: var(--accent); text-align: center; flex-shrink: 0; }
.site-menu-links a:hover, .site-menu-links a.active { background: var(--accent-soft); color: var(--accent); }
/* active page → teal + bracketed label, matching the desktop nav */
.site-menu-links a.active span::before { content: '['; margin-right: 6px; color: var(--accent); }
.site-menu-links a.active span::after  { content: ']'; margin-left: 6px; color: var(--accent); }

/* icon toggle — nav_label_style: icon_text shows icons on BOTH desktop + mobile;
   text-only (body.nav-text / .nav-icon → no text) hides them on both */
body.nav-text .nav-links a i, body.nav-text .site-menu-links a i { display: none; }
.site-menu-cv { margin-top: 16px; justify-content: center; }

@media (max-width: 900px) {
  /* true mobile — collapse the inline nav into the hamburger panel */
  .nav-links { display: none; }
  .nav-right .btn { display: none; }
  .hamb { display: flex; }
}
@media (max-width: 1200px) {
  .work-head { flex-direction: column; align-items: flex-start; }
  .work-filter { width: 100%; }
  .work-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero-grid { gap: clamp(22px, 4vw, 44px); }
  .hero-reel { width: clamp(196px, 27vw, 280px); }
  .about-grid { grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 4vw, 44px); }
  .resume-grid { grid-template-columns: 1fr; gap: 48px; }
  .edu-col { position: relative; top: 0; }
}
@media (max-width: 760px) {
  .hero-reel { width: clamp(180px, 30vw, 240px); }
  .about-portrait { position: relative; top: 0; }
  .hero-meta { gap: 24px; }
}
@media (max-width: 900px) {
  .hero-emblem { transform: translate(-30%, 6%) rotate(-7deg) scale(0.9); }
}
@media (max-width: 640px) {
  .hero-grid { grid-template-columns: 1fr; gap: 38px; }
  .hero-reel { justify-self: start; width: min(320px, 100%); }
  .hero-emblem { transform: translate(-8%, -42%) rotate(-7deg) scale(0.82); }
  .filmstrip { transform: rotate(-3.5deg); }
  .about-grid { grid-template-columns: 1fr; gap: 30px; }
  .about-portrait { max-width: 280px; }
  .work-cards { grid-template-columns: 1fr; gap: 22px; }
  .hero-meta { gap: 22px; }
  .contact-actions { width: 100%; }
}
@media (max-width: 600px) {
  .exp-row { grid-template-columns: 40px 1fr; gap: 14px; }
  .exp-logo { width: 40px; height: 40px; border-radius: 10px; }
  .mode-render .exp-rail::before { left: 20px; }
  .exp-top { gap: 6px 14px; }
  .foot-inner { justify-content: center; text-align: center; }
  .social-card { width: 100%; }
}
@media (max-width: 420px) {
  .brand-name span { display: none; }
  .hero-meta { gap: 18px 26px; }
}

@media print {
  .nav, .mobile-menu, .theme-toggle, .hamb, .mode-switch { display: none !important; }
}

/* =========================================================
   STORYBOARD MODE — "THE BOARD"  (loaded after the render frame)
   ========================================================= */
.mode-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.mode-switch button { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ff-sans); font-size: 0.8rem; font-weight: 500; color: var(--muted); background: transparent; border: 0; cursor: pointer; padding: 7px 13px; border-radius: 999px; transition: color .2s var(--ease), background .2s var(--ease); }
.mode-switch button.on { background: var(--accent); color: #fff; }
.mode-switch button svg { width: 13px; height: 13px; }
@media (max-width: 640px) { .mode-switch .lbl { display: none; } .mode-switch button { padding: 8px; } }

.sb-only { display: none; }

.mode-storyboard {
  /* warm sketch-paper; pencil is a soft brown, never black */
  --bg: #EDE7DB;
  --bg-2: #E4DCCB;
  --ink: #4A3F35;
  --muted: rgba(74, 63, 53, 0.64);
  --faint: rgba(74, 63, 53, 0.46);
  --line: rgba(74, 63, 53, 0.26);
  --line-soft: rgba(74, 63, 53, 0.13);
  --card: #FBF7EF;
  --accent: var(--skinscolor, #1f8092);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --shadow: 0 1px 2px rgba(38,36,31,0.08), 0 16px 32px -16px rgba(38,36,31,0.32);
  /* storyboard flips all headings to handwriting */
  --ff-display: 'Caveat', cursive;
  --ff-card: 'Caveat', cursive;
}
.mode-storyboard.theme-dark {
  --bg: #16191B;
  --bg-2: #1E2225;
  --ink: #ECEAE4;
  --muted: rgba(236, 234, 228, 0.64);
  --faint: rgba(236, 234, 228, 0.42);
  --line: rgba(236, 234, 228, 0.20);
  --line-soft: rgba(236, 234, 228, 0.11);
  --card: #232729;
  --accent: var(--skinscolor, #45bcd2);
  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 20px 44px -20px rgba(0,0,0,0.7);
}
/* lined sketch-paper — the board reads as a working notepad, not a blueprint:
   warm paper wash + soft horizontal rule lines + a faint margin line. */
.mode-storyboard body {
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(transparent 0 33px, color-mix(in srgb, var(--ink) 8%, transparent) 33px 34px),
    linear-gradient(90deg, transparent 0 62px, color-mix(in srgb, #b4543f 34%, transparent) 62px 63px, transparent 63px),
    radial-gradient(150% 90% at 50% -16%, color-mix(in srgb, #fff 16%, transparent), transparent 60%),
    radial-gradient(120% 70% at 92% 4%, color-mix(in srgb, var(--ink) 7%, transparent), transparent 46%);
}
.mode-storyboard.theme-dark body {
  background-image:
    repeating-linear-gradient(transparent 0 33px, color-mix(in srgb, var(--ink) 11%, transparent) 33px 34px),
    linear-gradient(90deg, transparent 0 62px, color-mix(in srgb, #c9745f 28%, transparent) 62px 63px, transparent 63px),
    radial-gradient(150% 90% at 50% -16%, rgba(180,220,230,0.05), transparent 60%),
    radial-gradient(120% 70% at 92% 4%, rgba(0,0,0,0.18), transparent 46%);
}
.mode-storyboard .sb-only { display: block; }
.mode-storyboard .sb-hide { display: none !important; }

.mode-storyboard .eyebrow { font-family: 'Space Mono', monospace; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; color: var(--accent); }
.mode-storyboard .eyebrow .mark-sparkle { display: none; }
.mode-storyboard .eyebrow .idx { color: var(--ink); }

.sb-director { font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.5rem; line-height: 1.25; color: var(--accent); margin: 16px 0 0; max-width: 600px; transform: rotate(-0.6deg); }
.sb-director::before { content: '“'; }
.sb-director::after { content: '” — dir.'; font-size: 0.85em; opacity: 0.7; }

.mode-storyboard .film-frame,
.mode-storyboard .wcard-thumb,
.mode-storyboard .about-portrait { position: relative; border-radius: 2px; }
.mode-storyboard .film-frame::after,
.mode-storyboard .wcard-thumb::after,
.mode-storyboard .about-portrait::after {
  content: ''; position: absolute; inset: -3px; border: 2.5px solid var(--ink);
  border-radius: 3px; filter: url(#rough); pointer-events: none; z-index: 2;
}
.mode-storyboard .about-portrait { transform: rotate(0.6deg); overflow: visible; }

/* Portfolio imagery stays in full colour in every mode (matches the design). */

.sb-tab {
  position: absolute; top: -3px; left: 12px; transform: translateY(-100%);
  background: var(--ink); color: var(--card);
  font-family: 'Space Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em;
  padding: 4px 9px; z-index: 4; white-space: nowrap;
}
.sb-ticks { position: absolute; inset: 6px; pointer-events: none; z-index: 5; }
.sb-ticks::before, .sb-ticks::after { content: ''; position: absolute; width: 12px; height: 12px; border: 2px solid var(--accent); }
.sb-ticks::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.sb-ticks::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.mode-storyboard .sb-cap { display: block; font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.3rem; color: var(--accent); text-align: center; margin-top: 22px; transform: rotate(-1.2deg); }

.sb-anno { position: absolute; z-index: 6; pointer-events: none; }
.sb-tc {
  font-family: 'Space Mono', monospace; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--card); background: var(--accent); padding: 3px 7px; border-radius: 2px; white-space: nowrap;
}
.sb-label { font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.3rem; color: var(--accent); white-space: nowrap; }
.sb-arrow { stroke: var(--accent); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.sb-arrow path { vector-effect: non-scaling-stroke; }

.mode-storyboard .hero-reel { overflow: visible; }
/* emblem as a hand-stamped seal on the board (shown in both modes) */
.mode-storyboard .hero-emblem { filter: none; transform: translate(-60%, 100%) rotate(-8deg); }
.mode-storyboard .emblem-disc { background: var(--card); box-shadow: var(--shadow); border-color: transparent; }
.mode-storyboard .emblem-disc::after { content: ''; position: absolute; inset: -3px; border: 2.5px solid var(--ink); border-radius: 50%; filter: url(#rough); pointer-events: none; }
.mode-storyboard .filmstrip { background: transparent; box-shadow: none; padding: 0; gap: 30px; transform: rotate(-4.5deg); }
.mode-storyboard .filmstrip::before, .mode-storyboard .filmstrip::after { display: none; }
.mode-storyboard .film-frame { background: transparent; }
.mode-storyboard .film-frame-play { display: none; }
.mode-storyboard .film-frame-cap { display: none; }
.mode-storyboard .film-frame .sb-tc { position: absolute; left: 6px; bottom: 6px; z-index: 5; }
.mode-storyboard .sb-anno.reel-note { top: -16px; left: -20px; display: flex; align-items: flex-end; gap: 5px; }
@media (max-width: 900px) { .mode-storyboard .sb-anno.reel-note { display: none; } }

.mode-storyboard .btn { background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: 13px 11px 14px 10px; font-family: 'Caveat', cursive; font-size: 1.2rem; font-weight: 700; padding: 9px 21px; filter: url(#rough2); }
.mode-storyboard .btn--accent { border-color: var(--accent); color: var(--accent); }
.mode-storyboard .btn:hover { box-shadow: 3px 3px 0 -1px var(--accent); }

.mode-storyboard .work-filter { gap: 7px; }
.mode-storyboard .chip { font-family: 'Space Mono', monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: none; border-radius: 4px; padding: 7px 12px; filter: url(#rough2); }
.mode-storyboard .chip.on { background: var(--accent); border-color: var(--accent); color: var(--card); }
.mode-storyboard .chip-n { opacity: 0.7; }

.mode-storyboard .work-cards { grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 52px 32px; padding-top: 26px; }
.mode-storyboard .wcard { background: var(--card); border-radius: 3px; padding: 13px 13px 16px; box-shadow: var(--shadow); transform: rotate(var(--rot, -1deg)); transition: transform .28s var(--ease), box-shadow .28s var(--ease); z-index: 1; overflow: visible; }
.mode-storyboard .wcard:nth-child(3n+1) { --rot: -1.3deg; }
.mode-storyboard .wcard:nth-child(3n+2) { --rot: 0.9deg; }
.mode-storyboard .wcard:nth-child(3n+3) { --rot: -0.5deg; }
.mode-storyboard .wcard:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 26px 46px -20px rgba(0,0,0,0.5); z-index: 5; }
.tape { position: absolute; z-index: 8; width: 82px; height: 23px; pointer-events: none;
  background: linear-gradient(180deg, rgba(214,221,219,0.66), rgba(234,239,237,0.42) 45%, rgba(204,212,210,0.62));
  box-shadow: 0 2px 6px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.3);
  border-left: 2px solid rgba(255,255,255,0.55); border-right: 2px solid rgba(255,255,255,0.55);
  border-radius: 1px;
}
.theme-dark .tape {
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.15) 45%, rgba(255,255,255,0.24));
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.2);
  border-left-color: rgba(255,255,255,0.42); border-right-color: rgba(255,255,255,0.42);
}
.tape-tl { top: -9px; left: -19px; transform: rotate(-43deg); }
.tape-tr { top: -9px; right: -19px; transform: rotate(43deg); }
.tape-top { top: -13px; left: 50%; width: 138px; height: 27px; transform: translateX(-50%) rotate(-2.5deg); }

.mode-storyboard .wcard-thumb { box-shadow: none; }
.mode-storyboard .wcard-play { display: none; }
.mode-storyboard .wcard-yr {
  left: auto; right: 8px; top: 8px;
  font-family: 'Space Mono', monospace; font-size: 0.6rem; font-weight: 700;
  background: rgba(0,0,0,0.5); border-radius: 2px; padding: 2px 6px;
}
.mode-storyboard .wcard-body { padding: 14px 2px 0; }
.mode-storyboard .wcard-cat { font-family: 'Space Mono', monospace; font-size: 0.64rem; letter-spacing: 0.12em; }
.mode-storyboard .wcard-title { font-family: var(--ff-subsection, var(--ff-serif)); font-size: clamp(0.98rem, 1.15vw, 1.12rem); font-weight: 500; line-height: 1.12; }
.mode-storyboard .wcard-tags { font-family: 'Space Mono', monospace; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: none; }

.mode-storyboard .sb-note {
  display: block; font-family: 'Caveat', cursive; font-weight: 700;
  font-size: 1.15rem; line-height: 1.08; color: var(--accent);
  margin: 11px 2px 0; transform: rotate(-1.2deg);
}
.mode-storyboard .sb-note::before { content: '✎ '; }

@media (max-width: 860px) { .mode-storyboard .work-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mode-storyboard .work-cards { grid-template-columns: 1fr; } }

.mode-storyboard .col-label { font-family: 'Space Mono', monospace; font-weight: 700; }
.mode-storyboard .exp-logo { border-radius: 3px; transform: rotate(-1.5deg); }
.mode-storyboard .exp-rail::before { background-image: repeating-linear-gradient(to bottom, var(--line) 0 5px, transparent 5px 11px); background-color: transparent; width: 2px; }
.mode-storyboard .exp-role { font-family: var(--ff-card); font-style: normal; }
.mode-storyboard .exp-period { font-family: 'Caveat', cursive; }
.mode-storyboard .exp-co { font-family: 'Space Mono', monospace; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: none; }
.mode-storyboard .exp-stack span { font-family: 'Space Mono', monospace; font-size: 0.66rem; letter-spacing: 0.04em; text-transform: none; border-radius: 3px; filter: url(#rough2); }
.mode-storyboard .edu-col { border-radius: 3px; box-shadow: var(--shadow); }
.mode-storyboard .edu-col::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--ink); border-radius: 4px; filter: url(#rough); pointer-events: none; }
.mode-storyboard .edu-t { font-family: var(--ff-card); font-size: 1.05rem; }
.mode-storyboard .edu-y { font-family: 'Caveat', cursive; }
.mode-storyboard .about-tools .lbl { font-family: 'Space Mono', monospace; font-size: 0.74rem; letter-spacing: 0.14em; color: var(--accent); }
.mode-storyboard .tool-list span { font-family: 'Space Mono', monospace; font-size: 0.82rem; }
.mode-storyboard .about-meta span { font-family: 'Space Mono', monospace; font-size: 0.8rem; }
.mode-storyboard .about-body p.lead em { font-style: normal; font-family: 'Caveat', cursive; }

.mode-storyboard .contact h2 em { font-family: 'Caveat', cursive; font-style: normal; }
.mode-storyboard .social-card { border-radius: 4px; filter: url(#rough2); }
.mode-storyboard .social-meta b { font-family: 'Space Mono', monospace; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: none; }
.mode-storyboard .social-meta i { font-family: 'Caveat', cursive; font-size: 1rem; }

.doodle { position: absolute; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; overflow: visible; display: block; }
.doodle path { vector-effect: non-scaling-stroke; }
.doodle-star { fill: var(--accent); stroke: none; }
/* Custom doodle assigned from the admin Doodle Library — masked + accent-filled,
   inherits size/position from its slot class (e.g. .hero-doodle-star). */
.sc-doodle-img { background-color: var(--accent); -webkit-mask: var(--sd-url) no-repeat center / contain; mask: var(--sd-url) no-repeat center / contain; }
.hero-copy { position: relative; }
.hero-doodle-star { width: 28px; height: 28px; top: -8px; right: 9%; transform: rotate(-8deg); }
.edu-doodle-arrow { width: 60px; height: 38px; right: -6px; bottom: -28px; transform: rotate(8deg) scaleX(-1); }
.work-head { position: relative; }
.work-doodle { width: 56px; height: 30px; top: 4px; right: 2%; transform: rotate(-6deg); }
.contact { position: relative; }
.contact-doodle-star { width: 34px; height: 34px; top: 4%; left: 12%; transform: rotate(-12deg); }
.contact-doodle-arrow { width: 60px; height: 34px; top: 8%; right: 11%; transform: rotate(6deg); }
@media (max-width: 900px) { .hero-doodle-star { right: auto; left: 56%; } .work-doodle { display: none; } }
@media (max-width: 700px) { .contact-doodle-star, .contact-doodle-arrow { display: none; } }
@media (max-width: 960px) { .edu-doodle-arrow { display: none !important; } }

/* storyboard-only planning doodles (scattered hand-drawn marks + a margin note) */
.sb-doodle { display: none !important; }
.mode-storyboard .sb-doodle { display: block !important; }
.sb-doodle--arrow { width: 64px; height: 40px; top: 54px; right: 7%; transform: rotate(7deg); }
.sb-doodle--star  { width: 22px; height: 22px; top: 78px; left: -2%; transform: rotate(-12deg); }
.sb-doodle--loop  { width: 60px; height: 40px; bottom: 80px; left: 5%; transform: rotate(-5deg); opacity: 0.85; }
.sb-scribble { display: none; position: absolute; top: 0; left: auto; right: 5%; z-index: 6;
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.25rem; color: var(--accent); transform: rotate(-3deg); pointer-events: none; }
.mode-storyboard .sb-scribble { display: block; }
@media (max-width: 900px) { .sb-doodle, .sb-scribble { display: none !important; } }

.sb-slate {
  display: none; align-items: center; gap: 22px; flex-wrap: wrap;
  font-family: 'Space Mono', monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: none;
  padding: 12px var(--pad); border-bottom: 1px solid var(--line);
  /* warm espresso clapperboard strip — NOT black */
  background: #3B322A; color: #EDE7DB;
}
.mode-storyboard .sb-slate { display: flex; }
.sb-slate .clap { font-family: 'Caveat', cursive; font-size: 1.2rem; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.sb-slate b { color: var(--accent); }

@media (max-width: 760px) { .sb-director { font-size: 1.3rem; } .sb-slate { gap: 14px; font-size: 0.6rem; } }
@media print { .mode-switch, .sb-slate { display: none !important; } }

/* =========================================================
   CONTENT THEMING LAYER — sub-pages not in the v2 design
   (blog, single post, single portfolio, static pages, faqs,
   pricings, appointments, services, etc.) inherit the editorial
   frame. animator.css is NOT loaded under the screening chrome,
   so this re-themes the existing markup into the Screening voice.
   ========================================================= */

/* --- page + section shells --- */
#screening-page .section-page { padding: clamp(36px, 6vw, 64px) 0 clamp(56px, 9vw, 110px); }
/* sub-pages run FULL WIDTH (edge-to-edge with --pad gutters), like before —
   not boxed into a centered max-width container */
#screening-page .section-shell,
#screening-page .section-pages,
#screening-page .section-body,
#screening-page .single-portfolio,
#screening-page .single-post,
#screening-page .page-content { width: 100%; max-width: none; margin-inline: 0; padding-inline: var(--pad); }
#screening-page .section-shell--compact { max-width: none; padding-inline: var(--pad); }
#screening-page .section-body .container,
#screening-page .section-pages .container { padding-inline: 0; max-width: none; }

/* --- SECTION HEADINGS = plain TEAL text (no background box) ---
   ONE consistent treatment regardless of the legacy tag (pricings=.section-title
   h2, others=.head-title h3, etc.) on EVERY page, both modes. Font is mode-aware
   via --ff-display (serif in render, handwriting in storyboard). --- */
#screening-page .section-title h1,
#screening-page .section-title h2,
#screening-page .section-title h3,
#screening-page .section-title h4,
#screening-page .head-title h2,
#screening-page .head-title h3,
#screening-page .head-title h4,
#screening-page .head-title h5,
#screening-page .single-portfolio-section-head h3,
#screening-page .single-portfolio-title,
#screening-page #titlebar h1,
#screening-page #titlebar h2,
#screening-page .sec-head .sec-title,
#screening-page .contact h2 {
  display: block;
  font-family: var(--ff-display); font-weight: var(--fw-heading, 600);
  font-size: var(--fs-heading, clamp(1.8rem, 3.4vw, 2.7rem)); line-height: 1.06; letter-spacing: -0.01em;
  color: var(--accent) !important; background: none; padding: 0; border-radius: 0;
  margin: 0 0 14px;
}
/* the home/about statement + contact CTA headings run a touch larger (still DB-linked) */
#screening-page .sec-head .sec-title { font-size: calc(var(--fs-heading, 2.7rem) * 1.18); }
#screening-page .contact h2 { font-size: calc(var(--fs-heading, 2.7rem) * 1.3); }
/* <em> inside a heading = same teal */
#screening-page .sec-title em, #screening-page .contact h2 em,
#screening-page .section-title em, #screening-page .head-title em { color: inherit; font-style: normal; }
/* hide the empty trailing <span> some legacy headings carry (e.g. Testimonials <span></span>) */
#screening-page .head-title h3 span:empty, #screening-page .section-title h2 span:empty { display: none; }
#screening-page .timeline-label,
#screening-page .head-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
#screening-page .section-title p { color: var(--muted); font-size: 1.02rem; max-width: 640px; margin: 0 0 26px; }

/* Shared section header (screening/_sechead.blade.php): small teal eyebrow
   (the section name) ALWAYS sits FIRST — above the big heading — on EVERY
   page, identical to the home sections. Toggle from admin (Style → Section
   eyebrow) via body.eyebrow-off. */
#screening-page .sechead { display: flex; flex-direction: column; max-width: 760px; margin: 0 0 clamp(36px, 5vw, 64px); }
#screening-page .sechead .eyebrow { margin: 0 0 16px; }
#screening-page .sechead .section-title { margin: 0; }
#screening-page .sechead .section-title h2 { margin: 0; }
body.eyebrow-off #screening-page .sechead .eyebrow,
body.eyebrow-off #screening-page .sec-head .eyebrow { display: none; }
#screening-page .section-pill {
  display: inline-block; font-family: var(--ff-sans); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: none;
  color: var(--accent); background: var(--accent-soft);
  padding: 7px 14px; border-radius: 999px;
}
#screening-page .section-doodle { display: inline-flex; color: var(--accent); }
#screening-page .section-doodle svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; width: 32px; height: 26px; }
#screening-page .divider { height: 1px; background: var(--line-soft); border: 0; margin: 18px 0; }

/* --- breadcrumbs --- */
#screening-page .bread-crums { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; list-style: none; margin: 0 0 28px; padding: 0; font-size: 0.82rem; color: var(--faint); }
#screening-page .bread-crums li { display: inline-flex; align-items: center; gap: 8px; }
#screening-page .bread-crums li::after { content: '/'; color: var(--line); margin-left: 8px; }
#screening-page .bread-crums li:last-child::after { content: ''; }
#screening-page .bread-crums a { color: var(--muted); }
#screening-page .bread-crums a:hover { color: var(--accent); }
#screening-page .bread-crums .current { color: var(--ink); }

/* --- blog / portfolio listing cards (project-card markup) --- */
#screening-page .projects-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: clamp(24px, 3vw, 38px); padding-top: 8px; }
#screening-page .project-card-wrap.is-hidden { display: none; }
#screening-page .project-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px;
  padding: 12px 12px 18px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(28,27,23,0.04), 0 16px 30px -18px rgba(28,27,23,0.28);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
#screening-page .project-card:hover { transform: translateY(-7px); border-color: var(--line); box-shadow: 0 2px 4px rgba(28,27,23,0.05), 0 34px 56px -22px rgba(28,27,23,0.40); }
#screening-page .project-card-media { position: relative; margin: 0; aspect-ratio: 16/10; border-radius: 11px; overflow: hidden; background: var(--bg-2); }
#screening-page .project-card-media img { width: 100%; height: 100%; object-fit: cover; }
#screening-page .project-card-placeholder { display: grid; place-items: center; height: 100%; color: var(--faint); font-size: 2rem; }
#screening-page .project-card-badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
#screening-page .project-card-counter, #screening-page .project-card-type { font-size: 0.68rem; color: #fff; background: rgba(0,0,0,0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 3px 9px; border-radius: 999px; }
#screening-page .project-card-meta { padding: 14px 6px 2px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
#screening-page .project-card-cat { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: none; color: var(--accent); }
#screening-page .project-card-title { font-family: var(--ff-card); font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.08; margin: 0; }
#screening-page .project-card-title a { color: var(--ink); transition: color .2s var(--ease); }
#screening-page .project-card:hover .project-card-title a { color: var(--accent); }
#screening-page .project-card-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.55; margin: 0; }
#screening-page .project-card-actions { margin-top: auto; padding-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
#screening-page .project-card-action { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 500; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
#screening-page .project-card-action--primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#screening-page .project-card-action--secondary:hover { border-color: var(--accent); color: var(--accent); }
#screening-page .project-card-arrow { transition: transform .2s var(--ease); }
#screening-page .project-card-action:hover .project-card-arrow { transform: translateX(3px); }

/* --- pagination --- */
#screening-page .pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; list-style: none; padding: 0; margin: 48px 0 0; }
#screening-page .pagination li a, #screening-page .pagination li span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 0.85rem; }
#screening-page .pagination li.active span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#screening-page .pagination li.disabled span { color: var(--faint); opacity: 0.5; }
#screening-page .pagination li a:hover { border-color: var(--accent); color: var(--accent); }

/* --- single post / static page article typography --- */
#screening-page .post-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 12px 0 0; color: var(--faint); font-size: 0.85rem; }
#screening-page .post-meta li { display: inline-flex; align-items: center; gap: 7px; }
#screening-page .post-meta a { color: var(--muted); }
#screening-page .post-meta a:hover { color: var(--accent); }
#screening-page .post-thumbnail { margin: 8px 0 28px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
#screening-page .post-thumbnail img { width: 100%; height: auto; }
#screening-page .post-content, #screening-page .page-content, #screening-page .single-portfolio-content { font-size: 1.02rem; line-height: 1.75; color: var(--ink); max-width: 760px; }
#screening-page .post-content p, #screening-page .page-content p, #screening-page .single-portfolio-content p { margin: 0 0 1.2em; color: var(--muted); }
#screening-page .post-content h1, #screening-page .post-content h2, #screening-page .post-content h3, #screening-page .post-content h4,
#screening-page .page-content h1, #screening-page .page-content h2, #screening-page .page-content h3, #screening-page .page-content h4 { font-family: var(--ff-serif); font-weight: 400; color: var(--ink); line-height: 1.1; margin: 1.6em 0 0.5em; }
#screening-page .post-content a, #screening-page .page-content a, #screening-page .single-portfolio-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
#screening-page .post-content img, #screening-page .page-content img, #screening-page .single-portfolio-content img { border-radius: 12px; margin: 1em 0; }
#screening-page .post-content blockquote, #screening-page .page-content blockquote { border-left: 3px solid var(--accent); padding-left: 18px; margin: 1.2em 0; font-family: var(--ff-serif); font-style: normal; font-size: 1.2rem; color: var(--ink); }
#screening-page .tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 24px 0 0; }
#screening-page .tags li a { font-size: 0.78rem; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }
#screening-page .tags li a:hover { border-color: var(--accent); color: var(--accent); }

/* related posts grid */
#screening-page .related-post { margin-top: 48px; }
#screening-page .post-grid { background: var(--card); border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); margin-bottom: 24px; }
#screening-page .post-grid-image { position: relative; aspect-ratio: 16/10; overflow: hidden; }
#screening-page .post-grid-image img { width: 100%; height: 100%; object-fit: cover; }
#screening-page .post-detail { padding: 16px; }
#screening-page .post-detail h5 { font-family: var(--ff-card); font-size: 1.2rem; margin: 0 0 8px; }
#screening-page .post-detail p { font-size: 0.85rem; color: var(--muted); margin: 0 0 10px; }
#screening-page .post-more { color: var(--accent); font-weight: 500; font-size: 0.85rem; }

/* --- single portfolio detail --- */
#screening-page .single-portfolio-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
#screening-page .single-portfolio-back { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; }
#screening-page .single-portfolio-back:hover { border-color: var(--accent); color: var(--accent); }
#screening-page .single-portfolio-card { background: var(--card); border: 1px solid var(--line-soft); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); }
#screening-page .single-portfolio-head { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 0; }
#screening-page .single-portfolio-hero img { width: 100%; height: 100%; object-fit: cover; }
#screening-page .single-portfolio-panel { padding: clamp(24px, 3vw, 44px); }
/* single-portfolio-title is styled by the section-heading banner rule above */
#screening-page .single-portfolio-excerpt { color: var(--muted); font-size: 1rem; line-height: 1.65; margin: 0 0 22px; }
#screening-page .single-portfolio-cta { display: inline-flex; align-items: center; gap: 9px; background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 11px 20px; font-size: 0.9rem; font-weight: 500; cursor: pointer; }
.theme-dark #screening-page .single-portfolio-cta { color: #11221F; }
#screening-page .single-portfolio-cta:hover { transform: translateY(-2px); }
#screening-page .single-portfolio-details { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid var(--line-soft); }
#screening-page .single-portfolio-detail { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 0.9rem; }
#screening-page .single-portfolio-detail-label { color: var(--faint); }
#screening-page .single-portfolio-detail-value { color: var(--ink); font-weight: 500; text-align: right; }
#screening-page .single-portfolio-section-head { display: flex; align-items: center; gap: 12px; padding: clamp(22px, 3vw, 36px) clamp(24px, 3vw, 44px) 0; }
#screening-page .single-portfolio-section-head .count { color: var(--faint); font-variant-numeric: tabular-nums; }
#screening-page .single-portfolio-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; padding: 18px clamp(24px, 3vw, 44px); }
#screening-page .single-portfolio-gallery-item { display: block; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; background: var(--bg-2); }
#screening-page .single-portfolio-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
#screening-page .single-portfolio-content { padding: 6px clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px); max-width: none; }
/* long-form post body — align with the card gutters + separate from the head,
   and let the prose breathe (centered measure) instead of jamming under the hero */
#screening-page .single-portfolio-body { padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 44px) clamp(28px, 4vw, 52px); border-top: 1px solid var(--line-soft); margin-top: 4px; }
#screening-page .single-portfolio-body .post-content { max-width: 740px; margin-inline: auto; }
#screening-page .single-portfolio-related { margin-top: 44px; }
@media (max-width: 800px) { #screening-page .single-portfolio-head { grid-template-columns: 1fr; } }

/* --- forms (contact / appointments) --- */
/* All form fields use a single bottom line (underline), not a full box. */
#screening-page .form-control, #screening-page .form-input, #screening-page input[type="text"], #screening-page input[type="email"], #screening-page input[type="tel"], #screening-page input[type="date"], #screening-page input[type="time"], #screening-page textarea, #screening-page select {
  width: 100%; font-family: var(--ff-sans); font-size: 0.95rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0;
  padding: 10px 2px; transition: border-color .2s var(--ease);
}
#screening-page .form-control:focus, #screening-page textarea:focus, #screening-page input:focus, #screening-page select:focus { outline: none; border-bottom-color: var(--accent); box-shadow: none; }
#screening-page .form-group { margin-bottom: 16px; }
#screening-page .button, #screening-page .btn-block, #screening-page button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 0.9rem; font-weight: 500; padding: 12px 22px; border-radius: 999px;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink); cursor: pointer;
}
#screening-page .button:hover, #screening-page button[type="submit"]:hover { transform: translateY(-2px); }
#screening-page .appointments-card { background: var(--card); border: 1px solid var(--line-soft); border-radius: 18px; padding: clamp(20px, 3vw, 34px); box-shadow: var(--shadow); }
/* Contact form: keep the background card + shadow (and the storyboard tape),
   but no border line. */
#screening-page .contact-form { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
#screening-page .alert { border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }

/* --- faq accordion — each .section-content is ONE padded card: question
   header + answer separated by a dotted rule, never text on the border --- */
#screening-page .accordion.toggle-accordion { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
#screening-page .toggle-accordion .section-content {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px;
  box-shadow: var(--shadow); padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 30px);
}
#screening-page .accordion-title { margin: 0; }
#screening-page .accordion-title .btn-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; background: transparent; border: 0; padding: 0; font-family: var(--ff-card); font-weight: 500; font-size: clamp(1rem, 1.4vw, 1.12rem); color: var(--ink); cursor: pointer; }
#screening-page .accordion-title .btn-title i { color: var(--accent); flex-shrink: 0; font-size: 1.1em; }
#screening-page .accordion-inner { color: var(--muted); font-size: 0.95rem; line-height: 1.7; padding-top: 14px; margin-top: 14px; border-top: 1.5px dotted var(--line); }
/* fallback for any other .accordion-content usage */
#screening-page .accordion-content { padding: 14px 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.7; }

/* --- broken/empty media + empty headings (e.g. working-way icon src="") --- */
#screening-page img[src=""], #screening-page img:not([src]) { display: none !important; }
#screening-page .cont-step h4:empty, #screening-page .item .icon:empty { display: none; }
#screening-page .working-way .item { text-align: left; }
#screening-page .working-way .cont-step h5 { font-family: var(--ff-card); font-weight: 500; font-size: 1.15rem; margin: 0 0 6px; color: var(--ink); }
#screening-page .working-way .cont-step p { color: var(--muted); margin: 0; }

/* --- dotted section dividers (warm, soft — matches the reference) --- */
#screening-page .divider { height: 0; background: none; border: 0; border-top: 1.5px dotted var(--line); margin: 16px 0; }

/* --- pricing --- */
#screening-page .pricing-item, #screening-page .planbox { background: var(--card); border: 1px solid var(--line-soft); border-radius: 18px; padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow); text-align: center; }
#screening-page .pricing-featured { border-color: var(--accent); }
#screening-page .pricing-plan { font-family: var(--ff-card); font-size: 1.5rem; margin-bottom: 8px; }
#screening-page .prices, #screening-page .amount { font-family: var(--ff-serif); font-size: 2.6rem; color: var(--accent); }
#screening-page .pricing-feature-list, #screening-page .features { list-style: none; padding: 0; margin: 18px 0; display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 0.9rem; }
#screening-page .pricing-feature-list li, #screening-page .features li { padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
#screening-page .pricing-feature-list li:last-child, #screening-page .features li:last-child { border-bottom: 0; }

/* --- generic section cards (services / testimonials / clients / funfacts / working-way) ---
   NOTE real markup classes: funfacts = .counter-block, clients = .client,
   services = .services-item, testimonials = .testimonial-item. --- */
#screening-page .services-item,
#screening-page .testimonial-item,
#screening-page .working-way .item,
#screening-page .counter-block,
#screening-page .client {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px;
  padding: clamp(22px, 2.4vw, 30px); box-shadow: var(--shadow); height: 100%;
  display: flex; flex-direction: column; gap: 10px;
}
#screening-page .client { align-items: center; justify-content: center; }
#screening-page .counter-block { align-items: flex-start; }
#screening-page .services-item .title, #screening-page .services-item h3, #screening-page .working-way .title { font-family: var(--ff-card); font-weight: 500; font-size: 1.3rem; margin: 6px 0; }
#screening-page .testimonial-avatar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
#screening-page .testimonial-content { color: var(--muted); font-style: normal; line-height: 1.6; }
#screening-page .testimonial-owner { font-family: var(--ff-card); font-weight: 500; margin-top: 12px; }
#screening-page .services-item .icon, #screening-page .working-way .icon, #screening-page .counter-block .icon { color: var(--accent); font-size: 1.9rem; }
#screening-page .counter-block .details-info h5 { font-family: var(--ff-card); font-weight: 500; font-size: 1.02rem; margin: 0; color: var(--muted); }
#screening-page .counter-block .counter-value { font-family: var(--ff-serif); font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: 1; color: var(--accent); }
#screening-page .counter-block-mask { display: none; }

/* --- GRID GAPS — these pages use Bootstrap rows / owl-carousels that never
   init under the screening chrome, so spacing has to come from CSS. --- */
#screening-page .section-services .row,
#screening-page .section-funfacts .row,
#screening-page .section-workingway .row,
#screening-page .section-testimonials .row,
#screening-page .section-clients .row { --bs-gutter-x: clamp(20px, 2.4vw, 34px); --bs-gutter-y: clamp(20px, 2.4vw, 34px); }
/* uninitialized owl carousels (clients / testimonials) → responsive grid */
#screening-page .owl-carousel:not(.owl-loaded) { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
#screening-page .owl-carousel:not(.owl-loaded) .item { width: auto; margin: 0; }
/* Fun Facts → 2 columns (Joami's request) */
#screening-page .section-funfacts .row { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.4vw, 34px); }
#screening-page .section-funfacts .row > [class*="col-"] { width: 100%; max-width: none; flex: none; padding: 0; }
@media (max-width: 600px) { #screening-page .section-funfacts .row { grid-template-columns: 1fr; } }

/* --- comments (basic readability) --- */
#screening-page .comments, #screening-page .comment-respond { margin-top: 40px; }
#screening-page .comments input, #screening-page .comments textarea { margin-bottom: 12px; }

/* --- timeline-list (legacy résumé markup, if ever shown) --- */
#screening-page .timeline-list { list-style: none; padding: 0; margin: 0; }

/* =========================================================
   FIXES PASS — 2026-06-23
   ========================================================= */

/* sticky footer — keep it pinned to the bottom on short pages */
body { min-height: 100vh; display: flex; flex-direction: column; }
#screening-page { flex: 1 0 auto; }
footer.screening-footer { flex-shrink: 0; }

/* doodles + hand-drawn marks are STORYBOARD-only */
.doodle, .float-spark, .mark-sparkle, .mark-circle, .mark-underline { display: none !important; }
.mode-storyboard .doodle,
.mode-storyboard .float-spark { display: block !important; }
.mode-storyboard .mark-sparkle { display: inline-block !important; }
.mode-storyboard .mark-circle { display: block !important; }

/* breadcrumbs — clean inline trail, never a bulleted list */
#screening-page #titlebar { margin-bottom: clamp(22px, 3vw, 34px); }
#screening-page #titlebar h2 { font-family: var(--ff-serif); font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.02; margin: 0 0 12px; }
#screening-page #breadcrumbs ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; margin: 0; }
#screening-page #breadcrumbs li { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); }
#screening-page #breadcrumbs li a { color: var(--muted); transition: color .2s var(--ease); }
#screening-page #breadcrumbs li a:hover { color: var(--accent); }
#screening-page #breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 8px; color: var(--faint); }
#screening-page #breadcrumbs li:last-child { color: var(--ink); }
#screening-page .bread-crums { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); }
#screening-page .bread-crums .bread-crums-span { color: var(--faint); }
#screening-page .bread-crums .current { color: var(--ink); }

/* depth — carry the elevated card theme to blog + project grids (no more flat) */
#screening-page .projects-grid, #screening-page .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(20px, 2.4vw, 34px); }
#screening-page .project-card {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px;
  padding: 12px 12px 18px; box-shadow: 0 1px 2px rgba(28,27,23,0.04), 0 16px 32px -18px rgba(28,27,23,0.28);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); height: 100%;
}
.theme-dark #screening-page .project-card { box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 20px 38px -18px rgba(0,0,0,0.7); }
#screening-page .project-card:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(28,27,23,0.05), 0 34px 56px -22px rgba(28,27,23,0.4); }
#screening-page .project-card-media { border-radius: 11px; overflow: hidden; aspect-ratio: 16/10; background: var(--bg-2); }
#screening-page .project-card-media img { width: 100%; height: 100%; object-fit: cover; }
#screening-page .project-card-title { font-family: var(--ff-subsection, var(--ff-card)); font-size: 1.08rem; font-weight: 500; line-height: 1.15; margin: 10px 4px 0; }
#screening-page .project-card-cat { font-size: 0.7rem; letter-spacing: 0.12em; color: var(--accent); padding: 0 4px; }
#screening-page .project-card-desc { font-size: 0.88rem; color: var(--muted); margin: 8px 4px 0; }
#screening-page .project-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; padding: 0 4px; }
#screening-page .project-card-action { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); transition: transform .2s var(--ease), background .2s var(--ease); }
#screening-page .project-card-action:hover { transform: translateY(-2px); }
#screening-page .project-card-action--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.theme-dark #screening-page .project-card-action--primary { color: #11221F; }

/* pricing — real columns + elevated sticky-card treatment */
#screening-page .pricing { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(18px, 2.4vw, 30px); list-style: none; padding: 0; margin: 0; }
#screening-page .pricing-item {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 18px;
  padding: clamp(22px, 2.5vw, 32px); display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(28,27,23,0.04), 0 18px 36px -20px rgba(28,27,23,0.3);
}
.theme-dark #screening-page .pricing-item { box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 20px 40px -20px rgba(0,0,0,0.7); }
#screening-page .pricing-featured { border-color: var(--accent); box-shadow: 0 2px 6px rgba(28,27,23,0.06), 0 26px 50px -22px color-mix(in srgb, var(--accent) 38%, transparent); }
#screening-page .pricing-title { font-family: var(--ff-subsection, var(--ff-card)); font-size: 1.2rem; margin-bottom: 6px; }
#screening-page .pricing-price, #screening-page .prices, #screening-page .amount { font-family: var(--ff-serif); font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1; }
#screening-page .pricing-feature-list, #screening-page .pricing-feature, #screening-page .features { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 0.9rem; }
#screening-page .pricing-action { margin-top: auto; }

/* appointments — underline inputs (not boxed), aligned icon labels, rounded info card */
#screening-page .appointments-card, #screening-page .list-appointments { background: var(--card); border: 1px solid var(--line-soft); border-radius: 18px; padding: clamp(18px, 2vw, 26px); box-shadow: var(--shadow); }
#screening-page .form-control { border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0; background: transparent; padding: 11px 2px; transition: border-color .2s var(--ease); }
#screening-page .form-control:focus { border-bottom-color: var(--accent); outline: none; box-shadow: none; }
#screening-page .form-group { margin-bottom: 18px; }
#screening-page .contact-form label, #screening-page .form-group label, #screening-page .form-input label { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--faint); margin-bottom: 4px; }
#screening-page .contact-form label i, #screening-page .form-group label i, #screening-page .form-input label i { color: var(--accent); font-size: 15px; }

/* appointments — line fields with the icon inline + aligned (not boxed) */
#screening-page .form-input { display: flex; align-items: center; gap: 10px; border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0; padding: 6px 2px; background: transparent; transition: border-color .2s var(--ease); }
#screening-page .form-input:focus-within { border-bottom-color: var(--accent); }
#screening-page .form-input > i { color: var(--accent); font-size: 16px; flex-shrink: 0; }
#screening-page .form-input .form-control { border: 0 !important; background: transparent; padding: 8px 0; flex: 1 1 auto; min-width: 0; }
#screening-page .form-input .form-control:focus { box-shadow: none; outline: none; }
#screening-page textarea.form-control { min-height: 110px; }

/* NO double border: the right appointment column nests .contact-form inside
   .appointments-card, and the left nests .list-appointments — both were
   getting their own card chrome on top of the outer card. Strip the inner
   one so each column shows a SINGLE border (render + storyboard). */
#screening-page .appointments-card .contact-form,
#screening-page .appointments-card .list-appointments {
  background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0;
}
.mode-storyboard #screening-page .appointments-card .contact-form::before,
.mode-storyboard #screening-page .appointments-card .contact-form::after,
.mode-storyboard #screening-page .appointments-card .list-appointments::before,
.mode-storyboard #screening-page .appointments-card .list-appointments::after { display: none !important; }

/* hide ONLY the decorative pricing "wave" blob (animator-only graphic) —
   NOT .pricing-deco itself: it wraps the plan title + price heading. */
#screening-page .pricing-deco-img, #screening-page .deco-layer { display: none !important; }
#screening-page .pricing-deco { background: transparent !important; color: inherit !important; padding: 0 0 6px; margin-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
#screening-page .pricing-price { font-family: var(--ff-serif); font-size: clamp(2rem, 3vw, 2.7rem); line-height: 1; color: var(--ink); display: flex; align-items: baseline; justify-content: center; gap: 3px; flex-wrap: wrap; }
#screening-page .pricing-currency { font-size: 0.55em; color: var(--accent); }
#screening-page .pricing-period { font-family: var(--ff-sans); font-size: 0.78rem; font-weight: 400; color: var(--muted); }
#screening-page .pricing-title { font-family: var(--ff-card); font-size: 1.3rem; font-weight: 500; color: var(--ink); margin-top: 8px; }
#screening-page .pricing-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 20px; padding: 12px 24px; border-radius: 999px; font-weight: 600; font-size: 0.9rem;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.theme-dark #screening-page .pricing-action { color: #11221F; }
#screening-page .pricing-action:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px var(--accent); }

/* footer wordmark — teal brand name, no brackets (matches the nav brand) */
.foot-brand b { font-weight: 600; color: var(--accent); }

/* storyboard emblem — hand-drawn double sketch circle (per the reference) */
.mode-storyboard .emblem-disc { border-color: transparent; box-shadow: none; background: var(--card); }
.mode-storyboard .emblem-disc::before { content: ''; position: absolute; inset: 3px; border: 2px solid var(--ink); border-radius: 49% 51% 52% 48% / 50% 49% 51% 50%; filter: url(#rough2); pointer-events: none; }
.mode-storyboard .emblem-disc::after { inset: -4px; border-radius: 51% 49% 48% 52% / 49% 51% 50% 50%; }

/* =========================================================
   STORYBOARD — SUB-PAGES JOIN THE BOARD            2026-06-23
   The clean elevated cards in the CONTENT THEMING LAYER are
   RENDER-ONLY. In storyboard every sub-page (blog, single
   post/portfolio, pricing, appointments, services, faqs …)
   must read like the home board: section shells go transparent
   so the lined paper shows through, and each panel becomes a
   cream sheet pinned with tape, rough pencil frame, slight
   angle and handwritten headings. This mirrors .wcard / .edu-col
   from the v2 storyboard spec so the whole site is ONE concept.
   ========================================================= */

/* 1 — section shells never paint over the board paper */
.mode-storyboard .block--tint,
.mode-storyboard #work,
.mode-storyboard .contact,
.mode-storyboard #screening-page .section-page,
.mode-storyboard #screening-page .section-blog,
.mode-storyboard #screening-page .section-pages,
.mode-storyboard #screening-page .section-body { background: transparent !important; }

/* 2 — EVERY section/page heading goes handwritten on the board (uniform) */
.mode-storyboard .sec-title,
.mode-storyboard .sec-head .sec-title,
.mode-storyboard .contact h2,
.mode-storyboard #screening-page .section-title h1,
.mode-storyboard #screening-page .section-title h2,
.mode-storyboard #screening-page .section-title h3,
.mode-storyboard #screening-page .section-title h4,
.mode-storyboard #screening-page .head-title h2,
.mode-storyboard #screening-page .head-title h3,
.mode-storyboard #screening-page .head-title h4,
.mode-storyboard #screening-page .head-title h5,
.mode-storyboard #screening-page .single-portfolio-section-head h3,
.mode-storyboard #screening-page .single-portfolio-title,
.mode-storyboard #screening-page #titlebar h1,
.mode-storyboard #screening-page #titlebar h2,
.mode-storyboard #screening-page .pricing-plan,
.mode-storyboard #screening-page .pricing-title,
.mode-storyboard #screening-page .services-item h3,
.mode-storyboard #screening-page .services-item .title,
.mode-storyboard #screening-page .working-way .title,
.mode-storyboard #screening-page .working-way .cont-step h5,
.mode-storyboard #screening-page .counter-block .details-info h5,
.mode-storyboard #screening-page .testimonial-owner,
.mode-storyboard #screening-page .post-detail h5,
.mode-storyboard #screening-page .project-card-title {
  font-family: 'Caveat', cursive !important; font-weight: 700; letter-spacing: 0; line-height: 1.02;
}

/* 3 — every content panel → cream storyboard sheet (bg + shadow + angle) */
.mode-storyboard #screening-page .project-card,
.mode-storyboard #screening-page .pricing-item,
.mode-storyboard #screening-page .planbox,
.mode-storyboard #screening-page .services-item,
.mode-storyboard #screening-page .testimonial-item,
.mode-storyboard #screening-page .working-way .item,
.mode-storyboard #screening-page .counter-block,
.mode-storyboard #screening-page .client,
.mode-storyboard #screening-page .toggle-accordion .section-content,
.mode-storyboard #screening-page .post-grid,
.mode-storyboard #screening-page .single-portfolio-card,
.mode-storyboard #screening-page .appointments-card,
.mode-storyboard #screening-page .contact-form-wrap,
.mode-storyboard #screening-page .list-appointments {
  position: relative; background: var(--card);
  border: 0 !important; border-radius: 3px;
  box-shadow: var(--shadow); overflow: visible;
}

/* a strip of frosted tape pinning each sheet to the board (centred) */
.mode-storyboard #screening-page .project-card::before,
.mode-storyboard #screening-page .pricing-item::before,
.mode-storyboard #screening-page .planbox::before,
.mode-storyboard #screening-page .services-item::before,
.mode-storyboard #screening-page .testimonial-item::before,
.mode-storyboard #screening-page .working-way .item::before,
.mode-storyboard #screening-page .counter-block::before,
.mode-storyboard #screening-page .post-grid::before,
.mode-storyboard #screening-page .single-portfolio-card::before,
.mode-storyboard #screening-page .appointments-card::before,
.mode-storyboard #screening-page .toggle-accordion .section-content::before,
.mode-storyboard #screening-page .contact-form-wrap::before {
  content: ''; position: absolute; z-index: 8; top: -11px; left: 50%;
  width: 92px; height: 22px; transform: translateX(-50%) rotate(-2.5deg);
  background: linear-gradient(180deg, rgba(214,221,219,0.66), rgba(234,239,237,0.42) 45%, rgba(204,212,210,0.62));
  box-shadow: 0 2px 6px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.3);
  border-left: 2px solid rgba(255,255,255,0.55); border-right: 2px solid rgba(255,255,255,0.55);
  border-radius: 1px; pointer-events: none;
}
.theme-dark.mode-storyboard #screening-page .project-card::before,
.theme-dark.mode-storyboard #screening-page .pricing-item::before,
.theme-dark.mode-storyboard #screening-page .planbox::before,
.theme-dark.mode-storyboard #screening-page .services-item::before,
.theme-dark.mode-storyboard #screening-page .testimonial-item::before,
.theme-dark.mode-storyboard #screening-page .working-way .item::before,
.theme-dark.mode-storyboard #screening-page .counter-block::before,
.theme-dark.mode-storyboard #screening-page .post-grid::before,
.theme-dark.mode-storyboard #screening-page .single-portfolio-card::before,
.theme-dark.mode-storyboard #screening-page .appointments-card::before,
.theme-dark.mode-storyboard #screening-page .contact-form-wrap::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.15) 45%, rgba(255,255,255,0.24));
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.2);
  border-left-color: rgba(255,255,255,0.42); border-right-color: rgba(255,255,255,0.42);
}

/* 4a — image panels: rough pencil frame on the MEDIA (like .wcard-thumb) */
.mode-storyboard #screening-page .project-card-media,
.mode-storyboard #screening-page .single-portfolio-hero,
.mode-storyboard #screening-page .post-grid-image { position: relative; border-radius: 2px; }
.mode-storyboard #screening-page .project-card-media::after,
.mode-storyboard #screening-page .single-portfolio-hero::after,
.mode-storyboard #screening-page .post-grid-image::after {
  content: ''; position: absolute; inset: -2px; pointer-events: none; z-index: 2;
  border: 2.5px solid var(--ink); border-radius: 3px; filter: url(#rough);
}
/* 4b — text panels: rough pencil frame on the panel itself (like .edu-col) */
.mode-storyboard #screening-page .pricing-item::after,
.mode-storyboard #screening-page .planbox::after,
.mode-storyboard #screening-page .services-item::after,
.mode-storyboard #screening-page .testimonial-item::after,
.mode-storyboard #screening-page .working-way .item::after,
.mode-storyboard #screening-page .counter-block::after,
.mode-storyboard #screening-page .client::after,
.mode-storyboard #screening-page .toggle-accordion .section-content::after,
.mode-storyboard #screening-page .appointments-card::after,
.mode-storyboard #screening-page .single-portfolio-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  border: 2px solid var(--ink); border-radius: 4px; filter: url(#rough);
}
.mode-storyboard #screening-page .pricing-featured::after { border-color: var(--accent); }

/* 5 — pin panels at slight, varied angles (planned-board feel) */
.mode-storyboard #screening-page .pricing-item:nth-child(3n+1) { transform: rotate(-1.1deg); }
.mode-storyboard #screening-page .pricing-item:nth-child(3n+2) { transform: rotate(0.8deg); }
.mode-storyboard #screening-page .pricing-item:nth-child(3n)   { transform: rotate(-0.4deg); }
.mode-storyboard #screening-page .pricing-item:hover { transform: rotate(0deg) translateY(-5px); z-index: 5; }
.mode-storyboard #screening-page .project-card-wrap:nth-child(3n+1) .project-card { transform: rotate(-1.1deg); }
.mode-storyboard #screening-page .project-card-wrap:nth-child(3n+2) .project-card { transform: rotate(0.9deg); }
.mode-storyboard #screening-page .project-card-wrap:nth-child(3n)   .project-card { transform: rotate(-0.5deg); }
.mode-storyboard #screening-page .project-card:hover { transform: rotate(0deg) translateY(-6px); z-index: 5; }
.mode-storyboard #screening-page .services-item:nth-child(even),
.mode-storyboard #screening-page .testimonial-item:nth-child(even),
.mode-storyboard #screening-page .counter-block:nth-child(even) { transform: rotate(0.7deg); }
.mode-storyboard #screening-page .services-item:nth-child(odd),
.mode-storyboard #screening-page .testimonial-item:nth-child(odd),
.mode-storyboard #screening-page .counter-block:nth-child(odd) { transform: rotate(-0.8deg); }
.mode-storyboard #screening-page .single-portfolio-card { transform: rotate(-0.4deg); padding: clamp(20px, 2.6vw, 34px); }
/* the card now provides the inset, so drop the inner paddings (no content
   touching the hand-drawn frame) and put breathing room between image + panel */
.mode-storyboard #screening-page .single-portfolio-head { gap: clamp(20px, 2.4vw, 34px); }
.mode-storyboard #screening-page .single-portfolio-panel { padding: 0; }
.mode-storyboard #screening-page .single-portfolio-body { padding: clamp(22px, 2.6vw, 32px) 0 0; margin-top: clamp(20px, 2.4vw, 30px); }

/* 6 — buttons inside sub-page panels go hand-drawn (outline, never filled) */
.mode-storyboard #screening-page .project-card-action,
.mode-storyboard #screening-page .pricing-action,
.mode-storyboard #screening-page .planbox a,
.mode-storyboard #screening-page .button,
.mode-storyboard #screening-page .btn-block,
.mode-storyboard #screening-page button[type="submit"],
.mode-storyboard #screening-page .single-portfolio-cta,
.mode-storyboard #screening-page .single-portfolio-back,
.mode-storyboard #screening-page .post-more,
.mode-storyboard #screening-page .pagination li a,
.mode-storyboard #screening-page .pagination li span {
  background: transparent !important; color: var(--ink) !important;
  border: 2px solid var(--ink) !important; border-radius: 13px 11px 14px 10px !important;
  filter: url(#rough2);
}
.mode-storyboard #screening-page .project-card-action--primary,
.mode-storyboard #screening-page .pricing-action,
.mode-storyboard #screening-page .planbox a,
.mode-storyboard #screening-page .single-portfolio-cta,
.mode-storyboard #screening-page button[type="submit"] {
  border-color: var(--accent) !important; color: var(--accent) !important;
}
.mode-storyboard #screening-page .pagination li a,
.mode-storyboard #screening-page .pagination li span { border-radius: 8px 7px 9px 6px !important; }

/* 7 — meta/eyebrow voices on the board (mono + handwriting) */
.mode-storyboard #screening-page .section-pill,
.mode-storyboard #screening-page .project-card-cat,
.mode-storyboard #screening-page .post-meta,
.mode-storyboard #screening-page .single-portfolio-detail-label,
.mode-storyboard #screening-page .pricing-price,
.mode-storyboard #screening-page .prices,
.mode-storyboard #screening-page .amount { font-family: 'Space Mono', monospace; }
.mode-storyboard #screening-page .section-pill { background: transparent; border: 1.5px solid var(--accent); filter: url(#rough2); }

/* keep the lined paper visible behind transparent shells */
.mode-storyboard #screening-page { background: transparent; }

/* 8 — icons go hand-drawn on the board: the rough filter wobbles the glyph
   edges so font icons (section icons, experience/education, socials, meta)
   read as pencil doodles. Applies to every <i> icon + the inline social SVGs. */
.mode-storyboard #screening-page i[class*="bx"],
.mode-storyboard #screening-page i[class*="lnr"],
.mode-storyboard #screening-page i[class*="pe-7s"],
.mode-storyboard #screening-page i[class*="fa"],
.mode-storyboard #screening-page .icon i,
.mode-storyboard .nav-links a i,
.mode-storyboard .site-menu-links a i,
.mode-storyboard .socials a i,
.mode-storyboard .socials a svg,
.mode-storyboard .social-card .social-ico i,
.mode-storyboard .footer .social i {
  filter: url(#roughIcon);
  color: var(--accent);
}
/* nudge each social icon to a slightly different hand-placed angle */
.mode-storyboard .socials a:nth-child(odd) i, .mode-storyboard .socials a:nth-child(odd) svg { transform: rotate(-4deg); }
.mode-storyboard .socials a:nth-child(even) i, .mode-storyboard .socials a:nth-child(even) svg { transform: rotate(3deg); }

/* 8b — feature icons sit in a hand-drawn doodle badge (like the warm CV ref):
   a rough accent ring behind each font-icon. Image-based icons (services /
   working-way uploads) are left as-is. */
.mode-storyboard #screening-page .counter-block .icon {
  position: relative; display: inline-grid; place-items: center;
  width: 60px; height: 60px; color: var(--accent); overflow: visible;
}
.mode-storyboard #screening-page .counter-block .icon::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  border: 2.4px solid var(--accent); border-radius: 50%;
  background: var(--accent-soft); filter: url(#rough2);
}
.mode-storyboard #screening-page .counter-block .icon i { position: relative; z-index: 1; }

/* 8c — scatter light hand-drawn planning marks across EVERY storyboard section
   (not just the home) so the whole board reads as sketched + planned. The marks
   are masked so they follow the DB accent colour. Decorative + non-blocking. */
.mode-storyboard #screening-page .section-shell,
.mode-storyboard #screening-page .section-inner,
.mode-storyboard #screening-page section.block > .container { position: relative; }
.mode-storyboard #screening-page .section-shell::before,
.mode-storyboard #screening-page .section-inner::before,
.mode-storyboard #screening-page section.block > .container::before {
  content: ''; position: absolute; top: 2px; right: 2.5%;
  width: 30px; height: 30px; z-index: 0; pointer-events: none; opacity: 0.42;
  background-color: var(--accent); transform: rotate(9deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5 L13.6 9 L21 12 L13.6 15 L12 22.5 L10.4 15 L3 12 L10.4 9 Z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5 L13.6 9 L21 12 L13.6 15 L12 22.5 L10.4 15 L3 12 L10.4 9 Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.mode-storyboard #screening-page .section-shell::after,
.mode-storyboard #screening-page .section-inner::after,
.mode-storyboard #screening-page section.block > .container::after {
  content: ''; position: absolute; bottom: 18px; left: 2%;
  width: 44px; height: 18px; z-index: 0; pointer-events: none; opacity: 0.34;
  background-color: var(--accent); transform: rotate(-5deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 16'%3E%3Cpath d='M2 9 Q8 2 14 9 T26 9 T40 8' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 16'%3E%3Cpath d='M2 9 Q8 2 14 9 T26 9 T40 8' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ============================================================
   UNIFIED TYPE SYSTEM (END — wins last)            2026-06-24
   ONE definition for sub/card headings + buttons so EVERY page
   matches. Section headings (teal) are defined in the content
   layer above. Font family is mode-aware via --ff-card so it
   flips to handwriting in storyboard without a selector fight.
   ============================================================ */
/* SUB / CARD HEADINGS — ink, one scale, consistent everywhere */
#screening-page .project-card-title,
#screening-page .wcard-title,
#screening-page .pricing-title,
#screening-page .services-item h3,
#screening-page .services-item .title,
#screening-page .working-way .cont-step h5,
#screening-page .counter-block .details-info h5,
#screening-page .testimonial-owner,
#screening-page .post-detail h5,
#screening-page .edu-t {
  font-family: var(--ff-card); font-weight: var(--fw-subsection, 500); color: var(--ink);
  font-size: var(--fs-subsection, clamp(1.06rem, 1.4vw, 1.25rem)); line-height: 1.18; letter-spacing: -0.005em; margin: 0 0 6px;
}

/* PRIMARY buttons — one accent pill (storyboard's sketchy !important rules still win there) */
#screening-page .pricing-action,
#screening-page .single-portfolio-cta,
#screening-page .button,
#screening-page .btn-block,
#screening-page button[type="submit"],
#screening-page .project-card-action--primary {
  display: inline-flex; width: auto; align-self: center; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ff-buttons, var(--ff-sans)); font-weight: var(--fw-buttons, 600); font-size: var(--fs-buttons, 0.88rem); line-height: 1;
  padding: 12px 22px; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.theme-dark #screening-page .pricing-action,
.theme-dark #screening-page .single-portfolio-cta,
.theme-dark #screening-page .button,
.theme-dark #screening-page button[type="submit"],
.theme-dark #screening-page .project-card-action--primary { color: #112221; }
#screening-page .pricing-action:hover,
#screening-page .single-portfolio-cta:hover,
#screening-page .button:hover,
#screening-page button[type="submit"]:hover,
#screening-page .project-card-action--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px var(--accent); }

/* SECONDARY buttons — one consistent outline pill */
#screening-page .project-card-action--secondary,
#screening-page .single-portfolio-back,
#screening-page .wcard-btn--ghost,
#screening-page .post-more {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ff-sans); font-weight: 600; font-size: 0.82rem;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--ink); background: transparent; transition: border-color .2s var(--ease), color .2s var(--ease); }
#screening-page .project-card-action--secondary:hover,
#screening-page .single-portfolio-back:hover,
#screening-page .post-more:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   SKILLS PAGE — markup existed with ZERO styling (orphaned).   2026-06-24
   Card grid: each category = a card (icon + title + rated skills).
   ============================================================ */
#screening-page .skills-cardgrid { display: grid; grid-template-columns: var(--skills-cols, repeat(auto-fill, minmax(250px, 1fr))); gap: clamp(20px, 2.4vw, 30px); padding-top: 8px; }
@media (max-width: 1040px) { #screening-page .skills-cardgrid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 580px)  { #screening-page .skills-cardgrid { grid-template-columns: 1fr !important; } }
#screening-page .skills-card { display: flex; flex-direction: column; gap: 14px; height: 100%; background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px; padding: clamp(20px, 2.2vw, 26px); box-shadow: var(--shadow); }
#screening-page .skills-card-head { display: flex; align-items: center; gap: 12px; }
#screening-page .skills-card-icon { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
#screening-page .skills-card-icon svg { width: 22px; height: 22px; }   /* was rendering full-page huge */
#screening-page .skills-card-title { font-family: var(--ff-card); font-weight: 500; font-size: 1.18rem; line-height: 1.15; color: var(--ink); margin: 0; }
#screening-page .skills-pill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
#screening-page .skills-pill { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1.5px dotted var(--line); }
#screening-page .skills-pill:last-child { border-bottom: 0; }
#screening-page .skills-pill-label { font-size: 0.92rem; color: var(--muted); }
#screening-page .skills-rating { display: inline-flex; gap: 4px; flex-shrink: 0; }
#screening-page .skills-rating-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
#screening-page .skills-rating-dot.is-on { background: var(--accent); }
/* storyboard: skills cards join the board (sheet + rough frame + tape + tilt) */
.mode-storyboard #screening-page .skills-card { position: relative; border: 0 !important; border-radius: 3px; overflow: visible; }
.mode-storyboard #screening-page .skills-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 2px solid var(--ink); border-radius: 4px; filter: url(#rough); }
.mode-storyboard #screening-page .skills-card::before { content: ''; position: absolute; z-index: 8; top: -11px; left: 50%; width: 88px; height: 22px; transform: translateX(-50%) rotate(-2.5deg); background: linear-gradient(180deg, rgba(214,221,219,0.66), rgba(234,239,237,0.42) 45%, rgba(204,212,210,0.62)); box-shadow: 0 2px 6px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.3); border-left: 2px solid rgba(255,255,255,0.55); border-right: 2px solid rgba(255,255,255,0.55); border-radius: 1px; }
.mode-storyboard #screening-page .skills-card:nth-child(odd)  { transform: rotate(-0.8deg); }
.mode-storyboard #screening-page .skills-card:nth-child(even) { transform: rotate(0.7deg); }
.mode-storyboard #screening-page .skills-card-icon svg { filter: url(#rough2); }

/* --- small orphan fixes --- */
#screening-page .subhead-plain h4 { font-family: var(--ff-card); font-weight: 500; font-size: 1.15rem; color: var(--ink); margin: 0 0 6px; }
#screening-page .subhead-plain p { color: var(--muted); margin: 0 0 4px; font-size: 0.92rem; }
#screening-page .section-inner { width: 100%; }
/* empty rating divs (no demo value) shouldn't reserve space */
#screening-page .testimonial-rating:empty { display: none; }

/* appointments availability — clean list, no raw bullets */
#screening-page .list-appointments ul { list-style: none; margin: 0; padding: 0; }
#screening-page .list-appointments li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1.5px dotted var(--line); color: var(--ink); font-size: 0.92rem; }
#screening-page .list-appointments li:last-child { border-bottom: 0; }

/* ============================================================
   REFINEMENTS (appended — wins last)                2026-07-01
   ============================================================ */

/* 1 — No rough black outline on cards or images; cards get a soft shadow. */
.mode-storyboard .film-frame::after,
.mode-storyboard .wcard-thumb::after,
.mode-storyboard .edu-col::after,
.mode-storyboard #screening-page .project-card-media::after,
.mode-storyboard #screening-page .single-portfolio-hero::after,
.mode-storyboard #screening-page .post-grid-image::after,
.mode-storyboard #screening-page .pricing-item::after,
.mode-storyboard #screening-page .planbox::after,
.mode-storyboard #screening-page .services-item::after,
.mode-storyboard #screening-page .testimonial-item::after,
.mode-storyboard #screening-page .working-way .item::after,
.mode-storyboard #screening-page .counter-block::after,
.mode-storyboard #screening-page .client::after,
.mode-storyboard #screening-page .toggle-accordion .section-content::after,
.mode-storyboard #screening-page .appointments-card::after,
.mode-storyboard #screening-page .single-portfolio-card::after,
.mode-storyboard #screening-page .skills-card::after { display: none !important; }

.mode-storyboard #screening-page .pricing-item,
.mode-storyboard #screening-page .planbox,
.mode-storyboard #screening-page .services-item,
.mode-storyboard #screening-page .testimonial-item,
.mode-storyboard #screening-page .working-way .item,
.mode-storyboard #screening-page .counter-block,
.mode-storyboard #screening-page .client,
.mode-storyboard #screening-page .single-portfolio-card,
.mode-storyboard #screening-page .skills-card,
.mode-storyboard .edu-col { box-shadow: var(--shadow) !important; }

/* 2 — Buttons: the neutral/ghost button uses the accent (from admin), not black.
   Keep the two styles (filled accent + accent outline). */
.btn--ghost, .wcard-btn--ghost { border-color: var(--accent); color: var(--accent); }
.btn--ghost:hover, .wcard-btn--ghost:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
/* right-align only the standalone action buttons: CV download + Send. */
.edu-cv { display: flex; width: fit-content; margin-left: auto; }
#screening-page .contact-form button[type="submit"] { display: flex; width: fit-content; margin-left: auto; }
/* Back-to-portfolio pill: accent border + text to match its icon. */
#screening-page .single-portfolio-back { border-color: var(--accent) !important; color: var(--accent) !important; }
#screening-page .single-portfolio-back:hover { background: var(--accent-soft) !important; }

/* 3 — Footer social icons match the buttons: accent outline + accent icon. */
.socials a { border-color: var(--accent) !important; color: var(--accent) !important; }
.socials a:hover { background: var(--accent-soft) !important; border-color: var(--accent) !important; }

/* 4 — Portfolio grid identical in render + storyboard (follows admin columns). */
@media (min-width: 861px) {
  .work-cards, .mode-storyboard .work-cards { grid-template-columns: repeat(var(--cols, 3), 1fr) !important; }
}

/* 5 — Résumé / experience / education: date on its own line ABOVE the title. */
.exp-top { display: block; }
.exp-top .exp-period { display: inline-flex; margin: 0 0 5px; white-space: normal; }
.edu-head { display: block; }
.edu-head .edu-y { display: inline-block; margin: 0 0 3px; white-space: normal; }

/* 6 — Less washed-out: eyebrow/labels use the muted (not the faintest) tone. */
.eyebrow { color: var(--muted); }
.contact-follow, .reel-head { color: var(--muted); }

/* 7 — Landscape SVG logo (transparent), no separate brand text. */
.brand-logo { height: 30px; width: auto; display: block; }
.foot-logo { height: 30px; width: auto; display: block; }
.brand { gap: 0; }

/* 8 — Mobile refinements (padding, hero slant, form/socials not edge-to-edge). */
@media (max-width: 640px) {
  /* hero showreel: stop the slant + overflow */
  .hero-reel { overflow: hidden; }
  .filmstrip { transform: rotate(0deg) !important; max-width: 100%; }
  .mode-storyboard .filmstrip { transform: rotate(0deg) !important; }
  .film-frame { max-width: 100%; }
  /* contact form + section: keep clear side gutters */
  .contact-form-wrap { margin-left: 0; margin-right: 0; max-width: 100%; padding: 22px 18px; }
  .contact { padding-left: 20px; padding-right: 20px; }
  .contact .container { padding-left: 0; padding-right: 0; }
  /* action buttons: inline, not full-width */
  .contact-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .contact-actions .btn, .hero-actions .btn { width: auto; }
  /* social cards: 2-up, not full-width ugly blocks */
  .contact-socials { gap: 10px; }
  .social-card { flex: 1 1 44%; min-width: 0; padding: 11px 12px; }
  .social-meta b { font-size: 0.82rem; }
  .social-meta i { font-size: 0.78rem; word-break: break-word; }
}

/* 9 — Breadcrumbs: clearer, less washed-out (links accent, current strong). */
#screening-page #breadcrumbs ul, #screening-page .bread-crums { padding: 8px 14px; background: var(--card); border-radius: 999px; box-shadow: var(--shadow); display: inline-flex; }
#screening-page #breadcrumbs li, #screening-page .bread-crums { color: var(--muted); font-size: 0.82rem; }
#screening-page #breadcrumbs li a, #screening-page .bread-crums a { color: var(--accent); font-weight: 500; }
#screening-page #breadcrumbs li a:hover, #screening-page .bread-crums a:hover { text-decoration: underline; }
#screening-page #breadcrumbs li:last-child, #screening-page .bread-crums .current { color: var(--ink); font-weight: 600; }
#screening-page #breadcrumbs li:not(:last-child)::after, #screening-page .bread-crums .bread-crums-span { color: var(--faint); }

/* 10 — Portfolio images get NO shadow (the about photo keeps its shadow). */
#screening-page .single-portfolio-hero, #screening-page .post-grid-image,
#screening-page .project-card-media, .wcard-thumb, .film-frame { box-shadow: none !important; }

/* 11 — Every button carries the teal accent (never brown/charcoal). */
.btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--ghost { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn--ghost:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.mode-storyboard .btn { background: transparent; border-color: var(--accent); color: var(--accent); }
.mode-storyboard .btn--accent { background: transparent; border-color: var(--accent); color: var(--accent); }
.wcard-btn { border-color: var(--accent); color: var(--accent); }
.wcard-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
#screening-page .project-card-action { border-color: var(--accent) !important; color: var(--accent) !important; }
#screening-page .project-card-action--primary { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }

/* 12 — Portfolio thumbnails never carry a border (about photo keeps its border). */
.mode-storyboard .wcard-thumb,
.mode-storyboard .film-frame,
.mode-storyboard #screening-page .project-card-media,
.mode-storyboard #screening-page .single-portfolio-hero,
.mode-storyboard #screening-page .post-grid-image { border: 0 !important; }

/* 13 — 'Start a project' scrolls to the form; clear the sticky nav. */
#contact-form { scroll-margin-top: 100px; }

/* 14 — Hide the 'Now showing' label in the hero reel. */
.reel-head { display: none !important; }

/* 15 — Honeypot field: hidden from people (kept in the DOM for bots). */
.cf-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }