:root { --bg: oklch(99% 0.002 240); --surface: oklch(100% 0 0); --fg: oklch(18% 0.012 250); --muted: oklch(54% 0.012 250); --border: oklch(92% 0.005 250); --accent: oklch(58% 0.18 255); --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --success: oklch(62% 0.17 145); --warn: oklch(78% 0.16 75); --danger: oklch(57% 0.20 25); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background-color: var(--bg); color: var(--fg); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
::selection { background-color: color-mix(in oklch, var(--accent) 20%, transparent); color: var(--fg); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
p { color: var(--muted); }
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.section-spacing { padding: 100px 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 14px; font-weight: 550; letter-spacing: 0.02em; text-decoration: none; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; }
.btn-primary { background-color: var(--accent); color: white; border: 1px solid transparent; box-shadow: 0 4px 12px color-mix(in oklch, var(--accent) 15%, transparent); }
.btn-primary:hover { background-color: color-mix(in oklch, var(--accent) 90%, black); transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in oklch, var(--accent) 25%, transparent); }
.btn-secondary { background-color: var(--surface); color: var(--fg); border: 1px solid var(--border); }
.btn-secondary:hover { background-color: var(--bg); border-color: color-mix(in oklch, var(--border) 60%, var(--fg)); }
header { position: sticky; top: 0; z-index: 100; background-color: color-mix(in oklch, var(--surface) 80%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); height: auto; min-height: 72px; padding: 16px 0; display: flex; align-items: center; }
.nav-wrap { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.logo-mark { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.logo-text span { color: var(--accent); }
.nav-links { display: flex; gap: 32px; list-style: none; align-items: center; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; transition: color 0.2s ease; }
.nav-links a:hover { color: var(--fg); }
.nav-actions { display: flex; gap: 12px; align-items: center; }
.hero { position: relative; padding: 120px 0 80px 0; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
    @media (max-width: 991px) {.hero { grid-template-columns: 1fr; text-align: center; gap: 48px; padding-top: 80px; }
.hero-actions { justify-content: center; }
    }.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background-color: color-mix(in oklch, var(--accent) 8%, transparent); border: 1px solid color-mix(in oklch, var(--accent) 15%, transparent); color: var(--accent); padding: 6px 12px; border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 24px; }
.hero-eyebrow-dot { width: 6px; height: 6px; background-color: var(--accent); border-radius: 50%; animation: pulse 2s infinite; }
    @keyframes pulse {0% { transform: scale(0.95); box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 50%, transparent); }
70% { transform: scale(1); box-shadow: 0 0 0 6px color-mix(in oklch, var(--accent) 0%, transparent); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 0%, transparent); }
    }.hero-title { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 24px; color: var(--fg); }
.hero-title span { background: linear-gradient(135deg, var(--fg) 50%, color-mix(in oklch, var(--accent) 70%, var(--fg)) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-desc { font-size: 18px; margin-bottom: 36px; max-width: 580px; }
    @media (max-width: 991px) {.hero-desc { margin-left: auto; margin-right: auto; }
    }.hero-actions { display: flex; gap: 16px; margin-bottom: 48px; }
.hero-visual { position: relative; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.02); display: flex; flex-direction: column; gap: 24px; }
.visual-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 16px; }
.visual-title { font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.visual-status-pill { font-family: var(--font-mono); font-size: 11px; background-color: color-mix(in oklch, var(--success) 10%, transparent); color: var(--success); padding: 2px 8px; border-radius: 4px; display: flex; align-items: center; gap: 6px; }
.visual-status-dot { width: 5px; height: 5px; background-color: var(--success); border-radius: 50%; }
.visual-viewport { position: relative; aspect-ratio: 16/10; background-color: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.viewport-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.5; }
.robotic-path-container { position: relative; width: 80%; height: 80%; z-index: 1; display: flex; align-items: center; justify-content: center; }
.crown-mesh { width: 140px; height: 140px; stroke: var(--accent); stroke-width: 1.5; fill: none; opacity: 0.85; transition: all 0.3s ease; filter: drop-shadow(0 0 8px color-mix(in oklch, var(--accent) 30%, transparent)); }
.laser-beam { position: absolute; top: 10%; left: 50%; width: 2px; height: 40%; background: linear-gradient(to bottom, transparent, var(--accent)); opacity: 0.8; transform-origin: top center; animation: laser-sweep 4s infinite ease-in-out; display: none; }
.laser-point { position: absolute; width: 8px; height: 8px; background-color: var(--accent); border-radius: 50%; filter: blur(2px); box-shadow: 0 0 10px 4px var(--accent); display: none; }
    @keyframes laser-sweep {0% { transform: rotate(-25deg); height: 45%; }
50% { transform: rotate(25deg); height: 35%; }
100% { transform: rotate(-25deg); height: 45%; }
    }.robot-hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; font-family: var(--font-mono); }
.hud-stat { background-color: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; text-align: center; }
.hud-label { font-size: 9px; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; letter-spacing: 0.05em; }
.hud-value { font-size: 13px; font-weight: 600; color: var(--fg); }
.stats-row { display: flex; justify-content: space-around; gap: 24px; border-top: 1px solid var(--border); padding-top: 48px; margin-top: 48px; }
.stat-box { text-align: left; }
.stat-number { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--fg); line-height: 1; margin-bottom: 8px; }
.stat-label { font-size: 13px; color: var(--muted); font-weight: 550; letter-spacing: 0.02em; }
    @media (max-width: 767px) {.stats-row { flex-direction: column; gap: 32px; align-items: center; text-align: center; }
.stat-box { text-align: center; }
    }.flow-section { background-color: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-title-area { text-align: center; max-width: 680px; margin: 0 auto 64px auto; }
.section-title { font-size: 36px; margin-bottom: 16px; }
.flow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
    @media (max-width: 991px) {.flow-grid { grid-template-columns: 1fr; gap: 48px; }
    }.flow-steps { display: flex; flex-direction: column; gap: 16px; }
.flow-step-card { background-color: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; display: flex; gap: 20px; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.flow-step-card.active { border-color: var(--accent); background-color: var(--surface); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03); }
.flow-step-num { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--muted); background-color: var(--surface); border: 1px solid var(--border); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s ease; }
.flow-step-card.active .flow-step-num { background-color: var(--accent); color: white; border-color: var(--accent); }
.flow-step-info h3 { font-size: 18px; margin-bottom: 8px; }
.flow-step-info p { font-size: 14px; }
.flow-preview { background-color: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; aspect-ratio: 1/1; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden; }
.preview-graphic { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.graphic-state { display: none; flex-direction: column; align-items: center; text-align: center; animation: fadeIn 0.4s ease forwards; }
.graphic-state.active { display: flex; }
.graphic-svg { width: 160px; height: 160px; margin-bottom: 32px; stroke: var(--accent); fill: none; stroke-width: 1.5; }
    @keyframes fadeIn {from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
    }.specs-section { background-color: var(--bg); }
.tabs-container { margin-top: 48px; }
.tabs-nav { display: flex; justify-content: center; gap: 8px; border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 32px; }
.tab-trigger { background: none; border: none; padding: 10px 20px; font-family: var(--font-body); font-size: 14px; font-weight: 550; color: var(--muted); cursor: pointer; border-radius: var(--radius-sm); transition: all 0.2s ease; }
.tab-trigger:hover { color: var(--fg); background-color: var(--surface); }
.tab-trigger.active { color: var(--fg); background-color: var(--surface); border: 1px solid var(--border); }
.tab-content { display: none; animation: fadeIn 0.3s ease; }
.tab-content.active { display: block; }
.data-table-container { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
.data-table th, .data-table td { padding: 16px 24px; border-bottom: 1px solid var(--border); }
.data-table th { background-color: color-mix(in oklch, var(--bg) 50%, var(--surface)); font-weight: 600; color: var(--fg); text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; }
.data-table tr:last-child td { border-bottom: none; }
.table-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; font-family: var(--font-mono); }
.badge-accent { background-color: color-mix(in oklch, var(--accent) 8%, transparent); color: var(--accent); border: 1px solid color-mix(in oklch, var(--accent) 15%, transparent); }
.integration-section { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background-color: var(--surface); }
.integration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
    @media (max-width: 991px) {.integration-grid { grid-template-columns: 1fr; gap: 48px; }
    }.integration-title { font-size: 32px; margin-bottom: 24px; }
.integration-list { list-style: none; display: flex; flex-direction: column; gap: 20px; margin-bottom: 36px; }
.integration-item { display: flex; gap: 16px; }
.integration-icon { flex-shrink: 0; width: 24px; height: 24px; stroke: var(--accent); stroke-width: 2; fill: none; }
.dashboard-preview { background-color: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.02); font-family: var(--font-body); }
.dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.dash-user { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.dash-avatar { width: 24px; height: 24px; border-radius: 50%; background-color: var(--border); }
.dash-body { display: flex; flex-direction: column; gap: 12px; }
.dash-row { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; display: flex; justify-content: space-between; align-items: center; }
.dash-row-info { display: flex; flex-direction: column; gap: 4px; }
.dash-case-id { font-family: var(--font-mono); font-size: 12px; font-weight: 550; }
.dash-patient { font-size: 13px; color: var(--muted); }
.cta-section { background-color: var(--bg); text-align: center; }
.card-form-wrapper { max-width: 600px; margin: 0 auto; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; text-align: left; box-shadow: 0 20px 40px rgba(0,0,0,0.02); }
.form-group { margin-bottom: 24px; }
.form-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--fg); text-transform: uppercase; letter-spacing: 0.05em; }
.form-control { width: 100%; background-color: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; font-family: var(--font-body); font-size: 14px; color: var(--fg); transition: all 0.2s ease; }
.form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 15%, transparent); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    @media (max-width: 576px) {.form-row { grid-template-columns: 1fr; }
    }footer { background-color: var(--surface); border-top: 1px solid var(--border); padding: 60px 0; font-size: 13px; color: var(--muted); }
.footer-wrap { display: flex; justify-content: space-between; align-items: center; }
    @media (max-width: 767px) {.footer-wrap { flex-direction: column; gap: 20px; text-align: center; }
    }.svg-line-art { stroke-linecap: round; stroke-linejoin: round; }
.logo img { height: 44px; width: auto; display: block; }
.solutions-section { background-color: var(--bg); border-top: 1px solid var(--border); }
.solutions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; }
.solution-card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.01); transition: transform 0.2s ease, border-color 0.2s ease; }
.solution-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.solution-badge { display: inline-block; font-size: 11px; font-weight: 600; color: var(--accent); background-color: color-mix(in oklch, var(--accent) 8%, transparent); padding: 4px 10px; border-radius: 100px; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.05em; align-self: flex-start; }
.solution-card h3 { font-size: 24px; margin-bottom: 12px; color: var(--fg); }
.solution-card p { font-size: 15px; color: var(--muted); margin-bottom: 24px; }
.solution-list { list-style: none; margin-bottom: 32px; display: flex; flex-direction: column; gap: 12px; }
.solution-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--fg); }
.solution-list svg { flex-shrink: 0; stroke: var(--accent); margin-top: 3px; }
.solution-actions { display: flex; gap: 12px; }
.comparison-section { background-color: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
.comparison-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; }
.comparison-card.traditional { background-color: color-mix(in oklch, var(--muted) 4%, transparent); border-style: dashed; }
.comparison-card.robotic { background-color: var(--bg); border-color: var(--accent); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02); }
.comparison-card h3 { font-size: 20px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.comparison-card.traditional h3 { color: var(--muted); }
.comparison-card.robotic h3 { color: var(--fg); }
.comparison-list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.comparison-list li { display: flex; gap: 12px; font-size: 14px; line-height: 1.5; }
.comparison-list svg { flex-shrink: 0; margin-top: 2px; }
.clinic-section { background-color: var(--bg); border-bottom: 1px solid var(--border); }
.clinic-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.seniors-promo-box { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; margin-top: 32px; position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.01); }
.seniors-promo-box::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background-color: var(--accent); }
.seniors-badge-img { width: 80px; height: auto; flex-shrink: 0; object-fit: contain; }
.seniors-text h4 { font-size: 18px; margin-bottom: 8px; color: var(--fg); }
.seniors-text p { font-size: 14px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
.seniors-text strong { color: var(--fg); }
.clinic-card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.sinter-container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.sinter-framework-bg { stroke: var(--border); stroke-width: 1.5; fill: none; opacity: 0.25; }
.sinter-framework-active { stroke: var(--accent); stroke-width: 2.5; fill: none; filter: drop-shadow(0 0 6px var(--accent)); clip-path: inset(100% 0 0 0); transition: clip-path 0.08s linear; }
.sinter-laser-line { position: absolute; left: 10%; width: 80%; height: 2px; background-color: var(--accent); box-shadow: 0 0 8px 3px var(--accent), 0 0 16px 6px color-mix(in oklch, var(--accent) 50%, transparent); opacity: 0; pointer-events: none; transition: top 0.08s linear, opacity 0.2s ease; z-index: 10; }
    @media (max-width: 991px) {.solutions-grid, .comparison-grid, .clinic-grid { grid-template-columns: 1fr; gap: 32px; }
    }
  

:root { --text-secondary: color-mix(in oklch, var(--fg) 34%, var(--muted)); }
html,body { overflow-x: clip; }
html { scroll-padding-top: 168px; }
p, .nav-links a, .stat-label, .flow-step-info p, .solution-card p { color: var(--text-secondary); }
a,button { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 5px; }
.form-control:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 500; padding: 12px 20px; background: var(--fg); color: var(--surface); }
.skip-link:focus { top: 12px; }
.btn { min-height: 44px; gap: 10px; }
.btn:active { transform: translateY(1px); }
.hero-title span { background: none; -webkit-text-fill-color: currentColor; }
.hero-eyebrow { color: var(--text-secondary); background: var(--surface); border-color: var(--border); letter-spacing: .08em; font-size: 11px; }
.hero-eyebrow-dot { background: var(--fg); animation: none; }
.hero,.flow-grid,.integration-grid,.clinic-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); }
.hero { gap: clamp(24px,4vw,64px); padding-top: 88px; }
.hero-content { min-width: 0; }
.hero-title { text-wrap: balance; }
.hero-actions { flex-wrap: wrap; }
.hero-visual { padding: clamp(20px,2.5vw,32px); min-width: 0; }
.visual-header { gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.visual-title { font-size: 12px; letter-spacing: .08em; display: block; color: var(--fg); }
.demo-label { display: block; font: 11px/1.6 var(--font-body); letter-spacing: .02em; text-transform: none; color: var(--text-secondary); margin-top: 3px; }
.visual-status-pill { font-size: 9px; letter-spacing: .06em; min-height: 24px; }
.simulation-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-secondary); margin-top: -14px; }
.simulation-toolbar span { max-width: 23ch; }
.simulation-toolbar button { border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--fg); min-height: 44px; padding: 6px; font-size: 11px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.simulation-toolbar button:hover { background: var(--border); }
.simulation-toolbar button:disabled { cursor: default; opacity: .65; }
.hud-label { font-size: 10px; letter-spacing: .06em; color: var(--text-secondary); }
.hud-value { font-size: 12px; }
.hud-stat { padding: 10px 4px; }
.hero-visual .visual-status-pill { color: var(--fg) !important; background: var(--bg) !important; }
.visual-status-dot { background: var(--fg) !important; }
.nav-links { gap: clamp(16px,2vw,28px); }
.nav-links a { min-height: 44px; display: flex; align-items: center; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--fg); text-decoration: underline; text-underline-offset: 7px; }
.portal-link { padding: 10px 16px; white-space: nowrap; }
.logo img { object-fit: contain; max-width: 100%; }
.logo { flex-shrink: 0; }
.menu-toggle { display: none; }
.nav-wrap { gap: 20px; }
.section-kicker { display: block; font: 11px/1.5 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 20px; }
.work-intro { background: var(--surface); border-top: 1px solid var(--border); }
.work-intro-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px 64px; align-items: center; }
.work-intro .section-title { font-size: clamp(32px,3.5vw,44px); margin-bottom: 0; }
.work-intro p { max-width: 48ch; margin-bottom: 24px; }
.text-link { display: inline-flex; gap: 24px; min-height: 44px; align-items: center; color: var(--fg); text-decoration: underline; text-underline-offset: 5px; font-size: 14px; font-weight: 550; }
.text-link:hover { text-decoration-thickness: 2px; }
.text-link span { transition: transform .25s; }
.text-link:hover span { transform: translate(2px,-2px); }
.work-collection-links { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--border); margin-top: 16px; }
.work-collection-links a { display: flex; align-items: center; gap: 16px; padding: 24px 0; margin-right: 32px; color: var(--fg); text-decoration: none; font-size: 14px; border-bottom: 1px solid var(--border); transition: border-color .2s; }
.work-collection-links a:hover { border-color: var(--fg); }
.work-collection-links a span:first-child { color: var(--text-secondary); font: 11px var(--font-mono); }
.work-collection-links a span:last-child { margin-left: auto; }
.flow-step-card:hover { border-color: var(--fg); }
.flow-step-card.active { border-color: var(--fg); }
.flow-step-card.active .flow-step-num { background: var(--fg); border-color: var(--fg); color: var(--surface); }
.graphic-state.active .graphic-svg { animation: process-draw 1.1s ease both; stroke-dasharray: 120; }
@keyframes process-draw {from { stroke-dashoffset: 120; opacity: .25; }
to { stroke-dashoffset: 0; opacity: 1; }
 }.reveal-in { animation: section-reveal .75s cubic-bezier(.2,.65,.3,1) both; }
@keyframes section-reveal {from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
 }.solution-badge { color: var(--fg); background: var(--bg); letter-spacing: .08em; }
.solution-list svg,.integration-icon { stroke: var(--fg); }
.solution-card:hover { border-color: var(--fg); }
.solution-actions { flex-wrap: wrap; }
.solution-actions .btn { flex: 1; }
.seniors-promo-box::before { content: none; }
.solution-actions .btn-primary { background: var(--fg); color: var(--surface); box-shadow: none; }
.solution-actions .btn-primary:hover { background: oklch(from var(--fg) calc(l - .08) c h); }
.data-table th { letter-spacing: .07em; }
.form-label { letter-spacing: .07em; }
.tabs-nav { flex-wrap: wrap; }
.dash-header,.dash-row { flex-wrap: wrap; gap: 12px; }
.dash-row-info { min-width: 0; }
.dash-patient { overflow-wrap: anywhere; }
.dash-header .badge { background: var(--surface); color: var(--fg); border-color: var(--border); }
.footer-wrap { gap: 32px; align-items: flex-start; }
.footer-wrap > div:last-child { flex-wrap: wrap; flex-shrink: 0; max-width: 250px; gap: 8px 20px !important; }
footer a { display: inline-flex; align-items: center; min-height: 44px; }
footer a:hover { color: var(--fg) !important; text-decoration: underline !important; }
@media (max-width:1320px) {.menu-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--fg); font-size: 13px; cursor: pointer; margin-left: auto; }
.menu-toggle:hover { border-color: var(--fg); }
.menu-toggle span { font-size: 20px; transition: transform .2s; }
.menu-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
#site-navigation { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 16px 24px 24px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 12px 20px color-mix(in oklch,var(--fg) 6%,transparent); }
#site-navigation.is-open { display: block; }
.nav-links { display: grid; gap: 0; }
.nav-links a { padding: 8px 0; min-height: 48px; border-bottom: 1px solid var(--border); }
}
@media(max-width:991px) {.hero,.flow-grid,.integration-grid,.clinic-grid { grid-template-columns: minmax(0,1fr); }
.hero { padding-top: 56px; }
.hero-visual { width: 100%; max-width: 600px; margin: auto; text-align: left; }
.work-intro-grid { gap: 32px; }
 }
@media(max-width:767px) {.section-spacing { padding: 64px 0; }
.section-title { font-size: 30px; }
.section-title-area { margin-bottom: 36px; }
.stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.stat-box { text-align: left; }
.stat-number { font-size: 32px; }
.work-intro-grid { grid-template-columns: 1fr; }
.work-collection-links { grid-template-columns: 1fr; }
.work-collection-links a { margin-right: 0; }
.solution-card,.clinic-card { padding: 24px; }
.flow-preview { padding: 24px; }
.footer-wrap > div:last-child { max-width: none; justify-content: center; }
.data-table thead { display: none; }
.data-table tr { display: block; padding: 16px; border-bottom: 1px solid var(--border); }
.data-table td { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 16px; padding: 8px 0; border: 0; overflow-wrap: anywhere; }
.data-table td::before { content: attr(data-label); font: 12px/1.5 var(--font-body); color: var(--text-secondary); }
.data-table td > * { max-width: 100%; }
.data-table td .badge { justify-self: start; }
.data-table-container { overflow: visible; }
.card-form-wrapper { padding: 24px; }
.seniors-promo-box { flex-wrap: wrap; padding: 24px; }
 }
@media(max-width:480px) {.container { padding-left: 20px; padding-right: 20px; }
.nav-wrap { gap: 8px; }
.logo img { width: 126px; height: auto; }
.menu-toggle { padding: 8px; gap: 8px; font-size: 12px; }
.portal-link { padding: 8px 10px; font-size: 12px; }
.portal-link svg { display: none; }
.hero-title { font-size: 40px; }
.hero-desc { font-size: 16px; }
.hero-actions { gap: 12px; margin-bottom: 12px; }
.hero-actions .btn { width: 100%; }
.hero-visual { padding: 16px; }
.robot-hud { gap: 6px; }
.hud-label { font-size: 9px; }
.hud-value { font-size: 11px; }
.flow-step-card { padding: 20px 16px; gap: 12px; }
.tab-trigger { flex: 1 1 40%; padding: 10px; }
.comparison-card { padding: 24px; }
 }
@media(prefers-reduced-motion:reduce) {*,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
 }


.sinter-spark { position: absolute; width: 3px; height: 3px; background-color: white; border-radius: 50%; box-shadow: 0 0 6px var(--accent), 0 0 12px var(--accent); opacity: 0; pointer-events: none; animation: fly-sparks 0.5s ease-out forwards; z-index: 12; }
      @keyframes fly-sparks {0% { transform: translate(0, 0) scale(1.5); opacity: 1; }
100% { transform: translate(var(--x), var(--y)) scale(0); opacity: 0; }
      }
    /* Shared multi-page layouts. The original Proslab visual tokens remain bound above. */
[hidden] { display:none !important; } h1,h2,h3 { text-wrap:balance; } a { color:var(--fg); }
.site-footer { padding:48px 0 24px; } .footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; }
.footer-grid h2 { font-size:18px; margin-bottom:16px; } .footer-grid p { max-width:42ch; font-size:14px; }
.footer-grid nav { display:flex; flex-direction:column; align-items:flex-start; } .footer-grid a { color:var(--fg); min-height:44px; text-decoration:none; font-size:14px; } .footer-bottom { margin-top:32px; border-top:1px solid var(--border); padding-top:24px; font-size:12px; color:var(--text-secondary); }
.breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding-top:28px; font-size:12px; color:var(--text-secondary); } .breadcrumbs a { display:inline-flex; align-items:center; min-height:44px; text-underline-offset:4px; }
.page-hero { padding:48px 0 64px; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:64px; align-items:end; }
.page-hero h1 { font-size:clamp(40px,5vw,64px); line-height:1.08; letter-spacing:-.03em; font-weight:600; max-width:17ch; }
.page-hero p { max-width:49ch; font-size:18px; } .page-hero .text-link { margin-top:20px; }
.eyebrow { font:11px/1.5 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--text-secondary); display:block; margin-bottom:20px; }
.page-section { padding:64px 0; border-top:1px solid var(--border); } .page-section.on-surface { background:var(--surface); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:32px; } .section-heading h2 { font-size:clamp(28px,3vw,36px); margin-bottom:12px; } .section-heading p { max-width:58ch; }
.product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.product-card { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius-md); padding:32px; background:var(--surface); transition:transform .25s,border-color .25s; }
.product-card:hover { transform:translateY(-3px); border-color:var(--fg); } .product-card h3 { font-size:26px; margin-bottom:16px; } .product-card p { font-size:15px; max-width:52ch; margin-bottom:20px; } .product-card .text-link { margin-top:auto; align-self:flex-start; } .product-index { font:11px var(--font-mono); letter-spacing:.08em; color:var(--text-secondary); display:block; margin-bottom:28px; }
.split-content { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:start; } .split-content h2 { font-size:32px; margin-bottom:20px; } .split-content h3 { font-size:20px; margin-bottom:12px; } .split-content p + p { margin-top:16px; }
.detail-list { list-style:none; padding:0; margin:24px 0 0; } .detail-list li { border-top:1px solid var(--border); padding:20px 0; } .detail-list strong { display:block; font-weight:600; margin-bottom:6px; } .detail-list p { font-size:15px; }
.info-panel { padding:32px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); } .info-panel h2 { font-size:26px; }
.process-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; list-style:none; padding:0; margin:32px 0 0; }
.process-strip li { border-top:1px solid var(--border); padding-top:24px; } .process-strip h3 { font-size:21px; margin:12px 0; } .process-strip p { font-size:15px; }
.work-contact { display:flex; justify-content:space-between; align-items:center; gap:32px; padding:48px 0; border-top:1px solid var(--border); } .work-contact h2 { font-size:28px; margin-bottom:12px; } .work-contact p { max-width:62ch; font-size:15px; } .work-contact .btn { flex-shrink:0; }
.filter-bar { display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:12px 0; margin-bottom:48px; }
.filters { display:flex; flex-wrap:wrap; gap:8px; } .filter { border:1px solid transparent; border-radius:var(--radius-sm); min-height:44px; padding:10px 14px; background:transparent; color:var(--text-secondary); font-size:13px; letter-spacing:.02em; cursor:pointer; }
.filter:hover { border-color:var(--fg); color:var(--fg); } .filter[aria-pressed="true"] { background:var(--fg); color:var(--surface); } .filter[aria-pressed="true"]:hover { background:oklch(from var(--fg) calc(l - .08) c h); color:var(--surface); }
.collection-count { font:11px/1.5 var(--font-mono); color:var(--text-secondary); white-space:nowrap; }
.product-collection { margin-bottom:56px; } .collection-top { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; } .collection-top h2 { font-size:28px; margin-bottom:8px; } .collection-top p { max-width:58ch; font-size:14px; } .collection-top .text-link { flex-shrink:0; }
.photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.work-card { min-width:0; margin:0; } .photo-slot { aspect-ratio:4/3; position:relative; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); }
.photo-slot::before { content:''; position:absolute; inset:16px; border:1px solid var(--border); pointer-events:none; } .photo-symbol { display:flex; flex-direction:column; align-items:center; gap:16px; color:var(--text-secondary); }
.photo-symbol svg { width:32px; height:32px; } .photo-symbol span { font:11px/1.5 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.slot-number { position:absolute; top:28px; left:28px; font:11px/1.5 var(--font-mono); color:var(--text-secondary); letter-spacing:.06em; }
.work-card figcaption { padding-top:16px; } .work-card h3 { font-size:20px; font-weight:500; margin-bottom:6px; } .work-card figcaption p { font-size:13px; }
.photo-button { display:block; width:100%; aspect-ratio:4/3; border:1px solid var(--border); border-radius:var(--radius-md); padding:0; background:var(--surface); overflow:hidden; position:relative; cursor:pointer; }
.photo-button img { display:block; width:100%; height:100%; object-fit:contain; transition:transform .6s cubic-bezier(.2,.65,.3,1); } .photo-button:hover img { transform:scale(1.04); } .photo-expand { position:absolute; bottom:16px; right:16px; background:var(--surface); color:var(--fg); border-radius:var(--radius-sm); width:44px; height:44px; display:grid; place-items:center; box-shadow:0 3px 16px color-mix(in oklch,var(--fg) 14%,transparent); }
.photo-error { padding:32px; color:var(--text-secondary); }
.faq-list { border-top:1px solid var(--border); } details { border-bottom:1px solid var(--border); } summary { padding:20px 36px 20px 0; min-height:64px; font-weight:550; cursor:pointer; color:var(--fg); } summary:hover { text-decoration:underline; text-underline-offset:4px; } details p { padding:0 0 24px; max-width:68ch; }
.contact-options { display:grid; gap:24px; } .contact-options a { display:inline-flex; align-items:center; min-height:44px; color:var(--fg); overflow-wrap:anywhere; text-underline-offset:5px; } .contact-options address { font-style:normal; color:var(--text-secondary); line-height:1.8; }
.contact-form { max-width:100%; } .contact-form label { display:block; font-size:13px; font-weight:550; margin-bottom:8px; } .contact-form .form-control { font-size:16px; } .contact-form .form-note { font-size:13px; margin-bottom:24px; } .contact-form .form-status { margin-top:16px; font-size:14px; }
dialog { padding:0; width:min(1080px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; border:1px solid var(--border); border-radius:var(--radius-lg); color:var(--fg); background:var(--surface); } dialog::backdrop { background:color-mix(in oklch,var(--fg) 75%,transparent); backdrop-filter:blur(8px); } dialog[open] { animation:fadeIn .2s ease both; }
.viewer-toolbar { display:flex; justify-content:space-between; gap:20px; padding:16px 24px; align-items:center; border-bottom:1px solid var(--border); font:12px var(--font-mono); } .viewer-stage { background:var(--bg); padding:24px; display:grid; place-items:center; } .viewer-stage img { display:block; max-width:100%; height:min(52dvh,520px); object-fit:contain; }
.viewer-caption { padding:24px; display:flex; justify-content:space-between; gap:24px; } .viewer-caption h2 { font-size:28px; margin-bottom:12px; } .viewer-caption p { font-size:14px; } .viewer-controls { display:flex; gap:8px; align-items:flex-start; } .viewer-controls button { min-width:44px; } button:disabled { opacity:.45; cursor:default; }
@media(max-width:991px) { .page-hero { gap:32px; } .split-content { gap:32px; } .photo-grid { gap:16px; } .footer-grid { gap:32px; grid-template-columns:1fr 1fr; } .footer-grid > :first-child { grid-column:1/-1; } }
@media(max-width:767px) { .page-hero { grid-template-columns:1fr; padding:32px 0 48px; } .page-hero h1 { font-size:44px; max-width:19ch; } .page-hero p { font-size:16px; } .split-content,.product-grid { grid-template-columns:1fr; } .page-section { padding:48px 0; } .section-heading,.collection-top { align-items:start; flex-direction:column; gap:12px; } .product-card { padding:24px; } .process-strip { grid-template-columns:1fr; gap:24px; } .filter-bar { align-items:start; flex-direction:column; gap:12px; } .filters { width:100%; } .work-contact { flex-direction:column; align-items:start; } .photo-grid { grid-template-columns:1fr; gap:28px; } .info-panel { padding:24px; } .viewer-caption { flex-direction:column; } }
@media(max-width:480px) { .filters { display:grid; grid-template-columns:1fr 1fr; } .filter { text-align:left; padding:10px; font-size:12px; } .footer-grid { grid-template-columns:1fr; gap:24px; } .footer-grid > :first-child { grid-column:auto; } .page-hero h1 { font-size:40px; } .section-heading h2,.split-content h2 { font-size:28px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
/* Dental Sleep Lab is a distinct, Proslab-owned specialist range. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sleep-banner { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; gap:48px; margin-top:48px; padding:40px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); }
.sleep-banner h2 { font-size:28px; margin-bottom:16px; } .sleep-banner p { max-width:58ch; } .sleep-banner .text-link { margin-top:16px; }
.sleep-brand img { width:min(100%,270px); height:auto; display:block; } .sleep-brand .eyebrow { max-width:30ch; }
.sleep-collection { border-top:1px solid var(--border); padding-top:40px; }
.sleep-masthead { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); align-items:center; gap:48px; padding:48px; border-radius:var(--radius-md); background:var(--fg); color:var(--surface); }
.sleep-masthead h2 { font-size:clamp(30px,3.5vw,42px); margin-bottom:20px; } .sleep-masthead p { color:var(--border); max-width:59ch; } .sleep-masthead .eyebrow { color:var(--border); } .sleep-masthead .text-link { color:var(--surface); margin-top:20px; }
.sleep-masthead :focus-visible { outline-color:var(--surface); }
.sleep-logo-panel { background:var(--surface); border-radius:var(--radius-sm); padding:24px; color:var(--fg); }
.sleep-logo-panel img { width:100%; height:auto; display:block; } .sleep-logo-panel span { display:block; text-align:center; font-size:12px; color:var(--text-secondary); margin-top:16px; }
.sleep-work { padding-top:40px; } .sleep-product { margin-bottom:48px; } .sleep-product + .sleep-product { border-top:1px solid var(--border); padding-top:36px; }
.sleep-product .collection-top h3 { font-size:28px; } .sleep-product .collection-top .eyebrow { margin-bottom:10px; }
.sleep-catalogue { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 24px; margin-top:40px; }
.sleep-catalogue-card { min-width:0; } .sleep-catalogue-card > a { display:block; color:var(--fg); text-decoration:none; border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; background:var(--surface); height:100%; transition:border-color .2s,transform .2s; }
.sleep-catalogue-card > a:hover { border-color:var(--fg); transform:translateY(-3px); } .sleep-catalogue-card img { display:block; width:100%; height:auto; aspect-ratio:373/266; object-fit:contain; margin-bottom:24px; }
.sleep-catalogue-card h2 { font-size:24px; } .sleep-catalogue-card .eyebrow { margin-bottom:8px; } .sleep-catalogue-card .text-link { margin-top:16px; }
@media(max-width:991px) { .sleep-masthead { grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:32px; padding:32px; } .sleep-banner { gap:32px; padding:32px; } .sleep-catalogue { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:767px) { .sleep-banner,.sleep-masthead { grid-template-columns:1fr; gap:28px; padding:24px; } .sleep-logo-panel { max-width:300px; } .sleep-brand img { max-width:240px; } .sleep-masthead h2 { font-size:32px; } .sleep-product .collection-top .text-link { flex-shrink:1; } }
@media(max-width:480px) { .sleep-catalogue { grid-template-columns:1fr; } }

/* Approved colour system, promoted from the homepage concept. */
:root {
 --colour-wash: oklch(from var(--accent) .94 .026 h);
 --colour-soft: oklch(from var(--accent) .97 .012 h);
 --colour-ink: oklch(from var(--accent) .245 .047 h);
 --colour-panel: oklch(from var(--accent) .30 .045 h);
 --colour-line: oklch(from var(--accent) .47 .045 h);
 --colour-paper: oklch(from var(--bg) .985 .004 h);
 --colour-copy: oklch(from var(--accent) .84 .02 h);
}
html,body { overflow-x:visible; background:var(--colour-soft); }
body { min-width:0; }
header { background:var(--surface); }
.logo img { height:auto; }
.hero-field { background:var(--colour-wash); border-bottom:1px solid color-mix(in oklch,var(--accent) 16%,var(--border)); }
.hero-field .hero { padding:clamp(48px,6vw,88px) 24px; }
.hero-content { text-align:left; }
.hero-eyebrow { background:transparent; padding:0; border:0; border-radius:0; color:var(--colour-ink); line-height:1.7; }
.hero-eyebrow-dot { width:7px; height:7px; background:var(--colour-ink); flex-shrink:0; }
.hero-title { color:var(--colour-ink); font-size:clamp(40px,4.6vw,64px); line-height:1.08; }
.hero-title span { color:inherit; }
.hero-desc { color:var(--fg); max-width:54ch; font-size:16px; line-height:1.65; margin-left:0; }
.hero-actions { justify-content:flex-start; margin-bottom:0; gap:12px; }
.hero-actions .btn-secondary { background:transparent; border-color:var(--colour-line); color:var(--colour-ink); }
.hero-actions .btn-secondary:hover { background:var(--surface); color:var(--colour-ink); border-color:var(--colour-ink); }
.btn-primary { background:var(--accent); color:var(--surface); box-shadow:none; }
.btn-primary:hover { background:oklch(from var(--accent) calc(l - .08) c h); color:var(--surface); box-shadow:none; }
.hero-visual {
 --bg:var(--colour-ink); --surface:var(--colour-panel); --fg:var(--colour-paper);
 --border:var(--colour-line); --text-secondary:var(--colour-copy);
 background:var(--colour-ink); border-color:var(--colour-ink); border-radius:16px;
 box-shadow:0 20px 40px color-mix(in oklch,var(--colour-ink) 14%,transparent);
}
.hero-visual .visual-title { color:var(--colour-paper); }
.hero-visual .visual-viewport { background:var(--colour-panel); border-color:var(--colour-line); }
.hero-visual .viewport-grid { opacity:.24; }
.hero-visual .hud-stat { background:var(--colour-panel); border-color:transparent; }
.hero-visual .sinter-framework-bg { opacity:.4; }
.hero-visual .sinter-framework-active .svg-line-art { stroke:var(--colour-paper); }
.hero-visual .simulation-toolbar button:hover { background:var(--colour-ink); color:var(--colour-paper); outline:1px solid var(--colour-copy); }
[data-od-id="home-products"] { background:var(--colour-soft); border-top:0; padding-top:72px; padding-bottom:80px; }
.product-card { border-color:color-mix(in oklch,var(--colour-ink) 15%,var(--surface)); box-shadow:0 6px 20px color-mix(in oklch,var(--colour-ink) 3%,transparent); }
.product-card:hover { border-color:var(--colour-ink); box-shadow:0 10px 28px color-mix(in oklch,var(--colour-ink) 8%,transparent); }
.product-index { color:var(--text-secondary); }
[data-od-id="home-technology"] {
 --fg:var(--colour-paper); --text-secondary:var(--colour-copy); --border:var(--colour-line);
 background:var(--colour-ink); color:var(--colour-paper); padding:80px 0; border:0;
}
[data-od-id="home-technology"] h2 { font-size:clamp(32px,3.5vw,44px); }
[data-od-id="home-technology"] p,[data-od-id="home-technology"] .eyebrow { color:var(--colour-copy); }
[data-od-id="home-technology"] .info-panel { background:var(--colour-panel); border-color:var(--colour-line); }
[data-od-id="home-technology"] .text-link { color:var(--colour-paper); }
[data-od-id="home-technology"] .text-link:hover { border-color:var(--colour-paper); }
[data-od-id="home-showcase"] { background:var(--colour-wash); padding:80px 0; border-top:0; }
.photo-slot { background:var(--colour-soft); border-color:color-mix(in oklch,var(--colour-ink) 23%,var(--colour-wash)); }
.sleep-banner { background:var(--surface); border-color:color-mix(in oklch,var(--colour-ink) 18%,var(--surface)); }
.work-contact { border-top:0; padding:64px 0; }
.work-contact .btn-secondary { background:transparent; color:var(--colour-ink); border-color:var(--colour-line); }
.work-contact .btn-secondary:hover { background:var(--surface); color:var(--colour-ink); border-color:var(--colour-ink); }
.site-footer { --fg:var(--colour-paper); --text-secondary:var(--colour-copy); --border:var(--colour-line); background:var(--colour-ink); color:var(--colour-paper); border:0; }
.site-footer p { color:var(--colour-copy); }
.site-footer a:hover { color:var(--colour-paper); text-decoration:underline; text-underline-offset:4px; }
@media(max-width:991px) {
 .hero-field .hero { gap:40px; padding-top:48px; padding-bottom:56px; }
 .hero-title { max-width:19ch; }
 .hero-desc { max-width:60ch; }
 .hero-visual { max-width:none; }
}
@media(max-width:767px) {
 .hero-field .hero { padding-left:20px; padding-right:20px; }
 [data-od-id="home-products"],[data-od-id="home-technology"],[data-od-id="home-showcase"] { padding:48px 0; }
 .hero-visual { gap:20px; }
 .hero-eyebrow { font-size:10px; letter-spacing:.07em; }
 .work-contact { padding:48px 0; }
}


/* Multi-page applications of the approved colour system. */
.page-intro { background:var(--colour-wash); border-bottom:1px solid var(--border); }
.page-hero h1 { color:var(--colour-ink); }
.page-hero p { color:var(--fg); }
.page-section.on-surface { background:var(--colour-wash); }
.info-panel,.product-card,.sleep-catalogue-card > a { background:var(--surface); }
.feature-band {
 --fg:var(--colour-paper); --text-secondary:var(--colour-copy); --border:var(--colour-line);
 --bg:var(--colour-ink); --surface:var(--colour-panel);
 background:var(--colour-ink) !important; color:var(--colour-paper);
}
.feature-band p,.feature-band .eyebrow { color:var(--colour-copy); }
.feature-band .info-panel { background:var(--colour-panel); }
.feature-band .text-link { color:var(--colour-paper); }
.feature-band .text-link:hover { border-color:var(--colour-paper); }
.feature-band .detail-list li { border-color:var(--colour-line); }
.flow-section { background:var(--colour-soft); }
.flow-preview { background:var(--colour-wash); border:1px solid var(--border); }
.flow-step-card { background:var(--surface); }
.flow-step-card.active { background:var(--surface); border-color:var(--colour-ink); }
.flow-step-card.active .flow-step-num { background:var(--colour-ink); color:var(--colour-paper); }
.sleep-masthead { background:var(--colour-ink); color:var(--colour-paper); }
.sleep-masthead p,.sleep-masthead .eyebrow { color:var(--colour-copy); }
.sleep-masthead .text-link { color:var(--colour-paper); }
.sleep-masthead :focus-visible { outline-color:var(--colour-paper); }
.sleep-masthead .text-link:hover { color:var(--colour-paper); border-color:var(--colour-paper); }
.sleep-logo-panel { background:var(--surface); color:var(--fg); }
.sleep-catalogue-card > a:hover { border-color:var(--colour-ink); }
.filter-bar { padding-top:24px; padding-bottom:24px; border-top:0; }
.filter[aria-pressed="true"] { background:var(--colour-ink); color:var(--colour-paper); }
.filter[aria-pressed="true"]:hover { background:oklch(from var(--colour-ink) calc(l - .08) c h); color:var(--colour-paper); }
.contact-options,.clinic-visit {
 --fg:var(--colour-paper); --text-secondary:var(--colour-copy); --border:var(--colour-line);
 background:var(--colour-ink); color:var(--colour-paper); padding:32px; border-radius:var(--radius-md);
}
.contact-options p,.clinic-visit p,.contact-options .eyebrow { color:var(--colour-copy); }
.contact-options a,.clinic-visit a { color:var(--colour-paper); }
.contact-options a:hover,.clinic-visit a:hover { color:var(--colour-paper); text-decoration:underline; text-underline-offset:4px; }
.info-panel.clinic-visit { background:var(--colour-ink); }
.form-control { background:var(--colour-soft); border-color:var(--colour-line); }
.form-control:hover { border-color:var(--colour-ink); }
.form-control:focus { border-color:var(--colour-ink); background:var(--surface); color:var(--fg); }
.faq-list details { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 20px; margin-bottom:12px; }
.faq-list summary:hover { color:var(--fg); text-decoration:underline; text-underline-offset:4px; }
@media(max-width:767px) { .contact-options,.clinic-visit { padding:24px; } }

.page-section[data-od-id="home-technology"] { background:var(--colour-ink); }

/* Patient clinic: expanded service and enquiry journey. */
.clinic-hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center; padding:32px 0 64px; }
.clinic-hero h1 { font-size:clamp(40px,4.5vw,60px); color:var(--colour-ink); line-height:1.1; margin-bottom:24px; }
.clinic-lead { font-size:18px; color:var(--fg); max-width:49ch; }
.clinic-hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px 24px; margin-top:32px; }
.clinic-audience { font-size:13px; letter-spacing:.01em; margin-top:20px; }
.clinic-hero-photo { margin:0; min-width:0; background:var(--surface); border-radius:var(--radius-md); }
.clinic-hero-photo img { display:block; width:100%; height:360px; object-fit:cover; object-position:right center; border-radius:var(--radius-md) var(--radius-md) 0 0; }
.clinic-hero-photo figcaption { padding:20px 24px; font:500 18px/1.5 var(--font-display); color:var(--colour-ink); }
.clinic-hero-photo figcaption span { font:400 14px/1.5 var(--font-body); color:var(--text-secondary); }
.clinic-section-nav { background:var(--surface); border-bottom:1px solid var(--border); }
.clinic-section-nav .container { display:flex; flex-wrap:wrap; gap:4px 28px; padding-top:12px; padding-bottom:12px; }
.clinic-section-nav a { display:flex; align-items:center; min-height:44px; font-size:14px; font-weight:500; text-decoration:none; }
.clinic-section-nav a:hover { color:var(--fg); text-decoration:underline; text-underline-offset:5px; }
.clinic-services { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.clinic-service { min-width:0; padding:28px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); display:flex; flex-direction:column; }
.clinic-service h3 { font-size:24px; margin-bottom:16px; }
.clinic-service p { font-size:16px; margin-bottom:16px; }
.clinic-service .text-link { margin-top:auto; align-self:flex-start; }
.clinic-service details { margin-bottom:20px; }
.clinic-service summary { font-size:14px; padding:12px 0; min-height:44px; }
.clinic-service details p { padding:0; font-size:14px; }
.clinic-life-photo { margin:0; align-self:center; min-width:0; }
.clinic-life-photo img { width:100%; height:auto; display:block; border-radius:var(--radius-md); }
.clinic-life-photo figcaption { margin-top:16px; font-size:14px; color:var(--colour-copy); }
.clinic-journey { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; padding:0; list-style:none; }
.clinic-journey li { border-top:1px solid var(--colour-line); padding-top:24px; }
.clinic-journey h3 { font-size:22px; margin-bottom:16px; }
.clinic-journey p { font-size:16px; }
.clinic-preparation { display:grid; grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr); gap:32px; border-top:1px solid var(--border); padding-top:32px; margin-top:40px; }
.clinic-preparation p { max-width:65ch; }
.clinic-subheading { margin-top:28px; margin-bottom:12px; font-size:22px; }
.clinic-offer h3 { font-size:32px; letter-spacing:-.02em; margin-bottom:20px; }
.clinic-offer p + p { margin-top:16px; }
.clinic-offer .text-link { margin-top:20px; }
.clinic-form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.clinic-form-row > * { min-width:0; }
#clinic-request .form-note { font-size:13px; line-height:1.6; }
#clinic-request label span { font-weight:400; }
#clinic-request .form-control { font-size:16px; }
#clinic-request .form-note a { display:inline-flex; align-items:center; min-height:44px; }
.clinic-policy { max-width:850px; }
.clinic-policy p { margin-bottom:20px; }
.clinic-policy h2 { font-size:26px; margin:32px 0 16px; }
.clinic-policy ul,.clinic-policy ol { padding-left:24px; margin-bottom:24px; }
.clinic-policy a { overflow-wrap:anywhere; }
@media(max-width:1024px) { .clinic-services { grid-template-columns:repeat(2,minmax(0,1fr)); } .clinic-hero { gap:32px; } .clinic-hero-photo img { height:320px; } .clinic-journey { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; } }
@media(max-width:767px) { .clinic-hero { grid-template-columns:1fr; padding:24px 0 40px; } .clinic-hero-photo img { height:300px; } .clinic-hero-photo { max-width:520px; } .clinic-services { grid-template-columns:1fr; } .clinic-service { padding:24px; } .clinic-preparation { grid-template-columns:1fr; gap:16px; } .clinic-section-nav .container { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; } .clinic-form-row { grid-template-columns:1fr; gap:0; } }
@media(max-width:480px) { .clinic-journey { grid-template-columns:1fr; } .clinic-hero-actions .btn { width:100%; } .clinic-hero h1 { font-size:40px; } .clinic-hero-photo img { height:260px; } }

/* Keep the logo inside the white header at every screen size. */
@media(min-width:481px) and (max-width:1320px) { header .logo img { width:clamp(144px,30vw,376px); height:auto; } }
@media(max-width:480px) { header { padding:12px 0; min-height:80px; } html { scroll-padding-top:104px; } }

/* Portal entry: blue fill with accessible white labels. */
.portal-link { --portal-fill:oklch(0.69408478 0.16008388 262.858913); background:var(--portal-fill); color:var(--surface); border-color:var(--portal-fill); }
.portal-link:hover,.portal-link:active { background:oklch(from var(--portal-fill) calc(l - .08) c h); color:var(--surface); border-color:oklch(from var(--portal-fill) calc(l - .08) c h); }
.portal-link:focus-visible { outline:3px solid var(--colour-ink); outline-offset:3px; }