/* ============================================================
   רביב־ים · פתרונות הצללה — Design System
   Palette grounded in real material: sea-teal (name "ים" + logo),
   champagne gold (luxury/wood), graphite (aluminium frames), airy white.
   Base font-size bumped +20% per client request (10px -> 12px root).
   ============================================================ */

:root{
  /* brand — sampled from the real Raviv-Yam logo: royal blue #0447aa + gold #b48b3f */
  --sea-900:#062146;   /* deep navy — dark sections & headings */
  --sea-800:#0a49a3;   /* brand royal blue — primary */
  --sea-700:#0c53bd;   /* hover */
  --sea-600:#1663cf;
  --sea-400:#5a8fd8;
  --gold:#b98a3c;      /* brand gold */
  --gold-600:#9a7130;
  --gold-100:#efe1c4;
  --ink:#0e1626;
  --graphite:#1e2733;
  --slate:#586475;
  --mist:#8794a5;
  --cloud:#f5f6f9;
  --cloud-2:#e9edf3;
  --line:#dde3ec;
  --white:#ffffff;

  /* semantic */
  --bg:var(--white);
  --bg-alt:var(--cloud);
  --text:var(--graphite);
  --text-soft:var(--slate);
  --heading:var(--sea-900);
  --accent:var(--gold);

  /* type — +20% scale (root 12px instead of 10px) */
  --f-display:'Heebo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Assistant',system-ui,-apple-system,'Segoe UI',sans-serif;

  --step--1:clamp(1.5rem,1.42rem + .4vw,1.74rem);   /* ~ small */
  --step-0:clamp(1.74rem,1.65rem + .45vw,2.04rem);   /* body */
  --step-1:clamp(2.1rem,1.9rem + 1vw,2.7rem);
  --step-2:clamp(2.6rem,2.2rem + 1.8vw,3.6rem);
  --step-3:clamp(3.2rem,2.6rem + 3vw,5rem);
  --step-4:clamp(4rem,3rem + 5vw,7.2rem);

  /* layout */
  --wrap:126rem;
  --gutter:clamp(2rem,5vw,6rem);
  --radius:1.6rem;
  --radius-lg:2.6rem;
  --shadow-sm:0 1px 2px rgba(6,33,70,.06),0 2px 8px rgba(6,33,70,.05);
  --shadow:0 10px 30px -12px rgba(6,33,70,.22),0 4px 12px -6px rgba(6,33,70,.12);
  --shadow-lg:0 40px 80px -30px rgba(6,33,70,.4),0 12px 30px -14px rgba(6,33,70,.2);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.7,0,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:62.5%;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html{font-size:75%} /* +20% base -> 12px root */

body{
  margin:0;font-family:var(--f-body);font-size:var(--step-0);
  line-height:1.6;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--heading);line-height:1.08;
  font-weight:800;letter-spacing:-.01em;margin:0 0 .4em;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:3px solid var(--sea-600);outline-offset:3px;border-radius:4px}
::selection{background:var(--sea-800);color:#fff}

/* ---------- layout helpers ---------- */
.wrap{width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - var(--gutter)*2,86rem);margin-inline:auto}
.section{padding-block:clamp(6rem,9vw,12rem)}
.section--tight{padding-block:clamp(4rem,6vw,7rem)}
.bg-alt{background:var(--bg-alt)}
.bg-sea{background:var(--sea-900);color:#dfeaec}
.bg-sea h1,.bg-sea h2,.bg-sea h3{color:#fff}

.eyebrow{display:inline-flex;align-items:center;gap:.8rem;font-family:var(--f-display);
  font-weight:700;font-size:var(--step--1);letter-spacing:.16em;color:var(--gold-600);
  text-transform:none}
.eyebrow::before{content:"";width:2.6rem;height:2px;background:var(--gold);display:inline-block}
.bg-sea .eyebrow{color:var(--gold)}
.section-head{max-width:66rem;margin-bottom:clamp(3rem,5vw,6rem)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{font-size:var(--step-2);margin-top:.5rem}
.section-head p{color:var(--text-soft);font-size:var(--step-0)}
.bg-sea .section-head p{color:#b9cdd0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.9rem;
  padding:1.35em 2.2em;border-radius:100px;font-family:var(--f-display);font-weight:700;
  font-size:var(--step--1);line-height:1;transition:transform .35s var(--ease),
  box-shadow .35s var(--ease),background .3s,color .3s;will-change:transform;position:relative}
.btn svg{width:1.9rem;height:1.9rem;flex:none}
.btn--primary{background:var(--gold);color:var(--sea-900);box-shadow:0 12px 26px -10px rgba(185,138,60,.7)}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 20px 40px -12px rgba(185,138,60,.85)}
.btn--sea{background:var(--sea-800);color:#fff;box-shadow:var(--shadow)}
.btn--sea:hover{transform:translateY(-3px);background:var(--sea-700)}
.btn--ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.35);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:#fff;color:var(--sea-900);transform:translateY(-3px)}
.btn--outline{border:1.5px solid var(--line);color:var(--heading);background:#fff}
.btn--outline:hover{border-color:var(--sea-700);color:var(--sea-800);transform:translateY(-3px)}
.btn--lg{padding:1.5em 2.6em;font-size:var(--step-0)}

/* ============================================================
   HEADER
   ============================================================ */
.header{position:fixed;inset:0 0 auto;z-index:100;transition:background .4s var(--ease),
  box-shadow .4s,padding .4s;padding-block:2.2rem}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.header.scrolled{background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 var(--line);padding-block:1.3rem}
.brand{display:flex;align-items:center;gap:1.1rem;font-family:var(--f-display);font-weight:800;
  font-size:2.4rem;color:#fff;transition:color .4s;letter-spacing:-.02em}
.header.scrolled .brand{color:var(--sea-900)}
.brand__mark{width:4.4rem;height:4.4rem;flex:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.brand small{display:block;font-family:var(--f-body);font-weight:600;font-size:1.24rem;
  letter-spacing:.22em;color:var(--gold);margin-top:.2rem}
.nav{display:flex;align-items:center;gap:3.4rem}
.nav__links{display:flex;gap:2.8rem}
.nav__links a{font-family:var(--f-display);font-weight:600;font-size:1.62rem;color:rgba(255,255,255,.92);
  position:relative;transition:color .3s}
.header.scrolled .nav__links a{color:var(--graphite)}
.nav__links a::after{content:"";position:absolute;inset-inline-start:0;bottom:-.6rem;width:0;height:2px;
  background:var(--gold);transition:width .35s var(--ease)}
.nav__links a:hover{color:var(--gold)}
.nav__links a:hover::after{width:100%}
.header.scrolled .nav__links a:hover{color:var(--sea-800)}
.nav__cta{display:flex;align-items:center;gap:1.2rem}
.nav__phone{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--f-display);
  font-weight:700;color:#fff;font-size:1.7rem;transition:color .4s}
.header.scrolled .nav__phone{color:var(--sea-900)}
.nav__phone svg{width:1.9rem;height:1.9rem}
.burger{display:none;width:4.8rem;height:4.8rem;border-radius:12px;position:relative;z-index:110}
.burger span{position:absolute;inset-inline:1.1rem;height:2.5px;background:#fff;border-radius:2px;
  transition:.35s var(--ease)}
.header.scrolled .burger span{background:var(--sea-900)}
.burger span:nth-child(1){top:1.6rem}.burger span:nth-child(2){top:2.35rem}.burger span:nth-child(3){top:3.1rem}
body.nav-open .burger span{background:#fff}
body.nav-open .burger span:nth-child(1){top:2.35rem;transform:rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){top:2.35rem;transform:rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-bottom:clamp(5rem,8vh,10rem);overflow:hidden;color:#fff}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);
  animation:kenburns 18s var(--ease-in-out) forwards}
@keyframes kenburns{to{transform:scale(1)}}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,33,70,.55) 0%,rgba(6,33,70,.15) 35%,rgba(6,33,70,.55) 78%,rgba(6,33,70,.9) 100%)}
.hero__scrim::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 80% 10%,transparent 40%,rgba(6,33,70,.5) 100%)}
.hero__content{position:relative;max-width:78rem}
.hero__eyebrow{display:inline-flex;align-items:center;gap:1rem;font-family:var(--f-display);
  font-weight:600;font-size:var(--step--1);letter-spacing:.06em;color:var(--gold-100);
  padding:.7em 1.3em;border:1px solid rgba(255,255,255,.28);border-radius:100px;
  background:rgba(255,255,255,.06);backdrop-filter:blur(6px);margin-bottom:2.4rem}
.hero__eyebrow b{color:#fff;font-weight:700}
.hero h1{font-size:var(--step-4);color:#fff;margin-bottom:2rem;
  text-shadow:0 4px 30px rgba(0,0,0,.3)}
.hero h1 .accent{color:var(--gold)}
.hero__sub{font-size:var(--step-1);max-width:56rem;color:#eaf1f2;font-weight:400;margin-bottom:3.4rem;
  text-shadow:0 2px 20px rgba(0,0,0,.35)}
.hero__actions{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center}
.hero__scroll{position:absolute;inset-inline-end:var(--gutter);bottom:4rem;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:1rem;color:rgba(255,255,255,.75);
  font-size:1.3rem;letter-spacing:.2em;writing-mode:vertical-rl}
.hero__scroll i{width:1px;height:6rem;background:linear-gradient(rgba(255,255,255,.7),transparent);
  animation:scrolldrop 2.2s var(--ease-in-out) infinite}
@keyframes scrolldrop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:760px){.hero__scroll{display:none}}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust{background:var(--sea-900);color:#dceaec;position:relative;z-index:3}
.trust__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2rem;padding-block:clamp(3rem,4vw,4.4rem)}
.trust__item{text-align:center;padding-inline:1.2rem;position:relative}
.trust__item+.trust__item::before{content:"";position:absolute;inset-inline-start:0;top:20%;height:60%;
  width:1px;background:rgba(255,255,255,.14)}
.trust__item .n{font-family:var(--f-display);font-weight:800;font-size:clamp(3rem,3.4vw,4.2rem);
  color:#fff;line-height:1;letter-spacing:-.02em}
.trust__item .n b{color:var(--gold)}
.trust__item .l{font-size:1.5rem;color:#9fb8bb;margin-top:.8rem}
@media (max-width:860px){.trust__grid{grid-template-columns:repeat(2,1fr);gap:3rem 1rem}
  .trust__item:nth-child(odd)::before{display:none}
  .trust__item:nth-child(5){grid-column:1/-1}}

/* ============================================================
   SERVICES
   ============================================================ */
.services__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:2.4rem}
.svc{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:34rem;
  display:flex;flex-direction:column;justify-content:flex-end;padding:3rem;color:#fff;
  isolation:isolate;box-shadow:var(--shadow)}
.svc--big{grid-column:span 6;min-height:44rem}
.svc--sm{grid-column:span 3}
.svc__img{position:absolute;inset:0;z-index:-2}
.svc__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.svc:hover .svc__img img{transform:scale(1.07)}
.svc::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,33,70,0) 30%,rgba(6,33,70,.85) 100%)}
.svc__tag{position:absolute;top:2.4rem;inset-inline-start:2.4rem;font-family:var(--f-display);
  font-weight:700;font-size:1.4rem;letter-spacing:.04em;padding:.6em 1.1em;border-radius:100px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.svc h3{font-size:var(--step-1);color:#fff;margin-bottom:.5rem}
.svc p{color:#dfeaec;font-size:1.62rem;margin:0;max-width:38rem}
.svc__more{margin-top:1.6rem;display:inline-flex;align-items:center;gap:.7rem;color:var(--gold);
  font-family:var(--f-display);font-weight:700;font-size:1.6rem;
  opacity:0;transform:translateY(8px);transition:.4s var(--ease)}
.svc:hover .svc__more{opacity:1;transform:none}
@media (max-width:960px){.svc--big,.svc--sm{grid-column:span 6}}
@media (max-width:620px){.svc--big,.svc--sm{grid-column:1/-1;min-height:32rem}}

/* ============================================================
   WORK CAROUSEL (hero component)
   ============================================================ */
.work{overflow:hidden}
.work__filters{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:3.4rem}
.chip{padding:.9em 1.7em;border-radius:100px;border:1.5px solid var(--line);background:#fff;
  font-family:var(--f-display);font-weight:600;font-size:1.55rem;color:var(--text-soft);
  transition:.3s var(--ease)}
.chip:hover{border-color:var(--sea-600);color:var(--sea-800)}
.chip.active{background:var(--sea-800);border-color:var(--sea-800);color:#fff;
  box-shadow:0 10px 22px -10px rgba(10,73,163,.6)}

.carousel{position:relative}
.carousel__track{display:flex;gap:2.2rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-block:1rem 2rem;scroll-padding-inline:var(--gutter);
  -ms-overflow-style:none;scrollbar-width:none;scroll-behavior:smooth}
.carousel__track::-webkit-scrollbar{display:none}
.slide{flex:0 0 auto;width:min(46rem,82vw);scroll-snap-align:start;position:relative;
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--cloud-2);
  aspect-ratio:4/5;cursor:pointer}
.slide.is-wide{width:min(64rem,90vw);aspect-ratio:16/10}
.slide img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,33,70,.72));
  opacity:0;transition:opacity .4s}
.slide:hover img{transform:scale(1.06)}
.slide:hover::after{opacity:1}
.slide__cap{position:absolute;inset-inline:2.2rem;bottom:2.2rem;color:#fff;z-index:2;
  transform:translateY(10px);opacity:0;transition:.45s var(--ease)}
.slide:hover .slide__cap{transform:none;opacity:1}
.slide__cap b{font-family:var(--f-display);font-size:1.9rem;display:block}
.slide__cap span{font-size:1.4rem;color:#cfe0e2}
.slide__zoom{position:absolute;top:1.8rem;inset-inline-end:1.8rem;width:4.4rem;height:4.4rem;
  border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);
  display:grid;place-items:center;backdrop-filter:blur(6px);opacity:0;transition:.4s;z-index:2}
.slide:hover .slide__zoom{opacity:1}
.slide__zoom svg{width:2rem;height:2rem;color:#fff}
.slide__badge{position:absolute;top:1.8rem;inset-inline-start:1.8rem;z-index:2;
  padding:.5em 1em;border-radius:100px;background:rgba(6,33,70,.6);backdrop-filter:blur(6px);
  color:#fff;font-family:var(--f-display);font-weight:700;font-size:1.3rem}
.slide__play{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.slide__play span{width:7rem;height:7rem;border-radius:50%;background:rgba(255,255,255,.9);
  display:grid;place-items:center;box-shadow:var(--shadow);transition:transform .4s}
.slide:hover .slide__play span{transform:scale(1.1)}
.slide__play svg{width:2.6rem;height:2.6rem;color:var(--sea-800);margin-inline-start:.4rem}

.carousel__nav{display:flex;justify-content:space-between;align-items:center;margin-top:2.4rem;gap:2rem}
.carousel__arrows{display:flex;gap:1rem}
.carousel__btn{width:5.6rem;height:5.6rem;border-radius:50%;border:1.5px solid var(--line);
  background:#fff;display:grid;place-items:center;transition:.3s var(--ease);color:var(--sea-800)}
.carousel__btn:hover{background:var(--sea-800);color:#fff;border-color:var(--sea-800);transform:translateY(-2px)}
.carousel__btn svg{width:2.2rem;height:2.2rem}
.carousel__btn[disabled]{opacity:.35;pointer-events:none}
.carousel__progress{flex:1;height:3px;background:var(--line);border-radius:3px;position:relative;overflow:hidden;max-width:40rem}
.carousel__progress i{position:absolute;inset:0 auto 0 0;height:100%;background:var(--gold);border-radius:3px;width:20%;
  transition:transform .3s var(--ease),width .3s}
.work__hint{font-size:1.4rem;color:var(--mist)}

/* ============================================================
   YOUTUBE section — desktop grid / mobile carousel
   ============================================================ */
.yt .eyebrow svg{width:2rem;height:2rem;color:#ff0000}
.yt .eyebrow::before{display:none}
.yt-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:2.8rem;max-width:120rem;margin-inline:auto}
.yt-card{flex:1 1 34rem;max-width:38rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow);cursor:pointer;position:relative;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.yt-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2.5px;z-index:4;pointer-events:none;
  background:linear-gradient(135deg,var(--sea-700),var(--gold));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .45s}
.yt-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.yt-card:hover::before{opacity:1}
.yt-card__thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--sea-900)}
.yt-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.yt-card:hover .yt-card__thumb img{transform:scale(1.06)}
.yt-card__thumb::after{content:"";position:absolute;inset:0;background:rgba(6,33,70,.1);transition:.4s}
.yt-card:hover .yt-card__thumb::after{background:rgba(6,33,70,.26)}
.yt-card__play{position:absolute;inset:0;margin:auto;width:6.4rem;height:6.4rem;z-index:2;border-radius:50%;
  background:#ff0000;color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(255,0,0,.6);
  transition:transform .4s var(--ease)}
.yt-card__play svg{width:3rem;height:3rem;margin-inline-start:.3rem}
.yt-card:hover .yt-card__play{transform:scale(1.14)}
.yt-card__body{padding:1.8rem 2rem 2.2rem}
.yt-card__badge{display:inline-flex;align-items:center;gap:.5rem;color:#ff0000;font-family:var(--f-display);
  font-weight:700;font-size:1.35rem;margin-bottom:.8rem}
.yt-card__badge svg{width:1.9rem;height:1.9rem}
.yt-card__body h3{font-size:1.8rem;line-height:1.32;margin:0;color:var(--heading)}
@media (max-width:760px){
  .yt-grid{flex-wrap:nowrap;justify-content:flex-start;gap:1.6rem;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:1.4rem;scrollbar-width:none;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter)}
  .yt-grid::-webkit-scrollbar{display:none}
  .yt-card{flex:0 0 auto;width:82vw;max-width:none;scroll-snap-align:center}
}
.lightbox__stage iframe{width:min(92vw,152vh);aspect-ratio:16/9;max-height:86vh;border:0;
  border-radius:1.2rem;box-shadow:var(--shadow-lg);background:#000}

/* ============================================================
   STORY (family) — highlight the people
   ============================================================ */
.story{position:relative;overflow:hidden}
.story__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(3rem,5vw,7rem);align-items:center}
.story__body p{font-size:var(--step-0);color:#c8dbde}
.story__body .lead{font-size:var(--step-1);color:#fff;font-family:var(--f-display);font-weight:600;line-height:1.35}
.story__wow{display:inline-block;font-family:var(--f-display);font-weight:800;color:var(--gold);
  font-size:var(--step-2)}
.story__media{position:relative}
.story__media img{border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.story__stack{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.story__stack .tall{grid-row:span 2;aspect-ratio:3/4;object-fit:cover;height:100%}
.story__stack img{width:100%;aspect-ratio:1;object-fit:cover}

/* team cards — real branded portraits on their professional white background */
.team__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem}
.member{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.member:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.member__photo{aspect-ratio:1/1;background:#fff;overflow:hidden}
.member__photo img{width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform 1s var(--ease)}
.member:hover .member__photo img{transform:scale(1.05)}
.member__name{padding:2.2rem 2.6rem;border-top:3px solid var(--gold);position:relative}
.member__name .role{display:block;color:var(--gold-600);font-family:var(--f-display);
  font-weight:700;font-size:1.42rem;letter-spacing:.01em;margin-bottom:.4rem}
.member__name h3{margin:0;font-size:var(--step-1);color:var(--heading)}
@media (max-width:820px){.story__grid{grid-template-columns:1fr}
  .team__grid{grid-template-columns:1fr;max-width:42rem;margin-inline:auto}}

/* ============================================================
   WORK: VIDEO FEATURE + TWO-ROW MARQUEE
   ============================================================ */
.work__video{position:relative;max-width:96rem;margin:0 auto clamp(3.5rem,5vw,6rem);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);cursor:pointer;
  aspect-ratio:16/9;background:var(--sea-900)}
.work__video video{width:100%;height:100%;object-fit:cover;display:block}
.work__video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(6,33,70,.12),rgba(6,33,70,.05) 40%,rgba(6,33,70,.45));pointer-events:none;transition:opacity .4s}
.work__video:hover::after{opacity:.7}
.work__vtag{position:absolute;top:2rem;inset-inline-start:2rem;z-index:2;padding:.6em 1.2em;
  border-radius:100px;background:rgba(6,33,70,.55);backdrop-filter:blur(6px);color:#fff;
  font-family:var(--f-display);font-weight:700;font-size:1.4rem}
.work__play{position:absolute;inset:0;margin:auto;width:8.4rem;height:8.4rem;z-index:2;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--sea-800);display:grid;place-items:center;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.5);transition:transform .4s var(--ease)}
.work__play svg{width:3.4rem;height:3.4rem;margin-inline-start:.4rem}
.work__video:hover .work__play{transform:scale(1.12)}
.work__play::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.6);animation:pulse 2.4s ease-out infinite}

.marquee{display:flex;flex-direction:column;gap:2.2rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee__row{display:flex;gap:2.2rem;width:max-content;will-change:transform;
  animation:marqueeA 60s linear infinite}
.marquee__row--rev{animation:marqueeB 68s linear infinite}
.marquee:hover .marquee__row{animation-play-state:paused}
@keyframes marqueeA{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marqueeB{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.m-card{position:relative;flex:0 0 auto;width:clamp(30rem,34vw,42rem);aspect-ratio:16/10;
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;background:var(--cloud-2)}
.m-card img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.m-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,33,70,.72));
  opacity:0;transition:opacity .4s}
.m-card:hover img{transform:scale(1.07)}
.m-card:hover::after{opacity:1}
.m-card__badge{position:absolute;bottom:1.6rem;inset-inline-start:1.6rem;z-index:2;padding:.5em 1em;
  border-radius:100px;background:rgba(6,33,70,.62);backdrop-filter:blur(6px);color:#fff;
  font-family:var(--f-display);font-weight:700;font-size:1.32rem;opacity:0;transform:translateY(8px);
  transition:.4s var(--ease)}
.m-card:hover .m-card__badge{opacity:1;transform:none}
@media (max-width:600px){.m-card{width:74vw}.marquee{gap:1.4rem}.marquee__row{gap:1.4rem}}
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;scrollbar-width:none}
  .marquee__row{animation:none}
  .work__play::before{animation:none}
}

/* ============================================================
   VALUES
   ============================================================ */
.values__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
.value{padding:3.4rem 3rem;border-radius:var(--radius);background:#fff;border:1px solid var(--line);
  transition:.5s var(--ease);position:relative;overflow:hidden}
.value:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.value__ic{width:6.4rem;height:6.4rem;border-radius:1.6rem;display:grid;place-items:center;
  background:var(--sea-900);color:var(--gold);margin-bottom:2rem;transition:.5s var(--ease)}
.value:hover .value__ic{background:var(--gold);color:var(--sea-900);transform:rotate(-6deg)}
.value__ic svg{width:3.2rem;height:3.2rem}
.value h3{font-size:var(--step-1)}
.value p{color:var(--text-soft);font-size:1.62rem;margin:0}
@media (max-width:820px){.values__grid{grid-template-columns:1fr}}

/* ============================================================
   PROCESS
   ============================================================ */
.process__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem;counter-reset:step}
.step{position:relative;padding-top:5rem}
.step::before{counter-increment:step;content:"0" counter(step);position:absolute;top:-1rem;inset-inline-start:0;
  font-family:var(--f-display);font-weight:800;font-size:6rem;color:var(--cloud-2);line-height:1;z-index:0}
.bg-sea .step::before{color:rgba(255,255,255,.08)}
.step__in{position:relative;z-index:1}
.step__ic{width:5.2rem;height:5.2rem;border-radius:1.3rem;background:var(--gold);color:var(--sea-900);
  display:grid;place-items:center;margin-bottom:1.6rem}
.step__ic svg{width:2.6rem;height:2.6rem}
.step h3{font-size:var(--step-1)}
.bg-sea .step h3{color:#fff}
.step p{color:var(--text-soft);font-size:1.55rem;margin:0}
.bg-sea .step p{color:#a9c1c4}
@media (max-width:900px){.process__grid{grid-template-columns:repeat(2,1fr);gap:3.4rem 2.4rem}}
@media (max-width:520px){.process__grid{grid-template-columns:1fr}}

/* ============================================================
   CTA
   ============================================================ */
.cta{position:relative;overflow:hidden;color:#fff}
.cta__media{position:absolute;inset:0;z-index:-2}
.cta__media img{width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,rgba(6,33,70,.95),rgba(10,73,163,.78))}
.cta__inner{text-align:center;max-width:74rem;margin-inline:auto;padding-block:clamp(6rem,9vw,11rem)}
.cta h2{font-size:var(--step-3);color:#fff}
.cta p{font-size:var(--step-1);color:#dbe9eb;margin-bottom:3.4rem}
.cta__actions{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap}

/* ---------- contact band ---------- */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,5vw,6rem);align-items:center}
.contact__card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(3rem,4vw,4.6rem);box-shadow:var(--shadow)}
.contact__list{display:grid;gap:1.4rem;margin-top:2rem}
.contact__row{display:flex;align-items:center;gap:1.6rem;padding:1.6rem;border-radius:1.3rem;
  background:var(--cloud);transition:.3s}
.contact__row:hover{background:var(--cloud-2)}
.contact__row .ic{width:5rem;height:5rem;border-radius:1.1rem;background:var(--sea-900);color:var(--gold);
  display:grid;place-items:center;flex:none}
.contact__row .ic svg{width:2.4rem;height:2.4rem}
.contact__row .t small{display:block;color:var(--mist);font-size:1.4rem}
.contact__row .t b{font-family:var(--f-display);font-size:1.9rem;color:var(--heading)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:#9fb0b3;padding-block:clamp(5rem,7vw,7rem) 3rem}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:4rem;padding-bottom:4rem;
  border-bottom:1px solid rgba(255,255,255,.1)}
.footer__brand{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.6rem}
.footer__brand .brand__mark{width:5rem;height:5rem}
.footer__brand b{font-family:var(--f-display);font-weight:800;font-size:2.6rem;color:#fff}
.footer p{font-size:1.55rem;max-width:36rem}
.footer h4{color:#fff;font-size:1.9rem;margin-bottom:1.6rem}
.footer__links{display:grid;gap:1rem}
.footer__links a{font-size:1.55rem;transition:color .3s}
.footer__links a:hover{color:var(--gold)}
.socials{display:flex;gap:1.2rem}
.social{width:5rem;height:5rem;border-radius:1.3rem;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#fff;transition:transform .35s var(--ease),background .35s,color .35s}
.social svg{width:2.5rem;height:2.5rem}
.social:hover{transform:translateY(-4px)}
.social--ig:hover{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);color:#fff}
.social--fb:hover{background:#1877f2;color:#fff}
.social--yt:hover{background:#ff0000;color:#fff}
.social--tt:hover{background:#010101;color:#fff}
.contact__socials{display:flex;align-items:center;gap:1.4rem;margin-top:2rem}
.contact__socials .social{background:var(--cloud-2);color:var(--sea-800)}
.contact__socials span{color:var(--text-soft);font-size:1.5rem;font-family:var(--f-display);font-weight:600}
.footer__bottom{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  padding-top:3rem;font-size:1.4rem;color:#69797c}
.footer__bottom a:hover{color:var(--gold)}
@media (max-width:820px){.footer__top{grid-template-columns:1fr;gap:3rem}
  .contact__grid{grid-template-columns:1fr}}

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.wa-float{position:fixed;inset-inline-end:2.4rem;bottom:2.4rem;z-index:90;width:6.4rem;height:6.4rem;
  border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  transition:transform .35s var(--ease)}
.wa-float:hover{transform:scale(1.08) translateY(-2px)}
.wa-float svg{width:3.4rem;height:3.4rem;color:#fff}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;
  animation:pulse 2.4s ease-out infinite;z-index:-1}
@keyframes pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.9);opacity:0}}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(6,26,30,.94);backdrop-filter:blur(10px);
  display:grid;place-items:center;opacity:0;visibility:hidden;transition:.4s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox__stage{max-width:92vw;max-height:86vh;position:relative}
.lightbox__stage img,.lightbox__stage video{max-width:92vw;max-height:86vh;border-radius:1.2rem;
  box-shadow:var(--shadow-lg);object-fit:contain}
.lightbox__cap{text-align:center;color:#cfe0e2;margin-top:1.6rem;font-size:1.6rem}
.lightbox__close,.lightbox__prev,.lightbox__next{position:absolute;width:5.6rem;height:5.6rem;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;
  color:#fff;transition:.3s;z-index:2}
.lightbox__close{top:-7rem;inset-inline-end:0}
.lightbox__close:hover,.lightbox__prev:hover,.lightbox__next:hover{background:var(--gold);color:var(--sea-900)}
.lightbox__prev{inset-inline-start:-7.5rem;top:50%;transform:translateY(-50%)}
.lightbox__next{inset-inline-end:-7.5rem;top:50%;transform:translateY(-50%)}
.lightbox__close svg,.lightbox__prev svg,.lightbox__next svg{width:2.4rem;height:2.4rem}
@media (max-width:820px){.lightbox__prev{inset-inline-start:1rem}.lightbox__next{inset-inline-end:1rem}
  .lightbox__close{top:-6rem}}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero__media img{animation:none;transform:scale(1)}
  .wa-float::before{animation:none}
}

/* ============================================================
   MOBILE NAV + RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .nav__links,.nav__phone{display:none}
  .burger{display:block}
  .nav{position:fixed;inset:0;background:linear-gradient(160deg,var(--sea-900),var(--sea-800));
    flex-direction:column;justify-content:center;gap:0;transform:translateX(-100%);
    transition:transform .5s var(--ease);z-index:105}
  html[dir=rtl] .nav{transform:translateX(100%)}
  body.nav-open .nav{transform:none}
  body.nav-open{overflow:hidden}
  .nav__links{display:flex;flex-direction:column;text-align:center;gap:0}
  .nav__links a{color:#fff;font-size:3rem;padding:1.4rem}
  .nav__cta{flex-direction:column;margin-top:2rem}
  .nav .nav__phone{display:inline-flex;color:#fff;font-size:2.2rem}
}
@media (max-width:600px){
  :root{--radius:1.3rem;--radius-lg:2rem}
  .hero{min-height:94svh;padding-top:11rem;align-items:center}
  .hero h1{font-size:clamp(3.6rem,13vw,5.4rem)}
  .hero__sub{font-size:1.9rem}
  .btn{padding:1.25em 1.9em}
  .hero__actions{width:100%}.hero__actions .btn{flex:1;min-width:14rem}
}

/* generic media object helper */
.rounded{border-radius:var(--radius)}
.shadow{box-shadow:var(--shadow)}