/*
Theme Name: Perla North Coast
Theme URI: https://perlanorthcoast.com
Author: Nations of Sky
Description: A bilingual, conversion focused landing theme for Perla North Coast by Nations of Sky at KM 174 on El Dabaa Road. English is the primary site; Arabic runs at /ar/ with full RTL. Every section is a separate editable block. Prices are never published: the lead form is the price list. No external requests: fonts and scripts are served locally. Integrates with Rank Math when it is active and stands in for it when it is not.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Tags: one-column, custom-logo, rtl-language-support, translation-ready, block-styles
Text Domain: perla-north-coast
*/

/* ============================================================
   1. FONTS
   @font-face lives in functions.php: it is only emitted when the file
   actually exists in /assets/fonts/, so a missing font never costs a
   404 and never delays first paint. Until you add files, the stacks
   below are used — chosen so the site still has a voice out of the box.
   ============================================================ */

/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */
:root{
  /* Brand palette, sampled from the official Perla collateral: the cream
     ground of the fact sheet, the teal of its panels and the sea itself. */
  --paper:#FFF8F3;          /* warm off white — the brand's ground */
  --paper-2:#F6EBE1;        /* sand */
  --paper-3:#EDDCCE;        /* deeper sand */
  --ink:#0E2A2E;            /* near-black, cooled toward the sea */
  --ink-2:#33565A;
  --muted:#4F6B6E;          /* 5.5:1 on --paper, so small caps stay legible */
  --accent:#006B78;         /* Perla teal, 6:1 on --paper */
  --accent-ink:#00565F;     /* deeper teal for text on cream */
  --sea:#00AAB1;            /* Mediterranean */
  --sage:#A9C7C4;
  --gold:#B08D57;           /* Nations of Sky mark */
  --line:rgba(14,42,46,.14);
  --line-2:rgba(14,42,46,.08);
  --white:#fff;

  /* Display: a warm, high-contrast serif — falls through the most
     characterful faces actually installed on macOS, iOS and Windows
     before reaching Georgia. */
  --serif:"PN Display","Hoefler Text","Iowan Old Style","Sitka Display",Constantia,Charter,"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  /* Text: humanist geometric sans, again preferring the good system faces. */
  --sans:"PN Sans","Avenir Next",Avenir,"Segoe UI Variable Text","Segoe UI",Inter,ui-sans-serif,-apple-system,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Numeric face. Manrope is used for every figure on the site;
     see assets/fonts/README.txt. Until the file is dropped in, the
     fallbacks below keep figures tabular. */
  --num:"Manrope","Work Sans","Avenir Next",Avenir,"Segoe UI Variable Text","Segoe UI",Inter,ui-sans-serif,-apple-system,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* Fluid type scale */
  --t-hero:clamp(2.6rem,7.2vw,6.4rem);
  --t-h2:clamp(2rem,4.4vw,3.6rem);
  --t-h3:clamp(1.3rem,2.2vw,1.85rem);
  --t-body:clamp(1rem,1.05vw,1.12rem);
  --t-small:.875rem;
  --t-label:.72rem;

  /* Spacing scale (8px base) */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem;
  --s6:4rem; --s7:6rem; --s8:8rem;
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --section:clamp(4rem,9vw,8rem);
  --maxw:1500px;

  --radius:14px;
  --radius-lg:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   3. RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ink);}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Subtle paper grain — pure CSS, no image request */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(14,42,46,.035) 1px,transparent 0);
  background-size:3px 3px;
}
body>*{position:relative;z-index:1;}
img,video{display:block;max-width:100%;height:auto;}
/* Belt and braces: inline icons must never render at the SVG default of
   300x150 while the stylesheet is still loading. */
svg{max-width:100%;max-height:100%;flex-shrink:0;}
/* Any icon sitting inside a button or link is sized by its box, never by the
   SVG default of 300x150. */
a > svg,button > svg{width:1.25em;height:1.25em;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:-.021em;font-kerning:normal;font-variant-ligatures:common-ligatures;}
b,strong{font-weight:600;}
.tabular{font-variant-numeric:tabular-nums;}
p{margin:0;}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:2px;}
::selection{background:var(--accent);color:var(--paper);}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:var(--section);}
/* the sticky header would otherwise sit on top of a section we jump to */
section[id],[id]{scroll-margin-top:96px;}

/* Shared bits */
.label{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-ink);display:block;margin-bottom:var(--s2);
}
.lede{font-size:clamp(1.02rem,1.4vw,1.25rem);line-height:1.7;color:var(--ink-2);max-width:62ch;}
.rule{height:1px;background:var(--line);border:0;margin:0;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.05rem 2rem;border:1px solid var(--ink);border-radius:100px;
  background:var(--ink);color:var(--paper);cursor:pointer;
  font-size:.9rem;font-weight:500;letter-spacing:.02em;text-align:center;
  min-height:52px;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn--light{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.btn--light:hover{background:var(--accent);border-color:var(--accent);color:var(--paper);}
.btn--wide{width:100%;}

/* ============================================================
   4. HEADER
   ============================================================ */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,248,243,.86);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s;}
.hdr.is-stuck{border-bottom-color:var(--line);}
.hdr__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-block:1.05rem;flex-wrap:nowrap;min-width:0;}
.logo{display:inline-flex;align-items:center;flex-shrink:0;line-height:0;}
.logo img{height:clamp(30px,3.4vw,42px);width:auto;}
.ftr .logo img{height:44px;}
.nav{display:flex;gap:clamp(.75rem,1.6vw,1.7rem);align-items:center;white-space:nowrap;min-width:0;}
.nav a{font-size:.85rem;color:var(--ink-2);position:relative;padding-block:.3rem;}
.nav a::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:0;height:1px;background:var(--accent);transition:width .3s var(--ease);}
.nav a:hover{color:var(--ink);}
.nav a:hover::after{width:100%;}
.hdr__end{display:flex;align-items:center;gap:var(--s2);flex-shrink:0;}
.lang{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.55rem .8rem;border:1px solid var(--line);border-radius:100px;transition:.25s;}
.lang:hover{border-color:var(--ink);color:var(--ink);}
.hdr .btn{padding:.8rem 1.5rem;min-height:44px;font-size:.82rem;}
.burger{display:none;width:46px;height:46px;align-items:center;justify-content:center;background:none;border:1px solid var(--line);border-radius:100px;cursor:pointer;}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink);position:relative;transition:.3s;}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--ink);transition:.3s;}
.burger span::before{top:-5.5px;} .burger span::after{top:5.5px;}
.burger[aria-expanded="true"] span{background:transparent;}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);}
/* The slide-down panel is a mobile-only device: it must stay out of the
   desktop layout entirely, or it renders as a second nav under the bar. */
.hdr__nav{display:none;visibility:hidden;pointer-events:none;}

/* ============================================================
   5. HERO
   ============================================================ */
.hero{position:relative;min-height:94svh;display:flex;align-items:flex-end;overflow:hidden;}
.hero__bg{position:absolute;inset:0;}
.hero__bg img{width:100%;height:100%;object-fit:cover;}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,14,18,.34) 0%,rgba(8,14,18,.10) 26%,rgba(8,14,18,.58) 66%,rgba(8,14,18,.88) 100%),
    linear-gradient(90deg,rgba(8,14,18,.42) 0%,rgba(8,14,18,0) 58%);
}
.hero__inner{position:relative;width:100%;padding-block:clamp(2.5rem,7vw,5rem);color:#fff;}
.hero .label{color:rgba(255,255,255,.9);}
.hero h1{text-shadow:0 2px 26px rgba(8,14,18,.42);font-size:var(--t-hero);max-width:17ch;margin-bottom:var(--s3);text-wrap:balance;}
.hero__h1-a{display:block;}
.hero__h1-b{
  display:block;font-family:var(--sans);font-weight:400;
  font-size:clamp(1.02rem,1.75vw,1.5rem);line-height:1.4;letter-spacing:.005em;
  margin-top:clamp(.7rem,1.4vw,1.1rem);color:rgba(255,255,255,.93);
}
.hero__text{font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.7;max-width:56ch;color:rgba(255,255,255,.93);}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);}
.hero__cta .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.hero__cta .btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.hero__cta .btn--ghost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.5);}
.hero__cta .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff;}

/* ============================================================
   6. FACT SHEET
   ============================================================ */
.facts{background:var(--paper-2);}
.facts__head{margin-bottom:var(--s5);max-width:80ch;}
.facts__grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-inline-start:1px solid var(--line);}
.fact{padding:clamp(1.4rem,2.4vw,2.2rem);border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line);}
.fact b{display:block;font-family:var(--serif);font-size:clamp(2.1rem,3.6vw,3.1rem);font-weight:500;line-height:1;letter-spacing:-.02em;}
.fact b i{font-style:normal;font-size:.5em;margin-inline-start:.08em;}
.fact strong{display:block;font-size:.9rem;font-weight:600;margin-top:.85rem;}
.fact span{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.25rem;}

/* ============================================================
   7. SPLIT (about / location / masterplan)
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;}
.split--wide{grid-template-columns:.85fr 1.15fr;}
.split h2{font-size:var(--t-h2);margin-bottom:var(--s3);text-wrap:balance;}
.split p+p{margin-top:var(--s2);}
.split__media img{width:100%;border-radius:var(--radius-lg);}
.split__media--plain img{border-radius:var(--radius);background:var(--white);}

.figs{margin-top:var(--s4);}
.fig-row{display:flex;justify-content:space-between;gap:var(--s2);padding-block:.95rem;border-top:1px solid var(--line);font-size:.9rem;}
.fig-row:last-child{border-bottom:1px solid var(--line);}
.fig-row span{color:var(--muted);}
.fig-row b{font-weight:600;}

/* Neighbours */
h3.sub-h{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:var(--s4) 0 0;}
.nbrs{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--s2);}
.nbr{padding:.6rem 1.1rem;border:1px solid var(--line);border-radius:100px;font-size:.84rem;background:var(--white);}
.nbr b{font-weight:600;}
.nbr span{color:var(--muted);font-size:.78rem;}
.nbr--self{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.nbr--self span{color:rgba(255,248,243,.7);}

/* Full-bleed image band */
.band{position:relative;height:clamp(300px,52vw,620px);overflow:hidden;}
.band img{width:100%;height:100%;object-fit:cover;}

/* ============================================================
   8. AMENITIES
   ============================================================ */
.am__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:var(--s5);}
.am{background:var(--paper);padding:clamp(1.5rem,2.4vw,2.2rem);transition:background .3s var(--ease);}
.am:hover{background:var(--paper-2);}
.am i{font-family:var(--mono);font-style:normal;font-size:.7rem;letter-spacing:.12em;color:var(--accent-ink);}
.am h3{font-size:var(--t-h3);margin:.9rem 0 .5rem;}
.am p{font-size:.9rem;color:var(--muted);line-height:1.6;}

/* ============================================================
   9. RESIDENCES
   ============================================================ */
.res__head{max-width:78ch;margin-bottom:var(--s5);}
.zone{max-width:70ch;margin:var(--s5) 0 var(--s4);}
.zone:first-of-type{margin-top:0;}
.zone__title{font-size:var(--t-h3);font-family:var(--serif);font-weight:500;
  padding-bottom:.7rem;border-bottom:1px solid var(--line);}
.zone__text{color:var(--ink-2);margin-top:1rem;}
.res__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.4vw,2rem);}
.unit{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-2);display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease);}
.unit:hover{transform:translateY(-5px);box-shadow:0 22px 50px -28px rgba(14,42,46,.5);}
.unit__img{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2);}
.unit__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.unit:hover .unit__img img{transform:scale(1.05);}
.unit__body{padding:clamp(1.3rem,2vw,1.8rem);display:flex;flex-direction:column;flex:1;}
.unit h4{font-size:var(--t-h3);font-family:var(--serif);font-weight:500;line-height:1.2;margin-bottom:var(--s2);}
.unit__meta{display:grid;grid-template-columns:1fr 1fr;gap:.7rem var(--s2);margin-bottom:var(--s3);}
.unit__meta div{border-top:1px solid var(--line);padding-top:.6rem;}
.unit__meta span{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.unit__meta b{font-size:.95rem;font-weight:600;}
.unit__price{margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);}
.unit__price span{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.unit__price b{font-family:var(--serif);font-size:1.6rem;font-weight:500;}
.unit__actions{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
.unit__ask{padding:.75rem 1rem;font-size:.82rem;min-height:44px;}
.unit__plan{background:none;border:1px solid var(--line);border-radius:100px;padding:.75rem 1.2rem;font-size:.82rem;cursor:pointer;transition:.25s;width:100%;min-height:44px;}
.unit__plan:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* Floor-plan dialog */
.plan-dlg{border:0;padding:0;border-radius:var(--radius-lg);max-width:min(1100px,92vw);width:100%;background:var(--white);color:var(--ink);}
.plan-dlg::backdrop{background:rgba(14,42,46,.72);backdrop-filter:blur(3px);}
.plan-dlg__head{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:1.1rem 1.4rem;border-bottom:1px solid var(--line);}
.plan-dlg__head h3{font-size:1.25rem;}
.plan-dlg img{width:100%;}
.plan-dlg__x{background:none;border:1px solid var(--line);border-radius:100px;padding:.55rem 1.1rem;cursor:pointer;font-size:.82rem;min-height:44px;}
.plan-dlg__x:hover{background:var(--ink);color:var(--paper);}

/* ============================================================
   10. PRICES
   ============================================================ */
.prices{background:var(--ink);color:var(--paper);}
.prices .label{color:#F0A57A;}
.prices .lede{color:rgba(255,248,243,.78);}
.tbl-scroll{overflow-x:auto;margin-top:var(--s5);-webkit-overflow-scrolling:touch;}
.tbl{width:100%;border-collapse:collapse;min-width:660px;font-size:.92rem;}
.tbl th,.tbl td{padding:1.05rem 1rem;text-align:start;border-bottom:1px solid rgba(255,248,243,.16);}
.tbl thead th{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,248,243,.62);font-weight:400;}
.tbl tbody th{font-weight:500;font-family:var(--serif);font-size:1.12rem;}
.tbl td{font-variant-numeric:tabular-nums;}
.tbl .is-best{color:#fff;font-weight:600;}
.tbl tbody tr:hover{background:rgba(255,248,243,.05);}
.note{font-size:.8rem;color:rgba(255,248,243,.72);margin-top:var(--s3);max-width:70ch;}

/* Ownership tiles (no figures beyond the plan terms — prices are never shown) */
.own__head{max-width:70ch;}
.own__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,248,243,.18);
  border:1px solid rgba(255,248,243,.18);border-radius:var(--radius-lg);overflow:hidden;margin-top:var(--s6);}
.own{background:var(--ink);padding:clamp(1.6rem,3vw,2.6rem);text-align:center;}
.own b{display:block;font-family:var(--serif);font-size:clamp(2.1rem,4vw,3.2rem);font-weight:500;line-height:1;color:#fff;}
.own b i{font-style:normal;font-size:.5em;margin-inline-start:.22em;}
.own span{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,248,243,.78);margin-top:.9rem;}
.own__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s5);}
.own__cta .note{margin:0;flex:1;min-width:260px;}

.field{display:flex;flex-direction:column;gap:.5rem;}
.field>span{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,248,243,.78);}

/* ============================================================
   11. FILM
   ============================================================ */
.film__frame{margin-top:var(--s5);border-radius:var(--radius-lg);overflow:hidden;background:var(--ink);position:relative;aspect-ratio:16/9;}
.film__frame video{width:100%;height:100%;object-fit:cover;}
.film__poster{
  position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;
  background:none;display:grid;place-items:center;
}
.film__poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.film__poster::after{
  content:"";position:absolute;inset:0;background:rgba(10,20,24,.28);transition:background .3s;
}
.film__poster:hover::after{background:rgba(10,20,24,.12);}
.film__poster.is-gone{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease),visibility .3s;}
/* The button is the only grid child, so it is centred by the grid itself.
   No transform maths, and nothing to mirror in RTL: a play control points
   the same way in every language. */
.film__play{
  position:relative;z-index:2;
  width:clamp(56px,5.4vw,72px);aspect-ratio:1;border-radius:100px;
  background:rgba(255,248,243,.94);display:grid;place-items:center;
  box-shadow:0 14px 40px -18px rgba(0,0,0,.55);
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.film__poster:hover .film__play,
.film__poster:focus-visible .film__play{background:var(--accent);transform:scale(1.06);}
.film__play svg{width:40%;height:auto;fill:var(--ink);}
.film__poster:hover .film__play svg,
.film__poster:focus-visible .film__play svg{fill:#fff;}
@media (prefers-reduced-motion:reduce){
  .film__play,.film__poster::after{transition:none;}
  .film__poster:hover .film__play{transform:none;}
}

/* ============================================================
   12. GALLERY
   ============================================================ */
.gal__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--s3);}
.gal__head>div:first-child{max-width:70ch;}
.gal__nav{display:flex;gap:.6rem;}
.gal__btn{
  width:52px;height:52px;border-radius:100px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);cursor:pointer;display:grid;place-items:center;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.gal__btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
[dir="rtl"] .gal__btn svg{transform:scaleX(-1);}

.gal-slider{
  display:flex;gap:clamp(.7rem,1.4vw,1.1rem);margin-top:var(--s5);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-inline:var(--gutter);padding-bottom:.6rem;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  -webkit-overflow-scrolling:touch;
}
.gal-slider::-webkit-scrollbar{height:6px;}
.gal-slider::-webkit-scrollbar-thumb{background:var(--line);border-radius:100px;}
.gal-slide{
  margin:0;flex:0 0 clamp(280px,42vw,620px);scroll-snap-align:center;
  border-radius:var(--radius-lg);overflow:hidden;background:var(--paper-3);
}
.gal-slide img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;}
@media (prefers-reduced-motion:reduce){.gal-slider{scroll-behavior:auto;}}

/* ============================================================
   13. FORM
   ============================================================ */
.form-sec{background:var(--paper-2);}
.form-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);}
.form-grid .field>span{color:var(--muted);}
.form-grid .full{grid-column:1/-1;}
.form-grid input,.form-grid select,.form-grid textarea{
  background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:.95rem 1rem;min-height:52px;width:100%;transition:border-color .25s;
}
.form-grid textarea{min-height:110px;resize:vertical;}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--accent);}
.phone-combo{display:flex;gap:.5rem;align-items:stretch;}
.phone-combo__cc{
  flex:0 0 clamp(110px,32%,160px);min-width:0;
  background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:.95rem .6rem;min-height:52px;font-size:.86rem;cursor:pointer;
}
.phone-combo input{flex:1 1 auto;min-width:0;}

.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;color:var(--ink-2);grid-column:1/-1;}
.consent input{width:20px;height:20px;min-height:0;flex-shrink:0;margin-top:.15rem;accent-color:var(--accent);}
.pn-form--plugin input[type="text"],.pn-form--plugin input[type="tel"],
.pn-form--plugin input[type="email"],.pn-form--plugin select,.pn-form--plugin textarea{
  background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:.95rem 1rem;min-height:52px;width:100%;font:inherit;color:inherit;
}
.pn-form--plugin textarea{min-height:110px;resize:vertical;}
.pn-form--plugin p{margin-bottom:var(--s3);}
.pn-form--plugin input[type="submit"],.pn-form--plugin button[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;width:100%;
  padding:1.05rem 2rem;border:1px solid var(--ink);border-radius:100px;
  background:var(--ink);color:var(--paper);cursor:pointer;font:inherit;
  font-size:.9rem;font-weight:500;min-height:52px;transition:background .25s var(--ease);
}
.pn-form--plugin input[type="submit"]:hover,.pn-form--plugin button[type="submit"]:hover{background:var(--accent);border-color:var(--accent);}

.form-msg{margin-top:var(--s2);font-size:.9rem;padding:.9rem 1.1rem;border-radius:10px;display:none;}
.form-msg.is-ok{display:block;background:rgba(27,141,160,.12);color:#10606e;border:1px solid rgba(27,141,160,.3);}
.form-msg.is-err{display:block;background:rgba(226,96,31,.1);color:var(--accent-ink);border:1px solid rgba(226,96,31,.3);}

.contact-icons{display:flex;gap:.7rem;margin-top:var(--s4);}
.contact-icons__b{
  width:56px;height:56px;border-radius:100px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--white);color:var(--ink);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.contact-icons__b svg{width:20px;height:20px;display:block;}
.contact-icons__b:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-2px);}
.contact-icons__b--wa:hover{background:#25D366;border-color:#25D366;color:#fff;}
.contact-addr{margin-top:var(--s3);font-size:.92rem;color:var(--muted);}

/* ============================================================
   14. FAQ
   ============================================================ */
.faq{max-width:920px;margin-top:var(--s5);border-top:1px solid var(--line);}
.faq__item{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);padding-block:1.4rem;
  font-family:var(--serif);font-size:clamp(1.02rem,1.5vw,1.2rem);font-weight:500;line-height:1.35;
  transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::marker{content:"";}
.faq summary:hover{color:var(--accent-ink);}
.faq__chev{
  flex:0 0 30px;width:30px;height:30px;border-radius:100px;border:1px solid var(--line);
  position:relative;transition:transform .3s var(--ease),background .25s,border-color .25s;
}
.faq__chev::before,.faq__chev::after{
  content:"";position:absolute;inset:0;margin:auto;background:currentColor;
  transition:opacity .25s var(--ease);
}
.faq__chev::before{width:11px;height:1.5px;}
.faq__chev::after{width:1.5px;height:11px;}
.faq__item[open] .faq__chev{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(90deg);}
.faq__item[open] .faq__chev::after{opacity:0;}
.faq__item[open] summary{color:var(--accent-ink);}
.faq__a{padding-bottom:1.5rem;}
.faq__a p{color:var(--ink-2);max-width:78ch;font-size:.98rem;line-height:1.75;}

/* ============================================================
   15. FOOTER + MOBILE BAR
   ============================================================ */
.ftr{background:var(--ink);color:var(--paper);padding-block:var(--s7) var(--s4);}
.ftr__top{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:var(--s5);padding-bottom:var(--s5);border-bottom:1px solid rgba(255,248,243,.16);}
.ftr .ftr__about{font-size:.88rem;line-height:1.7;color:rgba(255,248,243,.72);max-width:38ch;margin-top:var(--s3);}
.ftr h3{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,248,243,.72);margin:0 0 1.1rem;font-weight:400;}
.ftr__links{display:flex;flex-direction:column;gap:.7rem;font-size:.88rem;}
.ftr__links a{color:rgba(255,248,243,.82);}
.ftr__links a:hover{color:var(--accent);}
.socials{display:flex;gap:.6rem;margin-top:var(--s3);}
.socials a{width:44px;height:44px;border:1px solid rgba(255,248,243,.26);border-radius:100px;display:grid;place-items:center;transition:.25s;}
.socials a:hover{border-color:var(--accent);color:var(--accent);}
.socials svg{width:16px;height:16px;}
.ftr__contact{display:flex;gap:.6rem;margin-bottom:1.1rem;flex-wrap:wrap;}
.ftr__icon{
  width:44px;height:44px;border-radius:100px;display:grid;place-items:center;
  border:1px solid rgba(255,248,243,.26);color:var(--paper);transition:.25s;
  min-width:44px;min-height:44px;
}
.ftr__icon svg{width:18px;height:18px;}
.ftr__icon:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.ftr__icon--wa:hover{background:#25D366;border-color:#25D366;color:#fff;}
.ftr__addr{font-size:.88rem;line-height:1.7;color:rgba(255,248,243,.72);}
.ftr__btm{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2);padding-top:var(--s3);font-size:.76rem;color:rgba(255,248,243,.72);}

.mbar{
  position:fixed;inset-inline:0;bottom:0;z-index:70;display:none;
  grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(14,42,46,.14);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -8px 30px -18px rgba(14,42,46,.6);
}
.mbar a{background:var(--paper);display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.95rem .4rem;font-size:.8rem;font-weight:500;min-height:56px;}
.mbar a:last-child{background:var(--ink);color:var(--paper);}
.mbar svg{width:16px;height:16px;flex-shrink:0;}


.cta-rail{
  position:fixed;inset-inline-end:1rem;top:50%;transform:translateY(-50%);
  z-index:59;display:flex;flex-direction:column;gap:.5rem;width:74px;
  transition:opacity .35s var(--ease),visibility .35s;
}
/* Fixed-size tiles on purpose: nothing here resizes on hover, so the dock
   can never grow across the page. Only the colour changes. */
.cta-rail a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  width:74px;height:70px;padding:.5rem .35rem;border-radius:16px;
  background:rgba(255,248,243,.95);backdrop-filter:blur(10px);
  border:1px solid var(--line);color:var(--ink);
  font-size:.62rem;font-weight:600;letter-spacing:.02em;line-height:1.15;text-align:center;
  box-shadow:0 10px 30px -18px rgba(14,42,46,.55);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.cta-rail a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.cta-rail svg{width:19px;height:19px;flex:0 0 19px;}
.cta-rail__wa:hover{background:#25D366;border-color:#25D366;color:#fff;}
.cta-rail__go{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.cta-rail__go:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.cta-rail.is-away{opacity:0;visibility:hidden;pointer-events:none;}
.mbar{transition:transform .35s var(--ease);}
.mbar.is-away{transform:translateY(100%);}

/* ============================================================
   16. MOTION — transform/opacity only, once, reduced-motion safe
   ============================================================ */
/* Content is visible by default. The starting state of the animation is
   applied only when JavaScript has confirmed it is running, so a script that
   fails to load can never leave the page blank. */
.reveal{transition:opacity .75s var(--ease),transform .75s var(--ease);}
.js .reveal{opacity:0;transform:translateY(22px);}
.js .reveal.is-in{opacity:1;transform:none;}
.reveal-d1{transition-delay:.08s;} .reveal-d2{transition-delay:.16s;} .reveal-d3{transition-delay:.24s;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .unit,.gal img,.unit__img img{transition:none!important;}
}

/* ============================================================
   17. RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .facts__grid{grid-template-columns:repeat(2,1fr);}
  .am__grid{grid-template-columns:repeat(2,1fr);}
  .res__grid{grid-template-columns:repeat(2,1fr);}
  .ftr__top{grid-template-columns:1fr 1fr;gap:var(--s4);}
}
/* The bar runs out of room well before 900px — switch to the menu early. */
@media (max-width:1280px){
  .nav,.hdr__end .btn{display:none;}
  .burger{display:flex;}
  .hdr__nav{
    position:fixed;inset:0;top:0;background:var(--paper);z-index:80;
    display:flex;flex-direction:column;justify-content:center;gap:var(--s2);
    padding:var(--gutter);transform:translateY(-100%);transition:transform .45s var(--ease);
  }
  .hdr__nav.is-open{transform:none;visibility:visible;pointer-events:auto;}
  .hdr__nav .nav{display:flex;flex-direction:column;gap:clamp(.55rem,1.6vh,1.1rem);align-items:flex-start;}
  .hdr__nav .nav a{font-family:var(--serif);font-size:clamp(1.2rem,4.6vw,1.7rem);line-height:1.2;padding-block:.2rem;}
  .hdr__nav .nav a::after{display:none;}
  .hdr__nav .btn{display:inline-flex;margin-top:var(--s3);}
  .hdr__nav-close{position:absolute;top:1.1rem;inset-inline-end:var(--gutter);}
  /* The language switch belongs in the menu too: the pill in the bar is easy
     to miss on a phone, and the menu is where people go looking for it. */
  .hdr__nav-lang{
    display:inline-flex;align-items:center;gap:.6rem;margin-top:var(--s3);
    padding:.85rem 1.5rem;border:1.5px solid var(--line);border-radius:100px;
    font-size:1.05rem;font-weight:600;min-height:52px;
  }
  .hdr__nav-lang::before{content:"\2295";font-size:1.1em;opacity:.55;}
  /* keep the pill in the bar a real tap target as well */
  .lang{min-height:44px;display:inline-flex;align-items:center;padding:.6rem 1rem;}
}
@media (max-width:900px){

  .split,.split--wide,.form-wrap{grid-template-columns:1fr;}
  .split__media{order:-1;}
    .mbar{display:grid;}
  .cta-rail{display:none;}
  .ftr{padding-bottom:calc(var(--s4) + 56px + env(safe-area-inset-bottom));}
}
@media (max-width:640px){
  .gal-slide{flex:0 0 84%;}
  .gal__head{flex-direction:column;align-items:flex-start;}
  .facts__grid,.am__grid,.res__grid,.ftr__top{grid-template-columns:1fr;}
  .own__grid{grid-template-columns:repeat(2,1fr);}
  .unit__actions{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .phone-combo{flex-direction:column;}
  .phone-combo__cc{flex:1 1 auto;}
  .hero{min-height:88svh;}
  .hero h1{font-size:clamp(2.3rem,10vw,3.4rem);}
  .unit__meta{grid-template-columns:1fr 1fr;}
  .ftr__btm{flex-direction:column;}
}

/* ============================================================
   18. RTL / ARABIC
   ============================================================ */
[dir="rtl"]{--serif:"CN Arabic","Segoe UI",Tahoma,Arial,sans-serif;--sans:"CN Arabic","Segoe UI",Tahoma,Arial,sans-serif;}
[dir="rtl"] body{line-height:1.85;}
[dir="rtl"] .hero__bg::after{background:
  linear-gradient(180deg,rgba(8,14,18,.34) 0%,rgba(8,14,18,.10) 26%,rgba(8,14,18,.58) 66%,rgba(8,14,18,.88) 100%),
  linear-gradient(270deg,rgba(8,14,18,.42) 0%,rgba(8,14,18,0) 58%);}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{letter-spacing:0;line-height:1.25;}
[dir="rtl"] .fact b,[dir="rtl"] .unit__price b{direction:ltr;unicode-bidi:embed;}
[dir="rtl"] .label,[dir="rtl"] .fact span,[dir="rtl"] .unit__meta span,[dir="rtl"] .ftr h3{letter-spacing:.06em;}
[dir="rtl"] .tbl td{direction:ltr;text-align:start;}

/* Print — a clean one-pager if someone prints the price list */
@media print{
  .hdr,.mbar,.cta-rail,.film__frame,.hero__cta,.form-sec{display:none!important;}
  body{background:#fff;}
  .prices{background:#fff;color:#000;}
  .tbl th,.tbl td{border-color:#ccc;}
}

/* ============================================================
   NUMERIC TYPOGRAPHY
   Manrope, tabular, for every figure on the site: statistics,
   percentages, years, prices, counters and dimensions. Headings
   keep their own face and are deliberately excluded.
   ============================================================ */
.num,.fact b,.own b,.fig-row b,.unit__meta b,.tbl td,.nbr span,.phone-combo__cc,.am i,.ftr__btm span,.plan-dlg__head h3 span{
  font-family:var(--num);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  letter-spacing:0;
}
/* Arabic pages keep Arabic figures in the Arabic face; Manrope has no
   Arabic-Indic digits, so forcing it there would fall back mid-string. */
[dir="rtl"] .fact b,[dir="rtl"] .unit__meta b,[dir="rtl"] .fig-row b{
  font-feature-settings:"tnum" 1;
}
[dir="rtl"] .fact b i,[dir="rtl"] .own b i{font-family:var(--sans);}

/* ============================================================
   PRODUCTION HARDENING
   Everything below is behaviour and accessibility, not restyling:
   the visual language of the page is unchanged.
   ============================================================ */

/* --- menu panel: scroll lock without the layout jump -------------- */
/* Locking <html> instead of setting body.overflow inline keeps the
   scrollbar gutter reserved, so opening the menu does not shift the page. */
html.is-locked{overflow:hidden;scrollbar-gutter:stable;}
.hdr__nav{overscroll-behavior:contain;}
.hdr__nav .nav{overflow-y:auto;max-height:68vh;max-height:68svh;-webkit-overflow-scrolling:touch;}
.hdr__nav-lang{align-self:flex-start;}

/* --- gallery -------------------------------------------------------- */
/* Snapping to the start with a matching scroll padding lines the first
   slide up with the text above it instead of floating it mid-rail, and
   keeps every step landing on a whole image. */
.gal-slider{scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);}
.gal-slide{scroll-snap-align:start;scroll-snap-stop:always;}
.gal-slide img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.gal__btn:disabled{opacity:.32;cursor:default;pointer-events:none;}
.gal__btn:disabled:hover{background:transparent;color:inherit;border-color:var(--line);}

/* --- form validation ------------------------------------------------ */
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea,
.form-grid [aria-invalid="true"]{border-color:var(--accent);box-shadow:0 0 0 2px rgba(226,96,31,.16);}
.form-msg.is-info{display:block;background:rgba(14,42,46,.05);color:var(--ink-2);border:1px solid var(--line);}
.form-grid select{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-inline-end:2.6rem;
}
[dir="rtl"] .form-grid select{
  background-position:20px calc(50% + 2px),14px calc(50% + 2px);
  padding-inline-end:1rem;padding-inline-start:2.6rem;
}

/* --- footer: same content, less height ------------------------------ */
/* The final block was the tallest thing on the page after the hero. The
   rhythm and the four column structure are untouched; only the vertical
   air is tightened. */
.ftr{padding-block:var(--s5) var(--s3);}
.ftr__top{gap:var(--s4) var(--s5);padding-bottom:var(--s4);}
.ftr .ftr__about{margin-top:var(--s2);}
.ftr h3{margin-bottom:.75rem;}
.ftr__links{gap:.5rem;}
.ftr .logo img{height:38px;}
.socials{margin-top:var(--s2);}
.socials a{width:44px;height:44px;}
.ftr__contact{margin-bottom:.75rem;}
.ftr__icon{width:44px;height:44px;}
.ftr__btm{padding-top:var(--s2);}
@media (max-width:900px){
  .ftr{padding-block:var(--s4) var(--s3);}
  .ftr__top{gap:var(--s3) var(--s4);padding-bottom:var(--s3);}
}

/* --- navigation ----------------------------------------------------- */
/* Header and footer now list every section on the page, so the bar needs
   its spacing tightened a touch to keep the full set on one line. */
.nav{gap:clamp(.55rem,1.15vw,1.35rem);}
.nav a{white-space:nowrap;}

/* --- accessibility -------------------------------------------------- */
/* Focus has to be visible on the dark sections too, not only on paper. */
.prices :focus-visible,.own :focus-visible,.ftr :focus-visible,
.mbar :focus-visible,.hero :focus-visible{outline-color:#F0A57A;}
/* A link that is only an icon still needs a real hit area. */
.socials a,.ftr__icon,.contact-icons__b,.gal__btn,.lang{touch-action:manipulation;}
.icon{flex-shrink:0;}
[hidden]{display:none!important;}

/* --- print ---------------------------------------------------------- */
@media print{
  .reveal{opacity:1!important;transform:none!important;}
  .gal-slider{overflow:visible;flex-wrap:wrap;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.7em;word-break:break-all;}
}

/* --- fallback views: 404, search, any stray post -------------------- */
/* Two page brochure sites still need these to look like the same site. */
.prose{max-width:70ch;margin-inline:auto;}
.prose h1{font-size:var(--t-h2);margin-bottom:var(--s3);text-wrap:balance;}
.prose__body>*+*{margin-top:var(--s2);}
.prose__cta{margin-top:var(--s4);}
.prose__nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s5);
  padding-top:var(--s3);border-top:1px solid var(--line);}
.prose__nav a{padding:.55rem 1.05rem;border:1px solid var(--line);border-radius:100px;
  font-size:.84rem;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);}
.prose__nav a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* ============================================================
   RTL CORRECTNESS
   The Arabic page is the same layout mirrored, not a second design.
   Everything below is direction handling only: no colour, no spacing
   and no type changes.
   ============================================================ */

/* --- the belt to the dir attribute's braces --------------------------
   Every rule in this stylesheet keys off [dir="rtl"] on <html>. The body
   also carries a language class, so if the attribute is ever missing (a
   caching layer rewriting <html>, a plugin filtering language_attributes)
   the page still lays out right to left instead of collapsing to LTR. */
body.pn-ar{direction:rtl;text-align:start;}

/* --- off screen elements must not create sideways overflow -----------
   left:-9999px is the classic reason an RTL page "shifts to the left" and
   grows a horizontal scrollbar: in a right to left document that offset is
   in the inline END direction, so unlike in LTR the browser treats it as
   real scrollable width. Clipping to a 1px box is direction agnostic and
   creates no overflow in either direction. */
.skip,.hp{
  position:absolute!important;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
  inset-inline-start:auto;inset-block-start:auto;left:auto;
}
.skip:focus{
  position:fixed!important;width:auto;height:auto;margin:0;overflow:visible;
  clip-path:none;white-space:normal;
  inset-inline-start:1rem;inset-block-start:1rem;left:auto;
  padding:.9rem 1.4rem;z-index:999;
}

/* --- nothing may scroll the page sideways in either direction -------- */
html{overflow-x:clip;}
@supports not (overflow:clip){html{overflow-x:hidden;}}

/* --- burger bars ----------------------------------------------------- */
.burger span::before,.burger span::after{inset-inline-start:0;left:auto;}

/* --- the wordmark stays left to right in both languages -------------- */
/* "C North" is a Latin brand name. Left in an RTL run it would render
   with its punctuation and any trailing word reordered. */
.logo,.logo__name,.logo__by{direction:ltr;unicode-bidi:isolate;}

/* --- text that is a number or a Latin string inside Arabic ----------- */
/* Isolate rather than embed: isolation stops a figure at the start or end
   of an Arabic sentence from dragging neighbouring punctuation with it. */
[dir="rtl"] .fact b,[dir="rtl"] .fig-row b,[dir="rtl"] .unit__meta b,
[dir="rtl"] .own b,[dir="rtl"] .own__card b,[dir="rtl"] .nbr span,
[dir="rtl"] .phone-combo input,[dir="rtl"] .form-grid input[type="email"]{
  direction:ltr;unicode-bidi:isolate;text-align:start;
}
[dir="rtl"] .tbl td{direction:ltr;unicode-bidi:isolate;text-align:start;}

/* --- icon direction --------------------------------------------------
   Arrows that mean "previous / next" mirror. Icons that mean a thing
   (phone, mail, play, plus) never do. */
[dir="rtl"] .icon--chev-prev,[dir="rtl"] .icon--chev-next{transform:scaleX(-1);}
[dir="rtl"] .icon--phone,[dir="rtl"] .icon--mail,[dir="rtl"] .icon--play,
[dir="rtl"] .icon--plus,[dir="rtl"] .icon--whatsapp{transform:none;}

/* --- scrollers ------------------------------------------------------- */
/* A flex row in an RTL container already starts at the right edge; the
   snap padding has to follow the same axis. */
[dir="rtl"] .gal-slider{scroll-padding-inline:var(--gutter);}
[dir="rtl"] .tbl-scroll{direction:rtl;}

/* --- the container stays centred ------------------------------------- */
/* margin-inline:auto is symmetrical, but a stray width or a padding set
   on one physical side would break it, so assert it for both. */
.wrap{margin-inline:auto;max-width:var(--maxw);}
[dir="rtl"] .wrap{margin-inline:auto;}

/* --- form controls --------------------------------------------------- */
[dir="rtl"] .consent{text-align:start;}
[dir="rtl"] .form-grid textarea,[dir="rtl"] .form-grid input[type="text"]{text-align:start;}
[dir="rtl"] .phone-combo{flex-direction:row;}

/* --- dialog ---------------------------------------------------------- */
[dir="rtl"] .plan-dlg{text-align:start;}

/* --- lists and headings ---------------------------------------------- */
[dir="rtl"] .faq summary,[dir="rtl"] .fig-row,[dir="rtl"] .gal__head,
[dir="rtl"] .ftr__btm,[dir="rtl"] .own__cta{text-align:start;}

/* --- header bar can never push its own end off screen ---------------- */
/* The wordmark is the fallback shown when no logo file is present. Laid
   out in a row it is wide enough to shove the language pill and the menu
   button past the edge, which in RTL reads as the whole bar sliding off
   to the left. Stacking it and letting it shrink keeps the bar inside the
   viewport at every width, in both directions. */
.logo{min-width:0;}
.logo:has(.logo__name){flex-direction:column;align-items:flex-start;line-height:1.1;}
.logo__name{font-family:var(--serif);font-size:clamp(1rem,3.4vw,1.35rem);font-weight:600;white-space:nowrap;}
.logo__by{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7;white-space:nowrap;}
.hdr__bar{min-width:0;}
.hdr__end{flex-shrink:0;}
@supports not selector(:has(*)){
  .logo{flex-wrap:wrap;}
}