:root {
    --font-heading: "Sora", system-ui, sans-serif;
    --font-body: "Outfit", system-ui, sans-serif;
    --font-heading-weight: 700;
  }
  body { margin: 0; text-wrap: pretty; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-weight: 300; font-size: 16px; }
  .btn, .input, label { font-family: var(--font-body) !important; font-weight: 500 !important; letter-spacing: 0.01em; }
  a { color: var(--color-text); text-decoration: none; }
  a:hover { color: color-mix(in srgb, var(--color-text) 60%, transparent); }
  ::selection { background: var(--color-text); color: var(--color-bg); }
  :focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
  .btn-primary { background: var(--color-text) !important; border-color: var(--color-text) !important; color: var(--color-bg) !important; }
  .btn-primary:hover { background: #000 !important; border-color: #000 !important; }
  .btn-ghost { color: var(--color-text); border-color: var(--color-text); }
  .btn-ghost:hover { background: var(--color-text); color: var(--color-bg); }
  [data-hero] .btn-ghost { color: #f3f2f2 !important; border-color: rgba(243,242,242,0.65) !important; }
  [data-hero] .btn-ghost:hover { background: rgba(243,242,242,0.14) !important; }
  @keyframes riseIn { from { opacity: 0; transform: translateY(0.42em); } to { opacity: 1; transform: none; } }
  @keyframes bandRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes bandWord { from { opacity: 0; transform: translateY(0.62em); clip-path: inset(0 0 108% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 -14% 0); } }
  [data-band] [data-bandrule] { transform: scaleX(0); transform-origin: left; }
  [data-band] [data-bandword] { opacity: 0; }
  [data-band][data-shown] [data-bandrule] { animation: bandRule 1700ms cubic-bezier(.22,.61,.36,1) forwards; }
  [data-band][data-shown] [data-bandword] { animation: bandWord 1300ms cubic-bezier(.22,.61,.36,1) forwards; animation-delay: 260ms; }
  [data-band][data-shown] [data-bandword="2"] { animation-delay: 700ms; }
  @media (prefers-reduced-motion: reduce) {
    [data-band] [data-bandrule] { transform: none; }
    [data-band] [data-bandword] { opacity: 1; }
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  [data-gap] { letter-spacing: normal; word-spacing: normal; }
  @media (max-width: 860px) { [data-heroline] { display: none; } }
  [data-quiet] { transition: border-color 300ms ease; }
  [data-quiet]:hover { color: #f3f2f2 !important; border-color: #f3f2f2; }
  [data-quiet] [data-quietmark] { transition: transform 360ms cubic-bezier(.22,.61,.36,1); }
  [data-quiet]:hover [data-quietmark] { transform: translateX(5px); }
  [data-aud] { transition: padding-left 420ms cubic-bezier(.22,.61,.36,1), border-color 420ms ease; }
  [data-aud] h3, [data-aud] p, [data-aud] [data-audmark] { transition: color 320ms ease, transform 420ms cubic-bezier(.22,.61,.36,1); }
  [data-aud]:hover { padding-left: 18px; border-color: rgba(243,242,242,0.6); }
  [data-aud]:hover p { color: rgba(243,242,242,0.92) !important; }
  [data-aud]:hover [data-audmark] { color: #f3f2f2 !important; transform: translateX(6px); }
  [data-rise] { display: inline-block; opacity: 0; animation: riseIn 900ms cubic-bezier(.22,.61,.36,1) forwards; }
  [data-fade] { opacity: 0; animation: fadeIn 900ms ease forwards; }
  [data-tile] img { transition: transform 1100ms cubic-bezier(.22,.61,.36,1), filter 600ms ease; }
  [data-tile]:hover img { transform: scale(1.07); }
  [data-tile]:hover [data-tilebar] { background: var(--color-text); color: var(--color-bg); }
  [data-tilebar] { transition: background 300ms ease, color 300ms ease; }
  [data-enter] { opacity: 0; transform: translateY(10px); transition: opacity 360ms ease, transform 460ms cubic-bezier(.22,.61,.36,1); }
  [data-tile]:hover [data-enter] { opacity: 1; transform: none; }
  [data-enterrule] { transform: scaleX(0); transform-origin: left; transition: transform 560ms cubic-bezier(.22,.61,.36,1) 120ms; }
  [data-enter] { transition: opacity 360ms ease, transform 460ms cubic-bezier(.22,.61,.36,1), font-weight 200ms ease; }
  [data-enter]:hover { font-weight: 700; }
  [data-tile]:hover [data-enterrule] { transform: scaleX(1); }
  [data-entermark] { transition: transform 380ms cubic-bezier(.22,.61,.36,1); }
  [data-tile]:hover [data-entermark] { transform: translateX(5px); }
  [data-tile] [data-rule] { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #079FFC; transform: scaleX(0); transform-origin: left; transition: transform 620ms cubic-bezier(.22,.61,.36,1); }
  [data-tile]:hover [data-rule] { transform: scaleX(1); }
  @media (prefers-reduced-motion: reduce) {
    [data-rise], [data-fade] { animation: none !important; opacity: 1 !important; transform: none !important; }
  }
  @media (max-width: 860px) {
    [data-hero] { min-height: min(92vh, 760px) !important; }
    [data-hero] [data-fade] { grid-template-columns: minmax(0, 1fr) !important; }
  }
  @media (max-width: 1200px) {
    [data-tagline] { display: none !important; }
  }
  @media (max-width: 720px) {
    #showrooms h2 { white-space: normal !important; }
  }
  [data-claim] [data-rule] { transform: scaleX(0); transform-origin: left; transition: transform 1000ms cubic-bezier(.22,.61,.36,1) 120ms; }
  [data-claim][data-shown] [data-rule] { transform: scaleX(1); }
  [data-claim] h3 { transition: letter-spacing 420ms ease; }
  [data-claim]:hover h3 { letter-spacing: -0.01em; }
  [data-claim] [data-crule] { transform: scaleX(0); transform-origin: left; transition: transform 1000ms cubic-bezier(.22,.61,.36,1) 120ms; }
  [data-claim][data-shown] [data-crule] { transform: scaleX(1); }
  [data-claim] h3 { transition: letter-spacing 420ms ease; }
  [data-claim]:hover h3 { letter-spacing: -0.01em; }
  [data-menulink] { transition: color 260ms ease, padding-left 420ms cubic-bezier(.22,.61,.36,1); }
  [data-menulink]:hover { color: #079FFC !important; padding-left: 14px; }
  [data-partlink] { transition: color 260ms ease, padding-left 420ms cubic-bezier(.22,.61,.36,1); }
  [data-partlink]:hover { color: #f3f2f2 !important; padding-left: 10px; }
  [data-partlink] [data-partmark] { transition: transform 380ms cubic-bezier(.22,.61,.36,1); }
  [data-partlink]:hover [data-partmark] { transform: translateX(5px); }
  @media (max-width: 820px) { [data-menugrid] { grid-template-columns: minmax(0, 1fr) !important; } }
  /* Four expanding columns: the hovered one takes the room, the rest give it up */
  [data-stepcell] { transition: flex-grow 820ms cubic-bezier(.22,.61,.36,1); }
  [data-stepcell] [data-sr] { transform: scaleX(0); transition: transform 900ms cubic-bezier(.22,.61,.36,1) 120ms; }
  [data-stepcell][data-shown] [data-sr] { transform: scaleX(1); }
  [data-stepcell] [data-shot] { transition: transform 1500ms cubic-bezier(.22,.61,.36,1); }
  [data-stepcell] [data-veil] { transition: opacity 760ms ease; }
  [data-stepcell] [data-scopy] { transition: max-height 820ms cubic-bezier(.22,.61,.36,1), opacity 560ms ease 120ms; }
  [data-stepcell] [data-stitle] { transition: transform 820ms cubic-bezier(.22,.61,.36,1); }
  [data-stepcell] [data-snum] { opacity: 0; transform: translateY(14px); transition: opacity 900ms ease 240ms, transform 1000ms cubic-bezier(.22,.61,.36,1) 240ms; }
  [data-stepcell][data-shown] [data-snum] { opacity: 1; transform: none; }
  /* only collapse the body copy when the scripts are alive, so a blocked load
     still shows all four descriptions */
  html[data-flair] [data-steprow] [data-scopy] { max-height: 0; opacity: 0; overflow: hidden; }
  [data-steprow]:hover [data-stepcell] { flex-grow: 0.7; }
  [data-stepcell]:hover, [data-stepcell]:focus-within { flex-grow: 2.7 !important; }
  [data-stepcell]:hover [data-shot], [data-stepcell]:focus-within [data-shot] { transform: scale(1.055); }
  [data-stepcell]:hover [data-veil], [data-stepcell]:focus-within [data-veil] { opacity: 0.5; }
  [data-steprow]:hover [data-stepcell]:not(:hover) [data-veil] { opacity: 1; }
  html[data-flair] [data-stepcell]:hover [data-scopy], html[data-flair] [data-stepcell]:focus-within [data-scopy] { max-height: 15em; opacity: 1; }
  [data-stepcell]:hover [data-stitle], [data-stepcell]:focus-within [data-stitle] { transform: translateY(-5px); }
  [data-stepcell]:hover [data-snum], [data-stepcell]:focus-within [data-snum] { color: rgba(7,159,252,0.45) !important; }
  @media (hover: none) {
    [data-steprow] [data-scopy] { max-height: none !important; opacity: 1 !important; }
    [data-stepcell] { flex-grow: 1 !important; }
  }
  @media (max-width: 1100px) { [data-steprow] { flex-wrap: wrap !important; } [data-stepcell] { flex: 1 1 calc(50% - 1px) !important; } }
  @media (max-width: 620px) { [data-stepcell] { flex: 1 1 100% !important; } }
  @media (prefers-reduced-motion: reduce) {
    [data-stepcell], [data-stepcell] [data-shot], [data-stepcell] [data-scopy], [data-stepcell] [data-stitle] { transition: none !important; }
    [data-steprow] [data-scopy] { max-height: none !important; opacity: 1 !important; }
  }
  @media (max-width: 700px) { [data-tilegrid] { grid-template-columns: minmax(0, 1fr) !important; } }
  @media (max-width: 820px) { [data-shop] { grid-template-columns: minmax(0, 1fr) !important; } }
  @media (max-width: 820px) { [data-vidrow] { grid-template-columns: minmax(0, 1fr) !important; } }
  @media (max-width: 1000px) { [data-foot] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
  @media (max-width: 560px) { [data-foot] { grid-template-columns: minmax(0, 1fr) !important; } }
  body[data-menu-open] [data-langswitch] { display: none !important; }
  footer a:hover { color: #f3f2f2 !important; }
  @media (max-width: 880px) {
    [data-step] { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
    [data-aud] { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
    [data-aud] [data-audmark] { color: rgba(243,242,242,0.72) !important; }
  }

  /* Text entrances for the sections before "what makes us different".
     All gated on the scripts being alive, all off under reduced motion. */
  @keyframes maskUp { from { opacity: 0; transform: translateY(0.7em); clip-path: inset(0 0 110% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 -16% 0); } }
  @keyframes wipeRight { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-0.3em); } to { opacity: 1; clip-path: inset(0 -6% 0 0); transform: none; } }
  @keyframes softFocus { from { opacity: 0; filter: blur(7px); transform: translateY(0.4em); } to { opacity: 1; filter: blur(0); transform: none; } }
  html[data-flair] [data-shopline] { opacity: 0; display: inline-block; }
  [data-shop][data-shown] [data-shopline] { animation: maskUp 1250ms cubic-bezier(.22,.61,.36,1) forwards; }
  [data-shop][data-shown] [data-shopline="2"] { animation: wipeRight 1400ms cubic-bezier(.22,.61,.36,1) 320ms forwards; }
  html[data-flair] [data-shopbody] { opacity: 0; }
  [data-shop][data-shown] [data-shopbody] { animation: softFocus 1500ms cubic-bezier(.22,.61,.36,1) 560ms forwards; }
  html[data-flair] [data-vidcap] { opacity: 0; transform: translateY(100%); }
  [data-vid][data-shown] [data-vidcap] { opacity: 1; transform: none; transition: opacity 900ms ease 240ms, transform 1100ms cubic-bezier(.22,.61,.36,1) 240ms; }
  [data-tile] h3 { transition: letter-spacing 1200ms cubic-bezier(.22,.61,.36,1), opacity 900ms ease; }
  html[data-flair] [data-tile]:not([data-shown]) h3 { letter-spacing: 0.28em; opacity: 0.4; }
  @media (prefers-reduced-motion: reduce) {
    [data-shopline], [data-shopbody], [data-vidcap] { opacity: 1 !important; transform: none !important; animation: none !important; clip-path: none !important; filter: none !important; }
    [data-tile] h3 { letter-spacing: 0.1em !important; opacity: 1 !important; }
  }

  /* Offices runs the full width of the grid — the only commercial category, and the
     one worth arriving at after the four residential rooms. */
  [data-tileshot] { aspect-ratio: 5 / 4; }

  /* Six project cards — 3 × 2, so no row is ever left part-filled. */
  @media (max-width: 900px) { [data-workgrid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
  @media (max-width: 620px) { [data-workgrid] { grid-template-columns: minmax(0, 1fr) !important; } }
  [data-menu]:not([data-open]) { display: none !important; }