/*
Theme Name: Pause
Theme URI: https://pausenorthcoast.com
Author: K Developments
Description: A bilingual, conversion focused landing theme for Pause North Coast by K Developments. English is the primary site; Arabic runs at /ar/ with full RTL. Every section is a separate editable block. No external requests: fonts, video and scripts are all served locally. Integrates with Rank Math when it is active and stands in for it when it is not.
Version: 1.2.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: pause
*/

/* ============================================================
   1. FONTS
   @font-face is emitted from functions.php, and only for files that
   actually exist in /assets/fonts/, so a missing font never costs a
   404 or delays first paint. The stacks below carry the site until
   the brand faces are dropped in.
   ============================================================ */

/* ============================================================
   2. DESIGN TOKENS
   The brochure palette: sky, deep sea, fresh green, warm sand.
   Deliberately a different world from a warm cream editorial look:
   this one is bright, airy and rounded rather than paper and ink.
   ============================================================ */
:root{
  --sky:#C4E3F5;          /* the signature Pause blue */
  --sky-soft:#E4F2FB;     /* washed sky, section grounds */
  --sky-deep:#7FBEE4;     /* mid blue for accents */
  --sea:#1D4658;          /* deep sea, the ink of this brand */
  --sea-2:#2F6579;
  --paper:#F7FAFC;        /* near white with a cool cast */
  --white:#fff;
  --green:#8FC65B;        /* fresh green from the brand */
  --green-deep:#4E7A2E;
  --sand:#E8D8BE;
  --gold:#B98B2E;
  --muted:#566E7B;
  --line:rgba(29,70,88,.14);
  --line-2:rgba(29,70,88,.07);

  --sans:"Pause Sans","Avenir Next",Avenir,"Segoe UI Variable Text","Segoe UI",Inter,ui-sans-serif,-apple-system,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Pause Display","Avenir Next",Avenir,"Segoe UI Variable Display","Segoe UI",Inter,ui-sans-serif,system-ui,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;

  --t-hero:clamp(2.5rem,7vw,6rem);
  --t-h2:clamp(1.9rem,4.2vw,3.4rem);
  --t-h3:clamp(1.2rem,2vw,1.7rem);
  --t-body:clamp(1rem,1.05vw,1.12rem);
  --t-label:.72rem;

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

  --radius:18px;
  --radius-lg:28px;
  --radius-xl:44px;      /* the soft, generous curve Pause leans on */
  --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(--sea);}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;background:var(--paper);color:var(--sea);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,video{display:block;max-width:100%;height:auto;}
svg{max-width:100%;max-height:100%;flex-shrink:0;}
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(--display);font-weight:600;line-height:1.06;letter-spacing:-.022em;}
p{margin:0;}
:focus-visible{outline:2.5px solid var(--sea);outline-offset:3px;border-radius:4px;}
::selection{background:var(--sky-deep);color:var(--sea);}

.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;}

.label{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--sea-2);display:block;margin-bottom:var(--s2);
}
.lede{font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.72;color:var(--sea-2);max-width:64ch;}

/* Buttons: pill shaped and soft, the opposite of a hard editorial rule */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.05rem 2.1rem;border:1.5px solid var(--sea);border-radius:100px;
  background:var(--sea);color:#fff;cursor:pointer;
  font-size:.92rem;font-weight:600;letter-spacing:.01em;text-align:center;min-height:54px;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{background:var(--green-deep);border-color:var(--green-deep);transform:translateY(-2px);}
.btn--ghost{background:transparent;color:var(--sea);border-color:var(--line);}
.btn--ghost:hover{background:var(--sea);color:#fff;border-color:var(--sea);}
.btn--light{background:#fff;color:var(--sea);border-color:#fff;}
.btn--light:hover{background:var(--green);border-color:var(--green);color:var(--sea);}
.btn--wide{width:100%;}

/* ============================================================
   4. HEADER
   ============================================================ */
.hdr{position:sticky;top:0;z-index:60;background:rgba(247,250,252,.88);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;direction:ltr;}
.logo img{height:clamp(26px,3vw,38px);width:auto;}
/* fallback wordmark, used only if the logo file is ever missing */
.logo__name{font-family:var(--display);font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1;}
.logo__by{font-family:var(--mono);font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:.45rem;line-height:1;}
.logo:has(.logo__name){flex-direction:column;align-items:flex-start;line-height:1;}
.ftr .logo img{height:40px;}
.nav{display:flex;gap:clamp(.75rem,1.6vw,1.7rem);align-items:center;white-space:nowrap;min-width:0;}
.nav a{font-size:.88rem;font-weight:500;color:var(--sea-2);position:relative;padding-block:.3rem;}
.nav a::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:0;height:2px;background:var(--green);border-radius:2px;transition:width .3s var(--ease);}
.nav a:hover{color:var(--sea);}
.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:.6rem .9rem;border:1px solid var(--line);border-radius:100px;transition:.25s;}
.lang:hover{border-color:var(--sea);color:var(--sea);}
.burger{display:none;width:48px;height:48px;align-items:center;justify-content:center;background:none;border:1px solid var(--line);border-radius:100px;cursor:pointer;}
.burger span{display:block;width:18px;height:2px;background:var(--sea);border-radius:2px;position:relative;transition:.3s;}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--sea);border-radius:2px;transition:.3s;}
.burger span::before{top:-6px;} .burger span::after{top:6px;}
.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 panel lives outside <header>, which uses backdrop-filter and would
   otherwise become its containing block. Hidden three ways so it can never
   leak onto the page. */
.hdr__nav{display:none;visibility:hidden;pointer-events:none;}

/* ============================================================
   5. HERO
   ============================================================ */
.hero{position:relative;min-height:min(92svh,860px);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(12,40,52,.30) 0%,rgba(12,40,52,.06) 28%,rgba(12,40,52,.52) 66%,rgba(12,40,52,.84) 100%),
    linear-gradient(90deg,rgba(12,40,52,.40) 0%,rgba(12,40,52,0) 60%);
}
[dir="rtl"] .hero__bg::after{background:
  linear-gradient(180deg,rgba(12,40,52,.30) 0%,rgba(12,40,52,.06) 28%,rgba(12,40,52,.52) 66%,rgba(12,40,52,.84) 100%),
  linear-gradient(270deg,rgba(12,40,52,.40) 0%,rgba(12,40,52,0) 60%);}
.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{font-size:var(--t-hero);max-width:16ch;margin-bottom:var(--s3);text-wrap:balance;text-shadow:0 2px 30px rgba(12,40,52,.4);}
.hero__h1-a{display:block;letter-spacing:.02em;}
.hero__h1-b{display:block;font-size:clamp(1rem,1.7vw,1.45rem);font-weight:400;line-height:1.45;letter-spacing:.005em;margin-top:clamp(.7rem,1.4vw,1.1rem);color:rgba(255,255,255,.94);}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);}
.hero__cta .btn{background:#fff;color:var(--sea);border-color:#fff;}
.hero__cta .btn:hover{background:var(--green);border-color:var(--green);color:var(--sea);}
.hero__cta .btn--ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.55);}
.hero__cta .btn--ghost:hover{background:#fff;color:var(--sea);border-color:#fff;}

/* ============================================================
   6. FACTS
   ============================================================ */
.facts{background:var(--sky-soft);}
.facts__head{margin-bottom:var(--s5);max-width:80ch;}
.facts__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,1.2vw,1rem);}
.fact{background:#fff;border-radius:var(--radius-lg);padding:clamp(1.3rem,2.2vw,2rem);border:1px solid var(--line-2);}
.fact b{display:block;font-family:var(--display);font-size:clamp(2rem,3.4vw,2.9rem);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--sea);}
.fact b i{font-style:normal;font-size:.44em;margin-inline-start:.12em;}
.fact strong{display:block;font-size:.9rem;font-weight:600;margin-top:.8rem;}
.fact span{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.25rem;}

/* ============================================================
   7. RHYTHMS: the idea the whole brand rests on
   ============================================================ */
.rhythms{background:var(--sea);color:#fff;}
.rhythms .label{color:var(--sky);}
.rhythms .lede{color:rgba(255,255,255,.78);}
.rh__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.4vw,1.2rem);margin-top:var(--s6);}
.rh{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-xl);padding:clamp(1.6rem,2.6vw,2.4rem);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.rh:hover{background:rgba(255,255,255,.12);transform:translateY(-4px);}
.rh i{font-family:var(--mono);font-style:normal;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);}
.rh b{display:block;font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;margin:.9rem 0 .2rem;letter-spacing:.02em;}
.rh h3{font-size:1rem;font-weight:600;color:var(--sky);margin-bottom:.7rem;}
.rh p{font-size:.92rem;line-height:1.65;color:rgba(255,255,255,.76);}

/* ============================================================
   8. SPLIT sections
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;}
.split--wide{grid-template-columns:.9fr 1.1fr;}
.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-xl);}
.split__media--plain img{border-radius:var(--radius);background:#fff;}

.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:.92rem;}
.fig-row:last-child{border-bottom:1px solid var(--line);}
.fig-row span{color:var(--muted);}
.fig-row b{font-weight:700;}

.band{position:relative;height:clamp(280px,48vw,560px);overflow:hidden;}
.band img{width:100%;height:100%;object-fit:cover;}

/* ============================================================
   9. EXPERIENCES
   ============================================================ */
.am__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,1.2vw,1rem);margin-top:var(--s5);}
.am{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--radius-lg);
  padding:clamp(1.3rem,2vw,1.8rem);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.am:hover{transform:translateY(-4px);box-shadow:0 20px 40px -30px rgba(29,70,88,.55);}
.am i{
  display:grid;place-items:center;width:38px;height:38px;border-radius:100px;
  background:var(--sky-soft);color:var(--sea);font-style:normal;
  font-family:var(--mono);font-size:.68rem;font-weight:600;
}
.am h3{font-size:var(--t-h3);margin:.9rem 0 .45rem;}
.am p{font-size:.9rem;color:var(--muted);line-height:1.6;}

/* ============================================================
   10. HOMES
   ============================================================ */
.res__head{max-width:78ch;margin-bottom:var(--s5);}
.res__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.2vw,1.8rem);}
.unit{background:#fff;border-radius:var(--radius-xl);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 24px 50px -30px rgba(29,70,88,.5);}
.unit__img{aspect-ratio:16/10;overflow:hidden;background:var(--sky-soft);}
.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 h3{font-size:var(--t-h3);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 div:last-child{grid-column:1/-1;}
.unit__meta span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.unit__meta b{font-size:.95rem;font-weight:700;}
.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:.84rem;min-height:46px;}
.unit__plan{background:none;border:1.5px solid var(--line);border-radius:100px;padding:.75rem 1.1rem;font-size:.84rem;cursor:pointer;transition:.25s;width:100%;min-height:46px;font-weight:600;}
.unit__plan:hover{background:var(--sea);color:#fff;border-color:var(--sea);}

.plan-dlg{border:0;padding:0;border-radius:var(--radius-lg);max-width:min(1100px,92vw);width:100%;background:#fff;color:var(--sea);}
.plan-dlg::backdrop{background:rgba(12,40,52,.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.2rem;}
.plan-dlg img{width:100%;}
.plan-dlg__x{background:none;border:1.5px solid var(--line);border-radius:100px;padding:.55rem 1.1rem;cursor:pointer;font-size:.84rem;min-height:44px;font-weight:600;}
.plan-dlg__x:hover{background:var(--sea);color:#fff;}

/* ============================================================
   11. OWNERSHIP
   ============================================================ */
.own{background:var(--green);color:var(--sea);}
.own .label{color:var(--green-deep);}
.own .lede{color:rgba(29,70,88,.82);}
.own__head{max-width:70ch;}
.own__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.4vw,1.2rem);margin-top:var(--s6);}
.own__card{background:rgba(255,255,255,.55);border-radius:var(--radius-xl);padding:clamp(1.6rem,3vw,2.6rem);text-align:center;}
.own__card b{display:block;font-family:var(--display);font-size:clamp(2.4rem,5vw,3.6rem);font-weight:700;line-height:1;color:var(--sea);}
.own__card span{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);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;}
.note{font-size:.82rem;color:var(--muted);max-width:72ch;}
.own .note{color:rgba(29,70,88,.7);}

/* ---- film ---- */
.film__frame{margin-top:var(--s5);border-radius:var(--radius-xl);overflow:hidden;background:var(--sea);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(12,40,52,.28);transition:background .3s;
}
.film__poster:hover::after{background:rgba(12,40,52,.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,255,255,.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(--green);transform:scale(1.06);}
.film__play svg{width:40%;height:auto;fill:var(--sea);}
.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 SLIDER
   ============================================================ */
.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:54px;height:54px;border-radius:100px;border:1.5px solid var(--line);background:#fff;color:var(--sea);cursor:pointer;display:grid;place-items:center;transition:.25s;}
.gal__btn:hover{background:var(--sea);color:#fff;border-color:var(--sea);}
[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-xl);overflow:hidden;background:var(--sky-soft);}
.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(--sky-soft);}
.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);}
.field{display:flex;flex-direction:column;gap:.5rem;}
.field>span{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.form-grid .full{grid-column:1/-1;}
.form-grid input,.form-grid select,.form-grid textarea{
  background:#fff;border:1.5px solid var(--line);border-radius:14px;
  padding:.95rem 1rem;min-height:54px;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(--sea);}
.phone-combo{display:flex;gap:.5rem;align-items:stretch;}
.phone-combo__cc{flex:0 0 clamp(110px,32%,160px);min-width:0;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:.95rem .6rem;min-height:54px;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:.86rem;color:var(--sea-2);grid-column:1/-1;}
.consent input{width:20px;height:20px;min-height:0;flex-shrink:0;margin-top:.15rem;accent-color:var(--green-deep);}
.form-msg{margin-top:var(--s2);font-size:.9rem;padding:.9rem 1.1rem;border-radius:14px;display:none;}
.form-msg.is-ok{display:block;background:rgba(143,198,91,.2);color:var(--green-deep);border:1px solid rgba(78,122,46,.35);}
.form-msg.is-err{display:block;background:rgba(185,139,46,.14);color:var(--gold);border:1px solid rgba(185,139,46,.35);}

.contact-icons{display:flex;gap:.7rem;margin-top:var(--s4);}
.contact-icons__b{width:58px;height:58px;border-radius:100px;display:grid;place-items:center;border:1.5px solid var(--line);background:#fff;color:var(--sea);transition:.25s;}
.contact-icons__b svg{width:21px;height:21px;display:block;}
.contact-icons__b:hover{background:var(--sea);color:#fff;border-color:var(--sea);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(--display);font-size:clamp(1.02rem,1.5vw,1.2rem);font-weight:600;line-height:1.4;
  transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::marker{content:"";}
.faq summary:hover{color:var(--green-deep);}
.faq__chev{flex:0 0 32px;width:32px;height:32px;border-radius:100px;border:1.5px solid var(--line);position:relative;transition:transform .3s var(--ease),background .25s,border-color .25s,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:12px;height:2px;border-radius:2px;}
.faq__chev::after{width:2px;height:12px;border-radius:2px;}
.faq__item[open] .faq__chev{background:var(--green);border-color:var(--green);color:var(--sea);transform:rotate(90deg);}
.faq__item[open] .faq__chev::after{opacity:0;}
.faq__item[open] summary{color:var(--green-deep);}
.faq__a{padding-bottom:1.5rem;}
.faq__a p{color:var(--sea-2);max-width:78ch;font-size:.98rem;line-height:1.76;}

/* ============================================================
   15. FOOTER + DOCKS
   ============================================================ */
.ftr{background:var(--sea);color:#fff;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,255,255,.16);}
.ftr .ftr__about{font-size:.9rem;line-height:1.7;color:rgba(255,255,255,.74);max-width:40ch;margin-top:var(--s3);}
.ftr h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.74);margin:0 0 1.1rem;font-weight:400;}
.ftr__links{display:flex;flex-direction:column;gap:.7rem;font-size:.9rem;}
.ftr__links a{color:rgba(255,255,255,.84);}
.ftr__links a:hover{color:var(--green);}
.socials{display:flex;gap:.6rem;margin-top:var(--s3);}
.socials a{width:42px;height:42px;border:1px solid rgba(255,255,255,.26);border-radius:100px;display:grid;place-items:center;transition:.25s;}
.socials a:hover{border-color:var(--green);color:var(--green);}
.socials svg{width:17px;height:17px;}
.ftr__contact{display:flex;gap:.6rem;margin-bottom:1.1rem;flex-wrap:wrap;}
.ftr__icon{width:46px;height:46px;border-radius:100px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.26);color:#fff;transition:.25s;}
.ftr__icon svg{width:19px;height:19px;}
.ftr__icon:hover{background:#fff;color:var(--sea);border-color:#fff;}
.ftr__icon--wa:hover{background:#25D366;border-color:#25D366;color:#fff;}
.ftr__addr{font-size:.9rem;line-height:1.7;color:rgba(255,255,255,.74);}
.ftr__btm{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2);padding-top:var(--s3);font-size:.78rem;color:rgba(255,255,255,.74);}

.cta-rail{position:fixed;inset-inline-end:1rem;top:50%;transform:translateY(-50%);z-index:59;display:flex;flex-direction:column;gap:.5rem;width:76px;transition:opacity .35s var(--ease),visibility .35s;}
.cta-rail a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  width:76px;height:72px;padding:.5rem .35rem;border-radius:var(--radius);
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border:1px solid var(--line);color:var(--sea);
  font-size:.62rem;font-weight:700;letter-spacing:.02em;line-height:1.15;text-align:center;
  box-shadow:0 12px 30px -18px rgba(29,70,88,.6);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.cta-rail a:hover{background:var(--sea);color:#fff;border-color:var(--sea);}
.cta-rail svg{width:20px;height:20px;flex:0 0 20px;}
.cta-rail__wa:hover{background:#25D366;border-color:#25D366;color:#fff;}
.cta-rail__go{background:var(--sea);color:#fff;border-color:var(--sea);}
.cta-rail__go:hover{background:var(--green);border-color:var(--green);color:var(--sea);}
.cta-rail.is-away{opacity:0;visibility:hidden;pointer-events:none;}

.mbar{position:fixed;inset-inline:0;bottom:0;z-index:70;display:none;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -8px 30px -18px rgba(29,70,88,.6);transition:transform .35s var(--ease);}
.mbar a{background:#fff;display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.95rem .4rem;font-size:.82rem;font-weight:600;min-height:58px;color:var(--sea);}
.mbar a:last-child{background:var(--sea);color:#fff;}
.mbar svg{width:17px;height:17px;flex-shrink:0;}
.mbar.is-away{transform:translateY(100%);}

/* ============================================================
   16. MOTION
   ============================================================ */
/* 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,.am,.rh,.gal-slide img,.unit__img img{transition:none!important;}
}

/* ============================================================
   17. RESPONSIVE
   ============================================================ */
@media (max-width:1280px){
  .nav,.hdr__end .btn{display:none;}
  .burger{display:flex;}
  .hdr__nav{
    display:flex;visibility:hidden;
    position:fixed;inset:0;top:0;background:var(--paper);z-index:80;
    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(--display);font-size:clamp(1.2rem,4.6vw,1.7rem);font-weight:600;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:1100px){
  .facts__grid,.rh__grid,.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);}
}
@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) + 58px + env(safe-area-inset-bottom));}
}
@media (max-width:640px){
  .facts__grid,.rh__grid,.am__grid,.res__grid,.ftr__top,.own__grid{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .phone-combo{flex-direction:column;}
  .phone-combo__cc{flex:1 1 auto;}
  .unit__actions{grid-template-columns:1fr;}
  .gal-slide{flex:0 0 84%;}
  .gal__head{flex-direction:column;align-items:flex-start;}
  .hero{min-height:86svh;}
  .hero h1{font-size:clamp(2.2rem,10vw,3.3rem);}
  .ftr__btm{flex-direction:column;}
}

/* ============================================================
   18. RTL / ARABIC
   ============================================================ */
[dir="rtl"]{--sans:"Pause Arabic","Segoe UI",Tahoma,Arial,sans-serif;--display:"Pause Arabic","Segoe UI",Tahoma,Arial,sans-serif;}
[dir="rtl"] body{line-height:1.9;}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{letter-spacing:0;line-height:1.3;}
[dir="rtl"] .logo{direction:ltr;text-align:start;}
[dir="rtl"] .fact b,[dir="rtl"] .own__card b{direction:ltr;unicode-bidi:embed;}
[dir="rtl"] .label,[dir="rtl"] .fact span,[dir="rtl"] .unit__meta span,[dir="rtl"] .ftr h4{letter-spacing:.06em;}

@media print{
  .hdr,.mbar,.cta-rail,.hero__cta,.form-sec{display:none!important;}
  body{background:#fff;}
  .rhythms,.own,.ftr{background:#fff;color:#000;}
}

/* ============================================================
   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__card b,.fig-row b,.unit__meta b,.tbl td,.nbr span,.phone-combo__cc,.am i,.rh__grid i,.ftr__btm 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:#C0492B;box-shadow:0 0 0 2px rgba(192,73,43,.16);}
.form-msg.is-info{display:block;background:rgba(29,70,88,.06);color:var(--sea);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 h4{margin-bottom:.75rem;}
.ftr__links{gap:.5rem;}
.ftr .logo img{height:38px;}
.socials{margin-top:var(--s2);}
.socials a{width:36px;height:36px;}
.ftr__contact{margin-bottom:.75rem;}
.ftr__icon{width:40px;height:40px;}
.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:#C4E3F5;}
/* 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(--sea);color:#fff;border-color:var(--sea);}

/* ============================================================
   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.pa-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 -------------- */
/* "Pause" 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(--display);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;}
}