/* ==========================================================================
   BELLE STUDIO — style.css
   Premium beauty salon demo template. No frameworks, no build step.

   TABLE OF CONTENTS
   --------------------------------------------------------------------------
   01. Design tokens
   02. Reset and base
   03. Typography
   04. Layout primitives
   05. Buttons and icon shapes
   06. Header and navigation
   07. Hero
   08. Trust strip
   09. Services
   10. Portfolio + before/after slider
   11. Offers
   12. About
   13. Testimonials carousel
   14. Contact and form
   15. Footer
   16. Lightbox
   17. Floating WhatsApp button
   18. Scroll reveal
   19. Configuration audit
   20. Responsive
   21. Reduced motion, print, forced colours
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   --------------------------------------------------------------------------
   ONE accent (dusty rose), ONE metal detail (champagne gold), ONE neutral
   family (warm ivory through espresso). Every section uses the same tokens,
   so nothing drifts into a different palette halfway down the page.

   Radius scale is locked to a single documented rule:
     buttons  -> pill   (--r-pill)
     cards    -> large  (--r-lg)
     inputs   -> medium (--r-md)
     chips    -> small  (--r-sm)
   ========================================================================== */
:root {
  /* --- Neutrals: warm ivory through espresso ---------------------------- */
  --ivory:        #FBF6F0;
  --ivory-2:      #F6EEE5;
  --cream:        #F1E5DA;
  --blush:        #F0DDD7;
  --blush-2:      #E7CFC8;

  /* --- Ink -------------------------------------------------------------- */
  --espresso:     #2B2320;
  --espresso-2:   #3E332E;
  --muted:        #6E6058;   /* 4.9:1 on ivory, safe for body copy      */
  --muted-soft:   #8A7B72;

  /* --- Accent: dusty rose ----------------------------------------------- */
  --rose:         #C08E88;   /* decorative fills, large type only        */
  --rose-ink:     #8E4F4A;   /* 5.8:1 on ivory, safe for text            */
  --rose-deep:    #6F3B37;

  /* --- Detail: champagne gold (decorative only, never text) ------------- */
  --gold:         #C9A96A;
  --gold-soft:    #E4D5B8;
  --gold-deep:    #8A6E33;   /* gold darkened to 4.2:1, safe for text on ivory */

  /* --- WhatsApp --------------------------------------------------------- */
  --wa:           #1E7A4B;
  --wa-hover:     #175F3B;

  /* --- Semantic --------------------------------------------------------- */
  --bg:           var(--ivory);
  --surface:      #FFFFFF;
  --text:         var(--espresso);
  --line:         rgba(43, 35, 32, 0.10);
  --line-soft:    rgba(43, 35, 32, 0.06);

  /* --- Typography ------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.1rem, 1.25rem + 3.5vw, 3.9rem);
  --fs-h2: clamp(1.7rem, 1.2rem + 2.1vw, 2.65rem);
  --fs-h3: clamp(1.15rem, 1.02rem + 0.55vw, 1.4rem);
  --fs-body: clamp(0.975rem, 0.94rem + 0.18vw, 1.0625rem);
  --fs-sm:   0.875rem;
  --fs-xs:   0.78rem;

  /* --- Space ------------------------------------------------------------ */
  --gap:     clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --section: clamp(4rem, 2.6rem + 6vw, 8.5rem);
  --header-h: 72px;

  /* --- Radius (locked scale) -------------------------------------------- */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-pill: 999px;

  /* --- Shadows, tinted to the warm background (never pure black) -------- */
  --sh-1: 0 1px 2px rgba(94, 63, 60, .05), 0 2px 8px rgba(94, 63, 60, .04);
  --sh-2: 0 10px 30px -14px rgba(94, 63, 60, .20), 0 2px 6px rgba(94, 63, 60, .04);
  --sh-3: 0 28px 64px -28px rgba(94, 63, 60, .32), 0 4px 12px rgba(94, 63, 60, .06);

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .32s;

  /* --- Z-index scale (systemic layers only) ----------------------------- */
  --z-header: 100;
  --z-fab:    200;
  --z-overlay: 300;
}

/* Arabic overrides -------------------------------------------------------- */
/* Latin fonts have no Arabic glyphs, so Arabic swaps in its own family.      */
/* Arabic is a connected script: letter-spacing would break the joins, so it  */
/* is forced to 0 everywhere and spacing is done with word-spacing instead.  */
html[lang="ar"] {
  --font-display: 'El Messiri', 'Noto Sans Arabic', system-ui, sans-serif;
  --font-body:    'Noto Sans Arabic', system-ui, sans-serif;
  --fs-h1: clamp(1.95rem, 1.25rem + 3.1vw, 3.5rem);
  --fs-h2: clamp(1.55rem, 1.18rem + 1.9vw, 2.4rem);
}

/* ==========================================================================
   02. RESET AND BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header. */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;   /* belt-and-braces guard against a stray wide child */
}

/* Arabic needs more leading: the script has descenders and stacked diacritics. */
html[lang="ar"] body { line-height: 1.95; letter-spacing: 0; }

img, svg { display: block; max-width: 100%; }
img { height: auto; background: var(--cream); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

input, select, textarea { font: inherit; color: inherit; }

/* Keyboard focus only. Never removed, always high contrast. */
:focus-visible {
  outline: 2px solid var(--rose-ink);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--blush-2); color: var(--espresso); }

.skip-link {
  position: absolute; inset-inline-start: 50%; top: 0;
  transform: translate(50%, -120%);
  z-index: calc(var(--z-header) + 10);
  background: var(--espresso); color: var(--ivory);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: var(--fs-sm); font-weight: 500;
  transition: transform .2s var(--ease);
}
html[dir="ltr"] .skip-link { transform: translate(-50%, -120%); }
.skip-link:focus { transform: translate(50%, 0); }
html[dir="ltr"] .skip-link:focus { transform: translate(-50%, 0); }

.scroll-sentinel { width: 1px; height: 1px; pointer-events: none; opacity: 0; }

/* Available to assistive technology, invisible on screen. Used where a
   section needs a real heading for the document outline but no visible one. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */
.section__title { font-size: var(--fs-h2); }

.section__sub {
  margin: 1rem 0 0;
  color: var(--muted);
  max-width: 58ch;
}

.section__head { margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem); }

/* One eyebrow on the hero and one on services only. The rule is a maximum
   of one per three sections; the other sections rely on their headline. */
.eyebrow {
  margin: 0 0 1rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--rose-ink);
}
html[lang="ar"] .eyebrow { letter-spacing: 0; word-spacing: .1em; }

.eyebrow::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  inline-size: 28px;
  block-size: 1px;
  background: var(--gold);
  margin-inline-end: .75rem;
  margin-block-end: .2em;
}

.empty-note {
  text-align: center;
  color: var(--muted);
  padding: 3rem 0;
}

/* ==========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);
}

.section { padding-block: var(--section); }

.demo-note {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  padding: 1.15rem 1.4rem;
  background: var(--ivory-2);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--gold);
  border-radius: var(--r-md);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.demo-note strong { color: var(--text); font-weight: 500; }

/* ==========================================================================
   05. BUTTONS
   ========================================================================== */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;              /* comfortable touch target */
  padding: .8rem 1.6rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;            /* a CTA label must never wrap */
  text-align: center;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform .12s var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px) scale(.985); }

.btn--sm { min-height: 44px; padding: .55rem 1.15rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

.btn--primary {
  --btn-bg: var(--espresso);
  --btn-fg: var(--ivory);
  box-shadow: var(--sh-2);
}
.btn--primary:hover { --btn-bg: var(--rose-deep); }

.btn--ghost {
  --btn-fg: var(--espresso);
  border-color: var(--line);
  background: rgba(255, 255, 255, .55);
}
.btn--ghost:hover { border-color: var(--rose); background: var(--surface); }

.btn--wa { --btn-bg: var(--wa); --btn-fg: #fff; box-shadow: 0 10px 26px -14px rgba(30, 122, 75, .7); }
.btn--wa:hover { --btn-bg: var(--wa-hover); }

/* Social / outline pill used inside contact cards. */
.btn--outline {
  --btn-fg: var(--espresso);
  border-color: var(--line);
  background: var(--surface);
}
.btn--outline:hover { border-color: var(--rose); background: var(--ivory-2); }

/* --- Icon shapes --------------------------------------------------------
   Hand-drawn inline SVG keeps this template free of any icon dependency.
   Each one is a single-path glyph sized by the em box, so it inherits
   colour and scales with the label.
   ---------------------------------------------------------------------- */
[class^="i-"], [class*=" i-"] {
  display: inline-flex;
  inline-size: 1.15em;
  block-size: 1.15em;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}

.i-wa {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.47-2.4-1.48-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.44-.53.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.91-2.2-.25-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.21 3.07c.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.7.62.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2.01-1.41.24-.7.24-1.29.17-1.42-.07-.12-.27-.2-.57-.34M12.05 21.8a9.87 9.87 0 0 1-5.03-1.38l-.36-.22-3.74.99 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.89 9.89-9.89 2.64 0 5.12 1.03 6.99 2.9a9.82 9.82 0 0 1 2.89 6.99c0 5.45-4.43 9.89-9.89 9.89m8.41-18.3A11.82 11.82 0 0 0 12.05 0C5.5 0 .16 5.34.16 11.89c0 2.1.55 4.14 1.59 5.95L.06 24l6.3-1.65c1.82.95 3.87 1.45 5.69 1.45 6.55 0 11.89-5.34 11.89-11.89 0-3.18-1.24-6.16-3.48-8.41Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.47-2.4-1.48-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.44-.53.15-.17.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.91-2.2-.25-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.21 3.07c.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.7.62.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2.01-1.41.24-.7.24-1.29.17-1.42-.07-.12-.27-.2-.57-.34M12.05 21.8a9.87 9.87 0 0 1-5.03-1.38l-.36-.22-3.74.99 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.89 9.89-9.89 2.64 0 5.12 1.03 6.99 2.9a9.82 9.82 0 0 1 2.89 6.99c0 5.45-4.43 9.89-9.89 9.89m8.41-18.3A11.82 11.82 0 0 0 12.05 0C5.5 0 .16 5.34.16 11.89c0 2.1.55 4.14 1.59 5.95L.06 24l6.3-1.65c1.82.95 3.87 1.45 5.69 1.45 6.55 0 11.89-5.34 11.89-11.89 0-3.18-1.24-6.16-3.48-8.41Z'/%3E%3C/svg%3E");
}

.i-ig {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58.02 4.85.07 1.17.06 1.8.25 2.23.42.56.21.96.47 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.02 3.59-.07 4.85c-.06 1.17-.26 1.8-.42 2.23-.22.56-.48.96-.9 1.38-.42.42-.81.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.86.07s-3.59-.02-4.86-.07c-1.17-.06-1.81-.26-2.23-.42-.57-.22-.96-.48-1.38-.9-.42-.42-.69-.82-.9-1.38-.17-.42-.36-1.06-.42-2.23C2.18 15.59 2.16 15.2 2.16 12s.02-3.59.07-4.85c.06-1.17.25-1.81.42-2.23.21-.57.48-.96.9-1.38.42-.42.81-.69 1.38-.9.42-.17 1.06-.36 2.23-.42C8.41 2.18 8.8 2.16 12 2.16Zm0 1.98c-3.14 0-3.51.01-4.75.07-1.15.05-1.77.24-2.19.4-.55.22-.94.47-1.35.88-.41.41-.67.8-.88 1.35-.16.42-.35 1.04-.4 2.19-.06 1.24-.07 1.61-.07 4.75s.01 3.51.07 4.75c.05 1.15.24 1.77.4 2.19.22.55.47.94.88 1.35.41.41.8.67 1.35.88.42.16 1.04.35 2.19.4 1.24.06 1.61.07 4.75.07s3.51-.01 4.75-.07c1.15-.05 1.77-.24 2.19-.4.55-.22.94-.47 1.35-.88.41-.41.67-.8.88-1.35.16-.42.35-1.04.4-2.19.06-1.24.07-1.61.07-4.75s-.01-3.51-.07-4.75c-.05-1.15-.24-1.77-.4-2.19a3.6 3.6 0 0 0-.88-1.35 3.6 3.6 0 0 0-1.35-.88c-.42-.16-1.04-.35-2.19-.4-1.24-.06-1.61-.07-4.75-.07Zm0 3.37a5.45 5.45 0 1 1 0 10.9 5.45 5.45 0 0 1 0-10.9Zm0 8.99a3.54 3.54 0 1 0 0-7.07 3.54 3.54 0 0 0 0 7.07Zm6.99-9.2a1.27 1.27 0 1 1-2.55 0 1.27 1.27 0 0 1 2.55 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58.02 4.85.07 1.17.06 1.8.25 2.23.42.56.21.96.47 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.02 3.59-.07 4.85c-.06 1.17-.26 1.8-.42 2.23-.22.56-.48.96-.9 1.38-.42.42-.81.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.86.07s-3.59-.02-4.86-.07c-1.17-.06-1.81-.26-2.23-.42-.57-.22-.96-.48-1.38-.9-.42-.42-.69-.82-.9-1.38-.17-.42-.36-1.06-.42-2.23C2.18 15.59 2.16 15.2 2.16 12s.02-3.59.07-4.85c.06-1.17.25-1.81.42-2.23.21-.57.48-.96.9-1.38.42-.42.81-.69 1.38-.9.42-.17 1.06-.36 2.23-.42C8.41 2.18 8.8 2.16 12 2.16Zm0 1.98c-3.14 0-3.51.01-4.75.07-1.15.05-1.77.24-2.19.4-.55.22-.94.47-1.35.88-.41.41-.67.8-.88 1.35-.16.42-.35 1.04-.4 2.19-.06 1.24-.07 1.61-.07 4.75s.01 3.51.07 4.75c.05 1.15.24 1.77.4 2.19.22.55.47.94.88 1.35.41.41.8.67 1.35.88.42.16 1.04.35 2.19.4 1.24.06 1.61.07 4.75.07s3.51-.01 4.75-.07c1.15-.05 1.77-.24 2.19-.4.55-.22.94-.47 1.35-.88.41-.41.67-.8.88-1.35.16-.42.35-1.04.4-2.19.06-1.24.07-1.61.07-4.75s-.01-3.51-.07-4.75c-.05-1.15-.24-1.77-.4-2.19a3.6 3.6 0 0 0-.88-1.35 3.6 3.6 0 0 0-1.35-.88c-.42-.16-1.04-.35-2.19-.4-1.24-.06-1.61-.07-4.75-.07Zm0 3.37a5.45 5.45 0 1 1 0 10.9 5.45 5.45 0 0 1 0-10.9Zm0 8.99a3.54 3.54 0 1 0 0-7.07 3.54 3.54 0 0 0 0 7.07Zm6.99-9.2a1.27 1.27 0 1 1-2.55 0 1.27 1.27 0 0 1 2.55 0Z'/%3E%3C/svg%3E");
}

.i-tt {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.53.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.45-.05-2.9-.35-4.2-.97-.58-.26-1.1-.59-1.63-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.53.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.45-.05-2.9-.35-4.2-.97-.58-.26-1.1-.59-1.63-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07Z'/%3E%3C/svg%3E");
}

.i-pin {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7.5 7.5 0 0 0-7.5 7.5c0 5.35 6.71 12.11 7 12.4a.7.7 0 0 0 1 0c.29-.29 7-7.05 7-12.4A7.5 7.5 0 0 0 12 2Zm0 10.25a2.75 2.75 0 1 1 0-5.5 2.75 2.75 0 0 1 0 5.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7.5 7.5 0 0 0-7.5 7.5c0 5.35 6.71 12.11 7 12.4a.7.7 0 0 0 1 0c.29-.29 7-7.05 7-12.4A7.5 7.5 0 0 0 12 2Zm0 10.25a2.75 2.75 0 1 1 0-5.5 2.75 2.75 0 0 1 0 5.5Z'/%3E%3C/svg%3E");
}

.i-phone {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2Z'/%3E%3C/svg%3E");
}

.i-clock {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm1 3v4.6l3.1 1.8-1 1.72L11 12.5V7h2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm1 3v4.6l3.1 1.8-1 1.72L11 12.5V7h2Z'/%3E%3C/svg%3E");
}

.i-check {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.6 4 12.05l1.4-1.4 4.15 4.15L18.6 6l1.4 1.4-10.45 10.2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.6 4 12.05l1.4-1.4 4.15 4.15L18.6 6l1.4 1.4-10.45 10.2Z'/%3E%3C/svg%3E");
}

.i-spark {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.4 4.2 2.2 6.4 6 7-3.8.6-5.6 2.8-6 7-.4-4.2-2.2-6.4-6-7 3.8-.6 5.6-2.8 6-7Zm7 12c.2 2 1 3 3 3.4-2 .4-2.8 1.4-3 3.4-.2-2-1-3-3-3.4 2-.4 2.8-1.4 3-3.4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.4 4.2 2.2 6.4 6 7-3.8.6-5.6 2.8-6 7-.4-4.2-2.2-6.4-6-7 3.8-.6 5.6-2.8 6-7Zm7 12c.2 2 1 3 3 3.4-2 .4-2.8 1.4-3 3.4-.2-2-1-3-3-3.4 2-.4 2.8-1.4 3-3.4Z'/%3E%3C/svg%3E");
}

.i-globe {
  -webkit-mask-image: 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'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.4 4 5.6 4 9s-1.5 6.6-4 9c-2.5-2.4-4-5.6-4-9s1.5-6.6 4-9Z'/%3E%3C/svg%3E");
  mask-image: 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'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.4 4 5.6 4 9s-1.5 6.6-4 9c-2.5-2.4-4-5.6-4-9s1.5-6.6 4-9Z'/%3E%3C/svg%3E");
  inline-size: 16px;
  block-size: 16px;
  color: var(--rose-ink);
}

/* ==========================================================================
   06. HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(251, 246, 240, .82);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -22px rgba(94, 63, 60, .7);
}

.header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex: none;
}
.brand__mark {
  inline-size: 38px; block-size: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--gold);
  background: var(--surface);
  color: var(--rose-ink);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  padding-bottom: .08em;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}
.brand__name em {
  font-style: italic;
  color: var(--rose-ink);
  /* Optical: a full word space reads loose next to an italic tail. */
  margin-inline-start: -.04em;
}
html[lang="ar"] .brand__name { font-size: 1.05rem; letter-spacing: 0; }

.nav { margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(.5rem, .1rem + 1.4vw, 1.5rem); }
.nav__list a {
  position: relative;
  display: block;
  padding: .5rem .25rem;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--espresso-2);
  transition: color var(--dur) var(--ease);
}
.nav__list a::after {
  content: "";
  position: absolute;
  inset-inline: 0; bottom: 0;
  block-size: 1px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: var(--ov, right);
  transition: transform var(--dur) var(--ease);
}
html[dir="rtl"] .nav__list a::after { --ov: right; }
html[dir="ltr"] .nav__list a::after { --ov: left; }
.nav__list a:hover { color: var(--rose-ink); }
.nav__list a:hover::after,
.nav__list a.is-active::after { transform: scaleX(1); }
.nav__list a.is-active { color: var(--rose-ink); }

.header__actions { display: flex; align-items: center; gap: .6rem; flex: none; }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 42px;
  padding: 0 .8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--espresso);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .06em;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.lang-toggle:hover { border-color: var(--rose); background: var(--ivory-2); }
.lang-toggle:hover .i-globe { color: var(--rose-deep); }

/* Hamburger that folds into a cross.

   Geometry matters here and it is easy to get wrong. The bars use flex with
   an explicit gap rather than margins, because a grid container stretches
   its auto rows to fill the button and that silently overrides margin-top.
   With bar height 1.5 and gap 5 the centre-to-centre spacing d is 6.5, so the
   outer bars must translate by exactly +/-d to land on the button centre and
   form a true X. Any other value gives two parallel strokes that only look
   like a cross. */
.burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  inline-size: 44px; block-size: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  padding: 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.burger:hover { border-color: var(--rose); }
.burger span {
  display: block;
  inline-size: 18px; block-size: 1.5px;
  background: var(--espresso);
  border-radius: var(--r-pill);
  transition: transform .3s var(--ease), opacity .16s var(--ease);
}
.burger[aria-expanded="true"] {
  background: var(--espresso);
  border-color: var(--espresso);
}
.burger[aria-expanded="true"] span { background: var(--ivory); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  border-top: 1px solid var(--line);
  /* The panel drops below the sticky header and floats over the page, so it
     needs its own shadow and a max height with internal scrolling. Without
     them it reads as extra page content rather than an open menu. */
  box-shadow: 0 24px 48px -28px rgba(94, 63, 60, .55);
  background: var(--ivory);
  padding: .75rem clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem) 1.35rem;
  display: grid;
  gap: .85rem;
  max-block-size: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { display: grid; gap: .15rem; margin-bottom: 1rem; }
.mobile-nav a:not(.btn) {
  display: block;
  padding: .85rem .25rem;
  font-size: var(--fs-body);
  border-bottom: 1px solid var(--line-soft);
  transition: color var(--dur) var(--ease), padding-inline-start var(--dur) var(--ease);
}
.mobile-nav a:not(.btn):hover { color: var(--rose-ink); padding-inline-start: .5rem; }

/* ==========================================================================
   07. HERO
   Asymmetric split. Text column and image column do NOT share a baseline:
   the image is deliberately taller and bleeds past the copy.
   ========================================================================== */
.hero {
  padding-block: clamp(2.25rem, 1.2rem + 4vw, 4.5rem) clamp(3rem, 2rem + 4vw, 6rem);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  align-items: center;
}

.hero__copy { max-width: 34rem; }

.hero__title {
  font-size: var(--fs-h1);
  font-weight: 500;
  letter-spacing: -.01em;
  margin-bottom: 1.1rem;
  /* Arabic display type at weight 600 reads more premium than the Latin 400 */
  text-wrap: balance;
}
html[lang="ar"] .hero__title { font-weight: 600; line-height: 1.4; }

.hero__sub {
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  color: var(--muted);
  margin-bottom: 2rem;
  max-width: 46ch;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.25rem; }

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--espresso-2);
}
.hero__trust li { display: flex; align-items: center; gap: .5rem; }
.hero__trust li::before {
  content: "";
  inline-size: 6px; block-size: 6px;
  border-radius: var(--r-pill);
  background: var(--gold);
  flex: none;
}

.hero__media { position: relative; }

.hero__figure {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--cream);
  box-shadow: var(--sh-3);
  aspect-ratio: 4 / 5;
}
.hero__figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hero__badge {
  position: absolute;
  inset-inline-start: clamp(-.75rem, -2vw, -1.25rem);
  bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem 1.15rem;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
}
.hero__badge-rule { inline-size: 20px; block-size: 1px; background: var(--gold); flex: none; }

/* ==========================================================================
   08. TRUST STRIP
   A horizontal hairline row. Deliberately NOT three cards: this is a
   different layout family from the service grid that follows it.
   ========================================================================== */
.trust { padding-block: clamp(2rem, 1.4rem + 2vw, 3rem); background: var(--ivory-2); border-block: 1px solid var(--line); }
.trust__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.trust__item {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
}
.trust__icon {
  inline-size: 40px; block-size: 40px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--blush);
  color: var(--rose-ink);
}
.trust__icon span { inline-size: 18px; block-size: 18px; }
.trust__item h3 { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; margin-bottom: .15rem; }
html[lang="ar"] .trust__item h3 { font-weight: 600; }
.trust__item p { font-size: var(--fs-sm); color: var(--muted); margin: 0; line-height: 1.6; }

/* ==========================================================================
   09. SERVICES
   ========================================================================== */
.services { background: var(--bg); }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
}
.filter {
  min-height: 42px;
  padding: .5rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--espresso-2);
  font-size: var(--fs-sm);
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.filter:hover { border-color: var(--rose); }
.filter[aria-pressed="true"] {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--ivory);
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: clamp(1rem, .7rem + 1vw, 1.5rem);
}

.svc {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }

.svc__media { position: relative; aspect-ratio: 16 / 11; background: var(--cream); overflow: hidden; }
.svc__media img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.svc:hover .svc__media img { transform: scale(1.05); }

.svc__body { padding: 1.35rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.svc__name { font-size: var(--fs-h3); margin-bottom: .5rem; }
html[lang="ar"] .svc__name { font-weight: 600; line-height: 1.5; }
.svc__desc { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 1.1rem; }

.svc__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-block: .9rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
}
.svc__dur { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); }
.svc__dur span { inline-size: 15px; block-size: 15px; }
.svc__price { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--rose-ink); white-space: nowrap; }
html[lang="ar"] .svc__price { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; }

.svc__cta { margin-top: .25rem; }
.svc__cta .btn { inline-size: 100%; border-color: var(--line); background: var(--ivory); color: var(--espresso); box-shadow: none; }
.svc__cta .btn:hover { border-color: var(--wa); color: var(--wa); background: var(--surface); }

/* ==========================================================================
   10. PORTFOLIO + BEFORE / AFTER
   ========================================================================== */
.portfolio { background: var(--ivory-2); border-block: 1px solid var(--line); }

.pf-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(.6rem, .4rem + .7vw, 1rem);
  grid-auto-flow: dense;
}
.pf {
  grid-column: span 2;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--cream);
  aspect-ratio: 4 / 5;
  cursor: zoom-in;
  border: 0;
  padding: 0;
  display: block;
  inline-size: 100%;
}
.pf.is-feature { grid-column: span 4; aspect-ratio: 16 / 11; }

.pf img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease), filter var(--dur) var(--ease);
}
.pf:hover img { transform: scale(1.06); }
.pf:focus-visible { outline: 2px solid var(--rose-ink); outline-offset: 3px; }

.pf__meta {
  position: absolute;
  inset-inline: 0; bottom: 0;
  padding: 2.5rem 1.1rem .95rem;
  background: linear-gradient(to top, rgba(43, 35, 32, .78), rgba(43, 35, 32, 0));
  color: #fff;
  text-align: start;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pf:hover .pf__meta,
.pf:focus-visible .pf__meta { opacity: 1; transform: translateY(0); }
.pf__cat { display: block; font-size: var(--fs-xs); opacity: .85; margin-bottom: .15rem; }
.pf__title { font-size: var(--fs-sm); font-weight: 500; color: #fff; margin: 0; }
html[lang="ar"] .pf__title { font-weight: 500; }

/* Touch devices never hover, so the caption is always visible there. */
@media (hover: none) {
  .pf__meta { opacity: 1; transform: none; }
}

/* --- Before / after ------------------------------------------------------ */
.ba {
  margin-top: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  align-items: center;
  padding-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  border-top: 1px solid var(--line);
}

.ba__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 560px;
  margin-inline: auto;
  inline-size: 100%;
  max-inline-size: 520px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--cream);
  box-shadow: var(--sh-2);
  /* Isolate the handle so it never blocks the range input underneath. */
  isolation: isolate;
}
.ba__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Physical left, not inset-inline-start. The comparison is driven by a
   left-to-right range input and the handle is positioned with `left`, so in
   RTL the clip has to stay anchored to the physical left edge as well.
   Using a logical inset anchored the "before" half to the right in Arabic,
   which put its label over the "after" image. */
.ba__clip {
  position: absolute;
  inset-block: 0;
  left: 0;
  inline-size: 50%;
  overflow: hidden;
  will-change: inline-size;
}
/* The inner image is pinned to the stage width so cropping by the parent
   clips it cleanly instead of squashing it. max-inline-size:none is
   required because the global img{max-width:100%} rule would otherwise
   resolve against the clip, not the stage. */
.ba__clip .ba__img { inline-size: var(--ba-stage-w, 100%); max-inline-size: none; }

.ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  inline-size: 2px;
  background: var(--gold);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}
.ba__handle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  inline-size: 40px; block-size: 40px;
  transform: translate(-50%, -50%);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 2px solid var(--gold);
  box-shadow: var(--sh-2);
}

.ba__tag {
  position: absolute;
  top: .9rem;
  z-index: 3;
  padding: .35rem .8rem;
  border-radius: var(--r-sm);
  background: rgba(43, 35, 32, .62);
  color: #fff;
  font-size: var(--fs-xs);
  letter-spacing: .05em;
  pointer-events: none;
}
/* Physical sides on purpose: the comparison always runs left to right,
   even on an Arabic page, because the clip is driven by a left-to-right
   range input. Logical sides would put "before" on the wrong half. */
.ba__tag--before { left: .9rem; right: auto; }
.ba__tag--after  { right: .9rem; left: auto; }

/* The real range input sits on top, invisible, and gives us drag + keyboard
   support without reimplementing pointer physics or focus management. */
.ba__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  direction: ltr;      /* the comparison must always run left to right */
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; inline-size: 44px; block-size: 100%; cursor: ew-resize; }
.ba__range::-moz-range-thumb { inline-size: 44px; block-size: 100%; border: 0; background: transparent; cursor: ew-resize; }
.ba__range:focus-visible ~ .ba__handle::after { outline: 2px solid var(--rose-ink); outline-offset: 2px; }

.ba__copy h3 { font-size: var(--fs-h3); margin-bottom: .6rem; }
html[lang="ar"] .ba__copy h3 { font-weight: 600; }
.ba__copy p { color: var(--muted); font-size: var(--fs-sm); }

.demo-warning {
  margin-top: 1.1rem;
  padding: .9rem 1.1rem;
  background: #FBF3E4;
  border: 1px solid var(--gold-soft);
  border-radius: var(--r-md);
  color: #6B5527;
  font-size: var(--fs-xs);
  line-height: 1.7;
}

/* ==========================================================================
   11. OFFERS
   A featured card plus a stacked pair: an asymmetric bento, not three
   identical columns.
   ========================================================================== */
.offers { background: var(--bg); }

.offers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, .7rem + 1vw, 1.5rem);
}

.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.offer:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }

.offer--feature { background: var(--espresso); color: var(--ivory); border-color: var(--espresso); }
.offer--feature .offer__desc,
.offer--feature .offer__badge { color: rgba(251, 246, 240, .78); }
/* Must target the price element itself. A rule on .offer__price only sets
   an inherited colour, and the direct rule on .offer__now below wins, which
   left dark rose text on the espresso card at 2.47:1. */
.offer--feature .offer__now { color: var(--gold-soft); }
.offer--feature .offer__old { color: rgba(251, 246, 240, .55); border-color: rgba(251, 246, 240, .28); }
.offer--feature .offer__body { background: var(--espresso); }
.offer--feature .btn--outline { color: var(--ivory); border-color: rgba(251, 246, 240, .35); background: transparent; }
.offer--feature .btn--outline:hover { background: rgba(251, 246, 240, .12); border-color: var(--gold); }

.offer__media { aspect-ratio: 16 / 10; background: var(--cream); overflow: hidden; }
.offer--feature .offer__media { aspect-ratio: 21 / 9; }
.offer__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.offer__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }

.offer__badge {
  align-self: flex-start;
  margin-bottom: .85rem;
  padding: .3rem .75rem;
  border-radius: var(--r-sm);
  background: var(--blush);
  color: var(--rose-deep);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.offer--feature .offer__badge { background: rgba(201, 169, 106, .2); color: var(--gold-soft); }

.offer__title { font-size: var(--fs-h3); margin-bottom: .5rem; }
html[lang="ar"] .offer__title { font-weight: 600; line-height: 1.5; }
.offer__desc { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 1.25rem; }

.offer__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.offer__old {
  font-size: var(--fs-sm);
  color: var(--muted-soft);
  text-decoration: line-through;
  text-decoration-color: var(--rose);
  padding-inline-end: .2rem;
}
.offer__now { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; color: var(--rose-ink); line-height: 1; }
html[lang="ar"] .offer__now { font-family: var(--font-body); font-size: 1.5rem; font-weight: 700; }
.offer__cur { font-size: var(--fs-sm); color: var(--muted); }

.offer .btn { margin-top: auto; }

/* ==========================================================================
   12. ABOUT
   ========================================================================== */
.about { background: var(--ivory-2); border-block: 1px solid var(--line); }
.about__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 1.4rem + 3vw, 4rem); align-items: center; }

.about__media { position: relative; }
.about__figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--cream); box-shadow: var(--sh-2); }
.about__figure img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.about__figure:first-child { aspect-ratio: 4 / 5; }
.about__figure--small {
  position: absolute;
  inset-block-end: -1.5rem;
  inset-inline-start: clamp(-1rem, -3vw, -2.5rem);
  inline-size: 42%;
  aspect-ratio: 1;
  border: 6px solid var(--ivory-2);
  box-shadow: var(--sh-2);
}
@media (max-width: 640px) { .about__figure--small { display: none; } }

.about__lead {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem);
  font-weight: 500;
  color: var(--espresso);
  margin: 1.1rem 0 1rem;
  line-height: 1.5;
}
html[lang="ar"] .about__lead { font-family: var(--font-body); font-weight: 600; }
.about__copy > p { color: var(--muted); }

.about__list {
  display: grid;
  gap: 1.1rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.about__item { display: flex; gap: 1rem; align-items: flex-start; }
.about__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  /* Not --gold: the bright champagne sits at 1.95:1 on this background and
     fails AA for text at this size. */
  color: var(--gold-deep);
  line-height: 1;
  flex: none;
  min-inline-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}
.about__item h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 500; margin-bottom: .2rem; }
html[lang="ar"] .about__item h3 { font-weight: 600; }
.about__item p { font-size: var(--fs-sm); color: var(--muted); margin: 0; line-height: 1.7; }

/* ==========================================================================
   13. TESTIMONIALS
   ========================================================================== */
.testimonials { background: var(--bg); }

.section__head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.section__head--row .section__sub { max-width: 46ch; }

.carousel-nav { display: flex; gap: .5rem; flex: none; }
.c-btn {
  inline-size: 46px; block-size: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  display: grid; place-items: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.c-btn:hover:not(:disabled) { background: var(--espresso); border-color: var(--espresso); }
.c-btn:hover:not(:disabled) span { border-color: #fff; }
.c-btn:disabled { opacity: .35; cursor: not-allowed; }
/* Chevrons drawn with two borders so no icon asset is needed. */
/* The chevron is drawn with two borders, so no icon asset is needed.
   Physical borders are deliberate: an arrow points in a physical
   direction, so using logical borders here made the glyph flip shape when
   the page switched to RTL. The base rotation below points right. */
.c-btn span {
  inline-size: 9px; block-size: 9px;
  border: 1.5px solid var(--espresso);
  border-bottom: 0;
  border-left: 0;
  transform: rotate(45deg);
  transition: border-color var(--dur) var(--ease);
}
#testiPrev span { transform: rotate(-135deg); }
/* In RTL reading order "back" is to the right, so the arrows swap. */
html[dir="rtl"] #testiPrev span { transform: rotate(45deg); }
html[dir="rtl"] #testiNext span { transform: rotate(-135deg); }

.carousel { margin-inline: calc(var(--gap) * -1); --carousel-pad: var(--gap); }
.carousel__track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .5rem var(--carousel-pad) 1.5rem;
  /* scroll-padding must mirror the inline padding. Without it the browser
     snaps and scrollIntoView() to the scrollport edge and every resting
     position is off by one gap, so the first card never lands at 0. */
  scroll-padding-inline: var(--carousel-pad);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 2px solid var(--rose-ink); outline-offset: -2px; border-radius: var(--r-md); }

.t-card {
  flex: 0 0 min(100%, 22rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.6rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  position: relative;
}
.t-card__mark { font-family: var(--font-display); font-size: 3rem; line-height: .6; color: var(--gold-soft); }
.t-card__text { font-size: var(--fs-body); color: var(--espresso-2); line-height: 1.75; margin: 0; }
html[lang="ar"] .t-card__text { line-height: 1.95; }
.t-card__foot { display: flex; align-items: center; gap: .85rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.t-card__avatar {
  inline-size: 42px; block-size: 42px;
  flex: none;
  border-radius: var(--r-pill);
  object-fit: cover;
  background: var(--blush);
}
.t-card__who strong { display: block; font-size: var(--fs-sm); font-weight: 500; }
html[lang="ar"] .t-card__who strong { font-weight: 600; }
.t-card__who span { display: block; font-size: var(--fs-xs); color: var(--muted); }

.t-card__demo {
  position: absolute;
  top: 1.1rem; inset-inline-end: 1.1rem;
  padding: .2rem .55rem;
  border-radius: var(--r-sm);
  background: #FBF3E4;
  border: 1px solid var(--gold-soft);
  color: #6B5527;
  font-size: .68rem;
  letter-spacing: .04em;
  line-height: 1.5;
}

/* The dot you see is 8px, but the button itself is a comfortable 28px
   target with the visible dot drawn by its ::before. Centring uses grid
   rather than percentage translate so it is identical in RTL and LTR. */
.carousel__dots { display: flex; justify-content: center; gap: .1rem; margin-top: .75rem; }
.carousel__dots button {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  padding: 0;
  border-radius: var(--r-pill);
}
.carousel__dots button::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--r-pill);
  background: var(--blush-2);
  transition: background var(--dur) var(--ease), inline-size var(--dur) var(--ease);
}
.carousel__dots button[aria-selected="true"]::before { background: var(--rose-ink); inline-size: 18px; }

/* ==========================================================================
   14. CONTACT AND FORM
   ========================================================================== */
.contact { background: var(--ivory-2); border-block: 1px solid var(--line); }
.contact__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); align-items: start; }

.form { margin-top: 2rem; display: grid; gap: 1.15rem; }
.form__row { display: grid; grid-template-columns: 1fr; gap: 1.15rem; }

.field { display: grid; gap: .45rem; }
.field label { font-size: var(--fs-sm); font-weight: 500; color: var(--espresso-2); }
.field .opt { color: var(--muted); font-weight: 400; font-size: var(--fs-xs); }

.field input,
.field select,
.field textarea {
  inline-size: 100%;
  min-height: 50px;
  padding: .75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  /* Placeholder must clear 4.5:1 against the white field. */
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.7; }
.field input::placeholder,
.field textarea::placeholder { color: #8A7B72; opacity: 1; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(192, 142, 136, .22);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236E6058' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 11px;
  padding-inline-end: 2.5rem;
}
html[dir="rtl"] .field select { background-position: left 1rem center; padding-inline-end: 1rem; padding-inline-start: 2.5rem; }

.field__error { font-size: var(--fs-xs); color: #A32A22; margin: 0; }
.field input[aria-invalid="true"] { border-color: #A32A22; }

.form__disclaimer {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.7;
  padding-inline-start: 1.1rem;
  border-inline-start: 2px solid var(--gold);
}

.contact__info {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2rem);
  box-shadow: var(--sh-1);
}
.contact__info-title { font-size: var(--fs-h3); margin-bottom: 1.4rem; }
html[lang="ar"] .contact__info-title { font-weight: 600; }

.contact__list { display: grid; gap: .25rem; }
.contact__list li { border-bottom: 1px solid var(--line-soft); }
.contact__list li:last-child { border-bottom: 0; }
.contact__list a,
.contact__list span.contact__static {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 52px;
  padding-block: .35rem;
  font-size: var(--fs-sm);
  transition: color var(--dur) var(--ease);
}
.contact__list a:hover { color: var(--rose-ink); }
.contact__list [class^="i-"] { color: var(--rose-ink); inline-size: 18px; block-size: 18px; }
.contact__list b { display: block; font-weight: 500; color: var(--espresso); font-size: var(--fs-sm); }
.contact__list small { display: block; font-size: var(--fs-xs); color: var(--muted); }

.contact__social { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.contact__social .btn { min-height: 46px; }
.contact__note { margin-top: 1.5rem; font-size: var(--fs-xs); color: var(--muted); line-height: 1.7; }

/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--espresso);
  color: rgba(251, 246, 240, .74);
  padding-top: clamp(3rem, 2.2rem + 3vw, 5rem);
  font-size: var(--fs-sm);
}
.site-footer h3 {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ivory);
  margin-bottom: 1.1rem;
  letter-spacing: .04em;
}
html[lang="ar"] .site-footer h3 { font-weight: 600; }

.footer__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 1.5rem + 2vw, 3rem); }

.brand--footer .brand__name { color: var(--ivory); }
.brand--footer .brand__name em { color: var(--gold-soft); }
.brand--footer .brand__mark { background: transparent; border-color: var(--gold); color: var(--gold-soft); }

.footer__brand p { margin-top: 1.1rem; max-width: 38ch; line-height: 1.8; }
.footer__nav ul { display: grid; gap: .15rem; }
.footer__nav a {
  display: inline-block;
  padding-block: .35rem;
  transition: color var(--dur) var(--ease), padding-inline-start var(--dur) var(--ease);
}
.footer__nav a:hover { color: var(--gold-soft); padding-inline-start: .4rem; }

.footer__cta p { margin-bottom: 1.1rem; }

.footer__bottom {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-block: 1.5rem;
  border-top: 1px solid rgba(251, 246, 240, .12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  font-size: var(--fs-xs);
  color: rgba(251, 246, 240, .55);
}
.footer__bottom p { margin: 0; }

/* ==========================================================================
   16. LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: clamp(1rem, .5rem + 3vw, 3rem);
}
.lightbox[hidden] { display: none; }

.lightbox__scrim {
  position: absolute;
  inset: 0;
  background: rgba(28, 22, 20, .88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: lbFade .3s var(--ease);
}

.lightbox__panel {
  position: relative;
  inline-size: 100%;
  max-inline-size: min(760px, 100%);
  max-block-size: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: lbIn .35s var(--ease);
}
.lightbox__figure {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  /* Transparent, not a tinted panel: with object-fit:contain the image is
     narrower than the figure on tall sources, and a background would draw a
     visible box around it that looks like a rendering bug. */
  background: transparent;
  min-block-size: 0;
  display: grid;
}
.lightbox__figure img {
  inline-size: 100%;
  max-block-size: 72dvh;
  object-fit: contain;
  background: transparent;
}
.lightbox__caption { color: var(--ivory); }
.lightbox__cat { font-size: var(--fs-xs); color: var(--gold-soft); letter-spacing: .08em; }
html[lang="ar"] .lightbox__cat { letter-spacing: 0; }
.lightbox__title { font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); margin-top: .2rem; }
html[lang="ar"] .lightbox__title { font-weight: 600; }

.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: rgba(251, 246, 240, .12);
  border: 1px solid rgba(251, 246, 240, .28);
  color: var(--ivory);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(251, 246, 240, .26); }

.lightbox__close { top: 0; inset-inline-end: 0; inline-size: 44px; block-size: 44px; }
.lightbox__close span {
  inline-size: 15px; block-size: 15px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  transform: rotate(45deg);
}
/* Draw the X with two ::before/::after bars on the rotated box. */
.lightbox__close span::before,
.lightbox__close span::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%; top: 50%;
  inline-size: 1.5px; block-size: 21px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.lightbox__close span::after { transform: translate(-50%, -50%) rotate(45deg); }

.lightbox__nav { top: 50%; transform: translateY(-50%); inline-size: 44px; block-size: 44px; }
.lightbox__nav--prev { inset-inline-start: clamp(-.25rem, -1vw, -.75rem); }
.lightbox__nav--next { inset-inline-end: clamp(-.25rem, -1vw, -.75rem); }
/* Same physical-border chevron as the carousel. Base rotation points right. */
.lightbox__nav span {
  inline-size: 9px; block-size: 9px;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-left: 0;
  transform: rotate(-135deg);
}
.lightbox__nav--next span { transform: rotate(45deg); }
html[dir="rtl"] .lightbox__nav span { transform: rotate(45deg); }
html[dir="rtl"] .lightbox__nav--next span { transform: rotate(-135deg); }

@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }

/* ==========================================================================
   17. FLOATING WHATSAPP
   ========================================================================== */
.wa-fab {
  position: fixed;
  inset-block-end: clamp(1rem, .5rem + 1.5vw, 1.75rem);
  inset-inline-start: clamp(1rem, .5rem + 1.5vw, 1.75rem);
  z-index: var(--z-fab);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 56px;
  padding: 0 1.3rem;
  border-radius: var(--r-pill);
  background: var(--wa);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 500;
  box-shadow: 0 14px 34px -12px rgba(30, 122, 75, .65);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.wa-fab[hidden] { display: none; }
.wa-fab:hover { background: var(--wa-hover); transform: translateY(-2px); }
.wa-fab:active { transform: translateY(0) scale(.98); }

/* ==========================================================================
   18. SCROLL REVEAL
   Elements fade up once, driven by IntersectionObserver. There is no scroll
   listener anywhere in this project.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .reveal.is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .carousel__track { scroll-behavior: auto; }
}

/* ==========================================================================
   19. CONFIGURATION AUDIT (dev only, ?config=1)
   ========================================================================== */
.config-audit {
  position: fixed;
  inset-block-end: 0; inset-inline: 0;
  z-index: calc(var(--z-overlay) + 1);
  max-block-size: 46dvh;
  overflow: auto;
  background: #2B2320;
  color: #FBF6F0;
  border-block-start: 3px solid var(--gold);
  padding: 1rem clamp(1rem, .5rem + 2vw, 2rem) 1.5rem;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: .8rem;
  line-height: 1.7;
}
.config-audit[hidden] { display: none; }
.config-audit__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(251, 246, 240, .2);
}
.config-audit__head button { background: none; border: 0; color: inherit; font-size: 1.3rem; line-height: 1; padding: 0 .25rem; }
.config-audit ul { display: grid; gap: .35rem; }
.config-audit li::before { content: "! "; color: var(--gold); }

/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */
@media (min-width: 600px) {
  .trust__row { grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, .5rem + 2vw, 2.5rem); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .ba { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .ba__stage { margin: 0; }
  .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 860px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  }
  .hero__copy { padding-block: 1rem; }
  .hero__figure { aspect-ratio: 3 / 4; }

  .about__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .contact__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); }
  .footer__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr); }

  .offers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer--feature { grid-column: span 2; }
  .offer--feature .offer__media { aspect-ratio: 21 / 8; }
}

@media (max-width: 1023px) {
  .nav { display: none; }
  .burger { display: flex; }
  .header__actions .btn--wa { display: none; }
}

@media (max-width: 860px) {
  .carousel { margin-inline: 0; --carousel-pad: clamp(1.15rem, .6rem + 2.4vw, 2.5rem); }
  .carousel__track { padding-inline: var(--carousel-pad); }
}

/* 320px: the narrowest target. Nothing may overflow or wrap awkwardly. */
@media (max-width: 380px) {
  :root { --header-h: 64px; }
  .btn { padding-inline: 1.15rem; }
  .hero__cta { gap: .5rem; }
  .hero__cta .btn { flex: 1 1 100%; }
  .brand__name { font-size: 1.15rem; }
  .brand__mark { inline-size: 34px; block-size: 34px; font-size: 1.05rem; }
  .trust__row { grid-template-columns: 1fr; }
  .wa-fab__label { display: none; }
  .wa-fab { padding: 0; inline-size: 56px; justify-content: center; }
  .lightbox__nav { position: static; transform: none; }
  .lightbox__nav--prev, .lightbox__nav--next { position: absolute; bottom: .5rem; top: auto; transform: none; }
  .lightbox__nav--prev { inset-inline-start: 25%; }
  .lightbox__nav--next { inset-inline-end: 25%; }
}

/* Below 600px the portfolio becomes a 2-up grid and the feature spans both. */
@media (max-width: 599px) {
  .pf-grid { grid-template-columns: repeat(2, 1fr); }
  .pf { grid-column: span 1; aspect-ratio: 1; }
  .pf.is-feature { grid-column: span 2; aspect-ratio: 16 / 10; }
}

@media (min-width: 1440px) {
  .wrap { max-width: 1320px; }
  .pf-grid { gap: 1.1rem; }
}

/* When the user has asked for a transparent interface, drop the blur and
   keep solid fills so nothing becomes unreadable. */
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--ivory); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .lightbox__scrim { background: rgba(28, 22, 20, .96); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ==========================================================================
   21. PRINT / FORCED COLOURS
   ========================================================================== */
@media print {
  .site-header, .wa-fab, .mobile-nav, .lightbox, .config-audit, .burger { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; break-inside: avoid; }
}

@media (forced-colors: active) {
  .btn, .filter, .svc, .offer, .t-card, .contact__info { border: 1px solid CanvasText; }
  .filter[aria-pressed="true"] { background: Highlight; color: HighlightText; }
  :focus-visible { outline: 2px solid Highlight; }
}