/* ============================================================
UBF HOLDINGS — house styles (v3, multi-page)
Tokens per brand system. Logo green is an ESTIMATE sampled
visually from the supplied wordmark PNG — replace --brand
once the source file / exact hex arrives.
Placeholder imagery: swap the four --img-* variables for
licensed photography. Fallback-first: engraved art sits
beneath every photo layer.
============================================================ */
:root{
--paper:#F6F4EE;
--ink:#14231C;
--forest:#1C3A2E;
--gold:#A9895A;
--mist:#7E837C;
--brand:#016E51; /* logo green — sampled from the supplied SVG */
--ink-deep:#0F1B15;
--hairline:rgba(169,137,90,.42);
--hairline-soft:rgba(169,137,90,.24);
--paper-dim:rgba(246,244,238,.78);
/* TYPEFACE — SETTLED 17 Aug 2026: Archivo, the grotesque, throughout.
Omnibus-Type's Archivo (Google Fonts "Archivo"). One family carries
display, body and UI; there is no serif on this site any more. The
logo is an SVG and is unaffected by any of this. Devanagari and
Nastaliq keep their Noto faces — Archivo has neither script. */
/* the one non-Archivo face: the hero line and the pull-quotes */
--line-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
--serif-display:'Archivo',-apple-system,'Helvetica Neue',Arial,sans-serif;
--serif-body:'Archivo',-apple-system,'Helvetica Neue',Arial,sans-serif;
--grotesk:'Archivo',-apple-system,'Helvetica Neue',Arial,sans-serif;
--nav-h:78px;
/* Dead margin either side of the bar, ALJ-style: the wordmark and
the centenary mark sit inboard, not against the viewport edge.
Scales with the window so it never crowds on a laptop or looks
mean on a 27". */
/* ONE CONTAINER for the whole site. Every section measure and the nav
gutter are derived from it, so the wordmark on the left and the
centenary mark on the right sit on exactly the same vertical as the
section headings below them. Before this they were computed
independently — the nav sat ~60px further out than the text at
1512px, which is what Arshad was seeing. Tightened 74rem -> 72rem
on the same note, which deepens the dead margin everywhere at once. */
--page-max:72rem;
--page-pad:1.5rem;
--nav-gutter:max(var(--page-pad),calc((100vw - var(--page-max)) / 2 + var(--page-pad)));
--wordmark-size:1.5rem; /* SVG mark HEIGHT (cap height); width follows */
/* Hero video. Swap --vid/--vid-poster for the option Arshad picks
(see README "Hero video options"), or a local /video/hero.mp4. */
--vid-poster:url('/img/site/hero-poster.jpg');
--img-hero:url('/img/site/hero.jpg');
--img-estate:url('/img/site/estate.jpg');
--img-hotel:url('/img/site/hotel.jpg');
--img-horizon:url('/img/site/horizon.jpg');
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
background:var(--paper);
color:var(--ink);
font-family:var(--serif-body);
font-size:17px;
line-height:1.72;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
body.padded{padding-top:var(--nav-h)}
::selection{background:var(--forest);color:var(--paper)}
a{color:inherit}
/* ---------- labels & hairlines ---------- */
.label{
font-family:var(--grotesk);
font-size:.68rem;
font-weight:500;
letter-spacing:.32em;
text-transform:uppercase;
color:var(--mist);
display:flex;
align-items:center;
justify-content:center;
gap:1.1rem;
}
.label::before,.label::after{
content:"";
width:2.4rem;
height:1px;
background:var(--hairline);
}
.rule{width:3.2rem;height:1px;background:var(--hairline);margin:0 auto}
/* ============================================================
NAV — ALJ grammar: slim bar, dropdown menus carry the breadth.
Over a hero: transparent, paper text. On scroll / hover /
focus / solid pages: paper bar, ink text, green wordmark.
============================================================ */
nav.site{
position:fixed;top:0;left:0;right:0;z-index:80;
display:flex;align-items:stretch;justify-content:space-between;
height:var(--nav-h);
padding:0 var(--nav-gutter);
--nv:var(--paper); /* nav text color */
--nv-dim:rgba(246,244,238,.72);
--nb:var(--paper); /* wordmark color */
background:transparent;
transition:background .45s ease,box-shadow .45s ease;
}
nav.site.scrolled,
nav.site.solid,
nav.site:hover,
nav.site:focus-within{
--nv:var(--ink);
--nv-dim:var(--mist);
--nb:var(--brand);
background:rgba(246,244,238,.96);
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px);
box-shadow:0 1px 0 var(--hairline-soft);
}
/* the supplied UBF mark, inlined as SVG and inheriting colour so it
can sit green on paper and paper-white over film */
nav.site .brand{
display:flex;align-items:center;
text-decoration:none;
color:var(--nb);
transition:color .45s ease;
z-index:2;
}
nav.site .brand svg{
display:block;
height:var(--wordmark-size);
width:auto;
}
/* Menu is centred in the bar regardless of brand/utility widths.
NOTE: no transform here — a transformed ancestor would become the
containing block for the position:fixed mega panel and break its
full-bleed width. Centre with a full-width flex row instead, and
let clicks fall through to the brand/utility beneath. */
nav.site .menu{
display:flex;align-items:stretch;justify-content:center;
position:absolute;left:0;right:0;top:0;bottom:0;
pointer-events:none;
}
nav.site .mitem{pointer-events:auto}
nav.site .mitem{position:relative;display:flex;align-items:stretch}
nav.site .item{
display:flex;align-items:center;gap:.5rem;
padding:0 1.35rem;
font-family:var(--grotesk);
font-size:.78rem;
font-weight:500;
letter-spacing:.09em;
color:var(--nv);
text-decoration:none;
position:relative;
transition:color .45s ease;
}
nav.site .chev{
width:6px;height:6px;
border-right:1px solid var(--nv-dim);
border-bottom:1px solid var(--nv-dim);
transform:rotate(45deg) translateY(-2px);
transition:border-color .45s ease;
}
nav.site .mitem.active .item::after,
nav.site .mitem:hover .item::after{
content:"";position:absolute;left:1.35rem;right:1.35rem;bottom:0;
height:2px;background:var(--gold);
}
nav.site .utility{
display:flex;align-items:center;
font-family:var(--grotesk);
font-size:.64rem;font-weight:500;
letter-spacing:.34em;text-indent:.34em;
text-transform:uppercase;
color:var(--nv-dim);
transition:color .45s ease;
}
/* centenary mark — the rule lockup, where ALJ puts its anniversary badge */
nav.site .centenary{
text-decoration:none;z-index:2;
letter-spacing:0;text-indent:0;
color:var(--gold);
transition:color .45s ease,opacity .45s ease;
}
nav.site .centenary .cmark{display:block;width:118px}
nav.site .centenary .cmark svg{width:100%;height:auto;display:block}
nav.site.over:not(.scrolled):not(:hover) .centenary{color:rgba(246,244,238,.82)}
nav.site .centenary:hover{color:var(--forest)}
nav.site.over:not(.scrolled):not(:hover) .centenary:hover{color:var(--paper)}
/* dropdowns (desktop) */
nav.site .drop{
position:absolute;top:100%;
opacity:0;visibility:hidden;transform:translateY(6px);
transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s;
background:var(--paper);
border:1px solid var(--hairline-soft);border-top:none;
box-shadow:0 18px 40px rgba(20,35,28,.14);
}
nav.site .mitem:hover .drop,
nav.site .mitem:focus-within .drop{
opacity:1;visibility:visible;transform:none;
transition:opacity .35s ease,transform .35s ease,visibility 0s;
}
nav.site .drop.simple{left:50%;translate:-50% 0;width:250px}
nav.site .drop.simple.wide{width:290px}
nav.site .drop.simple a{
display:block;
padding:1rem 1.5rem;
font-family:var(--serif-body);
font-size:1.02rem;
color:var(--ink);
text-decoration:none;
border-bottom:1px solid rgba(169,137,90,.14);
transition:background .3s ease,color .3s ease;
}
nav.site .drop.simple a:last-child{border-bottom:none}
nav.site .drop.simple a:hover{color:var(--forest);background:rgba(169,137,90,.07)}
nav.site .drop.mega{
position:fixed;left:0;right:0;top:var(--nav-h);
padding:2.5rem 3rem 2.7rem;
}
nav.site .mega-grid{
display:grid;grid-template-columns:1fr 1fr 1fr;gap:2.6rem;
max-width:1200px;margin:0 auto;
}
nav.site .mega-grid a{
display:block;text-decoration:none;color:var(--ink);
border-top:1px solid var(--hairline);
padding-top:1.35rem;
}
nav.site .mega-grid .micon{
display:block;
width:44px;height:44px;
color:var(--gold);
margin-bottom:1rem;
transition:color .35s ease,transform .5s cubic-bezier(.22,.61,.21,1);
}
nav.site .mega-grid .micon svg{width:100%;height:100%;display:block}
nav.site .mega-grid a:hover .micon{color:var(--forest);transform:translateY(-2px)}
nav.site .mega-grid .num{
font-family:var(--serif-display);
font-size:.85rem;letter-spacing:.3em;color:var(--gold);
display:block;margin-bottom:.5rem;
}
nav.site .mega-grid h4{
font-family:var(--serif-display);
font-weight:600;font-size:1.26rem;line-height:1.25;
margin-bottom:.4rem;
transition:color .3s ease;
}
nav.site .mega-grid p{font-size:.94rem;line-height:1.5;color:#4A544D}
nav.site .mega-grid a:hover h4{color:var(--forest)}
/* burger (mobile) */
nav.site .burger{
display:none;
background:none;border:none;cursor:pointer;
flex-direction:column;justify-content:center;gap:5px;
padding:.6rem .2rem;
}
nav.site .burger span{
display:block;width:22px;height:1.5px;
background:var(--nv);
transition:background .45s ease,transform .3s ease,opacity .3s ease;
}
body.menu-open nav.site .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open nav.site .burger span:nth-child(2){opacity:0}
body.menu-open nav.site .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* mobile overlay */
.mobile-overlay{
position:fixed;inset:0;z-index:70;
background:var(--paper);
padding:calc(var(--nav-h) + 2rem) 1.8rem 2.4rem;
overflow-y:auto;
opacity:0;visibility:hidden;transform:translateY(-8px);
transition:opacity .4s ease,transform .4s ease,visibility 0s linear .4s;
}
body.menu-open .mobile-overlay{
opacity:1;visibility:visible;transform:none;
transition:opacity .4s ease,transform .4s ease,visibility 0s;
}
body.menu-open{overflow:hidden}
body.menu-open nav.site{
--nv:var(--ink);--nv-dim:var(--mist);--nb:var(--brand);
background:var(--paper);box-shadow:0 1px 0 var(--hairline-soft);
}
.mobile-overlay .group{margin-bottom:2rem}
.mobile-overlay .group-label{
font-family:var(--grotesk);font-size:.62rem;font-weight:500;letter-spacing:.3em;
text-transform:uppercase;color:var(--mist);margin-bottom:.85rem;
display:flex;align-items:center;gap:.9rem;
}
.mobile-overlay .group-label::after{content:"";flex:1;height:1px;background:var(--hairline-soft)}
.mobile-overlay a.big{
display:block;font-family:var(--serif-display);font-weight:500;font-size:1.6rem;
color:var(--ink);text-decoration:none;padding:.35rem 0;
}
.mobile-overlay a.sub{
display:block;font-family:var(--serif-body);font-size:1.08rem;color:#3E4842;
text-decoration:none;padding:.32rem 0 .32rem 1rem;
border-left:1px solid var(--hairline-soft);margin-left:2px;
}
.mobile-overlay .place{
margin-top:2.4rem;text-align:center;
font-family:var(--grotesk);font-size:.6rem;letter-spacing:.4em;text-indent:.4em;
text-transform:uppercase;color:var(--mist);
}
/* ---------- hero (home) ---------- */
.hero{
position:relative;
min-height:100vh;
min-height:100svh;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:linear-gradient(180deg,
#0C1712 0%, #10201A 30%, #163026 52%,
#3A3323 68%, #6B5638 76%, #8A6D42 81%,
#2A2620 86%, #0E1B15 100%);
}
.hero-art{position:absolute;inset:0;z-index:1}
.hero-art svg{position:absolute;bottom:0;left:0;width:100%;height:78%}
.hero-poster{
position:absolute;inset:0;z-index:2;
background-image:var(--vid-poster);
background-size:cover;
background-position:center;
}
/* Films stack and dissolve into one another, endlessly.
--dissolve is the crossfade length; main.js reads it to time
the handover, so changing it here changes both. */
.hero-films{
position:absolute;inset:0;z-index:3;
--dissolve:1.4s;
}
.hero-video{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;
display:block;
border:none;
opacity:0;
transition:opacity var(--dissolve) ease-in-out;
/* a hair of scale crops the frame edge, where drone wobble shows worst */
transform:scale(1.04);
}
.hero-video.on{opacity:1}
.hero-veil{
position:absolute;inset:0;z-index:4;
background:
radial-gradient(120% 90% at 50% 42%, rgba(15,27,21,0) 38%, rgba(15,27,21,.55) 100%),
linear-gradient(180deg, rgba(15,27,21,.58) 0%, rgba(20,35,28,.30) 42%, rgba(15,27,21,.68) 100%);
}
/* whole hero is the link to the story — ALJ grammar */
.hero-hit{position:absolute;inset:0;z-index:5;display:block;text-indent:-9999px;overflow:hidden}
.hero-content{
position:relative;z-index:6;
text-align:center;
padding:8rem 1.5rem 5rem;
color:var(--paper);
pointer-events:none;
}
.hero-content a{pointer-events:auto}
.seal{
display:inline-block;
border:1px solid rgba(169,137,90,.65);
outline:1px solid rgba(169,137,90,.35);
outline-offset:5px;
padding:.9rem 1.6rem .8rem;
margin-bottom:2.8rem;
}
.seal .seal-mark{display:block;line-height:1}
.seal .seal-mark svg{display:block;height:1.45rem;width:auto;margin:0 auto}
.seal .seal-sub{
display:block;
margin-top:.55rem;
padding-top:.5rem;
border-top:1px solid rgba(169,137,90,.4);
font-family:var(--grotesk);
font-size:.5rem;
font-weight:500;
letter-spacing:.52em;
text-indent:.52em;
text-transform:uppercase;
color:rgba(246,244,238,.82);
}
.hero h1{
/* Arshad, 17 Aug: the hero line goes back to the face it had a couple
of renditions ago — the same one the quote beneath it uses. It is
the only heading on the site that is not Archivo. Regular, not
italic: the quote is italic because it is speech, this is not. */
font-family:var(--line-serif);
font-weight:500;
font-size:clamp(2.5rem,6.2vw,4.55rem);
line-height:1.14;
letter-spacing:.01em;
text-wrap:balance;
margin:0 auto;
max-width:17em;
text-shadow:0 1px 24px rgba(12,23,18,.45);
}
.hero .hero-line{
width:2.6rem;height:1px;
background:rgba(169,137,90,.75);
margin:2.4rem auto 1.6rem;
}
.hero .hero-place{
font-family:var(--grotesk);
font-size:.66rem;
font-weight:500;
letter-spacing:.44em;
text-indent:.44em;
text-transform:uppercase;
color:rgba(246,244,238,.75);
}
.hero-cue{
position:absolute;bottom:0;left:50%;z-index:6;
width:1px;height:4.2rem;
background:linear-gradient(180deg,rgba(169,137,90,0),rgba(169,137,90,.8));
}
/* The line, and the story it opens — ALJ's homepage grammar:
the proverb IS the article title, and the hero is the link. */
.hero-story{
display:block;
margin-top:3rem;
text-decoration:none;
color:inherit;
}
.hero-story .proverb{
display:block;
font-family:var(--serif-display);
font-style:normal;
font-weight:500;
font-size:clamp(1.2rem,2.35vw,1.72rem);
line-height:1.42;
color:var(--paper);
text-wrap:balance;
max-width:26em;
margin:0 auto;
text-shadow:0 1px 20px rgba(12,23,18,.5);
}
/* ============================================================
THE SHER as supplied — Devanagari left, Nastaliq right, side by
side beneath the English, divided by a hairline. No attribution:
authorship is contested in circulation.
Same verse both times. Hindi and Urdu are one spoken language
here; this is a change of script, not a translation.
Nastaliq slopes and descends deeply, so it takes a larger size
and far more leading than Devanagari to sit level with it.
Neither script is ever italicised: Devanagari's italic would be
a synthetic shear that breaks the shirorekha, and Arabic script
has no italic tradition at all.
============================================================ */
.proverb-src{
display:grid;
grid-template-columns:1fr 1px 1fr;
align-items:center;
gap:0 2.2rem;
max-width:52rem;
margin:1.5rem auto 0;
}
.proverb-src::before{
content:"";
grid-column:2;grid-row:1;
width:1px;height:100%;
background:rgba(169,137,90,.4);
align-self:stretch;
}
.proverb-hi{
grid-column:1;grid-row:1;
font-family:'Noto Serif Devanagari','Kohinoor Devanagari',serif;
font-weight:400;
font-size:1.06rem;
line-height:2;
letter-spacing:.005em;
color:rgba(246,244,238,.74);
text-align:center;
}
.proverb-ur{
grid-column:3;grid-row:1;
font-family:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq',serif;
font-weight:400;
font-size:1.22rem;
line-height:2.55;
color:rgba(246,244,238,.78);
text-align:center;
}
/* ---- THE COUPLET ON A LIGHT GROUND ----
The colours above are paper-white, written for the couplet's first home
under the dark hero. Inside an article the same block sits on --paper,
so it was rendering white on white — present in the DOM, invisible on
screen. Arshad reported it missing on Our Story; it was never absent. */
.article .proverb-src::before,
.pullquote .proverb-src::before{background:rgba(169,137,90,.55)}
.article .proverb-hi,.pullquote .proverb-hi{color:rgba(20,35,28,.78)}
.article .proverb-ur,.pullquote .proverb-ur{color:rgba(20,35,28,.80)}
/* single-script fallbacks, if SCRIPT is ever set back to hi or ur */
.script-hi{grid-template-columns:1fr}
.script-hi::before,.script-ur::before{display:none}
.script-hi .proverb-ur{display:none}
.script-hi .proverb-hi{grid-column:1;text-align:center}
.script-ur{grid-template-columns:1fr}
.script-ur .proverb-hi{display:none}
.script-ur .proverb-ur{grid-column:1}
.hero-story .storyline{
display:block;
margin-top:1.1rem;
font-family:var(--grotesk);
font-size:.62rem;font-weight:500;
letter-spacing:.34em;text-indent:.34em;
text-transform:uppercase;
color:rgba(246,244,238,.7);
}
.hero-story .cue{
display:inline-flex;align-items:center;gap:.9rem;
margin-top:1.5rem;
font-family:var(--grotesk);
font-size:.62rem;font-weight:500;
letter-spacing:.28em;text-transform:uppercase;
color:rgba(246,244,238,.9);
}
.hero-story .cue::before,.hero-story .cue::after{
content:"";width:2rem;height:1px;background:rgba(169,137,90,.75);
transition:width .45s cubic-bezier(.22,.61,.21,1);
}
.hero:hover .hero-story .cue{color:var(--paper)}
.hero:hover .hero-story .cue::before,.hero:hover .hero-story .cue::after{width:2.9rem}
/* article header — label above, proverb as the title */
.article-hero .ah-label{
font-family:var(--grotesk);
font-size:.62rem;font-weight:500;
letter-spacing:.34em;text-indent:.34em;
text-transform:uppercase;
color:rgba(246,244,238,.66);
margin-bottom:1.5rem;
}
.article-hero .proverb-src{margin:1.5rem 0 0;max-width:46rem}
.article-hero .proverb-hi{font-size:1.1rem}
.article-hero .proverb-ur{font-size:1.26rem}
.article-hero .ah-sub{
margin-top:1.3rem;
font-family:var(--grotesk);
font-size:.66rem;font-weight:500;
letter-spacing:.3em;text-indent:.3em;
text-transform:uppercase;
color:rgba(246,244,238,.72);
}
.article-hero h1{font-style:normal}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-content>*{opacity:0;animation:rise 1.6s cubic-bezier(.22,.61,.21,1) forwards}
.hero-content>.seal{animation-delay:.25s}
.hero-content>h1{animation-delay:.55s}
.hero-content>.hero-line{animation-delay:.95s}
.hero-content>.hero-place{animation-delay:1.15s}
.hero-content>.hero-story{animation-delay:1.5s}
/* ============================================================
HERO IN / OUT — Dissolve. The film fades up on load; the hero
content fades out and the veil deepens as you scroll past.
--exit (0 -> 1) is written by main.js from scroll position.
============================================================ */
@keyframes vid-in{from{opacity:0}to{opacity:1}}
.hero.tr-dissolve .hero-films,
.hero.tr-dissolve .hero-poster{animation:vid-in 2.2s ease forwards}
.hero.tr-dissolve .hero-content{opacity:calc(1 - var(--exit,0) * 1.35)}
.hero.tr-dissolve .hero-veil{opacity:calc(1 + var(--exit,0) * .5)}
/* ---------- page head (interior text pages) ---------- */
.page-head{
padding:6.5rem 1.5rem 0;
text-align:center;
}
.page-head .label{margin-bottom:2.2rem}
.page-head h1{
font-family:var(--serif-display);
font-weight:500;
font-size:clamp(2.3rem,4.6vw,3.4rem);
line-height:1.12;
letter-spacing:.01em;
}
.page-head .rule{margin-top:2.4rem}
/* ---------- page hero (sector pages, photo-led) ---------- */
.page-hero{
position:relative;
min-height:62vh;
display:flex;
align-items:flex-end;
overflow:hidden;
background:var(--ink-deep);
color:var(--paper);
}
.page-hero .ph-art{position:absolute;inset:0;z-index:1}
.page-hero .ph-art svg{position:absolute;bottom:0;left:0;width:100%;height:70%}
.page-hero .ph-photo{
position:absolute;inset:0;z-index:2;
background-size:cover;background-position:center;
}
.page-hero .ph-inner{
position:relative;z-index:3;
width:100%;max-width:var(--page-max);
margin:0 auto;
padding:9rem var(--page-pad) 4.6rem;
}
.page-hero .numeral{
font-family:var(--serif-display);
font-size:1.05rem;letter-spacing:.34em;color:var(--gold);
display:flex;align-items:center;gap:1rem;
margin-bottom:1.3rem;
}
.page-hero .numeral::after{content:"";width:2.4rem;height:1px;background:var(--hairline)}
.page-hero h1{
font-family:var(--serif-display);
font-weight:500;
font-size:clamp(2.2rem,4.6vw,3.6rem);
line-height:1.14;
max-width:14em;
text-wrap:balance;
}
#ph-estate .ph-art{background:linear-gradient(180deg,#0F1B15 0%,#163026 55%,#1C3A2E 78%,#111F19 100%)}
#ph-estate .ph-photo{background-image:linear-gradient(180deg,rgba(15,27,21,.42) 0%,rgba(15,27,21,.30) 45%,rgba(12,23,18,.84) 100%),var(--img-estate)}
#ph-hotel .ph-art{background:linear-gradient(180deg,#101C16 0%,#1C3A2E 60%,#2E2A1E 82%,#101C16 100%)}
#ph-hotel .ph-photo{background-image:linear-gradient(180deg,rgba(15,27,21,.42) 0%,rgba(15,27,21,.32) 45%,rgba(12,23,18,.84) 100%),var(--img-hotel)}
#ph-invest .ph-art{background:linear-gradient(180deg,#0E1A14 0%,#16281F 52%,#4A3A26 80%,#0E1A14 100%)}
#ph-invest .ph-photo{background-image:linear-gradient(180deg,rgba(15,27,21,.44) 0%,rgba(15,27,21,.32) 45%,rgba(12,23,18,.86) 100%),var(--img-horizon)}
/* ---------- copy sections ---------- */
section{scroll-margin-top:calc(var(--nav-h) + 1rem)}
.copy-section{padding:8.5rem 1.5rem 8rem;text-align:center}
.copy-section.tight{padding:5.5rem 1.5rem 6rem}
.copy-section .label{margin-bottom:3.2rem}
.copy{max-width:38.5em;margin:0 auto;text-align:center}
.copy p{font-size:1.22rem;line-height:1.78;color:var(--ink)}
.copy p+p{margin-top:1.7rem}
.copy .lead{font-size:1.42rem;line-height:1.66}
.ph{
color:var(--mist);
border-bottom:1px dotted var(--gold);
font-style:italic;
}
/* continue link */
.continue{
display:inline-flex;align-items:center;gap:1rem;
margin-top:3rem;
font-family:var(--grotesk);
font-size:.66rem;font-weight:500;
letter-spacing:.28em;text-transform:uppercase;
color:var(--gold);
text-decoration:none;
transition:color .35s ease;
}
.continue::before{content:"";width:2.4rem;height:1px;background:var(--hairline)}
/* it is the last thing in a section, so it owns the gap to the next one */
.article .continue{margin-bottom:1.4rem}
.article section.prose + section.prose{margin-top:3.6rem}
.continue:hover{color:var(--forest)}
/* ---------- stat band ---------- */
.band{
background:var(--forest);
color:var(--paper);
padding:4.6rem 1.5rem;
border-top:1px solid var(--hairline-soft);
border-bottom:1px solid var(--hairline-soft);
}
.band-inner{
display:flex;align-items:center;justify-content:center;
gap:2.6rem;flex-wrap:wrap;
max-width:60rem;margin:0 auto;
}
.band .phrase{
font-family:var(--serif-display);
font-weight:500;
font-size:clamp(1.35rem,2.4vw,1.8rem);
letter-spacing:.02em;
white-space:nowrap;
}
.band .dot{width:4px;height:4px;background:var(--gold);transform:rotate(45deg);flex:0 0 auto}
/* ---------- sector panels (home + landing) ---------- */
.panels-head{padding:7.5rem 1.5rem 5rem;text-align:center}
.panels-head .label{margin-bottom:0}
.panel{
position:relative;
min-height:82vh;
display:flex;align-items:flex-end;
overflow:hidden;
background:var(--ink-deep);
color:var(--paper);
}
.panel-art{position:absolute;inset:0;z-index:1}
.panel-art svg{position:absolute;bottom:0;left:0;width:100%;height:70%}
.panel-photo{position:absolute;inset:0;z-index:2;background-size:cover;background-position:center}
#panel-estate .panel-art{background:linear-gradient(180deg,#0F1B15 0%,#163026 55%,#1C3A2E 78%,#111F19 100%)}
#panel-estate .panel-photo{background-image:linear-gradient(180deg,rgba(15,27,21,.38) 0%,rgba(15,27,21,.24) 45%,rgba(12,23,18,.82) 100%),var(--img-estate)}
#panel-hotel .panel-art{background:linear-gradient(180deg,#101C16 0%,#1C3A2E 60%,#2E2A1E 82%,#101C16 100%)}
#panel-hotel .panel-photo{background-image:linear-gradient(180deg,rgba(15,27,21,.38) 0%,rgba(15,27,21,.26) 45%,rgba(12,23,18,.82) 100%),var(--img-hotel)}
#panel-invest .panel-art{background:linear-gradient(180deg,#0E1A14 0%,#16281F 52%,#4A3A26 80%,#0E1A14 100%)}
#panel-invest .panel-photo{background-image:linear-gradient(180deg,rgba(15,27,21,.40) 0%,rgba(15,27,21,.26) 45%,rgba(12,23,18,.84) 100%),var(--img-horizon)}
.panel-inner{
position:relative;z-index:3;
width:100%;max-width:76rem;
margin:0 auto;
padding:6rem 3rem 5.2rem;
}
.panel-text{max-width:33em}
.panel.alt .panel-text{margin-left:auto}
.panel .numeral{
font-family:var(--serif-display);
font-weight:500;
font-size:1.05rem;
letter-spacing:.34em;
color:var(--gold);
display:flex;align-items:center;gap:1rem;
margin-bottom:1.4rem;
}
.panel .numeral::after{content:"";width:2.4rem;height:1px;background:var(--hairline)}
.panel h3{
font-family:var(--serif-display);
font-weight:500;
font-size:clamp(1.75rem,3.4vw,2.55rem);
line-height:1.18;
margin-bottom:1.3rem;
text-wrap:balance;
}
.panel h3 a{text-decoration:none}
.panel p{font-size:1.13rem;line-height:1.74;color:rgba(246,244,238,.88)}
.panel .continue{margin-top:1.9rem;color:var(--gold)}
.panel .continue:hover{color:var(--paper)}
/* ---------- siblings (sector cross-links) ---------- */
.siblings{padding:0 1.5rem 8rem}
.siblings .label{margin-bottom:3.4rem}
.sib-grid{
display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;
max-width:52rem;margin:0 auto;
}
.sib-grid a{
display:block;text-decoration:none;color:var(--ink);
border-top:1px solid var(--hairline);
padding-top:1.2rem;
text-align:left;
}
.sib-grid .num{
font-family:var(--serif-display);
font-size:.85rem;letter-spacing:.3em;color:var(--gold);
display:block;margin-bottom:.5rem;
}
.sib-grid h4{
font-family:var(--serif-display);
font-weight:600;font-size:1.3rem;line-height:1.25;
transition:color .3s ease;
}
.sib-grid a:hover h4{color:var(--forest)}
/* ---------- perspective ---------- */
.perspective{padding:9.5rem 1.5rem;text-align:center}
.perspective .label{margin-bottom:3.4rem}
.perspective blockquote{
font-family:var(--serif-display);
font-style:normal;
font-weight:500;
font-size:clamp(1.7rem,3.6vw,2.5rem);
line-height:1.3;
color:var(--ink);
max-width:22em;
margin:0 auto;
}
.perspective .rule{margin-top:3.4rem}
/* ---------- correspondence page ---------- */
.correspond{padding:5.5rem 1.5rem 9rem;text-align:center}
.correspond .contact-line{
font-family:var(--serif-body);
font-style:italic;
font-size:clamp(1.3rem,2.6vw,1.7rem);
color:var(--ink);
}
.correspond .contact-line a{
color:var(--ink);
text-decoration:none;
border-bottom:1px solid rgba(169,137,90,.6);
padding-bottom:.08em;
transition:color .35s ease,border-color .35s ease;
}
.correspond .contact-line a:hover{color:var(--forest);border-color:var(--gold)}
.correspond .cities{
margin-top:1.8rem;
font-family:var(--grotesk);
font-size:.68rem;font-weight:500;
letter-spacing:.4em;text-indent:.4em;
text-transform:uppercase;color:var(--mist);
}
.correspond .seal{
margin-top:4rem;
border-color:rgba(169,137,90,.55);
outline-color:rgba(169,137,90,.3);
color:var(--forest);
padding:.7rem 1.15rem .62rem;
}
.correspond .seal .seal-mark svg{height:1.05rem}
/* ---------- footer ---------- */
footer.site{
background:var(--forest);
color:var(--paper);
text-align:center;
padding:5.5rem 1.5rem 3rem;
border-top:1px solid var(--hairline-soft);
}
footer.site .fnav{
display:flex;flex-wrap:wrap;justify-content:center;
gap:.4rem 2.2rem;
max-width:60rem;margin:0 auto 3.4rem;
}
footer.site .fnav a{
font-family:var(--grotesk);
font-size:.64rem;font-weight:500;
letter-spacing:.22em;text-transform:uppercase;
color:rgba(246,244,238,.62);
text-decoration:none;
transition:color .35s ease;
}
footer.site .fnav a:hover{color:var(--gold)}
footer.site .fcentenary{
display:flex;justify-content:center;
margin:0 auto 3.4rem;
color:var(--gold);
}
footer.site .fcentenary .cmark{display:block;width:178px}
footer.site .fcentenary .cmark svg{width:100%;height:auto;display:block}
footer.site .fcentenary .ctext{display:none}
footer.site .contact-line{
font-family:var(--serif-body);
font-style:italic;
font-size:1.18rem;
color:rgba(246,244,238,.92);
}
footer.site .contact-line a{
color:var(--paper);
text-decoration:none;
border-bottom:1px solid rgba(169,137,90,.6);
padding-bottom:.08em;
transition:border-color .4s ease,color .4s ease;
}
footer.site .contact-line a:hover{color:var(--gold);border-color:var(--gold)}
footer.site .cities{
margin-top:1.4rem;
font-family:var(--grotesk);
font-size:.64rem;font-weight:500;
letter-spacing:.4em;text-indent:.4em;
text-transform:uppercase;
color:rgba(246,244,238,.6);
}
footer.site .seal{
margin:3.6rem 0 0;
padding:.7rem 1.15rem .62rem;
border-color:rgba(169,137,90,.5);
outline-color:rgba(169,137,90,.26);
}
footer.site .seal .seal-mark svg{height:1.05rem}
footer.site .colophon{
margin-top:3.6rem;
padding-top:1.5rem;
border-top:1px solid rgba(169,137,90,.18);
font-family:var(--grotesk);
font-size:.62rem;
letter-spacing:.22em;
color:rgba(246,244,238,.42);
}
/* ============================================================
LONG-FORM ARTICLE (Heritage) — ALJ perspective-page grammar
============================================================ */
.article-hero{
position:relative;
min-height:78vh;
display:flex;align-items:flex-end;
overflow:hidden;
background:var(--ink-deep);
color:var(--paper);
}
.article-hero .ah-art{position:absolute;inset:0;z-index:1}
.article-hero .ah-art svg{position:absolute;bottom:0;left:0;width:100%;height:74%}
.article-hero .ah-media{
position:absolute;inset:0;z-index:2;
width:100%;height:100%;object-fit:cover;
background-size:cover;background-position:center;
}
.article-hero .ah-veil{
position:absolute;inset:0;z-index:3;
background:linear-gradient(180deg,rgba(15,27,21,.50) 0%,rgba(15,27,21,.28) 40%,rgba(12,23,18,.88) 100%);
}
.article-hero .ah-inner{
position:relative;z-index:4;
width:100%;max-width:var(--page-max);
margin:0 auto;
padding:10rem var(--page-pad) 4.4rem;
}
.article-hero h1{
font-family:var(--serif-display);
font-weight:500;
font-size:clamp(1.85rem,3.6vw,2.9rem);
line-height:1.24;
max-width:19em;
text-wrap:balance;
}
.article-hero .dateline{
margin-top:1.8rem;
display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
font-family:var(--grotesk);
font-size:.66rem;font-weight:500;
letter-spacing:.28em;text-transform:uppercase;
color:rgba(246,244,238,.72);
}
.article-hero .dateline .bar{width:2.2rem;height:1px;background:var(--hairline)}
.article{padding:0 1.5rem}
.prose{max-width:37em;margin:0 auto}
.standfirst{
padding:6rem 0 1rem;
}
.standfirst p{
font-family:var(--serif-display);
font-weight:500;
font-size:clamp(1.45rem,2.8vw,1.95rem);
line-height:1.42;
color:var(--ink);
text-align:center;
}
.prose h2{
font-family:var(--serif-display);
font-weight:600;
font-size:clamp(1.5rem,2.8vw,2rem);
line-height:1.24;
margin:3.8rem 0 1.4rem;
}
.prose h2:first-child{margin-top:0}
.prose p{font-size:1.16rem;line-height:1.8;margin-bottom:1.4rem}
.prose p.drop::first-letter{
font-family:var(--serif-display);
font-weight:600;
font-size:3.4em;
line-height:.82;
float:left;
padding:.06em .12em 0 0;
color:var(--forest);
}
.section-rule{
width:100%;max-width:37em;margin:4.4rem auto;
height:1px;background:var(--hairline-soft);
}
/* pull quote */
.pullquote{
max-width:44em;margin:4.2rem auto;
padding:2.6rem 0;
border-top:1px solid var(--hairline);
border-bottom:1px solid var(--hairline);
text-align:center;
}
.pullquote blockquote{
font-family:var(--serif-display);
font-style:normal;font-weight:500;
font-size:clamp(1.5rem,3vw,2.15rem);
line-height:1.34;
color:var(--forest);
}
.pullquote cite{
display:block;margin-top:1.4rem;
font-family:var(--grotesk);font-style:normal;
font-size:.64rem;font-weight:500;
letter-spacing:.28em;text-transform:uppercase;
color:var(--mist);
}
/* photo plates */
.plate{margin:4.4rem auto;max-width:60rem}
.plate.full{max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw}
.plate .frame{
position:relative;
aspect-ratio:16/9;
background:linear-gradient(180deg,#16281F 0%,#1C3A2E 60%,#2A2620 100%);
border:1px solid var(--hairline-soft);
overflow:hidden;
display:flex;align-items:center;justify-content:center;
}
.plate.full .frame{border-left:none;border-right:none}
.plate .frame img{width:100%;height:100%;object-fit:cover;display:block}
.plate .slot{
text-align:center;
font-family:var(--grotesk);
font-size:.64rem;font-weight:500;
letter-spacing:.3em;text-transform:uppercase;
color:rgba(246,244,238,.55);
padding:1rem;
}
.plate .slot::before{
content:"";display:block;width:2.6rem;height:1px;
background:rgba(169,137,90,.55);margin:0 auto 1rem;
}
.plate figcaption{
margin-top:1rem;
font-family:var(--grotesk);
font-size:.68rem;
letter-spacing:.1em;
color:var(--mist);
text-align:center;
}
.plate-pair{
display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;
max-width:60rem;margin:4.4rem auto;
}
.plate-pair .plate{margin:0;max-width:none}
.plate-pair .frame{aspect-ratio:4/5}
/* landscape archival plates: 4/5 crops signage out of frame */
.plate-pair.wide .frame{aspect-ratio:4/3}
/* a standing portrait should not be cropped to landscape */
.plate.portrait{max-width:34rem}
.plate.portrait .frame{aspect-ratio:3/4}
/* the book's cut-out figure, standing on the paper with no frame */
.cutout{
max-width:30rem;margin:1rem auto 3.4rem;
text-align:center;
}
.cutout img{
width:100%;height:auto;display:block;
filter:drop-shadow(0 26px 34px rgba(20,35,28,.22));
}
@media (max-width:700px){
.cutout{max-width:19rem}
.plate-pair{grid-template-columns:1fr;gap:2.4rem}
}
/* film inside a story page: shorter than the homepage band, and it
sits inside the article measure rather than fighting it */
.story-film{margin-top:0;margin-bottom:4.6rem;aspect-ratio:21/9;max-height:64vh}
/* film layer on the hospitality header, same engine as the hero */
.page-hero .ph-films{position:absolute;inset:0;z-index:2}
.page-hero .ph-films .film-video{
position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;display:block;
opacity:0;transition:opacity var(--dissolve) ease-in-out;
}
.page-hero .ph-films .film-video.on{opacity:1}
/* up next */
.upnext{padding:6rem 1.5rem 8rem;text-align:center}
.upnext .label{margin-bottom:3rem}
.upnext-grid{
display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;
max-width:52rem;margin:0 auto;text-align:left;
}
.upnext-grid a{
display:block;text-decoration:none;color:var(--ink);
border-top:1px solid var(--hairline);padding-top:1.2rem;
}
.upnext-grid .kicker{
font-family:var(--grotesk);
font-size:.62rem;font-weight:500;letter-spacing:.28em;
text-transform:uppercase;color:var(--gold);
display:block;margin-bottom:.5rem;
}
.upnext-grid h4{
font-family:var(--serif-display);
font-weight:600;font-size:1.32rem;line-height:1.25;
transition:color .3s ease;
}
.upnext-grid a:hover h4{color:var(--forest)}
/* ============================================================
INVESTMENTS
============================================================ */
.inv-list{
max-width:56rem;margin:0 auto;
padding:1rem 1.5rem 7rem;
}
.inv-row{
display:flex;align-items:baseline;gap:2rem;
padding:2.1rem 0;
border-bottom:1px solid var(--hairline-soft);
text-decoration:none;color:var(--ink);
transition:padding-left .45s cubic-bezier(.22,.61,.21,1);
}
.inv-row:first-child{border-top:1px solid var(--hairline-soft)}
.inv-row:hover{padding-left:.9rem}
.inv-row .num{
font-family:var(--serif-display);
font-size:.9rem;letter-spacing:.3em;color:var(--gold);
flex:0 0 3.4rem;
}
.inv-row h3{
font-family:var(--serif-display);
font-weight:500;
font-size:clamp(1.5rem,3vw,2.1rem);
line-height:1.2;
flex:1;
transition:color .35s ease;
}
.inv-row:hover h3{color:var(--forest)}
.inv-row .go{
font-family:var(--grotesk);
font-size:.62rem;font-weight:500;letter-spacing:.26em;
text-transform:uppercase;color:var(--mist);
transition:color .35s ease;
}
.inv-row:hover .go{color:var(--gold)}
/* ---------- reveal motion ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1.15s cubic-bezier(.22,.61,.21,1),transform 1.15s cubic-bezier(.22,.61,.21,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.12s}
.reveal[data-d="2"]{transition-delay:.24s}
.reveal[data-d="3"]{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.hero-photo,.hero-content>*{animation:none;opacity:1}
.reveal{opacity:1;transform:none;transition:none}
}
/* ---------- preview chip (only present in preview bundle) ---------- */
.preview-chip{
position:fixed;bottom:14px;left:14px;z-index:99;
font-family:var(--grotesk);
font-size:.58rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
color:var(--mist);
background:rgba(246,244,238,.92);
border:1px solid var(--hairline-soft);
padding:.45rem .7rem;
pointer-events:none;
}
/* ---------- responsive ---------- */
/* five dropdowns is a lot of bar — tighten before dropping to burger */
@media (max-width:1440px){
nav.site .item{padding:0 .85rem;font-size:.74rem;letter-spacing:.06em}
}
@media (max-width:1280px){
nav.site .item{padding:0 .65rem;font-size:.7rem}
:root{--wordmark-size:1.32rem}
nav.site .centenary .cmark{width:96px}
}
@media (max-width:1080px){
nav.site .menu,nav.site .centenary{display:none}
nav.site .burger{display:flex}
}
@media (max-width:820px){
.proverb-src{grid-template-columns:1fr;gap:1.4rem;max-width:34em}
.proverb-src::before{
grid-column:1;grid-row:2;
width:3.2rem;height:1px;justify-self:center;align-self:center;
}
.proverb-hi{grid-column:1;grid-row:1;text-align:center}
.proverb-ur{grid-column:1;grid-row:3;text-align:center}
.article-hero .proverb-src::before{justify-self:start}
}
@media (max-width:900px){
nav.site{padding:0 var(--nav-gutter)}
nav.site .menu,nav.site .utility,nav.site .centenary{display:none}
nav.site .burger{display:flex;margin-right:.3rem}
:root{--wordmark-size:1.3rem}
.article-hero .ah-inner{padding:7.5rem var(--page-pad) 3rem}
.standfirst{padding-top:4rem}
.prose p{font-size:1.08rem}
.plate-pair{grid-template-columns:1fr}
.plate-pair .frame{aspect-ratio:4/3}
.upnext-grid{grid-template-columns:1fr;gap:2rem}
.inv-row{gap:1.1rem;padding:1.6rem 0}
.inv-row .num{flex-basis:2rem}
.inv-row .go{display:none}
.copy-section{padding:6rem 1.4rem 5.5rem}
.copy p{font-size:1.12rem}
.copy .lead{font-size:1.26rem}
.band-inner{flex-direction:column;gap:1.35rem}
.panel{min-height:74vh}
.panel-inner{padding:4.6rem 1.6rem 3.8rem}
.panel.alt .panel-text{margin-left:0}
.page-hero .ph-inner{padding:7rem 1.6rem 3.4rem}
.perspective{padding:7rem 1.4rem}
.sib-grid{grid-template-columns:1fr;gap:2rem}
.siblings{padding-bottom:6rem}
.page-head{padding-top:4.5rem}
footer.site{padding:4.5rem 1.4rem 2.4rem}
}
/* ============================================================
HOMEPAGE SECTIONS — ALJ's homepage grammar below the hero:
a news list, a centenary testimonial rail, and three
statement blocks each carrying stat figures and one link.
============================================================ */
/* ---- shared statement block ---- */
.statement{padding:7rem 1.5rem}
.statement.dark{background:var(--forest);color:var(--paper)}
.statement-inner{max-width:62rem;margin:0 auto}
.statement h2{
font-family:var(--serif-display);
font-weight:500;
font-size:clamp(1.9rem,3.9vw,3rem);
line-height:1.18;
max-width:16em;
text-wrap:balance;
margin-bottom:1.6rem;
}
.statement p{
font-size:1.14rem;line-height:1.78;
max-width:38em;
color:#3E4A44;
}
.statement.dark p{color:rgba(246,244,238,.86)}
.statement p+p{margin-top:1.1rem}
.stats{
display:flex;flex-wrap:wrap;gap:2.6rem 4rem;
margin:3.2rem 0 0;
padding-top:2.4rem;
border-top:1px solid var(--hairline);
}
.stat .fig{
display:block;
font-family:var(--serif-display);
font-weight:500;
font-size:clamp(2rem,4vw,2.9rem);
line-height:1;
color:var(--forest);
}
.statement.dark .stat .fig{color:var(--gold)}
.stat .cap{
display:block;margin-top:.6rem;
font-family:var(--grotesk);
font-size:.62rem;font-weight:500;
letter-spacing:.24em;text-transform:uppercase;
color:var(--mist);
max-width:12em;
}
.statement.dark .stat .cap{color:rgba(246,244,238,.6)}
.statement .continue{margin-top:2.8rem}
.statement.dark .continue{color:var(--gold)}
.statement.dark .continue:hover{color:var(--paper)}
/* ---- news list ---- */
.newsblock{padding:7rem 1.5rem 6rem}
.newsblock-inner{max-width:62rem;margin:0 auto}
.newsblock .head{
display:flex;align-items:baseline;justify-content:space-between;
gap:1.5rem;flex-wrap:wrap;
border-bottom:1px solid var(--hairline);
padding-bottom:1.3rem;margin-bottom:.6rem;
}
.newsblock h2{
font-family:var(--serif-display);
font-weight:500;font-size:clamp(1.7rem,3.2vw,2.4rem);
}
.news-item{
display:grid;grid-template-columns:8.5rem 1fr auto;
gap:1.6rem;align-items:baseline;
padding:1.5rem 0;
border-bottom:1px solid rgba(169,137,90,.15);
text-decoration:none;color:var(--ink);
transition:padding-left .4s cubic-bezier(.22,.61,.21,1);
}
.news-item:hover{padding-left:.7rem}
.news-item .date{
font-family:var(--grotesk);
font-size:.62rem;font-weight:500;
letter-spacing:.2em;text-transform:uppercase;
color:var(--mist);
}
.news-item h3{
font-family:var(--serif-display);
font-weight:500;font-size:1.32rem;line-height:1.34;
transition:color .3s ease;
}
.news-item:hover h3{color:var(--forest)}
.news-item .more{
font-family:var(--grotesk);
font-size:.6rem;font-weight:500;letter-spacing:.22em;
text-transform:uppercase;color:var(--mist);
white-space:nowrap;
}
.news-item:hover .more{color:var(--gold)}
/* ---- centenary testimonial rail ---- */
.centenary-band{
background:var(--forest);color:var(--paper);
padding:6.5rem 0 5.5rem;
border-top:1px solid var(--hairline-soft);
border-bottom:1px solid var(--hairline-soft);
}
.centenary-band .cb-head{
max-width:62rem;margin:0 auto 3rem;padding:0 1.5rem;
}
.centenary-band h2{
font-family:var(--serif-display);
font-weight:500;font-size:clamp(1.8rem,3.6vw,2.7rem);
line-height:1.2;max-width:18em;text-wrap:balance;
}
.centenary-band .cb-sub{
margin-top:1.2rem;font-size:1.1rem;line-height:1.7;
color:rgba(246,244,238,.8);max-width:40em;
}
.rail{
display:flex;gap:1.4rem;
overflow-x:auto;
padding:0 1.5rem 1.4rem;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{height:2px}
.rail::-webkit-scrollbar-thumb{background:rgba(169,137,90,.5)}
.testimonial{
flex:0 0 19rem;scroll-snap-align:start;
border:1px solid rgba(169,137,90,.28);
padding:1.5rem;
display:flex;flex-direction:column;gap:1rem;
}
.testimonial .face{
width:3.4rem;height:3.4rem;border-radius:50%;
border:1px solid rgba(169,137,90,.5);
display:flex;align-items:center;justify-content:center;
font-family:var(--grotesk);font-size:.5rem;letter-spacing:.16em;
text-transform:uppercase;color:rgba(246,244,238,.42);
flex:0 0 auto;
}
.testimonial blockquote{
font-family:var(--serif-body);font-style:normal;
font-size:1.02rem;line-height:1.6;
color:rgba(246,244,238,.9);
flex:1;
}
.testimonial .who{
font-family:var(--grotesk);
font-size:.6rem;font-weight:500;letter-spacing:.14em;
text-transform:uppercase;color:rgba(246,244,238,.62);
line-height:1.7;
border-top:1px solid rgba(169,137,90,.2);
padding-top:.8rem;
}
/* ---- corporate film block ---- */
.filmblock{padding:7rem 1.5rem}
.filmblock-inner{max-width:62rem;margin:0 auto}
.film-frame{
position:relative;aspect-ratio:16/9;
background:linear-gradient(180deg,#16281F 0%,#1C3A2E 60%,#2A2620 100%);
border:1px solid var(--hairline-soft);
overflow:hidden;margin-bottom:2.8rem;
display:flex;align-items:center;justify-content:center;
}
.film-frame video,.film-frame img{width:100%;height:100%;object-fit:cover;display:block}
.film-frame .slot{
position:relative;z-index:2;text-align:center;
font-family:var(--grotesk);font-size:.62rem;font-weight:500;
letter-spacing:.28em;text-transform:uppercase;
color:rgba(246,244,238,.66);padding:1rem;
}
.film-frame .slot::before{
content:"";display:block;width:2.8rem;height:1px;
background:rgba(169,137,90,.6);margin:0 auto 1rem;
}
/* ---- footer columns + legal ---- */
footer.site .fcols{
display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;
max-width:48rem;margin:0 auto 3.4rem;
text-align:left;
}
footer.site .fcol h4{
font-family:var(--grotesk);
font-size:.58rem;font-weight:500;letter-spacing:.26em;
text-transform:uppercase;color:var(--gold);
margin-bottom:1rem;
}
footer.site .fcol a{
display:block;
font-family:var(--serif-body);
font-size:.98rem;line-height:1.9;
color:rgba(246,244,238,.72);
text-decoration:none;
transition:color .3s ease;
}
footer.site .fcol a:hover{color:var(--gold)}
footer.site .legal{
display:flex;flex-wrap:wrap;justify-content:center;
gap:.4rem 1.6rem;
max-width:62rem;margin:0 auto 1.5rem;
padding-top:1.6rem;
border-top:1px solid rgba(169,137,90,.18);
}
footer.site .legal a{
font-family:var(--grotesk);
font-size:.58rem;font-weight:400;letter-spacing:.16em;
text-transform:uppercase;
color:rgba(246,244,238,.5);
text-decoration:none;
transition:color .3s ease;
}
footer.site .legal a:hover{color:var(--gold)}
footer.site .disclaimer{
max-width:52rem;margin:0 auto;
font-family:var(--grotesk);
font-size:.6rem;font-weight:400;line-height:1.9;
letter-spacing:.04em;
color:rgba(246,244,238,.36);
}
/* ---- subnav (ALJ's sibling row under the page title) ---- */
.subnav{
display:flex;flex-wrap:wrap;justify-content:center;
gap:.2rem 0;
max-width:62rem;margin:0 auto 1rem;
padding:0 1.5rem;
border-bottom:1px solid var(--hairline-soft);
}
.subnav a{
font-family:var(--grotesk);
font-size:.64rem;font-weight:500;
letter-spacing:.18em;text-transform:uppercase;
color:var(--mist);
text-decoration:none;
padding:.9rem 1.2rem;
position:relative;
transition:color .3s ease;
}
.subnav a:hover{color:var(--forest)}
.subnav a.here{color:var(--forest)}
.subnav a.here::after{
content:"";position:absolute;left:1.2rem;right:1.2rem;bottom:-1px;
height:2px;background:var(--gold);
}
/* ---- values list (ALJ: heading + paragraph, no ornament) ---- */
.values{max-width:40rem;margin:0 auto;padding:0 1.5rem 3rem}
.value{padding:2.2rem 0;border-top:1px solid var(--hairline-soft)}
.value h2{
font-family:var(--serif-display);
font-weight:600;font-size:clamp(1.5rem,2.8vw,2rem);
margin-bottom:.8rem;
}
.value p{font-size:1.1rem;line-height:1.78;color:#3E4A44}
/* ---- people grid ---- */
.people{
display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;
max-width:58rem;margin:0 auto;padding:0 1.5rem 3rem;
}
.person .portrait{
aspect-ratio:4/5;
background:linear-gradient(180deg,#16281F 0%,#1C3A2E 70%,#111F19 100%);
border:1px solid var(--hairline-soft);
display:flex;align-items:center;justify-content:center;
margin-bottom:1.1rem;
}
.person .portrait .slot{
font-family:var(--grotesk);font-size:.56rem;font-weight:500;
letter-spacing:.26em;text-transform:uppercase;
color:rgba(246,244,238,.4);
}
.person h3{font-family:var(--serif-display);font-weight:600;font-size:1.2rem}
.person .role{
font-family:var(--grotesk);font-size:.6rem;font-weight:500;
letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
margin:.35rem 0 .6rem;
}
.person .bio{font-size:.98rem;line-height:1.6;color:#4A554F}
@media (max-width:900px){
.statement{padding:5rem 1.4rem}
.stats{gap:2rem 2.4rem}
.news-item{grid-template-columns:1fr;gap:.4rem}
.news-item .more{display:none}
.newsblock{padding:5rem 1.4rem 4.5rem}
.testimonial{flex-basis:16rem}
.filmblock{padding:5rem 1.4rem}
footer.site .fcols{grid-template-columns:1fr 1fr;gap:2rem}
.people{grid-template-columns:1fr;gap:2rem}
.subnav{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}
.subnav a{white-space:nowrap;padding:.8rem .9rem}
}
/* ---- full-bleed corporate film, ALJ-style: the film spans the page and
the statement sits beneath it, not beside it ---- */
.film-bleed{
position:relative;
width:100vw;margin-left:calc(50% - 50vw);
aspect-ratio:21/9;
max-height:78vh;
overflow:hidden;
background:var(--ink-deep);
}
.film-bleed .films{position:absolute;inset:0;--dissolve:1.6s}
.film-bleed .film-video{
position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;display:block;
opacity:0;transition:opacity var(--dissolve) ease-in-out;
}
.film-bleed .film-video.on{opacity:1}
.film-bleed .film-veil{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(15,27,21,.34) 0%,rgba(15,27,21,.12) 45%,rgba(15,27,21,.42) 100%);
}
.filmblock{display:none}
/* film layer on sector page headers */
.page-hero .ph-video{
position:absolute;inset:0;z-index:2;
width:100%;height:100%;object-fit:cover;display:block;
}
.page-hero .ph-inner{z-index:4}
.page-hero::after{
content:"";position:absolute;inset:0;z-index:3;
background:linear-gradient(180deg,rgba(15,27,21,.42) 0%,rgba(15,27,21,.26) 42%,rgba(12,23,18,.86) 100%);
}
/* ---- footer, compacted ---- */
footer.site{padding:3.4rem 1.5rem 1.6rem}
footer.site .fcols{gap:1.6rem 2.2rem;margin-bottom:2.2rem;max-width:58rem}
footer.site .fcol h4{font-size:.54rem;letter-spacing:.22em;margin-bottom:.55rem}
footer.site .fcol a{font-size:.9rem;line-height:1.7}
footer.site .fcentenary{margin:0 auto 1.4rem}
footer.site .fcentenary .cmark{width:128px}
footer.site .contact-line{font-size:1.02rem}
footer.site .cities{margin-top:.7rem;font-size:.58rem;letter-spacing:.3em;text-indent:.3em}
footer.site .seal{display:none}
footer.site .legal{margin:1.8rem auto 1rem;padding-top:1.1rem;gap:.3rem 1.2rem}
footer.site .legal a{font-size:.55rem}
footer.site .disclaimer{font-size:.55rem;line-height:1.75;max-width:46rem}
footer.site .colophon{display:none}
@media (max-width:900px){
footer.site{padding:2.8rem 1.4rem 1.4rem}
.film-bleed{aspect-ratio:16/9}
}
/* ---- news card rail with dots (ALJ homepage pattern) ---- */
.ncarousel{position:relative;margin-top:2.2rem}
.ntrack{
display:flex;gap:1.4rem;
overflow-x:auto;scroll-snap-type:x mandatory;
scroll-behavior:smooth;
padding-bottom:.4rem;
scrollbar-width:none;
}
.ntrack::-webkit-scrollbar{display:none}
.ncard{
flex:0 0 calc((100% - 2.8rem) / 3);
scroll-snap-align:start;
text-decoration:none;color:var(--ink);
display:flex;flex-direction:column;
}
.ncard .nimg{
aspect-ratio:3/2;
background:linear-gradient(180deg,#16281F 0%,#1C3A2E 65%,#111F19 100%);
border:1px solid var(--hairline-soft);
display:flex;align-items:center;justify-content:center;
margin-bottom:1rem;
}
.ncard .nimg img{width:100%;height:100%;object-fit:cover;display:block}
.ncard .nimg .slot{
font-family:var(--grotesk);font-size:.54rem;font-weight:500;
letter-spacing:.26em;text-transform:uppercase;color:rgba(246,244,238,.4);
}
.ncard .ndate{
display:block;
font-family:var(--grotesk);
font-size:.58rem;font-weight:500;
letter-spacing:.22em;text-transform:uppercase;
color:var(--mist);margin-bottom:.5rem;
}
.ncard h3{
font-family:var(--serif-display);
font-weight:500;font-size:1.16rem;line-height:1.36;
transition:color .3s ease;
}
.ncard:hover h3{color:var(--forest)}
.ndots{
display:flex;justify-content:center;gap:.55rem;
margin-top:2rem;
}
.ndots button{
width:7px;height:7px;padding:0;border-radius:50%;
border:1px solid var(--hairline);
background:none;cursor:pointer;
transition:background .3s ease,border-color .3s ease,transform .3s ease;
}
.ndots button.on{background:var(--gold);border-color:var(--gold);transform:scale(1.25)}
@media (max-width:1000px){ .ncard{flex-basis:calc((100% - 1.4rem) / 2)} }
@media (max-width:680px){ .ncard{flex-basis:100%} }
/* ---- hero mark: no cage. The double-hairline plate was a holding-page
motif; the supplied logo stands on its own. ---- */
.hero .seal{border:none;outline:none;padding:0;margin-bottom:2.4rem}
.hero .seal .seal-sub{
border-top:none;
margin-top:.7rem;padding-top:0;
letter-spacing:.6em;text-indent:.6em;
color:rgba(246,244,238,.72);
}
.hero .seal .seal-mark svg{height:2.1rem}
/* ============================================================
FONT SETS — preview only. The logo is vector and never changes.
Set a class on : font-house | font-modern | font-warm | font-clean
============================================================ */
/* ---- Nine alternate typeface sets lived here until 17 Aug 2026:
House (Cormorant + EB Garamond), Clean, Modern, Manrope,
Instrument, Editorial, Spectral, Warm. Archivo was chosen and
the rest are deleted rather than left commented — dead CSS that
overrides live tokens is how a settled decision quietly comes
undone six weeks later. Git has them if the choice reopens. ---- */
/* ---- ARCHIVO, THE HOUSE FACE. Applies with or without the class,
because the :root tokens now carry it. The class is kept only so
the preview picker still resolves. ---- */
.font-archivo{
--serif-display:'Archivo',-apple-system,Arial,sans-serif;
--serif-body:'Archivo',-apple-system,Arial,sans-serif;
--grotesk:'Archivo',-apple-system,Arial,sans-serif;
}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.024em}
body{font-size:15.8px;line-height:1.68}
/* a grotesque set at display size needs the tracking pulled in hard,
and it does not want the italics a Garamond wore comfortably */
.hero h1,.article-hero h1,.page-hero h1{letter-spacing:-.036em;font-weight:500}
/* ---- THE ONE EXCEPTION TO ARCHIVO ----
Arshad, 17 Aug: the hero line stays in the previous face; everything
else is Archivo. The sher is the only piece of writing on this site
that is not corporate voice, and a grotesque flattens it. Cormorant
Garamond is loaded for this element and nothing else. */
.hero-story .proverb,
.pullquote blockquote{
font-family:var(--line-serif);
font-style:italic;font-weight:500;
letter-spacing:0;
}
.statement p,.testimonial blockquote{font-style:normal;letter-spacing:-.018em}
.prose .drop::first-letter{font-weight:500}
/* ---- story plates now carry real photographs ---- */
.plate .frame img{width:100%;height:100%;object-fit:cover;display:block}
.plate .frame{aspect-ratio:16/10}
.plate-pair .frame{aspect-ratio:4/5}
.plate.full .frame{aspect-ratio:21/9}
.article-hero .ah-media{background-size:cover;background-position:center}
/* ============================================================
OUR STORY — the components ALJ's story page needs that we
did not have. Added 17 Aug 2026.
============================================================ */
/* section kicker: ALJ labels each block above its heading */
.article .kicker,.prose .kicker{
font-family:var(--grotesk);
font-size:.6rem;font-weight:600;
letter-spacing:.3em;text-transform:uppercase;
color:var(--gold);
margin-bottom:1.1rem;
}
.article .prose .kicker{display:block}
/* stats inside an article measure, not a full-width band */
.article .stats{
display:grid;grid-template-columns:repeat(3,1fr);
gap:1.6rem;
margin:2.8rem 0 .6rem;
padding-top:2rem;
border-top:1px solid var(--hairline-soft);
}
.article .stats .stat{text-align:left}
.article .stats .fig{
display:block;font-family:var(--serif-display);
font-weight:500;font-size:2.1rem;line-height:1;
letter-spacing:-.03em;color:var(--forest);
}
.article .stats .cap{
display:block;margin-top:.5rem;
font-family:var(--grotesk);font-size:.6rem;font-weight:500;
letter-spacing:.2em;text-transform:uppercase;color:var(--mist);
}
/* the asset roll — four landmark hotels, set as a record not a brochure */
.assets{
/* shares the prose measure (37em) so its left edge lines up with the
paragraph above it. The plates keep their own wider 60rem measure —
two measures is a rhythm, three is a ragged edge. */
max-width:37em;margin:2.4rem auto 3.6rem;
border-top:1px solid var(--hairline-soft);
}
.assets .asset{
display:flex;align-items:baseline;justify-content:space-between;
gap:1.4rem;padding:1.05rem .2rem;
border-bottom:1px solid var(--hairline-soft);
}
.assets .a-name{
font-family:var(--serif-display);font-weight:500;
font-size:1.16rem;letter-spacing:-.02em;color:var(--ink);
}
.assets .a-loc{
flex:0 0 auto;
font-family:var(--grotesk);font-size:.6rem;font-weight:500;
letter-spacing:.22em;text-transform:uppercase;color:var(--mist);
}
/* entity cards — the two listed companies, and the two charitable arms */
.entities{
/* the wider of the two measures, matching .plate — two cards do not fit
the prose column without going cramped */
max-width:60rem;margin:2.6rem auto 4rem;
display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;
}
.entities .entity{
padding:2rem 1.9rem 1.7rem;
background:rgba(28,58,46,.045);
border:1px solid var(--hairline-soft);
border-top:2px solid var(--gold);
}
.entities .entity h4{
font-family:var(--serif-display);font-weight:500;
font-size:1.28rem;letter-spacing:-.024em;
color:var(--forest);margin:0 0 .5rem;
}
.entities .e-meta{
font-family:var(--grotesk);font-size:.58rem;font-weight:500;
letter-spacing:.2em;text-transform:uppercase;color:var(--mist);
margin-bottom:1.1rem;
}
.entities .entity p{
font-family:var(--serif-body);font-size:.97rem;line-height:1.72;
color:var(--ink);margin:0 0 .85rem;
}
.entities .entity p:last-child{margin-bottom:0}
/* the Chairman — the one place a person speaks rather than a company */
.voice{
width:100vw;margin:4.6rem 0 4.6rem calc(50% - 50vw);
padding:5.4rem 1.5rem;
background:var(--forest);color:var(--paper);
}
.voice .voice-inner{max-width:46rem;margin:0 auto;text-align:center}
.voice blockquote{
font-family:var(--serif-display);font-weight:500;
font-size:clamp(1.32rem,2.7vw,1.86rem);line-height:1.42;
letter-spacing:-.024em;
margin:0;color:var(--paper);
}
.voice .who{
margin-top:1.8rem;
font-family:var(--grotesk);font-size:.62rem;font-weight:500;
letter-spacing:.24em;text-transform:uppercase;
color:rgba(246,244,238,.62);line-height:2;
}
.voice .stats{
display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;
margin-top:3.4rem;padding-top:2.4rem;
border-top:1px solid rgba(169,137,90,.4);
}
.voice .stats .fig{
display:block;font-family:var(--serif-display);font-weight:500;
font-size:1.9rem;line-height:1;letter-spacing:-.03em;color:var(--gold);
}
.voice .stats .cap{
display:block;margin-top:.5rem;
font-family:var(--grotesk);font-size:.56rem;font-weight:500;
letter-spacing:.2em;text-transform:uppercase;
color:rgba(246,244,238,.55);
}
.voice .ph{border-bottom-color:rgba(169,137,90,.6);color:rgba(246,244,238,.6)}
/* the timeline — ALJ closes its story on one */
ol.timeline{
list-style:none;max-width:37em;margin:2.6rem auto 4rem;padding:0;
}
ol.timeline li{
display:grid;grid-template-columns:7.5rem 1fr;
gap:1.6rem;align-items:baseline;
padding:1.15rem 0;
border-bottom:1px solid var(--hairline-soft);
}
ol.timeline li:first-child{border-top:1px solid var(--hairline-soft)}
ol.timeline .t-year{
font-family:var(--serif-display);font-weight:500;
font-size:1.22rem;letter-spacing:-.02em;color:var(--gold);
}
ol.timeline .t-what{
font-family:var(--serif-body);font-size:.99rem;line-height:1.7;color:var(--ink);
}
@media (max-width:760px){
.entities{grid-template-columns:1fr}
.article .stats,.voice .stats{grid-template-columns:1fr 1fr;gap:1.4rem}
.assets .asset{flex-direction:column;gap:.3rem}
ol.timeline li{grid-template-columns:1fr;gap:.35rem}
.voice{padding:4rem 1.4rem}
}
/* ============================================================
THE ALJ CARD SYSTEM — rebuilt 17 Aug 2026 from the rendered
page, not from a description of it. The first attempt was
centred editorial prose and was rightly rejected: ALJ's story
page is a CARD MOSAIC, and its timeline is a horizontal rail
of tall image cards, not a list.
Measurements taken from alj.com's own main.css:
.card-column.big-col height: 358px (350 / 330 down-screen)
.card-column padding: 8px
.card-box absolute, inset ~8px → equal-height tiles
.card-text h4 (the lead) 24px / weight 100 / 28px line
.quote-box h4 24px / weight 100 p 16px / 20px
.statis-box centred, padding 50px 12px 12px
.info-box centred, padding 90px 35px 35px
.bg-padding 30px
.bar-slider cream band, 70px top/bottom
.slidee-item img 400px tall
.item-desc white bar, max-height 62px → 100% on hover
Geometry is ALJ's. Palette is ours — forest, gold, paper. We are
not copying their teal.
============================================================ */
.card-section{padding:4.6rem 0}
.card-section.tint{background:#EFEBE2}
.card-section .card-text{
max-width:var(--page-max);margin:0 auto 2.2rem;padding:0 1.5rem;
display:grid;grid-template-columns:2fr 1fr;gap:2rem;align-items:start;
}
.card-section .card-text .ct-body{max-width:46rem}
.card-section .card-text h2{
font-size:clamp(1.7rem,3.2vw,2.1rem);font-weight:500;
letter-spacing:-.03em;color:var(--forest);
margin:0 0 1.1rem;
}
/* ALJ's lead: an h4 at 24px, weight 100. The weight is the whole effect —
a large, very light line above small dense body copy. */
.card-section .card-text h4,.card-section .lead-h4{
font-family:var(--serif-display);
font-size:clamp(1.16rem,2.1vw,1.5rem);font-weight:100;line-height:1.34;
letter-spacing:-.02em;color:var(--ink);
margin:0 0 1.2rem;
}
.card-section .card-text p{
font-size:.9rem;line-height:1.62;color:#4A5550;margin:0 0 .85rem;max-width:42rem;
}
.card-section .card-text .ct-mark{justify-self:end;opacity:.5;width:118px}
.card-section .card-text .ct-mark svg{width:100%;height:auto;display:block;color:var(--forest)}
.readmore{
display:inline-block;margin-top:.5rem;
font-family:var(--grotesk);font-size:.78rem;font-weight:600;
color:var(--gold);text-decoration:none;letter-spacing:.01em;
}
.readmore::after{content:" \203A";font-weight:400}
.readmore:hover{color:var(--forest)}
/* ---- the mosaic ---- */
.card-boxes{max-width:var(--page-max);margin:0 auto;padding:0 1rem}
.main-card-row{display:flex;flex-flow:row wrap;align-items:stretch}
.card-column{position:relative;padding:8px;display:flex;flex-direction:column}
.card-column.big-col{height:358px}
.card-column.c2{width:16.666%}
.card-column.c3{width:25%}
.card-column.c4{width:33.333%}
.card-column.c6{width:50%}
.card-column > .card-box{position:absolute;top:8px;bottom:8px;left:8px;right:8px}
.card-box{
display:flex;flex-direction:column;justify-content:flex-end;
overflow:hidden;background-size:cover;background-position:50%;
}
.card-box.center-content{justify-content:center}
.card-box.bg-padding{padding:30px}
.card-box.toTop{justify-content:flex-start}
/* image tile */
.img-box{background-size:cover;background-position:50%;background-repeat:no-repeat}
/* quote tile — light ground, very light large quote, bold small attribution */
.quote-box{background:#fff;color:#4A5550}
.quote-box.forest{background:var(--forest);color:var(--paper)}
.quote-box .q{
font-family:var(--line-serif);font-style:italic;
font-size:1.32rem;font-weight:500;line-height:1.3;letter-spacing:0;
margin:0 0 1.1rem;
}
.quote-box.plain .q{font-family:var(--serif-display);font-style:normal;font-weight:200;letter-spacing:-.02em}
.quote-box .who{
font-family:var(--grotesk);font-size:.78rem;font-weight:700;line-height:1.35;
color:inherit;margin:0;
}
.quote-box .who span{display:block;font-weight:400;opacity:.72}
/* stat tile — ALJ stacks two of these in a narrow column */
.statis-box{
background:var(--forest);color:var(--paper);
text-align:center;padding:2.6rem .9rem 1rem;
justify-content:center;
}
.statis-box.gold{background:var(--gold);color:#1B1206}
.statis-box .big{
display:block;font-family:var(--serif-display);
font-weight:200;font-size:2.4rem;line-height:1;letter-spacing:-.04em;
color:var(--gold);
}
.statis-box.gold .big{color:#2A1D0B}
.statis-box p{
margin:.7rem 0 0;font-family:var(--grotesk);
font-size:.62rem;font-weight:500;line-height:1.35;
letter-spacing:.18em;text-transform:uppercase;opacity:.82;
}
.statis-box .icon{position:absolute;top:14px;left:14px;width:26px;opacity:.5}
.statis-box .icon svg{width:100%;height:auto;display:block;color:currentColor}
/* download tile — background image, content pinned bottom */
.download-box{position:relative;color:var(--paper);justify-content:flex-end;padding:1.2rem}
.download-box::after{
content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(15,27,21,.15),rgba(15,27,21,.86));
}
.download-box .box-content{position:relative;z-index:2}
.download-box .big{font-family:var(--grotesk);font-size:.86rem;font-weight:700;line-height:1.1;margin-bottom:.3rem}
.download-box p{margin:0;font-size:.84rem;line-height:1.24;opacity:.75}
/* info tile — solid, centred, light text */
.info-box{
background:var(--forest);color:var(--paper);
text-align:center;padding:3.4rem 1.9rem 1.9rem;justify-content:center;
}
.info-box .icon{position:absolute;top:20px;left:20px;width:34px;opacity:.55}
.info-box .icon svg{width:100%;height:auto;color:currentColor}
.info-box p{margin:0 0 .9rem;font-size:.92rem;line-height:1.5}
.info-box p:last-child{margin-bottom:0}
.info-box .big{display:block;font-family:var(--serif-display);font-weight:200;font-size:1.6rem;line-height:1.15;letter-spacing:-.03em;margin-bottom:.7rem}
/* text tile — carries a heading inside the mosaic instead of above it */
.text-box{background:#fff;color:#4A5550;padding:2rem;justify-content:flex-start}
.text-box h2{
font-family:var(--serif-display);font-size:1.52rem;font-weight:500;
letter-spacing:-.03em;color:var(--forest);margin:0 0 .8rem;
}
.text-box .lead{font-size:1.02rem;line-height:1.5;color:var(--ink);margin:0 0 .8rem}
.text-box p{font-size:.86rem;line-height:1.58;margin:0 0 .7rem}
.text-box .readmore{margin-top:.2rem}
/* the narrow column of two stacked tiles */
.card-column.vertical-container{padding-top:0;padding-bottom:0;justify-content:space-between}
.card-column.vertical-container .column-vertical{position:relative;flex:1;display:flex}
.card-column.vertical-container .column-vertical + .column-vertical{margin-top:16px}
.card-column.vertical-container .column-vertical > .card-box{position:absolute;inset:0}
/* ---- the sector strip, ALJ's business-slider ---- */
.sector-strip{background:var(--forest);padding:2.6rem 1.5rem}
.sector-strip .ss-inner{
max-width:var(--page-max);margin:0 auto;
display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
background:rgba(169,137,90,.28);
}
.sector-strip a{
background:var(--forest);
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:.9rem;padding:2.2rem 1rem;text-decoration:none;
transition:background .35s ease;
}
.sector-strip a:hover{background:#22483A}
.sector-strip .ss-icon{width:46px;color:var(--gold)}
.sector-strip .ss-icon svg{width:100%;height:auto;display:block}
.sector-strip .ss-name{
font-family:var(--grotesk);font-size:.64rem;font-weight:500;
letter-spacing:.2em;text-transform:uppercase;color:var(--paper);text-align:center;
}
/* ---- the full-width film band, ALJ's video-wide ---- */
.video-wide{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:400px;overflow:hidden;background:var(--ink-deep)}
.video-wide .films{position:absolute;inset:0}
.video-wide .film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--dissolve,1.6s) ease-in-out}
.video-wide .film-video.on{opacity:1}
.video-wide .vw-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,27,21,.30),rgba(15,27,21,.44))}
/* ---- THE TIMELINE — ALJ's bar-slider ----
A horizontal rail of tall image cards. The year sits above each card
at 40px in a light weight; a white caption bar is pinned to the foot
of the image at 62px and grows to the full card on hover. */
.bar-slider{
width:100vw;margin-left:calc(50% - 50vw);
background:#F0EDEA;color:#4A5550;
padding:4.4rem 0 4.6rem;
}
.bar-slider .description{max-width:var(--page-max);margin:0 auto 1.9rem;padding:0 1.5rem}
.bar-slider .description h2{
font-size:clamp(1.7rem,3.2vw,2.1rem);font-weight:500;letter-spacing:-.03em;
color:var(--forest);margin:0 0 .8rem;
}
.bar-slider .description p{font-size:.98rem;line-height:1.6;max-width:46rem;margin:0 0 .5rem}
.timeline-rail{
display:flex;gap:15px;
overflow-x:auto;scroll-snap-type:x proximity;
padding:0 max(1.5rem,calc((100vw - var(--page-max))/2 + var(--page-pad))) .6rem;
/* snap aligns to the SCROLLPORT edge, not the padding edge — without
this the browser scrolls the rail by exactly the left padding on
load and the first card sits flush to the viewport. */
scroll-padding-left:max(1.5rem,calc((100vw - var(--page-max))/2 + var(--page-pad)));
scrollbar-width:none;
}
.timeline-rail::-webkit-scrollbar{display:none}
.slidee-item{flex:0 0 300px;scroll-snap-align:start;position:relative}
.slidee-item .item-year{
font-family:var(--serif-display);
font-size:2.5rem;font-weight:300;line-height:1;letter-spacing:-.03em;
color:var(--forest);margin:0 0 .8rem;
}
.slidee-item .item-media{
position:relative;height:400px;overflow:hidden;
background:linear-gradient(180deg,#16281F,#1C3A2E 60%,#2A2620);
background-size:cover;background-position:50%;
}
.slidee-item .item-desc{
position:absolute;left:0;right:0;bottom:0;
background:#fff;max-height:62px;overflow:hidden;
transition:max-height 1.1s ease;
}
.slidee-item:hover .item-desc,.slidee-item:focus-within .item-desc{max-height:100%}
.slidee-item .item-desc p{font-size:.82rem;line-height:1.45;margin:20px}
.slidee-item.pending .item-media{background:repeating-linear-gradient(135deg,#E6E1D6 0 14px,#EFEBE2 14px 28px)}
.slidee-item.pending .item-year{color:var(--mist)}
.rail-hint{
max-width:var(--page-max);margin:1.2rem auto 0;padding:0 1.5rem;
font-family:var(--grotesk);font-size:.6rem;font-weight:500;
letter-spacing:.22em;text-transform:uppercase;color:var(--mist);
}
@media (max-width:1000px){
.card-column.c2,.card-column.c3{width:50%}
.card-column.c4,.card-column.c6{width:100%}
.card-section .card-text{grid-template-columns:1fr}
.card-section .card-text .ct-mark{display:none}
}
@media (max-width:640px){
.card-column.c2,.card-column.c3{width:100%}
.card-column.big-col{height:300px}
.sector-strip .ss-inner{grid-template-columns:1fr}
.video-wide{height:260px}
.slidee-item{flex:0 0 78vw}
.slidee-item .item-media{height:320px}
}
/* ============================================================
OUR VALUES + OUR PEOPLE — built 17 Aug 2026 from the rendered
alj.com pages, measured the same way Our Story was.
VALUES (alj.com/en/about/values/)
hero h1 + sibling-link row
intro: h2 + large light lead + small paragraphs, 9-col measure
section.card-section.vertical-card — a HALF/HALF split:
left col-md-6 .card-text.vertical-text > .card-wrapper
the values as h2 + paragraph pairs, stacked
right col-md-6 .card-boxes — a card mosaic, and the last
tile is an .info-box carrying "Our Purpose"
.vertical-card .card-wrapper padding 0 34px
.vertical-card .card-boxes padding 0 20px
.vertical-text h2 margin 5px 0 10px, line-height 1
.vertical-text p margin 0 0 20px, line-height 20px
PEOPLE (alj.com/en/about/our-people/)
hero h1 + sibling-link row
intro: h2 "Our Leadership" + h4 lead + a paragraph
section.ceo-people — the Chairman band:
a label heading, a 3-col portrait card, a 9-col statement
section.other-people — "Executive Leadership", a 4-across grid
.ceo-people/.other-people padding 80px 0 40px
.person h2 (name) 24px / 400 / margin-top 30px
.person p (title, org) 16px / 400
.person a (View Bio) 16px / 500 / margin-top 15px
.person margin-bottom 40px
then the sector strip, as on the story page
Geometry theirs, palette ours.
============================================================ */
/* ---- the half/half values split ---- */
.vertical-card .vc-inner{
max-width:var(--page-max);margin:0 auto;padding:0 1.5rem;
display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:start;
}
/* .card-text is itself a grid container (2fr/1fr) with its own max-width
and auto margins — inheriting that inside the values split collapsed the
right-hand column to 52px. Reset it when it is the left half. */
.card-text.vertical-text{
display:block;max-width:none;margin:0;padding:10px 0 0;
}
.vertical-card .card-wrapper{padding:0 34px 0 0}
.vertical-text .value-item{margin-bottom:1.9rem}
.vertical-text .value-item:last-child{margin-bottom:0}
/* specificity has to beat `.card-section .card-text h2`, which was
pushing these to the section-heading size. ALJ sets the value names
distinctly smaller and lighter than the section h2 above them. */
.card-section .card-text.vertical-text h2,.vertical-text h2{
font-family:var(--serif-display);
font-size:1.6rem;font-weight:400;line-height:1;
letter-spacing:-.03em;color:var(--forest);
margin:5px 0 10px;
}
.vertical-text p{
margin:0 0 20px;font-size:.9rem;line-height:1.42;color:#4A5550;
}
.vertical-text p:last-child{margin-bottom:0}
/* the right half's mosaic sits in a shorter row than the story page's.
NOTE the margin reset: .card-boxes carries `margin:0 auto` for the
full-width story page, and auto margins on a grid item override
`justify-self:stretch` — the box shrink-wrapped to 52px and the
percentage-width tiles inside it collapsed with it. */
.vertical-card .card-boxes{padding:0 20px 0 0;max-width:none;margin:0}
.vertical-card .card-column.big-col{height:232px}
.vertical-card .card-column.c12{width:100%}
/* ---- the purpose tile ---- */
.info-box .purpose-label{
display:block;font-family:var(--grotesk);
font-size:.58rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
opacity:.62;margin-bottom:.9rem;
}
/* ---- OUR PEOPLE ---- */
.ceo-people,.other-people{padding:5rem 0 2.5rem}
.ceo-people{background:#EFEBE2}
.people-inner{max-width:var(--page-max);margin:0 auto;padding:0 1.5rem}
.people-inner > h2{
font-family:var(--serif-display);
font-size:clamp(1.7rem,3.2vw,2.1rem);font-weight:500;
letter-spacing:-.03em;color:var(--forest);margin:0 0 1.8rem;
}
/* the Chairman band: a 3-column portrait card beside a 9-column statement */
.chairman-row{display:grid;grid-template-columns:3fr 9fr;gap:2.2rem;align-items:start}
.chairman-row .statement-col p{font-size:.9rem;line-height:1.62;color:#4A5550;margin:0 0 .9rem}
.chairman-row .statement-col p:first-child{
font-family:var(--serif-display);
font-size:clamp(1.1rem,2vw,1.36rem);font-weight:100;line-height:1.34;
letter-spacing:-.02em;color:var(--ink);margin-bottom:1.1rem;
}
/* the person card — portrait, name, title, org, bio link */
.people-row{
display:grid;grid-template-columns:repeat(4,1fr);
gap:0 1.9rem;
}
.person{margin-bottom:40px}
.person .portrait{
aspect-ratio:3/4;background:linear-gradient(180deg,#16281F,#1C3A2E 60%,#2A2620);
background-size:cover;background-position:50% 20%;
display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.person .portrait.empty{
background:repeating-linear-gradient(135deg,#E6E1D6 0 14px,#EFEBE2 14px 28px);
}
.person .portrait .slot{
font-family:var(--grotesk);font-size:.58rem;font-weight:500;
letter-spacing:.28em;text-transform:uppercase;color:var(--mist);
}
.person h3,.person h2{
font-family:var(--serif-display);
font-size:1.5rem;font-weight:400;letter-spacing:-.025em;
color:var(--forest);margin:30px 0 .35rem;line-height:1.2;
}
.person p{font-size:.88rem;font-weight:400;line-height:1.45;color:#4A5550;margin:0}
.person p.role{color:var(--gold);font-weight:500}
.person .viewbio{
display:inline-block;margin-top:15px;
font-family:var(--grotesk);font-size:.8rem;font-weight:500;
color:var(--gold);text-decoration:none;
}
.person .viewbio::after{content:" \203A"}
.person .viewbio:hover{color:var(--forest)}
/* ALJ ends People on an accordion of the wider organisation */
.people-accordion{max-width:var(--page-max);margin:0 auto;padding:0 1.5rem 1rem}
.people-accordion .pa-lead{
font-family:var(--serif-display);font-size:1.18rem;font-weight:100;
line-height:1.4;letter-spacing:-.02em;color:var(--ink);
margin:0 0 1.6rem;max-width:44rem;
}
.people-accordion details{border-top:1px solid var(--hairline-soft)}
.people-accordion details:last-of-type{border-bottom:1px solid var(--hairline-soft)}
.people-accordion summary{
cursor:pointer;list-style:none;padding:1.15rem .2rem;
display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
font-family:var(--serif-display);font-size:1.16rem;font-weight:400;
letter-spacing:-.02em;color:var(--forest);
}
.people-accordion summary::-webkit-details-marker{display:none}
.people-accordion summary::after{content:"+";color:var(--gold);font-weight:400}
.people-accordion details[open] summary::after{content:"\2013"}
.people-accordion .pa-body{padding:0 .2rem 1.3rem;font-size:.9rem;line-height:1.62;color:#4A5550}
@media (max-width:1000px){
.vertical-card .vc-inner{grid-template-columns:1fr;gap:2.6rem}
.vertical-card .card-wrapper{padding:0}
.vertical-card .card-boxes{padding:0}
.people-row{grid-template-columns:repeat(2,1fr)}
.chairman-row{grid-template-columns:1fr;gap:1.6rem}
}
@media (max-width:600px){
.people-row{grid-template-columns:1fr}
}
/* ============================================================
THE REMAINING ALJ COMPONENTS — 17 Aug 2026, measured from the
mirrored pages:
investments/partner-with-us/ → .investment-section (region nav)
land-and-real-estate/… → .landandreal (projects band)
media-center/overview/ → .media-blocks (category grid)
media-center/in-the-news/ → .media-listing + sidebar
Geometry theirs, palette ours.
============================================================ */
/* ---- REGION NAVIGATOR. ALJ closes Investments with a centred
label and the regions as very large light headings. ---- */
.region-nav{
width:100vw;margin-left:calc(50% - 50vw);
background:var(--forest);color:var(--paper);
padding:5rem 0 5.4rem;
}
.region-nav .rn-inner{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad)}
.region-nav .rn-label{
text-align:center;font-family:var(--grotesk);
font-size:.6rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
color:var(--gold);margin-bottom:2.8rem;
}
.region-nav .rn-lead{
max-width:40rem;margin:0 auto 3.4rem;text-align:center;
font-family:var(--serif-display);font-weight:100;
font-size:clamp(1.14rem,2.1vw,1.5rem);line-height:1.36;letter-spacing:-.02em;
color:rgba(246,244,238,.9);
}
.region-nav .rn-row{
display:grid;grid-template-columns:repeat(3,1fr);
border-top:1px solid rgba(169,137,90,.32);
}
.region-nav a{
display:block;text-decoration:none;padding:2.2rem 1.6rem 2.2rem 0;
border-bottom:1px solid rgba(169,137,90,.32);
transition:background .35s ease,padding .35s ease;
}
.region-nav a + a{border-left:1px solid rgba(169,137,90,.32);padding-left:1.6rem}
.region-nav a:hover{background:rgba(169,137,90,.09)}
.region-nav a h3{
font-family:var(--serif-display);font-weight:200;
font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.05;letter-spacing:-.035em;
color:var(--paper);margin:0 0 .5rem;
}
.region-nav a p{
margin:0;font-size:.86rem;line-height:1.5;color:rgba(246,244,238,.66);max-width:22rem;
}
.region-nav a .go{
display:inline-block;margin-top:1rem;
font-family:var(--grotesk);font-size:.6rem;font-weight:600;
letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
/* ---- PROJECTS BAND. ALJ's "Completed, current and future projects":
a heading over a grid of image cards with a caption strip. ---- */
.projects{padding:4.6rem 0}
.projects.tint{background:#EFEBE2}
.projects .pj-inner{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad)}
.projects h2{
font-size:clamp(1.55rem,3vw,1.95rem);font-weight:500;letter-spacing:-.03em;
color:var(--forest);margin:0 0 .7rem;
}
.projects .pj-lead{font-size:.92rem;line-height:1.6;color:#4A5550;max-width:42rem;margin:0 0 2.2rem}
.pj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.pj-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--hairline-soft)}
.pj-card .pj-media{
height:230px;background-size:cover;background-position:50%;
background-image:repeating-linear-gradient(135deg,#E6E1D6 0 14px,#EFEBE2 14px 28px);
}
.pj-card .pj-body{padding:1.1rem 1.2rem 1.3rem}
.pj-card h4{
font-family:var(--serif-display);font-size:1.14rem;font-weight:500;
letter-spacing:-.025em;color:var(--forest);margin:0 0 .35rem;
}
.pj-card .pj-meta{
font-family:var(--grotesk);font-size:.58rem;font-weight:500;
letter-spacing:.2em;text-transform:uppercase;color:var(--mist);margin:0 0 .6rem;
}
.pj-card p{font-size:.86rem;line-height:1.55;color:#4A5550;margin:0}
/* ---- MEDIA BLOCKS. ALJ's News overview is a grid of category
tiles, each a heading over a short list of recent items. ---- */
.media-blocks{padding:4.4rem 0 4.8rem}
.media-blocks .mb-inner{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad)}
.mb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline-soft);border:1px solid var(--hairline-soft)}
.mb-block{background:var(--paper);padding:1.9rem 1.7rem 1.7rem;display:flex;flex-direction:column}
.mb-block h3{
font-family:var(--serif-display);font-size:1.24rem;font-weight:500;
letter-spacing:-.025em;color:var(--forest);margin:0 0 1rem;
}
.mb-block ul{list-style:none;margin:0 0 1.2rem;padding:0;flex:1}
.mb-block li{padding:.62rem 0;border-top:1px solid var(--hairline-soft);font-size:.86rem;line-height:1.45}
.mb-block li:first-child{border-top:none}
.mb-block li .d{
display:block;font-family:var(--grotesk);font-size:.56rem;font-weight:500;
letter-spacing:.2em;text-transform:uppercase;color:var(--mist);margin-bottom:.2rem;
}
.mb-block .readmore{margin-top:auto}
/* ---- FEATURED STRIP. ALJ's News hero is a rotating set of
headline cards; ours is a static rail of the same card. ---- */
.featured{width:100vw;margin-left:calc(50% - 50vw);background:var(--forest);padding:3rem 0 3.4rem}
.featured .ft-inner{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad)}
.featured .ft-label{
font-family:var(--grotesk);font-size:.6rem;font-weight:600;letter-spacing:.3em;
text-transform:uppercase;color:var(--gold);margin-bottom:1.6rem;
}
.ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1.4rem}
.ft-card{background:rgba(246,244,238,.05);border:1px solid rgba(169,137,90,.26);display:flex;flex-direction:column;text-decoration:none}
.ft-card .ft-media{height:170px;background-size:cover;background-position:50%;background-image:repeating-linear-gradient(135deg,rgba(169,137,90,.14) 0 14px,rgba(169,137,90,.05) 14px 28px)}
.ft-card.lead .ft-media{height:250px}
.ft-card .ft-body{padding:1.1rem 1.2rem 1.3rem}
.ft-card .d{font-family:var(--grotesk);font-size:.56rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.45rem}
.ft-card h3{font-family:var(--serif-display);font-size:1.06rem;font-weight:400;line-height:1.32;letter-spacing:-.02em;color:var(--paper);margin:0}
.ft-card.lead h3{font-size:1.42rem}
/* ---- MEDIA LISTING + SIDEBAR. ALJ's In the News. ---- */
.media-listing{padding:4rem 0 5rem}
.ml-inner{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad);display:grid;grid-template-columns:8fr 4fr;gap:3rem}
.ml-lead{
font-family:var(--serif-display);font-weight:100;
font-size:clamp(1.1rem,2vw,1.4rem);line-height:1.36;letter-spacing:-.02em;
color:var(--ink);margin:0 0 2.2rem;
}
.ml-row{display:grid;grid-template-columns:210px 1fr;gap:1.5rem;padding:1.6rem 0;border-top:1px solid var(--hairline-soft)}
.ml-row:last-of-type{border-bottom:1px solid var(--hairline-soft)}
.ml-row .ml-thumb{height:140px;background-size:cover;background-position:50%;background-image:repeating-linear-gradient(135deg,#E6E1D6 0 14px,#EFEBE2 14px 28px)}
.ml-row .d{font-family:var(--grotesk);font-size:.56rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);display:block;margin-bottom:.45rem}
.ml-row h3{font-family:var(--serif-display);font-size:1.2rem;font-weight:500;letter-spacing:-.025em;color:var(--forest);margin:0 0 .5rem;line-height:1.3}
.ml-row p{font-size:.88rem;line-height:1.55;color:#4A5550;margin:0}
.ml-side .side-block{margin-bottom:2.4rem}
.ml-side h3{
font-family:var(--grotesk);font-size:.6rem;font-weight:600;letter-spacing:.24em;
text-transform:uppercase;color:var(--gold);margin:0 0 1rem;
}
.ml-side ol{list-style:none;margin:0;padding:0;counter-reset:mv}
.ml-side ol li{
counter-increment:mv;display:grid;grid-template-columns:1.6rem 1fr;gap:.7rem;
padding:.75rem 0;border-top:1px solid var(--hairline-soft);
font-size:.86rem;line-height:1.42;color:#4A5550;
}
.ml-side ol li::before{content:counter(mv);font-family:var(--serif-display);font-size:1rem;color:var(--gold)}
.ml-side .enq{background:var(--forest);color:var(--paper);padding:1.6rem 1.5rem}
.ml-side .enq h4{font-family:var(--serif-display);font-size:1.1rem;font-weight:500;margin:0 0 .5rem;color:var(--paper)}
.ml-side .enq p{font-size:.86rem;line-height:1.5;color:rgba(246,244,238,.75);margin:0 0 .7rem}
.ml-side .enq a{color:var(--gold);text-decoration:none;font-size:.88rem}
@media (max-width:1000px){
.region-nav .rn-row{grid-template-columns:1fr}
.region-nav a + a{border-left:none;padding-left:0}
.pj-grid,.mb-grid{grid-template-columns:1fr 1fr}
.ft-grid{grid-template-columns:1fr 1fr}
.ml-inner{grid-template-columns:1fr;gap:2.4rem}
}
@media (max-width:620px){
.pj-grid,.mb-grid,.ft-grid{grid-template-columns:1fr}
.ml-row{grid-template-columns:1fr}
}
/* a multiline slot is block-level: its replacement is …
…
,
which cannot legally sit inside a . Styled to match body copy. */
.prose-block{margin:0 0 .85rem}
.prose-block p{margin:0 0 .85rem}
.prose-block p:last-child{margin-bottom:0}
.card-text .prose-block,.card-text .prose-block p{font-size:.9rem;line-height:1.62;color:#4A5550;max-width:42rem}
.text-box .prose-block,.text-box .prose-block p{font-size:.86rem;line-height:1.58}
/* a tile left with nothing in it (clean preview) is a solid colour block,
which is a legitimate tile in ALJ's own mosaics */
.card-box.blank{background:var(--forest)}
.card-box.quote-box.blank{background:#2A4A3C}
.card-box.statis-box.gold.blank{background:var(--gold)}
/* ---- production: cards with no imagery read as text cards ---- */
.ncard:not(:has(.nimg)){border-top:1px solid var(--hairline);padding-top:1.15rem}
.ml-row:not(:has(.ml-thumb)){grid-template-columns:1fr}
.pj-card:not(:has(.pj-media)) .pj-body{padding:1.4rem 1.3rem 1.5rem}
.ft-card:not(:has(.ft-media)) .ft-body{padding:1.5rem 1.4rem 1.6rem}