/* Brand Builder site menu: shared by every page. Self-contained colours so it works on any page's styles. */
.L{text-transform:none!important}
.bbnav{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--lbb-h,0px));z-index:40;background:#0c1222;color:#F3EADF;font-family:"Archivo","Helvetica Neue",Arial,sans-serif}
.bbnav .in{max-width:1200px;margin:0 auto;padding-inline:24px;display:flex;align-items:center;justify-content:space-between;gap:20px;height:58px}
.bbnav .mark{font:800 19px/1 "Archivo",sans-serif;letter-spacing:-.04em;color:#F3EADF;text-decoration:none;white-space:nowrap}
.bbnav .mark:hover{color:#E2A43B}
.bbnav .menu{display:flex;align-items:center;gap:6px}
.bbnav .menu a{color:#F3EADF;text-decoration:none;font:600 12.5px/1 "Archivo",sans-serif;font-stretch:75%;letter-spacing:.16em;text-transform:uppercase;padding:10px 11px;border-radius:6px;position:relative;white-space:nowrap;transition:color .25s,background .25s}
.bbnav .menu a::after{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:2px;background:#E2A43B;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.bbnav .menu a:hover::after,.bbnav .menu a[aria-current="page"]::after{transform:scaleX(1)}
.bbnav .menu a[aria-current="page"]{color:#E2A43B}
.bbnav .menu a.navcta{background:#E2A43B;color:#2A1D19;margin-left:8px;padding:11px 16px}
.bbnav .menu a.navcta::after{display:none}
.bbnav .menu a.navcta:hover{background:#F3EADF}
.bbnav .burger{display:none;align-items:center;gap:10px;background:none;border:1.5px solid #f3eadf55;color:#F3EADF;border-radius:8px;padding:8px 12px;font:700 13px "Archivo",sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.bbnav .burger i{display:grid;gap:4px}
.bbnav .burger i b{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s,opacity .3s}
.bbnav .burger[aria-expanded="true"] i b:nth-child(1){transform:translateY(6px) rotate(45deg)}
.bbnav .burger[aria-expanded="true"] i b:nth-child(2){opacity:0}
.bbnav .burger[aria-expanded="true"] i b:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.bbnav :focus-visible{outline:3px solid #E2A43B;outline-offset:2px}
.mnav{position:fixed;inset:calc(58px + var(--lbb-h,0px)) 0 0 0;z-index:39;background:#9F1B5C;color:#F3EADF;padding:28px 24px calc(28px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px;overflow:auto;font-family:"Archivo",sans-serif;opacity:0;transform:translateY(-12px);transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.mnav.open{opacity:1;transform:none;pointer-events:auto}
.mnav a.big{display:flex;align-items:baseline;gap:14px;color:#F3EADF;text-decoration:none;font:800 clamp(36px,10vw,56px)/1.05 "Archivo",sans-serif;letter-spacing:-.045em;text-transform:lowercase;padding:6px 0;border-bottom:1px solid #f3eadf33}
.mnav a.big span{font:700 13px "Archivo",sans-serif;letter-spacing:.14em;opacity:.7}
.mnav a.big[aria-current="page"]{color:#E2A43B}
.mnav .start{margin-top:18px;align-self:flex-start;background:#E2A43B;color:#2A1D19;text-decoration:none;font:800 17px "Archivo",sans-serif;padding:15px 22px;border-radius:8px}
.mnav .contact{margin-top:auto;padding-top:24px;display:grid;gap:6px;font-size:15px}
.mnav .contact a{color:#F3EADF}
.subnav{position:sticky;top:calc(58px + env(safe-area-inset-top,0px) + var(--lbb-h,0px));z-index:38;background:#F3EADF;border-bottom:1px solid #E0D2C3}
.subnav .in{max-width:1200px;margin:0 auto;padding-inline:24px;display:flex;gap:4px;overflow-x:auto;height:46px;align-items:center;scrollbar-width:none}
.subnav a{color:#2A1D19;text-decoration:none;font:600 12px "Archivo",sans-serif;font-stretch:75%;letter-spacing:.16em;text-transform:uppercase;padding:8px 10px;border-radius:99px;white-space:nowrap}
.subnav a:hover,.subnav a.on{background:#2A1D19;color:#F3EADF}
.subnav .back{font-weight:800;color:#B8321C;margin-right:8px}
.subnav .back:hover{background:#B8321C;color:#fff}
/* desktop always shows the full menu; it tightens on smaller laptop windows, and only phones and small tablets get the Menu button */
@media (max-width:1279px){.bbnav .in{gap:12px}.bbnav .mark{font-size:17px}.bbnav .menu{gap:2px}.bbnav .menu a{font-size:11.5px;letter-spacing:.1em;padding:9px 8px}.bbnav .menu a::after{left:8px;right:8px}.bbnav .menu a.navcta{padding:10px 12px;margin-left:6px}}
@media (max-width:1099px){.bbnav .menu a[href="brand-builder-page.html"]{display:none}.bbnav .mark{font-size:16px}}
@media (max-width:900px){.bbnav .menu{display:none}.bbnav .burger{display:inline-flex}}
@media (max-width:420px){.bbnav .mark{font-size:16px}.bbnav .in{padding-inline:16px}}
@media (prefers-reduced-motion:reduce){.mnav,.bbnav .menu a::after{transition:none}}
/* Talk to me panel: opens from the menu on every page */
.talkdlg{border:0;padding:0;margin:0 0 0 auto;height:100%;max-height:100%;width:min(460px,100vw);background:#24304A;color:#F3EADF;font-family:"Archivo",sans-serif;box-shadow:-30px 0 60px -20px #000}
.talkdlg::backdrop{background:#0c1222aa}
.talkdlg[open]{animation:slidein .45s cubic-bezier(.2,.7,.2,1)}
@keyframes slidein{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.talkdlg .ti{display:grid;gap:16px;padding:22px 24px 28px}
.talkdlg .ph{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 25%;border-radius:12px;display:block}
.talkdlg h2{margin:0;font:800 clamp(30px,6vw,40px)/.95 "Archivo",sans-serif;letter-spacing:-.045em;text-transform:lowercase}
.talkdlg p{margin:0;opacity:.9;font-size:15.5px;line-height:1.5}
.talkdlg ol{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:10px}
.talkdlg ol li{counter-increment:s;display:grid;grid-template-columns:30px minmax(0,1fr);font-size:14.5px;line-height:1.45}
.talkdlg ol li::before{content:counter(s);font:800 20px/1 "Archivo",sans-serif;color:#E2A43B}
.talkdlg .mail{display:flex;gap:8px;align-items:center;background:#ffffff12;border:1px solid #ffffff26;border-radius:10px;padding:10px 12px}
.talkdlg .mail b{flex:1;font-size:16px;word-break:break-all}
.talkdlg .copy{background:#E2A43B;color:#2A1D19;border:0;border-radius:8px;padding:8px 12px;font:800 13px "Archivo",sans-serif;cursor:pointer}
.talkdlg .soc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.talkdlg .soc a{color:#F3EADF;text-decoration:none;border:1px solid #ffffff33;border-radius:10px;padding:10px;font:700 13.5px "Archivo",sans-serif;text-align:center}
.talkdlg .soc a:hover{background:#ffffff14}
.talkdlg .x{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:99px;border:0;background:#0c1222aa;color:#F3EADF;font:700 20px/1 "Archivo",sans-serif;cursor:pointer;z-index:2}
.talkdlg .fine{font-size:12.5px;opacity:.7}
/* page transitions between Brand Builder pages */
@view-transition{navigation:auto}
::view-transition-old(root){animation:bbOut .28s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:bbIn .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes bbOut{to{opacity:0;transform:translateY(-10px)}}
@keyframes bbIn{from{opacity:0;transform:translateY(16px)}}
.bbnav{view-transition-name:bbnav}
::view-transition-old(bbnav),::view-transition-new(bbnav){animation:none}
html.bb-leaving body{opacity:0;transition:opacity .25s}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
/* form messages */
.fieldmsg{color:#8E1F10;font-size:14px;font-weight:700;line-height:1.4}
.fieldmsg:not(:empty){display:block;background:#F3EADF;border-left:4px solid #B8321C;border-radius:8px;padding:8px 12px;margin-top:8px}
.fieldmsg .fixbtn{color:#8E1F10;font-weight:800}
.fixbtn{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
[aria-invalid="true"]{border-color:#F3EADF!important;box-shadow:0 0 0 3px #B8321C,0 0 0 6px #F3EADF!important}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}