/* The Brand Clan - base stylesheet (shared by every page) */


:root{
  --cream:#F5F3EF;
  --white:#FCFCFB;
  --navy:#0E171E;
  --navy-soft:#15222C;
  --ink:#1C2830;
  --slate:#54626D;
  --gold:#C5A880;
  --gold-deep:#A98C5F;
  --gold-wash:#F0E9DD;
  --line:#E5E0D6;
  --ok:#3E7C4F;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Figtree',sans-serif;
  background:var(--cream);
  color:var(--slate);
  line-height:1.65;font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:'DM Serif Display',Georgia,serif;font-weight:400;color:var(--navy);}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}

/* reveal */
@media (prefers-reduced-motion: no-preference){
  html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease;}
  html.js .reveal.in{opacity:1;transform:none;}
}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

/* ===== Utility bar ===== */
.utility{background:var(--navy);color:#AAB7C1;font-size:12px;letter-spacing:.06em;}
.utility-inner{max-width:1240px;margin:0 auto;padding:8px 24px;display:flex;justify-content:space-between;align-items:center;gap:14px;}
.utility b{color:var(--gold);font-weight:600;}
.utility .sep{margin:0 10px;color:#3D4B56;}
/* The hit box is grown into the bar's own padding with a matching negative
   margin, so the finger target clears the WCAG 2.5.8 minimum of 24px without
   the bar getting any taller. Same trick on the breadcrumb. */
.utility a{color:var(--gold);font-weight:600;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:24px;padding-block:4px;margin-block:-4px;}
.utility a:hover{color:#fff;}

/* ===== Navbar ===== */
.navbar{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--line);}
/* auto | 1fr | auto, NOT 1fr auto 1fr. With equal outer tracks the links are
   centred in the BAR, and since the brand is far wider than the cart it ate
   into the middle column: the gap measured 20px on the left against 219px on
   the right. Letting the middle track take whatever is left, and centring
   inside it, centres the links between the logo and the cart instead. */
.nav-inner{max-width:1240px;margin:0 auto;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding:9px 24px;gap:20px;}
.nav-inner>.brand{justify-self:start;}
.nav-inner>.nav-links{justify-self:center;}
.nav-inner>.nav-right{justify-self:end;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-bull{height:62px;width:auto;}
.brand-name{font-family:'DM Serif Display',serif;font-size:23px;color:var(--navy);line-height:1.05;}
.brand-tag{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;}

.nav-links{display:flex;list-style:none;gap:34px;align-items:center;}
.nav-links>li{position:relative;}
.nav-links>li>a{font-size:14.5px;font-weight:600;color:var(--ink);padding:26px 0;display:inline-flex;align-items:center;gap:7px;position:relative;}
.nav-links>li>a::after{content:"";position:absolute;left:0;bottom:22px;width:0;height:2px;background:var(--gold);transition:width .3s;}
.nav-links>li>a:hover::after{width:100%;}
.chev{font-size:9px;transition:transform .25s ease;color:var(--gold-deep);}
.has-drop:hover .chev{transform:rotate(180deg);}

.dropdown{
  position:absolute;top:100%;left:-18px;min-width:264px;list-style:none;
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 44px rgba(14,23,30,.14);padding:10px;
  opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s;
}
.has-drop:hover .dropdown,.has-drop:focus-within .dropdown{opacity:1;visibility:visible;}
.dropdown li a{
  display:block;padding:10px 14px;border-radius:8px;font-size:14px;font-weight:600;
  color:var(--ink);transition:background .18s,color .18s;
}
.dropdown li a:hover{background:var(--gold-wash);color:var(--gold-deep);}
.dropdown .drop-all{color:var(--gold-deep);}
.dropdown .drop-div{height:1px;background:var(--line);margin:8px 6px;}

.nav-right{display:flex;align-items:center;gap:10px;}
.cart-btn{
  position:relative;width:46px;height:46px;border-radius:10px;
  border:1px solid var(--line);background:var(--white);
  display:flex;align-items:center;justify-content:center;
  color:var(--navy);font-size:17px;transition:all .22s ease;
}
.cart-btn:hover{border-color:var(--gold);color:var(--gold-deep);transform:translateY(-2px);}
.cart-count{
  position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;
  border-radius:100px;background:var(--gold);color:var(--navy);
  font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
}

.menu-toggle{
  display:none;width:46px;height:46px;border-radius:10px;border:1px solid var(--line);
  background:var(--white);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--navy);border-radius:2px;transition:transform .25s ease,opacity .2s ease;}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
  display:none;flex-direction:column;background:var(--white);
  border-top:1px solid var(--line);padding:10px 20px 22px;
}
.mobile-menu.open{display:flex;max-height:calc(100vh - 88px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.mobile-menu>a,.mob-drop{
  font-family:'Figtree',sans-serif;font-size:16px;font-weight:600;color:var(--ink);
  padding:15px 4px;border-bottom:1px solid var(--line);text-align:left;
  background:none;border-left:0;border-right:0;border-top:0;width:100%;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
}
.mob-drop i{font-size:11px;color:var(--gold-deep);transition:transform .25s ease;}
.mob-drop.open i{transform:rotate(180deg);}
.mob-panel{display:none;flex-direction:column;padding:4px 0 6px 14px;}
.mob-panel.open{display:flex;}
.mob-sub{font-size:14.5px;font-weight:600;color:var(--slate);padding:11px 4px;}
.mob-sub:hover{color:var(--gold-deep);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:14.5px;padding:14px 26px;border-radius:8px;
  border:1.5px solid transparent;cursor:pointer;transition:all .22s ease;letter-spacing:.01em;
}
.btn-gold{background:var(--gold);color:var(--navy);}
.btn-gold:hover{background:var(--gold-deep);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(169,140,95,.35);}
.btn-outline-light{border-color:rgba(255,255,255,.55);color:#fff;}
.btn-outline-light:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);}
.btn-outline-navy{border-color:var(--navy);color:var(--navy);}
.btn-outline-navy:hover{background:var(--navy);color:#fff;transform:translateY(-2px);}
.btn-block{width:100%;}

/* ===== Section headers (centered, mockup-style) ===== */
.sec-head{text-align:center;max-width:640px;margin:0 auto 52px;}
.eyebrow{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:14px;
}
.sec-title{font-size:clamp(30px,3.8vw,42px);line-height:1.12;margin-bottom:14px;}
.sec-sub{font-size:16px;}

/* ===== Quote ===== */
.contact-band{background:linear-gradient(rgba(14,23,30,.8),rgba(14,23,30,.8)),url('../images/hero-event.jpg') center/cover;background-attachment:fixed;padding:96px 0;position:relative;overflow:hidden;}
.contact-band::before{content:"";position:absolute;top:-160px;right:-160px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle, rgba(197,168,128,.14), transparent 65%);}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;position:relative;z-index:1;align-items:start;}
.contact-band h2{color:#fff;font-size:clamp(30px,3.6vw,42px);line-height:1.12;margin-bottom:16px;}
.contact-band h2 em{font-style:italic;color:var(--gold);}
.contact-side p{color:#9DAAB4;font-size:15.5px;max-width:44ch;}
.q-lines{margin-top:32px;display:flex;flex-direction:column;gap:18px;}
.q-line .k{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:3px;}
.q-line .v{font-family:'DM Serif Display',serif;color:#fff;font-size:19px;}
.q-line .v a:hover{color:var(--gold);}
.contact-form{background:var(--navy-soft);border:1px solid rgba(197,168,128,.28);border-radius:16px;padding:34px;}
form{display:grid;grid-template-columns:1fr 1fr;gap:15px;}
.f-full{grid-column:1 / -1;}
form label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8C9AA6;font-weight:700;margin-bottom:6px;}
input,textarea,select{
  width:100%;background:rgba(252,252,251,.05);border:1px solid rgba(197,168,128,.3);
  border-radius:8px;padding:12px 14px;color:#fff;font-family:'Figtree',sans-serif;font-size:14.5px;
  transition:border .22s, background .22s;
}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;background-size:5px 5px;background-repeat:no-repeat;}
select option{color:var(--ink);}
input::placeholder,textarea::placeholder{color:#5C6E7C;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold);background:rgba(252,252,251,.09);}

/* ===== Footer ===== */
.footer{background:#0A1218;padding:60px 0 0;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.1fr;gap:44px;padding-bottom:44px;}
.foot-brand .brand-name{color:#fff;}
.foot-bull{height:92px;width:auto;margin-bottom:14px;}
.foot-brand p{color:#778b9a;font-size:14px;margin-top:14px;max-width:38ch;}
.foot-col h4{color:#fff;font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px;font-weight:700;}
.foot-col a{display:block;color:#8B9DAB;font-size:14.5px;padding:5px 0;transition:color .2s;}
.foot-col a:hover{color:var(--gold);}
.foot-check{list-style:none;display:flex;flex-direction:column;gap:10px;}
.foot-check li{display:flex;gap:11px;align-items:baseline;color:#8B9DAB;font-size:14px;}
.foot-check i{color:var(--gold);font-size:12.5px;}
.foot-bottom{
  border-top:1px solid rgba(197,168,128,.14);padding:20px 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#5E7181;font-size:13px;
}
.foot-bottom a{color:#8B9DAB;}
.foot-bottom a:hover{color:var(--gold);}
.foot-bottom .lekker{color:var(--gold);font-weight:600;}



/* ===== Floating cart (mobile only, appears once items are added) ===== */
.cart-fab{
  display:none;position:fixed;right:18px;bottom:18px;z-index:70;
  width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;
  background:var(--gold);color:var(--navy);font-size:19px;
  align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(14,23,30,.3);
  transition:transform .2s ease,box-shadow .2s ease;
}
.cart-fab:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(14,23,30,.36);}
.cart-fab .fab-count{
  position:absolute;top:-5px;right:-5px;min-width:23px;height:23px;padding:0 6px;
  border-radius:100px;background:var(--navy);color:var(--gold);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--gold);
}
/* 1100, not 1020: measured, the desktop nav needs 1100px before the links
   stop wrapping onto two lines. Between 1021 and 1099 it was rendering as
   "BUILD MY / SETUP". The FAB has to appear at the same width as the
   hamburger, because that is when the nav's own cart button is hidden. */
@media(max-width:1100px){ .cart-fab.has-items{display:flex;} }


/* ===== Responsive ===== */
@media(max-width:1100px){
  .nav-links{display:none;}
  .menu-toggle{display:flex;}
  .cart-btn{display:none;}
  .nav-inner{display:flex;justify-content:space-between;gap:12px;}
  .brand-name,.brand-tag{white-space:nowrap;}
  .contact-grid{grid-template-columns:1fr;gap:44px;}
}
@media(max-width:640px){
  .utility{font-size:11px;}
  .utility-inner{justify-content:space-between;}
  /* Elle: on a phone this used to hide everything after the separator, so a
     non-Scottish visitor just saw BASED IN SCOTLAND shouting on its own.
     Both halves now show, smaller and tighter. */
  .utility .util-msg{font-size:9.5px;letter-spacing:.08em;}
  .utility .util-msg .sep{margin:0 5px;}
  .nav-inner{padding:10px 14px;gap:10px;}
  .brand-bull{height:46px;}
  .cart-btn,.menu-toggle{width:44px;height:44px;}   /* 44px is the tap minimum */
  .nav-right{gap:8px;}
  .brand-name{font-size:17px;}
  .brand-tag{font-size:7.5px;letter-spacing:.18em;}
  .contact-form{padding:22px;}
  form{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
}

/* [hidden] is only display:none at the UA level, so any explicit display
   rule beats it. Toggled panels rely on this holding. */
[hidden]{display:none !important;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* =========================================================================
   CART  — drawer, toast and the quantity stepper used in product tables.
   Lives here rather than in a page stylesheet because the cart button sits
   in the navbar on every page, so every page can open the drawer.
   ========================================================================= */

/* badge only shows once there is something in it */
.cart-count{display:none;}
.cart-count.has-items{display:flex;}

/* attention bump when something is added */
.cart-btn.bump,.cart-fab.bump{animation:tcartBump .55s cubic-bezier(.36,0,.18,1.6);}
@keyframes tcartBump{
  0%{transform:scale(1) rotate(0);}
  25%{transform:scale(1.3) rotate(-8deg);}
  50%{transform:scale(1.16) rotate(6deg);}
  75%{transform:scale(1.22) rotate(-3deg);}
  100%{transform:scale(1) rotate(0);}
}

/* ---- quantity stepper ---- */
/* 44px tall so the plus and minus meet the tap minimum. They are the primary
   control on every product row and were 32x36. */
.tbc-qty-stepper{
  display:inline-flex;align-items:center;height:46px;background:var(--white);
  border:1px solid var(--line);border-radius:9px;overflow:hidden;flex-shrink:0;
}
.tbc-qty-stepper button{
  width:40px;height:100%;border:0;background:transparent;cursor:pointer;
  font-size:15px;font-weight:700;color:var(--navy);font-family:inherit;
  display:flex;align-items:center;justify-content:center;transition:background .18s;
}
.tbc-qty-stepper button:hover{background:var(--gold-wash);}
.tbc-qty-input{
  width:40px;height:100%;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
  text-align:center;font-family:inherit;font-weight:700;font-size:14px;color:var(--navy);
  background:var(--white);-moz-appearance:textfield;padding:0;
}
.tbc-qty-input::-webkit-outer-spin-button,
.tbc-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.tbc-qty-input:focus{outline:2px solid var(--gold);outline-offset:-2px;}
.tbc-qty-cell{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}

/* ---- drawer ---- */
.tcart{position:fixed;inset:0;z-index:200;visibility:hidden;overflow:hidden;}
.tcart.open{visibility:visible;}
.tcart-scrim{position:absolute;inset:0;background:rgba(14,23,30,.55);opacity:0;transition:opacity .3s;}
.tcart.open .tcart-scrim{opacity:1;}
.tcart-panel{
  position:absolute;top:0;right:0;height:100%;width:min(430px,100%);background:var(--cream);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .34s cubic-bezier(.2,.8,.2,1);box-shadow:-16px 0 50px rgba(14,23,30,.22);
}
.tcart.open .tcart-panel{transform:none;}
.tcart-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 22px;border-bottom:1px solid var(--line);background:var(--white);flex-shrink:0;
}
.tcart-head h2{font-size:20px;display:flex;align-items:center;gap:10px;}
.tcart-head h2 i{color:var(--gold-deep);font-size:16px;}
.tcart-pill{
  font-family:'Figtree',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;background:var(--gold-wash);color:var(--gold-deep);
  padding:3px 9px;border-radius:100px;
}
.tcart-pill:empty{display:none;}
.tcart-x{border:0;background:transparent;font-size:27px;line-height:1;color:var(--slate);
  cursor:pointer;width:44px;height:44px;margin:-8px -10px -8px 0;display:flex;
  align-items:center;justify-content:center;border-radius:9px;}
.tcart-x:hover{color:var(--navy);background:var(--gold-wash);}
.tcart-body{flex:1;overflow-y:auto;padding:6px 22px;}

.tcart-empty{text-align:center;padding:56px 8px;}
.tcart-empty i{font-size:42px;color:#DDD6C9;display:block;margin-bottom:16px;}
.tcart-empty h3{font-size:19px;margin-bottom:6px;}
.tcart-empty p{font-size:14px;max-width:30ch;margin:0 auto 20px;}

.tcart-row{display:grid;grid-template-columns:62px 1fr auto;gap:13px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start;}
.tcart-row:last-child{border-bottom:none;}
.tcart-thumb{width:62px;height:62px;border-radius:9px;background:var(--white);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:5px;}
.tcart-thumb img{max-width:100%;max-height:100%;object-fit:contain;}
.tcart-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.tcart-info .nm{display:block;font-weight:700;color:var(--navy);font-size:14px;line-height:1.3;}
.tcart-info .va{display:block;font-size:12.5px;color:var(--slate);}
.tcart-info .qrow{display:flex;align-items:center;gap:6px;margin-top:8px;}
.tcart-info .qbtn{
  width:25px;height:25px;border:1px solid var(--line);background:var(--white);border-radius:6px;
  cursor:pointer;color:var(--navy);font-size:13px;line-height:1;font-family:inherit;
}
.tcart-info .qbtn:hover{border-color:var(--gold);background:var(--gold-wash);}
.tcart-info .qval{min-width:20px;text-align:center;font-size:13.5px;font-weight:700;color:var(--navy);}
.tcart-info .rm{
  border:0;background:transparent;color:var(--slate);font-size:12px;cursor:pointer;
  margin-left:6px;text-decoration:underline;font-family:inherit;padding:0;
}
.tcart-info .rm:hover{color:#C0392B;}
.tcart-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.tcart-price .line{font-size:14.5px;font-weight:700;color:var(--navy);white-space:nowrap;}
.tcart-price .unit{font-size:11.5px;color:var(--slate);white-space:nowrap;}

.tcart-foot{border-top:1px solid var(--line);background:var(--white);padding:18px 22px 22px;flex-shrink:0;}
.tcart-foot.hidden{display:none;}
.tcart-sum{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;}
.tcart-sum .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.tcart-sum .row.total{padding-top:9px;border-top:1px solid var(--line);}
.tcart-sum .label{font-size:13.5px;color:var(--slate);}
.tcart-sum .label small{font-size:11.5px;}
.tcart-sum .label.lg{font-size:15px;font-weight:700;color:var(--navy);}
.tcart-sum .value{font-size:14px;font-weight:700;color:var(--navy);}
.tcart-sum .value.lg{font-family:'DM Serif Display',serif;font-size:24px;font-weight:400;}
.tcart-checkout,.tcart-quote{width:100%;}
.tcart-quote{margin-top:9px;}
.tcart-clear{
  width:100%;border:0;background:transparent;color:var(--slate);font-size:13px;
  cursor:pointer;padding:12px 0 2px;font-family:inherit;
}
.tcart-clear:hover{color:#C0392B;text-decoration:underline;}

/* ---- toast ---- */
/* Hidden has to mean gone. The slide-down alone stopped being enough once the
   toast was lifted clear of the floating buttons: 150% of its own height left
   it parked at the bottom of a phone screen, permanently in the way. */
.tcart-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,150%);z-index:210;
  background:var(--navy);color:#fff;border-radius:12px;padding:13px 16px;
  display:flex;align-items:center;gap:13px;font-size:14px;
  box-shadow:0 16px 40px rgba(14,23,30,.34);max-width:calc(100vw - 32px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .28s ease,visibility .28s;
}
.tcart-toast.show{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto;}
.tcart-toast .tcart-toast-x{
  font-size:19px;line-height:1;padding:4px 9px;border-color:transparent;
  min-width:36px;min-height:36px;
}
.tcart-toast i{color:var(--gold);flex-shrink:0;}
.tcart-toast span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tcart-toast button{
  border:1px solid rgba(255,255,255,.34);background:transparent;color:#fff;border-radius:8px;
  padding:6px 12px;font-family:inherit;font-weight:700;font-size:12.5px;cursor:pointer;white-space:nowrap;flex-shrink:0;
}
.tcart-toast button:hover{border-color:var(--gold);color:var(--gold);}

/* On small screens the floating cart button and the product page's floating
   back link both sit along the bottom edge, and the toast was landing straight
   on top of them, so adding an item made the back link unclickable until it
   faded. Lift the toast clear of both. */
@media(max-width:1020px){
  .tcart-toast{bottom:94px;}
}
@media(max-width:640px){
  .tcart-panel{width:100%;}
  .tcart-toast{left:16px;right:16px;transform:translate(0,150%);max-width:none;}
  .tcart-toast.show{transform:translate(0,0);opacity:1;visibility:visible;pointer-events:auto;}
  .tbc-qty-cell{justify-content:flex-start;}
}

/* ---- floating back link, mobile only ----
   Lives here because every page type needs it, not just product pages. Pages
   on the v4 stylesheet restyle it; this is the fallback so it is never
   unstyled markup floating in the flow. */
.p-back{
  display:none;position:fixed;left:16px;bottom:20px;z-index:120;
  align-items:center;gap:8px;background:var(--navy);color:#fff;
  border-radius:100px;padding:12px 18px;font-size:13.5px;font-weight:700;
  box-shadow:0 10px 28px rgba(14,23,30,.32);
  min-height:44px;min-width:44px;justify-content:center;
}
.p-back i{font-size:12px;}
.p-back:hover,.p-back:focus{color:var(--gold);}
@media(max-width:1020px){ .p-back{display:inline-flex;} }
@media(max-width:400px){ .p-back{padding:13px 15px;} }

/* Keyboard focus. Relying on the browser default meant it was nearly invisible
   against the cream background on some controls. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--gold-deep);outline-offset:2px;border-radius:4px;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:400;background:var(--navy);color:#fff;
  padding:12px 18px;border-radius:0 0 10px 0;font-weight:700;font-size:14px;
}
.skip-link:focus{left:0;}

/* ---- form status banner and field errors (Build My Setup, contact) ---- */
.form-msg{
  display:flex;gap:11px;align-items:flex-start;border-radius:11px;
  padding:15px 17px;margin-bottom:20px;font-size:14.5px;line-height:1.55;
  /* the contact form is a two-column grid and the script inserts this as the
     form's first child, so without this it drops into the first cell beside
     the name field instead of spanning the form */
  grid-column:1 / -1;
}
.form-msg:focus{outline:3px solid var(--gold-deep);outline-offset:2px;}
.form-msg.bad{background:#FCF4F3;border:1px solid #E7C4BE;color:#8E2C1F;}
.form-msg.good{background:var(--gold-wash);border:1px solid var(--gold);color:var(--navy);}
.form-msg i{margin-top:3px;flex-shrink:0;}
.form-msg span{min-width:0;}
.form-msg b{font-weight:700;}
.f-err{display:block;font-size:12.5px;color:#C0392B;margin-top:5px;}
input.bad,textarea.bad,select.bad{border-color:#C0392B !important;background:#FCF4F3 !important;}
button.busy{opacity:.65;pointer-events:none;}