/* =========================================================
   HOME — homepage-specific styling not shared by other templates
   ========================================================= */

/* ---------- halftone decoration ---------- */
.halftone{
  background-image:radial-gradient(var(--ink) 1.4px, transparent 1.4px);
  background-size:14px 14px;
  opacity:.14;
}
.halftone-teal{ background-image:radial-gradient(var(--teal) 1.6px, transparent 1.6px); background-size:16px 16px; }
.hero .halftone{ position:absolute; inset-inline-end:-60px; top:-20px; width:420px; height:420px; border-radius:50%; }
.siso .halftone-teal{ position:absolute; inset-inline-start:-100px; bottom:-100px; width:480px; height:480px; border-radius:50%; opacity:.25; }

/* ---------- hero copy ---------- */
.hero h1{ font-family:var(--ff-display); font-size:clamp(42px, 6.4vw, 84px); line-height:.98; letter-spacing:-.01em; margin-bottom:22px; }
html[dir="rtl"] .hero h1{ font-family:var(--ff-fa); font-weight:900; letter-spacing:0; line-height:1.15; }
.hero h1 .line{ display:block; }
.hero h1 .accent{ font-family:var(--ff-hand); color:var(--coral); font-weight:700; display:inline-block; transform:rotate(-3deg); }
html[dir="rtl"] .hero h1 .accent{ font-family:var(--ff-fa); font-weight:900; transform:none; color:var(--coral); }
.hero p.sub{ font-size:17px; max-width:460px; color:#3a362f; margin-bottom:30px; }
.trust-row{ display:flex; gap:22px; flex-wrap:wrap; font-size:12px; font-weight:600; color:#5b564c; }
.trust-row span{ display:flex; align-items:center; gap:6px; }
.trust-row svg{ width:14px; height:14px; }

.hero__frame{
  position:relative;
  border:var(--border-w) solid var(--ink);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:10px 10px 0 var(--ink);
  background:var(--yellow);
  transform:rotate(1.4deg);
}
.hero__frame img{ width:100%; height:560px; object-fit:cover; object-position:top center; }
@media (max-width:980px){ .hero__frame img{ height:380px; } }

/* ---------- section heading ---------- */
.section-head h2{ font-family:var(--ff-display); font-size:clamp(28px, 4vw, 46px); line-height:1.05; }
html[dir="rtl"] .section-head h2{ font-family:var(--ff-fa); font-weight:900; }
.section-head p{ color:#5b564c; font-size:14px; max-width:340px; }

/* ---------- story ---------- */
.story__img .frame{
  border:var(--border-w) solid var(--ink);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-pop);
  transform:rotate(-1.6deg);
}
.story__img img{ width:100%; height:520px; object-fit:cover; object-position:top; }
@media (max-width:980px){ .story__img img{ height:340px; } }
.story h2{ font-family:var(--ff-display); font-size:clamp(28px, 3.6vw, 44px); line-height:1.1; margin-bottom:22px; }
html[dir="rtl"] .story h2{ font-family:var(--ff-fa); font-weight:900; }
.story p{ font-size:16px; color:#3a362f; margin-bottom:18px; max-width:520px; }
.pullquote{
  font-family:var(--ff-hand); font-size:34px; color:var(--ink);
  margin-block:26px; display:inline-block; position:relative;
  padding-inline-start:16px; border-inline-start:4px solid var(--teal);
}
html[dir="rtl"] .pullquote{ font-family:var(--ff-fa); font-weight:800; font-size:22px; }

/* ---------- siso ---------- */
.siso{ background:var(--ink); color:var(--paper); overflow:hidden; }
.siso__frame{ border:var(--border-w) solid var(--paper); border-radius:var(--radius-lg); overflow:hidden; transform:rotate(2deg); }
.siso__frame img{ width:100%; height:460px; object-fit:cover; object-position:top; }
@media (max-width:980px){ .siso__frame img{ height:320px; } }
.siso .kicker::before{ background:var(--yellow); }
.siso .eyebrow{ background:var(--purple); color:var(--ink); }
.siso h2{ font-family:var(--ff-display); font-size:clamp(30px,4vw,48px); margin-bottom:18px; }
html[dir="rtl"] .siso h2{ font-family:var(--ff-fa); font-weight:900; }
.siso p{ opacity:.85; font-size:16px; max-width:480px; margin-bottom:26px; }

/* ---------- final CTA ---------- */
.final-cta{ background:var(--teal); border-block:var(--border-w) solid var(--ink); }
.final-cta::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(var(--ink) 1.6px, transparent 1.6px);
  background-size:20px 20px; opacity:.08;
}
.final-cta__inner{ position:relative; z-index:2; }
.final-cta h2{ font-family:var(--ff-display); font-size:clamp(32px,5.4vw,64px); margin-bottom:26px; line-height:1.05; }
html[dir="rtl"] .final-cta h2{ font-family:var(--ff-fa); font-weight:900; }
