/* ==========================================================================
   HANSEATIC EVENTS — Nachtgezeiten Design System
   Dark maritime agency aesthetic. One accent, spent deliberately.
   ========================================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=clash-display@600,700&f[]=general-sans@400,500,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --ink:        #080b10;
  --ink-2:      #0c0f16;
  --panel:      #10141c;
  --panel-2:    #161b25;
  --line:       #232a37;
  --fog:        #b7bdc9;
  --fog-dim:    #7d8493;
  --paper:      #f3f1ea;
  --amber:      #e8a33d;
  --amber-soft: #f0bd6c;
  --amber-dim:  #4a3a1e;

  --display: 'Clash Display', 'General Sans', sans-serif;
  --body:    'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 64px);
  --radius: 2px;
}

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

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:600; letter-spacing:-0.01em; }
p{ margin:0; }

::selection{ background:var(--amber); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--amber);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--amber);
  display:inline-block;
}

/* ---------- Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(8,11,16,0.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter);
  max-width:var(--wrap); margin:0 auto;
}
.brand{
  font-family:var(--display); font-weight:700; font-size:19px;
  letter-spacing:-0.01em;
  display:flex; align-items:baseline; gap:8px;
}
.brand small{
  font-family:var(--mono); font-size:10px; font-weight:400;
  color:var(--fog-dim); letter-spacing:0.1em;
}
.nav-links{
  display:flex; gap:34px; align-items:center;
}
.nav-links a{
  font-size:14px; color:var(--fog);
  position:relative; padding:4px 0;
  transition:color .2s ease;
}
.nav-links a:hover, .nav-links a.active{ color:var(--paper); }
.nav-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:var(--amber);
}
.nav-cta{
  font-family:var(--mono); font-size:12px; letter-spacing:.05em;
  border:1px solid var(--amber-dim);
  color:var(--amber-soft) !important;
  padding:9px 16px; border-radius:var(--radius);
  transition:all .2s ease;
}
.nav-cta:hover{ background:var(--amber); color:var(--ink) !important; border-color:var(--amber); }
.nav-toggle{ display:none; }

/* ---------- Manifest ticker (signature element) ---------- */
.manifest{
  border-bottom:1px solid var(--line);
  background:var(--ink-2);
  overflow:hidden;
  white-space:nowrap;
}
.manifest-track{
  display:inline-flex;
  animation:manifest-scroll 38s linear infinite;
}
.manifest-track span{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--fog-dim); padding:9px 28px;
  display:inline-flex; align-items:center; gap:10px;
  border-right:1px solid var(--line);
  text-transform:uppercase;
}
.manifest-track span b{ color:var(--amber-soft); font-weight:500; }
@keyframes manifest-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:80px var(--gutter) 60px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-sweep{
  position:absolute; inset:-20%;
  background:conic-gradient(from 0deg at 72% 38%, transparent 0deg, rgba(232,163,61,0.16) 8deg, transparent 30deg, transparent 360deg);
  animation:sweep 14s linear infinite;
  pointer-events:none;
}
@keyframes sweep{ to{ transform:rotate(360deg); } }
.hero-grid-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:0.28;
  mask-image:radial-gradient(ellipse 80% 60% at 60% 30%, black, transparent);
}
.hero-inner{ position:relative; max-width:var(--wrap); margin:0 auto; width:100%; }
.hero-kicker{
  font-family:var(--mono); font-size:13px; letter-spacing:.12em;
  color:var(--amber-soft); text-transform:uppercase;
  margin-bottom:26px; display:flex; align-items:center; gap:10px;
}
.hero-kicker .dot{ width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 12px var(--amber); }
.hero h1{
  font-size:clamp(44px, 8vw, 108px);
  line-height:0.96;
  max-width:16ch;
}
.hero h1 em{
  font-style:normal; color:var(--amber);
}
.hero-sub{
  margin-top:30px; max-width:46ch;
  font-size:clamp(16px,1.6vw,20px); color:var(--fog);
}
.hero-actions{ margin-top:44px; display:flex; gap:16px; flex-wrap:wrap; }
.hero-stats{
  margin-top:76px;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  padding-top:28px;
}
.hero-stats div{ border-right:1px solid var(--line); padding-right:20px; }
.hero-stats div:last-child{ border-right:none; }
.hero-stats .num{ font-family:var(--display); font-size:clamp(22px,3vw,36px); color:var(--paper); }
.hero-stats .label{ font-family:var(--mono); font-size:11px; color:var(--fog-dim); letter-spacing:.06em; text-transform:uppercase; margin-top:4px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  padding:15px 26px; border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer; transition:all .2s ease;
}
.btn-primary{ background:var(--amber); color:var(--ink); }
.btn-primary:hover{ background:var(--amber-soft); transform:translateY(-1px); }
.btn-ghost{ border-color:var(--line); color:var(--paper); }
.btn-ghost:hover{ border-color:var(--amber-dim); background:var(--panel); }

/* ---------- Section scaffolding ---------- */
section{ padding:120px 0; border-bottom:1px solid var(--line); }
section.tight{ padding:80px 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; margin-bottom:64px; flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(30px,4.2vw,54px); max-width:14ch; line-height:1.02; }
.section-head p{ max-width:38ch; color:var(--fog); font-size:15px; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Editorial services grid ---------- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.service-card{
  background:var(--panel);
  padding:40px clamp(24px,3vw,40px);
  grid-column:span 6;
  min-height:280px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:background .25s ease;
}
.service-card:hover{ background:var(--panel-2); }
.service-card.wide{ grid-column:span 12; min-height:220px; }
.service-card.narrow{ grid-column:span 4; }
.service-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.service-tag{ font-family:var(--mono); font-size:11px; color:var(--fog-dim); letter-spacing:.08em; text-transform:uppercase; }
.service-price{ font-family:var(--mono); font-size:13px; color:var(--amber-soft); text-align:right; }
.service-card h3{ font-size:clamp(22px,2.4vw,32px); margin-top:22px; }
.service-card p{ color:var(--fog); font-size:14.5px; margin-top:14px; max-width:42ch; }
.service-list{ margin-top:20px; display:flex; flex-wrap:wrap; gap:8px 18px; }
.service-list span{ font-family:var(--mono); font-size:11.5px; color:var(--fog-dim); }
.service-list span::before{ content:'— '; color:var(--amber-dim); }
.service-link{ margin-top:26px; font-family:var(--mono); font-size:12.5px; color:var(--paper); display:inline-flex; gap:8px; align-items:center; }
.service-card:hover .service-link{ color:var(--amber-soft); }

/* ---------- Manifest / stat strip section ---------- */
.strip{
  background:var(--ink-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:0;
}
.strip .wrap{ display:grid; grid-template-columns:repeat(4,1fr); }
.strip-item{ padding:44px var(--gutter); border-right:1px solid var(--line); }
.strip-item:last-child{ border-right:none; }
.strip-item .num{ font-family:var(--display); font-size:clamp(30px,4vw,48px); color:var(--amber-soft); }
.strip-item .label{ font-family:var(--mono); font-size:11.5px; color:var(--fog-dim); text-transform:uppercase; letter-spacing:.06em; margin-top:8px; }

/* ---------- Quote / testimonial ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.quote-card{ background:var(--panel); padding:34px 30px; display:flex; flex-direction:column; justify-content:space-between; min-height:250px; }
.quote-stars{ color:var(--amber); font-family:var(--mono); font-size:13px; letter-spacing:.1em; }
.quote-text{ margin-top:18px; font-size:15px; color:var(--fog); line-height:1.65; }
.quote-meta{ margin-top:24px; font-family:var(--mono); font-size:11.5px; color:var(--fog-dim); text-transform:uppercase; letter-spacing:.05em; }
.quote-meta b{ color:var(--paper); font-weight:500; }

/* ---------- Region / location grid ---------- */
.region-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.region-card{ background:var(--panel); padding:30px 28px; transition:background .2s ease; }
.region-card:hover{ background:var(--panel-2); }
.region-card .coord{ font-family:var(--mono); font-size:10.5px; color:var(--fog-dim); letter-spacing:.05em; }
.region-card h3{ font-size:24px; margin-top:10px; }
.region-card .price{ font-family:var(--mono); font-size:12.5px; color:var(--amber-soft); margin-top:8px; }
.region-card .go{ margin-top:18px; font-family:var(--mono); font-size:11.5px; color:var(--fog); display:inline-block; }
.region-card:hover .go{ color:var(--amber-soft); }

/* ---------- Venue list ---------- */
.venue-list{ margin-top:10px; }
.venue-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:18px 0; border-top:1px solid var(--line);
  font-size:15px;
}
.venue-row:last-child{ border-bottom:1px solid var(--line); }
.venue-row .place{ font-family:var(--display); font-weight:600; font-size:18px; }
.venue-row .area{ font-family:var(--mono); font-size:12px; color:var(--fog-dim); text-transform:uppercase; }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;
  padding:130px 0;
  text-align:center;
  overflow:hidden;
}
.cta-band h2{ font-size:clamp(34px,6vw,72px); max-width:18ch; margin:0 auto; line-height:1.02; }
.cta-band p{ margin-top:22px; color:var(--fog); }
.cta-band .hero-actions{ justify-content:center; margin-top:40px; }

/* ---------- Footer ---------- */
footer{ padding:80px 0 40px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
.footer-brand{ font-family:var(--display); font-weight:700; font-size:24px; }
.footer-tag{ margin-top:16px; color:var(--fog); font-size:14px; max-width:34ch; }
.footer-col h4{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--fog-dim); margin-bottom:16px; }
.footer-col a, .footer-col p{ display:block; font-size:14px; color:var(--fog); margin-bottom:10px; }
.footer-col a:hover{ color:var(--amber-soft); }
.footer-bottom{
  margin-top:70px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:11.5px; color:var(--fog-dim);
  flex-wrap:wrap; gap:12px;
}
.footer-bottom a{ color:var(--fog-dim); }
.footer-bottom a:hover{ color:var(--amber-soft); }

/* ---------- Simple page (legal) ---------- */
.legal{ padding:160px 0 100px; max-width:760px; }
.legal h1{ font-size:clamp(32px,5vw,52px); }
.legal .eyebrow{ margin-bottom:24px; }
.legal h2{ font-size:20px; margin-top:48px; margin-bottom:14px; color:var(--amber-soft); }
.legal p, .legal li{ color:var(--fog); font-size:15px; line-height:1.75; margin-bottom:14px; }
.legal ul{ padding-left:20px; }
.legal li{ list-style:disc; }

/* ---------- Sub-hero (inner pages) ---------- */
.sub-hero{ padding:150px 0 70px; border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.sub-hero h1{ font-size:clamp(38px,6.5vw,80px); max-width:18ch; line-height:1.0; margin-top:24px; }
.sub-hero p{ margin-top:24px; max-width:52ch; color:var(--fog); font-size:17px; }

/* ---------- Utility ---------- */
.mono{ font-family:var(--mono); }
.center{ text-align:center; }

/* ---------- Responsive ---------- */
@media (max-width:940px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; background:none; border:1px solid var(--line); color:var(--paper); padding:8px 12px; font-family:var(--mono); font-size:12px; border-radius:var(--radius); }
  .hero-stats{ grid-template-columns:repeat(2,1fr); row-gap:24px; }
  .strip .wrap{ grid-template-columns:repeat(2,1fr); }
  .strip-item:nth-child(2){ border-right:none; }
  .quotes{ grid-template-columns:1fr; }
  .region-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .service-card.narrow, .service-card{ grid-column:span 12; }
}
@media (max-width:600px){
  .hero-stats{ grid-template-columns:1fr 1fr; }
  .region-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}