/* =========================================================
   ALTUM — self-contained stylesheet (does not touch the
   shared /css/style.css). Fonts are loaded from the shared
   /fonts folder one level up from /altum/.
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face { font-family:'TT Firs Neue'; font-style:normal; font-weight:400; font-display:swap; src:url('../../fonts/TTFirsNeue-Regular.ttf') format('truetype'); }
@font-face { font-family:'TT Firs Neue'; font-style:normal; font-weight:500; font-display:swap; src:url('../../fonts/TTFirsNeue-Medium.ttf') format('truetype'); }
@font-face { font-family:'TT Firs Neue'; font-style:normal; font-weight:600; font-display:swap; src:url('../../fonts/TTFirsNeue-DemiBold.ttf') format('truetype'); }
@font-face { font-family:'TT Firs Neue'; font-style:normal; font-weight:700; font-display:swap; src:url('../../fonts/TTFirsNeue-Bold.ttf') format('truetype'); }

@font-face { font-family:'MuseoSansCyrl'; font-style:normal; font-weight:100; font-display:swap; src:url('../../fonts/MuseoSansCyrl-100.ttf') format('truetype'); }
@font-face { font-family:'MuseoSansCyrl'; font-style:italic; font-weight:100; font-display:swap; src:url('../../fonts/MuseoSansCyrl-100Italic.ttf') format('truetype'); }
@font-face { font-family:'MuseoSansCyrl'; font-style:normal; font-weight:300; font-display:swap; src:url('../../fonts/MuseoSansCyrl-300.ttf') format('truetype'); }
@font-face { font-family:'MuseoSansCyrl'; font-style:italic; font-weight:300; font-display:swap; src:url('../../fonts/MuseoSansCyrl-300Italic.ttf') format('truetype'); }
@font-face { font-family:'MuseoSansCyrl'; font-style:normal; font-weight:500; font-display:swap; src:url('../../fonts/MuseoSansCyrl-500.ttf') format('truetype'); }
@font-face { font-family:'MuseoSansCyrl'; font-style:italic; font-weight:500; font-display:swap; src:url('../../fonts/MuseoSansCyrl-500Italic.ttf') format('truetype'); }
@font-face { font-family:'MuseoSansCyrl'; font-style:normal; font-weight:700; font-display:swap; src:url('../../fonts/MuseoSansCyrl-700.ttf') format('truetype'); }
@font-face { font-family:'MuseoSansCyrl'; font-style:italic; font-weight:700; font-display:swap; src:url('../../fonts/MuseoSansCyrl-700Italic.ttf') format('truetype'); }
@font-face { font-family:'MuseoSansCyrl'; font-style:normal; font-weight:900; font-display:swap; src:url('../../fonts/MuseoSansCyrl-900.ttf') format('truetype'); }
@font-face { font-family:'MuseoSansCyrl'; font-style:italic; font-weight:900; font-display:swap; src:url('../../fonts/MuseoSansCyrl-900Italic.ttf') format('truetype'); }

/* ---------- Global reset (fixes the white frame around the page) ---------- */
html, body{ margin:0; padding:0; width:100%; }
*, *::before, *::after{ box-sizing:border-box; }

/* ---------- Variables & reset ---------- */
.pageAltum {
  --teal:#27585b;
  --beige:#e4d2c3;
  --brown:#4b2707;
  --cream:#fff4eb;
  --white:#ffffff;
  --container: 1600px;

  font-family:'TT Firs Neue', Arial, sans-serif;
  color: var(--brown);
  background: var(--cream);
  overflow-x: hidden;
}
.pageAltum *{ margin:0; padding:0; box-sizing:border-box; }
.pageAltum img{ max-width:100%; display:block; }
.pageAltum a{ text-decoration:none; color:inherit; }
.pageAltum .container{ max-width: var(--container); margin:0 auto; padding:0 40px; }
.pageAltum h1,.pageAltum h2,.pageAltum h3{ font-family:'MuseoSansCyrl', 'TT Firs Neue', Arial, sans-serif; font-weight:700; line-height:1.25; }

/* ---------- Header / global nav ---------- */
.altumHeader{
  position:absolute; top:0; left:0; right:0; z-index:20;
  padding:28px 0;
}
.altumHeader .container{ display:flex; align-items:center; justify-content:center; gap:40px; position:relative; }
.altumHeader nav{ display:flex; align-items:center; gap:40px; }
.altumHeader nav a{
  color:#fff; font-size:15px; font-weight:600; text-transform:uppercase;
  letter-spacing:.02em; transition:opacity .2s ease; white-space:nowrap;
}
.altumHeader nav a:hover{ opacity:.75; }
.altumHeader .eh-logo img{ height:26px; width:auto; }

/* mobile burger */
.altumHeader .burger{ display:none; flex-direction:column; gap:5px; width:26px; cursor:pointer; background:none; border:0; z-index:60; position:relative; }
.altumHeader .burger span{ display:block; height:2px; width:100%; background:#fff; transition:transform .25s ease, opacity .25s ease; }
.altumHeader.nav-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.altumHeader.nav-open .burger span:nth-child(2){ opacity:0; }
.altumHeader.nav-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* fullscreen mobile nav overlay */
.altumHeader .mobileNavOverlay{ display:none; }

/* ---------- Hero ---------- */
.altumHero{
  position:relative;
  min-height: 900px;
  overflow:hidden;
  color:#fff;
}
.altumHero > picture{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
}
.altumHero > picture img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.altumHero .heroContent{
  position:relative; z-index:5;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  width:fit-content; max-width:520px;
  margin:0 60px 0 auto;
  padding-top:150px;
}
.altumHero .heroLogo{ width:220px; margin-bottom:28px; filter: drop-shadow(0 6px 18px rgba(0,0,0,.25)); }
.altumHero .heroTitle{
  color: var(--teal); font-size:38px; max-width:600px; text-shadow:0 2px 14px rgba(255,255,255,.5);
}
.altumHero .heroAddr{
  color: var(--teal); font-family:'TT Firs Neue'; font-weight:500; font-size:22px; margin-top:20px;
  text-shadow:0 2px 14px rgba(255,255,255,.5);
}

/* ---------- Concept / intro ---------- */
.altumConcept{
  position:relative; background: var(--beige); overflow:hidden;
  padding:120px 0;
}
.altumConcept .shapeBg{
  position:absolute; top:-60px; left:-60px; width:620px; height:auto;
  opacity:.75; z-index:0; pointer-events:none;
}
.altumConcept .container{ position:relative; z-index:1; display:flex; align-items:flex-start; gap:100px; }
.altumConcept p{ font-size:22px; line-height:1.5; flex:1; }
.altumConcept p:nth-of-type(2){ margin-top:140px; }
.altumConcept p.fx{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.altumConcept p.fx.in-view{ opacity:1; transform:translateY(0); }
.altumConcept p.fx:nth-of-type(2){ transition-delay:.15s; }

/* ---------- Benefits banner ---------- */
.altumBanner{
  background: var(--teal); color:#fff; text-align:center; padding:36px 20px;
}
.altumBanner h2{ font-size:30px; color:#fff; text-transform:uppercase; }

/* ---------- Icon grid (desktop: asymmetric grid + photo, matches original design) ---------- */
.altumBenefits{ background: var(--cream); padding:80px 0; }
.altumBenefits .grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 190px);
  column-gap:24px; row-gap:48px;
}
.altumBenefits .item{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;
}
.altumBenefits .item.in-view{ opacity:1; transform:translateY(0); }
.altumBenefits .item img{ width:64px; height:64px; }
.altumBenefits .item p{ font-size:16px; font-weight:500; max-width:230px; }

.altumBenefits .item:nth-child(1){ grid-column:1; grid-row:1; }
.altumBenefits .item:nth-child(2){ grid-column:2; grid-row:1; }
.altumBenefits .item:nth-child(3){ grid-column:3; grid-row:1; }
.altumBenefits .item:nth-child(4){ grid-column:4; grid-row:1; }
.altumBenefits .item:nth-child(5){ grid-column:5; grid-row:1; }
.altumBenefits .item:nth-child(6){ grid-column:1; grid-row:2; }
.altumBenefits .item:nth-child(7){ grid-column:2; grid-row:2; }
.altumBenefits .item:nth-child(8){ grid-column:1; grid-row:3; }
.altumBenefits .item:nth-child(9){ grid-column:2; grid-row:3; }

.altumBenefits .photo{
  grid-column: 3 / 6; grid-row: 2 / 4;
  overflow:hidden; border-radius:4px;
}
.altumBenefits .photo img{ width:100%; height:100%; object-fit:cover; }

/* stagger delays for the icon fade-in */
.altumBenefits .item:nth-child(1){ transition-delay:.02s; }
.altumBenefits .item:nth-child(2){ transition-delay:.08s; }
.altumBenefits .item:nth-child(3){ transition-delay:.14s; }
.altumBenefits .item:nth-child(4){ transition-delay:.20s; }
.altumBenefits .item:nth-child(5){ transition-delay:.26s; }
.altumBenefits .item:nth-child(6){ transition-delay:.08s; }
.altumBenefits .item:nth-child(7){ transition-delay:.14s; }
.altumBenefits .item:nth-child(8){ transition-delay:.14s; }
.altumBenefits .item:nth-child(9){ transition-delay:.20s; }

/* ---------- CTA ---------- */
.altumCta{ background: var(--brown); color: var(--cream); padding:90px 0; }
.altumCta .container{ display:flex; justify-content:flex-start; align-items:center; gap:140px; }
.altumCta h2{ color: var(--cream); font-size:48px; flex:0 1 460px; }
.altumCta form{ flex:0 0 480px; display:flex; flex-direction:column; gap:20px; }
.altumCta label{ display:flex; flex-direction:column; gap:8px; font-size:15px; font-weight:600; }
.altumCta input[type=text], .altumCta input[type=tel]{
  background:none; border:none; border-bottom:1px solid var(--cream); color:var(--cream);
  font-family:'TT Firs Neue'; font-size:16px; padding:6px 0;
}
.altumCta input::placeholder{ color: rgba(255,244,235,.5); }
.altumCta button[type=submit]{
  margin-top:8px; background: var(--cream); color: var(--brown); border:none; border-radius:4px;
  padding:16px; font-family:'TT Firs Neue'; font-weight:600; font-size:16px; cursor:pointer;
  transition: opacity .2s ease;
}
.altumCta button[type=submit]:hover{ opacity:.85; }

/* ---------- Contact row (FB / Insta / Telegram + phone) — hidden per current request ---------- */
.altumContact{
  display:none; /* remove/replace with "display:flex" once approved to go live */
  background: var(--brown); border-top:1px solid rgba(255,244,235,.15);
  padding:24px 0; align-items:center; justify-content:space-between;
}
.altumContact .soc{ display:flex; gap:20px; }
.altumContact .soc a{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--cream);
  display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.altumContact .soc a:hover{ background: rgba(255,244,235,.15); }
.altumContact .soc svg{ width:16px; height:16px; fill:var(--cream); }
.altumContact .phone{ color:var(--cream); font-family:'TT Firs Neue'; font-weight:600; font-size:18px; }

/* =========================================================
   MOBILE (<= 768px) — dedicated layout per the approved
   mobile mock-up
   ========================================================= */
@media screen and (max-width: 768px){
  .pageAltum .container{ padding:0 20px; }

  .altumHeader{ padding:16px 0; }
  .altumHeader .container{ justify-content:space-between; }
  .altumHeader .eh-logo img{ height:22px; }
  .altumHeader .navLeft, .altumHeader .navRight{ display:none; }
  .altumHeader .burger{ display:flex; }
  .altumHeader .mobileNavOverlay{
    display:none; position:fixed; inset:0; z-index:50;
    background: var(--brown);
    flex-direction:column; align-items:center; justify-content:center; gap:26px;
  }
  .altumHeader.nav-open .mobileNavOverlay{ display:flex; }
  .altumHeader .mobileNavOverlay a{
    color:var(--cream); font-size:22px; font-weight:600; text-transform:uppercase; letter-spacing:.02em;
  }

  .altumHero{ min-height:100vh; }
  .altumHero .heroContent{
    max-width:260px; margin:0 -5px 0 auto; padding-top:60px;
  }
  .altumHero .heroLogo{ width:120px; margin-bottom:16px; }
  .altumHero .heroTitle{ font-size:22px; }
  .altumHero .heroAddr{ font-size:14px; margin-top:12px; }

  .altumConcept{ padding:48px 0; }
  .altumConcept .shapeBg{ width:220px; top:10px; left:auto; right:-50px; opacity:.75; }
  .altumConcept .container{ flex-direction:column; gap:20px; align-items:stretch; }
  .altumConcept p:nth-of-type(2){ margin-top:0; }
  .altumConcept p{ font-size:16px; }

  .altumBanner{ padding:24px 20px; }
  .altumBanner h2{ font-size:20px; }

  .altumBenefits{ padding:24px 0; }
  .altumBenefits .grid{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    column-gap:16px; row-gap:24px;
  }
  .altumBenefits .item{ grid-column:auto !important; grid-row:auto !important; }
  .altumBenefits .item img{ width:52px; height:52px; }
  .altumBenefits .item p{ font-size:13px; }
  .altumBenefits .item:nth-child(9){ grid-column: 1 / 3 !important; }
  .altumBenefits .photo{ grid-column:1/3 !important; grid-row:auto !important; aspect-ratio:375/194; margin-top:8px; }

  .altumCta{ padding:40px 0; }
  .altumCta .container{ flex-direction:column; align-items:stretch; gap:20px; }
  .altumCta h2{ font-size:30px; flex:none; }
  .altumCta form{ flex:none; max-width:none; }

  .altumContact.is-visible{ flex-direction:column; gap:16px; text-align:center; }
}