:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Layout: a calm, left-aligned corporate page; the hero carries a group-structure chart that shows Blueflame as the legal entity above its four businesses. */
:root{
  --paper:#F5F7FA; --surface:#FFFFFF; --ink:#0E1B2E; --muted:#56637A; --line:#DCE2EB;
  --blue:#2549A4; --blue-soft:#E6EEFB; --flame:#1A9FD6;
  --moh:#D10E7C; --duka:#2E8B47; --rema:#1C75BC; --vet:#262262;
  --plate:#FFFFFF; --navy:#14275E; --navy-2:#1B3374; --on-navy:#F1F5FC; --on-navy-muted:#B9C7E8; --sky:#44C3F2; --plate-ink:#0E1B2E; --plate-muted:#56637A; --logo-light:block; --logo-dark:none;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0A1220; --surface:#101B2D; --ink:#E7ECF4; --muted:#97A3B8; --line:#1F2C41;
  --blue:#8FA9F2; --blue-soft:#15244A; --flame:#5FCCF5;
  --moh:#F06AB3; --duka:#6FCB95; --rema:#6FB3EA; --vet:#A9A6F0; --logo-light:none; --logo-dark:block; --navy:#0E1A36; --navy-2:#15244A; --on-navy:#E9EFFA; --on-navy-muted:#9FB0D6; --sky:#5FCCF5; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0A1220; --surface:#101B2D; --ink:#E7ECF4; --muted:#97A3B8; --line:#1F2C41;
  --blue:#8FA9F2; --blue-soft:#15244A; --flame:#5FCCF5;
  --moh:#F06AB3; --duka:#6FCB95; --rema:#6FB3EA; --vet:#A9A6F0; --logo-light:none; --logo-dark:block; --navy:#0E1A36; --navy-2:#15244A; --on-navy:#E9EFFA; --on-navy-muted:#9FB0D6; --sky:#5FCCF5; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body)}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.01em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem);line-height:1.05}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.12}
h3{font-size:1.25rem;line-height:1.25}
p{margin:0}
.eyebrow{font:500 .75rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lede{font-size:1.2rem;color:var(--muted);max-width:58ch}
.btn{display:inline-flex;align-items:center;gap:.5rem;font:600 1rem/1 var(--body);padding:.85rem 1.25rem;border-radius:999px;text-decoration:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.btn.primary{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.btn:hover{border-color:var(--blue)}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.9rem}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:700 1.15rem/1 var(--display)}
.logo img{height:38px;width:auto}
.lg-l{display:var(--logo-light)}.lg-d{display:var(--logo-dark)}
nav{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--muted);font-weight:600;font-size:.95rem}
nav a:hover{color:var(--ink)}
.nav-call{font:500 .9rem/1 var(--mono);color:var(--ink)!important}
.menu-btn{display:none;font:600 .9rem/1 var(--body);border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:.55rem .9rem;cursor:pointer}
@media (max-width:760px){
  .menu-btn{display:inline-flex}
  .bar{flex-wrap:wrap}
  nav[aria-label="Main"]{order:3;width:100%;display:none;flex-direction:column;align-items:stretch;gap:0;padding-block:.4rem .6rem}
  header.open nav[aria-label="Main"]{display:flex}
  nav[aria-label="Main"] a{padding:.8rem 0;border-top:1px solid var(--line);font-size:1.05rem}
  .logo img{height:32px}
}

/* hero */
.hero{padding-block:clamp(3rem,7vw,5.5rem) clamp(2.5rem,5vw,4rem)}
.hero-grid{display:flex;flex-direction:column;gap:clamp(2.2rem,5vw,3.5rem)}
.hero-copy{display:flex;flex-direction:column;gap:1.4rem;min-width:0;max-width:760px}
.hero-copy h1 em{font-style:normal;color:var(--blue)}
.actions{display:flex;gap:.75rem;flex-wrap:wrap}

/* family showcase: four brand tiles that slide from logos to pictures and back */
.family{display:flex;flex-direction:column;gap:1rem;min-width:0}
.family-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.family-head .eyebrow{display:flex;align-items:center;gap:.5rem}
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:3px;gap:2px}
.toggle button{font:600 .85rem/1 var(--body);border:0;background:none;color:var(--muted);padding:.5rem .85rem;border-radius:999px;cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--blue-soft);color:var(--ink)}
.viewport{overflow:hidden;border-radius:18px}
.slide-track{display:flex;width:200%;transition:transform .9s cubic-bezier(.7,0,.2,1)}
.family.photos .slide-track{transform:translateX(-50%)}
.panel{width:50%;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.4vw,16px)}
.tile{aspect-ratio:4/5;max-width:100%;border-radius:16px;border:1px solid var(--line);background:var(--surface);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;text-decoration:none;color:var(--ink);min-width:0}
.tile .endorse{position:absolute;left:0;right:0;bottom:.9rem;display:flex;align-items:center;justify-content:center;gap:.35rem;font:500 .68rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tile .endorse img{width:10px;height:auto}
.family-head .eyebrow img{width:11px;height:auto}
.plate small{color:var(--plate-muted)}.plate .endorse{color:var(--plate-muted)}.plate .wm-rema .dot2{color:var(--plate-ink)}
.brand-img{width:82%;max-width:100%;height:auto;display:block}
.tile:hover{border-color:var(--c)}
.wm{font-family:var(--display);font-weight:700;text-align:center;line-height:1;letter-spacing:-.01em}
.wm-moh{color:var(--moh);font-size:clamp(1.15rem,2.4vw,1.9rem)}
.wm-moh small{display:block;font:500 .32em/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.6rem}
.wm-duka{color:var(--duka);font-size:clamp(1.15rem,2.4vw,1.9rem);text-transform:lowercase}
.wm-duka small{display:block;font:400 .36em/1.2 var(--body);color:var(--muted);margin-top:.5rem;text-transform:none}
.wm-rema{font-size:clamp(1.6rem,3.6vw,2.8rem);letter-spacing:.02em}
.wm-rema .r{color:var(--rema)}.wm-rema .e{color:var(--blue)}.wm-rema .m{color:var(--duka)}.wm-rema .a{color:#D49A12}.wm-rema .dot2{color:var(--ink)}
.wm-vet{color:var(--vet);font-size:clamp(1rem,2.2vw,1.65rem);letter-spacing:.14em}
.wm-vet small{display:block;font:500 .38em/1.2 var(--mono);letter-spacing:.14em;color:var(--muted);margin-top:.6rem}
.photo{padding:0;background:none;border:0;aspect-ratio:auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:.65rem;overflow:visible}
.photo img{width:100%;max-width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;display:block;border-radius:16px;border:1px solid var(--line)}
.photo:hover img{border-color:var(--c)}
.slide-track{align-items:stretch}.panel{align-items:stretch}.tile.plate{padding:0;background:none;border:0;aspect-ratio:auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:.65rem;overflow:visible}
.plate-box{aspect-ratio:4/5;max-width:100%;width:100%;background:var(--plate);border:1px solid var(--line);border-radius:16px;display:flex;align-items:center;justify-content:center;padding:1rem}
.plate:hover .plate-box{border-color:var(--c)}
.tile .cap{position:static;font:700 1rem/1.25 var(--display);color:var(--ink);padding:0 .15rem}
.tile .cap span{display:block;font:400 .72rem/1.3 var(--body);color:var(--muted);margin-top:.15rem}
.family-note{font:400 .8rem/1.4 var(--mono);color:var(--muted)}
@media (max-width:720px){.panel{grid-template-columns:1fr 1fr}.photo img,.plate-box{aspect-ratio:1/1}}

/* sections */
section{padding-block:clamp(3rem,6vw,5rem)}
.section-head{display:flex;flex-direction:column;gap:.8rem;margin-bottom:2.2rem;max-width:62ch}
.rule{border-top:1px solid var(--line)}

/* businesses */
.biz-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 1fr 1fr;gap:1rem 2rem}
.group{display:contents}
.group:first-child > *{grid-column:1}.group:last-child > *{grid-column:2}
.group > .group-label{grid-row:1}.group > .biz:nth-child(2){grid-row:2}.group > .biz:nth-child(3){grid-row:3}
.group-label{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:.6rem}
.group-label span:last-child{color:var(--muted);font-size:.9rem}
.biz{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;gap:.9rem}
.biz-top{display:flex;align-items:center;justify-content:space-between;gap:.4rem 1rem;flex-wrap:wrap}
.biz-name{display:flex;align-items:center;gap:.6rem}
.dot{width:12px;height:12px;border-radius:50%;background:var(--c)}
.biz .domain{font:400 .8rem/1 var(--mono);color:var(--muted)}
.biz p{color:var(--muted)}
.biz ul{margin:0;padding-left:1.1rem;color:var(--ink);font-size:.95rem;display:grid;gap:.2rem}
.biz a.go{margin-top:auto;font-weight:600;color:var(--c);text-decoration:none}
.biz a.go:hover{text-decoration:underline}
@media (max-width:860px){.biz-groups{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr 1fr auto 1fr 1fr}.group > *{grid-column:1!important}.group:last-child > .group-label{grid-row:4}.group:last-child > .biz:nth-child(2){grid-row:5}.group:last-child > .biz:nth-child(3){grid-row:6}.group:last-child .group-label{margin-top:1.4rem}}

/* credentials */
.cred-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.cred{padding:1.6rem 1.4rem 1.6rem 0;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:.6rem;min-width:0}
.cred + .cred{padding-left:1.4rem}
.cred:last-child{border-right:0}
.cred p{color:var(--muted);font-size:.98rem}
@media (max-width:900px){.cred-grid{grid-template-columns:1fr 1fr}.cred:nth-child(2){border-right:0}.cred:nth-child(3){padding-left:0}.cred:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:520px){.cred-grid{grid-template-columns:1fr}.cred{border-right:0!important;padding-left:0!important;border-top:1px solid var(--line)}.cred:first-child{border-top:0}}

/* track record */
.track{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.big{font:700 clamp(4rem,9vw,6.5rem)/0.9 var(--display);color:var(--blue);letter-spacing:-.03em}
.big small{font-size:.35em;color:var(--ink);letter-spacing:0;display:block;margin-top:.6rem;font-weight:500}
.clients{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.clients span{font:500 .85rem/1 var(--mono);border:1px solid var(--line);border-radius:999px;padding:.55rem .85rem;background:var(--surface)}
.quote{border-left:3px solid var(--flame);padding-left:1.2rem;display:flex;flex-direction:column;gap:.8rem}
.quote blockquote{margin:0;font:500 1.3rem/1.45 var(--display)}
.quote cite{font-style:normal;color:var(--muted);font-size:.95rem}
@media (max-width:860px){.track{grid-template-columns:1fr}}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
.about-copy{display:flex;flex-direction:column;gap:1rem;color:var(--muted);min-width:0}
.about-copy strong{color:var(--ink)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:.7rem 1.4rem;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.5rem;align-items:baseline}
.facts dt{font:500 .75rem/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0}
@media (max-width:860px){.about{grid-template-columns:1fr}}
@media (max-width:440px){.facts{grid-template-columns:1fr;gap:.2rem}.facts dd{margin-bottom:.7rem}}

/* careers */
.careers{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;background:var(--blue-soft);border-radius:18px;padding:clamp(1.5rem,4vw,2.5rem)}
.careers > div{display:flex;flex-direction:column;gap:.6rem;max-width:56ch}
.careers p{color:var(--muted)}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem)}
.contact-info{display:flex;flex-direction:column;gap:1.4rem;min-width:0}
.line{font:500 clamp(1.6rem,3.6vw,2.2rem)/1 var(--mono);letter-spacing:-.01em;user-select:all}
.copy{font:600 .85rem/1 var(--body);border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:.45rem .8rem;cursor:pointer;margin-left:.6rem;vertical-align:middle}
.contact-info address{font-style:normal;color:var(--muted)}
.socials{display:flex;gap:.6rem;flex-wrap:wrap}
.socials a{font-weight:600;font-size:.92rem;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.5rem .85rem;background:var(--surface)}
.socials a:hover{border-color:var(--blue)}
form{display:grid;gap:1rem;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.6rem;min-width:0}
label{display:grid;gap:.35rem;font-weight:600;font-size:.92rem}
input,select,textarea{font:400 1rem/1.4 var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;width:100%}
textarea{min-height:110px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.note{font-size:.9rem;color:var(--muted)}
.sent{font-weight:600;color:var(--duka)}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
@media (max-width:480px){.row{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding-block:2rem;color:var(--muted);font-size:.9rem}
.foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot nav a{font-size:.9rem}
@media (max-width:760px){.foot nav a{display:inline}}

@media (prefers-reduced-motion:no-preference){
  .flame-core{animation:flicker 3.2s ease-in-out infinite;transform-origin:50% 100%}
  @keyframes flicker{50%{transform:scaleY(.94)}}
}

/* legal and simple pages */
.legal{max-width:760px;display:flex;flex-direction:column;gap:1rem}
.legal h2{font-size:1.3rem;margin-top:1rem}
.legal p{color:var(--muted)}
.legal strong{color:var(--ink)}

.panel{align-content:start}
.big small{line-height:1.25}

/* header logo: larger and crisper */
.logo img{height:54px}
@media (max-width:760px){.logo img{height:42px}}
/* balance brand logos by visible size, not width */
.plate-box .brand-img[alt="Maids of Honor"]{width:80%}
.plate-box .brand-img[alt="dukawalla.com"]{width:96%}
.plate-box .brand-img[alt="ReMA"]{width:92%}
.plate-box .brand-img[alt="Vetraca vehicle tracking"]{width:88%}
.plate-box{padding:.75rem}

/* business card reached from a slider tile */
html{scroll-padding-top:96px}
.biz:target{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}

/* sticky contact bar: four equal columns, identical icon chips, pinned to the bottom at every width */
.contact-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:20;background:color-mix(in srgb,var(--surface) 95%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
.contact-bar .cb-inner{display:grid;width:100%;grid-template-columns:repeat(4,minmax(0,1fr));max-width:640px;margin:0 auto}
.contact-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px 0;min-width:0;
  text-decoration:none;color:var(--ink);font:600 .75rem/1 var(--body);border-radius:12px}
.contact-bar .cb-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--blue-soft);color:var(--blue)}
.contact-bar .cb-ico svg{width:20px;height:20px;display:block}
.contact-bar a.wa .cb-ico{background:color-mix(in srgb,#25A244 16%,var(--surface));color:#1F8F3B}
.contact-bar a:hover .cb-ico,.contact-bar a:focus-visible .cb-ico{outline:2px solid currentColor;outline-offset:1px}
body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
@media print{.contact-bar{display:none}}


/* deep-blue bands: credentials section and footer */
.band{background:var(--navy);color:var(--on-navy);border-top:0}
.band .eyebrow{color:var(--sky)}
.band h2,.band h3{color:var(--on-navy)}
.band .cred-grid{border-top:1px solid color-mix(in srgb,var(--on-navy) 18%,transparent)}
.band .cred{border-color:color-mix(in srgb,var(--on-navy) 18%,transparent)!important}
.band .cred p{color:var(--on-navy-muted)}
.band .cred h3::before{content:"";display:block;width:28px;height:3px;border-radius:2px;background:var(--sky);margin-bottom:.9rem}
.band + section{border-top:0}

footer.site-foot{background:var(--navy);color:var(--on-navy-muted);border-top:0;padding-block:3rem 1.6rem;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.foot-grid > div{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.foot-brand img{height:44px;width:auto;align-self:flex-start}
.foot-brand p{max-width:30ch}
.site-foot h2{font:500 .72rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sky);margin:0 0 .3rem}
.site-foot a{color:var(--on-navy);text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem;margin-top:2.4rem;padding-top:1.2rem;
  border-top:1px solid color-mix(in srgb,var(--on-navy) 16%,transparent);font-size:.84rem}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1 / -1}}
@media (max-width:420px){.foot-grid{grid-template-columns:1fr}}
.form-consent{font-size:.85rem;color:var(--muted)}
.form-consent a{color:var(--blue)}

/* menu: brand sub-links only in the phone menu; current section underlined on desktop */
.nav-sub{display:none}
nav[aria-label="Main"] a.is-current{color:var(--ink);box-shadow:inset 0 -2px 0 var(--blue)}
@media (max-width:760px){
  header.open .nav-sub{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;padding:0 0 .5rem 1rem}
  header.open .nav-sub a{display:block;border-top:0;padding:.55rem 0;font-size:.95rem;color:var(--muted)}
  nav[aria-label="Main"] a.is-current{box-shadow:none;color:var(--blue)}
}

/* cookie notice: sits just above the contact bar */
.cookie-note{position:fixed;z-index:30;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));
  bottom:calc(84px + env(safe-area-inset-bottom,0px));max-width:560px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem;
  padding:1rem 1.1rem;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgba(14,27,46,.16);font-size:.92rem}
.cookie-note p{flex:1 1 260px}
.cookie-note a{color:var(--blue)}
.cookie-actions{display:flex;gap:.5rem}
.cookie-actions .btn{padding:.6rem 1rem;font-size:.92rem}
/* Zoho SalesIQ chat bubble: lift it above the contact bar */
#zsiq_float,.zsiq_floatmain,.zsiq-float,.siq_bR,.zsiq_flt_rel{bottom:calc(88px + env(safe-area-inset-bottom,0px))!important}