/* living.humblebees.co — Humblebees Living. Its own premium look; shares only the logo and theme toggle with the other sites. */
:root{
  --bg:#f5f2ec; --surface:#fffdf9; --surface-2:#ece6dc; --ink:#191712; --muted:#6c655b; --line:#e2dbcf;
  --gold:#7a5c2a; --gold-soft:#c9a76f; --night:#12110e; --night-2:#1c1a16; --night-ink:#f2ece2; --night-muted:#a59d90;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:Inter,system-ui,sans-serif;
  --wrap:1180px; --r:4px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f0e0c; --surface:#171512; --surface-2:#211e1a; --ink:#f2ece2; --muted:#a59d90; --line:#2c2823; --gold:#d2b07a; --gold-soft:#e2c796;
}}
:root[data-theme="dark"]{--bg:#0f0e0c; --surface:#171512; --surface-2:#211e1a; --ink:#f2ece2; --muted:#a59d90; --line:#2c2823; --gold:#d2b07a; --gold-soft:#e2c796}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:80px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16.5px/1.7 var(--sans);-webkit-font-smoothing:antialiased;letter-spacing:.005em}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
@media (max-width:600px){.wrap{padding:0 16px}}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.08;margin:0}
.label{font:600 .75rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.lede{font-size:1.15rem;color:var(--muted);max-width:56ch}

/* header */
.lv-top{position:fixed;inset:0 0 auto;z-index:20;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.lv-top.solid{background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);border-color:var(--line)}
.lv-top .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--serif);font-size:1.45rem;font-weight:500}
.brand img{width:30px;height:30px;border-radius:50%}
.brand small{font:600 .75rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-left:2px}
.lv-nav{display:flex;align-items:center;gap:30px;font-size:.88rem}
.lv-nav a{text-decoration:none;color:var(--muted)}
.lv-nav a:hover,.lv-nav a[aria-current]{color:var(--ink)}
.lv-nav .enq{color:var(--ink);border:1px solid var(--ink);padding:.6em 1.2em;border-radius:999px}
.lv-nav .enq:hover{background:var(--ink);color:var(--bg)}
.theme-toggle{background:none;border:1px solid var(--line);border-radius:50%;width:34px;height:34px;cursor:pointer;color:inherit}
.on-dark .lv-top:not(.solid){color:var(--night-ink)}
.on-dark .lv-top:not(.solid) .lv-nav a{color:var(--night-muted)}
.on-dark .lv-top:not(.solid) .lv-nav .enq{color:var(--night-ink);border-color:var(--night-ink)}
.on-dark .lv-top:not(.solid) .theme-toggle{border-color:#3a352e}
@media (max-width:860px){.lv-nav a:not(.enq){display:none}}

/* hero: always night */
.lv-hero{background:radial-gradient(120% 90% at 70% 60%,#2a2216 0%,var(--night) 58%);color:var(--night-ink);min-height:min(100vh,900px);display:flex;align-items:center;padding:120px 0 80px;position:relative;overflow:hidden}
.lv-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;width:100%}
@media (max-width:900px){.lv-hero .wrap{grid-template-columns:1fr}.lv-hero .art{max-width:420px;margin:0 auto}}
.lv-hero h1{font-size:clamp(2.8rem,6.4vw,5.4rem);margin:22px 0 26px}
.lv-hero h1 i{color:var(--gold-soft)}
.lv-hero p{color:var(--night-muted);font-size:1.15rem;max-width:44ch;margin:0 0 36px}
.btn{display:inline-flex;align-items:center;gap:.6em;font:500 .95rem/1 var(--sans);text-decoration:none;padding:1.05em 1.7em;border-radius:999px;transition:background .2s,color .2s,border-color .2s}
.btn-gold{background:var(--gold-soft);color:#1a1610}
.btn-gold:hover{background:#ecd5aa}
.btn-line{border:1px solid currentColor}
.btn-line:hover{background:var(--ink);color:var(--bg)}
.lv-hero .btn-line:hover{background:var(--night-ink);color:var(--night)}
.ctas{display:flex;gap:14px;flex-wrap:wrap}
.art svg{width:100%;height:auto}

/* sections */
.sec{padding:clamp(80px,11vw,150px) 0}
.sec-head{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:end;margin-bottom:64px}
@media (max-width:800px){.sec-head{grid-template-columns:1fr;gap:18px}}
.sec-head h2{font-size:clamp(2.2rem,4.6vw,3.6rem);margin-top:16px}
.sec-head p{color:var(--muted);margin:0;max-width:52ch}
.band{background:var(--surface)}
.night{background:var(--night);color:var(--night-ink)}
.night .lede,.night p{color:var(--night-muted)}

/* principles */
.principles{border-top:1px solid var(--line)}
.principle{display:grid;grid-template-columns:90px 1fr 1.25fr;gap:32px;padding:44px 0;border-bottom:1px solid var(--line)}
@media (max-width:800px){.principle{grid-template-columns:1fr;gap:10px;padding:34px 0}}
.principle .no{font-family:var(--serif);font-size:1.1rem;color:var(--gold)}
.principle h3{font-size:clamp(1.7rem,2.8vw,2.3rem)}
.principle p{margin:0;color:var(--muted)}
.principle ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.principle li{font-size:.8rem;border:1px solid var(--line);border-radius:999px;padding:.35em .9em;color:var(--muted)}

/* statement */
.statement{text-align:center}
.statement blockquote{margin:0 auto;max-width:20ch;font-family:var(--serif);font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1.08}
.statement blockquote i{color:var(--gold-soft)}
.statement p{margin:28px auto 0;max-width:54ch}

/* concepts */
.concepts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:1000px){.concepts{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.concepts{grid-template-columns:1fr}}
.concept{display:flex;flex-direction:column;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .35s,box-shadow .35s}
.concept:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(20,16,10,.35)}
.concept .visual{aspect-ratio:16/11;background:var(--night);position:relative;overflow:hidden;display:grid;place-items:center}
.concept .body{padding:30px 32px 34px}
.concept h3{font-size:2rem;margin:12px 0 10px}
.concept p{margin:0 0 20px;color:var(--muted)}
.more{font-size:.9rem;font-weight:500;border-bottom:1px solid var(--gold);padding-bottom:2px}

/* mock: photo frame */
.frame{width:62%;aspect-ratio:4/3;background:#0a0908;border:10px solid #2b2620;border-radius:6px;box-shadow:0 30px 50px -20px #000,inset 0 0 0 1px #000;position:relative;overflow:hidden}
.frame .pic{position:absolute;inset:0;background:radial-gradient(70% 60% at 30% 70%,#e7b56f 0%,transparent 60%),radial-gradient(60% 50% at 75% 30%,#7fa3b8 0%,transparent 65%),linear-gradient(180deg,#3d4a55,#c08a52 70%,#4a3424)}
.frame .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.6))}
.frame .cap{position:absolute;left:14px;bottom:10px;color:#f4ecdf;font:500 .78rem/1.3 var(--sans);z-index:1}
.frame .cap b{display:block;font:500 1.05rem/1.1 var(--serif)}
.phones{position:absolute;left:8%;bottom:12%;display:flex;gap:8px}
.phones span{width:26px;height:48px;border:2px solid #4b443a;border-radius:6px;background:#1f1c18}

/* mock: advisor */
.chat{width:min(78%,360px);display:flex;flex-direction:column;gap:10px;font-size:.8rem;line-height:1.45}
.chat .who{font:600 .75rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:2px}
.bubble{background:#211e19;color:#efe7da;border:1px solid #332e27;border-radius:14px 14px 14px 4px;padding:12px 14px}
.bubble.me{align-self:flex-end;background:#c9a76f;color:#1a1610;border:0;border-radius:14px 14px 4px 14px}
.bubble .bar{height:5px;border-radius:3px;background:#3a342c;margin:8px 0 3px;overflow:hidden}
.bubble .bar i{display:block;height:100%;background:#c9a76f}

/* approach */
.approach{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
@media (max-width:860px){.approach{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.approach{grid-template-columns:1fr}}
.approach div{padding:34px 28px 10px 0}
.approach .no{font-family:var(--serif);color:var(--gold);font-size:1.1rem}
.approach h3{font-size:1.7rem;margin:10px 0 10px}
.approach p{margin:0;color:var(--muted);font-size:.95rem}

/* enquire */
.enquire{text-align:center}
.enquire h2{font-size:clamp(2.4rem,5.4vw,4.2rem);max-width:16ch;margin:18px auto 22px}
.enquire p{max-width:50ch;margin:0 auto 36px}
.enquire small{display:block;margin-top:22px;color:var(--night-muted)}

/* concept pages */
.c-hero{padding:150px 0 70px}
.c-hero .crumb{font-size:.85rem;color:var(--muted);text-decoration:none}
.c-hero h1{font-size:clamp(2.8rem,6vw,5rem);max-width:15ch;margin:22px 0 24px}
.c-visual{background:var(--night);border:1px solid var(--line);border-radius:var(--r);aspect-ratio:21/9;display:grid;place-items:center;overflow:hidden;position:relative}
@media (max-width:700px){.c-visual{aspect-ratio:4/3}}
.c-visual .frame{width:min(46%,520px)}
.c-visual .chat{width:min(70%,440px);font-size:.9rem}
.cols2{display:grid;grid-template-columns:1fr 1.3fr;gap:64px}
@media (max-width:800px){.cols2{grid-template-columns:1fr;gap:20px}}
.cols2 h2{font-size:clamp(2rem,3.8vw,3rem);margin-top:14px}
.cols2 p{color:var(--muted);margin:0 0 18px}
.flow{display:grid;grid-template-columns:1fr auto 1.2fr auto 1fr;align-items:stretch;gap:14px}
@media (max-width:800px){.flow{grid-template-columns:1fr}.flow .arrow{transform:rotate(90deg);justify-self:center}}
.flow .node{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:24px}
.flow .node.home{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.flow .node h3{font-size:1.45rem;margin:10px 0 8px}
.flow .node ul{margin:0;padding-left:1.1em;color:var(--muted);font-size:.93rem}
.flow .arrow{align-self:center;color:var(--gold);font-size:1.4rem}
.flow-note{margin-top:22px;color:var(--muted);font-size:.92rem}
.flow-note b{color:var(--ink);font-weight:600}
.moments{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width:860px){.moments{grid-template-columns:1fr}}
.moments article{border-top:1px solid var(--gold);padding-top:22px}
.moments h3{font-size:1.6rem;margin-bottom:10px}
.moments p{margin:0;color:var(--muted)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ticks li{padding-left:30px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:1px;background:var(--gold)}
.next{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:30px}
.next a{text-decoration:none}
.next small{display:block;color:var(--muted);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.next span{font-family:var(--serif);font-size:1.6rem}
.illus{font-size:.78rem;color:var(--muted);margin-top:12px;text-align:right}

/* footer */
.lv-foot{background:var(--night);color:var(--night-muted);padding:70px 0 40px;font-size:.88rem}
.lv-foot .row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
@media (max-width:720px){.lv-foot .row{grid-template-columns:1fr}}
.lv-foot b{color:var(--night-ink);font-weight:500;display:block;margin-bottom:8px}
.lv-foot a{text-decoration:none;display:block;margin:3px 0}
.lv-foot a:hover{color:var(--night-ink)}
.lv-foot .brand{color:var(--night-ink);margin-bottom:14px}
.lv-foot .legal{border-top:1px solid #2a2621;margin-top:46px;padding-top:22px;font-size:.78rem}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
@media (max-width:600px){
  .lv-nav{gap:10px}
  .lv-nav .enq{padding:.5em .95em;font-size:.82rem}
  .brand{font-size:1.2rem;gap:9px}
  .brand small{letter-spacing:.16em}
  .c-visual .frame{width:72%}
  .concept .frame{width:74%}
}

/* ---- motion: animated backgrounds (decorative; off under prefers-reduced-motion) ---- */
.lv-hero,.night,.c-visual{position:relative;overflow:hidden;isolation:isolate}
.lv-hero .wrap,.night .wrap,.c-visual>:not(.bgfx){position:relative;z-index:1}
.bgfx{position:absolute;inset:0;pointer-events:none;z-index:0}
.bgfx .dust{position:absolute;inset:0;width:100%;height:100%}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.28;background:radial-gradient(circle,#d9b57a 0%,rgba(201,167,111,.35) 40%,transparent 70%);will-change:transform;animation:drift 26s ease-in-out infinite alternate}
.orb.o1{width:46vmax;height:46vmax;left:42%;top:-10%;animation-duration:30s}
.orb.o2{width:34vmax;height:34vmax;left:-12%;bottom:-20%;opacity:.16;animation-duration:38s;animation-delay:-12s;animation-direction:alternate-reverse}
.orb.o3{width:22vmax;height:22vmax;right:-6%;bottom:10%;opacity:.14;animation-duration:22s;animation-delay:-6s}
.c-visual .orb{opacity:.2;filter:blur(50px)}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6%,5%,0) scale(1.08)}100%{transform:translate3d(5%,-4%,0) scale(.96)}}
.art .breathe{transform-box:fill-box;transform-origin:center;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
.art .tw{animation:twinkle 5s ease-in-out infinite}
.art .t2{animation-delay:-1s}.art .t3{animation-delay:-2.2s}.art .t4{animation-delay:-3.1s}.art .t5{animation-delay:-4s}
@keyframes twinkle{0%,100%{opacity:.55}50%{opacity:1}}
.art .links{animation:twinkle 9s ease-in-out infinite}
.art .led{animation:led 3.2s steps(1) infinite}
@keyframes led{0%,45%{fill:#2a2216}50%,100%{fill:#6fdc8c}}
.lv-hero .art{animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.teaser-row{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:30px}
.teaser-links{display:flex;gap:28px;flex-wrap:wrap}
.teaser-links a{font-family:var(--serif);font-size:1.35rem;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px}
.fine{color:var(--muted);font-size:.92rem;margin:34px 0 0;max-width:62ch}
@media (prefers-reduced-motion:reduce){.orb,.art .breathe,.art .tw,.art .links,.art .led,.lv-hero .art{animation:none}.bgfx .dust{display:none}}
.lv-hero .label,.night .label{color:var(--gold-soft)}
.on-dark .lv-top:not(.solid) .brand small{color:var(--gold-soft)}
.bubble small{font-size:.95em}

/* ---- the cutaway house (home-control case study): Cycles renders; hover / focus / tap a room and it comes on ---- */
.house-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);border:1px solid var(--line);background:#1b1d2c}
.house svg{display:block;width:100%;height:auto}
@media (max-width:700px){.house-scroll .house{min-width:900px}}
.house .room{cursor:pointer;outline:none}
.house .on{opacity:0;transition:opacity .7s ease;pointer-events:none}
.house svg>image{pointer-events:none}
.house{position:relative}
.house .room:hover .on,.house .room.lit .on,.house .room:focus-visible .on,.house .room.occ .on{opacity:1}
.house .dev{opacity:0;transition:opacity .7s ease;visibility:hidden;pointer-events:none}
.house .dev.play{visibility:visible}
.house .room:hover .dev,.house .room.lit .dev,.house .room:focus-visible .dev,.house .room.occ .dev{opacity:1}
.house .car-out,.house.car-away .car-in{display:none}
.house.car-away .car-out{display:inline}
.house video.family{position:absolute;display:block;pointer-events:none;opacity:0;transition:opacity .6s ease}
.house.lived video.family{opacity:1}
.house .hit{stroke:none}
.house .anim,.house .anim image{pointer-events:none}
.house .room:focus-visible .hit{stroke:var(--gold-soft);stroke-width:4}
.house-say{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin:12px 0 0;font-size:.9rem;color:var(--muted)}
.house-say b{font-weight:500;color:var(--ink)}
.house-say .illus{margin:0}
.house-say .tools{display:flex;gap:14px;align-items:baseline;flex:none}
.house-play{font:inherit;font-size:.82rem;color:var(--ink);background:none;border:1px solid var(--line);border-radius:999px;padding:3px 12px;cursor:pointer}
.house-play:hover,.house-play:focus-visible{border-color:var(--gold-soft);outline:none}
/* card: the house at dusk, its lights slowly coming on and going off */
.house-card{position:absolute;inset:0}
.house-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.house-card .lit-all{animation:alllit 9s ease-in-out infinite}
@keyframes alllit{0%,12%{opacity:0}40%,72%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .house .on,.house .dev,.house video.family{transition:none}
  .house-card .lit-all{animation:none;opacity:1}
}

/* ---- "How it works" mesh (home-control case study): icon nodes around the home server, fading into the page ----
   sensors are rings, devices are solid, relay dots fill the outer mesh. Coloured signals travel sensor -> server -> device
   (each journey its own quiet colour, many in flight at once): the sensor pings, the signal runs, the device glows on arrival.
   Names are only in each node's <title>. */
.hubmesh{position:relative}
.mesh{display:block;width:100%;height:auto;overflow:visible}
.mesh.tall{display:none}
@media (max-width:700px){.mesh.wide{display:none}.mesh.tall{display:block;max-width:520px;margin:0 auto}}
.mesh pattern circle{fill:var(--line)}
.mesh .links line{stroke:var(--line);stroke-width:1.2}
.mesh .relay{fill:var(--bg);stroke:var(--gold-soft);stroke-width:1.2;opacity:.8}
.mesh .nd .disc{fill:var(--bg);stroke:var(--gold-soft);stroke-width:1.4}
.mesh .nd svg,.mesh .hb svg{overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.mesh .nd svg{stroke:var(--gold);stroke-width:1.5}
.mesh .nd.act .disc{fill:var(--night);stroke:var(--gold-soft);stroke-width:1}
.mesh .nd.act svg{stroke:var(--gold-soft)}
.mesh .sig{fill:none;stroke:var(--c);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4 100;stroke-dashoffset:4;opacity:0;
  animation:sig 8.4s linear infinite;animation-delay:var(--d)}
.mesh .ping,.mesh .land{fill:var(--c);opacity:0;transform-box:fill-box;transform-origin:center;animation:8.4s ease-out infinite;animation-delay:var(--d)}
.mesh .ping{animation-name:ping}
.mesh .land{animation-name:land;animation-timing-function:ease-in-out}
@keyframes sig{0%{stroke-dashoffset:4;opacity:0}2%{opacity:.9}40%{stroke-dashoffset:-100;opacity:.9}42%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes ping{0%{opacity:.42;transform:scale(.8)}11%,100%{opacity:0;transform:scale(1.35)}}
@keyframes land{0%,37%{opacity:0;transform:scale(.85)}43%,52%{opacity:.5;transform:scale(1.05)}64%,100%{opacity:0;transform:scale(1.12)}}
.mesh .hb rect{fill:var(--night);filter:drop-shadow(0 14px 22px rgba(20,16,10,.35))}
.mesh .hb svg{stroke:var(--gold-soft);stroke-width:1.1}
.mesh .hb .led{fill:var(--gold-soft);animation:led 1.6s steps(1,end) infinite;animation-delay:var(--d)}
@keyframes led{0%{opacity:1}35%{opacity:.25}55%{opacity:1}80%{opacity:.5}}
.mesh .hb .ring{fill:none;stroke:var(--gold-soft);stroke-width:1.1;opacity:0;transform-box:fill-box;transform-origin:center;animation:hbring 2.8s ease-out infinite}
.mesh .hb .r2{animation-delay:1.4s}
@keyframes hbring{0%{transform:scale(.9);opacity:.45}70%,100%{transform:scale(2);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .mesh .sig,.mesh .ping,.mesh .land,.mesh .hb .ring{display:none}
  .mesh .hb .led{animation:none}
}