/* Browser-owned color scheme; no stored or scripted overrides. */
:root {
  color-scheme: light dark;
  --paper: #f6f5f1; --surface: #fcfbf8; --soft: #eceae4;
  --ink: #303032; --muted: #626267; --line: #d1d0c9;
  --accent: #77705e; --focus: #74684e;
  --button: #343436; --button-hover: #454549; --button-text: #fcfbf8;
  --shadow: #292a2726;
  --max: 1180px; --gutter: clamp(1rem,4vw,2rem); --space: clamp(3rem,6vw,6rem);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c1c1e; --surface: #272729; --soft: #303032;
    --ink: #eeede7; --muted: #bfbfc3; --line: #555559;
    --accent: #c3baa3; --focus: #d7cdb3;
    --button: #d8d7d2; --button-hover: #e8e7e2; --button-text: #272729;
    --shadow: #00000045;
  }
}
@supports (color: light-dark(white, black)) {
  :root {
    --paper: light-dark(#f6f5f1,#1c1c1e); --surface: light-dark(#fcfbf8,#272729); --soft: light-dark(#eceae4,#303032);
    --ink: light-dark(#303032,#eeede7); --muted: light-dark(#626267,#bfbfc3); --line: light-dark(#d1d0c9,#555559);
    --accent: light-dark(#77705e,#c3baa3); --focus: light-dark(#74684e,#d7cdb3);
    --button: light-dark(#343436,#d8d7d2); --button-hover: light-dark(#454549,#e8e7e2); --button-text: light-dark(#fcfbf8,#272729);
    --shadow: light-dark(#292a2726,#00000045);
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-block-start: 1.5rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
h1,h2,h3,p { margin-block-start: 0; }
h1,h2,h3 { font-weight: 500; text-wrap: balance; hyphens: auto; }
h1,h2 { letter-spacing: -.035em; }
h1 { font-size: clamp(2.25rem,1.3rem + 3.5vw,4.25rem); line-height: 1.12; margin-block-end: 1.7rem; }
h2 { font-size: clamp(1.875rem,1.15rem + 2.6vw,3.5rem); line-height: 1.16; margin-block-end: 1.2rem; }
p { text-wrap: pretty; }
a { color: var(--ink); text-underline-offset: .25em; }
a,button,select,input,textarea,summary { border-radius: 1.5rem; }
a { box-decoration-break: clone; -webkit-box-decoration-break: clone; }
:where(a,button,select,input,textarea,summary):focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
::selection { background: var(--button); color: var(--button-text); }
.skip-link { position: fixed; inset-inline-start: 1rem; top: -8rem; z-index: 20; max-width: calc(100% - 2rem); background: var(--surface); padding: .7rem 1rem; }
.skip-link:focus { top: 1rem; }
.site-header { max-width: var(--max); margin: auto; min-height: 88px; padding: 1rem var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-block-end: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .08em; min-height: 44px; flex-shrink: 0; text-decoration: none; font-size: 1.45rem; font-weight: 650; letter-spacing: -.035em; }
.brand i { width: .35em; height: 2px; background: var(--accent); }
.site-header nav,.header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
.site-header nav a,footer>div a,.text-link { display: inline-flex; align-items: center; min-height: 44px; padding: .375rem .5rem; }
.site-header nav a,footer a { text-decoration: none; }
.site-header nav a:hover,footer a:hover { text-decoration: underline; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; max-width: 100%; padding: .78rem 1.35rem; border: 1px solid transparent; border-radius: 999px; background: var(--button); color: var(--button-text); text-decoration: none; font: inherit; font-weight: 650; line-height: 1.4; text-align: center; cursor: pointer; box-shadow: 0 2px 3px var(--shadow),0 5px 12px var(--shadow),inset 0 1px 0 #ffffff20; transition: transform 120ms ease,box-shadow 120ms ease; }
.button-small { padding: .55rem 1rem; }
@media (hover: hover) and (pointer: fine) {
  .button:not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(-2px); background: var(--button-hover); box-shadow: 0 4px 6px var(--shadow),0 8px 16px var(--shadow),inset 0 1px 0 #ffffff30; }
}
.button:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px); box-shadow: 0 1px 2px var(--shadow),inset 0 2px 3px #00000018; }
.button:disabled,.button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.hero { max-width: var(--max); margin: auto; padding: var(--space) var(--gutter); display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,.8fr); gap: clamp(2rem,5vw,5rem); align-items: end; }
.hero>*,.principles>*,.booking>*,footer>* { min-width: 0; }
.eyebrow { margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .1em; font-size: .875rem; font-weight: 750; color: var(--muted); }
.lead { font-size: clamp(1.0625rem,1rem + .4vw,1.23rem); max-width: 680px; color: var(--muted); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-block-start: 2.2rem; }
.text-link { font-weight: 650; gap: .35rem; }
.fact-panel { border-block-start: 3px solid var(--accent); padding-block-start: 1.2rem; }
.fact-kicker { font-weight: 700; }
.fact-panel dl { margin: 0; }
.fact-panel dl div { padding: 1rem 0; border-block-start: 1px solid var(--line); }
dt { font-size: .875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
dd { margin: .15rem 0 0; font-weight: 650; }
.section { max-width: var(--max); margin: auto; padding: var(--space) var(--gutter); }
.section-heading { max-width: 720px; margin-block-end: clamp(2rem,5vw,4rem); }
.section-heading>p:last-child { font-size: 1.12rem; color: var(--muted); }
.service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 1.5rem; overflow: clip; }
.service-grid article { background: var(--surface); padding: clamp(1.25rem,3vw,2.3rem); min-height: 300px; }
.service-grid article>span { color: var(--accent); font-weight: 750; font-size: .875rem; }
.service-grid h3 { font-size: clamp(1.25rem,1rem + .8vw,1.65rem); line-height: 1.2; margin: 3.5rem 0 1rem; }
.service-grid p { color: var(--muted); }
.principles,.booking { padding: var(--space) max(var(--gutter),calc((100% - var(--max))/2 + var(--gutter))); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(2rem,5vw,5rem); }
.principles { background: #303032; color: #eeede7; }
.principles .eyebrow { color: #c2c3b9; }
.principle-copy { border-block-start: 1px solid #696c61; }
.principle-copy p { padding: 1.45rem 0; border-block-end: 1px solid #696c61; font-size: 1.08rem; }
.principle-copy strong { display: block; color: #d0c6ac; margin-block-end: .3rem; }
.process ol { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--line); counter-reset: step; }
.process li { display: grid; grid-template-columns: 2.2rem 12rem minmax(0,1fr); gap: 1.2rem; padding: 1.5rem 0; border-block-end: 1px solid var(--line); counter-increment: step; }
.process li::before { content: "0" counter(step); color: var(--accent); font-size: .875rem; font-weight: 750; }
.process li span { color: var(--muted); }
.booking { background: var(--soft); align-items: start; }
.booking-card { background: var(--surface); padding: clamp(1.25rem,3vw,2rem); border: 1px solid var(--line); border-block-start: 3px solid var(--accent); border-radius: 1.5rem; }
.notice { padding-block-end: 1.5rem; border-block-end: 1px solid var(--line); color: var(--muted); }
.notice strong { display: block; color: var(--ink); font-size: 1.08rem; margin-block-end: .35rem; }
.booking-button { width: 100%; margin-block-start: .5rem; }
.booking-status { margin: 1rem 0 0; padding: 1rem; border: 1px solid var(--accent); border-radius: 1rem; font-size: .9375rem; }
.terms-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4rem; border-block-start: 1px solid var(--line); padding-block-start: 2rem; }
.terms-grid p { color: var(--muted); }
footer { max-width: var(--max); margin: auto; padding: 2.5rem var(--gutter); display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 2rem; align-items: center; border-block-start: 1px solid var(--line); font-size: .9375rem; }
.brand-footer { font-size: 1.2rem; }
footer>div { display: flex; flex-wrap: nowrap; gap: .5rem; }
footer>p:not(.legal) { margin: 0; }
.legal { margin: 0; color: var(--muted); grid-column: 1/-1; }
@media (max-width: 60rem) {
  .hero,.principles,.booking,.service-grid { grid-template-columns: minmax(0,1fr); }
  .hero { gap: 2.5rem; }
  .service-grid article { min-height: 0; }
  .service-grid h3 { margin-block-start: 1.5rem; }
  .terms-grid { gap: 2rem; }
  footer { display: flex; flex-wrap: wrap; }
  footer>p:not(.legal) { flex: 1 1 16rem; }
  footer .legal { flex-basis: 100%; }
  .site-header nav { order: 3; flex-basis: 100%; justify-content: space-between; }
}
@media (max-width: 40rem) {
  .header-actions { justify-content: space-between; }
  .site-header { gap: .75rem; }
  .site-header nav { gap: .25rem; }
  .site-header nav a { font-size: .875rem; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .text-link { align-self: flex-start; }
  .terms-grid { grid-template-columns: minmax(0,1fr); }
  .process li { grid-template-columns: 1.5rem minmax(0,1fr); gap: .75rem; }
  .process li span { grid-column: 2; }
  .brand { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button,.button:hover,.button:active { transform: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .button { border-color: ButtonText; box-shadow: none; }
  :where(a,button,select):focus-visible { outline-color: Highlight; }
}
@media print {
  :root { color-scheme: light; }
  body { background: white; color: black; }
  .principles { background: white; color: black; }
  .principles .eyebrow,.principle-copy strong { color: black; }
}

/* A restrained satin-metal highlight on existing structural accents only. */
.brand i { background: linear-gradient(105deg,#827d6c 0%,#c7c2b1 48%,#918b78 100%); }
.fact-panel { border-block-start: 0; position: relative; }
.fact-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(100deg,#827d6c,#c7c2b1 48%,#918b78); }
.booking-card { border-block-start-width: 1px; }

.call-videos,.call-exchange { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,22rem),1fr)); gap: 1.5rem; margin-block: 1.5rem; }
.call-videos figure { margin: 0; min-width: 0; }
.call-videos video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #111; border-radius: 1.5rem; }
.call-videos figcaption { color: var(--muted); margin-block-start: .5rem; }
.call-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.call-exchange label { display: block; margin-block-end: .5rem; }
.call-exchange textarea { display: block; resize: vertical; width: 100%; min-height: 6rem; padding: 1rem; margin-block-end: 1rem; background: var(--surface); color: var(--ink); border: 1px solid var(--muted); font: inherit; }
@supports (container-type: inline-size) { .call-exchange>div { container-type: inline-size; } }
@media print { #videosamtal { display: none; } .header-actions,.skip-link { display:none !important; } }

/* Connected calls occupy the viewport; the local feed floats above the remote feed. */
.call-view { color: var(--ink); background: transparent; border: 0; padding: 0; margin: 0; max-width: none; max-height: none; width: 100%; }
.call-view:not([open]) { display: block; position: static; }
.call-view #minimizeCall { display: none; }
.call-view[open] { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; background: #111; color: #f5f5f5; display: flex; flex-direction: column; overflow: auto; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.call-view::backdrop { background: #111; }
html:has(.call-view[open]) { overflow: hidden; }
.call-view[open] .call-videos { position: relative; display: block; flex: 1; min-height: 0; margin: 0; }
.call-view[open] .participant-view { width: 100%; height: 100%; }
.call-view[open] .participant-view video { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: contain; }
.call-view[open] .participant-view figcaption { position: absolute; left: 1rem; top: .75rem; margin: 0; padding: .25rem .65rem; background: #111c; color: #fff; border-radius: .5rem; }
.call-view[open] .self-view { position: absolute; z-index: 1; right: clamp(.75rem,2vw,1.5rem); top: clamp(.75rem,2vw,1.5rem); width: clamp(7rem,22vw,15rem); max-width: 35%; border: 1px solid #ffffff60; border-radius: 1rem; background: #111; overflow: hidden; box-shadow: 0 4px 20px #0006; }
.call-view[open] .self-view video { border-radius: 0; object-fit: contain; }
.call-view[open] .self-view figcaption { margin: 0; padding: .2rem .5rem; color: #fff; font-size: .75rem; }
.call-view[open] .call-actions { flex-shrink: 0; justify-content: center; padding: .75rem 1rem; gap: .5rem; background: #1c1c1e; }
.call-view[open] .call-actions .button { background: #eee; color: #222; font-size: .875rem; padding: .6rem .9rem; }
.call-view[open] .call-actions .button:focus-visible { outline-color: white; }
.call-view[open] #createCall,.call-view[open] #expandCall { display: none; }
.call-view[open] #minimizeCall { display: inline-flex; }
.call-view[open] #endCall { background: #b42323; color: white; }
.call-view[open] #callStatus { flex-shrink: 0; font-size: .8125rem; text-align: center; padding: 0 1rem .5rem; margin: 0; background: #1c1c1e; }
@media (max-height: 30rem) { .call-view[open] .self-view { width: 7rem; } .call-view[open] #callStatus { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
#account input:not([type=checkbox]),#account select { display: block; max-width: 100%; width: min(100%,30rem); margin: .5rem 0 1rem; padding: .75rem 1rem; background: var(--surface); color: var(--ink); border: 1px solid var(--muted); font: inherit; }
#account form { margin-block-end: 2rem; }
#account h3 { margin-block-start: 2rem; }
#account input[type=checkbox],#preflight input[type=checkbox],#admissionPanel input { width: 1.25rem; height: 1.25rem; accent-color: var(--button); }
#preflight label,#admissionPanel label { display: block; margin: 1rem 0; }
#previewVideo { display: block; width: min(100%,30rem); aspect-ratio: 16/9; object-fit: contain; background: #111; border-radius: 1rem; margin-block: 1rem; }
#micLevel { display: block; width: min(100%,30rem); height: 1.5rem; }
#visitActions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1.5rem; }
.call-view[open] #peerMediaStatus { margin: 0; padding: .25rem 1rem; background: #1c1c1e; font-size: .8125rem; text-align: center; }
#moveSelf { color: inherit; background: transparent; border: 0; cursor: move; touch-action: none; font: inherit; width: 100%; padding: .5rem; min-height: 44px; }
.call-view:not([open]) .self-view { position: static; }
.call-view[open] .button[aria-pressed=true] { background: #444; color: white; border-color: #eee; }
#afterCall { padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; }
