html{ height:100%; }
.entry-body{ margin:0; overflow:hidden; height:100vh; height:100svh; background:#0B0E11; }
.entry-wrap{ position:relative; height:100vh; height:100svh; width:100%; display:flex; background:url('../assets/entry-bg.png') center/100% 100% no-repeat; }

.entry-zone{
  position:relative; height:100%; display:flex; align-items:flex-end;
  overflow:hidden; text-decoration:none; color:#fff;
}
.entry-zone.left{ flex:0 0 33%; }
.entry-zone.left::after{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  background:linear-gradient(to right, transparent 50%, rgba(255,255,255,.6) 80%, #fff 100%);
  pointer-events:none;
}
.entry-zone.right{ flex:0 0 33%; }
.entry-zone.right::after{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  background:linear-gradient(to left, transparent 50%, rgba(255,255,255,.6) 80%, #fff 100%);
  pointer-events:none;
}
.entry-zone.centre{ flex:1 1 0; min-width:0; background:#fff; }

/* Left zone — transparent to show panoramic bg */
.entry-zone.left .bg,
.entry-zone.right .bg{
  display:none;
}

.zone-content{ position:relative; z-index:3; padding:0 40px 60px; max-width:380px; margin:0 auto; text-align:center; }
.entry-zone.right .zone-content{ padding-bottom:30px; }
.zone-eyebrow{ font-size:15px; letter-spacing:.06em; font-weight:500; margin-bottom:8px; color:#1a1a1a; }
.zone-heading{ font-size:22px; font-weight:700; line-height:1.25; margin-bottom:24px; color:#1a1a1a; }
.zone-enter{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding:10px 28px; border:1.5px solid #1a1a1a; border-radius:40px; color:#1a1a1a;
  transition:all .25s var(--ease-out);
}
.entry-zone.left .zone-enter{ border-color:#D4740E; color:#D4740E; }
.entry-zone.right .zone-enter{ border-color:#3EB6AA; color:#3EB6AA; }

.entry-zone:hover .zone-enter, .entry-zone:focus-visible .zone-enter{ background:rgba(0,0,0,.06); gap:16px; }
.entry-zone:hover .zone-content, .entry-zone:focus-visible .zone-content{ transform:translateY(-4px); }
.zone-content{ transition:transform .35s var(--ease-out); }

.entry-centre{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3; text-align:center; color:#1a1a1a; padding:0 var(--sp-6);
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-5); max-width:460px; width:100%;
}
.entry-philosophy{
  font-family:var(--font-editorial); font-style:italic; font-size:16px; line-height:1.65;
  opacity:.7; max-width:340px; color:#555;
}
.entry-symbol{ width:100px; height:100px; }
.entry-symbol img{ width:100%; }
.entry-wordmark img{ height:34px; opacity:.96; }
.entry-tagline{ font-size:15px; line-height:1.55; color:#1a1a1a; }
.entry-tagline strong{ display:block; font-weight:700; color:#3EB6AA; margin-bottom:4px; }
.entry-company{ font-size:25px; font-weight:700; letter-spacing:.04em; color:#555; margin:0; }

.entry-reveal{ opacity:0; transform:translateY(10px); transition:opacity .6s ease-out, transform .6s ease-out; }
.entry-reveal.is-in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .entry-zone.left .embers span{ display:none; }
  .entry-reveal{ transition:none; }
}

/* ---- Mobile: stacked full-screen panels — Ch.5.8 ---- */
@media (max-width:900px){
  html{ height:auto; }
  .entry-body{ overflow:auto; height:auto; }
  .entry-wrap{ flex-direction:column; height:auto; }
  .entry-intro{
    height:auto; padding:var(--sp-7) var(--sp-5); display:flex; flex-direction:column; align-items:center;
    gap:var(--sp-4); text-align:center; background:#0B0E11; color:#fff;
  }
  .entry-intro .footer-brand{ justify-content:center; }
  .entry-intro .footer-brand span{ font-size:18px; color:#fff; }
  .entry-intro .entry-wordmark img{ height:28px; }
  .entry-zone.centre{ display:none; }
  .entry-zone.left, .entry-zone.right{ flex:none; height:100svh; align-items:flex-end; }
  .entry-zone .zone-content{ padding:0 var(--sp-5) var(--sp-6); max-width:280px; }
  .entry-zone .zone-heading{ font-size:18px; }
  .entry-philosophy{ font-size:14px; }
}
@media (min-width:901px){ .entry-intro{ display:none; } }

/* ---- Mobile landing — pixel-perfect absolute positioning ---- */
.mobile-landing{ display:none; }
@media (max-width:900px){
  .mobile-landing{ display:block; }
  .entry-intro, .entry-wrap{ display:none !important; }

  .hero{
    position:relative;
    width:100%;
    min-height:100dvh;
    aspect-ratio:852 / 1846;
    height:auto;
    overflow:hidden;
    background:#0B2019;
  }
  .hero-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .hero-brand{
    position:absolute;
    top:3%;
    left:6%;
    display:flex;
    align-items:center;
    gap:clamp(6px, 1.2vw, 12px);
  }
  .hero-brand img{ width:clamp(36px, 6vw, 56px); height:auto; }
  .hero-brand span{
    font-size:clamp(14px, 2.8vw, 20px);
    font-weight:500;
    letter-spacing:0.02em;
    color:#1a1a1a;
    white-space:nowrap;
  }
  .hero-heading{
    position:absolute;
    top:13.1%;
    left:6%;
    width:50%;
  }
  .hero-heading h1{
    font-size:clamp(29px, 8.2vw, 70px);
    line-height:.96;
    font-weight:900;
    text-transform:uppercase;
    color:#004B3D;
    margin:0;
    letter-spacing:.01em;
  }
  .hero-heading .accent{ color:#F07A28; }
  .hero-divider{
    position:absolute;
    top:30.9%;
    left:6%;
    width:13.5%;
    height:2px;
    background:linear-gradient(90deg,#004B3D 0 62%,#F07A28 62%);
  }
  .hero-paragraph{
    position:absolute;
    top:33.1%;
    left:6%;
    width:45%;
  }
  .hero-paragraph p{
    font-size:clamp(15px, 3.4vw, 29px);
    font-weight:600;
    color:#000;
    margin:0;
    line-height:1.22;
  }
  .hero-btn{
    position:absolute;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:8px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    text-decoration:none;
    transition:all .2s;
  }
  .hero-btn.green{
    top:42%;
    left:6%;
    width:47%;
    height:3.6%;
    background:#004B3D;
    color:#fff;
    font-size:clamp(9px, 2.35vw, 20px);
  }
  .hero-btn.green:hover{ background:#063f35; }
  .hero-btn.white{
    top:81%;
    left:6%;
    width:43.5%;
    height:3.65%;
    background:#fff;
    color:#004B3D;
    border:1px solid rgba(0,75,61,.18);
    font-size:clamp(9px, 2.35vw, 20px);
    box-shadow:0 8px 18px rgba(0,0,0,.18);
  }
  .hero-btn.white:hover{ background:#f4f8f6; }
  .hero-lower{
    position:absolute;
    top:53%;
    left:6%;
    width:41%;
    color:#fff;
  }
  .hero-lower h2{ margin:0; }
  .hero-lower .large{
    display:block;
    font-size:clamp(31px, 7.4vw, 63px);
    font-weight:800;
    line-height:1;
    letter-spacing:.01em;
  }
  .hero-lower .small{
    display:block;
    font-size:clamp(16px, 3.6vw, 31px);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.02em;
    opacity:.98;
    margin-top:6px;
  }
  .hero-lower .accent{
    display:block;
    font-size:clamp(29px, 7.05vw, 60px);
    font-weight:800;
    line-height:1.03;
    color:#fff;
    margin-top:8px;
  }
  .hero-lower .accent::first-letter{ color:inherit; }
  .hero-lower p{
    position:relative;
    font-size:clamp(15px, 3.4vw, 29px);
    opacity:.85;
    margin:17% 0 0;
    line-height:1.18;
  }
  .hero-lower p::before{
    content:"";
    position:absolute;
    left:0;
    top:-38%;
    width:37%;
    height:2px;
    background:#8BC34A;
  }
  .hero-icons{
    position:absolute;
    bottom:2.8%;
    left:0;
    width:100%;
    padding:0 4.5%;
    display:flex;
  }
  .icon-item{
    width:20%;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    border-right:1px solid rgba(255,255,255,.24);
    min-height:76px;
  }
  .icon-item:last-child{ border-right:0; }
  .icon-circle{
    width:clamp(33px, 7.8vw, 66px);
    height:clamp(33px, 7.8vw, 66px);
    border-radius:50%;
    border:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .icon-circle svg{ width:100%; height:100%; color:#8BC34A; }
  .icon-item span{
    font-size:clamp(7px, 1.7vw, 15px);
    letter-spacing:-.01em;
    line-height:1.25;
    font-weight:600;
    color:#fff;
    opacity:.96;
  }
}