/* ==========================================================
   JESEV — Design-System (Farben aus dem Vereinslogo abgeleitet)
   ========================================================== */
:root{
  --primary: #33513E;
  --primary-dark: #223429;
  --primary-tint: #E4EBE2;
  --accent: #23C6D7;
  --accent-dark: #1897A4;
  --accent-tint: #DFF8FA;
  --ink: #2E2A35;
  --ink-soft: #5F5A69;
  --ink-faint: #948FA0;
  --line: #E6E1EF;
  --bg: #FCFBFE;
  --bg-alt: #F5F2FA;
  --white: #FFFFFF;
  --shadow: 0 18px 40px -22px rgba(46,26,77,0.35);
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;
  --ease-out: cubic-bezier(0.23,1,0.32,1);
  --ease-in-out: cubic-bezier(0.77,0,0.175,1);
  --font-serif: 'Fraunces', serif;
  --font-sans: 'Work Sans', sans-serif;
  --max: 1120px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-sans); background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
h1,h2,h3,h4{ font-family:var(--font-serif); color:var(--primary-dark); margin:0 0 0.5em; line-height:1.12; font-weight:600; letter-spacing:-0.01em; }
p{ margin:0 0 1em; color:var(--ink-soft); max-width:64ch; }
.article-body p{ max-width:none; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 28px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent-dark); outline-offset:3px; border-radius:4px;
}

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:999px; font-weight:600; font-size:15px; border:1px solid transparent; transition:transform 160ms var(--ease-out), background 200ms ease, box-shadow 200ms ease; white-space:nowrap; }
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--primary); color:var(--white); }
.btn-primary:hover{ background:var(--primary-dark); box-shadow:var(--shadow); }
.btn-accent{ background:var(--accent); color:#04333A; }
.btn-accent:hover{ background:var(--accent-dark); color:var(--white); }
.btn-ghost{ background:transparent; color:var(--primary-dark); border-color:var(--line); }
.btn-ghost:hover{ background:var(--primary-tint); }
.btn-sm{ padding:9px 18px; font-size:13.5px; }

/* Header / Nav */
header.site{ position:sticky; top:0; z-index:50; background:rgba(252,251,254,0.88); backdrop-filter:blur(10px); }
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; gap:24px; }
.brand{ display:flex; align-items:center; }
.brand img{ height:86px; width:auto; display:block; }
nav.primary{ display:flex; align-items:center; gap:2px; }
nav.primary > a, .nav-drop > button{ padding:10px 14px; border-radius:999px; font-size:14.5px; font-weight:500; color:var(--ink-soft); background:transparent; border:none; transition:background 160ms ease, color 160ms ease; }
nav.primary > a:hover, .nav-drop > button:hover, nav.primary > a.active, .nav-drop.active > button{ background:var(--primary-tint); color:var(--primary-dark); }
.nav-drop{ position:relative; }
.nav-drop-panel{ position:absolute; top:calc(100% + 8px); left:0; min-width:230px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); box-shadow:var(--shadow); padding:8px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 160ms; }
.nav-drop.open .nav-drop-panel{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-drop-panel a{ display:block; padding:10px 12px; border-radius:var(--radius-s); font-size:14px; color:var(--ink); }
.nav-drop-panel a:hover{ background:var(--bg-alt); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.burger{ display:none; background:none; border:1px solid var(--line); border-radius:10px; padding:9px 11px; }
.burger span{ display:block; width:20px; height:2px; background:var(--ink); margin:4px 0; border-radius:2px; }
@media (max-width:980px){ nav.primary{ display:none; } .nav-cta .btn-ghost{ display:none; } .burger{ display:block; } }
.mobile-menu{ display:none; flex-direction:column; gap:2px; padding:10px 0 18px; border-top:1px solid var(--line); }
.mobile-menu.open{ display:flex; }
.mobile-menu a{ padding:12px 6px; font-weight:500; border-radius:10px; }
.mobile-menu a:hover{ background:var(--primary-tint); }
.mobile-submenu{ padding-left:16px; display:flex; flex-direction:column; }
.mobile-submenu a{ font-weight:400; font-size:14px; color:var(--ink-soft); }

/* Hero */
.hero{ padding:clamp(48px,9vh,92px) 0 clamp(28px,5vh,48px); position:relative; background:var(--bg); text-align:center; }
.hero-grid{ position:relative; z-index:1; max-width:760px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.eyebrow{
  font-size:13.5px; color:var(--primary-dark); font-weight:600; margin-bottom:clamp(14px,2.5vh,22px);
  display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--line);
  padding:8px 16px 8px 12px; border-radius:999px; box-shadow:var(--shadow);
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:0 0 auto; }
.hero h1{ font-size:clamp(32px,5.5vw,58px); max-width:16ch; margin:0 auto; line-height:1.08; }
.hero p.lead{ font-size:18px; max-width:50ch; margin:clamp(14px,2.5vh,20px) auto 0; }
.hero-actions{ display:flex; gap:14px; margin-top:clamp(20px,3.5vh,32px); flex-wrap:wrap; justify-content:center; }
.hero-stats{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:center; margin-top:clamp(28px,5vh,52px); }
.stat-block{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.stat-block strong{ font-family:var(--font-serif); font-size:clamp(24px,3.2vh,30px); font-weight:700; color:var(--primary-dark); line-height:1; font-variant-numeric:tabular-nums; }
.stat-block span{ font-size:12px; font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.05em; max-width:16ch; }
.stat-divider{ width:1px; height:34px; background:var(--line); }
@media (max-width:560px){ .stat-divider{ display:none; } .hero-stats{ gap:22px 34px; } }

.scroll-down{
  margin-top:18px; display:inline-flex; flex-direction:column; align-items:center; gap:7px;
  color:var(--ink-faint); padding:10px 16px; border-radius:999px;
  animation:scrollBounce 1.8s ease-in-out infinite;
  transition:color 160ms ease, background 160ms ease;
}
.scroll-down-label{ font-size:11px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; }
.scroll-down:hover{ background:var(--primary-tint); color:var(--primary-dark); }
.scroll-down svg{ width:18px; height:18px; }
@keyframes scrollBounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(7px); }
}

/* Sections */
section{ padding:76px 0; }
section.alt{ background:var(--bg-alt); }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:38px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(26px,3vw,36px); max-width:20ch; margin:0; }
.section-head p{ margin:0; }
.kicker{ font-size:13px; letter-spacing:0.02em; color:var(--primary); font-weight:600; margin-bottom:10px; display:block; }

/* Cards */
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
@media (max-width:900px){ .grid3{ grid-template-columns:1fr 1fr; } .grid2{ grid-template-columns:1fr; } }
@media (max-width:640px){ .grid3{ grid-template-columns:1fr; } }

.card-article{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; display:flex; flex-direction:column; transition:transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
.card-article:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.card-media{ aspect-ratio:16/10; background-size:cover; background-position:center; position:relative; }
.card-media .badge{ position:absolute; top:12px; left:12px; background:var(--white); color:var(--primary-dark); font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; }
.card-body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card-date{ font-size:12.5px; color:var(--ink-faint); font-weight:600; text-transform:uppercase; letter-spacing:0.03em; }
.card-body h3{ font-size:19px; margin:0; }
.card-body p{ font-size:14.5px; margin:0; }
.card-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.tag-chip{ font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--accent-tint); color:var(--accent-dark); }
.card-link{ margin-top:auto; font-size:14px; font-weight:600; color:var(--primary); display:inline-flex; align-items:center; gap:6px; padding-top:8px; }
.card-link .arrow{ transition:transform 160ms var(--ease-out); }
.card-article:hover .card-link .arrow{ transform:translateX(3px); }

.event-row{ display:flex; gap:20px; align-items:center; padding:18px 20px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--white); transition:box-shadow 200ms ease, transform 200ms var(--ease-out); }
.event-row:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.event-date{ flex:0 0 auto; width:66px; height:66px; border-radius:var(--radius-s); background:var(--primary-tint); display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--primary-dark); }
.event-date .d{ font-family:var(--font-serif); font-size:22px; font-weight:700; line-height:1; }
.event-date .m{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; }
.event-info h3{ font-size:17px; margin:0 0 4px; }
.event-info .meta{ font-size:13px; color:var(--ink-faint); }

.project-card{ border-radius:var(--radius-l); padding:32px; color:var(--white); position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; min-height:280px; }
.project-card h3{ color:var(--white); font-size:24px; }
.project-card p{ color:rgba(255,255,255,0.86); font-size:14.5px; }
.project-card::before{ content:""; position:absolute; inset:0; opacity:0.16; background-image:radial-gradient(rgba(255,255,255,0.5) 1.4px, transparent 1.4px); background-size:20px 20px; }

.pill{ display:inline-block; padding:5px 13px; background:var(--primary-tint); color:var(--primary-dark); border-radius:999px; font-size:12.5px; font-weight:600; }
.divider{ height:1px; background:var(--line); border:none; margin:0; }
.callout{ background:var(--primary); color:var(--white); border-radius:var(--radius-l); padding:52px; display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; }
.callout h2{ color:var(--white); margin:0; font-size:clamp(24px,3vw,32px); max-width:16ch; }
.callout p{ color:rgba(255,255,255,0.82); margin:6px 0 0; }

table.plain{ width:100%; border-collapse:collapse; }
table.plain td, table.plain th{ padding:10px 0; border-bottom:1px solid var(--line); text-align:left; font-size:14.5px; }
table.plain th{ color:var(--ink-faint); font-weight:600; width:38%; }

.contact-row{ display:flex; gap:16px; align-items:flex-start; }
.contact-icon{ flex:0 0 auto; width:42px; height:42px; border-radius:12px; background:var(--primary-tint); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; }
.contact-icon svg{ width:19px; height:19px; }
.contact-label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-faint); margin-bottom:4px; }
.contact-value{ font-size:15px; color:var(--ink); line-height:1.5; }
.contact-value a{ color:var(--primary); font-weight:600; }
.contact-divider{ border:none; border-top:1px solid var(--line); margin:0; }

.breadcrumbs{ font-size:13.5px; color:var(--ink-faint); margin-bottom:18px; }
.breadcrumbs a:hover{ color:var(--primary); }
.page-hero{ padding:56px 0 40px; }
.page-hero h1{ font-size:clamp(30px,4vw,44px); }

/* Forms */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label{ font-size:13.5px; font-weight:600; color:var(--ink-soft); }
.field input, .field textarea, .field select{ padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-s); font-family:inherit; font-size:14.5px; background:var(--white); color:var(--ink); transition:border-color 160ms ease, box-shadow 160ms ease; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-tint); outline:none; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .field-row{ grid-template-columns:1fr; } }
.form-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-l); padding:36px; }
.note-box{ background:var(--accent-tint); border:1px solid var(--accent); border-radius:var(--radius-m); padding:16px 18px; font-size:14px; color:var(--accent-dark); }
.info-box{ background:var(--primary-tint); border-radius:var(--radius-m); padding:18px 20px; font-size:14px; color:var(--primary-dark); }

/* FAQ */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; background:none; border:none; padding:20px 4px; display:flex; justify-content:space-between; align-items:center; font-family:var(--font-serif); font-size:17px; color:var(--primary-dark); font-weight:600; }
.faq-plus{ transition:transform 220ms var(--ease-in-out); font-size:20px; color:var(--accent-dark); flex:0 0 auto; margin-left:16px; }
.faq-item.open .faq-plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height 260ms var(--ease-in-out); }
.faq-a-inner{ padding:0 4px 20px; }
.faq-item.open .faq-a{ max-height:400px; }

/* Gallery */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:760px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
.gallery-item{ aspect-ratio:1; border-radius:var(--radius-s); background-size:cover; background-position:center; transition:transform 220ms var(--ease-out); }
.gallery-item:hover{ transform:scale(1.03); }

/* Filter toolbar (Veranstaltungen) */
.filter-bar{ display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); padding:20px; margin-bottom:32px; }
.filter-bar .field{ margin:0; min-width:180px; }
.filter-bar .field.grow{ flex:1; min-width:220px; }
.filter-bar input, .filter-bar select, .filter-bar .btn{
  height:46px; box-sizing:border-box; line-height:1.2;
}
.filter-bar select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235F5A69' stroke-width='1.6'%3E%3Cpath d='M6 8l4 4 4-4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px;
  padding-right:36px;
}
.filter-bar .btn{ padding:0 22px; display:inline-flex; align-items:center; justify-content:center; }
.tag-toggle-row{ display:flex; flex-wrap:wrap; gap:8px; }
.tag-toggle{ padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--white); font-size:13px; font-weight:600; color:var(--ink-soft); transition:all 160ms var(--ease-out); }
.tag-toggle.active{ background:var(--primary); border-color:var(--primary); color:var(--white); }
.result-count{ font-size:13.5px; color:var(--ink-faint); margin-bottom:18px; }
.no-results{ padding:40px; text-align:center; color:var(--ink-faint); border:1px dashed var(--line); border-radius:var(--radius-m); }

/* Footer */
footer.site{ background:var(--primary-dark); color:rgba(255,255,255,0.82); padding:56px 0 28px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:48px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
footer.site h4{ color:var(--white); font-size:14px; font-family:var(--font-sans); font-weight:600; margin-bottom:14px; letter-spacing:0.02em; }
footer.site a{ display:block; padding:5px 0; font-size:14px; color:rgba(255,255,255,0.7); }
footer.site a:hover{ color:var(--accent); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:13px; color:rgba(255,255,255,0.55); flex-wrap:wrap; gap:12px; }
.social-row{ display:flex; gap:10px; }
.social-row a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; padding:0; transition:background 160ms ease, transform 160ms ease, color 160ms ease; }
.social-row a:hover{ transform:translateY(-2px); }
.social-row svg{ width:17px; height:17px; fill:currentColor; }
.social-row a:hover{ background:var(--accent); color:var(--primary-dark); }

/* Im Footer ohne Kreis-Hintergrund, nur das Icon selbst */
footer.site .social-row a{ background:none; width:auto; height:auto; }
footer.site .social-row svg{ width:22px; height:22px; }
footer.site .social-row a:hover{ background:none; color:var(--accent); transform:translateY(-2px); }

.loading-screen{ min-height:40vh; display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:14px; }

#toast{ position:fixed; bottom:24px; left:50%; transform:translate(-50%,10px); background:var(--primary-dark); color:var(--white); padding:14px 22px; border-radius:999px; font-size:14px; opacity:0; pointer-events:none; transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out); z-index:200; box-shadow:var(--shadow); }
#toast.show{ opacity:1; transform:translate(-50%,0); }

.back-to-top{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:46px; height:46px; border-radius:50%; background:var(--primary); color:var(--white);
  border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity 220ms ease, transform 220ms ease, visibility 220ms, background 160ms ease;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--primary-dark); }
.back-to-top svg{ width:20px; height:20px; }
@media (max-width:640px){ .back-to-top{ right:16px; bottom:16px; width:42px; height:42px; } }

@media (prefers-reduced-motion: reduce){ *{ transition-duration:0.001ms !important; animation-duration:0.001ms !important; } }
.reveal{ opacity:0; transform:translateY(18px); transition:opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* Gestaffeltes Einblenden innerhalb von Grids/Listen für einen hochwertigeren Eindruck */
.grid3 > .reveal:nth-child(1),.grid2 > .reveal:nth-child(1){ transition-delay:0ms; }
.grid3 > .reveal:nth-child(2),.grid2 > .reveal:nth-child(2){ transition-delay:90ms; }
.grid3 > .reveal:nth-child(3){ transition-delay:180ms; }
.grid3 > .reveal:nth-child(4),.grid2 > .reveal:nth-child(3){ transition-delay:270ms; }
.grid3 > .reveal:nth-child(5),.grid2 > .reveal:nth-child(4){ transition-delay:360ms; }
.grid3 > .reveal:nth-child(6){ transition-delay:450ms; }
.hero-stats .stat-block:nth-child(1){ transition-delay:0ms; }
.hero-stats .stat-block:nth-child(3){ transition-delay:120ms; }
.hero-stats .stat-block:nth-child(5){ transition-delay:240ms; }
#events-upcoming .reveal:nth-child(1), #events-past .reveal:nth-child(1){ transition-delay:0ms; }
#events-upcoming .reveal:nth-child(2), #events-past .reveal:nth-child(2){ transition-delay:80ms; }
#events-upcoming .reveal:nth-child(3), #events-past .reveal:nth-child(3){ transition-delay:160ms; }


/* Zeitstrahl (Über uns) */
.timeline{ position:relative; max-width:900px; margin:0 auto; padding:10px 0; }
.timeline::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--line); transform:translateX(-50%); }
.timeline-item{ position:relative; width:50%; padding:0 44px 60px; box-sizing:border-box; opacity:0; transform:translateY(28px); transition:opacity 650ms var(--ease-out), transform 650ms var(--ease-out); }
.timeline-item.in{ opacity:1; transform:translateY(0); }
.timeline-item:nth-child(odd){ left:0; text-align:right; }
.timeline-item:nth-child(even){ left:50%; text-align:left; }
.timeline-item:nth-child(odd) .timeline-content{ margin-left:auto; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{ position:absolute; top:5px; width:16px; height:16px; border-radius:50%; background:var(--accent); border:3px solid var(--bg); box-shadow:0 0 0 2px var(--accent); transition:transform 400ms var(--ease-out) 150ms; transform:scale(0); }
.timeline-item.in .timeline-dot{ transform:scale(1); }
.timeline-item:nth-child(odd) .timeline-dot{ right:-8px; }
.timeline-item:nth-child(even) .timeline-dot{ left:-8px; }
.timeline-year{ font-family:var(--font-serif); font-size:22px; color:var(--primary-dark); font-weight:700; margin-bottom:8px; }
.timeline-content{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); padding:20px 22px; display:inline-block; max-width:380px; box-shadow:var(--shadow); }
.timeline-content h4{ font-family:var(--font-serif); font-size:17px; color:var(--primary-dark); margin:0 0 6px; }
.timeline-content p{ margin:0; font-size:14px; }
@media (max-width:760px){
  .timeline::before{ left:15px; }
  .timeline-item, .timeline-item:nth-child(even){ width:100%; left:0; text-align:left; padding:0 0 40px 46px; }
  .timeline-item:nth-child(odd) .timeline-content{ margin-left:0; }
  .timeline-item:nth-child(odd) .timeline-dot, .timeline-item:nth-child(even) .timeline-dot{ left:7px; right:auto; }
}

/* ============ "Unsere Arbeit" — Expanding Panels ============ */
.work-section{ padding:90px 0 100px; }
.work-head{ text-align:center; max-width:620px; margin:0 auto 56px; }
.work-head h2{ font-size:clamp(28px,3.6vw,40px); line-height:1.15; margin-top:0; }
.work-head p{ margin-top:16px; font-size:16px; }

.panels{
  display:flex; gap:10px; height:520px; border-radius:28px; overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(34,52,41,0.35);
}
.panel{
  position:relative; flex:1; min-width:0; cursor:pointer; overflow:hidden;
  border-radius:22px; transition:flex 650ms var(--ease-out);
  display:flex; align-items:flex-end; color:#fff; outline:none;
}
.panel:focus-visible{ box-shadow:inset 0 0 0 3px var(--accent); }
.panels:hover .panel{ flex:1; }
.panels:hover .panel:hover, .panel.is-active{ flex:3.2; }

.panel-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.08); transition:transform 900ms var(--ease-out); }
.panel:hover .panel-bg, .panel.is-active .panel-bg{ transform:scale(1); }
.panel-scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.35) 100%); }

.panel-content{
  position:absolute; inset:0; z-index:2; padding:30px 22px; width:100%;
  display:flex; align-items:flex-end;
}
.panel-collapsed{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  position:absolute; inset:0; padding:26px 0; z-index:3; opacity:1;
  transition:opacity 380ms ease, visibility 0ms 0ms;
}
.panel.is-active .panel-collapsed, .panels:hover .panel:hover .panel-collapsed{
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity 380ms ease, visibility 0ms 380ms;
}
.panel-index{ font-family:var(--font-serif); font-size:15px; color:rgba(255,255,255,0.65); }
.panel-vert-title{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font-serif); font-size:22px; font-weight:600; letter-spacing:0.01em;
  margin-top:auto; margin-bottom:auto; color:#fff;
}
.panel-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); }

.panel-expanded{
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(14px); max-width:440px;
  transition:opacity 400ms ease, transform 400ms var(--ease-out), visibility 0ms 400ms;
}
.panel.is-active .panel-expanded, .panels:hover .panel:hover .panel-expanded{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  transition:opacity 400ms ease 120ms, transform 400ms var(--ease-out) 120ms, visibility 0ms 0ms;
}
.panel-eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.panel-expanded h3{ color:#fff; font-size:clamp(22px,2.6vw,30px); margin-bottom:12px; }
.panel-expanded p{ color:rgba(255,255,255,0.86); font-size:14.5px; line-height:1.6; margin-bottom:20px; }
.panel-cta{
  display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--primary-dark);
  font-weight:600; font-size:14px; padding:11px 20px; border-radius:999px; text-decoration:none;
  transition:gap 200ms ease, background 160ms ease;
}
.panel-cta:hover{ gap:12px; background:var(--accent); color:#04333A; }

@media (max-width:820px){
  .panels{ flex-direction:column; height:auto; gap:12px; }
  .panel{ height:84px; transition:height 500ms var(--ease-out); flex:none !important; }
  .panel.is-active{ height:420px; }
  .panel-collapsed{ flex-direction:row; padding:0 22px; justify-content:flex-start; gap:16px; }
  .panel-vert-title{ writing-mode:horizontal-tb; transform:none; margin:0; font-size:19px; }
  .panel-expanded{ max-width:100%; }
}