/* ============================================================
   rhm.ae home page: the glass journey (8 Nov 2026).

   One layout, two looks. The scenes are ordinary sections in normal
   flow, each one screen tall, so the page is the same height and the
   words sit in the same place whether or not the 3D world runs:
   - html (no class)       static: a deep-blue band, a glass glyph per scene
   - html.glass            the visitor can run the world (decided in <head>)
   - html.glass-live       the world has drawn its first frame: the canvas
                           fades in behind the words, the glyphs fade out
   Only opacity and transform ever change, so nothing shifts.
   Tokens (--ink, --accent, --max-w, --mono ...) come from design-system.css.
   ============================================================ */

:root {
  --g-ink: #bcc3ce;
  --g-text: rgba(11, 18, 32, 0.74);
  --g-soft: #2f4fd0;
  --g-head: #0b1220;
  --g-accent: #2563eb;
  --gutter: 32px;
}
@media (max-width: 720px) { :root { --gutter: 16px; } }

html { background: var(--g-ink); }
body { background: #fff; overflow-x: hidden; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent-soft, #60a5fa); outline-offset: 3px; border-radius: 3px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: #fff; color: var(--ink); padding: 10px 14px; border-radius: 8px; font-weight: 600;
}
.skip:focus { top: 12px; }

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }

/* ============================================================ NAV (the site's own) */
.nav-marketing {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; gap: 32px;
  padding: 0 var(--gutter); height: 68px; position: relative;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--ink); }
.brand-mark { width: 30px; height: 30px; color: #4063D7; display: grid; place-items: center; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { font-size: 13.5px; font-weight: 500; color: var(--text-2); transition: color 0.15s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { margin-left: 4px; }
.nav-cta .btn { padding: 8px 16px; font-size: 13px; }
.nav-hamburger {
  display: none; background: none; border: 1px solid var(--border); border-radius: 8px;
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  align-items: center; justify-content: center; color: var(--ink); margin-left: 4px;
}
.nav-hamburger .icon-close { display: none; }
.nav-marketing.open .nav-hamburger .icon-menu  { display: none; }
.nav-marketing.open .nav-hamburger .icon-close { display: inline-block; }
.nav-drawer {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--border);
  padding: 14px 18px 22px; flex-direction: column; gap: 4px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}
.nav-marketing.open .nav-drawer { display: flex; }
.nav-drawer a { font-size: 16px; font-weight: 500; color: var(--text-2); padding: 14px 8px; border-bottom: 1px solid var(--border); }
.nav-drawer a:last-child { border-bottom: none; }
.nav-drawer .drawer-signin { margin-top: 8px; background: var(--ink); color: #fff; text-align: center; border-radius: 8px; padding: 14px; font-weight: 600; }

/* ============================================================ THE JOURNEY */
/* Sized to the large viewport, so a phone's URL bar showing or hiding never resizes it;
   glass.js sizes the drawing buffer from the canvas itself. */
#glass-gl {
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; display: block;
  z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity 1.2s ease;
}
html.glass-live #glass-gl { opacity: 1; }
html.glass-live.glass-away #glass-gl { opacity: 0; transition-duration: 0.4s; }

/* A dark backing under the canvas, so the hero never flashes white while the world fades in
   or back in (the products, contact and footer sections keep their own backgrounds). */
html.glass body { background: var(--g-ink); }

/* The static look (a deep-blue band with three glows) lives on a layer of its own, so it can
   cross-fade with the canvas in step, instead of switching off at once. */
.journey { position: relative; z-index: 1; color: var(--g-head); isolation: isolate; }
.journey::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 78% 12%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(ellipse 55% 35% at 18% 52%, rgba(255, 255, 255, 0.35), transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 90%, rgba(255, 255, 255, 0.45), transparent 70%),
    linear-gradient(180deg, #d3d8e0, var(--g-ink));
  opacity: 1; transition: opacity 1.2s ease;
}
html.glass-live .journey::before { opacity: 0; }
html.glass-live.glass-away .journey::before { opacity: 1; transition-duration: 0.4s; }

.scene {
  position: relative;
  min-height: calc(100vh - 68px);
  min-height: calc(100svh - 68px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: 32px;
  padding: 72px max(var(--gutter), calc((100vw - var(--max-w)) / 2 + var(--gutter)));
}
.scene .box { grid-column: 1; grid-row: 1; max-width: 540px; }
html.glass-live .scene .box { will-change: opacity, transform; }
.scene .glyph { grid-column: 2; grid-row: 1; justify-self: center; }
.scene.right .box { grid-column: 2; justify-self: end; }
.scene.right .glyph { grid-column: 1; }

.scene .k {
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--g-soft); margin: 0;
}
.scene h1 {
  font-size: clamp(44px, 7vw, 104px); line-height: 0.96; letter-spacing: -0.04em;
  font-weight: 800; margin: 16px 0 20px; color: var(--g-head);
}
.scene h2 {
  font-size: clamp(34px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.035em;
  font-weight: 800; margin: 14px 0 18px; color: var(--g-head); text-wrap: balance;
}
.scene p { color: var(--g-text); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; margin: 0 0 12px; }
.scene p.lead { font-size: clamp(18px, 1.5vw, 21px); }
.scene p.quiet { color: var(--g-head); font-weight: 600; margin-top: 18px; }
.scene .facts { margin: 16px 0 0; display: grid; gap: 10px; }
.scene .facts li {
  position: relative; padding-left: 22px; color: var(--g-text);
  font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5;
}
.scene .facts li::before {
  content: ''; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%;
  background: var(--g-soft); box-shadow: 0 0 10px rgba(47, 79, 208, 0.45);
}
.scene .aside { font-size: 15px; margin-top: 26px; color: rgba(11,18,32,0.6); }
.scene .aside a { color: var(--g-soft); text-decoration: underline; text-underline-offset: 3px; }

.scene .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.g-btn {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 16px; color: #fff;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.g-btn.p { background: var(--g-accent); }
.g-btn.p:hover { background: #1d4ed8; transform: translateY(-1px); }
.g-btn.g { border: 1px solid rgba(11, 18, 32, 0.3); color: var(--g-head); }
.g-btn.g:hover { border-color: var(--g-head); background: rgba(255,255,255,0.35); }

/* "This week": only rendered when the owner has written one */
.note {
  margin-top: 34px; max-width: 440px; padding: 18px 20px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
}
.note .t { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: rgba(255,255,255,0.6); margin: 0; }
.note .t span:first-child { color: #fbbf24; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.note .n { font-size: 17px; color: #fff; font-weight: 600; margin: 6px 0 0; }
.note a { display: inline-block; margin-top: 8px; color: var(--g-soft); font-weight: 600; font-size: 15px; }

/* Static glass glyphs: the world in miniature, for every visitor the 3D does not reach */
.glyph { width: min(340px, 34vw); aspect-ratio: 1; display: grid; place-items: center; transition: opacity 0.9s ease; }
.glyph svg { width: 78%; height: auto; overflow: visible; filter: drop-shadow(0 10px 24px rgba(51, 65, 94, 0.25)); }
.glyph svg path, .glyph svg rect, .glyph svg circle {
  fill: rgba(255, 255, 255, 0.45); stroke: rgba(51, 65, 94, 0.75); stroke-width: 2.5; vector-effect: non-scaling-stroke;
}
.glyph svg .line { fill: none; stroke: #2f5bff; stroke-width: 3; }
.glyph svg .faint { opacity: 0.45; }
.glyph svg .dots circle { fill: #2f5bff; stroke: none; opacity: 0.75; }
html.glass-live .glyph { opacity: 0; }

/* ============================================================ PRODUCTS */
.products { position: relative; z-index: 1; background: #fff; padding: 104px 0 96px; }
.products .eyebrow-c { margin: 0 0 14px; }
h2.display {
  font-size: 42px; font-weight: 700; line-height: 1.06;
  letter-spacing: -0.035em; color: var(--ink); margin: 0 0 16px; text-wrap: balance;
}
.sublead { font-size: 16px; line-height: 1.65; color: var(--text-2); max-width: 640px; margin: 0; }
.product-list {
  margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border);
}
.product-list li {
  padding: 26px 28px 30px 0; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.product-list li:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--border); }
.product-list strong { font-size: 18px; color: var(--ink); letter-spacing: -0.01em; }
.product-list span { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.products-more { margin: 32px 0 0; font-size: 15px; font-weight: 600; }

/* ============================================================ CONTACT */
.contact {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 54% 46%;
  background:
    radial-gradient(ellipse 55% 45% at 30% 18%, rgba(96, 165, 250, 0.30), transparent 65%),
    linear-gradient(210deg, #f6f9ff 0%, #e3edfd 100%);
  border-top: 1px solid var(--border);
}
.contact-left { padding: 96px 64px 96px max(var(--gutter), calc((100vw - var(--max-w)) / 2 + var(--gutter))); }
.contact-left .eyebrow-c { margin: 0 0 14px; }
.contact-left h2 { font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; color: var(--ink); margin: 0 0 16px; }
.contact-left h2 em { font-style: normal; color: var(--accent); }
.contact-left .sublead { color: var(--text-2); margin-bottom: 32px; }
.phone-card {
  display: inline-block; padding: 18px 24px; border-radius: 14px; max-width: 100%;
  background: #fff; border: 1px solid var(--border);
  box-shadow: 0 24px 48px rgba(17, 24, 39, 0.12);
}
.phone-card .num a { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--accent); font-variant-numeric: tabular-nums; }
.phone-card .sub { font-size: 13px; color: var(--text-2); margin-top: 6px; }
.phone-card .sub a.wa { color: var(--accent); text-decoration: underline; }
.contact-form {
  background: #fff;
  padding: 88px max(var(--gutter), calc((100vw - var(--max-w)) / 2 + var(--gutter))) 88px 56px;
}
.contact-form h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 6px; }
.contact-form .lead-sm { font-size: 13.5px; color: var(--text-2); margin: 0 0 26px; }
.field { margin-bottom: 14px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; min-width: 0; }
.textarea { resize: vertical; min-height: 110px; }

/* ============================================================ FOOTER (the site's own) */
.foot { position: relative; z-index: 1; background: var(--ink); color: rgba(255,255,255,0.72); overflow: hidden; }
.foot-grid {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px;
  padding: 64px var(--gutter) 48px;
}
.foot .brand { color: #fff; margin-bottom: 16px; }
.foot .brand-mark { color: #fff; }
.foot-brand p { font-size: 13px; line-height: 1.65; color: rgba(255,255,255,0.6); margin: 0 0 20px; max-width: 340px; }
.foot .contact-list { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.foot .contact-list .row { display: flex; gap: 10px; align-items: flex-start; }
.foot .contact-list svg { color: var(--accent-soft); flex: none; margin-top: 3px; }
.foot .contact-list a:hover { color: #fff; }
.foot-col h4 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-soft); margin: 0 0 16px;
}
.foot-col ul { display: flex; flex-direction: column; gap: 9px; }
.foot-col a { font-size: 13.5px; color: rgba(255,255,255,0.68); transition: color 0.15s; }
.foot-col a:hover { color: #fff; }
.foot-base { border-top: 1px solid rgba(255,255,255,0.1); }
.foot-base-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 20px var(--gutter); font-size: 12.5px; color: rgba(255,255,255,0.45);
}
.foot-base a { color: rgba(255,255,255,0.55); margin-left: 18px; }
.foot-base a:hover { color: #fff; }

/* ============================================================ RESPONSIVE */
@media (max-width: 1024px) {
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: inline-flex; margin-left: auto; }
  .product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-list li:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .product-list li:nth-child(2n) { padding-left: 28px; border-left: 1px solid var(--border); }
  .contact { grid-template-columns: 1fr; }
  .contact-left { padding: 64px var(--gutter) 24px; }
  .contact-form { padding: 48px var(--gutter) 64px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* Phones: the words sit low, the world (or its glyph) above them */
@media (max-width: 820px) {
  .scene, .scene.right {
    grid-template-columns: 1fr; grid-template-rows: 1fr auto;
    align-items: end; gap: 8px; padding-top: 32px; padding-bottom: 9vh;
  }
  .scene .box, .scene.right .box { grid-column: 1; grid-row: 2; justify-self: start; }
  .scene .glyph, .scene.right .glyph { grid-column: 1; grid-row: 1; align-self: center; width: min(220px, 52vw); }
}
@media (max-width: 720px) {
  h2.display, .contact-left h2 { font-size: 30px; }
  .products { padding: 64px 0; }
  .product-list { grid-template-columns: 1fr; }
  .product-list li, .product-list li:nth-child(2n) { padding: 22px 0; border-left: 0; }
  .field-row { flex-direction: column; gap: 0; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-base a { margin: 0 18px 0 0; }
  .note { margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* old home-page anchors (#plans, #process ...) kept as empty markers; out of the grid flow */
.alias { position: absolute; top: 0; left: 0; width: 0; height: 0; }

/* Phones: the words fill most of the screen, so the glass becomes a softer backdrop behind
   them and the words carry a gentle shadow; every line reads clearly over any shape. */
@media (max-width: 820px) {
  html.glass-live:not(.glass-away) #glass-gl { opacity: 0.6; }
  html.glass-live .scene .box { text-shadow: 0 1px 14px rgba(230, 234, 240, 0.95), 0 0 2px rgba(230, 234, 240, 0.9); }
  html.glass-live .scene .g-btn { text-shadow: none; }
}

/* Telemetry labels beside each held object, in monospace (after Igloo Inc.): honest words from
   this page's own promises, never live client data. Hidden on phones, where space is the words'. */
.hud {
  grid-column: 2; grid-row: 1; justify-self: center; align-self: center; position: relative;
  width: min(340px, 34vw); aspect-ratio: 1; pointer-events: none;
  font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(11, 18, 32, 0.62); line-height: 1.5;
}
.scene.right .hud { grid-column: 1; }
.hud span { position: absolute; white-space: nowrap; padding-left: 14px; }
.hud span::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 9px; height: 1px; background: currentColor; }
.hud .a { top: 2%; left: 62%; } .hud .b { top: 46%; left: 92%; } .hud .c { bottom: 4%; left: -6%; }
@media (max-width: 1100px) { .hud .b { left: 78%; } }
@media (max-width: 820px) { .hud { display: none; } }

/* ============================================================ THE CHECKS, WOVEN INTO THE SCENES
   Frosted cards on the pale world: the checks are part of the ice, not boxes on top of it. */
.chk, .mc-panel {
  margin-top: 26px; padding: 20px 20px 18px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 18px 40px rgba(40, 52, 78, 0.14);
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  color: var(--g-head);
}
.scene .box:has(.chk), .scene .box:has(.mc-panel:not([hidden])) { max-width: 600px; }
.check-label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 10px; color: var(--g-head); }
.check-row { display: flex; gap: 8px; }
.check-row input {
  flex: 1; min-width: 0; height: 48px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(11, 18, 32, 0.22); background: rgba(255, 255, 255, 0.85);
  font-family: inherit; font-size: 16px; color: var(--g-head);
}
.check-row input:focus { outline: none; border-color: var(--g-soft); box-shadow: 0 0 0 3px rgba(47, 79, 208, 0.22); }
.check-row .g-btn { flex: none; border: 0; cursor: pointer; font-family: inherit; }
.check-row .g-btn[disabled] { opacity: 0.65; cursor: progress; }
.check-hint { margin: 8px 0 0 !important; font-size: 13px !important; color: rgba(11, 18, 32, 0.6) !important; }
.check-status { margin: 10px 0 0; font-size: 14px; color: var(--g-text); min-height: 0; }
.check-status:empty { display: none; }
.check-status.is-error { color: #b3261e; }
.check-status a { color: var(--g-soft); }
.chk:not(.is-run) .check-areas { display: none; }
.check-areas { margin: 14px 0 0; display: grid; gap: 0; }
.area { border-top: 1px solid rgba(11, 18, 32, 0.1); padding: 11px 0; }
.area-head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; font-size: 14.5px; }
.area-name { font-weight: 600; }
.area-state { font-size: 12.5px; color: rgba(11, 18, 32, 0.6); font-family: var(--mono, ui-monospace, Menlo, monospace); text-transform: uppercase; letter-spacing: 0.05em; }
.area-summary { margin: 6px 0 0 20px; font-size: 14px; color: var(--g-text); line-height: 1.5; }
.area-toggle { margin: 6px 0 0 20px; background: none; border: 0; padding: 0; color: var(--g-soft); font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1.4; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.area-details { margin: 8px 0 0 20px; display: grid; gap: 6px; font-size: 13.5px; color: var(--g-text); }
.area-details p, .area-details li { margin: 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(11, 18, 32, 0.2); display: inline-block; transform: translateY(1px); flex: none; }
.area[data-state="pass"] .dot, .dot-pass { background: #1d7a45; }
.area[data-state="warn"] .dot, .dot-warn { background: #d99a1e; }
.area[data-state="fail"] .dot, .dot-fail { background: #b3261e; }
.area[data-state="unknown"] .dot, .dot-unknown { background: transparent; box-shadow: inset 0 0 0 2px #7a7f7d; }
.area[data-state="info"] .dot { background: var(--g-head); }
.area[data-state="checking"] .dot { background: var(--g-soft); animation: chk-pulse 1.1s ease-in-out infinite; }
@keyframes chk-pulse { 50% { opacity: 0.3; } }
.check-after { margin-top: 14px; border-top: 1px solid rgba(11, 18, 32, 0.1); padding-top: 14px; }
.fixes-title { font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.01em; margin: 0 !important; color: var(--g-head) !important; }
.fixes-list { margin: 10px 0 0; display: grid; gap: 8px; }
.fixes-list li { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; padding: 10px 12px; background: rgba(255, 255, 255, 0.75); border-radius: 10px; font-size: 14.5px; line-height: 1.5; color: var(--g-head); }
.fixes-list .fix-time { font-size: 12.5px; color: rgba(11, 18, 32, 0.6); white-space: nowrap; }
.fixes-list .fix-all { grid-template-columns: 1fr; }
.fixes-note { margin: 10px 0 0 !important; font-size: 12.5px !important; color: rgba(11, 18, 32, 0.6) !important; }

/* the launchers under each crystal's words */
.mc-launch { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.mc-open {
  display: inline-grid; gap: 2px; text-align: left; cursor: pointer; padding: 11px 18px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.8); color: var(--g-head);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: inherit;
  box-shadow: 0 8px 22px rgba(40, 52, 78, 0.12); transition: background-color 0.2s, transform 0.2s;
}
.mc-open span { font-weight: 700; font-size: 15px; }
.mc-open small { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(11, 18, 32, 0.6); }
.mc-open[aria-expanded="true"] { background: var(--g-head); color: #fff; border-color: var(--g-head); }
.mc-open[aria-expanded="true"] small { color: rgba(255, 255, 255, 0.7); }
@media (hover: hover) and (pointer: fine) { .mc-open:hover { background: rgba(255, 255, 255, 0.78); transform: translateY(-1px); } .mc-open[aria-expanded="true"]:hover { background: #000; } }

.mc-panel { position: relative; }
.mc-close { position: absolute; top: 14px; right: 14px; background: none; border: 0; font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1; color: var(--g-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 6px; }
.mc-h { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin: 0; color: var(--g-head); padding-right: 60px; }
.mc-h:focus { outline: none; }
.mc-sub { margin: 4px 0 0 !important; font-size: 14px !important; color: rgba(11, 18, 32, 0.62) !important; }
.mc-form { margin-top: 14px; display: grid; gap: 10px; }
.mc-q { margin: 0; padding: 12px 14px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.72); display: grid; gap: 10px; min-width: 0; }
.mc-q-text { padding: 0; font-size: 15px; line-height: 1.45; color: var(--g-head); }
.mc-q-n { color: rgba(11, 18, 32, 0.5); font-variant-numeric: tabular-nums; }
.mc-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-opt { position: relative; }
.mc-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mc-opt span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(11, 18, 32, 0.22); background: rgba(255, 255, 255, 0.9); font-size: 14px; font-weight: 600; color: var(--g-head); }
.mc-opt input:checked + span { background: var(--g-head); color: #fff; border-color: var(--g-head); }
.mc-opt input:focus-visible + span { outline: 2px solid var(--g-soft); outline-offset: 2px; }
.mc-go { justify-self: start; border: 0; cursor: pointer; font-family: inherit; margin-top: 4px; }
.mc-status { margin: 0 !important; font-size: 14px !important; color: #b3261e !important; }
.mc-status:empty { display: none; }
.mc-result { margin-top: 16px; display: grid; gap: 12px; justify-items: start; }
.mc-result:focus { outline: none; }
.mc-result .fixes-list { width: 100%; margin: 0; }
.mc-result p { margin: 0; color: var(--g-text); font-size: 15px; }
.mc-score { font-size: 30px !important; letter-spacing: -0.02em; line-height: 1.1; color: var(--g-head) !important; }
.fixes-list li.mc-fix { grid-template-columns: auto 1fr; align-items: start; }
.mc-fix .dot { margin-top: 6px; }
.mc-wa, .mc-result .g-btn, .mc-verdict .g-btn, .mc-next { cursor: pointer; font-family: inherit; }
.mc-result .g-btn.g, .mc-verdict .g-btn.g { background: rgba(255, 255, 255, 0.7); }
button.g-btn { border: 0; }
button.g-btn.g { border: 1px solid rgba(11, 18, 32, 0.3); }
button.g-btn[disabled] { opacity: 0.55; cursor: default; }
.mc-note, .mc-source { margin: 10px 0 0 !important; font-size: 12.5px !important; color: rgba(11, 18, 32, 0.58) !important; }
.mc-source a { color: var(--g-soft); text-decoration: underline; text-underline-offset: 3px; }
.mc-quiz { margin-top: 14px; display: grid; gap: 12px; }
.mc-count { margin: 0 !important; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 11.5px !important; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(11, 18, 32, 0.58) !important; }
.mc-msg { background: #fff; border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px; box-shadow: 0 6px 18px rgba(40, 52, 78, 0.1); }
.mc-msg:focus { outline: none; }
.mc-msg p { margin: 0 !important; }
.mc-from { font-size: 12.5px !important; color: rgba(11, 18, 32, 0.6) !important; word-break: break-word; }
.mc-subj { font-weight: 700; color: var(--g-head) !important; font-size: 15px !important; }
.mc-body { font-size: 15px !important; color: var(--g-head) !important; }
.mc-fake-link { justify-self: start; margin-top: 6px; padding: 7px 13px; border-radius: 6px; background: #2b59c3; color: #fff; font-size: 13.5px; }
.mc-why { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.8); display: grid; gap: 6px; border-left: 4px solid #1d7a45; }
.mc-why.is-wrong { border-left-color: #d99a1e; }
.mc-why p { margin: 0 !important; font-size: 14.5px !important; color: var(--g-head) !important; }
.mc-why-h { font-weight: 700; }
.mc-next { justify-self: start; margin-top: 4px; }
html.glass-live .scene .mc-panel, html.glass-live .scene .chk { text-shadow: none; }

@media (max-width: 820px) {
  .chk, .mc-panel { padding: 16px 14px; border-radius: 14px; }
  .check-row { flex-direction: column; }
  .check-row input { flex: none; }
  .check-row .g-btn { justify-content: center; }
  .mc-score { font-size: 26px !important; }
}
.check-areas { list-style: none; padding: 0; }
.chk .check-status, .chk .area-summary, .chk .area-details p { font-size: 14px; line-height: 1.5; margin-bottom: 0; }
.chk .area-summary { margin: 6px 0 0 20px; }
.area-details[hidden], .check-after[hidden], .mc-panel[hidden] { display: none; }
.area-details .dot { margin-right: 6px; }

/* ============================================================ POLISH, 10 Nov
   One world from top to bottom: the sections after the journey take the frost ground in
   tone steps (no lines, no gradients, no resting shadows); labels in the text face at full
   contrast; the Igloo telemetry labels and the frosted ice cards stay, by Abbu's choice. */
:root { --g-soft: #2a44b8; --frost-1: #e2e6ec; --frost-2: #eef1f5; --frost-3: #f7f8fa; }

/* labels above the scene headings: sentence case, readable, full contrast */
.scene .k { font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--g-soft); }
.scene h1 { font-size: clamp(44px, 6vw, 92px); }
@media (min-width: 821px) { .scene h1 .nowrap { white-space: nowrap; } }

/* the telemetry labels beside each crystal: kept, at a readable size */
.hud { font-size: 13px; letter-spacing: 0.06em; color: rgba(11, 18, 32, 0.66); }

/* frosted cards rest flat on the world: a tone step, no shadow */
.chk, .mc-panel { box-shadow: none; background: rgba(255, 255, 255, 0.66); }
.mc-open { box-shadow: none; background: rgba(255, 255, 255, 0.62); }
.mc-open small { font-family: inherit; font-size: 13px; letter-spacing: 0; text-transform: none; }
.area-state { font-family: inherit; font-size: 13px; letter-spacing: 0; text-transform: none; }
.mc-count { font-family: inherit !important; font-size: 13px !important; letter-spacing: 0; text-transform: none; }
.mc-msg { box-shadow: none; }
.check-hint, .fixes-note, .mc-note, .mc-source, .mc-from, .fixes-list .fix-time { font-size: 13px !important; }
.fixes-list li, .area-head, .mc-q-text, .mc-body, .mc-why p { font-size: 15px !important; }
.scene .facts + p { margin-top: 20px; }

/* phones: no glow behind the words; the world sits softer instead */
@media (max-width: 820px) {
  html.glass-live .scene .box { text-shadow: none; }
  html.glass-live:not(.glass-away) #glass-gl { opacity: 0.42; }
}

/* after the journey: the same frost, in tone steps */
.products { background: var(--frost-1); }
.products .eyebrow-c, .contact .eyebrow-c { font-family: inherit; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--g-soft); }
.products .eyebrow-c::before, .contact .eyebrow-c::before { display: none; }
.product-list { border-top: 0; gap: 12px; }
.product-list li, .product-list li:not(:nth-child(3n+1)), .product-list li:nth-child(2n) {
  border: 0; padding: 0; background: none;
}
.product-list { column-gap: 48px; row-gap: 36px; margin-top: 56px; }
.product-list span { color: rgba(11, 18, 32, 0.74); }
.contact { background: var(--frost-2); border-top: 0; }
.contact-form { background: var(--frost-3); }
.contact-left h2 em { color: inherit; }
.phone-card { box-shadow: none; border: 0; background: #fff; border-radius: 14px; }
.contact .btn, .contact button[type="submit"] { box-shadow: none; }
.foot-col h4 { font-family: inherit; font-size: 14px; letter-spacing: 0; text-transform: none; color: #fff; }
.nav-marketing .btn, .nav-marketing .btn-ink { box-shadow: none; }
.nav-marketing { border-bottom: 0; background: rgba(255, 255, 255, 0.9); }
.foot-base { border-top: 0; background: rgba(255, 255, 255, 0.04); }
.foot-base-inner { font-size: 13px; }
.hud .b { left: 74%; }
@media (max-width: 1100px) { .hud .b { left: 66%; } }
.hud .b { left: 84%; }
@media (max-width: 1100px) { .hud .b { left: 70%; } }

/* ============================================================ ROUND TWO, 10 Nov */
/* the chat button on phones: smaller, inset, and out of the way while reading */
@media (max-width: 820px) {
  html body .assist-launcher { width: 48px; height: 48px; right: 16px; bottom: 16px; transition: transform 0.3s ease, opacity 0.3s ease; }
  html body .assist-launcher.is-away { transform: translateY(90px); opacity: 0; pointer-events: none; }
}
/* entrances after the journey: rise and settle, once */
html.enter-ready .enter { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--enter-d, 0ms); }
html.enter-ready .is-in > .enter { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.enter-ready .enter { opacity: 1; transform: none; transition: none; } }
/* labels pinned to the crystals once the world runs: a fixed layer over the canvas */
html.hud-live:not(.glass-away) .hud { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; aspect-ratio: auto; justify-self: stretch; align-self: stretch; z-index: 0; opacity: 0; }
html.hud-live .hud span { top: 0 !important; left: 0 !important; will-change: transform; }
html.glass-away .hud { visibility: hidden; }
@media (max-width: 820px) { html.hud-live .hud { display: none; } }

/* ============================================================ ROUND THREE: a place, not a background */
/* a fine film grain over the world (as on Igloo), above the canvas and below the words */
html.glass-live .journey::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.3  0 0 0 0 0.35  0 0 0 1 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
html.glass-live.glass-away .journey::after { opacity: 0; }
:root { --g-ink: #d3d8df; }

/* ============================================================ THE NEXT LEAP: real snow and ice
   Text over the snow photograph gets a soft neutral veil on its own side only, so the words
   read cleanly and the land stays open beside them. */
html.glass-live .scene::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(236, 240, 245, 0.82) 0%, rgba(236, 240, 245, 0.55) 38%, rgba(236, 240, 245, 0) 62%);
}
html.glass-live .scene.right::before {
  background: linear-gradient(270deg, rgba(236, 240, 245, 0.82) 0%, rgba(236, 240, 245, 0.55) 38%, rgba(236, 240, 245, 0) 62%);
}
@media (max-width: 820px) {
  html.glass-live .scene::before, html.glass-live .scene.right::before {
    background: linear-gradient(0deg, rgba(236, 240, 245, 0.9) 0%, rgba(236, 240, 245, 0.7) 55%, rgba(236, 240, 245, 0) 85%);
  }
}
.foot-credit a { margin-left: 0 !important; }

/* ============================================================ STEP 2: a quieter interface in the world */
/* the navigation floats over the world while the journey runs, and settles into a bar after it */
html.glass-live:not(.nav-solid) .nav-marketing { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.glass-live:not(.nav-solid) .nav-marketing.open { background: rgba(255, 255, 255, 0.96); }
.nav-marketing { transition: background-color 0.4s ease; }
/* the hero has one action, the check; talking to us is a quiet line under it */
.hero-alt { margin: 18px 0 0 !important; font-size: 15px !important; color: var(--g-text); }
.hero-alt a { color: var(--g-head); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hero-alt a:hover { color: var(--g-soft); }
/* the check card: lighter, so the world shows through around it */
.scene.hero .chk { background: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.6); max-width: 520px; }
.scene.hero .check-label { font-size: 16px; }
/* once the visitor scrolls, the bar frosts over so words never run under the links */
html.glass-live.nav-solid .nav-marketing { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* ============================================================ STEP 4: the sound toggle (off by default) */
.sound-toggle { display: none; }
html.glass-live:not(.glass-away) .sound-toggle {
  display: inline-flex; align-items: center; position: fixed; left: max(var(--gutter), calc((100vw - var(--max-w)) / 2 + var(--gutter))); bottom: 22px; z-index: 50;
  min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1; color: var(--g-head);
  background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
html.glass-live .sound-toggle[aria-pressed="true"] { background: var(--g-head); color: #fff; border-color: var(--g-head); }
@media (max-width: 820px) { html.glass-live:not(.glass-away) .sound-toggle { display: none; } }
html.journey-past .sound-toggle { display: none !important; }

/* round 2: on phones the world shows clearly above the words; the veil keeps the words readable */
@media (max-width: 820px) { html.glass-live:not(.glass-away) #glass-gl { opacity: 0.75; } }

/* round 3: the sections after the journey carry a little of the snow, under a pale veil */
.products { background: linear-gradient(rgba(226, 230, 236, 0.9), rgba(226, 230, 236, 0.9)), url("tex/snow-color.jpg") center / 520px repeat; }
.contact { background: linear-gradient(rgba(238, 241, 245, 0.94), rgba(238, 241, 245, 0.94)), url("tex/snow-color.jpg") center / 520px repeat; }
/* the labels layer sits behind the words (above the world and the veil), so a label can never cover text */
html.hud-live:not(.glass-away) .hud { z-index: -1; }