@charset "utf-8";
/* =========================================================================
   משרד עורכי דין דיין זקר — homepage · style.css
   fonts · tokens · reset · utilities (Alex) · shared classes (DRY).
   Area CSS lives in css/<area>.css, scoped to the area class.
   Figma: wNLbPbawYvDjKJxbcPK5jx · homepage 74:5751 (desktop 1920 only)

   Breakpoints (one set, used by every area file):
     > 1480   desktop — Figma 1920 (content 1700 = x 110→1810)
     ≤ 1480   compact desktop — same layout, smaller type
     ≤ 1100   tablet — 2-up grids, burger menu (no Figma frame — derived)
     ≤  640   mobile — 1-up, 375 checked (no Figma frame — derived)
   ========================================================================= */

/* ---------- fonts --------------------------------------------------------
   Display: "Tel Aviv Modernist" (free municipal font, self-hosted).
   Body: Assistant 400/600 (Google Fonts). Heebo 700 only for the floating
   phone button, as in Figma.                                               */
@font-face{font-family:"Tel Aviv";src:url("../fonts/telaviv-modernist-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Tel Aviv";src:url("../fonts/telaviv-modernist-bold.woff2") format("woff2");font-weight:700;font-display:swap}

/* ---------- tokens ------------------------------------------------------ */
:root{
  --navy:#0e0d2c;            /* brand: header, hero ground, practice cards, overlays */
  --navy-90:rgba(14,13,44,.9);
  --gold:#dab778;            /* lines, badges, buttons */
  --gold-dark:#b09143;       /* cert frames, phone button */
  --ink:#131313;             /* "super dark gry" */
  --ink-2:#1d1d1b;           /* lawyer names */
  --black:#000;
  --white:#fff;
  --panel:#f5f5f5;           /* why-us + review cards */
  --line:#d0d0d0;            /* cert inner frame */
  --muted:rgba(255,255,255,.6);
  --placeholder:#cecece;
  --error:#ff6b6b;

  --font:"Assistant","Heebo",system-ui,-apple-system,sans-serif;
  --font-display:"Tel Aviv","Assistant",sans-serif;

  --container:1748px;        /* 1700 content (Figma x 110→1810) + 2×24 gutter */
  --gutter:24px;
  --header-h:160px;          /* fixed header (logo row + nav row) */
  --sec-gap:130px;           /* vertical rhythm between white sections */
}
@media (max-width:1480px){:root{--sec-gap:100px;--header-h:150px}}
@media (max-width:1100px){:root{--sec-gap:80px;--header-h:76px}}
@media (max-width:640px){:root{--gutter:16px;--sec-gap:60px;--header-h:64px}}

/* ---------- reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
[id]{scroll-margin-top:calc(var(--header-h) + 10px)}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-weight:400;direction:rtl;overflow-x:hidden}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,menu{margin:0;padding:0}
ul,ol,menu{list-style:none}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
section{position:relative}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip-link{position:fixed;top:-60px;right:16px;z-index:200;background:var(--gold);color:var(--navy);padding:10px 16px;font-weight:600}
.skip-link:focus{top:10px}

/* ---------- utilities (Alex) -------------------------------------------- */
.ts-01{transition:all .1s}
.ts-02{transition:all .2s}
.ts-03{transition:all .3s}
.flex-align-center{display:flex;align-items:center}
.absolute-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.container{width:100%;max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}

/* image pattern — never object-fit/aspect-ratio on the <img> itself */
.image{position:relative;overflow:hidden}
.object-fit-cover{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover}

/* ---------- shared type ------------------------------------------------- */
/* section title — Tel Aviv 62 (Figma "תחומי הייצוג", "אודות המשרד", "צרו קשר") */
.title{font-family:var(--font-display);font-weight:400;font-size:62px;line-height:1.21;color:var(--black)}
/* smaller centred title — Tel Aviv 40/50 ("למה דווקא איתנו?", הסמכות) */
.title--sm{font-size:40px;line-height:50px}
/* body lead — Assistant 23/35 */
.lead{font-size:23px;line-height:35px}
.title--light,.lead--light{color:var(--white)}
@media (max-width:1480px){.title{font-size:52px}.title--sm{font-size:36px;line-height:46px}.lead{font-size:21px;line-height:32px}}
@media (max-width:1100px){.title{font-size:44px}.title--sm{font-size:32px;line-height:42px}.lead{font-size:19px;line-height:29px}}
@media (max-width:640px){.title{font-size:34px}.title--sm{font-size:26px;line-height:34px}.lead{font-size:17px;line-height:26px}}

/* section header: centred title (+ optional sub) — practice / reviews */
.sec-head{text-align:center}
/* full-width hairline under a centred title (why-us, certs) */
.rule-line{height:1px;background:var(--black);border:0;margin:0}

/* ---------- buttons ----------------------------------------------------- */
/* outline button — 2px gold border, white Tel Aviv 20, ↖ arrow (header CTA, lawyer link, form submit) */
.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:2px solid var(--gold);padding:0 24px;height:46px;font-family:var(--font-display);font-size:20px;color:var(--white);white-space:nowrap;background:transparent}
.btn-line svg{width:22px;height:22px;flex:0 0 auto;color:var(--white)}
.btn-line:hover{background:var(--gold);color:var(--navy)}
.btn-line:hover svg{color:var(--navy)}

/* round number badge on practice cards — 0.93px gold, Tel Aviv 19 */
.num{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:37px;padding:0 20px;border:1px solid var(--gold);border-radius:19px;font-family:var(--font-display);font-size:19px;line-height:1;color:var(--white)}

/* slider arrows — Owl's own nav, re-skinned (52px chevrons outside the track) */
.slider-nav .owl-nav{position:absolute;inset:50% calc(-1 * 69px) auto;display:flex;justify-content:space-between;transform:translateY(-50%);pointer-events:none}
.slider-nav .owl-nav button.owl-prev,.slider-nav .owl-nav button.owl-next{width:52px;height:52px;display:flex;align-items:center;justify-content:center;pointer-events:auto;color:var(--black);transition:all .2s}
.slider-nav .owl-nav button:hover{color:var(--gold-dark)}
.slider-nav .owl-nav svg{width:52px;height:52px}
.slider-nav .owl-nav .owl-next svg{transform:scaleX(-1)}   /* RTL: next sits on the left → points left */
.slider-nav .owl-nav.disabled{display:flex}                /* few items — keep arrows (Alex) */
.slider-nav .owl-dots{display:none}
@media (max-width:1880px){.slider-nav .owl-nav{inset-inline:-8px}.slider-nav .owl-nav button.owl-prev,.slider-nav .owl-nav button.owl-next{width:40px;height:40px;background:rgba(255,255,255,.9);border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.12)}.slider-nav .owl-nav svg{width:34px;height:34px}}
@media (max-width:640px){
  .slider-nav .owl-nav{display:none!important}
  .slider-nav .owl-dots{display:flex;justify-content:center;gap:8px;margin-top:22px}
  .slider-nav .owl-dot span{display:block;width:9px;height:9px;border-radius:50%;background:#c9c9c9}
  .slider-nav .owl-dot.active span{background:var(--navy)}
}

/* animated Lordicon GIF — always playing (loop), not hover-only */
.anim-icon{width:95px;height:95px}