:root{
  --bg:#f5f6f6;            /* porcelain */
  --ink:#0b0f14;           /* near-black */
  --muted:rgba(11,15,20,.70);
  --line:rgba(11,15,20,.12);
  --card:rgba(255,255,255,.78);
  --glass:rgba(255,255,255,.10);
  --shadow: 0 22px 64px rgba(0,0,0,.14);
  --radius: 22px;
  --max: 1120px;

  --accent:#0f5a45;        /* bottle green */
  --accent2:#1f8a6a;       /* brighter green for gradient */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 600px at 20% -10%, #ffffff 0%, var(--bg) 60%, #eef0f0 100%);
  line-height:1.55;
}

a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:0 22px}

.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:22px; top:18px; width:auto; height:auto; padding:10px 14px;
  background:#fff; border:1px solid var(--line); border-radius:12px; z-index:9999;
}

/* Header */
header{
  position:sticky; top:0; z-index:50;
  background: rgba(245,246,246,.82);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(10,12,15,.86);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.brand img{
  height:46px;
  width:auto;
  display:block;
}

.navlinks{ display:flex; gap:18px; align-items:center; }
.navlinks a{
  text-decoration:none;
  color:rgba(11,15,20,.76);
  padding:8px 10px;
  border-radius:12px;
}
.navlinks a[aria-current="page"]{
  color:var(--ink);
  background: rgba(15,90,69,.10);
  border: 1px solid rgba(15,90,69,.20);
}
.navlinks a:hover{ background:rgba(11,15,20,.04); color:var(--ink); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  text-decoration:none;
  font-weight:650;
}
.btn.primary{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border-color: rgba(15,90,69,.35);
  box-shadow: 0 14px 34px rgba(15,90,69,.28);
}
.btn.secondary{
  background: rgba(255,255,255,.10);
  color:#fff;
  border-color: rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
}
.btn.ghost{
  background: transparent;
}
.btn:hover{ transform: translateY(-1px); }

/* Typography */
h1,h2,h3,h4{ margin:0; letter-spacing:-.2px; }
h1{ font-size: clamp(38px, 4.4vw, 66px); line-height:1.02; }
h2{ font-size: clamp(26px, 3vw, 40px); }
h3{ font-size: 22px; }
.lede{ color:var(--muted); max-width: 72ch; font-size: 18px; margin: 14px 0 0; }

/* Hero */
.hero{
  position:relative;
  padding: 56px 0;
  border-bottom:1px solid var(--line);
}
.hero.has-bg{
  color:#fff;
  border-bottom:none;
  overflow:hidden;
  min-height: calc(100vh - 64px);
  display:flex;
  align-items:center;
}
.hero.has-bg:before{
  content:"";
  position:absolute; inset:0;
  background: var(--hero-bg, url("/assets/hero-neutral.webp")) center/cover no-repeat;
  transform: scale(1.03);
}
.hero.has-bg:after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1000px 600px at 18% 15%, rgba(0,0,0,.56) 0%, rgba(0,0,0,.18) 56%, rgba(0,0,0,.50) 100%),
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.28) 60%, rgba(0,0,0,.36) 100%);
}
.hero .container{ position:relative; z-index:1; padding: 86px 22px; }
.hero .lede{ color: rgba(255,255,255,.82); }

.kicker{
  display:inline-flex; align-items:center; gap:10px;
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
}
.dot{ width:8px; height:8px; border-radius:99px; background: var(--accent2); }

.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.subnote{
  margin-top: 16px;
  font-size: 13px;
  letter-spacing:.2px;
  color: rgba(255,255,255,.74);
}

/* Full-height sections */
.section{ padding: 60px 0; }
.section.full{
  min-height: 100vh;
  display:flex;
  align-items:center;
}
.section.compact{ padding: 48px 0; }
.section-title{ margin-bottom: 18px; }
.section-title p{ margin:10px 0 0; color:var(--muted); max-width: 76ch; }

/* Feature blocks (glassy) */
.feature{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items:stretch;
  margin-top: 18px;
}
.feature.reverse{ grid-template-columns: .85fr 1.15fr; }

.feature .media{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  min-height: 420px;
  background: #ddd;
  position:relative;
}
.feature .media img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.06) contrast(1.05);
}
.feature .media:after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(15,90,69,.14), rgba(0,0,0,0));
  pointer-events:none;
}

.feature .content{
  background: var(--card);
  border:1px solid rgba(255,255,255,.35);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 16px 44px rgba(0,0,0,.08);
  backdrop-filter: blur(14px);
  position:relative;
}
.feature .content:before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: var(--radius);
  padding:1px;
  background: linear-gradient(140deg, rgba(255,255,255,.55), rgba(255,255,255,.06));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}
.feature .content p{ margin: 10px 0 14px; color:var(--muted); }
.feature ul{ margin: 0 0 16px; padding-left: 18px; color:var(--muted); }
.feature li{ margin: 6px 0; }

/* Cards */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.card{
  background: rgba(255,255,255,.84);
  border:1px solid rgba(255,255,255,.40);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 14px 36px rgba(0,0,0,.06);
  backdrop-filter: blur(12px);
}
.card h3{ font-size: 14px; text-transform: uppercase; letter-spacing:.7px; }
.card p{ margin: 10px 0 0; color:var(--muted); }

.brandstrip{
  margin-top: 22px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.38);
  background: rgba(255,255,255,.64);
  backdrop-filter: blur(12px);
}
.badge{
  display:inline-flex; align-items:center; gap:10px;
  border-radius: 999px;
  padding: 10px 12px;
  border:1px solid rgba(15,90,69,.38);
  background: rgba(15,90,69,.10);
  font-weight:650;
  font-size: 13px;
}

/* Forms */
.form{ display:grid; gap: 12px; }
label{ font-weight:650; font-size:14px; }
input, textarea, select{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  font: inherit;
}
textarea{ min-height: 150px; resize: vertical; }
.hint{ color: rgba(11,15,20,.60); font-size: 13px; margin-top: -6px; }

.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }

footer{
  border-top:1px solid rgba(255,255,255,.10);
  padding: 34px 0;
  color: rgba(255,255,255,.72);
  background: rgba(11,15,20,.94);
}
.footergrid{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.small{ font-size: 13px; color: rgba(11,15,20,.62); }

@media (max-width: 980px){
  .hero .container{ padding: 74px 22px; }
  .feature, .feature.reverse{ grid-template-columns: 1fr; }
  .feature .media{ min-height: 260px; }
  .cards{ grid-template-columns: 1fr; }
  .grid2{ grid-template-columns: 1fr; }
  .section.full{ min-height: unset; }
}


/* --- Brochure sections (v5) --- */
.fullbleed{
  width:100%;
  position:relative;
}
.fullbleed .container{
  position:relative;
  z-index:1;
}
.chapter{
  min-height: 92vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
}
.chapter:before{
  content:"";
  position:absolute; inset:0;
  background: var(--bg) center/cover no-repeat;
  transform: scale(1.03);
}
.chapter:after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1100px 700px at 18% 18%, rgba(0,0,0,.50) 0%, rgba(0,0,0,.16) 60%, rgba(0,0,0,.46) 100%),
    linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.30) 62%, rgba(0,0,0,.40) 100%);
}
.chapter.light:after{
  background:
    radial-gradient(1200px 800px at 18% 18%, rgba(0,0,0,.46) 0%, rgba(0,0,0,.14) 62%, rgba(0,0,0,.40) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.26) 62%, rgba(0,0,0,.34) 100%);
}
.chapter .wrap{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 820px;
}
.chapter h2, .chapter h3, .chapter p, .chapter li{
  color:#fff;
}
.chapter .lede{
  color: rgba(255,255,255,.82);
}
.chapter ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.82);
}
.chapter li{ margin: 6px 0; }

.glass{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius);
  padding: 18px 18px;
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 56px rgba(0,0,0,.22);
}

.splitwide{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.band{
  min-height: 70vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.band:before{
  content:"";
  position:absolute; inset:0;
  background: var(--bg) center/cover no-repeat;
  transform: scale(1.03);
  filter: saturate(1.06) contrast(1.05);
}
.band:after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 800px at 20% 20%, rgba(0,0,0,.58) 0%, rgba(0,0,0,.44) 55%, rgba(0,0,0,.56) 100%);
}
.band .wrap{ position:relative; z-index:1; max-width: 920px; }

@media (max-width: 980px){
  .chapter{ min-height: 78vh; }
  .band{ min-height: 56vh; }
  .splitwide{ grid-template-columns: 1fr; }
}


/* --- Logo visibility (v6) --- */
.nav .brand{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(11,15,20,.86);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
.nav .brand img{
  height: 24px;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
}


@media (max-width: 720px){
  .brand{ padding:8px 12px; }
  .brand img{ height:36px; }
}


/* --- Logo sizing override (v9) --- */
header .nav{ padding: 6px 0; }
header .nav .brand{
  padding: 6px 12px;
  border-radius: 16px;
}
header .nav .brand img{
  height: 102px !important; /* shows the strapline under Inteto */
  width: auto;
}
@media (max-width: 980px){
  header .nav .brand img{ height: 84px !important; }
}


/* --- Team imagery (v11) --- */
.hero .container{ position: relative; }
.hero-team{
  margin-top: 22px;
  max-width: 560px;
}
.hero-team img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 56px rgba(0,0,0,.22);
}
@media (max-width: 520px){
  .hero-team{ max-width: 100%; }
}

.media-stack{
  display: grid;
  gap: 12px;
}
.media-stack img{
  border-radius: 18px;
}


/* --- Hero team layout fix (v12) --- */
.hero-grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 36px;
  align-items: center;
}
.hero-copy{ min-width: 0; }
.hero-team{
  margin-top: 0;
  max-width: 520px;
  justify-self: end;
}
@media (max-width: 980px){
  .hero-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hero-team{
    justify-self: start;
    max-width: 560px;
    margin-top: 10px;
  }
}


/* --- Hero team removed (v14) --- */
.hero-grid{ grid-template-columns: 1fr !important; }



/* =========================================================
   Mobile polish pack (v16)
   Target: iPhone 11 / small screens
   ========================================================= */

@supports (height: 100svh){
  .hero.has-bg{ min-height: calc(100svh - 64px); }
  .chapter{ min-height: 92svh; }
  .band{ min-height: 70svh; }
}

@media (max-width: 720px){
  .container{ padding: 0 16px; }

  /* Header: reduce height, keep logo + strapline readable */
  header .nav{ padding: 6px 0; }
  header .nav{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  header .nav .brand{ align-self: flex-start; }
  header .nav .brand img{
    height: 72px !important;
    max-width: 100%;
  }

  .navlinks{
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }
  .navlinks a{
    padding: 10px 12px;
    font-size: 14px;
  }

  /* Hero: remove oversized vertical padding */
  .hero{ padding: 18px 0; }
  .hero .container{ padding: 54px 0; }
  h1{ font-size: clamp(32px, 8.6vw, 46px); }
  .lede{ font-size: 16px; }
  .kicker{ font-size: 12px; padding: 7px 10px; }
  .subnote{ font-size: 12px; }

  /* Sections: avoid huge empty space on mobile */
  .chapter, .band{
    min-height: auto;
    align-items: flex-start;
    padding: 62px 0;
  }
  .band{ padding: 56px 0; }

  /* Two-column form grids collapse */
  .grid2{ grid-template-columns: 1fr; }

  /* iOS: prevent input zoom */
  input, textarea, select{ font-size: 16px; }

  /* Media stacks: ensure clean proportions */
  .media-stack{ gap: 10px; }
  .media-stack img{
    width: 100%;
    height: auto;
    display: block;
  }
}

@media (max-width: 420px){
  /* iPhone 11 width is 414px: tighten further */
  header .nav .brand img{ height: 64px !important; }
  .navlinks a{ padding: 9px 11px; }
  .hero .container{ padding: 46px 0; }
  .btn{ padding: 12px 14px; }
}



/* =========================================================
   Mobile polish pack v17 (force visible changes)
   ========================================================= */

@media (max-width: 720px){
  /* make sticky header less dominant */
  header{
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(10px);
  }

  header .nav{
    padding: 6px 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  header .nav .brand{
    padding: 6px 10px;
    border-radius: 14px;
  }

  header .nav .brand img{
    height: 56px !important; /* smaller, still shows strapline */
  }

  .navlinks{
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .navlinks a{
    font-size: 14px;
    padding: 9px 12px;
    border-radius: 999px;
  }

  /* ensure hero isn't hidden under sticky header */
  .hero{ padding-top: 18px; }
  .hero .container{ padding-top: 26px; }

  /* chapters: reduce card size slightly */
  .card{
    padding: 22px 18px;
    border-radius: 22px;
  }
}

/* iPhone 11 width: 414px */
@media (max-width: 430px){
  header .nav .brand img{ height: 50px !important; }
  .kicker{ max-width: 100%; }
  .hero-actions{ gap: 10px; flex-wrap: wrap; }
  .btn{ width: auto; }
}



/* =========================================================
   Mobile iPhone polish v18 (logo full-width, smaller type, background behaviour)
   ========================================================= */

@media (max-width: 480px){
  /* Header / logo: make it span the width */
  header .nav{
    align-items: center;
  }
  header .nav .brand{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 6px 10px;
  }
  header .nav .brand img{
    width: min(92vw, 560px);
    height: auto !important;   /* override previous fixed heights */
  }

  /* Navigation: full-width row under logo */
  .navlinks{
    width: 100%;
    justify-content: center;
  }

  /* Typography: bring it down to sane mobile sizes */
  h1{ font-size: clamp(26px, 7.2vw, 34px) !important; line-height: 1.06; }
  h2{ font-size: clamp(22px, 6.2vw, 30px) !important; }
  .lede{ font-size: 15px !important; line-height: 1.45; }
  .kicker{ font-size: 12px !important; }
  .subnote{ font-size: 12px !important; }

  /* Buttons: slightly smaller and wrap cleanly */
  .btn{
    padding: 11px 14px !important;
    font-size: 15px !important;
  }
  .hero-actions{
    gap: 10px;
    flex-wrap: wrap;
  }

  /* Cards: reduce padding so content doesn't feel cramped */
  .card{
    padding: 18px 16px !important;
    border-radius: 20px !important;
  }

  /* Background images on iOS: avoid any fixed attachment quirks */
  .hero.has-bg,
  .chapter,
  .band{
    background-attachment: scroll !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  /* Reduce the amount of empty 'hero' top/bottom space on small screens */
  .hero{ padding-top: 14px !important; padding-bottom: 18px !important; }
  .hero .container{ padding-top: 18px !important; padding-bottom: 28px !important; }
}




/* =========================================================
   Mobile background + type overhaul v19
   ========================================================= */

@media (max-width: 480px){
  /* Use portrait-cropped backgrounds on mobile to avoid zoomed/cropped nonsense */
  .hero.has-bg{ background-image: var(--hero-bg-mobile, var(--hero-bg)); }
  .chapter{ background-image: var(--bg-mobile, var(--bg)); }
  .band{ background-image: var(--band-bg-mobile, var(--band-bg)); }

  /* Reduce overall type scale for iPhone */
  body{ font-size: 15px; }
  h1{ font-size: clamp(22px, 6.3vw, 30px) !important; }
  h2{ font-size: clamp(20px, 5.7vw, 26px) !important; }
  .lede{ font-size: 14px !important; }
  .card p, .card li{ font-size: 14px; }
  .kicker{ font-size: 12px !important; }
  .btn{ font-size: 14px !important; padding: 10px 12px !important; }

  /* Reduce card dominance */
  .card{ padding: 16px 14px !important; border-radius: 18px !important; }
  .chapter, .band{ padding: 54px 0 !important; }
  .hero .container{ padding: 18px 0 24px !important; }
}



/* =========================================================
   Home hero mobile fix v20 (reduce shonky empty space)
   ========================================================= */
@media (max-width: 480px){
  /* Home hero: show the product clearly and stop the massive empty top */
  .hero.has-bg{
    background-position: 70% 40% !important;
  }
  .hero{
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }
  .hero .container{
    padding-top: 12px !important;
    padding-bottom: 18px !important;
  }
  /* Pull hero content up a bit */
  .hero .kicker{ margin-top: 6px !important; }
}


/* =========================================================
   v21 Home hero responsive fix (product-first) + remove kicker
   ========================================================= */

/* Desktop/tablet: brochure framing */
.hero.has-bg{
  background-position: 70% 50%;
}

/* Smaller screens: show the product rather than cropping it */
@media (max-width: 820px){
  .hero.has-bg{
    background-image: var(--hero-bg-mobile, var(--hero-bg));
    background-size: contain !important;
    background-position: right 20% !important;
    background-repeat: no-repeat !important;
    background-color: #0f1419;
  }
  .hero{ padding: 10px 0 14px !important; }
  .hero .container{ padding: 18px 0 22px !important; }
}

@media (max-width: 480px){
  h1{ font-size: clamp(20px, 6.0vw, 28px) !important; }
  .lede{ font-size: 13.5px !important; }
}


/* =========================================================
   v22 Home hero: lifestyle image, clean scaling
   ========================================================= */
@media (max-width: 820px){
  .hero.has-bg{
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
  }
}

.micro{font-size:12px; opacity:.85; margin-top:8px;}



/* =========================================================
   v23 Remove pill styling (keep text)
   Affects: hero kicker + header nav links (no rounded chip/pill backgrounds)
   ========================================================= */

.kicker{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  opacity: .92;
}

.navlinks a{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
  opacity: .9;
}

.navlinks a:hover{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 6px;
}


/* =========================================================
   v25 Band text colour fix (Why Loxone readability)
   ========================================================= */
.band{ color: #fff; }
.band .lede{ color: rgba(255,255,255,.88); }
.band .small{ color: rgba(255,255,255,.78); }
.band .badge{ color: #fff; }


/* Contact form status */
.form-status{
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(11,15,20,.55);
  color: rgba(255,255,255,.92);
}


/* =========================================================
   v26 Header readability (no pills, still readable)
   ========================================================= */
header{
  background: linear-gradient(180deg, rgba(5,8,12,.78), rgba(5,8,12,.35) 70%, rgba(5,8,12,0));
}
header .nav{
  color: rgba(255,255,255,.92);
}
.navlinks{
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(11,15,20,.40);
  backdrop-filter: blur(10px);
}
.navlinks a{
  color: rgba(255,255,255,.90) !important;
  text-decoration: none !important;
}
.navlinks a:hover{
  color: #fff !important;
  text-decoration: underline !important;
  text-underline-offset: 6px;
}

.nav-phone{
  font-size: 14px;
  opacity: .92;
}
.nav-phone a{ color: rgba(255,255,255,.92); }
.nav-phone a:hover{ color: #fff; text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 720px){
  .nav-phone{ margin-top: 2px; }
}


/* =========================================================
   v27 Why Loxone brand strip contrast fix
   ========================================================= */
.band .brandstrip{
  background: rgba(11,15,20,.55) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
}
.band .brandstrip .small{
  color: rgba(255,255,255,.82) !important;
}
.band .brandstrip .badge{
  background: rgba(15,90,69,.35) !important;
  border: 1px solid rgba(15,90,69,.55) !important;
  color: #fff !important;
}
.band .brandstrip .btn.ghost{
  color: #fff !important;
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.10) !important;
}
.band .brandstrip .btn.ghost:hover{
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.28) !important;
}

/* =========================================================
   v27 Phone number prominence
   ========================================================= */
.nav-phone{
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
}
.nav-phone a{
  color: #fff !important;
}


/* =========================================================
   v28 Footer logo contrast
   ========================================================= */
footer .brand img, footer .logo img, footer img.footer-logo{
  background: rgba(255,255,255,.10);
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* v29 Footer logo visibility */
footer img{
  opacity: 1 !important;
  filter: none !important;
}
footer a{ color: rgba(255,255,255,.82); }
footer a:hover{ color: #fff; }


/* =========================================================
   v30 Footer typography contrast fix
   ========================================================= */
footer{
  background: rgba(11,15,20,.92);
  color: rgba(255,255,255,.86);
}
footer .small{
  color: rgba(255,255,255,.78) !important;
  opacity: 1 !important;
}
footer strong{
  color: #fff !important;
}
footer em{
  color: rgba(255,255,255,.92) !important;
}

/* v31 Solutions hero kicker placement */
.kicker-inline{
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: .35px;
  opacity: .86;
}

/* v32 Contact hero micro placement */
.contact-micro{ margin-top: 8px; }


/* =========================================================
   v34 Mobile hero + header polish (iPhone 11 / small screens)
   Make the top section feel like the brochure sections.
   ========================================================= */
@media (max-width: 820px){
  header{
    background: rgba(11,15,20,.72) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    backdrop-filter: blur(16px) !important;
  }
  .nav{
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
  }
  .brand img{
    max-width: 92vw;
    height: auto;
  }
  .navlinks{
    width: 100%;
    justify-content: center;
  }
  .navlinks a{
    flex: 1 1 auto;
    text-align: center;
  }
  .nav-phone{
    font-size: 16px !important;
    font-weight: 700 !important;
    opacity: .92;
    padding-bottom: 2px;
  }

  /* HERO: remove the “big empty top” feel and stop the image looking random */
  .hero.has-bg{
    min-height: auto !important;
    align-items: flex-end;
  }
  .hero .container{
    padding: 34px 18px 40px !important;
  }
  .hero.has-bg:before{
    background-position: center 35% !important;
    transform: none !important;
  }
  .hero.has-bg:after{
    background:
      radial-gradient(900px 520px at 18% 10%, rgba(0,0,0,.60) 0%, rgba(0,0,0,.22) 58%, rgba(0,0,0,.55) 100%),
      linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.34) 60%, rgba(0,0,0,.40) 100%) !important;
  }

  /* Type scale on mobile */
  h1{ font-size: clamp(30px, 8.6vw, 44px) !important; }
  .lede{ font-size: 15px !important; line-height: 1.55; }
  .subnote{ font-size: 13px !important; }
  .micro, .kicker-inline{ font-size: 12px !important; }
}