:root{--paper:#fbf5e9;--ink:#0b1733;--rust:#d34c12;--brown:#5b291b;--line:#eddfca}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}body{font-family:"DM Sans",Arial,sans-serif}.page-shell{position:relative;width:100%;min-height:100svh;overflow:hidden;background:radial-gradient(circle at 40% 45%,#fffaf1 0,#fbf5e9 58%,#f7eedf 100%)}.brand-row{position:absolute;z-index:20;inset:0 0 auto;display:grid;grid-template-columns:240px 1fr 180px;align-items:center;min-height:118px;padding:14px clamp(28px,3vw,58px)}.klabs-logo{width:220px;height:92px;object-fit:contain;object-position:left center}.mitti-logo{justify-self:end;width:145px;height:102px;object-fit:contain}.brand-row nav{justify-self:center;display:flex;align-items:center;gap:clamp(24px,4vw,70px)}.brand-row button{border:0;cursor:pointer;font-weight:700}.nav-link{padding:11px 0;background:transparent;color:var(--ink);font-size:15px}.nav-link.active{border-bottom:2px solid var(--rust)}.talk-button{padding:14px 28px;border-radius:6px!important;background:var(--rust);color:#fff;font-size:16px;box-shadow:0 8px 24px rgba(154,54,14,.16)}.hero{position:absolute;inset:115px 0 230px;display:grid;grid-template-columns:minmax(470px,46%) 1fr;align-items:center}.hero-copy{position:relative;z-index:5;padding-left:clamp(45px,5vw,96px);transition:opacity .22s ease,transform .22s ease}.hero-copy.changing{opacity:0;transform:translateY(7px)}.hero h1{margin:0;font:400 clamp(56px,5.7vw,96px)/.96 "DM Serif Display",Georgia,serif;letter-spacing:-.035em}.hero h1 span,.hero h1 em{display:block;white-space:nowrap}.hero h1 em{color:var(--rust);font-style:normal}.hero-copy>p{width:min(520px,90%);margin:27px 0 25px;color:#31394b;font-size:clamp(16px,1.35vw,22px);line-height:1.5}.hero-button{min-width:230px;display:flex;justify-content:space-between;align-items:center;padding:14px 19px;border:0;border-radius:6px;background:var(--rust);color:#fff;font-weight:700;font-size:16px;cursor:pointer}.hero-button span{font-size:24px}.photo-stage{position:absolute;z-index:2;inset:0 0 0 38%;overflow:hidden}.photo-stage>img{width:100%;height:100%;object-fit:cover;object-position:center;transition:opacity .3s ease,transform .55s ease}.photo-stage.changing>img{opacity:.12;transform:scale(1.01)}.photo-fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--paper) 0%,rgba(251,245,233,.94) 10%,rgba(251,245,233,.38) 23%,transparent 43%),linear-gradient(0deg,var(--paper) 0%,transparent 26%),linear-gradient(180deg,var(--paper) 0%,transparent 10%)}.hotspot{position:absolute;width:47px;height:47px;display:grid;place-items:center;border:3px solid #fff;border-radius:50%;background:var(--rust);color:#fff;font-size:29px;font-weight:400;line-height:1;cursor:pointer;box-shadow:0 7px 20px rgba(70,33,18,.25);transform:translate(-50%,-50%)}.hotspot:hover{transform:translate(-50%,-50%) scale(1.06)}.hotspot:focus-visible{outline:3px solid var(--ink);outline-offset:4px}.journey{position:absolute;z-index:12;left:6.5%;right:7%;bottom:22px;height:218px;display:grid;grid-template-columns:180px 1fr 180px 1fr 180px 1fr 180px;align-items:center}.journey-step{display:grid;justify-items:center;gap:7px;padding:0;border:0;background:transparent;color:var(--brown);cursor:pointer}.icon-wrap{width:145px;height:145px;display:grid;place-items:center;border:2px solid transparent;border-radius:50%;transition:border-color .2s,transform .2s,box-shadow .2s}.icon-wrap img{width:128px;height:128px;border-radius:50%;object-fit:cover}.journey-step b{font-size:20px}.journey-step.active{color:var(--rust)}.journey-step.active .icon-wrap{border-color:var(--rust);transform:scale(1.06);box-shadow:0 8px 25px rgba(110,48,20,.1)}.journey-step:focus-visible .icon-wrap{outline:3px solid var(--ink);outline-offset:4px}.journey-line{height:2px;margin:0 -5px;background:var(--rust);position:relative}.journey-line i{position:absolute;right:-3px;top:50%;color:var(--rust);font-size:29px;font-style:normal;line-height:1;transform:translateY(-53%);background:var(--paper)}.modal{width:min(570px,calc(100vw - 36px));max-height:88vh;margin:auto;padding:48px;border:1px solid rgba(91,38,21,.13);border-radius:5px;background:#fbf5e9;color:var(--ink);box-shadow:0 30px 100px rgba(18,15,10,.32)}.modal::backdrop{background:rgba(9,15,28,.58);backdrop-filter:blur(7px)}.modal-close{position:absolute;top:15px;right:18px;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--brown);font-size:25px;cursor:pointer}.eyebrow{margin:0 0 18px;color:var(--rust);font-size:11px;font-weight:800;letter-spacing:.18em}.modal h2{margin:0 0 25px;font:400 clamp(44px,5vw,72px)/.98 "DM Serif Display",Georgia,serif;letter-spacing:-.04em}.modal h2 em{color:var(--rust);font-style:normal}.modal>p:not(.eyebrow,.link-note){color:#454957;font-size:17px;line-height:1.55}.founder-note{display:grid;gap:7px;margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}.founder-note span,.contact-list span{color:var(--rust);font-size:10px;font-weight:800;letter-spacing:.13em}.founder-note strong{font:400 21px/1.35 Georgia,serif}.contact-list{display:grid;margin:25px 0}.contact-list a,.contact-list>div{display:grid;gap:5px;padding:14px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none}.contact-list strong{font:400 18px Georgia,serif}.social-links{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.social-links a,.social-links button{padding:13px 12px;border:1px solid var(--brown);background:transparent;color:var(--brown);text-align:center;text-decoration:none;cursor:pointer;font-size:12px;font-weight:800}.social-links a:hover,.social-links button:hover{background:var(--brown);color:#fff}.link-note{margin:13px 0 0;color:#777167;font-size:11px}
@media(max-width:1100px){.brand-row{grid-template-columns:180px 1fr 120px}.klabs-logo{width:170px}.mitti-logo{width:110px}.brand-row nav{gap:22px}.hero{grid-template-columns:52% 1fr}.hero h1{font-size:clamp(50px,6.2vw,72px)}.journey{grid-template-columns:130px 1fr 130px 1fr 130px 1fr 130px}.icon-wrap{width:120px;height:120px}.icon-wrap img{width:106px;height:106px}.journey-step b{font-size:15px}}
@media(max-width:760px){body{overflow:auto}.page-shell{min-height:100svh;padding-bottom:165px}.brand-row{position:relative;grid-template-columns:130px 1fr 74px;min-height:82px;padding:8px 14px}.klabs-logo{width:124px;height:62px}.mitti-logo{width:70px;height:64px}.brand-row nav{gap:10px}.nav-link{font-size:0}.nav-link[data-modal]::after{content:"About";font-size:12px}.nav-link[data-scene]{display:none}.talk-button{padding:9px 12px;font-size:12px}.hero{position:relative;inset:auto;display:flex;flex-direction:column;min-height:calc(100svh - 245px);align-items:stretch}.photo-stage{position:relative;inset:auto;order:1;height:44svh}.photo-stage>img{object-position:center}.photo-fade{background:linear-gradient(0deg,var(--paper) 0%,transparent 25%),linear-gradient(180deg,var(--paper) 0%,transparent 9%)}.hero-copy{order:2;margin-top:-35px;padding:0 20px;z-index:5}.hero h1{font-size:47px}.hero h1 span,.hero h1 em{white-space:normal}.hero-copy>p{margin:17px 0;font-size:15px}.hero-button{min-width:205px;width:max-content}.hotspot{width:40px;height:40px;font-size:24px}.journey{position:fixed;left:0;right:0;bottom:0;height:105px;grid-template-columns:repeat(4,1fr);gap:3px;padding:8px;background:rgba(251,245,233,.97);box-shadow:0 -10px 30px rgba(50,32,17,.1);backdrop-filter:blur(10px)}.journey-line{display:none}.icon-wrap{width:58px;height:58px}.icon-wrap img{width:52px;height:52px}.journey-step b{font-size:10px}.journey-step.active .icon-wrap{transform:none}.modal{padding:42px 25px 28px}.social-links{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Refinements: tighter brand scale, restrained typography and hotspot stories */
.brand-row{grid-template-columns:205px 1fr 150px;min-height:102px;padding-top:10px;padding-bottom:10px}
.klabs-logo{width:184px;height:76px}
.mitti-logo{width:118px;height:82px}
.hero{top:101px}
.hero h1{font-size:clamp(48px,4.75vw,80px);line-height:.98;letter-spacing:-.03em}
.hotspot{width:43px;height:43px;font-size:27px;transition:transform .18s ease}
.hotspot:hover,.hotspot:focus-visible,.hotspot.open{z-index:9;transform:translate(-50%,-50%) scale(1.08)}
.hotspot-label{position:absolute;z-index:8;left:calc(100% + 13px);top:50%;width:max-content;max-width:245px;padding:11px 14px;border:1px solid rgba(91,41,27,.12);border-radius:5px;background:rgba(251,245,233,.98);color:var(--brown);font-size:13px;font-weight:700;line-height:1.3;box-shadow:0 10px 30px rgba(49,31,18,.16);opacity:0;pointer-events:none;transform:translate(7px,-50%);transition:opacity .18s ease,transform .18s ease}
.hotspot:hover .hotspot-label,.hotspot:focus-visible .hotspot-label,.hotspot.open .hotspot-label{opacity:1;transform:translate(0,-50%)}
.about-intro{display:grid;grid-template-columns:1fr 135px;gap:25px;align-items:end}
.about-intro img{width:135px;height:135px;border:4px solid #fff;border-radius:50%;object-fit:cover;object-position:center top;box-shadow:0 10px 30px rgba(60,33,20,.14)}
.founder-note{gap:9px;margin-top:26px}
.founder-note strong{font-size:20px}
.founder-note p{margin:2px 0;color:#535665;font-size:14px;line-height:1.5}

@media(max-width:1100px){
  .brand-row{grid-template-columns:155px 1fr 105px}
  .klabs-logo{width:145px}
  .mitti-logo{width:94px}
  .hero h1{font-size:clamp(45px,5.4vw,64px)}
}

@media(max-width:760px){
  .brand-row{grid-template-columns:108px 1fr 62px;min-height:72px;padding:7px 12px}
  .klabs-logo{width:102px;height:54px}
  .mitti-logo{width:58px;height:54px}
  .hero h1{font-size:41px}
  .hotspot{width:38px;height:38px;font-size:23px}
  .hotspot-label{left:auto;right:calc(100% + 9px);max-width:190px;font-size:11px}
  .about-intro{grid-template-columns:1fr 92px;gap:14px}
  .about-intro img{width:92px;height:92px}
}

/* Wide-screen image integration and clean journey controls */
@media(min-width:761px){
  .photo-stage{position:fixed;inset:0 0 0 37%;height:100svh;overflow:hidden}
  .photo-stage>img{width:100%;height:100%;object-fit:cover;object-position:center}
  .photo-fade{background:linear-gradient(90deg,var(--paper) 0%,rgba(251,245,233,.96) 10%,rgba(251,245,233,.56) 22%,rgba(251,245,233,.12) 36%,transparent 48%),linear-gradient(180deg,var(--paper) 0%,rgba(251,245,233,.8) 7%,transparent 18%),linear-gradient(0deg,var(--paper) 0%,rgba(251,245,233,.82) 12%,transparent 29%)}
}
.journey-step,.journey-step:focus{outline:none}
.icon-wrap{overflow:hidden;background:var(--paper)}
.icon-wrap img{clip-path:circle(48% at 50% 50%)}
.journey-step:focus-visible .icon-wrap{outline:2px solid var(--ink);outline-offset:3px}

/* Continuous journey connectors with clean arrowheads */
.journey-line{height:2px;margin:0 -14px;background:var(--rust)}
.journey-line i{right:2px;width:11px;height:11px;border-top:2px solid var(--rust);border-right:2px solid var(--rust);background:transparent;color:transparent;font-size:0;transform:translateY(-50%) rotate(45deg)}

/* Full-bleed photographic background: the scene now extends beneath the
   entire composition and dissolves into the page instead of ending as a panel. */
@media(min-width:761px){
  .photo-stage{
    position:fixed;
    inset:0;
    width:100%;
    height:100svh;
    overflow:hidden;
  }

  .photo-stage>img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:right center;
  }

  .photo-fade{
    background:
      linear-gradient(90deg,
        var(--paper) 0%,
        var(--paper) 27%,
        rgba(251,245,233,.97) 35%,
        rgba(251,245,233,.78) 44%,
        rgba(251,245,233,.38) 54%,
        rgba(251,245,233,.10) 63%,
        transparent 72%),
      linear-gradient(180deg,
        var(--paper) 0%,
        rgba(251,245,233,.90) 6%,
        rgba(251,245,233,.42) 14%,
        transparent 23%),
      linear-gradient(0deg,
        var(--paper) 0%,
        rgba(251,245,233,.96) 12%,
        rgba(251,245,233,.66) 22%,
        rgba(251,245,233,.16) 32%,
        transparent 40%);
  }

  /* Preserve the original right-hand photographic coordinate system so the
     hotspots remain attached to their intended subjects. */
  .hotspots{
    position:absolute;
    inset:0 0 0 37%;
  }
}

@media(max-width:760px){
  .hotspots{
    position:absolute;
    inset:0;
  }
}

/* Keep the photograph at its intended right-side scale, but feather it into
   the canvas so there is no visible rectangular left edge. */
@media(min-width:761px){
  .photo-stage{
    position:fixed;
    inset:0 0 0 37%;
    width:auto;
    height:100svh;
  }

  .photo-stage>img{
    object-position:center;
  }

  .photo-fade{
    background:
      linear-gradient(90deg,
        var(--paper) 0%,
        rgba(251,245,233,.98) 5%,
        rgba(251,245,233,.86) 12%,
        rgba(251,245,233,.52) 21%,
        rgba(251,245,233,.18) 31%,
        transparent 43%),
      linear-gradient(180deg,
        var(--paper) 0%,
        rgba(251,245,233,.82) 7%,
        rgba(251,245,233,.22) 16%,
        transparent 25%),
      linear-gradient(0deg,
        var(--paper) 0%,
        rgba(251,245,233,.94) 13%,
        rgba(251,245,233,.54) 23%,
        rgba(251,245,233,.10) 33%,
        transparent 41%);
  }

  .hotspots{
    inset:0;
  }
}

.brand-home{
  display:block;
  width:max-content;
  line-height:0;
  text-decoration:none;
}

.klabs-home{justify-self:start}
.mitti-home{justify-self:end}
.brand-home:focus-visible{outline:2px solid var(--rust);outline-offset:4px;border-radius:3px}