/* best100, index of tradespeople, Hebrew RTL */
:root {
  --ink:#1C1B18;
  --ink-soft:#2E2C28;
  --amber:#FCA830;              /* fills, borders, icons and buttons only, never text on light */
  --amber-bright:#FFC163;      /* amber text on charcoal */
  --amber-text:#9C6921;        /* amber text on light, 4.51:1 */
  --sand:#FDF3E2;
  --bg:#FAFAF7;
  --surface:#FFFFFF;
  --body:#1C1B18;
  --muted:#6B6862;
  --line:#E7E3DA;
  --radius:14px;
  --radius-btn:10px;
  --shadow:0 4px 20px rgba(28,27,24,.05);
  --shadow-lg:0 6px 24px rgba(28,27,24,.09);
  --wrap:1280px;
  --measure:min(100%, 45rem);
  --font:'Rubik', 'Segoe UI', Arial, sans-serif;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--font); font-size:18px; line-height:1.75; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--amber-text); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:var(--ink); }
h1,h2,h3,h4 { line-height:1.3; margin:0 0 .5em; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
h1 { font-size:clamp(1.9rem,4.4vw,3rem); }
h2 { font-size:clamp(1.4rem,2.8vw,2rem); }
h3 { font-size:1.25rem; font-weight:700; letter-spacing:0; }
p { margin:0 0 1.1em; }
hr { border:0; border-top:1px solid var(--line); margin:2.5rem 0; }
:focus-visible { outline:3px solid var(--amber); outline-offset:2px; border-radius:4px; }

.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:16px; }
@media (min-width:768px){ .wrap { padding-inline:40px; } }
.skip {
  position:absolute; inset-inline-start:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 8px 0;
}
.skip:focus { inset-inline-start:0; }

/* numbers, latin and anything else that must not flip inside a Hebrew run */
.ltr { direction:ltr; unicode-bidi:isolate; display:inline-block; }

/* ------------------------------------------------------------ header */
.hdr {
  position:sticky; top:0; z-index:100; background:rgba(252,249,243,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.hdr .in { display:flex; align-items:center; gap:16px; min-height:72px; }
.brand { display:flex; align-items:center; gap:10px; min-width:0; flex-shrink:0; }
.brand img { height:38px; width:auto; }
.brand b { font-size:1.4rem; font-weight:800; color:var(--ink); letter-spacing:-.03em; }
.nav { display:none; gap:26px; margin-inline-start:auto; }
@media (min-width:900px){ .nav { display:flex; } }
.nav a {
  color:var(--body); text-decoration:none; font-size:.95rem; font-weight:500;
  padding:6px 0; border-bottom:2px solid transparent;
}
.nav a:hover { color:var(--amber-text); }
.nav a[aria-current="page"] { color:var(--amber-text); border-bottom-color:var(--amber); font-weight:600; }
.burger {
  margin-inline-start:auto; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid var(--line); border-radius:var(--radius-btn);
  background:var(--surface); cursor:pointer; flex-shrink:0;
}
@media (min-width:900px){ .burger { display:none; } }
.burger span { display:block; width:20px; height:2px; background:var(--ink); position:relative; }
.burger span::before,.burger span::after {
  content:""; position:absolute; inset-inline:0; height:2px; background:var(--ink);
}
.burger span::before { top:-6px; } .burger span::after { top:6px; }
.mnav { display:none; border-top:1px solid var(--line); background:var(--surface); }
.mnav.open { display:block; }
.mnav a {
  display:block; padding:14px 16px; color:var(--body); text-decoration:none;
  border-bottom:1px solid var(--line); font-weight:500;
}

/* ------------------------------------------------------------ ink bands */
.ink { background:var(--ink); color:#fff; }
.ink h1,.ink h2,.ink h3 { color:#fff; }
.ink p { color:rgba(255,255,255,.76); }
.ink a { color:var(--amber-bright); }
.hero {
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink);
  color:#fff; text-align:center; padding:96px 0 148px;
}
/* the photograph, then a scrim heavy enough to keep the headline at AA */
.hero picture,.hero img.bg {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-2;
}
.hero::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(circle at 50% 42%, rgba(252,168,48,.22) 0%, transparent 62%),
    linear-gradient(180deg, rgba(28,27,24,.80) 0%, rgba(28,27,24,.72) 45%, rgba(28,27,24,.92) 100%);
}
.hero .wrap { position:relative; z-index:1; }
.hero h1 { color:#fff; margin-bottom:.4em; text-shadow:0 2px 18px rgba(0,0,0,.5); }
.hero .accent { color:var(--amber-bright); display:block; }
.hero p { color:rgba(255,255,255,.72); max-width:44rem; margin-inline:auto; }
.pill-label {
  display:inline-block; border:1px solid var(--amber); color:var(--amber-bright);
  border-radius:999px; padding:6px 18px; font-size:.85rem; font-weight:600; margin-bottom:22px;
}
.phead { padding:56px 0 40px; }
.phead h1 { margin:.15em 0 .35em; }
.phead p { max-width:var(--measure); }
.phead.pull { padding-bottom:96px; }

/* ------------------------------------------------------------ search card */
.searchcard {
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:16px; display:grid; gap:12px; margin-top:-72px; position:relative; z-index:5;
}
@media (min-width:820px){ .searchcard { grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto; align-items:center; } }
.searchcard select,.searchcard input {
  width:100%; font:inherit; font-size:1rem; color:var(--body); background:var(--surface);
  border:1px solid var(--line); border-radius:8px; padding:14px 16px; min-width:0;
}
.searchcard select:focus,.searchcard input:focus { border-color:var(--amber); outline:none; box-shadow:0 0 0 3px rgba(252,168,48,.25); }
.stats { display:flex; flex-wrap:wrap; justify-content:center; gap:36px; margin-top:34px; }
.stats div { text-align:center; }
.stats b { display:block; font-size:2.4rem; font-weight:800; color:var(--amber-bright); line-height:1.1; }
.stats span { font-size:.9rem; color:rgba(255,255,255,.7); }

/* ------------------------------------------------------------ buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--amber); color:var(--ink); border:1px solid var(--amber);
  border-radius:var(--radius-btn); padding:12px 22px; font-weight:600; font-size:.95rem;
  text-decoration:none; cursor:pointer; transition:background .15s,color .15s;
}
.btn:hover { background:var(--amber-bright); border-color:var(--amber-bright); color:var(--ink); }
.btn-ghost { background:transparent; color:var(--amber-text); border-color:var(--amber); }
.btn-ghost:hover { background:var(--sand); color:var(--ink); }
.ink .btn-ghost { color:var(--amber-bright); }
.ink .btn-ghost:hover { background:rgba(252,168,48,.16); color:#fff; }
.btn-sm { padding:9px 16px; font-size:.85rem; }

/* ------------------------------------------------------------ chips */
.chip {
  display:inline-block; border:1px solid var(--amber); color:var(--amber-text);
  background:transparent; border-radius:999px; padding:5px 14px;
  font-size:.82rem; font-weight:600; text-decoration:none; line-height:1.5;
}
a.chip:hover { background:var(--sand); color:var(--ink); }
.chip-solid { background:var(--amber); border-color:var(--amber); color:var(--ink); }
.chip-soft { background:var(--sand); border-color:transparent; color:var(--amber-text); }
.chiprow { display:flex; flex-wrap:wrap; gap:8px; }
.chipscroll {
  display:flex; gap:10px; overflow-x:auto; padding:4px 0 10px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.chipscroll::-webkit-scrollbar { display:none; }
.chipscroll .chip { white-space:nowrap; flex:0 0 auto; }

/* ------------------------------------------------------------ grids */
.grid { display:grid; gap:24px; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); }
.grid-2 { display:grid; gap:24px; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); }
.grid-3 { display:grid; gap:24px; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); }
.section { padding:64px 0; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.section-head h2 { margin:0; }
.more { font-weight:600; text-decoration:none; white-space:nowrap; }

/* ------------------------------------------------------------ business card */
.bcard {
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  border-top:3px solid var(--amber); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .15s, box-shadow .15s;
}
.bcard:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-top-color:var(--amber-bright); }
.bcard .logo {
  height:150px; background:var(--sand); display:flex; align-items:center;
  justify-content:center; padding:18px;
}
.bcard .logo img { max-height:114px; width:auto; object-fit:contain; }
.bcard .logo .ph { font-size:1.5rem; font-weight:800; color:var(--amber-text); text-align:center; }
.bcard .body { padding:22px; display:flex; flex-direction:column; flex:1; }
.bcard h3 { margin:0 0 14px; font-size:1.2rem; }
.bcard h3 a { color:var(--ink); text-decoration:none; }
.bcard h3 a:hover { color:var(--amber-text); }
.bcard .foot {
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.tel { display:inline-flex; align-items:center; gap:7px; color:var(--body); text-decoration:none; font-weight:600; font-size:.95rem; }
.tel:hover { color:var(--amber-text); }
.tel svg { width:18px; height:18px; fill:var(--amber-text); flex:none; }
.bcard .acts { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.bcard .acts a.quiet { font-size:.88rem; font-weight:600; white-space:nowrap; }

/* ------------------------------------------------------------ category card */
.ccard {
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:24px; text-decoration:none; display:block; transition:transform .15s, box-shadow .15s;
}
.ccard:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.ccard .ico {
  width:48px; height:48px; border-radius:12px; background:var(--sand);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.ccard .ico svg { width:24px; height:24px; fill:var(--amber-text); }
.ccard h3 { margin:0 0 6px; font-size:1.15rem; color:var(--ink); }
.ccard span { color:var(--muted); font-size:.88rem; }
.ccard .go { color:var(--amber-text); font-weight:600; font-size:.9rem; margin-top:14px; display:block; }

/* ------------------------------------------------------------ article card */
.acard {
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .15s, box-shadow .15s;
}
.acard:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.acard .thumb { aspect-ratio:16/10; background:var(--sand); overflow:hidden; }
.acard .thumb img { width:100%; height:100%; object-fit:cover; }
.acard .body { padding:20px; display:flex; flex-direction:column; flex:1; gap:10px; }
.acard h3 { margin:0; font-size:1.1rem; }
.acard h3 a { color:var(--ink); text-decoration:none; }
.acard h3 a:hover { color:var(--amber-text); }
.acard p { margin:0; color:var(--muted); font-size:.94rem; line-height:1.6; }
.acard time { color:var(--muted); font-size:.83rem; margin-top:auto; padding-top:8px; }

.feat { display:grid; gap:0; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
@media (min-width:900px){ .feat { grid-template-columns:1fr 1fr; } }
.feat .thumb { aspect-ratio:16/10; }
.feat .thumb img { width:100%; height:100%; object-fit:cover; }
.feat .body { padding:32px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.feat h2 { margin:0; }
@media (min-width:900px){ .feat .thumb { aspect-ratio:auto; height:100%; } }

/* ------------------------------------------------------------ two column */
.cols { display:grid; gap:32px; align-items:start; }
@media (min-width:1000px){ .cols { grid-template-columns:minmax(0,1fr) 300px; } }
.side { display:grid; gap:20px; }
@media (min-width:1000px){ .side { position:sticky; top:96px; } }
.panel { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; }
.panel h2 { font-size:1.15rem; margin:0 0 16px; }
.panel.dark { background:var(--ink-soft); }
.panel.dark h2 { color:#fff; }
.panel.dark a { color:var(--amber-bright); }
.catlist { display:grid; gap:8px; }
.catlist a {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid var(--amber); border-radius:999px; padding:8px 16px;
  color:var(--amber-text); text-decoration:none; font-size:.9rem; font-weight:600;
}
.catlist a:hover { background:var(--sand); color:var(--ink); }
.catlist a[aria-current="page"] { background:var(--amber); border-color:var(--amber); color:var(--ink); }
.catlist .n { font-size:.8rem; opacity:.85; }
.guides { display:grid; gap:14px; }
.guides a { color:var(--amber-bright); text-decoration:none; font-weight:600; font-size:.95rem; line-height:1.45; display:block; }
.guides a:hover { text-decoration:underline; }
.guides li { list-style:none; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.12); }
.guides li:last-child { border-bottom:0; padding-bottom:0; }
.guides ul { margin:0; padding:0; }

/* ------------------------------------------------------------ breadcrumb */
.crumb { font-size:.85rem; color:var(--muted); margin-bottom:10px; }
.crumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.crumb a { color:inherit; text-decoration:none; }
.crumb a:hover { color:var(--amber-text); text-decoration:underline; }
.ink .crumb,.ink .crumb a { color:rgba(255,255,255,.66); }
.ink .crumb a:hover { color:var(--amber-bright); }
.crumb .sep { opacity:.5; }

/* ------------------------------------------------------------ article body */
.article { padding:44px 0 64px; }
.prose { max-width:var(--measure); }
.prose h2 { margin:1.8em 0 .5em; font-size:1.55rem; }
.prose h3 { margin:1.5em 0 .4em; font-size:1.25rem; }
.prose ul,.prose ol { padding-inline-start:1.4em; margin:0 0 1.2em; }
.prose li { margin-bottom:.5em; }
.prose a { color:var(--amber-text); text-decoration:underline; text-underline-offset:4px; font-weight:600; }
.prose a:hover { color:var(--ink); }
.prose img { border-radius:var(--radius); margin:1.6em 0; }
.prose blockquote {
  margin:1.8em 0; padding:4px 22px; border-inline-start:4px solid var(--amber);
  color:var(--ink); font-size:1.1rem; font-style:italic;
}
.prose table { width:100%; border-collapse:collapse; margin:1.6em 0; }
.prose th,.prose td { border:1px solid var(--line); padding:10px 12px; text-align:start; }
.hero-img { border-radius:var(--radius); overflow:hidden; margin-bottom:28px; box-shadow:var(--shadow); }
.meta { display:flex; flex-wrap:wrap; gap:18px; color:var(--muted); font-size:.9rem; margin-bottom:22px; }
.scroller { overflow-x:auto; }

/* ------------------------------------------------------------ supplier hero */
.bhero { display:grid; gap:28px; padding:40px 0 52px; align-items:center; }
@media (min-width:900px){ .bhero { grid-template-columns:minmax(0,1fr) minmax(0,420px); } }
.bhero .logo {
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  min-height:260px; display:flex; align-items:center; justify-content:center; padding:36px;
}
.bhero .logo img { max-height:190px; width:auto; object-fit:contain; }
.bhero .logo .ph { font-size:2rem; font-weight:800; color:var(--amber-text); text-align:center; }
.bhero .acts { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }

/* ------------------------------------------------------------ footer */
.ftr { background:var(--ink); color:rgba(255,255,255,.72); border-top:3px solid var(--amber); margin-top:64px; }
.ftr .in { display:grid; gap:32px; padding:52px 0 32px; }
@media (min-width:760px){ .ftr .in { grid-template-columns:1.4fr 1fr 1fr 1fr; } }
.ftr h2 { color:#fff; font-size:1rem; font-weight:700; margin:0 0 16px; letter-spacing:0; }
.ftr b.logo { color:var(--amber-bright); font-size:1.4rem; font-weight:800; display:block; margin-bottom:12px; letter-spacing:-.03em; }
.ftr ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ftr a { color:rgba(255,255,255,.72); text-decoration:none; font-size:.94rem; }
.ftr a:hover { color:var(--amber-bright); text-decoration:underline; }
.ftr p { font-size:.94rem; line-height:1.7; margin:0; }
.ftr .bar {
  border-top:1px solid rgba(255,255,255,.13); padding:18px 0 26px;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:.85rem; color:rgba(255,255,255,.55);
}

/* ------------------------------------------------------------ misc */
.count { color:var(--muted); font-size:.95rem; margin-bottom:20px; }
.empty { background:var(--surface); border-radius:var(--radius); padding:36px; text-align:center; color:var(--muted); box-shadow:var(--shadow); }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}