/* ============================================================
   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: #060b16;
  --g-text: rgba(255, 255, 255, 0.78);
  --g-soft: #9db8ff;
  --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: #fff; 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(70, 110, 255, 0.28), transparent 70%),
    radial-gradient(ellipse 55% 35% at 18% 52%, rgba(50, 90, 230, 0.22), transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 90%, rgba(70, 110, 255, 0.24), transparent 70%),
    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: #fff;
}
.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: #fff; 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: #fff; 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 12px rgba(143, 178, 255, 0.9);
}
.scene .aside { font-size: 15px; margin-top: 26px; color: rgba(255,255,255,0.62); }
.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(255, 255, 255, 0.34); }
.g-btn.g:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

/* "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 0 28px rgba(79, 123, 255, 0.55)); }
.glyph svg path, .glyph svg rect, .glyph svg circle {
  fill: rgba(143, 176, 255, 0.22); stroke: rgba(190, 210, 255, 0.85); stroke-width: 2.5; vector-effect: non-scaling-stroke;
}
.glyph svg .line { fill: none; stroke: #6f8fff; stroke-width: 3; }
.glyph svg .faint { opacity: 0.45; }
.glyph svg .dots circle { fill: #8fb2ff; 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.55; }
  html.glass-live .scene .box { text-shadow: 0 1px 14px rgba(6, 11, 22, 0.9), 0 0 2px rgba(6, 11, 22, 0.8); }
}