/* Global design refinements: clearer section separation and banner offset below fixed header */

:root{
  --accent:#222222; /* replaced purple with dark grey */
  --accent-dark:#111111; /* slightly darker for gradients */
  --site-light:#e9e9e9; /* light background like screenshot */
  --site-dark:#bfbfbf;  /* darker alternating section color */
  --bg-1:var(--site-light);
  --bg-2:var(--site-dark);
  --bg-3:#ffffff;
  --text:#2c2c2c;
}

/* Base styles */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;scroll-behavior:smooth}
body{
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg-3);
  color:var(--text);
  line-height:1.6;
  font-weight:300;
}
img{max-width:100%;height:auto;display:block}

/* Typography */
h1,h2,h3{font-family:'Montserrat',sans-serif;font-weight:400;color:var(--text)}
h2.major{font-size:1.9rem;font-weight:600;margin-bottom:1.25rem;color:var(--text);position:relative}
h2.major::after{content:'';width:64px;height:3px;background:var(--accent);position:absolute;bottom:-10px;left:0;border-radius:2px}
p{margin:0 0 1.2rem 0;color:#555;line-height:1.7}
ul{margin:0 0 1.2rem 1.25rem;color:#555}

/* Utility */
.inner,.container-inner{max-width:1200px;margin:0 auto;padding:0 1.5rem}
.reveal{position:relative;opacity:0;transform:translateY(40px);transition:all .8s cubic-bezier(0.4,0,0.2,1)}
.reveal.active{opacity:1;transform:none}

/* Header */
#header{position:fixed;top:0;left:0;right:0;height:70px;background:rgba(42,42,42,.95);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;z-index:1000;border-bottom:1px solid rgba(255,255,255,.1)}
#header h1{font-size:1.1rem;color:#fff;margin:0;font-weight:500}
#header a{color:#fff,text-decoration:none,transition:color .3s ease}
#header nav a{padding:.5rem 1rem;border-radius:6px,transition:all .3s ease}
#header nav a:hover{background:rgba(34,34,34,.3);color:#fff}
#header.alt{background:rgba(42,42,42,.7)}

/* Skip link (accessible 'Jump to content') */
.skip-link{
  position:fixed;left:12px;top:12px;background:#000;color:#fff;padding:.5rem .75rem;border-radius:6px;z-index:2000;transform:translateY(-120%);transition:transform .18s ease;box-shadow:0 8px 24px rgba(0,0,0,.28)
}
.skip-link:focus{transform:translateY(0);outline:none}

/* Focus outlines for keyboard users */
:focus{outline: none}
:focus-visible{outline:3px solid rgba(34,34,34,0.9);outline-offset:3px;border-radius:6px}

/* Ensure buttons and links show focus */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{outline:3px solid rgba(34,34,34,0.9);outline-offset:3px;border-radius:6px}

/* High contrast mode improvements for interactive elements */
@media (prefers-contrast: more){
  :root{--accent:#1b1b1b}
  a, button{border-color:var(--accent)}
}

/* Centered modal menu overlay */
#menu {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(34,34,34,0.14); /* neutral translucent */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease,visibility .25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
#menu .inner{
  background:var(--bg-1);
  width:min(92vw, 520px);
  border-radius:16px;
  border:none; /* remove thin border */
  box-shadow:0 30px 80px rgba(0,0,0,.18);transform:scale(.96);
  transition:transform .25s ease,opacity .25s ease;
  opacity:.98;position:relative;padding:1.75rem 1.5rem;
}
body.is-menu-visible #menu{visibility:visible;opacity:1;pointer-events:auto}
body.is-menu-visible #menu .inner{transform:scale(1);opacity:1}

#menu h2{margin:0 0 .75rem 0;font-size:1rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text);text-align:center}
#menu .menu-close{
  position:absolute;
  top:.9rem;
  right:.9rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:12px;
  border:none;
  color:rgba(34,34,34,0.9); /* dark gray */
  text-decoration:none;
  font-size:28px;
  line-height:1;
  background:transparent;
  transition:transform .18s cubic-bezier(0.2,0.8,0.2,1), box-shadow .18s ease, background-color .18s ease, color .18s ease;
  cursor:pointer;
}

#menu .menu-close:hover{
  transform:translateY(-3px) rotate(10deg);
  box-shadow:0 14px 36px rgba(16,18,20,0.12);
  background:rgba(16,18,20,0.04);
  color:var(--accent);
}

#menu .menu-close:focus{
  outline:3px solid rgba(34,34,34,0.12);
  outline-offset:3px;
  transform:translateY(-2px);
}

/* Menu links: no hover background/colour changes, keep subtle pointer */
#menu .links a{display:block;text-decoration:none;color=var(--text);padding=.9rem 1rem;border-radius=12px;font-weight:500;letter-spacing:.02em;transition:color .15s ease;border=1px solid transparent;text-align=center}
#menu .links a:hover{background=transparent;border-color=transparent;color=var(--text);cursor:pointer}
#menu .links a:active{transform:none}

/* Elegant menu link hover styles */
#menu .links a{
  position:relative;
  padding:.9rem 1rem;
  border-radius:12px;
  color:var(--text);
  text-decoration:none;
  display:block;
  transition: background .22s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
  will-change:transform,box-shadow;
  overflow:hidden;
}

/* Remove bullets and default list spacing for the menu links */
#menu .links,
#menu .links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#menu .links li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* thin accent bar that grows on hover */
#menu .links a::before{
  content:''; /* keep for spacing */
  position:absolute;
  left:8px;
  top:8px;
  bottom:8px;
  width:4px;
  background:var(--accent);
  border-radius:4px;
  transform:scaleY(0);
  transform-origin:center;
  transition:transform .24s cubic-bezier(0.2,0.8,0.2,1);
  opacity:.95;
}

#menu .links a::after{
  content:''; /* keep for spacing */
  position:absolute;
  left:20px;
  right:20px;
  bottom:10px;
  height:2px;
  background:linear-gradient(90deg, rgba(34,34,34,0), rgba(34,34,34,0.18));
  transform:translateX(-8px) scaleX(.85);
  opacity:0;
  transition:all .28s cubic-bezier(0.2,0.8,0.2,1);
}

#menu .links a:hover{
  background:rgba(34,34,34,0.06);
  color:var(--accent);
  transform:translateY(-6px);
  box-shadow:0 18px 36px rgba(34,34,34,0.06);
}

#menu .links a:hover::before{transform:scaleY(1)}
#menu .links a:hover::after{opacity:1;transform:translateX(0) scaleX(1)}

/* Floating hamburger menu button: no border, cookie-like shadow */
#menuFab{
  position:fixed;right:22px;top:22px;width:58px;height:58px;border-radius:50%;
  background: linear-gradient(135deg,var(--accent),var(--accent-dark));color:#ffff;
  display:inline-flex;align-items:center;justify-content:center;
  border:none;box-shadow:0 12px 40px rgba(34,34,34,.45);
  z-index:1200;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease;
}
#menuFab:hover{transform:translateY(-2px);box-shadow:0 18px 48px rgba(34,34,34,.5)}

/* Ensure hamburger bars are visible: explicit sizing and pseudo-elements */
#menuFab .bars{
  position:relative;
  width:22px;
  height:2px;
  background:#fff !important;
  border-radius:2px;
  display:block;
}
#menuFab .bars::before,
#menuFab .bars::after{
  content:''; /* keep for spacing */
  position:absolute;
  left:0;
  width:22px;
  height:2px;
  background:#fff !important;
  border-radius:2px;
}
#menuFab .bars::before{top:-7px}
#menuFab .bars::after{top:7px}

/* Small accessibility improvement: increase contrast on hover */
#menuFab:focus, #menuFab:hover{outline:none;box-shadow:0 18px 48px rgba(34,34,34,.55)}

/* Banner */
#banner{background:var(--site-light);padding:8rem 0 6rem 0;text-align:center;position:relative}
#banner .logo img{height:160px;width:auto;display:block;margin:0 auto 0.8rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1))}
#banner .logo-caption{font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;letter-spacing:4px;margin-bottom:2rem;color:#111;font-weight:600,text-transform:uppercase}
#banner .banner-title{
  font-family: 'Montserrat', sans-serif;
  /* fluid size: will not grow beyond 72px and will shrink on small viewports */
  font-size: clamp(28px, 6.2vw, 72px);
  font-weight: 200;
  /* reduce letter spacing proportionally so long words fit */
  letter-spacing: clamp(4px, 1.2vw, 12px);
  margin: 0 0 2rem 0;
  color: var(--text);
  text-transform: uppercase;
  white-space: nowrap; /* prevent line breaks */
  overflow: hidden;    /* avoid overflow visual glitches */
  text-overflow: clip;
}
#banner .banner-hr{width:92%;max-width:1400px;height:1px;background:rgba(0,0,0,.14);border:none;margin:2.2rem auto 2rem}
#banner .locations{margin-top:1rem;letter-spacing:8px;text-transform:uppercase;color:rgba(44,44,44,.6);font-size:14px;font-weight:400}
#banner .banner-subtitle{margin-top:2.2rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#111;font-size:15px}

/* Sections - clearer separation with hairlines and alternating backgrounds */
.section-spotlight{position:relative;padding:5.5rem 0;overflow:hidden;}
.section-spotlight .spot-inner{position:relative;z-index:2}
.section-spotlight.style1{background:var(--bg-3)}
.section-spotlight.style2{background:var(--bg-2);color:rgba(0,0,0,.85)}
.section-spotlight.style3{background:var(--bg-3)}

/* Diagonal separator for style2 to mirror screenshot */
.section-spotlight.style2{position:relative;overflow:visible}
.section-spotlight.style2::before{
  content:''; /* keep for spacing */
  position:absolute;
  top:-120px; /* lift further to cover previous edge */
  left:-25%;
  width:150%;
  height:220px;
  background:var(--bg-2);
  z-index:1;
  transform:skewY(-5deg);
  transform-origin:0 0;
  pointer-events:none;
}

/* Ensure sections can show diagonal accents without clipping */
.section-spotlight{overflow:visible}

/* Make sure inner content sits above the diagonal */
.section-spotlight .spot-inner{position:relative;z-index:2}

/* Tighten contrast for text on dark sections if needed */
.section-spotlight.style2 h2.major, .section-spotlight.style2 p, .section-spotlight.style2 li{color:rgba(0,0,0,.85)}

/* Remove previous gradient separators to avoid clashes */
.section-spotlight::after{display:none}

/* Keep separator line darker for clear section edges */
.section-spotlight{border-top:1px solid rgba(108,111,117,.45)}
#page-wrapper > section.section-spotlight:first-of-type{border-top:0}

/* Override: remove diagonal pseudo-elements and restore clean section edges */
.section-spotlight{overflow:visible}
/* Disable any pseudo diagonal shapes */
.section-spotlight::before,
.section-spotlight::after,
.section-spotlight.style2::before,
.section-spotlight.style2::after{
  content: none !important;
  display: none !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  background: none !important;
}
/* Ensure sections have clean backgrounds and full width */
.section-spotlight{overflow:hidden}
.section-spotlight.style1{background:var(--bg-1)}
.section-spotlight.style2{background:var(--bg-2)}
.section-spotlight.style3{background:var(--bg-1)}
/* Keep separator line clean */
.section-spotlight{border-top:1px solid rgba(108,111,117,.45)}
#page-wrapper > section.section-spotlight:first-of-type{border-top:0}

/* Forms */
.form-control{border:2px solid #e9ecef;border-radius:8px;padding:0.75rem 1rem;transition:all .3s cubic-bezier(0.4,0,0.2,1);background:#fff;font-family:'Montserrat',sans-serif,font-weight:300}
.form-control:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(34,34,34,.1);background:#fff;outline:none}
.form-label{font-weight:500;margin-bottom:0.5rem;color:var(--text);text-transform:uppercase;font-size:0.85rem;letter-spacing:1px}

/* Ensure SVG icons inside input-group-text are visible and sized */
.input-group-text{display:inline-flex;align-items:center;justify-content:center;padding:.5rem .65rem;border-radius:8px}
.input-group-text svg{width:20px;height:20px;display:block;fill:currentColor;color:rgba(44,44,44,0.65)}
.input-group-text svg path{fill:currentColor}

/* Buttons */
.btn{font-family:'Montserrat',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:1px;border-radius:8px;padding:0.75rem 2rem;transition:all .3s cubic-bezier(0.4,0,0.2,1);border:2px solid transparent}
.btn-dark{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-dark:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff;transform:translateY(-2px);box-shadow:0 8px 25px rgba(34,34,34,.3)}
.btn-outline-dark{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn-outline-dark:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}

/* Cookie modal */
.modal-content{border-radius:16px;overflow:hidden;box-shadow:0 25px 80px rgba(0,0,0,.15);border:none;backdrop-filter:blur(20px)}
#cookieModal .modal-header{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;border-bottom:none;padding:1.5rem 2rem}
#cookieModal .modal-title{font-weight:600;font-size:1.2rem}
#cookieModal .btn-close{filter:invert(1)}
#cookieModal .modal-body{padding:2rem;background:#fff}
#cookieModal .form-check{display:flex;align-items:flex-start;gap:0.75rem;margin-bottom:1rem}
#cookieModal .form-check-input{width:1.25em;height:1.25em;margin-top:4px}
#cookieModal .modal-footer{background:#f8f9fa;border-top:none;padding:1.5rem 2rem;display:flex;gap:0.75rem;justify-content:flex-end;flex-wrap:nowrap}
#cookieModal .modal-footer .btn{min-width:0;padding:0.6rem 1.2rem;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}

/* Cookie button */
#cookieButton{position:fixed;left:24px;bottom:24px;width:70px;height:70px;border-radius:50%;z-index:9999;background:linear-gradient(135deg,var(--accent),var(--accent-dark));border:3px solid rgba(255,255,255,.9);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(34,34,34,.4);transition:all .3s cubic-bezier(0.4,0,0.2,1);font-size:22px}
#cookieButton:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(34,34,34,.5)}

/* Placeholder circles */
.section-spotlight .rounded-circle{background:linear-gradient(135deg,rgba(34,34,34,.08),rgba(34,34,34,.04));border:2px solid rgba(34,34,34,.1)}

/* SVG icon styles inside decorative circles */
.section-spotlight .rounded-circle{display:flex;align-items:center;justify-content:center}
.section-spotlight .rounded-circle .icon-svg{width:56%;height:56%;fill:rgba(34,34,34,0.08);opacity:0.95}
.section-spotlight .rounded-circle:hover .icon-svg{transform:scale(1.03);opacity:1}

/* Cookie button SVG */
#cookieButton svg{width:36px;height:36px;display:block;fill:#fff}
#cookieButton:hover svg{transform:rotate(15deg);transition:transform .25s ease}

/* Contact form enhancements */
.contact-card{
  background: linear-gradient(180deg,#ffffff, #fbfbfb);
  border-radius:20px;
  padding:2.25rem;
  box-shadow:0 30px 80px rgba(16,18,20,0.06);
  position:relative;
  overflow:visible;
  border-left:6px solid var(--accent);
  transition:transform .18s ease,box-shadow .18s ease;
}
.contact-card:hover{transform:translateY(-6px);box-shadow:0 40px 110px rgba(16,18,20,0.10)}

/* Watermark behind contact form */
.contact-card{position:relative;z-index:1}
.contact-card::before{
  content: "";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  /* Try Watermark.png first, fallback to Thumbnail.webp if missing on the server */
  background-image: url('/resources/images/Watermark.webp');
  background-repeat: no-repeat;
  /* center the watermark and make it larger */
  background-position: center center;
  background-size: 60% auto; /* large, centered */
  mix-blend-mode: multiply;
  filter: none;
}
@media (max-width:992px){
  .contact-card::before{background-size:60% auto}
}
@media (max-width:575px){
  .contact-card::before{background-size:80% auto}
}

/* Footer styles */
footer#footer{
  background:var(--bg-2);
  color:rgba(0,0,0,.75);
  padding:3.5rem 0;
  margin-top:2.5rem;
}
footer#footer .footer-inner{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;gap:2rem;align-items:flex-start;justify-content:space-between}
footer#footer .footer-col{flex:1;min-width:180px}
footer#footer .footer-title{font-weight:700;margin-bottom:.75rem;color:var(--text)}
footer#footer a{color:var(--text);text-decoration:none}
footer#footer a:hover{color:var(--accent)}
footer#footer .small{font-size:.9rem;color:rgba(0,0,0,.6)}

/* Footer bottom bar */
.footer-bottom{
  background:transparent; /* keep subtle, matches page */
  text-align:center;
  padding:1rem 0 2rem 0;
  color:rgba(0,0,0,.65);
  font-size:0.95rem;
}
.footer-bottom a{color:var(--accent);text-decoration:none}
.footer-bottom a:hover{text-decoration:underline}

/* Reduce vertical spacing between footer bottom lines to match design */
.footer-bottom p{margin:0.15rem 0;line-height:1.2;color:rgba(0,0,0,.65)}

/* Responsive footer stacking */
@media (max-width:768px){
  footer#footer .footer-inner{flex-direction:column;gap:1.5rem}
}

@media (max-width:768px){
  :root{--header-h:60px}
  #banner{padding:6rem 0 4rem}
  #banner .banner-title{letter-spacing:6px}
  #banner .logo img{height:120px}
  .section-spotlight{padding:3.75rem 0}
  #header{height:60px;padding:0 1rem}
  #cookieButton{left:16px;bottom:16px;width:60px;height:60px;font-size:18px}
}

@media (max-width:992px){
  #banner .banner-title{letter-spacing:8px}
  #banner .logo img{height:140px}
  .section-spotlight{padding:4.5rem 0}
}

/* Overrides: remove section borders and cookie button border for a cleaner look */
.section-spotlight{border:none !important}
#cookieButton{border:none !important}
#cookieButton:focus, #cookieButton:hover{box-shadow:0 12px 40px rgba(34,34,34,.45);transform:translateY(-2px)}


@keyframes revealUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.reveal.active{animation:revealUp .8s cubic-bezier(0.4,0,0.2,1) both}

/* Remove gap between last section and footer */
footer#footer{margin-top:0;padding-top:2.5rem}

/* Ensure last section has no extra bottom spacing */
.section-spotlight:last-of-type{margin-bottom:0;padding-bottom:0}

/* Contact card shouldn't create extra space */
.contact-card{margin-bottom:0}

/* Footer inner spacing tweak */
footer#footer .footer-inner{padding-bottom:0}

/* Remove default hr margins that could create gaps */
.banner-hr{margin-top:1.5rem;margin-bottom:1.5rem}

/* Restore colored gap between last section and footer */
.section-spotlight.style1:last-of-type{
  padding-bottom:3.5rem; /* gap in the section's background color */
}

/* give contact-card a small bottom margin so it doesn't touch the section padding */
.contact-card{margin-bottom:1rem}

/* Replace circle decorative blocks with transparent wrappers and prominent SVG icons */
.section-spotlight .rounded-circle{
  /* keep sizing for layout but remove visible circle */
  background:transparent !important;
  border:none !important;
  width:220px;height:220px;margin:auto;display:flex;align-items:center;justify-content:center;
}

/* SVG icon large, accent-colored and elevated so it separates from section background */
.section-spotlight .rounded-circle .icon-svg{
  width:140px;height:140px;fill:var(--accent);opacity:1;transition:transform .15s ease,filter .15s ease;
  filter:drop-shadow(0 12px 36px rgba(16,18,20,0.10));
}
.section-spotlight .rounded-circle:hover .icon-svg{transform:translateY(-6px) scale(1.06);filter:drop-shadow(0 22px 44px rgba(16,18,20,0.14));}

/* Customize icon fill per section to use the "other" section color for contrast:
   - in style1 (light background) use the dark section color for the icon
   - in style2 (dark background) use the light section color for the icon
*/
.section-spotlight.style1 .rounded-circle .icon-svg{ fill: var(--bg-2) !important; }
.section-spotlight.style2 .rounded-circle .icon-svg{ fill: var(--bg-1) !important; }

/* Disable decorative pseudo-elements on menu links (remove left bar and underline) */
#menu .links a::before,
#menu .links a::after{
  display:none !important;
  content:none !important;
}

/* Ensure no text-decoration/underline and centered links */
#menu .links a{text-decoration:none;color:var(--text);text-align:center}

/* Keep subtle hover lift but without added decorations */
#menu .links a:hover{background:rgba(34,34,34,0.06);color:var(--accent);transform:translateY(-6px);box-shadow:0 18px 36px rgba(34,34,34,0.06)}

/* Improve contrast of link text in modal */
#menu .links a{font-size:1.02rem;padding:.95rem 1.1rem}

/* Cookie modal: elegant button styles (for _CookieModal.cshtml) */
.cookie-modal-footer { 
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: .2rem; /* reduced gap between buttons */
  padding: 1rem 1rem 0 1rem;
}

.cookie-modal-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  width: 100% !important;
  padding: .6rem 1rem !important; /* slightly reduced vertical padding */
  background-color: #fff !important;
  color: var(--bs-body-color, #212529) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: .6rem !important;
  box-shadow: 0 1px 2px rgba(16,24,40,0.03) !important;
  text-align: left;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
  font-size: 0.98rem !important;
  text-transform: none !important;
}

.cookie-modal-footer .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16,24,40,0.06) !important;
  border-color: rgba(13,110,253,0.12) !important;
  background-color: #fff !important;
  text-decoration: none;
}

.cookie-modal-footer .btn:focus {
  outline: 3px solid rgba(13,110,253,0.10);
  outline-offset: 2px;
}

/* Smaller compact variant keeps reduced padding but same look */
.cookie-modal-footer .btn-compact {
  padding: .45rem .9rem !important;
  font-size: .95rem !important;
}

/* Save button: primary, full-width, slightly more prominent */
.cookie-modal-footer .btn-save {
  background-color: var(--bs-primary, #0d6efd) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(13,110,253,0.14) !important;
  border-radius: .6rem !important;
  justify-content: center !important;
  font-weight: 600 !important;
  padding: .65rem 1rem !important; /* slightly reduced to match other buttons */
}

/* On hover, make save button purple (use --accent) instead of white */
.cookie-modal-footer .btn-save:hover {
  transform: translateY(-2px);
  background-color: var(--accent, #6a4c93) !important; /* lila */
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(106,76,147,0.18) !important;
  border-color: transparent !important;
}

/* Keep disabled/secondary appearance subtle */
.cookie-modal-footer .btn.btn-secondary,
.cookie-modal-footer .btn.btn-outline-primary {
  background-color: #fff !important;
}

/* Cookie banner (compact, elegant) */
#cookieBanner{position:fixed;left:0;right:0;bottom:16px;z-index:1050;pointer-events:auto;opacity:0;transform:translateY(18px);transition:transform .28s cubic-bezier(.2,.9,.2,1),opacity .28s ease,box-shadow .28s ease}
#cookieBanner:not(.d-none){opacity:1;transform:none}
#cookieBanner .container{max-width:1100px;margin:0 auto;padding:0}
#cookieBanner > .container{display:flex;align-items:center;gap:1rem}
#cookieBanner .cookie-message{flex:1;color:rgba(15,23,42,.88);font-size:0.95rem}
#cookieBanner .cookie-message a{color:var(--accent);text-decoration:underline}
#cookieBanner .cookie-actions{display:flex;gap:.5rem}
#cookieBanner .cookie-actions .btn{border-radius:10px;padding:.475rem .9rem;font-size:.9rem}
#cookieBanner .btn-outline-dark{border-color:rgba(15,23,42,.08);background:transparent}

/* Glassy panel inside banner for contrast with page background */
#cookieBanner .container > div:first-child{background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.92));border-radius:12px;padding:.55rem .85rem;display:flex;align-items:center;gap:1rem;box-shadow:0 10px 30px rgba(16,18,20,0.08);width:100%}
#cookieBanner .cookie-icon{width:42px;height:42px;flex:0 0 42px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),#5a3d7a);color:#fff;border-radius:9px;box-shadow:0 6px 18px rgba(106,76,147,0.12)}
#cookieBanner .cookie-icon svg{width:20px;height:20px;fill:#fff}
#cookieBanner .cookie-actions{flex-shrink:0}

/* Hover: make 'Einstellungen' (outline dark) button purple on hover to match accent */
#cookieBanner .btn-outline-dark:hover,
#cookieBanner .btn-outline-dark:active {
  background: linear-gradient(135deg, var(--accent), #5a3d7a);
  border-color: var(--accent);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(106,76,147,0.18);
}

/* Focus-visible improvement for keyboard users */
#cookieBanner .btn-outline-dark:focus-visible,
#cookieBanner .btn-dark:focus-visible {
  outline: 3px solid rgba(106,76,147,0.18);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Responsive: stack on small screens */
@media(min-width:576px){
  #cookieBanner .container > div:first-child{padding:.7rem 1rem}
}
@media(max-width:575px){
  #cookieBanner > .container{padding:0 .75rem}
  #cookieBanner .container > div:first-child{flex-direction:column;align-items:stretch;gap:.5rem;padding:.6rem}
  #cookieBanner .cookie-actions{justify-content:flex-end}
  #cookieBanner .cookie-message{font-size:.95rem}
  /* place banner above the floating cookieButton (button ~64px high + 18px bottom + 12px gap) */
  #cookieBanner{bottom:calc(18px + 64px + 12px);} 
}

/* Ensure extremely small screens still keep some spacing */
@media(max-width:420px){
  #cookieBanner{bottom:calc(12px + 56px + 10px);} /* slightly smaller gap if button reduced */
}

/* Focus visible for banner buttons */
#cookieBanner .btn:focus-visible{outline:3px solid rgba(106,76,147,0.14);outline-offset:3px;border-radius:10px}

/* Ensure banner doesn't overlap important fixed UI elements on very small screens */
@media(max-width:420px){
  #cookieBanner{bottom:8px}
}

/* Enhanced option pills for form choices */
.option-group{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  align-items:center;
  justify-content:flex-start; /* left-align pills */
  width:100%;
}

.option-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem; /* horizontal padding */
    border-radius: 9999px !important; /* fully rounded, force override */
    border: 1px solid rgba(44,44,44,0.12) !important;
    background: transparent;
    transition: all .18s cubic-bezier(.2,.9,.2,1);
    min-width: 0;
    text-align: center;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 8px rgba(16,18,20,0.03);
    white-space: nowrap;
    overflow: hidden; /* ensure rounded ends clip children */
    /* remove line-height forcing; use flexbox centering for perfect alignment */
    line-height: normal;
}

/* Decorative divider sections (standalone) placed before/after the style2 section */
.section-divider {
    /* full-bleed (ignore parent width) */
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: 250px;
    pointer-events: none;
    overflow: visible;
    background-repeat: no-repeat;
    /* default: cover the section so the image reaches both edges */
    background-size: cover;
    background-position: center center;
    background-color: var(--bg-1);
    z-index: 0;
}

.section-divider.upper{
  background-image: url('/resources/images/Upper.webp');
}

.section-divider.lower{
  background-image: url('/resources/images/Under.webp');
}

@media (max-width:1200px){
  /* slightly reduce the oversize on medium screens */
  .section-divider{height:140px;background-size:120% auto;background-position:center}
}
@media (max-width:992px){
  .section-divider{height:120px;background-size:auto 100%;background-position:center}
}
@media (max-width:575px){
  .section-divider{height:90px;background-size:auto 100%;background-position:center}
}

@media (min-width:1600px){
  /* on very wide displays make the graphic even wider so edges remain filled */
  .section-divider{background-size:180% auto}
}