/* ==========================================================================
   Thaer Media — site.css
   Shared design system: tokens, base, layout, header, footer and components
   used by every page. Page-specific styles live in home.css, contact.css,
   course.css and gallery.css.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face{font-family:"Expo Arabic";src:url("https://db.onlinewebfonts.com/t/9004b72f96afb1e5f13389f489791113.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Expo Arabic";src:url("https://db.onlinewebfonts.com/t/b009a8fb757127bf4c5ad1d5abd060e9.woff2") format("woff2");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"Expo Arabic";src:url("https://db.onlinewebfonts.com/t/5a46b722115434b86e5e9719ff7f6f23.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap}

/* ---------- Design tokens ---------- */
:root{
  color-scheme:dark;

  /* Brand */
  --brand:#147467;
  --brand-deep:#073237;
  --gold:#edbd4d;
  --gold-soft:#f3d27e;

  /* Surfaces */
  --bg:#083f39;
  --bg-gradient:
    radial-gradient(900px 500px at 8% 8%,rgba(28,139,117,.24),transparent 62%),
    radial-gradient(800px 500px at 92% 24%,rgba(237,189,77,.075),transparent 60%),
    linear-gradient(145deg,#073c37 0%,#0a4a42 45%,#083f39 100%);
  --grid-line:rgba(244,247,243,.035);
  --grid-opacity:.6;
  --surface:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  --surface-solid:#0a463f;
  --surface-hover:rgba(255,255,255,.08);
  --field:rgba(0,0,0,.18);
  --border:rgba(124,203,183,.22);
  --border-strong:rgba(124,203,183,.4);
  --hairline:rgba(244,247,243,.1);

  /* Text */
  --text:#f4f7f3;
  --text-muted:rgba(244,247,243,.74);
  --text-subtle:rgba(244,247,243,.56);
  --accent-text:var(--gold);

  /* Buttons */
  --btn-primary-bg:linear-gradient(110deg,#f1c64f 0%,#d5a033 100%);
  --btn-primary-text:#1c1606;
  --btn-primary-shadow:0 10px 26px rgba(213,160,51,.28);

  /* Effects */
  --shadow-sm:0 4px 14px rgba(0,22,20,.22);
  --shadow:0 10px 24px rgba(0,22,20,.28),0 24px 64px rgba(0,25,22,.24);
  --inset-highlight:inset 0 1px 0 rgba(255,255,255,.14);
  --focus-ring:0 0 0 3px rgba(237,189,77,.55);
  --header-bg:rgba(5,70,62,.72);
  --header-bg-scrolled:rgba(4,56,51,.92);
  --menu-bg:#05342f;

  /* Shape & rhythm */
  --radius-sm:12px;
  --radius:20px;
  --radius-lg:28px;
  --radius-pill:999px;
  --container:1200px;
  --gutter:clamp(24px,6vw,40px);
  --section-space:clamp(48px,6vw,80px);
  --header-h:76px;
  --ease:cubic-bezier(.2,.8,.2,1);

  /* Type */
  --font-ar:"Expo Arabic","IBM Plex Sans Arabic",Tahoma,"Segoe UI",sans-serif;
  --font-en:"Manrope","Segoe UI",Roboto,Arial,sans-serif;
  --fs-display:clamp(1.85rem,1rem + 3.3vw,3.5rem);
  --fs-h1:clamp(1.7rem,1.2rem + 1.9vw,2.6rem);
  --fs-h2:clamp(1.45rem,1.1rem + 1.25vw,2.15rem);
  --fs-h3:clamp(1.12rem,1.05rem + .3vw,1.3rem);
  --fs-lead:clamp(1rem,.96rem + .25vw,1.12rem);
  --fs-body:1rem;
  --fs-small:.875rem;
}

:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f9f5;
  --bg-gradient:
    radial-gradient(900px 500px at 8% 8%,rgba(17,111,94,.11),transparent 62%),
    radial-gradient(800px 500px at 92% 24%,rgba(226,185,97,.12),transparent 60%),
    linear-gradient(145deg,#f7fbf7 0%,#eaf4ed 45%,#dcebe3 100%);
  --grid-line:rgba(7,59,54,.035);
  --grid-opacity:.5;
  --surface:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,255,255,.68));
  --surface-solid:#ffffff;
  --surface-hover:rgba(7,80,71,.06);
  --field:rgba(255,255,255,.9);
  --border:rgba(7,80,71,.14);
  --border-strong:rgba(7,80,71,.3);
  --hairline:rgba(7,59,54,.1);
  --text:#073b36;
  --text-muted:rgba(6,40,37,.76);
  --text-subtle:rgba(6,40,37,.68);
  --accent-text:#0b6b5b;
  --btn-primary-bg:linear-gradient(115deg,#0b725e 0%,#075047 100%);
  --btn-primary-text:#ffffff;
  --btn-primary-shadow:0 10px 26px rgba(7,80,71,.24);
  --shadow-sm:0 4px 14px rgba(14,48,39,.08);
  --shadow:0 10px 24px rgba(14,48,39,.08),0 24px 60px rgba(14,48,39,.1);
  --inset-highlight:inset 0 1px 0 rgba(255,255,255,.9);
  --focus-ring:0 0 0 3px rgba(11,107,91,.45);
  --header-bg:rgba(255,255,255,.72);
  --header-bg-scrolled:rgba(255,255,255,.92);
  --menu-bg:#ffffff;
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px);overflow-x:clip}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  background-color:var(--bg);
  color:var(--text);font-family:var(--font-ar);font-size:var(--fs-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  transition:background-color .4s var(--ease),color .3s var(--ease);
}
html[lang="en"] body{font-family:var(--font-en);line-height:1.55}
/* Fixed backdrop on its own layer (background-attachment:fixed is unreliable on mobile) */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:var(--bg-gradient);pointer-events:none}
/* Subtle grid lines from the original design */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grid-opacity);
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 75%,transparent);mask-image:linear-gradient(to bottom,#000 0%,#000 75%,transparent);
}
main{flex:1 0 auto}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
h1,h2,h3{line-height:1.35;font-weight:800;letter-spacing:0}
html[lang="en"] :is(h1,h2,h3){letter-spacing:-.02em;line-height:1.15}
ul,ol{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}
::selection{background:rgba(237,189,77,.35);color:inherit}

:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;inset-inline-start:16px;top:-80px;z-index:200;padding:10px 18px;border-radius:var(--radius-pill);background:var(--gold);color:#1c1606;font-weight:700;transition:top .2s var(--ease)}
.skip-link:focus-visible{top:16px}

/* Side margins also respect the phone's safe area (notch, rounded corners) */
.container{
  --safe:max(var(--gutter),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  width:min(var(--container),100% - var(--safe) * 2);margin-inline:auto;
}
.section{padding-block:var(--section-space)}
.section + .section{padding-top:0}

/* ---------- Typography helpers ---------- */
.kicker{color:var(--accent-text)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:var(--radius-pill);
  border:1px solid rgba(226,185,96,.28);background:rgba(15,74,70,.32);
  color:#ffc247;font-size:var(--fs-small);font-weight:700;line-height:1.4;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.eyebrow::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(237,189,77,.18)}
:root[data-theme="light"] .eyebrow{background:rgba(255,255,255,.8);border-color:rgba(11,107,91,.2);color:#0b6b5b}
:root[data-theme="light"] .eyebrow::before{background:#0b6b5b;box-shadow:0 0 0 3px rgba(11,107,91,.14)}
.eyebrow--on-media{background:rgba(5,35,32,.66);border-color:rgba(237,189,77,.32);color:#ffc247}
:root[data-theme="light"] .eyebrow--on-media{background:rgba(5,35,32,.66);border-color:rgba(237,189,77,.32);color:#ffc247}
:root[data-theme="light"] .eyebrow--on-media::before{background:var(--gold);box-shadow:0 0 0 3px rgba(237,189,77,.18)}

.section-head{display:grid;gap:8px;margin-bottom:clamp(22px,3vw,36px)}
.section-head h2{font-size:var(--fs-h2)}
.section-head p{color:var(--text-muted);font-size:var(--fs-lead);max-width:62ch}
.section-head--center{margin-inline:auto;text-align:center;justify-items:center}

/* ---------- Surfaces ---------- */
.card{
  position:relative;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--inset-highlight),var(--shadow-sm);
}
.card--glass{backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}

/* ---------- Buttons ---------- */
.btn{
  --btn-h:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--btn-h);padding:0 26px;border-radius:var(--radius-pill);
  font-weight:800;font-size:1rem;line-height:1.2;text-align:center;white-space:nowrap;
  border:1px solid transparent;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
html[dir="rtl"] .btn svg.icon-arrow{transform:scaleX(-1)}
.btn:hover svg.icon-arrow{transform:translateX(3px)}
html[dir="rtl"] .btn:hover svg.icon-arrow{transform:scaleX(-1) translateX(3px)}
.btn--primary{background:var(--btn-primary-bg);color:var(--btn-primary-text);box-shadow:var(--btn-primary-shadow)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:var(--btn-primary-shadow),0 0 0 4px rgba(237,189,77,.12)}
.btn--ghost{background:var(--surface-hover);border-color:var(--border-strong);color:var(--text)}
.btn--ghost:hover{transform:translateY(-2px);border-color:var(--accent-text);color:var(--accent-text)}
.btn--block{width:100%}
.btn--sm{--btn-h:42px;padding:0 18px;font-size:var(--fs-small)}
.btn:focus-visible{box-shadow:var(--focus-ring);border-radius:var(--radius-pill)}

.icon-btn{
  width:42px;height:42px;display:inline-grid;place-items:center;flex:none;
  border-radius:50%;border:1px solid var(--border);background:var(--surface-hover);color:var(--text);
  font-weight:800;font-size:.85rem;line-height:1;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.icon-btn:hover{border-color:var(--accent-text);color:var(--accent-text)}
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:focus-visible{border-radius:50%}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;padding-top:14px}
.nav{
  position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:64px;padding:10px 12px 10px 20px;border-radius:var(--radius-pill);
  border:1px solid var(--border);
  box-shadow:var(--inset-highlight),var(--shadow-sm);
  transition:box-shadow .3s var(--ease);
}
/* The frosted background lives on its own layer: a backdrop-filter on .nav
   itself would make the dropdown menu (a child) show the page through it. */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--header-bg);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  transition:background-color .3s var(--ease);
}
html[dir="rtl"] .nav{padding:10px 20px 10px 12px}
.site-header.is-scrolled .nav{box-shadow:var(--inset-highlight),var(--shadow)}
.site-header.is-scrolled .nav::before{background:var(--header-bg-scrolled)}
.brand{display:inline-flex;align-items:center;flex:none;border-radius:var(--radius-sm)}
.brand img{height:38px;width:auto}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{
  position:relative;padding:8px 12px;border-radius:var(--radius-pill);
  font-size:.95rem;font-weight:600;color:var(--text-muted);white-space:nowrap;
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.nav-links a:hover{color:var(--text);background:var(--surface-hover)}
.nav-links a[aria-current="page"],.nav-links a.is-active{color:var(--accent-text)}
.nav-links a.is-active::after,.nav-links a[aria-current="page"]::after{content:"";position:absolute;inset-inline:12px;bottom:3px;height:2px;border-radius:2px;background:currentColor;opacity:.7}
.nav-actions{display:flex;align-items:center;gap:8px;flex:none}
.theme-toggle .icon-sun{display:block}
.theme-toggle .icon-moon{display:none}
:root[data-theme="light"] .theme-toggle .icon-sun{display:none}
:root[data-theme="light"] .theme-toggle .icon-moon{display:block}
.lang-toggle{letter-spacing:.02em}
html[lang="en"] .lang-toggle{font-family:var(--font-ar);font-size:1rem}
.menu-toggle{display:none}
.menu-toggle .icon-close{display:none}
.menu-toggle[aria-expanded="true"] .icon-open{display:none}
.menu-toggle[aria-expanded="true"] .icon-close{display:block}

@media (max-width:1080px){
  .menu-toggle{display:inline-grid}
  .nav-links{
    position:absolute;top:calc(100% + 10px);inset-inline:0;
    flex-direction:column;align-items:stretch;gap:2px;padding:10px;
    border-radius:var(--radius-lg);background:var(--menu-bg);border:1px solid var(--border);
    box-shadow:var(--shadow);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s;
  }
  .nav-links.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ease),transform .2s var(--ease)}
  .nav-links a{padding:12px 16px;font-size:1rem;border-radius:var(--radius-sm)}
  .nav-links a.is-active::after,.nav-links a[aria-current="page"]::after{display:none}
  .nav-links a.is-active,.nav-links a[aria-current="page"]{background:var(--surface-hover)}
}
@media (max-width:480px){
  .site-header{padding-top:10px}
  .nav{min-height:58px;padding:8px 8px 8px 14px}
  html[dir="rtl"] .nav{padding:8px 14px 8px 8px}
  .brand img{height:32px}
  .nav-actions{gap:6px}
  .icon-btn{width:40px;height:40px}
}

/* ---------- Footer ---------- */
.site-footer{margin-top:var(--section-space);border-top:1px solid var(--hairline);background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.16))}
:root[data-theme="light"] .site-footer{background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.75))}
.site-footer--simple{border-top:0;background:none}
/* Thin divider, Home button on the start side (right in Arabic, left in English), copyright on the other */
.site-footer--simple .container{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:24px clamp(28px,4vw,40px);border-top:1px solid var(--hairline);
}
.site-footer--simple .btn{flex:none}
.footer-copy{min-width:0;color:var(--text-subtle);font-size:var(--fs-small);text-align:end;line-height:1.5}
@media (max-width:480px){
  .site-footer--simple .btn{--btn-h:44px;padding:0 18px;font-size:.92rem}
  .footer-copy{font-size:.78rem}
  .footer-copy span{display:block}
}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-block:44px 32px}
.footer-brand img{height:44px;width:auto}
.footer-brand p{margin-top:16px;color:var(--text-muted);max-width:32ch}
.footer-title{margin-bottom:14px;font-size:1rem;font-weight:800;color:var(--accent-text)}
.footer-links{display:grid;gap:6px}
.footer-links a{color:var(--text-muted);font-size:.95rem;width:fit-content;transition:color .2s var(--ease)}
.footer-links a:hover{color:var(--accent-text)}
.footer-contact a{display:inline-flex;align-items:center;gap:10px}
.footer-contact svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.footer-contact .ltr{direction:ltr;unicode-bidi:isolate}
.socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.socials a{
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--border);background:var(--surface-hover);color:var(--text);
  transition:color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease),background-color .2s var(--ease);
}
.socials a:hover{color:var(--accent-text);border-color:var(--accent-text);transform:translateY(-2px)}
.socials svg{width:17px;height:17px;fill:currentColor}
.socials svg.stroke{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding-block:20px 28px;border-top:1px solid var(--hairline);color:var(--text-subtle);font-size:var(--fs-small)}
.footer-bottom a{color:var(--text-muted)}
.footer-bottom a:hover{color:var(--accent-text)}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px 24px}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:480px){
  .footer-grid{grid-template-columns:1fr 1fr;padding-block:44px 32px}
  .footer-contact-col{grid-column:1/-1}
  .footer-bottom{justify-content:center;text-align:center}
}

/* ---------- Floating WhatsApp ---------- */
.floating-whatsapp{
  position:fixed;z-index:90;inset-inline-end:max(20px,env(safe-area-inset-right,0px));bottom:max(20px,env(safe-area-inset-bottom,0px));
  width:56px;height:56px;display:grid;place-items:center;border-radius:50%;
  background:#25d366;color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.28),0 0 0 6px rgba(37,211,102,.14);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),opacity .25s var(--ease),visibility .25s;
}
.floating-whatsapp:hover{transform:translateY(-3px) scale(1.04)}
.floating-whatsapp svg{width:30px;height:30px;fill:currentColor}
.floating-whatsapp:focus-visible{border-radius:50%;box-shadow:0 0 0 3px #fff,0 0 0 6px #25d366}
.floating-whatsapp.is-hidden{opacity:0;visibility:hidden;transform:translateY(12px)}
@media (max-width:480px){.floating-whatsapp{inset-inline-end:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));width:52px;height:52px}}

/* ---------- Forms ---------- */
.form{display:grid;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:8px}
.field-label{font-size:.95rem;font-weight:700;color:var(--text)}
.field-label .optional{font-weight:500;color:var(--text-subtle)}
.field input,.field textarea{
  width:100%;min-height:52px;padding:13px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--field);color:var(--text);
  font-size:1rem;line-height:1.5;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease);
}
.field textarea{min-height:128px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--text-subtle);opacity:1}
.field input:hover,.field textarea:hover{border-color:var(--border-strong)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent-text);box-shadow:var(--focus-ring)}
.field input[type="tel"],.field input[type="email"]{direction:ltr;text-align:start}
html[dir="rtl"] .field input[type="tel"],html[dir="rtl"] .field input[type="email"]{text-align:right}
.field input[type="tel"]::placeholder,.field input[type="email"]::placeholder{direction:ltr}
.field.is-invalid input,.field.is-invalid textarea{border-color:#f08a7a}
.field-error{font-size:var(--fs-small);color:#ffb4a8;font-weight:600}
:root[data-theme="light"] .field-error{color:#b3261e}
:root[data-theme="light"] .field.is-invalid input,:root[data-theme="light"] .field.is-invalid textarea{border-color:#b3261e}
.form-status{padding:12px 16px;border-radius:var(--radius-sm);font-size:.95rem;font-weight:600;border:1px solid var(--border);background:var(--surface-hover)}
.form-status[data-state="success"]{border-color:rgba(37,211,102,.4);color:#7ee2a6}
.form-status[data-state="error"]{border-color:rgba(240,138,122,.45);color:#ffb4a8}
:root[data-theme="light"] .form-status[data-state="success"]{color:#0b6b3a}
:root[data-theme="light"] .form-status[data-state="error"]{color:#b3261e}
.form-status a{text-decoration:underline;text-underline-offset:3px}
.form-note{font-size:var(--fs-small);color:var(--text-subtle);text-align:center}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}

/* ---------- Portrait frame (hero, contact, course) ---------- */
.portrait{
  position:relative;width:min(100%,var(--portrait-w,460px));aspect-ratio:4/5;margin-inline:auto;
  padding:12px;border-radius:var(--radius-pill);
  background:linear-gradient(145deg,rgba(22,112,99,.9),rgba(6,59,56,.96));
  border:1px solid rgba(125,204,185,.42);box-shadow:0 26px 64px rgba(0,20,18,.34);
}
:root[data-theme="light"] .portrait{background:linear-gradient(145deg,#e2f0e7,#c9e2d8);border-color:rgba(17,92,78,.3);box-shadow:0 26px 54px rgba(14,48,39,.16)}
.portrait-inner{position:relative;height:100%;overflow:hidden;border-radius:inherit;background:#0a211f}
:root[data-theme="light"] .portrait-inner{background:#dce9e2}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 12%;transition:opacity .45s var(--ease)}
.portrait .img-light{opacity:0}
:root[data-theme="light"] .portrait .img-light{opacity:1}
:root[data-theme="light"] .portrait .img-dark{opacity:0}
.portrait::before{
  content:"";position:absolute;inset:-28px;z-index:-1;border-radius:inherit;
  border:1px solid rgba(237,189,77,.16);
}
.portrait-badge{position:absolute;z-index:2;white-space:nowrap}

/* ---------- Ambient motion ---------- */
.portrait{animation:drift 8s ease-in-out infinite}
.portrait-badge{animation:badgeFloat 3.6s ease-in-out infinite}
.portrait-badge + .portrait-badge{animation-delay:-1.8s}
.eyebrow::before{animation:dotPulse 2.4s ease-in-out infinite}
.portrait::before{animation:ringPulse 5s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes badgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(237,189,77,.45)}60%{box-shadow:0 0 0 6px rgba(237,189,77,0)}}
@keyframes ringPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}}
.floating-whatsapp{animation:waFloat 3s ease-in-out infinite,waPulse 2.8s ease-out infinite}
@keyframes waFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes waPulse{0%{box-shadow:0 10px 26px rgba(0,0,0,.28),0 0 0 0 rgba(37,211,102,.45)}70%,100%{box-shadow:0 10px 26px rgba(0,0,0,.28),0 0 0 12px rgba(37,211,102,0)}}
.cta::before{content:"";position:absolute;inset:-40%;z-index:0;pointer-events:none;background:radial-gradient(circle at 30% 30%,rgba(237,189,77,.14),transparent 30%),radial-gradient(circle at 70% 70%,rgba(28,139,117,.35),transparent 32%);filter:blur(20px);animation:cardGlow 12s ease-in-out infinite alternate}
.cta > *{position:relative;z-index:1}
@keyframes cardGlow{0%{transform:translate(-10%,-6%) scale(.9);opacity:.6}50%{transform:translate(6%,5%) scale(1.04);opacity:.9}100%{transform:translate(12%,-3%) scale(.97);opacity:.7}}

/* ---------- Reveal-on-scroll ---------- */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}
.js .reveal-stagger:not(.is-revealed) > *{opacity:0;transform:translateY(34px) scale(.98);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal-stagger.is-visible:not(.is-revealed) > *{opacity:1;transform:none}
.js .reveal-stagger.is-visible:not(.is-revealed) > :nth-child(2){transition-delay:.08s}
.js .reveal-stagger.is-visible:not(.is-revealed) > :nth-child(3){transition-delay:.16s}
.js .reveal-stagger.is-visible:not(.is-revealed) > :nth-child(4){transition-delay:.24s}
.js .reveal-stagger.is-visible:not(.is-revealed) > :nth-child(5){transition-delay:.32s}
.js .reveal-stagger.is-visible:not(.is-revealed) > :nth-child(6){transition-delay:.4s}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{padding-block:clamp(28px,4vw,52px) clamp(20px,3vw,32px)}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;font-size:var(--fs-small);color:var(--text-subtle)}
.breadcrumb a{color:var(--text-muted)}
.breadcrumb a:hover{color:var(--accent-text)}
.breadcrumb svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
html[dir="rtl"] .breadcrumb svg{transform:scaleX(-1)}
.page-hero h1{font-size:var(--fs-h1)}
.page-hero p{margin-top:12px;max-width:62ch;color:var(--text-muted);font-size:var(--fs-lead)}

/* ---------- CTA band ---------- */
.cta{
  position:relative;overflow:hidden;display:grid;justify-items:center;gap:18px;text-align:center;
  padding:clamp(32px,5vw,56px) clamp(20px,5vw,64px);border-radius:var(--radius-lg);
  background:
    radial-gradient(600px 300px at 15% 0%,rgba(237,189,77,.16),transparent 70%),
    radial-gradient(600px 320px at 90% 100%,rgba(28,139,117,.4),transparent 70%),
    linear-gradient(150deg,#0b544b,#073a35);
  border:1px solid rgba(237,189,77,.22);box-shadow:var(--shadow);color:#f4f7f3;
}
.cta h2{font-size:var(--fs-h2)}
.cta p{max-width:56ch;color:rgba(244,247,243,.8);font-size:var(--fs-lead)}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}
.cta .btn--primary{background:linear-gradient(110deg,#f1c64f 0%,#d5a033 100%);color:#1c1606;box-shadow:0 10px 26px rgba(213,160,51,.28)}
.cta .btn--ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#f4f7f3}
.cta .btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.cta .eyebrow{background:rgba(5,35,32,.5);border-color:rgba(237,189,77,.3);color:#ffc247}
.cta .eyebrow::before{background:var(--gold);box-shadow:0 0 0 3px rgba(237,189,77,.18)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal,.js .reveal-stagger > *,.js .gallery-item,.js .hero-copy > *{opacity:1!important;transform:none!important}
}

/* ---------- Print ---------- */
@media print{
  .site-header,.floating-whatsapp,.site-footer .socials{display:none}
  body{background:#fff;color:#000}
}