/* ═══════════════════════════════════════════════════════
   DEVELOPERS PAGE — built on services.css (sticky hero, floating
   blocks, numbered stages, CTA). Only what the page adds lives here.
   ═══════════════════════════════════════════════════════ */

html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* ── HERO — a still instead of the services video, with a slow opening zoom ── */
.dev-hero-img {
  animation:devHeroZoom 9s cubic-bezier(0.22,1,0.36,1) both;
  transform-origin:center 60%;
}
@keyframes devHeroZoom { from { transform:scale(1.14); } to { transform:scale(1); } }
/* a soft light wash behind the text — this hero carries a subtitle and buttons,
   so it needs a little more legibility than the services one */
.dev-hero .services-hero-overlay {
  background:
    radial-gradient(ellipse 60% 45% at 50% 50%, rgba(240,238,234,0.62) 0%, rgba(240,238,234,0) 100%),
    linear-gradient(180deg, rgba(240,238,234,0.30) 0%, rgba(240,238,234,0.08) 40%, rgba(240,238,234,0.38) 100%);
}
.dev-hero .dev-btns { margin-top:34px; }
/* buttons sit on the photo — a soft fill keeps them legible */
.dev-hero .dev-btns .cta-btn { background:rgba(240,238,234,0.62); }
.dev-hero .dev-btns .cta-btn:hover { background:rgba(240,238,234,0.85); }

/* ── BUTTON PAIRS (hero, Shira card, mid CTA, form) ── */
.dev-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.dev-btns .cta-btn { font-family:'Montserrat','Assistant',sans-serif; cursor:pointer; background:none; }

/* ── TEXT CARD — same floating window as the About page cards ── */
.dev-block {
  width:calc(100% - 28px); max-width:1200px; margin:0 auto 24px;
  background:var(--bg);
  padding:88px 64px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  opacity:0; transition:opacity 0.9s ease;
}
.dev-block.visible { opacity:1; }
body.reduce-motion .dev-block { opacity:1; }
.dev-block .section-label,
.dev-contact .section-label {
  font-size:8.5px; letter-spacing:0.26em; text-transform:uppercase;
  color:#7a6a55; opacity:0.60; margin-bottom:24px;
}
.dev-title {
  font-family:'Montserrat','Assistant',sans-serif; font-size:30px; font-weight:300;
  color:#3a2e22; letter-spacing:0.05em; line-height:1.3; margin-bottom:32px;
  max-width:820px;
}
.dev-body {
  max-width:720px;
  font-size:13.5px; line-height:1.95; color:#5a4e40; letter-spacing:0.025em; opacity:0.85;
}
.dev-body p + p { margin-top:22px; }
.dev-block > .dev-btns { margin-top:44px; }

/* About Shira — portrait as on the About page */
.dev-portrait {
  width:160px; height:160px; margin-bottom:32px; display:block;
  object-fit:cover; object-position:center top;
  border-radius:50%; filter:grayscale(1); mix-blend-mode:multiply;
}
.dev-name { margin-bottom:10px; text-transform:uppercase; letter-spacing:0.06em; }
.dev-role {
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:#7a6a55; opacity:0.70; margin-bottom:32px;
}

/* ── THE SEVEN STAGES — services.css .service-block; the wrapper keeps the
      image-left/right alternation counting from stage 01 ── */
.dev-stages .service-block { box-shadow:none; }
.dev-stages .service-name { margin-bottom:22px; }

/* ── MID CTA ── */
.dev-mid-cta { margin-bottom:24px; }

/* the card roller sits inside the flow here (as on About) */
.dev-page .drum-section { margin-bottom:24px; }

/* ── WORK SAMPLES ── */
.dev-work {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  width:100%; max-width:1000px;
}
.dev-work-item { margin:0; }
.dev-work-img {
  aspect-ratio:4/3; overflow:hidden; border-radius:3px;
  background:#e8e4dc; box-shadow:0 16px 40px rgba(58,46,34,0.14);
}
.dev-work-img img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.dev-work-item:hover .dev-work-img img { transform:scale(1.04); }
.dev-work-item figcaption {
  margin-top:18px;
  font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:#7a6a55; opacity:0.75;
}

/* ── CONTACT FORM — same look as the homepage form ── */
.dev-contact {
  position:relative;
  width:calc(100% - 28px); max-width:1200px; margin:0 auto;
  background:#f0eeea;
  box-shadow:inset 0 0 0 1000px rgba(74,56,40,0.04);
  padding:100px 48px;
  scroll-margin-top:90px;   /* clears the fixed nav when jumping here */
}
.dev-contact-head { text-align:center; margin-bottom:56px; }
.dev-contact .dev-title { font-size:34px; margin:0 auto 20px; }
.dev-form-sub {
  font-size:12px; line-height:1.9; color:#5a4e40; opacity:0.78; max-width:480px; margin:0 auto;
}
.dev-form { max-width:480px; margin:0 auto; }
.dev-field { text-align:center; margin-bottom:20px; }
.dev-field label {
  display:inline-block;
  font-size:7.5px; letter-spacing:0.22em; text-transform:uppercase; color:#7a6a55;
}
.dev-field label > span:not(.req), .dev-field label[data-i18n] { opacity:0.65; }
.dev-form input:not([type="checkbox"]), .dev-form select, .dev-form textarea {
  display:block; width:100%; margin-top:10px;
  background:transparent; border:none; border-bottom:0.7px solid rgba(74,56,40,0.25);
  padding:10px 0; font-family:'Montserrat','Assistant',sans-serif;
  font-size:12px; color:#3a2e22; outline:none;
  text-align:center; text-align-last:center;
  transition:border-color 0.3s; -webkit-appearance:none; appearance:none; border-radius:0;
}
.dev-form input:focus, .dev-form select:focus, .dev-form textarea:focus { border-bottom-color:rgba(74,56,40,0.70); }
.dev-form input::placeholder, .dev-form textarea::placeholder { color:rgba(74,56,40,0.28); font-size:11px; }
.dev-form input[type="number"]::-webkit-inner-spin-button,
.dev-form input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.dev-form input[type="number"] { -moz-appearance:textfield; }
.dev-form textarea { resize:none; height:90px; }
.dev-form select { cursor:pointer; }
.dev-form select option { background:#f0eeea; color:#3a2e22; }
.dev-form select.is-empty { color:rgba(122,106,85,0.75); }
.dev-consent { display:flex; flex-direction:column; align-items:center; gap:4px; margin:28px 0 28px; }
.dev-consent-row { display:flex; align-items:center; justify-content:center; gap:10px; }
.dev-consent label { font-size:9px; color:#7a6a55; cursor:pointer; letter-spacing:0.06em; }
.dev-consent a { color:#4a3828; text-decoration:underline; text-underline-offset:2px; }
.dev-form .req { color:#b07a5a; opacity:0.9; }
.dev-form .field-error { display:none; text-align:center; font-size:8.5px; color:#b05a5a; letter-spacing:0.06em; margin-top:4px; }
.dev-form .field-error.visible { display:block; }
.dev-form input.invalid, .dev-form textarea.invalid { border-bottom-color:rgba(176,90,90,0.6); }
.dev-success { display:none; margin-top:20px; text-align:center; font-size:10px; color:#5a7a55; }

/* ── HEBREW ── */
body.lang-he .dev-title,
body.lang-he .dev-stages .service-name,
body.lang-he .services-hero-text h1,
body.lang-he .cta-text { direction:rtl; }
body.lang-he .dev-name { letter-spacing:0.03em; }
body.lang-he .dev-work-item figcaption { font-size:11.5px; letter-spacing:0.08em; }
body.lang-he .dev-field label { font-size:10px; letter-spacing:0.10em; }
body.lang-he .dev-consent label { font-size:10.5px; }
body.lang-he .dev-success { font-size:11px; }
body.lang-he .cta-text { font-style:normal; }

/* ── TABLET (768–1023px — iPad portrait) ── */
@media (min-width:768px) and (max-width:1023px) {
  .dev-block { padding:72px 44px; }
  .service-block { padding:64px 40px; gap:40px; }
  .dev-work { gap:16px; }
}

/* ── MOBILE ── */
@media (max-width:767px) {
  .dev-block { padding:56px 24px; }
  .dev-title { font-size:23px; margin-bottom:24px; }
  .dev-contact { padding:64px 24px; }
  .dev-contact .dev-title { font-size:26px; }
  .dev-portrait { width:130px; height:130px; }
  .dev-block > .dev-btns { margin-top:34px; }
  .dev-work { grid-template-columns:1fr; gap:32px; max-width:420px; }
  .dev-hero .dev-btns { margin-top:28px; }
}

/* emphasized closing line (About Shira) — same weight as <strong> on About */
.dev-body .dev-emph { color:#3a2e22; font-weight:500; }

/* the model sits in the right half of the hero still — keep it in frame on narrow portrait screens */
@media (max-aspect-ratio:1/1) { .dev-hero-img { object-position:72% center; } }

/* the sales plan is a drawing on the page's own colour — no frame or shadow around it */
.dev-work-img.dev-work-plan { background:transparent; box-shadow:none; }
.dev-work-item:hover .dev-work-plan img { transform:none; }