:root{--navy:#062b50;--ink:#10243a;--cream:#f6f1e7;--mist:#dce8ef;--gold:#e9c07c;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Georgia,'Times New Roman',serif;background:var(--cream)}.nav{position:fixed;z-index:20;top:0;left:0;right:0;height:82px;display:flex;align-items:center;justify-content:space-between;padding:10px clamp(22px,5vw,72px);background:linear-gradient(#f7f2e9ee,#f7f2e900);backdrop-filter:blur(2px)}.brand img{width:128px;height:60px;object-fit:contain;object-position:left center}.nav nav{display:flex;align-items:center;gap:28px}.nav a,.nav button{color:var(--ink);font:14px Arial,sans-serif;letter-spacing:.08em;text-decoration:none;background:none;border:0;cursor:pointer}.hero{height:min(900px,100vh);min-height:700px;position:relative;overflow:hidden;background:linear-gradient(#0b284c55,#0b284c22),url('assets/concept.png') center center/cover no-repeat}.sky{position:absolute;inset:0;background:radial-gradient(circle at 52% 43%,#fff7d5 0 5%,#f1d9a0aa 12%,transparent 30%),linear-gradient(120deg,transparent 0 52%,#fff9e4aa 53% 54%,transparent 55%)}.mountain{position:absolute;bottom:20%;width:55%;height:55%;background:linear-gradient(145deg,#eaf0f1,#809db2);clip-path:polygon(0 100%,15% 64%,27% 79%,47% 22%,58% 47%,71% 10%,100% 100%);opacity:.9}.m1{left:-10%}.m2{right:-10%;transform:scaleX(-1);opacity:.75}.lake{position:absolute;left:0;right:0;bottom:0;height:31%;background:linear-gradient(#b8d8dc,#7fa9b5);clip-path:polygon(0 22%,20% 8%,38% 17%,58% 4%,80% 15%,100% 3%,100% 100%,0 100%)}.ruins{position:absolute;right:9%;bottom:27%;display:flex;align-items:end;gap:10px}.ruins i{display:block;width:18px;height:110px;border:8px solid #6c796f;border-bottom:0;opacity:.7}.ruins i:nth-child(2){height:155px}.ruins i:nth-child(3){height:90px}.travelers{position:absolute;left:8%;bottom:21%;width:160px;height:200px}.person{position:absolute;bottom:0;background:#152434;display:block}.person:before{content:"";position:absolute;background:#152434;border-radius:50%;width:28px;height:28px;top:-23px;left:9px}.man{left:0;width:45px;height:120px;clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}.woman{left:70px;width:40px;height:96px;clip-path:polygon(15% 0,85% 0,100% 100%,0 100%)}.woman:before{width:25px;height:25px}.hero-copy{position:relative;z-index:5;width:min(660px,78vw);margin:auto;padding-top:135px;text-align:center}.hero-logo{width:min(340px,55vw);height:250px;object-fit:contain}.eyebrow{font:600 13px Arial,sans-serif;letter-spacing:.38em}.intro{font-size:clamp(17px,2vw,22px);line-height:1.55;text-wrap:balance;text-shadow:0 1px 10px #fff}.scroll{position:absolute;z-index:6;bottom:28px;left:50%;transform:translateX(-50%);font:11px Arial,sans-serif;letter-spacing:.3em;color:white;text-decoration:none}.principles{min-height:500px;padding:95px max(7vw,30px);display:grid;grid-template-columns:1fr 1px 1fr;gap:7vw;align-items:start;background:radial-gradient(circle at 50% 100%,#dbe4e2,transparent 42%),var(--cream)}.principles article{text-align:center;max-width:520px;margin:auto}.principles h2{font:600 14px Arial,sans-serif;letter-spacing:.38em;margin:18px 0 30px}.principles p{font-size:20px;line-height:1.55}.symbol{font-size:44px;color:var(--navy)}.divider{height:270px;background:#b8b1a5}.contact{min-height:330px;background:linear-gradient(#062b50,#041d35);color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;text-align:center}.contact a{font-size:20px;color:white;text-decoration:none}.contact span{font-size:17px}.contact small{margin-top:25px;opacity:.75;letter-spacing:.08em}@media(max-width:760px){.nav{height:70px;padding:8px 18px}.brand img{width:96px}.nav nav{gap:12px}.nav nav a:nth-child(2),.nav nav a:nth-child(3){display:none}.hero{min-height:760px}.hero-copy{padding-top:110px;width:86vw}.hero-logo{height:210px}.intro{font-size:17px}.travelers{left:7%;transform:scale(.78);transform-origin:bottom left}.ruins{right:4%;transform:scale(.72);transform-origin:bottom right}.principles{grid-template-columns:1fr;padding:70px 28px;gap:55px}.divider{width:120px;height:1px;margin:auto}.principles p{font-size:18px}}

.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,248,226,.34) 48%,rgba(255,255,255,.04));pointer-events:none}.hero-copy{z-index:7}.hero .sky,.hero .mountain,.hero .lake,.hero .ruins,.hero .travelers{display:none}.hero-copy{background:rgba(255,250,240,.20);border-radius:28px;padding-left:24px;padding-right:24px;padding-bottom:28px;backdrop-filter:blur(1px)}

/* Desktop composition: the concept artwork is portrait-oriented, so desktop uses a contained cinematic frame rather than stretching/cropping it. */
@media (min-width: 1000px){
  .hero{
    height:auto;
    min-height:0;
    aspect-ratio:16/9;
    max-height:900px;
    background-color:#d9e5ec;
    background-size:cover;
    background-position:center 47%;
  }
  .hero-copy{
    padding-top:clamp(92px,8vw,140px);
    width:min(620px,48vw);
  }
  .hero-logo{width:min(285px,24vw);height:205px}
  .intro{font-size:clamp(16px,1.35vw,20px);line-height:1.48}
  .eyebrow{font-size:12px}
}
@media (min-width: 1500px){
  .hero{max-height:none;aspect-ratio:1.9/1;background-position:center 45%}
  .hero-copy{width:min(650px,42vw);padding-top:clamp(110px,7vw,155px)}
}

/* === Site 2 final technical pass === */
/* Preserve the approved Site 2 composition. Only stabilize scaling and render UI text crisply. */
.scroll{
  z-index:30;
  bottom:22px;
  padding:10px 16px 9px 19px;
  border-radius:999px;
  background:rgba(6,43,80,.38);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
  font-weight:600;
  line-height:1;
  letter-spacing:.28em;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

/* Desktop: keep Site 2 proportions instead of allowing viewport height to drive the crop. */
@media (min-width:1000px){
  .hero{
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:16/9;
    max-height:none;
    background-size:cover;
    background-position:center 50%;
  }
  .hero-copy{
    width:min(620px,46vw);
    padding-top:clamp(92px,7.2vw,138px);
    padding-bottom:22px;
  }
  .hero-logo{width:min(290px,23vw);height:auto;aspect-ratio:1/0.72}
  .intro{font-size:clamp(16px,1.25vw,20px);line-height:1.48}
}

/* Ultrawide: preserve 16:9 content geometry and avoid vertical over-cropping. */
@media (min-width:1500px) and (min-aspect-ratio:19/10){
  .hero{
    aspect-ratio:21/9;
    background-position:center 50%;
  }
  .hero-copy{
    width:min(590px,38vw);
    padding-top:clamp(88px,5.8vw,122px);
  }
  .hero-logo{width:min(255px,18vw)}
  .intro{font-size:clamp(15px,1.05vw,18px)}
}

/* Mobile remains Site 2's approved composition. */
@media (max-width:760px){
  .hero{aspect-ratio:auto;min-height:760px;height:min(900px,100vh);background-position:center center}
  .scroll{bottom:22px;font-size:10px;padding:9px 13px 8px 16px}
}