/* חיו פרויקטים, showcase demo (task 4555). Concept "תיק עבודה": dark site office, safety yellow, a floor plan that rises,
   stages as floors, a handover file. Fonts: Secular One (headings), Alef (text), Cousine (technical labels). */
:root{
 --ink:#141517;--ink2:#1c1e22;--ink3:#24272c;--line:#33363d;--text:#efece5;--muted:#a9aaa6;
 --yel:#f5b800;--yel2:#ffd955;--paper:#f3efe6;--paper2:#e6e0d3;--paper-ink:#1b1c1f;--red:#e5483b;
 --p3-a:#f5b800;--p3-b:#ffe68f;--p3-d:#111214;--p3-solid:#1c1e22;--p3-top:76px;
 --h:"Secular One",system-ui,sans-serif;--b:"Alef",system-ui,sans-serif;--m:"Cousine",ui-monospace,monospace;
 --wrap:1180px;--r:14px
}
*{box-sizing:border-box}
html{background:var(--ink);overflow-x:clip;touch-action:pan-x pan-y;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--ink);color:var(--text);font:400 18px/1.7 var(--b);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
picture{display:contents}
a{color:inherit}
h1,h2,h3{font-family:var(--h);font-weight:400;line-height:1.15;margin:0}
p{margin:0 0 1em}
input,select,textarea{font-size:max(16px,1rem);font-family:var(--b)}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.tag{font:700 13px/1.4 var(--b);color:var(--yel);display:inline-flex;gap:.5em;align-items:center}
.tag::before{content:"";width:22px;height:2px;background:currentColor}
.skip{position:absolute;inset-inline-start:-999px;top:8px}
.skip:focus{inset-inline-start:12px;z-index:99;background:var(--yel);color:#111;padding:8px 14px;border-radius:8px}

/* header */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ink) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand svg{width:40px;height:40px;flex:none}
.brand b{font:400 22px/1 var(--h);letter-spacing:.04em;direction:ltr}
.brand small{display:block;font:400 13px/1.2 var(--b);color:var(--muted)}
.nav{display:flex;gap:22px;margin-inline-start:auto}
.nav a{text-decoration:none;color:var(--muted);font-size:16px}
.nav a:hover,.nav a[aria-current]{color:var(--text)}
.call{display:inline-flex;align-items:center;gap:8px;background:var(--yel);color:#141517;text-decoration:none;font:700 16px/1 var(--b);padding:11px 16px;border-radius:999px;flex:none}
.call svg{width:16px;height:16px}
.acts{display:flex;align-items:center;gap:10px;flex:none}
.tel-l{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:700 16px/1 var(--b);color:var(--text);padding:11px 15px;border-radius:999px;box-shadow:inset 0 0 0 1.5px #55585f}
.tel-l span{direction:ltr;unicode-bidi:isolate}
.tel-l svg{width:16px;height:16px;color:var(--yel)}
.acts .call{padding:12px 20px;font-size:17px;box-shadow:0 0 0 4px rgba(245,184,0,.18),0 10px 24px rgba(245,184,0,.22)}
.acts .call svg{width:19px;height:19px}
@media (max-width:1120px){.tel-l{display:none}.nav{gap:18px}}
@media (max-width:860px){.nav{display:none}.acts{display:none}.brand small{display:block;font-size:12px}}

/* hero */
.hero{position:relative;overflow:hidden;padding:56px 0 30px;background:
 linear-gradient(var(--ink) 0,transparent 30%,transparent 70%,var(--ink) 100%),
 linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px,
 linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px,var(--ink)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:30px;align-items:center}
.hero h1{font-size:clamp(40px,4.8vw,70px);margin:16px 0 8px}
.hero h1 span{display:block;color:var(--yel);font-size:.46em;line-height:1.3;margin-top:.45em;max-width:26ch}
.hero .lead{color:#d8d6cf;font-size:clamp(17px,1.5vw,20px);max-width:52ch;margin:14px 0 24px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:700 17px/1 var(--b);padding:16px 24px;border-radius:999px;border:0;cursor:pointer}
.btn svg{width:20px;height:20px;flex:none}
.btn-y{background:var(--yel);color:#141517}
.btn-o{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px #55585f}
.btn-o span{direction:ltr;unicode-bidi:isolate}
.stage{position:relative;width:100%;height:500px;display:grid;place-items:center}
.plan-wrap{width:420px;height:320px;transform:translate(24px,-14px);transform-style:preserve-3d}
.stage>.p3-glare{-webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent);mask-image:radial-gradient(closest-side,#000 45%,transparent)}
.iso{position:relative;width:420px;height:320px;transform:rotateX(57deg) rotateZ(-38deg);transform-style:preserve-3d}
.iso .floor{position:absolute;inset:0;border-radius:4px;background:
 linear-gradient(rgba(20,21,23,.35) 1.5px,transparent 1.5px) 0 0/35px 35px,
 linear-gradient(90deg,rgba(20,21,23,.35) 1.5px,transparent 1.5px) 0 0/35px 35px,
 linear-gradient(135deg,#8e8c86,#6f6d68);box-shadow:0 0 0 6px #2a2c31,0 40px 80px rgba(0,0,0,.6)}
.iso .glow{position:absolute;inset:-60px;background:radial-gradient(closest-side,rgba(245,184,0,.28),transparent);transform:translateZ(-2px);pointer-events:none}
.w{position:absolute;height:74px;transform-origin:0 0;background:linear-gradient(#f4f1ea,#cdc6b8);border-top:4px solid var(--yel);backface-visibility:visible;
 transform:var(--rz,) rotateX(90deg) scaleY(var(--rise,1));transition:transform 1.1s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.w.y{--rz:rotateZ(90deg)}
.w.short{height:40px;background:linear-gradient(#e3b23c,#b98912)}
.p3-live .stage:not(.built) .w{--rise:.02}
.stamp{position:absolute;inset-inline-end:6%;bottom:14%;width:128px;height:128px;border-radius:50%;display:grid;place-items:center;text-align:center;
 background:var(--yel);color:#141517;box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 0 0 4px #141517,inset 0 0 0 7px var(--yel),inset 0 0 0 8.5px #141517;rotate:-10deg}
.stamp b{display:block;font:700 26px/1 var(--m);direction:ltr}
.stamp small{display:block;font:700 12px/1.25 var(--b);margin-top:4px}
.stage .note{position:absolute;inset-inline-start:4%;top:10%;font:700 13px/1.5 var(--b);color:var(--muted);text-align:start;background:rgba(20,21,23,.8);border:1px solid var(--line);padding:10px 12px;border-radius:10px}
.stage .note b{color:var(--yel)}
@media (max-width:860px){
 .hero{padding-top:34px}
 .hero .wrap{grid-template-columns:minmax(0,1fr);gap:6px}
 .stage{height:300px}
 .plan-wrap{transform:translate(34px,-4px) scale(.6)}
 .stamp{width:104px;height:104px;bottom:4%;inset-inline-end:2%}.stamp b{font-size:21px}.stamp small{font-size:11px}
 .stage .note{top:2%;inset-inline-start:0;font-size:12px}
}

/* tape band */
.tape{position:relative;background:var(--yel);color:#141517;padding:46px 0;overflow:hidden}
.tape::before,.tape::after{content:"";position:absolute;inset-inline:0;height:12px;background:repeating-linear-gradient(-45deg,#141517 0 14px,var(--yel) 14px 28px)}
.tape::before{top:0}.tape::after{bottom:0}
.tape p{font:400 clamp(26px,3.6vw,46px)/1.2 var(--h);margin:0;max-width:24ch}
.tape .wrap{display:flex;gap:30px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.tape small{font:700 15px/1.6 var(--b);max-width:36ch}

/* sections */
section{scroll-margin-top:80px}
.sec{padding:96px 0}
.sec-h{display:grid;gap:12px;margin-bottom:38px;max-width:760px}
.sec-h h2{font-size:clamp(32px,4.2vw,56px)}
.sec-h p{color:var(--muted);margin:0;font-size:19px}
@media (max-width:860px){.sec{padding:68px 0}}

/* services: material samples strip */
.samples{background:var(--paper);color:var(--paper-ink)}
.samples .sec-h p{color:#5c5a54}
.samples .tag{color:#9a6c00}
.strip-wrap{position:relative}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,292px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:26px 4px 34px;scrollbar-width:thin;overscroll-behavior-x:contain}
.sample{scroll-snap-align:start;background:#fff;border:1px solid #d9d2c3;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.sample .sw{height:150px;position:relative}
.sample .sw::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,rgba(0,0,0,.18))}
.sample .tx{padding:18px 20px 22px}
.sample h3{font-size:24px;margin-bottom:8px}
.sample p{margin:0;color:#4d4b46;font-size:17px;line-height:1.6}
.sw.oak{background:repeating-linear-gradient(90deg,#b98d5b 0 5px,#a97c4b 5px 9px,#c49a69 9px 17px,#ad8150 17px 22px)}
.sw.marble{background:radial-gradient(120% 60% at 20% 30%,#fff 0,transparent 50%),linear-gradient(115deg,#ebe7df 0 38%,#c9c3b6 39%,#ebe7df 41% 70%,#d3cdc1 71%,#efebe4 73%)}
.sw.tile{background:linear-gradient(#f4f1ea 3px,transparent 3px) 0 0/50px 50px,linear-gradient(90deg,#f4f1ea 3px,transparent 3px) 0 0/50px 50px,linear-gradient(135deg,#9ea3a6,#7f8589)}
.sw.stone{background:radial-gradient(circle at 20% 30%,#d8cdb6 0 18%,transparent 19%),radial-gradient(circle at 70% 60%,#cbbd9f 0 22%,transparent 23%),radial-gradient(circle at 45% 85%,#ddd2bc 0 15%,transparent 16%),radial-gradient(circle at 90% 15%,#c7b998 0 14%,transparent 15%),#b9aa8a}
.sw.concrete{background:radial-gradient(circle at 30% 40%,rgba(0,0,0,.08) 0 2px,transparent 3px) 0 0/23px 19px,radial-gradient(circle at 70% 20%,rgba(255,255,255,.18) 0 1.5px,transparent 2.5px) 0 0/17px 29px,linear-gradient(160deg,#a7a6a1,#8c8b86)}
.sw.terrazzo{background:radial-gradient(circle at 20% 30%,#5d6b72 0 4px,transparent 5px) 0 0/37px 41px,radial-gradient(circle at 60% 70%,#c17e4f 0 3px,transparent 4px) 0 0/29px 33px,radial-gradient(circle at 80% 20%,#1f2a2e 0 2.5px,transparent 3.5px) 0 0/23px 27px,#ece7dc}
.sw.pipe{background:repeating-linear-gradient(0deg,transparent 0 26px,#b8743f 26px 34px,#e0a476 34px 36px,#9a5c2e 36px 40px,transparent 40px 66px),#2a2c31}
.sw.volt{background:linear-gradient(90deg,transparent 47%,var(--yel) 47% 53%,transparent 53%),repeating-linear-gradient(0deg,transparent 0 30px,#3a3d43 30px 32px),#232529}
.sw.volt::before{content:"";position:absolute;inset-inline-start:calc(50% - 22px);top:44px;width:44px;height:58px;border-radius:9px;background:#f3efe6;box-shadow:0 6px 0 #c9c2b2}
.strip-nav{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.strip-nav .hint{font:700 13px/1.4 var(--b);color:#6d6a63}
.strip-nav button{width:46px;height:46px;border-radius:50%;border:1.5px solid #2a2b2e;background:transparent;color:#2a2b2e;font-size:20px;cursor:pointer}
.strip-nav div{display:flex;gap:10px}

/* who: three property types */
.who{background:var(--ink2)}
.who-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:22px}
.who-card{margin:0;position:relative;border-radius:18px;overflow:hidden;background:#000;min-height:300px;display:flex;align-items:flex-end}
.who-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.78}
.who-card .cap{position:relative;padding:22px 24px;background:linear-gradient(transparent,rgba(10,10,11,.92) 38%);width:100%}
.who-card h3{font-size:30px;margin-bottom:6px}
.who-card p{margin:0;color:#dcd9d2;font-size:17px}
.who-card .ill{position:absolute;top:12px;inset-inline-start:12px;z-index:2;font:700 12px/1 var(--b);background:rgba(20,21,23,.78);color:#e6e3dc;padding:7px 9px;border-radius:7px}
.who-card.big{grid-row:span 2;min-height:620px}
@media (max-width:860px){.who-grid{grid-template-columns:minmax(0,1fr)}.who-card.big{grid-row:auto;min-height:420px}.who-card{min-height:330px}}

/* floors: process as a building that rises */
.floors .layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:start}
.floors .pin{position:sticky;top:110px}
.floors .pin figure{margin:0;border-radius:18px;overflow:hidden;position:relative;border:1px solid var(--line)}
.floors .pin figcaption{position:absolute;bottom:10px;inset-inline-start:10px;font:700 12px/1 var(--b);background:rgba(20,21,23,.8);padding:7px 9px;border-radius:7px;color:#e6e3dc}
.floors .pin .meter{display:flex;gap:6px;margin-top:16px;direction:ltr;justify-content:flex-end}
.floors .pin .meter i{width:100%;height:8px;border-radius:4px;background:var(--ink3);transition:background .4s}
.floors .pin .meter i.on{background:var(--yel)}
.stack{display:grid;gap:18px}
.floor-c{position:relative;background:var(--ink2);border:1px solid var(--line);border-radius:16px;padding:26px 26px 26px 26px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start}
.lift{width:64px;height:64px;border-radius:12px;background:#0d0e10;border:2px solid #3a3d43;display:grid;place-items:center;font:700 30px/1 var(--m);color:var(--yel);text-shadow:0 0 12px rgba(245,184,0,.55)}
.floor-c h3{font-size:27px;margin:2px 0 8px}
.floor-c p{margin:0;color:#cfcdc6}
.floor-c .k{display:block;font:700 13px/1.4 var(--b);color:var(--muted);margin-bottom:2px}
@media (max-width:860px){.floors .layout{grid-template-columns:minmax(0,1fr);gap:28px}.floors .pin{position:relative;top:0}.floor-c{padding:20px;gap:14px}.lift{width:52px;height:52px;font-size:24px}.floor-c h3{font-size:23px}}

/* handover file */
.file{background:linear-gradient(180deg,var(--ink) 0,#191b1f 100%)}
.file .layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.sheet{background:var(--paper);color:var(--paper-ink);border-radius:6px;padding:34px 34px 30px;position:relative;box-shadow:0 30px 70px rgba(0,0,0,.5);rotate:2deg}
.sheet::before{content:"";position:absolute;top:-16px;inset-inline-start:50%;translate:50% 0;width:120px;height:30px;border-radius:8px;background:#55585f;box-shadow:inset 0 -4px 0 #3b3d42}
.sheet .hd{display:flex;justify-content:space-between;gap:12px;border-bottom:2px solid var(--paper-ink);padding-bottom:12px;margin-bottom:8px}
.sheet .hd b{font:400 26px/1.1 var(--h)}
.sheet .hd span{font:700 13px/1.5 var(--b);color:#6d6a63;text-align:end}
.row{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px dashed #b9b2a3;align-items:start}
.row:last-child{border-bottom:0}
.chk{width:30px;height:30px;border:2px solid var(--paper-ink);border-radius:6px;display:grid;place-items:center}
.chk svg{width:20px;height:20px;stroke:#0f7a3a;stroke-width:3;fill:none;stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .6s ease var(--d,0s)}
.is-in .chk svg,.no-js .chk svg{stroke-dashoffset:0}
.row b{display:block;font:400 21px/1.3 var(--h)}
.row span{color:#4d4b46;font-size:16px}
.file .txt h2{font-size:clamp(32px,4vw,54px);margin:12px 0 16px}
.file .txt p{color:#d3d1ca}
@media (max-width:860px){.file .layout{grid-template-columns:minmax(0,1fr);gap:40px}.sheet{padding:28px 20px 22px;rotate:1deg}}

/* register + owner */
.reg .layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center}
.card-id{border-radius:20px;padding:30px;background:linear-gradient(140deg,#2a2d33,#191a1e);border:1px solid #3e424a;position:relative;overflow:hidden}
.card-id>*{position:relative;z-index:1}
.card-id::after{z-index:0;content:"";position:absolute;inset-inline-end:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:26px solid rgba(245,184,0,.12)}
.card-id .t{font:700 13px/1.5 var(--b);color:var(--muted)}
.card-id h3{font-size:30px;margin:6px 0 20px}
.card-id dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 20px;margin:0}
.card-id dt{font:700 14px/1.6 var(--b);color:var(--muted)}
.card-id dd{margin:0;font-size:19px}
.card-id dd.num{font:700 22px/1.3 var(--m);color:var(--yel)}
.reg .txt h2{font-size:clamp(30px,3.8vw,50px);margin:12px 0 16px}
.reg .txt p{color:#d3d1ca}
.extras{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.extras li{border-inline-start:3px solid var(--yel);padding:4px 16px;background:var(--ink2);border-radius:0 10px 10px 0}
.extras b{display:block;font:400 19px/1.4 var(--h)}
.extras span{color:var(--muted);font-size:16px}
@media (max-width:860px){.reg .layout{grid-template-columns:minmax(0,1fr)}.card-id{padding:24px 20px}.card-id dl{grid-template-columns:minmax(0,1fr)}.card-id dd{margin-bottom:6px}}

/* area signs */
.area{background:var(--ink2);border-block:1px solid var(--line)}
.signs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sign{background:#0f5132;color:#fff;border-radius:12px;padding:20px 22px;box-shadow:inset 0 0 0 3px #0f5132,inset 0 0 0 5px #fff;display:flex;align-items:center;justify-content:space-between;gap:12px}
.sign b{font:400 clamp(24px,2.6vw,34px)/1.1 var(--h)}
.sign svg{width:34px;height:34px;flex:none}
.office{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center;font-size:18px}
.office .pin-i{display:inline-flex;align-items:center;gap:10px}
.office .pin-i svg{width:22px;height:22px;color:var(--yel)}
@media (max-width:860px){.signs{grid-template-columns:minmax(0,1fr)}}

/* faq */
.faq-list{display:grid;gap:12px;max-width:900px}
.faq-list details{background:var(--ink2);border:1px solid var(--line);border-radius:14px;padding:4px 22px}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 0;font:400 21px/1.35 var(--h)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font:700 24px/1 var(--m);color:var(--yel);flex:none}
.faq-list details[open] summary::after{content:"−"}
.faq-list details p{color:#cfcdc6;margin:0 0 18px}

/* work order form */
.order{background:var(--yel);color:#141517;position:relative}
.order::before{content:"";position:absolute;inset-inline:0;top:0;height:12px;background:repeating-linear-gradient(-45deg,#141517 0 14px,var(--yel) 14px 28px)}
.order .layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.order .tag{color:#141517}
.order h2{font-size:clamp(32px,4.2vw,56px);margin:12px 0 14px}
.order .txt p{font-size:19px}
.order .direct{display:grid;gap:10px;margin-top:20px}
.order .direct a{font:700 19px/1.4 var(--b);text-decoration:none;display:inline-flex;gap:10px;align-items:center}
.order .direct a span{direction:ltr;unicode-bidi:isolate}
.order .direct svg{width:22px;height:22px}
.wo{background:var(--paper);border-radius:10px;padding:28px;box-shadow:0 26px 60px rgba(60,40,0,.35);color:var(--paper-ink)}
.wo .hd{display:flex;justify-content:space-between;gap:10px;font:700 13px/1.5 var(--b);color:#6d6a63;border-bottom:2px solid var(--paper-ink);padding-bottom:10px;margin-bottom:18px}
.wo label{display:block;font:700 16px/1.4 var(--b);margin-bottom:6px}
.wo .f{margin-bottom:16px}
.wo input,.wo select,.wo textarea{width:100%;border:1.5px solid #8d8778;background:#fff;border-radius:8px;padding:12px 14px;color:var(--paper-ink)}
.wo textarea{min-height:120px;resize:vertical}
.wo .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.wo .err{display:none;color:#b3261e;font-weight:700;margin:0 0 12px}
.wo.bad .err{display:block}
.wo .bad-f{border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.15)}
.wo .btn{width:100%;justify-content:center;background:#141517;color:var(--yel)}
.wo .fine{font-size:14px;color:#6d6a63;margin:12px 0 0}
@media (max-width:860px){.order .layout{grid-template-columns:minmax(0,1fr);gap:30px}.wo{padding:22px 18px}.wo .two{grid-template-columns:minmax(0,1fr);gap:0}}

/* footer */
.foot{background:var(--ink);border-top:1px solid var(--line);padding:46px 0 40px;color:var(--muted);font-size:16px}
.foot .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:30px}
.foot b{color:var(--text)}
.foot p{margin:0 0 8px}
.foot a{color:var(--text)}
.foot .demo{grid-column:1/-1;border-top:1px solid var(--line);padding-top:16px;font-size:14px}
@media (max-width:860px){.foot .wrap{grid-template-columns:minmax(0,1fr)}}

/* articles */
.crumbs{font:700 13px/1.6 var(--b);color:var(--muted);padding:26px 0 0}
.crumbs a{color:var(--muted)}
.art-head{padding:30px 0 40px;border-bottom:1px solid var(--line)}
.art-head h1{font-size:clamp(34px,5vw,62px);max-width:20ch;margin:14px 0 14px}
.art-head p{color:#d3d1ca;max-width:62ch;font-size:19px;margin:0}
.art-list{display:grid;gap:18px;padding:40px 0 90px}
.art-card{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:26px;text-decoration:none;background:var(--ink2);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.art-card figure{margin:0;position:relative}
.art-card img{width:100%;height:100%;object-fit:cover;min-height:200px}
.art-card figcaption{position:absolute;bottom:8px;inset-inline-start:8px;font:700 11px/1 var(--b);background:rgba(20,21,23,.8);padding:6px 8px;border-radius:6px}
.art-card .tx{padding:24px 0 24px 24px}
.art-card h2{font-size:28px;margin:8px 0 10px}
.art-card p{color:#cfcdc6;margin:0 0 12px}
.art-card .more{color:var(--yel);font-weight:700}
@media (max-width:860px){.art-card{grid-template-columns:minmax(0,1fr)}.art-card .tx{padding:4px 20px 22px}}
.article{padding:40px 0 30px}
.article .body{max-width:760px}
.article .body h2{font-size:clamp(26px,3vw,36px);margin:44px 0 14px;color:var(--text)}
.article .body h3{font-size:23px;margin:28px 0 10px}
.article .body p,.article .body li{color:#dedcd5;font-size:19px;line-height:1.85}
.article .body ul{padding-inline-start:22px;margin:0 0 1em}
.article .body li{margin-bottom:8px}
.article .body a{color:var(--yel)}
.article figure{margin:30px 0;border-radius:14px;overflow:hidden;position:relative}
.article figure figcaption{position:absolute;bottom:10px;inset-inline-start:10px;font:700 12px/1 var(--b);background:rgba(20,21,23,.8);padding:7px 9px;border-radius:7px}
.meta{font:700 13px/1.6 var(--b);color:var(--muted);margin-top:16px}
.box-note{background:var(--ink2);border:1px solid var(--line);border-inline-start:4px solid var(--yel);border-radius:0 12px 12px 0;padding:20px 22px;margin:28px 0}
.box-note p{margin:0}
.art-cta{margin:46px 0 80px;background:var(--yel);color:#141517;border-radius:18px;padding:30px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.art-cta b{font:400 clamp(24px,2.6vw,32px)/1.2 var(--h);max-width:24ch}
.art-cta .btn{background:#141517;color:var(--yel)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.w,.chk svg{transition:none}}
.art-head .meta{font-size:14px;color:var(--muted);margin-top:14px}

/* revision (task 4601): contact on every page, a phone dock, recommendation slips */
.dock{display:none}
@media (max-width:860px){
 .dock{position:fixed;z-index:60;inset-inline:0;bottom:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;
  background:rgba(17,18,20,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid #3a3d43;box-shadow:0 -10px 30px rgba(0,0,0,.45)}
 .dock a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:14px;text-decoration:none;font:700 17px/1 var(--b)}
 .dock svg{width:20px;height:20px;flex:none}
 .dock .d-tel{color:var(--text);box-shadow:inset 0 0 0 1.5px #55585f}
 .dock .d-tel svg{color:var(--yel)}
 .dock .d-wa{background:var(--yel);color:#141517}
 .foot{padding-bottom:100px}
}

.reach{padding:84px 0 92px;background:
 linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/48px 48px,
 linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/48px 48px,#17181b;border-top:1px solid var(--line)}
.board{position:relative;max-width:980px;margin-inline:auto;background:#fbfaf6;color:var(--paper-ink);border-radius:16px;padding:0 0 30px;
 border:8px solid #141517;outline:4px solid var(--yel);outline-offset:0;box-shadow:0 40px 80px rgba(0,0,0,.55)}
.p3-live .board.p3-card.p3-mid{border-color:#141517}
.b-top{background:#141517;color:var(--text);padding:16px 26px 24px;border-radius:8px 8px 0 0;border-bottom:6px solid var(--yel)}
.b-k{display:inline-block;font:700 14px/1 var(--b);color:#141517;background:var(--yel);padding:6px 10px;border-radius:4px;margin-bottom:12px}
.b-top h2{font-size:clamp(26px,3.2vw,42px)}
.b-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:0;padding:12px 34px 4px}
.b-rows>div{display:grid;grid-template-columns:116px minmax(0,1fr);gap:14px;padding:15px 0;border-bottom:1.5px dashed #c9c2b2;align-items:baseline}
.b-rows dt{font:700 14px/1.4 var(--b);color:#6d6a63}
.b-rows dd{margin:0;font:400 20px/1.4 var(--h);overflow-wrap:anywhere}
.b-rows a{color:inherit;text-decoration-color:var(--yel);text-decoration-thickness:3px;text-underline-offset:4px}
.b-rows .num,.b-rows .ltr{font-family:var(--m);font-weight:700;direction:ltr;unicode-bidi:isolate}
.b-acts{display:flex;flex-wrap:wrap;gap:12px;padding:22px 34px 0}
.btn-k{background:#141517;color:var(--yel)}
.btn-k span{direction:ltr;unicode-bidi:isolate}
@media (max-width:860px){
 .reach{padding:60px 0 64px}
 .b-top{padding:18px 20px 20px}
 .b-rows{grid-template-columns:minmax(0,1fr);padding:6px 20px 0}
 .b-rows>div{grid-template-columns:96px minmax(0,1fr);gap:10px;padding:13px 0}
 .b-rows dd{font-size:18px}
 .b-acts{padding:20px 20px 0}.b-acts .btn{width:100%;justify-content:center}
}

.recs{background:var(--paper);color:var(--paper-ink)}
.recs .tag{color:#9a6c00}
.recs .sec-h p{color:#5c5a54}
.slips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:10px 0 6px}
.slip{background:#fff;border:1px solid #d9d2c3;border-top:6px solid var(--yel);border-radius:6px;padding:22px 24px 24px;box-shadow:0 18px 40px rgba(60,50,30,.14)}
.slip:nth-child(1){rotate:-1deg}.slip:nth-child(2){rotate:.7deg}.slip:nth-child(3){rotate:-.5deg}
.s-k{display:block;font:700 13.5px/1.4 var(--b);color:#6d6a63}
.s-q{position:relative;margin:16px 0 18px;padding:24px 18px 16px 16px;min-height:112px;border:1.5px dashed #c9c2b2;border-radius:8px;color:#77736a;font-size:17px;line-height:1.6;background:#fbfaf6}
.s-q::before{content:"״";position:absolute;top:-13px;inset-inline-start:14px;height:24px;overflow:hidden;font:400 46px/.95 var(--h);color:var(--yel);background:#fff;padding:0 6px}
.slip dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 12px;margin:0 0 18px;align-items:end}
.slip dt{font:700 14px/1.3 var(--b);color:#4d4b46}
.slip dd{margin:0;height:22px;border-bottom:1.5px solid #8d8778}
.s-sig{display:block;border-top:1.5px solid var(--paper-ink);padding-top:6px;width:60%;font:700 13px/1.3 var(--b);color:#6d6a63}
.g-link{display:inline-flex;align-items:center;gap:10px;margin-top:30px;font:700 18px/1.4 var(--b);color:var(--paper-ink);text-decoration-color:var(--yel);text-decoration-thickness:3px;text-underline-offset:5px}
.g-link svg{width:22px;height:22px;flex:none}
@media (max-width:860px){.slips{grid-template-columns:minmax(0,1fr);gap:22px}.slip{padding:20px 18px 22px}}