/* The Word Method — shared additions: socials, FAQ, portfolio drafts, edit mode, scroll/mouse effects */
:root{--rust:#8b2020;--ink-60:rgba(20,16,8,.74)}

/* ---------- Readability: bigger small print, darker light text (same look) ---------- */
.nav-links a,.nav-back,.btn-wa,.social,.section-label,.case-tag,.hero-quote-attr,.quote-block cite,.service-num,.rate-terms-title,footer p{font-size:11px}
.section-label{letter-spacing:.38em}
.nav-links a,.nav-back{letter-spacing:.24em}
.hero-quote-attr,.service-num{color:var(--ink-60)}
.about-p,.faq-a-text,.rate-terms-text{font-size:16px}
.service-desc,.case-desc,.rate-name{font-size:15px}
.ad-bullets li{font-size:14px}
.hero-sub{font-size:clamp(16px,1.9vw,20px)}
@media(max-width:768px){.about-p,.faq-a-text{font-size:16px}}

/* exactly four services sit in a tidy 2 x 2 grid instead of 3 + 1 */
@media(min-width:769px){.services-grid:has(> .service:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}}

/* ---------- Click-to-enlarge screenshots ---------- */
.case-study .shot img{cursor:zoom-in;transition:opacity .2s}
.case-study .shot img:hover{opacity:.93}
.lightbox{position:fixed;inset:0;z-index:2000;background:rgba(20,16,8,.9);display:none;align-items:center;justify-content:center;padding:28px;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:100%;background:#fff;border:1px solid rgba(240,230,204,.35);box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lightbox button{position:absolute;top:14px;right:18px;background:none;border:0;color:var(--cream);font:32px/1 var(--cp);cursor:pointer;padding:6px 10px}

/* ---------- Social links ---------- */
.nav-right{display:flex;align-items:center;gap:4px}
.socials{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.social{display:inline-flex;align-items:center;gap:8px;color:var(--ink-60);text-decoration:none;font-family:var(--cp);font-size:9px;letter-spacing:.25em;text-transform:uppercase;transition:color .2s}
.social:hover{color:var(--ink)}
.social svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.socials--icons{gap:14px;margin-left:12px}
.socials--icons .social span{display:none}
.socials--center{justify-content:center;margin-top:44px}
/* a link left as "#" stays hidden from visitors until a real address is set */
a[href="#"]{display:none}
footer{align-items:center}
@media(max-width:768px){footer .socials{justify-content:center}}
@media(max-width:480px){.nav-name{display:none}.socials--icons{margin-left:6px}}

/* ---------- Phone menu ---------- */
.nav-toggle{display:none;background:none;border:0;padding:10px 8px;margin-left:6px;cursor:pointer;color:var(--ink);line-height:0}
.nav-toggle span{display:block;width:20px;height:1.5px;background:currentColor;margin:5px 0;transition:transform .25s ease,opacity .2s ease}
@media(max-width:768px){
  .nav-toggle{display:block}
  nav .nav-links{display:none;position:absolute;top:56px;left:0;right:0;flex-direction:column;background:rgba(240,230,204,.98);border-bottom:1px solid var(--ink-12);padding:6px 0 12px;box-shadow:0 10px 20px rgba(20,16,8,.08)}
  nav.open .nav-links{display:flex}
  nav .nav-links a{height:auto;padding:15px 24px;font-size:11px}
  nav.open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  nav.open .nav-toggle span:nth-child(2){opacity:0}
  nav.open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--ink-12);margin-top:8px}
.faq-item{border-bottom:1px solid var(--ink-12);position:relative}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;cursor:pointer;font-family:var(--se);font-size:17px;line-height:1.4;color:var(--ink);-webkit-user-select:none;user-select:none}
.faq-q::after{content:'+';font-family:var(--se);font-size:22px;line-height:1;color:var(--ink-60);flex-shrink:0;transition:transform .3s ease}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-q:hover .faq-q-text{opacity:.7}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.faq-a>div{overflow:hidden}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a-text{font-family:var(--cp);font-size:15px;line-height:1.95;color:var(--ink-60);max-width:680px;padding:0 0 28px 18px;border-left:2px solid var(--ink-12);margin-left:2px}

/* ---------- Rates ---------- */
.currency-toggle{display:inline-flex;border:1px solid var(--ink);margin:0 0 44px}
.currency-toggle button{font-family:var(--cp);font-size:10px;letter-spacing:.25em;text-transform:uppercase;padding:11px 20px;background:transparent;color:var(--ink);border:0;cursor:pointer;transition:background .2s,color .2s}
.currency-toggle button+button{border-left:1px solid var(--ink)}
.currency-toggle button.on{background:var(--ink);color:var(--cream)}
.rate-groups{display:grid;grid-template-columns:1fr 1fr;gap:56px 72px;align-items:start}
.rate-group{position:relative}
.rate-group-title{font-family:var(--se);font-weight:400;font-size:17px;color:var(--ink);padding-bottom:12px;border-bottom:1px solid var(--ink)}
.rate-row{display:flex;align-items:baseline;gap:12px;padding:15px 0;border-bottom:1px solid var(--ink-12);position:relative}
.rate-name{font-family:var(--cp);font-size:14px;line-height:1.5;color:var(--ink-60)}
.rate-dots{flex:1;min-width:16px;border-bottom:1px dotted var(--ink-30);transform:translateY(-4px)}
.rate-price{font-family:var(--se);font-size:15px;color:var(--ink);white-space:nowrap}
[data-currency="usd"] .p-nis,[data-currency="nis"] .p-usd{display:none}
.rate-terms{margin-top:64px;border-left:2px solid var(--ink);padding:24px 28px;background:rgba(20,16,8,.03);max-width:760px}
.rate-terms-title{font-family:var(--cp);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-60);margin-bottom:12px}
.rate-terms-text{font-family:var(--cp);font-size:14px;line-height:1.9;color:var(--ink)}
.rate-note{font-family:var(--if);font-style:italic;font-size:15px;line-height:1.7;color:var(--ink-60);margin-top:14px}
.rate-download{margin-top:32px}
@media(max-width:768px){.rate-groups{grid-template-columns:1fr;gap:40px}.rate-row{flex-wrap:wrap}.rate-dots{display:none}.rate-price{margin-left:auto}}
.editing .rate-row>.block-ctl{top:50%;right:auto;left:42%;transform:translateY(-50%)}
.editing .rate-dots{border-bottom-color:transparent}
.editing .rate-group>.block-ctl{top:-34px;right:0}

/* ---------- Portfolio: drafts and empty screenshot slots ---------- */
[data-draft]{display:none}
.shot[data-empty]{display:none}
.shot-drop{display:none}
.ad-shot{max-width:480px}

/* ---------- Scroll + mouse effects (typewriter / ink) ---------- */
.ink-progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--ink);transform-origin:left center;transform:scaleX(0);z-index:200;pointer-events:none}
.ink-trail{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50;opacity:.5}
.type-caret{display:inline-block;width:.09em;height:.95em;margin-left:.06em;background:currentColor;vertical-align:-.1em;transition:opacity .4s ease}
.type-caret.blink{animation:caret-blink 1s steps(1) infinite}
.type-caret.fade{animation:none;opacity:0}
@keyframes caret-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* ---------- Edit mode (only active with ?edit in the address) ---------- */
.editing .reveal{opacity:1!important;transform:none!important}
.editing [data-draft]{display:block;opacity:.65;outline:1px dashed var(--rust);outline-offset:-1px}
.editing [data-draft]::before{content:'DRAFT — hidden from visitors until you click Publish';position:absolute;top:4px;left:0;z-index:15;font:9px/1 var(--cp);letter-spacing:.2em;text-transform:uppercase;color:#fff;background:var(--rust);padding:5px 8px}
.editing .shot[data-empty]{display:block}
.editing .shot-drop{display:flex;align-items:center;justify-content:center;min-height:150px;border:1.5px dashed var(--ink-30);font:11px var(--cp);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-60);cursor:pointer;background:rgba(20,16,8,.03)}
.editing .shot:not([data-empty]) .shot-drop{display:none}
.editing .shot-drop:hover{border-color:var(--rust);color:var(--rust)}
.editing .shot{position:relative}
.editing .shot img{cursor:pointer}
.editing .shot[data-empty] img{display:none}
.editing .shot .screenshot-caption{margin-top:6px}
.editing a[href="#"]{display:inline-flex;opacity:.5;outline:1px dashed var(--rust)}
.editing [data-block]{position:relative}
.editing .faq-a{grid-template-rows:1fr}
.editing [contenteditable]{cursor:text;outline:none;transition:background .15s}
.editing [contenteditable]:hover{background:rgba(139,32,32,.06)}
.editing [contenteditable]:focus{background:rgba(139,32,32,.1);box-shadow:0 0 0 1px rgba(139,32,32,.55)}
.editing .faq-q{cursor:default}
.editing .faq-q-text{flex:1}
.editing{padding-bottom:90px}

.previewing{padding-bottom:90px}
.previewing .block-ctl,.previewing .shot-ctl,.previewing .add-row,.previewing .add-btn,.previewing .link-pop{display:none!important}

.block-ctl{position:absolute;top:6px;right:6px;display:flex;gap:4px;z-index:20}
.shot-ctl{position:absolute;top:6px;right:6px;display:flex;gap:4px;z-index:20}
.block-ctl button,.shot-ctl button,.add-btn,.edit-toolbar button,.link-pop button{font:11px var(--cp);letter-spacing:.06em;cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:var(--cream);padding:5px 9px;line-height:1.2}
.block-ctl button:hover,.shot-ctl button:hover,.add-btn:hover,.edit-toolbar button:hover,.link-pop button:hover{background:var(--rust);border-color:var(--rust)}
.block-ctl .danger:hover,.shot-ctl .danger:hover{background:#b00020;border-color:#b00020}
.add-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:40px 24px;position:relative;z-index:1}
.add-btn{background:transparent;color:var(--ink);border:1.5px dashed var(--ink-30);padding:14px 22px;font-size:12px}
.add-btn.small{padding:6px 12px;font-size:10px;margin-top:10px}
.add-btn:hover{color:#fff}
.ad-bullets+.add-btn{display:inline-block}

.edit-toolbar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:1000;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;background:var(--ink);color:var(--cream);padding:10px 14px;font:12px var(--cp);box-shadow:0 6px 28px rgba(0,0,0,.35);max-width:calc(100vw - 20px)}
.edit-toolbar .tb-msg{letter-spacing:.04em}
.edit-toolbar button{background:transparent;color:var(--cream);border-color:rgba(240,230,204,.45)}
.edit-toolbar button.primary{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.edit-toolbar button.primary:hover{background:var(--rust);color:#fff;border-color:var(--rust)}
.edit-toolbar button.primary.needs{animation:needs 1.4s ease-in-out infinite}
@keyframes needs{50%{box-shadow:0 0 0 4px rgba(240,230,204,.35)}}

.link-pop{position:fixed;z-index:1100;display:none;gap:6px;align-items:center;background:var(--ink);padding:8px;box-shadow:0 6px 24px rgba(0,0,0,.35);max-width:calc(100vw - 16px)}
.link-pop.show{display:flex}
.link-pop label{font:10px var(--cp);letter-spacing:.15em;text-transform:uppercase;color:var(--cream)}
.link-pop input{width:260px;max-width:50vw;font:13px var(--cp);padding:6px 8px;border:1px solid var(--ink-30);background:var(--cream);color:var(--ink)}
.link-pop button{background:transparent;color:var(--cream);border-color:rgba(240,230,204,.45)}

.restore-bar{position:fixed;top:0;left:0;right:0;z-index:1300;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;background:var(--rust);color:#fff;padding:12px 16px;font:13px var(--cp)}
.restore-bar button{font:12px var(--cp);cursor:pointer;background:var(--cream);color:var(--ink);border:0;padding:7px 14px}

.help-modal{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;background:rgba(20,16,8,.55);padding:20px}
.help-modal.show{display:flex}
.help-box{background:var(--cream);color:var(--ink);max-width:520px;width:100%;padding:32px 34px;font-family:var(--cp);font-size:14px;line-height:1.8;border:1px solid var(--ink)}
.help-box h3{font-family:'Courier New',monospace;font-size:22px;margin-bottom:14px}
.help-box ol{padding-left:20px;margin-bottom:12px}
.help-box li{margin-bottom:8px}
.help-box label{display:block;font:11px var(--cp);letter-spacing:.12em;text-transform:uppercase;margin:16px 0 6px}
.help-box .twm-count{text-transform:none;letter-spacing:0;color:var(--ink-60);margin-left:6px}
.help-box input,.help-box textarea{width:100%;font:14px var(--cp);padding:9px 10px;border:1px solid var(--ink-30);background:#fff;color:var(--ink);box-sizing:border-box}
.help-box .twm-hint{font-size:12px;color:var(--ink-60);margin:6px 0 0;line-height:1.5}
.help-box button{margin-top:10px;font:12px var(--cp);background:var(--ink);color:var(--cream);border:0;padding:9px 18px;cursor:pointer}

@media print{.edit-toolbar,.block-ctl,.shot-ctl,.add-row,.link-pop,.ink-progress,.ink-trail{display:none!important}}