/* Approved charcoal navigation. */
html{scroll-padding-top:165px}header.lux-nav{height:145px;position:sticky;top:0;z-index:1000;background:#17151b!important;color:#f8f7f4!important;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:83px 61px;padding:0 5%;gap:0;border:0;box-sizing:border-box}header.lux-nav .lux-brand{grid-column:1;grid-row:1;font:700 30px/1.1 Manrope,sans-serif;letter-spacing:-1.5px;color:white;text-decoration:none}header.lux-nav .lux-brand>span{display:none}header.lux-nav .lux-book{grid-column:2;grid-row:1;display:inline-flex;align-items:center;gap:27px;background:#7146a1;color:white;border:1px solid #9274b1;padding:14px 24px;border-radius:4px;white-space:nowrap;font-size:13px;font-weight:600}header.lux-nav .lux-book:hover{background:#593380}header.lux-nav .lux-book span{font-size:23px;line-height:1}header.lux-nav nav{grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:center;gap:65px;margin:0;border-top:1px solid #ffffff25;width:100%;padding:0;overflow:visible}header.lux-nav nav>a,header.lux-nav summary{color:white;font:500 14px/1.3 'DM Sans',Arial;letter-spacing:.2px;white-space:nowrap}header.lux-nav summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:20px 0}header.lux-nav summary::-webkit-details-marker{display:none}header.lux-nav summary:after{content:'⌄';color:#c3a7d9;font-size:13px}header.lux-nav details[open]>summary:after{content:'⌃'}header.lux-nav .lux-drop{position:static;margin:0;padding:0;border:0}header.lux-nav .lux-panel{position:absolute;top:100%;left:5%;right:5%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;background:#faf8fc;color:#30243d;border:1px solid #ded1ec;border-radius:0 0 8px 8px;padding:22px;box-shadow:0 18px 35px #20132924;max-height:calc(100dvh - 160px);overflow:auto}header.lux-nav .lux-drop:not([open])>.lux-panel{display:none!important}header.lux-nav .lux-panel a{display:block;padding:16px;border-radius:5px;color:#30243d;white-space:normal}header.lux-nav .lux-panel a:hover{background:#eee7f4}header.lux-nav .lux-panel b{font-size:14px;font-weight:600;line-height:1.4}header.lux-nav .lux-panel small{display:block;font-size:12px;line-height:1.5;color:#786386;margin-top:5px}header.lux-nav a:focus-visible,header.lux-nav summary:focus-visible{outline:2px solid #baa3d5;outline-offset:4px}.site-skip{position:fixed;top:-90px;left:15px;z-index:2000;background:#fff;color:#30243d;padding:12px 18px;border:2px solid #7146a1}.site-skip:focus{top:12px}@media(max-width:800px){header.lux-nav{height:auto;min-height:130px;grid-template-rows:75px 54px;padding:0 5%}header.lux-nav .lux-brand{font-size:24px}header.lux-nav .lux-book{font-size:12px;padding:12px 16px;gap:18px}header.lux-nav nav{justify-content:space-between;gap:12px}header.lux-nav nav>a,header.lux-nav summary{font-size:12px}header.lux-nav summary{padding:17px 0}header.lux-nav .lux-panel{grid-template-columns:1fr 1fr;left:3%;right:3%;padding:12px;max-height:calc(100dvh - 145px)}header.lux-nav .lux-panel a{padding:12px}header.lux-nav .lux-panel b{font-size:13px}header.lux-nav .lux-panel small{font-size:11px}}@media(max-width:380px){header.lux-nav .lux-brand{font-size:21px}header.lux-nav .lux-book{padding:11px 12px;gap:10px}header.lux-nav nav{gap:8px}header.lux-nav nav>a,header.lux-nav summary{font-size:11px}header.lux-nav .lux-panel{grid-template-columns:1fr}}
/* Short menus (Services, About) open as a compact list under their own button instead of a full-width panel. */
@media(min-width:801px){header.lux-nav nav>.lux-drop.lux-services,header.lux-nav nav>.lux-drop:last-of-type{position:relative}
header.lux-nav nav>.lux-drop.lux-services>.lux-panel,header.lux-nav nav>.lux-drop:last-of-type>.lux-panel{left:50%;right:auto;transform:translateX(-50%);width:320px;grid-template-columns:1fr;gap:2px;padding:10px;border-radius:0 0 8px 8px}
header.lux-nav nav>.lux-drop:last-of-type>.lux-panel{left:auto;right:-12px;transform:none}}
/* BYS monogram beside the name in the header and footer. */
.bys-logo text{font-family:Manrope,'Helvetica Neue',Arial,sans-serif}
header.lux-nav .lux-brand{display:inline-flex;align-items:center;gap:12px}
header.lux-nav .bys-logo{width:44px;height:44px;flex:none}
footer .brand{display:inline-flex;align-items:center;gap:10px}footer .brand .bys-logo{width:38px;height:38px;flex:none}
@media(max-width:800px){header.lux-nav .lux-brand{gap:9px}header.lux-nav .bys-logo{width:36px;height:36px}}
@media(max-width:380px){header.lux-nav .bys-logo{width:30px;height:30px}}
/* Header and footer share one plum, with soft white text. */
header.lux-nav{background:#3a3046!important}
footer{background:#3a3046!important}
header.lux-nav nav>a,header.lux-nav summary{color:#ece4f5!important}
header.lux-nav .lux-book{background:#8a63bd!important;border-color:#8a63bd!important}header.lux-nav .lux-book:hover{background:#9a76cb!important}
footer,footer p,footer a,footer span{color:#d8cce6}footer .brand{color:#fff}
/* End-of-page boxes ("Ready to shape your shoot?" and Shoot Tracker): one width, one color, even spacing. */
main>section.cta.unified-booking{box-sizing:border-box;width:auto!important;max-width:none!important;margin:0 7% 56px!important;background:#fff!important;border:1px solid #e6dcef;border-radius:8px}
body:has(.trk-banner) main>section.cta.unified-booking{margin-bottom:18px!important}
.trk-banner{padding:0 7% 56px!important}
.trk-in{max-width:none!important;background:#fff!important;border:1px solid #e6dcef}
/* White cards with dark text; both buttons in brand purple. */
main>section.cta.unified-booking h2,.trk-banner h2{color:#30243d!important}
main>section.cta.unified-booking .booking-kicker,.trk-k{color:#7146a1!important}
main>section.cta.unified-booking .booking-context,.trk-banner p,.trk-banner p span{color:#5f5070!important}
main>section.cta.unified-booking .booking-primary{background:#583480!important;border-color:#583480!important;color:#fff!important}main>section.cta.unified-booking .booking-primary span{color:#fff!important}
main>section.cta.unified-booking .booking-primary:hover{background:#4a2b6d!important}
.trk-btn{background:#efe8f7!important;color:#583480!important;border:1px solid #d9c9ee!important}.trk-btn:hover{background:#e4d9f2!important}
.trk-ic{background:#7146a1!important;color:#fff!important}.trk-mini{background:#f3edf9!important}.trk-mini small{color:#5b5463!important}.trk-mini b{color:#30243d!important}.trk-dots i{background:#e2d6f0!important}.trk-dots i.on{background:#7146a1!important}
@media(max-width:800px){main>section.cta.unified-booking{margin:0 16px 40px!important}body:has(.trk-banner) main>section.cta.unified-booking{margin-bottom:14px!important}.trk-banner{padding:0 16px 40px!important}}
/* Personal service heroes: the price line gets its own row under the description instead of drawing over it. */
@media(min-width:751px){.split-hero>div h1{grid-area:2/1/5}.split-hero>div p:not(.price-from){align-self:end}.split-hero>div p.price-from{grid-area:3/2;align-self:start;font-weight:700;line-height:1.5}.split-hero>div .pill{grid-area:4/2}}
/* "Your options" right before the booking box: an open section on the page, not a third box. */
main>section.info-band:has(+section.cta.unified-booking){box-sizing:border-box;width:auto!important;max-width:none!important;background:transparent!important;margin:0 7% 26px!important;padding:10px 0 26px!important;border-bottom:1px solid #e6dcef;border-radius:0}
@media(max-width:800px){main>section.info-band:has(+section.cta.unified-booking){margin:0 16px 20px!important}}
/* Product page photos are square: square frames show them whole, with no cropping and no empty space. */
.product-hero .product-cover{aspect-ratio:1/1;height:auto!important;min-height:0!important;align-self:center}.product-hero .product-cover img{width:100%!important;height:100%!important;object-fit:cover!important}
.product-hero .product-samples img{aspect-ratio:1/1;height:auto!important;object-fit:cover!important}
/* Welcome card for first-time visitors */
.bys-welcome{position:fixed;right:20px;bottom:20px;z-index:60;width:320px;background:#fff;border-radius:16px;box-shadow:0 18px 50px #1a10242e;padding:20px 20px 18px;color:#30243d;font-family:inherit;opacity:0;transform:translateY(16px);transition:opacity .25s,transform .25s}
.bys-welcome.on{opacity:1;transform:none}
.bys-welcome-x{position:absolute;right:10px;top:6px;border:0;background:none;font-size:24px;line-height:1;color:#9a8aa8;cursor:pointer;padding:6px}
.bys-welcome-k{font-size:11px;letter-spacing:1.6px;font-weight:700;color:#9274b1}
.bys-welcome h3{font-family:Manrope,sans-serif;font-size:20px;margin:6px 0;color:#30243d}
.bys-welcome p{font-size:14px;line-height:1.55;color:#5f5070;margin:0 0 14px}
.bys-welcome-btns{display:flex;gap:8px}.bys-welcome-btns a,.bys-welcome-btns button{flex:1;text-align:center;padding:11px 10px;border-radius:10px;font:700 14px inherit;font-family:inherit;border:1.5px solid #583480;color:#583480;background:#fff;cursor:pointer;text-decoration:none}
.bys-welcome-btns a.p{background:#583480;color:#fff}
@media(max-width:640px){.bys-welcome{left:12px;right:12px;bottom:12px;width:auto}}
/* Footer: the towns with their own pages */
.footer-areas{grid-column:1/-1;border-top:1px solid #ffffff1f;padding-top:22px;margin-top:6px}
.footer-areas>div{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px}
.footer-areas a{font-size:13px;color:#ded5e5!important;text-decoration:none}.footer-areas a:hover{color:#fff!important;text-decoration:underline}
.footer-social{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:16px}
.footer-social .eyebrow{margin-right:4px}
.footer-social a{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#ded5e5!important;text-decoration:none}.footer-social a:hover{color:#fff!important}

/* Footer layout A: four short columns, towns on one line, same plum as the header */
footer.ft-a{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:26px 28px;margin:0;padding:36px 7% 18px;background:#3a3046!important}
footer.ft-a .brand{font-size:24px;letter-spacing:-1px}
footer.ft-a .brand .bys-logo{width:30px;height:30px}
footer.ft-a p{font-size:12.5px;line-height:1.6;margin:10px 0 0;max-width:340px}
footer.ft-a .eyebrow{margin:4px 0 12px}
footer.ft-a .ft-col>a{display:block;font-size:13px;margin-bottom:8px}
footer.ft-a .ft-icons{display:flex;gap:8px;margin-bottom:14px}
footer.ft-a .ft-icons a{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0;border:1px solid #ffffff33;border-radius:50%;color:#e9e1f1}
footer.ft-a .ft-icons a:hover{background:#ffffff14;color:#fff}
footer.ft-a .footer-areas{display:flex;align-items:baseline;gap:8px 16px;margin:0;padding-top:16px}
footer.ft-a .footer-areas .eyebrow{margin:0;white-space:nowrap}
footer.ft-a .footer-areas>div{margin:0;gap:6px 16px}
footer.ft-a .footer-areas a,footer.ft-a .brand{margin:0}
footer.ft-a .footer-bottom{margin:0;padding-top:14px;border-color:#ffffff1f}
@media(max-width:800px){footer.ft-a{grid-template-columns:1fr 1fr}footer.ft-a>div:first-child{grid-column:1/-1}footer.ft-a .footer-areas{display:block}footer.ft-a .footer-areas>div{margin-top:10px}}


/* Phones: comfortable typing, readable small print, footer clear of the back-to-top button. */
@media(max-width:800px){
input:not([type=radio]):not([type=checkbox]):not([type=range]),select,textarea{font-size:16px!important}
.capture-card p,.capture-image-note,.preview-banner span,td small,.mode-note,.quote-foot,.side-note,.side-note a,.price-list p,.price-list p a,.mini-price p,.gift-personal small,label small{font-size:13px!important;line-height:1.5!important}
.capture-card .card-link,.package .pill,.range-ends span,.section-title .edit,.hh-chips a{font-size:12px!important}
footer.ft-a a[href^="mailto"]{font-size:12px}
footer.ft-a{padding-bottom:84px}
footer.ft-a .footer-bottom{display:block;line-height:1.6}
footer.ft-a .footer-bottom>span:last-child{display:block;margin-top:6px}
/* Header option B: scrolling down slides the header away; scrolling up brings it straight back. */
header.lux-nav{transition:transform .25s ease}
header.lux-nav.is-hidden{transform:translateY(-100%)}
}

/* Social icons are off for now (hidden attribute on .ft-follow); the footer drops to three columns until they return. */
footer.ft-a .ft-follow[hidden]{display:none}
footer.ft-a:has(.ft-follow[hidden]){grid-template-columns:1.5fr 1fr 1fr}
@media(max-width:800px){footer.ft-a:has(.ft-follow[hidden]){grid-template-columns:1fr 1fr}}
/* Log in menu (client, photographer, join) and the Photographers link */
.lux-login{position:relative}
.lux-login>summary{list-style:none;cursor:pointer}
.lux-login>summary::-webkit-details-marker{display:none}
.lux-login>summary::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px}
.lux-login[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.lux-login-panel{position:absolute;right:0;top:calc(100% + 12px);width:270px;background:#fff;border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.28);padding:8px;z-index:1100;display:grid;gap:2px}
.lux-login-panel a{display:block;padding:10px 12px;border-radius:8px;color:#30243d;text-decoration:none}
.lux-login-panel a:hover{background:#f4eef9}
.lux-login-panel b{display:block;font-size:14px;font-weight:700;color:#30243d}
.lux-login-panel small{display:block;font-size:12px;color:#7a6f86;margin-top:2px}
.lux-login-panel .lux-login-join{background:#f4eef9;margin-top:4px}
.lux-login-panel .lux-login-join b{color:#583480}
.lux-login-panel .lux-login-join b::before{content:'📷  '}
header.lux-nav nav>a.lux-join{color:#d9cfe6!important;display:inline-flex;align-items:center;gap:6px}
header.lux-nav nav>a.lux-join:hover{color:#fff!important}
.lux-tag{background:#b9a2d6;color:#2b2233;font-size:9.5px;font-weight:700;letter-spacing:.5px;border-radius:4px;padding:1px 5px}
@media(max-width:800px){.lux-tag{display:none}}
@media(max-width:560px){header.lux-nav nav>a.lux-join{display:none}.lux-login-panel{right:-60px;width:260px}}
/* Phones: footer links get a 44px tap area without changing how they look */
@media(max-width:760px){footer.ft-a .ft-col>a{min-height:44px;display:flex;align-items:center;margin-bottom:0}footer.ft-a .footer-areas>div{gap:0 18px}footer.ft-a .footer-areas a{min-height:44px;display:inline-flex;align-items:center}body>footer .footer-bottom a{display:inline-block;padding:12px 0}}
