/* ==================================================================
   ITMAM FINISHING & SUPPLY — DESIGN SYSTEM v3
   ------------------------------------------------------------------
   Researched against Antolini, Citco, Salvatori, Minotti and Boffi.
   The common language of those houses, and the rules this file follows:

     1. Paper, not ink.   White / warm off-white dominates. Dark is a
                          punctuation mark, never the ground.
     2. One grotesque.    No decorative serif, no metallic accent.
                          Hierarchy comes from SCALE and WEIGHT alone.
     3. Material first.   Photography is full-bleed and uninterrupted.
                          UI chrome recedes to hairlines and labels.
     4. Air.              Section rhythm is enormous. Whitespace is the
                          most expensive thing on the page.
     5. Say less.         Two-word statements at display size.

   v3 (premium palette). Same five rules, richer materials:
     · The ground is ALABASTER, not white — the warm cream of Galala
       marble, the stone this company actually sells.
     · The dark is VERDE ONYX, not black — a green-black with depth,
       taken from the Verde marble in their own bathrooms.
     · One metal: ANTIQUE BRASS, and it is used as INK only —
       hairlines, numerals, rules, underlines. Never as a fill, never
       as a gradient, never on a large area. It appears because every
       tap, rail and frame in the photography is brass.
   ================================================================== */

/* ------------------------------ TOKENS -------------------------- */
/* ==================================================================
   SOUQ — design system v4
   ------------------------------------------------------------------
   Dee rejected three previous directions and named the reason: "it is
   not a store." v1 was a dark editorial portfolio, v2 an Italian
   design-house paper site, v3 the same with brass. All three were
   magazines about a contractor. This one is a yard you buy from that
   also builds.

     1. Warm sand ground.   The colour of Galala, the stone they sell
                            most of. Not white, not grey, not paper.
     2. Date-brown chrome.  Header, footer and dark bands. Warm enough
                            to sit on sand without going cold.
     3. Terracotta means    Every clickable thing is terracotta and
        ACTION.             nothing else is. A visitor learns it once.
     4. A serif for names.  Stone has a name the way a wine does.
                            Fraunces on products and headings, DM Sans
                            on everything that is UI.
     5. Two front doors.    Shop the material, or hand over the house.
                            Neither outranks the other.
   ================================================================== */
:root{
  /* ground — warm sand, the colour of the stone they sell most of */
  --paper:#F6F1E7;
  --paper-w:#FFFFFF;
  --paper-2:#EDE3D2;
  --paper-3:#E0D4BE;

  /* ink — date brown, never a neutral grey */
  --ink:#2B211A;
  --ink-2:#6B5A4A;
  --ink-3:#716251;

  /* chrome — the header, the footer, the dark bands */
  --night:#2B211A;
  --night-2:#3A2C22;
  --on-night:#F6F1E7;
  --on-night-2:#C9B9A5;

  /* ACTION. Terracotta is reserved for things you can click. */
  --brass:#B4472C;
  --brass-2:#E8A87C;
  --brass-soft:rgba(180,71,44,.28);
  --brass-night:rgba(232,168,124,.36);

  /* hairlines */
  --line:#E0D4BE;
  --line-soft:#EDE3D2;
  --line-night:rgba(246,241,231,.18);

  --sans:"DM Sans","Helvetica Neue",Helvetica,Arial,"Tajawal",sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;

  /* rhythm — tighter than v3. A shop is denser than a magazine. */
  --wrap:1560px;
  --measure:70ch;
  --gut:clamp(1.1rem,4vw,4rem);
  --sec:clamp(3.5rem,7vw,7rem);
  --ease:cubic-bezier(.19,1,.22,1);
  --ease-2:cubic-bezier(.4,0,.2,1);
}

/* ------------------------------ RESET --------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px;overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.62;font-weight:400;
  letter-spacing:-.01em;font-synthesis:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure{margin:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:1.5px solid var(--brass);outline-offset:4px}
::selection{background:var(--brass);color:var(--paper)}

/* ------------------------------ TYPE ---------------------------- */
.d1,.d2,.d3,.d4{font-family:var(--serif);font-weight:600;text-wrap:balance;overflow-wrap:break-word}
.d1{font-size:clamp(2.3rem,6.4vw,5.4rem);letter-spacing:-.025em;line-height:1.02}
.d2{font-size:clamp(1.7rem,3.8vw,3.2rem);letter-spacing:-.022em;line-height:1.06}
.d3{font-size:clamp(1.3rem,2.4vw,2rem);letter-spacing:-.018em;line-height:1.14;font-weight:600}
.d4{font-size:clamp(1.02rem,1.4vw,1.22rem);letter-spacing:-.01em;line-height:1.3;font-weight:600}
.d1 em,.d2 em,.d3 em{font-style:normal;color:var(--ink-3)}

/* micro label — the Italian signature: tiny, wide-tracked, numbered */
.kicker{
  display:flex;align-items:baseline;gap:.9em;
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:clamp(1.5rem,3vw,2.6rem);
}
.kicker[data-n]::before{content:attr(data-n);color:var(--ink);font-variant-numeric:tabular-nums}
.dark .kicker[data-n]::before,.hero .kicker[data-n]::before{color:var(--on-night)}
.kicker--plain::before{content:none}

.lede{font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.58;color:var(--ink-2);max-width:58ch;letter-spacing:-.014em}
.muted{color:var(--ink-3)}
.prose{max-width:62ch;color:var(--ink-2)}
.prose p+p{margin-top:1.1em}
.on-night .lede,.on-night .muted,.dark .lede,.dark .muted{color:var(--on-night-2)}

/* ---------------------------- LAYOUT ---------------------------- */
.wrap{width:min(100% - (var(--gut) * 2),var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - (var(--gut) * 2),920px);margin-inline:auto}
.bleed{width:100%}
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(3rem,6vw,5.5rem)}
.section--flush{padding-block:0}
.dark{background:var(--night);color:var(--on-night)}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--on-night)}
.tint{background:var(--paper-2)}
.white{background:var(--paper-w)}

.grid{display:grid;gap:clamp(1.6rem,2.6vw,3rem)}
/* A department that honestly has one photograph gets one wide photograph,
   not a two-column grid with a hole where the second one used to be. */
.g1{grid-template-columns:minmax(0,min(760px,100%));justify-content:center}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
/* asymmetric editorial split — label column, then the argument */
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2rem,6vw,7rem);align-items:start}
/* section headers need room for a display line to sit on two lines, not four */
.split--head{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:end}
.split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split--head>*:last-child{padding-bottom:.35rem}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:minmax(0,1fr);gap:2rem}}
@media(max-width:820px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.sec-head{max-width:none;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.sec-head .lede{margin-top:1.4rem;max-width:52ch}
.rule{height:1px;background:var(--line);border:0;margin:0}
.dark .rule{background:var(--line-night)}

/* --------------------------- BUTTONS ---------------------------- */
/* Flat, squared, no radius, no shadow. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:1.15em 2.4em;font-size:.665rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;border:1px solid transparent;
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
  white-space:nowrap;
}
.btn--primary{background:var(--brass);color:#fff;border-color:var(--brass);border-radius:4px}
.btn--primary:hover{background:var(--ink);border-color:var(--ink);color:var(--on-night)}
.btn--ghost{border-color:var(--ink);color:var(--ink);border-radius:4px}
.btn--ghost:hover{background:var(--ink);color:var(--on-night);border-color:var(--ink)}
.dark .btn--primary,.on-night .btn--primary{background:var(--on-night);color:var(--ink);border-color:var(--on-night)}
.dark .btn--primary:hover,.on-night .btn--primary:hover{background:transparent;color:var(--on-night)}
.dark .btn--ghost,.on-night .btn--ghost{border-color:var(--line-night);color:var(--on-night)}
.dark .btn--ghost:hover,.on-night .btn--ghost:hover{background:var(--on-night);color:var(--ink);border-color:var(--on-night)}
.btn--wa{background:#111;color:#fff;border-color:#111}
.btn--wa:hover{background:transparent;color:inherit}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(2rem,3.5vw,3rem)}

/* text link with a rule that draws in */
.tlink{
  display:inline-flex;align-items:center;gap:.7em;position:relative;padding-bottom:.55em;
  font-size:.65rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
}
.tlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform-origin:right;transform:scaleX(1);transition:transform .55s var(--ease)}
.tlink:hover::after{transform-origin:left;transform:scaleX(0)}
.tlink svg{transition:transform .5s var(--ease)}
.tlink:hover svg{transform:translateX(5px)}
.dark .tlink,.on-night .tlink{color:var(--on-night)}

/* ---------------------------- HEADER ---------------------------- */
/* A hairline bar that gets out of the way. Menu opens full-screen. */
.hdr{position:fixed;inset:0 0 auto;z-index:100;mix-blend-mode:normal;transition:background .5s var(--ease),border-color .5s var(--ease)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:76px}
.hdr--solid{background:rgba(247,244,238,.90);backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--line-soft)}
.hdr--over .lg,.hdr--over .hdr__right{color:var(--on-night)}
.hdr--solid .lg,.hdr--solid .hdr__right{color:var(--ink)}
/* Lock scroll on <html>, not <body>: with html{overflow-x:clip}, body
   overflow:hidden turned body into its own scroll box and the sticky header
   jumped to its top, taking the Close button off screen. */
html.nav-open{overflow:hidden}
body.nav-open .hdr{background:transparent;border-color:transparent}
body.nav-open .lg,body.nav-open .hdr__right{color:var(--ink)}

.lg{display:flex;align-items:center;gap:.85rem;flex:none;color:var(--ink);transition:color .5s var(--ease)}
.lg__mark{width:26px;height:26px;flex:none}
.lg__txt{display:flex;flex-direction:column;line-height:1}
.lg__name{font-size:.98rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase}
.lg__sub{font-size:.5rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;opacity:.55;margin-top:.5em}

.hdr__right{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.4rem);color:var(--ink);transition:color .5s var(--ease)}
.hdr__tel{font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.hdr__tel:hover{opacity:.6}
/* A contractor whose clients are on phones must have tap-to-call above the
   fold. Below 760px the number collapses to a glyph rather than disappearing. */
@media(max-width:760px){
  .hdr__tel{font-size:0;padding:.6rem;margin-right:-.4rem}
  .hdr__tel::before{content:"";display:block;width:20px;height:20px;background:currentColor;
    -webkit-mask:var(--tel-icon) center/contain no-repeat;mask:var(--tel-icon) center/contain no-repeat}
}
:root{--tel-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E")}

/* menu trigger: word + two rules */
.menu-btn{display:flex;align-items:center;gap:.75rem;font-size:.65rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;padding:.5rem 0}
.menu-btn__bars{display:flex;flex-direction:column;gap:5px;width:22px}
.menu-btn__bars i{display:block;height:1px;background:currentColor;transition:transform .5s var(--ease),opacity .35s var(--ease)}
.menu-btn__bars i:last-child{width:60%;margin-left:auto;transition-delay:.04s}
.menu-btn:hover .menu-btn__bars i:last-child{width:100%}
body.nav-open .menu-btn__bars i:first-child{transform:translateY(3px) rotate(9deg)}
body.nav-open .menu-btn__bars i:last-child{width:100%;transform:translateY(-3px) rotate(-9deg)}

/* ------------------------ FULL-SCREEN MENU ---------------------- */
.menu{
  position:fixed;inset:0;z-index:99;background:var(--paper);
  padding:clamp(6rem,10vh,9rem) var(--gut) clamp(2rem,5vh,4rem);
  display:grid;grid-template-rows:1fr auto;gap:2rem;
  opacity:0;visibility:hidden;pointer-events:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease),opacity .4s var(--ease-2),visibility .8s;
  overflow-y:auto;
}
body.nav-open .menu{opacity:1;visibility:visible;pointer-events:auto;clip-path:inset(0 0 0 0)}
.menu__cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(2rem,5vw,5rem);width:min(100%,var(--wrap));margin-inline:auto;align-content:start}
@media(max-width:900px){.menu__cols{grid-template-columns:1fr;gap:2.4rem}}
.menu h4{font-size:.6rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);padding-bottom:1rem;margin-bottom:1.2rem;border-bottom:1px solid var(--line)}
.menu__primary li a{
  display:block;font-size:clamp(1.9rem,4.2vw,3.4rem);font-weight:300;letter-spacing:-.04em;
  line-height:1.16;color:var(--ink);transition:color .4s var(--ease),transform .5s var(--ease);
}
.menu__primary li a:hover{color:var(--ink-3);transform:translateX(12px)}
.menu__list li a{display:block;padding:.42em 0;font-size:.92rem;color:var(--ink-2);transition:color .3s var(--ease),transform .4s var(--ease)}
.menu__list li a:hover{color:var(--ink);transform:translateX(6px)}
.menu__foot{
  width:min(100%,var(--wrap));margin-inline:auto;border-top:1px solid var(--line);padding-top:1.6rem;
  display:flex;flex-wrap:wrap;gap:1rem 2.5rem;justify-content:space-between;align-items:center;
  font-size:.72rem;color:var(--ink-3);
}
.menu__foot a:hover{color:var(--ink)}

/* ----------------------------- HERO ----------------------------- */
/* Full-bleed material. Type sits at the bottom-left, small label on top. */
.hero{position:relative;background:var(--night);color:var(--on-night);isolation:isolate;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover}
/* vertical scrim for the bottom-set type, plus a left scrim so labels stay
   legible over busy stone. Tuned against the amethyst / agate photographs. */
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(13,13,12,.62) 0%,rgba(13,13,12,.28) 40%,rgba(13,13,12,.88) 100%),
    linear-gradient(90deg,rgba(13,13,12,.58) 0%,rgba(13,13,12,.12) 55%,rgba(13,13,12,0) 78%);
}
.hero__in{position:relative;padding-top:clamp(8rem,16vh,12rem);padding-bottom:clamp(3rem,7vw,6rem);display:flex;flex-direction:column;justify-content:flex-end}
.hero--home .hero__in{min-height:100svh}
.hero--page .hero__in{min-height:min(64svh,620px)}
.hero .kicker{color:var(--on-night-2)}
.hero .kicker::before{color:var(--on-night)}
.hero h1{max-width:15ch}
.hero .lede{color:var(--on-night-2);margin-top:1.8rem;max-width:46ch}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 2.6rem;margin-top:clamp(2.4rem,5vw,4rem);
  padding-top:1.6rem;border-top:1px solid var(--line-night);
  font-size:.6rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--on-night-2);
}
.scroll-cue{position:absolute;left:var(--gut);bottom:clamp(1rem,3vw,2rem);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--on-night-2);display:flex;align-items:center;gap:.7rem}
.scroll-cue i{display:block;width:1px;height:34px;background:currentColor;opacity:.45;animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleY(.35);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* material field used until a hero photograph exists */
.marble-field{position:absolute;inset:0;background:#141412}
.marble-field::before{
  content:"";position:absolute;inset:-18%;
  background:
    radial-gradient(46% 34% at 26% 30%,rgba(214,205,190,.16),transparent 64%),
    radial-gradient(40% 30% at 76% 22%,rgba(180,172,158,.11),transparent 62%),
    radial-gradient(58% 44% at 62% 88%,rgba(224,216,201,.09),transparent 66%);
  filter:blur(26px);animation:drift 40s var(--ease) infinite alternate;
}
.marble-field::after{
  content:"";position:absolute;inset:-10%;opacity:.4;filter:blur(4px);
  background-image:
    repeating-linear-gradient(101deg,transparent 0 54px,rgba(255,255,255,.05) 54px 56px,transparent 56px 148px),
    repeating-linear-gradient(96deg,transparent 0 118px,rgba(255,255,255,.03) 118px 119px,transparent 119px 280px);
}
@keyframes drift{0%{transform:translate3d(-2%,-1%,0) scale(1.05)}100%{transform:translate3d(3%,2%,0) scale(1.16)}}

/* STONE FIELD — the hero ground for pages that lead with type rather than a
   photograph. The colours are lifted from the catalogue itself: Galala's warm
   cream, Sunny Menia's gold, the grey of Imperial, and the rust vein that runs
   through the onyx. A marble merchant's page should look like stone even when
   there is no photograph good enough to carry it, and there usually is not:
   the archive is a foreman's camera roll, and a phone snap stretched behind
   display type reads as a contractor's Facebook page, not a premium brand. */
.stone-field{position:absolute;inset:0;background:#191510;overflow:hidden}
/* The mass of the stone. Weighted to the RIGHT, because the type sits left and
   the half of the canvas it leaves empty is exactly where a slab should be. */
.stone-field::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(58% 52% at 74% 34%,rgba(216,190,148,.40),transparent 68%),
    radial-gradient(46% 40% at 92% 66%,rgba(198,160,112,.28),transparent 66%),
    radial-gradient(40% 34% at 62% 88%,rgba(176,74,46,.20),transparent 64%),
    radial-gradient(52% 44% at 34% 16%,rgba(228,216,196,.14),transparent 70%),
    radial-gradient(70% 60% at 18% 78%,rgba(120,104,84,.16),transparent 72%);
  filter:blur(34px);animation:drift 46s var(--ease) infinite alternate;
}
/* The veining. Three shallow angles, the way a bookmatched slab actually runs —
   a dominant seam, a finer companion, and the rust vein that carries the accent
   colour through. Strong enough to read as stone at 1440, quiet under the type. */
.stone-field::after{
  content:"";position:absolute;inset:-12%;opacity:.9;filter:blur(2px);
  background-image:
    repeating-linear-gradient(102deg,transparent 0 58px,rgba(240,228,206,.10) 58px 61px,transparent 61px 164px),
    repeating-linear-gradient(97deg,transparent 0 126px,rgba(240,228,206,.06) 126px 128px,transparent 128px 300px),
    repeating-linear-gradient(108deg,transparent 0 196px,rgba(196,88,56,.09) 196px 199px,transparent 199px 452px),
    repeating-linear-gradient(94deg,transparent 0 340px,rgba(240,228,206,.045) 340px 342px,transparent 342px 700px);
}
/* On a phone the type fills the frame, so the field steps back out of its way. */
@media(max-width:760px){
  .stone-field::before{filter:blur(28px);opacity:.72}
  .stone-field::after{opacity:.55}
}

/* A stone's own page leads with a field mixed from ITS colours — the base and
   the two vein values already recorded for all 94 stones in the catalogue.
   Galala reads cream, Black Aswan reads black, Rosa El Nasr reads pink. The
   only photograph most stones have is a 400px surface swatch, which is mush
   stretched across 1440; its own colour, at any size, is not. */
.stone-field--tinted{background:var(--sf-base,#191510)}
.stone-field--tinted::before{
  background:
    radial-gradient(58% 52% at 74% 34%,var(--sf-v1,rgba(216,190,148,.40)),transparent 68%),
    radial-gradient(46% 40% at 92% 66%,var(--sf-v2,rgba(198,160,112,.28)),transparent 66%),
    radial-gradient(40% 34% at 62% 88%,rgba(176,74,46,.16),transparent 64%),
    radial-gradient(70% 60% at 18% 78%,rgba(0,0,0,.34),transparent 72%);
  mix-blend-mode:normal;
}
/* the type sits on this, so the whole field is dropped back behind a scrim */
.stone-field--tinted::after{opacity:.55}
.hero--stone .hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(15,12,9,.90) 0%,rgba(15,12,9,.74) 46%,rgba(15,12,9,.42) 100%);
}
@media(prefers-reduced-motion:reduce){.stone-field::before{animation:none}}

@media(prefers-reduced-motion:reduce){.marble-field::before{animation:none}.scroll-cue i{animation:none}}

/* -------------------------- BREADCRUMBS ------------------------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.55em;font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-night-2);margin-bottom:auto;padding-bottom:clamp(2rem,4vw,3.5rem)}
.crumbs a:hover{color:var(--on-night)}
.crumbs li{display:flex;align-items:center}
.crumbs li:not(:last-child)::after{content:"";width:14px;height:1px;background:currentColor;opacity:.4;margin-inline-start:.7em}
.crumbs [aria-current]{color:var(--on-night)}

/* ------------------------ MEDIA & FIGURES ----------------------- */
/* No borders, no radius, no shadow. Material sits directly on paper. */
.ph{position:relative;overflow:hidden;background:var(--night-2);isolation:isolate}
.ph::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(58% 44% at 30% 30%,rgba(220,212,197,.13),transparent 64%),
    radial-gradient(48% 38% at 76% 74%,rgba(190,182,168,.09),transparent 62%),
    linear-gradient(155deg,#1D1D1A 0%,#121210 48%,#232320 100%);
}
.ph::after{
  content:"";position:absolute;inset:-8%;opacity:.36;filter:blur(3px);
  background-image:
    repeating-linear-gradient(103deg,transparent 0 40px,rgba(255,255,255,.06) 40px 42px,transparent 42px 112px),
    repeating-linear-gradient(97deg,transparent 0 96px,rgba(255,255,255,.035) 96px 97px,transparent 97px 230px);
}
.ph__label{position:absolute;inset:auto 0 0;z-index:2;padding:1.6rem 1.4rem 1.3rem;color:var(--on-night);font-size:.79rem;line-height:1.45;background:linear-gradient(180deg,transparent,rgba(13,13,12,.8))}
.ph__tag{display:flex;width:fit-content;align-items:center;gap:.5em;margin-bottom:.6rem;font-size:.55rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--on-night-2)}
.ph__tag svg{width:11px;height:11px}
.ph__cap{display:block}
.ph--16x9{aspect-ratio:16/9}.ph--4x3{aspect-ratio:4/3}.ph--3x4{aspect-ratio:3/4}
.ph--1x1{aspect-ratio:1}.ph--21x9{aspect-ratio:21/9}.ph--tall{aspect-ratio:3/4}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.ph:has(img)::before,.ph:has(img)::after{display:none}

figure.fig{margin:0}
figure.fig figcaption{
  margin-top:1rem;font-size:.72rem;line-height:1.5;color:var(--ink-3);
  letter-spacing:.02em;max-width:46ch;
}
.dark figure.fig figcaption,.on-night figure.fig figcaption{color:var(--on-night-2)}

/* `ch` measures against the element's OWN font. On .sec-head it resolved
   against the 16px parent, so a 26ch cap produced a 231px box and a 69px
   display heading broke into four or five one-word lines. Cap the heading
   itself instead, where 14ch is ~470px. */
.sec-head .d1,.sec-head .d2,.sec-head .d3{max-width:14ch}

/* ---------------------------- CARDS ----------------------------- */
/* Borderless. The image is the card. */
.card{display:flex;flex-direction:column;height:100%;background:transparent}
.card__media{position:relative;overflow:hidden;margin-bottom:1.25rem}
.card__media .ph,.card__media img{transition:transform 1.1s var(--ease)}
a.card:hover .card__media .ph,a.card:hover .card__media img{transform:scale(1.045)}
.card__body{display:flex;flex-direction:column;gap:.45rem;flex:1}
.card__eyebrow{font-size:.575rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.card__title{font-family:var(--serif);font-size:clamp(1.08rem,1.4vw,1.35rem);font-weight:600;line-height:1.2;letter-spacing:-.015em}
.card__text{font-size:.875rem;line-height:1.55;color:var(--ink-2);letter-spacing:-.008em}
.card__foot{margin-top:auto;padding-top:1.1rem;font-size:.575rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:.6em}
.card__foot svg{transition:transform .5s var(--ease)}
a.card:hover .card__foot svg{transform:translateX(5px)}
.dark .card__text{color:var(--on-night-2)}
.dark .card__eyebrow{color:var(--on-night-2)}
.dark .card__title,.dark .card__foot{color:var(--on-night)}

/* ------------------------- INDEX LIST --------------------------- */
/* The editorial device: a numbered index of disciplines. */
.index-list{border-top:1px solid var(--line)}
.index-list a{
  display:grid;grid-template-columns:5rem minmax(0,1fr) minmax(0,1.1fr) auto;
  gap:clamp(1rem,3vw,3rem);align-items:baseline;
  padding:clamp(1.5rem,2.6vw,2.4rem) 0;border-bottom:1px solid var(--line);
  transition:padding-left .6s var(--ease),color .4s var(--ease);
}
.index-list a:hover{padding-left:clamp(.5rem,1.6vw,1.6rem)}
.index-list .n{font-size:.66rem;font-weight:600;letter-spacing:.16em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.index-list .t{font-family:var(--serif);font-size:clamp(1.15rem,1.9vw,1.6rem);font-weight:600;letter-spacing:-.015em;line-height:1.12}
.index-list .d{font-size:.85rem;line-height:1.5;color:var(--ink-2)}
.index-list .go{font-size:.6rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);opacity:0;transform:translateX(-6px);transition:.5s var(--ease)}
.index-list a:hover .go{opacity:1;transform:none;color:var(--ink)}
.dark .index-list,.dark .index-list a{border-color:var(--line-night)}
.dark .index-list .t{color:var(--on-night)}
.dark .index-list .d{color:var(--on-night-2)}
@media(max-width:900px){
  .index-list a{grid-template-columns:3rem 1fr;gap:.5rem 1.2rem}
  .index-list .d{grid-column:2;font-size:.8rem}
  .index-list .go{display:none}
}

/* --------------------------- FEATURES --------------------------- */
.feat{display:grid;gap:0;border-top:1px solid var(--line)}
.feat li{padding:clamp(1.6rem,2.6vw,2.4rem) 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:4.5rem 1fr;gap:clamp(1rem,2.5vw,2.5rem);align-items:start}
.feat__n{font-size:.66rem;font-weight:600;letter-spacing:.16em;color:var(--ink-3);padding-top:.5em;font-variant-numeric:tabular-nums}
.feat h3{font-family:var(--serif);font-size:clamp(1.1rem,1.6vw,1.4rem);font-weight:600;letter-spacing:-.015em;line-height:1.2;margin-bottom:.65rem}
.feat p{font-size:.9rem;line-height:1.62;color:var(--ink-2);max-width:62ch}
.dark .feat,.dark .feat li{border-color:var(--line-night)}
.dark .feat p{color:var(--on-night-2)}
@media(max-width:640px){.feat li{grid-template-columns:1fr;gap:.6rem}}

/* ----------------------------- STATS ---------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.stats div{padding:clamp(2rem,4vw,3.4rem) clamp(1rem,2vw,2rem) clamp(2rem,4vw,3.4rem) 0;border-bottom:1px solid var(--line)}
.stats div+div{border-left:1px solid var(--line);padding-left:clamp(1rem,2vw,2rem)}
.stats .v{font-family:var(--serif);font-size:clamp(2rem,3.8vw,3rem);font-weight:600;letter-spacing:-.02em;line-height:1}
.stats .l{font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:1rem}
.dark .stats,.dark .stats div{border-color:var(--line-night)}
.dark .stats .l{color:var(--on-night-2)}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}.stats div:nth-child(odd)+div{border-left:1px solid var(--line)}.stats div:nth-child(odd){border-left:0}}

/* ----------------------------- SPEC ----------------------------- */
.spec{border-top:1px solid var(--line)}
.spec tr{border-bottom:1px solid var(--line)}
.spec th,.spec td{text-align:left;padding:1.15rem 0;vertical-align:top;font-size:.875rem}
.spec th{width:36%;padding-right:2rem;font-weight:600;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.spec td{color:var(--ink-2)}
.dark .spec,.dark .spec tr{border-color:var(--line-night)}
.dark .spec th{color:var(--on-night-2)}
.dark .spec td{color:var(--on-night)}
@media(max-width:560px){.spec th{display:block;width:100%;padding-bottom:.35rem}.spec td{display:block;padding-top:0;padding-bottom:1.15rem}}

/* ---------------------------- RANGES ---------------------------- */
.ranges{display:grid;gap:0;border-top:1px solid var(--line)}
.ranges li{padding:clamp(1.5rem,2.4vw,2.2rem) 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:1rem clamp(2rem,5vw,5rem);align-items:baseline}
.ranges h3{font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:600;letter-spacing:-.015em}
.ranges .origin{display:block;font-size:.575rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-top:.6rem}
.ranges p{font-size:.885rem;line-height:1.6;color:var(--ink-2)}
@media(max-width:760px){.ranges li{grid-template-columns:1fr;gap:.7rem}}

/* ----------------------------- PILLS ---------------------------- */
.pills{display:flex;flex-wrap:wrap;gap:0}
.pills li{
  font-size:.76rem;color:var(--ink-2);padding:.42em 0;
  letter-spacing:-.005em;position:relative;
}
.pills li+li{padding-left:1.6em}
.pills li+li::before{content:"";position:absolute;left:.72em;top:50%;width:3px;height:3px;background:var(--line);transform:translateY(-50%)}
.pills a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.dark .pills li{color:var(--on-night-2)}
.dark .pills li+li::before{background:var(--line-night)}

/* ------------------------------ FAQ ----------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:clamp(1.5rem,2.4vw,2.1rem) 3rem clamp(1.5rem,2.4vw,2.1rem) 0;
  position:relative;font-size:clamp(1.05rem,1.8vw,1.5rem);font-weight:400;letter-spacing:-.028em;line-height:1.24;
  transition:color .4s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--ink-3)}
.faq summary::after{
  content:"";position:absolute;right:.2rem;top:calc(clamp(1.5rem,2.4vw,2.1rem) + .55em);width:12px;height:12px;
  background:linear-gradient(currentColor,currentColor) center/12px 1px no-repeat,
             linear-gradient(currentColor,currentColor) center/1px 12px no-repeat;
  transition:transform .5s var(--ease);
}
.faq details[open] summary::after{transform:rotate(90deg);background:linear-gradient(currentColor,currentColor) center/12px 1px no-repeat}
.faq .a{padding:0 clamp(1rem,10vw,9rem) clamp(1.6rem,2.5vw,2.2rem) 0;font-size:.925rem;line-height:1.68;color:var(--ink-2);max-width:78ch}
.dark .faq,.dark .faq details{border-color:var(--line-night)}
.dark .faq .a{color:var(--on-night-2)}

/* ---------------------------- CTA BAND -------------------------- */
.cta{position:relative;background:var(--night);color:var(--on-night);overflow:hidden;isolation:isolate}
.cta .marble-field{z-index:-1;opacity:.85}
.cta__in{position:relative;padding-block:clamp(5rem,10vw,9rem)}
.cta h2{max-width:16ch}
.cta .lede{margin-top:1.6rem;color:var(--on-night-2)}

/* ------------------------------ FORM ---------------------------- */
/* Underlined fields only — no boxes. */
.form{display:grid;gap:clamp(1.4rem,2.4vw,2rem)}
.field{display:flex;flex-direction:column;gap:.5rem}
/* was .575rem = 9.2px on a phone: too small for a label doing real work */
.field label{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field select,.field textarea{
  /* 16px exactly: iOS Safari zooms the viewport on focus for anything smaller,
     and it did on all nine fields of the enquiry form. */
  font:inherit;font-size:16px;padding:.65em 0;background:transparent;color:var(--ink);
  border:0;border-bottom:1px solid var(--ink-3);width:100%;transition:border-color .4s var(--ease);
  border-radius:0;-webkit-appearance:none;appearance:none;
}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 12px) 1.15em,calc(100% - 7px) 1.15em;background-size:5px 5px;background-repeat:no-repeat;padding-right:2rem}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ink)}
.field--2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,2.4vw,2rem)}
@media(max-width:600px){.field--2{grid-template-columns:1fr}}
.form__note{font-size:.76rem;color:var(--ink-3);line-height:1.55}
.form__note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.form__err{font-size:.82rem;color:#A8342A;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-bottom-color:#A8342A}
.field.invalid .form__err{display:block}

/* ----------------------------- FOOTER --------------------------- */
.ftr{background:var(--paper-2);color:var(--ink-2);padding-top:clamp(4rem,8vw,7rem);border-top:1px solid var(--line)}
.ftr__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(2rem,4vw,3.5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.ftr h4{font-size:.575rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1.3rem}
.ftr li{margin-bottom:.55rem;font-size:.855rem}
.ftr a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ftr__blurb{font-size:.875rem;line-height:1.6;max-width:36ch;margin-top:1.4rem;color:var(--ink-2)}
.ftr__addr{font-size:.855rem;line-height:1.6;font-style:normal}
.ftr__addr strong{display:block;font-size:.575rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.45rem}
.ftr__addr+.ftr__addr{margin-top:1.3rem}
.ftr__areas{font-size:.72rem;line-height:1.8;color:var(--ink-3);padding-bottom:2rem;max-width:110ch}
.ftr__bot{border-top:1px solid var(--line);padding-block:1.7rem;display:flex;flex-wrap:wrap;gap:1rem 2.5rem;justify-content:space-between;align-items:center;font-size:.72rem;color:var(--ink-3)}
.ftr__soc{display:flex;gap:1.4rem}
.ftr__soc a{font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
@media(max-width:960px){.ftr__top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr__top{grid-template-columns:1fr}}

/* --------------------------- WHATSAPP --------------------------- */
.wa-float{
  position:fixed;right:var(--gut);bottom:clamp(1.2rem,3vw,2.2rem);z-index:90;
  display:flex;align-items:center;gap:.7rem;padding:.85rem 1.35rem;background:var(--ink);color:var(--paper);
  font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  transition:background .45s var(--ease),transform .45s var(--ease);
}
.wa-float:hover{background:#1FA855;transform:translateY(-2px)}
/* No hover on a touch screen, so the resting state has to carry the cue. */
@media(hover:none){.wa-float{background:#1FA855;color:#fff}}
.wa-float svg{width:16px;height:16px}
@media(max-width:560px){.wa-float span{display:none}.wa-float{padding:.95rem;border-radius:50%}}

/* ==================== STONE CATALOGUE ========================== */
.cat-toolbar{position:sticky;top:var(--hdr-h,76px);z-index:40;background:var(--paper);border-bottom:1px solid var(--line);padding-block:1.1rem;margin-bottom:clamp(2rem,4vw,3.5rem)}
.tint .cat-toolbar{background:var(--paper-2)}
.cat-toolbar__in{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;justify-content:space-between}
.cat-search{flex:1 1 220px;max-width:300px;font:inherit;font-size:16px;padding:.55em 0;background:transparent;border:0;border-bottom:1px solid var(--ink-3);color:var(--ink);border-radius:0}
.cat-search::placeholder{color:var(--ink-3)}
.cat-search:focus{outline:none;border-bottom-color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:.35rem 1.3rem}
.chip{font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding:.35em 0;position:relative;transition:color .35s var(--ease)}
.chip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.chip:hover{color:var(--ink)}
.chip[aria-pressed=true]{color:var(--ink)}
.chip[aria-pressed=true]::after{transform:scaleX(1)}
.cat-count{font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}

.stone-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:clamp(1.4rem,2.4vw,2.6rem) clamp(1rem,1.8vw,1.8rem)}
.stone{display:flex;flex-direction:column;background:transparent}
.stone__media{position:relative;aspect-ratio:1;overflow:hidden;background:var(--night-2);margin-bottom:1rem}
.stone__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.stone:hover .stone__media img{transform:scale(1.06)}
.stone__body{display:flex;flex-direction:column;gap:.28rem}
.stone__name{font-size:1.06rem;font-weight:400;line-height:1.2;letter-spacing:-.026em}
.stone__meta{font-size:.55rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.stone__blurb{font-size:.8rem;line-height:1.5;color:var(--ink-2);margin-top:.2rem}
.stone[hidden]{display:none}

.swatch{position:absolute;inset:0;background-color:var(--b)}
.swatch::before{
  content:"";position:absolute;inset:-25%;
  background:
    radial-gradient(42% 30% at 24% 28%,var(--v1) 0,transparent 62%),
    radial-gradient(36% 26% at 74% 66%,var(--v2) 0,transparent 60%),
    radial-gradient(50% 34% at 52% 90%,var(--v1) 0,transparent 66%),
    radial-gradient(30% 22% at 88% 14%,var(--v2) 0,transparent 58%);
  opacity:.6;filter:blur(16px);transform:rotate(-8deg)
}
.swatch::after{
  content:"";position:absolute;inset:-12%;opacity:.34;
  background-image:
    repeating-linear-gradient(104deg,transparent 0 38px,var(--v1) 38px 40px,transparent 40px 104px),
    repeating-linear-gradient(97deg,transparent 0 92px,var(--v2) 92px 93px,transparent 93px 228px),
    repeating-linear-gradient(110deg,transparent 0 15px,var(--v2) 15px 16px,transparent 16px 47px);
  filter:blur(5px);mix-blend-mode:multiply
}
.swatch-tag{
  position:absolute;left:0;top:0;z-index:2;padding:.45em .8em;
  background:var(--paper);color:var(--ink-3);
  font-size:.5rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
}

.stone-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
@media(max-width:900px){.stone-hero{grid-template-columns:1fr}}
.stone-shots{display:grid;gap:.8rem}
.stone-shots .main{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--night-2)}
.stone-shots .main img{width:100%;height:100%;object-fit:cover}
.stone-shots .thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:.8rem}
.stone-shots .thumbs img{aspect-ratio:1;object-fit:cover;width:100%}
.swatch-dot{display:inline-block;width:12px;height:12px;border:1px solid var(--line);vertical-align:-1px;margin-right:.6em}

.partner-note{
  border-top:1px solid var(--line);padding-top:1.6rem;
  font-size:.83rem;line-height:1.62;color:var(--ink-3);max-width:76ch;
}
.partner-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.dark .partner-note{border-color:var(--line-night);color:var(--on-night-2)}
.dark .partner-note a{color:var(--on-night)}
@media(max-width:900px){.cat-toolbar{top:var(--hdr-h,76px)}}

/* --------------------------- UTILITIES -------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);padding:1em 1.6em;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:clamp(2.5rem,5vw,4rem)}

/* reveal — scoped to .js so nothing is ever hidden without JS */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}


/* a drawing is labelled as a drawing, over the image, always legible */
.ph__badge{
  position:absolute;top:0;left:0;z-index:3;
  padding:.5em .85em;
  font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-2);background:rgba(15,22,20,.74);backdrop-filter:blur(3px);
}

/* ==================================================================
   BRASS LAYER (v3)
   The metal is applied here and nowhere else, so it can be removed
   by deleting this block. It is ink: numerals, hairlines, rules and
   marks. It never fills an area and it never becomes a gradient.
   ================================================================== */

/* the numbered section label — the one place the eye always lands */
.kicker[data-n]::before{color:var(--brass)}
.dark .kicker[data-n]::before,.hero .kicker[data-n]::before{color:var(--brass-2)}
/* a hairline that runs from the label to the edge of the measure */
.kicker::after{
  content:"";flex:1;height:1px;background:var(--brass-soft);
  align-self:center;max-width:8rem;
}
.dark .kicker::after,.hero .kicker::after{background:var(--brass-night)}

/* display type: the emphasis colour becomes brass rather than grey */
.d1 em,.d2 em,.d3 em{color:var(--brass)}
.dark .d1 em,.dark .d2 em,.dark .d3 em,.hero .d1 em{color:var(--brass-2)}

/* numbered index + features: the numeral is the ornament */
.index-list .n,.feat__n{color:var(--brass)}
.dark .index-list .n,.dark .feat__n{color:var(--brass-2)}
.index-list a:hover{background:transparent}
.index-list a:hover .t{color:var(--ink)}
.dark .index-list a:hover{background:transparent}
.index-list a:hover .go{color:var(--brass)}
.dark .index-list a:hover .go{color:var(--brass-2)}

/* statistics: the figure is the hero, so it carries the metal */
.stats .v{color:var(--brass)}
.dark .stats .v{color:var(--brass-2)}

/* buttons: primary keeps ink; ghost gains a brass edge on hover */
.btn--ghost{border-color:var(--brass-soft)}
.btn--ghost:hover{background:var(--brass);color:var(--paper);border-color:var(--brass)}
.dark .btn--ghost,.on-night .btn--ghost{border-color:var(--brass-night)}
.dark .btn--ghost:hover,.on-night .btn--ghost:hover{background:var(--brass-2);color:var(--night);border-color:var(--brass-2)}
.btn--primary:hover{border-color:var(--brass);color:var(--on-night)}
.dark .btn--primary:hover,.on-night .btn--primary:hover{border-color:var(--brass-2);color:var(--brass-2)}

/* the drawing rule under a text link, in metal */
.tlink::after{background:var(--brass)}
.dark .tlink::after,.on-night .tlink::after{background:var(--brass-2)}

/* range names and spec labels: the small-caps furniture */
.ranges .origin{color:var(--brass)}
.spec th{color:var(--brass)}
.dark .spec th{color:var(--brass-2)}

/* cards: a metal rule draws in under the image on hover */
.card__media::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease);z-index:2;
}
a.card:hover .card__media::after{transform:scaleX(1)}
.card__foot{color:var(--brass)}
.dark .card__foot{color:var(--brass-2)}

/* faq: the marker */
.faq summary::marker,.faq summary::-webkit-details-marker{color:var(--brass)}

/* forms */
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--brass);outline:none}

/* dark sections get depth rather than flatness — a slow radial lift */
/* The metal is INK. A brass wash across a 1440x1234 section was the single
   largest painted area on the site and the rule says never on a large area. */
.dark{background:var(--night)}

/* footer: one brass rule across the top */
.ftr{border-top:1px solid var(--brass-soft)}

/* the header hairline picks up the metal once the page has scrolled */
.hdr--solid{border-bottom-color:var(--brass-soft)}

/* ---------------------------- PRINT ----------------------------- */
@media print{
  .hdr,.menu,.wa-float,.cta,.ftr__soc,.scroll-cue{display:none}
  body{background:#fff;color:#000;font-size:10.5pt}
  .ph:not(:has(img)){display:none}
  .hero{background:#fff;color:#000}
  .hero__bg{display:none}
  a::after{content:" (" attr(href) ")";font-size:8pt;color:#666}
}

/* ------------------------- video & pairs ------------------------- */
/* Each clip is its own flow item: video, then caption, then nothing on top
   of it. The captions used to run past the grid and the link beneath printed
   straight through them. */
.vid{display:flex;flex-direction:column;margin:0}
.vid video{width:100%;height:auto;object-fit:cover;display:block;background:var(--night-2)}
.vid figcaption{margin-top:.7rem}
.vid--9x16 video{aspect-ratio:9/16}
.vid--16x9 video{aspect-ratio:16/9}
.vid--4x3 video{aspect-ratio:4/3}
.ba__grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.ba__cell{position:relative;background:var(--night-2)}
.ba__cell img,.ba__cell video{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.ba__label{
  position:absolute;left:0;top:0;padding:.5em .9em;background:var(--paper);color:var(--ink);
  font-size:.55rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
}
.dark .ba__label{background:var(--night);color:var(--on-night)}
@media(max-width:560px){.ba__grid{grid-template-columns:1fr}}

/* ------------------------- THE WORK ARCHIVE ----------------------
   A contact sheet, not a gallery. The point of these pages is volume:
   every frame from a job, in the order it was taken. Tight gutters and
   a square crop so 100 photographs read as a body of work rather than
   100 separate things asking for attention.
   ---------------------------------------------------------------- */
.sheet{
  display:grid;gap:3px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.sheet__f{position:relative;display:block;overflow:hidden;background:var(--paper-2);aspect-ratio:1;margin:0}
.sheet__f img,.sheet__f video{width:100%;height:100%;object-fit:cover;display:block;background:var(--night-2)}
.sheet__f img{transition:transform .6s var(--ease)}
a.sheet__f:hover img{transform:scale(1.05)}
.sheet__f>span{
  position:absolute;left:0;bottom:0;z-index:2;
  padding:.35em .55em;
  font-size:.55rem;font-weight:600;letter-spacing:.14em;color:var(--on-night);
  background:linear-gradient(180deg,transparent,rgba(8,10,9,.78));
  width:100%;
}
.sheet--vid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.sheet--vid .sheet__f{aspect-ratio:9/16}
@media(max-width:640px){
  .sheet{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .sheet--vid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* --------------------- PROCESS STAGE PHOTOGRAPHY -----------------
   Progress shots are poor portfolio photographs and excellent proof of
   method, so they sit small and in a row under the stage they belong to,
   never blown up as if they were hero images.
   ---------------------------------------------------------------- */
.stage-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:1.4rem;max-width:640px}
.stage-shot{position:relative;display:block}
.stage-shots img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--night-2)}
.stage-shot .ph__badge{font-size:.6rem;padding:.4em .6em}
.stage-cap{margin-top:.7rem!important;font-size:.78rem!important;line-height:1.5;color:var(--ink-3)!important;
  letter-spacing:normal!important;text-transform:none!important;max-width:58ch}
@media(max-width:560px){.stage-shots{max-width:100%}}

/* -------------------- BEFORE / AFTER SLIDER ----------------------
   The seam is draggable across the whole image, not just the handle,
   because on a phone a 20 px target is a joke. The range input stays in
   the DOM and keyboard-operable; it is only visually hidden.
   ---------------------------------------------------------------- */
/* pan-y, not none: a vertical swipe must still scroll the page. Horizontal
   dragging is handled in JS behind a movement threshold. `none` here froze a
   350px band of the home page on a phone. */
.ba-slide__box{position:relative;overflow:hidden;aspect-ratio:4/3;direction:ltr;background:var(--night-2);touch-action:pan-y;cursor:ew-resize}
.ba-slide__box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.ba-slide__clip{position:absolute;inset:0;width:var(--x,50%);overflow:hidden;will-change:width}
.ba-slide__clip img{width:100vw;max-width:none}
.ba-slide__box .ba-slide__clip img{width:auto;height:100%;min-width:100%}
.ba-slide__tag{
  position:absolute;top:0;z-index:4;padding:.5em .85em;
  font-size:.55rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
}
.ba-slide__tag--b{left:0;background:var(--night);color:var(--on-night);box-shadow:inset 0 -2px 0 var(--line-night)}
.ba-slide__tag--a{right:0;background:var(--night);color:var(--on-night);box-shadow:inset 0 -2px 0 var(--brass-2)}
.ba-slide__handle{
  position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--brass-2);z-index:3;
  transform:translateX(-1px);pointer-events:none;
}
.ba-slide__handle::after{
  content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);border:2px solid var(--brass-2);border-radius:50%;
  background:rgba(15,22,20,.55);backdrop-filter:blur(3px);
}
/* Two arrowheads pointing LEFT and RIGHT. The previous pair of 45-degree
   wedges rendered as a single downward chevron on a control that only moves
   horizontally, which told the user the wrong axis. */
.ba-slide__handle::before{
  content:"";position:absolute;top:50%;left:50%;width:22px;height:10px;
  transform:translate(-50%,-50%);z-index:1;
  background:var(--brass-2);
  -webkit-mask:var(--ba-arrows) center/contain no-repeat;
  mask:var(--ba-arrows) center/contain no-repeat;
}
:root{--ba-arrows:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M4.8 0.6 0.9 5l3.9 4.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.2 0.6 21.1 5l-3.9 4.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ba-slide__range{
  position:absolute;inset:0;width:100%;height:100%;z-index:5;opacity:0;cursor:ew-resize;margin:0;
}
.ba-slide__range:focus-visible + .ba-slide__handle::after{outline:2px solid var(--brass-2);outline-offset:3px}
@media(max-width:640px){.ba-slide__box{aspect-ratio:1}}

/* ----------------------------- SLIDESHOW -------------------------
   Cross-fade in place. No sliding, no easing curves fighting the
   photography — the frames simply replace each other.
   ---------------------------------------------------------------- */
.show__box{position:relative;overflow:hidden}
.show__f{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .9s var(--ease-2);z-index:1}
.show__f.is-on{opacity:1;z-index:2}
.show__dots{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;gap:4px;
  justify-content:center;padding:.4rem}
/* the visible bar stays 2px; the TAP TARGET is 44px tall via padding and
   background-clip, because a 26x2 target cannot be hit with a thumb */
.show__dot{width:30px;height:44px;background:rgba(241,236,226,.35);border:0;cursor:pointer;
  padding:21px 2px;background-clip:content-box;transition:background .3s}
.show__dot.is-on{background:var(--brass-2);background-clip:content-box}
.show__dot:hover{background:rgba(241,236,226,.7);background-clip:content-box}
@media(prefers-reduced-motion:reduce){.show__f{transition:none}}

/* a badged hero: the label sits under the fixed header, not behind it */
.hero__badge{top:auto;bottom:0;left:0;z-index:6}

/* honeypot: off-screen for bots, invisible and unreachable for people */
/* No offset: left:-9999px is the side an RTL page scrolls towards, and on
   /ar/contact/ a swipe slid the whole form 10,000px off screen. */
.hp{position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
/* the state after Send — a form that just sits there loses the lead */
.done{border-left:2px solid var(--brass);padding-left:clamp(1.2rem,3vw,2rem)}
.done .kicker[data-n]::before{color:var(--brass)}

/* The first thing in the menu, not the last: two full-width contact buttons
   above the link columns. On a phone the drawer is 2.4 screens tall and the
   phone number used to sit at the very bottom of it. */
.menu__reach{display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3rem)}
.menu__reach .btn{flex:1 1 14rem;justify-content:center;text-align:center}
@media(min-width:900px){.menu__reach{max-width:34rem}}

/* ====================== SOUQ: THE SHOP HEADER ======================
   Search first, departments underneath, on every page. A visitor should
   be able to look a stone up without opening a menu — that is what
   separates a shop from a catalogue.
   ================================================================== */
.hdr--shop{position:sticky;top:0;background:var(--night);color:var(--on-night);border:0}
.hdr--shop .hdr__in{height:auto;padding-block:.8rem;gap:1.2rem;flex-wrap:wrap}
.hdr--shop .lg,.hdr--shop .hdr__right{color:var(--on-night)}
.hdr--shop .lg__sub{opacity:.62}
.hdr__search{flex:1;min-width:190px;display:flex}
.hdr__search input{
  flex:1;min-width:0;border:0;border-radius:4px 0 0 4px;padding:.68rem .9rem;
  font:inherit;font-size:16px;background:var(--paper);color:var(--ink);
}
.hdr__search input::placeholder{color:var(--ink-3)}
.hdr__search button{
  border:0;border-radius:0 4px 4px 0;background:var(--brass);color:#fff;
  font:inherit;font-weight:700;font-size:.8rem;padding:0 1.15rem;cursor:pointer;
  transition:filter .25s;
}
.hdr__search button:hover{filter:brightness(1.1)}
.hdr__quote{
  background:var(--brass);color:#fff;padding:.6rem 1rem;border-radius:4px;
  font-size:.78rem;font-weight:700;letter-spacing:.04em;white-space:nowrap;
}
.hdr__quote:hover{filter:brightness(1.1)}
.hdr__depts{border-top:1px solid rgba(246,241,231,.16)}
.hdr__depts__in{display:flex;gap:1.25rem;overflow-x:auto;padding:.6rem 0;scrollbar-width:none}
.hdr__depts__in::-webkit-scrollbar{display:none}
.hdr__depts a{font-size:.82rem;white-space:nowrap;opacity:.85}
.hdr__depts a:hover{opacity:1}
.hdr__depts a.on{color:var(--brass-2);font-weight:700;opacity:1}
.hdr__depts a.build{margin-left:auto;color:var(--brass-2);font-weight:700;opacity:1;padding-left:1.5rem}
/* the hero no longer sits under a transparent bar */
.hero--home,.hero{padding-top:clamp(2.5rem,5vw,4rem)}
@media(max-width:760px){
  .hdr--shop .hdr__in{gap:.7rem}
  .hdr__quote{display:none}
  .hdr__depts a.build{margin-left:0}
}

/* ========================= TWO FRONT DOORS =========================
   Dee: "we provide service but at the same time we source and sell
   materials." Both, equally. Two panels of identical size and weight —
   the moment one is bigger, the site has taken a side.
   ================================================================== */
.doors{background:var(--paper-2);border-block:1px solid var(--line)}
.doors__g{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.door{
  background:var(--paper);padding:clamp(1.6rem,3.4vw,2.8rem);
  display:flex;flex-direction:column;gap:.7rem;
  transition:background .35s var(--ease);
}
.door:hover{background:var(--paper-w)}
.door--b{background:var(--night);color:var(--on-night)}
.door--b:hover{background:var(--night-2)}
.door__k{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.door--b .door__k{color:var(--brass-2)}
.door h2{margin:.2rem 0 .1rem}
.door p{font-size:.92rem;line-height:1.6;color:var(--ink-2);max-width:46ch}
.door--b p{color:var(--on-night-2)}
.door__a{
  margin-top:auto;padding-top:1.1rem;display:flex;align-items:center;gap:.6em;
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
}
.door--b .door__a{color:var(--brass-2)}
.door svg{transition:transform .5s var(--ease)}
.door:hover svg{transform:translateX(5px)}
@media(max-width:820px){.doors__g{grid-template-columns:1fr}}

/* ===================== STONE STRIP, NAMED =========================
   Eight swatches with a comma-separated list underneath told you the
   names but not which was which. The name and origin now sit on the
   stone they belong to.
   ================================================================== */
.stonestrip{display:grid;overflow-x:auto;scrollbar-width:none}
.stonestrip::-webkit-scrollbar{display:none}
.stonestrip__i{position:relative;display:block;overflow:hidden}
.stonestrip__i .stone__media{transition:transform 1.1s var(--ease)}
.stonestrip__i:hover .stone__media{transform:scale(1.04)}
.stonestrip__n,.stonestrip__o{position:absolute;left:0;right:0;z-index:2;padding-inline:.9rem;color:#fff}
.stonestrip__n{
  bottom:1.5rem;font-family:var(--serif);font-size:1.02rem;font-weight:600;letter-spacing:-.01em;
  text-shadow:0 1px 12px rgba(20,12,6,.75);
}
.stonestrip__o{
  bottom:.55rem;font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  opacity:.9;text-shadow:0 1px 10px rgba(20,12,6,.8);
}
.stonestrip__i::after{
  content:"";position:absolute;inset:auto 0 0;height:52%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(20,12,6,.78));
}

/* ==================== WHAT WE SPECIALISE IN =======================
   Dee: "add the scent that we specialise in Finishing, remodelling,
   renovations, building." Named plainly and early, before any of the
   department detail, because it is the thing a client is searching for.
   ================================================================== */
.spec-band{background:var(--paper);border-bottom:1px solid var(--line)}
.spec-band__h{margin:.2rem 0 .9rem}
.spec-band .lede{margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.spec-band__g{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.spec-band__c{background:var(--paper-w);padding:clamp(1.1rem,2.2vw,1.6rem);display:flex;
  flex-direction:column;gap:.55rem;transition:background .3s var(--ease)}
.spec-band__c:hover{background:var(--paper-2)}
.spec-band__c p{font-size:.86rem;line-height:1.55;color:var(--ink-2)}
.spec-band__a{margin-top:auto;padding-top:.9rem;display:flex;align-items:center;gap:.5em;
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.spec-band__c svg{transition:transform .45s var(--ease)}
.spec-band__c:hover svg{transform:translateX(4px)}
@media(max-width:960px){.spec-band__g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.spec-band__g{grid-template-columns:1fr}}

/* ========================== EL MOGHRA =============================
   Dee: "El Moghra project is a great one, improve it and scream with
   it." Full-bleed, on the dark ground, ten frames, facts stated. It is
   the best thing they have built and it should stop the page.
   ================================================================== */
.moghra{padding-bottom:0}
.moghra__head{max-width:66ch}
.moghra__h{margin:.3rem 0 1rem;color:var(--on-night)}
.moghra__l{max-width:62ch}
.moghra__f{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-night);
  border:1px solid var(--line-night);margin:clamp(1.6rem,3vw,2.4rem) 0 1.6rem;
}
.moghra__f li{background:var(--night);padding:.9rem 1rem;display:grid;gap:.2rem}
.moghra__f b{font-family:var(--serif);font-size:1.02rem;font-weight:600;color:var(--brass-2)}
.moghra__f span{font-size:.74rem;line-height:1.4;color:var(--on-night-2)}
.moghra__show{margin-top:clamp(2rem,4vw,3.2rem)}
.moghra__show .show__box{aspect-ratio:21/9}
.moghra__show figcaption{display:none}
@media(max-width:820px){
  .moghra__f{grid-template-columns:repeat(2,1fr)}
  .moghra__show .show__box{aspect-ratio:4/3}
}

/* ================================================================
   COMMISSIONS — the "can you make this?" catalogue
   ----------------------------------------------------------------
   Every piece is a line drawing, so the card is built around the
   drawing rather than around a photograph. The drawings sit on a
   tinted panel with generous air; stone options are shown as real
   swatch colours pulled from the stone catalogue, because a colour
   the visitor can actually order is worth more than an icon.
   ================================================================ */
.pdraw{width:100%;height:auto;display:block;color:var(--ink)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.4vw,2.4rem)}
@media(max-width:960px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.pgrid{grid-template-columns:1fr}}

.pcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid rgba(43,33,26,.13);border-radius:2px;overflow:hidden;
  transition:border-color .25s ease,transform .25s ease}
.pcard:hover{border-color:var(--brass);transform:translateY(-3px)}
.pcard:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.pcard__d{background:var(--paper-2);padding:1.5rem 1.5rem .6rem;display:flex;justify-content:center}
.pcard__d .pdraw{max-width:210px}
.pcard__b{padding:1.3rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.pcard__k{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);font-weight:600}
.pcard__b h3{font-family:var(--serif);font-size:1.32rem;line-height:1.18;margin:0}
.pcard__b p{margin:0;font-size:.94rem;line-height:1.5;opacity:.78}
.pcard__s{display:flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:.9rem}
.pdot{width:15px;height:15px;border-radius:50%;border:1px solid rgba(43,33,26,.22);flex:none}
.pcard__sn{font-size:.76rem;opacity:.6;margin-left:.3rem}

/* --- one piece --- */
.pdetail__top{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:2rem}
@media(max-width:820px){.pdetail__top{grid-template-columns:1fr}}
.pdetail__d{background:var(--paper-2);border-radius:2px;padding:2rem;display:flex;justify-content:center}
.pdetail__ar{font-size:1.15rem;opacity:.62;margin:.1rem 0 1rem}
.pdetail__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}

.pbuild{list-style:none;counter-reset:pb;padding:0;margin:0;display:grid;gap:1.15rem}
.pbuild li{counter-increment:pb;position:relative;padding-left:2.6rem;line-height:1.62}
.pbuild li::before{content:counter(pb,decimal-leading-zero);position:absolute;left:0;top:.1rem;
  font-family:var(--serif);font-size:.92rem;color:var(--brass);font-variant-numeric:tabular-nums}

.pwatch{margin-top:1.8rem;padding:1.3rem 1.5rem;background:var(--paper);
  border-left:3px solid var(--brass);border-radius:2px}
.pwatch h3{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .55rem;opacity:.72}
.pwatch p{margin:0;line-height:1.6}

/* ================================================================
   ARABIC / RIGHT-TO-LEFT
   ----------------------------------------------------------------
   The Arabic site is not the English site flipped. Two things carry
   most of the difference:

   1. TYPE. Arabic set in a Latin face with a fallback looks machine
      made, and it is the fastest way to lose a premium Egyptian
      buyer. Tajawal carries the text and Amiri the display sizes —
      both real Arabic faces, and Amiri has the presence at 60px that
      Fraunces has in English.

   2. RHYTHM. Arabic needs more leading than Latin at the same size
      because of the descenders and the diacritic space, and it reads
      slightly larger. Letter-spacing is removed everywhere: spacing
      out an Arabic word breaks the joins between letters and renders
      it close to unreadable. This is the single most common mistake
      on bilingual sites.
   ================================================================ */
[dir="rtl"]{
  --sans:"Tajawal",-apple-system,"Segoe UI",system-ui,sans-serif;
  --serif:"Amiri","Tajawal",Georgia,serif;
}
[dir="rtl"] body{font-family:var(--sans);line-height:1.85}
[dir="rtl"] .d1,[dir="rtl"] .d2,[dir="rtl"] .d3,[dir="rtl"] .d4,
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{
  font-family:var(--serif);letter-spacing:0}
/* Amiri carries tall ascenders and deep descenders. At the leading that suits
   Fraunces the lines physically collide, so display sizes get much more. */
[dir="rtl"] .d1{line-height:1.5}
[dir="rtl"] .d2{line-height:1.55}
[dir="rtl"] .d3,[dir="rtl"] .d4{line-height:1.6}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{line-height:1.5}
/* The wordmark is a fixed-width Latin lockup; in RTL it was being squeezed
   by the flex row and clipping its own last letter. */
[dir="rtl"] .lg{flex:none;min-width:max-content}
[dir="rtl"] .hdr__in{gap:1rem}
[dir="rtl"] .lede{line-height:1.9}

/* Never letter-space Arabic — it breaks the letter joins. */
[dir="rtl"] .kicker,[dir="rtl"] .card__eyebrow,[dir="rtl"] .pcard__k,
[dir="rtl"] .menu-btn__label,[dir="rtl"] .lg__sub,[dir="rtl"] .hdr__tel,
[dir="rtl"] .pwatch h3,[dir="rtl"] .ph__badge,[dir="rtl"] .skip{letter-spacing:0;text-transform:none}
/* Chromium ignores letter-spacing on Arabic; Safari (every iOS browser) does
   not, and drew gaps inside the joins of buttons, labels and chips. So: none
   anywhere on an Arabic page, except explicitly Latin runs. */
[dir="rtl"] :where(body *){letter-spacing:0!important}
[dir="rtl"] .ltr,[dir="rtl"] .lg__name{letter-spacing:revert!important}

/* Latin fragments inside Arabic — phone numbers, stone names, sizes —
   stay in the Latin face and stay left-to-right inside the Arabic run. */
[dir="rtl"] .ltr,[dir="rtl"] .hdr__tel,
[dir="rtl"] a[href^="tel:"],[dir="rtl"] .lg__name{
  direction:ltr;unicode-bidi:isolate;font-family:"DM Sans",var(--sans)}
[dir="rtl"] .spec th{text-align:right}
/* A price is digits plus an Arabic unit. The digits are isolated LTR so the
   thousands separator and the en-dash stay in order; the unit stays Arabic
   and stays to their right, which is how a price is read aloud in Egypt. */
.prange__u{font-size:.72em;opacity:.8;font-weight:500}

/* Directional layout that logical properties do not cover. */
[dir="rtl"] .pbuild li{padding-left:0;padding-right:2.6rem}
[dir="rtl"] .pbuild li::before{left:auto;right:0}
[dir="rtl"] .pwatch{border-left:0;border-right:3px solid var(--brass)}
[dir="rtl"] .crumbs,[dir="rtl"] .sec-head,[dir="rtl"] .hero__c{text-align:right}
[dir="rtl"] .wa-float{right:auto;left:1.2rem}
/* The skip link hides itself with left:-9999px. Flipping that to left:auto
   did not mirror it — it UN-hid it, pinning a permanently visible black bar
   over the wordmark. It has to be hidden off the RIGHT edge in RTL and
   revealed on focus, exactly as the LTR rule does on the left. */
[dir="rtl"] .skip{left:auto;right:-9999px}
[dir="rtl"] .skip:focus{left:auto;right:0}
[dir="rtl"] .I-arrow,[dir="rtl"] .tlink svg,[dir="rtl"] .btn svg{transform:scaleX(-1)}

/* The language switch sits beside the price button in both directions. */
.hdr__lang{display:inline-flex;align-items:center;padding:.5rem .85rem;
  border:1px solid rgba(255,255,255,.28);border-radius:2px;text-decoration:none;
  color:inherit;font-size:.86rem;line-height:1;white-space:nowrap;transition:border-color .2s}
.hdr__lang:hover{border-color:var(--brass-2)}
@media(max-width:820px){.hdr__lang{display:none}}

/* ================================================================
   THE MONEY BAND
   ----------------------------------------------------------------
   The one argument that wins the job: the client pays the supplier
   directly and holds the tax invoice, so no margin can hide in the
   materials. It gets its own visual world — the dark ground used
   nowhere else on the home page — so it reads as a statement rather
   than as another section. Not a popup: a popup is closed before it
   is read, and this is the paragraph that has to be read.
   ================================================================ */
.money{background:var(--night);color:var(--paper)}
.money .kicker{color:var(--brass-2)}
.money__head{max-width:60rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.money__head .d2{margin:.4rem 0 1.1rem}
.money__head .d2 em{font-style:normal;color:var(--brass-2)}
.money__head .lede{color:var(--on-night-2);opacity:1;max-width:46rem}

.money__steps{list-style:none;counter-reset:m;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,2.6vw,2.6rem)}
@media(max-width:900px){.money__steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.money__steps{grid-template-columns:1fr}}
.money__steps li{counter-increment:m;padding-top:1.15rem;border-top:1px solid rgba(232,168,124,.4)}
.money__steps li::before{content:counter(m,decimal-leading-zero);display:block;
  font-family:var(--serif);font-size:.9rem;color:var(--brass-2);margin-bottom:.7rem;
  font-variant-numeric:tabular-nums}
.money__steps h3{font-family:var(--serif);font-size:1.16rem;line-height:1.25;margin:0 0 .5rem}
.money__steps p{margin:0;font-size:.94rem;line-height:1.6;opacity:.78}

.money__extras{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(1.4rem,2.6vw,2.6rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
@media(max-width:700px){.money__extras{grid-template-columns:1fr}}
.money__extras>div{background:rgba(246,241,231,.06);border:1px solid rgba(246,241,231,.14);
  border-radius:2px;padding:1.5rem 1.7rem}
.money__extras h3{font-family:var(--serif);font-size:1.16rem;margin:0 0 .5rem}
.money__extras p{margin:0;line-height:1.6;opacity:.82}
.money__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(2.2rem,4vw,3rem)}

[dir="rtl"] .money__steps li{border-top:1px solid rgba(232,168,124,.4)}


/* ================================================================
   PRE-LAUNCH AUDIT FIXES — 2026-09-14
   ================================================================ */
/* A one-line button label ("Get a quote for fire fighting, alarm & security")
   was wider than a phone and got clipped by overflow-x:clip. */
@media(max-width:600px){.btn{white-space:normal;text-align:center;line-height:1.45;max-width:100%}}
/* The money band is dark but is not a .dark section: its WhatsApp button drew
   ink text on an ink ground (1:1) and the kicker/lede lost contrast. */
.money .btn--ghost{color:var(--on-night);border-color:var(--brass-night)}
.money .btn--ghost:hover{background:var(--brass-2);color:var(--night);border-color:var(--brass-2)}
.dark .kicker{color:var(--on-night-2)}
/* Breadcrumbs default to the light page; the on-night colours belong to heroes. */
.crumbs{color:var(--ink-2)}
.crumbs a:hover,.crumbs [aria-current]{color:var(--ink)}
.hero .crumbs,.dark .crumbs{color:var(--on-night-2)}
.hero .crumbs a:hover,.hero .crumbs [aria-current],.dark .crumbs a:hover,.dark .crumbs [aria-current]{color:var(--on-night)}
/* Keyboard focus that can be seen on dark grounds and inside form fields. */
.hdr--shop :focus-visible,.dark :focus-visible,.money :focus-visible,.show__box :focus-visible{outline-color:var(--brass-2)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.cat-search:focus-visible{box-shadow:0 2px 0 var(--brass)}
/* The open menu starts below the real header, and the header rail and search
   stop catching taps meant for the menu's Call and WhatsApp buttons. */
body.nav-open .hdr__depts,body.nav-open .hdr__search{visibility:hidden}
.menu{padding-top:calc(var(--hdr-h,96px) + 1.2rem)}
.menu__lang{min-width:0}
/* RTL: the search bar's outer corners, and the CTA-band arrow. */
[dir="rtl"] .hdr__search input{border-radius:0 4px 4px 0}
[dir="rtl"] .hdr__search button{border-radius:4px 0 0 4px}
[dir="rtl"] .kicker[data-n="→"]::before{content:"←"}
.swatch-tag{font-size:.62rem}


/* ==================================================================
   ITMAM v5 — the 2026-10-06 redesign
   ------------------------------------------------------------------
   Appended to site.css at build time (build.mjs → dist). Everything
   above this line is the v1–v4 system; this layer re-skins all of it
   and adds the new parts. Brief from Dee: "completely redesign, as a
   designer and SEO expert — everything serves SEO and inbound leads",
   and "the site has a lot of pages and media, organise and present
   them well".

   The five rules of v5:
     1. Say the search words.  التشطيبات · الديكور · التوريدات in the
                               menu, the headings and the titles.
     2. A lead is one tap away. WhatsApp, call and a written quotation
                               on every screen; a sticky bar on phones.
     3. One family, two scripts. Readex Pro sets Arabic and English
                               alike, so the two sites read as one brand.
     4. Malachite and copper.   Deep green for the brand and dark bands
                               (verde marble, brass fittings — the
                               materials in their own photographs).
                               Copper means ACTION, and nothing else is.
     5. Light pages, real work.  Ivory ground, white cards, the photos
                               do the talking; nothing is decoration.
   ================================================================== */
:root{
  --paper:#F7F5F0;
  --paper-w:#FFFFFF;
  --paper-2:#EFEBE3;
  --paper-3:#E3DDD1;
  --ink:#17201C;
  --ink-2:#47504B;
  --ink-3:#5F6862;
  --night:#123B30;
  --night-2:#0D2E25;
  --on-night:#F4F1EA;
  --on-night-2:#BCCBC3;
  --brass:#A9512A;
  --brass-2:#E3A07A;
  --brass-soft:rgba(169,81,42,.20);
  --brass-night:rgba(227,160,122,.42);
  --green:#13834A;
  --green-d:#0F6B3B;
  --line:#E2DCD0;
  --line-soft:#ECE7DE;
  --line-night:rgba(244,241,234,.16);
  --sans:"Readex Pro",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --serif:"Readex Pro",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --r:16px;
  --r-sm:10px;
  --shadow:0 1px 2px rgba(18,32,26,.06),0 12px 28px -14px rgba(18,32,26,.22);
  --wrap:1320px;
  --sec:clamp(3.2rem,6.5vw,5.8rem);
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
[dir="rtl"]{--sans:"Readex Pro",Tahoma,Arial,sans-serif;--serif:"Readex Pro",Tahoma,Arial,sans-serif}
body{background:var(--paper);font-size:16.5px;line-height:1.65;letter-spacing:0}
/* [hidden] must win over any display rule: the form's thank-you panel
   showed before anything was sent because .qf__done set display:grid. */
[hidden]{display:none!important}
[dir="rtl"] body{line-height:1.8}
::selection{background:var(--night);color:#fff}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* ------------------------------ type ----------------------------- */
.d1,.d2,.d3,.d4{font-family:var(--sans);font-weight:600;color:inherit}
.d1{font-size:clamp(2.05rem,4.4vw,3.7rem);line-height:1.1;letter-spacing:-.022em}
.d2{font-size:clamp(1.55rem,2.9vw,2.45rem);line-height:1.16;letter-spacing:-.018em}
.d3{font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.25;letter-spacing:-.01em}
.d4{font-size:clamp(1.02rem,1.3vw,1.15rem);line-height:1.35}
[dir="rtl"] .d1{line-height:1.35}
[dir="rtl"] .d2{line-height:1.42}
[dir="rtl"] .d3,[dir="rtl"] .d4,[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{line-height:1.45}
[dir="rtl"] .d1,[dir="rtl"] .d2,[dir="rtl"] .d3,[dir="rtl"] .d4,[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{font-family:var(--sans);font-weight:600}
.d1 em,.d2 em,.d3 em{font-style:normal;color:var(--brass)}
.kicker{font-size:.8rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--brass);margin-bottom:.9rem;gap:.6em}
.kicker[data-n]::before{content:none}
.dark .kicker,.money .kicker,.qbox .kicker{color:var(--brass-2)}
.lede{font-size:clamp(1.04rem,1.35vw,1.18rem);line-height:1.62;color:var(--ink-2);max-width:62ch;letter-spacing:0}
[dir="rtl"] .lede{line-height:1.85}
.prose{max-width:70ch}
.sec-head{margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.sec-head .d1,.sec-head .d2,.sec-head .d3{max-width:24ch}
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(2.4rem,5vw,4rem)}
.tint{background:var(--paper-2)}
.white{background:var(--paper-w)}
.dark{background:var(--night)}
.wrap{width:min(100% - (var(--gut) * 2),var(--wrap))}
.grid{gap:clamp(1rem,2vw,1.6rem)}
.split{gap:clamp(1.6rem,5vw,5rem)}

/* ----------------------------- buttons --------------------------- */
.btn{gap:.55em;padding:.85em 1.4em;font-size:.95rem;font-weight:600;letter-spacing:0;text-transform:none;
  border-radius:var(--r-sm);border-width:1.5px;line-height:1.25;transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background:var(--brass);border-color:var(--brass);color:#fff;border-radius:var(--r-sm)}
.btn--primary:hover{background:#8E4220;border-color:#8E4220;color:#fff}
.btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink);border-radius:var(--r-sm)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--wa{background:var(--green);border-color:var(--green);color:#fff}
.btn--wa:hover{background:var(--green-d);border-color:var(--green-d);color:#fff}
.btn--sm{padding:.58em .95em;font-size:.88rem}
.btn--lg{padding:.95em 1.5em;font-size:1.02rem}
.dark .btn--primary,.on-night .btn--primary,.qbox .btn--primary,.money .btn--primary{background:var(--brass);color:#fff;border-color:var(--brass)}
.dark .btn--primary:hover,.on-night .btn--primary:hover,.money .btn--primary:hover{background:#8E4220;border-color:#8E4220;color:#fff}
.dark .btn--ghost,.on-night .btn--ghost,.qbox .btn--ghost,.money .btn--ghost{border-color:rgba(244,241,234,.55);color:var(--on-night)}
.dark .btn--ghost:hover,.on-night .btn--ghost:hover,.qbox .btn--ghost:hover,.money .btn--ghost:hover{background:var(--on-night);color:var(--night);border-color:var(--on-night)}
.btn-row{gap:.6rem;margin-top:clamp(1.4rem,2.6vw,2rem)}
.tlink{font-size:.92rem;letter-spacing:0;text-transform:none;font-weight:600;color:var(--brass);padding-bottom:.2em}
.tlink::after{height:1.5px}
.dark .tlink,.on-night .tlink{color:var(--brass-2)}

/* ------------------------------ header --------------------------- */
.hdr--v5{position:sticky;top:0;z-index:100;background:var(--paper-w);color:var(--ink);border-bottom:1px solid var(--line)}
.hdr--v5 .hdr__in{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:1.2rem;height:72px;padding-block:0}
.hdr--v5 .lg,.hdr--v5 .hdr__right{color:var(--night)}
.hdr--v5 .lg__mark{color:var(--night);width:38px;height:38px}
.lg__tile{fill:var(--brass)}
.lg__name{font-weight:600;letter-spacing:.13em;font-size:1.12rem}
.lg__sub{font-size:.58rem;letter-spacing:.16em;opacity:1;color:var(--brass);margin-top:.45em;text-transform:uppercase;font-weight:500;white-space:nowrap}
[dir="rtl"] .lg__name{font-size:1.42rem;letter-spacing:0!important;direction:rtl;font-family:var(--sans);line-height:1.05}
[dir="rtl"] .lg__sub{font-size:.72rem;opacity:1;margin-top:.25em;letter-spacing:0;text-transform:none}
.nav{flex:1;display:flex;justify-content:center;min-width:0}
.nav__list{display:flex;align-items:center;gap:.1rem}
.nav__item{position:static}
.nav__link{display:flex;align-items:center;gap:.35em;padding:.55rem .75rem;border-radius:8px;font-size:.95rem;font-weight:500;color:var(--ink);white-space:nowrap;transition:background .15s,color .15s}
.nav__link:hover,.nav__item.is-open>.nav__link{background:var(--paper-2)}
.nav__item.is-cur>.nav__link{color:var(--brass)}
.nav__chev{width:11px;height:11px;opacity:.55;transition:transform .2s}
.nav__item.is-open .nav__chev{transform:rotate(180deg)}
.mega{position:absolute;top:100%;left:calc(50% - 50vw);width:100vw;z-index:98;background:var(--paper-w);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 30px 50px -30px rgba(18,32,26,.35);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s,transform .16s,visibility .16s}
.nav__item.is-open>.mega{opacity:1;visibility:visible;transform:none}
.mega__in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 270px;gap:clamp(1.4rem,3vw,2.6rem);padding:1.8rem 0 2rem}
.mega__in--1{grid-template-columns:minmax(0,1fr) 270px}
.mega__in--4{grid-template-columns:repeat(4,minmax(0,1fr)) 230px;gap:clamp(1rem,2.2vw,2rem)}
.mega__h{font-size:.74rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.55rem}
[dir="rtl"] .mega__h{text-transform:none;font-size:.85rem}
.mega__col ul{display:grid;gap:.05rem}
.mega__col li a{display:block;padding:.32rem 0;font-size:.94rem;color:var(--ink);line-height:1.4}
.mega__col li a:hover{color:var(--brass)}
.mega__in--1 .mega__col ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem}
.mega__cta{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;background:var(--paper);border-radius:var(--r);padding:1.3rem}
.mega__all{display:flex;align-items:center;gap:.5em;font-weight:600;color:var(--brass)}
[dir="rtl"] .mega__all svg{transform:scaleX(-1)}
.hdr--v5 .hdr__right{display:flex;align-items:center;gap:.55rem;flex:none}
.hdr--v5 .hdr__tel{display:flex;align-items:center;gap:.45em;font-size:.92rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--night);white-space:nowrap;padding:.4rem .3rem}
.hdr--v5 .hdr__tel svg{width:18px;height:18px}
.hdr--v5 .hdr__quote{padding:.58em .95em;border-radius:var(--r-sm);font-size:.88rem;letter-spacing:0;font-weight:600}
.hdr--v5 .hdr__lang{border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:.48rem .7rem;font-size:.88rem}
.hdr--v5 .menu-btn{display:none;gap:.55rem;font-size:.85rem;letter-spacing:0;text-transform:none;font-weight:600;color:var(--night);padding:.5rem .2rem}
.hdr--v5 .menu-btn__bars{gap:4px;width:20px}
.hdr--v5 .menu-btn__bars i{height:2px;border-radius:2px}
.hdr--v5 .menu-btn__bars i:last-child{width:100%}
.hdr--v5 .hdr__depts{background:var(--paper);border-top:1px solid var(--line);color:var(--ink-2)}
.hdr--v5 .hdr__depts__in{display:flex;align-items:center;gap:1.15rem;padding:.4rem 0;overflow-x:auto}
.hdr--v5 .hdr__depts a{font-size:.85rem;opacity:1;color:var(--ink-2);white-space:nowrap}
.hdr--v5 .hdr__depts a:hover{color:var(--ink)}
.hdr--v5 .hdr__depts a.build{color:var(--brass);font-weight:600;margin-left:0;margin-inline-start:auto;padding:0}
.hdr--v5 .hdr__search{flex:0 0 250px;min-width:0;display:flex;margin-inline-start:.4rem}
.hdr--v5 .hdr__search input{border:1px solid var(--line);border-radius:999px 0 0 999px;padding:.38rem .9rem;font-size:16px;background:#fff;color:var(--ink);min-width:0}
.hdr--v5 .hdr__search button{background:var(--night);color:#fff;border-radius:0 999px 999px 0;padding:0 .75rem;display:grid;place-items:center}
.hdr--v5 .hdr__search button svg{width:17px;height:17px}
[dir="rtl"] .hdr--v5 .hdr__search input{border-radius:0 999px 999px 0}
[dir="rtl"] .hdr--v5 .hdr__search button{border-radius:999px 0 0 999px}
@media(max-width:1280px){.hdr--v5 .hdr__tel span{display:none}.nav__link{padding:.55rem .55rem;font-size:.92rem}}
@media(max-width:1120px){
  .nav{display:none}
  .hdr--v5 .menu-btn{display:flex}
  .hdr--v5 .hdr__in{justify-content:space-between}
  .hdr--v5 .hdr__search{display:none}
}
@media(max-width:760px){
  .hdr--v5 .hdr__in{height:60px;gap:.6rem}
  .hdr--v5 .hdr__wa,.hdr--v5 .hdr__quote,.hdr--v5 .hdr__tel{display:none}
  .hdr--v5 .hdr__depts__in{gap:.95rem;padding:.35rem 0}
  .hdr--v5 .hdr__depts a{font-size:.82rem}
  .hdr--v5 .hdr__depts a.build{margin-inline-start:0}
}
/* the full-screen menu (phones and tablets) */
.menu{background:var(--paper-w);padding:calc(var(--hdr-h,110px) + .8rem) var(--gut) 2rem;display:block}
.menu__reach{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;width:min(100%,640px);margin:0 auto}
.menu__reach .btn{width:100%}
.menu__search{display:flex;width:min(100%,640px);margin:.9rem auto 0}
.menu__search input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:var(--r-sm) 0 0 var(--r-sm);padding:.7rem .9rem;font:inherit;font-size:16px}
.menu__search button{background:var(--night);color:#fff;border-radius:0 var(--r-sm) var(--r-sm) 0;padding:0 .9rem;display:grid;place-items:center}
.menu__search button svg{width:18px;height:18px}
[dir="rtl"] .menu__search input{border-radius:0 var(--r-sm) var(--r-sm) 0}
[dir="rtl"] .menu__search button{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.menu__groups{width:min(100%,640px);margin:1rem auto 0}
.menu__g{border-bottom:1px solid var(--line)}
.menu__g summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:1rem 0;font-size:1.2rem;font-weight:600;cursor:pointer;color:var(--ink)}
.menu__g summary::-webkit-details-marker{display:none}
.menu__g summary::after{content:"+";font-weight:400;font-size:1.5rem;line-height:1;color:var(--brass)}
.menu__g[open] summary::after{content:"–"}
.menu__gin{padding-bottom:1rem}
.menu__all{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--brass);margin-bottom:.3rem}
[dir="rtl"] .menu__all svg{transform:scaleX(-1)}
.menu__h{font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:1rem 0 .3rem}
.menu .menu__list li a{padding:.38rem 0;font-size:1rem;color:var(--ink-2);transform:none}
.menu .menu__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.2rem}
.menu .menu__primary{margin-top:.6rem}
.menu .menu__primary li a{font-size:1.15rem;font-weight:600;letter-spacing:0;line-height:1.3;padding:.85rem 0;border-bottom:1px solid var(--line);transform:none}
.menu .menu__primary li a:hover{transform:none;color:var(--brass)}
.menu__foot{width:min(100%,640px);margin:1.4rem auto 0;border:0;padding:0;font-size:.85rem;color:var(--ink-3)}
@media(max-width:420px){.menu .menu__list{grid-template-columns:1fr}.menu__reach{grid-template-columns:1fr}}

/* ------------------------------- hero ---------------------------- */
/* Page heroes are LIGHT and split: the words on one side, the photograph
   on the other. Text first on a phone, because the H1 is what the visitor
   searched for. Pages without a photograph that can carry a hero keep a
   stone panel on wide screens and drop it on phones. */
.hero{background:var(--paper-2);color:var(--ink);padding-top:0}
.hero--page{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:stretch;overflow:hidden}
.hero--page .hero__in{grid-column:1;grid-row:1;width:auto;max-width:720px;min-height:0;margin:0;
  margin-inline-start:max(var(--gut),calc((100vw - var(--wrap)) / 2));padding:clamp(1.8rem,4.2vw,4rem) clamp(1.2rem,4vw,3.5rem) clamp(2rem,4.4vw,4rem) 0;justify-content:center}
[dir="rtl"] .hero--page .hero__in{padding:clamp(1.8rem,4.2vw,4rem) 0 clamp(2rem,4.4vw,4rem) clamp(1.2rem,4vw,3.5rem)}
.hero--page .hero__bg{position:relative;inset:auto;grid-column:2;grid-row:1;z-index:0;min-height:clamp(260px,32vw,500px)}
.hero--page .hero__bg::after{display:none}
.hero--page .hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .kicker{color:var(--brass)}
.hero h1{color:var(--ink);max-width:20ch}
.hero .lede{color:var(--ink-2);margin-top:1rem;max-width:56ch}
.hero__meta{border-top:1px solid var(--line);color:var(--ink-3);margin-top:1.6rem;padding-top:1rem;font-size:.78rem;letter-spacing:.04em;text-transform:none;gap:.4rem 1.6rem}
.hero .crumbs{color:var(--ink-3);padding-bottom:1.2rem;margin-bottom:0}
.hero .crumbs a:hover,.hero .crumbs [aria-current]{color:var(--ink)}
.crumbs{font-size:.8rem;letter-spacing:0;text-transform:none;font-weight:500}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.hero--stone .hero__bg::after{display:none}
@media(max-width:900px){
  .hero--page{grid-template-columns:1fr}
  .hero--page .hero__in{grid-column:1;grid-row:1;max-width:none;margin:0;padding:1.5rem var(--gut) 1.8rem!important}
  .hero--page .hero__bg{grid-column:1;grid-row:2;min-height:0;aspect-ratio:16/9}
  .hero--page.hero--stone .hero__bg{display:none}
}

/* ------------------------------ cards ---------------------------- */
.card{background:var(--paper-w);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow .25s,transform .25s}
a.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card__media{margin-bottom:0}
a.card:hover .card__media .ph,a.card:hover .card__media img{transform:scale(1.03)}
.card__body{padding:1rem 1.15rem 1.2rem;gap:.35rem}
.card__eyebrow{font-size:.74rem;letter-spacing:.05em;color:var(--brass);font-weight:600}
.card__title{font-family:var(--sans);font-size:1.08rem;font-weight:600;letter-spacing:-.005em;line-height:1.3}
.card__text{font-size:.9rem;line-height:1.55}
.card__foot{font-size:.86rem;letter-spacing:0;text-transform:none;color:var(--brass);padding-top:.8rem}
.dark .card{background:var(--night-2);border-color:var(--line-night)}
.stone{background:var(--paper-w);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow .25s}
.stone:hover{box-shadow:var(--shadow)}
.stone__body{padding:.85rem 1rem 1rem}
.stone__name{font-family:var(--sans);font-weight:600}
.index-list{border-top-color:var(--line)}
.index-list .t{font-family:var(--sans)}
.feat h3,.ranges h3,.money__steps h3,.money__extras h3,.stats .v,.moghra__f b,.pcard__k,.door h2{font-family:var(--sans)}
.ph{border-radius:0}
figure.fig figcaption{font-size:.8rem;letter-spacing:0;color:var(--ink-3)}

/* chips (catalogue filters, gallery filters) */
.chip{border:1px solid var(--line);border-radius:999px;padding:.42rem .95rem;font-size:.88rem;background:var(--paper-w);color:var(--ink-2);letter-spacing:0;text-transform:none}
.chip[aria-pressed="true"],.chip.is-on{background:var(--night);border-color:var(--night);color:#fff}

/* ------------------------------- FAQ ----------------------------- */
.faq{border-top:0}
.faq details{background:var(--paper-w);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:.6rem;padding:0 1.2rem}
.faq summary{font-size:1.04rem;font-weight:600;letter-spacing:0;padding:1.05rem 2.2rem 1.05rem 0;line-height:1.45}
.faq summary::after{top:1.45rem;color:var(--brass)}
[dir="rtl"] .faq summary{padding:1.05rem 0 1.05rem 2.2rem}
[dir="rtl"] .faq summary::after{right:auto;left:.2rem}
.faq .a{padding:0 0 1.1rem;font-size:.97rem;line-height:1.7}
.tint .faq details,.dark .faq details{background:var(--paper-w)}
.dark .faq summary{color:var(--ink)}
.dark .faq .a{color:var(--ink-2)}

/* ------------------------------- forms --------------------------- */
.form{gap:1rem}
.field{gap:.38rem}
.field label{font-size:.88rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.field input,.field select,.field textarea{font-size:16px;padding:.72em .9em;background:var(--paper-w);color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--r-sm)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-soft)}
.field select{background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;padding-right:2.4rem}
[dir="rtl"] .field select{background-position:15px 50%,20px 50%;padding-right:.9em;padding-left:2.4rem}
.field--2{gap:1rem}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#B42318}
.form__err{color:#B42318}
.form__note{font-size:.8rem;color:var(--ink-3)}
.req{color:var(--brass)}
.hp{display:none!important}

/* -------------------- the quotation strip (all pages) ------------- */
.qbox{background:var(--night);color:var(--on-night);padding-block:clamp(3rem,6vw,5rem)}
.qbox__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(1.8rem,5vw,4.5rem);align-items:center}
.qbox .d2{color:#fff;max-width:22ch}
.qbox .lede{color:var(--on-night-2);margin-top:1rem}
.qbox__or{margin-top:1.6rem;font-size:.85rem;color:var(--on-night-2)}
.qbox .btn-row{margin-top:.6rem}
.qbox__card{background:var(--paper-w);color:var(--ink);border-radius:20px;padding:clamp(1.3rem,3vw,2.1rem);box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.qf .btn--lg{width:100%}
.qf__done{display:grid;gap:.9rem;justify-items:start}
.qf__doneh{font-size:1.25rem;font-weight:600;color:var(--night)}
.ticks{display:grid;gap:.55rem;margin-top:1.3rem}
.ticks li{position:relative;padding-inline-start:1.9rem;line-height:1.5}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.12em;width:1.25rem;height:1.25rem;border-radius:50%;
  background:var(--brass);-webkit-mask:none}
.ticks li::after{content:"";position:absolute;inset-inline-start:.28rem;top:calc(.12em + .28rem);width:.7rem;height:.7rem;background:#fff;
  -webkit-mask:var(--check) center/contain no-repeat;mask:var(--check) center/contain no-repeat}
.qbox .ticks li{color:var(--on-night)}
@media(max-width:900px){.qbox__in{grid-template-columns:1fr}}

/* ------------------------------ footer --------------------------- */
.ftr--v5{background:var(--night-2);color:var(--on-night-2);border-top:0;padding-top:clamp(3rem,6vw,4.5rem)}
.ftr--v5 .ftr__top{grid-template-columns:1.5fr repeat(5,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.4rem);padding-bottom:2.2rem}
.ftr--v5 h4{font-size:.95rem;font-weight:600;letter-spacing:0;text-transform:none;color:#fff;margin-bottom:.8rem}
.ftr--v5 h4 a:hover{color:var(--brass-2);text-decoration:none}
.ftr--v5 .ftr__h2{margin-top:1.6rem}
.ftr--v5 li{font-size:.9rem;margin-bottom:.4rem}
.ftr--v5 a:hover{color:#fff}
.ftr--v5 .lg{color:#fff}
.ftr--v5 .lg__mark{color:var(--on-night)}
.ftr--v5 .lg__tile{fill:var(--brass-2)}
.ftr--v5 .lg__sub{color:var(--brass-2);letter-spacing:.1em}
.ftr--v5 .lg__mark{width:34px;height:34px}
.ftr--v5 .ftr__blurb{color:var(--on-night-2);font-size:.92rem}
.ftr__reach{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:1.3rem}
.ftr__tel{font-weight:600;color:#fff}
.ftr--v5 .ftr__addr{font-size:.9rem}
.ftr--v5 .ftr__addr strong{color:#fff;font-size:.78rem;letter-spacing:.04em}
.ftr__contact{margin-top:.9rem}
.ftr--v5 .ftr__areas{color:var(--on-night-2);opacity:.85;font-size:.82rem}
.ftr--v5 .ftr__bot{border-top-color:var(--line-night);color:var(--on-night-2);font-size:.82rem}
@media(max-width:1100px){.ftr--v5 .ftr__top{grid-template-columns:repeat(3,minmax(0,1fr))}.ftr__brand{grid-column:1/-1}}
@media(max-width:700px){.ftr--v5 .ftr__top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:440px){.ftr--v5 .ftr__top{grid-template-columns:1fr}}

/* ------------------------- WhatsApp + phone bar ------------------ */
.wa-float{background:var(--green);color:#fff;border-radius:999px;padding:.8rem 1.2rem;font-size:.9rem;letter-spacing:0;text-transform:none;box-shadow:0 10px 30px -10px rgba(0,0,0,.45)}
.wa-float:hover{background:var(--green-d)}
.wa-float svg{width:20px;height:20px}
.mbar{display:none}
@media(max-width:900px){
  .mbar{position:fixed;inset:auto 0 0 0;z-index:95;display:grid;grid-template-columns:1fr 1.2fr 1fr;
    background:var(--paper-w);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -10px 28px -16px rgba(0,0,0,.35)}
  .mbar__b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-height:58px;padding:.4rem .2rem;
    font-size:.78rem;font-weight:600;color:var(--night);background:var(--paper-w)}
  .mbar__b svg{width:22px;height:22px}
  .mbar__b--wa{background:var(--green);color:#fff}
  .mbar__b--q{background:var(--brass);color:#fff}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  .wa-float{display:none!important}
}

/* --------------------------- landing pages ----------------------- */
.lp{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.lp__body>section{scroll-margin-top:calc(var(--hdr-h,110px) + 1rem)}
.lp__body h2{font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:600;line-height:1.25;margin:2.4rem 0 .8rem;color:var(--ink)}
.lp__body>section:first-child h2{margin-top:0}
.lp__body p{margin:.75rem 0;color:var(--ink-2);max-width:72ch;font-size:1.02rem}
.lp__body .bul{display:grid;gap:.45rem;margin:.9rem 0}
.lp__body .bul li{position:relative;padding-inline-start:1.35rem;color:var(--ink-2);line-height:1.6}
.lp__body .bul li::before{content:"";position:absolute;inset-inline-start:.1rem;top:.68em;width:.45rem;height:.45rem;border-radius:50%;background:var(--brass)}
.steps{counter-reset:st;display:grid;gap:1rem;margin:1rem 0}
.steps li{counter-increment:st;position:relative;padding-inline-start:3.1rem;min-height:2.2rem}
.steps li::before{content:counter(st);position:absolute;inset-inline-start:0;top:0;width:2.2rem;height:2.2rem;border-radius:50%;
  background:var(--night);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.92rem}
.steps h3{font-size:1.06rem;font-weight:600;margin:0 0 .25rem;color:var(--ink)}
.steps p{margin:0!important}
.tw{overflow-x:auto;margin:1rem 0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper-w)}
.tw table{min-width:560px}
.tw th,.tw td{padding:.75rem .9rem;border-bottom:1px solid var(--line);text-align:start;vertical-align:top;font-size:.93rem;line-height:1.5}
.tw th{background:var(--paper-2);font-weight:600;color:var(--ink)}
.tw tr:last-child td{border-bottom:0}
.lp__aside{position:sticky;top:calc(var(--hdr-h,110px) + 1rem);display:grid;gap:1rem}
.toc{background:var(--paper-w);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem}
.toc p{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.5rem}
[dir="rtl"] .toc p{text-transform:none;font-size:.88rem}
.toc a{display:block;padding:.3rem 0;color:var(--ink-2);font-size:.92rem;line-height:1.4}
.toc a:hover{color:var(--brass)}
.aside-cta{background:var(--night);color:var(--on-night);border-radius:var(--r);padding:1.2rem;display:grid;gap:.6rem}
.aside-cta p{font-size:.95rem;line-height:1.5;color:var(--on-night)}
.aside-cta .btn{width:100%}
@media(max-width:1000px){.lp{grid-template-columns:1fr}.lp__aside{display:none}}

/* link cards (hubs, related reading) */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(.8rem,1.6vw,1.2rem)}
.lcard{display:flex;flex-direction:column;gap:.45rem;background:var(--paper-w);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.25rem 1.15rem;transition:box-shadow .2s,transform .2s,border-color .2s}
.lcard:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--paper-3)}
.lcard__k{font-size:.74rem;font-weight:600;letter-spacing:.05em;color:var(--brass)}
.lcard h3{font-size:1.07rem;font-weight:600;line-height:1.35;color:var(--ink)}
.lcard p{font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.lcard__go{margin-top:auto;padding-top:.5rem;font-size:.86rem;font-weight:600;color:var(--brass);display:flex;align-items:center;gap:.4em}
[dir="rtl"] .lcard__go svg{transform:scaleX(-1)}
.hub-sec+.hub-sec{margin-top:clamp(2.4rem,5vw,3.6rem)}
.hub-sec__h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.6rem 2rem;margin-bottom:1.2rem}

/* ------------------------- gallery + lightbox --------------------- */
.gal__bar{position:sticky;top:var(--hdr-h,110px);z-index:30;background:var(--paper);padding:.8rem 0;border-bottom:1px solid var(--line);margin-bottom:1.4rem}
.gal__chips{display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.1rem}
.gal__chips::-webkit-scrollbar{display:none}
.gal__chips .chip{white-space:nowrap;flex:none}
.gal__count{font-size:.85rem;color:var(--ink-3);margin-top:.5rem}
.gal__grid{columns:4 230px;column-gap:10px}
.gal__i{position:relative;display:block;break-inside:avoid;margin:0 0 10px;border-radius:10px;overflow:hidden;background:var(--paper-2);cursor:zoom-in}
.gal__i img{width:100%;height:auto;display:block;transition:transform .5s}
.gal__i:hover img{transform:scale(1.03)}
.gal__i[hidden]{display:none}
.gal__cap{position:absolute;inset:auto 0 0;padding:1.6rem .7rem .55rem;font-size:.78rem;line-height:1.35;color:#fff;
  background:linear-gradient(transparent,rgba(10,18,14,.78));opacity:0;transition:opacity .2s}
.gal__i:hover .gal__cap,.gal__i:focus-visible .gal__cap{opacity:1}
@media(hover:none){.gal__cap{opacity:1;font-size:.72rem}}
.gal__more{display:flex;justify-content:center;margin-top:1.4rem}
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,14,11,.94);display:none;grid-template-rows:auto 1fr auto;color:#fff}
.lb.is-open{display:grid}
.lb__top{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;font-size:.9rem}
.lb__stage{position:relative;display:grid;place-items:center;min-height:0;padding:0 3.6rem}
.lb__stage img{max-width:100%;max-height:calc(100vh - 140px);object-fit:contain;border-radius:6px}
.lb__cap{padding:.6rem 1rem 1.2rem;text-align:center;font-size:.92rem;color:#E9EEE9;min-height:2.6rem}
.lb__btn{background:rgba(255,255,255,.12);color:#fff;border-radius:999px;width:44px;height:44px;display:grid;place-items:center;font-size:1.3rem}
.lb__btn:hover{background:rgba(255,255,255,.24)}
.lb__prev,.lb__next{position:absolute;top:50%;transform:translateY(-50%)}
.lb__prev{inset-inline-start:.6rem}
.lb__next{inset-inline-end:.6rem}
@media(max-width:600px){.lb__stage{padding:0 .4rem}.lb__prev,.lb__next{top:auto;bottom:-3.2rem;transform:none}}

/* video wall */
.vwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.vwall .vid{margin:0}
.vwall video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px;background:#000}

/* ----------------------------- home v5 --------------------------- */
.h5hero{position:relative;color:#fff;background:var(--night-2);isolation:isolate;overflow:hidden}
.h5hero__bg{position:absolute;inset:0;z-index:-1}
.h5hero__bg img{width:100%;height:100%;object-fit:cover}
.h5hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(9,28,22,.9) 0%,rgba(9,28,22,.66) 45%,rgba(9,28,22,.18) 100%)}
[dir="rtl"] .h5hero__bg::after{background:linear-gradient(260deg,rgba(9,28,22,.9) 0%,rgba(9,28,22,.66) 45%,rgba(9,28,22,.18) 100%)}
.h5hero h1{font-size:clamp(2rem,3.5vw,3.15rem)}
.h5hero__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.6rem,4vw,4rem);align-items:center;padding-block:clamp(2.4rem,6vw,5.5rem)}
.h5hero .kicker{color:var(--brass-2)}
.h5hero h1{color:#fff;max-width:18ch}
.h5hero .lede{color:#DCE5E0;margin-top:1.1rem;max-width:54ch}
.h5hero__pills{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.4rem}
.h5hero__pills a{border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:.38rem .85rem;font-size:.88rem;color:#fff}
.h5hero__pills a:hover{background:#fff;color:var(--night)}
.h5hero__card{background:var(--paper-w);color:var(--ink);border-radius:20px;padding:clamp(1.2rem,2.6vw,1.8rem);box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.h5hero__card h2{font-size:1.2rem;font-weight:600;margin-bottom:.25rem;color:var(--night)}
.h5hero__card>p{font-size:.9rem;color:var(--ink-2);margin-bottom:1rem}
@media(max-width:960px){.h5hero__in{grid-template-columns:1fr}.h5hero__bg::after,[dir="rtl"] .h5hero__bg::after{background:linear-gradient(180deg,rgba(9,28,22,.86),rgba(9,28,22,.94))}}
.h5trust{background:var(--paper-w);border-bottom:1px solid var(--line)}
.h5trust__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)}
.h5trust__in>div{background:var(--paper-w);padding:1.1rem 1.2rem;display:flex;gap:.8rem;align-items:flex-start}
.h5trust b{display:block;font-size:.98rem;color:var(--night)}
.h5trust span{font-size:.86rem;color:var(--ink-2);line-height:1.45}
.h5trust i{flex:none;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;color:var(--brass);font-style:normal;font-weight:700}
@media(max-width:900px){.h5trust__in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.h5trust__in{grid-template-columns:1fr}}
.h5pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,2vw,1.4rem)}
.h5pillar{display:flex;flex-direction:column;background:var(--paper-w);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow .25s,transform .25s}
.h5pillar:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.h5pillar__m{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.h5pillar__m img{width:100%;height:100%;object-fit:cover}
.h5pillar__b{padding:1.2rem 1.3rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.h5pillar__b h3{font-size:1.3rem;font-weight:600;color:var(--night)}
.h5pillar__b p{font-size:.95rem;color:var(--ink-2)}
.h5pillar__b ul{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem}
.h5pillar__b li{font-size:.8rem;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.22rem .6rem;color:var(--ink-2)}
.h5pillar__go{margin-top:auto;padding-top:.8rem;font-weight:600;color:var(--brass);display:flex;align-items:center;gap:.45em}
[dir="rtl"] .h5pillar__go svg{transform:scaleX(-1)}
@media(max-width:900px){.h5pillars{grid-template-columns:1fr}}
.h5build{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:1.2rem;padding:1.1rem 1.3rem;
  background:var(--night);color:var(--on-night);border-radius:var(--r)}
.h5build p{color:var(--on-night)}
.h5build b{color:#fff}
.h5strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.h5strip a{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:10px;background:var(--paper-2)}
.h5strip img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.h5strip a:hover img{transform:scale(1.05)}
@media(max-width:900px){.h5strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
.h5steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,2vw,1.4rem);counter-reset:hs}
.h5steps li{counter-increment:hs;background:var(--paper-w);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem}
.h5steps li::before{content:counter(hs);display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--night);color:#fff;font-weight:600;margin-bottom:.8rem}
.h5steps h3{font-size:1.05rem;font-weight:600;margin-bottom:.35rem;color:var(--ink)}
.h5steps p{font-size:.92rem;color:var(--ink-2)}
@media(max-width:900px){.h5steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.h5steps{grid-template-columns:1fr}}
.h5areas{display:flex;flex-wrap:wrap;gap:.5rem}
.h5areas a{border:1px solid var(--line);background:var(--paper-w);border-radius:999px;padding:.5rem 1rem;font-size:.92rem;color:var(--ink)}
.h5areas a:hover{border-color:var(--brass);color:var(--brass)}

/* RTL: arrows in links point the reading direction */
[dir="rtl"] .card__foot svg,[dir="rtl"] .tlink svg{transform:scaleX(-1)}

/* print: no chrome */
@media print{.hdr--v5,.mbar,.wa-float,.qbox,.menu{display:none!important}}

/* hero mosaic: four of the page's own job photos when none can carry a hero */
.hero__mosaic{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;background:var(--paper-2);padding:6px}
.hero__mosaic .hm__t{position:relative;overflow:hidden;border-radius:10px;background:var(--paper-3)}
.hero__mosaic--3{grid-template-columns:1.3fr 1fr}
.hero__mosaic--3 .hm__t:first-child{grid-row:1/3}
.hero__mosaic .hm__t:empty{display:none}
.hero__mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){
  .hero--mosaic .hero__bg{aspect-ratio:auto;height:180px}
  .hero__mosaic{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}
  .hero__mosaic--3 .hm__t:first-child{grid-row:auto}
  .hero__mosaic--4{grid-template-columns:repeat(4,1fr)}
}

/* video tiles: a poster image until tapped, so a page of clips stays light */
.vt{position:relative;display:block;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#0c1511}
.vt img,.vt video{width:100%;height:100%;object-fit:cover}
.vt__play{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.9);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.6)}
.vt__play::after{content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--night)}
.vt__cap{position:absolute;inset:auto 0 0;padding:1.4rem .6rem .5rem;font-size:.74rem;line-height:1.3;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.vt.is-playing .vt__play,.vt.is-playing .vt__cap{display:none}

/* A page with no photograph and no stone colour gets a clean, full-width
   header rather than an empty dark panel. */
.hero--page.hero--plain{grid-template-columns:1fr;background:
  radial-gradient(60% 120% at 100% 0%,rgba(18,59,48,.10),transparent 60%),
  radial-gradient(50% 90% at 0% 100%,rgba(169,81,42,.08),transparent 60%),var(--paper-2)}
.hero--page.hero--plain .hero__bg{display:none}
.hero--page.hero--plain .hero__in{max-width:900px}

/* v5: no scroll-triggered fade. Cards that only appear once the observer fires
   look blank to anyone scrolling fast, to screenshot crawlers, and on a slow
   phone. The content is simply there. */
.reveal,.js .reveal{opacity:1!important;transform:none!important;transition:none!important}

/* download box (lead magnet) */
.dl{display:flex;gap:1rem;align-items:center;background:var(--paper-w);border:1.5px dashed var(--brass);border-radius:var(--r);padding:1rem 1.2rem;max-width:760px}
.dl:hover{background:var(--paper)}
.dl__i{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--brass);color:#fff;display:grid;place-items:center;font-size:1.1rem}
.dl b{display:block;color:var(--night)}
.dl span span{display:block;font-size:.9rem;color:var(--ink-2)}

/* ------------------------- brand kit (/brand/) -------------------- */
.bk-idea{display:flex;gap:2.4rem;align-items:center;flex-wrap:wrap}
.bk-idea img{width:150px;height:150px;flex:none}
.bk-idea>div{flex:1;min-width:260px;max-width:720px}
.bk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.1rem;margin-top:1.4rem}
.bk-grid--wide{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.bk-card{background:var(--paper-w);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.bk-card__img{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;padding:1.4rem;background:#fff;border-bottom:1px solid var(--line-soft)}
.bk-card__img--dark{background:var(--night)}
.bk-card__img--photo{padding:.6rem;background:var(--paper-2);aspect-ratio:16/9}
.bk-card__img img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.bk-card__img--photo img{width:100%;height:100%;object-fit:contain}
.bk-card__b{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.35rem}
.bk-card__b b{color:var(--night);font-size:.95rem}
.bk-card__b small{color:var(--ink-3);font-size:.82rem;line-height:1.45}
.bk-card__b span{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.2rem}
.bk-dl{display:inline-flex;align-items:center;font-size:.8rem;font-weight:600;color:var(--brass);border:1.5px solid var(--brass-soft);border-radius:999px;padding:.25em .85em}
.bk-dl:hover{background:var(--brass);color:#fff;text-decoration:none}
.bk-rules{margin-top:1.2rem;max-width:760px}
.bk-sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;margin-top:1.2rem}
.bk-sw__i{display:flex;flex-direction:column;gap:.2rem}
.bk-sw__i span{height:72px;border-radius:var(--r-sm);border:1px solid var(--line);margin-bottom:.4rem}
.bk-sw__i b{color:var(--night);font-size:.92rem}
.bk-sw__i code{font-size:.85rem;color:var(--ink-2);direction:ltr;unicode-bidi:isolate;align-self:flex-start}
.bk-sw__i small{font-size:.8rem;color:var(--ink-3)}
.bk-type{margin-top:1rem}
.bk-type__ar{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:600;color:var(--night);line-height:1.3}
.bk-type__en{font-size:clamp(1.2rem,2.6vw,1.6rem);font-weight:500;color:var(--night);letter-spacing:.04em;margin:.4rem 0 .8rem}