/* ============================================================
   Klopfenstein Spenglerei — Belp
   Craft-industrial editorial. Anthracite + copper, Fraunces +
   Hanken Grotesk + JetBrains Mono. "Wir formen Blech."
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --ink:        #15171a;   /* anthracite / patinated lead */
  --ink-2:      #1c1f23;
  --ink-3:      #25292e;
  --paper:      #f3efe6;   /* warm zinc paper */
  --paper-2:    #e8e1d4;
  --paper-3:    #ded5c4;

  --copper:     #bd6537;   /* signature accent */
  --copper-br:  #db8b58;   /* highlight */
  --copper-dp:  #8a4324;   /* deep */
  --patina:     #5e8a7e;   /* aged copper green */
  --steel:      #717c83;   /* cool zinc grey */
  --brand:      #243a6e;   /* logo navy, sparing */

  --txt:        #1a1c1f;
  --txt-soft:   #4a4d52;
  --txt-dim:    #7c7d80;
  --on-dark:    #ece6da;
  --on-dark-dim:#9aa0a4;

  --line-d:     rgba(236,230,218,.14);
  --line-l:     rgba(20,23,26,.13);

  --display: 'Fraunces', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --shell: clamp(1.1rem, 5vw, 6rem);
  --maxw: 1340px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--txt);
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; -webkit-user-drag:none; user-select:none }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--copper); color:#fff }

body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared ---------- */
.shell{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--shell) }
section{ position:relative }

.kicker{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.7em; color:var(--copper);
}
.kicker::before{ content:""; width:1.8em; height:1px; background:var(--copper); opacity:.7 }
.kicker.center::after{ content:""; width:1.8em; height:1px; background:var(--copper); opacity:.7 }

h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.02; letter-spacing:-.015em }
.h-xl{ font-size:clamp(2.7rem, 7.4vw, 6.6rem); font-weight:600 }
.h-lg{ font-size:clamp(2.1rem, 5vw, 4rem) }
.h-md{ font-size:clamp(1.6rem, 3vw, 2.5rem) }
.lead{ max-inline-size:54ch; font-size:clamp(1.05rem,1.5vw,1.32rem); color:var(--txt-soft); line-height:1.65 }
em.acc{ font-style:italic; color:var(--copper) }

.btn{
  --bg:var(--copper); --fg:#fff;
  font-family:var(--sans); font-weight:600; font-size:.95rem;
  display:inline-flex; align-items:center; gap:.6em;
  padding:.95em 1.6em; background:var(--bg); color:var(--fg);
  border:1px solid transparent; border-radius:2px; cursor:pointer;
  transition:transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
  position:relative; overflow:hidden;
}
.btn .arr{ transition:transform .35s var(--ease) }
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(189,101,55,.6) }
.btn:hover .arr{ transform:translateX(4px) }
.btn.ghost{ --bg:transparent; --fg:var(--on-dark); border-color:var(--line-d) }
.btn.ghost:hover{ background:rgba(236,230,218,.06); box-shadow:none }
.btn.dark{ --bg:var(--ink); --fg:var(--on-dark) }

/* ===================== HEADER ===================== */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:1.05rem 0; transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.site-head .bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.site-head.scrolled{
  background:color-mix(in srgb, var(--ink) 90%, transparent);
  backdrop-filter:blur(14px) saturate(1.1); padding:.65rem 0;
  border-bottom-color:var(--line-d);
}
.brand{ display:flex; align-items:center; gap:.7rem; color:var(--on-dark) }
.brand .logo{ height:38px; width:auto; filter:brightness(0) invert(1); transition:height .4s var(--ease) }
.site-head.scrolled .brand .logo{ height:32px }

.nav{ display:flex; align-items:center; gap:2.1rem }
.nav a{ font-size:.9rem; font-weight:500; color:var(--on-dark); position:relative; padding:.2em 0; transition:color .3s }
.nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:var(--copper); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease) }
.nav a:hover{ color:#fff }
.nav a:hover::after{ transform:scaleX(1) }
.nav .nav-cta{ color:var(--copper-br); font-family:var(--mono); font-size:.82rem; letter-spacing:.05em }
.nav .nav-cta::after{ display:none }

.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.4rem; z-index:101 }
.burger span{ width:26px; height:2px; background:var(--on-dark); transition:.3s var(--ease) }
.burger.x span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.burger.x span:nth-child(2){ opacity:0 }
.burger.x span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

.drawer{ position:fixed; inset:0; z-index:99; background:var(--ink); display:flex; flex-direction:column; justify-content:center; padding:var(--shell);
  transform:translateY(-100%); transition:transform .5s var(--ease); visibility:hidden }
.drawer.open{ transform:translateY(0); visibility:visible }
.drawer a{ font-family:var(--display); font-size:clamp(2rem,9vw,3.2rem); color:var(--on-dark); padding:.28em 0; border-bottom:1px solid var(--line-d); display:flex; justify-content:space-between; align-items:center }
.drawer a .n{ font-family:var(--mono); font-size:.8rem; color:var(--copper) }

/* ===================== HERO ===================== */
.hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; position:relative; isolation:isolate; background:var(--ink); overflow:hidden }
.hero-bg{ position:absolute; inset:0; z-index:-2 }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; transform:scale(1.08); animation:heroZoom 18s var(--ease) forwards }
@keyframes heroZoom{ to{ transform:scale(1) } }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,17,20,.55) 0%, rgba(15,17,20,.12) 30%, rgba(15,17,20,.55) 64%, rgba(15,17,20,.96) 100%),
    radial-gradient(120% 80% at 80% 10%, transparent 40%, rgba(15,17,20,.5) 100%);
}
.hero-inner{ padding-bottom:clamp(2.4rem,6vh,5rem); padding-top:8rem }
.hero .kicker{ color:var(--copper-br); opacity:0; animation:fadeUp .9s var(--ease) .2s forwards }
.hero .kicker::before{ background:var(--copper-br) }
.hero h1{ color:var(--on-dark); margin:.5rem 0 0; max-inline-size:16ch }
.hero h1 .ln{ display:block; overflow:hidden }
.hero h1 .ln > span{ display:block; transform:translateY(108%); animation:lineUp 1s var(--ease) forwards }
.hero h1 .ln:nth-child(1) > span{ animation-delay:.32s }
.hero h1 .ln:nth-child(2) > span{ animation-delay:.46s }
.hero h1 em{ font-style:italic; color:var(--copper-br); font-weight:500 }
.hero p.sub{ color:var(--on-dark-dim); margin-top:1.5rem; max-inline-size:46ch; font-size:clamp(1.02rem,1.4vw,1.22rem); opacity:0; animation:fadeUp .9s var(--ease) .75s forwards }
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.1rem; opacity:0; animation:fadeUp .9s var(--ease) .9s forwards }

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

.hero-stats{
  border-top:1px solid var(--line-d); margin-top:clamp(2rem,5vh,3.4rem);
  display:grid; grid-template-columns:repeat(4,1fr);
  opacity:0; animation:fadeUp 1s var(--ease) 1.1s forwards;
}
.hero-stats .st{ padding:1.3rem 1.4rem 0 0 }
.hero-stats .st .num{ font-family:var(--display); font-size:clamp(1.7rem,3vw,2.5rem); font-weight:600; color:var(--on-dark); line-height:1 }
.hero-stats .st .lab{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--copper-br); margin-top:.55rem }
.hero-stats .st .sub{ font-size:.82rem; color:var(--on-dark-dim); margin-top:.2rem }

.scrollcue{ position:absolute; right:var(--shell); bottom:clamp(2.4rem,6vh,5rem); z-index:2; display:flex; flex-direction:column; align-items:center; gap:.7rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; color:var(--on-dark-dim); writing-mode:vertical-rl }
.scrollcue .dot{ width:1px; height:46px; background:linear-gradient(var(--copper-br), transparent); position:relative; overflow:hidden }
.scrollcue .dot::after{ content:""; position:absolute; top:-10px; left:0; width:1px; height:10px; background:#fff; animation:cue 2s var(--ease) infinite }
@keyframes cue{ to{ top:46px } }

/* ===================== MARQUEE ===================== */
.marquee{ background:var(--ink-2); color:var(--on-dark); border-block:1px solid var(--line-d); overflow:hidden; padding:.85rem 0 }
.marquee .track{ display:flex; gap:0; width:max-content; animation:scrollx 40s linear infinite; will-change:transform }
.marquee:hover .track{ animation-play-state:paused }
.marquee .it{ font-family:var(--display); font-style:italic; font-size:1.25rem; color:var(--on-dark); display:inline-flex; align-items:center; gap:2.4rem; white-space:nowrap; padding-right:2.4rem }
.marquee .it b{ color:var(--copper-br); font-style:normal; font-family:var(--mono); font-size:.9rem }
@keyframes scrollx{ to{ transform:translateX(-50%) } }

/* ===================== INTRO ===================== */
.intro{ padding:clamp(4.5rem,11vh,9rem) 0; background:var(--paper) }
.intro .grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,5rem); align-items:end }
.intro .copy h2{ margin:1.3rem 0 0; max-inline-size:16ch }
.intro .copy .lead{ margin-top:1.6rem }
.intro .copy .sig{ font-family:var(--display); font-style:italic; font-size:1.5rem; color:var(--copper); margin-top:1.8rem }
.intro .copy .sig small{ display:block; font-family:var(--mono); font-style:normal; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-dim); margin-top:.4rem }
.intro .visual{ position:relative; min-width:0 }
.intro .visual .img-wrap{ position:relative; border-radius:3px; overflow:hidden; aspect-ratio:4/5 }
.intro .visual img{ width:100%; height:100%; object-fit:cover }
.intro .visual .tag{ position:absolute; left:-1rem; bottom:1.4rem; background:var(--ink); color:var(--on-dark); font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; padding:.7rem 1.1rem; border-left:3px solid var(--copper) }

/* ===================== SERVICES ===================== */
.services{ padding:clamp(4.5rem,11vh,9rem) 0 clamp(3rem,7vh,6rem); background:var(--ink); color:var(--on-dark) }
.services .head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom:clamp(2.5rem,5vh,4rem) }
.services .head h2{ color:var(--on-dark); max-inline-size:14ch }
.services .head p{ color:var(--on-dark-dim); max-inline-size:38ch; font-size:1rem }

.svc{ display:grid; grid-template-columns:5.5rem 1fr 1.05fr; gap:clamp(1.2rem,3vw,3.2rem); align-items:center; padding:clamp(2rem,4vh,3.3rem) 0; border-top:1px solid var(--line-d); position:relative }
.svc:last-child{ border-bottom:1px solid var(--line-d) }
.svc .no{ font-family:var(--mono); font-size:.95rem; color:var(--copper-br); padding-top:.4rem }
.svc .txt{ min-width:0 }
.svc .txt .role{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); margin-bottom:.6rem }
.svc .txt h3{ font-size:clamp(1.55rem,3.2vw,2.5rem); color:var(--on-dark) }
.svc .txt p{ color:var(--on-dark-dim); margin-top:.9rem; max-inline-size:46ch; font-size:1rem }
.svc .txt ul{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.3rem }
.svc .txt ul li{ font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--on-dark); border:1px solid var(--line-d); padding:.4em .8em; border-radius:2px; transition:border-color .3s, color .3s }
.svc:hover .txt ul li{ border-color:rgba(219,139,88,.4) }
.svc .media{ min-width:0; position:relative; overflow:hidden; border-radius:3px; aspect-ratio:16/11 }
.svc .media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); filter:saturate(1.02) }
.svc:hover .media img{ transform:scale(1.06) }
.svc .media::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--line-d); border-radius:3px; pointer-events:none }

/* ===================== SPEC BAND ===================== */
.spec{ background:var(--paper-2); padding:clamp(4rem,9vh,7rem) 0 }
.spec .top{ display:grid; grid-template-columns:1fr 1fr; gap:2rem clamp(2rem,5vw,5rem); align-items:end; margin-bottom:clamp(2.4rem,5vh,3.6rem) }
.spec h2{ max-inline-size:13ch }
.spec .top p{ color:var(--txt-soft); max-inline-size:48ch }
.spec .nums{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-l); border:1px solid var(--line-l); border-radius:3px; overflow:hidden }
.spec .nums .cell{ background:var(--paper); padding:clamp(1.4rem,3vw,2.2rem) clamp(1.2rem,2.5vw,1.8rem) }
.spec .nums .v{ font-family:var(--display); font-size:clamp(1.7rem,3.4vw,2.7rem); font-weight:600; line-height:1; color:var(--ink) }
.spec .nums .v u{ text-decoration:none; color:var(--copper); font-size:.55em }
.spec .nums .k{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-dim); margin-top:.7rem }
.spec .materials{ margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:.6rem }
.spec .materials .m{ font-family:var(--sans); font-weight:600; font-size:.92rem; color:var(--txt); background:var(--paper); border:1px solid var(--line-l); padding:.55em 1em; border-radius:40px }

/* ===================== GALLERY ===================== */
.gallery{ padding:clamp(4.5rem,10vh,8rem) 0; background:var(--paper) }
.gallery .head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom:2.6rem }
.gallery .head h2{ max-inline-size:16ch }
.gal-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.6rem,1.2vw,1rem); grid-auto-flow:dense }
.gal-grid figure{ position:relative; overflow:hidden; border-radius:3px; min-width:0; background:var(--ink-2) }
.gal-grid img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); filter:saturate(1.02) }
.gal-grid figure:hover img{ transform:scale(1.05) }
.gal-grid figcaption{ position:absolute; left:0; bottom:0; right:0; padding:1.4rem 1rem .9rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:#fff; text-transform:uppercase; background:linear-gradient(transparent, rgba(15,17,20,.82)); opacity:0; transform:translateY(8px); transition:.4s var(--ease) }
.gal-grid figure:hover figcaption{ opacity:1; transform:translateY(0) }
.g-a{ grid-column:span 5; aspect-ratio:4/5 }
.g-b{ grid-column:span 7; aspect-ratio:16/10 }
.g-c{ grid-column:span 4; aspect-ratio:1/1 }
.g-d{ grid-column:span 4; aspect-ratio:1/1 }
.g-e{ grid-column:span 4; aspect-ratio:1/1 }
.g-f{ grid-column:span 7; aspect-ratio:16/9 }
.g-g{ grid-column:span 5; aspect-ratio:5/4 }

/* ===================== ABOUT / TIMELINE ===================== */
.about{ background:var(--ink); color:var(--on-dark); padding:clamp(4.5rem,11vh,9rem) 0; overflow:hidden }
.about .grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2.4rem,5vw,5.5rem); align-items:start }
.about h2{ color:var(--on-dark); margin-top:1.2rem; max-inline-size:13ch }
.about .lead{ color:var(--on-dark-dim); margin-top:1.5rem }
.about .portrait{ position:relative; min-width:0 }
.about .portrait .pic{ border-radius:3px; overflow:hidden; aspect-ratio:3/2 }
.about .portrait .pic img{ width:100%; height:100%; object-fit:cover }
.about .portrait .cap{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--steel); margin-top:.8rem; text-transform:uppercase }

.timeline{ margin-top:2.6rem; border-left:1px solid var(--line-d); padding-left:1.8rem }
.timeline .ev{ position:relative; padding:0 0 1.7rem }
.timeline .ev:last-child{ padding-bottom:0 }
.timeline .ev::before{ content:""; position:absolute; left:-1.8rem; top:.45rem; width:9px; height:9px; border-radius:50%; background:var(--copper); transform:translateX(-50%); box-shadow:0 0 0 4px var(--ink) }
.timeline .ev .yr{ font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; color:var(--copper-br) }
.timeline .ev p{ color:var(--on-dark-dim); margin-top:.3rem; max-inline-size:50ch; font-size:.98rem }
.timeline .ev p b{ color:var(--on-dark); font-weight:600 }

.team-strip{ margin-top:3rem; border-top:1px solid var(--line-d); padding-top:1.8rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem }
.team-strip .p .nm{ font-family:var(--display); font-size:1.18rem; color:var(--on-dark) }
.team-strip .p .rl{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); margin-top:.3rem }

/* ===================== PARTNERS ===================== */
.partners{ background:var(--paper-2); padding:clamp(3rem,7vh,5rem) 0 }
.partners .row{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap }
.partners .lbl{ font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-dim) }
.partners .list{ display:flex; flex-wrap:wrap; gap:.6rem 2.4rem }
.partners .list a{ font-family:var(--display); font-size:clamp(1.15rem,2vw,1.6rem); color:var(--txt-soft); transition:color .3s }
.partners .list a:hover{ color:var(--copper) }
.partners .list a small{ display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; color:var(--txt-dim); text-transform:uppercase; margin-top:.1rem }

/* ===================== CNC CALLOUT ===================== */
.cnc{ background:var(--copper); color:#fff; padding:clamp(3rem,7vh,5rem) 0; position:relative; overflow:hidden }
.cnc::before{ content:"NEU"; position:absolute; right:-1rem; top:50%; transform:translateY(-50%); font-family:var(--display); font-weight:900; font-size:clamp(8rem,26vw,22rem); color:rgba(255,255,255,.08); line-height:.7; pointer-events:none }
.cnc .grid{ display:grid; grid-template-columns:auto 1fr auto; gap:1.5rem clamp(1.5rem,4vw,3rem); align-items:center; position:relative }
.cnc .badge{ font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; border:1px solid rgba(255,255,255,.4); padding:.5em .9em; border-radius:40px; white-space:nowrap }
.cnc h3{ color:#fff; font-size:clamp(1.4rem,2.8vw,2.2rem) }
.cnc p{ color:rgba(255,255,255,.92); margin-top:.4rem; max-inline-size:52ch }
.cnc .btn{ --bg:#fff; --fg:var(--copper-dp) }
.cnc .btn:hover{ box-shadow:0 12px 30px -12px rgba(0,0,0,.4) }

/* ===================== CONTACT ===================== */
.contact{ background:var(--paper); padding:clamp(4.5rem,11vh,9rem) 0 }
.contact .grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2.2rem,5vw,4.5rem); align-items:stretch }
.contact h2{ margin:1.2rem 0 0; max-inline-size:12ch }
.contact .info{ margin-top:2.2rem; display:grid; gap:1.4rem }
.contact .info .blk{ border-top:1px solid var(--line-l); padding-top:1.1rem }
.contact .info .blk .k{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--copper); margin-bottom:.45rem }
.contact .info .blk a, .contact .info .blk .v{ font-size:1.12rem; color:var(--txt); font-weight:500 }
.contact .info .blk a:hover{ color:var(--copper) }
.contact .info .hours{ font-family:var(--mono); font-size:.92rem; color:var(--txt-soft); line-height:1.9 }
.contact .info .hours b{ color:var(--txt); font-weight:600 }
.contact .cta-row{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2rem }

.mapwrap{ border-radius:4px; overflow:hidden; min-height:430px; position:relative; box-shadow:inset 0 0 0 1px var(--line-l), 0 30px 60px -40px rgba(20,23,26,.5) }
.mapwrap iframe{ width:100%; height:100%; min-height:430px; border:0; filter:saturate(1.05) contrast(1.02) }

/* ===================== FOOTER ===================== */
.site-foot{ background:var(--ink); color:var(--on-dark-dim); padding:clamp(3.5rem,8vh,6rem) 0 2rem }
.site-foot .top{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid var(--line-d) }
.site-foot .logo{ display:block; width:auto; height:auto; max-width:248px; filter:none; background:var(--paper); padding:.9rem 1.15rem; border-radius:6px; margin-bottom:1.4rem; box-shadow:0 14px 34px -20px rgba(0,0,0,.65) }
.site-foot .top p{ max-inline-size:34ch; font-size:.95rem }
.site-foot .tag{ font-family:var(--display); font-style:italic; color:var(--copper-br); font-size:1.4rem; margin-top:1rem }
.site-foot h4{ font-family:var(--mono); font-weight:500; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); margin-bottom:1.1rem }
.site-foot ul{ list-style:none; display:grid; gap:.6rem }
.site-foot ul a{ font-size:.95rem; transition:color .3s }
.site-foot ul a:hover{ color:var(--on-dark) }
.site-foot .bottom{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-top:1.6rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--steel) }
.site-foot .bottom a:hover{ color:var(--on-dark) }

/* ===================== REVEAL ===================== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease) }
.reveal.in{ opacity:1; transform:none }
.reveal[data-d="1"]{ transition-delay:.08s }
.reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none }
  .hero-bg img{ animation:none; transform:none }
  .marquee .track,.scrollcue .dot::after{ animation:none }
}

/* ===================== LEGAL PAGES ===================== */
.legal-head{ position:sticky; top:0; z-index:100; background:var(--ink); border-bottom:1px solid var(--line-d); padding:.85rem 0 }
.legal-head .bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.legal-head .logo{ height:34px; filter:brightness(0) invert(1) }
.legal-head .back{ font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; color:var(--on-dark); transition:color .3s }
.legal-head .back:hover{ color:var(--copper-br) }
.legal-main{ max-width:760px; margin-inline:auto; padding:clamp(3rem,9vh,6rem) var(--shell) clamp(4rem,10vh,7rem) }
.legal-main .eyebrow{ font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--copper); margin-bottom:1rem }
.legal-main h1{ font-size:clamp(2.4rem,6vw,3.6rem); margin-bottom:1.6rem }
.legal-main h2{ font-size:1.3rem; margin:2.4rem 0 .7rem; color:var(--ink) }
.legal-main p, .legal-main li{ color:var(--txt-soft); max-inline-size:68ch; margin-bottom:.8rem }
.legal-main a{ color:var(--copper); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px }
.legal-main a:hover{ color:var(--copper-dp) }
.legal-main ul{ padding-left:1.2rem; margin-bottom:.8rem }
.legal-main strong{ color:var(--ink) }
.legal-back{ margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line-l) }
.legal-back a{ font-family:var(--mono); font-size:.85rem; text-decoration:none }

/* ===================== RESPONSIVE ===================== */
@media (max-width:1024px){
  .nav{ display:none }
  .burger{ display:flex }
  .intro .grid, .about .grid, .contact .grid, .spec .top{ grid-template-columns:1fr }
  .about .portrait{ order:-1 }
  .svc{ grid-template-columns:3.2rem 1fr }
  .svc .media{ grid-column:1 / -1; order:3; aspect-ratio:16/9; margin-top:.6rem }
  .team-strip{ grid-template-columns:repeat(2,1fr) }
  .spec .nums{ grid-template-columns:repeat(2,1fr) }
  .hero-stats{ grid-template-columns:repeat(2,1fr) }
  .site-foot .top{ grid-template-columns:1fr 1fr }
}
@media (max-width:600px){
  :root{ --shell:1.2rem }
  .hero-inner{ padding-top:7rem }
  .hero-stats .st{ padding:1rem 1rem 0 0 }
  .cnc .grid{ grid-template-columns:1fr }
  .gal-grid{ grid-template-columns:repeat(2,1fr) }
  .g-a,.g-b,.g-c,.g-d,.g-e,.g-f,.g-g{ grid-column:span 1; aspect-ratio:4/5 }
  .g-b,.g-f{ grid-column:1 / -1; aspect-ratio:16/10 }
  .partners .row{ flex-direction:column; align-items:flex-start; gap:1rem }
  .site-foot .top{ grid-template-columns:1fr }
  .scrollcue{ display:none }
}