/* ==================================================================
   The look of noblelondon.co.uk across the whole hub (Piotr, 29 Oct 2026:
   "one look for the hub and the website - the website is the model").
   Linked last on every hub page, after the page's own styles, so it only
   changes the look: Jost and Cormorant Garamond, square corners, buttons
   in gold capitals, thin gold lines, no green or blue.
   ================================================================== */
:root,:root[data-theme]{
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --gold:#A07C33;--gold-soft:#F3EBDB;--line:#E0D3B8;--panel:#FBF7EE;--panel-2:#F3EBDB;--ink:#2A2118;--ink-2:#5b5043;--mute:#6E6353;--mute-bg:#E8DCC3;
}
body{font-family:var(--sans);font-weight:300;letter-spacing:.01em;font-variant-numeric:lining-nums}
b,strong,th{font-weight:500}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:.005em}
a{color:#A07C33}
input,select,textarea,button{font-family:var(--sans)}

/* square, as on the website (round only where round means something: switches, dots, faces) */
.wrap *:not(input[type=checkbox]):not(input[type=radio]):not(label.sw):not(label.sw *):not(.dot):not(.av):not(.st):not([class*="avatar"]):not(.ostab),
/* and everything that opens over the page - records, dialogs, menus, messages (Piotr, 29 Oct 2026: one style everywhere) */
.scrim *:not(input[type=checkbox]):not(input[type=radio]):not(label.sw):not(label.sw *):not(.dot):not(.av):not(.st):not([class*="avatar"]):not(.ostab):not(.spin):not(.knob):not(.tdot),.sheet *:not(input[type=checkbox]):not(input[type=radio]):not(label.sw):not(label.sw *):not(.dot):not(.av):not(.st):not([class*="avatar"]):not(.ostab):not(.spin):not(.knob):not(.tdot),dialog *:not(input[type=checkbox]):not(input[type=radio]):not(label.sw):not(label.sw *):not(.dot):not(.av):not(.st):not([class*="avatar"]):not(.ostab):not(.spin):not(.knob):not(.tdot),.ov *:not(input[type=checkbox]):not(input[type=radio]):not(label.sw):not(label.sw *):not(.dot):not(.av):not(.st):not([class*="avatar"]):not(.ostab):not(.spin):not(.knob):not(.tdot),#pbOv *:not(input[type=checkbox]):not(input[type=radio]):not(label.sw):not(label.sw *):not(.dot):not(.av):not(.st):not([class*="avatar"]):not(.ostab):not(.spin):not(.knob):not(.tdot),.menu *:not(input[type=checkbox]):not(input[type=radio]):not(label.sw):not(label.sw *):not(.dot):not(.av):not(.st):not([class*="avatar"]):not(.ostab):not(.spin):not(.knob):not(.tdot),.scrim,.sheet,.ov,#pbOv>div>div,#toast,.menu,
.hs-btn,.uchip button,a.back,.btn.back,.uchip .menu,dialog,.hs-back,.tile,.ctile,.tday,.pin,.ck{border-radius:0 !important}

/* buttons: gold, in ordinary letters (Piotr, 2 Nov 2026: easier to read than capitals with wide spacing) */
.btn,.wrap button.btn,a.btn{font-family:var(--sans);font-weight:600;font-size:13.5px;letter-spacing:.01em;text-transform:none;
  border:1px solid #C6A15B;background:#FBF7EE;color:#2A2118;transition:background .2s,color .2s,border-color .2s}
.btn:hover{border-color:#A07C33;background:#F3EBDB}
.btn.primary,.btn.pri,button.primary{background:#C6A15B !important;color:#171310 !important;border-color:#C6A15B !important}
.btn.primary:hover,.btn.pri:hover{background:#D8BC85 !important;border-color:#D8BC85 !important}
.btn.sm{font-size:11px;letter-spacing:.12em}
.btn.ghost{border-color:#E0D3B8;background:#FBF7EE;color:#2A2118}
/* on the dark ground (outside the cards) */
.wrap > .btn,.wrap > a.btn,.dtop .btn:not(.primary),.toolbar.dark .btn,a.back,.btn.back,.hs-back{color:#F2EAD9;border-color:rgba(198,161,91,.55);background:rgba(20,16,12,.45)}
a.back,.btn.back,.hs-back{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:400}

/* cards and panels: the website's ivory, a thin gold line on top */
.panel,.card,.tile,.doc{background:#FBF7EE;border:1px solid #E8DCC3;border-top:2px solid #C6A15B;box-shadow:0 18px 40px -18px rgba(0,0,0,.55)}

/* fields */
.wrap input:not([type=checkbox]):not([type=radio]):not([type=range]),.wrap select,.wrap textarea{border:1px solid #D9CBAE;background:#fff;color:#2A2118;font-weight:400}
.wrap input:focus,.wrap select:focus,.wrap textarea:focus{outline:none;border-color:#C6A15B;box-shadow:0 0 0 1px #C6A15B}
.field label,label.f{font-weight:500;letter-spacing:.14em;color:#6E6353}
input[type=checkbox],input[type=radio]{accent-color:#A07C33}

/* labels in small capitals, as the website's section labels */
.tag,.brand .tag,.k,.lbl,.tile .meta{letter-spacing:.24em !important;font-weight:400 !important}

/* the header mark line */
.rule{background:linear-gradient(90deg,#C6A15B,transparent) !important;height:1px !important}

/* iPhone paints a button's text blue when the page gives it no colour */
button{color:#2A2118}

/* switches in gold, not green */
.sw input:checked+i,.switch input:checked+i,.switch input:checked+span{background:#A07C33 !important}

/* the start page's search sits in its own dark bar */
.wrap #hq{background:transparent !important;border:0 !important;box-shadow:none !important;color:#F2EAD9 !important}

/* ---- the website's movement (noblelondon.co.uk): only where a mouse can hover, and never when the device asks for less motion ----
   cards rise 6px and take a gold edge; gold buttons lighten; menu entries slide a little to the right */
@media (hover:hover){
  .panel,.card,.tile,.doc,.tday,.ck,.pin,.swtiles button,.pick button,.big4 button,.pcard{transition:border-color .5s ease,transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease,background .3s ease}
  a.tile:hover,button.tile:hover,a.tday:hover,a.doc:hover,.pin:hover,.swtiles button:hover,.pick button:hover,.big4 button:hover,a.pcard:hover,.pcard:hover{transform:translateY(-6px);border-color:#C6A15B !important;box-shadow:0 30px 66px -24px rgba(0,0,0,.62),inset 0 0 0 1px #C6A15B}
  .btn{transition:background .3s ease,border-color .3s ease,color .3s ease}
  .hs a.hs-i{transition:background .5s ease,padding .6s cubic-bezier(.22,1,.36,1),color .3s ease}
  .hs a.hs-i:hover{padding-left:16px}
}
/* content rises in gently when a page opens (once: later redraws stay still) */
@keyframes nobleFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  html:not(.nl-still) .wrap > .panel,html:not(.nl-still) .wrap > .card,html:not(.nl-still) #view > .card,html:not(.nl-still) #view > .panel,
  html:not(.nl-still) .tday,html:not(.nl-still) .ck,html:not(.nl-still) .tiles > *{animation:nobleFadeUp .8s cubic-bezier(.22,1,.36,1) backwards}
  html:not(.nl-still) .wrap > *:nth-child(3),html:not(.nl-still) .tday:nth-child(2),html:not(.nl-still) .ck:nth-child(2){animation-delay:.08s}
  html:not(.nl-still) .wrap > *:nth-child(4),html:not(.nl-still) .tday:nth-child(3){animation-delay:.16s}
  html:not(.nl-still) .wrap > *:nth-child(n+5),html:not(.nl-still) .tday:nth-child(n+4){animation-delay:.24s}
}
.hs a.hs-i,.hs-logo i{border-radius:0 !important}
/* "← NobleOS" is for phones: on a computer the menu on the left is always there */
@media (min-width:1024px){a.back-mob,.btn.back-mob{display:none !important}}

/* one kind of tabs on every page (Piotr, 29 Oct 2026: "czy to dla ciebie jest jednolity styl"): ivory with a gold
   line, the chosen one gold - Accounts, Client access, Chauffeurs, Pricing, Connect, Website, Partner Network */
.wrap .tabs>button,.wrap .sect>a,.wrap .flt>button,.wrap .views>button,.wrap .wtabs>.btn,.viewsw button,.dtabs button,.wrap .chip.big{
  background:#FBF7EE !important;color:#2A2118 !important;border:1px solid #C6A15B !important;border-radius:0 !important;box-shadow:none !important;
  font-family:var(--sans) !important;font-size:13.5px !important;font-weight:600 !important;letter-spacing:.01em !important;text-transform:none !important;padding:9px 14px !important}
.wrap .tabs>button.on,.wrap .sect>a.on,.wrap .flt>button.on,.wrap .views>button.on,.wrap .wtabs>.btn[aria-selected="true"],.viewsw button.on,.dtabs button.on,.wrap .chip.big.on{
  background:#C6A15B !important;color:#171310 !important;border-color:#C6A15B !important}
.wrap .sect{background:none !important;border:0 !important;padding:0 !important;gap:6px}
.dtabs button{border-width:0 0 0 1px !important;padding:10px 2px !important;font-size:13px !important}.dtabs button:first-child{border-left:0 !important}
.viewsw button{border:0 !important}