@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --paper:#eaf0ed; --navy:#0c2029; --ink:#102b31; --teal:#087d72;
  --line:#d6e0dc; --muted:#667c7c; --shadow:none;
  --display:'Plus Jakarta Sans',Inter,system-ui,sans-serif;
  --mono:'Plus Jakarta Sans',Inter,system-ui,sans-serif;
}
body {background:var(--paper);font-family:'Plus Jakarta Sans',Inter,system-ui,sans-serif;font-size:14px}
.shell {grid-template-columns:230px minmax(0,1fr)}
.sidebar {background:#0b2028;padding:30px 16px 22px;border-right:1px solid #183f43}
.brand {padding:0 13px 30px;border-bottom:1px solid #284249;display:flex;align-items:center;gap:12px}
.brand-mark {width:40px;height:40px;margin:0;border-radius:2px;background:#b8f3ca;color:#0c262b;font:700 23px var(--display);position:relative;overflow:hidden}
.brand-mark i {position:absolute;width:18px;height:18px;border:2px solid #0e4f4a;border-radius:50%;right:-10px;bottom:-7px}
.brand strong {font:700 18px var(--display);letter-spacing:-.06em;line-height:1}
.brand-accent {color:#b9eac6;padding:0 1px}
.brand small {font:10px var(--mono);letter-spacing:.02em;margin-top:6px;color:#83a8a6}
.nav {gap:2px;padding-top:30px}
.nav:before {content:'WORKSPACE / 01';font:10px var(--mono);letter-spacing:.12em;color:#658d90;padding:0 13px 13px}
.nav button {border-radius:3px;padding:13px 12px;color:#b2c9c7;font-weight:600;font-size:12px;gap:14px;transition:background .18s,color .18s,transform .18s}
.nav button:hover {background:#183940;transform:translateX(2px)}
.nav button.active {background:#b8f3ca;color:#12343a}
.nav-num {font:10px var(--mono);opacity:.56}
.nav-arrow {margin-left:auto;opacity:0;font-size:14px}
.nav button.active .nav-arrow,.nav button:hover .nav-arrow {opacity:1}
.side-meter {background:none;border:1px solid #35545a;border-radius:3px;padding:16px;margin:0 3px 16px}
.side-meter .row {font:10px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:#8bb2ad}
.side-meter strong {font:700 26px var(--display);color:#c0f4d0}
.side-meter .meter {background:#315158;height:4px;border-radius:0;margin-top:14px}
.side-meter .meter span {background:#b8f3ca;border-radius:0}
.side-bottom {border-color:#2b4b50;padding:18px 12px 0;font:10px/1.6 var(--mono);color:#729a9c}
.side-bottom a {color:#bfebd2;font:11px var(--mono)}
.topbar {height:70px;background:rgba(244,248,245,.95);border-bottom:1px solid #d8e2dc;padding:0 clamp(22px,3vw,46px)}
.crumb {font:10px var(--mono);letter-spacing:.06em;color:#607b7a;display:flex;align-items:center;gap:10px}
.crumb-sep {color:#a6b9b6}
.live-dot,.signal,.pulse-label i {display:inline-block;width:7px;height:7px;background:#49ba8d;border-radius:50%;box-shadow:0 0 0 4px rgba(73,186,141,.12)}
.pill {font:10px var(--mono);border-radius:3px;padding:8px 10px;background:#e4f1e9;color:#23695c;border-color:#c4e4d1}
.btn {border-radius:3px;padding:10px 14px;font-size:11px;letter-spacing:.01em;transition:background .16s,border-color .16s,transform .16s}
.btn:hover {transform:translateY(-1px)}
.sync-button {background:#102e34;border-color:#102e34;color:#d9f5e5}
.sync-button:hover {background:#185148;color:white;border-color:#185148}
.content {max-width:1600px;padding:29px clamp(22px,3vw,46px) 60px}
.hero {min-height:370px;border-radius:4px;background:#0d2933;box-shadow:none;padding:0;align-items:stretch;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.55fr);gap:0}
.hero:before {content:'';position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 44% -40%,transparent 0 40px,rgba(153,226,197,.08) 41px 42px,transparent 43px 83px);pointer-events:none}
.hero:after {content:'W / W';width:auto;height:auto;border:0;border-radius:0;box-shadow:none;right:28%;top:auto;bottom:-47px;color:rgba(175,230,202,.035);font:700 240px var(--display);letter-spacing:-.13em;white-space:nowrap}
.hero-copy {padding:37px clamp(30px,3.5vw,55px) 30px;display:flex;flex-direction:column;min-width:0}
.hero-kicker {display:flex;align-items:center;gap:11px;font:10px var(--mono);letter-spacing:.11em;color:#bcdbc9}
.hero-edition {margin-left:auto;color:#729fa0}
.hero h1 {font:700 clamp(54px,5.8vw,91px)/.98 var(--display);letter-spacing:-.075em;max-width:none;margin:43px 0 21px}
.hero h1 em {font-style:normal;color:#b8f3ca}
.hero h1 span {display:block;font-size:.46em;font-weight:500;letter-spacing:-.06em;color:#cfdfd7;margin-top:12px}
.hero p {color:#a9c4c0;font-size:13px;line-height:1.55;max-width:540px}
.hero-meta {display:flex;gap:0;flex-wrap:wrap;margin-top:auto;padding-top:25px}
.hero-meta .meta-chip {background:transparent;border:0;border-radius:0;border-top:1px solid #365862;padding:13px 18px 0 0;margin-right:17px;color:#bdd4cf;font:10px/1.4 var(--mono)}
.hero-meta b {color:#89bea9;margin-right:7px;font-weight:400}
.hero-score {width:auto;flex:auto;background:#173a42;border:0;border-left:1px solid #3b5d61;border-radius:0;padding:29px 30px;display:flex;flex-direction:column;backdrop-filter:none}
.hero-score .score-head {display:flex;justify-content:space-between;gap:12px;text-align:left;font:10px var(--mono);letter-spacing:.09em;color:#b0d6cc}
.score-index {color:#688f92}
.hero-score .progress-dial {width:auto;height:auto;margin:auto 0 0;background:none;border-radius:0;display:block}
.hero-score .progress-dial:after {display:none}
.hero-score .progress-dial strong {font:600 clamp(83px,8.6vw,132px)/.9 var(--display);letter-spacing:-.11em;color:#c0f2cc}
.score-bottom {margin-top:10px;display:grid;gap:4px}
.hero-score small {text-align:left;color:#d5ece2;font:11px var(--mono);line-height:1.4}
.hero-score .formula {color:#7fa9a3;font-size:10px;margin:0}
.score-line {height:7px;background:#315c5e;margin-top:24px;overflow:hidden}
.score-line span {display:block;height:100%;width:0;background:#b8f3ca;transition:width .6s ease}
.kpis {grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0 0 15px;background:#cedbd4;border:1px solid #cedbd4}
.kpi {border:0;border-radius:0;box-shadow:none;min-height:130px;padding:19px 22px;background:#f8faf7}
.kpi:before {display:none}
.kpi .label {font:10px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:#63817b}
.kpi .value {font:600 36px var(--display);letter-spacing:-.065em;color:#102e33;margin:11px 0 4px}
.kpi .sub {color:#6c8581;font-size:10px;line-height:1.45;max-width:210px}
.section-head {margin:44px 0 17px;align-items:end}
.section-head .eyebrow {font:10px var(--mono);letter-spacing:.11em;color:#13846f}
.section-head h2 {font:600 clamp(22px,2.2vw,31px)/1.1 var(--display);letter-spacing:-.055em;color:#102e33;margin-top:8px}
.section-head p {font:10px var(--mono);color:#6b8582}
.phase-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.phase-card {border-radius:3px;min-height:153px;padding:20px 21px;background:#f9fbf8;box-shadow:none;border-color:#d5e1da;position:relative;overflow:hidden}
.phase-card:before {content:'↗';display:block;position:absolute;right:18px;top:14px;font-size:15px;color:#8aaea0;transition:transform .18s}
.phase-card:hover {transform:translateY(-3px);box-shadow:0 15px 30px #123b2b14;border-color:#93c6ae}
.phase-card:hover:before {transform:translate(2px,-2px)}
.phase-card .phase-top {display:block}
.phase-card strong {font:600 18px var(--display);letter-spacing:-.04em;display:block;color:#193c3e}
.phase-card .phase-pct {font:600 29px var(--display);letter-spacing:-.065em;color:#136e62;display:block;margin:5px 0 0}
.phase-card .phase-track {height:4px;border-radius:0;background:#e1ebe4;margin:14px 0 10px}
.phase-card .phase-track span {border-radius:0;background:#58bd8f}
.phase-card .phase-foot {font:10px var(--mono);color:#728987}
.phase-card .phase-foot b {color:#1c7469;font-weight:500}
.method-note {font:10px/1.5 var(--mono);margin-top:12px;color:#819491}
.overview-lower {grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:10px}
.panel {box-shadow:none;padding:24px}
.focus-panel {background:#102f37;border-color:#102f37;color:#ebf7ee;border-radius:3px;min-height:300px}
.distribution-panel {background:#f9fbf8;border-radius:3px;border-color:#d5e1da}
.panel-heading {display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #43616a;padding-bottom:15px;margin-bottom:21px}
.distribution-panel .panel-heading {border-color:#d8e6dd}
.panel-index {font:10px var(--mono);letter-spacing:.08em;color:#a3c7be}
.distribution-panel .panel-index {color:#6d9188}
.pulse-label {font:9px var(--mono);letter-spacing:.06em;color:#bdebd1;display:flex;align-items:center;gap:8px}
.pulse-label i {background:#c2d58d;box-shadow:0 0 0 4px #c2d58d24;width:6px;height:6px}
.panel h3 {font:600 21px var(--display);letter-spacing:-.04em;margin:0 0 12px}
.panel .panel-sub {margin:-7px 0 21px;font-size:11px}
.focus-list {margin-top:8px}
.focus-item {grid-template-columns:45px 1fr auto;gap:14px;padding:15px 0;border-color:#315059;align-items:start}
.focus-item .id {font:10px var(--mono);color:#9fdfc2;padding-top:2px}
.focus-item strong {font-size:13px;font-weight:600;color:#eff7f1}
.focus-item small {font:10px var(--mono);color:#8fb5af;margin-top:7px}
.focus-panel .badge {background:#f3d79c;color:#563d19}
.text-link {background:none;border:0;border-top:1px solid #43616a;width:100%;text-align:left;color:#b8f3ca;font:11px var(--mono);padding:17px 0 0;margin-top:10px;display:flex;justify-content:space-between}
.text-link:hover {color:white}
.distribution-panel .status-bars {gap:16px;margin-top:20px}
.distribution-panel .bar-row {grid-template-columns:112px 1fr 29px;font:10px var(--mono);color:#3d6160}
.distribution-panel .track {border-radius:0;height:6px;background:#e4ece7}
.distribution-panel .fill {border-radius:0}
.distribution-panel .bar-row[data-status="Belum dimulai"] .fill {background:#a2b7ae}
.distribution-panel .bar-row strong {font:11px var(--mono);color:#234b4b}
.overview-rundown {grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#cee0d5;border:1px solid #cee0d5}
.time-block {border:0;border-radius:0;background:#f9fbf8;padding:19px;min-height:153px}
.time-block b {font:11px var(--mono);color:#13846f}
.time-block strong {font:600 14px/1.25 var(--display);letter-spacing:-.025em;margin:16px 0 7px;color:#18383b}
.time-block small {font-size:10px;line-height:1.45;display:block}
.source-note {border-radius:3px;background:#e0ebe5;border-color:#ccdcd2;color:#48675f;font:10px/1.6 var(--mono);padding:15px 18px}
.page-title {border-bottom:1px solid #cadbd2;padding:10px 0 21px;margin-bottom:24px}
.page-title h1 {font:600 clamp(32px,3.2vw,48px)/1.05 var(--display);letter-spacing:-.065em;margin:10px 0}
.page-title p {font-size:12px}
.toolbar {gap:7px}.search,select {border-radius:3px;background:#f9fbf8;border-color:#d3e0d9}
.table-wrap {border-radius:3px;border-color:#d6e0dc}
.table th {background:#dce9e1;color:#40645a;font:10px var(--mono);letter-spacing:.03em;padding:14px}
.table td {font-size:12px;padding:15px 14px;border-color:#e4ede8}
.table tr:nth-child(even) td {background:#f8faf8}
.table tr:hover td {background:#e9f4ec}
.table .title-cell {font-weight:700;color:#19413e}
.table .detail {font-size:11px;line-height:1.45}
.timeline-time {font:11px var(--mono);color:#087d72}
.timeline-line {border-color:#b6d9c9}.timeline-line:before {background:#60bb91}
.timeline-content h3 {font:600 15px var(--display)}
.info-card,.note-card {border-radius:3px;box-shadow:none;background:#f9fbf8}
.info-card .big {font:600 32px var(--display)}
.note-card h3 {font:600 16px var(--display);letter-spacing:-.02em}
.group-chip {border-radius:2px;font:11px var(--mono)}
.modal {background:rgba(4,23,29,.8)}.dialog {border-radius:4px;padding:30px}.dialog h2 {font-family:var(--display)}.dialog textarea {border-radius:3px}
.footer {font:10px var(--mono)}
:focus-visible {outline:3px solid #61c592;outline-offset:2px}
@media(max-width:1180px) {
  .hero {grid-template-columns:minmax(0,1.35fr) minmax(235px,.65fr)}
  .hero h1 {font-size:clamp(53px,5vw,76px)}
  .hero-copy {padding:31px}
  .hero-meta .meta-chip {margin-right:10px;padding-right:8px}
  .phase-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .overview-rundown {grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px) {
  .shell {grid-template-columns:1fr}
  .sidebar {position:relative;height:auto;padding:13px 17px 8px}
  .brand {border:0;padding:0 2px 11px}
  .brand-mark {width:30px;height:30px;font-size:18px}
  .brand small,.side-bottom,.side-meter,.nav:before {display:none}
  .nav {display:flex;overflow:auto;gap:4px;padding:0 0 3px;scrollbar-width:none}
  .nav::-webkit-scrollbar {display:none}
  .nav button {width:auto;white-space:nowrap;padding:9px 11px;font-size:11px;gap:6px}
  .nav-arrow {display:none}
  .topbar {position:relative;min-height:56px;height:auto;padding:10px 20px}
  .content {padding:22px 20px 48px}
  .hero {grid-template-columns:minmax(0,1.35fr) minmax(205px,.65fr)}
  .hero h1 {font-size:clamp(45px,6vw,66px);margin-top:40px}
  .hero-score {padding:24px}
  .hero-score .progress-dial {width:auto;height:auto;flex:auto;margin:auto 0 0}
  .hero-score .progress-dial strong {font-size:clamp(67px,9vw,100px)}
  .hero-score small {text-align:left}
  .hero-score .formula {margin:0}
  .overview-lower {grid-template-columns:1fr}
}
@media(max-width:650px) {
  .crumb {font-size:9px}.crumb-sep {display:none}
  .top-actions .pill {display:none}
  .hero {display:block;min-height:0}
  .hero-copy {padding:25px}
  .hero-kicker {font-size:9px}.hero-edition {display:none}
  .hero h1 {font-size:clamp(46px,11vw,72px);margin:39px 0 19px}
  .hero h1 span {font-size:.45em}
  .hero p {font-size:12px}
  .hero-meta {padding-top:20px;gap:5px}
  .hero-meta .meta-chip {padding:10px 10px 0 0;margin-right:7px;font-size:9px}
  .hero-score {border-left:0;border-top:1px solid #3d6262;display:grid;grid-template-columns:1fr auto;align-items:end;gap:5px 18px;padding:19px 25px}
  .hero-score .score-head {grid-column:1/-1}
  .hero-score .progress-dial {margin:12px 0 0}
  .hero-score .progress-dial strong {font-size:70px}
  .score-bottom {align-self:center;margin-top:10px}
  .score-line {grid-column:1/-1;margin-top:13px}
  .kpis {grid-template-columns:repeat(2,1fr)}
  .kpi {min-height:123px;padding:15px}
  .kpi .value {font-size:30px}
  .phase-grid {grid-template-columns:1fr 1fr;gap:8px}
  .phase-card {padding:15px;min-height:135px}
  .phase-card strong {font-size:15px;padding-right:12px}
  .phase-card .phase-pct {font-size:25px}
  .phase-card .phase-foot {font-size:9px;display:block}
  .phase-card .phase-foot b {display:block;margin-top:3px}
  .section-head {margin-top:36px;align-items:end}
  .section-head h2 {font-size:24px}
  .section-head p {max-width:128px;text-align:right;font-size:9px}
  .overview-rundown {grid-template-columns:1fr 1fr}
  .time-block {padding:15px;min-height:140px}
  .focus-item {grid-template-columns:35px 1fr;gap:9px}
  .focus-item .badge {grid-column:2;justify-self:start}
  .dialog {padding:22px}
}
@media(max-width:390px) {
  .crumb {max-width:165px;line-height:1.3}
  .sync-button {padding:8px;font-size:10px}
  .hero h1 {font-size:44px}
  .phase-grid {grid-template-columns:1fr}
  .phase-card {min-height:112px}
}

/* Softer rhythm and a collapsible navigation rail. */
:root {--paper:#eef4f0;--line:#dbe7df;--muted:#647d77;--shadow:0 10px 35px rgba(14,55,42,.055)}
.shell {transition:grid-template-columns .26s ease}
.sidebar {background:#102d30;transition:padding .26s ease;border-right:0}
.brand {border-color:#335257}
.brand-mark {border-radius:11px;background:#bcebc9}
.brand strong {letter-spacing:-.045em}
.nav button {border-radius:11px;font-size:12px;letter-spacing:-.015em}
.nav button:hover {transform:none;background:#24474a}
.nav button.active {background:#c1ecca;color:#143b37;box-shadow:0 5px 15px rgba(4,23,23,.13)}
.nav-num {font-size:10px}
.side-meter {border-radius:13px;background:#173c3e;border-color:#3d6160}
.side-meter .meter,.side-meter .meter span {border-radius:9px}
.topbar {background:rgba(249,252,249,.94);box-shadow:0 5px 20px rgba(9,55,40,.025)}
.top-leading {display:flex;align-items:center;gap:16px;min-width:0}
.sidebar-toggle {width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;color:#2d625b;background:#e9f3eb;border:1px solid #d4e4d9;border-radius:11px;transition:background .18s,transform .18s}
.sidebar-toggle:hover {background:#d9ecdf;transform:translateY(-1px)}
.sidebar-toggle svg {display:block}
.sidebar-toggle .toggle-chevron {transition:transform .2s;transform-origin:13.5px 12px}
.shell.sidebar-collapsed .sidebar-toggle .toggle-chevron {transform:rotate(180deg)}
.crumb {letter-spacing:.02em}
.pill,.btn,.search,select {border-radius:10px}
.sync-button {background:#194943;border-color:#194943}
.hero {border-radius:22px;background:linear-gradient(120deg,#123a3c 0%,#0d3038 80%);box-shadow:0 18px 44px rgba(13,50,48,.11)}
.hero:before {opacity:.53}
.hero h1 {letter-spacing:-.065em}
.hero h1 span {letter-spacing:-.04em}
.hero-copy {padding-bottom:34px}
.hero-score {background:rgba(234,255,240,.085);border:1px solid rgba(184,233,204,.14);border-radius:17px;margin:15px;padding:25px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.hero-meta .meta-chip {border-top-color:#4a7270}
.score-line,.score-line span {border-radius:9px}
.kpis {gap:12px;border:0;background:none;margin:15px 0 0}
.kpi {border:1px solid #dce9df;border-radius:16px;background:#fff;box-shadow:var(--shadow)}
.kpi .label {letter-spacing:0;text-transform:none;font-size:11px;font-weight:700}
.kpi .value {letter-spacing:-.055em}
.section-head h2 {letter-spacing:-.04em}
.section-head .eyebrow {letter-spacing:.06em}
.phase-grid {gap:12px}
.phase-card {border-radius:16px;background:#fff;box-shadow:var(--shadow)}
.phase-card .phase-track,.phase-card .phase-track span {border-radius:9px}
.phase-card .phase-foot {line-height:1.45}
.focus-panel,.distribution-panel {border-radius:18px;box-shadow:var(--shadow)}
.focus-panel {background:#153b3e;border-color:#153b3e}
.overview-lower {gap:12px}
.overview-rundown {gap:12px;background:none;border:0}
.time-block {border:1px solid #dce9df;border-radius:15px;background:white;box-shadow:var(--shadow)}
.source-note {border-radius:12px}
.table-wrap,.note-card,.info-card,.group-chip {border-radius:13px}
.dialog {border-radius:20px}
.dialog textarea {border-radius:10px}
.page-title h1 {letter-spacing:-.045em}
.hero-kicker,.score-head,.panel-index,.pulse-label,.section-head .eyebrow,.sidebar .side-bottom,.footer {letter-spacing:.04em}
@media(min-width:901px) {
  .shell.sidebar-collapsed {grid-template-columns:76px minmax(0,1fr)}
  .shell.sidebar-collapsed .sidebar {padding:30px 10px 22px}
  .shell.sidebar-collapsed .brand {padding:0 0 25px;justify-content:center}
  .shell.sidebar-collapsed .brand-text,.shell.sidebar-collapsed .nav-label,.shell.sidebar-collapsed .nav-arrow,.shell.sidebar-collapsed .side-meter,.shell.sidebar-collapsed .side-bottom,.shell.sidebar-collapsed .nav:before {display:none}
  .shell.sidebar-collapsed .nav {padding-top:27px}
  .shell.sidebar-collapsed .nav button {justify-content:center;padding:14px 0;gap:0}
  .shell.sidebar-collapsed .nav-num {font-size:11px;opacity:1}
}
@media(max-width:900px) {
  .shell.sidebar-collapsed {grid-template-columns:1fr}
  .shell.sidebar-collapsed .sidebar {padding-bottom:12px}
  .shell.sidebar-collapsed .nav {display:none}
  .sidebar-toggle {width:35px;height:35px;flex-basis:35px}
  .top-leading {gap:10px}
  .hero-score {display:flex;align-items:stretch;gap:0;margin:14px;padding:20px}
  .hero-score .score-head {display:flex}
  .hero-score .progress-dial {margin:auto 0 0;width:auto;height:auto;flex:auto}
  .hero-score .progress-dial strong {font-size:clamp(68px,8vw,105px)}
}
@media(max-width:650px) {
  .topbar {gap:8px}
  .crumb {line-height:1.35;font-size:9px}
  .hero {border-radius:17px}
  .hero-score {display:grid;grid-template-columns:1fr auto;gap:5px 16px;margin:10px;border-radius:13px;padding:18px}
  .hero-score .score-head {grid-column:1/-1}
  .hero-score .progress-dial {margin:10px 0 0}
  .hero-score .progress-dial strong {font-size:65px}
  .score-line {grid-column:1/-1}
  .kpis {gap:8px}
  .kpi {border-radius:12px}
  .phase-card {border-radius:12px}
  .time-block {border-radius:12px}
}
@media(prefers-reduced-motion:reduce) {
  .shell,.sidebar,.sidebar-toggle,.sidebar-toggle .toggle-chevron {transition:none}
}

/* Original ballroom photograph from the venue survey. */
.hero {
  background-color:#102d30;
  background-image:linear-gradient(90deg,rgba(7,29,33,.89) 0%,rgba(7,29,33,.62) 48%,rgba(7,29,33,.28) 100%),url('./assets/aroem-ballroom.jpg');
  background-size:cover;
  background-position:center 59%;
}
.hero:before,.hero:after {display:none}
.hero-score {background:rgba(10,42,45,.70);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:rgba(210,249,225,.22)}
.hero-meta .meta-chip {border-top-color:rgba(206,238,220,.38)}
.hero h1 {font-size:clamp(43px,4.8vw,69px);line-height:1.04;letter-spacing:-.058em;margin:29px 0 17px}
.hero h1 span {font-size:clamp(18px,1.8vw,23px);line-height:1.36;letter-spacing:-.025em;font-weight:600;max-width:650px;margin-top:19px}
@media(max-width:650px) {
  .hero {background-image:linear-gradient(180deg,rgba(7,29,33,.88) 0%,rgba(7,29,33,.72) 58%,rgba(7,29,33,.54) 100%),url('./assets/aroem-ballroom.jpg');background-position:48% 58%}
  .hero-score {background:rgba(10,42,45,.82)}
  .hero h1 {font-size:clamp(38px,9vw,56px);margin:31px 0 16px}
  .hero h1 span {font-size:17px;line-height:1.42;margin-top:16px}
}