@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Montserrat:wght@600&display=swap');
:root{--sp-ink:#111;--sp-paper:#f6f6f4;--sp-line:#ddd;--sp-rose:#d9c4cb}*{box-sizing:border-box}body{margin:0;background:var(--sp-paper);color:var(--sp-ink);font-family:"DM Sans",Arial,sans-serif}.sp-skip{position:absolute;transform:translateY(-200%);z-index:120;background:#fff;color:#111;padding:1rem}.sp-skip:focus{transform:none}.sp-header{height:88px;display:flex;align-items:center;gap:clamp(14px,2vw,32px);padding:0 clamp(18px,3vw,54px);background:#101010;color:#fff;position:relative;z-index:50}.sp-brand{color:#fff;text-decoration:none;display:flex;flex-direction:column;min-width:245px;gap:5px}.sp-brand strong{font-family:Montserrat,Arial,sans-serif;font-size:clamp(20px,2vw,30px);font-weight:600;letter-spacing:.18em}.sp-brand small{font-size:9px;font-weight:400;letter-spacing:.21em;color:#c7c7c7}.sp-desktop{margin-left:auto}.sp-navlist{list-style:none;display:flex;align-items:center;gap:clamp(4px,.55vw,14px);padding:0;margin:0}.sp-item{list-style:none}.sp-item>a,.sp-dropdown>summary{display:flex;align-items:center;justify-content:space-between;gap:9px;color:#fff;text-decoration:none;padding:16px 9px;cursor:pointer;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.sp-dropdown>summary{list-style:none}.sp-dropdown>summary::-webkit-details-marker{display:none}.sp-dropdown>summary span{font-size:15px;color:#a7a7a7;font-weight:400}.sp-dropdown[open]>summary span{transform:rotate(45deg)}.sp-dropdown{position:relative}.sp-sub{position:absolute;left:0;top:100%;min-width:238px;max-height:min(70vh,650px);overflow:auto;margin:0;padding:12px 0;list-style:none;background:#191919;box-shadow:0 18px 48px #0007}.sp-sub li a{display:block;color:#dedede;font-size:12px;font-weight:400;padding:10px 22px;text-decoration:none;white-space:nowrap}.sp-sub a:hover,.sp-sub a:focus-visible,.sp-item>a:hover,.sp-dropdown summary:hover{color:#fff;background:#343434}.sp-actions{display:flex;align-items:center}.sp-languages{display:flex;align-items:center;gap:8px;font-size:10px;white-space:nowrap;margin-left:14px}.sp-languages a{color:#aaa;text-decoration:none}.sp-languages a[aria-current]{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:5px}.sp-toggle{display:none}.sp-mobile[hidden]{display:none}.sp-mobile{background:#111;color:#fff}.sp-toggle:focus-visible,.sp-header a:focus-visible,.sp-mobile a:focus-visible,.sp-mobile summary:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:1190px){.sp-header{height:76px}.sp-desktop,.sp-languages{display:none}.sp-actions{margin-left:auto}.sp-toggle{display:flex;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:7px;background:transparent;border:1px solid #505050;cursor:pointer}.sp-toggle span{width:20px;height:1px;background:#fff}.sp-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}.sp-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}.sp-mobile{position:absolute;left:0;right:0;z-index:49;padding:12px clamp(20px,5vw,60px) 28px;box-shadow:0 35px 50px #0006;max-height:calc(100dvh - 76px);overflow-y:auto}.sp-mobile-list,.sp-mobile .sp-sub{list-style:none;padding:0;margin:0}.sp-mobile .sp-item{border-bottom:1px solid #333}.sp-mobile .sp-item>a,.sp-mobile .sp-dropdown>summary{font-size:14px;letter-spacing:.08em;min-height:48px;padding:14px 4px}.sp-mobile .sp-sub{position:static;max-height:none;min-width:0;box-shadow:none;background:transparent;padding:2px 0 12px 18px;overflow:visible}.sp-mobile .sp-sub li a{font-size:12px;padding:10px 0;color:#c8c8c8}.sp-mobile-languages{display:flex;gap:16px;padding:25px 0 0}.sp-mobile-languages a{color:#fff;font-size:13px;text-decoration:none}}
@media(prefers-reduced-motion:no-preference){.sp-toggle span{transition:transform .2s ease}.sp-item a{transition:background-color .15s ease,color .15s ease}}
.demo{padding:9vw 7vw;min-height:70vh;background:#ededec}.demo h1{font-weight:500;letter-spacing:-.045em;font-size:clamp(46px,8vw,112px);line-height:.98;margin:0}.demo em{font-family:Georgia,serif;font-weight:400;color:#7d7077}.demo p{line-height:1.8;max-width:720px;margin-top:35px}.demo-mark{font-size:11px;letter-spacing:.18em;margin-bottom:42px}.demo-switch{display:flex;gap:8px;margin-top:30px}.demo-switch button{font:inherit;background:#111;color:#fff;border:1px solid #333;padding:12px 16px;cursor:pointer}.demo-switch button[aria-pressed="true"]{background:var(--sp-rose);color:#111;border-color:var(--sp-rose)}

/* SPLENDIDE mobile navigation fix v21
   Keep the desktop navigation unchanged. */
@media (max-width: 1190px) {
  .sp-mobile {
    position: fixed;
    top: 76px;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 8px clamp(20px, 5vw, 60px) 28px;
    z-index: 100;
  }
  .sp-mobile .sp-item > a,
  .sp-mobile .sp-dropdown > summary {
    min-height: 0;
    padding: 12px 4px;
    line-height: 1.35;
    font-size: 13px;
  }
  .sp-mobile .sp-dropdown > summary {
    display: flex;
    list-style: none;
  }
  .sp-mobile .sp-dropdown > summary::-webkit-details-marker { display: none; }
  .sp-mobile .sp-dropdown:not([open]) > .sp-sub { display: none !important; }
  .sp-mobile .sp-dropdown[open] > .sp-sub {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent;
    box-shadow: none;
    padding: 3px 0 12px 18px;
    margin: 0;
  }
  .sp-mobile .sp-dropdown[open] > .sp-sub li { display: list-item; }
  .sp-mobile .sp-dropdown[open] > .sp-sub a {
    display: block;
    color: #d8d8d8;
    font-size: 12px;
    line-height: 1.45;
    padding: 8px 2px;
    white-space: normal;
  }
  .sp-mobile .sp-dropdown[open] > .sp-sub a:hover,
  .sp-mobile .sp-dropdown[open] > .sp-sub a:focus-visible {
    color: #fff;
  }
}


/* SPLENDIDE – mobile header width safeguard, 2026-11-10.
   Scoped to the new sp-* navigation; desktop remains unchanged. */
@media (max-width: 1190px) {
  .sp-header {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: clamp(12px, 3vw, 22px);
    padding-right: clamp(12px, 3vw, 22px);
  }
  .sp-header .sp-brand { min-width: 0; max-width: 100%; flex: 0 1 auto; }
  .sp-header .sp-brand strong { font-size: clamp(16px, 4.7vw, 26px); letter-spacing: .13em; white-space: nowrap; }
  .sp-header .sp-brand small { font-size: clamp(6px, 1.45vw, 9px); letter-spacing: .13em; white-space: nowrap; }
  .sp-header .sp-actions { flex: 0 0 auto; min-width: 0; margin-left: auto; }
  .sp-header .sp-toggle { flex-shrink: 0; }
  .sp-mobile { width: 100%; max-width: 100%; box-sizing: border-box; }
}