/* ==========================================================================
Derc Powel Okunyo — Professional Portfolio
Design: Editorial High-Contrast Redesign (Deep Emerald, Cream, Gold & Obsidian)
Enhanced with Dark Contrast Blocks, Crisp Hover Glows, Precision Typography,
Layered Micro-Interactions, and Foldable Archive Dashboard.
========================================================================== */

/* 1. DESIGN TOKENS */
:root {
color-scheme: light;

/* Base Light Surfaces */
--bg: #F7F3E9;
--bg-2: #ECE7DA;
--surface: #FFFFFF;
--surface-2: #F2EDE2;
--line: #DFD9CB;
--line-strong: #C4BDAE;

/* Primary Brand: Deep Emerald & Obsidian */
--emerald: #075B43;
--emerald-hi: #0A7A5A;
--emerald-deep: #032B1F;
--emerald-dark: #021F17;
--emerald-tint: rgba(7, 91, 67, 0.08);

/* Accent: Vibrant High-Contrast Gold */
--gold: #D4A52C;
--gold-hi: #F0BC33;
--gold-deep: #9E7412;
--gold-tint: rgba(212, 165, 44, 0.14);
--gold-glow: rgba(240, 188, 51, 0.25);

/* Typography */
--text: #0D130F;
--muted: #2E342C;
--on-gold: #121713;
--on-dark: #F7F3E9;
--on-dark-muted: #C2D4CC;

--font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-display: "Fraunces", "Iowan Old Style", Georgia, serif;

--fs-sm: .875rem;
--fs-md: 1rem;
--fs-lg: 1.125rem;
--fs-xl: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
--fs-h2: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
--fs-h1: clamp(2.6rem, 1.4rem + 5vw, 5rem);

--s-1: .5rem;
--s-2: 1rem;
--s-3: 1.5rem;
--s-4: 2.5rem;
--s-5: 4rem;
--s-6: clamp(4.5rem, 8vw, 7rem);

--r-sm: 8px;
--r-md: 14px;
--r-lg: 22px;
--r-pill: 999px;

/* Crisp Precision Shadows */
--shadow: 0 24px 48px -12px rgba(3, 43, 31, 0.26);
--shadow-card: 0 6px 16px -2px rgba(3, 43, 31, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
--shadow-hover: 0 20px 32px -8px rgba(3, 43, 31, 0.24), 0 0 0 1px var(--gold);
--shadow-dark-card: 0 10px 30px -5px rgba(0, 0, 0, 0.5);

--ease: cubic-bezier(.16, 1, .3, 1);
--t-fast: .2s;
--t: .4s;
--container: 1180px;
--header-h: 68px;
}

/* 2. BASE & SCROLLBAR */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 56px);
-webkit-text-size-adjust: 100%;
background: var(--bg);
}

body {
min-height: 100vh;
font-family: var(--font-ui);
font-size: var(--fs-md);
line-height: 1.7;
color: var(--text);
background:
radial-gradient(ellipse at 100% 0%, rgba(7, 91, 67, .06), transparent 42rem),
radial-gradient(ellipse at 0% 100%, rgba(212, 165, 44, .06), transparent 38rem),
var(--bg);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

/* Custom Webkit Scrollbar */
::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-track {
background: var(--bg);
}

::-webkit-scrollbar-thumb {
background: var(--line-strong);
border-radius: var(--r-pill);
border: 2px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
background: var(--emerald);
}

img, iframe, video {
display: block;
max-width: 100%;
}

img { height: auto; }

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

ul, ol { list-style: none; }

button, input, textarea, select { font: inherit; }

button {
color: inherit;
cursor: pointer;
}

button:disabled {
cursor: not-allowed;
opacity: .55;
}

[hidden] { display: none !important; }

h1, h2, h3, h4 {
color: var(--emerald);
line-height: 1.14;
letter-spacing: -.025em;
font-weight: 700;
}

::selection {
background: var(--gold);
color: var(--on-gold);
}

:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 4px;
border-radius: 6px;
}

.skip-link {
position: absolute;
top: -4rem;
left: 1rem;
z-index: 3000;
padding: .7rem 1rem;
border-radius: var(--r-sm);
background: var(--gold);
color: var(--on-gold);
font-weight: 700;
}

.skip-link:focus { top: 1rem; }

.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 clamp(1.1rem, 4vw, 2rem);
}

.section {
position: relative;
padding: var(--s-6) 0;
}

.section--alt {
background: var(--bg-2);
border-block: 1px solid var(--line);
}

/* High-Contrast Dark Emerald Section Surface */
.section--dark {
background: var(--emerald-deep);
color: var(--on-dark);
border-block: 1px solid rgba(212, 165, 44, 0.25);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
color: #FFFFFF;
}

.section--dark p,
.section--dark .section-head p {
color: var(--on-dark-muted);
}

.section--dark .eyebrow {
color: var(--gold-hi);
}

.section--dark .eyebrow::before {
background: var(--gold-hi);
}

.glow {
position: absolute;
width: 50vw;
height: 50vw;
max-width: 680px;
max-height: 680px;
border-radius: 50%;
filter: blur(140px);
opacity: .12;
pointer-events: none;
z-index: 0;
}

.glow--gold {
top: -12%;
left: -14%;
background: var(--gold-hi);
}

.glow--green {
right: -12%;
bottom: -10%;
background: var(--emerald-hi);
}

.section > .container,
.hero > .container {
position: relative;
z-index: 1;
}

/* 3. TYPOGRAPHY & EDITORIAL DROP-CAP */
.eyebrow {
display: inline-flex;
align-items: center;
gap: .7rem;
margin-bottom: var(--s-2);
color: var(--emerald);
font-size: .8rem;
font-weight: 800;
letter-spacing: .22em;
text-transform: uppercase;
}

.eyebrow::before {
width: 28px;
height: 2px;
background: var(--emerald);
content: "";
}

.section-head {
max-width: 46rem;
margin-bottom: var(--s-4);
}

.section-head h2 {
margin-bottom: var(--s-2);
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: 600;
letter-spacing: -.035em;
color: var(--emerald);
}

.section-head p {
max-width: 42rem;
color: var(--muted);
font-size: var(--fs-lg);
}

.about-grid > div > p:first-of-type::first-letter {
font-family: var(--font-display);
font-size: 3.4rem;
font-weight: 700;
float: left;
line-height: 0.8;
margin-right: 0.6rem;
margin-top: 0.1rem;
color: var(--emerald);
}

.work-block { padding-top: var(--s-5); }

.work-block > h3 {
margin-bottom: .45rem;
font-family: var(--font-display);
font-size: var(--fs-xl);
font-weight: 600;
color: var(--emerald);
}

.work-block > .lede {
max-width: 40rem;
margin-bottom: var(--s-3);
color: var(--muted);
}

/* 4. BUTTONS AND CHIPS */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6rem;
min-height: 48px;
padding: .8rem 1.6rem;
border: 1px solid transparent;
border-radius: var(--r-pill);
font-size: .92rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: .01em;
text-align: center;
transition: transform var(--t) var(--ease),
background var(--t-fast),
border-color var(--t-fast),
color var(--t-fast),
box-shadow var(--t);
}

.btn--primary {
background: var(--emerald);
color: #FFFFFF;
box-shadow: 0 4px 14px rgba(7, 91, 67, 0.2);
}

.btn--primary:hover {
background: var(--emerald-hi);
transform: translateY(-2px);
box-shadow: 0 12px 24px -8px rgba(7, 91, 67, .45), 0 0 0 1px var(--gold);
}

.btn--gold {
background: var(--gold);
color: var(--on-gold);
box-shadow: 0 4px 14px rgba(212, 165, 44, 0.25);
}

.btn--gold:hover {
background: var(--gold-hi);
transform: translateY(-2px);
box-shadow: 0 12px 24px -6px rgba(212, 165, 44, .45);
}

.btn--ghost {
border-color: var(--line-strong);
background: var(--surface);
color: var(--text);
}

.btn--ghost:hover {
border-color: var(--emerald);
background: var(--emerald-tint);
color: var(--emerald);
transform: translateY(-2px);
}

.section--dark .btn--ghost {
border-color: rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.05);
color: #FFFFFF;
}

.section--dark .btn--ghost:hover {
border-color: var(--gold-hi);
background: var(--gold-tint);
color: var(--gold-hi);
}

.btn--sm {
min-height: 38px;
padding: .5rem 1.1rem;
font-size: .84rem;
}

.link-arrow {
position: relative;
display: inline-flex;
align-items: center;
gap: .4rem;
color: var(--emerald);
font-size: var(--fs-sm);
font-weight: 700;
text-decoration: none;
transition: gap var(--t-fast) var(--ease), color var(--t-fast);
}

.section--dark .link-arrow {
color: var(--gold-hi);
}

.link-arrow::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background: var(--emerald);
transition: width var(--t-fast) var(--ease);
}

.section--dark .link-arrow::after {
background: var(--gold-hi);
}

.link-arrow:hover {
gap: .7rem;
color: var(--emerald-hi);
}

.section--dark .link-arrow:hover {
color: #FFFFFF;
}

.link-arrow:hover::after {
width: 100%;
}

.tag, .chip {
display: inline-block;
padding: .35rem .85rem;
border: 1px solid var(--line);
border-radius: var(--r-pill);
background: var(--surface);
color: var(--muted);
font-size: .76rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}

.tag {
border-color: rgba(7, 91, 67, .3);
background: var(--emerald-tint);
color: var(--emerald);
}

.section--dark .tag {
border-color: rgba(240, 188, 51, 0.4);
background: var(--gold-tint);
color: var(--gold-hi);
}

.tag-list {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}

button.chip,
a.chip {
transition: all var(--t-fast);
}

button.chip:hover,
a.chip:hover {
border-color: var(--emerald);
color: var(--emerald);
}

button.chip[aria-pressed="true"] {
border-color: var(--emerald);
background: var(--emerald);
color: #FFFFFF;
}

/* 5. HEADER AND NAVIGATION */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
height: var(--header-h);
border-bottom: 1px solid var(--line);
background: rgba(247, 243, 233, .94);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}

.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
height: 100%;
}

.logo {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -.035em;
white-space: nowrap;
color: var(--emerald);
}

.logo span { color: var(--gold); }

.main-nav ul {
display: flex;
align-items: center;
gap: clamp(1rem, 2.4vw, 2rem);
}

.main-nav a {
padding: .45rem 0;
border-bottom: 2px solid transparent;
color: var(--muted);
font-size: .9rem;
font-weight: 600;
transition: color var(--t-fast), border-color var(--t-fast);
}

.main-nav a:hover,
.main-nav a[aria-current] {
border-color: var(--emerald);
color: var(--emerald);
}

.main-nav .nav-cta {
padding: .55rem 1.25rem;
border: 1px solid var(--emerald);
border-radius: var(--r-pill);
background: var(--emerald);
color: #FFFFFF;
font-weight: 700;
transition: background var(--t-fast), border-color var(--t-fast), transform var(--t) var(--ease), box-shadow var(--t-fast);
}

.main-nav .nav-cta:hover {
border-color: var(--emerald-hi);
background: var(--emerald-hi);
color: #FFFFFF;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(7, 91, 67, 0.25);
}

.menu-toggle {
position: relative;
display: none;
width: 44px;
height: 44px;
border: 1px solid var(--line-strong);
border-radius: 50%;
background: var(--surface);
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
position: absolute;
left: 50%;
width: 18px;
height: 2px;
border-radius: 2px;
background: var(--emerald);
transition: transform var(--t-fast), opacity var(--t-fast);
}

.menu-toggle span {
top: 50%;
transform: translate(-50%, -50%);
}

.menu-toggle span::before,
.menu-toggle span::after {
left: 0;
content: "";
}

.menu-toggle span::before { top: -6px; }
.menu-toggle span::after { top: 6px; }

.menu-toggle[aria-expanded="true"] span { background: transparent; }

.menu-toggle[aria-expanded="true"] span::before {
transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span::after {
transform: translateY(-6px) rotate(-45deg);
}

/* 6. HERO */
.hero {
position: relative;
padding: clamp(3rem, 7vw, 6rem) 0 var(--s-5);
overflow: hidden;
background:
radial-gradient(ellipse at 88% 8%, rgba(7, 91, 67, .14), transparent 34rem),
radial-gradient(ellipse at 0% 100%, rgba(212, 165, 44, .08), transparent 30rem),
var(--bg);
}

.hero-grid {
display: grid;
grid-template-columns: 1.25fr .85fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}

.hero h1 {
margin-bottom: var(--s-3);
font-family: var(--font-display);
font-size: var(--fs-h1);
font-weight: 600;
letter-spacing: -.05em;
line-height: 1.04;
color: var(--emerald);
}

.hero h1 em {
color: var(--gold);
font-style: italic;
}

.hero-roles {
margin-bottom: var(--s-2);
color: var(--text);
font-size: clamp(.95rem, .8rem + .6vw, 1.15rem);
font-weight: 700;
}

.hero-roles span {
margin: 0 .35em;
color: var(--gold);
}

.hero-lead {
max-width: 36rem;
margin-bottom: var(--s-3);
color: var(--muted);
font-size: var(--fs-lg);
line-height: 1.8;
}

.hero-cta {
display: flex;
flex-wrap: wrap;
gap: .8rem;
margin-bottom: var(--s-3);
}

.hero-verbs {
color: var(--muted);
font-size: var(--fs-sm);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}

/* Hero portrait */
.hero-portrait {
position: relative;
justify-self: center;
width: 100%;
max-width: 420px;
}

.hero-portrait::before {
position: absolute;
inset: 16px -16px -16px 16px;
border: 2px solid var(--gold);
border-radius: var(--r-lg);
content: "";
pointer-events: none;
}

.hero-portrait img {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
aspect-ratio: 5 / 6;
border: 1px solid var(--line-strong);
border-radius: var(--r-lg);
object-fit: cover;
object-position: 62% 25%;
box-shadow: var(--shadow);
animation: heroImageCinematic 10s ease-in-out both;
transform-origin: center;
will-change: transform, opacity;
}

.hero-quote {
position: absolute;
z-index: 2;
left: -1rem;
bottom: 1.5rem;
padding: 1rem 1.3rem;
border: 1px solid var(--line-strong);
border-left: 4px solid var(--gold);
border-radius: var(--r-md);
background: rgba(255, 255, 255, 0.96);
color: var(--text);
font-family: var(--font-display);
font-size: 1.04rem;
font-style: italic;
box-shadow: var(--shadow-card);
backdrop-filter: blur(12px);
}

@keyframes heroImageCinematic {
0% { opacity: 0; transform: scale(.92); }
15% { opacity: 1; transform: scale(1); }
45% { opacity: 1; transform: scale(1.05); }
75% { opacity: 1; transform: scale(1.02); }
100% { opacity: 1; transform: scale(1); }
}

/* Career journey strip */
.journey { margin-top: var(--s-5); }

.journey ol {
display: grid;
grid-template-columns: repeat(6, 1fr);
overflow: hidden;
border: 1px solid var(--line-strong);
border-radius: var(--r-lg);
background: var(--surface);
counter-reset: j;
box-shadow: var(--shadow-card);
}

.journey li {
border-right: 1px solid var(--line);
counter-increment: j;
}

.journey li:last-child { border-right: 0; }

.journey a {
display: block;
padding: 1.1rem 1rem;
color: var(--text);
font-size: .86rem;
font-weight: 700;
text-align: center;
transition: background var(--t-fast), color var(--t-fast);
}

.journey a::before {
display: block;
margin-bottom: .2rem;
color: var(--gold-deep);
content: "0" counter(j);
font-size: .7rem;
font-weight: 800;
letter-spacing: .16em;
}

.journey a:hover { background: var(--emerald-tint); color: var(--emerald); }

/* 7. WORK NAVIGATION */
.work-nav {
position: sticky;
top: var(--header-h);
z-index: 900;
border-bottom: 1px solid var(--line);
background: rgba(247, 243, 233, .94);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}

.work-nav ul {
display: flex;
gap: .5rem;
overflow-x: auto;
padding: .75rem 0;
scrollbar-width: none;
}

.work-nav ul::-webkit-scrollbar { display: none; }
.work-nav a { display: inline-block; white-space: nowrap; }

.work-nav a.chip:hover,
.work-nav a.chip[aria-current] {
border-color: var(--emerald);
background: var(--emerald);
color: #FFFFFF;
}

/* 8. CARDS AND MEDIA */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
gap: var(--s-3);
align-items: stretch;
}

.card {
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
border: 1px solid var(--line-strong);
border-radius: var(--r-md);
background: linear-gradient(145deg, #FFFFFF 0%, #EBF3ED 100%);
box-shadow: var(--shadow-card);
transition: transform var(--t) var(--ease), border-color var(--t-fast), box-shadow var(--t), background var(--t-fast);
}

.card:hover {
transform: translateY(-5px);
border-color: var(--gold);
box-shadow: var(--shadow-hover);
}

.section--dark .card {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.12);
}

.section--dark .card:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--gold-hi);
box-shadow: var(--shadow-dark-card), 0 0 0 1px var(--gold-hi);
}

.card-body {
display: flex;
flex: 1;
flex-direction: column;
padding: 1.4rem 1.4rem 1.25rem;
}

.card-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem;
margin-bottom: .6rem;
color: var(--emerald);
font-size: .74rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}

.section--dark .card-meta {
color: var(--gold-hi);
}

.card-meta .dot { color: var(--line-strong); }

.card h4 {
margin-bottom: .6rem;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: -.015em;
line-height: 1.3;
color: var(--emerald);
}

.section--dark .card h4 {
color: #FFFFFF;
}

.card p {
margin-bottom: 1rem;
color: var(--muted);
font-size: .94rem;
}

.section--dark .card p {
color: var(--on-dark-muted);
}

.card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: .82rem;
}

.section--dark .card-foot {
border-top-color: rgba(255, 255, 255, 0.1);
color: var(--on-dark-muted);
}

.player, .tile, .shot {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border: 0;
padding: 0;
background: var(--bg-2);
}

.player img, .shot img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .8s var(--ease), filter .3s ease;
}

.player::after {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(3, 43, 31, .6));
content: "";
pointer-events: none;
}

.player:hover img {
transform: scale(1.05);
filter: brightness(1.05);
}

.play {
position: absolute;
inset: 0;
z-index: 1;
width: 62px;
height: 62px;
margin: auto;
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 50%;
background: rgba(7, 91, 67, 0.85);
backdrop-filter: blur(8px);
transition: background var(--t-fast), border-color var(--t-fast), transform var(--t) var(--ease);
}

.play::after {
position: absolute;
top: 50%;
left: 54%;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 16px solid #FFFFFF;
content: "";
transform: translate(-50%, -50%);
}

.player:hover .play {
border-color: var(--gold-hi);
background: var(--emerald-hi);
transform: scale(1.1);
}

.player:hover .play::after { border-left-color: var(--gold-hi); }

iframe.embed {
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
background: var(--bg-2);
}

.tile {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1.4rem 1.5rem;
background:
radial-gradient(circle at 100% 0%, rgba(7, 91, 67, .12), transparent 65%),
linear-gradient(145deg, #FFFFFF 0%, #EBF3ED 100%);
}

.tile b {
color: var(--emerald);
font-family: var(--font-display);
font-size: 3.4rem;
font-weight: 700;
line-height: 1;
}

.tile span {
color: var(--muted);
font-size: .78rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}

/* Featured work mosaic */
.featured-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--s-3);
}

.featured-grid .card:first-child {
display: grid;
grid-column: 1 / -1;
grid-template-columns: 1.4fr 1fr;
align-items: center;
background:
radial-gradient(circle at 100% 0%, rgba(212, 165, 44, .1), transparent 60%),
linear-gradient(145deg, #FFFFFF 0%, #EBF3ED 100%);
}

.section--dark .featured-grid .card:first-child {
background:
radial-gradient(circle at 100% 0%, rgba(212, 165, 44, .15), transparent 60%),
rgba(255, 255, 255, 0.05);
}

.featured-grid .card:first-child .card-body {
padding: clamp(1.4rem, 3vw, 2.6rem);
}

.featured-grid .card:first-child .card-foot { margin-top: 1rem; }

.featured-grid .card:first-child h4 {
font-family: var(--font-display);
font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
font-weight: 600;
}

.featured-grid .card:first-child p { font-size: 1.02rem; }

/* Journalism and television */
.editorial {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: var(--s-4);
align-items: start;
}

.lead-story {
border: 0;
background: transparent;
box-shadow: none;
}

.lead-story:hover {
transform: none;
background: transparent;
box-shadow: none;
}

.lead-story .card-body { padding: 1.6rem 0 0; }

.lead-story .player {
overflow: hidden;
border-radius: var(--r-md);
box-shadow: var(--shadow-card);
}

.lead-story h4 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
font-weight: 600;
color: var(--emerald);
}

.lead-story p { font-size: 1rem; }

.story-list {
display: flex;
flex-direction: column;
border-top: 2px solid var(--emerald);
}

.section--dark .story-list {
border-top-color: var(--gold-hi);
}

.story-list li { border-bottom: 1px solid var(--line); }
.section--dark .story-list li { border-bottom-color: rgba(255, 255, 255, 0.1); }

.story {
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
gap: 1rem;
align-items: center;
padding: 1rem 0;
}

.story .thumb {
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: var(--r-sm);
background: var(--bg-2);
}

.story .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s var(--ease);
}

.story:hover .thumb img { transform: scale(1.08); }

.story h4 {
margin-bottom: .25rem;
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
color: var(--emerald);
transition: color var(--t-fast);
}

.section--dark .story h4 { color: #FFFFFF; }

.story small {
color: var(--muted);
font-size: .78rem;
letter-spacing: .04em;
}

.section--dark .story small { color: var(--on-dark-muted); }

.story a:hover h4 { color: var(--gold-hi); }

.more-row {
display: flex;
flex-wrap: wrap;
gap: .8rem;
margin-top: var(--s-3);
}

/* Radio */
.role-card {
padding: 1.6rem;
border: 1px solid var(--line-strong);
border-top: 4px solid var(--emerald);
border-radius: var(--r-md);
background: linear-gradient(145deg, #FFFFFF 0%, #EBF3ED 100%);
box-shadow: var(--shadow-card);
}

.role-card h4 {
margin-bottom: .6rem;
font-family: var(--font-display);
font-size: 1.45rem;
font-weight: 600;
color: var(--emerald);
}

.role-card p {
margin-bottom: 1rem;
color: var(--muted);
}

.audio-card .card-body { gap: .2rem; }

.audio-card audio {
width: 100%;
margin: .4rem 0 1rem;
accent-color: var(--emerald);
color-scheme: light;
}

.cover {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}

/* Graphic design masonry */
.masonry {
columns: 3 260px;
column-gap: var(--s-3);
}

.masonry figure {
break-inside: avoid;
margin-bottom: var(--s-3);
}

.masonry button {
display: block;
width: 100%;
overflow: hidden;
border: 1px solid var(--line-strong);
border-radius: var(--r-md);
padding: 0;
background: linear-gradient(145deg, #FFFFFF 0%, #EBF3ED 100%);
text-align: left;
box-shadow: var(--shadow-card);
transition: border-color var(--t-fast), transform var(--t) var(--ease), box-shadow var(--t);
}

.masonry button:hover {
transform: translateY(-5px);
border-color: var(--gold);
box-shadow: var(--shadow-hover);
}

.masonry img { width: 100%; height: auto; }

.masonry figcaption {
padding: .9rem 1.1rem;
color: var(--muted);
font-size: .88rem;
}

.masonry figcaption b {
display: block;
color: var(--emerald);
font-size: .96rem;
}

/* Website design case study */
.case {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: var(--s-4);
align-items: center;
padding: var(--s-3);
border: 1px solid var(--line-strong);
border-radius: var(--r-lg);
background:
radial-gradient(circle at 0% 0%, rgba(7, 91, 67, .06), transparent 55%),
linear-gradient(145deg, #FFFFFF 0%, #EBF3ED 100%);
box-shadow: var(--shadow-card);
}

.case .shot {
aspect-ratio: 16 / 10;
border: 1px solid var(--line);
border-radius: var(--r-md);
}

.case h4 {
margin: .3rem 0 var(--s-2);
font-family: var(--font-display);
font-size: 1.9rem;
font-weight: 600;
color: var(--emerald);
}

.case dl {
display: grid;
gap: .9rem;
margin-bottom: var(--s-3);
}

.case dt {
color: var(--emerald);
font-size: .72rem;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}

.case dd { color: var(--muted); font-size: .95rem; }

/* Capability cards */
.cap-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--s-3);
}

.cap {
padding: 1.6rem;
border: 1px solid var(--line-strong);
border-radius: var(--r-md);
background: linear-gradient(145deg, #FFFFFF 0%, #EBF3ED 100%);
box-shadow: var(--shadow-card);
transition: transform var(--t) var(--ease), border-color var(--t-fast), box-shadow var(--t), background var(--t-fast);
}

.cap:hover {
transform: translateY(-5px);
border-color: var(--gold);
box-shadow: var(--shadow-hover);
}

.cap h4 { margin-bottom: .5rem; font-size: 1.1rem; font-weight: 700; color: var(--emerald); }
.cap p { color: var(--muted); font-size: .93rem; }

.cap .num {
display: block;
margin-bottom: .6rem;
color: var(--gold-deep);
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 700;
}

/* Empty states */
.empty {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 2rem 1.6rem;
border: 1px dashed rgba(7, 91, 67, .5);
border-radius: var(--r-md);
background: var(--emerald-tint);
color: var(--muted);
font-size: .95rem;
}

.empty strong {
display: block;
margin-bottom: .2rem;
color: var(--emerald);
}

/* Social and digital */
.channel {
display: flex;
flex-direction: column;
gap: .2rem;
padding: 1.3rem 1.4rem;
border: 1px solid var(--line-strong);
border-radius: var(--r-md);
background: linear-gradient(145deg, #FFFFFF 0%, #EBF3ED 100%);
box-shadow: var(--shadow-card);
transition: transform var(--t) var(--ease), border-color var(--t-fast), box-shadow var(--t), background var(--t-fast);
}

.channel:hover {
transform: translateY(-4px);
border-color: var(--gold);
background: var(--gold-tint);
box-shadow: var(--shadow-hover);
}

.channel b { font-size: 1.05rem; font-weight: 700; color: var(--emerald); }
.channel span { color: var(--muted); font-size: .88rem; }

/* 9. ABOUT, SKILLS, EXPERIENCE AND LEADERSHIP */
.about-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}

.about-grid p {
margin-bottom: var(--s-2);
color: var(--muted);
font-size: var(--fs-lg);
}

.about-grid p strong {
color: var(--emerald);
font-weight: 700;
}

.about-grid .eyebrow { margin-bottom: var(--s-2); }

.pull {
margin: var(--s-3) 0;
padding-left: var(--s-3);
border-left: 4px solid var(--gold);
color: var(--emerald);
font-family: var(--font-display);
font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.1rem);
font-style: italic;
line-height: 1.35;
}

.facts {
padding: 1.8rem;
border: 1px solid var(--line-strong);
border-radius: var(--r-lg);
background:
radial-gradient(circle at 100% 0%, rgba(7, 91, 67, .08), transparent 60%),
linear-gradient(145deg, #FFFFFF 0%, #EBF3ED 100%);
box-shadow: var(--shadow-card);
}

.facts h3 {
margin-bottom: var(--s-2);
color: var(--emerald);
font-size: .78rem;
font-weight: 800;
letter-spacing: .2em;
text-transform: uppercase;
}

.facts li {
padding: .85rem 0;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: .95rem;
}

.facts li:first-of-type { border-top: 0; }

.facts li b {
display: block;
color: var(--emerald);
font-weight: 700;
}

.skills {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--s-3);
margin-top: var(--s-4);
}

.skill-group {
padding: 1.5rem;
border: 1px solid var(--line-strong);
border-radius: var(--r-md);
background: linear-gradient(145deg, #FFFFFF 0%, #EBF3ED 100%);
box-shadow: var(--shadow-card);
}

.skill-group h3 { margin-bottom: 1rem; color: var(--emerald); font-size: .98rem; font-weight: 700; }

.timeline {
display: grid;
gap: var(--s-2);
}

.job {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: var(--s-3);
padding: 1.6rem 0;
border-top: 1px solid var(--line);
}

.job h3 {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 600;
color: var(--emerald);
}

.job small {
display: block;
color: var(--muted);
font-size: .86rem;
}

.job .role {
margin-bottom: .6rem;
color: var(--emerald-hi);
font-weight: 700;
}

.job li {
position: relative;
margin-bottom: .35rem;
padding-left: 1.2rem;
color: var(--muted);
font-size: .96rem;
}

.job li::before {
position: absolute;
top: .75em;
left: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
content: "";
}

.lead-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--s-3);
}

/* 10. FLOATING WHATSAPP AND CALL BUTTONS */
.float-contact {
position: fixed;
top: 50%;
right: max(.75rem, env(safe-area-inset-right));
z-index: 1500;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
transform: translateY(-50%);
pointer-events: none;
}

.float-btn {
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
min-width: 44px;
padding: 0;
border: 1px solid var(--line-strong);
border-radius: 50%;
text-decoration: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(8px) scale(.85);
transform-origin: center;
box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
transition: opacity .3s ease, transform .3s ease, visibility .3s ease, box-shadow .3s ease;
}

.float-btn--wa {
background: var(--emerald);
color: #FFFFFF;
}

.float-btn--call {
background: var(--gold);
color: var(--on-gold);
}

.float-btn svg {
display: block;
flex: none;
width: 18px;
height: 18px;
}

.float-label { display: none; }

.float-contact.is-visible .float-btn.is-active {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}

.float-contact.is-visible .float-btn.is-active:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(7, 91, 67, .3);
}

.float-btn:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}

body.in-hero .float-contact {
visibility: hidden;
opacity: 0;
pointer-events: none;
}

body:not(.in-hero) .float-contact {
visibility: visible;
opacity: 1;
}

@media (max-width: 620px) {
.float-contact {
top: auto;
right: max(.6rem, env(safe-area-inset-right));
bottom: max(.8rem, env(safe-area-inset-bottom));
transform: none;
}

.float-btn {
width: 42px;
height: 42px;
min-width: 42px;
}
}

/* 11. CONTACT AND FOOTER */
.contact-card {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--s-4);
padding: clamp(1.6rem, 4vw, 3.2rem);
border: 1px solid var(--line-strong);
border-radius: var(--r-lg);
background:
radial-gradient(circle at 100% 0%, rgba(7, 91, 67, .1), transparent 26rem),
radial-gradient(circle at 0% 100%, rgba(212, 165, 44, .08), transparent 22rem),
linear-gradient(145deg, #FFFFFF 0%, #EBF3ED 100%);
box-shadow: var(--shadow-card);
}

.contact-card h2 {
margin-bottom: var(--s-2);
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: 600;
color: var(--emerald);
}

.contact-card p {
margin-bottom: var(--s-3);
color: var(--muted);
font-size: var(--fs-lg);
}

.contact-lines a {
display: block;
padding: .6rem 0;
border-bottom: 1px solid var(--line);
font-size: 1.15rem;
font-weight: 700;
color: var(--emerald);
overflow-wrap: anywhere;
transition: color var(--t-fast), padding-left var(--t) var(--ease);
}

.contact-lines a:hover {
padding-left: .5rem;
color: var(--emerald-hi);
}

.contact-lines small {
display: block;
color: var(--muted);
font-size: .72rem;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}

.social-row {
display: flex;
flex-wrap: wrap;
gap: .6rem;
margin-top: var(--s-3);
}

/* Center-aligned Editorial Footer */
.site-footer {
padding: var(--s-5) 0 var(--s-4);
border-top: 1px solid var(--emerald-dark);
background: var(--emerald-deep);
color: #EDE6D0;
font-size: var(--fs-sm);
text-align: center;
}

.footer-centered {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.5rem;
margin: 0 auto;
}

.footer-contacts {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1.2rem 2.2rem;
}

.footer-contact-item {
display: inline-flex;
align-items: center;
gap: .5rem;
color: #F7F3E9;
font-size: .95rem;
font-weight: 600;
transition: color var(--t-fast), transform var(--t-fast);
}

.footer-contact-item:hover {
color: var(--gold-hi);
transform: translateY(-2px);
}

.footer-socials {
display: flex;
align-items: center;
justify-content: center;
gap: 1.2rem;
}

.footer-socials a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid rgba(237, 230, 208, 0.25);
border-radius: 50%;
color: #EDE6D0;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.footer-socials a:hover {
background: var(--gold-hi);
border-color: var(--gold-hi);
color: var(--on-gold);
transform: translateY(-3px);
}

.footer-legal {
display: flex;
flex-direction: column;
align-items: center;
gap: .4rem;
padding-top: 1.2rem;
border-top: 1px solid rgba(237, 230, 208, 0.15);
width: 100%;
max-width: 500px;
}

.footer-legal p {
margin: 0;
color: rgba(237, 230, 208, 0.85);
}

.footer-legal a {
color: #F7F3E9;
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--t-fast);
}

.footer-legal a:hover {
color: var(--gold-hi);
}

/* 12. RECOMMENDATIONS QUOTE CAROUSEL (COMMERZA STYLE) */
.rec-slider-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
max-width: 880px;
margin: 0 auto;
padding: 0 3.8rem;
}

.rec-quote-card {
width: 100%;
padding: clamp(2.2rem, 5vw, 3.4rem) clamp(1.6rem, 4vw, 3.2rem);
border: 1px solid rgba(212, 165, 44, 0.3);
border-radius: var(--r-lg);
background:
radial-gradient(circle at 50% 0%, rgba(240, 188, 51, .12), transparent 70%),
linear-gradient(145deg, #FFFFFF 0%, #EBF3ED 100%);
box-shadow: var(--shadow-hover);
text-align: center;
}

.section--dark .rec-quote-card {
background:
radial-gradient(circle at 50% 0%, rgba(240, 188, 51, .16), transparent 70%),
rgba(255, 255, 255, 0.04);
border-color: rgba(240, 188, 51, 0.4);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.rec-slide {
display: none;
flex-direction: column;
align-items: center;
animation: fadeInQuote .4s var(--ease) forwards;
}

.rec-slide.is-active {
display: flex;
}

@keyframes fadeInQuote {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

/* Gold Ring Avatar */
.rec-avatar-ring {
position: relative;
display: grid;
place-items: center;
width: 112px;
height: 112px;
margin-bottom: 1.5rem;
border: 3px solid var(--gold-hi);
border-radius: 50%;
background: var(--emerald-tint);
overflow: hidden;
box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
}

.rec-avatar-ring img {
width: 100%;
height: 100%;
object-fit: cover;
}

.rec-initials {
color: var(--emerald);
font-family: var(--font-display);
font-size: 1.9rem;
font-weight: 700;
}

.section--dark .rec-initials {
color: var(--gold-hi);
}

/* Large Italic Quote */
.rec-quote-text {
max-width: 680px;
margin-bottom: 1.6rem;
color: var(--text);
font-family: var(--font-ui);
font-size: clamp(1.05rem, .98rem + .4vw, 1.28rem);
font-style: italic;
line-height: 1.75;
}

.section--dark .rec-quote-text {
color: #FFFFFF;
}

/* Author Details */
.rec-author-info {
margin-bottom: .8rem;
}

.rec-author-name {
color: var(--emerald);
font-family: var(--font-ui);
font-size: 1.18rem;
font-weight: 700;
letter-spacing: -.01em;
}

.section--dark .rec-author-name {
color: var(--gold-hi);
}

.rec-author-role {
color: var(--muted);
font-size: .9rem;
font-weight: 500;
}

.section--dark .rec-author-role {
color: var(--on-dark-muted);
}

.rec-action-wrap {
margin-top: .8rem;
}

/* Navigation Arrows */
.rec-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border: 1px solid var(--line-strong);
border-radius: 50%;
background: var(--surface);
color: var(--emerald);
transition: all var(--t-fast);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.section--dark .rec-arrow {
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.08);
color: #FFFFFF;
}

.rec-arrow:hover {
border-color: var(--gold-hi);
background: var(--gold-hi);
color: var(--on-gold);
transform: translateY(-50%) scale(1.1);
}

.rec-arrow--prev { left: 0; }
.rec-arrow--next { right: 0; }

/* Dot Indicators */
.rec-dots {
display: flex;
align-items: center;
justify-content: center;
gap: .55rem;
margin-top: 1.6rem;
}

.rec-dot {
width: 10px;
height: 10px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--line-strong);
transition: all var(--t-fast);
}

.section--dark .rec-dot {
background: rgba(255, 255, 255, 0.25);
}

.rec-dot.is-active {
width: 28px;
border-radius: var(--r-pill);
background: var(--gold-hi);
}

@media (max-width: 620px) {
.rec-slider-wrapper {
padding: 0;
}

.rec-arrow {
top: auto;
bottom: -3.2rem;
transform: none;
}

.rec-arrow:hover {
transform: scale(1.08);
}

.rec-arrow--prev { left: 20%; }
.rec-arrow--next { right: 20%; }

.rec-dots {
margin-top: 3.8rem;
}
}

/* 13. ARCHIVE PAGE & FOLDABLE FILTERS */
.page-hero { padding: clamp(3rem, 6vw, 5rem) 0 var(--s-3); }

.page-hero h1 {
margin-bottom: var(--s-2);
font-family: var(--font-display);
font-size: var(--fs-h2);
font-weight: 600;
letter-spacing: -.035em;
color: var(--emerald);
}

.page-hero p {
max-width: 42rem;
color: var(--muted);
font-size: var(--fs-lg);
}

.filters {
position: sticky;
top: var(--header-h);
z-index: 800;
padding: .85rem 0;
border-block: 1px solid var(--line);
background: rgba(247, 243, 233, .96);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 4px 20px rgba(7, 91, 67, 0.05);
}

.filters-header-bar {
display: flex;
align-items: center;
justify-content: space-between;
}

.filters-toggle-btn {
display: flex;
align-items: center;
gap: .6rem;
width: 100%;
padding: .4rem 0;
border: 0;
background: transparent;
color: var(--emerald);
font-size: .94rem;
font-weight: 700;
text-align: left;
}

.filters-toggle-btn .toggle-icon {
display: inline-block;
font-size: .75rem;
transition: transform var(--t-fast) var(--ease);
}

.filters-toggle-btn[aria-expanded="false"] .toggle-icon {
transform: rotate(-90deg);
}

.filters-hint {
margin-left: auto;
color: var(--muted);
font-size: .8rem;
font-weight: 400;
}

.filters-content {
max-height: 500px;
overflow: hidden;
opacity: 1;
padding-top: .6rem;
transition: max-height .4s var(--ease), opacity .3s ease, padding .3s ease;
}

.filters-content.is-collapsed {
max-height: 0;
opacity: 0;
padding-top: 0;
pointer-events: none;
}

.filter-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem .6rem;
margin-bottom: .6rem;
}

.filter-row:last-child { margin-bottom: 0; }

.filter-row > span {
min-width: 4.8rem;
color: var(--emerald);
font-size: .72rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}

.search {
flex: 1;
min-width: 200px;
max-width: 360px;
padding: .65rem 1.2rem;
border: 1px solid var(--line-strong);
border-radius: var(--r-pill);
background: var(--surface);
color: var(--text);
font: inherit;
font-size: .92rem;
}

.search:focus {
border-color: var(--emerald);
background: #FFFFFF;
outline: none;
box-shadow: 0 0 0 4px rgba(7, 91, 67, .15);
}

.search::placeholder { color: rgba(75, 82, 74, .55); }

.results-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin: var(--s-3) 0;
color: var(--muted);
font-size: var(--fs-sm);
}

/* 14. LIGHTBOX */
dialog.lightbox {
position: fixed;
width: 100%;
max-width: min(960px, 94vw);
max-height: 92vh;
margin: auto;
overflow: auto;
padding: 0;
border: 1px solid var(--line-strong);
border-radius: var(--r-lg);
background: #FFFFFF;
color: var(--text);
box-shadow: 0 25px 50px -12px rgba(3, 43, 31, 0.35);
}

dialog.lightbox::backdrop {
background: rgba(18, 23, 19, .75);
backdrop-filter: blur(10px);
}

.lb-body {
display: grid;
grid-template-columns: 1.4fr 1fr;
}

.lb-body img {
width: 100%;
height: auto;
max-height: 86vh;
object-fit: contain;
background: var(--bg-2);
}

.lb-info { padding: 2rem; }

.lb-info h3 {
margin: .4rem 0 .8rem;
font-family: var(--font-display);
font-size: 1.55rem;
color: var(--emerald);
}

.lb-info p,
.lb-info dd {
margin-bottom: .6rem;
color: var(--muted);
font-size: .94rem;
}

.lb-only .lb-body { grid-template-columns: 1fr; }
.lb-only .lb-info { display: none; }
.lb-only .lb-body img { margin: auto; }

.lb-close {
position: absolute;
top: .8rem;
right: .8rem;
z-index: 2;
width: 42px;
height: 42px;
border: 1px solid var(--line-strong);
border-radius: 50%;
background: rgba(255, 255, 255, .95);
color: var(--emerald);
font-size: 1.35rem;
line-height: 1;
transition: all var(--t-fast);
}

.lb-close:hover {
border-color: var(--emerald);
background: var(--emerald);
color: #FFFFFF;
}

/* 15. MOTION */
.js .reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.js .reveal.in {
opacity: 1;
transform: none;
}

.hero .hero-grid > * { animation: rise .9s var(--ease) both; }
.hero .hero-grid > *:nth-child(2) { animation-delay: .12s; }

@keyframes rise {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: none; }
}

/* ==========================================================================
   18. MASTERPIECE POLISH ADDITIONS (Availability Badge & Footer Spacing)
   ========================================================================== */

/* Live Availability Pulse Badge */
.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: var(--s-2);
  padding: .4rem .9rem;
  border: 1px solid rgba(7, 91, 67, 0.2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--emerald);
  font-size: .8rem;
  font-weight: 700;
  box-shadow: var(--shadow-card);
}

.pulse-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald-hi);
}

.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--emerald-hi);
  animation: pulseRing 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulseRing {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Mobile Thumb-Reach Protection for Footer / Floating Buttons */
@media (max-width: 620px) {
  .site-footer {
    padding-bottom: calc(var(--s-5) + 2rem);
  }
}

/* 16. RESPONSIVE DESIGN */
@media (min-width: 1500px) {
:root { --container: 1280px; }
}

@media (max-width: 980px) {
.hero-grid,
.about-grid,
.contact-card,
.case,
.editorial {
grid-template-columns: 1fr;
}

.hero-portrait {
order: -1;
max-width: 340px;
margin-bottom: var(--s-2);
}

.hero-portrait::before { inset: 12px -10px -12px 10px; }

.featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.featured-grid .card:first-child { grid-template-columns: 1fr; }

.journey ol { grid-template-columns: repeat(3, 1fr); }

.journey li:nth-child(3) { border-right: 0; }

.journey li:nth-child(-n+3) { border-bottom: 1px solid var(--line); }

.job { grid-template-columns: 1fr; gap: .5rem; }

.lb-body { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
.menu-toggle { display: block; }

.main-nav {
position: absolute;
top: var(--header-h);
left: 0;
right: 0;
max-height: 0;
overflow: hidden;
visibility: hidden;
padding: 0 clamp(1.1rem, 4vw, 2rem);
border-bottom: 1px solid transparent;
background: rgba(247, 243, 233, .98);
box-shadow: 0 18px 28px -20px rgba(0, 0, 0, .2);
transition: max-height var(--t) var(--ease), visibility 0s var(--t);
}

.main-nav.nav-open {
max-height: 80vh;
visibility: visible;
padding-block: 1rem 1.5rem;
border-bottom-color: var(--line);
transition: max-height var(--t) var(--ease);
}

.main-nav ul {
flex-direction: column;
align-items: stretch;
gap: 0;
}

.main-nav a {
display: block;
padding: .95rem 0;
border-bottom: 1px solid var(--line);
font-size: 1.05rem;
}

.main-nav .nav-cta {
margin-top: 1rem;
border-radius: var(--r-pill);
text-align: center;
}
}

@media (max-width: 620px) {
:root { --s-6: 4rem; }

.section { padding-block: var(--s-6); }

.featured-grid { grid-template-columns: 1fr; }
.featured-grid .card:first-child { grid-column: auto; }

.journey ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.journey li,
.journey li:nth-child(3) {
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}

.journey li:nth-child(2n) { border-right: 0; }
.journey li:nth-last-child(-n+2) { border-bottom: 0; }

.hero-quote {
left: .6rem;
bottom: .8rem;
max-width: calc(100% - 1.2rem);
font-size: .95rem;
}

.story {
grid-template-columns: 92px minmax(0, 1fr);
gap: .8rem;
}

.filter-row > span { width: 100%; }
.search { max-width: none; }

.btn { width: 100%; }
.btn--sm { width: auto; }

.hero-cta .btn,
.more-row .btn { width: 100%; }

.footer-inner {
flex-direction: column;
text-align: center;
}

.lb-info { padding: 1.3rem; }

.contact-lines a { font-size: 1rem; }
}

/* 17. CAMPAIGN HELPERS & ACCESSIBILITY */
.camp-role {
margin-top: .6rem;
color: var(--muted, inherit);
font-size: .85rem;
}

.camp-role b {
color: var(--emerald);
font-weight: 700;
}

.camp-actions {
justify-content: flex-start;
gap: 1rem;
flex-wrap: wrap;
}

@media (hover: none) {
.card:hover,
.cap:hover,
.channel:hover,
.masonry button:hover {
transform: none;
}
}

@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }

*, *::before, *::after {
animation: none !important;
transition: none !important;
}

.js .reveal {
opacity: 1;
transform: none;
}

.hero-portrait img {
opacity: 1;
transform: none;
will-change: auto;
}
}

@media (prefers-reduced-transparency: reduce) {
.site-header,
.work-nav,
.filters,
.hero-quote {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}

@media print {
.site-header,
.work-nav,
.float-contact,
.filters { display: none !important; }

body { background: #FFFFFF; color: #19211B; }
}