/* HayyakTech site styles. Native CSS, no framework.
Design read: B2B technology services company in Saudi Arabia, trust-first, clean.
Dials: variance 6, motion 4, density 4.
Shape rule: cards and images 16px, inputs 10px, buttons and chips full pill.
Light mode only. Company pages use the company brand: plum and ink on paper, lilac on
dark surfaces, Geist (IBM Plex Sans Arabic for Arabic). Gold belongs to Hayyak Hotelier OS:
its page, its screens, the footer product badge and the Hotelier OS card on the Industries page. */
@font-face {
font-family: "Geist";
src: url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2-variations");
font-weight: 100 900; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Geist";
src: url("/assets/fonts/geist-latin-ext-wght-normal.woff2") format("woff2-variations");
font-weight: 100 900; font-style: normal; font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Plex Arabic";
src: url("/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
/* Arabic text at weight 500 (the navigation, form choices) uses the 600 file, so pages load three Arabic weights, not four */
font-weight: 500 600; font-style: normal; font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
/* English pages show only a few Arabic words: «العربية» in the language switch, «حيّاك تك» in the footer and «حيّاك» on
About. They use a 3 KB cut of Plex Arabic with just those letters (tools/make-ar-ui-font.mjs), not the 45 KB faces.
The 700 cut is for the phone menu's «العربية» (weight 620), so it loads only when that menu opens. */
@font-face { font-family: "Plex Arabic UI"; src: url("/assets/fonts/plex-arabic-ui-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0627-062A, U+062D, U+0631, U+0639, U+0643-0644, U+064A, U+0651; }
@font-face { font-family: "Plex Arabic UI"; src: url("/assets/fonts/plex-arabic-ui-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0627-062A, U+062D, U+0631, U+0639, U+0643-0644, U+064A, U+0651; }
@font-face { font-family: "Plex Arabic UI"; src: url("/assets/fonts/plex-arabic-ui-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0627-062A, U+062D, U+0631, U+0639, U+0643-0644, U+064A, U+0651; }
/* Arabic pages show Segoe UI (Windows) until Plex Arabic arrives, scaled to Plex's width and line metrics so the swap
barely moves the text. Ascent and descent are Plex's (108.5% and 41.5%) divided by the size adjustment. */
@font-face { font-family: "Plex Arabic Fallback"; src: local("Segoe UI"), local("SegoeUI"); font-weight: 400; size-adjust: 90.6%; ascent-override: 119.8%; descent-override: 45.8%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic Fallback"; src: local("Segoe UI Semibold"), local("SegoeUI-Semibold"); font-weight: 500 600; size-adjust: 95%; ascent-override: 114.2%; descent-override: 43.7%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic Fallback"; src: local("Segoe UI Bold"), local("SegoeUI-Bold"); font-weight: 700; size-adjust: 96.8%; ascent-override: 112.1%; descent-override: 42.9%; line-gap-override: 0%; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
/* ---------- tokens ----------
HayyakTech is part of the Hayyak family: plum and ink are the company colours on paper, lilac on
dark surfaces. Gold belongs to Hayyak Hotelier OS only (its page, its screens, the product card on
Industries and the footer product badge), and only on dark surfaces, since gold on light fails
contrast. Neutral paper, never cream. */
:root {
--font: "Geist", "Plex Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--bg: #F6F5F6;
--surface: #FDFCFD;
--surface-2: #EEEBED;
--ink: #1C1219;
--muted: #645A61;
--line: rgb(28 18 25 / .09);
--shadow: 0 1px 2px rgb(28 18 25 / .04), 0 30px 60px -28px rgb(28 18 25 / .22);
--spring: cubic-bezier(.32, .72, 0, 1);
--accent: #4A2A43;
--accent-hover: #331C2E;
--on-accent: #FDFCFD;
--accent-soft: #EEE6EC;
--accent-soft-ink: #4A2A43;
/* Hayyak family colours */
--plum: #331C2E;
--plum-2: #5C3B55;
--bronze: #997555;
--gold: #D1B384;
--cream: #FDF9F0;
--r-card: 16px;
--r-input: 10px;
--wrap: 1240px;
--ease: cubic-bezier(.16, 1, .3, 1);
--header-h: 72px;
color-scheme: light;
}
.prod-hero { box-shadow: inset 0 0 0 1px rgb(209 179 132 / .22); }
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
margin: 0; background: var(--bg); color: var(--ink);
font-family: var(--font); font-size: 1.0625rem; line-height: 1.6;
font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 640; letter-spacing: -0.025em; line-height: 1.08; text-wrap: balance; }
h2 { font-size: clamp(1.85rem, 1.4rem + 1.7vw, 2.6rem); }
h3 { font-size: 1.125rem; letter-spacing: -0.01em; line-height: 1.3; font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
li { text-wrap: pretty; } /* no one-word last lines in bullet lists either (18 Oct final sweep) */
.ic { width: 1.25em; height: 1.25em; flex: none; }
.ic-sm { width: 1.05em; height: 1.05em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.site-footer :focus-visible { outline-color: var(--fg); }
.cine-copy :focus-visible, .prod-hero .product-copy :focus-visible, .demo-reset:focus-visible { outline-color: #F1ECEF; }
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(4.5rem, 3rem + 6vw, 8rem); }
.section-tight { padding-block: clamp(4rem, 3rem + 4vw, 6rem); }
.lede { color: var(--muted); font-size: clamp(1.075rem, 1rem + .3vw, 1.2rem); line-height: 1.6; max-width: 58ch; }
.eyebrow { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-soft-ink); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 100; background: var(--ink); color: var(--bg); padding: .6rem 1rem; border-radius: 999px; }
.skip:focus { top: .75rem; }
/* ---------- buttons ---------- */
.btn {
--b: var(--accent);
display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap;
min-height: 48px; padding: .75rem 1.35rem; border-radius: 999px; border: 1px solid transparent;
font: inherit; font-size: 1rem; font-weight: 560; text-decoration: none; cursor: pointer;
transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { min-height: 40px; padding: .5rem 1rem; font-size: .9375rem; }
.btn-text { display: inline-flex; align-items: center; gap: .4rem; font-weight: 560; text-decoration: none; color: var(--ink); padding-block: .5rem; }
/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s var(--spring); }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-row { height: var(--header-h); display: flex; align-items: center; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.brand-word { font-weight: 420; font-size: 1.05rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.brand-stack { display: grid; gap: 1px; line-height: 1.15; }
.brand-ar { font-family: "Plex Arabic", var(--font); font-weight: 600; font-size: .95rem; color: var(--muted); letter-spacing: 0; }
.brand-lg .brand-word { font-size: 1.3rem; }
.main-nav { display: flex; gap: 1.75rem; margin-inline-start: auto; }
.main-nav a { text-decoration: none; color: var(--muted); font-size: .9375rem; font-weight: 500; padding-block: .4rem; border-bottom: 2px solid transparent; transition: color .3s var(--spring); }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--ink); }
.main-nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.header-cta { display: flex; align-items: center; gap: .6rem; }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.mobile-nav { display: none; }
@media (max-width: 900px) {
.main-nav, .header-cta .btn { display: none; }
.header-cta { margin-inline-start: auto; }
.nav-toggle { display: inline-flex; }
.mobile-nav:not([hidden]) { display: grid; gap: .25rem; padding: .75rem 1.25rem 1.5rem; border-top: 1px solid var(--line); background: var(--bg); }
.mobile-nav a:not(.btn) { padding: .85rem .25rem; text-decoration: none; font-size: 1.125rem; font-weight: 560; border-bottom: 1px solid var(--line); }
.mobile-nav .btn { margin-top: .75rem; }
}
/* ---------- hero ---------- */
.hero { padding-block: clamp(2.5rem, 1rem + 5vw, 5.5rem) clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.hero h1 { max-width: 19ch; }
.hero .lede { margin-top: 1.5rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 2.25rem; }
.hero-media { position: relative; }
.hero-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--shadow); }
@media (max-width: 860px) {
.hero-media img { aspect-ratio: 4 / 3; }
}
/* ---------- services (tabs) ---------- */
.services-head { max-width: 60ch; }
.services-head .lede { margin-top: 1rem; }
.tablist { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; }
.tab {
min-height: 44px; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
font: inherit; font-size: .9375rem; font-weight: 540; color: var(--muted); cursor: pointer;
transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.tab:hover { color: var(--ink); border-color: var(--muted); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (max-width: 640px) {
.tablist { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -1.25rem; padding-inline: 1.25rem; scrollbar-width: none; }
.tablist::-webkit-scrollbar { display: none; }
.tab { scroll-snap-align: start; white-space: nowrap; }
}
.tabpanel { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.75rem, 1rem + 3vw, 4rem); margin-top: 2rem; align-items: start; }
.tabpanel[hidden] { display: none; }
.panel-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); }
.panel-media p { margin-top: 1.25rem; color: var(--muted); max-width: 46ch; }
.svc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.svc { padding-block: 1.5rem; border-top: 1px solid var(--line); display: grid; grid-template-rows: auto auto 1fr auto; gap: .5rem; }
.svc-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-soft-ink); display: grid; place-items: center; margin-bottom: .35rem; }
.svc p { color: var(--muted); font-size: .98rem; }
@media (max-width: 960px) { .tabpanel { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .svc-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
.tabpanel:not([hidden]) { animation: panel-in .45s var(--ease) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
/* ---------- process timeline ---------- */
.process-head { max-width: 40ch; }
.steps { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; counter-reset: step; position: relative; }
.steps::before { content: ""; position: absolute; top: 21px; left: 22px; right: 22px; height: 1px; background: var(--line); }
.step { position: relative; }
.step-dot { width: 44px; height: 44px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent); position: relative; }
.step h3 { margin-top: 1.25rem; font-size: 1.3rem; }
.step p { margin-top: .5rem; color: var(--muted); font-size: .98rem; max-width: 30ch; }
@media (max-width: 860px) {
.steps { grid-template-columns: 1fr; gap: 0; }
.steps::before { top: 22px; bottom: 22px; left: 21px; right: auto; width: 1px; height: auto; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 0 1.25rem; padding-bottom: 2rem; }
.step h3 { margin-top: .55rem; }
.step p { grid-column: 2; }
}
/* four-step row: each step shares the row tracks, so a title that wraps to two lines keeps every paragraph on one line
(the five-step list wraps to two rows below 1000px and keeps its own row gap) */
@media (min-width: 861px) {
.steps:not(.steps-5) { row-gap: 0; }
.steps:not(.steps-5) > .step { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
}
/* ---------- product block (Hayyak Hotelier OS hero) ---------- */
.product-copy { padding: clamp(2rem, 1rem + 4vw, 4rem); display: flex; flex-direction: column; gap: 1.25rem; justify-content: center; }
.product-copy .eyebrow { color: var(--gold); }
.product-logo { width: 132px; height: auto; }
.product-copy p { color: rgb(253 249 240 / .78); max-width: 46ch; }
.btn-gold { background: var(--gold); color: var(--plum); align-self: flex-start; margin-top: .5rem; }
.btn-gold:hover { background: #E0C79E; }
.product-media img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
@media (max-width: 860px) { .product-media { order: -1; } .product-media img { aspect-ratio: 3 / 2; min-height: 0; } }
/* ---------- CTA card ---------- */
.cta-card { border-radius: calc(var(--r-card) + 8px); background: var(--surface); border: 1px solid var(--line); padding: clamp(2rem, 1rem + 4vw, 4rem); display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; }
.cta-card .lede { margin-top: 1rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; }
.cta-mail { flex-basis: 100%; text-align: end; margin-top: .25rem; color: var(--muted); font-size: .95rem; }
.cta-mail a { color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 860px) { .cta-card { grid-template-columns: 1fr; } .cta-actions { justify-content: flex-start; } .cta-mail { text-align: start; } }
/* ---------- footer: dark band, inspired by the original hayyaktech.com footer ---------- */
.site-footer { --fg: #F1ECEF; --fg-muted: #A99CA5; --fg-line: #33262F; background: #150D13; color: var(--fg); padding-block: 4rem 2rem; margin-top: clamp(2rem, 1rem + 3vw, 4rem); }
.site-footer .brand-svg { color: #E6CFE0; }
.site-footer .word-tech b { color: #E6CFE0; }
.site-footer .brand-ar { color: var(--fg-muted); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 2.5rem; }
.footer-brand p { margin-top: 1rem; color: var(--fg-muted); font-size: .95rem; max-width: 38ch; }
.footer-product { display: inline-flex; align-items: center; gap: .9rem; margin-top: 1.5rem; padding: .75rem 1.1rem; border: 1px solid var(--fg-line); border-radius: 12px; text-decoration: none; color: var(--fg); font-size: .9rem; font-weight: 540; transition: border-color .3s var(--spring); }
.footer-product:hover { border-color: var(--gold); }
.footer-h { font-size: .875rem; font-weight: 600; letter-spacing: 0; margin-bottom: .9rem; color: #E6CFE0; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer li a, .site-footer li span { color: var(--fg-muted); text-decoration: none; font-size: .95rem; display: inline-flex; align-items: flex-start; gap: .5rem; }
.site-footer li a .ic { flex: none; margin-top: .2rem; }
.site-footer li a:hover { color: var(--fg); }
.footer-registry { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--fg-line); }
.registry { display: flex !important; flex-wrap: wrap; align-items: center; gap: 1.25rem clamp(1.5rem, 1rem + 2.5vw, 3.5rem) !important; }
.registry li { display: flex; align-items: center; }
.footer-ids { display: inline-block; margin-inline-start: 1rem; }
.footer-ids b { color: var(--fg); font-weight: 560; font-variant-numeric: tabular-nums; }
.reg-mark { display: block; width: var(--w); height: var(--h); background: var(--fg-muted); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
/* the mark files load only once the footer is near (site.js adds .is-near to the list); without scripts they load at once;
until then each mark is painted transparent, not hidden, so screen readers still read its name */
html:not(.js) .reg-mark, .registry.is-near .reg-mark { --src: var(--mark); }
.js .registry:not(.is-near) .reg-mark { background: transparent !important; }
.footer-legal { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--fg-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; color: var(--fg-muted); font-size: .875rem; }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { color: var(--fg-muted); text-decoration: none; }
.footer-links a:hover { color: var(--fg); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
/* ---------- inner pages ---------- */
.page-hero { padding-block: clamp(2.5rem, 1rem + 4vw, 5rem) clamp(2rem, 1rem + 3vw, 3.5rem); }
.page-hero .lede { margin-top: 1.25rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.split img { width: 100%; border-radius: var(--r-card); aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split h2 + .lede { margin-top: 1.25rem; }
.prose { max-width: 68ch; }
.prose h2 { font-size: 1.5rem; margin-top: 2.75rem; }
.prose h3 { margin-top: 1.75rem; }
.prose p, .prose li { color: var(--muted); }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 1rem; }
.prose h2 + p, .prose h3 + p { margin-top: .75rem; }
.prose ul { padding-inline-start: 1.25rem; display: grid; gap: .4rem; }
.prose a { color: var(--accent-soft-ink); text-underline-offset: 3px; }
.values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2.5rem; }
.value { padding: 1.75rem; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
.value:nth-child(2) { background: var(--accent-soft); border-color: transparent; }
.value:nth-child(3) { background: var(--ink); color: var(--bg); border-color: transparent; }
.value:nth-child(3) p { color: color-mix(in srgb, var(--bg) 72%, transparent); }
.value .ic { width: 28px; height: 28px; color: var(--accent); }
.value:nth-child(2) .ic, .value:nth-child(2) p { color: var(--accent-soft-ink); }
.value h3 { margin-top: 1rem; font-size: 1.25rem; }
.value p { margin-top: .5rem; color: var(--muted); }
@media (max-width: 700px) { .values { grid-template-columns: 1fr; } }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 2rem; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 560; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .facts { grid-template-columns: minmax(0, 1fr); row-gap: .15rem; } .facts dd + dt { margin-top: .9rem; } }
/* product page */
.prod-hero { background: var(--plum); color: var(--cream); border-radius: calc(var(--r-card) + 8px); overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; }
.prod-hero .product-copy { gap: 1.5rem; }
.prod-hero h1 { color: var(--cream); }
.prod-hero .lede { color: rgb(253 249 240 / .8); }
.prod-hero .btn-text { color: var(--cream); }
@media (max-width: 860px) { .prod-hero { grid-template-columns: 1fr; } }
/* contact form */
.contact-grid { display: grid; grid-template-columns: 1.35fr .9fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(1.25rem, 1rem + 2vw, 2.25rem); }
.field { display: grid; gap: .4rem; align-content: start; }
.field-full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }
.field label { font-size: .9375rem; font-weight: 560; }
.field .opt { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg);
border: 1px solid rgb(28 18 25 / .5); border-radius: var(--r-input); padding: .75rem .9rem; min-height: 48px;
transition: border-color .3s var(--spring), box-shadow .3s var(--spring);
}
.field textarea { min-height: 140px; resize: vertical; }
/* the area select drops the native control so it matches the text fields in every browser; the chevron
(Phosphor caret-down) sits at the inline end, on the left in Arabic */
.field select { -webkit-appearance: none; appearance: none; line-height: inherit; cursor: pointer; padding-inline-end: 2.75rem;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-size: 18px 18px; background-position: right .9rem center; }
[dir="rtl"] .field select { background-position: left .9rem center; }
/* name, organisation and overview: once the field has text (site.js adds .has-text), each line runs in the
direction of its own text (English on the Arabic page, Arabic on the English page). An empty field keeps
the page direction, so the Arabic caret starts on the right (an empty plaintext textarea starts on the left) */
.field input[type="text"].has-text, .field textarea.has-text { unicode-bidi: plaintext; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.help { font-size: .875rem; color: var(--muted); }
.help-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .75rem; }
.help-row .help:first-child { flex: 1 1 18rem; }
.help.count { flex: none; margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.error { font-size: .875rem; color: #B42318; min-height: 0; }
.field[data-invalid] input, .field[data-invalid] select, .field[data-invalid] textarea { border-color: #B42318; }
.choice-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 560px) { .choice-row { grid-template-columns: 1fr; } }
.choice-row label { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 999px; font-weight: 500; cursor: pointer; }
.choice-row input { accent-color: var(--accent); width: 18px; height: 18px; min-height: 0; }
.choice-row label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-ink); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form-status { grid-column: 1 / -1; border-radius: var(--r-input); padding: 1rem 1.1rem; font-size: .975rem; }
.form-status[data-kind="ok"] { background: var(--accent-soft); color: var(--accent-soft-ink); }
.form-status[data-kind="err"] { background: #FDECEA; color: #8A1C12; }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.aside-card { border-radius: var(--r-card); padding: 1.75rem; background: var(--surface-2); }
.aside-card h2 { font-size: 1.25rem; }
.aside-card ol { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; counter-reset: n; }
.aside-card ol li { display: grid; grid-template-columns: 28px 1fr; gap: .75rem; color: var(--muted); counter-increment: n; }
.aside-card ol li::before { content: counter(n); width: 28px; height: 28px; border-radius: 999px; background: var(--surface); display: grid; place-items: center; font-size: .875rem; font-weight: 600; color: var(--ink); }
.direct { margin-top: 1rem; display: grid; gap: .5rem; }
.direct a { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 540; padding: .75rem 1rem; border-radius: var(--r-input); background: var(--surface); border: 1px solid var(--line); }
.direct a:hover { border-color: var(--ink); }
/* 404 */
.notfound { min-height: 60dvh; display: grid; align-content: center; gap: 1.25rem; }
/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
.hero-copy > * { animation: rise .8s var(--ease) both; }
.hero-copy > *:nth-child(2) { animation-delay: .08s; }
.hero-copy > *:nth-child(3) { animation-delay: .16s; }
.hero-media { animation: rise 1s .12s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rv.rv-wait { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity .9s var(--spring), transform .9s var(--spring), filter .9s var(--spring); }
.rv.rv-wait.in { opacity: 1; transform: none; filter: blur(0); }
}
/* ---------- small helpers ---------- */
.section-flush { padding-top: 0; }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.legend { font-size: .9375rem; font-weight: 560; margin-bottom: .4rem; padding: 0; }
.wrap.prose { max-width: none; }
.wrap.prose > * { max-width: 68ch; }
/* logo wall (technology platforms): monochrome via mask, sized optically by build.mjs */
.clients-row { display: grid; grid-template-columns: 9.5rem 1fr; align-items: center; gap: 1.25rem 2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 1.75rem; }
.clients-h { font-size: .875rem; font-weight: 560; letter-spacing: 0; color: var(--muted); }
.clients-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 1.5rem clamp(2.5rem, 1rem + 4vw, 5rem); }
.clients-list.spread { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); justify-items: center; gap: 1.5rem 1rem; }
.clients-list.spread .logo-img { max-width: 100%; }
.logo-item { display: flex; align-items: center; }
.logo-img { display: block; width: var(--w); height: var(--h); background: var(--muted); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; transition: background-color .3s var(--spring); }
.logo-item:hover .logo-img { background: var(--ink); }
@media (max-width: 760px) {
.clients-row { grid-template-columns: 1fr; }
.clients-list { justify-content: flex-start; gap: 1.25rem 2rem; }
.logo-img { width: calc(var(--w) * .78); height: calc(var(--h) * .78); }
}
/* product page sections */
.problems { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2.5rem; }
.problem { padding: clamp(1.4rem, 1rem + 1vw, 2rem); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
.problem .ic { width: 28px; height: 28px; color: var(--accent); }
.problem h3 { margin-top: 1rem; font-size: 1.2rem; }
.problem p { margin-top: .5rem; color: var(--muted); max-width: 48ch; }
.steps-5 { grid-template-columns: repeat(5, 1fr); }
.personas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.5rem; }
.persona { padding: 1.5rem; border-top: 2px solid var(--accent); background: var(--surface); border-radius: 0 0 var(--r-card) var(--r-card); }
.persona h3 { font-size: 1.1rem; }
.persona p { margin-top: .5rem; color: var(--muted); font-size: .98rem; }
.split-top { align-items: start; }
.fit { display: grid; gap: 1.25rem; }
.fit-item { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.fit-item:last-child { border-bottom: 0; }
.fit-item > .ic { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-soft-ink); }
.fit-item h3 { font-size: 1.1rem; }
.fit-item p { margin-top: .35rem; color: var(--muted); }
.faq { display: grid; gap: .75rem; }
.faq details { border: 1px solid var(--line); border-radius: var(--r-input); background: var(--surface); padding: 1rem 1.25rem; }
.faq summary { cursor: pointer; font-weight: 580; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 500; font-size: 1.25rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-top: .75rem; color: var(--muted); }
@media (max-width: 1000px) { .steps-5 { grid-template-columns: repeat(3, 1fr); } .personas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .steps-5 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .problems, .personas { grid-template-columns: 1fr; } }
/* the arch mark and the wordmark */
.brand-svg { width: 38px; height: 38px; color: var(--accent); display: block; flex: none; }
.brand-lg .brand-svg { width: 52px; height: 52px; }
.word-tech { font-weight: 660; letter-spacing: -0.035em; text-transform: none; font-size: 1.3rem; }
.word-tech b { font-weight: 660; color: var(--accent); }
.brand-lg .word-tech { font-size: 1.55rem; }
.clients-row.stack { grid-template-columns: 1fr; gap: 1.25rem; }
/* ===== Hotelier OS product previews (product palette: plum, gold, cream). Sample data only. ===== */
.pv { --p: #331C2E; --p2: #5C3B55; --g: #D1B384; --b: #997555; --c: #FDF9F0; --cw: #F6EEDF; --ink2: #2B1A26; --mut: #7A6872; }
.pv-note { font-size: .8125rem; color: var(--muted); margin-top: 1rem; }
.demo { background: var(--plum); border-radius: calc(var(--r-card) + 8px); padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); color: var(--cream); }
.demo h2 { color: var(--cream); }
.demo .lede { color: rgb(253 249 240 / .75); margin-top: .75rem; }
.demo-grid { display: grid; grid-template-columns: .85fr 1.15fr 1fr; gap: 1.25rem; margin-top: 2rem; align-items: stretch; }
.demo-col h3 { font-size: .95rem; color: var(--gold); font-weight: 600; }
.demo-col .sub { font-size: .8125rem; color: rgb(253 249 240 / .6); margin-bottom: .75rem; }
@media (max-width: 980px) { .demo-grid { grid-template-columns: 1fr; } }
/* phone */
.phone { width: 100%; max-width: 280px; margin-inline: auto; background: #1E1019; border-radius: 34px; padding: 10px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .5); }
.phone-screen { background: var(--cream); color: #2B1A26; border-radius: 26px; padding: 18px 14px 14px; min-height: 420px; display: flex; flex-direction: column; gap: 12px; }
.phone-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #7A6872; }
.phone-top b { color: #331C2E; letter-spacing: .14em; font-weight: 600; }
.phone-greet { font-size: 15px; font-weight: 600; color: #331C2E; line-height: 1.25; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { border: 0; border-radius: 14px; padding: 12px 10px; text-align: start; font: inherit; font-size: 12px; font-weight: 560; color: #331C2E; background: #F3E8D6; cursor: pointer; display: grid; gap: 6px; transition: transform .15s var(--ease), background-color .2s; }
.tile .ic { width: 20px; height: 20px; color: #997555; }
.tile:hover { background: #EADBC1; }
.tile:active { transform: scale(.97); }
.tile.is-active { background: #331C2E; color: #FDF9F0; }
.tile.is-active .ic { color: #D1B384; }
.chat { margin-top: auto; background: #fff; border-radius: 16px; padding: 10px; display: grid; gap: 6px; min-height: 92px; align-content: end; }
.chat-empty { font-size: 11.5px; color: #7A6872; text-align: center; }
.msg { font-size: 12px; line-height: 1.4; padding: 7px 10px; border-radius: 12px 12px 4px 12px; background: #331C2E; color: #FDF9F0; justify-self: end; max-width: 88%; }
.msg.reply { background: #F3E8D6; color: #331C2E; border-radius: 12px 12px 12px 4px; justify-self: start; }
.msg[dir="rtl"] { font-family: "Plex Arabic", var(--font); }
/* staff board (CrewOps+) */
.board { background: var(--cream); color: #2B1A26; border-radius: 16px; overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.board-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #F3E8D6; font-size: 11px; color: #7A6872; }
.board-bar i { width: 8px; height: 8px; border-radius: 50%; background: #D9C9AE; display: inline-block; }
.board-bar span { margin-inline-start: 8px; font-weight: 600; color: #331C2E; }
.board-rows { padding: 10px; display: grid; gap: 8px; flex: 1; align-content: start; }
.brow { border: 1px solid #EADBC1; border-radius: 12px; padding: 10px 12px; background: #fff; transition: border-color .3s, box-shadow .3s, background-color .3s; }
.brow-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #331C2E; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot-fnb { background: #997555; } .dot-hk { background: #5C3B55; } .dot-mt { background: #C2873A; } .dot-fo { background: #331C2E; }
.brow-task { margin-top: 6px; font-size: 11.5px; color: #7A6872; min-height: 18px; }
.brow.is-hot { border-color: #D1B384; box-shadow: 0 0 0 3px rgb(209 179 132 / .35); }
.pill { display: inline-flex; align-items: center; gap: 6px; background: #331C2E; color: #FDF9F0; border-radius: 999px; padding-block: 3px; padding-inline: 10px; font-size: 11.5px; }
.pill .t { color: #D1B384; white-space: nowrap; }
.board-foot { display: flex; gap: 18px; padding: 10px 12px; border-top: 1px solid #EADBC1; font-size: 11px; color: #7A6872; }
.board-foot b { color: #331C2E; }
/* AI panel (Aura) */
.aura { background: #23131F; border: 1px solid rgb(209 179 132 / .25); border-radius: 16px; padding: 14px; height: 100%; display: flex; flex-direction: column; gap: 10px; }
.aura-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gold); font-weight: 600; }
.aura-head .live { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.aura-lines { display: grid; gap: 8px; }
.aura-line { font-size: 12.5px; line-height: 1.45; color: rgb(253 249 240 / .88); padding: 8px 10px; background: rgb(253 249 240 / .05); border-radius: 10px; }
.aura-empty { font-size: 12px; color: rgb(253 249 240 / .5); }
.demo-meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.25rem; font-size: .8125rem; color: rgb(253 249 240 / .65); flex-wrap: wrap; }
.demo-meta b { color: var(--gold); font-variant-numeric: tabular-nums; }
.demo-reset { border: 1px solid rgb(253 249 240 / .25); color: var(--cream); background: transparent; border-radius: 999px; padding: .45rem 1rem; font: inherit; font-size: .8125rem; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
.msg, .pill, .aura-line { animation: pv-in .35s var(--ease) both; }
@keyframes pv-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.aura-head .live { animation: pv-pulse 1.6s ease-in-out infinite; }
@keyframes pv-pulse { 50% { opacity: .35; } }
}
/* product tour */
.tour-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem); margin-top: 2rem; align-items: center; }
.tour-panel[hidden] { display: none; }
.tour-panel h3 { font-size: 1.6rem; }
.tour-panel p { margin-top: .75rem; color: var(--muted); }
.tour-panel ul { margin: 1rem 0 0; padding-inline-start: 1.1rem; color: var(--muted); display: grid; gap: .45rem; }
.tour-stage { background: var(--plum); border-radius: calc(var(--r-card) + 4px); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); display: grid; place-items: center; min-height: 460px; }
@media (max-width: 900px) { .tour-panel { grid-template-columns: 1fr; } }
.screen { width: 100%; max-width: 560px; background: var(--cream); color: #2B1A26; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .55); }
/* real product screenshots in the Hotelier OS tour */
.shot-phone { margin: 0; width: 100%; max-width: 320px; background: #1E1019; border-radius: 34px; padding: 10px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .5); }
.shot-phone img { display: block; width: 100%; height: auto; border-radius: 25px; }
/* portal screens are 760 or 880 CSS px captures at 2x: 736px wide is the board at its own size, so its 12px labels
stay 12px; side by side, the copy column narrows to give the stage that width at 1440 */
.shot-screen { margin: 0; width: 100%; max-width: 736px; border-radius: 14px; overflow: hidden; background: var(--cream); box-shadow: 0 30px 60px -24px rgb(0 0 0 / .55); }
.shot-screen img { display: block; width: 100%; height: auto; }
/* the housekeeping board is portrait: at 640px the whole board (all three states) fits under the header on a
1440x900 laptop, and its 12px labels still draw at 10px */
#panel-crewops .shot-screen { max-width: 640px; }
@media (min-width: 901px) {
.tour-panel:has(.shot-screen) { grid-template-columns: minmax(0, .64fr) minmax(0, 1.36fr); }
.tour-stage:has(.shot-screen) { padding: clamp(1rem, .25rem + 1.4vw, 1.75rem); }
}
@media (max-width: 700px) { .tour-stage:has(.shot-screen) { min-height: 0; } }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 12.5px; padding: 14px; }
.kv dt { color: #7A6872; } .kv dd { margin: 0; font-weight: 600; color: #331C2E; }
.parse-in { margin: 14px; padding: 12px; background: #fff; border-radius: 12px; border: 1px solid #EADBC1; font-family: "Plex Arabic", var(--font); font-size: 15px; color: #331C2E; text-align: right; }
.parse-arrow { text-align: center; color: #997555; font-size: 12px; }
.sent { margin-top: auto; background: #331C2E; color: #FDF9F0; text-align: center; font-size: 12px; border-radius: 12px; padding: 9px; }
.demo-col { display: flex; flex-direction: column; }
/* stacked demo (phones, small tablets): a line under the phone points to the board, and mock text is readable */
.demo-follow { display: none; }
@media (max-width: 980px) {
.demo-follow:not([hidden]) { display: block; margin-top: .9rem; font-size: .875rem; font-weight: 560; color: var(--gold); text-align: center; }
.brow-head, .brow-task, .pill, .board-foot, .aura-head, .aura-line, .aura-empty { font-size: 13px; }
}
.demo-col .board, .demo-col .aura { height: auto; flex: 1; }
/* ===== audit fixes ===== */
.hero h1 { max-width: 24ch; }
.lang-link { font-size: .9375rem; font-weight: 540; color: var(--muted); text-decoration: none; padding: .4rem .6rem; border-radius: 999px; }
.lang-link:hover { color: var(--ink); background: var(--surface-2); }
.lang-link[lang="ar"] { font-family: "Plex Arabic", var(--font); font-weight: 600; }
/* the Arabic words on English pages (build.mjs checks they only use the letters in the Plex Arabic UI cut) */
:root:not([dir="rtl"]) :is(.lang-link, .footer-links a, .mobile-nav a, .brand-ar, .prose span)[lang="ar"] { font-family: "Plex Arabic UI", var(--font); }
.crumb { margin-bottom: 1rem; font-size: .9375rem; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.map-link { display: inline-block; margin-inline-start: .35rem; font-size: .9rem; color: var(--accent-soft-ink); text-underline-offset: 3px; }
.direct a span { font-weight: 500; }
/* industries */
.industries { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 1rem; margin-top: 2.5rem; }
.ind { position: relative; display: block; border-radius: var(--r-card); overflow: hidden; text-decoration: none; color: #F3F5F4; aspect-ratio: 4 / 3; isolation: isolate; }
.ind-lead { aspect-ratio: auto; }
.ind img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease); }
.ind::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(20 10 17 / 0) 35%, rgb(20 10 17 / .85) 100%); }
.ind:hover img { transform: scale(1.03); }
.ind-body { position: absolute; inset-inline: 0; bottom: 0; padding: 1.5rem; display: grid; gap: .35rem; }
.ind-title { font-size: 1.35rem; font-weight: 640; letter-spacing: -0.02em; }
.ind-text { font-size: .95rem; color: rgb(243 245 244 / .85); max-width: 40ch; }
@media (max-width: 640px) { .industries { grid-template-columns: 1fr; } .ind-lead { aspect-ratio: 4 / 3; } }
/* about: what we have built, team */
.built { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; }
.built-item { display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.built-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.built-body { padding: 1.5rem; display: grid; gap: .4rem; align-content: start; }
.built-title { font-size: 1.25rem; font-weight: 620; }
.built-text { color: var(--muted); }
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }
.member img { width: 100%; aspect-ratio: 6 / 7; object-fit: cover; border-radius: var(--r-card); }
.member h3 { margin-top: 1rem; }
.member-role { color: var(--accent-soft-ink); font-weight: 560; margin-top: .2rem; }
.member p { margin-top: .5rem; color: var(--muted); }
@media (max-width: 760px) { .built, .team { grid-template-columns: 1fr; } }
/* service pages */
.deliver-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; }
.deliver { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(1.4rem, 1rem + 1vw, 2rem); }
.deliver h3 { margin-top: 1rem; font-size: 1.25rem; }
.deliver > p { margin-top: .5rem; color: var(--muted); }
.deliver-h { margin-top: 1.25rem; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-soft-ink); }
[dir="rtl"] .deliver-h { letter-spacing: 0; text-transform: none; }
.deliver ul { margin: .5rem 0 0; padding-inline-start: 1.1rem; color: var(--muted); display: grid; gap: .35rem; }
.who { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.who li { display: flex; gap: .75rem; align-items: flex-start; font-size: 1.05rem; }
.who .ic { color: var(--accent); flex: none; margin-top: .2rem; }
@media (max-width: 760px) { .deliver-grid { grid-template-columns: 1fr; } }
/* an odd last card (Retail technology has three) takes the full row instead of leaving an empty cell */
@media (min-width: 761px) { .deliver-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* ===== Arabic (RTL) ===== */
@font-face { font-family: "Plex Arabic"; src: url("/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; src: url("/assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
[dir="rtl"] body { font-family: "Plex Arabic", "Plex Arabic Fallback", "Geist", system-ui, sans-serif; line-height: 1.75; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; line-height: 1.25; font-weight: 700; }
[dir="rtl"] .hero h1 { max-width: 18ch; }
[dir="rtl"] .eyebrow, [dir="rtl"] .clients-h, [dir="rtl"] .footer-h { letter-spacing: 0; text-transform: none; }
[dir="rtl"] .brand-word, [dir="rtl"] .brand-ar { direction: ltr; }
[dir="rtl"] .brand { flex-direction: row; }
[dir="rtl"] .steps::before { left: 22px; right: 22px; }
@media (max-width: 860px) { [dir="rtl"] .steps::before { right: 21px; left: auto; } }
[dir="rtl"] .cta-mail { text-align: start; }
[dir="rtl"] .cta-actions { justify-content: flex-start; }
[dir="rtl"] .phone-top b { letter-spacing: 0; }
[dir="rtl"] .msg { justify-self: start; border-radius: 12px 12px 12px 4px; }
[dir="rtl"] .msg.reply { justify-self: end; border-radius: 12px 12px 4px 12px; }
[dir="rtl"] .parse-in { text-align: right; }
[dir="rtl"] .tile, [dir="rtl"] .brow-head, [dir="rtl"] .kv { text-align: start; }
[dir="rtl"] .faq summary::after { content: "+"; }
[dir="rtl"] .faq details[open] summary::after { content: "\2212"; }
[dir="rtl"] .field input::placeholder { text-align: start; }
.site-footer .brand-word { color: var(--fg); }
.site-footer .reg-mark { background: var(--fg); opacity: .8; transition: opacity .3s var(--spring); }
.site-footer .reg-mark:hover { opacity: 1; }
/* header shows the mark only */
.site-header .brand-svg { width: 42px; height: 42px; }
/* ---------- cinematic hero (home) ---------- */
.hero-cine { padding-block: 1rem clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.cine { position: relative; border-radius: calc(var(--r-card) + 8px); overflow: hidden; min-height: clamp(520px, 72dvh, 680px); display: grid; align-items: end; isolation: isolate; background: var(--plum); }
.cine > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; z-index: -2; }
.cine::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(21 13 19 / .92) 0%, rgb(21 13 19 / .74) 42%, rgb(21 13 19 / .12) 100%); }
[dir="rtl"] .cine::after { background: linear-gradient(270deg, rgb(21 13 19 / .92) 0%, rgb(21 13 19 / .74) 42%, rgb(21 13 19 / .12) 100%); }
/* Arabic copy sits on the right, so the Arabic page loads a mirrored copy of the photo (hero-office-ar-1018.webp) that keeps
both faces clear of it. The copy is mirrored before its screen is placed, so the screen still reads the right way round;
flipping it in CSS would mirror the screen too. */
/* short desktop screens (card height follows the screen height): the copy fills most of the card, so the photo moves
away from the copy side and fades into the plum there, keeping both faces clear of the eyebrow, H1 and lede
(16 Oct re-audit S-29, V-44); narrow ones up to 869px tall move it further because the H1 takes more of the width
(from 870px tall 18% already clears both faces, and 22% would cut the back of the woman's head at the outer edge) */
@media (min-width: 761px) and (min-height: 501px) and (max-height: 920px) {
.cine > img { inset-inline-start: 18%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%); mask-image: linear-gradient(90deg, transparent, #000 14%); }
[dir="rtl"] .cine > img { -webkit-mask-image: linear-gradient(270deg, transparent, #000 14%); mask-image: linear-gradient(270deg, transparent, #000 14%); }
}
@media (min-width: 761px) and (max-width: 960px) and (min-height: 501px) and (max-height: 869px) { .cine > img { inset-inline-start: 22%; } }
.cine-copy { padding: clamp(1.75rem, 1rem + 3.5vw, 4.5rem); max-width: 760px; color: #F1ECEF; }
.cine-copy h1 { color: #F8F5F7; max-width: 22ch; }
[dir="rtl"] .cine-copy h1 { max-width: 20ch; }
.cine-copy .lede { color: rgb(241 236 239 / .84); margin-top: 1.25rem; max-width: 52ch; }
.cine-copy .btn-text { color: #F1ECEF; }
@media (max-width: 760px) {
.cine { min-height: 0; }
.cine > img { position: relative; inset: auto; aspect-ratio: 4 / 3; height: auto; object-position: 60% 25%; }
[dir="rtl"] .cine > img { object-position: 40% 25%; }
.cine::after { display: none; }
.cine-copy { background: var(--plum); max-width: none; }
}
@media (prefers-reduced-motion: no-preference) { .cine > img { animation: rise 1.2s var(--ease) both; } .cine-copy > * { animation: rise .8s var(--ease) both; } .cine-copy > *:nth-child(2) { animation-delay: .08s; } .cine-copy > *:nth-child(3) { animation-delay: .16s; } }
.prose-gap { margin-top: 1rem; }
/* Phosphor Light icons are drawn thinner on a 256 grid; give them a touch more size so they match */
[data-icons="phosphor"] .ic { width: 1.35em; height: 1.35em; }
[data-icons="phosphor"] .ic-sm { width: 1.15em; height: 1.15em; }
[data-icons="phosphor"] .svc-icon .ic, [data-icons="phosphor"] .value .ic, [data-icons="phosphor"] .problem .ic { width: 28px; height: 28px; }
[data-icons="phosphor"] .fit-item > .ic { padding: 9px; }
/* ===== middle path (CARDS=glass, the default): plum site, glass-style cards on the light page ===== */
[data-cards="glass"] { --card-bg: rgb(28 18 25 / .035); --card-ring: rgb(28 18 25 / .1); --card-hi: rgb(255 255 255 / .6); }
[data-cards="glass"] .problem, [data-cards="glass"] .deliver, [data-cards="glass"] .value,
[data-cards="glass"] .built-item, [data-cards="glass"] .faq details, [data-cards="glass"] .form, [data-cards="glass"] .aside-card,
[data-cards="glass"] .direct a, [data-cards="glass"] .persona, [data-cards="glass"] .cta-card, [data-cards="glass"] .tab {
background: var(--card-bg); border-color: transparent; }
[data-cards="glass"] .value:nth-child(2) { background: rgb(74 42 67 / .08); } [data-cards="glass"] .value:nth-child(3) { background: var(--plum); color: var(--cream); }
[data-cards="glass"] .tab[aria-selected="true"] { background: var(--ink); color: var(--bg); }
[data-cards="glass"] .svc-icon, [data-cards="glass"] .fit-item > .ic, [data-cards="glass"] .step-dot { background: var(--card-bg); box-shadow: 0 0 0 1px var(--card-ring); color: var(--accent); border: 0; }
[data-cards="glass"] .header-row { background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); }
/* ===== navigation: services dropdown ===== */
.main-nav { align-items: center; }
.nav-drop { position: relative; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: .3rem; border: 0; background: none; padding: .4rem 0; font: inherit; font-size: .9375rem; font-weight: 500; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; transition: color .3s var(--spring); }
.nav-drop-btn:hover, .nav-drop.open .nav-drop-btn, .nav-drop-btn.is-current { color: var(--ink); }
.nav-drop-btn.is-current { border-bottom-color: var(--accent); }
.nav-drop-btn .ic { transition: transform .4s var(--spring); }
.nav-drop.open .nav-drop-btn .ic { transform: rotate(180deg); }
.drop-panel { position: absolute; top: calc(100% + 16px); inset-inline-start: -1.25rem; width: min(620px, 92vw); display: grid; grid-template-columns: 1fr 1fr; gap: .25rem;
padding: .6rem; border-radius: 22px; background: var(--surface);
box-shadow: 0 0 0 1px var(--line), inset 0 1px 0 rgb(255 255 255 / .4), 0 30px 60px -24px rgb(28 18 25 / .35);
opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s var(--spring), transform .4s var(--spring), visibility 0s .3s; z-index: 50; }
.drop-panel::before { content: ""; position: absolute; inset-inline: 0; top: -18px; height: 18px; }
.nav-drop.open .drop-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--spring), transform .4s var(--spring), visibility 0s; }
@media (hover: hover) { .nav-drop:hover .drop-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--spring), transform .4s var(--spring), visibility 0s; } .nav-drop:hover .nav-drop-btn .ic { transform: rotate(180deg); } }
/* Escape closes a hover-opened panel until the pointer leaves (site.js adds .dismissed) */
.nav-drop.dismissed:not(.open) .drop-panel { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s var(--spring), transform .4s var(--spring), visibility 0s .3s; }
.nav-drop.dismissed:not(.open) .nav-drop-btn .ic { transform: none; }
.drop-item { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem .9rem; border-radius: 14px; text-decoration: none; color: var(--ink); transition: background-color .3s var(--spring); }
.drop-item:hover, .drop-item:focus-visible { background: var(--surface-2); }
.drop-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-soft-ink); }
.drop-ic .ic { width: 20px; height: 20px; }
.drop-txt { display: grid; gap: .15rem; }
.drop-txt b { font-size: .9375rem; font-weight: 600; }
.drop-txt small { font-size: .8125rem; color: var(--muted); line-height: 1.45; }
.drop-all { display: flex; align-items: center; gap: .4rem; padding: .8rem .9rem; border-radius: 14px; text-decoration: none; font-size: .9375rem; font-weight: 560; color: var(--accent-soft-ink); align-self: center; }
.drop-all:hover { background: var(--surface-2); }
.mnav-sub { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem 1rem; padding: .25rem 0 .75rem; border-bottom: 1px solid var(--line); }
.mobile-nav .mnav-sub a { border: 0 !important; padding: .6rem .25rem !important; font-size: .95rem !important; font-weight: 500 !important; color: var(--muted); text-decoration: none; }
/* ===== home: why HayyakTech ===== */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 2.25rem; }
.why-item { padding: .25rem 1.75rem 0; border-inline-start: 1px solid var(--line); }
.why-item:first-child { padding-inline-start: 0; border-inline-start: 0; }
.why-item .ic { width: 30px; height: 30px; color: var(--accent); }
.why-item h3 { margin-top: 1rem; font-size: 1.1rem; }
.why-item p { margin-top: .45rem; color: var(--muted); font-size: .95rem; }
@media (max-width: 960px) { .why-grid { grid-template-columns: 1fr 1fr; row-gap: 2rem; } .why-item:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } .why-item { padding-inline-start: 0; border-inline-start: 0; } }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; }
/* ===== industries page ===== */
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.chip-link { min-height: 44px; display: inline-flex; align-items: center; padding: .55rem 1.1rem; border-radius: 999px; text-decoration: none; font-size: .9375rem; font-weight: 540; color: var(--ink); background: var(--card-bg, var(--surface)); box-shadow: 0 0 0 1px var(--line); transition: background-color .3s var(--spring); }
.chip-link:hover { background: var(--surface-2); }
.ind-band { position: relative; border-radius: calc(var(--r-card) + 8px); overflow: hidden; min-height: clamp(280px, 26vw, 380px); display: grid; align-items: end; isolation: isolate; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), var(--shadow); }
.ind-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ind-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(21 13 19 / .25) 0%, rgb(21 13 19 / .6) 30%, rgb(21 13 19 / .82) 100%); }
/* on narrow phones the heading wraps and starts near the top of the photo, so the top is darker too */
@media (max-width: 420px) { .ind-band::after { background: linear-gradient(180deg, rgb(21 13 19 / .45) 0%, rgb(21 13 19 / .66) 30%, rgb(21 13 19 / .84) 100%); } }
.ind-band-copy { padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); color: #F1ECEF; max-width: 64ch; }
.ind-band-copy h2 { color: #F8F5F7; }
.ind-band-copy p { margin-top: .6rem; color: rgb(241 236 239 / .85); }
.ind-detail { display: grid; grid-template-columns: 1.15fr 1fr .9fr; gap: clamp(1.5rem, 1rem + 2vw, 3rem); margin-top: 2rem; align-items: start; }
.pains { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .85rem; }
.pains li { position: relative; padding-inline-start: 1.25rem; color: var(--muted); }
.pains li::before { content: ""; position: absolute; inset-inline-start: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .7; }
.ind-links { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; }
.ind-links a { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; border-radius: 14px; text-decoration: none; color: var(--ink); font-weight: 540; background: var(--card-bg, var(--surface)); box-shadow: 0 0 0 1px var(--line); transition: background-color .3s var(--spring); }
.ind-links a:hover { background: var(--surface-2); }
.ind-links a .ic:first-child { color: var(--accent); width: 22px; height: 22px; }
.ind-links a span { flex: 1; }
.ind-links a .ic:last-child { color: var(--muted); }
.ind-product { display: grid; gap: .6rem; justify-items: start; padding: 1.5rem; border-radius: var(--r-card); background: var(--plum); color: var(--cream); text-decoration: none; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), var(--shadow); }
.ind-product .deliver-h { margin: 0; color: var(--gold); }
.ind-product img { height: 44px; width: auto; }
.ind-product b { font-size: 1.15rem; }
.ind-product .btn-text { color: var(--cream); padding: 0; }
.ind-ask { display: grid; gap: .75rem; justify-items: start; padding: 1.5rem; border-radius: var(--r-card); background: var(--card-bg, var(--surface)); box-shadow: 0 0 0 1px var(--line); }
.ind-ask .deliver-h { margin: 0; }
.ind-ask p { color: var(--muted); }
@media (max-width: 960px) { .ind-detail { grid-template-columns: 1fr 1fr; } .ind-product, .ind-ask { grid-column: 1 / -1; } }
@media (max-width: 640px) { .ind-detail { grid-template-columns: 1fr; } }
/* ===================== high-end visual pass (14 Oct 2026, docs/design-plan.md) =====================
Soft structuralism on the plum family: paper ground, large Geist headlines, every major block sits in a
machined tray (double bezel), button-in-button arrows, spring motion, heavy whitespace.
The tray is drawn with spread shadows, so its radius is always the core radius plus the tray width. */
:root {
--bz: 6px;
--r-xl: 26px; /* big blocks: core 26, tray 32 */
--r-lg: 20px; /* cards: core 20, tray 26 */
--r-md: 14px; /* controls */
--shell: #ECE8EB;
--shell-ring: rgb(28 18 25 / .07);
--core-ring: rgb(28 18 25 / .07);
--core-hi: #fff;
--tint: #F1EBEF;
--ambient: 0 1px 2px rgb(28 18 25 / .03), 0 24px 48px -32px rgb(28 18 25 / .16), 0 60px 120px -60px rgb(28 18 25 / .22);
--bezel: 0 0 0 var(--bz) var(--shell), 0 0 0 calc(var(--bz) + 1px) var(--shell-ring), var(--ambient);
--core: inset 0 0 0 1px var(--card-ring, var(--core-ring)), inset 0 1px 1px var(--card-hi, var(--core-hi));
--core-dark: inset 0 0 0 1px rgb(255 255 255 / .08), inset 0 1px 1px rgb(255 255 255 / .16);
--grid-gap: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
/* every H1 size is set here (the landscape-phone rule reassigns the two hero ones). The home and the plain page
heads (Industries, Contact, Privacy, Terms, 404) use --fs-h1, the Hotelier OS hero --fs-h1-product, About and the
service pages --fs-h1-split. Arabic has its own steps: --fs-h1-ar on the home, --fs-h1-ar-page on plain page heads */
--fs-h1: clamp(2.6rem, 1.3rem + 4.2vw, 4.75rem);
--fs-h1-ar: clamp(2.3rem, 1.3rem + 3.3vw, 4rem);
--fs-h1-ar-page: clamp(2.1rem, 1.4rem + 2.6vw, 3.3rem);
--fs-h1-product: clamp(2.4rem, 1.3rem + 3.4vw, 4.25rem);
--fs-h1-product-ar: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem);
--fs-h1-split: clamp(2.5rem, 1.4rem + 3.2vw, 4rem);
--fs-h1-split-ar: clamp(2.2rem, 1.3rem + 2.6vw, 3.4rem);
/* section heads sit clearly below the page H1 (about 44px against 64 to 76px at 1440); side heads in a split,
such as "Who it is for" or "Company details", sit one step lower again */
--fs-h2: clamp(1.9rem, 1.2rem + 1.8vw, 2.75rem);
--fs-h2-minor: clamp(1.6rem, 1.3rem + .6vw, 2rem);
--fs-lede: clamp(1.125rem, 1rem + .45vw, 1.3125rem);
--arrow: url("data:image/svg+xml;utf8,");
--header-h: 84px;
}
/* glass-style cores read as frosted plates inside the tray */
[data-cards="glass"] { --card-bg: rgb(255 255 255 / .66); --card-ring: rgb(28 18 25 / .06); --card-hi: #fff; }
/* ---------- rhythm and type ---------- */
html { scroll-padding-top: calc(var(--header-h) + 24px); }
.section { padding-block: clamp(4.5rem, 2rem + 7vw, 10rem); }
.section-tight { padding-block: clamp(4rem, 2rem + 5vw, 7rem); }
h1, .hero h1, .cine-copy h1 { font-size: var(--fs-h1); letter-spacing: -0.045em; line-height: .98; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.04em; line-height: 1.03; }
.lede { font-size: var(--fs-lede); }
.services-head { max-width: 46rem; }
.services-head .lede, .sec-intro + .lede { margin-top: 1.25rem; }
.sec-head { align-items: flex-end; }
:where([dir="rtl"]) h1 { font-size: var(--fs-h1-ar-page); letter-spacing: 0; line-height: 1.2; }
:where([dir="rtl"]) .hero h1, :where([dir="rtl"]) .cine-copy h1 { font-size: var(--fs-h1-ar); letter-spacing: 0; line-height: 1.2; }
:where([dir="rtl"]) h2 { font-size: clamp(1.75rem, 1.15rem + 1.5vw, 2.4rem); letter-spacing: 0; line-height: 1.3; }
.split-top > h2, .split-top > div > h2 { font-size: var(--fs-h2-minor); letter-spacing: -0.03em; line-height: 1.12; }
[dir="rtl"] .split-top > h2, [dir="rtl"] .split-top > div > h2 { font-size: clamp(1.5rem, 1.25rem + .5vw, 1.85rem); letter-spacing: 0; line-height: 1.35; }
/* eyebrow: a microscopic pill above a major heading */
.eyebrow { display: block; width: fit-content; margin: 0 0 1.4rem; padding: .4rem .85rem; border-radius: 999px;
font-size: .6875rem; font-weight: 560; line-height: 1.2; letter-spacing: .2em; text-transform: uppercase;
color: var(--accent-soft-ink); background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent); }
.cine .eyebrow, .prod-hero .eyebrow { color: var(--gold); background: rgb(209 179 132 / .12); box-shadow: inset 0 0 0 1px rgb(209 179 132 / .3); }
.product-copy .eyebrow { margin-bottom: 0; }
[dir="rtl"] .eyebrow { letter-spacing: 0; text-transform: none; font-size: .8125rem; font-weight: 600; padding-block: .3rem; }
.crumb { margin-bottom: 1.4rem; }
.crumb a { display: inline-block; padding: .4rem .85rem; border-radius: 999px; font-size: .6875rem; font-weight: 560; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-soft-ink); text-decoration: none;
background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent); transition: background-color .5s var(--spring); }
.crumb a:hover { text-decoration: none; color: var(--accent-soft-ink); background: color-mix(in srgb, var(--accent) 12%, transparent); }
[dir="rtl"] .crumb a { letter-spacing: 0; text-transform: none; font-size: .8125rem; font-weight: 600; }
/* ---------- floating island navigation ---------- */
.site-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; padding-top: 1.25rem; pointer-events: none; }
.site-header > * { pointer-events: auto; }
.site-header .header-row { position: relative; z-index: 2; height: 62px; gap: 1.5rem; padding: 0 .45rem 0 1.1rem; border-radius: 999px;
background: color-mix(in srgb, var(--surface) 74%, transparent); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
box-shadow: inset 0 0 0 1px var(--core-ring), inset 0 1px 1px var(--core-hi), 0 12px 32px -20px rgb(28 18 25 / .3); transition: box-shadow .6s var(--spring); }
.site-header.is-scrolled .header-row { box-shadow: inset 0 0 0 1px var(--core-ring), inset 0 1px 1px var(--core-hi), 0 20px 44px -22px rgb(28 18 25 / .4); }
[dir="rtl"] .site-header .header-row { padding: 0 1.1rem 0 .45rem; }
.site-header .brand-svg { width: 34px; height: 34px; }
.main-nav { gap: .2rem; }
.main-nav a, .nav-drop-btn { padding: .5rem .9rem; border-radius: 999px; border-bottom: 0; transition: color .5s var(--spring), background-color .5s var(--spring); }
.main-nav a:hover, .nav-drop-btn:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.main-nav a[aria-current="page"], .nav-drop-btn.is-current { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.drop-panel { inset-inline-start: -.5rem; top: calc(100% + 20px); border-radius: var(--r-lg); box-shadow: var(--core), var(--bezel), 0 40px 80px -30px rgb(28 18 25 / .35); }
.drop-panel::before { top: -22px; height: 22px; }
.drop-item, .drop-all { border-radius: var(--r-md); }
.header-cta { gap: .4rem; }
.lang-link { transition: color .5s var(--spring), background-color .5s var(--spring); }
@media (min-width: 901px) {
.site-header .header-row { width: max-content; max-width: calc(100% - 2.5rem); }
.main-nav { margin-inline-start: 0; }
}
.nav-toggle { width: 46px; height: 46px; border: 0; background: color-mix(in srgb, var(--ink) 6%, transparent); transition: background-color .5s var(--spring), transform .5s var(--spring); }
.nav-toggle:active { transform: scale(.94); }
.burger { position: relative; display: block; width: 18px; height: 10px; }
.burger i { position: absolute; inset-inline: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .7s var(--spring), top .7s var(--spring); }
.burger i:first-child { top: 0; }
.burger i:last-child { top: 8.5px; }
.nav-toggle[aria-expanded="true"] .burger i:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger i:last-child { transform: translateY(-4.25px) rotate(-45deg); }
@media (max-width: 900px) {
.mobile-nav:not([hidden]) { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; gap: 0; width: auto; margin: 0; border: 0; border-radius: 0;
padding: calc(var(--header-h) + 1.75rem) 1.75rem 2.5rem; overflow-y: auto; overscroll-behavior: contain;
background: var(--bg); box-shadow: none; }
.mobile-nav > a:not(.btn) { padding: .5rem 0; border: 0; font-size: clamp(1.9rem, 1.3rem + 3vw, 2.5rem); font-weight: 620; letter-spacing: -0.035em; line-height: 1.15; }
[dir="rtl"] .mobile-nav > a:not(.btn) { letter-spacing: 0; font-weight: 700; }
.mobile-nav .mnav-sub { padding: .25rem 0 1rem; border: 0; gap: .1rem 1.25rem; }
.mobile-nav .mnav-sub a { font-size: 1rem !important; }
.mobile-nav .btn { width: 100%; margin-top: .75rem; }
.mobile-nav .btn-primary { margin-top: 2rem; }
html.nav-open { overflow: hidden; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
.mobile-nav:not([hidden]) { animation: menu-in .6s var(--spring) both; }
.mobile-nav:not([hidden]) > * { animation: menu-item .9s var(--spring) both; }
.mobile-nav:not([hidden]) > :nth-child(1) { animation-delay: .1s; } .mobile-nav:not([hidden]) > :nth-child(2) { animation-delay: .15s; }
.mobile-nav:not([hidden]) > :nth-child(3) { animation-delay: .2s; } .mobile-nav:not([hidden]) > :nth-child(4) { animation-delay: .25s; }
.mobile-nav:not([hidden]) > :nth-child(5) { animation-delay: .3s; } .mobile-nav:not([hidden]) > :nth-child(6) { animation-delay: .35s; }
.mobile-nav:not([hidden]) > :nth-child(7) { animation-delay: .4s; } .mobile-nav:not([hidden]) > :nth-child(8) { animation-delay: .45s; }
@keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes menu-item { from { opacity: 0; transform: translateY(3rem); } to { opacity: 1; transform: none; } }
}
/* ---------- buttons: pill with a nested arrow island ---------- */
.btn { position: relative; min-height: 52px; transition: background-color .5s var(--spring), color .5s var(--spring), border-color .5s var(--spring), transform .5s var(--spring); }
.btn:active { transform: scale(.98); }
.btn-primary, .btn-gold, .btn-text, .drop-all { --isl: 36px; --ar: 16px; --isl-end: .4rem; }
.btn-primary, .btn-gold { padding-inline: 1.5rem calc(var(--isl) + var(--isl-end) + .7rem); }
.btn-text, .drop-all { --isl: 30px; --ar: 14px; --isl-end: 0px; position: relative; padding-inline-end: calc(var(--isl) + .7rem); text-decoration: none; }
.drop-all { --isl-end: .6rem; padding-inline-end: calc(var(--isl) + 1.4rem); }
:is(.btn-primary, .btn-gold, .btn-text, .drop-all)::before { content: ""; position: absolute; inset-inline-end: var(--isl-end); top: 50%; width: var(--isl); height: var(--isl); margin-top: calc(var(--isl) / -2);
border-radius: 50%; background: color-mix(in srgb, currentColor 14%, transparent); transition: transform .7s var(--spring), background-color .5s var(--spring); }
:is(.btn-primary, .btn-gold, .btn-text, .drop-all)::after { content: ""; position: absolute; inset-inline-end: calc(var(--isl-end) + (var(--isl) - var(--ar)) / 2); top: 50%; width: var(--ar); height: var(--ar); margin-top: calc(var(--ar) / -2);
background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .7s var(--spring); }
[dir="rtl"] :is(.btn-primary, .btn-gold, .btn-text, .drop-all)::after { transform: scaleX(-1); }
:is(.btn-primary, .btn-gold, .btn-text, .drop-all):hover::before, .ind-product:hover .btn-text::before { transform: translate(2px, -1px) scale(1.06); }
:is(.btn-primary, .btn-gold, .btn-text, .drop-all):hover::after, .ind-product:hover .btn-text::after { transform: translate(3px, -2px); }
[dir="rtl"] :is(.btn-primary, .btn-gold, .btn-text, .drop-all):hover::before, [dir="rtl"] .ind-product:hover .btn-text::before { transform: translate(-2px, -1px) scale(1.06); }
[dir="rtl"] :is(.btn-primary, .btn-gold, .btn-text, .drop-all):hover::after, [dir="rtl"] .ind-product:hover .btn-text::after { transform: scaleX(-1) translate(3px, -2px); }
.btn-text:hover::before, .drop-all:hover::before { background: color-mix(in srgb, currentColor 22%, transparent); }
.btn-sm { min-height: 44px; }
.btn-sm.btn-primary { padding-inline: 1.15rem; }
.btn-sm::before, .btn-sm::after { content: none; }
button.btn-primary[aria-busy="true"]::after { animation: none; }
.hero-actions { gap: 1rem 1.75rem; margin-top: 2.5rem; }
/* ---------- the double bezel ---------- */
.cine, .prod-hero, .demo, .ind-band, .tour-stage { border-radius: var(--r-xl); box-shadow: var(--core-dark), var(--bezel); }
.cta-card, .form { border: 0; border-radius: var(--r-xl); background: var(--card-bg, var(--surface)); box-shadow: var(--core), var(--bezel); }
.split .hero-media img, .split img, .panel-media img { border-radius: var(--r-xl); box-shadow: var(--bezel); }
.ind, .problem, .deliver, .value, .built-item, .aside-card, .ind-ask, .persona, .svc-list {
border: 0; border-radius: var(--r-lg); box-shadow: var(--core), var(--bezel); }
.ind-product, .ind, .values > .value:nth-child(3) { box-shadow: var(--core-dark), var(--bezel); }
.ind-product { border-radius: var(--r-lg); }
.faq details, .direct a, .ind-links a, .chip-link { border: 0; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--card-ring, var(--line)), inset 0 1px 1px var(--card-hi, transparent); }
.chip-link { border-radius: 999px; }
:root .values > .value:nth-child(2) { background: var(--tint); }
.tour-stage { border-radius: var(--r-xl); }
.phone { box-shadow: 0 40px 80px -36px rgb(10 5 9 / .55), inset 0 0 0 1px rgb(255 255 255 / .06); }
.screen { box-shadow: 0 40px 80px -36px rgb(10 5 9 / .5); }
/* grids breathe so the trays never touch */
.industries, .built, .problems, .personas, .deliver-grid, .values { gap: var(--grid-gap); }
.industries, .built, .problems, .personas, .deliver-grid, .values { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
/* ---------- hero ---------- */
.hero-cine { padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) 0; }
.cine { min-height: clamp(560px, calc(100dvh - 8rem), 820px); }
.cine-copy { max-width: 940px; padding: clamp(1.75rem, 1rem + 4vw, 5rem); }
.cine-copy h1 { max-width: 15ch; }
[dir="rtl"] .cine-copy h1 { max-width: 16ch; }
.cine-copy .lede { margin-top: 1.5rem; max-width: 48ch; }
.page-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 6rem) clamp(2rem, 1rem + 3vw, 4rem); }
.page-hero .lede { margin-top: 1.5rem; }
.split { gap: clamp(2rem, 1rem + 5vw, 6rem); }
.prod-hero h1 { font-size: var(--fs-h1-product); }
[dir="rtl"] .prod-hero h1 { font-size: var(--fs-h1-product-ar); }
/* ---------- capabilities: segmented control in a tray, list in a machined panel ---------- */
.tablist { display: flex; flex-wrap: nowrap; width: fit-content; max-width: 100%; gap: .2rem; margin-top: clamp(2.25rem, 2rem + 1vw, 3rem); padding: 5px; border-radius: 999px; overflow-x: auto; scrollbar-width: none;
background: var(--shell); box-shadow: 0 0 0 1px var(--shell-ring); }
.tablist::-webkit-scrollbar { display: none; }
.tablist .tab { flex: none; white-space: nowrap; border: 0; background: transparent; box-shadow: none; color: var(--muted); padding: .55rem 1.2rem;
transition: background-color .6s var(--spring), color .6s var(--spring), box-shadow .6s var(--spring); }
.tablist .tab:hover { color: var(--ink); background: transparent; }
.tablist .tab[aria-selected="true"] { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--core-ring), 0 8px 18px -10px rgb(28 18 25 / .35); }
@media (max-width: 640px) { .tablist { margin-inline: 0; padding-inline: 5px; } }
.tabpanel { margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem); gap: clamp(2rem, 1rem + 4vw, 5rem); }
.svc-list { padding: .4rem clamp(1.25rem, 1rem + 1.2vw, 2.25rem); column-gap: clamp(1.5rem, 1rem + 2vw, 3rem); background: var(--card-bg, var(--surface)); }
.svc-list > .svc:nth-child(-n+2) { border-top: 0; }
@media (max-width: 560px) { .svc-list > .svc:nth-child(2) { border-top: 1px solid var(--line); } }
.panel-media p { margin-top: 1.75rem; }
.panel-media .btn-text { margin-top: .5rem; }
/* ---------- industries: link cards with an arrow island ---------- */
.ind { transition: transform .8s var(--spring); }
.ind img { transition: transform 1.4s var(--spring); }
.ind:hover { transform: translateY(-3px); }
.ind:hover img { transform: scale(1.05); }
.ind-go { position: absolute; top: 1.1rem; inset-inline-end: 1.1rem; width: 44px; height: 44px; border-radius: 50%; color: #F8F5F7;
background: rgb(21 13 19 / .38); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22), inset 0 1px 1px rgb(255 255 255 / .2); transition: transform .8s var(--spring), background-color .6s var(--spring); }
.ind-go::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; }
[dir="rtl"] .ind-go::after { transform: scaleX(-1); }
.ind:hover .ind-go { transform: translate(3px, -3px) scale(1.06); background: rgb(21 13 19 / .55); }
[dir="rtl"] .ind:hover .ind-go { transform: translate(-3px, -3px) scale(1.06); }
.ind-body { padding: clamp(1.4rem, 1rem + 1vw, 2rem); }
.ind-title { font-size: clamp(1.35rem, 1.15rem + .6vw, 1.7rem); letter-spacing: -0.03em; }
[dir="rtl"] .ind-title { letter-spacing: 0; }
.built-item { transition: transform .8s var(--spring); }
.built-item img { transition: transform 1.4s var(--spring); }
.built-item:hover { transform: translateY(-3px); }
.built-item:hover img { transform: scale(1.04); }
.built-static:hover, .built-static:hover img { transform: none; }
.related-list { display: grid; gap: var(--grid-gap); }
.split .built-static img { border-radius: 0; box-shadow: none; }
.built-item { overflow: hidden; }
/* a product screen is shown whole on a tinted mat, never cropped like a photo */
.built-item img.built-screen { object-fit: contain; background: var(--tint); padding: clamp(.75rem, .4rem + 1.6vw, 1.75rem); }
/* from 761px the screen runs the card's full height, the mat shows at its sides; up to 640px, and in the half-width
cards up to 1100px, a gives a square crop of the screen, shown at the card's full width in its
own shape (the retail Related card is full width from 761 to 860px and shows its whole screen in its own shape) */
@media (min-width: 761px) { .built-item img.built-screen { padding: 0; } }
@media (max-width: 640px), (min-width: 761px) and (max-width: 1100px) { .built-item picture img.built-screen, .built-item picture img.built-phone { aspect-ratio: auto; padding: 0; } }
.ind-product { transition: transform .8s var(--spring); }
.ind-product:hover { transform: translateY(-3px); }
/* ---------- remaining blocks ---------- */
.product-copy { padding: clamp(2rem, 1rem + 4.5vw, 4.75rem); }
.ind-product .btn-text { padding-block: .4rem 0; padding-inline-end: calc(var(--isl) + .7rem); }
.steps { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.step h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
.clients-row { border: 0; padding-block: 0; }
.cta-card { padding: clamp(2rem, 1rem + 5vw, 5rem); gap: clamp(2rem, 1rem + 3vw, 4rem); }
.problem, .deliver, .value, .persona { padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.persona { border-top: 0; border-radius: var(--r-lg); }
.problem h3, .deliver h3, .value h3 { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); }
.ind-detail { gap: var(--grid-gap); margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.ind-ask, .ind-product { padding: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); }
.aside-card { padding: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); background: var(--card-bg, var(--surface-2)); }
.field input, .field select, .field textarea { border-radius: 12px; box-shadow: inset 0 1px 2px rgb(28 18 25 / .04); }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.footer-ids { display: inline-flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-inline-start: 1rem; }
/* the copyright line wraps below about 690px: the CR and VAT row then starts on its own line, flush with it */
@media (max-width: 720px) { .footer-ids { display: flex; margin-inline-start: 0; margin-top: .25rem; } }
/* every remaining transition rides a custom curve */
.brow { transition: border-color .5s var(--spring), box-shadow .5s var(--spring), background-color .5s var(--spring); }
.tile { transition: transform .5s var(--spring), background-color .5s var(--spring); }
.faq details { transition: background-color .5s var(--spring); }
@media (prefers-reduced-motion: no-preference) { .aura-head .live { animation: pv-pulse 1.6s cubic-bezier(.45, 0, .55, 1) infinite; } }
/* ---------- motion: one heavy load sequence, then reveals as sections arrive ---------- */
@media (prefers-reduced-motion: no-preference) {
.hero-cine .cine > img { animation: hero-img 1.8s var(--spring) both; }
.hero-cine .cine > .cine-copy { animation: none; }
.hero-cine .cine-copy > *, .page-hero .hero-copy > * { animation: hero-rise 1.1s var(--spring) both; }
/* the home hero keeps its fade from nothing: its copy sits at the bottom of the photo, so text counted from the first
paint would add the Geist swap (the copy rewraps, its top moves) to the layout shift, about 0.1 at 1440 */
.hero-cine .cine-copy > * { animation-name: hero-rise-home; }
.hero-cine .cine-copy > :nth-child(2), .page-hero .hero-copy > :nth-child(2) { animation-delay: .1s; }
.hero-cine .cine-copy > :nth-child(3), .page-hero .hero-copy > :nth-child(3) { animation-delay: .2s; }
.hero-cine .cine-copy > :nth-child(4), .page-hero .hero-copy > :nth-child(4) { animation-delay: .3s; }
.page-hero .hero-copy > :nth-child(5) { animation-delay: .4s; }
.page-hero .split .hero-media { animation: hero-rise 1.3s .2s var(--spring) both; }
@keyframes hero-img { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
/* hero text starts at 1% opacity, not 0, and without a blur: text the first paint hides is not counted as painted,
so a phone's largest paint (the H1 or lede) would wait for a later repaint, such as a font arriving */
@keyframes hero-rise { from { opacity: .01; transform: translateY(2.25rem); } to { opacity: 1; transform: none; } }
@keyframes hero-rise-home { from { opacity: 0; transform: translateY(2.25rem); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
.rv-wait { opacity: 0; transform: translate3d(0, 3.5rem, 0); filter: blur(10px); }
.rv-wait.in { opacity: 1; transform: none; filter: blur(0); transition: opacity 1s var(--spring) var(--d, 0ms), transform 1.2s var(--spring) var(--d, 0ms), filter 1s var(--spring) var(--d, 0ms); }
}
/* a printed or saved-as-PDF page shows every section, including the ones still waiting for their reveal */
@media print { .rv-wait, .rv.rv-wait { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } }
.industries .ind { aspect-ratio: 4 / 5; }
.industries .ind-lead { aspect-ratio: auto; }
.ind::after { background: linear-gradient(180deg, rgb(20 10 17 / 0) 30%, rgb(20 10 17 / .5) 58%, rgb(20 10 17 / .92) 100%); }
/* under 380px the card text wraps higher, into the clear part of the photo: start the shade sooner (titles 3:1+ over their brightest pixels) */
@media (max-width: 379px) { .ind::after { background: linear-gradient(180deg, rgb(20 10 17 / .05) 0%, rgb(20 10 17 / .5) 35%, rgb(20 10 17 / .92) 100%); } }
.ind-title { font-size: clamp(1.3rem, 1.1rem + .5vw, 1.55rem); line-height: 1.15; }
@media (max-width: 640px) { .industries .ind, .industries .ind-lead { aspect-ratio: 4 / 3; } }
.split h1 { font-size: var(--fs-h1-split); }
:where([dir="rtl"]) .split h1 { font-size: var(--fs-h1-split-ar); }
/* five industries on the home page: the lead card spans two rows beside a 2 x 2 grid */
.industries .ind-lead { grid-row: span 2; }
.industries .ind:not(.ind-lead) { aspect-ratio: 4 / 3; }
.industries .ind:not(.ind-lead) .ind-text { font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* tablets (641 to 1100px): the lead card runs full width, then the other four sit 2 x 2; phones get one column */
@media (min-width: 641px) and (max-width: 1100px) {
.industries { grid-template-columns: 1fr 1fr; }
.industries .ind-lead { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) { .industries .ind-lead { grid-row: auto; } }
/* the Phosphor size rule ([data-icons] .ic) out-ranked the boxed icons in "Fits into your property" */
[data-icons="phosphor"] .fit-item > .ic { width: 44px; height: 44px; padding: 10px; }
.product-media { position: relative; }
/* ---------- home v3: tighter rhythm, logo strip under services, the person line ---------- */
.section { padding-block: clamp(3.5rem, 2rem + 4.5vw, 6.5rem); }
.section-tight { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
section[aria-labelledby="tools-title"] { padding-top: 0; }
section[aria-labelledby="tools-title"] .clients-row { padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); border-top: 1px solid var(--line); }
.who-card { display: flex; align-items: center; gap: 1.25rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding: 1.25rem 1.5rem; border-radius: var(--r-card); background: var(--tint); }
.who-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.who-card p { margin: 0; max-width: 60ch; }
.who-card a { color: var(--ink); font-weight: 600; }
.who-card[hidden] { display: none; }
/* ---------- company hero: the company's colours, gold stays with the product ---------- */
.cine-company .eyebrow { color: #E6CFE0; background: rgb(230 207 224 / .12); box-shadow: inset 0 0 0 1px rgb(230 207 224 / .28); }
.cine-company .btn-primary { background: #F6F2F5; color: #1C1219; align-self: auto; margin-top: 0; }
.cine-company .btn-primary:hover { background: #FFFFFF; }
/* ---------- 16 Oct re-audit: tab trays, contrast themes, phone heroes, logo strip, numbers, tap targets ---------- */
/* tab trays wrap instead of hiding tabs off screen; 27px is half the one-row height, so a single row still reads as a pill */
.tablist { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; border-radius: 27px; }
@media (max-width: 640px) {
.tablist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.tablist .tab { white-space: normal; line-height: 1.25; padding-inline: .6rem; }
.tablist .tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Windows contrast themes: keep the menu button, the selected tab, logos, registry marks, arrows and demo tiles visible */
@media (forced-colors: active) {
.nav-toggle { border: 1px solid ButtonText; }
.burger i { forced-color-adjust: none; background: ButtonText; }
.tablist .tab[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -3px; }
.logo-img, .reg-mark { forced-color-adjust: none; background: CanvasText !important; }
:is(.btn-primary, .btn-gold, .btn-text, .drop-all)::after, .ind-go::after { forced-color-adjust: none; background: LinkText; }
button:is(.btn-primary, .btn-gold)::after { background: ButtonText; }
.tile { border: 1px solid ButtonText; }
.tile.is-active { outline: 3px solid Highlight; outline-offset: 2px; }
}
/* phones: the hero call to action sits above the fold (shorter photo, one-line eyebrow, the second lede sentence hidden) */
@media (max-width: 640px) {
.hero-cine { padding-top: 1rem; }
.cine > img { aspect-ratio: 16 / 9; }
.cine-copy { padding: 1.5rem 1.5rem 1.75rem; }
.cine .eyebrow { white-space: nowrap; margin-bottom: 1rem; }
html:not([dir="rtl"]) .cine .eyebrow { letter-spacing: .04em; }
.cine-copy .lede { margin-top: 1rem; }
.lede-more { display: none; }
.hero-cine .hero-actions { margin-top: 1.5rem; }
.prod-hero .product-media img { aspect-ratio: 16 / 9; }
.prod-hero .product-copy { gap: 1rem; padding: 1.5rem 1.5rem 1.75rem; }
.prod-hero .lede { margin-top: 0; }
.prod-hero .hero-actions { margin-top: .25rem; }
}
/* below 360px the English eyebrow no longer fits on one line, so it wraps again */
@media (max-width: 359px) { .cine .eyebrow { white-space: normal; } }
/* landscape phones (short screens): a slimmer header, the home headline and its call to action on the first screen,
and the Hotelier OS hero keeps copy and photo side by side instead of opening with two screens of photo */
@media (orientation: landscape) and (max-height: 500px) {
:root { --header-h: 60px; }
.site-header { padding-top: .5rem; }
.site-header .header-row { height: 52px; }
.hero-cine { padding-top: .5rem; }
.cine { min-height: 0; }
/* narrow landscape phones keep the photo behind the copy instead of stacking it above, moved away from the copy
side like on short desktop screens so the H1 clears both faces (V-44) */
.cine > img { position: absolute; inset: 0; inset-inline-start: 12%; height: 100%; aspect-ratio: auto; object-position: 50% 45%;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 14%); mask-image: linear-gradient(90deg, transparent, #000 14%); }
[dir="rtl"] .cine > img { -webkit-mask-image: linear-gradient(270deg, transparent, #000 14%); mask-image: linear-gradient(270deg, transparent, #000 14%); }
.cine::after { display: block; }
.cine-copy { max-width: 640px; padding: 1rem 1.75rem 1.25rem; background: none; }
.cine .eyebrow { margin-bottom: .75rem; }
.cine-copy { --fs-h1: clamp(1.6rem, .8rem + 2.2vw, 2.25rem); --fs-h1-ar: clamp(1.6rem, .8rem + 2.2vw, 2.25rem); }
.cine-copy h1 { max-width: 24ch; }
[dir="rtl"] .cine-copy h1, [dir="rtl"] .prod-hero h1 { line-height: 1.15; }
.cine-copy .lede { margin-top: .75rem; font-size: 1rem; }
.cine-copy .lede-more { display: none; }
.hero-cine .hero-actions { margin-top: 1rem; }
.page-hero:has(.prod-hero) { padding-top: .5rem; }
.prod-hero { grid-template-columns: 1.1fr .9fr; }
.prod-hero .product-media { order: 0; }
.prod-hero .product-media img { height: 100%; min-height: 0; aspect-ratio: auto; }
.prod-hero .product-copy { gap: .5rem; padding: 1rem 1.5rem 1.25rem; }
.prod-hero .product-logo { width: 64px; }
.prod-hero { --fs-h1-product: clamp(1.6rem, .8rem + 2.2vw, 2.25rem); --fs-h1-product-ar: clamp(1.6rem, .8rem + 2.2vw, 2.25rem); }
.prod-hero .lede { margin-top: 0; font-size: 1rem; }
.prod-hero .hero-actions { margin-top: .25rem; }
}
/* the lede stops before the faces (18 Oct photo: both people start past 60% of the card); below 340px tall the extra
line would push the call to action off the first screen, so the shortest phones keep the wider lede */
@media (orientation: landscape) and (min-height: 340px) and (max-height: 500px) { .cine-copy .lede { max-width: 40ch; } }
/* phone numbers never break at their spaces */
.cta-wa a span[dir="ltr"], .site-footer a span[dir="ltr"], .direct a span[dir="ltr"] { white-space: nowrap; }
/* About: the icon on the plum "Bilingual by design" card uses the company lilac */
.values > .value:nth-child(3) .ic { color: #E6CFE0; }
/* technology logos: each logo is capped at its column, the odd last logo is centred on phones, no lone logo at tablet widths */
.clients-list.spread { column-gap: 1.5rem; }
.clients-list.spread > li { width: 100%; min-width: 0; justify-content: center; }
@media (max-width: 560px) {
.clients-list.spread { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clients-list.spread > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 561px) and (max-width: 1009px) { .clients-list.spread { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* tap targets of at least 44 x 44 */
.site-header .brand { min-width: 44px; min-height: 44px; justify-content: center; margin-inline-start: -5px; }
.lang-link, .demo-reset { display: inline-flex; align-items: center; min-height: 44px; }
.crumb a { position: relative; }
.crumb a::after { content: ""; position: absolute; inset: -7px 0; }
.map-link { position: relative; }
.map-link::after { content: ""; position: absolute; inset: -.7rem 0; }
.faq details { padding: 0; }
.faq summary { min-height: 44px; padding: .85rem 1.25rem; align-items: center; }
.faq details p { margin-top: 0; padding: 0 1.25rem 1rem; }
@media (max-width: 900px) {
.site-footer ul { gap: 0; }
.site-footer li a { padding-block: .6rem; min-height: 44px; min-width: 44px; }
.footer-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
}
/* ===== contact page: the four contact cards and the form heading (18 Oct 2026, after clearvision.com.sa) ===== */
.contact-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap, 1.25rem); }
@media (max-width: 1100px) { .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .contact-cards { grid-template-columns: 1fr; } }
.contact-cards > li { display: flex; }
.contact-card { flex: 1; display: flex; flex-direction: column; gap: .3rem; padding: 1.5rem; border-radius: var(--r-lg); background: var(--card-bg, var(--surface)); box-shadow: var(--core), var(--bezel); color: var(--ink); text-decoration: none; transition: transform .5s var(--spring); }
a.contact-card:hover { transform: translateY(-2px); }
.cc-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; margin-bottom: .75rem; background: var(--card-bg, var(--surface-2)); box-shadow: 0 0 0 1px var(--card-ring, var(--line)); color: var(--accent); }
.cc-label { font-size: .8125rem; font-weight: 600; color: var(--muted); }
.cc-value { font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
[dir="rtl"] .cc-value[dir="ltr"] { text-align: right; }
.cc-note { margin-top: auto; padding-top: .35rem; font-size: .875rem; color: var(--muted); }
.contact-form-row { margin-top: clamp(3rem, 2rem + 4vw, 5.5rem); }
.form-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.form-sub { margin: .5rem 0 1.75rem; color: var(--muted); }