/* ============================================================================
   2 Bee Done Home Services — design system
   Brand: warm, confident, craft. Honey gold + charcoal + cream. Honeycomb motif.
   Palette pulled from the real logo. Fraunces (display) + Outfit (body).
   ========================================================================== */
@import "/assets/fonts/fonts.css";

:root{
  --honey:#f9b51d;          /* primary */
  --honey-2:#ebb42b;
  --bronze:#966d21;
  --wood:#5d503e;
  --char:#1d1a19;           /* charcoal base / ink */
  --char-2:#26201d;
  --char-3:#322a25;
  --cream:#fbf6ec;          /* warm light surface */
  --cream-2:#f3ead7;
  --white:#fdfdfd;
  --ink:#1d1a19;
  --ink-soft:#5b5147;
  --line:rgba(249,181,29,.16);
  --line-dark:rgba(29,26,25,.12);

  --txt:#f3ece0;            /* text on dark */
  --txt-soft:#c4b8a6;
  --txt-dim:#b3a896;

  --maxw:1200px;
  --r:16px; --r-sm:10px;
  --sh:0 24px 60px -28px rgba(0,0,0,.6);
  --sh-honey:0 18px 44px -18px rgba(249,181,29,.5);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease2:cubic-bezier(.22,1,.36,1);
  --font-d:"Fraunces",Georgia,serif;
  --font-b:"Outfit",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--char);color:var(--txt);
  font-family:var(--font-b);font-size:17px;line-height:1.65;letter-spacing:.005em;
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--honey);color:var(--char)}

h1,h2,h3,h4{font-family:var(--font-d);font-weight:600;line-height:1.02;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.7rem,6.4vw,5.2rem);font-weight:900}
h2{font-size:clamp(2rem,4.4vw,3.4rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.85rem)}
h4{font-size:1.2rem}
p{margin:0 0 1rem}

.container{width:min(100% - 2.6rem,var(--maxw));margin-inline:auto}
.section{padding:clamp(4rem,9vw,7rem) 0;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-b);font-weight:600;
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--honey);margin-bottom:1.1rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--honey)}
.eyebrow.center{justify-content:center}
.lead{font-size:1.2rem;color:var(--txt-soft);max-width:60ch}
.center{text-align:center}.mt1{margin-top:.6rem}.mt2{margin-top:1.2rem}.mt3{margin-top:2rem}
.sec-head{max-width:680px;margin-bottom:2.8rem}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head p{color:var(--txt-soft);font-size:1.1rem;margin-top:.9rem}

/* honeycomb texture */
.honeybg{position:relative}
.honeybg::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16zM28 100l28-16V52L28 68 0 84v0' fill='none' stroke='%23f9b51d' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E");
  background-size:56px 100px}
.honeybg>*{position:relative;z-index:1}
/* page wide honeycomb: fixed texture behind every section (dark sections show it,
   cream sections sit on top and stay clean). Slightly stronger stroke than the
   section level texture so it reads across large dark areas. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--char);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16zM28 100l28-16V52L28 68 0 84v0' fill='none' stroke='%23f9b51d' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E");
  background-size:56px 100px}
/* page wide mouse reactive honeycomb canvas (JS adds .hive-on; replaces the static texture) */
#hivebg{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}
html.hive-on body::before{display:none}

/* ------------------------------------------------------------- surfaces */
.on-cream{background:var(--cream);color:var(--ink)}
.on-cream h1,.on-cream h2,.on-cream h3,.on-cream h4{color:var(--ink)}
.on-cream .lead,.on-cream .sec-head p,.on-cream p{color:var(--ink-soft)}
.on-cream .eyebrow{color:var(--bronze)}
.on-dark{background:linear-gradient(180deg,var(--char),var(--char-2))}

/* ------------------------------------------------------------- buttons */
.btn{--bg:var(--honey);--fg:var(--char);display:inline-flex;align-items:center;gap:.6rem;justify-content:center;
  font-family:var(--font-b);font-weight:700;font-size:1.02rem;letter-spacing:.01em;
  padding:.95rem 1.6rem;border-radius:60px;border:2px solid transparent;background:var(--bg);color:var(--fg);
  cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,filter .2s;box-shadow:var(--sh-honey)}
.btn svg{width:1.2em;height:1.2em}
.btn:hover{transform:translateY(-3px);filter:brightness(1.05);box-shadow:0 22px 48px -16px rgba(249,181,29,.7)}
.btn:active{transform:translateY(-1px)}
.btn--lg{font-size:1.12rem;padding:1.1rem 2rem}
.btn--ghost{background:transparent;color:var(--txt);border-color:var(--line);box-shadow:none}
.btn--ghost:hover{border-color:var(--honey);color:var(--white);background:rgba(249,181,29,.08)}
.on-cream .btn--ghost{color:var(--ink);border-color:var(--line-dark)}
.btn--char{--bg:var(--char);--fg:var(--honey);box-shadow:0 18px 40px -18px rgba(0,0,0,.5)}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.8rem}
.arrow{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--honey)}
.arrow svg{transition:transform .2s var(--ease)}
.arrow:hover svg{transform:translateX(5px)}
.on-cream .arrow{color:var(--bronze)}

/* ------------------------------------------------------------- top strip */
.topbar{background:var(--char-2);border-bottom:1px solid var(--line);font-size:.84rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:40px}
.topbar a{color:var(--txt-soft)}.topbar a:hover{color:var(--honey)}
.topbar .pill{display:inline-flex;align-items:center;gap:.45rem;color:var(--txt-soft);font-family:var(--font-b)}
.topbar .pill svg{width:1em;height:1em;color:var(--honey)}
.live-dot{width:8px;height:8px;border-radius:50%;background:#7ee3a0;display:inline-block;animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(126,227,160,.5)}70%{box-shadow:0 0 0 8px rgba(126,227,160,0)}100%{box-shadow:0 0 0 0 transparent}}

/* ------------------------------------------------------------- header */
.site-head{position:sticky;top:0;z-index:70;background:rgba(29,26,25,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:1.5rem;min-height:76px}
.brand{display:inline-flex;align-items:center;gap:.7rem}
.brand img{height:46px;width:auto}
.brand b{font-family:var(--font-d);font-weight:900;font-size:1.3rem;color:var(--white);line-height:1}
.brand small{display:block;font-family:var(--font-b);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--honey);margin-top:3px}
.nav-links{display:flex;align-items:center;gap:.2rem;list-style:none;margin:0 auto 0 1.5rem;padding:0}
.nav-links>li>a,.nav-links>li>button{display:inline-flex;align-items:center;gap:.3rem;padding:.55rem .8rem;font-weight:500;font-size:.96rem;color:var(--txt-soft);background:none;border:0;cursor:pointer;font-family:inherit;border-radius:8px;transition:.15s}
.nav-links>li>a:hover,.nav-links>li>button:hover{color:var(--white);background:rgba(249,181,29,.08)}
.has-mega{position:relative}
.mega{position:absolute;top:calc(100% + 12px);left:0;width:min(620px,82vw);background:var(--char-2);border:1px solid var(--line);border-radius:var(--r);padding:.7rem;box-shadow:var(--sh);display:grid;grid-template-columns:1fr 1fr;gap:.2rem;opacity:0;visibility:hidden;transform:translateY(10px);transition:.2s var(--ease)}
.has-mega[aria-open="true"] .mega{opacity:1;visibility:visible;transform:none}
.mega a{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem;border-radius:10px;transition:background .15s}
.mega a:hover{background:rgba(249,181,29,.08)}
.mega .mi{width:36px;height:36px;border-radius:9px;background:rgba(249,181,29,.13);color:var(--honey);display:grid;place-items:center;flex:none}
.mega .mi svg{width:19px;height:19px}
.mega b{display:block;color:var(--txt);font-weight:600;font-size:.95rem}
.mega span{display:block;color:var(--txt-dim);font-size:.8rem}
.head-cta{display:flex;align-items:center;gap:.7rem}
.callbox{display:inline-flex;align-items:center;gap:.55rem}
.callbox .ci{width:40px;height:40px;border-radius:10px;background:rgba(249,181,29,.13);color:var(--honey);display:grid;place-items:center}
.callbox .ci svg{width:19px;height:19px}
.callbox .ct{line-height:1.05}
.callbox .ct span{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-dim)}
.callbox .ct strong{font-family:var(--font-d);font-size:1.05rem;color:var(--white)}
.callbox:hover .ct strong{color:var(--honey)}
.burger{display:none;width:48px;height:44px;border:1px solid var(--line);border-radius:10px;background:rgba(249,181,29,.05);cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:2px;background:var(--honey);transform:translate(-50%,-50%);transition:.2s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.skip{position:absolute;left:-999px;background:var(--honey);color:var(--char);padding:.6rem 1rem;z-index:200;font-weight:700}
.skip:focus{left:8px;top:8px}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:120;visibility:hidden}
.drawer.open{visibility:visible}
.drawer .scrim{position:absolute;inset:0;background:rgba(8,6,5,.7);opacity:0;transition:.25s}
.drawer.open .scrim{opacity:1}
.drawer .panel{position:absolute;right:0;top:0;height:100%;width:min(88vw,380px);background:var(--char-2);border-left:1px solid var(--line);padding:1.4rem;overflow-y:auto;transform:translateX(100%);transition:transform .3s var(--ease);display:flex;flex-direction:column;gap:.2rem}
.drawer.open .panel{transform:none}
.drawer .panel a{padding:.8rem .5rem;font-family:var(--font-d);font-size:1.2rem;font-weight:600;border-bottom:1px solid var(--line)}
.drawer .panel a:hover{color:var(--honey)}
.drawer .panel .btn{margin-top:.7rem}

/* ------------------------------------------------------------- hero */
.hero{position:relative;min-height:clamp(560px,84vh,860px);display:flex;align-items:center;overflow:hidden;background:var(--char)}
#hive{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(70% 60% at 18% 40%,rgba(29,26,25,.78),rgba(29,26,25,.35) 60%,transparent),linear-gradient(180deg,transparent 60%,var(--char))}
.hero .container{position:relative;z-index:2;padding-block:4rem}
.hero-inner{max-width:760px}
.hero h1 em{font-style:normal;color:var(--honey);position:relative}
.hero .lead{font-size:1.3rem;margin-top:1.2rem;color:var(--txt-soft)}
.hero-badges{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.hbadge{display:flex;align-items:center;gap:.55rem;font-size:.92rem;color:var(--txt-soft)}
.hbadge svg{width:1.5em;height:1.5em;color:var(--honey)}
.hbadge b{color:var(--white)}
.reassure{display:flex;align-items:center;gap:.5rem;color:var(--txt-soft);font-size:.96rem;margin-top:1.3rem}
.reassure svg{width:1.1em;height:1.1em;color:#7ee3a0;flex:none}

/* ------------------------------------------------------------- trust ribbon */
.ribbon{background:var(--char-2);border-block:1px solid var(--line)}
.ribbon .container{display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;padding:1.5rem 0}
.titem{display:flex;align-items:center;gap:.7rem;flex:1;min-width:175px}
.titem svg{width:30px;height:30px;color:var(--honey);flex:none}
.titem b{display:block;font-family:var(--font-d);font-weight:600;font-size:1.02rem;color:var(--txt)}
.titem span{font-size:.82rem;color:var(--txt-dim)}

/* ------------------------------------------------------------- service grid */
.grid{display:grid;gap:1.5rem}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.svc{display:block;background:var(--white);border:1px solid var(--cream-2);border-radius:var(--r);padding:1.8rem;position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.svc::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--honey);transition:width .25s}
.svc:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(29,26,25,.4);border-color:transparent}
.svc:hover::after{width:8px}
.svc .ic{width:56px;height:56px;border-radius:14px;background:linear-gradient(140deg,var(--honey),var(--honey-2));color:var(--char);display:grid;place-items:center;margin-bottom:1.1rem}
.svc .ic svg{width:28px;height:28px}
.svc h3{color:var(--ink);margin-bottom:.5rem}
.svc p{color:var(--ink-soft);font-size:.98rem}
.svc .tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 1.1rem}
.svc .tags span{font-size:.76rem;background:var(--cream);color:var(--bronze);padding:.25rem .6rem;border-radius:6px;font-weight:500}

/* big split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.figure{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);position:relative}
.figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.checklist{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:1rem}
.checklist li{display:flex;gap:.85rem}
.checklist svg{width:1.4em;height:1.4em;color:var(--honey);flex:none;margin-top:.15rem}
.checklist b{display:block;color:var(--txt)}
.on-cream .checklist b{color:var(--ink)}
.checklist span{color:var(--txt-soft);font-size:.95rem}
.on-cream .checklist span{color:var(--ink-soft)}

/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.stat{background:var(--char-2);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem}
.stat b{display:block;font-family:var(--font-d);font-weight:900;font-size:2.6rem;color:var(--honey);line-height:1}
.stat span{display:block;color:var(--txt-dim);font-size:.88rem;margin-top:.5rem}

/* steps */
.steps{counter-reset:s}
.step{background:var(--white);border:1px solid var(--cream-2);border-radius:var(--r);padding:1.8rem;position:relative}
.step .no{font-family:var(--font-d);font-weight:900;font-size:1rem;color:var(--honey);display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.8rem}
.step .no::before{content:"";width:24px;height:3px;background:var(--honey)}
.step h3{color:var(--ink);margin-bottom:.4rem}
.step p{color:var(--ink-soft)}

/* testimonials */
.tcard{background:var(--char-2);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;display:flex;flex-direction:column;gap:1rem}
.on-cream .tcard{background:var(--white);border-color:var(--cream-2)}
.tcard .quote{color:var(--txt);font-size:1.02rem;line-height:1.6}
.on-cream .tcard .quote{color:var(--ink)}
.tcard .who{display:flex;align-items:center;gap:.7rem;margin-top:auto}
.tcard .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(140deg,var(--honey),var(--bronze));color:var(--char);display:grid;place-items:center;font-family:var(--font-d);font-weight:900;flex:none}
.tcard .nm{font-weight:600;color:var(--txt)}.on-cream .tcard .nm{color:var(--ink)}
.tcard .loc{font-size:.82rem;color:var(--txt-dim)}
.stars{display:inline-flex;gap:1px;color:var(--honey)}.stars svg{width:18px;height:18px}

/* ===== gallery ============================================================= */
/* base grid (home proof strip + service strips) */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.gal a{border-radius:14px;overflow:hidden;aspect-ratio:1;position:relative;background:var(--char-2)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gal a:hover img{transform:scale(1.07)}
.gal figure{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:1;position:relative;background:var(--char-2);cursor:zoom-in}
.gal figure picture{display:block;width:100%;height:100%}
.gal figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gal figure:hover img{transform:scale(1.07)}
.gal figure[hidden]{display:none}
.gal figcaption{position:absolute;inset:auto 0 0 0;padding:1.7rem .9rem .8rem;font:500 .82rem/1.4 var(--font-b);color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.82));opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.gal figure:hover figcaption,.gal figure:focus-within figcaption{opacity:1;transform:none}
.gal .pbadge{position:absolute;top:.7rem;left:.7rem;z-index:2;font:800 .62rem/1 var(--font-b);letter-spacing:.1em;text-transform:uppercase;padding:.38rem .6rem;border-radius:7px;background:var(--honey);color:var(--char);box-shadow:0 4px 14px -4px rgba(0,0,0,.5)}
.gal .pbadge.before{background:rgba(20,17,16,.82);color:#fff;backdrop-filter:blur(4px)}

/* justified portfolio — flush rows, true aspect ratio, no crop (JS sets exact px sizes;
   the flex rules are a graceful no-JS fallback that still fills rows by aspect) */
.jgal{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.jgal figure{margin:0;position:relative;overflow:hidden;border-radius:12px;background:var(--char-2);cursor:zoom-in;
  height:300px;flex:1 1 auto;flex-basis:calc(300px * var(--ar,1.2));max-width:100%;
  border:1px solid var(--line);box-shadow:0 12px 30px -24px rgba(0,0,0,.85);
  transition:transform .45s var(--ease2),box-shadow .45s var(--ease2),border-color .45s var(--ease2)}
.jgal.is-justified figure{flex:0 0 auto}        /* JS mode: exact width/height holds */
.jgal figure[hidden]{display:none}
.jgal::after{content:"";flex-grow:9999;height:0}  /* keep the last fallback row left aligned */
.jgal.is-justified::after{display:none}           /* JS mode left aligns on its own */
.jgal figure picture{display:block;width:100%;height:100%}
.jgal figure img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease2)}
.jgal figure:hover{transform:translateY(-3px);box-shadow:var(--sh-honey);border-color:var(--honey);z-index:2}
.jgal figure:hover img{transform:scale(1.045)}
.jgal figcaption{position:absolute;inset:auto 0 0 0;padding:2rem .9rem .8rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.86));opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease2),transform .4s var(--ease2)}
.jgal figure:hover figcaption,.jgal figure:focus-within figcaption{opacity:1;transform:none}
.jgal figcaption>span{display:block;font:500 .82rem/1.4 var(--font-b)}
.gcat{display:block;font:700 .6rem/1 var(--font-b)!important;letter-spacing:.18em;text-transform:uppercase;color:var(--honey);margin-bottom:.4rem}
.jgal .pbadge{position:absolute;top:.7rem;left:.7rem;z-index:2;font:800 .6rem/1 var(--font-b);letter-spacing:.1em;text-transform:uppercase;padding:.36rem .58rem;border-radius:7px;background:var(--honey);color:var(--char);box-shadow:0 4px 14px -4px rgba(0,0,0,.5)}
.jgal .pbadge.before{background:rgba(20,17,16,.82);color:#fff;backdrop-filter:blur(4px)}
/* GEO summary + gallery faq */
.galsummary{max-width:780px;margin:2rem auto 0;text-align:center;color:var(--txt-soft);font-size:1.02rem;line-height:1.72}
/* location pages (service areas) */
.locbody{max-width:840px;margin-inline:auto}
.locbody section{margin-bottom:2.2rem}.locbody section:last-child{margin-bottom:0}
.locbody h2{font-size:clamp(1.45rem,3vw,2rem);margin-bottom:.7rem}
.locbody p{margin-bottom:1rem;line-height:1.78}
.locbody strong{color:var(--ink);font-weight:700}
.loccols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem;margin-top:1.5rem}
.loccol h3{font-size:1.15rem;margin-bottom:.5rem}
.loccol h3 a{color:var(--bronze)}.loccol h3 a:hover{color:var(--ink)}
.loccol ul{list-style:none;padding:0;margin:0}.loccol li{margin:.32rem 0}
.loccol li a{color:var(--ink-soft)}.loccol li a:hover{color:var(--bronze)}
.locgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.9rem;margin-top:1.4rem}
.loccard{display:flex;flex-direction:column;gap:.15rem;padding:1rem 1.15rem;border:1px solid var(--line);border-radius:12px;background:var(--char-2);transition:border-color .3s var(--ease2),transform .3s var(--ease2)}
.loccard:hover{border-color:var(--honey);transform:translateY(-3px)}
.loccard b{color:var(--txt);font-family:var(--font-d);font-weight:600;font-size:1.02rem}
.loccard span{color:var(--txt-dim);font-size:.8rem}
.foot-locs a{display:inline-block;margin:.15rem .5rem .15rem 0;color:var(--txt-dim);font-size:.84rem}
.foot-locs a:hover{color:var(--honey)}
/* google rating badge + map embed (contact) */
.gbadge{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.4rem;padding:.7rem 1.1rem;border:1px solid var(--line-dark);border-radius:50px;background:var(--white);transition:border-color .25s,box-shadow .25s}
.gbadge:hover{border-color:var(--honey);box-shadow:var(--sh-honey)}
.on-cream .gbadge{background:var(--white)}
.gbadge .gstars{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(249,181,29,.16);color:var(--honey);flex:none}
.gbadge .gstars svg{width:18px;height:18px;fill:var(--honey)}
.gbadge strong{display:block;font-family:var(--font-d);font-size:1.05rem;color:var(--ink)}
.gbadge>span:last-child span{display:block;color:var(--ink-soft);font-size:.8rem}
.gbadge>span:last-child span svg{width:.85em;height:.85em;vertical-align:-1px;color:var(--bronze)}
.mapembed{margin-top:1.4rem;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-dark);aspect-ratio:16/10;background:var(--cream-2)}
.mapembed iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(.2)}
/* google rating card (reviews section) */
.grating{max-width:700px;margin:0 auto;background:var(--white);border-radius:var(--r);padding:1.3rem 1.6rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.9rem 2.4rem;box-shadow:var(--sh)}
.grating-score{display:flex;align-items:center;gap:.7rem}
.grating-score b{font-family:var(--font-d);font-weight:900;font-size:2.7rem;line-height:1;color:var(--ink)}
.grating-score .stars{display:inline-flex;gap:2px}
.grating-score .stars svg{width:18px;height:18px;fill:var(--honey);color:var(--honey)}
.grating-score a{color:var(--bronze);font-weight:700;font-size:.92rem}
.grating-score a svg{width:.9em;height:.9em;vertical-align:-1px}
.gtags{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;justify-content:center;max-width:360px}
.gtags-l{font-size:.74rem;letter-spacing:.04em;color:var(--ink-soft);width:100%;text-align:center;margin-bottom:.15rem}
.gtag{font-size:.8rem;font-weight:600;color:var(--ink);background:rgba(249,181,29,.16);border:1px solid var(--line-dark);padding:.32rem .72rem;border-radius:50px}
.galfaq{content-visibility:auto;contain-intrinsic-size:auto 600px}

/* gallery filter chips */
.galfilter{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin:0 0 2rem}
.galfilter button{font:600 .9rem/1 var(--font-b);color:var(--txt-soft);background:var(--char-2);border:1px solid var(--line);padding:.64rem 1.2rem;border-radius:50px;cursor:pointer;transition:color .2s,background .2s,border-color .2s,box-shadow .2s}
.galfilter button:hover{color:var(--txt);border-color:var(--honey)}
.galfilter button.on{background:var(--honey);color:var(--char);border-color:var(--honey);box-shadow:var(--sh-honey)}
.on-cream .galfilter button{color:var(--ink-soft);background:var(--white);border-color:var(--line-dark)}
.on-cream .galfilter button:hover{color:var(--ink);border-color:var(--bronze)}
.on-cream .galfilter button.on{background:var(--char);color:var(--honey);border-color:var(--char);box-shadow:0 12px 30px -16px rgba(0,0,0,.5)}
.galfilter i{font-style:normal;font-size:.78em;opacity:.6;margin-left:.1em;font-variant-numeric:tabular-nums}
.galfilter button.on i{opacity:.85}
/* portfolio fade in on scroll (JS marks ready, so no-JS stays visible) */
.jgal.reveal-ready figure{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease2),transform .6s var(--ease2),box-shadow .45s var(--ease2),border-color .45s var(--ease2)}
.jgal.reveal-ready figure.shown{opacity:1;transform:none}
.galnote{text-align:center;color:var(--txt-dim);font-size:.9rem;margin-top:1.8rem}
.on-cream .galnote{color:var(--ink-soft)}.galnote a{color:var(--bronze);font-weight:700;border-bottom:1px solid currentColor}

/* gallery hero stats */
.galstats{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.6rem;margin-top:2.4rem}
.gstat{text-align:center}
.gstat b{display:block;font:900 2.1rem/1 var(--font-d);color:var(--honey)}
.gstat span{display:block;font:600 .72rem/1.2 var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim);margin-top:.35rem}

/* ===== before & after ====================================================== */
.xform{position:relative}
.xform::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background:radial-gradient(60% 50% at 80% 0%,rgba(249,181,29,.10),transparent 70%),radial-gradient(50% 50% at 0% 100%,rgba(150,109,33,.12),transparent 70%)}
.xform>.container{position:relative;z-index:1}

/* grid of interactive sliders */
.ba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:1.4rem;align-items:start;max-width:1000px;margin:0 auto 2.4rem}
.ba{margin:0;width:100%;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh);background:var(--char-2)}
.ba-stage{--pos:50%;position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;touch-action:none;cursor:ew-resize;user-select:none;background:var(--char)}
.ba-hint{position:absolute;top:1rem;left:50%;transform:translateX(-50%);z-index:4;font:700 .64rem/1 var(--font-b);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(20,17,16,.6);backdrop-filter:blur(5px);padding:.46rem .8rem;border-radius:50px;pointer-events:none;transition:opacity .4s var(--ease)}
.ba.touched .ba-hint{opacity:0}
.ba-img{position:absolute;inset:0}
.ba-img img{width:100%;height:100%;object-fit:cover}
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0);will-change:clip-path}
.ba-tag{position:absolute;bottom:1rem;z-index:3;font:800 .64rem/1 var(--font-b);letter-spacing:.1em;text-transform:uppercase;padding:.42rem .7rem;border-radius:7px;backdrop-filter:blur(5px);pointer-events:none}
.ba-tag--b{left:1rem;background:rgba(20,17,16,.74);color:#fff}
.ba-tag--a{right:1rem;background:var(--honey);color:var(--char)}
.ba-divider{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;z-index:4;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(0,0,0,.18);transform:translateX(-50%);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--honey);color:var(--char);display:grid;place-items:center;box-shadow:0 8px 24px -6px rgba(0,0,0,.6)}
.ba-knob svg{width:22px;height:22px}
.ba-knob::before,.ba-knob::after{content:"";position:absolute;top:50%;width:0;height:0;border:6px solid transparent;transform:translateY(-50%)}
.ba-knob::before{left:6px;border-right-color:var(--char)}
.ba-knob::after{right:6px;border-left-color:var(--char)}
.ba-knob svg{display:none}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:5;pointer-events:none}
.ba:focus-within .ba-divider{box-shadow:0 0 0 2px var(--honey)}
.ba figcaption{padding:1.1rem 1.3rem 1.3rem}
.ba figcaption b{display:block;font:600 1.15rem/1.2 var(--font-d);color:var(--white)}
.ba figcaption span{display:block;color:var(--txt-soft);font-size:.92rem;margin-top:.3rem}

/* before/after story cards (diptych pairs + single frame composites) */
.xgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.2rem}
.xcard{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--char-2);border:1px solid var(--line);cursor:zoom-in;box-shadow:0 12px 34px -24px rgba(0,0,0,.8);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.xcard:hover{transform:translateY(-4px);box-shadow:var(--sh-honey);border-color:var(--honey)}
.xcard picture{display:block}
.xcard-img img,.xcard>picture img{width:100%;height:240px;object-fit:cover;transition:transform .6s var(--ease)}
.xcard:hover .xcard-img img{transform:scale(1.05)}
.xbadge{position:absolute;top:.75rem;left:.75rem;z-index:3;font:800 .6rem/1 var(--font-b);letter-spacing:.1em;text-transform:uppercase;padding:.4rem .62rem;border-radius:7px;background:var(--honey);color:var(--char);box-shadow:0 6px 16px -6px rgba(0,0,0,.6)}
.xpair{display:grid;grid-template-columns:1fr 1fr}
.xp{position:relative;overflow:hidden}
.xp img{width:100%;height:240px;object-fit:cover}
.xp--b::after{content:"";position:absolute;top:0;right:0;bottom:0;width:1px;background:rgba(255,255,255,.18)}
.xlabel{position:absolute;top:.6rem;left:.6rem;font:800 .58rem/1 var(--font-b);letter-spacing:.1em;text-transform:uppercase;padding:.34rem .54rem;border-radius:6px;background:rgba(20,17,16,.74);color:#fff;backdrop-filter:blur(4px)}
.xlabel--a{background:var(--honey);color:var(--char)}
.xcard figcaption{padding:.95rem 1.1rem 1.15rem}
.xcard figcaption b{display:block;font:600 1.02rem/1.2 var(--font-d);color:var(--white);margin-bottom:.3rem}
.xcard figcaption span{display:block;color:var(--txt-soft);font:500 .85rem/1.45 var(--font-b)}

/* ===== lightbox ============================================================ */
.lbox{position:fixed;inset:0;z-index:200;background:rgba(10,8,7,.95);display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.lbox.open{display:flex;animation:lbin .25s var(--ease)}
@keyframes lbin{from{opacity:0}to{opacity:1}}
.lbox figure{margin:0;max-width:94vw;max-height:84vh;display:flex;flex-direction:column;align-items:center;gap:.9rem;transform:translateY(-2vh)}
.lbox img{max-width:94vw;max-height:68vh;width:auto;height:auto;border-radius:12px;box-shadow:0 40px 100px -24px #000,0 0 0 1px rgba(249,181,29,.14)}
@media(max-width:700px){.lbox figure{transform:none}.lbox img{max-height:74vh}}
.lb-cap{display:flex;flex-direction:column;align-items:center;gap:.35rem;max-width:760px;padding:0 1.2rem}
.lb-cap .lb-group{font:700 .68rem/1 var(--font-b);letter-spacing:.18em;text-transform:uppercase;color:var(--honey)}
.lb-cap figcaption{color:#f3ece0;font:500 1rem/1.45 var(--font-b);text-align:center}
.lb-count{position:absolute;top:max(2.6vh,18px);left:max(2.6vw,18px);color:var(--txt-soft);font:600 .82rem/1 var(--font-b);letter-spacing:.06em;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:.5rem .8rem;border-radius:50px}
.lbox button{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;width:52px;height:52px;border-radius:50%;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s,transform .2s}
.lbox button:hover{background:rgba(249,181,29,.95);color:var(--char);border-color:transparent;transform:scale(1.06)}
.lbox .lb-close{top:max(2.6vh,18px);right:max(2.6vw,18px)}
.lbox .lb-prev{left:max(2vw,12px);top:50%;transform:translateY(-50%)}
.lbox .lb-next{right:max(2vw,12px);top:50%;transform:translateY(-50%)}
.lbox .lb-prev:hover,.lbox .lb-next:hover{transform:translateY(-50%) scale(1.06)}
@media(max-width:560px){.lbox .lb-prev{left:8px}.lbox .lb-next{right:8px}.lbox button{width:44px;height:44px;font-size:1.25rem}.lb-count{display:none}}
/* lightbox thumbnail filmstrip */
.lb-strip{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;gap:6px;padding:.55rem max(2vw,12px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.lb-strip::-webkit-scrollbar{display:none}
.lb-strip .lb-thumb{position:static;flex:0 0 auto;width:58px;height:42px;border-radius:6px;overflow:hidden;border:2px solid transparent;background:#1a1715;padding:0;opacity:.5;transform:none;transition:opacity .2s var(--ease2),border-color .2s var(--ease2)}
.lb-strip .lb-thumb:hover{opacity:.85;background:#1a1715;transform:none;border-color:transparent}
.lb-strip .lb-thumb.on{opacity:1;border-color:var(--honey)}
.lb-strip .lb-thumb img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.lb-strip{display:none}}

/* faq */
.faq{max-width:800px;margin-inline:auto;display:grid;gap:.7rem}
.faq-i{border:1px solid var(--line);border-radius:var(--r);background:var(--char-2);overflow:hidden}
.on-cream .faq-i{background:var(--white);border-color:var(--cream-2)}
.faq-q{width:100%;text-align:left;background:none;border:0;color:var(--txt);cursor:pointer;font-family:var(--font-d);font-weight:600;font-size:1.12rem;padding:1.1rem 1.3rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.on-cream .faq-q{color:var(--ink)}
.faq-q .pm{width:20px;height:20px;position:relative;flex:none}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--honey)}
.faq-q .pm::before{width:14px;height:2px}.faq-q .pm::after{width:2px;height:14px;transition:.2s}
.faq-i.open .pm::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.faq-i.open .faq-a{grid-template-rows:1fr}
.faq-a div{overflow:hidden}
.faq-a p{padding:0 1.3rem 1.2rem;margin:0;color:var(--txt-soft)}
.on-cream .faq-a p{color:var(--ink-soft)}

/* breadcrumb */
.crumb{font-size:.85rem;color:var(--txt-dim);padding-top:1.5rem}
.crumb a:hover{color:var(--honey)}
.crumb span{opacity:.5;margin:0 .4rem}

/* final CTA */
.cta{position:relative;overflow:hidden}
.cta .container{position:relative;z-index:2}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.callxl{display:inline-flex;align-items:center;gap:1rem;margin-top:1.6rem;padding:1.1rem 1.5rem;border:1px solid var(--line);border-radius:var(--r);background:rgba(249,181,29,.06);transition:.2s}
.callxl:hover{border-color:var(--honey);background:rgba(249,181,29,.1)}
.callxl .ic{width:56px;height:56px;border-radius:13px;background:var(--honey);color:var(--char);display:grid;place-items:center;flex:none}
.callxl .ic svg{width:27px;height:27px}
.callxl span{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-dim)}
.callxl strong{font-family:var(--font-d);font-size:1.8rem;color:var(--white)}

/* form */
.formcard{background:var(--white);border:1px solid var(--cream-2);border-radius:18px;padding:1.9rem;box-shadow:var(--sh);color:var(--ink)}
.formcard h3{color:var(--ink)}
.fstep{display:none}.fstep.active{display:block;animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
.fbar{height:5px;background:var(--cream-2);border-radius:4px;overflow:hidden;margin-bottom:1.3rem}
.fbar i{display:block;height:100%;background:linear-gradient(90deg,var(--honey),var(--bronze));width:33%;transition:width .35s var(--ease)}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%;background:var(--cream);border:1px solid var(--cream-2);border-radius:10px;color:var(--ink);font-family:inherit;font-size:1rem;padding:.85rem .9rem}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--honey);box-shadow:0 0 0 3px rgba(249,181,29,.2)}
.opt-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.opt{border:1px solid var(--cream-2);border-radius:10px;padding:.8rem;cursor:pointer;font-weight:600;color:var(--ink-soft);text-align:center;transition:.15s}
.opt:hover{border-color:var(--honey)}
.opt input{display:none}
.opt.sel{border-color:var(--honey);background:rgba(249,181,29,.1);color:var(--ink)}
.fnav{display:flex;gap:.7rem;margin-top:.5rem}
.fnote{font-size:.84rem;color:var(--ink-soft);display:flex;align-items:center;gap:.5rem;margin-top:1rem}
.fnote svg{width:1.1em;height:1.1em;color:#2f9e63;flex:none}

/* footer */
.site-foot{background:#100e0d;border-top:1px solid var(--line);padding:3.6rem 0 1.6rem;font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:2rem}
.foot-brand p{color:var(--txt-dim);margin-top:1rem;max-width:34ch}
.site-foot h5,.site-foot .fh{font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--honey);margin:0 0 1rem;font-weight:600}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.site-foot ul a{color:var(--txt-soft)}.site-foot ul a:hover{color:var(--honey)}
.frow{display:flex;gap:.6rem;align-items:flex-start;color:var(--txt-soft);margin-bottom:.8rem}
.frow svg{width:1.1em;height:1.1em;color:var(--honey);flex:none;margin-top:.25rem}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--line);color:var(--txt-dim);font-size:.85rem}
.foot-bottom a:hover{color:var(--honey)}

/* mobile call/text bar */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;gap:.5rem;padding:.6rem;background:rgba(16,14,13,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.mbar .btn{flex:1;padding:.85rem}

/* reveal (GSAP/IO hook) */
.reveal{opacity:0;transform:translateY(26px)}
.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  #hive{display:none}
  .hero{background:linear-gradient(160deg,var(--char-2),var(--char))}
  *{animation:none!important;scroll-behavior:auto!important}
}

/* responsive */
@media (max-width:1000px){
  .split,.cta-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:repeat(3,1fr)}
  .jgal figure{height:230px;flex-basis:calc(230px * var(--ar,1.2))}
}
@media (max-width:860px){
  .nav-links,.callbox .ct{display:none}
  .burger{display:block}
  .cols-3{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  .cols-3,.cols-2,.stats,.opt-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
  .jgal{gap:7px}
  .jgal figure{height:180px;flex-basis:calc(180px * var(--ar,1.2))}
  .ba{max-width:100%}
  .galstats{gap:.8rem 1.6rem}.gstat b{font-size:1.7rem}
  .mbar{display:flex}
  body{padding-bottom:66px}
  .ribbon .container{gap:1rem}
  .foot-bottom{flex-direction:column;align-items:flex-start}
}