/* ============================================================
   SHELLY URBAN — shared styles for content sub-pages
   (about / urban renewal / development / contracting)
   Brand language matches index.html & mishtaken.html
   ============================================================ */
:root{
  --bg:#f1efea; --bg2:#ffffff;
  --ink:#17151a; --ink-dim:#6b675f; --ink-faint:#a39e95;
  --green:#5f9c36; --green-deep:#447327; --green-bright:#84bf52;
  --char:#2c2a30; --led:#f3d6a0; --gold-ink:#6b4e16;
  --hair:rgba(23,21,26,0.12); --hair-soft:rgba(23,21,26,0.07);
  --serif:"Karantina","Frank Ruhl Libre",serif;
  --sans:"Assistant",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden;-webkit-tap-highlight-color:transparent;}
::selection{background:rgba(95,156,54,.2);}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(18px,5vw,64px);}
section{padding-block:clamp(52px,8vw,104px);scroll-margin-top:78px;}
.eyebrow{font-size:13px;letter-spacing:.18em;font-weight:600;color:var(--green-deep);}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4vw,46px);line-height:1.08;margin-top:14px;}
h2 em{font-style:normal;color:var(--green-deep);}
.sec-lead{color:var(--ink-dim);font-size:17px;margin-top:18px;max-width:64ch;line-height:1.75;}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:100px;font-weight:600;}

/* nav */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(18px,5vw,64px);background:rgba(241,239,234,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair-soft);}
.nav .brand{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:.12em;}
.nav .brand span{color:var(--green-deep);font-family:var(--sans);font-size:10px;letter-spacing:.3em;margin-inline-start:6px;}
.nav .nlinks{display:flex;align-items:center;gap:22px;font-size:14px;}
.nav .nlinks a.back{color:var(--ink-dim);}
.nav .nlinks a:hover{color:var(--green-deep);}
.nav .ncta{background:var(--green-deep);color:#fff;padding:10px 20px;border-radius:100px;font-size:13.5px;font-weight:600;transition:background .3s;}
.nav .ncta:hover{background:#2f5417;}
@media(max-width:680px){.nav .nlinks a.back{display:none;}}

/* hero */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--char);}
.hero .bgimg{position:absolute;inset:0;}
.hero .bgimg img{width:100%;height:100%;object-fit:cover;}
.hero .bgimg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(290deg,rgba(20,18,24,.58) 0%,rgba(20,18,24,.84) 60%,rgba(20,18,24,.94) 100%);}
.hero.solid{background:linear-gradient(150deg,#23212a,#2c2a30 60%,#1c1a20);}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(72px,12vw,150px);}
.hero .tag{background:var(--led);color:var(--gold-ink);padding:8px 16px;font-size:12.5px;letter-spacing:.06em;}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,6vw,64px);line-height:1.04;margin-top:22px;}
.hero h1 em{font-style:normal;color:var(--led);}
.hero .hsub{color:rgba(255,255,255,.82);font-size:clamp(15px,1.6vw,18px);margin-top:20px;max-width:52ch;line-height:1.7;}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;align-items:center;}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:100px;font-weight:600;font-size:14.5px;padding:14px 26px;transition:.3s;border:1px solid transparent;}
.btn-primary{background:var(--green-deep);color:#fff;}
.btn-primary:hover{background:#2f5417;}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.1);}
.btn-out{border-color:var(--ink);color:var(--ink);}
.btn-out:hover{background:var(--ink);color:#fff;}

/* prose intro */
.prose p{font-size:17px;color:#3a372f;line-height:1.85;margin-top:18px;max-width:74ch;}
.prose p:first-child{margin-top:0;}

/* two-column */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start;}
@media(max-width:820px){.cols{grid-template-columns:1fr;}}

/* checks list */
.checks{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:14px;}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:#3a372f;}
.checks li::before{content:"✓";flex:none;width:24px;height:24px;border-radius:50%;background:rgba(95,156,54,.14);color:var(--green-deep);display:grid;place-items:center;font-size:13px;font-weight:700;margin-top:1px;}

/* steps timeline */
.steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:0;margin-top:22px;}
.steps li{position:relative;padding:0 56px 28px 0;counter-increment:s;}
.steps li:last-child{padding-bottom:0;}
.steps li::before{content:counter(s);position:absolute;inset-inline-start:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--green-deep);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;}
.steps li::after{content:"";position:absolute;inset-inline-start:17px;top:36px;bottom:0;width:2px;background:rgba(95,156,54,.28);}
.steps li:last-child::after{display:none;}
.steps li h4{font-size:18px;font-weight:600;}
.steps li p{font-size:14.5px;color:var(--ink-dim);margin-top:4px;max-width:52ch;}

/* feature / info cards */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:36px;}
.icard{background:var(--bg2);border:1px solid var(--hair-soft);border-radius:16px;padding:28px;}
.icard .ico{width:44px;height:44px;border-radius:11px;background:rgba(95,156,54,.12);display:grid;place-items:center;color:var(--green-deep);font-size:21px;}
.icard h4{font-size:19px;font-weight:600;margin-top:16px;}
.icard p{font-size:14.5px;color:var(--ink-dim);margin-top:8px;line-height:1.7;}

/* stat band */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:36px;}
.stats .st{background:var(--bg2);border:1px solid var(--hair-soft);border-radius:14px;padding:26px;text-align:center;}
.stats .st b{font-family:var(--serif);font-weight:500;font-size:38px;color:var(--green-deep);display:block;line-height:1;}
.stats .st span{display:block;color:var(--ink-dim);font-size:13.5px;margin-top:10px;}

/* domains cross-link */
.domains{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:32px;}
.domains a{display:block;background:var(--bg2);border:1px solid var(--hair-soft);border-radius:14px;padding:22px 24px;transition:transform .4s,box-shadow .4s;}
.domains a:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(23,21,26,.3);}
.domains a h4{font-size:17px;font-weight:600;display:flex;justify-content:space-between;align-items:center;}
.domains a h4 i{font-style:normal;color:var(--green-deep);transition:transform .35s;}
.domains a:hover h4 i{transform:translateX(-6px);}
.domains a p{font-size:13px;color:var(--ink-dim);margin-top:6px;}
.domains a[aria-current]{outline:2px solid rgba(95,156,54,.35);}

/* CTA band */
.cta{background:var(--ink);color:#fff;border-radius:22px;padding:clamp(34px,5vw,64px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px;}
.cta h3{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.2vw,40px);line-height:1.08;max-width:18ch;}
.cta .cinfo{color:rgba(255,255,255,.72);font-size:15px;margin-top:12px;}
.cta .cinfo a{color:var(--led);}

/* footer */
.foot{background:var(--char);color:rgba(255,255,255,.6);padding:48px clamp(18px,5vw,64px) 36px;}
.foot .ftop{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:26px;}
.foot .fbrand{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:.12em;color:#fff;}
.foot .fbrand .logo-sg{color:#fff;margin-inline-start:0;}
.foot .fcol{display:flex;flex-direction:column;gap:8px;font-size:14px;}
.foot .fcol h5{font-size:12px;letter-spacing:.12em;color:var(--ink-faint);margin-bottom:4px;font-weight:600;}
.foot a:hover{color:#fff;}
.foot .fbot{padding-top:22px;font-size:12px;color:rgba(255,255,255,.6);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform;}
@media(max-width:560px){ .reveal{transform:translateY(15px);transition-duration:.7s;} }
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ---- social buttons (footer) ---- */
.fsocial{display:flex;gap:10px;margin-top:16px;}
.fsocial a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;transition:.25s;}
.fsocial a:hover{background:var(--green);border-color:var(--green);transform:translateY(-2px);}
.fsocial svg{width:18px;height:18px;fill:currentColor;}

/* ---- team grid ---- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px;margin-top:40px;}
.member{background:var(--bg2);border:1px solid var(--hair-soft);border-radius:18px;padding:30px 24px;text-align:center;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;}
.member:hover{transform:translateY(-5px);box-shadow:0 26px 50px -28px rgba(23,21,26,.32);}
.member .avatar{width:84px;height:84px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  font-family:var(--serif);font-weight:600;font-size:30px;color:#fff;background:linear-gradient(140deg,var(--green),var(--green-deep));overflow:hidden;}
.member .avatar img{width:100%;height:100%;object-fit:cover;}
.member h3{font-family:var(--serif);font-weight:500;font-size:21px;}
.member .role{color:var(--green-deep);font-size:13.5px;font-weight:600;margin-top:4px;}
.member .bio{color:var(--ink-dim);font-size:13.5px;line-height:1.7;margin-top:12px;}
.member .ph{font-size:.92em;}

/* Karantina headline tracking — הפונט דחוס, הריווח נותן את היוקרה */
h2,.hero h1,.cta h3,.member h3{letter-spacing:.05em;}
.stats .st b{letter-spacing:.04em;}
.vcard h4,.g5-vis b{letter-spacing:.05em;}
.ladder li i{letter-spacing:.03em;}

/* G5 seal chip — footer quality stamp */
.g5-chip{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:7px 16px 7px 9px;border-radius:100px;
  background:rgba(243,214,160,.07);border:1px solid rgba(243,214,160,.38);color:#fff;font-size:12.5px;font-weight:500;}
.g5-chip .g{font-family:var(--serif);color:var(--led);font-size:15px;letter-spacing:.02em;background:rgba(243,214,160,.1);
  border:1px solid rgba(243,214,160,.45);border-radius:100px;min-width:30px;height:30px;display:grid;place-items:center;padding:0 4px;}

/* SHELLY GROUP logo — currentColor via mask */
.logo-sg{display:inline-block;background:currentColor;
  -webkit-mask:url(logo-shelly-group.svg) no-repeat center / contain;
  mask:url(logo-shelly-group.svg) no-repeat center / contain;}
.nav .brand .logo-sg{width:104px;height:29px;vertical-align:middle;}
.foot .fbrand .logo-sg{width:126px;height:35px;}