@charset "UTF-8";
 :root {
  color-scheme:light;
  --paper:#f5f3ec;
  --ink:#233c35;
  --muted:#5c6a60;
  --bronze:#925d32;
  --line:#d9ded3;
  font-family:Arial,Helvetica,sans-serif;
  font-synthesis:none
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink)
}

a {
  color:inherit
}

button {
  font:inherit
}

a,button {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible {
  outline:3px solid var(--bronze);
  outline-offset:6px
}

.skip {
  position:absolute;
  z-index:10;
  top:12px;
  left:20px;
  padding:12px;
  background:white;
  transform:translateY(-180%)
}

.skip:focus {
  transform:none
}

.header {
  height:104px;
  max-width:1600px;
  margin:auto;
  padding:0 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

.brand {
  display:flex;
  align-items:center;
  gap:16px;
  text-decoration:none
}

.brand img {
  width:67px;
  height:51px;
  object-fit:contain
}

.brand-name {
  font:20px Georgia,serif;
  letter-spacing:.2em
}

.header-right {
  display:flex;
  align-items:center;
  gap:38px
}

.nav-link {
  font-size:12px;
  text-decoration:none;
  letter-spacing:.07em
}

.languages {
  display:flex;
  gap:15px;
  align-items:center
}

.languages a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:44px;
  text-decoration:none;
  font-size:11px;
  letter-spacing:.08em;
  opacity:1;
  padding:8px 0
}

.language-flag {
  font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  font-size:22px;
  line-height:1;
  letter-spacing:0;
}

@media(max-width:700px) {
  .header {gap:10px}
  .languages a {flex-direction:column;gap:4px;min-width:26px}
}

.languages a[aria-current] {
  opacity:1;
  border-bottom:1px solid var(--bronze)
}

.header .portal {
  border:1px solid #bdc5b9;
  padding:12px 18px;
  text-decoration:none;
  font-size:12px
}

.portal:hover {
  background:#e7e9df
}

.hero {
  position:relative;
  isolation:isolate;
  min-height:690px;
  height:min(820px,calc(100svh - 104px));
  overflow:hidden;
  background:#f3e5ca
}

.hero-image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 63%;
  z-index:-4;
  animation:landscape-breathe 30s ease-in-out infinite alternate
}

.hero:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background:linear-gradient(90deg,rgba(250,246,230,.96) 0%,rgba(250,246,230,.82) 25%,rgba(250,246,230,.2) 55%,transparent 73%)
}

.hero:after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(32,49,35,.32),transparent 28%)
}

.hero-copy {
  position:relative;
  z-index:2;
  width:54%;
  padding:95px 0 125px 6%;
  pointer-events:none
}

.hero-copy a {
  pointer-events:auto
}

.eyebrow {
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.21em;
  display:flex;
  align-items:center;
  gap:13px;
  line-height:1.6
}

.eyebrow:before {
  content:"";
  display:block;
  width:30px;
  height:1px;
  background:currentColor
}

.hero h1 {
  font:normal clamp(58px,6.25vw,100px)/1.035 Georgia,'Times New Roman',serif;
  letter-spacing:-.055em;
  margin:29px 0 24px;
  max-width:640px
}

.hero h1 em {
  font-weight:normal;
  color:var(--bronze)
}

.hero-lead {
  max-width:335px;
  font-size:15px;
  line-height:1.85;
  margin:0 0 30px;
  color:#4a594a
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:17px 22px;
  background:var(--ink);
  color:#fffdf4;
  font-size:12px;
  text-decoration:none;
  border:1px solid var(--ink);
  transition:background .2s
}

.button:hover {
  background:#3a5549
}

.button span {
  font-size:20px;
  line-height:1
}

.hero-bottom {
  position:absolute;
  bottom:26px;
  left:6%;
  right:4%;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:white
}

.scene-caption {
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:0 1px 6px #183322
}

.scene-caption span {
  opacity:.7;
  margin-right:12px
}

.motion-controls {
  display:flex;
  gap:8px
}

.motion-controls button {
  color:#f8f6ee;
  background:#26382fbd;
  border:1px solid #ffffff60;
  border-radius:30px;
  min-height:40px;
  padding:10px 16px;
  font-size:11px;
  cursor:pointer;
  backdrop-filter:blur(12px)
}

.motion-controls button:hover {
  background:#26382f
}

.motion-controls[hidden] {
  display:none
}

.sculpture-stage {
  position:absolute;
  top:4%;
  left:calc(75.5% - min(16.5%, 280px));
  width:min(33%, 560px);
  aspect-ratio:1174/860;
  perspective:900px;
  z-index:1;
  pointer-events:none
}

.sculpture {
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform:rotateY(-10deg) rotateX(4deg);
}

.sculpture i {
  display:block;
  position:absolute;
  inset:0;
  mask:url('/assets/logo-teutonica.svg') center/contain no-repeat;
  -webkit-mask:url('/assets/logo-teutonica.svg') center/contain no-repeat;
  backface-visibility:hidden;
  background:#6d4427
}

.sculpture i:nth-child(1) {
  transform:translateZ(-12px)
}

.sculpture i:nth-child(2) {
  transform:translateZ(-10px)
}

.sculpture i:nth-child(3) {
  transform:translateZ(-8px)
}

.sculpture i:nth-child(4) {
  transform:translateZ(-6px)
}

.sculpture i:nth-child(5) {
  transform:translateZ(-4px)
}

.sculpture i:nth-child(6) {
  transform:translateZ(-2px)
}

.sculpture i:last-child {
  background:linear-gradient(128deg,#643c24 0%,#d6ad68 20%,#fff1bd 34%,#b28044 44%,#6b442b 58%,#dfb976 76%,#85542e 91%);
  background-size:210% 140%;
  animation:metal-light 12s ease-in-out infinite alternate
}

.sculpture-stage:after {
  content:"";
  position:absolute;
  inset:29% 13%;
  background:#fff3c973;
  border-radius:50%;
  filter:blur(40px);
  z-index:-1
}

.future-canvas {
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none
}

/* Keep the near orbit above the fixed relief, while copy and controls stay clear. */
.future-canvas-front {z-index:2}
.hero-copy {z-index:3}
.hero-bottom {z-index:4}

/* Fade both depth layers together instead of cutting paths at a vertical edge. */
.future-canvas {
  mask-image:linear-gradient(90deg,transparent 34%,#000 54%);
  -webkit-mask-image:linear-gradient(90deg,transparent 34%,#000 54%);
}
@media(max-width:700px) {
  .future-canvas {
    mask-image:linear-gradient(180deg,transparent 42%,#000 54%);
    -webkit-mask-image:linear-gradient(180deg,transparent 42%,#000 54%);
  }
}

.journey {
  max-width:1600px;
  margin:auto;
  padding:29px 6%;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:36px;
  border-bottom:1px solid var(--line)
}

.journey-step {
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  padding:9px 0;
  font-size:12px;
  color:#657264
}

.journey-step b {
  font:italic 22px Georgia,serif;
  color:#9caa98;
  font-weight:normal
}

.journey-step.active {
  color:var(--ink)
}

.journey-step.active b {
  color:var(--bronze)
}

.journey-step:after {
  position:absolute;
  content:"";
  height:2px;
  bottom:-30px;
  left:0;
  right:0;
  background:var(--bronze);
  transform:scaleX(0);
  transform-origin:left
}

.journey-step.active:after {
  animation:chapter-progress 8s linear forwards
}

.intro {
  max-width:1440px;
  margin:auto;
  padding:115px 6% 100px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px
}

.intro h2 {
  font:normal clamp(38px,4vw,62px)/1.12 Georgia,serif;
  letter-spacing:-.035em;
  max-width:480px;
  margin:24px 0
}

.intro h2 em {
  color:var(--bronze);
  font-weight:normal
}

.intro-text {
  padding-top:43px
}

.intro-text p {
  font-size:16px;
  line-height:1.9;
  max-width:430px;
  margin:0 0 25px;
  color:var(--muted)
}

.text-link {
  display:inline-flex;
  gap:30px;
  text-decoration:none;
  border-bottom:1px solid #9aa593;
  padding:0 0 10px;
  font-size:12px
}

.values {
  max-width:1440px;
  padding:0 6% 100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px
}

.value {
  border-top:1px solid #b7c2b2;
  padding:27px 0
}

.value-number {
  font:italic 16px Georgia,serif;
  color:var(--bronze)
}

.value h3 {
  font:normal 27px Georgia,serif;
  margin:23px 0 15px
}

.value p {
  font-size:14px;
  line-height:1.85;
  color:var(--muted);
  max-width:320px
}

.closing {
  position:relative;
  overflow:hidden;
  margin:0 3%;
  padding:68px 6%;
  background:#253e35;
  color:#f1eee1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

.closing:after {
  content:"";
  position:absolute;
  width:350px;
  height:350px;
  right:26%;
  top:-180px;
  border:1px solid #c9b8804a;
  border-radius:50%;
  box-shadow:0 0 0 30px #c9b8800a,0 0 0 70px #c9b88008;
  pointer-events:none
}

.closing p {
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#c1c7b7
}

.closing h2 {
  font:normal clamp(30px,3.3vw,48px)/1.15 Georgia,serif;
  margin:18px 0 0;
  letter-spacing:-.02em
}

.closing .button {
  border-color:#a7b39c;
  background:transparent;
  flex-shrink:0
}

.closing .button:hover {
  background:#ffffff12
}

.footer {
  max-width:1600px;
  margin:auto;
  padding:40px 6%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#667260;
  font-size:10px
}

.footer-brand {
  font:17px Georgia,serif;
  letter-spacing:.15em;
  color:var(--ink)
}

.footer a {
  text-decoration:none
}

.footer-note {
  font-size:10px
}

.is-paused *,.is-paused *:before,.is-paused *:after {
  animation-play-state:paused!important
}

body:not(.motion-ready) *,body:not(.motion-ready) *:before,body:not(.motion-ready) *:after {
  animation:none!important
}

/* Opacity and filters on a preserve-3d parent flatten its depth layers. */
 .sculpture {
  filter:none;
  animation:none
}



@keyframes landscape-breathe {
  from {
    transform:scale(1.015)
  }
  to {
    transform:scale(1.065) translate(-.4%,.25%)
  }
}



@keyframes metal-light {
  from {
    background-position:0% 50%
  }
  to {
    background-position:100% 50%
  }
}

@keyframes chapter-progress {
  to {
    transform:scaleX(1)
  }
}

@media(min-width:1600px) {
  .hero-copy {
    padding-left:max(6%,calc((100vw - 1410px)/2))
  }
  .hero h1 {
    font-size:100px
  }
}

@media(max-width:1000px) {
  .header {
    height:86px
  }
  .header-right {
    gap:22px
  }
  .hero {
    height:760px;
    min-height:670px
  }
  .hero-copy {
    width:60%;
    padding-top:95px
  }
  .hero h1 {
    font-size:72px
  }
  .sculpture-stage {
    top:8%;
    left:62%;
    width:34%
  }
  .intro {
    gap:50px;
    padding-top:85px;
    padding-bottom:65px
  }
  .values {
    gap:25px;
    padding-bottom:60px
  }
}

@media(max-width:700px) {
  .header {
    height:80px;
    padding:0 6%
  }
  .brand {
    gap:10px
  }
  .brand img {
    width:45px;
    height:37px
  }
  .brand-name {
    font-size:16px;
    letter-spacing:.14em
  }
  .header-right {
    gap:0
  }
  .nav-link,.header .portal {
    display:none
  }
  .languages {
    gap:12px
  }
  .hero {
    height:940px;
    min-height:0;
    max-height:none
  }
  .hero-image {
    object-position:72% bottom;
    height:65%;
    top:auto;
    bottom:0
  }
  .hero:before {
    background:linear-gradient(180deg,#faf5e7 0%,#faf5e7 25%,#faf5e7cc 40%,transparent 63%)
  }
  .hero-copy {
    width:100%;
    padding:48px 7% 0
  }
  .hero h1 {
    font-size:clamp(53px,11.8vw,76px);
    line-height:1.06;
    max-width:500px;
    margin-top:21px;
    margin-bottom:21px
  }
  .hero-lead {
    font-size:14px;
    max-width:325px;
    line-height:1.8;
    margin-bottom:24px
  }
  .eyebrow {
    font-size:9px
  }
  .sculpture-stage {
    top:54%;
    left:33%;
    width:56%
  }
  .hero-bottom {
    bottom:20px;
    left:6%;
    right:6%;
    align-items:flex-end
  }
  .scene-caption {
    font-size:8px;
    max-width:140px;
    line-height:1.8
  }
  .scene-caption span {
    display:block
  }
  .motion-controls {
    gap:5px
  }
  .motion-controls button {
    font-size:10px;
    padding:10px 12px
  }
  .journey {
    padding:20px 6%;
    gap:15px
  }
  .journey-step {
    font-size:10px;
    gap:7px;
    align-items:flex-start;
    line-height:1.5
  }
  .journey-step b {
    font-size:17px
  }
  .journey-step:after {
    bottom:-21px
  }
  .intro {
    grid-template-columns:1fr;
    padding:64px 7% 30px;
    gap:0
  }
  .intro h2 {
    font-size:43px;
    max-width:400px
  }
  .intro-text {
    padding-top:0
  }
  .intro-text p {
    font-size:15px
  }
  .values {
    grid-template-columns:1fr;
    padding:18px 7% 36px;
    gap:0
  }
  .value {
    display:grid;
    grid-template-columns:35px 1fr;
    padding:23px 0 17px
  }
  .value-number {
    grid-row:span 2;
    padding-top:3px
  }
  .value h3 {
    font-size:25px;
    margin:0 0 10px
  }
  .value p {
    margin:0 0 10px;
    max-width:100%
  }
  .closing {
    margin:0 4%;
    padding:38px 8%;
    display:block
  }
  .closing h2 {
    font-size:36px;
    max-width:370px
  }
  .closing .button {
    margin-top:28px
  }
  .footer {
    flex-wrap:wrap;
    padding:30px 7%;
    gap:18px
  }
  .footer-note {
    width:100%;
    order:3;
    line-height:1.6
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .sculpture {
    opacity:1;
    transform:rotateY(-8deg)
  }
  .journey-step:after {
    display:none
  }
}

/* Reflections travel over the fixed original silhouette, never moving the logo. */
.sculpture i:last-child {
  background:linear-gradient(125deg,#8b5527 0%,#e4b75c 22%,#fff0b4 35%,#a96c2c 48%,#f0cb80 68%,#ad7535 88%);
  background-size:240% 160%;
  animation:metal-light 9s ease-in-out infinite alternate;
}
.sculpture i:last-child:before,
.sculpture i:last-child:after {
  content:"";
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  mix-blend-mode:screen;
}
.sculpture i:last-child:before {
  background-image:linear-gradient(112deg,transparent 32%,#fff7cf55 43%,#ffffffee 48%,#fff7d066 53%,transparent 64%);
  background-size:300% 100%;
  animation:specular-sweep 7s ease-in-out infinite;
}
.sculpture i:last-child:after {
  background-image:radial-gradient(ellipse at center,#b9efffbb 0%,#e6f7ff44 23%,transparent 58%);
  background-size:65% 170%;
  animation:cool-reflection 11s ease-in-out infinite alternate;
}
@keyframes specular-sweep {
  0%,12% {background-position:130% 0}
  65%,100% {background-position:-40% 0}
}
@keyframes cool-reflection {
  from {background-position:-70% 50%;opacity:.2}
  to {background-position:190% 50%;opacity:.85}
}
@media(max-width:700px) {
  .hero-image {
    mask-image:linear-gradient(180deg,transparent,#000 23%);
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 23%);
  }
}