/* The working file: one serif (Newsreader), five sizes, one ground, one ink, one accent.
   No rules, no shadows, no gradients: surfaces step in tone. */
:root {
  --bg: #f3f4f1;          /* paper */
  --surface: #e7e9e4;     /* one tone step down */
  --ink: #12161d;
  --muted: #4a515c;       /* 7.4:1 on paper */
  --soft: #5f6670;        /* secondary notes and the soft run of names: 5.25:1 on paper */
  --accent: #4063d7;      /* RHM's own blue, the arrow mark's (#4063D7): the action, the price block; white on it 5.27:1 */
  --on-accent: #ffffff;
  --field: #1d2f86;       /* the footer field */

  --s-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --s-body: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --s-state: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);   /* statements, at most 30px */
  --s-big: clamp(2.75rem, 1rem + 6.4vw, 7.5rem);
  --s-display: clamp(3.5rem, 0.6rem + 11.6vw, 13.5rem);

  --m: clamp(16px, 2.6vw, 40px);
  --gap: clamp(120px, 14vw, 220px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--s-body)/1.55 "Newsreader", Georgia, serif;
  font-optical-sizing: auto; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--m); top: 12px; z-index: 10; background: var(--ink); color: var(--bg); padding: 8px 12px; }

/* one button, square */
.btn {
  display: inline-block; background: var(--accent); color: var(--on-accent); text-decoration: none;
  font: 500 var(--s-small)/1 "Newsreader", serif; padding: 15px 22px; border: 0; cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s;
}
.btn:hover { background: #3556c8; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-ink { background: var(--ink); }
.btn-ink:hover { background: #000; }
.text-link { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; transition: color .18s; }
.text-link:hover { color: var(--accent); }

/* the bar: wordmark, three links, one action */
.bar { display: flex; align-items: center; gap: 28px; padding: 20px var(--m); }
.mark { font-weight: 500; font-size: var(--s-body); text-decoration: none; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 10px; }
.mark img { width: 26px; height: 26px; }
.links { display: flex; gap: 24px; margin-left: auto; }
.links a { text-decoration: none; font-size: var(--s-small); }
.links a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* hero: the sentence with the picture inside it */
.hero { padding: clamp(56px, 9vw, 140px) var(--m) 0; }
.hero h1 {
  font-weight: 300; font-size: var(--s-display); line-height: .92; letter-spacing: -0.05em;
}
.frame {
  display: inline-block; width: 2.3em; height: .74em; vertical-align: baseline; position: relative;
  overflow: hidden; margin: 0 .04em; transform: translateY(.02em);
}
.frame img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%; }
.lead { font-size: var(--s-state); line-height: 1.3; max-width: 38ch; margin-top: 40px; color: var(--ink); }
.actions { margin-top: 36px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }

/* the live thing */
.yours {
  margin-top: var(--gap); padding: 0 var(--m);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start;
}
.yours-say { grid-column: 1 / span 5; }
.yours h2 { font-weight: 400; font-size: var(--s-big); line-height: 1; letter-spacing: -0.03em; }
.yours-say p { margin-top: 24px; max-width: 34ch; }
.check { grid-column: 7 / span 6; background: var(--surface); padding: clamp(20px, 2.6vw, 36px); }
.check-label { display: block; font-size: var(--s-small); color: var(--muted); margin-bottom: 10px; }
.check-row { display: flex; gap: 10px; }
.check-row input {
  flex: 1; min-width: 0; font: inherit; padding: 13px 14px; border: 0; background: var(--bg); color: var(--ink);
}
.check-status { min-height: 1.5em; margin-top: 14px; font-size: var(--s-small); color: var(--muted); }
.check-status.is-error { color: #a12a1a; }
.check-areas { list-style: none; padding: 0; margin-top: 6px; }
.area { padding: 12px 0; }
.area + .area { background: none; }
.area-head { display: flex; gap: 12px; align-items: baseline; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--soft); flex: none; transform: translateY(-1px); }
.area-name { flex: 1; }
.area-state { font-size: var(--s-small); color: var(--muted); text-align: right; }
.area.ok .dot, .area[data-state="ok"] .dot { background: #2f7d4f; }
.area.warn .dot, .area[data-state="warn"] .dot { background: #b7791f; }
.area.bad .dot, .area[data-state="bad"] .dot { background: #a12a1a; }
.area-summary, .area-details { font-size: var(--s-small); color: var(--muted); margin: 6px 0 0 21px; }
.area-toggle { margin: 6px 0 0 21px; font: inherit; font-size: var(--s-small); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; color: var(--ink); }
.check-after { margin-top: 18px; }
.fixes-title { font-weight: 500; font-size: var(--s-body); }
.fixes-list { margin-top: 8px; padding-left: 1.1em; }
.fixes-list li { margin-top: 6px; }

/* the files: case titles run as one paragraph, each opens its file */
.files { margin-top: var(--gap); padding: 0 var(--m); }
.files-run {
  font-size: var(--s-state); line-height: 1.22; letter-spacing: -0.015em; max-width: 34em; color: var(--soft);
}
.files-head { color: var(--ink); }
.file-name { color: var(--soft); text-decoration: none; transition: color .2s; }
.file-name:hover, .file-name:focus-visible, .file-name.is-on { color: var(--ink); text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.files-note { margin-top: 22px; font-size: var(--s-small); color: var(--muted); }
.file-stack { margin-top: 56px; display: grid; gap: 8px; }
.file { background: var(--surface); }
.file summary {
  list-style: none; cursor: pointer; display: flex; gap: 20px; align-items: baseline; justify-content: space-between;
  padding: 22px clamp(18px, 2.4vw, 32px);
}
.file summary::-webkit-details-marker { display: none; }
.file-title { font-size: var(--s-state); line-height: 1.15; letter-spacing: -0.01em; }
.file-when { font-size: var(--s-small); color: var(--muted); white-space: nowrap; }
.file[open] { background: #dfe2dc; }
.file-body {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px;
  padding: 4px clamp(18px, 2.4vw, 32px) 34px;
}
.file-body p { max-width: 46ch; }
.file-body b { font-weight: 500; }

/* what we work in */
.works { margin-top: var(--gap); padding: 0 var(--m); }
.works-run {
  font-size: var(--s-state); line-height: 1.22; letter-spacing: -0.015em; max-width: 30em; color: var(--soft);
}
.works-head { color: var(--ink); }
.w { transition: color .4s; }
.w.is-lit { color: var(--ink); }
.week { margin-top: 28px; font-size: var(--s-state); }

/* how we work: one verb at a time */
.how { margin-top: var(--gap); }
.panel { position: relative; height: 100svh; min-height: 520px; overflow: hidden; background: var(--ink); }
.panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.verb-wrap { position: absolute; inset: 0; }
.verb {
  position: sticky; top: 50%; transform: translateY(-50%);
  text-align: center; color: #fff; font-weight: 400; font-size: var(--s-display); line-height: .9; letter-spacing: -0.045em;
}
.panel::after { content: ""; position: absolute; inset: 0; background: rgba(10, 14, 20, .38); pointer-events: none; }
.verb-wrap, .panel-line { z-index: 1; }
.panel-line {
  position: absolute; left: var(--m); bottom: var(--m); max-width: 34ch; color: #fff; font-size: var(--s-body);
}

/* the price as one sentence */
.price { background: var(--surface); padding: clamp(80px, 10vw, 160px) var(--m); display: flex; flex-direction: column; justify-content: center; }
.price h2 { font-weight: 300; font-size: var(--s-big); line-height: .98; letter-spacing: -0.045em; }
.block { background: var(--accent); color: var(--on-accent); padding: 0 .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.price-foot { margin-top: 64px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
.price-foot > p:first-child { grid-column: 1 / span 6; max-width: 40ch; }
.price-act { grid-column: 8 / span 5; display: flex; flex-direction: column; align-items: flex-end; gap: 18px; text-align: right; }

/* about: the portrait as a drop cap */
.about { margin-top: var(--gap); padding: 0 var(--m); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.facts { grid-column: 1 / span 2; list-style: none; padding: 0; font-size: var(--s-small); color: var(--muted); }
.facts li + li { margin-top: 12px; }
.bio { grid-column: 3 / span 10; font-size: var(--s-state); line-height: 1.25; }
.bio p + p { margin-top: 1.2em; color: var(--muted); }
.bio strong { font-weight: 500; color: var(--ink); }
.portrait { float: left; width: 3.66em; height: 3.66em; object-fit: cover; margin: .18em .5em 0 0; }

/* talk */
.talk {
  margin-top: var(--gap); padding: 0 var(--m) 96px;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start;
}
.talk-say { grid-column: 1 / span 5; font-size: var(--s-state); line-height: 1.2; letter-spacing: -0.015em; }
.talk-pic { grid-column: 7 / span 2; aspect-ratio: 1; width: 100%; object-fit: cover; }
.talk-links { grid-column: 10 / span 3; }
.talk-q { font-weight: 500; }
.talk-links p + p { margin-top: 18px; }
.talk-links a { text-underline-offset: .2em; text-decoration-thickness: 1px; }
.talk-links a:hover { color: var(--accent); }
.talk-meta { font-size: var(--s-small); color: var(--muted); }

/* footer: the number is the headline */
.foot { background: var(--field); color: #fff; min-height: 70svh; padding: 40px var(--m) 28px; display: flex; flex-direction: column; }
.foot-top { display: flex; justify-content: space-between; gap: 24px; font-size: var(--s-small); }
.foot-call {
  margin-top: auto; text-decoration: none; font-weight: 300; letter-spacing: -0.04em; line-height: 1;
  font-size: min(var(--s-display), 11.2vw); white-space: nowrap; transition: opacity .2s;
}
.foot-call:hover { opacity: .85; }
.foot-meta { margin-top: 36px; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 24px; font-size: var(--s-small); color: rgba(255,255,255,.82); }
.foot-meta p:last-child { text-align: right; }
.credits a { color: inherit; }

/* entrances: parts of each section rise in turn; content is visible without script */
.js .rise { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .rise.in { opacity: 1; transform: none; }
.js .shutter { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease); }
.js .shutter img { transform: scale(1.12); transition: transform 1.4s var(--ease); }
.js .shutter.in { clip-path: inset(0 0 0 0); }
.js .shutter.in img { transform: none; }
.panel > img { transform: scale(1.06); transition: transform 1.6s var(--ease); }
.panel.in > img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .js .rise, .js .shutter, .js .shutter img, .panel > img { transition: none; opacity: 1; transform: none; clip-path: none; }
  html { scroll-behavior: auto; }
}

/* tablet */
@media (max-width: 960px) {
  .yours-say { grid-column: 1 / -1; }
  .check { grid-column: 1 / -1; margin-top: 32px; }
  .price-foot > p:first-child { grid-column: 1 / -1; }
  .price-act { grid-column: 1 / -1; align-items: flex-start; text-align: left; margin-top: 24px; }
  .facts { grid-column: 1 / -1; display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
  .facts li + li { margin-top: 0; }
  .bio { grid-column: 1 / -1; }
  .talk-say { grid-column: 1 / -1; }
  .talk-pic { grid-column: 1 / span 3; margin-top: 32px; }
  .talk-links { grid-column: 5 / -1; margin-top: 32px; }
}

/* phone */
@media (max-width: 600px) {
  .links { display: none; }
  .bar .btn { margin-left: auto; padding: 12px 14px; }
  .frame { width: 2.1em; }
  .lead { margin-top: 28px; }
  .file-body { grid-template-columns: 1fr; gap: 18px; }
  .file summary { flex-direction: column; gap: 6px; }
  .check-row { flex-direction: column; }
  .panel-line { right: var(--m); }
  .portrait { width: 4.6em; height: 4.6em; }
  .talk-pic { grid-column: 1 / span 4; }
  .talk-links { grid-column: 5 / -1; }
  .foot-top { flex-direction: column; }
  .foot-meta { grid-template-columns: 1fr; gap: 8px; }
  .foot-meta p:last-child { text-align: left; }
}

/* the health-check form (the home page's lead form) */
.book { padding: 0 var(--m) 120px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
.book-say { grid-column: 1 / span 6; }
.book-say h2 { font-weight: 400; font-size: var(--s-big); line-height: 1; letter-spacing: -0.03em; }
.book-say p { margin-top: 24px; max-width: 38ch; }
.book-form { grid-column: 8 / span 5; background: var(--surface); padding: clamp(20px, 2.6vw, 36px); }
.f2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.f { margin-bottom: 16px; }
.f label { display: block; font-size: var(--s-small); color: var(--muted); margin-bottom: 6px; }
.f input, .f select, .f textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 0; padding: 12px 14px; border-radius: 0;
}
.f textarea { resize: vertical; min-height: 140px; }
.f select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.flash { padding: 14px 16px; margin-bottom: 18px; }
.flash-ok { background: #dcebe0; color: #173d24; }
.flash-err { background: #f3dcd8; color: #6d1d12; }
@media (max-width: 960px) {
  .book-say { grid-column: 1 / -1; }
  .book-form { grid-column: 1 / -1; margin-top: 32px; }
}
@media (max-width: 600px) { .f2 { grid-template-columns: 1fr; } }

/* critique round 1 (11 Nov): quieter check before it runs; a bolder phone hero; no dead gap on phones */
.check:not(.is-run) .area-state { visibility: hidden; }
@media (max-width: 600px) {
  .hero h1 { font-size: 15vw; }
  .frame { width: 2.25em; }
  .how { margin-top: 96px; }
  .works { margin-top: 96px; }
}

/* the barjeel beside the opening line: the still drawing first, the live 3D fades in over it */
.hero { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.hero h1 { grid-column: 1 / -1; }
.hero .lead { grid-column: 1 / span 6; grid-row: 2; }
.hero .actions { grid-column: 1 / span 6; grid-row: 3; align-self: start; }
.tower { grid-column: 7 / -1; grid-row: 2 / span 3; margin: 1.5vw 0 0; position: relative; aspect-ratio: 1440 / 1240; }
.tower-still, .tower-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tower-still { object-fit: contain; transition: opacity .8s var(--ease); }
.tower-canvas { opacity: 0; transition: opacity .8s var(--ease); }
.tower.is-live .tower-canvas { opacity: 1; }
.tower.is-live .tower-still { opacity: 0; }
.tower figcaption { position: absolute; left: 6%; right: 18%; bottom: -8px; font-size: var(--s-small); color: var(--muted); line-height: 1.45; }
@media (max-width: 960px) {
  .hero .lead, .hero .actions { grid-column: 1 / -1; }
  .tower { grid-column: 1 / -1; grid-row: 4; margin: 28px 0 72px; }
  .tower figcaption { top: 100%; bottom: auto; left: 0; right: 0; margin-top: 6px; }
}

/* a drawing for each file, in one hand: ink lines, RHM blue where the fix happened */
.file-body { grid-template-columns: repeat(2, minmax(0, 1fr)) 220px; }
.file-draw { grid-column: 3; grid-row: 1 / span 2; width: 220px; height: auto; align-self: start; }
@media (max-width: 960px) {
  .file-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .file-draw { grid-column: 1 / -1; grid-row: auto; width: 200px; order: -1; }
}
@media (max-width: 600px) { .file-body { grid-template-columns: 1fr; } }

/* we build software too: the same file pattern, our own builds */
.builds { margin-top: var(--gap); padding: 0 var(--m); }
.builds-say { max-width: 46rem; }
.builds-say h2 { font-weight: 400; font-size: var(--s-big); line-height: 1; letter-spacing: -0.03em; }
.builds-say p { margin-top: 24px; font-size: var(--s-state); line-height: 1.3; }
.builds .file-stack { margin-top: 48px; }
.build-body { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.builds-act { margin-top: 36px; }
@media (max-width: 600px) { .build-body { grid-template-columns: 1fr !important; } }
/* the 3D frame melts into the page: no edge where the sand ground meets the frame */
.tower-canvas, .tower-still {
  -webkit-mask-image: radial-gradient(ellipse 62% 66% at 55% 50%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 62% 66% at 55% 50%, #000 62%, transparent 100%);
}
.tower figcaption { z-index: 2; }

/* pages in the working file's look: How we work, Sectors, Colophon */
.page-main { padding: clamp(48px, 7vw, 110px) var(--m) var(--gap); }
.page-head { max-width: 62rem; }
.page-head h1 { font-weight: 300; font-size: var(--s-big); line-height: .98; letter-spacing: -0.04em; }
.page-head p { margin-top: 28px; font-size: var(--s-state); line-height: 1.3; max-width: 40ch; }
.links a[aria-current="page"] { text-decoration: underline; text-underline-offset: .2em; }
.stage { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; margin-top: clamp(72px, 9vw, 140px); }
.stage-when { grid-column: 1 / span 3; font-size: var(--s-small); color: var(--muted); padding-top: .6em; }
.stage-body { grid-column: 4 / span 8; }
.stage-body h2 { font-weight: 400; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1.08; letter-spacing: -0.025em; }
.stage-body p { margin-top: 18px; max-width: 60ch; }
.stage-body p:first-of-type { margin-top: 22px; }
.sector { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; margin-top: clamp(64px, 8vw, 120px); }
.sector h2 { grid-column: 1 / span 4; font-weight: 400; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1.08; letter-spacing: -0.025em; }
.sector-body { grid-column: 6 / span 7; }
.sector-body p + p { margin-top: 16px; }
.sector-body .see { margin-top: 18px; font-size: var(--s-small); color: var(--muted); }
.page-cta { margin-top: clamp(80px, 10vw, 150px); }
.page-cta p { font-size: var(--s-state); max-width: 34ch; margin-bottom: 24px; }
.colo { max-width: 46rem; }
.colo h2 { font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem); margin-top: clamp(56px, 7vw, 96px); letter-spacing: -0.02em; }
.colo p { margin-top: 16px; }
@media (max-width: 760px) {
  .stage-when, .stage-body, .sector h2, .sector-body { grid-column: 1 / -1; }
  .stage-when { padding-top: 0; margin-bottom: 6px; }
  .sector-body { margin-top: 14px; }
}
/* pictures on the new pages: one per stage and sector, the same crop and treatment */
.stage-pic { grid-column: 1 / span 3; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; align-self: start; }
.sector { grid-template-rows: auto 1fr; }
.sector h2 { grid-row: 1; }
.sector-pic { grid-column: 1 / span 4; grid-row: 2; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-top: 22px; }
.sector-body { grid-row: 1 / span 2; }
.colo-pics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 28px; }
.colo-pics img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface); }
@media (max-width: 760px) {
  .stage-pic { grid-column: 1 / -1; aspect-ratio: 3 / 2; margin-bottom: 20px; }
  .sector-pic, .sector-body { grid-column: 1 / -1; grid-row: auto; }
  .colo-pics { grid-template-columns: repeat(3, 1fr); }
}
/* the colophon in two columns: headings on the left, the text on the right */
.colo { max-width: none; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.colo h2 { grid-column: 1 / span 4; }
.colo p { grid-column: 6 / span 7; max-width: 60ch; }
.colo h2 + p { margin-top: clamp(56px, 7vw, 96px); padding-top: .5em; }
.colo-pics { grid-column: 1 / -1; margin-top: 40px; }
@media (max-width: 760px) {
  .colo h2, .colo p { grid-column: 1 / -1; }
  .colo h2 + p { margin-top: 14px; padding-top: 0; }
}

/* ======================================================================================
   THE RHM BRAND (11 Nov 2026, Abbu: "be'te apply the new branding on live").
   From the RHM design system (tokens.json and README, made in the branding room): IT Simplified.
   Leads dark on the web: surface #0A0F1E, ink #E9EDF8, rhm-blue #6A86F0 on dark (#4063D7 the mark's own),
   rhm-navy for fields, signal #22C3EE only for what is live (never text). Sora for display, Inter to read,
   JetBrains Mono for labels. Near-square corners (8px at most for UI). The mark's 9-degree slant is the shape.
   Technology, not property: no Bur Dubai streets as heroes.
   ====================================================================================== */
:root {
  --bg: #0A0F1E;            /* surface (dark) */
  --surface: #121A30;       /* panel (dark) */
  --line: #263152;
  --ink: #E9EDF8;           /* 15:1 on surface */
  --muted: #9AA3B8;         /* ink-muted: 7.9:1 on surface, 7.1:1 on panel */
  --soft: #9AA3B8;
  --accent: #6A86F0;        /* rhm-blue on dark */
  --on-accent: #0A0F1E;     /* surface text on rhm-blue: 5.7:1 */
  --field: #16213A;         /* rhm-navy */
  --signal: #22C3EE;
  --danger: #FF7B7B;
  --display: "Sora", "Segoe UI", system-ui, sans-serif;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --slant: 9.2deg;
}
html { color-scheme: dark; }
body { font: 400 var(--s-body)/1.6 var(--sans); font-optical-sizing: auto; }
h1, h2, h3, .verb, .foot-call, .price h2, .page-head h1, .talk-say, .file-title, .stage-body h2, .sector h2, .colo h2 {
  font-family: var(--display); letter-spacing: -0.025em;
}
.hero h1, .yours h2, .builds-say h2, .book-say h2, .price h2, .page-head h1 { font-weight: 600; }
.hero h1 { letter-spacing: -0.035em; line-height: .98; font-size: clamp(3rem, 1rem + 7.4vw, 8.75rem); }
.verb, .foot-call { font-weight: 600; letter-spacing: -0.04em; }
.file-title, .stage-body h2, .sector h2, .colo h2, .talk-say { font-weight: 500; }

/* buttons: rhm-blue, near-square; the arrow leans on the slant and lifts to the top right */
.btn { font: 500 15px/20px var(--sans); border-radius: 8px; padding: 13px 22px; }
.btn:hover { background: #8299F4; }
.btn-ink { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-ink:hover { background: #18223D; }
.text-link:hover, .talk-links a:hover { color: var(--accent); }
::selection { background: var(--accent); color: var(--on-accent); }

/* the lockup: the mark, RHM in the display face, IT Simplified beneath; the divider leans with the mark */
.lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.lockup img { width: 34px; height: 34px; }
.lockup b { display: block; font: 700 22px/22px var(--display); letter-spacing: .03em; }
.lockup small { display: block; font: 400 12.5px/16px var(--sans); color: var(--muted); margin-top: 2px; }
.lockup i { width: 1px; height: 30px; background: var(--line); transform: skewX(calc(var(--slant) * -1)); }
.bar { border-bottom: 1px solid var(--line); }
.links a { font-size: 15px; }

/* labels like instruments: mono, small, upper case */
.tag { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/16px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(34,195,238,.22); }

/* the hero: the sentence, then the Lab, our own live 3D, as the picture */
.hero .tag { grid-column: 1 / -1; margin-bottom: 26px; }
.hero h1 .hl { color: var(--accent); }
.hero h1 { grid-row: 2; }
.hero .lead { grid-row: 3; color: var(--ink); }
.hero .actions { grid-row: 4; }
.lab-shot { grid-column: 7 / -1; grid-row: 3 / span 3; margin: 40px 0 0; display: block; text-decoration: none; color: var(--ink); }
.lab-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); transition: transform .5s var(--ease); }
.lab-shot:hover img { transform: translate(3px, -3px); }
.lab-shot figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font: 500 12px/16px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lab-shot figcaption b { color: var(--accent); font-weight: 500; }
@media (max-width: 960px) { .lab-shot { grid-column: 1 / -1; grid-row: auto; margin: 44px 0 0; } }

/* the domain check and the forms on the dark ground */
.check, .book-form, .file { background: var(--surface); }
.check-row input, .f input, .f select, .f textarea { background: var(--bg); color: var(--ink); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line); }
.check-status.is-error { color: var(--danger); }
.file { border-radius: 8px; }
.file[open] { background: #18223D; }
.flash-ok { background: #123326; color: #CDEBD9; }
.flash-err { background: #3A1A1D; color: #FFD3D3; }
.area.ok .dot, .area[data-state="ok"] .dot { background: #3FBF7F; }
.area.warn .dot, .area[data-state="warn"] .dot { background: #E0A43A; }
.area.bad .dot, .area[data-state="bad"] .dot { background: var(--danger); }
.file-draw { filter: invert(1) hue-rotate(180deg); opacity: .92; }

/* how we work: no photographs; each verb on a dark field crossed by the mark's slant */
.panel { background: var(--field); }
.panel::after { background: none; }
.panel .slant { position: absolute; top: -10%; bottom: -10%; left: 62%; width: 2px; background: var(--signal); opacity: .55; transform: skewX(calc(var(--slant) * -1)); z-index: 0; }
.panel .slant + .slant { left: 68%; background: var(--accent); opacity: .45; }
.panel-line { color: var(--ink); }

/* the price block, the footer */
.price { background: var(--surface); }
.block { border-radius: 4px; }
.foot { background: var(--field); color: var(--ink); }
.foot-meta { color: var(--muted); }

/* the talk picture: the RHM mark in 3D, made for the Lab */
.talk-pic { object-fit: contain; background: transparent; }
@media (max-width: 600px) { .lockup small { display: none; } .lockup i { display: none; } }
.price .btn-ink { background: var(--bg); }
.price .btn-ink:hover { background: #050812; }
/* inner pages: no Bur Dubai photographs beside the text (the brand: technology, not property) */
.stage-pic, .sector-pic { display: none; }
@media (min-width: 761px) { .sector-body { grid-row: 1; } }

/* ======================================================================================
   POLISH PASS (11 Nov 2026, Abbu: "a lot of polishing required on the entire thing. apply the skill of top artist")
   One type scale: display (hero) > section (72px max) > statement (24px) > body (17-18px) > small (14px) > label (13px).
   ====================================================================================== */
:root {
  --s-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);      /* 17 to 19px */
  --s-small: 0.9375rem;                                       /* 15px */
  --s-state: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);        /* statements: 20 to 24px */
  --s-big: clamp(2.5rem, 1.2rem + 3.6vw, 4.5rem);            /* section headings: 40 to 72px */
  --gap: clamp(96px, 11vw, 168px);
}
.yours h2, .builds-say h2, .book-say h2, .price h2 { letter-spacing: -0.03em; line-height: 1.02; }
.hero .lead { font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.5rem); line-height: 1.45; max-width: 34ch; color: var(--muted); }
.hero .lead strong { color: var(--ink); font-weight: 500; }

/* buttons: a confident size */
.btn { font-size: 16px; line-height: 20px; padding: 15px 26px; }
.bar .btn { padding: 12px 20px; }

/* labels: never below 13px */
.tag, .lab-shot figcaption { font-size: 13px; }
.lockup small { font-size: 13px; }
.file-when, .facts, .talk-meta, .area-state, .check-label, .f label { font-size: 14px; }

/* no shadows at rest: the Lab picture and the secondary button take a hairline border instead */
.lab-shot img { box-shadow: none; outline: 1px solid var(--line); outline-offset: -1px; }
.btn-ink, .price .btn-ink { box-shadow: none; border: 1px solid var(--line); }

/* how we work: one composed section instead of four empty screens. Four steps in a row, numbered,
   each verb large in Sora, the line beneath, the mark's slant crossing each card. */
.how { counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 var(--m); }
.how .panel { height: auto; min-height: 0; overflow: hidden; border-radius: 8px; padding: clamp(24px, 2.6vw, 40px); display: flex; flex-direction: column; gap: 18px; counter-increment: step; }
.how .panel::before { content: "0" counter(step) " / 04"; font: 500 13px/16px var(--mono); letter-spacing: .06em; color: var(--muted); position: relative; z-index: 1; }
.how .verb-wrap { position: relative; inset: auto; }
.how .verb { position: static; transform: none; text-align: left; font-size: clamp(2.25rem, 1.2rem + 2.2vw, 3.5rem); line-height: 1; margin-top: clamp(48px, 7vw, 120px); }
.how .panel-line { position: relative; left: auto; bottom: auto; right: auto; max-width: none; font-size: var(--s-small); color: #C9D0E2; line-height: 1.55; }
.how .panel .slant { left: 78%; top: -20%; bottom: -20%; opacity: .5; }
.how .panel .slant + .slant { left: 86%; }
.how-head { grid-column: 1 / -1; margin-bottom: 28px; display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.how-head h2 { font-weight: 600; font-size: var(--s-big); line-height: 1.02; letter-spacing: -0.03em; }
.how-head p { max-width: 34ch; color: var(--muted); }
@media (max-width: 960px) { .how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .how { grid-template-columns: 1fr; } .how .verb { margin-top: 28px; } .how-head { flex-direction: column; align-items: start; } }

/* the price and the booking headings sit in two lines on a phone */
@media (max-width: 600px) { .price h2, .book-say h2 { font-size: clamp(2.25rem, 9vw, 2.75rem); } }

/* POLISH, round 2: from the art director's critique (11 Nov) */
/* buttons: 52px high, near-square, a confident weight */
.btn { min-height: 52px; display: inline-flex; align-items: center; padding: 0 28px; border-radius: 6px; font-weight: 600; }
.bar .btn { min-height: 44px; padding: 0 20px; }
/* the hero picture bleeds off the right edge, no frame */
.lab-shot { margin-right: calc(var(--m) * -1); }
.lab-shot img { outline: 0; border-radius: 10px 0 0 10px; }
.lab-shot figcaption { padding-right: var(--m); }
.lab-shot figcaption b { white-space: nowrap; }
@media (max-width: 600px) { .lab-shot img { aspect-ratio: 4 / 3; object-position: 50% 45%; } }
/* the price: the highlight sits clear of the line above */
.price h2 { line-height: 1.14; }
.block { padding: 0 .12em; line-height: 1.05; display: inline; }
.price-act { align-items: flex-start; text-align: left; }
/* one contact area: the heading, the note, the quick ways to talk; the form beside it */
.book { padding-top: var(--gap); }
.talk-now { margin-top: 28px !important; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.talk-now .tag { width: 100%; }
.talk-now a { color: var(--ink); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.talk-now a:hover { color: var(--accent); }
.nw { white-space: nowrap; }
.f input, .f select, .f textarea { min-height: 48px; background: var(--field); }
/* the footer: compact, the number still the headline */
.foot { min-height: 0; padding: 64px var(--m) 40px; border-top: 1px solid var(--line); background: var(--bg); }
.foot-call { margin-top: 56px; }
.foot-meta, .foot-top { font-size: 14px; }
/* the domain check's list uses its full width on a phone */
.check-areas { width: 100%; }
/* tablet: the menu would wrap, so it gives way to the one button */
/* tablet: the menu stays, one line, a little tighter; the tagline under RHM gives way */
@media (min-width: 601px) and (max-width: 960px) { .bar { gap: 18px; } .links { gap: 16px; } .links a { font-size: 14px; white-space: nowrap; } .lockup small, .lockup i { display: none; } .bar .btn { padding: 0 16px; white-space: nowrap; } }
/* the brand's shape as structure: the price band is cut at the mark's 9-degree slant */
.price { clip-path: polygon(0 0, 100% 3.2vw, 100% 100%, 0 calc(100% - 3.2vw)); padding-top: calc(clamp(80px, 10vw, 160px) + 3.2vw); padding-bottom: calc(clamp(80px, 10vw, 160px) + 3.2vw); }
/* pictures of RHM's own 3D, from the Lab: one per section that has a subject */
.sec-pic { width: 100%; max-width: 560px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; margin-top: 36px; }
.works { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; }
.works .sec-pic { grid-column: 8 / -1; grid-row: 1 / span 2; margin-top: 0; justify-self: end; }
.works-run, .week { grid-column: 1 / span 7; }
.w.is-lit { color: var(--ink); }
@media (max-width: 960px) { .works .sec-pic { grid-column: 1 / -1; grid-row: auto; margin-top: 32px; justify-self: start; } .works-run, .week { grid-column: 1 / -1; } }
.builds .sec-pic { max-width: 720px; }
/* software: the words and the picture side by side, the builds beneath */
.builds { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.builds-say { grid-column: 1 / span 6; display: contents; }
.builds-say h2, .builds-say p { grid-column: 1 / span 6; }
.builds-say .sec-pic { grid-column: 8 / -1; grid-row: 1 / span 2; margin-top: 0; align-self: center; justify-self: end; }
.builds .file-stack, .builds-act { grid-column: 1 / -1; }
@media (max-width: 960px) { .builds-say h2, .builds-say p, .builds-say .sec-pic { grid-column: 1 / -1; grid-row: auto; } .builds-say .sec-pic { margin-top: 32px; justify-self: start; } }
/* before a check runs, the status words take no room (they were only hidden, and squeezed the names) */
.check:not(.is-run) .area-state { display: none; }
/* the hero's moving picture: the Lab tour plays over its own still, fading in once it is actually playing */
.lab-media { position: relative; }
.lab-film { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px 0 0 10px; opacity: 0; transition: opacity .8s var(--ease); pointer-events: none; }
.lab-film.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lab-film { display: none; } }
/* the clip's pause control (WCAG 2.2.2): small, near-square, on the picture's lower left */
.film-pause { position: absolute; left: 14px; bottom: 54px; z-index: 2; font: 500 13px/16px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: rgba(10,15,30,.72); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; cursor: pointer; opacity: 0; transition: opacity .4s; }
.film-pause.on { opacity: 1; }
.film-pause:hover { border-color: var(--accent); }
/* the caption's link sits beside its text, clear of the assistant's floating button */
.lab-shot figcaption { justify-content: flex-start; gap: 28px; }