/* =============================================================
KETURAH — Brand site (PDF-accurate, reference-matched)
============================================================= */
:root{
--bg:#000;
--bg-2:#0a0a0a;
--ink:#fff;
--ink-2:rgba(255,255,255,.78);
--ink-3:rgba(255,255,255,.55);
--ink-4:rgba(255,255,255,.36);
--line:rgba(255,255,255,.16);
--line-2:rgba(255,255,255,.28);
--ff-serif:"Cormorant Garamond","Cormorant","Times New Roman",serif;
--ff-sans:"Montserrat",system-ui,-apple-system,sans-serif;
/* Editorial container widths. Narrowed from 1480/1720 → 1320/1520 so text
sections sit further from the viewport edges on wide monitors — more
breathing room on the left and right, classic editorial rhythm.
Mobile is gutter-bound, not container-bound, so untouched. */
--container:1320px;
--container-wide:1520px;
--gutter:clamp(20px,2.4vw,40px);
--gutter-wide:clamp(20px,1.6vw,28px);
--header-h:72px;
--subbar-h:clamp(56px,5.4vw,72px);
--ease:cubic-bezier(.2,.7,.2,1);
--ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink)}
/* scrollbar-gutter:stable reserves vertical scrollbar space on every page,
so right-aligned header items (lang toggle, back link, etc.) sit at the
same X coordinate whether the page scrolls or not. */
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-gutter:stable}
body{
font-family:var(--ff-sans);font-weight:400;font-size:14px;line-height:1.7;letter-spacing:.005em;
overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
/* Content protection — paired with initContentGuard() in main.js. Disables the
iOS long-press "Save Image" callout and the user-select drag-highlight on
media; native browser drag-image is also blocked at the JS layer. Form fields
still allow context menus via the JS allowlist so paste/select stays usable. */
img,video,picture{
-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;
-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;
pointer-events:auto;
}
a{color:inherit;text-decoration:none;transition:opacity .35s var(--ease),color .35s var(--ease)}
button{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0}
ul{margin:0;padding:0;list-style:none}
input,textarea,select{font:inherit;color:inherit;background:transparent;border:0;outline:0}
::selection{background:rgba(255,255,255,.18);color:#fff}
h1,h2,h3,h4{font-family:var(--ff-serif);font-weight:400;letter-spacing:0;margin:0;line-height:1.08}
.h-hero{font-size:clamp(40px,5.4vw,72px);font-weight:400;line-height:1.06}
.h-display{font-size:clamp(38px,4.2vw,60px);font-weight:400}
.h-section{font-size:clamp(28px,3.2vw,46px);font-weight:400}
p{margin:0 0 1em;color:var(--ink-2)}
.serif{font-family:var(--ff-serif);font-weight:400}
.eyebrow{
font-family:var(--ff-sans);font-weight:400;
font-size:10px;letter-spacing:.30em;text-transform:uppercase;color:var(--ink-3);
}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
/* ============ ACCESSIBILITY ============
Skip-link is hidden visually until focused, then reveals itself in the
top-left so keyboard users can jump straight to the main content.
Focus-visible adds a brand-coloured outline on keyboard navigation only,
so mouse / touch users never see an outline ring. */
.skip-link{
position:fixed;top:0;left:0;z-index:200;
padding:10px 16px;background:#000;color:#fff;
font-family:var(--ff-sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
border:1px solid var(--line-2);
transform:translateY(-150%);transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translateY(0);outline:none}
*:focus{outline:none}
*:focus-visible{outline:2px solid rgba(255,255,255,.55);outline-offset:3px;border-radius:2px}
@media (prefers-contrast: more){
:root{--line:rgba(255,255,255,.42);--line-2:rgba(255,255,255,.62);--ink-3:rgba(255,255,255,.85)}
}
/* ============ HEADER ============
Identical positioning across every page and device. Safe-area insets are
honored on the sides so notched / cutout devices don't push the hamburger
or lang toggle inward. Scrollbar-gutter is reserved on below so the
right edge sits at the same X coordinate regardless of page length. */
.site-header{
position:fixed;top:0;left:0;right:0;z-index:50;height:var(--header-h);
display:flex;align-items:center;justify-content:space-between;
padding-left:max(var(--gutter), env(safe-area-inset-left));
padding-right:max(var(--gutter), env(safe-area-inset-right));
box-sizing:border-box;
/* Fully transparent at rest — no header chrome at all on the first viewport. */
background:transparent;
backdrop-filter:none;-webkit-backdrop-filter:none;
border-bottom:0;
transition:background .45s var(--ease),backdrop-filter .45s var(--ease);
}
/* On scroll — backdrop blur only, no colour fill. Creates depth separation
from the page content without making the header read as a solid black bar. */
.site-header.is-scrolled{
background:transparent;
backdrop-filter:blur(18px) saturate(120%);
-webkit-backdrop-filter:blur(18px) saturate(120%);
}
/* When the menu is open the header floats above the overlay so the hamburger
(morphing into an X) and the brand/lang toggle remain interactive and visible. */
body.menu-open .site-header{
z-index:120;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
transition:background .35s var(--ease) .25s,backdrop-filter .35s var(--ease) .25s;
}
.site-header .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.site-header .brand img{height:14px;width:auto}
.lang{font-size:10.5px;letter-spacing:.20em;text-transform:uppercase;color:var(--ink-2)}
.lang a{padding:0 4px}
.lang .sep{color:var(--ink-4);margin:0 2px}
.lang a.active{color:var(--ink)}
/* On project pages (any page with [data-back] on body) the subbar already shows
the back link as the primary navigation cue. On narrow viewports we hide the
main-header EN/AR toggle so only the back link is visible up top, the hamburger
menu still offers full navigation. Pages without a back link keep EN/AR. */
/* (removed) — .lang now renders as a compact 38px Register icon on every
page including project pages on mobile (per user spec) */
/* Hamburger button — two lines that morph into an X when body.menu-open is set.
Position is locked so the icon doesn't shift as it transforms. Z-index 120 keeps
it tappable above the menu overlay (110), so the same button closes the menu. */
.hamburger{
position:relative;z-index:120;
display:flex;flex-direction:column;align-items:center;justify-content:center;
width:28px;height:18px;gap:0;cursor:pointer;
background:transparent;border:0;padding:0;
}
.hamburger span{
display:block;height:1px;background:var(--ink);position:absolute;left:2px;right:2px;
transition:transform .5s var(--ease),width .35s var(--ease),top .4s var(--ease),opacity .25s var(--ease);
transform-origin:50% 50%;
}
.hamburger span:nth-child(1){top:6px;width:24px}
.hamburger span:nth-child(2){top:11px;width:18px}
/* Open state — lines collapse to center then rotate into an X. */
body.menu-open .hamburger span{top:9px;width:24px}
body.menu-open .hamburger span:nth-child(1){transform:rotate(45deg)}
body.menu-open .hamburger span:nth-child(2){transform:rotate(-45deg)}
/* Subbar (project pages) — sits directly under the main header and STICKS to it
on scroll. Position:fixed (not sticky) so it stays put regardless of the
surrounding stacking context. Safe-area insets keep the sublogo aligned with
the hamburger and the back link with the lang toggle. Background fades in
on scroll (via body.scrolled) so the bar reads cleanly against any hero. */
.subbar{
position:fixed;top:var(--header-h);left:0;right:0;z-index:49;
padding-left:max(var(--gutter), env(safe-area-inset-left));
padding-right:max(var(--gutter), env(safe-area-inset-right));
box-sizing:border-box;
background:transparent;
transition:background .35s var(--ease),backdrop-filter .35s var(--ease);
}
/* Subbar is transparent at rest so the hero reads cleanly underneath. Once the
user scrolls past the hero, a soft dark blur tints in so the sublogo / back
link stay legible over page content. */
body.subbar-scrolled .subbar{
background:rgba(0,0,0,.55);
backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);
}
/* Hero is flush to viewport top — header (z 50) and subbar (z 49) overlay it
transparently. Previously a margin-top:var(--subbar-h) push created a black
strip above the banner; removing it lets the artwork breathe from y=0. */
body[data-sublogo] .project-hero,
body[data-back] .project-hero{
margin-top:0;
}
.subbar .subbar-top{
display:flex;justify-content:space-between;align-items:center;
padding:18px 0;
border-bottom:1px solid var(--line);
}
.subbar .subbar-flag-row{
display:flex;justify-content:flex-end;
padding:12px 0 18px;
}
.subbar .sublogo{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.subbar .sublogo img{height:22px;width:auto;filter:brightness(0) invert(1)}
/* Stabio sub-logo is composite art + text — needs more height to read */
.subbar .sublogo img[src*="stabio-2"]{height:clamp(35px,3.5vw,48px)}
/* Ardh sub-logo — full wordmark at +30% over the default 22px */
.subbar .sublogo img[src*="keturah-ardh/ardh.svg"]{height:29px}
/* Ardh icon-only mark (project landing only) — slightly taller so the leaf
reads at the same optical weight as the other projects' full marks. */
.subbar .sublogo img[src*="keturah-ardh/ardh-icon.svg"]{height:32px}
/* Super-small Swiss flag accents */
.subbar .subbar-flag-row .flag-ch{
height:20px;width:auto;border-radius:1px;filter:none;
box-shadow:0 0 0 .5px rgba(255,255,255,.22);
}
.three-cards .card .top .flag-ch{
display:block;width:10px;height:auto;margin:6px auto 0;
border-radius:1px;box-shadow:0 0 0 .5px rgba(255,255,255,.22);
}
.subbar .sublogo .tagline{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3)}
.subbar .back{display:inline-flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2)}
.subbar .back svg{width:22px;height:7px}
.subbar .back:hover{color:var(--ink)}
/* Small screens: keep only the arrow icon (saves space on the subbar) — the
aria-label on .back keeps the link accessible without visible text. */
@media (max-width: 700px) {
.subbar .back span { display: none; }
.subbar .back { gap: 0; }
}
/* Overlay menu — z-index 110 sits above modals (100) and the header, so a stacking
context from a transformed/will-change ancestor can never hide it. The hamburger
button (z-index 120) stays tappable above the overlay so the same button closes it.
The panel slides down from the top using clip-path so the morphing animation feels
like the menu is unfolding from where the hamburger sits, not just fading in. */
.menu-overlay{
position:fixed;inset:0;z-index:110;
background:rgba(0,0,0,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
display:flex;flex-direction:column;padding:28px var(--gutter) 40px;
opacity:0;visibility:hidden;pointer-events:none;
clip-path:inset(0 0 100% 0);
transition:opacity .55s var(--ease-out),visibility 0s .8s,clip-path .8s var(--ease-out);
}
body.menu-open .menu-overlay{
opacity:1;visibility:visible;pointer-events:auto;
clip-path:inset(0 0 0 0);
transition:opacity .55s var(--ease-out),visibility 0s 0s,clip-path .8s var(--ease-out);
}
/* Hide the legacy close button — the hamburger itself becomes the X. */
.menu-overlay .menu-close{display:none}
.menu-inner{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:var(--container);margin:0 auto;width:100%;padding-top:60px}
.menu-primary{display:flex;flex-direction:column;gap:6px}
.menu-primary li{overflow:hidden}
.menu-primary a{display:inline-block;font-family:var(--ff-sans);font-weight:300;font-size:clamp(20px,2vw,26px);letter-spacing:.32em;text-transform:uppercase;color:var(--ink);padding:6px 0;transform:translateY(110%);opacity:0;transition:transform .9s var(--ease-out),opacity .9s var(--ease-out),color .35s var(--ease),letter-spacing .35s var(--ease)}
.menu-primary a:hover{color:var(--ink);letter-spacing:.36em}
body.menu-open .menu-primary a{transform:translateY(0);opacity:1}
.menu-secondary{margin-top:32px;display:flex;flex-direction:column;gap:4px}
.menu-secondary li{overflow:hidden}
.menu-secondary a{display:inline-block;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3);padding:3px 0;transform:translateY(110%);opacity:0;transition:transform .9s var(--ease-out),opacity .9s var(--ease-out),color .35s var(--ease)}
.menu-secondary a:hover{color:var(--ink)}
body.menu-open .menu-secondary a{transform:translateY(0);opacity:1}
/* Stagger primary nav items as the menu unfolds (open). Close is intentionally
uniform so items collapse together as the clip-path closes from the top. */
body.menu-open .menu-primary li:nth-child(1) a{transition-delay:.18s,.18s,0s,0s}
body.menu-open .menu-primary li:nth-child(2) a{transition-delay:.24s,.24s,0s,0s}
body.menu-open .menu-primary li:nth-child(3) a{transition-delay:.30s,.30s,0s,0s}
body.menu-open .menu-primary li:nth-child(4) a{transition-delay:.36s,.36s,0s,0s}
body.menu-open .menu-primary li:nth-child(5) a{transition-delay:.42s,.42s,0s,0s}
body.menu-open .menu-secondary li:nth-child(1) a{transition-delay:.50s,.50s,0s}
body.menu-open .menu-secondary li:nth-child(2) a{transition-delay:.54s,.54s,0s}
.menu-bottom{display:flex;align-items:center;gap:24px;margin-top:36px;opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
body.menu-open .menu-bottom{opacity:1;transform:none;transition-delay:.62s}
.menu-social{display:flex;gap:18px}
.menu-social img{height:18px;width:18px;filter:brightness(0) invert(1)}
.menu-social a{transition:opacity .25s var(--ease)}
.menu-social a:hover{opacity:.6}
/* ============ HERO ============ */
.hero{position:relative;height:100vh;min-height:680px;overflow:hidden;background:#000}
.hero video,.hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;will-change:transform}
.hero .overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.62) 40%,rgba(0,0,0,.78) 100%)}
.hero .overlay::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.22)}
.hero .hero-content{
position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
z-index:3;text-align:center;padding:0 var(--gutter);
}
.hero h1{opacity:0;transform:translateY(20px);animation:rise 1.6s var(--ease-out) .5s forwards}
.hero .hero-bottom{
position:absolute;left:50%;bottom:48px;transform:translateX(-50%);
z-index:3;display:flex;flex-direction:column;align-items:center;gap:36px;
text-align:center;
}
.hero .below-title{
opacity:0;transform:translateY(8px);animation:rise 1.4s var(--ease-out) 1.1s forwards;
font-size:10px;letter-spacing:.36em;text-transform:uppercase;color:var(--ink-2);
}
.hero .scroll-down{
display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;
opacity:0;animation:rise 1.4s var(--ease-out) 1.4s forwards;
transition:transform .6s var(--ease);
}
.hero .scroll-down img{
width:18px;height:auto;
transform:rotate(90deg);
filter:brightness(0) invert(1);
animation:scrollDown 2.4s var(--ease-out) infinite;
}
.hero .scroll-down:hover img{animation-play-state:paused;transform:rotate(90deg) translateX(4px)}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes scrollDown{
0% {transform:rotate(90deg) translateX(-6px);opacity:.4}
50% {transform:rotate(90deg) translateX(0);opacity:1}
100% {transform:rotate(90deg) translateX(8px);opacity:0}
}
/* ============ PROJECT HERO ============ */
/* Inner-page hero: 75vh per brand spec.
clamp() keeps it responsive across every screen — never below 525px (usable on
landscape phones / split-view laptops), never above 900px (avoids dead space on
tall 4K monitors). object-fit:cover on the media handles the crop fluidly. */
.project-hero{position:relative;height:clamp(525px,75vh,900px);overflow:hidden;background:#000}
.project-hero img,.project-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;z-index:1;transform:scale(1.05);transition:transform 7s var(--ease-out)}
.project-hero.is-visible img,.project-hero.is-visible video{transform:scale(1)}
/* Hero darkening, layered: a vertical gradient handles general contrast against
the sky and water at the top/bottom, while a soft radial vignette behind the
centred title boosts legibility against busy skyline / architectural shots. */
.project-hero .overlay{
position:absolute;inset:0;z-index:2;pointer-events:none;
background:
radial-gradient(60% 45% at 50% 50%, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 75%),
linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 40%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.85) 100%);
}
.project-hero .ph-content{
position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
z-index:4;padding:0 var(--gutter);text-align:center;
}
.project-hero .ph-content .eyebrow{margin-bottom:18px;display:block}
/* Coming Soon chip on hero — sits just under the eyebrow, above the headline. */
.project-hero .ph-content .coming-soon{
display:inline-block;margin:0 0 18px;
font-family:var(--ff-sans);font-weight:400;
font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink);
padding:6px 14px;border:1px solid var(--line-2);border-radius:999px;
background:rgba(255,255,255,.04);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
opacity:0;transform:translateY(18px);
transition:opacity 1.2s var(--ease-out) .8s,transform 1.2s var(--ease-out) .8s;
}
.project-hero.is-visible .ph-content .coming-soon{opacity:1;transform:none}
.project-hero .ph-content h1{max-width:880px;margin-left:auto;margin-right:auto}
.project-hero .ph-content .ph-sub{
max-width:600px;margin:clamp(18px,2vw,28px) auto 0;
font-family:var(--ff-sans);font-weight:300;
font-size:clamp(13px,1.1vw,15.5px);line-height:1.75;color:var(--ink-2);
opacity:0;transform:translateY(18px);
transition:opacity 1.2s var(--ease-out) .9s,transform 1.2s var(--ease-out) .9s;
}
.project-hero.is-visible .ph-content .ph-sub{opacity:1;transform:none}
.project-hero .ph-content .eyebrow,.project-hero .ph-content h1{opacity:0;transform:translateY(18px);transition:opacity 1.2s var(--ease-out),transform 1.2s var(--ease-out)}
.project-hero.is-visible .ph-content .eyebrow{opacity:1;transform:none;transition-delay:.4s}
.project-hero.is-visible .ph-content h1{opacity:1;transform:none;transition-delay:.6s}
/* Scroll-down indicator — horizontally centered at the bottom of the inner hero
(mirrors the homepage hero arrow placement). Responsive: clamp on bottom so it
stays comfortably above the fold on short heroes, near the bottom on taller ones. */
.project-hero .scroll-down{
position:absolute;left:50%;bottom:clamp(28px,4vh,48px);transform:translateX(-50%);
z-index:5;
display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;cursor:pointer;
opacity:0;animation:rise 1.4s var(--ease-out) 1.4s forwards;
transition:opacity .6s var(--ease);
}
.project-hero .scroll-down img{
width:18px;height:auto;transform:rotate(90deg);
filter:brightness(0) invert(1);
animation:scrollDown 2.4s var(--ease-out) infinite;
}
.project-hero .scroll-down:hover img{animation-play-state:paused;transform:rotate(90deg) translateX(4px)}
/* ============ INTRO BLOCK (Transformational Living By Design) ============ */
.intro-block{
padding:clamp(80px,11vw,150px) 0;text-align:center;background:#000;
}
.intro-block h2{font-family:var(--ff-serif);font-weight:400;font-size:clamp(36px,4.4vw,62px);line-height:1.08;max-width:760px;margin:0 auto}
.intro-block .body{
margin:32px auto 0;max-width:520px;color:var(--ink-2);
font-size:12.5px;line-height:1.85;letter-spacing:.005em;
}
.intro-block .actions{display:flex;justify-content:center;gap:14px;margin-top:38px;flex-wrap:wrap}
/* ============ GENESIS SECTION (smoke video + wood imagery) — homepage only ============
The smoke video runs ONLY on the homepage Genesis section, as the brand's
signature atmospheric backdrop. mix-blend-mode:screen lifts smoke against
the dark section background; reduced opacity keeps the text legible. */
.genesis{
position:relative;background:#000;overflow:hidden;
padding:clamp(80px,11vw,150px) 0;
}
.genesis-bg{position:absolute;inset:0;z-index:1;opacity:.85}
.genesis-bg video{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
mix-blend-mode:screen;opacity:.275;filter:contrast(.95) brightness(.85);
}
.genesis-inner{
position:relative;z-index:2;
/* Tight auto-sized columns so the text and image pair stay close together,
then justify-content:center positions the whole pair in the viewport. */
display:grid;grid-template-columns:auto auto;gap:clamp(40px,5vw,80px);
align-items:center;justify-content:center;
max-width:var(--container-wide);margin:0 auto;padding:0 var(--gutter-wide);
}
.genesis-text{max-width:440px}
.genesis-text .eyebrow{display:block;margin-bottom:18px}
.genesis-text h2{font-family:var(--ff-serif);font-weight:400;font-size:clamp(28px,3.4vw,46px);line-height:1.12}
.genesis-text .body{margin-top:24px;color:var(--ink-3);font-size:12.5px;line-height:1.85;max-width:420px}
/* Genesis diptych — wood-left/wood-right images form a single composition
(the log extends across the gap). Aspect ratio matches the source PNGs (4:5
portrait) so the wood reads naturally, no cropping. */
.genesis-imgs{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:312px}
.genesis-imgs .tile{position:relative;aspect-ratio:4/5;overflow:hidden;background:#0a0a0a}
/* Source PNGs are 300×381 (4:5) — exactly the tile aspect ratio. A modest
scale(1.12) gives the unified parallax headroom for ±5% Y travel without
revealing edge gaps. object-position on each half anchors the meeting
edge toward the gutter so the log reads as one continuous piece across
the diptych. */
.genesis-imgs .tile img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.12);will-change:transform}
.genesis-imgs .tile.is-left img{object-position:right center}
.genesis-imgs .tile.is-right img{object-position:left center}
@media(max-width:900px){
.genesis-inner{grid-template-columns:1fr;gap:40px;justify-items:center}
.genesis-text{max-width:440px}
.genesis-imgs{max-width:380px}
}
/* ============ ATMOSPHERE (smoke video background section, used on inner pages) ============ */
.atmosphere{position:relative;background:#000;overflow:hidden}
.atmosphere .layer{position:relative;min-height:clamp(420px,55vh,560px);display:flex;align-items:center;overflow:hidden}
.atmosphere video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:.29;filter:contrast(.95) brightness(.78)}
.atmosphere .overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.42) 50%,rgba(0,0,0,.78) 100%)}
.atmosphere .row{position:relative;z-index:4;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;width:100%;padding:0 var(--gutter);max-width:var(--container);margin:0 auto}
.atmosphere .copy h2{font-family:var(--ff-serif);font-weight:400;font-size:clamp(28px,3.4vw,46px);line-height:1.12}
.atmosphere .copy .body{margin-top:18px;color:var(--ink-2);font-size:13px;line-height:1.8;max-width:440px}
.atmosphere .imgs{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px;margin-left:auto}
.atmosphere .imgs img{width:100%;aspect-ratio:1/1;object-fit:cover}
@media(max-width:900px){
.atmosphere .row{grid-template-columns:1fr;gap:32px}
.atmosphere .imgs{margin-left:0}
}
/* ============ CREEK FEATURE ROW ============ */
.feature-row{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,24px);
/* grid-auto-flow:dense — when .is-reverse / .is-balanced.is-reverse places .text
into a later column (e.g. col 2/3), the next sibling .media targeting col 1/2
would otherwise wrap to row 2 with row-flow, leaving the image stacked BELOW
the text instead of beside it. Dense packing backfills the empty col 1 cell
in row 1, restoring true side-by-side layout. */
grid-auto-flow:dense;
align-items:stretch;background:#000;
padding:clamp(36px,4vw,60px) var(--gutter-wide) clamp(20px,2.4vw,28px);
max-width:var(--container-wide);margin:0 auto;
}
.feature-row .text{grid-column:1/2}
.feature-row .media{grid-column:2/4}
.feature-row .text{
position:relative;
display:flex;flex-direction:column;justify-content:center;align-items:center;
text-align:center;padding:clamp(40px,5vw,72px) clamp(16px,3vw,40px);
min-height:clamp(540px,60vh,680px);
}
.feature-row .text .meta{
position:absolute;top:clamp(24px,3vw,40px);left:0;right:0;
font-size:10px;letter-spacing:.30em;text-transform:uppercase;color:var(--ink-3);
}
.feature-row .text .mark{display:flex;justify-content:center}
.feature-row .text .mark img{height:clamp(32px,3.5vw,48px);width:auto;filter:brightness(0) invert(1)}
.feature-row .text .tagline{
font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-2);
margin-top:14px;
}
.feature-row .text .body{
font-size:12.5px;color:var(--ink-2);line-height:1.85;max-width:300px;
margin:clamp(24px,3vw,40px) auto 0;text-align:center;
}
.feature-row .text .btn-pill{margin-top:clamp(24px,2.6vw,36px)}
.feature-row .text .coords{
position:absolute;bottom:clamp(24px,3vw,40px);left:0;right:0;
font-size:10px;letter-spacing:.30em;text-transform:uppercase;color:var(--ink-3);
}
.feature-row .media{
position:relative;overflow:hidden;background:#000;
min-height:clamp(540px,60vh,680px);
}
.feature-row .media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.6s var(--ease-out)}
.feature-row:hover .media img{transform:scale(1.05)}
/* Vertical-orientation media variant — used for vertically-shot video clips
(e.g. meydan-story.mp4 which is 9:16). Constrains the column to a portrait
frame and centres it so the video isn't stretched into the landscape grid. */
.feature-row .media.is-vertical{
aspect-ratio:9/16;
max-width:clamp(280px,30vw,420px);
min-height:auto;
margin:0 auto;
background:#000;
}
.feature-row .media.is-vertical video{
width:100%;height:100%;object-fit:cover;display:block;
transform:none;
}
/* Portrait variant — anchors the subject inside the frame and applies a true
black-and-white treatment with a 50% black overlay on top for an editorial
founder portrait look. Used on about.html for the Talal portrait (tag.webp,
1187×1629 — true portrait, head at the top of the composition).
object-position:top with no transform displacement keeps the head pinned
to the top of the frame regardless of viewport ratio or scroll position.
The image carries class="no-parallax" so the GSAP parallax loop in
js/main.js (which would translate ±100px and scale 1.5×) skips it. */
.feature-row .media.is-portrait-bw img{
object-position:center top;
filter:grayscale(100%) contrast(1.05);
transform:none!important;
transform-origin:top center;
}
.feature-row:hover .media.is-portrait-bw img{transform:none!important}
.feature-row .media.is-portrait-bw::after{
content:"";position:absolute;inset:0;z-index:2;
background:rgba(0,0,0,.5);
pointer-events:none;
}
.feature-row .media .overlay-top{
position:absolute;left:0;right:0;top:0;z-index:2;
padding:clamp(40px,5vw,72px) clamp(28px,4vw,72px) 80px;
text-align:center;
background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 100%);
}
.feature-row .media .overlay-top h2{font-family:var(--ff-serif);font-weight:400;font-size:clamp(28px,3.4vw,48px);line-height:1.18;color:#fff;max-width:720px;margin:0 auto}
.feature-row .media .overlay-bottom{
position:absolute;left:0;right:0;bottom:0;z-index:2;
padding:80px clamp(28px,4vw,72px) clamp(32px,4vw,52px);
display:flex;justify-content:center;
background:linear-gradient(0deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 100%);
}
@media(max-width:900px){
.feature-row{grid-template-columns:1fr;padding:var(--gutter);gap:18px}
.feature-row .text,.feature-row .media{grid-column:auto}
/* On narrow viewports the text column collapses to natural content height,
which makes the desktop absolute-positioned .meta / .coords collide with
the in-flow .btn-pill. Reflowing them as static block elements keeps
ordering meta -> mark -> tagline -> body -> button -> coords. */
.feature-row .text .meta{position:static;margin-bottom:24px}
.feature-row .text .coords{position:static;margin-top:clamp(20px,3vw,32px)}
.feature-row .text{padding:36px 24px;min-height:auto}
}
/* Feature-row layout variants — break up the repeating left-text/right-image rhythm:
.is-reverse — image on the left, text on the right (mirrors the default)
.is-balanced — 1:1 column split for sections where text needs equal weight to image
.is-stacked — text above, image below (full-width image), centred copy column */
.feature-row.is-reverse .text{grid-column:3/4}
.feature-row.is-reverse .media{grid-column:1/3}
/* is-balanced uses minmax(0,1fr) so neither column can be pushed wider by its
intrinsic content (a long heading in .text was squeezing .media down to 73px
before this fix). */
.feature-row.is-balanced{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.feature-row.is-balanced .text{grid-column:1/2}
.feature-row.is-balanced .media{grid-column:2/3}
.feature-row.is-balanced.is-reverse .text{grid-column:2/3}
.feature-row.is-balanced.is-reverse .media{grid-column:1/2}
.feature-row.is-stacked{
grid-template-columns:1fr;gap:clamp(36px,4vw,60px);
padding-bottom:clamp(40px,4.4vw,60px);
}
.feature-row.is-stacked .text,
.feature-row.is-stacked .media{grid-column:1/-1}
.feature-row.is-stacked .text{
min-height:auto;padding:clamp(36px,4vw,60px) clamp(40px,8vw,160px) 0;
max-width:920px;margin:0 auto;
}
.feature-row.is-stacked .text .body{max-width:640px}
.feature-row.is-stacked .media{aspect-ratio:21/9;min-height:auto;max-height:72vh}
/* Mobile resets — collapse all variants to a single-column stack so the
explicit grid-column rules above don't fight the mobile media query. */
@media(max-width:900px){
.feature-row.is-balanced,
.feature-row.is-stacked,
.feature-row.is-reverse,
.feature-row.is-balanced.is-reverse{grid-template-columns:1fr}
/* Match the highest desktop selector specificity (.is-balanced.is-reverse .media
= 0,4,0) so the mobile reset wins the cascade. */
.feature-row.is-balanced .text,
.feature-row.is-balanced .media,
.feature-row.is-balanced.is-reverse .text,
.feature-row.is-balanced.is-reverse .media,
.feature-row.is-stacked .text,
.feature-row.is-stacked .media,
.feature-row.is-reverse .text,
.feature-row.is-reverse .media{grid-column:auto !important}
.feature-row.is-stacked .text{padding-left:0;padding-right:0}
.feature-row.is-stacked .media{aspect-ratio:16/10}
}
/* Triptych — three images side by side, with an optional centred caption above. */
.media-triptych{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(10px,1.2vw,18px);
background:#000;padding:clamp(28px,3vw,48px) var(--gutter-wide) clamp(28px,3vw,48px);
max-width:var(--container-wide);margin:0 auto;
}
.media-triptych .tile{
position:relative;overflow:hidden;background:#0a0a0a;aspect-ratio:3/4;
}
.media-triptych .tile img{
width:100%;height:100%;object-fit:cover;display:block;
transform:scale(1.02);transition:transform 1.6s var(--ease-out);
}
.media-triptych .tile:hover img{transform:scale(1.06)}
.media-triptych .tile .label{
position:absolute;left:0;right:0;bottom:0;padding:18px 22px;
font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:#fff;
background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 100%);
z-index:2;
}
@media(max-width:900px){
.media-triptych{grid-template-columns:1fr;gap:14px}
}
/* ============ 3-CARD ROW (Resort / Wellness Offices / Bahr) ============ */
.three-cards{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(16px,1.6vw,24px);
background:#000;padding:0 var(--gutter-wide) clamp(40px,5vw,72px);
max-width:var(--container-wide);margin:0 auto;
}
@media(max-width:900px){.three-cards{grid-template-columns:1fr;gap:18px}}
/* CAROUSEL mode — generic; visible window of N items, all slides on a flex track */
.is-carousel{
display:block;overflow:hidden;
--cards-gap:clamp(16px,1.6vw,24px);
--cards-per-view:3;
}
.is-carousel .track{
display:flex;gap:var(--cards-gap);
transition:transform .65s var(--ease-out);
will-change:transform;
touch-action:pan-y;
-webkit-user-select:none;user-select:none;
cursor:grab;
}
.is-carousel .track.is-dragging{cursor:grabbing}
.is-carousel .track.is-dragging *{pointer-events:none}
.is-carousel .track img{pointer-events:none}
.is-carousel .card,
.is-carousel .j-card{
flex:0 0 calc((min(100vw, var(--container-wide)) - 2 * var(--gutter-wide) - (var(--cards-per-view) - 1) * var(--cards-gap)) / var(--cards-per-view));
min-width:0;
}
/* Every .three-cards.is-carousel on the site holds 4 portfolio cards
(Resort / Wellness Offices / Bahr / Mansion etc.), so the default
per-view is 4 — that way the 4th card is always visible on wide
screens and the carousel only needs to scroll on narrower viewports. */
.three-cards.is-carousel{--cards-per-view:4}
.journal-carousel.is-carousel{--cards-per-view:6}
@media(max-width:1280px){
.three-cards.is-carousel{--cards-per-view:3}
.journal-carousel.is-carousel{--cards-per-view:4}
}
@media(max-width:1100px){
.three-cards.is-carousel{--cards-per-view:2}
.journal-carousel.is-carousel{--cards-per-view:3}
}
@media(max-width:900px){
.three-cards.is-carousel{--cards-per-view:1}
.three-cards.is-carousel .card{aspect-ratio:auto}
.journal-carousel.is-carousel{--cards-per-view:2}
}
.three-cards .card{
position:relative;
display:flex;flex-direction:column;justify-content:space-between;
padding:clamp(36px,3.6vw,52px) clamp(24px,2.2vw,32px) clamp(20px,2vw,28px);
overflow:hidden;background:#000;
aspect-ratio:0.66;min-height:600px;
}
@media(max-width:900px){.three-cards .card{aspect-ratio:auto;min-height:580px}}
.three-cards .card .bg{position:absolute;inset:0;z-index:1;overflow:hidden}
.three-cards .card .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 1.6s var(--ease-out);filter:saturate(.95) brightness(.86)}
.three-cards .card:hover .bg img{transform:scale(1.07)}
.three-cards .card .bg .hover-video{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transition:opacity .7s var(--ease);
pointer-events:none;
}
.three-cards .card:hover .bg .hover-video.is-loaded{opacity:1}
/* Feature-row banners (homepage Creek/Reserve) — hover-video overlays the static img */
.feature-row .media .hover-video{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transition:opacity .8s var(--ease);
pointer-events:none;z-index:1;
}
.feature-row:hover .media .hover-video.is-loaded{opacity:1}
.three-cards .card .scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.05) 38%,rgba(0,0,0,.78) 100%)}
.three-cards .card .top{
position:relative;z-index:3;
display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
text-align:center;
}
.three-cards .card .top .mark{display:flex;justify-content:center}
.three-cards .card .top .mark img{
width:clamp(108px,11vw,132px);height:auto;
filter:brightness(0) invert(1);display:block;margin:0 auto;
}
/* Ardh logo keeps its natural taller proportions — reduced 13% */
.three-cards .card .top .mark img[src*="keturah-ardh/ardh.svg"]{
width:clamp(104px,10.4vw,131px);
}
/* Composite mark: stacked KETURAH wordmark + project sub-label (used when no composite SVG exists) */
.three-cards .card .top .mark.is-composite{
display:inline-flex;flex-direction:column;align-items:center;gap:6px;
}
.three-cards .card .top .mark.is-composite img{
width:clamp(84px,8.6vw,108px);
}
.three-cards .card .top .mark.is-composite .sub-label{
font-family:var(--ff-sans);font-weight:400;
font-size:10px;letter-spacing:.36em;text-transform:uppercase;color:#fff;line-height:1;
}
.three-cards .card .bottom{
position:relative;z-index:3;
display:flex;flex-direction:column;align-items:stretch;gap:12px;
}
.three-cards .card .bottom h3{
font-family:var(--ff-sans);font-weight:400;font-size:11px;letter-spacing:.22em;
text-transform:uppercase;color:#fff;line-height:1.7;
text-align:center;align-self:center;max-width:320px;margin:0;
/* Defensive: very tight viewports (<380px) used to push long phrases past the
card edge. Allow long words to break and shrink the title slightly so the
line never overflows horizontally. */
word-break:normal;overflow-wrap:break-word;
}
@media(max-width:480px){
.three-cards .card .bottom h3{font-size:10.5px;letter-spacing:.18em;max-width:100%}
.three-cards .card .bottom p{font-size:11.5px;max-width:100%}
}
.three-cards .card .bottom p{
font-size:12px;color:var(--ink-2);line-height:1.75;
text-align:center;align-self:center;max-width:340px;margin:0;
}
.three-cards .card .bottom .hairline{
height:1px;background:rgba(255,255,255,.32);width:100%;margin:14px 0 6px;
}
.three-cards .card .bottom .explore{
display:inline-flex;align-items:center;gap:12px;
font-size:10px;letter-spacing:.30em;text-transform:uppercase;color:var(--ink-2);
align-self:center;margin-top:0;
cursor:pointer;text-decoration:none;
transition:color .35s var(--ease),letter-spacing .35s var(--ease);
position:relative;padding:6px 2px;
}
.three-cards .card .bottom .explore svg{width:18px;height:6px;transition:transform .45s var(--ease)}
.three-cards .card .bottom .explore:hover,
.three-cards .card[data-card-link]:hover .bottom .explore{color:var(--ink);letter-spacing:.34em}
.three-cards .card .bottom .explore:hover svg,
.three-cards .card[data-card-link]:hover .bottom .explore svg{transform:translateX(4px)}
/* Whole card surface reads as clickable — JS attaches data-card-link in initCardClickability. */
.three-cards .card[data-card-link]{cursor:pointer}
/* Pager (below 3-cards) — dots truly centered, arrows pinned to the trailing
inline edge. We use position:relative + absolute ctrls because CSS Grid's
RTL column reversal interacts badly with `justify-self:end` here, leaving
the arrows stranded near the middle. Absolute + `inset-inline-end` is
direction-aware: right edge in LTR, left edge in RTL — exactly what we
want for a mirrored carousel control. */
.cards-pager{
position:relative;
display:flex;align-items:center;justify-content:center;
padding:28px var(--gutter-wide) 56px;
max-width:var(--container-wide);margin:0 auto;
background:#000;
}
.cards-pager .dots{
display:flex;gap:10px;align-items:center;
}
.cards-pager .dot{
width:18px;height:1px;background:var(--line-2);
border:0;padding:0;cursor:pointer;
transition:background .35s var(--ease),width .35s var(--ease);
}
.cards-pager .dot.active{background:var(--ink);width:28px}
.cards-pager .dot:hover{background:var(--ink)}
.cards-pager .ctrls{
position:absolute;
top:50%;
inset-inline-end:var(--gutter-wide);
transform:translateY(-50%);
display:flex;gap:12px;
}
.cards-pager.is-hidden{display:none}
.cards-pager .ctrl[disabled]{opacity:.35;pointer-events:none}
.cards-pager .ctrl{
width:42px;height:42px;border:1px solid var(--line-2);border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
background:transparent;
transition:border-color .3s var(--ease),background .3s var(--ease);
}
.cards-pager .ctrl:hover{border-color:var(--ink);background:rgba(255,255,255,.04)}
.cards-pager .ctrl img{
width:14px;height:auto;display:block;
filter:brightness(0) invert(1);opacity:.85;
transition:opacity .3s var(--ease),transform .35s var(--ease);
}
.cards-pager .ctrl:hover img{opacity:1}
.cards-pager .ctrl.prev img{transform:rotate(180deg)}
.cards-pager .ctrl.prev:hover img{transform:rotate(180deg) translateX(2px)}
.cards-pager .ctrl.next:hover img{transform:translateX(2px)}
/* ============ BUTTONS ============ */
.btn-pill{
display:inline-flex;align-items:center;gap:12px;
padding:13px 26px;border:1px solid var(--line-2);border-radius:999px;
font-family:var(--ff-sans);font-weight:400;
font-size:10px;letter-spacing:.30em;text-transform:uppercase;color:var(--ink);
transition:border-color .35s var(--ease),background .35s var(--ease);
}
.btn-pill svg{width:18px;height:6px}
.btn-pill:hover{border-color:var(--ink);background:rgba(255,255,255,.04)}
.btn-pill.ghost{color:var(--ink-2);border-color:var(--line)}
.btn-pill.ghost:hover{color:var(--ink);border-color:var(--line-2)}
.btn-pill.filled{
background:var(--ink);color:#000;border-color:var(--ink);
}
.btn-pill.filled:hover{background:rgba(255,255,255,.88);border-color:rgba(255,255,255,.88)}
.btn-text{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--ff-sans);font-weight:400;
font-size:10px;letter-spacing:.30em;text-transform:uppercase;color:var(--ink-2);
padding:6px 0;
}
.btn-text svg{width:18px;height:6px}
.btn-text:hover{color:var(--ink)}
/* ============ SECTION HEAD ============ */
.section-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:44px}
.section-head h2{font-family:var(--ff-serif);font-weight:400;font-size:clamp(32px,3.6vw,52px);line-height:1.05}
.section-head .sub{font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-3)}
/* Offset variant — aligns content to the second column of the carousel grid below */
.section-head.is-offset{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(16px,1.6vw,24px);
max-width:var(--container-wide);margin:0 auto 48px;
padding:0 var(--gutter-wide);
align-items:start;text-align:left;
}
.section-head.is-offset .content{
grid-column:2/4;
display:flex;flex-direction:column;align-items:flex-start;gap:14px;
}
.section-head.is-offset h2,
.section-head.is-offset .sub{text-align:left}
@media(max-width:1100px){
.section-head.is-offset{grid-template-columns:repeat(2,minmax(0,1fr))}
.section-head.is-offset .content{grid-column:2/3}
}
@media(max-width:900px){
.section-head.is-offset{grid-template-columns:1fr}
.section-head.is-offset .content{grid-column:1}
}
/* ============ SECTIONS, TYPOGRAPHY UTILS ============ */
section{padding:clamp(72px,10vw,140px) 0}
.section-tight{padding:clamp(48px,6vw,90px) 0}
/* ============ MANSIONS GRID (Earth · Water · Sky) ============ */
.mansions-grid{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(28px,2.6vw,48px);
margin-top:clamp(48px,5vw,80px);
}
.mansion-col{
display:flex;flex-direction:column;align-items:center;
gap:clamp(14px,1.2vw,20px);
text-align:center;
}
.mansion-col .mansion-logo{
width:clamp(180px,18vw,260px);height:auto;
margin-bottom:4px;
}
.mansion-col .mansion-logo img{
width:100%;height:auto;display:block;
/* PNG is white-on-transparent already; no filter needed on dark bg. */
}
.mansion-col .mansion-eyebrow{
font-family:var(--ff-sans);font-weight:400;
font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3);
}
.mansion-col .mansion-mood{
width:100%;overflow:hidden;background:#0a0a0a;
aspect-ratio:4/5;
}
.mansion-col .mansion-mood img{
width:100%;height:100%;object-fit:cover;display:block;
transform:scale(1.02);transition:transform 1.8s var(--ease-out);
}
.mansion-col:hover .mansion-mood img{transform:scale(1.06)}
.mansion-col .mansion-copy{
font-size:13px;color:var(--ink-2);line-height:1.7;margin:0;
}
.mansion-col .mansion-quote{
font-family:var(--ff-serif);font-style:italic;
font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:var(--ink-2);
}
@media(max-width:1100px){
.mansions-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
}
@media(max-width:760px){
.mansions-grid{grid-template-columns:1fr;gap:56px}
}
/* ============ MARBLES GRID (Keturah Stones — Italian Marble Collection) ============ */
.marbles-grid{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(28px,2.8vw,52px);
margin-top:clamp(48px,5vw,80px);
}
.marble{
display:grid;grid-template-columns:clamp(160px,18vw,220px) 1fr;
gap:clamp(20px,1.8vw,32px);
align-items:start;
}
.marble-swatch{
width:100%;overflow:hidden;background:#0a0a0a;
aspect-ratio:1/1;border:1px solid var(--line);
}
.marble-swatch img{
width:100%;height:100%;object-fit:cover;display:block;
transform:scale(1.02);transition:transform 1.8s var(--ease-out);
}
.marble:hover .marble-swatch img{transform:scale(1.06)}
.marble-meta{display:flex;flex-direction:column;gap:8px}
.marble-meta h6{
font-family:var(--ff-sans);font-weight:400;
font-size:11px;letter-spacing:.30em;text-transform:uppercase;color:var(--ink);
margin:0 0 4px;
}
.marble-meta .marble-origin{
font-family:var(--ff-sans);font-weight:300;
font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);
}
.marble-meta .marble-price{
font-family:var(--ff-serif);font-weight:400;
font-size:clamp(16px,1.4vw,20px);color:var(--ink);letter-spacing:.04em;
margin:4px 0 8px;
}
.marble-meta p{
font-size:12.5px;color:var(--ink-2);line-height:1.7;margin:0;max-width:380px;
}
@media(max-width:1100px){
.marbles-grid{grid-template-columns:1fr;gap:36px}
}
@media(max-width:540px){
.marble{grid-template-columns:1fr;gap:14px}
.marble-swatch{aspect-ratio:16/9;max-width:320px}
}
/* ============ LEGAL / POLICY PAGES ============ */
.legal-wrap{
max-width:780px;margin:0 auto;
padding:clamp(60px,8vw,120px) var(--gutter) clamp(80px,9vw,140px);
}
.legal-wrap .legal-eyebrow{
font-family:var(--ff-sans);font-weight:400;
font-size:10px;letter-spacing:.30em;text-transform:uppercase;color:var(--ink-3);
margin-bottom:18px;display:block;
}
.legal-wrap h1{
font-family:var(--ff-serif);font-weight:400;
font-size:clamp(34px,4.4vw,56px);line-height:1.08;margin:0 0 24px;
}
.legal-wrap .legal-updated{
color:var(--ink-3);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
border-bottom:1px solid var(--line);padding-bottom:32px;margin-bottom:44px;
}
.legal-wrap h2{
font-family:var(--ff-serif);font-weight:400;
font-size:clamp(22px,2.4vw,30px);line-height:1.2;margin:48px 0 16px;
}
.legal-wrap h3{
font-family:var(--ff-sans);font-weight:500;
font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
margin:32px 0 12px;
}
.legal-wrap p{
font-size:14.5px;line-height:1.8;color:var(--ink-2);margin:0 0 1em;
}
.legal-wrap ul{
margin:0 0 1.4em;padding-left:0;list-style:none;
}
.legal-wrap li{
font-size:14px;line-height:1.75;color:var(--ink-2);
padding-left:22px;position:relative;margin-bottom:8px;
}
.legal-wrap li::before{
content:"";position:absolute;left:0;top:14px;
width:10px;height:1px;background:var(--line-2);
}
.legal-wrap a{color:var(--ink);border-bottom:1px solid var(--line-2)}
.legal-wrap a:hover{border-bottom-color:var(--ink)}
.legal-wrap .legal-contact{
margin-top:64px;padding-top:32px;border-top:1px solid var(--line);
font-size:13px;color:var(--ink-3);line-height:1.8;
}
/* ============ SITEMAP PAGE ============
Editorial index of every page on the site. Uses .legal-wrap as the column
shell, then layers a per-section number, h2 heading, sub-line, and a clean
two-column row (title / one-line tag) for each link. */
.sitemap-wrap{max-width:880px}
.sitemap-section{
position:relative;margin-top:clamp(56px,7vw,96px);
padding-top:clamp(32px,3.6vw,52px);border-top:1px solid var(--line);
}
.sitemap-num{
position:absolute;top:clamp(28px,3.6vw,48px);right:0;
font-family:var(--ff-sans);font-weight:300;font-size:11px;
letter-spacing:.32em;text-transform:uppercase;color:var(--ink-4);
}
.sitemap-wrap .sitemap-section h2{
font-family:var(--ff-serif);font-weight:400;
font-size:clamp(28px,3.6vw,42px);line-height:1.12;margin:0 0 8px;color:var(--ink);
}
.sitemap-section .sub{
font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
margin-bottom:clamp(20px,2.4vw,32px);
}
.sitemap-list{
margin:0;padding:0;list-style:none;border-top:1px solid var(--line);
}
.sitemap-list li{
margin:0;padding:0;border-bottom:1px solid var(--line);
}
.sitemap-list li::before{content:none}
.sitemap-list a{
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(16px,3vw,40px);
align-items:baseline;padding:clamp(14px,1.6vw,20px) 0;
color:var(--ink-2);border:0;text-decoration:none;
transition:color .35s var(--ease),padding-left .45s var(--ease-out);
}
.sitemap-list a:hover{color:var(--ink);padding-left:clamp(8px,1.4vw,18px);border:0}
.sitemap-list a:hover .sm-title{letter-spacing:.02em}
.sm-title{
font-family:var(--ff-serif);font-weight:400;font-size:clamp(16px,1.7vw,21px);
line-height:1.3;letter-spacing:.005em;
transition:letter-spacing .45s var(--ease-out);
}
.sm-tag{
font-family:var(--ff-sans);font-weight:300;font-size:10.5px;
letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);
text-align:right;white-space:nowrap;
}
.sitemap-section-quiet{opacity:.78}
.sitemap-section-quiet .sm-title{font-family:var(--ff-mono,Menlo,monospace);font-size:13px;letter-spacing:.04em}
@media(max-width:600px){
.sitemap-list a{grid-template-columns:1fr;gap:6px;padding:14px 0}
.sm-tag{text-align:left;white-space:normal}
.sitemap-num{top:clamp(24px,3vw,36px)}
}
/* ============ PRESS LIST (Journal page) ============ */
.press-list{
display:flex;flex-direction:column;gap:clamp(28px,2.4vw,40px);
margin-top:clamp(40px,5vw,72px);
border-top:1px solid var(--line);
/* Centred listing column — keeps the editorial date+content grid intact
but constrains the whole list to a narrower, centred width so individual
entries read as a focused middle column rather than spanning full-page. */
max-width:920px;
margin-left:auto;margin-right:auto;
}
.press-item{
display:grid;
grid-template-columns:clamp(110px,11vw,160px) 1fr;
gap:clamp(24px,2.8vw,48px);
padding:clamp(28px,2.4vw,40px) 0;
border-bottom:1px solid var(--line);
align-items:start;
}
.press-date{
font-family:var(--ff-sans);font-weight:400;
font-size:11px;letter-spacing:.28em;text-transform:uppercase;
color:var(--ink-3);padding-top:4px;white-space:nowrap;
}
.press-body{display:flex;flex-direction:column;gap:14px}
.press-tag{
font-family:var(--ff-sans);font-weight:400;
font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);
}
.press-body h3{
font-family:var(--ff-serif);font-weight:400;
font-size:clamp(22px,2.4vw,32px);line-height:1.18;
margin:0;color:var(--ink);max-width:780px;
}
.press-body p{
font-size:13.5px;line-height:1.75;color:var(--ink-2);margin:0;max-width:780px;
}
.press-facts{
font-size:12px !important;color:var(--ink-3) !important;
border-left:1px solid var(--line-2);padding-left:14px;line-height:1.7;
}
.press-link{
display:inline-flex;align-items:center;gap:12px;
font-size:11px;letter-spacing:.26em;text-transform:uppercase;
color:var(--ink-2);padding-top:8px;width:fit-content;
transition:color .35s var(--ease),letter-spacing .35s var(--ease);
}
.press-link:hover,
.press-item[data-card-link]:hover .press-link{color:var(--ink);letter-spacing:.30em}
.press-link svg{width:18px;height:6px;flex-shrink:0;transition:transform .35s var(--ease)}
.press-link:hover svg,
.press-item[data-card-link]:hover .press-link svg{transform:translateX(4px)}
.press-item[data-card-link]{cursor:pointer}
@media(max-width:720px){
.press-item{grid-template-columns:1fr;gap:12px;padding:24px 0}
.press-date{padding-top:0}
}
/* ============ A DAY IN THE COMMUNITY ============
Interactive 4-persona module on philosophy.html. The wheel image stays static
while a colored radial glow over the matching quadrant lights up for the
active persona. The narrative copy cross-fades between the four .data-persona-text
blocks. Wired up via initDayCommunity() in main.js with click/hover handlers
and an auto-cycle that pauses on the first user interaction. */
.day-community{padding:clamp(80px,9vw,140px) 0;background:#000;position:relative}
.day-community-grid{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(40px,5vw,80px);align-items:center;
margin-top:clamp(40px,5vw,72px);
}
.dc-wheel{
position:relative;aspect-ratio:1/1;max-width:560px;width:100%;margin:0 auto;
/* Slow continuous breathe so the disc never feels static while you switch tabs. */
animation:dc-breathe 18s var(--ease) infinite;
}
@keyframes dc-breathe{
0%,100%{transform:scale(1)}
50%{transform:scale(1.015)}
}
.dc-wheel-img{
width:100%;height:auto;display:block;
filter:drop-shadow(0 24px 60px rgba(0,0,0,.55));
transition:transform .9s var(--ease-out);
}
/* 50% black overlay — mutes the wheel so it reads as an atmospheric backdrop
to the persona tabs rather than competing with the copy for attention. The
pseudo-element on .dc-wheel sits above the img and ignores pointer events. */
.dc-wheel::after{
content:"";position:absolute;inset:0;
background:rgba(0,0,0,.5);
pointer-events:none;
}
/* Per-persona highlight overlays intentionally hidden — the wheel stays static
while persona tabs change. The 50% black overlay above stays as the only
image treatment. Active state is communicated entirely by the tab UI on the
right (border lift, accent bar, text cross-fade) so the artwork itself is
never tinted or glowed. */
.dc-glow{ display:none }
.dc-panel{display:flex;flex-direction:column;gap:clamp(28px,3vw,44px)}
.dc-personas{
display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.dc-persona{
text-align:left;padding:20px 22px;border:1px solid var(--line);background:transparent;
cursor:pointer;color:var(--ink-2);
display:flex;flex-direction:column;gap:6px;
transition:border-color .35s var(--ease),background .35s var(--ease),
color .35s var(--ease),transform .35s var(--ease);
position:relative;overflow:hidden;
}
.dc-persona::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
background:currentColor;transform:scaleY(0);transform-origin:top;
transition:transform .45s var(--ease-out);
}
.dc-persona[data-persona="father"]{ --accent:#5fa3bd }
.dc-persona[data-persona="mother"]{ --accent:#e89bb1 }
.dc-persona[data-persona="youth"] { --accent:#b58fcf }
.dc-persona[data-persona="elders"]{ --accent:#8c8f99 }
.dc-persona:hover{border-color:var(--ink-3);color:var(--ink)}
.dc-persona.is-active{
border-color:var(--ink);background:rgba(255,255,255,.04);color:var(--ink);
transform:translateY(-2px);
}
.dc-persona.is-active::before{ color:var(--accent);transform:scaleY(1) }
.dc-persona-label{
font-family:var(--ff-sans);font-weight:500;font-size:11.5px;letter-spacing:.30em;text-transform:uppercase;
}
.dc-persona-time{
font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
}
.dc-persona.is-active .dc-persona-time{color:var(--ink-2)}
.dc-persona:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.dc-narrative{
position:relative;min-height:clamp(170px,22vh,220px);
}
.dc-narrative p{
font-family:var(--ff-serif);font-style:italic;font-weight:400;
font-size:clamp(15px,1.5vw,19px);line-height:1.7;color:var(--ink-2);margin:0;
animation:dc-fade-in .55s var(--ease-out);
}
.dc-narrative p[hidden]{display:none}
@keyframes dc-fade-in{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:none}
}
/* Mobile: stack wheel above tabs; tabs remain 2x2; narrative widens. */
@media(max-width:900px){
.day-community-grid{grid-template-columns:1fr;gap:36px}
.dc-wheel{max-width:380px}
.dc-personas{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
.dc-persona{padding:14px 16px}
.dc-persona-label{font-size:10.5px;letter-spacing:.26em}
.dc-persona-time{font-size:9px;letter-spacing:.18em}
}
@media(prefers-reduced-motion:reduce){
.dc-wheel{animation:none}
.dc-narrative p{animation:none}
}
/* Full-width cinematic banner used inside .bz-section to break up the editorial
grid with one wide breath. Image bleeds to viewport edges, sits between the
Premise intro and the Power 9 grid. data-banner-parallax engages the existing
scroll-tied parallax (scale 1.20, translate ±50px). */
.bz-banner{
position:relative;display:block;width:100%;
margin:clamp(80px,9vw,140px) 0 !important; /* overrides figure ua default margins */
overflow:hidden;background:#000;
aspect-ratio:3/1;
}
.bz-banner img{
width:100%;height:100%;object-fit:cover;object-position:center;
display:block;
}
.bz-banner figcaption{
position:absolute;left:0;right:0;bottom:0;z-index:2;
padding:clamp(20px,2.4vw,32px) var(--gutter);
font-size:11px;letter-spacing:.28em;text-transform:uppercase;
color:var(--ink-2);
background:linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%);
text-align:center;
}
@media(max-width:768px){
.bz-banner{aspect-ratio:16/10}
}
/* ============ BLUE ZONE & WELLNESS — Philosophy core ============
Section that sits between Inside-Out architecture and Wealth-of-Wellbeing on
philosophy.html. Hosts: the environment premise, the Power 9 grid, the five
Blue Zone regions, the Keturah Blueprint pillars, and a closing manifesto.
Visual language: dark cell grid with 1px hairlines, editorial serif headlines,
numbered tags, subtle hover lift. */
.bz-section{ padding:clamp(96px,11vw,160px) 0; background:#000 }
.bz-section .section-head{ margin-bottom:clamp(40px,5vw,72px) }
.bz-section .section-head h2 em{ font-style:italic;color:var(--ink-3) }
/* Power 9 — 9-cell grid (3×3 desktop, 2×5 tablet, 1×9 mobile) */
.bz-power9{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
margin-top:clamp(40px,5vw,72px);
}
.bz-p9{
background:#000;padding:clamp(28px,3vw,44px) clamp(24px,2.6vw,36px);
display:flex;flex-direction:column;gap:14px;min-height:200px;
position:relative;overflow:hidden;
transition:background .55s var(--ease),transform .55s var(--ease-out);
}
.bz-p9::before{
content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);
transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out);
}
.bz-p9:hover::before{ transform:scaleX(1) }
.bz-p9:hover{ background:#0c0c0c }
.bz-p9-num{
font-family:var(--ff-sans);font-weight:300;font-size:11px;
letter-spacing:.32em;text-transform:uppercase;color:var(--ink-4);
}
.bz-p9 h6{
font-family:var(--ff-serif);font-weight:400;font-size:clamp(22px,2.4vw,30px);
line-height:1.15;color:var(--ink);margin:0;
}
.bz-p9 p{ font-size:13px;line-height:1.7;color:var(--ink-3);margin:0 }
.bz-p9 p em{ font-style:italic;color:var(--ink-2) }
/* Five Blue Zones */
.bz-zones{
display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);
margin-top:clamp(40px,5vw,72px);
}
.bz-zone{
background:#000;padding:clamp(28px,3vw,40px) clamp(20px,2.2vw,30px);
display:flex;flex-direction:column;gap:10px;min-height:200px;
transition:background .55s var(--ease);
}
.bz-zone:hover{ background:#0c0c0c }
.bz-zone h6{
font-family:var(--ff-serif);font-weight:400;font-size:clamp(22px,2.4vw,30px);
color:var(--ink);margin:0;line-height:1.15;
}
.bz-zone-tag{
font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3);
}
.bz-zone p{ font-size:12.5px;line-height:1.65;color:var(--ink-2);margin:0 }
/* Keturah Blueprint — 3 large pillars */
.bz-blueprint{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
margin-top:clamp(40px,5vw,72px);
}
.bz-blue{
background:#000;padding:clamp(36px,4vw,60px) clamp(28px,3vw,44px);
display:flex;flex-direction:column;gap:18px;min-height:340px;
position:relative;overflow:hidden;
transition:background .55s var(--ease),transform .55s var(--ease-out);
}
.bz-blue::before{
content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);
transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out);
}
.bz-blue:hover::before{ transform:scaleX(1) }
.bz-blue:hover{ background:#0c0c0c }
.bz-blue-num{
font-family:var(--ff-sans);font-weight:300;font-size:11px;
letter-spacing:.32em;text-transform:uppercase;color:var(--ink-4);
}
.bz-blue h3{
font-family:var(--ff-serif);font-weight:400;font-size:clamp(26px,2.8vw,38px);
line-height:1.12;color:var(--ink);margin:0;
}
.bz-blue p{ font-size:13.5px;line-height:1.75;color:var(--ink-3);margin:0 }
.bz-blue p em{ font-style:italic;color:var(--ink-2) }
/* ============ The Sixth Blue Zone ============
The dramatic centrepiece — five original Blue Zones presented as equals,
then Dubai (KETURAH) is elevated as the engineered Sixth. Champagne ring,
slow pulse glow, larger type. The card states the brand's central claim
without ever saying "we" or "us". */
.bz-sixth{ padding:clamp(96px,11vw,160px) 0; background:#000; position:relative }
.bz-sixth .section-head{ margin-bottom:clamp(40px,5vw,72px) }
.bz-six-grid{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
gap:1px; background:var(--line);
margin-top:clamp(40px,5vw,72px);
}
.bz-six-card{
background:#000;
padding:clamp(28px,3vw,40px) clamp(20px,2.2vw,30px);
display:flex; flex-direction:column; gap:8px;
min-height:200px;
position:relative; overflow:hidden;
transition:background .55s var(--ease);
}
.bz-six-card:hover{ background:#0c0c0c }
.bz-six-card .num{
font-family:var(--ff-sans); font-weight:300;
font-size:11px; letter-spacing:.32em; text-transform:uppercase;
color:var(--ink-4);
}
.bz-six-card h6{
font-family:var(--ff-serif); font-weight:400;
font-size:clamp(24px,2.6vw,32px);
color:var(--ink); margin:0; line-height:1.12;
}
.bz-six-card i{
font-style:normal;
font-size:10px; letter-spacing:.28em; text-transform:uppercase;
color:var(--ink-3);
}
.bz-six-card p{
font-size:12.5px; line-height:1.65; color:var(--ink-2);
margin:6px 0 0;
}
/* Sixth card — Dubai · By Design — visually elevated */
.bz-six-card--six{
background:#0a0a0a;
box-shadow:
inset 0 0 0 1px rgba(229,210,163,0.32),
0 0 60px rgba(229,210,163,0.08);
isolation:isolate;
}
.bz-six-card--six::before{
content:""; position:absolute; inset:0;
background:
radial-gradient(80% 60% at 50% 0%, rgba(229,210,163,0.10) 0%, transparent 70%),
radial-gradient(60% 40% at 30% 100%, rgba(229,210,163,0.06) 0%, transparent 70%);
pointer-events:none; z-index:0;
animation:bz-six-breathe 4.2s cubic-bezier(.42,0,.2,1) infinite;
}
@keyframes bz-six-breathe{
0%,100%{ opacity:.7 }
50%{ opacity:1 }
}
.bz-six-card--six > *{ position:relative; z-index:1 }
.bz-six-card--six .num{ color:var(--kt-gold-soft,#F0E1B8) }
.bz-six-card--six h6{
color:#fff;
font-size:clamp(28px,3.2vw,40px);
letter-spacing:0.005em;
}
.bz-six-card--six h6::after{
content:""; display:block;
width:24px; height:1px;
background:rgba(229,210,163,0.6);
margin-top:14px;
}
.bz-six-card--six i{ color:rgba(229,210,163,0.85); letter-spacing:.32em }
.bz-six-card--six p{ color:var(--ink-2); font-size:13px; line-height:1.7 }
/* Manifesto strip above the grid — short, gravitational */
.bz-sixth-manifesto{
margin:clamp(28px,3.4vw,40px) 0 0;
font-family:var(--ff-serif); font-style:italic; font-weight:400;
font-size:clamp(18px,2vw,26px); line-height:1.5;
color:var(--ink-2); max-width:780px;
}
.bz-sixth-manifesto em{ font-style:italic; color:rgba(229,210,163,0.85) }
@media (max-width:900px){
.bz-six-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:560px){
.bz-six-grid{ grid-template-columns:1fr }
}
/* Closing manifesto line */
.bz-closing{
margin-top:clamp(80px,9vw,140px);text-align:center;padding:0 var(--gutter);
}
.bz-closing p{
font-family:var(--ff-serif);font-style:italic;font-weight:400;
font-size:clamp(24px,3.4vw,44px);line-height:1.35;color:var(--ink);
max-width:820px;margin:0 auto;
}
.bz-closing p em{ font-style:italic;color:var(--ink-3);display:block }
/* Responsive */
@media(max-width:1024px){
.bz-power9{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.bz-zones{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.bz-blueprint{ grid-template-columns:1fr }
}
@media(max-width:768px){
.bz-power9{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.bz-zones{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:520px){
.bz-power9{ grid-template-columns:1fr }
.bz-zones{ grid-template-columns:1fr }
}
@media(prefers-reduced-motion:reduce){
.bz-p9::before,.bz-blue::before{ transition:none }
}
/* ============ STATEMENT ============ */
.statement{padding:clamp(72px,10vw,140px) 0}
.statement h2{font-family:var(--ff-serif);font-weight:400;font-size:clamp(34px,4.4vw,60px);line-height:1.18;max-width:880px}
.statement h2 span{display:block;opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out)}
.statement.is-visible h2 span:nth-child(1){opacity:1;transform:none;transition-delay:.05s}
.statement.is-visible h2 span:nth-child(2){opacity:1;transform:none;transition-delay:.2s}
.statement.is-visible h2 span:nth-child(3){opacity:1;transform:none;transition-delay:.35s}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:60px}
/* Responsive collapse for the metrics grid, including the 4-col variant which
some pages override via inline style. We use !important on both the 4-col
intermediate (tablet) and the single-column (mobile) breakpoints so the inline
style override on .metrics is forced to follow. The mobile selector is
intentionally as specific as the tablet selector ([style*="repeat(4"]) so
it wins the cascade at narrow widths. */
@media(max-width:1024px){
.metrics,
.metrics[style*="repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:600px){
.metrics,
.metrics[style*="repeat(4"]{grid-template-columns:1fr !important}
}
.metric h6{font-family:var(--ff-sans);font-weight:400;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2);margin:0 0 14px}
.metric p{font-size:13px;color:var(--ink-3);line-height:1.7;max-width:280px}
/* ============ EDITORIAL — Italian Masterpieces (Keturah Stones banner) ============ */
.editorial{
position:relative;display:block;overflow:hidden;background:#0a0a0a;
max-width:var(--container-wide);margin:clamp(40px,5vw,80px) auto;
padding:0;
}
.editorial .editorial-bg{position:absolute;inset:0;z-index:1;overflow:hidden}
.editorial .editorial-bg img,
.editorial .editorial-bg video{
width:100%;height:100%;object-fit:cover;
filter:grayscale(.85) brightness(.55) contrast(1.05);
transform:scale(1.04);transition:transform 1.8s var(--ease-out);
}
.editorial:hover .editorial-bg img,
.editorial:hover .editorial-bg video{transform:scale(1.08)}
.editorial .editorial-scrim{
position:absolute;inset:0;z-index:2;
background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.30) 40%,rgba(0,0,0,.30) 60%,rgba(0,0,0,.55) 100%);
}
.editorial .editorial-row{
position:relative;z-index:3;
display:grid;grid-template-columns:auto 1fr auto;gap:clamp(28px,3.6vw,72px);align-items:center;
padding:clamp(56px,7vw,112px) clamp(32px,5vw,88px);
min-height:clamp(220px,28vh,320px);
}
.editorial .editorial-mark img{
height:clamp(28px,3vw,42px);width:auto;filter:brightness(0) invert(1);
}
.editorial .editorial-text{text-align:center}
.editorial .editorial-text h3{
font-family:var(--ff-serif);font-weight:400;
font-size:clamp(28px,3.8vw,54px);line-height:1.1;color:#fff;
}
.editorial .editorial-text .sub{
font-size:11px;letter-spacing:.18em;color:var(--ink-2);
margin-top:10px;text-transform:none;
}
.editorial .editorial-cta{display:flex;justify-content:flex-end}
@media(max-width:900px){
.editorial .editorial-row{
grid-template-columns:1fr;gap:24px;text-align:center;
padding:48px var(--gutter);
}
.editorial .editorial-mark{display:flex;justify-content:center}
.editorial .editorial-cta{justify-content:center}
}
/* ============ JOURNAL (header left-aligned, no right intro) ============ */
.journal-head{
display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:36px;
padding:0 var(--gutter-wide);max-width:var(--container-wide);margin-left:auto;margin-right:auto;
}
.journal-head h2{font-family:var(--ff-serif);font-weight:400;font-size:clamp(34px,4vw,52px);line-height:1.05}
.journal-head .sub{font-size:10px;letter-spacing:.30em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.journal-head .btn-text{margin-top:18px}
/* Journal carousel uses the generic .is-carousel system */
.journal-carousel.is-carousel{
padding:0 var(--gutter-wide) clamp(40px,5vw,72px);
max-width:var(--container-wide);margin:0 auto;
}
.j-card{display:block}
.j-card .media{aspect-ratio:4/5;overflow:hidden;background:#1a1a1a}
.j-card .media img{
width:100%;height:100%;object-fit:cover;
filter:grayscale(1);
transition:transform 1.4s var(--ease-out), filter .7s var(--ease);
}
.j-card:hover .media img{transform:scale(1.04);filter:grayscale(.4)}
.j-card .meta{padding:14px 2px 0}
.j-card .date{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4)}
.j-card h4{font-family:var(--ff-serif);font-weight:400;font-style:italic;font-size:clamp(14px,1.1vw,17px);margin-top:8px;line-height:1.35}
.j-card p{font-size:11px;color:var(--ink-3);line-height:1.65;margin-top:8px}
/* ============ FOOTER ============ */
.site-footer{background:#000;padding:0;border-top:1px solid var(--line);margin-top:80px}
.footer-pager{display:flex;justify-content:center;align-items:center;gap:18px;padding:24px var(--gutter)}
.footer-pager .dots{display:flex;gap:10px;margin:0 auto}
.footer-pager .dot{width:16px;height:1px;background:var(--line-2)}
.footer-pager .dot.active{background:var(--ink)}
.footer-top{
display:grid;grid-template-columns:1.6fr auto 1fr;gap:64px;align-items:start;
padding:60px var(--gutter) 80px;max-width:var(--container);margin:0 auto;
}
.footer-divider{align-self:stretch;width:1px;background:var(--line)}
@media(max-width:900px){
.footer-top{grid-template-columns:1fr;gap:40px;padding:40px var(--gutter) 56px}
.footer-divider{display:none}
}
/* On the contact page the "Begin Your Journey" form and "Access Your
e-Services" panel are redundant with the page's own enquiry form, so
hide the entire footer-top block (form + divider + e-Services). The
sitemap, social links, copyright and legal links in footer-bottom
stay intact. */
body[data-page="connect"] .footer-top,
body[data-page="connect"] .footer-divider{ display:none; }
.footer-block .eyebrow{margin-bottom:18px;display:block}
.footer-block h3{font-family:var(--ff-serif);font-weight:400;font-size:clamp(34px,4vw,52px);line-height:1.05;margin-bottom:16px}
.footer-block .lead{color:var(--ink-3);font-size:13px;line-height:1.8;max-width:420px;margin-bottom:36px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 36px;max-width:640px}
@media(max-width:600px){.form-grid{grid-template-columns:1fr;gap:22px}}
/* Connect page — form sits below the two-col intro and mirrors its geometry:
same 760px centred block, same column gap, so the form's two columns align
exactly under the intro text and the contact-info column above. */
.form-grid.is-full{
max-width:760px;margin-left:auto;margin-right:auto;
gap:24px clamp(40px,4vw,60px);
margin-top:clamp(44px,6vw,72px);
}
@media(max-width:900px){.form-grid.is-full{max-width:560px}}
.field{position:relative}
.field label{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:10px}
.field input,.field textarea{width:100%;border-bottom:1px solid rgba(255,255,255,.42);padding:6px 0 12px;font-family:var(--ff-sans);font-weight:300;font-size:13px;color:var(--ink);transition:border-color .4s var(--ease)}
.field input:focus,.field textarea:focus{border-bottom-color:var(--ink)}
/* Defeat browser autofill (Chrome/Safari) — keep transparent bg + white text */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:active{
-webkit-text-fill-color:var(--ink) !important;
caret-color:var(--ink);
transition:background-color 9999s ease-in-out 0s,color 9999s ease-in-out 0s;
}
/* Mobile field: label on top, country selector + input side-by-side under one row */
.field-mobile .mobile-cells{
display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:end;
}
.field-mobile .country{
appearance:none;-webkit-appearance:none;-moz-appearance:none;
background:transparent;color:var(--ink);
font-family:var(--ff-sans);font-weight:300;font-size:13px;line-height:1.4;
border:0;border-bottom:1px solid rgba(255,255,255,.42);
padding:6px 16px 12px 0;cursor:pointer;
width:auto;
white-space:nowrap;overflow:hidden;text-overflow:clip;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 2px bottom 14px;background-size:8px 5px;
transition:border-color .4s var(--ease);
}
.field-mobile .country:focus{border-bottom-color:var(--ink);outline:0}
.field-mobile .country option{color:#000;background:#fff;font-weight:400}
.field-mobile .country option[disabled]{color:#888}
.field-mobile input{width:100%}
.consent{grid-column:1/-1;display:flex;align-items:flex-start;gap:14px;font-size:11.5px;color:var(--ink-3);line-height:1.6;margin-top:6px}
.consent input[type=checkbox]{appearance:none;-webkit-appearance:none;width:13px;height:13px;border:1px solid var(--ink-3);background:transparent;flex:0 0 13px;margin-top:3px;position:relative;cursor:pointer}
.consent input[type=checkbox]:checked::after{content:"";position:absolute;left:3px;top:0;width:4px;height:8px;border:solid var(--ink);border-width:0 1px 1px 0;transform:rotate(45deg)}
.form-submit{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:18px;flex-wrap:wrap}
.form-success{color:var(--ink);font-size:11px;letter-spacing:.20em;text-transform:uppercase;display:none}
.form-success.show{display:inline-flex}
.app-links{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.app-links a img{height:40px;width:auto}
.footer-sitemap{
display:grid;
grid-template-columns:1.3fr repeat(4,minmax(0,1fr)) 1.2fr;
gap:40px;align-items:start;
padding:60px var(--gutter) 36px;
max-width:var(--container);margin:0 auto;
border-top:1px solid var(--line);
}
@media(max-width:1100px){
.footer-sitemap{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.footer-sitemap > .brand-col{grid-column:1/-1;margin-bottom:8px}
.footer-sitemap > .col-stay{grid-column:1/-1}
}
@media(max-width:680px){
.footer-sitemap{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.footer-sitemap > .brand-col,
.footer-sitemap > .col-stay{grid-column:1/-1}
}
@media(max-width:460px){
.footer-sitemap{grid-template-columns:1fr;gap:24px}
}
.footer-sitemap .brand-col img{height:18px;filter:brightness(0) invert(1)}
.footer-sitemap .brand-col .tagline{font-size:7px;line-height:1.9;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3);margin-top:36px}
.footer-sitemap h6{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2);margin:0 0 18px;font-weight:400;font-family:var(--ff-sans)}
.footer-sitemap a{display:block;font-size:12.5px;color:var(--ink-3);padding:5px 0;line-height:1.6}
.footer-sitemap a:hover{color:var(--ink)}
/* Subscribe — vertical stack (input above, button below) so it never overflows narrow cols */
.footer-sitemap .col-stay{min-width:0}
.footer-sitemap .subscribe{
display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:4px;
}
.footer-sitemap .subscribe input{
width:100%;border:0;border-bottom:1px solid var(--line);
font-family:var(--ff-sans);font-size:13px;color:var(--ink);
padding:6px 0 10px;
}
.footer-sitemap .subscribe input::placeholder{color:rgba(255,255,255,.42)}
.footer-sitemap .subscribe input:focus{border-bottom-color:var(--ink);outline:0}
.footer-sitemap .subscribe button{
align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
font-family:var(--ff-sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
color:var(--ink-2);padding:6px 0;position:relative;cursor:pointer;
transition:color .35s var(--ease),letter-spacing .35s var(--ease);
}
.footer-sitemap .subscribe button::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);
}
.footer-sitemap .subscribe button:hover{color:var(--ink);letter-spacing:.30em}
.footer-sitemap .subscribe button:hover::after{background:var(--ink)}
.footer-sitemap .subscribe button svg{width:16px;height:6px}
.footer-sitemap .stay-note{margin-top:14px;font-size:10.5px;color:var(--ink-4);line-height:1.65}
.footer-bottom{
display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;
padding:24px var(--gutter);max-width:var(--container);margin:0 auto;border-top:1px solid var(--line);
}
.footer-bottom .footer-legal{justify-self:center;justify-content:center}
@media(max-width:900px){
.footer-bottom{grid-template-columns:1fr;gap:18px;text-align:center}
.footer-bottom .footer-legal{justify-self:start;justify-content:flex-start}
.footer-bottom .footer-social{justify-self:start}
}
.footer-bottom .copy{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.footer-legal{display:flex;flex-wrap:wrap;gap:18px}
.footer-legal a{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.footer-legal a:hover{color:var(--ink)}
.footer-social{display:flex;gap:16px}
.footer-social a img{height:16px;width:16px;filter:brightness(0) invert(1);opacity:.7}
.footer-social a:hover img{opacity:1}
/* ============ MODAL ============ */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.modal.is-open{opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility 0s 0s}
.modal-card{position:relative;width:100%;max-width:620px;background:#0a0a0a;border:1px solid var(--line);padding:clamp(28px,4vw,48px);transform:translateY(20px);opacity:0;transition:transform .65s var(--ease-out) .1s,opacity .65s var(--ease-out) .1s;max-height:92vh;overflow:auto}
.modal.is-open .modal-card{transform:none;opacity:1}
.modal-close{position:absolute;top:18px;right:18px;width:28px;height:28px;cursor:pointer}
.modal-close::before,.modal-close::after{content:"";position:absolute;left:4px;right:4px;height:1px;background:var(--ink)}
.modal-close::before{transform:rotate(45deg)}
.modal-close::after{transform:rotate(-45deg)}
.modal h3{font-family:var(--ff-serif);font-weight:400;font-size:clamp(24px,2.6vw,32px);margin-bottom:8px}
.modal .modal-sub{color:var(--ink-3);margin-bottom:28px;font-size:13px;line-height:1.7}
/* ============ REVEALS / TRANSITIONS ============ */
[data-reveal]{opacity:0;transform:translateY(36px);transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out)}
[data-reveal].is-visible{opacity:1;transform:none}
[data-reveal-stagger] > *{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
[data-reveal-stagger].is-visible > *{opacity:1;transform:none}
[data-reveal-stagger].is-visible > *:nth-child(1){transition-delay:.05s}
[data-reveal-stagger].is-visible > *:nth-child(2){transition-delay:.15s}
[data-reveal-stagger].is-visible > *:nth-child(3){transition-delay:.25s}
[data-reveal-stagger].is-visible > *:nth-child(4){transition-delay:.35s}
.page-fade{position:fixed;inset:0;z-index:200;background:#000;pointer-events:none;opacity:1;transition:opacity 1s var(--ease)}
body.loaded .page-fade{opacity:0}
/* ============ PAGE LOADER (black bg, white logo wiping L→R, % at bottom) ============ */
.page-loader{
position:fixed;inset:0;z-index:9999;background:#000;
display:flex;align-items:center;justify-content:center;
transition:transform 1.2s var(--ease-out), opacity .55s var(--ease) .7s, visibility 0s 1.25s;
will-change:transform;
}
.page-loader.is-out{transform:translateY(-100%);opacity:0;visibility:hidden}
.loader-mark{position:relative;width:clamp(180px,21.6vw,288px);height:auto;line-height:0}
.loader-mark img{display:block;width:100%;height:auto;filter:brightness(0) invert(1)}
.loader-mark .base{opacity:.18}
.loader-mark .fill{
position:absolute;inset:0;
clip-path:inset(0 calc(100% - var(--p,0%)) 0 0);
-webkit-clip-path:inset(0 calc(100% - var(--p,0%)) 0 0);
transition:clip-path .35s var(--ease);
}
.loader-percent{
position:absolute;left:50%;bottom:clamp(22px,3.2vw,34px);transform:translateX(-50%);
font-family:var(--ff-sans);font-weight:400;
font-size:10px;letter-spacing:.42em;color:rgba(255,255,255,.55);
display:inline-flex;align-items:baseline;gap:2px;
}
.loader-percent::after{content:"%"}
/* Thin status bar pinned to the bottom edge — fills L→R as `p` advances */
.loader-bar{
position:absolute;left:0;right:0;bottom:0;height:2px;
background:rgba(255,255,255,.08);
overflow:hidden;
}
.loader-bar::after{
content:"";display:block;height:100%;
background:linear-gradient(90deg,#E5D2A3 0%,#fff 100%);
transform:translateX(-100%) translateX(var(--p,0%));
transition:transform .35s var(--ease);
will-change:transform;
}
.loader-hint{
position:absolute;left:50%;top:calc(50% + clamp(110px,14vw,170px));transform:translateX(-50%);
font-family:var(--ff-sans);font-size:10px;letter-spacing:.32em;text-transform:uppercase;
color:rgba(255,255,255,.42);
opacity:0;transition:opacity .8s var(--ease);
}
.page-loader.is-ready .loader-hint{opacity:1;animation:loaderPulse 2.2s ease-in-out infinite}
@keyframes loaderPulse{0%,100%{opacity:.42}50%{opacity:.75}}
/* Scroll lock while loader is visible */
html.loading,
html.loading body{
overflow:hidden!important;height:100%;
touch-action:none;overscroll-behavior:none;
}
/* ============ INNER PAGE BLOCKS ============
.two-col is capped at ~50% of page width by default so info-heavy text
rows (Why Dubai, Meydan, Amenities, etc.) read comfortably with a
reasonable measure per line. Sections that need full width (e.g. the
Welcome row with a download-brochure CTA on the right) can opt out via
.two-col.is-wide. */
.two-col{
display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,4vw,60px);align-items:start;
max-width:760px;margin-left:auto;margin-right:auto;
}
.two-col.is-wide{max-width:none}
@media(max-width:900px){.two-col{grid-template-columns:1fr;gap:32px;max-width:560px}}
.two-col .col-eyebrow{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.two-col h2{font-family:var(--ff-serif);font-weight:400;font-size:clamp(28px,3.4vw,46px);line-height:1.15;margin-bottom:20px}
.two-col p{color:var(--ink-2);font-size:14px;line-height:1.8;margin-bottom:16px}
.media-block{position:relative;overflow:hidden;background:#000}
.media-block .media{aspect-ratio:16/9;width:100%}
.media-block .media img,.media-block .media video{width:100%;height:100%;object-fit:cover}
/* Page-breaker images — every full-width section-break image is unified to
PAGE_BREAKER_HEIGHT below. The number is the SHORTEST page-breaker in the
audit (ardh-05.webp at 1394px wide -> 513px tall), per the brief: take the
lowest height and apply to all. object-fit:cover lets each image crop into
that aperture without distortion, and the JS parallax (strength 100, scale
1.50) has plenty of room to translate ±100px without exposing edges.
Contained at the wider feature-row / carousel column so they align
horizontally with the homepage banners and carousels. */
.media-block.is-tall{
max-width:var(--container-wide);
margin-left:auto;margin-right:auto;
padding-left:var(--gutter-wide);padding-right:var(--gutter-wide);
}
.media-block.is-tall .media{
aspect-ratio:auto;
height:clamp(380px, 36vw, 513px); /* shortest-page-breaker baseline */
line-height:0;
overflow:hidden;
background:#000;
}
.media-block.is-tall .media img,
.media-block.is-tall .media video{
width:100%;height:100%;
display:block;
object-fit:cover;
}
@media(max-width:900px){
.media-block.is-tall .media{height:clamp(280px, 56vw, 400px)}
}
.media-block .caption{position:absolute;left:0;right:0;bottom:0;padding:24px var(--gutter);z-index:2;background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 100%);color:var(--ink-2);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gallery.gallery-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.gallery,.gallery.gallery-2{grid-template-columns:1fr}}
.gallery .tile{aspect-ratio:4/5;overflow:hidden;background:#0a0a0a;position:relative}
.gallery .tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.gallery .tile:hover img{transform:scale(1.04)}
.gallery .tile .lbl{position:absolute;left:18px;bottom:16px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#fff}
/* ============ NEXT PROJECT ============ */
.next-project{display:block;position:relative;overflow:hidden;text-align:center;background:#0a0a0a}
.next-project .np-inner{padding:clamp(72px,10vw,120px) var(--gutter);position:relative;z-index:2}
.next-project .np-bg{position:absolute;inset:0;z-index:1;opacity:.32}
.next-project .np-bg img{width:100%;height:100%;object-fit:cover}
.next-project .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.85))}
.next-project .eyebrow{display:block;margin-bottom:14px}
.next-project h3{font-family:var(--ff-serif);font-weight:400;font-size:clamp(36px,5vw,68px);line-height:1.05}
/* ============ Reduced motion ============ */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important}
[data-reveal],[data-reveal-stagger] > *{opacity:1!important;transform:none!important}
.project-hero img,.project-hero video{transform:none!important}
}
@media(max-width:720px){
:root{--header-h:60px}
/* Mobile: keep the homepage hero immersive but shrink the inner-page floor so
a portrait phone (~700–900px tall) still respects the 75vh ceiling. */
.hero{min-height:560px}
.project-hero{height:clamp(475px,75vh,700px)}
}
/* ============================================================================
ARABIC / RTL LAYER
----------------------------------------------------------------------------
Activated by . Uses logical-property overrides so
physical-direction rules elsewhere in this file flip cleanly. The Arabic
wordmark (keturah-ar.svg) is wider than the Latin mark, so the header brand
sizing adapts. Carousel arrows, scroll cues, and back/forward chevrons get
mirrored via transform: scaleX(-1).
============================================================================ */
html[dir="rtl"]{ direction:rtl; text-align:right }
html[dir="rtl"] body{ font-family: "Noto Naskh Arabic", "Cormorant Garamond", "Montserrat", serif }
/* Arabic typography — keep the editorial serif feel but use a font stack that
supports Arabic glyphs cleanly. We fall back gracefully if the Noto Naskh
Arabic web font isn't loaded. */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .h-hero,
html[dir="rtl"] .ab-h-display,
html[dir="rtl"] .statement h2{
font-family:"Noto Naskh Arabic", "Cormorant Garamond", serif;
font-style:normal;letter-spacing:0;
}
html[dir="rtl"] em,html[dir="rtl"] i{ font-style:normal }
html[dir="rtl"] body,
html[dir="rtl"] p,
html[dir="rtl"] .body,
html[dir="rtl"] .ph-sub,
html[dir="rtl"] .sub{
font-family:"Noto Naskh Arabic","Montserrat",sans-serif;
letter-spacing:0;
line-height:1.85;
}
/* Header: in RTL the hamburger goes on the right, the lang on the left, the
centered brand uses a slightly wider Arabic wordmark. */
html[dir="rtl"] .site-header{ flex-direction:row-reverse }
html[dir="rtl"] .site-header .brand img{ height:18px } /* AR wordmark is wider */
/* Mirror the hamburger anchor so the X expands from the right edge of the page */
html[dir="rtl"] .hamburger span{ transform-origin:50% 50% }
/* Arrows & directional glyphs — flip horizontally so they point inwards
semantically. Includes back-link chevron, sub-bar back arrow, explore-arrow
svg in cards, next-project chevron. Carousel arrows are handled separately
below so prev/next stay distinguishable. */
html[dir="rtl"] .subbar .back svg,
html[dir="rtl"] .btn-pill svg,
html[dir="rtl"] .explore svg,
html[dir="rtl"] .next-project svg,
html[dir="rtl"] .sitemap-list a::after{
transform:scaleX(-1);
}
/* Carousel arrows — in RTL the prev arrow should point RIGHT (back =
right in RTL) and the next arrow should point LEFT (forward = left).
The base CSS rotates prev 180deg from a right-pointing source. In RTL
we want the opposite: prev stays as the right-pointing source and
next gets the 180deg rotation. Hover translateX direction also flips
so the icon nudges in the direction it points. */
html[dir="rtl"] .cards-pager .ctrl.prev img{ transform:none }
html[dir="rtl"] .cards-pager .ctrl.next img{ transform:rotate(180deg) }
html[dir="rtl"] .cards-pager .ctrl.prev:hover img{ transform:translateX(-2px) }
html[dir="rtl"] .cards-pager .ctrl.next:hover img{ transform:rotate(180deg) translateX(2px) }
/* Eyebrow / caption labels — keep flush start (which is now right in RTL) */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .col-eyebrow,
html[dir="rtl"] .meta,
html[dir="rtl"] .tagline,
html[dir="rtl"] .coords,
html[dir="rtl"] .caption{ letter-spacing:0 }
/* Subbar back link — keep arrow before label in reading order: in RTL the
arrow is on the right, label on the left, which still reads "back" naturally. */
html[dir="rtl"] .subbar .back{ flex-direction:row-reverse }
/* Two-col / metric grids stay as grids — Grid auto-flow in RTL still works,
but flex rows that used explicit row direction need reversing. */
html[dir="rtl"] .footer-social,
html[dir="rtl"] .menu-social,
html[dir="rtl"] .lang,
html[dir="rtl"] .hero .below-title{ flex-direction:row-reverse }
/* Day-Community persona tabs — accent bar is on the left in LTR; mirror to right in RTL */
html[dir="rtl"] .dc-persona::before{ left:auto;right:0 }
/* Sitemap link rows — title is on the left in LTR. In RTL it should be on the
right, and the tag should sit on the left side. */
html[dir="rtl"] .sitemap-list a{ grid-template-columns:auto minmax(0,1fr) }
html[dir="rtl"] .sm-tag{ text-align:left }
/* Press list items — they use grid-template-columns:auto 1fr; flip the gap */
html[dir="rtl"] .press-item .press-date{ text-align:right }
/* Subbar layout: in LTR sublogo is on the left, back on the right. Flip them. */
html[dir="rtl"] .subbar .subbar-top{ flex-direction:row-reverse }
html[dir="rtl"] .subbar .subbar-flag-row{ justify-content:flex-start }
html[dir="rtl"] .subbar .sublogo{ align-items:flex-end }
/* Feature-row is-reverse — keep the existing column placement; the text content
itself reads right-to-left naturally because of dir="rtl". */
/* Pillars accent bar — flip from left to right */
html[dir="rtl"] .ab-pillar::before{ left:auto;right:0 }
/* Cookie-consent / footer-legal — keep horizontal flow; just reverse for RTL */
html[dir="rtl"] .footer-legal{ flex-direction:row-reverse }
html[dir="rtl"] .footer-sitemap{ direction:rtl }
/* Inputs and form fields — labels and arrows */
html[dir="rtl"] .form-field .field-arrow{ transform:scaleX(-1);left:auto;right:auto }
html[dir="rtl"] input,html[dir="rtl"] textarea,html[dir="rtl"] select{ text-align:right }
/* ============ FAQ — native / accordion ============
Single column inside a mid-sized container (max 760px), smaller fonts,
smooth caret rotation on open. Works without JS via the element. */
.faq{padding:clamp(60px,8vw,120px) 0;background:#000}
.faq-wrap{max-width:760px;margin:0 auto;padding:0 var(--gutter)}
.faq .section-head{margin-bottom:clamp(28px,3vw,44px);text-align:left}
.faq-category{margin:clamp(36px,4.5vw,60px) 0 clamp(12px,1.4vw,18px)}
.faq-category:first-child{margin-top:0}
.faq-cat-title{font-family:var(--ff-serif);font-weight:400;font-size:clamp(18px,1.9vw,24px);line-height:1.2;color:var(--ink);margin:0;letter-spacing:.005em}
.faq-list + .faq-category{margin-top:clamp(40px,5vw,68px);padding-top:clamp(18px,2vw,28px);border-top:1px solid var(--line)}
.faq h2{font-family:var(--ff-serif);font-weight:400;font-size:clamp(22px,2.4vw,32px);line-height:1.18;color:var(--ink);margin:0}
.faq .sub{color:var(--ink-3);font-size:11.5px;line-height:1.75;max-width:520px;margin-top:10px}
.faq-list{display:flex;flex-direction:column}
.faq-item{
border-top:1px solid var(--line);
padding:0;
}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{
display:flex;align-items:center;justify-content:space-between;
padding:18px 0;
list-style:none;cursor:pointer;
font-family:var(--ff-serif);font-weight:400;
font-size:clamp(14px,1.3vw,17px);line-height:1.45;
color:var(--ink);
transition:color .25s var(--ease);
}
.faq-item summary::-webkit-details-marker,
.faq-item summary::marker{display:none;content:""}
.faq-item summary:hover{color:var(--ink-2)}
.faq-q{flex:1;padding-right:20px}
html[dir="rtl"] .faq-q{padding-right:0;padding-left:20px}
.faq-icon{
flex-shrink:0;width:11px;height:11px;position:relative;
transition:transform .35s var(--ease);
}
.faq-icon::before,.faq-icon::after{
content:"";position:absolute;background:var(--ink-2);
transition:background .25s var(--ease),transform .35s var(--ease);
}
.faq-icon::before{top:50%;left:0;right:0;height:1px;margin-top:-.5px}
.faq-icon::after{left:50%;top:0;bottom:0;width:1px;margin-left:-.5px}
details[open] .faq-icon::after{transform:rotate(90deg)}
details[open] summary{color:var(--ink)}
details[open] .faq-icon::before,details[open] .faq-icon::after{background:var(--ink)}
.faq-a{padding:0 0 22px;max-width:640px}
.faq-a p{color:var(--ink-3);font-size:12.5px;line-height:1.85;margin:0}
@media(max-width:600px){
.faq-item summary{padding:16px 0;font-size:13.5px}
.faq-a p{font-size:12px}
}
/* ============ Awards & Recognitions auto-scrolling strip (about.html) ============ */
.aw-section{ padding:clamp(72px,9vw,120px) 0 clamp(80px,10vw,140px); background:#000; overflow:hidden }
.aw-section .section-head{ margin-bottom:clamp(40px,5vw,72px); text-align:center }
.aw-section .section-head h2{ margin-left:auto; margin-right:auto }
.aw-strip{
width:100%;
overflow:hidden;
position:relative;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.aw-track{
display:flex;
align-items:center;
gap:clamp(40px,4vw,64px);
width:max-content;
animation:aw-scroll 100s linear infinite;
}
.aw-track:hover{ animation-play-state:paused }
.aw-item{
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
width:clamp(220px,20vw,280px);
height:clamp(110px,10vw,150px);
opacity:0.82;
transition:opacity .55s var(--ease);
text-decoration:none;
}
.aw-item:hover{ opacity:1 }
.aw-item img{
width:100%; height:100%; object-fit:contain;
}
@keyframes aw-scroll{
from{ transform:translateX(0) }
to { transform:translateX(-50%) }
}
@media (prefers-reduced-motion: reduce){
.aw-track{ animation:none }
}
html[dir="rtl"] .aw-track{ animation-name:aw-scroll-rtl }
@keyframes aw-scroll-rtl{
from{ transform:translateX(-50%) }
to { transform:translateX(0) }
}
/* ============ HEADER REGISTER ICON ============ */
/* Replaces the text "Register" with a minimalist pencil-in-square icon.
Keeps the same hit-target as the original link; only the visual changes. */
.lang.lang-icon a{
display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:50%;
padding:0;
transition:background .25s var(--ease),opacity .25s var(--ease);
}
.lang.lang-icon a:hover{
background:rgba(255,255,255,.06);
}
.lang.lang-icon img{
width:18px;height:18px;display:block;
filter:brightness(0) invert(1); /* white on dark header */
opacity:.85;
transition:opacity .25s var(--ease);
}
.lang.lang-icon a:hover img{opacity:1}
/* When the header is scrolled (light/frosted state), icon flips to dark */
.site-header.is-scrolled .lang.lang-icon img{
filter:none;opacity:.7;
}
.site-header.is-scrolled .lang.lang-icon a:hover img{opacity:1}
/* Mobile — slightly smaller hit area */
@media(max-width:640px){
.lang.lang-icon a{width:34px;height:34px}
.lang.lang-icon img{width:16px;height:16px}
}
/* ============ CAROUSEL PAGER — MOBILE ALIGNMENT FIX ============ */
/* On wide screens, .ctrls is absolutely positioned to the right while .dots
stays centered. On mobile this overlaps. Below 720px:
• dots left-align with the page gutter
• ctrls stay absolutely positioned at the right with proper vertical centre
• both share the same baseline (dots vertically centered on the row) */
@media(max-width:720px){
.cards-pager{
justify-content:flex-start;
padding:20px var(--gutter) 40px;
}
.cards-pager .dots{
margin:0; /* override default auto-centering */
}
.cards-pager .ctrls{
position:absolute;
inset-inline-end:var(--gutter);
top:50%;
transform:translateY(-50%);
gap:10px;
}
.cards-pager .ctrl{
width:38px;height:38px;
}
.cards-pager .ctrl img{ width:12px }
}
/* Very narrow phones — slightly smaller buttons */
@media(max-width:380px){
.cards-pager .ctrl{ width:34px;height:34px }
.cards-pager .dot{ width:14px }
.cards-pager .dot.active{ width:22px }
}
/* ============ FOOTER — MOBILE REORDER ============ */
/* On mobile, surface the socials directly under the Stay-Connected subscribe
form (inside the stay-block) and let copyright sit alone at the very bottom.
We use flex order so existing markup doesn't need restructuring. */
@media(max-width:900px){
/* Footer-bottom becomes a flex column so we can re-order rows */
.footer-bottom{
display:flex;flex-direction:column;align-items:center;
gap:20px;
text-align:center;
}
.footer-bottom .footer-social{
order:-1; /* socials FIRST inside footer-bottom */
justify-content:center;
margin-top:-8px; /* tighten gap to the form above */
}
.footer-bottom .footer-legal{
order:1;
justify-content:center;flex-wrap:wrap;gap:14px;
}
.footer-bottom .copy{
order:2; /* copyright last */
padding-top:12px;
border-top:0.5px solid var(--line);
width:100%;
}
}
/* ============ BIO-LIVING METRIC ICONS ============ */
/* Minimalist single-stroke line-art above each .metric h6 label.
Strokes baked at champagne #E5D2A3 to match the Power 9 numerals,
sized small + breathing room above the label.
When an icon is present, the entire card is centered. */
.metric:has(.m-icon){
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}
.metric:has(.m-icon) h6{
text-align:center;
}
.metric:has(.m-icon) p{
max-width:100%;
text-align:center;
}
.metric .m-icon{
display:block;
width:clamp(26px,2.4vw,34px);height:clamp(26px,2.4vw,34px);
margin:0 auto clamp(14px,1.6vw,20px);
opacity:0.9;
transition:opacity .25s var(--ease);
}
.metric:hover .m-icon{ opacity:1 }
.metric .m-icon img{
width:100%;height:100%;display:block;
}
/* Fallback for browsers without :has() — Bio-Living grids carry the
icon class on every card, so we can target the grid container too. */
.bio-grid-iconed .metric{
display:flex;flex-direction:column;align-items:center;text-align:center;
}
.bio-grid-iconed .metric h6,
.bio-grid-iconed .metric p{ text-align:center;max-width:100% }
/* ============ CORE VALUES (about.html) ============ */
.values-grid{ margin-top:clamp(60px,7vw,100px) }
.metric .m-icon.m-icon--lg{
width:clamp(48px,5.5vw,72px);
height:clamp(48px,5.5vw,72px);
margin:0 auto clamp(28px,3vw,40px);
opacity:0.75;
}
.values-grid .metric:hover .m-icon{ opacity:1 }
/* When the icon is itself black-fill (not stroke), don't tint */
.values-grid .metric .m-icon img{
filter:none;
}
.values-grid .metric h6{
font-size:clamp(11px,1vw,13px);
letter-spacing:.36em;
margin-bottom:clamp(20px,2vw,28px);
}
.values-grid .metric p{
max-width:280px;
}
/* ============ THE PROGRAM (Bio-Living · Sanctuary Reinvented) ============ */
/* 6-column illustration cards with transparent botanical artwork.
Falls back to 3-col at tablet, 2-col at mobile-large, 1-col at phone. */
.program-grid{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:clamp(28px,3vw,48px);
margin-top:clamp(60px,7vw,100px);
}
.program-card{
display:flex;flex-direction:column;align-items:center;text-align:center;
}
.program-illust{
width:100%;
aspect-ratio:1/2; /* tall vertical proportion, like the reference */
max-width:100px;
display:flex;align-items:flex-end;justify-content:center;
margin-bottom:clamp(24px,2.5vw,36px);
}
.program-illust img{
width:100%;height:100%;
object-fit:contain;
object-position:center bottom;
display:block;
}
.program-card h6{
font-family:var(--ff-sans);font-weight:400;
font-size:clamp(11px,1vw,13px);
letter-spacing:.36em;text-transform:uppercase;
color:var(--ink);
margin:0 0 clamp(14px,1.4vw,20px);
}
.program-card p{
font-family:var(--ff-sans);
font-size:clamp(12px,1vw,13px);
line-height:1.7;
color:var(--ink-3);
max-width:200px;margin:0;
}
@media(max-width:1100px){
.program-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
.program-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.program-illust{aspect-ratio:1/1.6;max-width:80px}
}
@media(max-width:380px){
.program-grid{grid-template-columns:1fr}
}
/* ============ LAUNCHING SOON — non-clickable teaser cards ============ */
/* Cards whose destination pages are not yet live. Text/layout identical to
active cards; all interaction disabled; the Explore CTA is replaced by a
static "Launching Soon" label in the same typographic style (no arrow). */
.card.is-launching-soon{
cursor:default;
pointer-events:none;
background:#000;
border:1px solid rgba(255,255,255,0.5);
container-type:inline-size; /* lets the watermark size in cqw of the card */
}
.card.is-launching-soon .bg{
background:#000;
}
.card.is-launching-soon:hover{
transform:none;
}
/* Static label — inherits the .explore look, champagne tint, no interaction */
.three-cards .card.is-launching-soon .bottom .explore.is-static{
cursor:default;
color:#E5D2A3;
opacity:.92;
}
.three-cards .card.is-launching-soon .bottom .explore.is-static:hover{
color:#E5D2A3;
letter-spacing:.30em; /* no hover shift */
}
/* ── 3-card carousels (.is-trio) — center when all cards fit ───────── */
/* At ≥1101px the carousel shows ≥3 per view, so a trio never scrolls:
size cards at 3-per-view and center the row on all wide screens. */
@media (min-width:1101px){
.three-cards.is-carousel.is-trio{ --cards-per-view:3; }
.three-cards.is-carousel.is-trio .track{ justify-content:center; }
}
/* ── Launching Soon · watermark between logo and copy ──────────────── */
/* The card is a flex column with space-between; the watermark joins the
flow as a flex item slotted between .top and .bottom (order swap), so
it always sits centred in the empty space between the logo above and
the text below — at every card height and text length. */
.card.is-launching-soon .scrim{ display:none; }
.card.is-launching-soon .bottom{ order:1; } /* ::after slots before it */
.card.is-launching-soon::after{
content:"Launching\A Soon";
white-space:pre;
text-align:center;
position:relative; z-index:2; /* stays in flow; paints above the z-1 .bg */
/* bleed across the card's side padding for the edge-to-edge fill */
margin-inline:calc(clamp(24px, 2.2vw, 32px) * -1);
font-family:var(--ff-sans);
font-weight:200; /* thinnest loaded weight */
font-size:clamp(28px, 3vw, 40px); /* fallback: no cq support */
font-size:clamp(28px, 14cqw, 72px); /* scales with card width */
line-height:1.15;
letter-spacing:.16em;
text-transform:uppercase;
background:linear-gradient(135deg, #C7C9CE 0%, #E5D2A3 48%, #C7C9CE 100%);
-webkit-background-clip:text; background-clip:text;
color:transparent;
opacity:0.2; /* 20% watermark */
pointer-events:none;
user-select:none;
}
html[lang="ar"] .card.is-launching-soon::after{
content:"قريباً";
letter-spacing:0.04em;
font-size:clamp(36px, 20cqw, 96px); /* single short word — sits larger */
}